shap-svg 0.1.0

package/dist/react.js

@@ -0,0 +1,776 @@
+import {
+  TICK_LABEL_DY,
+  TICK_LENGTH,
+  WATERFALL_BASE_LABEL_DY,
+  WATERFALL_TICK_LABEL_DY,
+  barLayout,
+  beeswarmLayout,
+  beeswarmRows,
+  collapseToDisplay,
+  formatShapValue,
+  globalImportance,
+  groupExplanationByGenus,
+  heatmapLayout,
+  heatmapRows,
+  orderFeatures,
+  parseExplanation,
+  sampleColormap,
+  waterfallLayout,
+  waterfallRows
+} from "./chunk-OXFKP5I3.js";
+
+// src/react/ShapBar.tsx
+import { useMemo, useState } from "react";
+
+// src/react/XAxis.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function XAxis({
+  ticks,
+  spine,
+  title,
+  plotBottom,
+  tickFontSize = 11
+}) {
+  return /* @__PURE__ */ jsxs("g", { "aria-hidden": "true", children: [
+    spine && /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: spine.x1,
+        x2: spine.x2,
+        y1: spine.y,
+        y2: spine.y,
+        stroke: "#333333",
+        strokeWidth: 1
+      }
+    ),
+    ticks.map((tick) => /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: tick.x,
+          x2: tick.x,
+          y1: plotBottom,
+          y2: plotBottom + TICK_LENGTH,
+          stroke: "#333333",
+          strokeWidth: 1
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: tick.x,
+          y: plotBottom + TICK_LABEL_DY,
+          textAnchor: "middle",
+          fontSize: tickFontSize,
+          fill: "#333333",
+          children: tick.label
+        }
+      )
+    ] }, `xtick-${tick.value}`)),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: title.x,
+        y: title.y,
+        textAnchor: "middle",
+        fontSize: title.fontSize,
+        fill: "#333333",
+        children: title.text
+      }
+    )
+  ] });
+}
+
+// src/react/ShapBar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ShapBar({
+  explanation,
+  maxDisplay = 10,
+  faithfulOtherRow = false,
+  groupByGenus = false,
+  classIndex = 1,
+  width = 720,
+  rowHeight = 26,
+  onFeatureClick
+}) {
+  const [hovered, setHovered] = useState(null);
+  const layout = useMemo(() => {
+    const raw = parseExplanation(explanation, { classIndex });
+    const parsed = groupByGenus ? groupExplanationByGenus(raw) : raw;
+    const importance = globalImportance(parsed);
+    const order = orderFeatures(importance);
+    const rows = collapseToDisplay(
+      parsed.featureNames,
+      importance,
+      order,
+      maxDisplay,
+      faithfulOtherRow
+    );
+    return barLayout(rows, {
+      width,
+      rowHeight,
+      marginLeft: 260,
+      marginRight: 90,
+      marginTop: 8
+    });
+  }, [groupByGenus, explanation, maxDisplay, faithfulOtherRow, classIndex, width, rowHeight]);
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width,
+      height: layout.height,
+      role: "img",
+      "aria-label": "Mean absolute SHAP value per feature",
+      children: [
+        /* @__PURE__ */ jsx2(
+          "line",
+          {
+            x1: layout.zeroLine.x,
+            x2: layout.zeroLine.x,
+            y1: layout.zeroLine.y1,
+            y2: layout.zeroLine.y2,
+            stroke: "#333333",
+            strokeWidth: 1
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          XAxis,
+          {
+            ticks: layout.xTicks,
+            spine: layout.xSpine,
+            title: layout.xTitle,
+            plotBottom: layout.plotBottom,
+            tickFontSize: 11
+          }
+        ),
+        layout.bars.map((bar, i) => /* @__PURE__ */ jsxs2(
+          "g",
+          {
+            onMouseEnter: () => setHovered(i),
+            onMouseLeave: () => setHovered(null),
+            onClick: () => onFeatureClick == null ? void 0 : onFeatureClick(bar.featureIndex),
+            style: { cursor: onFeatureClick ? "pointer" : "default" },
+            children: [
+              /* @__PURE__ */ jsx2(
+                "rect",
+                {
+                  x: 0,
+                  y: bar.y - (rowHeight - bar.height) / 2,
+                  width,
+                  height: rowHeight,
+                  fill: hovered === i ? "#00000008" : "transparent"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "text",
+                {
+                  x: 250,
+                  y: bar.centerY,
+                  textAnchor: "end",
+                  dominantBaseline: "middle",
+                  fontSize: 13,
+                  fill: "#333333",
+                  fontStyle: bar.isOtherRow ? "normal" : "italic",
+                  children: bar.label
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "rect",
+                {
+                  x: bar.x,
+                  y: bar.y,
+                  width: bar.width,
+                  height: bar.height,
+                  fill: bar.color,
+                  stroke: "rgba(255,255,255,0.8)",
+                  strokeWidth: 1
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "text",
+                {
+                  x: bar.x + bar.width + 6,
+                  y: bar.centerY,
+                  dominantBaseline: "middle",
+                  fontSize: 12,
+                  fill: bar.color,
+                  children: formatShapValue(bar.value)
+                }
+              )
+            ]
+          },
+          `row-${i}`
+        ))
+      ]
+    }
+  );
+}
+
+// src/react/ShapWaterfall.tsx
+import { useMemo as useMemo2, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ShapWaterfall({
+  explanation,
+  sampleIndex = 0,
+  maxDisplay = 10,
+  faithfulOtherRow = false,
+  groupByGenus = false,
+  classIndex = 1,
+  width = 720,
+  rowHeight = 30,
+  decimals = 2,
+  onFeatureClick
+}) {
+  const [hovered, setHovered] = useState2(null);
+  const marginTop = 34;
+  const layout = useMemo2(() => {
+    const raw = parseExplanation(explanation, { classIndex });
+    const parsed = groupByGenus ? groupExplanationByGenus(raw) : raw;
+    const rows = waterfallRows(parsed, sampleIndex, maxDisplay, faithfulOtherRow);
+    return waterfallLayout(rows, {
+      width,
+      rowHeight,
+      marginLeft: 260,
+      marginRight: 110,
+      marginTop,
+      decimals
+    });
+  }, [
+    groupByGenus,
+    explanation,
+    sampleIndex,
+    maxDisplay,
+    faithfulOtherRow,
+    classIndex,
+    width,
+    rowHeight,
+    decimals
+  ]);
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width,
+      height: layout.height,
+      role: "img",
+      "aria-label": `Local SHAP waterfall for Sample ${sampleIndex}`,
+      children: [
+        layout.separators.map((separator, index) => /* @__PURE__ */ jsx3(
+          "line",
+          {
+            x1: separator.x1,
+            x2: separator.x2,
+            y1: separator.y,
+            y2: separator.y,
+            stroke: "#cccccc",
+            strokeWidth: 1,
+            strokeDasharray: "1 5"
+          },
+          `separator-${index}`
+        )),
+        /* @__PURE__ */ jsxs3("g", { "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx3(
+            "line",
+            {
+              x1: layout.plotLeft,
+              x2: layout.plotRight,
+              y1: layout.plotBottom,
+              y2: layout.plotBottom,
+              stroke: "#333333",
+              strokeWidth: 1
+            }
+          ),
+          layout.xTicks.map((tick) => /* @__PURE__ */ jsxs3("g", { children: [
+            /* @__PURE__ */ jsx3(
+              "line",
+              {
+                x1: tick.x,
+                x2: tick.x,
+                y1: layout.plotBottom,
+                y2: layout.plotBottom + 5,
+                stroke: "#333333",
+                strokeWidth: 1
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "text",
+              {
+                x: tick.x,
+                y: layout.plotBottom + WATERFALL_TICK_LABEL_DY,
+                textAnchor: "middle",
+                fontSize: 11,
+                fill: "#333333",
+                children: tick.label
+              }
+            )
+          ] }, `tick-${tick.value}`))
+        ] }),
+        layout.connectors.map((connector, index) => /* @__PURE__ */ jsx3(
+          "line",
+          {
+            x1: connector.x,
+            x2: connector.x,
+            y1: connector.y1,
+            y2: connector.y2,
+            stroke: "#bbbbbb",
+            strokeWidth: 1,
+            strokeDasharray: "4 4"
+          },
+          `connector-${index}`
+        )),
+        layout.axisMarks.map((mark) => /* @__PURE__ */ jsxs3("g", { children: [
+          /* @__PURE__ */ jsx3(
+            "line",
+            {
+              x1: mark.x,
+              x2: mark.x,
+              y1: mark.y1,
+              y2: mark.y2,
+              stroke: "#bbbbbb",
+              strokeWidth: 1,
+              strokeDasharray: "4 4"
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "text",
+            {
+              x: mark.x,
+              y: mark.kind === "output" ? marginTop - 10 : layout.plotBottom + WATERFALL_BASE_LABEL_DY,
+              textAnchor: "middle",
+              fontSize: 12,
+              fill: "#777777",
+              children: mark.label
+            }
+          )
+        ] }, mark.kind)),
+        layout.arrows.map((arrow, index) => /* @__PURE__ */ jsxs3(
+          "g",
+          {
+            onMouseEnter: () => setHovered(index),
+            onMouseLeave: () => setHovered(null),
+            onClick: () => onFeatureClick == null ? void 0 : onFeatureClick(arrow.featureIndex),
+            style: { cursor: onFeatureClick ? "pointer" : "default" },
+            children: [
+              /* @__PURE__ */ jsx3(
+                "rect",
+                {
+                  x: 0,
+                  y: arrow.centerY - rowHeight / 2,
+                  width,
+                  height: rowHeight,
+                  fill: hovered === index ? "#00000008" : "transparent"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "text",
+                {
+                  x: 250,
+                  y: arrow.centerY,
+                  textAnchor: "end",
+                  dominantBaseline: "middle",
+                  fontSize: 13,
+                  fill: "#333333",
+                  fontStyle: arrow.isOtherRow ? "normal" : "italic",
+                  children: arrow.label
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "polygon",
+                {
+                  points: arrow.points.map((point) => `${point.x},${point.y}`).join(" "),
+                  fill: arrow.color,
+                  stroke: "rgba(255,255,255,0.8)",
+                  strokeWidth: 1
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "text",
+                {
+                  x: arrow.valueLabel.x,
+                  y: arrow.centerY,
+                  textAnchor: arrow.valueLabel.anchor,
+                  dominantBaseline: "middle",
+                  fontSize: 12,
+                  fill: arrow.valueLabel.inside ? "#ffffff" : arrow.color,
+                  children: arrow.valueLabel.text
+                }
+              )
+            ]
+          },
+          `row-${index}`
+        ))
+      ]
+    }
+  );
+}
+
+// src/react/ShapBeeswarm.tsx
+import { useMemo as useMemo3, useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ShapBeeswarm({
+  explanation,
+  maxDisplay = 10,
+  faithfulOtherRow = false,
+  groupByGenus = false,
+  rowSort = "importance",
+  classIndex = 1,
+  width = 720,
+  rowHeight = 28,
+  seed = 0,
+  dotRadius = 3,
+  onFeatureClick
+}) {
+  const [hovered, setHovered] = useState3(null);
+  const marginTop = 8;
+  const layout = useMemo3(() => {
+    const raw = parseExplanation(explanation, { classIndex });
+    const parsed = groupByGenus ? groupExplanationByGenus(raw) : raw;
+    const rows = beeswarmRows(parsed, maxDisplay, faithfulOtherRow, seed, rowSort);
+    return beeswarmLayout(rows, {
+      width,
+      rowHeight,
+      marginLeft: 260,
+      marginRight: 90,
+      marginTop,
+      dotRadius
+    });
+  }, [
+    groupByGenus,
+    rowSort,
+    explanation,
+    maxDisplay,
+    faithfulOtherRow,
+    classIndex,
+    width,
+    rowHeight,
+    seed,
+    dotRadius
+  ]);
+  const handlePointHover = (rowIndex, event) => {
+    var _a, _b;
+    const attribute = (_b = (_a = event.target).getAttribute) == null ? void 0 : _b.call(_a, "data-point-index");
+    if (attribute === null || attribute === void 0) return;
+    const pointIndex = Number(attribute);
+    if (Number.isInteger(pointIndex)) setHovered({ rowIndex, pointIndex });
+  };
+  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__ */ 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
+      }
+    ),
+    activeRow && /* @__PURE__ */ jsxs4("g", { "aria-label": "Feature value colour scale", children: [
+      Array.from({ length: legendSteps }, (_, index) => /* @__PURE__ */ jsx4(
+        "rect",
+        {
+          x: width - 160 + index * 4,
+          y: layout.height - 22,
+          width: 4,
+          height: 7,
+          fill: sampleColormap("red_blue", index / (legendSteps - 1))
+        },
+        `legend-${index}`
+      )),
+      /* @__PURE__ */ jsx4("text", { x: width - 160, y: layout.height - 3, fontSize: 10, fill: "#555555", children: formatShapValue(activeRow.vmin) }),
+      /* @__PURE__ */ jsx4(
+        "text",
+        {
+          x: width - 32,
+          y: layout.height - 3,
+          textAnchor: "end",
+          fontSize: 10,
+          fill: "#555555",
+          children: formatShapValue(activeRow.vmax)
+        }
+      )
+    ] }),
+    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: `SHAP value: ${formatShapValue(activePoint.valueX)}` }),
+          /* @__PURE__ */ jsx4("text", { x: 7, y: 30, fontSize: 11, fill: "#222222", children: `Feature value: ${Number.isFinite(activePoint.featureValue) ? formatShapValue(activePoint.featureValue) : "missing"}` })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/react/ShapHeatmap.tsx
+import { useMemo as useMemo4, useState as useState4 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function ShapHeatmap({
+  explanation,
+  maxDisplay = 10,
+  faithfulOtherRow = false,
+  groupByGenus = false,
+  rowSort = "importance",
+  classIndex = 1,
+  width = 720,
+  rowHeight = 26,
+  onFeatureClick,
+  onSampleClick
+}) {
+  const [hoveredColumn, setHoveredColumn] = useState4(null);
+  const marginTop = 72;
+  const layout = useMemo4(() => {
+    const raw = parseExplanation(explanation, { classIndex });
+    const parsed = groupByGenus ? groupExplanationByGenus(raw) : raw;
+    const rows = heatmapRows(parsed, maxDisplay, faithfulOtherRow, rowSort);
+    return heatmapLayout(rows, {
+      width,
+      rowHeight,
+      marginLeft: 260,
+      marginRight: 100,
+      marginTop
+    });
+  }, [groupByGenus, rowSort, 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}`;
+    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__ */ 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.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 SHAP value ${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: `\u03A3\u03C6: ${formatShapValue(activeColumn.total)}` })
+    ] })
+  ] });
+}
+export {
+  ShapBar,
+  ShapBeeswarm,
+  ShapHeatmap,
+  ShapWaterfall
+};
+//# sourceMappingURL=react.js.map