@welldot/render 0.0.1 → 0.1.0

package/dist/index.cjs

@@ -832,9 +832,6 @@ var DEFAULT_COMPONENTS_CLASS_NAMES = {
 var import_textures2 = __toESM(require("textures"), 1);
 
 // src/utils/d3.utils.ts
-function mergeEnter(enter, update) {
-  return enter.merge(update);
-}
 function withTransition(selection, transition) {
   return selection.transition(transition);
 }
@@ -852,6 +849,18 @@ var getYAxisFunctions = (yScale, clamp) => {
     getYPos: ({ from }) => yScale(Math.max(from, clampFrom))
   };
 };
+function hashStr(s) {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) {
+    h = Math.imul(h, 33) ^ s.charCodeAt(i);
+  }
+  return (h >>> 0).toString(36);
+}
+function stableLayerKey(d) {
+  const { from: _f, to: _t, ...rest } = d;
+  const sortedKeys = Object.keys(rest).sort();
+  return hashStr(JSON.stringify(rest, sortedKeys));
+}
 function filterByDepth(depthFrom, depthTo) {
   return (l) => !(l.to <= depthFrom || l.from >= depthTo);
 }
@@ -904,10 +913,11 @@ var import_d3_tip = __toESM(require("d3-tip"), 1);
 var import_sanitize_html = __toESM(require("sanitize-html"), 1);
 var d3 = Object.assign(d3module, { tip: import_d3_tip.default });
 var esc = (v) => (0, import_sanitize_html.default)(String(v ?? ""), { allowedTags: [], allowedAttributes: {} });
