{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Annotation","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":"annotation","__idx":0},"children":["Annotation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial shows how different visuals can be used to display text annotations on the tracks in WellLog. An annotation is an additional visual, either text or graphics, added to provide further clarification."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"annotations-with-logmudlogsection","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/Annotation/annotation#annotationsLogMudLogSection"},"children":["#"]}," Annotations with LogMudLogSection"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogMudLogSection"]}," is an interval containing comments or text. It can be created with a set of depths or time indices and text annotations for each index. Each section extends from specified index to the next index in the array. If the text is too large and cannot fit, the visual tries to display a part of the text and also use customizable ellipses (...) to indicate more text exists, but is not displayed."]},{"$$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 { LogMudLogSection } from \"@int/geotoolkit/welllog/LogMudLogSection.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { depths, descs } from \"/src/code/WellLog/Visuals/Annotation/js/data.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createScene(canvas) {\n  const widget = createWellLogWidget().setDepthLimits(depths[0], depths[depths.length - 1]).setDepthScale(30).setAxisHeaderType(HeaderType.Scale);\n  const annotationHeader = widget.getHeaderContainer().getHeaderProvider().getHeaderProvider(LogMudLogSection.getClassName());\n  widget.getHeaderContainer().getHeaderProvider().registerHeaderProvider(LogMudLogSection.getClassName(), annotationHeader.clone().setVisible(true));\n  widget.addTrack(TrackType.IndexTrack);\n  const styles = [\"#c8c8c8\", \"#fafafa\"];\n  widget.addTrack(TrackType.LinearTrack).addChild(\n    new LogMudLogSection({\n      \"fillstyles\": (depth, text, i) => i === 2 ? \"#fdd835\" : styles[i % 2]\n    }).setName(\"Remarks\").setPaddingStyle(\"2mm\").setDepthsAndValues(depths, descs).setEllipsisString(\" ... more\")\n  );\n  return {\n    plot: new Plot({\n      \"canvaselement\": canvas,\n      \"root\": widget\n    }),\n    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/Visuals/Annotation/annotation?section=annotationsLogMudLogSection&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"logmudlogsection-customization","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/Annotation/annotation#annotationsLogMudLogCustomization"},"children":["#"]}," LogMudLogSection customization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogMudLogSection"]}," can be customized. You can specify section margins, text paddings, symbols, geometry type and handle hit-test."]},{"$$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 { from } from \"@int/geotoolkit/selection/from.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { RgbaColor } from \"@int/geotoolkit/util/RgbaColor.ts\";\nimport { SymbolShape } from \"@int/geotoolkit/scene/shapes/SymbolShape.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { CirclePainter } from \"@int/geotoolkit/scene/shapes/painters/CirclePainter.ts\";\nimport { DiamondPainter } from \"@int/geotoolkit/scene/shapes/painters/DiamondPainter.ts\";\nimport {\n  FillMode,\n  LogMudLogSection,\n  SymbolPosition,\n  WrapMode\n} from \"@int/geotoolkit/welllog/LogMudLogSection.ts\";\nimport { AlignmentStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { depths, descs } from \"/src/code/WellLog/Visuals/Annotation/js/data.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction onHitTest(mudLogSection) {\n  let selectedIndices = [];\n  mudLogSection.on(\"click\", (event, sender, eventArgs) => {\n    let newSelectedIndices = sender.hitTest(eventArgs.getPlotPoint(), 5).map((s) => s.index);\n    if (newSelectedIndices !== null && selectedIndices != null) {\n      for (let i = newSelectedIndices.length - 1; i >= 0; i--) {\n        const selectedIndex = selectedIndices.indexOf(newSelectedIndices[i]);\n        if (selectedIndex !== -1) {\n          newSelectedIndices.splice(i, 1);\n          selectedIndices.splice(selectedIndex, 1);\n        }\n      }\n      if (eventArgs.getNativeEventArgs().ctrlKey && selectedIndices != null) {\n        newSelectedIndices = newSelectedIndices.concat(selectedIndices);\n      }\n    }\n    selectedIndices = newSelectedIndices;\n    mudLogSection.setSelectedIndices(newSelectedIndices);\n  });\n}\nfunction createCustomMudLogSection(fillMode) {\n  const mudLogSection = new LogMudLogSection({\n    \"selectedsymbol\": (depth, text, index, symbol) => symbol == null ? null : symbol.clone().setLineStyle(symbol.getLineStyle().clone().setWidth(2)),\n    \"selectedfillstyle\": (depth, text, index, fillStyle) => fillStyle == null ? null : fillStyle.clone().setColor(new RgbaColor(fillStyle.getColor()).setAlpha(1)),\n    \"selectedtextstyle\": (depth, text, index, textStyle) => textStyle == null ? null : textStyle.clone().setColor(\"black\"),\n    \"selectedlinestyle\": (depth, text, index, lineStyle) => lineStyle == null ? null : lineStyle.clone().setWidth(3),\n    \"oddtextstyle\": {\n      \"color\": \"green\",\n      \"font\": \"10px sans-serif\",\n      \"alignment\": AlignmentStyle.Right\n    },\n    \"eventextstyle\": {\n      \"color\": \"blue\",\n      \"font\": \"10px sans-serif\",\n      \"alignment\": AlignmentStyle.Left\n    },\n    \"oddfillstyle\": \"rgba(255,255,155, 0.5)\",\n    \"evenfillstyle\": \"rgba(155,255,155, 0.5)\",\n    \"oddlinestyle\": \"blue\",\n    \"evenlinestyle\": \"red\"\n  }).setSymbols([\n    new SymbolShape({\n      \"width\": 10,\n      \"height\": 10,\n      \"alignment\": AnchorType.Center,\n      \"sizeisindevicespace\": true,\n      \"painter\": CirclePainter,\n      \"linestyle\": \"blue\",\n      \"fillstyle\": \"rgba(155,255,155, 0.5)\"\n    }),\n    new SymbolShape({\n      \"width\": 10,\n      \"height\": 10,\n      \"alignment\": AnchorType.Center,\n      \"sizeisindevicespace\": true,\n      \"painter\": DiamondPainter,\n      \"linestyle\": \"red\",\n      \"fillstyle\": \"rgba(255,255,155, 0.5)\"\n    })\n  ]).setCornerRadius(8).setFillMode(fillMode).setPaddingStyle(\"2mm\").setMarginsStyle(\"2mm\").setSymbolMarginsStyle(\"2mm\").setWrapMode(WrapMode.WrappedWidth).setSymbolPosition(SymbolPosition.EvenOdd).setDepthsAndValues(depths, descs);\n  if (fillMode === FillMode.All) {\n    mudLogSection.setSymbolMarginsStyle({\n      \"right\": 0\n    }, true);\n  } else {\n    mudLogSection.setSymbolMarginsStyle({\n      \"left\": 0\n    }, true);\n  }\n  onHitTest(mudLogSection);\n  return mudLogSection;\n}\nfunction addMudLogSectionTrack(widget, fillMode) {\n  const remarksTrack = widget.addTrack(TrackType.LinearTrack).addChild(createCustomMudLogSection(fillMode));\n  if (fillMode === FillMode.All) {\n    remarksTrack.setName(\"Fill Mode: All\");\n  } else if (fillMode === FillMode.TextOnly) {\n    remarksTrack.setName(\"Fill Mode: Text Only\");\n  } else if (fillMode === FillMode.Callout) {\n    remarksTrack.setName(\"Fill Mode: Callout\");\n  }\n  widget.getTrackHeader(remarksTrack).setVisibleTrackTitle(true);\n  return remarksTrack;\n}\nfunction createScene(canvas) {\n  const widget = createWellLogWidget().setDepthLimits(depths[0], depths[depths.length - 1]).setDepthScale(30).setAxisHeaderType(HeaderType.Scale);\n  widget.addTrack(TrackType.IndexTrack);\n  addMudLogSectionTrack(widget, FillMode.All);\n  addMudLogSectionTrack(widget, FillMode.TextOnly);\n  addMudLogSectionTrack(widget, FillMode.Callout);\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  let minDepth = depths[0];\n  let maxDepth = depths[depths.length - 1];\n  from(widget).where('node => class(node) == \"geotoolkit.welllog.LogMudLogSection\"').execute((mudLogSection) => {\n    const mulLogBounds = mudLogSection.getBounds();\n    minDepth = Math.min(mulLogBounds.getTop(), minDepth);\n    maxDepth = Math.max(mulLogBounds.getBottom(), maxDepth);\n  });\n  widget.setDepthLimits(minDepth, maxDepth);\n  return {\n    plot,\n    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/Visuals/Annotation/annotation?section=annotationsLogMudLogCustomization&extract=true","width":"100%","height":"688.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"logmudlogsection-symbols","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/Annotation/annotation#annotationsLogMudLogSymbols"},"children":["#"]}," LogMudLogSection symbols"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Using custom Symbols with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogMudLogSection"]},". Besides text only information, you can specify custom symbols based on SVG template for example for each depth and specify aggregation strategy you would like to use for overlapped symbols or symbols which share same index."]},{"$$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 { from } from \"@int/geotoolkit/selection/from.ts\";\nimport { AbstractNode } from \"@int/geotoolkit/scene/AbstractNode.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { AlignmentStyle, TextStyle } from \"@int/geotoolkit/attributes/TextStyle.ts\";\nimport { FillMode, LogMudLogSection, SymbolPosition } from \"@int/geotoolkit/welllog/LogMudLogSection.ts\";\nimport { SvgPainter } from \"@int/geotoolkit/svg/SvgPainter.ts\";\nimport { SymbolShape } from \"@int/geotoolkit/scene/shapes/SymbolShape.ts\";\nimport { Position as LogBlockPosition } from \"@int/geotoolkit/welllog/LogBlock.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { symbols } from \"/src/code/WellLog/Visuals/Annotation/js/symbols.ts\";\nimport directionalSVG from \"/src/code/WellLog/Visuals/Annotation/svg/directional.svg?import&raw\";\nimport drillSVG from \"/src/code/WellLog/Visuals/Annotation/svg/drill.svg?import&raw\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nconst SVG_FILES = {\n  \"directional\": directionalSVG,\n  \"drill\": drillSVG\n};\nconst _symbolPrototypes = {};\nfunction getSvgSymbolPrototype(symbolType) {\n  if (_symbolPrototypes[symbolType] == null) {\n    const svgPainter = new SvgPainter(SVG_FILES[symbolType]);\n    _symbolPrototypes[symbolType] = svgPainter;\n  }\n  return _symbolPrototypes[symbolType];\n}\nfunction getSVGSymbol(symbolXMl, size) {\n  const svgPainter = symbolXMl instanceof SvgPainter ? symbolXMl : new SvgPainter(symbolXMl);\n  const geometry = svgPainter.getGeometry();\n  return new SymbolShape({\n    \"cache\": true,\n    \"width\": size || geometry.getModelLimits().getWidth(),\n    \"height\": size || geometry.getModelLimits().getHeight(),\n    \"alignment\": AnchorType.Center,\n    \"sizeisindevicespace\": true,\n    \"painter\": svgPainter\n  });\n}\nfunction processTemplate(painter, json) {\n  from(painter).where((node) => node instanceof AbstractNode && node.getId() !== null).execute((node) => {\n    const properties = json[node.getId()];\n    if (properties != null) {\n      node.setProperties(properties);\n    }\n  });\n  return painter;\n}\nfunction addAnnotationTrack(widget, depths, values, symbolPosition, aggregationStrategy) {\n  const annotationTrack = widget.addTrack(TrackType.AnnotationTrack).setWidth(120);\n  widget.getTrackHeader(annotationTrack).setVisibleTrackTitle(true);\n  const mudLog = new LogMudLogSection().setFillMode(FillMode.SymbolOnly).setSymbolPosition(symbolPosition).setSymbolMarginsStyle({\n    \"left\": \"2mm\"\n  }).setPaddingStyle(\"1mm\").setDepthsAndValues(depths, values);\n  const symbolsCache = {};\n  mudLog.setSymbols((modelTop, value, index) => {\n    const svgPrototype = getSvgSymbolPrototype(value[\"symbol\"]);\n    if (svgPrototype == null || svgPrototype.getSvg() == null) {\n      return null;\n    }\n    if (symbolsCache[index] == null) {\n      if (value == null) {\n        return null;\n      }\n      const symbolValue = value[\"value\"];\n      const properties = {};\n      for (const name in symbolValue) {\n        if (symbolValue.hasOwnProperty(name)) {\n          const prop = symbolValue[name];\n          properties[name] = {\n            \"text\": typeof prop === \"string\" ? prop : prop.toFixed(1)\n          };\n        }\n      }\n      const SVGPainter = processTemplate(svgPrototype.clone(), properties);\n      symbolsCache[index] = getSVGSymbol(SVGPainter);\n    }\n    return symbolsCache[index];\n  });\n  if (aggregationStrategy) {\n    const textStyle = new TextStyle({\n      \"color\": \"black\",\n      \"alignment\": AlignmentStyle.Center,\n      \"font\": \"bold 30px Roboto\"\n    });\n    mudLog.setAggregation({\n      \"strategy\": aggregationStrategy,\n      \"range\": 50,\n      \"symbol\": function(aggregationDepth, aggregationIndices) {\n        return new SymbolShape({\n          \"width\": 40,\n          \"height\": 40,\n          \"alignment\": AnchorType.Center,\n          \"sizeisindevicespace\": true,\n          \"painter\": function(symbol, bbox, context) {\n            context.drawEllipse(bbox.getLeft(), bbox.getTop(), bbox.getWidth(), bbox.getHeight());\n            const deviceBox = context.getTransformation().transformRect(bbox);\n            const deviceContext = context.pushTransformation(context.getTransformation().createInverse());\n            deviceContext.setTextStyle(textStyle);\n            deviceContext.drawText(deviceBox.getCenterX(), deviceBox.getCenterY(), aggregationIndices.length + \"\");\n          },\n          \"linestyle\": {\n            \"color\": \"rgba(0, 0, 0, 0.5)\",\n            \"width\": 1\n          },\n          \"fillstyle\": {\n            \"color\": \"rgba(155,155,155, 0.1)\"\n          }\n        });\n      }\n    });\n  }\n  return annotationTrack.addChild(mudLog);\n}\nfunction createScene(canvas) {\n  const depths = [], values = [];\n  for (let i = 0; i < symbols.length; i++) {\n    depths.push(symbols[i].depth);\n    values.push(symbols[i].value);\n  }\n  const widget = createWellLogWidget().setDepthLimits(1800, 2400).setAxisHeaderType(HeaderType.Scale);\n  widget.addTrack(TrackType.IndexTrack).getBlock().setVisible(true).setPosition(LogBlockPosition.Right).setDepths(depths).setFillStyle(\"red\").setLineStyle(null);\n  addAnnotationTrack(widget, depths, values, SymbolPosition.Left).setName(\"Overlapped symbols\");\n  addAnnotationTrack(widget, depths, values, SymbolPosition.Left, \"stack\").setName(\"Stacked symbols\");\n  addAnnotationTrack(widget, depths, values, SymbolPosition.Left, \"collapse\").setName(\"Collapsed symbols\");\n  widget.addTrack(TrackType.IndexTrack).getBlock().setVisible(true).setPosition(LogBlockPosition.Left).setDepths(depths).setFillStyle(\"red\").setLineStyle(null);\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.setVisibleDepthLimits(1829, 1841);\n  return {\n    plot,\n    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/Visuals/Annotation/annotation?section=annotationsLogMudLogSymbols&extract=true","width":"100%","height":"688.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"state-definitions","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/Annotation/annotation#stateDefinitions"},"children":["#"]}," State Definitions"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogMudLogSection"]}," can be used to display state definitions."]},{"$$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 { RgbaColor } from \"@int/geotoolkit/util/RgbaColor.ts\";\nimport { HsvColor } from \"@int/geotoolkit/util/HsvColor.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { GeometryUtil } from \"@int/geotoolkit/util/GeometryUtil.ts\";\nimport { GraphicsPath } from \"@int/geotoolkit/renderer/GraphicsPath.ts\";\nimport { NodeOrder } from \"@int/geotoolkit/scene/CompositeNode.ts\";\nimport { Rectangle } from \"@int/geotoolkit/scene/shapes/Rectangle.ts\";\nimport { SymbolShape } from \"@int/geotoolkit/scene/shapes/SymbolShape.ts\";\nimport { AnchorType } from \"@int/geotoolkit/util/AnchorType.ts\";\nimport { LineStyle } from \"@int/geotoolkit/attributes/LineStyle.ts\";\nimport { FillMode, LogMudLogSection, SymbolPosition, WrapMode } from \"@int/geotoolkit/welllog/LogMudLogSection.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { PatternFactory } from \"@int/geotoolkit/attributes/PatternFactory.ts\";\nimport { DiscreteDataMap, MapType } from \"@int/geotoolkit/data/DiscreteDataMap.ts\";\nimport { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport { InterpolationType } from \"@int/geotoolkit/data/DataStepInterpolation.ts\";\nimport { loadResources } from \"/src/helpers/resources.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nloadResources(\"patterns\");\nfunction generateData() {\n  const data = [0, 2, 5, 28, 26, 30, 15, 12, 10, 7, 19, 21, 22, 8, 11, 25, 27, 10, 3, 5];\n  const minData = 0, maxData = 30;\n  const minDepth = 11440, maxDepth = 11600;\n  const minValue = 1, maxValue = 7;\n  return new LogData({\n    \"values\": data.map((val) => minValue + Math.floor((maxValue - minValue) * val / (maxData - minData))),\n    \"depths\": data.map((val, i) => minDepth + (maxDepth - minDepth) * i / (data.length - 1))\n  });\n}\nfunction createStateDefinitionValue(code, color, pattern, text) {\n  const rgba = new RgbaColor(color);\n  return {\n    code,\n    text,\n    lineStyle: {\n      color: HsvColor.setBrightness(rgba, -0.2),\n      width: 2\n    },\n    textFillStyle: rgba.setAlpha(0.3),\n    symbolFillStyle: {\n      \"color\": rgba.setAlpha(0.3),\n      \"pattern\": PatternFactory.getInstance().getPattern(pattern),\n      \"foreground\": \"black\"\n    },\n    selectionFillStyle: {\n      \"color\": rgba.setAlpha(0.3),\n      \"pattern\": PatternFactory.getInstance().getPattern(pattern),\n      \"foreground\": HsvColor.setBrightness(rgba, -0.2)\n    }\n  };\n}\nfunction initializeDiscreteMap() {\n  return new DiscreteDataMap({\n    \"type\": MapType.Discrete,\n    \"codes\": [1, 2, 3, 4, 5, 6, 7],\n    \"values\": [\n      createStateDefinitionValue(1, \"#dcedc8\", \"chert\", \"Chert\"),\n      createStateDefinitionValue(2, \"#7cb342\", \"chert\", \"Breccia\"),\n      createStateDefinitionValue(3, \"#fdd835\", \"lime\", \"Limestone\"),\n      createStateDefinitionValue(4, \"#fff9c4\", \"lime\", \"Limestone 2\"),\n      createStateDefinitionValue(5, \"#ef6c00\", \"shale\", \"Shale\"),\n      createStateDefinitionValue(6, \"#e64a19\", \"shale\", \"Shale 2\"),\n      createStateDefinitionValue(7, \"#2196f3\", \"salt\", \"Salt 2\")\n    ]\n  });\n}\nfunction onHitTest(stateDefinitionSection, stateDefinitionData, discreteMap) {\n  const getStateDefinitionByDepth = function(depth) {\n    const stateValue = stateDefinitionData.getValueAt(depth, 0, stateDefinitionData.getSize(), InterpolationType.Linear);\n    return discreteMap.getValueAt(stateValue);\n  };\n  const areaRectangle = new Rectangle().setVisible(false);\n  stateDefinitionSection.getParent().addChild(areaRectangle).changeChildOrder(areaRectangle, NodeOrder.Before, stateDefinitionSection);\n  let selectedIndices = [];\n  stateDefinitionSection.on(\"click\", (event, sender, eventArgs) => {\n    let newSelectedIndices = sender.hitTest(eventArgs.getPlotPoint(), 5).map((s) => s.index);\n    if (newSelectedIndices !== null && selectedIndices != null) {\n      for (let i = newSelectedIndices.length - 1; i >= 0; i--) {\n        const selectedIndex = selectedIndices.indexOf(newSelectedIndices[i]);\n        if (selectedIndex !== -1) {\n          newSelectedIndices.splice(i, 1);\n          selectedIndices.splice(selectedIndex, 1);\n        }\n      }\n      if (eventArgs.getNativeEventArgs().ctrlKey && selectedIndices != null) {\n        newSelectedIndices = newSelectedIndices.concat(selectedIndices);\n      }\n    }\n    selectedIndices = newSelectedIndices;\n    stateDefinitionSection.setSelectedIndices(newSelectedIndices);\n    if (newSelectedIndices.length === 0) {\n      areaRectangle.setVisible(false);\n    } else {\n      const activeIndex = newSelectedIndices[0];\n      const depths = stateDefinitionSection.getDepths();\n      const fromDepth = depths[activeIndex];\n      const toDepth = depths[activeIndex + 1];\n      const stateDefinition = getStateDefinitionByDepth(fromDepth);\n      areaRectangle.setBounds(new Rect(0, fromDepth, 1, toDepth)).setFillStyle(stateDefinition.selectionFillStyle).setLineStyle(stateDefinition.lineStyle).setVisible(true);\n    }\n  });\n}\nfunction createStateDefinitionAnnotations(stateDefinitionData, discreteMap, fillMode) {\n  const glowLineStyle = new LineStyle({\n    \"color\": \"white\",\n    \"width\": 4,\n    \"shadow\": {\n      \"enable\": true,\n      \"blur\": 7,\n      \"offsetx\": 0,\n      \"offsety\": 0,\n      \"color\": \"white\"\n    }\n  });\n  const strokeLineStyle = new LineStyle({\n    \"color\": \"white\",\n    \"width\": 2\n  });\n  const stubRoundPath = new GraphicsPath();\n  const roundRectPainter = function(symbol, bbox, context) {\n    const contextTransformation = context.getTransformation();\n    const path = GeometryUtil.getRoundRect(bbox, 4, contextTransformation, stubRoundPath);\n    context.drawPath(path);\n    if (symbol.getFillStyle()) {\n      context.fillPath();\n    }\n    if (symbol.getLineStyle()) {\n      context.stroke();\n    }\n  };\n  const selectedSymbolPainter = function(symbol, bbox, context) {\n    const contextTransformation = context.getTransformation();\n    const path = GeometryUtil.getRoundRect(bbox, 8, contextTransformation, stubRoundPath);\n    context.drawPath(path);\n    context.stroke();\n    context.stroke();\n    if (symbol.getFillStyle()) {\n      context.fillPath();\n    }\n    context.setLineStyle(strokeLineStyle);\n    context.stroke();\n  };\n  const eventSymbol = new SymbolShape({\n    \"width\": 16,\n    \"height\": 16,\n    \"alignment\": AnchorType.Center,\n    \"sizeisindevicespace\": true,\n    \"painter\": roundRectPainter\n  }).setSilent(true);\n  const selectedSymbol = new SymbolShape({\n    \"width\": 16,\n    \"height\": 16,\n    \"alignment\": AnchorType.Center,\n    \"sizeisindevicespace\": true,\n    \"linestyle\": {\n      \"color\": \"black\",\n      \"width\": 2\n    },\n    \"painter\": selectedSymbolPainter\n  }).setSilent(true);\n  const getStateDefinitionByDepth = function(depth) {\n    const stateValue = stateDefinitionData.getValueAt(depth, 0, stateDefinitionData.getSize(), InterpolationType.Linear);\n    return discreteMap.getValueAt(stateValue);\n  };\n  const stateDefinitionSection = new LogMudLogSection({\n    \"selectedsymbol\": (depth, text, index, symbol) => symbol == null ? null : selectedSymbol.setFillStyle(symbol.getFillStyle()).setLineStyle(glowLineStyle.clone().setProperties({\n      \"color\": symbol.getLineStyle().getColor(),\n      \"shadow\": {\n        \"color\": symbol.getLineStyle().getColor()\n      }\n    })),\n    \"selectedfillstyle\": (depth, text, index, fillStyle) => fillStyle == null ? null : fillStyle.clone().setColor(new RgbaColor(fillStyle.getColor()).setAlpha(1)),\n    \"selectedlinestyle\": (depth, text, index, lineStyle) => lineStyle == null ? null : lineStyle.clone().setColor(\"black\"),\n    \"textstyle\": {\n      \"color\": \"black\",\n      \"font\": \"10px sans-serif\"\n    },\n    \"linestyles\": (depth, text, index) => {\n      const stateDefinition = getStateDefinitionByDepth(depth);\n      return stateDefinition.lineStyle;\n    },\n    \"fillstyles\": (depth, text, index) => {\n      const stateDefinition = getStateDefinitionByDepth(depth);\n      return stateDefinition.textFillStyle;\n    },\n    \"symbols\": (depth, text, index) => {\n      const stateDefinition = getStateDefinitionByDepth(depth);\n      return eventSymbol.setFillStyle(stateDefinition.symbolFillStyle).setLineStyle(stateDefinition.lineStyle);\n    }\n  }).setDepthsAndValues(stateDefinitionData.getDepths(), (depth, index) => {\n    const stateDefinition = getStateDefinitionByDepth(depth);\n    return \"(\" + stateDefinition.code + \") \" + stateDefinition.text;\n  }).setWrapMode(WrapMode.WrappedWidth).setCornerRadius(4).setFillMode(fillMode).setPaddingStyle(\"1mm\").setMarginsStyle(\"1mm\").setSymbolMarginsStyle({\n    \"top\": 0,\n    \"left\": \"1mm\",\n    \"right\": \"2mm\"\n  }).setSymbolPosition(SymbolPosition.Left).setEllipsisString(\" ... more\");\n  if (fillMode === FillMode.All) {\n    stateDefinitionSection.setSymbolMarginsStyle({\n      \"right\": 0\n    }, true);\n  }\n  return stateDefinitionSection;\n}\nfunction addStateDefinitionTrack(widget, stateDefinitionData, fillMode) {\n  let stateDefinitionSection = null;\n  const discreteMap = initializeDiscreteMap();\n  const stateDefinitionsTrack = widget.addTrack(TrackType.LinearTrack).setName(\"State Definitions\").addChild([\n    stateDefinitionSection = createStateDefinitionAnnotations(stateDefinitionData, discreteMap, fillMode)\n  ]);\n  onHitTest(stateDefinitionSection, stateDefinitionData, discreteMap);\n  widget.getTrackHeader(stateDefinitionsTrack).setVisibleTrackTitle(true);\n  return stateDefinitionsTrack;\n}\nfunction createScene(canvas) {\n  const stateDefinitionData = generateData();\n  const depths = stateDefinitionData.getDepths();\n  const widget = createWellLogWidget().setDepthLimits(depths[0], depths[depths.length - 1]).setAxisHeaderType(HeaderType.Scale);\n  widget.addTrack(TrackType.IndexTrack);\n  addStateDefinitionTrack(widget, stateDefinitionData, FillMode.TextOnly);\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.fitToHeight().scale(2);\n  return {\n    plot,\n    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/Visuals/Annotation/annotation?section=stateDefinitions&extract=true","width":"100%","height":"688.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"annotations-with-logannotation","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/Annotation/annotation#annotationsLogAnnotation"},"children":["#"]}," Annotations with LogAnnotation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogAnnotation"]}," is used to display a simple annotation in the track. It requires specified bounds in the track coordinates, which are depth or time in the vertical axis and relative coordinates from 0 to 1 in the horizontal axis. Annotations don't handle intersections with other annotations in the track."]},{"$$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 { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { LogAnnotation } from \"@int/geotoolkit/welllog/LogAnnotation.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { depths, descs } from \"/src/code/WellLog/Visuals/Annotation/js/data.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createScene(canvas) {\n  const widget = createWellLogWidget().setDepthLimits(depths[0], depths[depths.length - 1]).setDepthScale(30);\n  widget.addTrack(TrackType.IndexTrack);\n  const annotation1 = new LogAnnotation({\n    \"bounds\": new Rect(0.2, depths[1], 0.8, depths[2]),\n    \"text\": descs[1],\n    \"textstyle\": \"#7cb342\",\n    \"fillstyle\": \"#eeeeee\"\n  });\n  const annotation2 = new LogAnnotation({\n    \"bounds\": new Rect(0.2, depths[3], 0.8, depths[5]),\n    \"text\": descs[3]\n  }).setTextStyle(\"#7cb342\");\n  const remarksTrack = widget.addTrack(TrackType.LinearTrack).setName(\"Remarks\").addChild([annotation1, annotation2]);\n  widget.getTrackHeader(remarksTrack).setVisibleTrackTitle(true);\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/Visuals/Annotation/annotation?section=annotationsLogAnnotation&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"floating-annotation","__idx":6},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/Visuals/Annotation/annotation#floatingAnnotation"},"children":["#"]}," Floating Annotation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AnnotationOverlay"]}," is used to display floating widget annotations. These annotations display in an overlay layer on top of all tracks in the widget. An overlay may have inline editable text, a small image, and an anchor position in any track. The code below shows how to add the annotation overlay. Plus you can change annotation geometry or add additional buttons to it to fit your application needs"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["New annotations can be added by an integrated tool or by using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["addAnnotation"]}," method, which returns a reference to an instance of a new annotation. The code below creates two annotations and specifies positions related to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["curvesTrack"]},", where anchor x is a value in the range from 0 to 1 (left border and right border of the track) and y coordinate is a depth value. If a tool is disabled, then annotations are not movable and editable by default. To enable the overlay annotation tool, set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["overlay.setEnabled(true);"]}]},{"$$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 { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport { Point } from \"@int/geotoolkit/util/Point.ts\";\nimport { Dimension } from \"@int/geotoolkit/util/Dimension.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { depths, descs } from \"/src/code/WellLog/Visuals/Annotation/js/data.ts\";\nimport { curveData } from \"/src/code/WellLog/utils/curveData.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nimport { Path } from \"@int/geotoolkit/scene/shapes/Path.ts\";\nimport {\n  AnnotationOverlay as WelllogAnnotationOverlay\n} from \"@int/geotoolkit/welllog/widgets/overlays/AnnotationOverlay.ts\";\nimport { AnnotationOverlay } from \"@int/geotoolkit/widgets/overlays/AnnotationOverlay.ts\";\nfunction calloutWithButtonsGeometry(transformation, targetPoint, anchorPoint, calloutsFrame, options, overlay) {\n  const geometry = AnnotationOverlay.getGeometry(\"rectangle-callouts\").call(this, transformation, targetPoint, anchorPoint, calloutsFrame, options);\n  const annotationOverlay = overlay;\n  if (options[\"annotation\"] !== annotationOverlay.getActiveAnnotation()) {\n    return geometry;\n  }\n  const calloutPath = geometry[\"geometry\"];\n  const buttonX = calloutsFrame.getRight() - 15;\n  const buttonY = calloutsFrame.getTop() - 15;\n  const buttonPath = new Path().setLineStyle(options[\"linestyle\"]).setFillStyle(\"#C1E3E8\").moveTo(buttonX, buttonY).lineTo(buttonX + 10, buttonY).lineTo(buttonX + 10, buttonY + 10).lineTo(buttonX, buttonY + 10).lineTo(buttonX, buttonY).close().on(\"click\", () => {\n    if (annotationOverlay.getEnabled()) {\n      const activeAnnotation = annotationOverlay.getActiveAnnotation();\n      if (activeAnnotation != null) {\n        annotationOverlay.removeAnnotation(activeAnnotation);\n      }\n    }\n  });\n  const xButtonPath = new Path().setLineStyle({ \"color\": \"black\", \"width\": 2 }).moveTo(buttonX + 2, buttonY + 2).lineTo(buttonX + 9, buttonY + 9).moveTo(buttonX + 9, buttonY + 2).lineTo(buttonX + 2, buttonY + 9);\n  return {\n    \"geometry\": [calloutPath, buttonPath, xButtonPath],\n    \"clip\": null\n  };\n}\nfunction createScene(canvas) {\n  const widget = createWellLogWidget().setDepthLimits(depths[0], depths[depths.length - 1]).setDepthScale(30);\n  widget.addTrack(TrackType.IndexTrack);\n  const data = new LogData({\n    \"name\": \"GR\",\n    \"depths\": depths,\n    \"values\": curveData[\"GR\"]\n  });\n  const curvesTrack = widget.addTrack(TrackType.LinearTrack).addChild(\n    new LogCurve(data).setLineStyle({\n      \"color\": \"#ef6c00\",\n      \"width\": 2\n    })\n  );\n  widget.addTrack(TrackType.LinearTrack).setName(\"Remarks\");\n  const frame = new Dimension(70, 50);\n  const overlay = new WelllogAnnotationOverlay(widget);\n  AnnotationOverlay.registerGeometry(\"callout-with-buttons\", function(transformation, targetPoint, anchorPoint, calloutsFrame, options) {\n    return calloutWithButtonsGeometry.call(this, transformation, targetPoint, anchorPoint, calloutsFrame, options, overlay);\n  });\n  overlay.addAnnotation({\n    \"text\": descs[1],\n    \"target\": curvesTrack,\n    \"anchor\": new Point(1, depths[1]),\n    \"options\": {\n      \"offset\": new Point(40 + frame.getWidth() / 2, 20 + frame.getHeight() / 2),\n      \"geometrytype\": \"callout-with-buttons\"\n    }\n  });\n  overlay.addAnnotation({\n    \"text\": descs[3],\n    \"target\": curvesTrack,\n    \"anchor\": new Point(1, depths[3]),\n    \"options\": {\n      \"offset\": new Point(40 + frame.getWidth() / 2, -20 - frame.getHeight() / 2)\n    }\n  });\n  overlay.setEnabled(true).setOptions({\n    \"candelete\": true,\n    \"cancreate\": false,\n    \"canmove\": true,\n    \"canedit\": true\n  });\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  return {\n    plot,\n    overlay\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/Visuals/Annotation/annotation?section=floatingAnnotation&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Annotation","id":"annotation","depth":1},{"value":"Annotations with LogMudLogSection","id":"annotations-with-logmudlogsection","depth":3},{"value":"LogMudLogSection customization","id":"logmudlogsection-customization","depth":3},{"value":"LogMudLogSection symbols","id":"logmudlogsection-symbols","depth":3},{"value":"State Definitions","id":"state-definitions","depth":3},{"value":"Annotations with LogAnnotation","id":"annotations-with-logannotation","depth":3},{"value":"Floating Annotation","id":"floating-annotation","depth":3}],"frontmatter":{"title":"Annotation","seo":{"title":"Annotation"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/visuals/annotation","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}