@welldot/render 0.2.3 → 0.3.0

package/README.md

@@ -35,7 +35,7 @@ Call `prepareSvg()` once after mounting the SVG element, then call `draw(profile
 ## What it renders
 
 - **Lithology column** — geological layers with FGDC standard texture patterns and custom fill colors
-- **Construction** — borehole, well casings, diameter reductions, well screens, hole fills (gravel pack / cement seal), and cement pad
+- **Construction** — borehole, well casings, diameter reductions, well screens, hole fills (gravel pack / cement seal), centralizers (`.well` v2.1 — bow markers in the annulus at each derived position; size via `renderConfig.construction.centralizer.markerHalfHeight`, colors via `theme.centralizer`, tooltip key `centralizer`), and cement pad
 - **Fractures** — individual and swarm fractures with dip angles and water-intake indicators
 - **Caves** — cavity zones with wavy geological contact lines
 - **Labels** — depth annotations, lithology descriptions, and geologic / aquifer unit strips

package/dist/index.cjs

@@ -386,6 +386,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" }
     }
@@ -412,6 +413,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" },
@@ -457,6 +463,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),
@@ -517,6 +524,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",
@@ -610,7 +618,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: {
@@ -681,6 +690,7 @@ var STATIC_RENDER_CONFIG = {
       wellCase: "Revestimento",
       wellScreen: "Filtro",
       reduction: "Redu\xE7\xE3o",
+      centralizer: "Centralizador",
       cementPad: "Laje de cimento",
       conflict: "Conflito"
     }
@@ -721,7 +731,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: {
@@ -789,6 +800,7 @@ var INTERACTIVE_RENDER_CONFIG = {
       wellCase: "Revestimento",
       wellScreen: "Filtro",
       reduction: "Redu\xE7\xE3o",
+      centralizer: "Centralizador",
       cementPad: "Laje de cimento",
       conflict: "Conflito"
     }
@@ -869,7 +881,7 @@ function createWellTextures(cfg) {
 
 // src/Renderer.ts
 var import_core = require("@welldot/core");
-var import_utils6 = require("@welldot/utils");
+var import_utils7 = require("@welldot/utils");
 
 // src/configs/render.classnames.ts
 var DEFAULT_COMPONENTS_CLASS_NAMES = {
@@ -927,6 +939,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"
@@ -1104,6 +1120,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>
@@ -1417,9 +1442,51 @@ function drawCaves(ctx, data) {
   merged.transition(ctx.transition).style("opacity", 1);
 }
 
-// src/renderers/construction-labels.renderer.ts
+// src/renderers/centralizers.renderer.ts
 var d32 = __toESM(require("d3"), 1);
 var import_utils3 = require("@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((0, import_utils3.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) => (0, import_utils3.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
+var d33 = __toESM(require("d3"), 1);
+var import_utils4 = require("@welldot/utils");
 function drawConstructionLabels(ctx, data) {
   if (!ctx.renderConfig.constructionLabels.active) return;
   ctx.groups.constructionLabelsGroup.selectAll("*").remove();
@@ -1427,8 +1494,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 = (0, import_utils3.getProfileDiamValues)(ctx.constructionData);
-  const xScale = d32.scaleLinear().domain([0, d32.max(maxXValues) || 0]).range([0, ctx.POCO_WIDTH]);
+  const maxXValues = (0, import_utils4.getProfileDiamValues)(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);
@@ -1494,16 +1561,16 @@ function drawConstructionLabels(ctx, data) {
 }
 
 // src/renderers/construction.renderer.ts
-var d33 = __toESM(require("d3"), 1);
-var import_utils4 = require("@welldot/utils");
+var d34 = __toESM(require("d3"), 1);
+var import_utils5 = require("@welldot/utils");
 function drawConstructive(ctx, data) {
   const { getHeight, getYPos } = getYAxisFunctions(ctx.yScale, {
     from: ctx.depthFrom,
     to: ctx.depthTo
   });
-  const maxXValues = (0, import_utils4.getProfileDiamValues)(ctx.constructionData);
-  const maxXValueConstruction = d33.max(maxXValues) || 0;
-  const xScale = d33.scaleLinear().domain([0, maxXValueConstruction]).range([0, ctx.POCO_WIDTH]);
+  const maxXValues = (0, import_utils5.getProfileDiamValues)(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();
@@ -1542,11 +1609,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"),
@@ -1603,7 +1670,7 @@ function drawConstructive(ctx, data) {
 }
 
 // src/renderers/fractures.renderer.ts
-var d34 = __toESM(require("d3"), 1);
+var d35 = __toESM(require("d3"), 1);
 function wavyLine(rng, steps, baseY, jitter, startInset, endInset) {
   const pts = [];
   for (let i = 0; i < steps; i++) {
@@ -1640,7 +1707,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;
@@ -1719,8 +1786,8 @@ function drawFractures(ctx, data) {
 }
 
 // src/renderers/highlights.renderer.ts
-var d35 = __toESM(require("d3"), 1);
-var import_utils5 = require("@welldot/utils");
+var d36 = __toESM(require("d3"), 1);
+var import_utils6 = require("@welldot/utils");
 function drawHighlightItem(ctx, group, x, y, w, h, label) {
   if (h <= 0 || w <= 0) return;
   const hlConfig = ctx.renderConfig.highlights;
@@ -1779,8 +1846,8 @@ function drawHighlights(ctx, hl) {
       h.label
     );
   });
-  const maxXVals = (0, import_utils5.getProfileDiamValues)(ctx.constructionData);
-  const xScaleConstr = d35.scaleLinear().domain([0, d35.max(maxXVals) || 0]).range([0, ctx.POCO_WIDTH]);
+  const maxXVals = (0, import_utils6.getProfileDiamValues)(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;
@@ -1875,7 +1942,7 @@ function drawHighlights(ctx, hl) {
 // src/renderers/legend.renderer.ts
 var d3module = __toESM(require("d3"), 1);
 var import_defu = require("defu");
-var d36 = { ...d3module };
+var d37 = { ...d3module };
 function drawWellLegend(selector, profile, options = {}) {
   const fractures = profile.fractures ?? [];
   const caves = profile.caves ?? [];
@@ -1896,6 +1963,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(
     [
@@ -1988,13 +2056,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);
@@ -2046,6 +2120,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;
@@ -2212,7 +2305,7 @@ function buildSvgStyleBlock(theme) {
 }
 
 // src/Renderer.ts
-var d37 = { ...d3module2, tip: import_d3_tip2.default };
+var d38 = { ...d3module2, tip: import_d3_tip2.default };
 var WellRenderer = class {
   /**
    * @param svgs - One entry per SVG panel; multi-entry for split-panel layouts.
@@ -2272,7 +2365,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");
@@ -2299,6 +2392,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);
@@ -2330,7 +2424,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);
@@ -2342,7 +2436,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.
@@ -2373,8 +2467,8 @@ var WellRenderer = class {
       this.locale = options.locale;
     }
     const highlights = options.highlights ?? {};
-    const maxValues = (0, import_utils6.getProfileLastItemsDepths)(profile);
-    const maxYValues = d37.max(maxValues) || 0;
+    const maxValues = (0, import_utils7.getProfileLastItemsDepths)(profile);
+    const maxYValues = d38.max(maxValues) || 0;
     if (this.instanceStates.length === 1) {
       this.drawLogToInstance(
         this.instanceStates[0],
@@ -2386,7 +2480,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(
@@ -2419,6 +2513,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}`
@@ -2439,7 +2534,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,
@@ -2464,14 +2559,15 @@ 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(
-      (d) => `${(0, import_utils6.formatNumber)(Number(d), {
+    const yScaleAxis = d38.scaleLinear().domain([depthFrom * depthFactor, depthTo * depthFactor]).range([0, contentHeight]);
+    const yAxis = d38.axisLeft(yScaleAxis).tickFormat(
+      (d) => `${(0, import_utils7.formatNumber)(Number(d), {
         maximumFractionDigits: this.units.length === "ft" ? 1 : 2,
         locale: this.locale
       })}${getLengthUnit(this.units.length)}`
@@ -2512,6 +2608,7 @@ var WellRenderer = class {
       wellCaseGroup,
       wellScreenGroup,
       reductionGroup,
+      centralizerGroup,
       conflictGroup,
       highlightsGeologicGroup,
       highlightsConstructionGroup,
@@ -2549,7 +2646,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;
@@ -2568,14 +2666,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 = (0, import_utils6.getProfileDiamValues)(constructionData);
-      const xScaleReduction = d37.scaleLinear().domain([0, d37.max(maxXValsReduction) || 0]).range([0, POCO_WIDTH]);
+      const maxXValsReduction = (0, import_utils7.getProfileDiamValues)(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));
@@ -2602,6 +2700,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)
@@ -2628,6 +2727,7 @@ var WellRenderer = class {
         ) ?? []
       );
       drawConstructive(ctx, filteredConstruction);
+      drawCentralizers(ctx, filteredConstruction);
       drawConstructionLabels(ctx, {
         well_case: filteredConstruction.well_case,
         well_screen: filteredConstruction.well_screen
@@ -2647,7 +2747,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 ? [
@@ -2663,7 +2763,7 @@ var WellRenderer = class {
       if (initialZoom !== 1) {
         asSvgElement(svg).call(
           zoomNode.transform,
-          d37.zoomIdentity.scale(initialZoom)
+          d38.zoomIdentity.scale(initialZoom)
         );
       }
     }