{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"IVAAP Backend Data","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":"ivaap-backend-data","__idx":0},"children":["IVAAP Backend Data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This tutorial shows how to request well data from IVAAP backend. This tutorial creates ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit.ivaapbackend.well.remotewelllogdatasource.remotewelllogdatasource.html"},"children":["geotoolkit.ivaapbackend.well.RemoteWellLogDataSource"]}," datasource to control data requests."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"log-curve-data","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/DataAndTemplates/IVAAPBackendData/ivaapBackendData#logCurveData"},"children":["#"]}," Log Curve Data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The canvas below shows how Log Curve data can be requested from the server."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { LogCurveDataSource } from \"@int/geotoolkit/welllog/data/LogCurveDataSource.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { Orientation } from \"@int/geotoolkit/util/Orientation.ts\";\nimport { RemoteWellLogDataSource } from \"@int/geotoolkit/ivaapbackend/well/RemoteWellLogDataSource.ts\";\nimport { UnitFactory } from \"@int/geotoolkit/util/UnitFactory.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { MathUtil } from \"@int/geotoolkit/util/MathUtil.ts\";\nimport { log, warn } from \"@int/geotoolkit/base.js\";\nimport { authorize, headers } from \"/src/helpers/IvaapAutorize.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nconst unitFactory = UnitFactory.getInstance();\nunitFactory.addUnit(\"0.1 in\", [\"length\"], \"0.1inch\", \"m\", 0, 254e-5, 1, 0);\nconst ERROR_LOAD_WELLS = \"Cannot load wells from ivaap server\";\nfunction isCurveData(data) {\n  return data != null && data.length > 0 && typeof data[0] === \"number\";\n}\nfunction generateData(scaleUnit) {\n  return getLogCurvesData().then(\n    (result) => result.map((data) => {\n      let values = data.values;\n      if (!isCurveData(values)) {\n        return null;\n      }\n      const depthUnit = unitFactory.getUnit(data.indexUnit);\n      values = values.map(\n        (value) => MathUtil.equals(value, data.emptyValue) || MathUtil.equals(value, data.nullValue) ? Number.NaN : value\n      );\n      const depths = data.depths.map((depth) => depthUnit.convert(depth, scaleUnit));\n      return new LogCurveDataSource({\n        \"depths\": depths,\n        \"values\": values,\n        \"name\": data.name\n      });\n    })\n  );\n}\nfunction getLogCurvesData() {\n  const wellsServiceUrl = \"https://pub.ivaap.int.com/ivaap/api/ds/mongo/v1/sources/e7b82fa5-6186-404f-994a-d50c18bb23ec/wells\";\n  const wellsServiceDataSource = new RemoteWellLogDataSource();\n  let logDataset = null;\n  return authorize().then(\n    () => wellsServiceDataSource.setProperties({ \"requestheaders\": headers }).loadWellsMeta(wellsServiceUrl).then((wellCollection) => {\n      const wellMeta = wellCollection.items.find((wellMeta2) => wellMeta2.content.name === \"15/9-F-5\");\n      return wellsServiceDataSource.loadWellData(wellMeta);\n    }).then((wellData) => wellsServiceDataSource.loadLogsMeta(wellData)).then((logsCollection) => {\n      const logMeta = logsCollection.items.find(\n        (meta) => meta.content.name === \"QC Data/15/9-F-5/&0&B34604_2\"\n      );\n      return wellsServiceDataSource.loadLogData(logMeta);\n    }).then((logData) => {\n      logDataset = logData;\n      const curveInfoList = logData.content.curveInfoList;\n      const logCurves = curveInfoList.filter(\n        (info) => info.numColumns === 1 && info.name !== logData.content.indexInfo.indexName\n      );\n      return Promise.all(logCurves.map((curveInfo) => {\n        const curveIds = [curveInfo.dataUID];\n        const minIndex = curveInfo.minIndex;\n        const maxIndex = curveInfo.maxIndex;\n        const indexType = logData.content.indexInfo.indexType;\n        return wellsServiceDataSource.loadLogCurveValues(logData, curveIds, minIndex, maxIndex, indexType);\n      }));\n    }).then(\n      (dataArray) => dataArray.map((curvesData) => {\n        const indexName = logDataset.content.indexInfo.indexName;\n        const depthsData = curvesData.map(\n          (curveData) => isCurveData(curveData.data) && curveData.name === indexName ? {\n            name: curveData.name,\n            depths: curveData.data\n          } : null\n        ).find((data) => data != null);\n        const valuesData = curvesData.map(\n          (curveData) => isCurveData(curveData.data) && curveData.name !== indexName ? {\n            name: curveData.name,\n            values: curveData.data\n          } : null\n        ).find((data) => data != null);\n        const curveInfoList = logDataset.content.curveInfoList;\n        const curveInfo = curveInfoList.find((info) => info.name === valuesData.name);\n        return {\n          name: valuesData.name,\n          depths: depthsData.depths,\n          values: valuesData.values,\n          emptyValue: curveInfo.emptyValue,\n          nullValue: curveInfo.nullValue,\n          indexUnit: logDataset.content.indexInfo.unitName\n        };\n      })\n    )\n  ).catch((error) => {\n    log(error);\n    throw new Error(ERROR_LOAD_WELLS);\n  });\n}\nfunction createScene(canvas) {\n  const widget = createWellLogWidget().setOrientation(Orientation.Vertical).setAxisHeaderType(HeaderType.Simple).scale(2);\n  generateData(widget.getTrackContainer().getIndexUnit()).then((dataSources) => {\n    if (widget.isDisposed())\n      return;\n    let minDepth = Number.POSITIVE_INFINITY;\n    let maxDepth = Number.NEGATIVE_INFINITY;\n    widget.addTrack(TrackType.IndexTrack);\n    dataSources.forEach((dataSource) => {\n      if (minDepth > dataSource.getMinDepth()) {\n        minDepth = dataSource.getMinDepth();\n      }\n      if (maxDepth < dataSource.getMaxDepth()) {\n        maxDepth = dataSource.getMaxDepth();\n      }\n      widget.addTrack(TrackType.LinearTrack).addChild([\n        new LogCurve(dataSource).setLineStyle(KnownColors.Red)\n      ]);\n      widget.addTrack(TrackType.IndexTrack);\n    });\n    widget.setDepthLimits(minDepth, maxDepth);\n  }).catch((error) => {\n    warn(error);\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/DataAndTemplates/IVAAPBackendData/ivaapBackendData?section=logCurveData&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"array-log-data","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/DataAndTemplates/IVAAPBackendData/ivaapBackendData#arrayLogData"},"children":["#"]}," Array Log Data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The canvas below shows how Array Log data can be requested from the server."]},{"$$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 { Log2DVisual, PlotTypes } from \"@int/geotoolkit/welllog/Log2DVisual.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { Orientation } from \"@int/geotoolkit/util/Orientation.ts\";\nimport { CompositeLog2DVisualHeader } from \"@int/geotoolkit/welllog/header/CompositeLog2DVisualHeader.ts\";\nimport { ArrayLogDataSource } from \"@int/geotoolkit/welllog/data/ArrayLogDataSource.ts\";\nimport { DataTable } from \"@int/geotoolkit/data/DataTable.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { RemoteWellLogDataSource } from \"@int/geotoolkit/ivaapbackend/well/RemoteWellLogDataSource.ts\";\nimport { UnitFactory } from \"@int/geotoolkit/util/UnitFactory.ts\";\nimport { MathUtil } from \"@int/geotoolkit/util/MathUtil.ts\";\nimport { log, warn } from \"@int/geotoolkit/base.js\";\nimport { create2DVisual } from \"/src/code/WellLog/utils/util.ts\";\nimport { authorize, headers } from \"/src/helpers/IvaapAutorize.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nconst unitFactory = UnitFactory.getInstance();\nunitFactory.addUnit(\"0.1 in\", [\"length\"], \"0.1inch\", \"m\", 0, 254e-5, 1, 0);\nconst ERROR_LOAD_WELLS = \"Cannot load wells from ivaap server\";\nfunction isArrayData(data) {\n  return data != null && data.length > 0 && Array.isArray(data[0]);\n}\nfunction generateData(scaleUnit) {\n  return getLogArrayData().then(\n    (result) => result.map((data) => {\n      const table = new DataTable({\n        \"cols\": [\n          { \"name\": \"depth\", \"type\": \"number\", \"unit\": scaleUnit.getSymbol() },\n          ...data.angles.map((v) => ({ \"name\": v + \"\", \"type\": \"number\" }))\n        ],\n        \"colsdata\": []\n      });\n      const depthUnit = unitFactory.getUnit(data.indexUnit);\n      for (let i = 0; i < data.depths.length; i++) {\n        let row = data.values[i];\n        if (!Array.isArray(row))\n          continue;\n        row = row.map(\n          (value) => MathUtil.equals(value, data.emptyValue) || MathUtil.equals(value, data.nullValue) ? Number.NaN : value\n        );\n        const depth = depthUnit.convert(data.depths[i], scaleUnit);\n        table.addRow([depth, ...row]);\n      }\n      return new ArrayLogDataSource({\n        \"name\": data[\"name\"],\n        \"datatable\": table,\n        \"angles\": {\n          \"values\": data[\"angles\"]\n        }\n      });\n    })\n  );\n}\nfunction generateAngles(values) {\n  return values[0].map((v, i, arr) => Math.PI * 2 / (arr.length - 1) * i);\n}\nfunction getLogArrayData() {\n  const wellsServiceUrl = \"https://pub.ivaap.int.com/ivaap/api/ds/mongo/v1/sources/e7b82fa5-6186-404f-994a-d50c18bb23ec/wells\";\n  const wellsServiceDataSource = new RemoteWellLogDataSource();\n  let logDataset = null;\n  return authorize().then(\n    () => wellsServiceDataSource.setProperties({ \"requestheaders\": headers }).loadWellsMeta(wellsServiceUrl).then((wellCollection) => {\n      const wellMeta = wellCollection.items.find((wellMeta2) => wellMeta2.content.name === \"15/9-F-5\");\n      return wellsServiceDataSource.loadWellData(wellMeta);\n    }).then((wellData) => wellsServiceDataSource.loadLogsMeta(wellData)).then((logsCollection) => {\n      const logMeta = logsCollection.items.find(\n        (meta) => meta.content.name === \"QC Data/15/9-F-5/&0&B34604_2\"\n      );\n      return wellsServiceDataSource.loadLogData(logMeta);\n    }).then((logData) => {\n      logDataset = logData;\n      const curveInfoList = logData.content.curveInfoList;\n      const logArrays = curveInfoList.filter((info) => info.numColumns > 1);\n      return Promise.all(logArrays.map((curveInfo) => {\n        const curveIds = [curveInfo.dataUID];\n        const minIndex = curveInfo.minIndex;\n        const maxIndex = curveInfo.maxIndex;\n        const indexType = logData.content.indexInfo.indexType;\n        return wellsServiceDataSource.loadLogCurveValues(logData, curveIds, minIndex, maxIndex, indexType);\n      }));\n    }).then(\n      (dataArray) => dataArray.map((curvesData) => {\n        const depthsData = curvesData.map(\n          (curveData) => !isArrayData(curveData.data) ? {\n            name: curveData.name,\n            depths: curveData.data\n          } : null\n        ).find((data) => data != null);\n        const valuesData = curvesData.map(\n          (curveData) => isArrayData(curveData.data) ? {\n            name: curveData.name,\n            values: curveData.data\n          } : null\n        ).find((data) => data != null);\n        const angles = generateAngles(valuesData.values);\n        const curveInfoList = logDataset.content.curveInfoList;\n        const curveInfo = curveInfoList.find((info) => info.name === valuesData.name);\n        return {\n          name: valuesData.name,\n          depths: depthsData.depths,\n          values: valuesData.values,\n          angles,\n          emptyValue: curveInfo.emptyValue,\n          nullValue: curveInfo.nullValue,\n          indexUnit: logDataset.content.indexInfo.unitName\n        };\n      })\n    )\n  ).catch((error) => {\n    log(error);\n    throw new Error(ERROR_LOAD_WELLS);\n  });\n}\nfunction createScene(canvas) {\n  const widget = createWellLogWidget().setOrientation(Orientation.Vertical).setAxisHeaderType(HeaderType.Simple).scale(2);\n  const headerProvider = widget.getHeaderContainer().getHeaderProvider();\n  headerProvider.registerHeaderProvider(Log2DVisual.getClassName(), new CompositeLog2DVisualHeader());\n  generateData(widget.getTrackContainer().getIndexUnit()).then((dataSources) => {\n    if (widget.isDisposed())\n      return;\n    let minDepth = Number.MAX_VALUE;\n    let maxDepth = Number.MIN_VALUE;\n    widget.addTrack(TrackType.IndexTrack);\n    dataSources.forEach((dataSource) => {\n      if (minDepth > dataSource.getMinDepth()) {\n        minDepth = dataSource.getMinDepth();\n      }\n      if (maxDepth < dataSource.getMaxDepth()) {\n        maxDepth = dataSource.getMaxDepth();\n      }\n      widget.addTrack(TrackType.LinearTrack).addChild([\n        create2DVisual(dataSource, dataSource.getName(), 0, \"#fff9c4\", true).setPlotType(PlotTypes.Linear)\n      ]);\n      widget.addTrack(TrackType.IndexTrack);\n    });\n    widget.setDepthLimits(minDepth, maxDepth);\n  }).catch((error) => {\n    warn(error);\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/DataAndTemplates/IVAAPBackendData/ivaapBackendData?section=arrayLogData&extract=true","width":"100%","height":"488.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"IVAAP Backend Data","id":"ivaap-backend-data","depth":1},{"value":"Log Curve Data","id":"log-curve-data","depth":3},{"value":"Array Log Data","id":"array-log-data","depth":3}],"frontmatter":{"title":"IVAAP Backend Data","seo":{"title":"IVAAP Backend Data"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/data-and-templates/ivaap-backend-data","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}