+var _tooltipCache = /* @__PURE__ */ new WeakMap();
 var populateTooltips = (svg, customClasses, units, tooltipConfig) => {
   const svgEl = typeof svg.node === "function" ? svg.node() : null;
-  if (svgEl?.getAttribute("data-tooltips-init") === "true") {
-    return {};
+  if (svgEl && _tooltipCache.has(svgEl)) {
+    return _tooltipCache.get(svgEl);
   }
   const tipsText = {
     geology: (_, d) => `
@@ -1003,6 +1013,7 @@ var populateTooltips = (svg, customClasses, units, tooltipConfig) => {
     );
   });
   svgEl?.setAttribute("data-tooltips-init", "true");
+  if (svgEl) _tooltipCache.set(svgEl, tooltips);
   return tooltips;
 };
 
@@ -1020,13 +1031,20 @@ var preloadFgdcTextures = () => {
 var getLithologicalFillList = (data, opts) => {
   const uniqueTextureCodes = [...new Set(data.map((d) => d.fgdc_texture))];
   const texturesLoaded = Object.fromEntries(
-    uniqueTextureCodes.filter((code) => _fgdcTextures[code]).map((code) => [code, _fgdcTextures[code]])
+    uniqueTextureCodes.filter((code) => {
+      const path = _fgdcTextures[code];
+      return path && path !== "-" && /^[Mm]/.test(path);
+    }).map((code) => [code, _fgdcTextures[code]])
   );
   return Object.fromEntries(
-    data.map((d) => [
-      `${d.fgdc_texture}.${d.from}`,
-      import_textures2.default.paths().d(() => texturesLoaded[d.fgdc_texture]).size(opts.size).strokeWidth(opts.strokeWidth).stroke(opts.stroke).background(d.color)
-    ])
+    data.map((d) => {
+      const pathData = texturesLoaded[d.fgdc_texture];
+      if (!pathData) return [`${d.fgdc_texture}.${d.from}`, d.color];
+      return [
+        `${d.fgdc_texture}.${d.from}`,
+        import_textures2.default.paths().d(() => pathData).size(opts.size).strokeWidth(opts.strokeWidth).stroke(opts.stroke).background(d.color)
+      ];
+    })
   );
 };
 var getLithologyFill = (geologyData, svg, opts) => {
@@ -1342,19 +1360,36 @@ function drawConstructive(ctx, data) {
     }).attr("fill", ctx.textures.pad.url()).attr("stroke", ctx.theme.cementPad.stroke).attr("stroke-width", ctx.theme.cementPad.strokeWidth);
     newCementPad.on("mouseover", ctx.tooltips.cementPad.show).on("mouseout", ctx.tooltips.cementPad.hide);
   }
-  const hole = ctx.groups.holeGroup.selectAll(`.${ctx.classes.boreHole.rect}`).data(data.bore_hole);
-  hole.exit().remove();
-  const newHole = hole.enter().append("rect").attr("class", ctx.classes.boreHole.rect).attr("fill", ctx.theme.boreHole.fill).attr("stroke", ctx.theme.boreHole.stroke).attr("opacity", ctx.theme.boreHole.opacity).attr("stroke-width", ctx.theme.boreHole.strokeWidth).attr("stroke-dasharray", ctx.theme.boreHole.strokeDasharray).on("mouseover", ctx.tooltips.hole.show).on("mouseout", ctx.tooltips.hole.hide);
-  const mergedHole = mergeEnter(newHole, hole).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
-  withTransition(mergedHole, ctx.transition).attr("y", getYPos).attr("height", getHeight);
-  const surfaceCaseGs = ctx.groups.surfaceCaseGroup.selectAll(`g.${ctx.classes.surfaceCase.rect}`).data(data.surface_case);
+  const hole = ctx.groups.holeGroup.selectAll(`.${ctx.classes.boreHole.rect}`).data(data.bore_hole, stableLayerKey);
+  hole.exit().transition(ctx.transition).attr("height", 0).remove();
+  const newHole = hole.enter().append("rect").attr("class", ctx.classes.boreHole.rect).attr("fill", ctx.theme.boreHole.fill).attr("stroke", ctx.theme.boreHole.stroke).attr("stroke-width", ctx.theme.boreHole.strokeWidth).attr("stroke-dasharray", ctx.theme.boreHole.strokeDasharray).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter)).attr("y", getYPos).attr("height", getHeight).attr("opacity", 0).on("mouseover", ctx.tooltips.hole.show).on("mouseout", ctx.tooltips.hole.hide);
+  withTransition(newHole, ctx.transition).attr(
+    "opacity",
+    ctx.theme.boreHole.opacity
+  );
+  hole.attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
+  withTransition(hole, ctx.transition).attr("y", getYPos).attr("height", getHeight);
+  const surfaceCaseGs = ctx.groups.surfaceCaseGroup.selectAll(`g.${ctx.classes.surfaceCase.rect}`).data(data.surface_case, stableLayerKey);
   surfaceCaseGs.exit().transition(ctx.transition).style("opacity", 0).remove();
-  const newSC = surfaceCaseGs.enter().append("g").attr("class", ctx.classes.surfaceCase.rect).on("mouseover", ctx.tooltips.surfaceCase.show).on("mouseout", ctx.tooltips.surfaceCase.hide);
+  const newSC = surfaceCaseGs.enter().append("g").attr("class", ctx.classes.surfaceCase.rect).style("opacity", 0).on("mouseover", ctx.tooltips.surfaceCase.show).on("mouseout", ctx.tooltips.surfaceCase.hide);
   newSC.append("rect").attr("class", "surface-case-fill").attr("stroke", "none");
   newSC.append("line").attr("class", "surface-case-side").attr("stroke", ctx.theme.surfaceCase.stroke).attr("stroke-width", ctx.theme.surfaceCase.strokeWidth);
   newSC.append("line").attr("class", "surface-case-side").attr("stroke", ctx.theme.surfaceCase.stroke).attr("stroke-width", ctx.theme.surfaceCase.strokeWidth);
-  const mergedSC = mergeEnter(newSC, surfaceCaseGs);
-  mergedSC.each((d, i, nodes) => {
+  newSC.each((d, i, nodes) => {
+    const x = (ctx.POCO_CENTER - xScale(
+      d.diameter + d.diameter * rcc.surfaceCase.diameterPaddingRatio
+    )) / 2;
+    const w = xScale(
+      d.diameter + d.diameter * rcc.surfaceCase.diameterPaddingRatio
+    );
+    const g = d33.select(nodes[i]);
+    g.select(".surface-case-fill").attr("x", x).attr("width", w).attr("fill", ctx.textures.surface_case.url()).attr("y", getYPos(d)).attr("height", getHeight(d));
+    const sideNodes = g.selectAll(".surface-case-side").nodes();
+    d33.select(sideNodes[0]).attr("x1", x).attr("x2", x).attr("y1", getYPos(d)).attr("y2", getYPos(d) + getHeight(d));
+    d33.select(sideNodes[1]).attr("x1", x + w).attr("x2", x + w).attr("y1", getYPos(d)).attr("y2", getYPos(d) + getHeight(d));
+  });
+  withTransition(newSC, ctx.transition).style("opacity", 1);
+  surfaceCaseGs.each((d, i, nodes) => {
     const x = (ctx.POCO_CENTER - xScale(
       d.diameter + d.diameter * rcc.surfaceCase.diameterPaddingRatio
     )) / 2;
@@ -1368,37 +1403,44 @@ function drawConstructive(ctx, data) {
     d33.select(sideNodes[1]).attr("x1", x + w).attr("x2", x + w);
   });
   withTransition(
-    mergedSC.select(".surface-case-fill"),
+    surfaceCaseGs.select(".surface-case-fill"),
     ctx.transition
   ).attr("y", (d) => getYPos(d)).attr("height", (d) => getHeight(d));
-  mergedSC.selectAll(".surface-case-side").attr("y1", (d) => getYPos(d)).attr(
+  withTransition(
+    surfaceCaseGs.selectAll(".surface-case-side"),
+    ctx.transition
+  ).attr("y1", (d) => getYPos(d)).attr(
     "y2",
     (d) => getYPos(d) + getHeight(d)
   );
-  const holeFill = ctx.groups.holeFillGroup.selectAll(`.${ctx.classes.holeFill.rect}`).data(data.hole_fill);
-  holeFill.exit().remove();
-  const newHoleFill = holeFill.enter().append("rect").attr("class", ctx.classes.holeFill.rect).attr("stroke", ctx.theme.holeFill.stroke).attr("stroke-width", ctx.theme.holeFill.strokeWidth).on("mouseover", ctx.tooltips.holeFill.show).on("mouseout", ctx.tooltips.holeFill.hide);
-  const mergedHoleFill = mergeEnter(newHoleFill, holeFill).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
-  withTransition(mergedHoleFill, ctx.transition).attr("y", getYPos).attr("height", getHeight).attr("fill", (d) => ctx.textures[d.type].url());
-  const wellCase = ctx.groups.wellCaseGroup.selectAll(`.${ctx.classes.wellCase.rect}`).data(data.well_case);
-  wellCase.exit().remove();
-  const newWellCase = wellCase.enter().append("rect").attr("class", ctx.classes.wellCase.rect).attr("fill", ctx.theme.wellCase.fill).attr("stroke", ctx.theme.wellCase.stroke).attr("stroke-width", ctx.theme.wellCase.strokeWidth).on("mouseover", ctx.tooltips.wellCase.show).on("mouseout", ctx.tooltips.wellCase.hide);
-  const mergedWellCase = mergeEnter(newWellCase, wellCase).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
-  withTransition(mergedWellCase, ctx.transition).attr("y", getYPos).attr("height", getHeight);
-  const wellScreen = ctx.groups.wellScreenGroup.selectAll(`.${ctx.classes.wellScreen.rect}`).data(data.well_screen);
-  wellScreen.exit().remove();
-  const newWellScreen = wellScreen.enter().append("rect").attr("class", ctx.classes.wellScreen.rect).attr("fill", ctx.textures.well_screen.url()).attr("stroke", ctx.theme.wellScreen.stroke).attr("stroke-width", ctx.theme.wellScreen.strokeWidth).on("mouseover", ctx.tooltips.wellScreen.show).on("mouseout", ctx.tooltips.wellScreen.hide);
-  const mergedWellScreen = mergeEnter(newWellScreen, wellScreen).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
-  withTransition(mergedWellScreen, ctx.transition).attr("y", getYPos).attr("height", getHeight);
+  const holeFill = ctx.groups.holeFillGroup.selectAll(`.${ctx.classes.holeFill.rect}`).data(data.hole_fill, stableLayerKey);
+  holeFill.exit().transition(ctx.transition).attr("height", 0).remove();
+  const newHoleFill = holeFill.enter().append("rect").attr("class", ctx.classes.holeFill.rect).attr("stroke", ctx.theme.holeFill.stroke).attr("stroke-width", ctx.theme.holeFill.strokeWidth).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter)).attr("y", getYPos).attr("height", getHeight).attr("fill", (d) => ctx.textures[d.type].url()).attr("opacity", 0).on("mouseover", ctx.tooltips.holeFill.show).on("mouseout", ctx.tooltips.holeFill.hide);
+  withTransition(newHoleFill, ctx.transition).attr("opacity", 1);
+  holeFill.attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter)).attr("fill", (d) => ctx.textures[d.type].url());
+  withTransition(holeFill, ctx.transition).attr("y", getYPos).attr("height", getHeight);
+  const wellCase = ctx.groups.wellCaseGroup.selectAll(`.${ctx.classes.wellCase.rect}`).data(data.well_case, stableLayerKey);
+  wellCase.exit().transition(ctx.transition).attr("height", 0).remove();
+  const newWellCase = wellCase.enter().append("rect").attr("class", ctx.classes.wellCase.rect).attr("fill", ctx.theme.wellCase.fill).attr("stroke", ctx.theme.wellCase.stroke).attr("stroke-width", ctx.theme.wellCase.strokeWidth).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter)).attr("y", getYPos).attr("height", getHeight).attr("opacity", 0).on("mouseover", ctx.tooltips.wellCase.show).on("mouseout", ctx.tooltips.wellCase.hide);
+  withTransition(newWellCase, ctx.transition).attr("opacity", 1);
+  wellCase.attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
+  withTransition(wellCase, ctx.transition).attr("y", getYPos).attr("height", getHeight);
+  const wellScreen = ctx.groups.wellScreenGroup.selectAll(`.${ctx.classes.wellScreen.rect}`).data(data.well_screen, stableLayerKey);
+  wellScreen.exit().transition(ctx.transition).attr("height", 0).remove();
+  const newWellScreen = wellScreen.enter().append("rect").attr("class", ctx.classes.wellScreen.rect).attr("fill", ctx.textures.well_screen.url()).attr("stroke", ctx.theme.wellScreen.stroke).attr("stroke-width", ctx.theme.wellScreen.strokeWidth).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter)).attr("y", getYPos).attr("height", getHeight).attr("opacity", 0).on("mouseover", ctx.tooltips.wellScreen.show).on("mouseout", ctx.tooltips.wellScreen.hide);
+  withTransition(newWellScreen, ctx.transition).attr("opacity", 1);
+  wellScreen.attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
+  withTransition(wellScreen, ctx.transition).attr("y", getYPos).attr("height", getHeight);
   const conflictAreas = [];
   conflictAreas.push(...getConflictAreas(data.well_case, data.well_screen));
   conflictAreas.push(...getConflictAreas(data.well_screen, data.well_case));
   const mergedConflicts = mergeConflicts(conflictAreas, 1);
-  const conflict = ctx.groups.conflictGroup.selectAll(`.${ctx.classes.conflict.rect}`).data(mergedConflicts);
-  conflict.exit().remove();
-  const newConflict = conflict.enter().append("rect").attr("class", ctx.classes.conflict.rect).attr("fill", ctx.textures.conflict.url()).attr("stroke", ctx.theme.conflict.stroke).attr("stroke-width", ctx.theme.conflict.strokeWidth).on("mouseover", ctx.tooltips.conflict.show).on("mouseout", ctx.tooltips.conflict.hide);
-  const mergedConflict = mergeEnter(newConflict, conflict).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
-  withTransition(mergedConflict, ctx.transition).attr("y", ctx.yScale(0)).attr("height", getHeight);
+  const conflict = ctx.groups.conflictGroup.selectAll(`.${ctx.classes.conflict.rect}`).data(mergedConflicts, (d) => `${d.from}_${d.to}_${d.diameter}`);
+  conflict.exit().transition(ctx.transition).attr("height", 0).remove();
+  const newConflict = conflict.enter().append("rect").attr("class", ctx.classes.conflict.rect).attr("fill", ctx.textures.conflict.url()).attr("stroke", ctx.theme.conflict.stroke).attr("stroke-width", ctx.theme.conflict.strokeWidth).attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter)).attr("y", getYPos).attr("height", getHeight).attr("opacity", 0).on("mouseover", ctx.tooltips.conflict.show).on("mouseout", ctx.tooltips.conflict.hide);
+  withTransition(newConflict, ctx.transition).attr("opacity", 1);
+  conflict.attr("x", (d) => (ctx.POCO_CENTER - xScale(d.diameter)) / 2).attr("width", (d) => xScale(d.diameter));
+  withTransition(conflict, ctx.transition).attr("y", getYPos).attr("height", getHeight);
 }
 
 // src/renderers/fractures.renderer.ts
@@ -1878,11 +1920,13 @@ function drawLithology(ctx, data) {
     from: depthFrom,
     to: depthTo
   });
-  const rects = lithologyGroup.selectAll(`.${classes.lithology.rect}`).data(data);
-  rects.exit().remove();
-  const newLayers = rects.enter().append("rect").attr("class", classes.lithology.rect).attr("x", geoXLeft).attr("width", geoXRight - geoXLeft).attr("stroke", theme.lithology.stroke).attr("stroke-width", theme.lithology.strokeWidth).on("mouseover", tooltips.geology.show).on("mouseout", tooltips.geology.hide);
-  const merged = mergeEnter(newLayers, rects).attr("y", getYPos);
-  withTransition(merged, transition).attr("height", getHeight).attr("fill", getLithologyFill(data, svg, ctx.theme.lithologyTexture));
+  const fillFn = getLithologyFill(data, svg, ctx.theme.lithologyTexture);
+  const rects = lithologyGroup.selectAll(`.${classes.lithology.rect}`).data(data, stableLayerKey);
+  rects.exit().transition(transition).attr("height", 0).remove();
+  const newLayers = rects.enter().append("rect").attr("class", classes.lithology.rect).attr("x", geoXLeft).attr("width", geoXRight - geoXLeft).attr("stroke", theme.lithology.stroke).attr("stroke-width", theme.lithology.strokeWidth).attr("y", getYPos).attr("height", getHeight).attr("fill", fillFn).attr("opacity", 0).on("mouseover", tooltips.geology.show).on("mouseout", tooltips.geology.hide);
+  withTransition(newLayers, transition).attr("opacity", 1);
+  rects.attr("fill", fillFn);
+  withTransition(rects, transition).attr("y", getYPos).attr("height", getHeight);
 }
 
 // src/renderers/unit-labels.renderer.ts