@welldot/render 0.2.3 → 0.3.0

package/dist/index.d.cts

@@ -135,6 +135,11 @@ type ConstructionTheme = {
         stroke: string;
         strokeWidth: number;
     };
+    centralizer: {
+        fill: string;
+        stroke: string;
+        strokeWidth: number;
+    };
     conflict: {
         stroke: string;
         strokeWidth: number;
@@ -266,6 +271,10 @@ type ComponentsClassNames = {
         group: string;
         item: string;
     };
+    centralizer: {
+        group: string;
+        item: string;
+    };
     conflict: {
         group: string;
         rect: string;
@@ -296,7 +305,7 @@ type ComponentsClassNames = {
     };
 };
 /** Keys identifying which tooltip types are active. Pass to `RenderConfig.tooltips` to control visibility. */
-type TooltipKey = 'geology' | 'hole' | 'surfaceCase' | 'holeFill' | 'wellCase' | 'wellScreen' | 'reduction' | 'conflict' | 'fracture' | 'cementPad' | 'cave';
+type TooltipKey = 'geology' | 'hole' | 'surfaceCase' | 'holeFill' | 'wellCase' | 'wellScreen' | 'reduction' | 'centralizer' | 'conflict' | 'fracture' | 'cementPad' | 'cave';
 /**
  * A paired-locale string for renderer-drawn text, or a bare string when the
  * value doesn't vary by locale. `pt` is the required fallback locale in the
@@ -344,6 +353,11 @@ type TooltipLabels<T = string> = {
     reduction: {
         title: T;
     };
+    centralizer: {
+        title: T;
+        depth: T;
+        spacing: T;
+    };
     conflict: {
         title: T;
     };
@@ -443,6 +457,10 @@ type RenderConfig = {
         surfaceCase: {
             diameterPaddingRatio: number;
         };
+        centralizer: {
+            /** Half the marker height in pixels (constant regardless of zoom). */
+            markerHalfHeight: number;
+        };
     };
     textures?: TexturesConfig;
     constructionLabels: {
@@ -526,6 +544,7 @@ type LegendRenderConfig = {
         wellCase: string;
         wellScreen: string;
         reduction: string;
+        centralizer: string;
         cementPad: string;
         conflict: string;
     };

package/dist/index.d.ts

@@ -135,6 +135,11 @@ type ConstructionTheme = {
         stroke: string;
         strokeWidth: number;
     };
+    centralizer: {
+        fill: string;
+        stroke: string;
+        strokeWidth: number;
+    };
     conflict: {
         stroke: string;
         strokeWidth: number;
@@ -266,6 +271,10 @@ type ComponentsClassNames = {
         group: string;
         item: string;
     };
+    centralizer: {
+        group: string;
+        item: string;
+    };
     conflict: {
         group: string;
         rect: string;
@@ -296,7 +305,7 @@ type ComponentsClassNames = {
     };
 };
 /** Keys identifying which tooltip types are active. Pass to `RenderConfig.tooltips` to control visibility. */
-type TooltipKey = 'geology' | 'hole' | 'surfaceCase' | 'holeFill' | 'wellCase' | 'wellScreen' | 'reduction' | 'conflict' | 'fracture' | 'cementPad' | 'cave';
+type TooltipKey = 'geology' | 'hole' | 'surfaceCase' | 'holeFill' | 'wellCase' | 'wellScreen' | 'reduction' | 'centralizer' | 'conflict' | 'fracture' | 'cementPad' | 'cave';
 /**
  * A paired-locale string for renderer-drawn text, or a bare string when the
  * value doesn't vary by locale. `pt` is the required fallback locale in the
@@ -344,6 +353,11 @@ type TooltipLabels<T = string> = {
     reduction: {
         title: T;
     };
+    centralizer: {
+        title: T;
+        depth: T;
+        spacing: T;
+    };
     conflict: {
         title: T;
     };
@@ -443,6 +457,10 @@ type RenderConfig = {
         surfaceCase: {
             diameterPaddingRatio: number;
         };
+        centralizer: {
+            /** Half the marker height in pixels (constant regardless of zoom). */
+            markerHalfHeight: number;
+        };
     };
     textures?: TexturesConfig;
     constructionLabels: {
@@ -526,6 +544,7 @@ type LegendRenderConfig = {
         wellCase: string;
         wellScreen: string;
         reduction: string;
+        centralizer: string;
         cementPad: string;
         conflict: string;
     };

package/dist/index.js

@@ -45,6 +45,7 @@ var RENDER_LABELS = {
       wellCase: { pt: "Revestimento", en: "Casing" },
       wellScreen: { pt: "Filtro", en: "Screen" },
       reduction: { pt: "Redu\xE7\xE3o", en: "Reduction" },
+      centralizer: { pt: "Centralizador", en: "Centralizer" },
       cementPad: { pt: "Laje de cimento", en: "Cement pad" },
       conflict: { pt: "Conflito", en: "Conflict" }
     }
@@ -71,6 +72,11 @@ var RENDER_LABELS = {
       slot: { pt: "Ranhura:", en: "Slot:" }
     },
     reduction: { title: { pt: "REDU\xC7\xC3O", en: "REDUCTION" } },
+    centralizer: {
+      title: { pt: "CENTRALIZADOR", en: "CENTRALIZER" },
+      depth: { pt: "Profundidade:", en: "Depth:" },
+      spacing: { pt: "Espa\xE7amento:", en: "Spacing:" }
+    },
     conflict: { title: { pt: "CONFLITO", en: "CONFLICT" } },
     fracture: {
       title: { pt: "FRATURA", en: "FRACTURE" },
@@ -116,6 +122,7 @@ function resolveTooltipLabels(locale) {
     wellCase: resolveGroup(t.wellCase, locale),
     wellScreen: resolveGroup(t.wellScreen, locale),
     reduction: resolveGroup(t.reduction, locale),
+    centralizer: resolveGroup(t.centralizer, locale),
     conflict: resolveGroup(t.conflict, locale),
     fracture: resolveGroup(t.fracture, locale),
     cementPad: resolveGroup(t.cementPad, locale),
@@ -176,6 +183,7 @@ var DEFAULT_WELL_THEME = {
   wellCase: { fill: "#ffffff", stroke: "#303030", strokeWidth: 2 },
   wellScreen: { stroke: "#303030", strokeWidth: 2 },
   reduction: { fill: "#ffffff", stroke: "#303030", strokeWidth: 2 },
+  centralizer: { fill: "none", stroke: "#303030", strokeWidth: 1.4 },
   conflict: { stroke: "#e52117", strokeWidth: 4 },
   unitLabels: {
     geologicFill: "#f0f0f0",
@@ -269,7 +277,8 @@ var STATIC_RENDER_CONFIG = {
   },
   construction: {
     cementPad: { widthMultiplier: 0.9, thicknessMultiplier: 1.3 },
-    surfaceCase: { diameterPaddingRatio: 0.1 }
+    surfaceCase: { diameterPaddingRatio: 0.1 },
+    centralizer: { markerHalfHeight: 4 }
   },
   tooltipLabels: resolveTooltipLabels("pt"),
   labels: {
@@ -340,6 +349,7 @@ var STATIC_RENDER_CONFIG = {
       wellCase: "Revestimento",
       wellScreen: "Filtro",
       reduction: "Redu\xE7\xE3o",
+      centralizer: "Centralizador",
       cementPad: "Laje de cimento",
       conflict: "Conflito"
     }
@@ -380,7 +390,8 @@ var INTERACTIVE_RENDER_CONFIG = {
   },
   construction: {
     cementPad: { widthMultiplier: 0.9, thicknessMultiplier: 1.3 },
-    surfaceCase: { diameterPaddingRatio: 0.1 }
+    surfaceCase: { diameterPaddingRatio: 0.1 },
+    centralizer: { markerHalfHeight: 4 }
   },
   tooltipLabels: resolveTooltipLabels("pt"),
   labels: {
@@ -448,6 +459,7 @@ var INTERACTIVE_RENDER_CONFIG = {
       wellCase: "Revestimento",
       wellScreen: "Filtro",
       reduction: "Redu\xE7\xE3o",
+      centralizer: "Centralizador",
       cementPad: "Laje de cimento",
       conflict: "Conflito"
     }
@@ -532,7 +544,7 @@ import {
 } from "@welldot/core";
 import {
   formatNumber as formatNumber3,
-  getProfileDiamValues as getProfileDiamValues4,
+  getProfileDiamValues as getProfileDiamValues5,
   getProfileLastItemsDepths
 } from "@welldot/utils";
 
@@ -592,6 +604,10 @@ var DEFAULT_COMPONENTS_CLASS_NAMES = {
     group: "well-screen",
     rect: "well-screen-rect"
   },
+  centralizer: {
+    group: "centralizer",
+    item: "centralizer-marker"
+  },
   reduction: {
     group: "reduction",
     item: "reduction-poly"
@@ -769,6 +785,15 @@ var populateTooltips = (svg, customClasses, units, tooltipConfig, labels, locale
               </span>
               <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.type}</strong> ${esc(d.type)}</span>
           `,
+    centralizer: (_, d) => `
+          <span class="${customClasses.tooltip.title}">${labels.centralizer.title}</span>
+          <span class="${customClasses.tooltip.primaryInfo}"><strong>${labels.centralizer.depth}</strong> ${esc(formatLength(d.depth, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
+          ${d.from !== d.to ? `<span class="${customClasses.tooltip.secondaryInfo}">${labels.common.from} ${esc(formatLength(d.from, units.length, locale))} ${esc(getLengthUnit(units.length))} ${labels.common.to} ${esc(formatLength(d.to, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>` : ""}
+          ${d.spacing ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.centralizer.spacing}</strong> ${esc(formatLength(d.spacing, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>` : ""}
+          <span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.type}</strong> ${esc(d.type)}</span>
+          ${d.diameter ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.diameter}</strong> ${esc(formatDiameter(d.diameter, units.diameter, locale))} ${esc(getDiameterUnit(units.diameter, locale))}</span>` : ""}
+          ${d.description ? `<span class="${customClasses.tooltip.secondaryInfo}"><strong>${labels.common.description}</strong> ${esc(d.description)}</span>` : ""}
+        `,
     conflict: (_, d) => `
           <span class="${customClasses.tooltip.title}">${labels.conflict.title}</span>
           <span class="${customClasses.tooltip.primaryInfo}">${labels.common.from} ${esc(formatLength(d.from, units.length, locale))} ${esc(getLengthUnit(units.length))} ${labels.common.to} ${esc(formatLength(d.to, units.length, locale))} ${esc(getLengthUnit(units.length))}</span>
@@ -1082,9 +1107,51 @@ function drawCaves(ctx, data) {
   merged.transition(ctx.transition).style("opacity", 1);
 }
 
-// src/renderers/construction-labels.renderer.ts
+// src/renderers/centralizers.renderer.ts
 import * as d32 from "d3";
-import { getProfileDiamValues } from "@welldot/utils";
+import { getCentralizerDepths, getProfileDiamValues } from "@welldot/utils";
+function diameterAt(items, depth) {
+  return items.find((i) => depth >= i.from && depth <= i.to)?.diameter;
+}
+function drawCentralizers(ctx, data) {
+  const group = ctx.groups.centralizerGroup;
+  const cls = ctx.classes.centralizer;
+  const maxXValue = d32.max(getProfileDiamValues(ctx.constructionData)) || 0;
+  const xScale = d32.scaleLinear().domain([0, maxXValue]).range([0, ctx.POCO_WIDTH]);
+  const pipes = [
+    ...ctx.constructionData.well_case,
+    ...ctx.constructionData.well_screen
+  ];
+  const holes = ctx.constructionData.bore_hole;
+  const markers = (data.centralizers ?? []).flatMap(
+    (c) => getCentralizerDepths(c).filter((depth) => depth >= ctx.depthFrom && depth < ctx.depthTo).map((depth) => ({ ...c, depth }))
+  );
+  const halfH = ctx.renderConfig.construction.centralizer.markerHalfHeight;
+  const bowPoints = (m, side) => {
+    const outerD = m.diameter ?? diameterAt(holes, m.depth) ?? maxXValue;
+    const pipeD = diameterAt(pipes, m.depth) ?? outerD * 0.75;
+    const pipeX = (ctx.POCO_CENTER + side * xScale(pipeD)) / 2;
+    const outerX = (ctx.POCO_CENTER + side * xScale(outerD)) / 2;
+    const y = ctx.yScale(m.depth);
+    return `${pipeX},${y - halfH} ${outerX},${y} ${pipeX},${y + halfH}`;
+  };
+  const selection = group.selectAll(`g.${cls.item}`).data(markers, (d) => `${d.from}:${d.to}:${d.depth}`);
+  selection.exit().remove();
+  const entered = selection.enter().append("g").attr("class", cls.item).on("mouseover", ctx.tooltips.centralizer.show).on("mouseout", ctx.tooltips.centralizer.hide);
+  entered.append("polyline").attr("class", `${cls.item}-left`);
+  entered.append("polyline").attr("class", `${cls.item}-right`);
+  const merged = entered.merge(selection);
+  merged.selectAll("polyline").attr("fill", ctx.theme.centralizer.fill).attr("stroke", ctx.theme.centralizer.stroke).attr("stroke-width", ctx.theme.centralizer.strokeWidth).attr("stroke-linejoin", "round");
+  merged.each((d, i, nodes) => {
+    const g = d32.select(nodes[i]);
+    g.select(`.${cls.item}-left`).attr("points", bowPoints(d, -1));
+    g.select(`.${cls.item}-right`).attr("points", bowPoints(d, 1));
+  });
+}
+
+// src/renderers/construction-labels.renderer.ts
+import * as d33 from "d3";
+import { getProfileDiamValues as getProfileDiamValues2 } from "@welldot/utils";
 function drawConstructionLabels(ctx, data) {
   if (!ctx.renderConfig.constructionLabels.active) return;
   ctx.groups.constructionLabelsGroup.selectAll("*").remove();
@@ -1092,8 +1159,8 @@ function drawConstructionLabels(ctx, data) {
   const clct = ctx.theme.constructionLabels;
   const fmtD = (mm) => formatDiameter(mm, ctx.units.diameter, ctx.locale);
   const dUnit = getDiameterUnit(ctx.units.diameter, ctx.locale);
-  const maxXValues = getProfileDiamValues(ctx.constructionData);
-  const xScale = d32.scaleLinear().domain([0, d32.max(maxXValues) || 0]).range([0, ctx.POCO_WIDTH]);
+  const maxXValues = getProfileDiamValues2(ctx.constructionData);
+  const xScale = d33.scaleLinear().domain([0, d33.max(maxXValues) || 0]).range([0, ctx.POCO_WIDTH]);
   const occupied = [];
   const placeLabel = (d, text) => {
     const clampedFrom = Math.max(d.from, ctx.depthFrom);
@@ -1159,16 +1226,16 @@ function drawConstructionLabels(ctx, data) {
 }
 
 // src/renderers/construction.renderer.ts
-import * as d33 from "d3";
-import { getProfileDiamValues as getProfileDiamValues2 } from "@welldot/utils";
+import * as d34 from "d3";
+import { getProfileDiamValues as getProfileDiamValues3 } from "@welldot/utils";
 function drawConstructive(ctx, data) {
   const { getHeight, getYPos } = getYAxisFunctions(ctx.yScale, {
     from: ctx.depthFrom,
     to: ctx.depthTo
   });
-  const maxXValues = getProfileDiamValues2(ctx.constructionData);
-  const maxXValueConstruction = d33.max(maxXValues) || 0;
-  const xScale = d33.scaleLinear().domain([0, maxXValueConstruction]).range([0, ctx.POCO_WIDTH]);
+  const maxXValues = getProfileDiamValues3(ctx.constructionData);
+  const maxXValueConstruction = d34.max(maxXValues) || 0;
+  const xScale = d34.scaleLinear().domain([0, maxXValueConstruction]).range([0, ctx.POCO_WIDTH]);
   const rcc = ctx.renderConfig.construction;
   const yPos = getYPos;
   ctx.groups.constructionGroup.selectAll(`.${ctx.classes.cementPad.item}`).remove();
@@ -1207,11 +1274,11 @@ function drawConstructive(ctx, data) {
     const w = xScale(
       d.diameter + d.diameter * rcc.surfaceCase.diameterPaddingRatio
     );
-    const g = d33.select(nodes[i]);
+    const g = d34.select(nodes[i]);
     g.select(".surface-case-fill").attr("x", x).attr("width", w).attr("fill", ctx.textures.surface_case.url());
     const sideNodes = g.selectAll(".surface-case-side").nodes();
-    d33.select(sideNodes[0]).attr("x1", x).attr("x2", x);
-    d33.select(sideNodes[1]).attr("x1", x + w).attr("x2", x + w);
+    d34.select(sideNodes[0]).attr("x1", x).attr("x2", x);
+    d34.select(sideNodes[1]).attr("x1", x + w).attr("x2", x + w);
   });
   withTransition(
     mergedSC.select(".surface-case-fill"),
@@ -1268,7 +1335,7 @@ function drawConstructive(ctx, data) {
 }
 
 // src/renderers/fractures.renderer.ts
-import * as d34 from "d3";
+import * as d35 from "d3";
 function wavyLine(rng, steps, baseY, jitter, startInset, endInset) {
   const pts = [];
   for (let i = 0; i < steps; i++) {
@@ -1305,7 +1372,7 @@ function drawFractures(ctx, data) {
     (fracture) => `translate(0,${yScale(fracture.depth)}) rotate(${fracture.dip},${pocoCenterX},0)`
   );
   merged.each(function(fracture) {
-    const g = d34.select(this);
+    const g = d35.select(this);
     g.selectAll("*").remove();
     const rng = makeSeededPrng(fracture.depth, 7919);
     const hitBuffer = fracture.swarm ? rf.hitBuffer.swarm : rf.hitBuffer.single;
@@ -1384,8 +1451,8 @@ function drawFractures(ctx, data) {
 }
 
 // src/renderers/highlights.renderer.ts
-import * as d35 from "d3";
-import { getProfileDiamValues as getProfileDiamValues3 } from "@welldot/utils";
+import * as d36 from "d3";
+import { getProfileDiamValues as getProfileDiamValues4 } from "@welldot/utils";
 function drawHighlightItem(ctx, group, x, y, w, h, label) {
   if (h <= 0 || w <= 0) return;
   const hlConfig = ctx.renderConfig.highlights;
@@ -1444,8 +1511,8 @@ function drawHighlights(ctx, hl) {
       h.label
     );
   });
-  const maxXVals = getProfileDiamValues3(ctx.constructionData);
-  const xScaleConstr = d35.scaleLinear().domain([0, d35.max(maxXVals) || 0]).range([0, ctx.POCO_WIDTH]);
+  const maxXVals = getProfileDiamValues4(ctx.constructionData);
+  const xScaleConstr = d36.scaleLinear().domain([0, d36.max(maxXVals) || 0]).range([0, ctx.POCO_WIDTH]);
   const constructionConfig = ctx.renderConfig.construction;
   if (hl.cement_pad && ctx.depthFrom === 0 && ctx.constructionData.cement_pad?.thickness) {
     const cp = ctx.constructionData.cement_pad;
@@ -1540,7 +1607,7 @@ function drawHighlights(ctx, hl) {
 // src/renderers/legend.renderer.ts
 import * as d3module from "d3";
 import { defu } from "defu";
-var d36 = { ...d3module };
+var d37 = { ...d3module };
 function drawWellLegend(selector, profile, options = {}) {
   const fractures = profile.fractures ?? [];
   const caves = profile.caves ?? [];
@@ -1561,6 +1628,7 @@ function drawWellLegend(selector, profile, options = {}) {
   const hasWellCase = wellCases.length > 0;
   const hasWellScreen = wellScreens.length > 0;
   const hasReduction = reductions.length > 0;
+  const hasCentralizer = (profile.centralizers ?? []).length > 0;
   const hasCementPad = !!profile.cement_pad?.thickness;
   const hasConflict = mergeConflicts(
     [
@@ -1653,13 +1721,19 @@ function drawWellLegend(selector, profile, options = {}) {
       label: cfg.labels.reduction,
       subKind: "reduction"
     });
+  if (hasCentralizer)
+    items.push({
+      kind: "construction",
+      label: cfg.labels.centralizer,
+      subKind: "centralizer"
+    });
   if (hasConflict)
     items.push({
       kind: "construction",
       label: cfg.labels.conflict,
       subKind: "conflict"
     });
-  const svgEl = d36.select(selector);
+  const svgEl = d37.select(selector);
   svgEl.selectAll("*").remove();
   if (items.length === 0) {
     svgEl.attr("width", 0).attr("height", 0);
@@ -1711,6 +1785,25 @@ function drawWellLegend(selector, profile, options = {}) {
       symG.append("rect").attr("class", cls.constructionRect).attr("x", cx).attr("y", rowSymY - rh / 2).attr("width", rw).attr("height", rh).attr("fill", legendTextures.surface_case.url()).attr("stroke", "none");
       symG.append("line").attr("class", cls.constructionRect).attr("x1", cx).attr("x2", cx).attr("y1", rowSymY - rh / 2).attr("y2", rowSymY + rh / 2).attr("stroke", theme.surfaceCase.stroke).attr("stroke-width", 2);
       symG.append("line").attr("class", cls.constructionRect).attr("x1", cx + rw).attr("x2", cx + rw).attr("y1", rowSymY - rh / 2).attr("y2", rowSymY + rh / 2).attr("stroke", theme.surfaceCase.stroke).attr("stroke-width", 2);
+    } else if (item.subKind === "centralizer") {
+      const pipeW = rw * 0.4;
+      const pipeL = cx + (rw - pipeW) / 2;
+      const pipeR = pipeL + pipeW;
+      const y1 = rowSymY - rh / 2;
+      const y2 = rowSymY + rh / 2;
+      const bowH = rh * 0.3;
+      for (const x of [pipeL, pipeR]) {
+        symG.append("line").attr("class", cls.constructionRect).attr("x1", x).attr("x2", x).attr("y1", y1).attr("y2", y2).attr("stroke", theme.wellCase.stroke).attr("stroke-width", theme.legend.itemStrokeWidth);
+      }
+      for (const [from, to] of [
+        [pipeL, cx],
+        [pipeR, cx + rw]
+      ]) {
+        symG.append("polyline").attr("class", cls.constructionRect).attr(
+          "points",
+          `${from},${rowSymY - bowH} ${to},${rowSymY} ${from},${rowSymY + bowH}`
+        ).attr("fill", theme.centralizer.fill).attr("stroke", theme.centralizer.stroke).attr("stroke-width", theme.centralizer.strokeWidth);
+      }
     } else if (item.subKind === "reduction") {
       const topW = rw * 0.5;
       const y1 = rowSymY - rh / 2;
@@ -1877,7 +1970,7 @@ function buildSvgStyleBlock(theme) {
 }
 
 // src/Renderer.ts
-var d37 = { ...d3module2, tip: d3tip2 };
+var d38 = { ...d3module2, tip: d3tip2 };
 var WellRenderer = class {
   /**
    * @param svgs - One entry per SVG panel; multi-entry for split-panel layouts.
@@ -1937,7 +2030,7 @@ var WellRenderer = class {
     const { selector, height, width, margins } = inst;
     const svgWidth = width + margins.left + margins.right;
     const svgHeight = height + margins.top + margins.bottom;
-    const svg = d37.select(selector);
+    const svg = d38.select(selector);
     svg.selectAll("*").remove();
     svg.attr("height", svgHeight).attr("width", svgWidth);
     const defs = svg.append("defs");
@@ -1964,6 +2057,7 @@ var WellRenderer = class {
     construction.append("g").attr("class", this.classes.wellCase.group);
     construction.append("g").attr("class", this.classes.wellScreen.group);
     construction.append("g").attr("class", this.classes.reduction.group);
+    construction.append("g").attr("class", this.classes.centralizer.group);
     construction.append("g").attr("class", this.classes.conflict.group);
     construction.append("g").attr("class", this.classes.constructionLabels.group);
     construction.append("g").attr("class", this.classes.highlights.constructionGroup);
@@ -1995,7 +2089,7 @@ var WellRenderer = class {
    * (defaults to `1`, i.e. the initial fit-to-container view).
    */
   resetZoom() {
-    const target = d37.zoomIdentity.scale(this.renderConfig.zoomLevel ?? 1);
+    const target = d38.zoomIdentity.scale(this.renderConfig.zoomLevel ?? 1);
     for (const state of this.instanceStates) {
       if (!state.zoomNode) continue;
       asSvgElement(state.svg).transition().call(state.zoomNode.transform, target);
@@ -2007,7 +2101,7 @@ var WellRenderer = class {
    */
   getZoomScale() {
     const node = this.instanceStates[0]?.svg.node();
-    return node ? d37.zoomTransform(node).k : 1;
+    return node ? d38.zoomTransform(node).k : 1;
   }
   /**
    * Initialises the SVG DOM structure and preloads FGDC textures.
@@ -2039,7 +2133,7 @@ var WellRenderer = class {
     }
     const highlights = options.highlights ?? {};
     const maxValues = getProfileLastItemsDepths(profile);
-    const maxYValues = d37.max(maxValues) || 0;
+    const maxYValues = d38.max(maxValues) || 0;
     if (this.instanceStates.length === 1) {
       this.drawLogToInstance(
         this.instanceStates[0],
@@ -2051,7 +2145,7 @@ var WellRenderer = class {
       return;
     }
     const totalHeight = this.instanceStates.reduce((s, st) => s + st.height, 0) || 1;
-    const yScaleGlobal = d37.scaleLinear().domain([0, maxYValues]).range([0, totalHeight]);
+    const yScaleGlobal = d38.scaleLinear().domain([0, maxYValues]).range([0, totalHeight]);
     let currentDepth = 0;
     for (const state of this.instanceStates) {
       const maxSvgDepth = yScaleGlobal.invert(
@@ -2084,6 +2178,7 @@ var WellRenderer = class {
     const wellCaseGroup = svg.select(`.${this.classes.wellCase.group}`);
     const wellScreenGroup = svg.select(`.${this.classes.wellScreen.group}`);
     const reductionGroup = svg.select(`.${this.classes.reduction.group}`);
+    const centralizerGroup = svg.select(`.${this.classes.centralizer.group}`);
     const conflictGroup = svg.select(`.${this.classes.conflict.group}`);
     const constructionLabelsGroup = svg.select(
       `.${this.classes.constructionLabels.group}`
@@ -2104,7 +2199,7 @@ var WellRenderer = class {
     const POCO_WIDTH = svgWidth * pocoWidthRatio;
     const POCO_CENTER = svgWidth * pocoCenterRatio;
     const { duration, ease } = this.renderConfig.animation;
-    const transition = d37.transition().duration(duration).ease(ease);
+    const transition = d38.transition().duration(duration).ease(ease);
     const tooltips = populateTooltips(
       svg,
       this.classes,
@@ -2129,13 +2224,14 @@ var WellRenderer = class {
       well_case: profile.well_case,
       well_screen: profile.well_screen,
       reduction: profile.reduction,
+      centralizers: profile.centralizers ?? [],
       fractures: profile.fractures
     };
     const contentHeight = svgHeight - state.margins.top - state.margins.bottom;
-    const yScaleLocal = d37.scaleLinear().domain([depthFrom, depthTo]).range([0, contentHeight]);
+    const yScaleLocal = d38.scaleLinear().domain([depthFrom, depthTo]).range([0, contentHeight]);
     const depthFactor = this.units.length === "ft" ? 3.28084 : 1;
-    const yScaleAxis = d37.scaleLinear().domain([depthFrom * depthFactor, depthTo * depthFactor]).range([0, contentHeight]);
-    const yAxis = d37.axisLeft(yScaleAxis).tickFormat(
+    const yScaleAxis = d38.scaleLinear().domain([depthFrom * depthFactor, depthTo * depthFactor]).range([0, contentHeight]);
+    const yAxis = d38.axisLeft(yScaleAxis).tickFormat(
       (d) => `${formatNumber3(Number(d), {
         maximumFractionDigits: this.units.length === "ft" ? 1 : 2,
         locale: this.locale
@@ -2177,6 +2273,7 @@ var WellRenderer = class {
       wellCaseGroup,
       wellScreenGroup,
       reductionGroup,
+      centralizerGroup,
       conflictGroup,
       highlightsGeologicGroup,
       highlightsConstructionGroup,
@@ -2214,7 +2311,8 @@ var WellRenderer = class {
       surface_case: constructionData.surface_case.filter(inDepth),
       well_case: constructionData.well_case.filter(inDepth),
       well_screen: constructionData.well_screen.filter(inDepth),
-      reduction: constructionData.reduction?.filter(inDepth) ?? []
+      reduction: constructionData.reduction?.filter(inDepth) ?? [],
+      centralizers: constructionData.centralizers?.filter(inDepth) ?? []
     };
     const zooming = (e) => {
       const transform = e.transform;
@@ -2233,14 +2331,14 @@ var WellRenderer = class {
       surfaceCaseGroup.selectAll(`g.${this.classes.surfaceCase.rect}`).each((d, i, nodes) => {
         if (!d) return;
         const sc = d;
-        const g = d37.select(nodes[i]);
+        const g = d38.select(nodes[i]);
         const y = transform.applyY(spanY(sc));
         const h = transform.k * spanH(sc);
         g.select(".surface-case-fill").attr("y", y).attr("height", h);
         g.selectAll(".surface-case-side").attr("y1", y).attr("y2", y + h);
       });
-      const maxXValsReduction = getProfileDiamValues4(constructionData);
-      const xScaleReduction = d37.scaleLinear().domain([0, d37.max(maxXValsReduction) || 0]).range([0, POCO_WIDTH]);
+      const maxXValsReduction = getProfileDiamValues5(constructionData);
+      const xScaleReduction = d38.scaleLinear().domain([0, d38.max(maxXValsReduction) || 0]).range([0, POCO_WIDTH]);
       reductionGroup.selectAll(`polygon.${this.classes.reduction.item}`).attr("points", (d) => {
         const r = d;
         const yTop = transform.applyY(spanY(r));
@@ -2267,6 +2365,7 @@ var WellRenderer = class {
         ) ?? [],
         caves: profile.caves?.filter(inDepth) ?? []
       });
+      drawCentralizers(zoomedCtx, filteredConstruction);
       drawConstructionLabels(zoomedCtx, {
         well_case: constructionData.well_case.filter(inDepth),
         well_screen: constructionData.well_screen.filter(inDepth)
@@ -2293,6 +2392,7 @@ var WellRenderer = class {
         ) ?? []
       );
       drawConstructive(ctx, filteredConstruction);
+      drawCentralizers(ctx, filteredConstruction);
       drawConstructionLabels(ctx, {
         well_case: filteredConstruction.well_case,
         well_screen: filteredConstruction.well_screen
@@ -2312,7 +2412,7 @@ var WellRenderer = class {
     }
     const { zoom: zoomEnabled, pan: panEnabled } = this.renderConfig;
     if (zoomEnabled || panEnabled) {
-      const zoomNode = d37.zoom();
+      const zoomNode = d38.zoom();
       if (zoomEnabled || panEnabled) zoomNode.on("zoom", zooming);
       zoomNode.scaleExtent(
         zoomEnabled ? [
@@ -2328,7 +2428,7 @@ var WellRenderer = class {
       if (initialZoom !== 1) {
         asSvgElement(svg).call(
           zoomNode.transform,
-          d37.zoomIdentity.scale(initialZoom)
+          d38.zoomIdentity.scale(initialZoom)
         );
       }
     }