{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Labeling Strategy","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":"labeling-strategy","__idx":0},"children":["Labeling Strategy"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This Labeling tutorial shows how to add labels to the components of a schematic shape. The default labels can be changed by selecting other labeling modes. Modes allow changing label location, alignment, background color, and numbering and allow the addition of connector lines."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When labeling is required, the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit.schematics.widgets.schematicswidget.schematicswidget.html"},"children":["geotoolkit/schematics/widgets/SchematicsWidget"]}," object must be created for vertical display mode. Correspondingly, ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit.schematics.widgets.deviatedschematicswidget.deviatedschematicswidget.html"},"children":["geotoolkit/schematics/widgets/DeviatedSchematicsWidget"]}," object must be created for deviated display mode, and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit.schematics.widgets.lshapedschematicswidget.lshapedschematicswidget.html"},"children":["geotoolkit/schematics/widgets/LShapedSchematicsWidget"]}," object must be created for L-shape display mode."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"labeling-namespace","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/LabelingStrategy/labelingStrategy#labelingNamespace"},"children":["#"]}," Labeling Namespace"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Schematics ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/schematics/labeling"]}," namespace overview:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"I. What components to label:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Abstraction: IComponentsFilter",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Implementations: DefaultComponentsFilter",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"How to reach it: LabelingStrategyBase.prototype.ComponentsFilter"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["II. Where to put labels for the filtered components:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Abstraction: LabelingStrategy",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Implementations: DefaultLabelingStrategy (older default strategy - being deprecated);",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"VersatileLabelingStrategy (newer default strategy - recommended);",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"XYLabelingStrategy",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"DefaultDeviatedStrategy (special implementation for deviated schematics)",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"How to reach it:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"SchematicsWidget.prototype.getOptions (setting is available via the widget's constructor)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["III. What information to display in a component label:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"This is a function accepting reference to {geotoolkit.schematics.scene.ComponentNode} of interest",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Default implementation: returns componentNode.getDescription()",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"How to reach it: LabelingStrategy.prototype.LabelInfoProvider"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"docked-mode-default-settings","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/LabelingStrategy/labelingStrategy#defaultDockedMode"},"children":["#"]}," \"Docked\" Mode (Default Settings)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The default setting for SchematicsWidget labeling is \"docked\" mode, aligning labels away from and to the right of the wellbore, in a manner similar to a tooltip."]},{"$$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 { WellBoreData } from \"@int/geotoolkit/schematics/data/WellBoreData.ts\";\nimport { CompositeSchematicsWidget } from \"@int/geotoolkit/schematics/widgets/CompositeSchematicsWidget.ts\";\nimport data from \"/src/assets/data/wellBoreData.json?import\";\nfunction createScene(canvas) {\n  function createWellBoreData() {\n    return new WellBoreData(data);\n  }\n  const options = {\n    \"north\": {\n      \"title\": {\n        \"text\": \"Schematics Widget\"\n      }\n    },\n    \"gap\": {\n      \"left\": {\n        \"size\": \"30\"\n      },\n      \"right\": {\n        \"visible\": false\n      }\n    },\n    \"annotationssizes\": {\n      \"north\": 30,\n      \"south\": 0\n    },\n    \"data\": {\n      \"elements\": createWellBoreData()\n    }\n  };\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": new CompositeSchematicsWidget(options)\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#/Schematics/LabelingStrategy/labelingStrategy?section=defaultDockedMode&extract=true","width":"100%","height":"688.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"docked-mode-custom-settings","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/LabelingStrategy/labelingStrategy#customDockedMode"},"children":["#"]}," \"Docked\" Mode (Custom Settings)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customizations can be made to the default labeling strategy through setting labeling options in setOptions such as:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'locationMap'"]},": Defines locations for label of certain components. In the example, casing, cement, and perforation components are located to the left of the wellbore."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'defaultLocation'"]},": Set the default anchor location for labels, this setting will be overridden by specifications set in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'locationMap'"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'defaultAlignment'"]},": Labels are aligned against the outer edge of the SchematicsWidget ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AlignmentType.Outer"]},", against the border ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AlignmentType.Inner"]},", or centered ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AlignmentType.Middle"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'connectorShape'"]},": This option defines the appearance of the line connecting the label to its relevant component in the wellbore, allowing customization of color, width, and line pattern."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'labelInfoProvider'"]},": This option accepts a callback function that is used to define the content of the label. SchematicsWidget will provide a reference to a node and label content can be customized for each node. SchematicsWidget expects the callback function to return a string."]}]},{"$$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 { obfuscate } from \"@int/geotoolkit/lib.js\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { WellBoreData } from \"@int/geotoolkit/schematics/data/WellBoreData.ts\";\nimport { CompositeSchematicsWidget } from \"@int/geotoolkit/schematics/widgets/CompositeSchematicsWidget.ts\";\nimport { Alignment } from \"@int/geotoolkit/layout/BoxLayout.ts\";\nimport { Patterns } from \"@int/geotoolkit/attributes/LineStyle.ts\";\nimport { AlignmentType } from \"@int/geotoolkit/schematics/labeling/AlignmentType.ts\";\nimport { LocationType } from \"@int/geotoolkit/schematics/labeling/LocationType.ts\";\nimport { LineConnector } from \"@int/geotoolkit/schematics/labeling/LineConnector.ts\";\nimport { LabelsFilter } from \"@int/geotoolkit/schematics/labeling/LabelsFilter.ts\";\nimport { ComponentUtils } from \"@int/geotoolkit/schematics/utils/ComponentUtils.ts\";\nimport data from \"/src/assets/data/wellBoreData.json?import\";\nexport class CustomLabelsFilter extends LabelsFilter {\n  constructor() {\n    super();\n  }\n  labelInfo(node) {\n    if (node.getName() === \"perforation\") {\n      const geom = node.getGeometryData();\n      return \"perforation, MD:<br/>[\" + ComponentUtils.getDepthFrom(geom) + \" ; \" + ComponentUtils.getDepthTo(geom) + \"]\";\n    }\n    return ComponentUtils.getDescriptionString(node.getDescription()) || node.getName();\n  }\n}\nobfuscate(CustomLabelsFilter);\nfunction createScene(canvas) {\n  function createWellBoreData() {\n    return new WellBoreData(data);\n  }\n  const labelingOptions = {\n    \"locationMap\": [{\n      \"location\": LocationType.Left,\n      \"component\": [\"casing\", \"cement\", \"perforation\"]\n    }],\n    \"defaultLocation\": LocationType.Right,\n    \"defaultAlignment\": AlignmentType.Outer,\n    \"connectorShape\": new LineConnector().setLineStyle({\n      \"pattern\": Patterns.ShortDash\n    }),\n    \"labelsfilter\": new CustomLabelsFilter()\n  };\n  const options = {\n    \"alignment\": Alignment.Center,\n    \"gap\": {\n      \"left\": {\n        \"size\": \"50\"\n      },\n      \"right\": {\n        \"size\": \"50\"\n      },\n      \"top\": {\n        \"size\": \"0\"\n      },\n      \"bottom\": {\n        \"size\": \"0\"\n      }\n    },\n    \"annotationssizes\": {\n      \"south\": 0\n    },\n    \"labeling\": labelingOptions,\n    \"data\": {\n      \"elements\": createWellBoreData()\n    }\n  };\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": new CompositeSchematicsWidget(options)\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#/Schematics/LabelingStrategy/labelingStrategy?section=customDockedMode&extract=true","width":"100%","height":"688.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"adjacent-mode","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Schematics/LabelingStrategy/labelingStrategy#adjacentMode"},"children":["#"]}," \"Adjacent\" Mode"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Unlike \"docked\" mode, \"adjacent\" mode places labels next to the components in the wellbore rather than aligned to a particular side away from the wellbore. To reduce clutter, this example also demonstrates the SchematicsWidget's legend. Enabling the legend replaces label text with indexing and creates a legend that matches the indexes with legend text provided through a callback function."]},{"$$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 { WellBoreData } from \"@int/geotoolkit/schematics/data/WellBoreData.ts\";\nimport { CompositeSchematicsWidget } from \"@int/geotoolkit/schematics/widgets/CompositeSchematicsWidget.ts\";\nimport { SymbolLabelShape } from \"@int/geotoolkit/schematics/labeling/SymbolLabelShape.ts\";\nimport { XYLabelingStrategy } from \"@int/geotoolkit/schematics/labeling/XYLabelingStrategy.ts\";\nimport { AnnotationLocation } from \"@int/geotoolkit/layout/AnnotationLocation.ts\";\nimport { LocationType } from \"@int/geotoolkit/schematics/labeling/LocationType.ts\";\nimport { ComponentUtils } from \"@int/geotoolkit/schematics/utils/ComponentUtils.ts\";\nimport { CirclePainter } from \"@int/geotoolkit/scene/shapes/painters/CirclePainter.ts\";\nimport data from \"/src/assets/data/wellBoreData.json?import\";\nfunction createScene(canvas) {\n  function createWellBoreData() {\n    return new WellBoreData(data);\n  }\n  const locationMap = [{\n    \"location\": LocationType.Left,\n    \"component\": [\"casing\", \"cement\", \"perforation\"]\n  }];\n  const options = {\n    \"labelingStrategy\": new XYLabelingStrategy({ \"locationmap\": locationMap }),\n    \"legendalignmentarea\": AnnotationLocation.Center,\n    \"legend\": {\n      \"width\": 200,\n      \"height\": 420,\n      \"visible\": true,\n      \"legenditem\": {\n        \"gettext\": (node) => {\n          if (node.getName() === \"tubing\") {\n            const geom = node.getGeometryData();\n            return \"tubing, MD: [\" + ComponentUtils.getDepthFrom(geom) + \" ; \" + ComponentUtils.getDepthTo(geom) + \"]\";\n          }\n          return ComponentUtils.getDescriptionString(node.getDescription()) || node.getName();\n        }\n      }\n    }\n  };\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": new CompositeSchematicsWidget({\n      \"data\": {\n        \"elements\": createWellBoreData()\n      },\n      \"annotationssizes\": {\n        \"south\": 0\n      },\n      \"gap\": {\n        \"left\": {\n          \"size\": \"20\"\n        },\n        \"right\": {\n          \"size\": \"30\"\n        },\n        \"top\": {\n          \"size\": \"0\"\n        },\n        \"bottom\": {\n          \"size\": \"0\"\n        }\n      },\n      \"labeling\": {\n        \"legendmode\": true,\n        \"labelshape\": new SymbolLabelShape({\n          \"painter\": CirclePainter\n        }),\n        \"connectorshape\": null\n      }\n    }).setOptions(options)\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#/Schematics/LabelingStrategy/labelingStrategy?section=adjacentMode&extract=true","width":"100%","height":"688.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Labeling Strategy","id":"labeling-strategy","depth":1},{"value":"Labeling Namespace","id":"labeling-namespace","depth":3},{"value":"\"Docked\" Mode (Default Settings)","id":"docked-mode-default-settings","depth":3},{"value":"\"Docked\" Mode (Custom Settings)","id":"docked-mode-custom-settings","depth":3},{"value":"\"Adjacent\" Mode","id":"adjacent-mode","depth":3}],"frontmatter":{"title":"Labeling Strategy","seo":{"title":"Labeling Strategy"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/schematics/labeling-strategy","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}