{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Seismic in WellLog","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":"seismic-in-welllog","__idx":0},"children":["Seismic in WellLog"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial demonstrates how to embed a seismic image into the WellLog widget. The seismic pipeline uses trace processors to process each trace. The processed seismic data is then used to render the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogSeismicVisual"]}," which is added to the track as a child. Normally traces are located vertically in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["LogSeismicVisual"]},", but you can change orientation to horizontal using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["visual.setPlotType(PlotType.Wave)"]},". In additional position of each trace can be controlled with variable trace spacing mapping ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["VSTraceMapping"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"seismic-log-visual","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/SeismicInWelllog/seismicInWelllog#seismicLogVisual"},"children":["#"]}," Seismic Log Visual"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The example below demonstrates how to create a widget, insert it into a plot, and add the seismic image to 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 { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { SeismicPipeline } from \"@int/geotoolkit/seismic/pipeline/SeismicPipeline.ts\";\nimport { MemoryReader } from \"@int/geotoolkit/seismic/data/MemoryReader.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { SeismicColors } from \"@int/geotoolkit/seismic/util/SeismicColors.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { LogSeismicVisual } from \"@int/geotoolkit/seislog/LogSeismicVisual.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createMemorySeismic(traceCount, sampleCount, sampleRate) {\n  const reader = new MemoryReader({\n    \"numberoftraces\": traceCount,\n    \"numberofsamples\": sampleCount,\n    \"samplerate\": sampleRate\n  });\n  let stats = null;\n  reader.setTraceProcessor({\n    \"getTraceData\": function(reader2, trace, traceId) {\n      const thickness = 36;\n      const start = 80;\n      let stepper = 0.05;\n      for (let i = start; i < start + thickness; i++) {\n        trace[i + Math.round(2 * Math.cos(traceId))] = Math.cos(i / 2) * stepper;\n        stepper += 0.05;\n        if (stepper > 1) {\n          stepper = 1;\n        }\n      }\n    },\n    \"getDataStatistics\": function() {\n      stats = {\n        \"average\": 0,\n        \"min\": -1,\n        \"max\": 1,\n        \"rms\": Math.sqrt(2)\n      };\n      return stats;\n    }\n  });\n  reader.readDataSetStatistics((reader2, statistics) => {\n    stats = statistics;\n  });\n  return {\n    \"reader\": reader,\n    \"stats\": stats\n  };\n}\nfunction createSeismicPipeline(plotType) {\n  const sampleRate = 1;\n  const sampleCount = 150;\n  const traceCount = 20;\n  const seismic = createMemorySeismic(traceCount, sampleCount, sampleRate);\n  const seismicReader = seismic[\"reader\"];\n  const seismicStats = seismic[\"stats\"];\n  const colorProvider = SeismicColors.getDefault();\n  return new SeismicPipeline({\n    \"name\": \"MemorySeismic\",\n    \"reader\": seismicReader,\n    \"statistics\": seismicStats\n  }).setColorMap(colorProvider.createNamedColorMap(\"WhiteBlack\", 32)).setPlotType(plotType || {\n    \"wiggle\": true,\n    \"interpolateddensity\": true\n  });\n}\nfunction createLogSeismicVisual(plotType) {\n  const pipeline = createSeismicPipeline(plotType);\n  return new LogSeismicVisual({\n    \"pipeline\": pipeline\n  });\n}\nfunction createScene(canvas) {\n  const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple).setDepthLimits(4500, 5500).scale(0.5);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createLogSeismicVisual({\n      \"wiggle\": true,\n      \"interpolateddensity\": true\n    }).setName(\"Regular Seismic\").setBounds(new Rect(0, 4600, 1, 5e3))\n  ]);\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/SeismicInWelllog/seismicInWelllog?section=seismicLogVisual&extract=true","width":"100%","height":"542.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Close"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"wave-log-visual","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/SeismicInWelllog/seismicInWelllog#waveLogVisual"},"children":["#"]}," Wave Log Visual"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The example below demonstrates how to add the wave visual to the widget."]},{"$$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 { SeismicPipeline } from \"@int/geotoolkit/seismic/pipeline/SeismicPipeline.ts\";\nimport { MemoryReader } from \"@int/geotoolkit/seismic/data/MemoryReader.ts\";\nimport { NormalizationType } from \"@int/geotoolkit/seismic/pipeline/NormalizationType.ts\";\nimport { SeismicColors } from \"@int/geotoolkit/seismic/util/SeismicColors.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { LogSeismicVisual, PlotType } from \"@int/geotoolkit/seislog/LogSeismicVisual.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { initWaveConfiguration } from \"/src/code/WellLog/SeismicInWelllog/common.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createWaveImage(config) {\n  const input = config[\"data\"];\n  const minDepth = config[\"mindepth\"];\n  const maxDepth = config[\"maxdepth\"];\n  const min = config[\"colormapmin\"];\n  const max = config[\"colormapmax\"];\n  const colorMap = config[\"colormapname\"];\n  const colorCount = config[\"colorcount\"];\n  const interpolate = config[\"interpolated\"];\n  const wiggle = config[\"wiggle\"] === true;\n  const sampleRate = 1;\n  const sampleCount = input[0].length;\n  const traceCount = input.length;\n  const reader = new MemoryReader({\n    \"numberoftraces\": traceCount,\n    \"numberofsamples\": sampleCount,\n    \"samplerate\": sampleRate\n  });\n  reader.setTraceProcessor({\n    \"getTraceData\": function(reader2, trace, traceId) {\n      for (let i = 0; i < reader2.getNumberOfSamples(); i++) {\n        trace[i] = input[traceId][reader2.getNumberOfSamples() - i];\n      }\n    },\n    \"getDataStatistics\": function() {\n      return {\n        \"average\": max - min / 2,\n        \"min\": -1,\n        \"max\": 1,\n        \"rms\": Math.sqrt(2)\n      };\n    }\n  });\n  let stats = null;\n  reader.readDataSetStatistics((reader2, statistics) => {\n    stats = statistics;\n  });\n  const colorProvider = SeismicColors.getDefault();\n  const pipeline = new SeismicPipeline({\n    \"name\": \"MemorySeismic\",\n    \"reader\": reader,\n    \"statistics\": stats\n  }).setColorMap(colorProvider.createNamedColorMap(colorMap, colorCount)).setPlotType({\n    \"wiggle\": wiggle,\n    \"interpolateddensity\": interpolate ? true : false,\n    \"simpledensity\": interpolate ? false : true\n  }).setOptions({\n    \"normalization\": {\n      \"type\": NormalizationType.Limits,\n      \"limits\": {\n        min,\n        max\n      }\n    }\n  });\n  return new LogSeismicVisual({\n    \"name\": config[\"name\"],\n    \"pipeline\": pipeline,\n    \"bounds\": new Rect(0, minDepth, 1, maxDepth),\n    \"plottype\": PlotType.Wave\n  });\n}\nfunction createScene(canvas) {\n  const configurations = initWaveConfiguration();\n  const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple);\n  widget.addTrack(TrackType.IndexTrack);\n  let minDepth = Number.MAX_VALUE;\n  let maxDepth = -Number.MAX_VALUE;\n  for (let i = 0; i < configurations.length; i++) {\n    const config = configurations[i];\n    minDepth = Math.min(minDepth, config[\"mindepth\"]);\n    maxDepth = Math.max(maxDepth, config[\"maxdepth\"]);\n    widget.addTrack(TrackType.LinearTrack).addChild([\n      createWaveImage(configurations[i])\n    ]);\n  }\n  widget.setDepthLimits(minDepth - (maxDepth - minDepth) / 10, maxDepth + (maxDepth - minDepth) / 10).scale(30);\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/SeismicInWelllog/seismicInWelllog?section=waveLogVisual&extract=true","width":"100%","height":"542.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Close"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"wave-form-pattern","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/SeismicInWelllog/seismicInWelllog#waveFormPattern"},"children":["#"]}," Wave Form Pattern"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In addition, the wave form visual can display patterns for positive and negative fills, as shown in the example below."]},{"$$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 { SeismicPipeline } from \"@int/geotoolkit/seismic/pipeline/SeismicPipeline.ts\";\nimport { MemoryReader } from \"@int/geotoolkit/seismic/data/MemoryReader.ts\";\nimport { PatternFactory } from \"@int/geotoolkit/attributes/PatternFactory.ts\";\nimport { NormalizationType } from \"@int/geotoolkit/seismic/pipeline/NormalizationType.ts\";\nimport { SeismicColors } from \"@int/geotoolkit/seismic/util/SeismicColors.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { LogSeismicVisual, PlotType } from \"@int/geotoolkit/seislog/LogSeismicVisual.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { initWaveConfiguration } from \"/src/code/WellLog/SeismicInWelllog/common.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createWavePatternImage(config) {\n  const input = config[\"data\"];\n  const minDepth = config[\"mindepth\"];\n  const maxDepth = config[\"maxdepth\"];\n  const min = config[\"colormapmin\"];\n  const max = config[\"colormapmax\"];\n  const sampleRate = 1;\n  const sampleCount = input[0].length;\n  const traceCount = input.length;\n  const reader = new MemoryReader({\n    \"numberoftraces\": traceCount,\n    \"numberofsamples\": sampleCount,\n    \"samplerate\": sampleRate\n  });\n  reader.setTraceProcessor({\n    \"getTraceData\": function(reader2, trace, traceId) {\n      for (let i = 0; i < reader2.getNumberOfSamples(); i++) {\n        trace[i] = input[traceId][reader2.getNumberOfSamples() - i];\n      }\n    },\n    \"getDataStatistics\": function() {\n      return {\n        \"average\": max - min / 2,\n        \"min\": -1,\n        \"max\": 1,\n        \"rms\": Math.sqrt(2)\n      };\n    }\n  });\n  let stats = null;\n  reader.readDataSetStatistics((reader2, statistics) => {\n    stats = statistics;\n  });\n  const colorProvider = SeismicColors.getDefault();\n  const colorMap = colorProvider.createNamedColorMap(\"RedWhiteBlack\");\n  const pattern = PatternFactory.getInstance().createPattern(\n    \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAAF5JREFUWEftlDEOACAIA/n/p1USNYisdDoTHexQqQdmZmMtP77tWrvuxpVJvOvUb9Uqw1zwE7sk8vTlZfyHB8mDYCC2nyRyGNgD77Q9c4A5AAMwAAMwAAMwAAMwAAMTIjn2iP6kzQIAAAAASUVORK5CYII=\"\n  );\n  colorMap.setPositiveFillStyle({\n    \"pattern\": pattern,\n    \"foreground\": \"grey\"\n  });\n  colorMap.setNegativeFillStyle({\n    \"pattern\": pattern,\n    \"foreground\": \"grey\"\n  });\n  colorMap.setTraceLineStyle(\"red\");\n  const pipeline = new SeismicPipeline({\n    \"name\": \"MemorySeismic\",\n    \"reader\": reader,\n    \"statistics\": stats\n  }).setColorMap(colorMap).setOptions({\n    \"normalization\": {\n      \"type\": NormalizationType.Limits,\n      \"limits\": {\n        min: 2 * min,\n        max: 2 * max\n      }\n    },\n    \"plot\": {\n      \"type\": {\n        \"wiggle\": true,\n        \"negativefill\": true,\n        \"positivefill\": true,\n        \"negativecolorfill\": false,\n        \"positivecolorfill\": false\n      }\n    }\n  });\n  return new LogSeismicVisual({\n    \"name\": config[\"name\"],\n    \"pipeline\": pipeline,\n    \"bounds\": new Rect(0, minDepth, 1, maxDepth),\n    \"plottype\": PlotType.Wave\n  });\n}\nfunction createScene(canvas) {\n  const config = initWaveConfiguration()[1];\n  const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createWavePatternImage(config)\n  ]);\n  let minDepth = Number.MAX_VALUE;\n  let maxDepth = -Number.MAX_VALUE;\n  minDepth = Math.min(minDepth, config[\"mindepth\"]);\n  maxDepth = Math.max(maxDepth, config[\"maxdepth\"]);\n  widget.setDepthLimits(minDepth - (maxDepth - minDepth) / 10, maxDepth + (maxDepth - minDepth) / 10).scale(150);\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/SeismicInWelllog/seismicInWelllog?section=waveFormPattern&extract=true","width":"100%","height":"542.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Close"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"align-traces-by-depth","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/SeismicInWelllog/seismicInWelllog#alignTracesByDepth"},"children":["#"]}," Align Traces by Depth"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To align traces with exact depth values, you should use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["geotoolkit/seismic/data/VSTraceMapping"]},". It requires to pass depths or times for all traces starting from zero."]},{"$$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 { SeismicPipeline } from \"@int/geotoolkit/seismic/pipeline/SeismicPipeline.ts\";\nimport { MemoryReader } from \"@int/geotoolkit/seismic/data/MemoryReader.ts\";\nimport { NumericalDataSeries } from \"@int/geotoolkit/data/NumericalDataSeries.ts\";\nimport { VSTraceMapping } from \"@int/geotoolkit/seismic/data/VSTraceMapping.ts\";\nimport { Range } from \"@int/geotoolkit/util/Range.ts\";\nimport { NormalizationType } from \"@int/geotoolkit/seismic/pipeline/NormalizationType.ts\";\nimport { SeismicColors } from \"@int/geotoolkit/seismic/util/SeismicColors.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { LogSeismicVisual, PlotType } from \"@int/geotoolkit/seislog/LogSeismicVisual.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { WaveVisualHeader } from \"/src/code/WellLog/SeismicInWelllog/waveheader.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createWaveFormVisual(depths, values) {\n  const sampleRate = 1;\n  let i, j;\n  const sampleCount = values[0].length;\n  const traceCount = depths.length;\n  const reader = new MemoryReader({\n    \"numberoftraces\": traceCount,\n    \"numberofsamples\": sampleCount,\n    \"samplerate\": sampleRate\n  });\n  let minDepth = Number.MAX_VALUE;\n  let maxDepth = -Number.MAX_VALUE;\n  let min = Number.MAX_VALUE;\n  let max = -Number.MAX_VALUE;\n  for (i = 0; i < depths.length; ++i) {\n    if (depths[i] < minDepth)\n      minDepth = depths[i];\n    if (depths[i] > maxDepth)\n      maxDepth = depths[i];\n    for (j = 0; j < sampleCount; ++j) {\n      if (values[i][j] < min)\n        min = values[i][j];\n      if (values[i][j] > max)\n        max = values[i][j];\n    }\n  }\n  if (min === 0 || max === 0) {\n    min === 0 ? min = -max : max = -min;\n  }\n  if (min === max) {\n    min = min - 1;\n    max = max + 1;\n  }\n  reader.setTraceProcessor({\n    \"getTraceData\": function(reader2, trace, traceId) {\n      for (let i2 = 0; i2 < reader2.getNumberOfSamples(); i2++) {\n        trace[i2] = values[traceId][i2];\n      }\n    },\n    \"getDataStatistics\": function() {\n      return {\n        \"average\": (max - min) / 2,\n        \"min\": min,\n        \"max\": max,\n        \"rms\": Math.sqrt(2)\n      };\n    }\n  });\n  let stats = null;\n  reader.readDataSetStatistics((reader2, statistics) => {\n    stats = statistics;\n  });\n  const colorProvider = SeismicColors.getDefault();\n  const colorMap = colorProvider.createNamedColorMap(\"RedGreenBlue\").setNegativeFillStyle(\"rgba(0,255,0,0.5)\").setPositiveFillStyle(\"green\").setTraceLineStyle(\"black\");\n  const pipeline = new SeismicPipeline({\n    \"name\": \"MemorySeismic\",\n    \"reader\": reader,\n    \"statistics\": stats\n  }).setColorMap(colorMap).setPlotType({\n    \"wiggle\": true,\n    \"interpolateddensity\": false,\n    \"negativefill\": true,\n    \"positivefill\": true,\n    \"reversed\": true\n  }).setNormalization({\n    \"type\": NormalizationType.Limits,\n    \"limits\": {\n      \"min\": min,\n      \"max\": max\n    }\n  });\n  const positions = new NumericalDataSeries({ \"data\": depths });\n  const traceSpacing = 20;\n  const traceModel = new Range(minDepth - traceSpacing, maxDepth + traceSpacing);\n  const mapping = new VSTraceMapping(pipeline, positions, traceSpacing, traceModel);\n  pipeline.setTraceMapping(mapping);\n  const imageModelLimits = pipeline.getModelLimits();\n  return new LogSeismicVisual({\n    \"name\": \"Depth wave visual\",\n    \"pipeline\": pipeline,\n    \"bounds\": new Rect(0, imageModelLimits.getLeft(), 1, imageModelLimits.getRight()),\n    \"plottype\": PlotType.Wave\n  }).setTag({\n    \"depths\": new Range(minDepth, maxDepth),\n    \"unit\": \"ft3/ft3\"\n  });\n}\nfunction createScene(canvas) {\n  let minDepth = 4500;\n  const maxDepth = 6e3;\n  const depthStep = 20;\n  const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple).setDepthLimits(minDepth, maxDepth);\n  widget.addTrack(TrackType.IndexTrack);\n  widget.getHeaderContainer().getHeaderProvider().registerHeaderProvider(LogSeismicVisual.getClassName(), new WaveVisualHeader());\n  const depths = [];\n  const values = [];\n  minDepth = 4600;\n  const tracesCount = 20;\n  const samplesCount = 200;\n  for (let i = 0; i < tracesCount; i++) {\n    const samples = [];\n    for (let j = 0; j < samplesCount; j++) {\n      samples[j] = 0;\n      if (j > 50 && j < 100)\n        samples[j] = j - 50;\n      if (j >= 100 && j < 150)\n        samples[j] = 150 - j;\n    }\n    values.push(samples);\n    depths.push(minDepth + i * depthStep);\n    if (depths[depths.length - 1] > maxDepth) {\n      break;\n    }\n  }\n  widget.addTrack(TrackType.LinearTrack).addChild([\n    createWaveFormVisual(depths, values)\n  ]);\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/SeismicInWelllog/seismicInWelllog?section=alignTracesByDepth&extract=true","width":"100%","height":"542.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Close"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"real-time-wave-log-visual","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/SeismicInWelllog/seismicInWelllog#realTimeWaveLogVisual"},"children":["#"]}," Real-Time Wave Log Visual"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example shows how to add a Wave Visual to a Widget in real-time."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { WellLogWidget } from \"@int/geotoolkit/welllog/widgets/WellLogWidget.ts\";\nimport { SeismicPipeline } from \"@int/geotoolkit/seismic/pipeline/SeismicPipeline.ts\";\nimport { MemoryReader } from \"@int/geotoolkit/seismic/data/MemoryReader.ts\";\nimport { NormalizationType } from \"@int/geotoolkit/seismic/pipeline/NormalizationType.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { SeismicColors } from \"@int/geotoolkit/seismic/util/SeismicColors.ts\";\nimport { interpolate } from \"/src/code/WellLog/SeismicInWelllog/common.ts\";\nimport { CEMODCF } from \"/src/code/WellLog/SeismicInWelllog/data/CEMO_m331dR01_DCF.ts\";\nimport { WAVEDCF } from \"/src/code/WellLog/SeismicInWelllog/data/WAVE_m331dR01_DCF.ts\";\nimport { from } from \"@int/geotoolkit/selection/from.ts\";\nimport { LogSeismicVisual, PlotType } from \"@int/geotoolkit/seislog/LogSeismicVisual.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nlet WaveSeislogImages;\nfunction initWaveConfiguration() {\n  SeismicColors.getDefault().register(\"d1\", (map) => {\n    const colors = [];\n    interpolate(colors, 0, 255, {\n      A: 255,\n      R: 102,\n      G: 0,\n      B: 0\n    }, {\n      A: 255,\n      R: 254,\n      G: 253,\n      B: 223\n    });\n    map.setColors(colors);\n  }).register(\"Cool\", (map) => {\n    const colors = [];\n    interpolate(colors, 0, 127, {\n      A: 255,\n      R: 153,\n      G: 255,\n      B: 255\n    }, {\n      A: 255,\n      R: 80,\n      G: 80,\n      B: 180\n    });\n    interpolate(colors, 127, 255, {\n      A: 255,\n      R: 80,\n      G: 80,\n      B: 180\n    }, {\n      A: 255,\n      R: 102,\n      G: 29,\n      B: 111\n    });\n    map.setColors(colors);\n  }).register(\"d2\", (map) => {\n    const colors = [];\n    interpolate(colors, 0, 18, {\n      A: 255,\n      R: 255,\n      G: 252,\n      B: 158\n    }, {\n      A: 255,\n      R: 56,\n      G: 12,\n      B: 11\n    });\n    map.setColors(colors);\n  });\n  return [{\n    data: WAVEDCF,\n    startdepth: 3060,\n    step: 1,\n    colormapmin: 2,\n    colormapmax: 25,\n    colormapname: \"Cool\",\n    colorcount: 255,\n    interpolated: true,\n    wiggle: true\n  }, {\n    data: CEMODCF,\n    startdepth: 3060,\n    step: 1,\n    colormapmin: 56.58,\n    colormapmax: 135,\n    colormapname: \"d2\",\n    colorcount: 18,\n    interpolated: true,\n    wiggle: true\n  }];\n}\nfunction createWaveImage(config) {\n  const input = config[\"data\"];\n  const amountOfTraces = 5;\n  const minDepth = config[\"startdepth\"];\n  const maxDepth = minDepth + amountOfTraces * config[\"step\"];\n  const colorMap = config[\"colormapname\"];\n  const colorCount = config[\"colorcount\"];\n  const interpolate2 = config[\"interpolated\"];\n  const wiggle = config[\"wiggle\"] === true;\n  const sampleRate = 1;\n  const sampleCount = input[0].length;\n  const reader = new MemoryReader({\n    \"numberoftraces\": amountOfTraces,\n    \"numberofsamples\": sampleCount,\n    \"samplerate\": sampleRate\n  });\n  let min = Number.POSITIVE_INFINITY;\n  let max = Number.NEGATIVE_INFINITY;\n  let rms = 0;\n  let average = 0;\n  for (let traceId = 0; traceId < input.length; traceId++) {\n    const trace = input[traceId];\n    for (let i = 0; i < trace.length; i++) {\n      const sample = trace[i];\n      min = Math.min(min, sample);\n      max = Math.max(max, sample);\n      average += sample < 0 ? -sample : sample;\n      average += sample;\n      rms += sample * sample;\n    }\n  }\n  reader.setTraceProcessor({\n    \"getTraceData\": function(reader2, trace, traceId) {\n      const samplesCount = reader2.getNumberOfSamples();\n      for (let i = 0; i < samplesCount; i++) {\n        if (traceId >= input.length) {\n          traceId -= input.length;\n        }\n        trace[i] = input[traceId][i];\n      }\n    },\n    \"getDataStatistics\": function(reader2) {\n      const samplesAmount = amountOfTraces * reader2.getNumberOfSamples();\n      return {\n        \"min\": min,\n        \"max\": max,\n        \"average\": average / samplesAmount,\n        \"rms\": Math.sqrt(rms / samplesAmount)\n      };\n    }\n  });\n  let stats = null;\n  reader.readDataSetStatistics((reader2, statistics) => {\n    stats = statistics;\n  });\n  const colorProvider = SeismicColors.getDefault();\n  const pipeline = new SeismicPipeline({\n    \"name\": \"MemorySeismic\",\n    \"reader\": reader,\n    \"statistics\": stats\n  }).setColorMap(colorProvider.createNamedColorMap(colorMap, colorCount)).setPlotType({\n    \"wiggle\": wiggle,\n    \"interpolateddensity\": interpolate2,\n    \"simpledensity\": !interpolate2\n  }).setOptions({\n    \"normalization\": {\n      \"type\": NormalizationType.Limits,\n      \"limits\": {\n        min,\n        max\n      }\n    }\n  });\n  const waveSeislogImage = new LogSeismicVisual({\n    \"pipeline\": pipeline,\n    \"plottype\": PlotType.Wave,\n    \"bounds\": new Rect(0, minDepth, 1, maxDepth),\n    \"timetowaitchanges\": 0\n  });\n  WaveSeislogImages.push({\n    \"pipeline\": pipeline,\n    \"image\": waveSeislogImage,\n    \"data\": input,\n    \"traces\": amountOfTraces,\n    \"step\": config[\"step\"]\n  });\n  return waveSeislogImage;\n}\nfunction getWidget(plot) {\n  return from(plot.getRoot()).where((node) => node instanceof WellLogWidget).selectFirst();\n}\nfunction zoomIn(plot) {\n  getWidget(plot).scale(5 / 4);\n}\nfunction zoomOut(plot) {\n  getWidget(plot).scale(4 / 5);\n}\nfunction fitToHeight(plot) {\n  getWidget(plot).fitToHeight();\n}\nfunction run(plot) {\n  return window.setInterval(() => {\n    addTraces(1, plot);\n  }, 100);\n}\nfunction stop(interval) {\n  if (interval != null) {\n    clearInterval(interval);\n  }\n}\nfunction addTraces(traceAmount, plot) {\n  const widget = getWidget(plot);\n  for (let i = 0; i < WaveSeislogImages.length; i++) {\n    const waveInfo = WaveSeislogImages[i];\n    const pipeline = waveInfo[\"pipeline\"];\n    const reader = pipeline.getReader();\n    let numberOfTraces = reader.getNumberOfTraces();\n    numberOfTraces += traceAmount;\n    if (numberOfTraces > 100) {\n      numberOfTraces = 5;\n    }\n    const bounds = waveInfo[\"image\"].getBounds().clone().setHeight(numberOfTraces * waveInfo[\"step\"]);\n    const seismicModelLimits = waveInfo[\"image\"].getModelLimits().clone().setWidth(numberOfTraces);\n    reader.setNumberOfTraces(numberOfTraces);\n    pipeline.resetModelLimits();\n    waveInfo[\"image\"].setModelLimits(seismicModelLimits).setBounds(bounds);\n    widget.setDepthLimits(widget.getDepthLimits().getLow(), waveInfo[\"image\"].getBounds().getBottom() + 2).scrollToIndex(waveInfo[\"image\"].getBounds().getBottom() + 2);\n    waveInfo[\"traces\"] = numberOfTraces;\n  }\n}\nfunction createScene(canvas) {\n  WaveSeislogImages = [];\n  const configurations = initWaveConfiguration();\n  const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple);\n  widget.addTrack(TrackType.IndexTrack);\n  let minDepth = Number.MAX_VALUE;\n  let maxDepth = -Number.MAX_VALUE;\n  for (let i = 0; i < configurations.length; i++) {\n    const waveImage = createWaveImage(configurations[i]);\n    minDepth = Math.min(minDepth, waveImage.getBounds().getTop());\n    maxDepth = Math.max(maxDepth, waveImage.getBounds().getBottom());\n    widget.addTrack(TrackType.LinearTrack).addChild([waveImage]);\n  }\n  widget.setDepthLimits(minDepth - (maxDepth - minDepth) / 4, maxDepth + (maxDepth - minDepth) / 4).scale(10);\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget,\n    \"autosize\": false,\n    \"autorootbounds\": true\n  });\n  return plot;\n}\nexport { createScene, fitToHeight, run, stop, zoomIn, zoomOut };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/SeismicInWelllog/seismicInWelllog?section=realTimeWaveLogVisual&extract=true","width":"100%","height":"542.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Close"]}]},"headings":[{"value":"Seismic in WellLog","id":"seismic-in-welllog","depth":1},{"value":"Seismic Log Visual","id":"seismic-log-visual","depth":3},{"value":"Wave Log Visual","id":"wave-log-visual","depth":3},{"value":"Wave Form Pattern","id":"wave-form-pattern","depth":3},{"value":"Align Traces by Depth","id":"align-traces-by-depth","depth":3},{"value":"Real-Time Wave Log Visual","id":"real-time-wave-log-visual","depth":3}],"frontmatter":{"title":"Seismic in WellLog","seo":{"title":"Seismic in WellLog"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/seismic-in-welllog","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}