{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Navigation View","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"navigation-view","__idx":0},"children":["Navigation View"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial demonstrates how to create a Navigation view for WellLog widget. The navigation tool (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/welllog/widgets/tools/Navigation"]},") is added to the WellLog Widget to create a Navigation widget. Both widgets are created separately and added to one canvas. If these widgets are located in different plots, the scale can be synchronized in a manner similar to plot synchronization."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"welllog-widget-initialization","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/NavigationView/navigationView#wellLogWidgetInitialization"},"children":["#"]}," WellLog Widget Initialization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following code shows how to initialize WellLog widget tools. See the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/WellLogWidget/wellLogWidget"},"children":["WellLog Widget"]}," tutorial."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"navigation-initialization","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/NavigationView/navigationView#navigationInitialization"},"children":["#"]}," Navigation Initialization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following code shows how to initialize the Navigation Tools"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"welllog-navigation","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/NavigationView/navigationView#wellLogNavigation"},"children":["#"]}," WellLog Navigation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the example below, the Navigation widget is displayed on the left. Adding a listener to the WellLog widget will allow the widget to change display on curve selection. Similarly, attaching listenings will allow for WellLog widget visible limits to be updated in real-time in accord with changing visible model limits in the Navigation widget."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { ColorUtil, KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { MathUtil } from \"@int/geotoolkit/util/MathUtil.ts\";\nimport { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { AdaptiveLogCurveVisualHeader, Elements } from \"@int/geotoolkit/welllog/header/AdaptiveLogCurveVisualHeader.ts\";\nimport { TrackType as WellLogTrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { Events as WellLogEvents } from \"@int/geotoolkit/welllog/widgets/Events.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { from } from \"@int/geotoolkit/selection/from.ts\";\nimport { Events as SelectionEvents } from \"@int/geotoolkit/controls/tools/Selection.ts\";\nimport { Axis } from \"@int/geotoolkit/axis/Axis.ts\";\nimport { Events as NavigationEvents, Navigation } from \"@int/geotoolkit/welllog/widgets/tools/Navigation.ts\";\nimport { Sections } from \"@int/geotoolkit/welllog/header/AdaptiveLogVisualHeader.ts\";\nimport { curveData } from \"/src/code/WellLog/utils/curveData.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nimport { HorizontalBoxLayout } from \"@int/geotoolkit/layout/HorizontalBoxLayout.ts\";\nfunction createTestData(from2, step, curveMnemonic) {\n  const depths = [];\n  const values = [];\n  const curveDat = curveData[curveMnemonic];\n  const amountOfPoints = curveDat.length;\n  for (let i = 0; i < amountOfPoints; i++) {\n    depths.push(i * step + from2);\n    values.push(curveDat[i]);\n  }\n  return new LogData({\n    \"name\": curveMnemonic,\n    \"depths\": depths,\n    \"values\": values\n  });\n}\nfunction createCurve(dataSource, color) {\n  const limits = MathUtil.calculateNeatLimits(dataSource.getMinValue(), dataSource.getMaxValue(), false, false);\n  return new LogCurve(dataSource).setLineStyle(ColorUtil.parseColor(color)).setNormalizationLimits(limits.getLow(), limits.getHigh());\n}\nclass NavigationView {\n  constructor() {\n    this._wellLogWidget = null;\n    this._navigationWidget = null;\n    this._dataSources = {\n      \"GR\": createTestData(4500, 10, \"GR\"),\n      \"CALI\": createTestData(4500, 10, \"CALI\"),\n      \"SP\": createTestData(4500, 10, \"SP\")\n    };\n  }\n  initializeWellLog() {\n    const widget = createWellLogWidget({\n      \"indent\": 2\n    }).setDepthLimits(this._dataSources[\"GR\"].getMinDepth(), this._dataSources[\"GR\"].getMaxDepth());\n    widget.getHeaderContainer().getHeaderProvider().registerHeaderProvider(\n      LogCurve.getClassName(),\n      new AdaptiveLogCurveVisualHeader().setElement([Elements.ScaleFrom, Elements.ScaleTo], { \"section\": Sections.Top }).setElement(Elements.Tracking, { \"section\": Sections.Top })\n    );\n    widget.addTrack(WellLogTrackType.LinearTrack).addChild([createCurve(this._dataSources[\"GR\"], KnownColors.Green)]);\n    widget.addTrack(WellLogTrackType.LinearTrack).addChild([createCurve(this._dataSources[\"CALI\"], KnownColors.Orange)]);\n    widget.addTrack(WellLogTrackType.LinearTrack).addChild([createCurve(this._dataSources[\"SP\"], KnownColors.Blue)]);\n    widget.addTrack(WellLogTrackType.IndexTrack).setWidth(35);\n    widget.setHeaderHeight(\"auto\");\n    widget.getToolByName(\"splitter\").setEnabled(false);\n    widget.getToolByName(\"pick\").on(SelectionEvents.onSelectionChanged, (evt, sender, eventArgs) => {\n      eventArgs.getSelection().forEach((selection) => {\n        if (selection instanceof LogCurve) {\n          from(this._navigationWidget).where((node) => node instanceof LogCurve).select((curve) => {\n            curve.setLineStyle(selection.getLineStyle()).setData(selection.getDataSource(), true, true);\n          });\n        }\n      });\n    });\n    return widget;\n  }\n  initializeNavigation() {\n    const widget = createWellLogWidget({\n      \"horizontalscrollable\": false,\n      \"verticalscrollable\": false,\n      \"header\": {\n        \"visible\": false\n      },\n      \"border\": { \"visible\": true }\n    }).setDepthLimits(this._dataSources[\"GR\"].getMinDepth(), this._dataSources[\"GR\"].getMaxDepth());\n    widget.addTrack(WellLogTrackType.IndexTrack).setWidth(40);\n    from(widget).where((node) => node instanceof Axis).selectFirst().setLabelPadding(4);\n    widget.addTrack(WellLogTrackType.LinearTrack).addChild([createCurve(this._dataSources[\"GR\"], KnownColors.Green)]).setWidth(100);\n    widget.getToolByName(\"pick\").setEnabled(false);\n    widget.getToolByName(\"splitter\").setEnabled(false);\n    widget.getToolByName(\"cross-hair\").setEnabled(false);\n    widget.getToolByName(\"TrackPanning\").setEnabled(false);\n    return widget;\n  }\n  initializeNavigationTools() {\n    const manipulatorLayer = this._navigationWidget.getToolByName(\"cross-hair\").getManipulatorLayer();\n    const navigationTool = new Navigation(manipulatorLayer).on(NavigationEvents.DepthRangeChanged, (evt, sender, eventArgs) => {\n      this._wellLogWidget.setVisibleDepthLimits(eventArgs.getLimits());\n    });\n    navigationTool.setVisibleDepthLimits(this._wellLogWidget.getVisibleDepthLimits());\n    const setVisibleDepthLimits = function() {\n      navigationTool.setVisibleDepthLimits(this._wellLogWidget.getVisibleDepthLimits());\n    }.bind(this);\n    this._wellLogWidget.on(WellLogEvents.DepthRangeChanged, setVisibleDepthLimits);\n    this._wellLogWidget.on(WellLogEvents.VisibleDepthLimitsChanged, setVisibleDepthLimits);\n    return navigationTool;\n  }\n  disableRubberBand() {\n    this._wellLogWidget.getToolByName(\"rubberband\").setEnabled(false);\n  }\n  zoomIn() {\n    this._wellLogWidget.scale(5 / 4);\n    this.disableRubberBand();\n  }\n  zoomOut() {\n    this._wellLogWidget.scale(4 / 5);\n    this.disableRubberBand();\n  }\n  fitToHeight() {\n    this._wellLogWidget.fitToHeight();\n    this.disableRubberBand();\n  }\n  rubberBandZoom() {\n    this._wellLogWidget.getToolByName(\"rubberband\").setEnabled(true);\n  }\n  init(canvas) {\n    this._plot = new Plot({\n      \"canvaselement\": canvas,\n      \"root\": new Group().setAutoModelLimitsMode(true).setLayout(new HorizontalBoxLayout()).addChild([\n        this._navigationWidget = this.initializeNavigation().setLayoutStyle({\n          \"width\": 140\n        }).setMarginsStyle({ right: \"2px\" }),\n        this._wellLogWidget = this.initializeWellLog().setLineStyle(\"lightgray\").setMarginsStyle({ left: \"2px\" })\n      ])\n    });\n    const gr = this._dataSources[\"GR\"];\n    const minDepth = gr.getMinDepth();\n    const maxDepth = gr.getMaxDepth();\n    this._wellLogWidget.setVisibleDepthLimits(minDepth, minDepth + (maxDepth - minDepth) / 4).fitToWidth();\n    this._navigationWidget.fitToHeight().getTool().add([\n      this.initializeNavigationTools()\n    ]);\n  }\n  getPlot() {\n    return this._plot;\n  }\n  getWidget() {\n    return this._wellLogWidget;\n  }\n}\nfunction createScene(canvas) {\n  const app = new NavigationView();\n  app.init(canvas);\n  return app;\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/AdditionalFunctionality/NavigationView/navigationView?section=wellLogNavigation&extract=true","width":"100%","height":"536.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Navigation View","id":"navigation-view","depth":1},{"value":"WellLog Widget Initialization","id":"welllog-widget-initialization","depth":3},{"value":"Navigation Initialization","id":"navigation-initialization","depth":3},{"value":"WellLog Navigation","id":"welllog-navigation","depth":3}],"frontmatter":{"title":"Navigation View","seo":{"title":"Navigation View"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/additional-functionality/navigation-view","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}