shap-svg 0.2.0 → 0.2.2

package/dist/react.cjs

@@ -271,8 +271,34 @@ function formatFeatureLabel(name) {
   return name.replace(/_/g, " ");
 }
 
+// src/core/labels.ts
+var shapLabels = {
+  shapValue: "SHAP value",
+  shapValueAxis: "SHAP value (impact on model output)",
+  meanAbsShapValue: "mean(|SHAP value|)",
+  featureValue: "Feature value",
+  featureValueLow: "Low",
+  featureValueHigh: "High",
+  missingFeatureValue: "missing",
+  samples: "Instances",
+  sampleTotal: "\u03A3\u03C6",
+  sampleFallback: (sampleNumber) => `Sample ${sampleNumber}`,
+  baseValue: "E[f(X)]",
+  modelOutput: "f(x)",
+  otherFeatures: (count, style) => style === "sum" ? `Sum of ${count} other features` : `${count} other features`
+};
+function resolveLabels(labels) {
+  if (!labels) return shapLabels;
+  const resolved = { ...shapLabels };
+  for (const key of Object.keys(labels)) {
+    const value = labels[key];
+    if (value !== void 0) resolved[key] = value;
+  }
+  return resolved;
+}
+
 // src/core/collapse.ts
-function collapseToDisplay(featureNames, importance, order, maxDisplay, faithfulOtherRow) {
+function collapseToDisplay(featureNames, importance, order, maxDisplay, faithfulOtherRow, labels = shapLabels) {
   const p = order.length;
   if (maxDisplay >= p) {
     return {
@@ -295,7 +321,7 @@ function collapseToDisplay(featureNames, importance, order, maxDisplay, faithful
   const collapsed = order.slice(realCount);
   const collapsedValue = collapsed.reduce((sum, index) => sum + importance[index], 0);
   rows.push({
-    label: faithfulOtherRow ? `Sum of ${collapsed.length} other features` : `${collapsed.length} other features`,
+    label: labels.otherFeatures(collapsed.length, faithfulOtherRow ? "sum" : "count"),
     featureIndex: null,
     value: collapsedValue,
     isOtherRow: true
@@ -364,15 +390,15 @@ var AXIS_HEIGHT = 52;
 var TICK_LABEL_PT = 11;
 var TITLE_PT = 13;
 var X_MARGIN = 0.05;
-function barXAxis(min, max, toX, marginLeft, plotWidth, plotBottom) {
+function barXAxis(min, max, toX, marginLeft, plotWidth, plotBottom, title) {
   const { ticks, step } = niceTicks(min, max, tickSpace(plotWidth, TICK_LABEL_PT));
   return {
     xTicks: ticks.map((value) => ({ value, x: toX(value), label: tickLabel(value, step) })),
     xSpine: { x1: marginLeft, x2: marginLeft + plotWidth, y: plotBottom },
     xTitle: {
-      // _bar.py:143-150 builds this from the Explanation's transform history:
-      // "SHAP value" -> "|SHAP value|" -> "mean(|SHAP value|)".
-      text: "mean(|SHAP value|)",
+      // _bar.py:143-150 builds the default from the Explanation's transform
+      // history: "SHAP value" -> "|SHAP value|" -> "mean(|SHAP value|)".
+      text: title,
       x: marginLeft + plotWidth / 2,
       y: plotBottom + AXIS_TITLE_DY,
       fontSize: TITLE_PT
@@ -380,6 +406,7 @@ function barXAxis(min, max, toX, marginLeft, plotWidth, plotBottom) {
   };
 }
 function barLayout(rows, opts) {
+  var _a;
   const { width, rowHeight, marginLeft, marginRight, marginTop } = opts;
   const plotWidth = width - marginLeft - marginRight;
   const values = rows.rows.map((r) => r.value);
@@ -420,7 +447,15 @@ function barLayout(rows, opts) {
     xZero,
     plotWidth,
     plotBottom: marginTop + rows.rows.length * rowHeight,
-    ...barXAxis(min, max, toX, marginLeft, plotWidth, marginTop + rows.rows.length * rowHeight),
+    ...barXAxis(
+      min,
+      max,
+      toX,
+      marginLeft,
+      plotWidth,
+      marginTop + rows.rows.length * rowHeight,
+      ((_a = opts.labels) != null ? _a : shapLabels).meanAbsShapValue
+    ),
     zeroLine: { x: xZero, y1: marginTop, y2: marginTop + rows.rows.length * rowHeight },
     height: marginTop + rows.rows.length * rowHeight + AXIS_HEIGHT
   };
@@ -495,9 +530,11 @@ function ShapBar({
   classIndex = 1,
   width = 720,
   rowHeight = 26,
+  labels,
   onFeatureClick
 }) {
   const [hovered, setHovered] = (0, import_react.useState)(null);
+  const words = (0, import_react.useMemo)(() => resolveLabels(labels), [labels]);
   const layout = (0, import_react.useMemo)(() => {
     const raw = parseExplanation(explanation, { classIndex });
     const parsed = groupByGenus2 ? groupExplanationByGenus(raw) : raw;
@@ -508,23 +545,25 @@ function ShapBar({
       importance,
       order,
       maxDisplay,
-      faithfulOtherRow
+      faithfulOtherRow,
+      words
     );
     return barLayout(rows, {
       width,
       rowHeight,
       marginLeft: 260,
       marginRight: 90,
-      marginTop: 8
+      marginTop: 8,
+      labels: words
     });
-  }, [groupByGenus2, explanation, maxDisplay, faithfulOtherRow, classIndex, width, rowHeight]);
+  }, [groupByGenus2, explanation, maxDisplay, faithfulOtherRow, classIndex, width, rowHeight, words]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "svg",
     {
       width,
       height: layout.height,
       role: "img",
-      "aria-label": "Mean absolute SHAP value per feature",
+      "aria-label": `Mean absolute ${words.shapValue} per feature`,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "line",
@@ -1161,6 +1200,105 @@ function sampleColormap(name, t) {
   return `#${hexByte(red)}${hexByte(green)}${hexByte(blue)}`;
 }
 
+// src/core/colorBar.ts
+var ASPECT = 80;
+var TICK_PAD = 3.5;
+var TICK_LABEL_PT2 = 11;
+var LABEL_PT = 12;
+var LABEL_THICKNESS_EM = 1.08;
+var LABEL_BASELINE_EM = 0.84;
+var CHAR_EM = 0.6;
+var STEPS = 64;
+function textWidth(text, fontSize) {
+  return text.length * fontSize * CHAR_EM;
+}
+function tickColumnWidth(spec) {
+  return Math.max(...spec.tickLabels.map((label) => textWidth(label, TICK_LABEL_PT2)));
+}
+function colorBarExtent(height, spec) {
+  return height / ASPECT + TICK_PAD + Math.max(0, tickColumnWidth(spec) + spec.labelPad) + LABEL_PT * LABEL_THICKNESS_EM;
+}
+function fitColorBar(opts) {
+  const { plotWidth, available, gapRatio, minGap, extent } = opts;
+  const gapFor = (width) => Math.max(gapRatio * width, minGap);
+  if (gapFor(plotWidth) + extent <= available) {
+    return { plotWidth, gap: gapFor(plotWidth) };
+  }
+  const byRatio = (available + plotWidth - extent) / (1 + gapRatio);
+  const fitted = Math.max(
+    0,
+    gapRatio * byRatio >= minGap ? byRatio : plotWidth - (minGap + extent - available)
+  );
+  return { plotWidth: fitted, gap: gapFor(fitted) };
+}
+function colorBarLayout(spec, position) {
+  const { x, y1, y2 } = position;
+  const width = (y2 - y1) / ASPECT;
+  const step = (y2 - y1) / STEPS;
+  const steps = Array.from({ length: STEPS }, (_, index) => ({
+    y: y2 - (index + 1) * step,
+    // Every band but the lowest reaches half a pixel into the one below, so
+    // anti-aliasing cannot open a hairline seam between them.
+    height: index === 0 ? step : step + 0.5,
+    color: sampleColormap(spec.colormap, index / (STEPS - 1))
+  }));
+  const tickX = x + width + TICK_PAD;
+  const labelLeft = tickX + tickColumnWidth(spec) + spec.labelPad;
+  return {
+    x,
+    y1,
+    y2,
+    width,
+    steps,
+    tickX,
+    tickFontSize: TICK_LABEL_PT2,
+    ticks: [
+      { y: y2, label: spec.tickLabels[0] },
+      { y: y1, label: spec.tickLabels[1] }
+    ],
+    ...spec.offsetText ? { offsetText: { x: tickX, y: y1 - TICK_LABEL_PT2, text: spec.offsetText } } : {},
+    label: {
+      x: labelLeft + LABEL_PT * LABEL_BASELINE_EM,
+      y: (y1 + y2) / 2,
+      text: spec.label,
+      fontSize: LABEL_PT
+    },
+    right: Math.max(
+      tickX + tickColumnWidth(spec),
+      labelLeft + LABEL_PT * LABEL_THICKNESS_EM
+    )
+  };
+}
+var MINUS3 = "\u2212";
+var POWER_LIMITS = [-5, 6];
+function roundTo(value, decimals) {
+  const factor = 10 ** decimals;
+  return Math.round(value * factor) / factor;
+}
+function scalarFormatterLabels(locs) {
+  const largest = Math.max(0, ...locs.map(Math.abs));
+  const magnitude = largest === 0 ? 0 : Math.floor(Math.log10(largest));
+  const order = magnitude <= POWER_LIMITS[0] || magnitude >= POWER_LIMITS[1] ? magnitude : 0;
+  const scaled = locs.map((value) => value / 10 ** order);
+  let range = Math.max(...scaled) - Math.min(...scaled);
+  if (range === 0) range = Math.max(...scaled.map(Math.abs));
+  if (range === 0) range = 1;
+  const rangeMagnitude = Math.floor(Math.log10(range));
+  const threshold = 1e-3 * 10 ** rangeMagnitude;
+  let decimals = Math.max(0, 3 - rangeMagnitude);
+  while (decimals >= 0) {
+    const error = Math.max(...scaled.map((value) => Math.abs(value - roundTo(value, decimals))));
+    if (error < threshold) decimals -= 1;
+    else break;
+  }
+  decimals += 1;
+  const labels = scaled.map((value) => {
+    const text = value.toFixed(decimals);
+    return Number(text) === 0 ? text.replace("-", "") : text.replace("-", MINUS3);
+  });
+  return order === 0 ? { labels } : { labels, offsetText: `1e${String(order).replace("-", MINUS3)}` };
+}
+
 // src/core/rowSort.ts
 function sortDisplayRows(display, sort, data) {
   if (sort === "importance") return display;
@@ -1184,8 +1322,17 @@ function sortDisplayRows(display, sort, data) {
 var BEESWARM_MISSING_COLOR = "#777777";
 var BEESWARM_ROW_HEIGHT = 0.4;
 var NBINS = 100;
-var AXIS_HEIGHT2 = 74;
-var TICK_LABEL_PT2 = 11;
+var AXIS_HEIGHT2 = 52;
+function colorBarSpec(labels) {
+  return {
+    colormap: "red_blue",
+    tickLabels: [labels.featureValueLow, labels.featureValueHigh],
+    label: labels.featureValue,
+    labelPad: 0
+  };
+}
+var COLOR_BAR_GAP_RATIO = 0.05 / 0.8;
+var TICK_LABEL_PT3 = 11;
 var TITLE_PT2 = 13;
 var X_MARGIN2 = 0.05;
 function percentile(values, percent) {
@@ -1249,7 +1396,7 @@ function spreadPoints(xs, rowIndex, seed) {
   const scale = 0.9 * (BEESWARM_ROW_HEIGHT / (maxPositiveOffset + 1));
   return offsets.map((offset) => rowIndex + offset * scale);
 }
-function beeswarmRows(explanation, maxDisplay, faithfulOtherRow, seed = 0, rowSort = "importance") {
+function beeswarmRows(explanation, maxDisplay, faithfulOtherRow, seed = 0, rowSort = "importance", labels = shapLabels) {
   if (!Number.isInteger(maxDisplay) || maxDisplay <= 0) {
     throw new RangeError(`maxDisplay must be a positive integer, received ${maxDisplay}`);
   }
@@ -1264,7 +1411,8 @@ function beeswarmRows(explanation, maxDisplay, faithfulOtherRow, seed = 0, rowSo
       importance,
       order,
       maxDisplay,
-      faithfulOtherRow
+      faithfulOtherRow,
+      labels
     ),
     rowSort,
     explanation.data
@@ -1316,14 +1464,14 @@ function beeswarmRows(explanation, maxDisplay, faithfulOtherRow, seed = 0, rowSo
   });
   return { rows, collapsedCount: display.collapsedCount };
 }
-function beeswarmXAxis(min, max, toX, marginLeft, plotWidth, plotBottom) {
-  const { ticks, step } = niceTicks(min, max, tickSpace(plotWidth, TICK_LABEL_PT2));
+function beeswarmXAxis(min, max, toX, marginLeft, plotWidth, plotBottom, title) {
+  const { ticks, step } = niceTicks(min, max, tickSpace(plotWidth, TICK_LABEL_PT3));
   return {
     xTicks: ticks.map((value) => ({ value, x: toX(value), label: tickLabel(value, step) })),
     xSpine: { x1: marginLeft, x2: marginLeft + plotWidth, y: plotBottom },
     xTitle: {
-      // _labels.py:5, labels["VALUE"].
-      text: "SHAP value (impact on model output)",
+      // The default is _labels.py:5, labels["VALUE"].
+      text: title,
       x: marginLeft + plotWidth / 2,
       y: plotBottom + AXIS_TITLE_DY,
       fontSize: TITLE_PT2
@@ -1331,8 +1479,19 @@ function beeswarmXAxis(min, max, toX, marginLeft, plotWidth, plotBottom) {
   };
 }
 function beeswarmLayout(valueRows, opts) {
+  var _a;
   const { width, rowHeight, marginLeft, marginRight, marginTop, dotRadius } = opts;
-  const plotWidth = width - marginLeft - marginRight;
+  const labels = (_a = opts.labels) != null ? _a : shapLabels;
+  const colorBar = colorBarSpec(labels);
+  const plotBottom = marginTop + valueRows.rows.length * rowHeight;
+  const fit = opts.colorBar ? fitColorBar({
+    plotWidth: width - marginLeft - marginRight,
+    available: marginRight,
+    gapRatio: COLOR_BAR_GAP_RATIO,
+    minGap: 0,
+    extent: colorBarExtent(plotBottom - marginTop, colorBar)
+  }) : null;
+  const plotWidth = fit ? fit.plotWidth : width - marginLeft - marginRight;
   const values = valueRows.rows.flatMap((row) => row.points.map((point) => point.x));
   const dataMin = Math.min(0, ...values);
   const dataMax = Math.max(0, ...values);
@@ -1357,20 +1516,76 @@ function beeswarmLayout(valueRows, opts) {
       }))
     };
   });
-  const plotBottom = marginTop + valueRows.rows.length * rowHeight;
   return {
     rows,
     xDomain: [min, max],
     xZero: toX(0),
-    ...beeswarmXAxis(min, max, toX, marginLeft, plotWidth, plotBottom),
+    ...beeswarmXAxis(min, max, toX, marginLeft, plotWidth, plotBottom, labels.shapValueAxis),
     plotWidth,
     plotBottom,
+    colorBar: fit ? colorBarLayout(colorBar, {
+      x: marginLeft + plotWidth + fit.gap,
+      y1: marginTop,
+      y2: plotBottom
+    }) : null,
     height: plotBottom + AXIS_HEIGHT2
   };
 }
 
-// src/react/ShapBeeswarm.tsx
+// src/react/ColorBar.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function ColorBar({ bar }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { role: "img", "aria-label": `${bar.label.text}: ${bar.ticks[0].label} to ${bar.ticks[1].label}`, children: [
+    bar.steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "rect",
+      {
+        x: bar.x,
+        y: step.y,
+        width: bar.width,
+        height: step.height,
+        fill: step.color
+      },
+      `colorbar-step-${index}`
+    )),
+    bar.ticks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "text",
+      {
+        x: bar.tickX,
+        y: tick.y,
+        dominantBaseline: "middle",
+        fontSize: bar.tickFontSize,
+        fill: "#333333",
+        children: tick.label
+      },
+      `colorbar-tick-${index}`
+    )),
+    bar.offsetText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "text",
+      {
+        x: bar.offsetText.x,
+        y: bar.offsetText.y,
+        fontSize: bar.tickFontSize,
+        fill: "#333333",
+        children: bar.offsetText.text
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "text",
+      {
+        x: bar.label.x,
+        y: bar.label.y,
+        transform: `rotate(-90 ${bar.label.x} ${bar.label.y})`,
+        textAnchor: "middle",
+        fontSize: bar.label.fontSize,
+        fill: "#333333",
+        children: bar.label.text
+      }
+    )
+  ] });
+}
+
+// src/react/ShapBeeswarm.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ShapBeeswarm({
   explanation,
   maxDisplay = 10,
@@ -1382,25 +1597,32 @@ function ShapBeeswarm({
   rowHeight = 28,
   seed = 0,
   dotRadius = 3,
+  colorBar = true,
+  labels,
   onFeatureClick
 }) {
   const [hovered, setHovered] = (0, import_react2.useState)(null);
+  const words = (0, import_react2.useMemo)(() => resolveLabels(labels), [labels]);
   const marginTop = 8;
   const layout = (0, import_react2.useMemo)(() => {
     const raw = parseExplanation(explanation, { classIndex });
     const parsed = groupByGenus2 ? groupExplanationByGenus(raw) : raw;
-    const rows = beeswarmRows(parsed, maxDisplay, faithfulOtherRow, seed, rowSort);
+    const rows = beeswarmRows(parsed, maxDisplay, faithfulOtherRow, seed, rowSort, words);
     return beeswarmLayout(rows, {
       width,
       rowHeight,
       marginLeft: 260,
       marginRight: 90,
       marginTop,
-      dotRadius
+      dotRadius,
+      colorBar,
+      labels: words
     });
   }, [
     groupByGenus2,
     rowSort,
+    colorBar,
+    words,
     explanation,
     maxDisplay,
     faithfulOtherRow,
@@ -1420,9 +1642,8 @@ function ShapBeeswarm({
   const fallbackRow = layout.rows[0];
   const activeRow = hovered ? layout.rows[hovered.rowIndex] : fallbackRow;
   const activePoint = hovered ? activeRow == null ? void 0 : activeRow.points[hovered.pointIndex] : activeRow == null ? void 0 : activeRow.points[0];
-  const legendSteps = 32;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width, height: layout.height, role: "img", "aria-label": "Global SHAP beeswarm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width, height: layout.height, role: "img", "aria-label": "Global SHAP beeswarm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "line",
       {
         x1: layout.xZero,
@@ -1433,7 +1654,7 @@ function ShapBeeswarm({
         strokeWidth: 1
       }
     ),
-    layout.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    layout.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "g",
       {
         onMouseOver: (event) => handlePointHover(rowIndex, event),
@@ -1441,7 +1662,7 @@ function ShapBeeswarm({
         onClick: () => onFeatureClick == null ? void 0 : onFeatureClick(row.featureIndex),
         style: { cursor: onFeatureClick ? "pointer" : "default" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "rect",
             {
               x: 0,
@@ -1451,7 +1672,7 @@ function ShapBeeswarm({
               fill: (hovered == null ? void 0 : hovered.rowIndex) === rowIndex ? "#00000008" : "transparent"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "text",
             {
               x: 250,
@@ -1464,7 +1685,7 @@ function ShapBeeswarm({
               children: row.label
             }
           ),
-          row.points.map((point, pointIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          row.points.map((point, pointIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "circle",
             {
               "data-point-index": pointIndex,
@@ -1480,7 +1701,7 @@ function ShapBeeswarm({
       },
       `row-${rowIndex}`
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       XAxis,
       {
         ticks: layout.xTicks,
@@ -1490,42 +1711,18 @@ function ShapBeeswarm({
         tickFontSize: 11
       }
     ),
-    activeRow && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { "aria-label": "Feature value colour scale", children: [
-      Array.from({ length: legendSteps }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "rect",
-        {
-          x: width - 160 + index * 4,
-          y: layout.height - 22,
-          width: 4,
-          height: 7,
-          fill: sampleColormap("red_blue", index / (legendSteps - 1))
-        },
-        `legend-${index}`
-      )),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: width - 160, y: layout.height - 3, fontSize: 10, fill: "#555555", children: formatShapValue(activeRow.vmin) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "text",
-        {
-          x: width - 32,
-          y: layout.height - 3,
-          textAnchor: "end",
-          fontSize: 10,
-          fill: "#555555",
-          children: formatShapValue(activeRow.vmax)
-        }
-      )
-    ] }),
-    activeRow && activePoint && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    layout.colorBar && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorBar, { bar: layout.colorBar }),
+    activeRow && activePoint && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "g",
       {
         opacity: hovered ? 1 : 0,
         pointerEvents: "none",
         transform: `translate(${activePoint.x + 8} ${activePoint.y - 8})`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: 0, y: -16, width: 210, height: 54, rx: 3, fill: "#ffffff", stroke: "#cccccc" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: 7, y: 0, fontSize: 11, fill: "#222222", children: activeRow.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: 7, y: 15, fontSize: 11, fill: "#222222", children: `SHAP value: ${formatShapValue(activePoint.valueX)}` }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: 7, y: 30, fontSize: 11, fill: "#222222", children: `Feature value: ${Number.isFinite(activePoint.featureValue) ? formatShapValue(activePoint.featureValue) : "missing"}` })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: 0, y: -16, width: 210, height: 54, rx: 3, fill: "#ffffff", stroke: "#cccccc" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: 7, y: 0, fontSize: 11, fill: "#222222", children: activeRow.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: 7, y: 15, fontSize: 11, fill: "#222222", children: `${words.shapValue}: ${formatShapValue(activePoint.valueX)}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: 7, y: 30, fontSize: 11, fill: "#222222", children: `${words.featureValue}: ${Number.isFinite(activePoint.featureValue) ? formatLevel(activePoint.featureValue) : words.missingFeatureValue}` })
         ]
       }
     )
@@ -1543,7 +1740,9 @@ var SIDE_BAR_GAP = 10;
 var SIDE_BAR_RIGHT_INSET = 40;
 var SIDE_BAR_HEIGHT_RATIO = 0.6;
 var AXIS_HEIGHT3 = 52;
-var TICK_LABEL_PT3 = 10;
+var TICK_LABEL_PT4 = 10;
+var COLOR_BAR_GAP_RATIO2 = 0.1 / 0.89;
+var COLOR_BAR_CLEARANCE = 8;
 var Y_TICK_LENGTH = 5;
 function percentile2(values, fraction) {
   if (values.length === 0) return 0;
@@ -1554,7 +1753,7 @@ function percentile2(values, fraction) {
   const weight = position - lower;
   return sorted[lower] + (sorted[upper] - sorted[lower]) * weight;
 }
-function heatmapRows(explanation, maxDisplay, faithfulOtherRow, rowSort = "importance") {
+function heatmapRows(explanation, maxDisplay, faithfulOtherRow, rowSort = "importance", labels = shapLabels) {
   if (!Number.isInteger(maxDisplay) || maxDisplay <= 0) {
     throw new RangeError(`maxDisplay must be a positive integer, received ${maxDisplay}`);
   }
@@ -1566,7 +1765,8 @@ function heatmapRows(explanation, maxDisplay, faithfulOtherRow, rowSort = "impor
       importance,
       featureOrder,
       maxDisplay,
-      faithfulOtherRow
+      faithfulOtherRow,
+      labels
     ),
     rowSort,
     explanation.data
@@ -1630,11 +1830,11 @@ function heatmapRows(explanation, maxDisplay, faithfulOtherRow, rowSort = "impor
     sampleLabelColumn: explanation.sampleLabelColumn
   };
 }
-function heatmapXAxis(sampleCount, marginLeft, cellWidth, plotWidth, plotBottom) {
+function heatmapXAxis(sampleCount, marginLeft, cellWidth, plotWidth, plotBottom, title) {
   const { ticks, step } = niceTicks(
     -0.5,
     sampleCount - 0.5,
-    tickSpace(plotWidth, TICK_LABEL_PT3),
+    tickSpace(plotWidth, TICK_LABEL_PT4),
     { integer: true }
   );
   return {
@@ -1645,20 +1845,38 @@ function heatmapXAxis(sampleCount, marginLeft, cellWidth, plotWidth, plotBottom)
     })),
     xSpine: null,
     xTitle: {
-      text: "Instances",
+      text: title,
       x: marginLeft + plotWidth / 2,
       y: plotBottom + AXIS_TITLE_DY,
-      fontSize: TICK_LABEL_PT3
+      fontSize: TICK_LABEL_PT4
     }
   };
 }
 function heatmapLayout(valueRows, opts) {
+  var _a;
   const { width, rowHeight, marginLeft, marginRight, marginTop } = opts;
-  const plotWidth = width - marginLeft - marginRight;
-  const cellWidth = valueRows.columns.length === 0 ? 0 : plotWidth / valueRows.columns.length;
-  const gridRight = marginLeft + plotWidth;
+  const labels = (_a = opts.labels) != null ? _a : shapLabels;
   const plotBottom = marginTop + valueRows.rows.length * rowHeight;
   const sideBarWidth = Math.max(0, marginRight - SIDE_BAR_RIGHT_INSET - SIDE_BAR_GAP);
+  const ticks = scalarFormatterLabels([valueRows.vmin, valueRows.vmax]);
+  const colorBarSpec2 = {
+    colormap: "red_white_blue",
+    tickLabels: [ticks.labels[0], ticks.labels[1]],
+    ...ticks.offsetText ? { offsetText: ticks.offsetText } : {},
+    label: labels.shapValueAxis,
+    labelPad: -10
+  };
+  const colorBarTop = FX_TOP;
+  const fit = opts.colorBar ? fitColorBar({
+    plotWidth: width - marginLeft - marginRight,
+    available: marginRight,
+    gapRatio: COLOR_BAR_GAP_RATIO2,
+    minGap: SIDE_BAR_GAP + sideBarWidth + COLOR_BAR_CLEARANCE,
+    extent: colorBarExtent(plotBottom - colorBarTop, colorBarSpec2)
+  }) : null;
+  const plotWidth = fit ? fit.plotWidth : width - marginLeft - marginRight;
+  const cellWidth = valueRows.columns.length === 0 ? 0 : plotWidth / valueRows.columns.length;
+  const gridRight = marginLeft + plotWidth;
   const columns = valueRows.columns.map((column, index) => ({
     ...column,
     x: marginLeft + index * cellWidth,
@@ -1727,16 +1945,28 @@ function heatmapLayout(valueRows, opts) {
       x1: marginLeft - Y_TICK_LENGTH,
       x2: marginLeft
     })),
-    ...heatmapXAxis(valueRows.columns.length, marginLeft, cellWidth, plotWidth, plotBottom),
+    ...heatmapXAxis(
+      valueRows.columns.length,
+      marginLeft,
+      cellWidth,
+      plotWidth,
+      plotBottom,
+      labels.samples
+    ),
     sampleLabelColumn: valueRows.sampleLabelColumn,
     plotWidth,
     cellWidth,
+    colorBar: fit ? colorBarLayout(colorBarSpec2, {
+      x: gridRight + fit.gap,
+      y1: colorBarTop,
+      y2: plotBottom
+    }) : null,
     height: plotBottom + AXIS_HEIGHT3
   };
 }
 
 // src/react/ShapHeatmap.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ShapHeatmap({
   explanation,
   maxDisplay = 10,
@@ -1746,33 +1976,38 @@ function ShapHeatmap({
   classIndex = 1,
   width = 720,
   rowHeight = 26,
+  colorBar = true,
+  labels,
   onFeatureClick,
   onSampleClick
 }) {
   const [hoveredColumn, setHoveredColumn] = (0, import_react3.useState)(null);
+  const words = (0, import_react3.useMemo)(() => resolveLabels(labels), [labels]);
   const marginTop = 72;
   const layout = (0, import_react3.useMemo)(() => {
     const raw = parseExplanation(explanation, { classIndex });
     const parsed = groupByGenus2 ? groupExplanationByGenus(raw) : raw;
-    const rows = heatmapRows(parsed, maxDisplay, faithfulOtherRow, rowSort);
+    const rows = heatmapRows(parsed, maxDisplay, faithfulOtherRow, rowSort, words);
     return heatmapLayout(rows, {
       width,
       rowHeight,
       marginLeft: 260,
       marginRight: 100,
-      marginTop
+      marginTop,
+      colorBar,
+      labels: words
     });
-  }, [groupByGenus2, rowSort, explanation, maxDisplay, faithfulOtherRow, classIndex, width, rowHeight]);
+  }, [groupByGenus2, rowSort, colorBar, words, explanation, maxDisplay, faithfulOtherRow, classIndex, width, rowHeight]);
   const activeColumn = hoveredColumn === null ? void 0 : layout.columns[hoveredColumn];
   const nameOf = (column) => {
-    if (!column.sampleLabel) return `Sample ${column.sampleIndex + 1}`;
+    if (!column.sampleLabel) return words.sampleFallback(column.sampleIndex + 1);
     return layout.sampleLabelColumn ? `${layout.sampleLabelColumn}: ${column.sampleLabel}` : column.sampleLabel;
   };
   const tooltipWidth = activeColumn ? Math.max(190, nameOf(activeColumn).length * 6.5 + 16) : 190;
   const tooltipX = activeColumn ? Math.max(0, Math.min(activeColumn.centerX + 8, width - tooltipWidth - 8)) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width, height: layout.height, role: "img", "aria-label": "Global SHAP heatmap", children: [
-    layout.fxAxisMarks.map((mark) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width, height: layout.height, role: "img", "aria-label": "Global SHAP heatmap", children: [
+    layout.fxAxisMarks.map((mark) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "line",
         {
           x1: layout.gridLeft - 4,
@@ -1783,7 +2018,7 @@ function ShapHeatmap({
           strokeWidth: 1
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "text",
         {
           x: layout.gridLeft - 8,
@@ -1796,7 +2031,7 @@ function ShapHeatmap({
         }
       )
     ] }, `fx-axis-${mark.value}`)),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "polyline",
       {
         points: layout.fxLine.map((point) => `${point.x},${point.y}`).join(" "),
@@ -1805,7 +2040,7 @@ function ShapHeatmap({
         strokeWidth: 1.5
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "line",
       {
         x1: layout.gridLeft,
@@ -1817,7 +2052,7 @@ function ShapHeatmap({
         strokeDasharray: "4 4"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       XAxis,
       {
         ticks: layout.xTicks,
@@ -1827,8 +2062,8 @@ function ShapHeatmap({
         tickFontSize: 10
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { "aria-hidden": "true", children: [
-      [layout.spines.left, layout.spines.right].map((spine, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { "aria-hidden": "true", children: [
+      [layout.spines.left, layout.spines.right].map((spine, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "line",
         {
           x1: spine.x,
@@ -1840,7 +2075,7 @@ function ShapHeatmap({
         },
         `spine-${index}`
       )),
-      layout.yTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      layout.yTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "line",
         {
           x1: tick.x1,
@@ -1853,13 +2088,14 @@ function ShapHeatmap({
         `ytick-${index}`
       ))
     ] }),
-    layout.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    layout.colorBar && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColorBar, { bar: layout.colorBar }),
+    layout.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "g",
       {
         onClick: () => onFeatureClick == null ? void 0 : onFeatureClick(row.featureIndex),
         style: { cursor: onFeatureClick ? "pointer" : "default" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "text",
             {
               x: 250,
@@ -1872,7 +2108,7 @@ function ShapHeatmap({
               children: row.label
             }
           ),
-          row.cells.map((cell, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          row.cells.map((cell, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "rect",
             {
               x: cell.x,
@@ -1883,7 +2119,7 @@ function ShapHeatmap({
             },
             `cell-${columnIndex}`
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "rect",
             {
               x: row.sideBar.x,
@@ -1897,7 +2133,7 @@ function ShapHeatmap({
       },
       `row-${rowIndex}`
     )),
-    activeColumn && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    activeColumn && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "rect",
       {
         x: activeColumn.x,
@@ -1909,7 +2145,7 @@ function ShapHeatmap({
         pointerEvents: "none"
       }
     ),
-    layout.columns.map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    layout.columns.map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "rect",
       {
         x: column.x,
@@ -1917,7 +2153,7 @@ function ShapHeatmap({
         width: column.width,
         height: layout.plotBottom - 8,
         fill: "transparent",
-        "aria-label": `${nameOf(column)}, total SHAP value ${formatShapValue(column.total)}`,
+        "aria-label": `${nameOf(column)}, total ${words.shapValue} ${formatShapValue(column.total)}`,
         onMouseEnter: () => setHoveredColumn(columnIndex),
         onMouseLeave: () => setHoveredColumn(null),
         onClick: () => {
@@ -1927,10 +2163,10 @@ function ShapHeatmap({
       },
       `column-hit-${column.sampleIndex}`
     )),
-    activeColumn && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { pointerEvents: "none", transform: `translate(${tooltipX} 10)`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: 0, y: 0, width: tooltipWidth, height: 42, rx: 3, fill: "#ffffff", stroke: "#cccccc" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: 7, y: 15, fontSize: 11, fill: "#222222", children: nameOf(activeColumn) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: 7, y: 31, fontSize: 11, fill: "#222222", children: `\u03A3\u03C6: ${formatShapValue(activeColumn.total)}` })
+    activeColumn && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { pointerEvents: "none", transform: `translate(${tooltipX} 10)`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: 0, y: 0, width: tooltipWidth, height: 42, rx: 3, fill: "#ffffff", stroke: "#cccccc" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: 7, y: 15, fontSize: 11, fill: "#222222", children: nameOf(activeColumn) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: 7, y: 31, fontSize: 11, fill: "#222222", children: `${words.sampleTotal}: ${formatShapValue(activeColumn.total)}` })
     ] })
   ] });
 }
@@ -1944,7 +2180,7 @@ var BAR_THICKNESS_RATIO2 = 0.8;
 var AXIS_HEIGHT4 = 52;
 var WATERFALL_TICK_LABEL_DY = 18;
 var WATERFALL_BASE_LABEL_DY = 36;
-var TICK_LABEL_PT4 = 13;
+var TICK_LABEL_PT5 = 13;
 var colorFor = (value) => value < 0 ? NEGATIVE_COLOR : POSITIVE_COLOR;
 var VALUE_LABEL_GAP = 6;
 var VALUE_LABEL_FONT_SIZE = 12;
@@ -1966,7 +2202,7 @@ function placeValueLabel(value, startX, endX, gutterX, decimals) {
   }
   return { ...base, x: startX + VALUE_LABEL_GAP, anchor: "start", inside: false };
 }
-function waterfallRows(explanation, sampleIndex, maxDisplay, faithfulOtherRow) {
+function waterfallRows(explanation, sampleIndex, maxDisplay, faithfulOtherRow, labels = shapLabels) {
   if (!Number.isInteger(sampleIndex) || sampleIndex < 0 || sampleIndex >= explanation.nSamples) {
     throw new RangeError(
       `sampleIndex must identify a Sample from 0 to ${explanation.nSamples - 1}, received ${sampleIndex}`
@@ -2004,7 +2240,8 @@ function waterfallRows(explanation, sampleIndex, maxDisplay, faithfulOtherRow) {
   if (hasOtherRow) {
     const value = collapsed.reduce((sum, featureIndex) => sum + values[featureIndex], 0);
     rows.push({
-      label: `${collapsed.length} other features`,
+      // SHAP's waterfall counts the hidden Features whatever the collapse mode.
+      label: labels.otherFeatures(collapsed.length, "count"),
       featureIndex: null,
       isOtherRow: true,
       value,
@@ -2022,7 +2259,9 @@ function waterfallRows(explanation, sampleIndex, maxDisplay, faithfulOtherRow) {
   };
 }
 function waterfallLayout(valueRows, opts) {
+  var _a;
   const { width, rowHeight, marginLeft, marginRight, marginTop } = opts;
+  const labels = (_a = opts.labels) != null ? _a : shapLabels;
   const plotWidth = width - marginLeft - marginRight;
   const coordinates = [valueRows.baseValue, valueRows.modelOutput];
   for (const row of valueRows.rows) coordinates.push(row.left, row.left + row.width);
@@ -2059,7 +2298,7 @@ function waterfallLayout(valueRows, opts) {
     };
   });
   const plotBottom = marginTop + valueRows.rows.length * rowHeight;
-  const { ticks, step } = niceTicks(min, max, tickSpace(plotWidth, TICK_LABEL_PT4));
+  const { ticks, step } = niceTicks(min, max, tickSpace(plotWidth, TICK_LABEL_PT5));
   const individualCount = valueRows.rows.filter((row) => !row.isOtherRow).length;
   const hasOtherRow = individualCount < valueRows.rows.length;
   const connectors = [];
@@ -2089,7 +2328,7 @@ function waterfallLayout(valueRows, opts) {
         // got, which is the whole reason SHAP hides the left spine.
         y1: plotBottom - rowHeight,
         y2: plotBottom,
-        label: `E[f(X)] = ${formatLevel(valueRows.baseValue, opts.decimals)}`
+        label: `${labels.baseValue} = ${formatLevel(valueRows.baseValue, opts.decimals)}`
       },
       {
         kind: "output",
@@ -2098,7 +2337,7 @@ function waterfallLayout(valueRows, opts) {
         // axvline(fx, 0, 1) — the full height.
         y1: marginTop,
         y2: plotBottom,
-        label: `f(x) = ${formatLevel(valueRows.modelOutput, opts.decimals)}`
+        label: `${labels.modelOutput} = ${formatLevel(valueRows.modelOutput, opts.decimals)}`
       }
     ],
     separators: valueRows.rows.map((_, index) => ({
@@ -2116,7 +2355,7 @@ function waterfallLayout(valueRows, opts) {
 }
 
 // src/react/ShapWaterfall.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function ShapWaterfall({
   explanation,
   sampleIndex = 0,
@@ -2127,21 +2366,24 @@ function ShapWaterfall({
   width = 720,
   rowHeight = 30,
   decimals = 2,
+  labels,
   onFeatureClick
 }) {
   const [hovered, setHovered] = (0, import_react4.useState)(null);
+  const words = (0, import_react4.useMemo)(() => resolveLabels(labels), [labels]);
   const marginTop = 34;
   const layout = (0, import_react4.useMemo)(() => {
     const raw = parseExplanation(explanation, { classIndex });
     const parsed = groupByGenus2 ? groupExplanationByGenus(raw) : raw;
-    const rows = waterfallRows(parsed, sampleIndex, maxDisplay, faithfulOtherRow);
+    const rows = waterfallRows(parsed, sampleIndex, maxDisplay, faithfulOtherRow, words);
     return waterfallLayout(rows, {
       width,
       rowHeight,
       marginLeft: 260,
       marginRight: 110,
       marginTop,
-      decimals
+      decimals,
+      labels: words
     });
   }, [
     groupByGenus2,
@@ -2152,9 +2394,10 @@ function ShapWaterfall({
     classIndex,
     width,
     rowHeight,
-    decimals
+    decimals,
+    words
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "svg",
     {
       width,
@@ -2162,7 +2405,7 @@ function ShapWaterfall({
       role: "img",
       "aria-label": `Local SHAP waterfall for Sample ${sampleIndex}`,
       children: [
-        layout.separators.map((separator, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        layout.separators.map((separator, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "line",
           {
             x1: separator.x1,
@@ -2175,8 +2418,8 @@ function ShapWaterfall({
           },
           `separator-${index}`
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { "aria-hidden": "true", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "line",
             {
               x1: layout.plotLeft,
@@ -2187,8 +2430,8 @@ function ShapWaterfall({
               strokeWidth: 1
             }
           ),
-          layout.xTicks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          layout.xTicks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "line",
               {
                 x1: tick.x,
@@ -2199,7 +2442,7 @@ function ShapWaterfall({
                 strokeWidth: 1
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "text",
               {
                 x: tick.x,
@@ -2212,7 +2455,7 @@ function ShapWaterfall({
             )
           ] }, `tick-${tick.value}`))
         ] }),
-        layout.connectors.map((connector, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        layout.connectors.map((connector, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "line",
           {
             x1: connector.x,
@@ -2225,8 +2468,8 @@ function ShapWaterfall({
           },
           `connector-${index}`
         )),
-        layout.axisMarks.map((mark) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        layout.axisMarks.map((mark) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "line",
             {
               x1: mark.x,
@@ -2238,7 +2481,7 @@ function ShapWaterfall({
               strokeDasharray: "4 4"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "text",
             {
               x: mark.x,
@@ -2250,7 +2493,7 @@ function ShapWaterfall({
             }
           )
         ] }, mark.kind)),
-        layout.arrows.map((arrow, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        layout.arrows.map((arrow, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "g",
           {
             onMouseEnter: () => setHovered(index),
@@ -2258,7 +2501,7 @@ function ShapWaterfall({
             onClick: () => onFeatureClick == null ? void 0 : onFeatureClick(arrow.featureIndex),
             style: { cursor: onFeatureClick ? "pointer" : "default" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "rect",
                 {
                   x: 0,
@@ -2268,7 +2511,7 @@ function ShapWaterfall({
                   fill: hovered === index ? "#00000008" : "transparent"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "text",
                 {
                   x: 250,
@@ -2281,7 +2524,7 @@ function ShapWaterfall({
                   children: arrow.label
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "polygon",
                 {
                   points: arrow.points.map((point) => `${point.x},${point.y}`).join(" "),
@@ -2290,7 +2533,7 @@ function ShapWaterfall({
                   strokeWidth: 1
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "text",
                 {
                   x: arrow.valueLabel.x,