{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"WellLog Widgets","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":"style","attributes":{},"children":["\n/* same rules, but scoped to this page */\nbutton[data-link=\"codesandbox\"] {\n  padding: .5em 1em;\n  background: white;\n  transition: background-color 0.3s ease;\n  border-radius: 5px;\n}\nbutton[data-link=\"codesandbox\"]:hover {\n  background-color: #eeedf4;\n}\nbutton[data-link=\"codesandbox\"] span {\n  color: inherit;\n}\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"welllog-widgets","__idx":0},"children":["WellLog Widgets"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This WellLog tutorial demonstrates how to create WellLog data visualizations. This tutorial assumes familiarity with the separate tutorial ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/introduction"},"children":["WellLog Introduction"]}," . The default WellLog widget has a track container, header container, several default tools and built-in functions. Users can take full advantage of these widget functions and effortlessly add any needed tracts and visuals."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The WellLog widget is configured using options provided in the constructor or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setOptions()"]}," can be called after construction. The widget content is manipulated through add/remove/get-track(). The track content is controlled through track.add/remove/get-Child(). GeoToolkit provides an API to connect data, which can be located on different servers. Refer to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/DataAndTemplates/DataConnection/dataConnection"},"children":["WellLog - Data Connection"]}," tutorial for details."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The widget also provides built-in support for time/depth modes, resizing headers and footers, selection and highlighting, track resizing and supports several default tools. Headers are displayed by default and their attributes can be modified very easily. The WellLog widget allows creating custom WellLog visuals, ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/CompositeMarkers/compositeMarkers"},"children":["Composite Markers"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/MarkerSet/markerSet"},"children":["MarkerSet"]}," , for example. For more details, refer to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/welllog/widgets/WellLogWidget"]}," in the API."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"initialization","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/WellLogWidget/wellLogWidget#initialization"},"children":["#"]}," Initialization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first step is to create the WellLog widget. Then, add visuals to the track and add the tracts to the widget. Finally, insert the widget in the plot."]},{"$$mdtype":"Tag","name":"button","attributes":{"data-link":"codesandbox"},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://codesandbox.io/embed/d4y7gj","target":"_blank","rel":"noopener noreferrer","style":{"textDecoration":"none","color":"inherit"}},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/codepen.8cfdd4ed0e4619780ae37fd104f0c4765d88f43e6e0a6dcc5b04ec753bdedc8c.8b5fa053.svg","width":"24","height":"24","style":{"verticalAlign":"middle","marginRight":".5em"},"alt":"Code icon"},"children":[]},{"$$mdtype":"Tag","name":"span","attributes":{},"children":["\n      CodeSandbox\n    "]}]}]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"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":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { WellLogWidget } from \"@int/geotoolkit/welllog/widgets/WellLogWidget.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { createCurve } from \"/src/code/WellLog/utils/curveData.ts\";\nfunction createScene(canvas) {\n  const widget = new WellLogWidget({\n    \"horizontalscrollable\": false,\n    \"verticalscrollable\": true,\n    \"tools\": {\n      \"cursortracking\": {\n        \"tooltip\": {\n          \"enabled\": true\n        }\n      }\n    }\n  }).setAxisHeaderType(HeaderType.Simple);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"GR\", \"#7cb342\"),\n    createCurve(4500, 10, \"CALI\", \"#ef6c00\")\n  ]);\n  widget.setHeaderHeight(\"auto\");\n  return {\n    plot: new Plot({\n      \"canvaselement\": canvas,\n      \"root\": widget\n    }),\n    widget\n  };\n}\nfunction zoomIn(widget) {\n  widget.scale(5 / 4);\n}\nfunction zoomOut(widget) {\n  widget.scale(4 / 5);\n}\nfunction fitToHeight(widget) {\n  widget.fitToHeight();\n}\nexport { createScene, fitToHeight, zoomIn, zoomOut };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"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/Basics/WellLogWidget/wellLogWidget?section=initialization&extract=true","width":"100%","height":"542.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customization","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/WellLogWidget/wellLogWidget#customization"},"children":["#"]}," Customization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example shows how to add a footer and a custom axis header, how to customize scrollbars and to disable track/plot resizing and cross-hair tool."]},{"$$mdtype":"Tag","name":"button","attributes":{"data-link":"codesandbox"},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://codesandbox.io/embed/v7xz4q","target":"_blank","rel":"noopener noreferrer","style":{"textDecoration":"none","color":"inherit"}},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/codepen.8cfdd4ed0e4619780ae37fd104f0c4765d88f43e6e0a6dcc5b04ec753bdedc8c.8b5fa053.svg","width":"24","height":"24","style":{"verticalAlign":"middle","marginRight":".5em"},"alt":"Code icon"},"children":[]},{"$$mdtype":"Tag","name":"span","attributes":{},"children":["\n      CodeSandbox\n    "]}]}]},{"$$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 { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { WellLogWidget } from \"@int/geotoolkit/welllog/widgets/WellLogWidget.ts\";\nimport { BorderStrategy } from \"@int/geotoolkit/welllog/BorderStrategy.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { LogAxis } from \"@int/geotoolkit/welllog/LogAxis.ts\";\nimport { createCurve } from \"/src/code/WellLog/utils/curveData.ts\";\nfunction initializeCustomAxisHeader(widget) {\n  const axisHeader = widget.getHeaderContainer().getHeaderProvider().getHeaderProvider(LogAxis.getClassName()).clone();\n  axisHeader.setHeaderType(HeaderType.Custom).setFormatHeaderHandler((sender, axis) => {\n    const track = axis.getTrack();\n    const visibleHeight = Math.round(track.getVisibleModelLimits().getHeight() * 100) / 100;\n    const unitInfo = track.getUnitInfo();\n    return \"Depth<br><br>Visible<br>\" + visibleHeight + (unitInfo ? \"<br>(\" + unitInfo.getIndexUnit().getSymbol() + \")\" : \"\");\n  });\n  widget.getHeaderContainer().getHeaderProvider().registerHeaderProvider(LogAxis.getClassName(), axisHeader);\n}\nfunction createScene(canvas) {\n  const widget = new WellLogWidget({\n    \"footer\": {\n      \"visible\": true\n    },\n    \"trackcontainer\": {\n      \"border\": {\n        \"visible\": true\n      },\n      \"track\": {\n        \"borderstrategy\": BorderStrategy.BorderOnTop\n      }\n    },\n    \"border\": {\n      \"visible\": true\n    },\n    \"scroll\": {\n      \"headerverticalscroll\": {\n        \"size\": 11,\n        \"visible\": false,\n        \"options\": {\n          \"rounded\": true,\n          \"resizable\": false\n        }\n      },\n      \"trackverticalscroll\": {\n        \"size\": 11,\n        \"visible\": false,\n        \"options\": {\n          \"rounded\": true,\n          \"resizable\": false\n        }\n      },\n      \"footerverticalscroll\": {\n        \"size\": 11,\n        \"visible\": false,\n        \"options\": {\n          \"rounded\": true,\n          \"resizable\": false\n        }\n      },\n      \"trackhorizontalscroll\": {\n        \"size\": 11,\n        \"visible\": false,\n        \"options\": {\n          \"rounded\": true,\n          \"resizable\": false\n        }\n      }\n    },\n    \"tools\": {\n      \"tracksplitter\": {\n        \"enabled\": false\n      },\n      \"cursortracking\": {\n        \"crosshair\": {\n          \"enabled\": false\n        },\n        \"tooltip\": {\n          \"enabled\": true\n        }\n      }\n    }\n  });\n  initializeCustomAxisHeader(widget);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"GR\", \"#7cb342\"),\n    createCurve(4500, 10, \"CALI\", \"#ef6c00\")\n  ]);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"DLT\", \"#7cb342\"),\n    createCurve(4500, 10, \"RILD\", \"#ef6c00\")\n  ]);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"SP\", \"#7cb342\"),\n    createCurve(4500, 10, \"RHOB\", \"#ef6c00\")\n  ]);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.setHeaderHeight(\"auto\");\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\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/Basics/WellLogWidget/wellLogWidget?section=customization&extract=true","width":"100%","height":"482.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-annotations","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/WellLogWidget/wellLogWidget#customAnnotations"},"children":["#"]}," Custom Annotations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["WellLog widget has customized side annotations. The following table shows available side annotations in the WellLog widget."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Side Annotations"},"children":["Side Annotations"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Preview"},"children":["Preview"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["W: west annotation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["NW: north-west annotation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["SW: south-west annotation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["E: east annotation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["NE: north-east annotation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["SE: south-east annotation"]}]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/sideannotations.266443d39e5019b1ac999ccd5f47b6b4568475ca57dd272a597dd67ab4cc096c.9fe74e7d.png","alt":""},"children":[]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example shows how to add a custom axis and a title into the side annotations."]},{"$$mdtype":"Tag","name":"button","attributes":{"data-link":"codesandbox"},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://codesandbox.io/embed/9kf5c2","target":"_blank","rel":"noopener noreferrer","style":{"textDecoration":"none","color":"inherit"}},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/codepen.8cfdd4ed0e4619780ae37fd104f0c4765d88f43e6e0a6dcc5b04ec753bdedc8c.8b5fa053.svg","width":"24","height":"24","style":{"verticalAlign":"middle","marginRight":".5em"},"alt":"Code icon"},"children":[]},{"$$mdtype":"Tag","name":"span","attributes":{},"children":["\n      CodeSandbox\n    "]}]}]},{"$$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 { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { WellLogWidget } from \"@int/geotoolkit/welllog/widgets/WellLogWidget.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { Text } from \"@int/geotoolkit/scene/shapes/Text.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { Orientation } from \"@int/geotoolkit/util/Orientation.ts\";\nimport { AnnotationLocation } from \"@int/geotoolkit/layout/AnnotationLocation.ts\";\nimport { AxisFactory } from \"@int/geotoolkit/axis/AxisFactory.ts\";\nimport { BorderStrategy } from \"@int/geotoolkit/welllog/BorderStrategy.ts\";\nimport { createCurve } from \"/src/code/WellLog/utils/curveData.ts\";\nfunction createScene(canvas) {\n  const title = createTextShape(\"Depth\");\n  const axisWest = AxisFactory.getInstance().create({\n    \"location\": AnnotationLocation.West\n  });\n  axisWest.getTickGenerator().setMinSpanGrade(\"major\").setMinSpan(50);\n  const widget = new WellLogWidget({\n    \"annotations\": {\n      \"west\": [axisWest],\n      \"northwest\": [title]\n    },\n    \"annotationssizes\": {\n      \"west\": 50\n    },\n    \"trackcontainer\": {\n      \"border\": {\n        \"visible\": true\n      },\n      \"track\": {\n        \"borderstrategy\": BorderStrategy.BorderOnTop\n      }\n    },\n    \"border\": {\n      \"visible\": true\n    },\n    \"horizontalscrollable\": false,\n    \"verticalscrollable\": true,\n    \"tools\": {\n      \"cursortracking\": {\n        \"tooltip\": {\n          \"enabled\": true\n        }\n      }\n    }\n  }).setAxisHeaderType(HeaderType.Simple).connect(axisWest, Orientation.Vertical);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"GR\", \"#7cb342\"),\n    createCurve(4500, 10, \"CALI\", \"#ef6c00\")\n  ]);\n  widget.setHeaderHeight(\"auto\");\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n}\nfunction createTextShape(text) {\n  return new Text({\n    \"text\": text,\n    \"alignment\": AnchorType.Center,\n    \"textstyle\": {\n      \"font\": \"normal 16px Arial\"\n    }\n  });\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/Basics/WellLogWidget/wellLogWidget?section=customAnnotations&extract=true","width":"100%","height":"482.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"track-width","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/WellLogWidget/wellLogWidget#trackWidth"},"children":["#"]}," Track Width"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following code shows how to change track width after initialization."]},{"$$mdtype":"Tag","name":"button","attributes":{"data-link":"codesandbox"},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://codesandbox.io/embed/5hx6pk","target":"_blank","rel":"noopener noreferrer","style":{"textDecoration":"none","color":"inherit"}},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/codepen.8cfdd4ed0e4619780ae37fd104f0c4765d88f43e6e0a6dcc5b04ec753bdedc8c.8b5fa053.svg","width":"24","height":"24","style":{"verticalAlign":"middle","marginRight":".5em"},"alt":"Code icon"},"children":[]},{"$$mdtype":"Tag","name":"span","attributes":{},"children":["\n      CodeSandbox\n    "]}]}]},{"$$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 { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { WellLogWidget } from \"@int/geotoolkit/welllog/widgets/WellLogWidget.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { BorderStrategy } from \"@int/geotoolkit/welllog/BorderStrategy.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { createCurve } from \"/src/code/WellLog/utils/curveData.ts\";\nfunction createScene(canvas) {\n  const widget = new WellLogWidget({\n    \"footer\": {\n      \"visible\": true\n    },\n    \"trackcontainer\": {\n      \"border\": {\n        \"visible\": true\n      },\n      \"track\": {\n        \"borderstrategy\": BorderStrategy.BorderOnTop\n      }\n    },\n    \"border\": {\n      \"visible\": true\n    },\n    \"scroll\": {\n      \"headerverticalscroll\": {\n        \"size\": 11,\n        \"visible\": false,\n        \"options\": {\n          \"rounded\": true,\n          \"resizable\": false\n        }\n      },\n      \"trackverticalscroll\": {\n        \"size\": 11,\n        \"visible\": false,\n        \"options\": {\n          \"rounded\": true,\n          \"resizable\": false\n        }\n      },\n      \"footerverticalscroll\": {\n        \"size\": 11,\n        \"visible\": false,\n        \"options\": {\n          \"rounded\": true,\n          \"resizable\": false\n        }\n      },\n      \"trackhorizontalscroll\": {\n        \"size\": 11,\n        \"visible\": false,\n        \"options\": {\n          \"rounded\": true,\n          \"resizable\": false\n        }\n      }\n    },\n    \"tools\": {\n      \"tracksplitter\": {\n        \"enabled\": false\n      },\n      \"cursortracking\": {\n        \"crosshair\": {\n          \"enabled\": false\n        },\n        \"tooltip\": {\n          \"enabled\": true\n        }\n      }\n    }\n  }).setAxisHeaderType(HeaderType.Simple);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"GR\", \"#7cb342\"),\n    createCurve(4500, 10, \"CALI\", \"#ef6c00\")\n  ]).setWidth(100);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"DLT\", \"#7cb342\"),\n    createCurve(4500, 10, \"RILD\", \"#ef6c00\")\n  ]);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"SP\", \"#7cb342\"),\n    createCurve(4500, 10, \"RHOB\", \"#ef6c00\")\n  ]);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.setHeaderHeight(\"auto\");\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\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/Basics/WellLogWidget/wellLogWidget?section=trackWidth&extract=true","width":"100%","height":"482.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-tool","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/WellLogWidget/wellLogWidget#customTool"},"children":["#"]}," Custom Tool"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following code shows how to customice default tooltip."]},{"$$mdtype":"Tag","name":"button","attributes":{"data-link":"codesandbox"},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://codesandbox.io/embed/q4x2rv","target":"_blank","rel":"noopener noreferrer","style":{"textDecoration":"none","color":"inherit"}},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/codepen.8cfdd4ed0e4619780ae37fd104f0c4765d88f43e6e0a6dcc5b04ec753bdedc8c.8b5fa053.svg","width":"24","height":"24","style":{"verticalAlign":"middle","marginRight":".5em"},"alt":"Code icon"},"children":[]},{"$$mdtype":"Tag","name":"span","attributes":{},"children":["\n      CodeSandbox\n    "]}]}]},{"$$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 { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { WellLogWidget } from \"@int/geotoolkit/welllog/widgets/WellLogWidget.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { LogToolTipRegistry } from \"@int/geotoolkit/welllog/tooltip/LogToolTipRegistry.ts\";\nimport { createCurve } from \"/src/code/WellLog/utils/curveData.ts\";\nfunction createScene(canvas, tooltip) {\n  const registry = LogToolTipRegistry.getDefaultInstance().clone(true);\n  registry.getToolTipFormatter(LogCurve.getClassName()).setFormat([\n    'Color: <span style=\"color:${color}\">${color}</span>',\n    \"Name: ${name}\",\n    \"Nearest Depth: ${sample.depth}\",\n    \"Nearest Value: ${sample.value:#.0000}\",\n    \"Interpolated Depth: ${index}\",\n    \"Interpolated Value: ${value:#.0000}\"\n  ].join(\"<br/>\"));\n  const widget = new WellLogWidget({\n    \"border\": {\n      \"visible\": true\n    },\n    \"horizontalscrollable\": false,\n    \"verticalscrollable\": true,\n    \"tools\": {\n      \"cursortracking\": {\n        \"tooltip\": {\n          \"enabled\": true,\n          \"registry\": registry\n        }\n      }\n    }\n  });\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"GR\", \"#7cb342\"),\n    createCurve(4500, 10, \"CALI\", \"#ef6c00\")\n  ]);\n  widget.setHeaderHeight(\"auto\");\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'), document.querySelector('[ref=\"tooltip\"]'));\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/Basics/WellLogWidget/wellLogWidget?section=customTool&extract=true","width":"100%","height":"482.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"rubber-band-zoom-tool","__idx":6},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/WellLogWidget/wellLogWidget#rubberBandZoomTool"},"children":["#"]}," Rubber Band Zoom Tool"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following code shows how to enable the Rubber Band Zoom tool. The other tools allow Zoom In, Zoom Out, and Fit to Height."]},{"$$mdtype":"Tag","name":"button","attributes":{"data-link":"codesandbox"},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://codesandbox.io/embed/8ymrcy","target":"_blank","rel":"noopener noreferrer","style":{"textDecoration":"none","color":"inherit"}},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/codepen.8cfdd4ed0e4619780ae37fd104f0c4765d88f43e6e0a6dcc5b04ec753bdedc8c.8b5fa053.svg","width":"24","height":"24","style":{"verticalAlign":"middle","marginRight":".5em"},"alt":"Code icon"},"children":[]},{"$$mdtype":"Tag","name":"span","attributes":{},"children":["\n      CodeSandbox\n    "]}]}]},{"$$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 { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { WellLogWidget } from \"@int/geotoolkit/welllog/widgets/WellLogWidget.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { Events as AbstractToolEvents } from \"@int/geotoolkit/controls/tools/AbstractTool.ts\";\nimport { Events as SplitterEvents } from \"@int/geotoolkit/welllog/widgets/tools/Splitter.ts\";\nimport { createCurve } from \"/src/code/WellLog/utils/curveData.ts\";\nimport { Node } from \"@int/geotoolkit/scene/Node.ts\";\nfunction createScene(canvas) {\n  const widget = new WellLogWidget({\n    \"horizontalscrollable\": false,\n    \"verticalscrollable\": true,\n    \"tools\": {\n      \"cursortracking\": {\n        \"tooltip\": {\n          \"enabled\": true\n        }\n      }\n    }\n  }).setAxisHeaderType(HeaderType.Simple);\n  widget.addTrack(TrackType.IndexTrack).setId(\"Fixed Track\");\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"GR\", \"#7cb342\"),\n    createCurve(4500, 10, \"CALI\", \"#ef6c00\")\n  ]).setLayoutStyle({\n    \"minwidth\": 150,\n    \"maxwidth\": 200\n  });\n  widget.addTrack(TrackType.LogTrack).addChild([\n    createCurve(4500, 10, \"DLT\", \"#7cb342\"),\n    createCurve(4500, 10, \"RHOB\", \"#ef6c00\")\n  ]).setLayoutStyle({\n    \"minwidth\": 150,\n    \"maxwidth\": 200\n  });\n  widget.getToolByName(\"cross-hair\").setEnabled(false);\n  widget.getToolByName(\"splitter\").on(SplitterEvents.onCanResize, (evt, sender, event) => {\n    const node = event.getEventTarget();\n    if (node instanceof Node && node.getId() === \"Fixed Track\") {\n      event.reject();\n    }\n  });\n  widget.setHeaderHeight(\"auto\");\n  return {\n    plot: new Plot({\n      \"canvaselement\": canvas,\n      \"root\": widget\n    }),\n    widget\n  };\n}\nfunction addRubberBandListener(widget, listener) {\n  widget.getToolByName(\"rubberband\").on(AbstractToolEvents.onEnabledStateChanged, listener);\n}\nfunction setRubberBandEnabled(widget, enabled) {\n  widget.getToolByName(\"rubberband\").setEnabled(enabled);\n}\nfunction zoomIn(widget) {\n  setRubberBandEnabled(widget, false);\n  widget.scale(5 / 4);\n}\nfunction zoomOut(widget) {\n  setRubberBandEnabled(widget, false);\n  widget.scale(4 / 5);\n}\nfunction fitToHeight(widget) {\n  setRubberBandEnabled(widget, false);\n  widget.fitToHeight();\n}\nexport { addRubberBandListener, createScene, fitToHeight, setRubberBandEnabled, zoomIn, zoomOut };\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/Basics/WellLogWidget/wellLogWidget?section=rubberBandZoomTool&extract=true","width":"100%","height":"542.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"defining-highlights-with-css","__idx":7},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/WellLogWidget/wellLogWidget#highlightCustomization"},"children":["#"]}," Defining Highlights with CSS"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["CSS styles can be used to specify highlighting behavior, customizing CSS styles for specific object classes.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Keep in mind, if you decided to use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'cssclass': 'highlight'"]}," you need to specify CSS rules for all types including visual headers."]},{"$$mdtype":"Tag","name":"button","attributes":{"data-link":"codesandbox"},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://codesandbox.io/embed/qx8p59","target":"_blank","rel":"noopener noreferrer","style":{"textDecoration":"none","color":"inherit"}},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/codepen.8cfdd4ed0e4619780ae37fd104f0c4765d88f43e6e0a6dcc5b04ec753bdedc8c.8b5fa053.svg","width":"24","height":"24","style":{"verticalAlign":"middle","marginRight":".5em"},"alt":"Code icon"},"children":[]},{"$$mdtype":"Tag","name":"span","attributes":{},"children":["\n      CodeSandbox\n    "]}]}]},{"$$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 { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { WellLogWidget } from \"@int/geotoolkit/welllog/widgets/WellLogWidget.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { createCurve } from \"/src/code/WellLog/utils/curveData.ts\";\nfunction createScene(canvas) {\n  const widget = new WellLogWidget({\n    \"highlight\": {\n      \"cssclass\": \"highlight\"\n    },\n    \"footer\": {\n      \"visible\": false\n    },\n    \"horizontalscrollable\": false,\n    \"verticalscrollable\": true,\n    \"tools\": {\n      \"cursortracking\": {\n        \"tooltip\": {\n          \"enabled\": true\n        }\n      }\n    }\n  });\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"GR\", \"#2196f3\")\n  ]);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"CALI\", \"#ef6c00\")\n  ]);\n  const css = `\n         .geotoolkit.welllog.LogTrack:highlight {\n           fillstyle: rgba(0, 100, 100, 0.1);\n           linestyle: 3 solid rgba(0, 100, 100, 1);\n        }\n        .geotoolkit.welllog.LogCurve:highlight {\n           linestyle-width: 4;\n        }\n        .geotoolkit.welllog.header.AdaptiveLogVisualHeader:highlight {\n           fillstyle: rgba(0, 100, 100, 0.1);\n           borderlinestyle: 1px solid rgba(0, 100, 100, 1);\n        }\n    `;\n  widget.setCss(css);\n  widget.setHeaderHeight(\"auto\");\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\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/Basics/WellLogWidget/wellLogWidget?section=highlightCustomization&extract=true","width":"100%","height":"482.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"collapsed-intervals","__idx":8},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Basics/WellLogWidget/wellLogWidget#collapsedIntervals"},"children":["#"]}," Collapsed Intervals"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to create collapsed intervals in the well log."]},{"$$mdtype":"Tag","name":"button","attributes":{"data-link":"codesandbox"},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://codesandbox.io/embed/cstxql","target":"_blank","rel":"noopener noreferrer","style":{"textDecoration":"none","color":"inherit"}},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/codepen.8cfdd4ed0e4619780ae37fd104f0c4765d88f43e6e0a6dcc5b04ec753bdedc8c.8b5fa053.svg","width":"24","height":"24","style":{"verticalAlign":"middle","marginRight":".5em"},"alt":"Code icon"},"children":[]},{"$$mdtype":"Tag","name":"span","attributes":{},"children":["\n      CodeSandbox\n    "]}]}]},{"$$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 { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { WellLogWidget } from \"@int/geotoolkit/welllog/widgets/WellLogWidget.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { CollapsedIntervalTool } from \"@int/geotoolkit/welllog/widgets/tools/CollapsedIntervalTool.ts\";\nimport { LineDecoration } from \"@int/geotoolkit/attributes/LineDecoration.ts\";\nimport { CirclePainter } from \"@int/geotoolkit/scene/shapes/painters/CirclePainter.ts\";\nimport { Range } from \"@int/geotoolkit/util/Range.ts\";\nimport { createCurve } from \"/src/code/WellLog/utils/curveData.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nfunction createScene(canvas) {\n  const widget = new WellLogWidget({\n    \"horizontalscrollable\": false,\n    \"verticalscrollable\": true,\n    \"tools\": {\n      \"crosshair\": {\n        \"west\": {\n          \"visible\": true,\n          \"paddingstyle\": \"5px\",\n          \"offset\": 10,\n          \"linestyle\": \"black\",\n          \"fillstyle\": \"white\",\n          \"alignment\": AnchorType.LeftBottom\n        }\n      },\n      \"cursortracking\": {\n        \"tooltip\": {\n          \"enabled\": true\n        }\n      }\n    },\n    \"collapsed\": {\n      \"intervals\": [\n        { \"range\": new Range(3600, 3800), \"collapsed\": true },\n        { \"range\": new Range(4600, 4700), \"collapsed\": true },\n        { \"range\": new Range(4820, 5580), \"collapsed\": false }\n      ],\n      \"marker\": {\n        \"collapsed\": {\n          \"line\": {\n            \"color\": \"#e64a19\",\n            \"width\": 3,\n            \"decoration\": LineDecoration.Solid\n          },\n          \"symbol\": {\n            \"size\": 10,\n            \"painter\": CirclePainter,\n            \"fillstyle\": \"#1047b9\"\n          }\n        },\n        \"uncollapsed\": {\n          \"line\": {\n            \"color\": \"#e64a19\",\n            \"width\": 1,\n            \"decoration\": LineDecoration.Solid\n          },\n          \"symbol\": {\n            \"size\": 10,\n            \"painter\": CirclePainter,\n            \"fillstyle\": \"#1047b9\"\n          }\n        }\n      }\n    }\n  }).setAxisHeaderType(HeaderType.Simple);\n  widget.getTool().add(new CollapsedIntervalTool(widget));\n  const cali = createCurve(4500, 10, \"CALI\", \"#ef6c00\").setNormalizationLimits(6, 20);\n  for (let i = 20; i < 25; i++) {\n    cali.getDataSource().setValue(i, cali.getDataSource().getValue(i) + 5);\n  }\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"GR\", \"#7cb342\"),\n    cali\n  ]);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createCurve(4500, 10, \"SP\", \"#7cb342\"),\n    createCurve(4500, 10, \"RHOB\", \"#ef6c00\")\n  ]);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.setHeaderHeight(\"auto\");\n  return {\n    plot: new Plot({\n      \"canvaselement\": canvas,\n      \"root\": widget\n    }),\n    widget\n  };\n}\nfunction zoomIn(widget) {\n  widget.scale(5 / 4);\n}\nfunction zoomOut(widget) {\n  widget.scale(4 / 5);\n}\nfunction fitToHeight(widget) {\n  widget.fitToHeight();\n}\nexport { createScene, fitToHeight, zoomIn, zoomOut };\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/Basics/WellLogWidget/wellLogWidget?section=collapsedIntervals&extract=true","width":"100%","height":"542.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"WellLog Widgets","id":"welllog-widgets","depth":1},{"value":"Initialization","id":"initialization","depth":3},{"value":"Customization","id":"customization","depth":3},{"value":"Custom Annotations","id":"custom-annotations","depth":3},{"value":"Track Width","id":"track-width","depth":3},{"value":"Custom Tool","id":"custom-tool","depth":3},{"value":"Rubber Band Zoom Tool","id":"rubber-band-zoom-tool","depth":3},{"value":"Defining Highlights with CSS","id":"defining-highlights-with-css","depth":3},{"value":"Collapsed Intervals","id":"collapsed-intervals","depth":3}],"frontmatter":{"title":"WellLog Widgets","seo":{"title":"WellLog Widgets"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/basics/well-log-widget","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}