shap-svg 0.2.2 → 0.2.4

package/dist/react.js

@@ -15,10 +15,11 @@ import {
   heatmapRows,
   orderFeatures,
   parseExplanation,
+  placeTooltip,
   resolveLabels,
   waterfallLayout,
   waterfallRows
-} from "./chunk-4X6PMJYT.js";
+} from "./chunk-UVIVTJK3.js";
 
 // src/react/ShapBar.tsx
 import { useMemo, useState } from "react";
@@ -324,91 +325,124 @@ 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];
-  return /* @__PURE__ */ jsxs4("svg", { width, height: layout.height, role: "img", "aria-label": "Global SHAP beeswarm", children: [
-    /* @__PURE__ */ jsx4(
-      "line",
-      {
-        x1: layout.xZero,
-        x2: layout.xZero,
-        y1: marginTop,
-        y2: layout.plotBottom,
-        stroke: "#777777",
-        strokeWidth: 1
-      }
-    ),
-    layout.rows.map((row, rowIndex) => /* @__PURE__ */ jsxs4(
-      "g",
-      {
-        onMouseOver: (event) => handlePointHover(rowIndex, event),
-        onMouseLeave: () => setHovered(null),
-        onClick: () => onFeatureClick == null ? void 0 : onFeatureClick(row.featureIndex),
-        style: { cursor: onFeatureClick ? "pointer" : "default" },
-        children: [
-          /* @__PURE__ */ jsx4(
-            "rect",
-            {
-              x: 0,
-              y: row.centerY - rowHeight / 2,
-              width,
-              height: rowHeight,
-              fill: (hovered == null ? void 0 : hovered.rowIndex) === rowIndex ? "#00000008" : "transparent"
-            }
-          ),
-          /* @__PURE__ */ jsx4(
-            "text",
-            {
-              x: 250,
-              y: row.centerY,
-              textAnchor: "end",
-              dominantBaseline: "middle",
-              fontSize: 13,
-              fill: "#333333",
-              fontStyle: row.isOtherRow ? "normal" : "italic",
-              children: row.label
-            }
-          ),
-          row.points.map((point, pointIndex) => /* @__PURE__ */ jsx4(
-            "circle",
-            {
-              "data-point-index": pointIndex,
-              cx: point.x,
-              cy: point.y,
-              r: point.radius,
-              fill: point.color,
-              fillOpacity: 0.7
-            },
-            `point-${point.sampleIndex}`
-          ))
-        ]
-      },
-      `row-${rowIndex}`
-    )),
-    /* @__PURE__ */ jsx4(
-      XAxis,
-      {
-        ticks: layout.xTicks,
-        spine: layout.xSpine,
-        title: layout.xTitle,
-        plotBottom: layout.plotBottom,
-        tickFontSize: 11
-      }
-    ),
-    layout.colorBar && /* @__PURE__ */ jsx4(ColorBar, { bar: layout.colorBar }),
-    activeRow && activePoint && /* @__PURE__ */ jsxs4(
-      "g",
-      {
-        opacity: hovered ? 1 : 0,
-        pointerEvents: "none",
-        transform: `translate(${activePoint.x + 8} ${activePoint.y - 8})`,
-        children: [
-          /* @__PURE__ */ jsx4("rect", { x: 0, y: -16, width: 210, height: 54, rx: 3, fill: "#ffffff", stroke: "#cccccc" }),
-          /* @__PURE__ */ jsx4("text", { x: 7, y: 0, fontSize: 11, fill: "#222222", children: activeRow.label }),
-          /* @__PURE__ */ jsx4("text", { x: 7, y: 15, fontSize: 11, fill: "#222222", children: `${words.shapValue}: ${formatShapValue(activePoint.valueX)}` }),
-          /* @__PURE__ */ jsx4("text", { x: 7, y: 30, fontSize: 11, fill: "#222222", children: `${words.featureValue}: ${Number.isFinite(activePoint.featureValue) ? formatLevel(activePoint.featureValue) : words.missingFeatureValue}` })
-        ]
-      }
-    )
-  ] });
+  const tooltipLines = activeRow && activePoint ? [
+    activeRow.label,
+    `${words.shapValue}: ${formatShapValue(activePoint.valueX)}`,
+    // Unsigned: a feature value is an input, not a push in either direction.
+    `${words.featureValue}: ${Number.isFinite(activePoint.featureValue) ? formatLevel(activePoint.featureValue) : words.missingFeatureValue}`
+  ] : [];
+  const tooltip = activePoint ? placeTooltip({
+    anchorX: activePoint.x,
+    anchorY: activePoint.y,
+    lines: tooltipLines,
+    lineHeight: 15,
+    minWidth: 160,
+    chartWidth: width,
+    chartHeight: layout.height
+  }) : null;
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      width,
+      height: layout.height,
+      role: "img",
+      "aria-label": `${words.shapValue} of each feature, for every sample`,
+      children: [
+        /* @__PURE__ */ jsx4(
+          "line",
+          {
+            x1: layout.xZero,
+            x2: layout.xZero,
+            y1: marginTop,
+            y2: layout.plotBottom,
+            stroke: "#777777",
+            strokeWidth: 1
+          }
+        ),
+        layout.rows.map((row, rowIndex) => /* @__PURE__ */ jsxs4(
+          "g",
+          {
+            onMouseOver: (event) => handlePointHover(rowIndex, event),
+            onMouseLeave: () => setHovered(null),
+            onClick: () => onFeatureClick == null ? void 0 : onFeatureClick(row.featureIndex),
+            style: { cursor: onFeatureClick ? "pointer" : "default" },
+            children: [
+              /* @__PURE__ */ jsx4(
+                "rect",
+                {
+                  x: 0,
+                  y: row.centerY - rowHeight / 2,
+                  width,
+                  height: rowHeight,
+                  fill: (hovered == null ? void 0 : hovered.rowIndex) === rowIndex ? "#00000008" : "transparent"
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "text",
+                {
+                  x: 250,
+                  y: row.centerY,
+                  textAnchor: "end",
+                  dominantBaseline: "middle",
+                  fontSize: 13,
+                  fill: "#333333",
+                  fontStyle: row.isOtherRow ? "normal" : "italic",
+                  children: row.label
+                }
+              ),
+              row.points.map((point, pointIndex) => /* @__PURE__ */ jsx4(
+                "circle",
+                {
+                  "data-point-index": pointIndex,
+                  cx: point.x,
+                  cy: point.y,
+                  r: point.radius,
+                  fill: point.color,
+                  fillOpacity: 0.7
+                },
+                `point-${point.sampleIndex}`
+              ))
+            ]
+          },
+          `row-${rowIndex}`
+        )),
+        /* @__PURE__ */ jsx4(
+          XAxis,
+          {
+            ticks: layout.xTicks,
+            spine: layout.xSpine,
+            title: layout.xTitle,
+            plotBottom: layout.plotBottom,
+            tickFontSize: 11
+          }
+        ),
+        layout.colorBar && /* @__PURE__ */ jsx4(ColorBar, { bar: layout.colorBar }),
+        tooltip && /* @__PURE__ */ jsxs4(
+          "g",
+          {
+            opacity: hovered ? 1 : 0,
+            pointerEvents: "none",
+            transform: `translate(${tooltip.x} ${tooltip.y})`,
+            children: [
+              /* @__PURE__ */ jsx4(
+                "rect",
+                {
+                  x: 0,
+                  y: 0,
+                  width: tooltip.width,
+                  height: tooltip.height,
+                  rx: 3,
+                  fill: "#ffffff",
+                  stroke: "#cccccc"
+                }
+              ),
+              tooltipLines.map((line, index) => /* @__PURE__ */ jsx4("text", { x: 7, y: 16 + index * 15, fontSize: 11, fill: "#222222", children: line }, `tooltip-${index}`))
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/react/ShapHeatmap.tsx
@@ -452,170 +486,179 @@ function ShapHeatmap({
   };
   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__ */ jsxs5("svg", { width, height: layout.height, role: "img", "aria-label": "Global SHAP heatmap", children: [
-    layout.fxAxisMarks.map((mark) => /* @__PURE__ */ jsxs5("g", { children: [
-      /* @__PURE__ */ jsx5(
-        "line",
-        {
-          x1: layout.gridLeft - 4,
-          x2: layout.gridRight,
-          y1: mark.y,
-          y2: mark.y,
-          stroke: "#dddddd",
-          strokeWidth: 1
-        }
-      ),
-      /* @__PURE__ */ jsx5(
-        "text",
-        {
-          x: layout.gridLeft - 8,
-          y: mark.y,
-          textAnchor: "end",
-          dominantBaseline: "middle",
-          fontSize: 10,
-          fill: "#666666",
-          children: mark.label
-        }
-      )
-    ] }, `fx-axis-${mark.value}`)),
-    /* @__PURE__ */ jsx5(
-      "polyline",
-      {
-        points: layout.fxLine.map((point) => `${point.x},${point.y}`).join(" "),
-        fill: "none",
-        stroke: "#333333",
-        strokeWidth: 1.5
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      "line",
-      {
-        x1: layout.gridLeft,
-        x2: layout.gridRight,
-        y1: layout.separatorY,
-        y2: layout.separatorY,
-        stroke: "#888888",
-        strokeWidth: 1,
-        strokeDasharray: "4 4"
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      XAxis,
-      {
-        ticks: layout.xTicks,
-        spine: layout.xSpine,
-        title: layout.xTitle,
-        plotBottom: layout.plotBottom,
-        tickFontSize: 10
-      }
-    ),
-    /* @__PURE__ */ jsxs5("g", { "aria-hidden": "true", children: [
-      [layout.spines.left, layout.spines.right].map((spine, index) => /* @__PURE__ */ jsx5(
-        "line",
-        {
-          x1: spine.x,
-          x2: spine.x,
-          y1: spine.y1,
-          y2: spine.y2,
-          stroke: "#333333",
-          strokeWidth: 1
-        },
-        `spine-${index}`
-      )),
-      layout.yTicks.map((tick, index) => /* @__PURE__ */ jsx5(
-        "line",
-        {
-          x1: tick.x1,
-          x2: tick.x2,
-          y1: tick.y,
-          y2: tick.y,
-          stroke: "#333333",
-          strokeWidth: 1
-        },
-        `ytick-${index}`
-      ))
-    ] }),
-    layout.colorBar && /* @__PURE__ */ jsx5(ColorBar, { bar: layout.colorBar }),
-    layout.rows.map((row, rowIndex) => /* @__PURE__ */ jsxs5(
-      "g",
-      {
-        onClick: () => onFeatureClick == null ? void 0 : onFeatureClick(row.featureIndex),
-        style: { cursor: onFeatureClick ? "pointer" : "default" },
-        children: [
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      width,
+      height: layout.height,
+      role: "img",
+      "aria-label": `${words.shapValue} by feature and sample`,
+      children: [
+        layout.fxAxisMarks.map((mark) => /* @__PURE__ */ jsxs5("g", { children: [
+          /* @__PURE__ */ jsx5(
+            "line",
+            {
+              x1: layout.gridLeft - 4,
+              x2: layout.gridRight,
+              y1: mark.y,
+              y2: mark.y,
+              stroke: "#dddddd",
+              strokeWidth: 1
+            }
+          ),
           /* @__PURE__ */ jsx5(
             "text",
             {
-              x: 250,
-              y: row.centerY,
+              x: layout.gridLeft - 8,
+              y: mark.y,
               textAnchor: "end",
               dominantBaseline: "middle",
-              fontSize: 13,
-              fill: "#333333",
-              fontStyle: row.isOtherRow ? "normal" : "italic",
-              children: row.label
+              fontSize: 10,
+              fill: "#666666",
+              children: mark.label
             }
-          ),
-          row.cells.map((cell, columnIndex) => /* @__PURE__ */ jsx5(
-            "rect",
+          )
+        ] }, `fx-axis-${mark.value}`)),
+        /* @__PURE__ */ jsx5(
+          "polyline",
+          {
+            points: layout.fxLine.map((point) => `${point.x},${point.y}`).join(" "),
+            fill: "none",
+            stroke: "#333333",
+            strokeWidth: 1.5
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "line",
+          {
+            x1: layout.gridLeft,
+            x2: layout.gridRight,
+            y1: layout.separatorY,
+            y2: layout.separatorY,
+            stroke: "#888888",
+            strokeWidth: 1,
+            strokeDasharray: "4 4"
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          XAxis,
+          {
+            ticks: layout.xTicks,
+            spine: layout.xSpine,
+            title: layout.xTitle,
+            plotBottom: layout.plotBottom,
+            tickFontSize: 10
+          }
+        ),
+        /* @__PURE__ */ jsxs5("g", { "aria-hidden": "true", children: [
+          [layout.spines.left, layout.spines.right].map((spine, index) => /* @__PURE__ */ jsx5(
+            "line",
             {
-              x: cell.x,
-              y: cell.y,
-              width: cell.width,
-              height: cell.height,
-              fill: cell.color
+              x1: spine.x,
+              x2: spine.x,
+              y1: spine.y1,
+              y2: spine.y2,
+              stroke: "#333333",
+              strokeWidth: 1
             },
-            `cell-${columnIndex}`
+            `spine-${index}`
           )),
-          /* @__PURE__ */ jsx5(
-            "rect",
+          layout.yTicks.map((tick, index) => /* @__PURE__ */ jsx5(
+            "line",
             {
-              x: row.sideBar.x,
-              y: row.sideBar.y,
-              width: row.sideBar.width,
-              height: row.sideBar.height,
-              fill: "#777777"
-            }
-          )
-        ]
-      },
-      `row-${rowIndex}`
-    )),
-    activeColumn && /* @__PURE__ */ jsx5(
-      "rect",
-      {
-        x: activeColumn.x,
-        y: 8,
-        width: activeColumn.width,
-        height: layout.plotBottom - 8,
-        fill: "#000000",
-        fillOpacity: 0.1,
-        pointerEvents: "none"
-      }
-    ),
-    layout.columns.map((column, columnIndex) => /* @__PURE__ */ jsx5(
-      "rect",
-      {
-        x: column.x,
-        y: 8,
-        width: column.width,
-        height: layout.plotBottom - 8,
-        fill: "transparent",
-        "aria-label": `${nameOf(column)}, total ${words.shapValue} ${formatShapValue(column.total)}`,
-        onMouseEnter: () => setHoveredColumn(columnIndex),
-        onMouseLeave: () => setHoveredColumn(null),
-        onClick: () => {
-          if (column.sampleId !== void 0) onSampleClick == null ? void 0 : onSampleClick(column.sampleId);
-        },
-        style: { cursor: column.sampleId && onSampleClick ? "pointer" : "default" }
-      },
-      `column-hit-${column.sampleIndex}`
-    )),
-    activeColumn && /* @__PURE__ */ jsxs5("g", { pointerEvents: "none", transform: `translate(${tooltipX} 10)`, children: [
-      /* @__PURE__ */ jsx5("rect", { x: 0, y: 0, width: tooltipWidth, height: 42, rx: 3, fill: "#ffffff", stroke: "#cccccc" }),
-      /* @__PURE__ */ jsx5("text", { x: 7, y: 15, fontSize: 11, fill: "#222222", children: nameOf(activeColumn) }),
-      /* @__PURE__ */ jsx5("text", { x: 7, y: 31, fontSize: 11, fill: "#222222", children: `${words.sampleTotal}: ${formatShapValue(activeColumn.total)}` })
-    ] })
-  ] });
+              x1: tick.x1,
+              x2: tick.x2,
+              y1: tick.y,
+              y2: tick.y,
+              stroke: "#333333",
+              strokeWidth: 1
+            },
+            `ytick-${index}`
+          ))
+        ] }),
+        layout.colorBar && /* @__PURE__ */ jsx5(ColorBar, { bar: layout.colorBar }),
+        layout.rows.map((row, rowIndex) => /* @__PURE__ */ jsxs5(
+          "g",
+          {
+            onClick: () => onFeatureClick == null ? void 0 : onFeatureClick(row.featureIndex),
+            style: { cursor: onFeatureClick ? "pointer" : "default" },
+            children: [
+              /* @__PURE__ */ jsx5(
+                "text",
+                {
+                  x: 250,
+                  y: row.centerY,
+                  textAnchor: "end",
+                  dominantBaseline: "middle",
+                  fontSize: 13,
+                  fill: "#333333",
+                  fontStyle: row.isOtherRow ? "normal" : "italic",
+                  children: row.label
+                }
+              ),
+              row.cells.map((cell, columnIndex) => /* @__PURE__ */ jsx5(
+                "rect",
+                {
+                  x: cell.x,
+                  y: cell.y,
+                  width: cell.width,
+                  height: cell.height,
+                  fill: cell.color
+                },
+                `cell-${columnIndex}`
+              )),
+              /* @__PURE__ */ jsx5(
+                "rect",
+                {
+                  x: row.sideBar.x,
+                  y: row.sideBar.y,
+                  width: row.sideBar.width,
+                  height: row.sideBar.height,
+                  fill: "#777777"
+                }
+              )
+            ]
+          },
+          `row-${rowIndex}`
+        )),
+        activeColumn && /* @__PURE__ */ jsx5(
+          "rect",
+          {
+            x: activeColumn.x,
+            y: 8,
+            width: activeColumn.width,
+            height: layout.plotBottom - 8,
+            fill: "#000000",
+            fillOpacity: 0.1,
+            pointerEvents: "none"
+          }
+        ),
+        layout.columns.map((column, columnIndex) => /* @__PURE__ */ jsx5(
+          "rect",
+          {
+            x: column.x,
+            y: 8,
+            width: column.width,
+            height: layout.plotBottom - 8,
+            fill: "transparent",
+            "aria-label": `${nameOf(column)}, total ${words.shapValue} ${formatShapValue(column.total)}`,
+            onMouseEnter: () => setHoveredColumn(columnIndex),
+            onMouseLeave: () => setHoveredColumn(null),
+            onClick: () => {
+              if (column.sampleId !== void 0) onSampleClick == null ? void 0 : onSampleClick(column.sampleId);
+            },
+            style: { cursor: column.sampleId && onSampleClick ? "pointer" : "default" }
+          },
+          `column-hit-${column.sampleIndex}`
+        )),
+        activeColumn && /* @__PURE__ */ jsxs5("g", { pointerEvents: "none", transform: `translate(${tooltipX} 10)`, children: [
+          /* @__PURE__ */ jsx5("rect", { x: 0, y: 0, width: tooltipWidth, height: 42, rx: 3, fill: "#ffffff", stroke: "#cccccc" }),
+          /* @__PURE__ */ jsx5("text", { x: 7, y: 15, fontSize: 11, fill: "#222222", children: nameOf(activeColumn) }),
+          /* @__PURE__ */ jsx5("text", { x: 7, y: 31, fontSize: 11, fill: "#222222", children: `${words.sampleTotal}: ${formatShapValue(activeColumn.total)}` })
+        ] })
+      ]
+    }
+  );
 }
 
 // src/react/ShapWaterfall.tsx
@@ -637,11 +680,14 @@ function ShapWaterfall({
   const [hovered, setHovered] = useState4(null);
   const words = useMemo4(() => resolveLabels(labels), [labels]);
   const marginTop = 34;
-  const layout = useMemo4(() => {
+  const { layout, sampleName } = useMemo4(() => {
+    var _a;
     const raw = parseExplanation(explanation, { classIndex });
     const parsed = groupByGenus ? groupExplanationByGenus(raw) : raw;
     const rows = waterfallRows(parsed, sampleIndex, maxDisplay, faithfulOtherRow, words);
-    return waterfallLayout(rows, {
+    const sampleLabel = (_a = raw.sampleLabels) == null ? void 0 : _a[sampleIndex];
+    const sampleName2 = sampleLabel ? raw.sampleLabelColumn ? `${raw.sampleLabelColumn}: ${sampleLabel}` : sampleLabel : words.sampleFallback(sampleIndex + 1);
+    const layout2 = waterfallLayout(rows, {
       width,
       rowHeight,
       marginLeft: 260,
@@ -650,6 +696,7 @@ function ShapWaterfall({
       decimals,
       labels: words
     });
+    return { layout: layout2, sampleName: sampleName2 };
   }, [
     groupByGenus,
     explanation,
@@ -668,7 +715,7 @@ function ShapWaterfall({
       width,
       height: layout.height,
       role: "img",
-      "aria-label": `Local SHAP waterfall for Sample ${sampleIndex}`,
+      "aria-label": `${words.shapValue} of each feature for ${sampleName}`,
       children: [
         layout.separators.map((separator, index) => /* @__PURE__ */ jsx6(
           "line",