{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Async Rendering","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":"async-rendering","__idx":0},"children":["Async Rendering"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"unsing-data-loader-in-async-rendeing","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/AsyncRendering/asyncRendering#dataLoader"},"children":["#"]}," Unsing Data Loader in Async rendeing"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example demonstrates the ability async to load data for LogCurve and Log2DVisual, when exporting, you can request only the necessary part of the data by setting limits. If data is not loaded then when attempt to export curve, loader sends request to load data and after how data is loaded, curve is exported."]},{"$$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 { LogData } from \"@int/geotoolkit/welllog/data/LogData.ts\";\nimport { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { Range } from \"@int/geotoolkit/util/Range.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { DataBindingRegistry } from \"@int/geotoolkit/data/DataBindingRegistry.ts\";\nimport { DataBinding } from \"@int/geotoolkit/data/DataBinding.ts\";\nimport { IndexType } from \"@int/geotoolkit/welllog/IndexType.ts\";\nimport { Events } from \"@int/geotoolkit/util/EventDispatcher.ts\";\nimport { DefaultColorProvider } from \"@int/geotoolkit/util/DefaultColorProvider.ts\";\nimport { Log2DVisual, PlotTypes } from \"@int/geotoolkit/welllog/Log2DVisual.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorProvider.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nimport { createLogCurveDataSource, initializeLogCurveDataLoader } from \"/src/code/WellLog/AdditionalFunctionality/AsyncRendering/logCurveDataLoader.ts\";\nimport { createLog2dDataSource, initializeLog2dDataLoader } from \"/src/code/WellLog/AdditionalFunctionality/AsyncRendering/log2dDataLoader.ts\";\nimport { log2DData } from \"/src/code/WellLog/AdditionalFunctionality/AsyncRendering/log2DData.ts\";\nconst DATA_RANGE = new Range(100, 5e3);\nclass DataLoaderBinding extends DataBinding {\n  constructor(logDataLoader) {\n    super();\n    this._logDataLoader = logDataLoader;\n  }\n  dispose() {\n    if (this._logDataLoader != null) {\n      this._logDataLoader.dispose();\n      this._logDataLoader = null;\n    }\n  }\n  accept(node) {\n    return node instanceof LogCurve;\n  }\n  bind(curve, dataTable) {\n    if (dataTable == null || dataTable !== this._logDataLoader.getDataTable()) {\n      return;\n    }\n    const id = curve.getName();\n    const source = createLogCurveDataSource(id, this._logDataLoader);\n    if (source != null) {\n      curve.setData(source, true, true);\n    }\n  }\n  unbind(curve, dataTable) {\n  }\n}\nfunction create2DVisual(name, min, max, offset) {\n  const delta = (max - min) / 3;\n  const colors = new DefaultColorProvider().setNamedColor(KnownColors.NegativeInfinity, \"blue\").setNamedColor(KnownColors.PositiveInfinity, \"blue\").setNamedColor(KnownColors.NaN, \"gray\").addColor(min, \"#7cb342\").addColor(min + delta, \"yellow\").addColor(min + 2 * delta, \"orange\").addColor(max, \"red\");\n  return new Log2DVisual().setData(createLog2dDataSource(initializeLog2dDataLoader())).setName(name).setColorProvider(colors).setOffsets(offset).setMicroPosition(0, 1).setPlotType(PlotTypes.Step);\n}\nfunction createWidget() {\n  const wellLogWidget = createWellLogWidget({\n    \"indextype\": IndexType.Depth,\n    \"indexunit\": \"ft\",\n    \"range\": DATA_RANGE\n  }).setAxisHeaderType(HeaderType.Simple);\n  wellLogWidget.addTrack(TrackType.IndexTrack);\n  wellLogWidget.addTrack(TrackType.LinearTrack).addChild([\n    new LogCurve(new LogData(\"GR\")).setLineStyle(\"green\")\n  ]);\n  wellLogWidget.addTrack(TrackType.LogTrack).addChild([\n    new LogCurve(new LogData(\"RHOB\")).setLineStyle(\"red\")\n  ]);\n  wellLogWidget.addTrack(TrackType.LogTrack).addChild([\n    create2DVisual(\"Log 2D\", log2DData.min, log2DData.max)\n  ]);\n  const logDataLoader = initializeLogCurveDataLoader();\n  wellLogWidget.setData(logDataLoader.getDataTable());\n  const loaderBinding = new DataLoaderBinding(logDataLoader);\n  const binding = new DataBindingRegistry().add(loaderBinding);\n  wellLogWidget.setDataBinding(binding);\n  wellLogWidget.on(Events.Disposed, () => {\n    loaderBinding.dispose();\n  });\n  return wellLogWidget;\n}\nfunction exportToPdf(widget, settings) {\n  const pdfPrintSettings = settings[\"printSettings\"];\n  const visibleDepthLimits = widget.getDepthLimits();\n  let limits;\n  if (pdfPrintSettings[\"limitsType\"] === \"Visible\") {\n    limits = {\n      \"start\": visibleDepthLimits.getLow(),\n      \"end\": visibleDepthLimits.getHigh()\n    };\n  } else if (pdfPrintSettings[\"limitsType\"] === \"Custom\") {\n    limits = {\n      \"start\": pdfPrintSettings[\"limitsStart\"],\n      \"end\": pdfPrintSettings[\"limitsEnd\"]\n    };\n  }\n  const options = {\n    \"usedeepcopy\": settings[\"deepcopy\"],\n    \"output\": \"PDF Output\",\n    \"printsettings\": pdfPrintSettings,\n    \"limits\": limits,\n    \"deviceunit\": widget.getDeviceUnit(),\n    \"indexunit\": widget.getIndexUnit(),\n    \"keepaspectratio\": false,\n    \"progress\": settings[\"progress\"]\n  };\n  return widget.exportToPdf(options);\n}\nfunction createScene(canvas) {\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nfunction dispose(plot) {\n  plot.dispose();\n}\nexport { createScene, dispose, exportToPdf };\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/AdditionalFunctionality/AsyncRendering/asyncRendering?section=dataLoader&extract=true","width":"100%","height":"648.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"how-to-add-async-rendering-to-custom-visual","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/AsyncRendering/asyncRendering#customvisual"},"children":["#"]}," How to add Async rendering to Custom Visual"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example demonstrates how to create custom AsyncVisual to support async rendering.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"To demonstrate this, we emulate remote rendering, to render LogTrack with data in memory to the image and then blend it to the real WellLogWidget"]},{"$$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 { TrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { Range } from \"@int/geotoolkit/util/Range.ts\";\nimport { HeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { IndexType } from \"@int/geotoolkit/welllog/IndexType.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nimport { AsyncShape } from \"/src/code/WellLog/AdditionalFunctionality/AsyncRendering/AsyncVisual.ts\";\nconst DATA_RANGE = new Range(100, 2400);\nfunction createWidget() {\n  const wellLogWidget = createWellLogWidget({\n    \"indextype\": IndexType.Depth,\n    \"indexunit\": \"ft\",\n    \"range\": DATA_RANGE\n  }).setAxisHeaderType(HeaderType.Simple);\n  wellLogWidget.addTrack(TrackType.IndexTrack);\n  wellLogWidget.addTrack(TrackType.AnnotationTrack).setWidth(250).addChild([\n    new AsyncShape()\n  ]);\n  return wellLogWidget;\n}\nfunction exportToPdf(widget, settings) {\n  const pdfPrintSettings = settings[\"printSettings\"];\n  const visibleDepthLimits = widget.getDepthLimits();\n  let limits;\n  if (pdfPrintSettings[\"limitsType\"] === \"Visible\") {\n    limits = {\n      \"start\": visibleDepthLimits.getLow(),\n      \"end\": visibleDepthLimits.getHigh()\n    };\n  } else if (pdfPrintSettings[\"limitsType\"] === \"Custom\") {\n    limits = {\n      \"start\": pdfPrintSettings[\"limitsStart\"],\n      \"end\": pdfPrintSettings[\"limitsEnd\"]\n    };\n  }\n  const options = {\n    \"usedeepcopy\": settings[\"deepcopy\"],\n    \"output\": \"PDF Output\",\n    \"printsettings\": pdfPrintSettings,\n    \"limits\": limits,\n    \"deviceunit\": widget.getDeviceUnit(),\n    \"indexunit\": widget.getIndexUnit(),\n    \"keepaspectratio\": false,\n    \"progress\": settings[\"progress\"]\n  };\n  return widget.exportToPdf(options);\n}\nfunction createScene(canvas) {\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": createWidget()\n  });\n}\nfunction dispose(plot) {\n  plot.dispose();\n}\nexport { createScene, dispose, exportToPdf };\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/AdditionalFunctionality/AsyncRendering/asyncRendering?section=customvisual&extract=true","width":"100%","height":"648.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Async Rendering","id":"async-rendering","depth":1},{"value":"Unsing Data Loader in Async rendeing","id":"unsing-data-loader-in-async-rendeing","depth":3},{"value":"How to add Async rendering to Custom Visual","id":"how-to-add-async-rendering-to-custom-visual","depth":3}],"frontmatter":{"title":"Async Rendering","seo":{"title":"Async Rendering"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/additional-functionality/async-rendering","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}