{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Schematic 3D","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":"schematic-3d","__idx":0},"children":["Schematic 3D"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial demonstrates how to display schematics components in 3D using the Geotoolkit3D module."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"data-initialization","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac3D/AdditionalFunctionality/Schematics/schematics#dataInitialization"},"children":["#"]}," Data Initialization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["First step is to set-up the data that will be used by the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit3d.scene.schematics.schematicsnode.schematicsnode.html"},"children":["Schematics Node"]},".",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"This is done by creating a new ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit3d.geodata.trajectory3d.trajectory3d.html"},"children":["Trajectory3d"]},", which defines everything the Schematics Node will need to display the schematics.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Next, create a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit.schematics.data.wellboredata.wellboredata.html"},"children":["WellBoreData"]}," which defines the components to be displayed using the Trajectory data."]},{"$$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 { Vector3 } from \"/node_modules/.vite/deps/three.js?v=2235af65\";\nimport { Trajectory3d } from \"@int/geotoolkit3d/geodata/Trajectory3d.ts\";\nimport { TrajectoryValue } from \"@int/geotoolkit3d/geodata/TrajectoryValue.ts\";\nimport { WellBoreData } from \"@int/geotoolkit/schematics/data/WellBoreData.ts\";\nimport { SchematicsNode } from \"@int/geotoolkit3d/scene/schematics/SchematicsNode.ts\";\nimport { Grid } from \"@int/geotoolkit3d/scene/grid/Grid.ts\";\nimport { Plot } from \"@int/geotoolkit3d/Plot.ts\";\nimport { getWell3410A44 } from \"/src/code/Carnac3D/AdditionalFunctionality/Schematics/ts/data.ts\";\nfunction createScene(divElement) {\n  const wellData = getWell3410A44();\n  const plot = new Plot({\n    \"container\": divElement,\n    \"scale\": new Vector3(1, 1, 2.2)\n  });\n  const data = new Trajectory3d(\n    wellData.xDeviation.slice(),\n    wellData.yDeviation.slice(),\n    wellData.elevation.slice(),\n    new Vector3(wellData.xRef, wellData.yRef, 0),\n    wellData.mds.slice(),\n    [new TrajectoryValue(\"data.dls\", wellData.dls.slice())]\n  );\n  const components = new WellBoreData();\n  components.addComponent(\"path\", { geometry: null });\n  const grid = new Grid({\n    start: new Vector3(454589, 6780898, -2500),\n    end: new Vector3(459324, 6784161, 0),\n    modelstart: new Vector3(454589, 6780898, 2500),\n    modelend: new Vector3(459324, 6784161, 0)\n  });\n  const trajectory = new SchematicsNode({ \"data\": data, \"components\": components });\n  plot.getRoot().add(grid);\n  plot.getRoot().add(trajectory);\n  plot.fitCamera(null, false, 0);\n  return plot;\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#/Carnac3D/AdditionalFunctionality/Schematics/schematics?section=dataInitialization&extract=true","width":"100%","height":"682px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configuring-the-schematic","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac3D/AdditionalFunctionality/Schematics/schematics#configureSchematic"},"children":["#"]}," Configuring the Schematic"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The schematic can be configured by adding variables to the path object.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"This example shows how to color the path by the value attached to the Trajectory data called 'data.dls,' and add a couple of ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit.schematics.data.wellboredata.wellboredata.html#addcomponent"},"children":["casing components"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit3d.scene.annotationbase.annotationbase.html"},"children":["annotations"]},"."]},{"$$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 { Vector3 } from \"/node_modules/.vite/deps/three.js?v=2235af65\";\nimport { Trajectory3d } from \"@int/geotoolkit3d/geodata/Trajectory3d.ts\";\nimport { TrajectoryValue } from \"@int/geotoolkit3d/geodata/TrajectoryValue.ts\";\nimport { WellBoreData } from \"@int/geotoolkit/schematics/data/WellBoreData.ts\";\nimport { SchematicsNode } from \"@int/geotoolkit3d/scene/schematics/SchematicsNode.ts\";\nimport { Grid } from \"@int/geotoolkit3d/scene/grid/Grid.ts\";\nimport { AnnotationBase, Mode as AnnotationBaseMode } from \"@int/geotoolkit3d/scene/AnnotationBase.ts\";\nimport { DefaultColorProvider } from \"@int/geotoolkit/util/DefaultColorProvider.ts\";\nimport { Plot } from \"@int/geotoolkit3d/Plot.ts\";\nimport { DefaultAnnotationLayout } from \"@int/geotoolkit3d/schematics/layout/DefaultAnnotationLayout.ts\";\nimport { ExpandedAnnotationLayout } from \"@int/geotoolkit3d/schematics/layout/ExpandedAnnotationLayout.ts\";\nimport { getWell3410A44 } from \"/src/code/Carnac3D/AdditionalFunctionality/Schematics/ts/data.ts\";\nconst ANGLED_CAMERA_DIRECTION = new Vector3(0.5, -0.9, 0.1);\nfunction createAnnotation(title) {\n  return {\n    \"title\": title,\n    \"titlestyle\": {\n      \"font\": \"12px Arial\",\n      \"color\": \"yellow\"\n    },\n    \"linestyle\": \"yellow\",\n    \"mode\": AnnotationBaseMode.Center\n  };\n}\nfunction createScene(divElement) {\n  const wellData = getWell3410A44();\n  const plot = new Plot({\n    \"container\": divElement,\n    \"scale\": new Vector3(1, 1, 2.2)\n  });\n  const data = new Trajectory3d(\n    wellData.xDeviation.slice(),\n    wellData.yDeviation.slice(),\n    wellData.elevation.slice(),\n    new Vector3(wellData.xRef, wellData.yRef, 0),\n    wellData.mds.slice(),\n    [new TrajectoryValue(\"data.dls\", wellData.dls.slice())]\n  );\n  const components = new WellBoreData();\n  components.addComponent(\"path\", { geometry: null });\n  const grid = new Grid({\n    \"start\": new Vector3(454589, 6780898, -2500),\n    \"end\": new Vector3(459324, 6784161, 0),\n    \"modelstart\": new Vector3(454589, 6780898, 2500),\n    \"modelend\": new Vector3(459324, 6784161, 0)\n  });\n  const gridPlanes = grid.getPlanes();\n  gridPlanes.back.visible = false;\n  const trajectory = new SchematicsNode({ \"data\": data, \"components\": components });\n  trajectory.setAnnotations([new AnnotationBase(\n    createAnnotation(\"Schematics Node, depth 1234\")\n  )], [-1234]);\n  components.addComponent(\"path\", {\n    \"geometry\": null,\n    \"value\": \"data.dls\",\n    \"colorprovider\": new DefaultColorProvider({\n      \"values\": [0, 1, 2],\n      \"colors\": [\"green\", \"yellow\", \"red\"]\n    })\n  });\n  components.addComponent(\"casing\", {\n    \"geometry\": {\n      \"depth\": { \"to\": 270, \"from\": 40 },\n      \"diameter\": { \"outer\": 100 }\n    },\n    \"opacity\": 1,\n    \"annotation\": createAnnotation(\"Casing #1, depth from 40 to 270, diameter 100\")\n  });\n  components.addComponent(\"casing\", {\n    \"geometry\": {\n      \"depth\": { \"to\": 530, \"from\": 40 },\n      \"diameter\": { \"outer\": 75 }\n    },\n    \"colorprovider\": \"blue\",\n    \"annotation\": createAnnotation(\"Casing #2, depth from 40 to 530, diameter 75\")\n  });\n  components.addComponent(\"casing\", {\n    \"geometry\": {\n      \"depth\": { \"to\": 1075, \"from\": 40 },\n      \"diameter\": { \"outer\": 50 }\n    },\n    \"annotation\": createAnnotation(\"Casing #3, depth from 40 to 1075, diameter 50\")\n  });\n  plot.getRoot().add(grid);\n  plot.getRoot().add(trajectory);\n  plot.fitCamera(ANGLED_CAMERA_DIRECTION, false, 0);\n  return plot;\n}\nfunction createLayoutFromString(string) {\n  switch (string) {\n    case \"Default\":\n      return new DefaultAnnotationLayout();\n    case \"Expanded\":\n      return new ExpandedAnnotationLayout();\n  }\n  throw new Error(\"Wrong annotation layout string\");\n}\nfunction setLayout(plot, string) {\n  const layout = createLayoutFromString(string);\n  plot.getRoot().traverse((object) => {\n    if (!(object instanceof SchematicsNode))\n      return;\n    object.setAnnotationLayout(layout);\n  });\n}\nexport { createScene, setLayout };\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#/Carnac3D/AdditionalFunctionality/Schematics/schematics?section=configureSchematic&extract=true","width":"100%","height":"766px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"using-schematics","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac3D/AdditionalFunctionality/Schematics/schematics#usingSchematics"},"children":["#"]}," Using Schematics"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After the schematic is created, the built in functionality can be used to show/hide component types."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Vector3 } from \"/node_modules/.vite/deps/three.js?v=2235af65\";\nimport { Trajectory3d } from \"@int/geotoolkit3d/geodata/Trajectory3d.ts\";\nimport { WellBoreData } from \"@int/geotoolkit/schematics/data/WellBoreData.ts\";\nimport { SchematicsNode } from \"@int/geotoolkit3d/scene/schematics/SchematicsNode.ts\";\nimport { Grid } from \"@int/geotoolkit3d/scene/grid/Grid.ts\";\nimport { Plot } from \"@int/geotoolkit3d/Plot.ts\";\nimport { trajectoryData } from \"/src/code/Carnac3D/AdditionalFunctionality/Schematics/ts/data.ts\";\nconst ANGLED_CAMERA_DIRECTION = new Vector3(-0.6, 0.3, 0);\nfunction createScene(divElement) {\n  const plot = new Plot({\n    \"container\": divElement,\n    \"scale\": new Vector3(1, 1, 1)\n  });\n  const data = new Trajectory3d(\n    trajectoryData.x.slice(),\n    trajectoryData.y.slice(),\n    trajectoryData.z.slice(),\n    null,\n    trajectoryData.md.slice()\n  );\n  const components = new WellBoreData();\n  components.addComponent(\"path\", {\n    \"geometry\": null,\n    \"colorprovider\": \"red\"\n  });\n  const trajectory = new SchematicsNode({ \"data\": data, \"components\": components });\n  plot.getRoot().add(trajectory);\n  components.addComponent(\"casing\", {\n    \"geometry\": {\n      \"depth\": { \"from\": 0, \"to\": 341 },\n      \"diameter\": { \"inner\": 25, \"outer\": 78 }\n    },\n    \"description\": \"Drive Pipe\"\n  });\n  components.addComponent(\"casing\", {\n    \"geometry\": {\n      \"depth\": { \"from\": 0, \"to\": 1020 },\n      \"diameter\": { \"inner\": 19, \"outer\": 60 }\n    },\n    \"description\": \"Surface Casing\"\n  });\n  components.addComponent(\"casing\", {\n    \"geometry\": {\n      \"depth\": { \"from\": 0, \"to\": 3e3 },\n      \"diameter\": { \"inner\": 12, \"outer\": 39 }\n    },\n    \"description\": \"Intermediate Casing-1\"\n  });\n  components.addComponent(\"casing\", {\n    \"geometry\": {\n      \"depth\": { \"from\": 0, \"to\": 4500 },\n      \"diameter\": { \"inner\": 9, \"outer\": 29 }\n    },\n    \"description\": \"Intermediate Casing-2\"\n  });\n  components.addComponent(\"tubing\", {\n    \"geometry\": {\n      \"depth\": { \"from\": 0, \"to\": 13838 },\n      \"diameter\": { \"inner\": 0, \"outer\": 15 }\n    },\n    \"description\": \"tubing, 2.5--\"\n  });\n  const rect = plot.getSceneBoundingBox();\n  const grid = new Grid({\n    start: rect.min,\n    end: rect.max,\n    modelstart: rect.min,\n    modelend: rect.max\n  });\n  plot.getRoot().add(grid);\n  plot.fitCamera(ANGLED_CAMERA_DIRECTION, false, 0);\n  let casings = null;\n  return {\n    \"plot\": plot,\n    \"toggle\": () => {\n      if (casings == null) {\n        casings = components.getComponent(\"casing\");\n        components.removeComponent(\"casing\");\n      } else {\n        casings.forEach((comp) => {\n          components.addComponent(\"casing\", comp);\n        });\n        casings = null;\n      }\n      plot.invalidateObject();\n    }\n  };\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac3D/AdditionalFunctionality/Schematics/schematics?section=usingSchematics&extract=true","width":"100%","height":"746px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"multilateral-schematic","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac3D/AdditionalFunctionality/Schematics/schematics#multilateralSchematic"},"children":["#"]}," Multilateral Schematic"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example shows how to display a multilateral well trajectory using the 3D SchematicsNode."]},{"$$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/geotoolkit3d/Plot.ts\";\nimport { Vector3 } from \"/node_modules/.vite/deps/three.js?v=2235af65\";\nimport { Trajectory3d } from \"@int/geotoolkit3d/geodata/Trajectory3d.ts\";\nimport { TrajectoryValue } from \"@int/geotoolkit3d/geodata/TrajectoryValue.ts\";\nimport { WellBoreData } from \"@int/geotoolkit/schematics/data/WellBoreData.ts\";\nimport { Grid } from \"@int/geotoolkit3d/scene/grid/Grid.ts\";\nimport { SchematicsNode } from \"@int/geotoolkit3d/scene/schematics/SchematicsNode.ts\";\nimport { AnnotationBase, Mode as AnnotationBaseMode } from \"@int/geotoolkit3d/scene/AnnotationBase.ts\";\nimport { DefaultColorProvider } from \"@int/geotoolkit/util/DefaultColorProvider.ts\";\nimport { MultiLatetalWells } from \"/src/code/Carnac3D/helpers/multilateralwells.ts\";\nimport { ExpandedAnnotationLayout } from \"@int/geotoolkit3d/schematics/layout/ExpandedAnnotationLayout.ts\";\nconst ANGLED_CAMERA_DIRECTION = new Vector3(0.5, -0.9, 0.1);\nfunction createAnnotation(title) {\n  return {\n    \"title\": title,\n    \"titlestyle\": {\n      \"font\": \"12px Arial\",\n      \"color\": \"yellow\"\n    },\n    \"linestyle\": \"yellow\",\n    \"mode\": AnnotationBaseMode.Center\n  };\n}\nfunction createScene(divElement) {\n  const wellsData = MultiLatetalWells.getData();\n  const plot = new Plot({\n    \"container\": divElement,\n    \"scale\": new Vector3(1, 1, 2.2)\n  });\n  const schematicsNodeData = [];\n  wellsData.forEach((wellData) => {\n    const data = new Trajectory3d(\n      wellData.x.slice(),\n      wellData.y.slice(),\n      wellData.z.slice(),\n      new Vector3(wellData.xRef, wellData.yRef, 0),\n      null,\n      [\n        new TrajectoryValue(\"data.dls\", wellData.values.slice())\n      ]\n    );\n    const components2 = new WellBoreData();\n    components2.addComponent(\"path\", {\n      \"geometry\": null,\n      \"value\": \"data.dls\",\n      \"colorprovider\": new DefaultColorProvider({\n        \"values\": [0, 1, 2],\n        \"colors\": [\"green\", \"yellow\", \"red\"]\n      })\n    });\n    schematicsNodeData.push({ \"data\": data, \"components\": components2 });\n  });\n  const grid = new Grid({\n    \"start\": new Vector3(-2e3, -2e3, -2500),\n    \"end\": new Vector3(2e3, 2e3, 0),\n    \"modelstart\": new Vector3(2e3, 2e3, 2500),\n    \"modelend\": new Vector3(-2e3, -2e3, 0)\n  });\n  const gridPlanes = grid.getPlanes();\n  gridPlanes.front.visible = false;\n  gridPlanes.back.visible = false;\n  const trajectory = new SchematicsNode(schematicsNodeData);\n  trajectory.setAnnotations([new AnnotationBase(\n    createAnnotation(\"Schematics Path #1, depth 1940\")\n  )], [-1940], 0);\n  trajectory.setAnnotations([new AnnotationBase(\n    createAnnotation(\"Schematics Path #2, depth 1700\")\n  )], [-1700], 1);\n  trajectory.setAnnotations([new AnnotationBase(\n    createAnnotation(\"Schematics Path #3, depth 1050\")\n  )], [-1050], 2);\n  const components = schematicsNodeData[0][\"components\"];\n  components.addComponent(\"casing\", {\n    \"geometry\": {\n      \"depth\": { \"to\": 270, \"from\": 40 },\n      \"diameter\": { \"outer\": 100 }\n    },\n    \"opacity\": 1,\n    \"annotation\": createAnnotation(\"Casing #1, depth from 40 to 270, diameter 100\")\n  });\n  components.addComponent(\"casing\", {\n    \"geometry\": {\n      \"depth\": { \"to\": 530, \"from\": 40 },\n      \"diameter\": { \"outer\": 75 }\n    },\n    \"colorprovider\": \"blue\",\n    \"annotation\": createAnnotation(\"Casing #2, depth from 40 to 530, diameter 75\")\n  });\n  components.addComponent(\"casing\", {\n    \"geometry\": {\n      \"depth\": { \"to\": 1900, \"from\": 40 },\n      \"diameter\": { \"outer\": 50 }\n    },\n    \"annotation\": createAnnotation(\"Casing #3, depth from 40 to 1900, diameter 50\")\n  });\n  schematicsNodeData[1][\"components\"].addComponent(\"casing\", {\n    \"geometry\": {\n      \"depth\": { \"to\": 1075, \"from\": 40 },\n      \"diameter\": { \"outer\": 50 }\n    },\n    \"annotation\": createAnnotation(\"Casing #4, depth from 40 to 1075, diameter 50\")\n  });\n  schematicsNodeData[2][\"components\"].addComponent(\"casing\", {\n    \"geometry\": {\n      \"depth\": { \"to\": 1075, \"from\": 40 },\n      \"diameter\": { \"outer\": 50 }\n    },\n    \"annotation\": createAnnotation(\"Casing #5, depth from 40 to 1075, diameter 50\")\n  });\n  plot.getRoot().add(grid);\n  plot.getRoot().add(trajectory);\n  plot.fitCamera(ANGLED_CAMERA_DIRECTION);\n  trajectory.setAnnotationLayout(new ExpandedAnnotationLayout());\n  return plot;\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#/Carnac3D/AdditionalFunctionality/Schematics/schematics?section=multilateralSchematic&extract=true","width":"100%","height":"674px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Schematic 3D","id":"schematic-3d","depth":1},{"value":"Data Initialization","id":"data-initialization","depth":3},{"value":"Configuring the Schematic","id":"configuring-the-schematic","depth":3},{"value":"Using Schematics","id":"using-schematics","depth":3},{"value":"Multilateral Schematic","id":"multilateral-schematic","depth":3}],"frontmatter":{"title":"Schematic 3D","seo":{"title":"Schematic 3D"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/carnac-3-d/additional-functionality/schematics","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}