{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Widgets Interaction","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":"widgets-interaction","__idx":0},"children":["Widgets Interaction"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This Widgets Interaction tutorial demonstrates how the WellLog widget can interact with the Cross Plot and Histogram widget. All these widgets are created separately and added to the one canvas. Multiple layers in one canvas can be synchronized automatically because they are located in the same plot, correlating the depths of points in the WellLog with the corresponding depths of points in the Cross Plot. If the widgets are located in different plots, then the scale can be synchronized similar to plot synchronization."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the Widgets below, the tools like polygon selection and selection tool can be used to select specific data points. These selected points will be marked in the WellLog Widget. The Rubber band zoom tool helps to further analyse these points."]},{"$$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 \"@int/geotoolkit/src/geotoolkit/report/Parser.ts\";\nimport { from } from \"@int/geotoolkit/selection/from.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { Point } from \"@int/geotoolkit/util/Point.ts\";\nimport { Events as CrossHairEvents } from \"@int/geotoolkit/controls/tools/CrossHair.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 { Events as SplitterEvents, Splitter } from \"@int/geotoolkit/controls/tools/splitter/Splitter.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { HorizontalBoxLayout } from \"@int/geotoolkit/layout/HorizontalBoxLayout.ts\";\nimport { VerticalBoxLayout } from \"@int/geotoolkit/layout/VerticalBoxLayout.ts\";\nimport { Events as SelectionEvents } from \"@int/geotoolkit/controls/tools/Selection.ts\";\nimport { SelectionMode } from \"@int/geotoolkit/controls/tools/SelectionMode.ts\";\nimport { Events as AbstractToolEvents } from \"@int/geotoolkit/controls/tools/AbstractTool.ts\";\nimport { Events as PolygonSelectionEvents } from \"@int/geotoolkit/controls/tools/PolygonSelection.ts\";\nimport { ReportML } from \"/src/code/WellLog/AdditionalFunctionality/WidgetsInteraction/reports/ReportML.ts\";\nimport { defaultHighlightCallback } from \"@int/geotoolkit/charts/widgets/ChartWidget.ts\";\nimport { NodeOrder } from \"@int/geotoolkit/scene/CompositeNode.ts\";\nimport { Events as DomEvents } from \"@int/geotoolkit/dom.ts\";\nimport { Grid } from \"@int/geotoolkit/axis/Grid.ts\";\nimport { PseudoClass } from \"@int/geotoolkit/css/CssStyle.ts\";\nimport { Transformation } from \"@int/geotoolkit/util/Transformation.ts\";\nimport { Orientation } from \"@int/geotoolkit/util/Orientation.ts\";\nimport { initializeWellLogWidget } from \"/src/code/WellLog/AdditionalFunctionality/WidgetsInteraction/widgets/welllog.ts\";\nimport { Data } from \"/src/code/WellLog/AdditionalFunctionality/WidgetsInteraction/data/data.ts\";\nimport { initializeCrossPlotWidget } from \"/src/code/WellLog/AdditionalFunctionality/WidgetsInteraction/widgets/crossplot.ts\";\nimport { initializeHistogramWidget } from \"/src/code/WellLog/AdditionalFunctionality/WidgetsInteraction/widgets/histogram.ts\";\nimport { exportToPdf } from \"/src/code/WellLog/AdditionalFunctionality/WidgetsInteraction/reports/exportToPdf.ts\";\nimport { SelectedItem } from \"@int/geotoolkit/selection/SelectedItem.ts\";\nimport { CrossPlotChart } from \"@int/geotoolkit/charts/CrossPlotChart.ts\";\nfunction getDepths(dataSource, indices, offset) {\n  const dataSourceDepths = dataSource.getDepths();\n  const depths = [];\n  for (let i = 0; i < indices.length; i++) {\n    depths.push(dataSourceDepths[indices[i] + offset]);\n  }\n  return depths;\n}\nconst __tmpTransformation = new Transformation();\nclass WidgetsInteraction {\n  constructor(setRubberBandSelectionButton, setPolygonSelectionButton, setZoomButton) {\n    this._wellLogWidget = null;\n    this._crossPlotWidget = null;\n    this._histogramWidget = null;\n    this._activeHistogram = null;\n    this._prevOffset = 0;\n    this._offset = 0;\n    this.setRubberBandSelectionButton = setRubberBandSelectionButton;\n    this.setPolygonSelectionButton = setPolygonSelectionButton;\n    this.setZoomButton = setZoomButton;\n    this._data = new Data();\n  }\n  synchronizeDataViewLimits() {\n    const limits = this._wellLogWidget.getVisibleDepthLimits();\n    const fromIndex = this._data.getLongestLogDataSource().getIndexAt(limits.getLow()) || 0;\n    const toIndex = this._data.getLongestLogDataSource().getIndexAt(limits.getHigh()) || 0;\n    this._data.updateLimitsFilter(fromIndex, toIndex);\n    const selection = this._data.getChartDataSource().getSelection().getSelection(PseudoClass.Selection);\n    const result = {};\n    for (const series in selection) {\n      result[series] = selection[series].map((sample) => this._offset + sample - fromIndex);\n    }\n    this._offset = fromIndex;\n    this._data.getChartDataSource().getSelection().setSelection(result, PseudoClass.Selection);\n  }\n  initializeWellLog() {\n    const widget = initializeWellLogWidget(this._data);\n    widget.getToolByName(\"cross-hair\").setEnabled(true).on(CrossHairEvents.onPositionChanged, (event, sender, args) => {\n      const position = args.getPosition();\n      if (isNaN(position.getY()) || isNaN(position.getX())) {\n        this._crossPlotWidget.getToolByName(\"cross-hair\").setPosition(new Point(NaN, NaN));\n        return;\n      }\n      const index = this._data.getLogDataSource(\"GR\").getIndexAt(position.getY());\n      const pos = [];\n      [this._data.getLogDataSource(\"GR\"), this._data.getLogDataSource(\"CALI\")].forEach((logData) => {\n        pos.push(logData.getValue(index));\n      });\n      const crossPlotModelLimits = this._crossPlotWidget.getChart(\"crossplot\").getOverlay().getModelLimits();\n      const crossHairModelLimits = this._crossPlotWidget.getManipulatorLayer().getModelLimits();\n      const crossHairPosition = new Point(pos[0], pos[1]);\n      Transformation.getRectToRectInstance(crossPlotModelLimits, crossHairModelLimits, false, true, false, __tmpTransformation);\n      __tmpTransformation.transformPoint(crossHairPosition, crossHairPosition);\n      this._crossPlotWidget.getToolByName(\"cross-hair\").setPosition(crossHairPosition);\n    });\n    widget.getToolByName(\"rubberband\").setAutoDisabled(true).on(AbstractToolEvents.onEnabledStateChanged, (event, sender) => {\n      this.setZoomButton(sender.isEnabled());\n    });\n    widget.on(WellLogEvents.VisibleDepthLimitsChanged, () => {\n      this._prevOffset = this._offset;\n      this.synchronizeDataViewLimits();\n    });\n    return widget;\n  }\n  initializeCrossPlot(settings) {\n    const crossPlotWidget = initializeCrossPlotWidget(this._data, settings);\n    const selectionTool = crossPlotWidget.getToolByName(\"pick\");\n    selectionTool.setAutoDisabled(true).on(SelectionEvents.onSelectionChanged, (evt, sender, eventArgs) => {\n      const selection = eventArgs.getSelection();\n      for (let i = 0; i < selection.length; i++) {\n        const item = selection[i];\n        if (item instanceof SelectedItem && item.getData(CrossPlotChart)) {\n          const data = item.getData(CrossPlotChart);\n          this.selectCrossPlotIndices(data[\"GR\"]);\n          break;\n        }\n      }\n    }).setSelectionMode(SelectionMode.RubberBand).on(AbstractToolEvents.onEnabledStateChanged, (event, sender) => {\n      this.setRubberBandSelectionButton(sender.isEnabled());\n    });\n    crossPlotWidget.getToolByName(\"polygon-selection\").on(PolygonSelectionEvents.onSelectionEnd, (evt, sender, eventArgs) => {\n      const selection = eventArgs.getSelection();\n      for (let i = 0; i < selection.length; i++) {\n        const item = selection[i];\n        if (item instanceof SelectedItem && item.getData(CrossPlotChart)) {\n          const data = item.getData(CrossPlotChart);\n          this.selectCrossPlotIndices(data[\"GR\"]);\n          break;\n        }\n      }\n    }).on(AbstractToolEvents.onEnabledStateChanged, (event, sender) => {\n      this.setPolygonSelectionButton(sender.isEnabled());\n    });\n    return crossPlotWidget;\n  }\n  selectCrossPlotIndices(indices, reset) {\n    const selection = this._data.getChartDataSource().getSelection();\n    if (reset)\n      selection.clear({ \"state\": PseudoClass.Selection });\n    if (indices.length > 0) {\n      selection.select({\n        \"GR\": indices,\n        \"CALI\": indices,\n        \"SP\": indices\n      }, PseudoClass.Selection);\n    }\n    this.updateHighlightedWellLogDepths();\n  }\n  activateHistogram(histogram) {\n    if (this._activeHistogram === histogram) {\n      return this;\n    }\n    this._activeHistogram = histogram;\n    const logCurve = from(this._wellLogWidget).where((node) => node instanceof LogCurve).where((node) => node.getDataSource().getName() === histogram).selectFirst();\n    this._wellLogWidget.getToolByName(\"pick\").setSelection([logCurve]);\n    from(this._histogramWidget.getModel()).where((node) => node instanceof Grid).select((grid) => {\n      this._histogramWidget.getModel().changeChildOrder(grid.getParent(), NodeOrder.First);\n    });\n    this._histogramWidget.changeChartOrder(this._histogramWidget.getChart(histogram), NodeOrder.Last);\n    return this;\n  }\n  initializeHistogram(settings) {\n    const highlightedId = \"GR\";\n    const widget = initializeHistogramWidget(this._data, settings);\n    widget.setProperties({\n      \"highlight\": {\n        \"callback\": (items, event, args) => {\n          switch (event) {\n            case DomEvents.Hover:\n            case DomEvents.Leave:\n              defaultHighlightCallback.call(widget, items, event, args);\n              break;\n            case DomEvents.Click:\n              if (items.length === 0) {\n                this.resetSelection();\n                return;\n              }\n              const item = items[0];\n              const selection = widget.getDataSource().getSelection();\n              const name = item.getSender().getName();\n              selection.toggle(item.getData(), PseudoClass.Selection);\n              this.updateHighlightedWellLogDepths();\n              this.activateHistogram(name);\n          }\n        }\n      }\n    });\n    this._activeHistogram = highlightedId;\n    widget.changeChartOrder(widget.getChart(highlightedId), NodeOrder.Last);\n    return widget;\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  updateHighlightedWellLogDepths() {\n    const selection = this._data.getChartDataSource().getSelection().getSelection(PseudoClass.Selection) || {};\n    const indices = [].concat(...Object.values(selection)).sort((a, b) => a - b);\n    for (let i = 1; i < indices.length; ) {\n      if (indices[i] === indices[i - 1]) {\n        indices.splice(i, 1);\n      } else {\n        i++;\n      }\n    }\n    this._wellLogWidget.setDepthMarkers(getDepths(this._data.getLogDataSource(\"GR\"), indices, this._offset), \"rgba(255, 0, 0, 0.5)\");\n  }\n  toggleRubberBandSelection() {\n    this._crossPlotWidget.getToolByName(\"pick\").toggle();\n    this._crossPlotWidget.getToolByName(\"polygon-selection\").setEnabled(false);\n  }\n  togglePolygonSelection() {\n    this._crossPlotWidget.getToolByName(\"polygon-selection\").toggle();\n    this._crossPlotWidget.getToolByName(\"pick\").setEnabled(false);\n  }\n  resetSelection() {\n    this.selectCrossPlotIndices([], true);\n  }\n  initialize(canvas) {\n    this._plot = new Plot({\n      \"canvaselement\": canvas,\n      \"root\": new Group().setAutoModelLimitsMode(true).setLayout(new HorizontalBoxLayout()).addChild([\n        this._wellLogWidget = this.initializeWellLog().setMarginsStyle({\n          \"right\": \"5px\"\n        }).setLayoutStyle({\n          \"width\": \"300px\"\n        }),\n        this._widgetsContainer = new Group().setLayout(new VerticalBoxLayout()).setLayoutStyle({\n          \"width\": \"495px\"\n        }).addChild([\n          this._crossPlotWidget = this.initializeCrossPlot({\n            \"x\": \"GR\",\n            \"y\": \"CALI\",\n            \"z\": \"SP\"\n          }).setLayoutStyle({\n            \"height\": \"50%\"\n          }),\n          this._histogramWidget = this.initializeHistogram({\n            \"GR\": {\n              \"color\": KnownColors.Green\n            },\n            \"CALI\": {\n              \"color\": KnownColors.Orange\n            },\n            \"SP\": {\n              \"color\": KnownColors.Blue\n            }\n          }).setLayoutStyle({\n            \"height\": \"50%\"\n          })\n        ])\n      ])\n    });\n    this._wellLogWidget.setHeaderHeight(\"auto\").fitToHeight().fitToWidth();\n    this._wellLogWidget.getToolByName(\"splitter\").setEnabled(false);\n    this._plot.getTool().add([\n      new Splitter({\n        \"mouseradius\": 5,\n        \"name\": \"vertical-splitter\",\n        \"orientation\": Orientation.Vertical,\n        \"layer\": this._plot.getRoot()\n      }).setPlots([this._wellLogWidget, this._widgetsContainer]).on(SplitterEvents.onPlotSizeChanged, () => {\n        this._wellLogWidget.fitToWidth();\n      }),\n      new Splitter({\n        \"name\": \"horizontal-splitter\",\n        \"orientation\": Orientation.Horizontal,\n        \"layer\": this._widgetsContainer\n      }).setPlots([this._crossPlotWidget, this._histogramWidget])\n    ]);\n  }\n  exportToPDF(options, printHighlights) {\n    let oldSelection = null;\n    return exportToPdf(options, (cgDomDocument) => {\n      if (!printHighlights) {\n        oldSelection = this._data.getChartDataSource().getSelection();\n        this._data.getChartDataSource().removeSelection();\n      }\n      const highlightedDepths = printHighlights ? this._wellLogWidget.getDepthMarkers() : null;\n      const wellLogNode = from(cgDomDocument).where((node) => node instanceof ReportML.Nodes.WellLog).selectFirst();\n      if (wellLogNode != null) {\n        const template = this._wellLogWidget.saveTemplate();\n        const templateJSON = JSON.parse(template);\n        wellLogNode.setDataSources({\n          \"GR\": this._data.getLogDataSource(\"GR\"),\n          \"CALI\": this._data.getLogDataSource(\"CALI\"),\n          \"SP\": this._data.getLogDataSource(\"SP\")\n        }).setDepthLimits(this._wellLogWidget.getVisibleDepthLimits()).setVisibleDepthLimits(this._wellLogWidget.getVisibleDepthLimits()).setTemplate(templateJSON).setDepthMarkers(highlightedDepths);\n      }\n      const dataViews = {\n        \"GR\": this._data.getDataView(\"GR\"),\n        \"CALI\": this._data.getDataView(\"CALI\"),\n        \"SP\": this._data.getDataView(\"SP\")\n      };\n      const crossPlotNode = from(cgDomDocument).where((node) => node instanceof ReportML.Nodes.CrossPlot).selectFirst();\n      if (crossPlotNode != null) {\n        const crossPlotModelLimits = this._crossPlotWidget.getChart(\"crossplot\").getOverlay().getModelLimits().clone();\n        crossPlotNode.setModelLimits(crossPlotModelLimits);\n        crossPlotNode.setDataSource(this._data);\n      }\n      const multiHistogramsNode = from(cgDomDocument).where((node) => node instanceof ReportML.Nodes.MultiHistogram).selectFirst();\n      if (multiHistogramsNode != null) {\n        const histogramHighlight = {};\n        for (const name in dataViews) {\n          histogramHighlight[name] = printHighlights ? this._data.getChartDataSource().getSelection().getIndices(name, PseudoClass.Selection) : [];\n        }\n        multiHistogramsNode.setDataSource(this._data).setHighlight(histogramHighlight).setActiveHistogram(this._activeHistogram);\n      }\n      return cgDomDocument;\n    }).finally(() => {\n      if (oldSelection) {\n        this._data.getChartDataSource().setSelection(oldSelection);\n      }\n    });\n  }\n  getPlot() {\n    return this._plot;\n  }\n}\nfunction createScene(canvas, setRubberBandSelectionButton, setPolygonSelectionButton, setZoomButton) {\n  const app = new WidgetsInteraction(setRubberBandSelectionButton, setPolygonSelectionButton, setZoomButton);\n  app.initialize(canvas);\n  return app;\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'), this.setRubberBandSelectionButton, this.setPolygonSelectionButton, this.setZoomButton);\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/WidgetsInteraction/widgetsInteraction?section=widgetsPlotInteraction&extract=true","width":"100%","height":"849.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"welllog-widget-initialization","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/WidgetsInteraction/widgetsInteraction#wellLogWidgetInitialization"},"children":["#"]}," WellLog Widget Initialization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following code shows how to initialize WellLog Widget tools to interact with other Widgets."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"cross-plot-widget-initialization","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/WidgetsInteraction/widgetsInteraction#crossPlotWidgetInitialization"},"children":["#"]}," Cross Plot Widget Initialization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following code shows how to initialize Cross Plot tools interact with WellLog Widget."]}]},"headings":[{"value":"Widgets Interaction","id":"widgets-interaction","depth":1},{"value":"WellLog Widget Initialization","id":"welllog-widget-initialization","depth":3},{"value":"Cross Plot Widget Initialization","id":"cross-plot-widget-initialization","depth":3}],"frontmatter":{"title":"Widgets Interaction","seo":{"title":"Widgets Interaction"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/additional-functionality/widgets-interaction","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}