@mastra/playground-ui 42.0.0-alpha.14 → 42.0.0-alpha.15

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @mastra/playground-ui
 
+## 42.0.0-alpha.15
+
+### Minor Changes
+
+- Added separate Sankey node identity, display label, display value, and layout weight accessors, plus constrained labels with full hover text. Stable layout weights can now keep node positions fixed while current record weights animate bar and ribbon sizes. ([#19871](https://github.com/mastra-ai/mastra/pull/19871))
+
+  ```tsx
+  <Sankey
+    data={records}
+    columns={columns}
+    getRecordNodeId={(record, column) => String(record[`${column.id}Id`])}
+    getRecordNodeLabel={(record, column) => String(record[`${column.id}Label`])}
+    getRecordNodeValue={(record, column) => Number(record[`${column.id}Count`])}
+    getRecordWeight={record => Number(record.count)}
+    getRecordLayoutWeight={record => Number(record.windowMaxCount)}
+  >
+    <SankeyChart />
+  </Sankey>
+  ```
+
+- Added optional Sankey node activation with mouse and keyboard support, including per-node eligibility. ([#19896](https://github.com/mastra-ai/mastra/pull/19896))
+
+  ```tsx
+  <SankeyChart
+    onNodeClick={({ column, value }) => openDrilldown(column.id, value)}
+    isNodeClickable={({ value }) => drillableNodeIds.has(value)}
+  />
+  ```
+
+### Patch Changes
+
+- Updated dependencies [[`f901b73`](https://github.com/mastra-ai/mastra/commit/f901b7363b8d21849b98c167bae168fa11d3edcf)]:
+  - @mastra/client-js@1.33.0-alpha.13
+  - @mastra/react@1.3.0-alpha.13
+
 ## 42.0.0-alpha.14
 
 ### Minor Changes

package/dist/components/SankeyChart.cjs.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const sankeyColor = require('../sankeyColor-DONd5cg9.cjs');
+const reactDom = require('react-dom');
 const recharts = require('recharts');
 const spacings = require('../spacings-BP8L49kn.cjs');
 const utils_cn = require('../cn-vA5sWo9W.cjs');
@@ -28,17 +29,17 @@ function reorderSankeyChartColumns(columns, startIndex, endIndex) {
   reorderedColumns.splice(endIndex, 0, movedColumn);
   return reorderedColumns;
 }
-function buildSankeyChartGraph(data, columns, getRecordWeight = () => 1) {
+function buildSankeyChartGraph(data, columns, getRecordWeight = () => 1, getRecordNodeId, getRecordNodeLabel, getRecordNodeValue, getRecordLayoutWeight) {
   if (columns.length < 2 || data.length === 0) return EMPTY_GRAPH;
   const nodes = [];
   const nodeIndexes = /* @__PURE__ */ new Map();
   const linksById = /* @__PURE__ */ new Map();
-  const getNode = (column, value) => {
+  const getNode = (column, value, label, displayValue) => {
     const id = createNodeId(column.id, value);
     const existingIndex = nodeIndexes.get(id);
     const existingNode = existingIndex === void 0 ? void 0 : nodes[existingIndex];
     if (existingIndex !== void 0 && existingNode) return { node: existingNode, index: existingIndex };
-    const node = { id, name: String(value), column, value };
+    const node = { id, name: String(value), label, column, value, displayValue };
     const index = nodes.length;
     nodes.push(node);
     nodeIndexes.set(id, index);
@@ -49,24 +50,46 @@ function buildSankeyChartGraph(data, columns, getRecordWeight = () => 1) {
     const targetColumn = columns[columnIndex + 1];
     if (!sourceColumn || !targetColumn) continue;
     for (const record of data) {
-      const weight = getRecordWeight(record);
-      if (!Number.isFinite(weight) || weight < 0) continue;
-      const sourceValue = getSankeyChartValue(record[sourceColumn.id]);
-      const targetValue = getSankeyChartValue(record[targetColumn.id]);
+      const displayWeight = getRecordWeight(record);
+      const layoutWeight = getRecordLayoutWeight?.(record) ?? displayWeight;
+      if (!Number.isFinite(displayWeight) || displayWeight < 0 || !Number.isFinite(layoutWeight) || layoutWeight < 0) {
+        continue;
+      }
+      const sourceRecordValue = getSankeyChartValue(record[sourceColumn.id]);
+      const targetRecordValue = getSankeyChartValue(record[targetColumn.id]);
+      if (sourceRecordValue === void 0 || targetRecordValue === void 0) continue;
+      const sourceValue = getRecordNodeId ? getSankeyChartValue(getRecordNodeId(record, sourceColumn)) : sourceRecordValue;
+      const targetValue = getRecordNodeId ? getSankeyChartValue(getRecordNodeId(record, targetColumn)) : targetRecordValue;
       if (sourceValue === void 0 || targetValue === void 0) continue;
-      const source = getNode(sourceColumn, sourceValue);
-      const target = getNode(targetColumn, targetValue);
+      const sourceLabel = getRecordNodeLabel?.(record, sourceColumn) ?? String(sourceRecordValue);
+      const targetLabel = getRecordNodeLabel?.(record, targetColumn) ?? String(targetRecordValue);
+      const sourceDisplayValue = getRecordNodeValue?.(record, sourceColumn);
+      const targetDisplayValue = getRecordNodeValue?.(record, targetColumn);
+      const source = getNode(
+        sourceColumn,
+        sourceValue,
+        sourceLabel,
+        sourceDisplayValue !== void 0 && Number.isFinite(sourceDisplayValue) && sourceDisplayValue >= 0 ? sourceDisplayValue : void 0
+      );
+      const target = getNode(
+        targetColumn,
+        targetValue,
+        targetLabel,
+        targetDisplayValue !== void 0 && Number.isFinite(targetDisplayValue) && targetDisplayValue >= 0 ? targetDisplayValue : void 0
+      );
       const id = `${source.node.id}->${target.node.id}`;
       const existingLink = linksById.get(id);
       if (existingLink) {
-        existingLink.value += weight;
+        existingLink.value += layoutWeight;
+        existingLink.displayValue += displayWeight;
         existingLink.records.push(record);
       } else {
         linksById.set(id, {
           id,
           source: source.index,
           target: target.index,
-          value: weight,
+          value: layoutWeight,
+          displayValue: displayWeight,
           sourceNode: source.node,
           targetNode: target.node,
           records: [record]
@@ -76,6 +99,70 @@ function buildSankeyChartGraph(data, columns, getRecordWeight = () => 1) {
   }
   return { nodes, links: [...linksById.values()] };
 }
+function buildFixedSankeyGeometry(graph, {
+  top,
+  bottom,
+  left,
+  right,
+  nodePadding
+}) {
+  const nodes = /* @__PURE__ */ new Map();
+  const nodesByColumn = /* @__PURE__ */ new Map();
+  const currentNodeWeights = getSankeyChartCurrentNodeWeights(graph);
+  for (const node of graph.nodes) {
+    const columnNodes = nodesByColumn.get(node.column.id) ?? [];
+    columnNodes.push(node);
+    nodesByColumn.set(node.column.id, columnNodes);
+  }
+  const columns = [...nodesByColumn.values()];
+  const slotHeights = columns.map(
+    (columnNodes) => Math.max(0, (bottom - top - nodePadding * Math.max(0, columnNodes.length - 1)) / columnNodes.length)
+  );
+  const maximumNodeHeight = Math.min(...slotHeights) * 0.6;
+  columns.forEach((columnNodes, columnIndex) => {
+    const slotHeight = slotHeights[columnIndex] ?? 0;
+    const columnTotal = columnNodes.reduce(
+      (total, node) => total + (node.displayValue ?? currentNodeWeights.get(node.id) ?? 0),
+      0
+    );
+    const x = columns.length > 1 ? left + (right - left) * columnIndex / (columns.length - 1) : left;
+    columnNodes.forEach((node, index) => {
+      const value = node.displayValue ?? currentNodeWeights.get(node.id) ?? 0;
+      const centerY = top + index * (slotHeight + nodePadding) + slotHeight / 2;
+      const height = columnTotal > 0 ? maximumNodeHeight * (value / columnTotal) : 0;
+      nodes.set(node.id, { x, centerY, y: centerY - height / 2, height });
+    });
+  });
+  const links = /* @__PURE__ */ new Map();
+  const outgoingTotals = /* @__PURE__ */ new Map();
+  const incomingTotals = /* @__PURE__ */ new Map();
+  for (const link of graph.links) {
+    outgoingTotals.set(link.sourceNode.id, (outgoingTotals.get(link.sourceNode.id) ?? 0) + link.displayValue);
+    incomingTotals.set(link.targetNode.id, (incomingTotals.get(link.targetNode.id) ?? 0) + link.displayValue);
+  }
+  const sourceOffsets = new Map([...nodes].map(([id, geometry]) => [id, geometry.y]));
+  const targetOffsets = new Map([...nodes].map(([id, geometry]) => [id, geometry.y]));
+  for (const link of graph.links) {
+    const sourceGeometry = nodes.get(link.sourceNode.id);
+    const targetGeometry = nodes.get(link.targetNode.id);
+    if (!sourceGeometry || !targetGeometry) continue;
+    const sourceTotal = outgoingTotals.get(link.sourceNode.id) ?? 0;
+    const targetTotal = incomingTotals.get(link.targetNode.id) ?? 0;
+    const sourceWidth = sourceTotal > 0 ? sourceGeometry.height * (link.displayValue / sourceTotal) : 0;
+    const targetWidth = targetTotal > 0 ? targetGeometry.height * (link.displayValue / targetTotal) : 0;
+    const sourceOffset = sourceOffsets.get(link.sourceNode.id) ?? sourceGeometry.y;
+    const targetOffset = targetOffsets.get(link.targetNode.id) ?? targetGeometry.y;
+    links.set(link.id, {
+      sourceY: sourceOffset + sourceWidth / 2,
+      targetY: targetOffset + targetWidth / 2,
+      sourceWidth,
+      targetWidth
+    });
+    sourceOffsets.set(link.sourceNode.id, sourceOffset + sourceWidth);
+    targetOffsets.set(link.targetNode.id, targetOffset + targetWidth);
+  }
+  return { nodes, links };
+}
 function getSankeyChartNodeWeights(graph) {
   const incomingWeights = /* @__PURE__ */ new Map();
   const outgoingWeights = /* @__PURE__ */ new Map();
@@ -87,6 +174,17 @@ function getSankeyChartNodeWeights(graph) {
     graph.nodes.map((node) => [node.id, Math.max(incomingWeights.get(node.id) ?? 0, outgoingWeights.get(node.id) ?? 0)])
   );
 }
+function getSankeyChartCurrentNodeWeights(graph) {
+  const incomingWeights = /* @__PURE__ */ new Map();
+  const outgoingWeights = /* @__PURE__ */ new Map();
+  for (const link of graph.links) {
+    outgoingWeights.set(link.sourceNode.id, (outgoingWeights.get(link.sourceNode.id) ?? 0) + link.displayValue);
+    incomingWeights.set(link.targetNode.id, (incomingWeights.get(link.targetNode.id) ?? 0) + link.displayValue);
+  }
+  return new Map(
+    graph.nodes.map((node) => [node.id, Math.max(incomingWeights.get(node.id) ?? 0, outgoingWeights.get(node.id) ?? 0)])
+  );
+}
 function getSankeyChartCurveSelection(link) {
   return {
     source: { column: link.sourceNode.column, value: link.sourceNode.value },
@@ -94,6 +192,9 @@ function getSankeyChartCurveSelection(link) {
     records: link.records
   };
 }
+function getSankeyChartNodeSelection(node) {
+  return { column: node.column, value: node.value };
+}
 function createNodeId(columnId, value) {
   return JSON.stringify([columnId, typeof value, value]);
 }
@@ -109,6 +210,10 @@ function Sankey({
   visibleColumnIds,
   onVisibleColumnIdsChange,
   getRecordWeight,
+  getRecordLayoutWeight,
+  getRecordNodeId,
+  getRecordNodeLabel,
+  getRecordNodeValue,
   getColumnHue
 }) {
   const columnIds = columns.map((column) => column.id);
@@ -117,7 +222,15 @@ function Sankey({
   const orderedColumns = orderColumns(columns, columnOrder ?? internalOrder);
   const visibleIds = new Set(visibleColumnIds ?? internalVisibleIds);
   const enabledColumns = orderedColumns.filter((column) => visibleIds.has(column.id));
-  const graph = buildSankeyChartGraph(data, enabledColumns, getRecordWeight);
+  const graph = buildSankeyChartGraph(
+    data,
+    enabledColumns,
+    getRecordWeight,
+    getRecordNodeId,
+    getRecordNodeLabel,
+    getRecordNodeValue,
+    getRecordLayoutWeight
+  );
   const defaultHueMap = sankeyColor.buildSankeyHueMap(graph.nodes.map((node) => String(node.value)));
   const hueMap = Object.fromEntries(
     graph.nodes.map((node) => [
@@ -146,7 +259,13 @@ function Sankey({
     setColumnOrder(nextColumns.map((column) => column.id));
   };
   const controlColumns = orderedColumns.map((column) => ({ ...column, visible: visibleIds.has(column.id) }));
-  return /* @__PURE__ */ jsxRuntime.jsx(SankeyControlsContext.Provider, { value: { columns: controlColumns, toggleColumn, reorderColumns }, children: /* @__PURE__ */ jsxRuntime.jsx(SankeyRenderContext.Provider, { value: { graph, enabledColumns, hueMap }, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(SankeyControlsContext.Provider, { value: { columns: controlColumns, toggleColumn, reorderColumns }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    SankeyRenderContext.Provider,
+    {
+      value: { graph, enabledColumns, hueMap, usesFixedGeometry: getRecordLayoutWeight !== void 0 },
+      children
+    }
+  ) });
 }
 function useSankey() {
   const context = React.useContext(SankeyControlsContext);
@@ -165,17 +284,64 @@ function orderColumns(columns, order) {
   );
 }
 
+function useSankeyChartMeasurements({
+  graph,
+  height,
+  margin,
+  usesFixedGeometry
+}) {
+  const chartContainerRef = React.useRef(null);
+  const [measuredHeight, setMeasuredHeight] = React.useState(typeof height === "number" ? height : 320);
+  const [measuredWidth, setMeasuredWidth] = React.useState(800);
+  React.useEffect(() => {
+    const element = chartContainerRef.current;
+    if (!element) return;
+    const updateDimensions = () => {
+      if (element.offsetHeight > 0) setMeasuredHeight(element.offsetHeight);
+      if (element.offsetWidth > 0) setMeasuredWidth(element.offsetWidth);
+    };
+    updateDimensions();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateDimensions);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [height]);
+  const fixedGeometry = React.useMemo(
+    () => usesFixedGeometry ? buildFixedSankeyGeometry(graph, {
+      top: Number(margin?.top ?? 64),
+      bottom: measuredHeight - Number(margin?.bottom ?? 12),
+      left: Number(margin?.left ?? 160),
+      right: measuredWidth - Number(margin?.right ?? 160) - 7,
+      nodePadding: 8
+    }) : void 0,
+    [graph, margin?.bottom, margin?.left, margin?.right, margin?.top, measuredHeight, measuredWidth, usesFixedGeometry]
+  );
+  return { chartContainerRef, fixedGeometry };
+}
+
 function SankeyChart({
   height = 320,
   className,
   margin = { top: 64, right: 160, bottom: 12, left: 160 },
-  onCurveClick
+  onCurveClick,
+  onNodeClick,
+  isNodeClickable
 }) {
-  const { graph, enabledColumns, hueMap } = useSankeyRenderContext();
+  const { graph, enabledColumns, hueMap, usesFixedGeometry } = useSankeyRenderContext();
+  const { chartContainerRef, fixedGeometry } = useSankeyChartMeasurements({
+    graph,
+    height,
+    margin,
+    usesFixedGeometry
+  });
   const [hoveredSourceName, setHoveredSourceName] = React.useState();
+  const [focusedSourceName, setFocusedSourceName] = React.useState();
+  const activeSourceName = hoveredSourceName ?? focusedSourceName;
   const firstColumnId = enabledColumns[0]?.id;
-  const total = graph.links.reduce(
-    (sum, link) => link.sourceNode.column.id === firstColumnId ? sum + link.value : sum,
+  const lastColumnId = enabledColumns.at(-1)?.id;
+  const nodeWeights = getSankeyChartNodeWeights(graph);
+  const total = graph.nodes.reduce(
+    (sum, node) => node.column.id === firstColumnId ? sum + (node.displayValue ?? nodeWeights.get(node.id) ?? 0) : sum,
     0
   );
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("min-w-0", className), children: graph.links.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -185,7 +351,7 @@ function SankeyChart({
       style: { height },
       children: "Select at least two columns with data to display a flow"
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { ref: chartContainerRef, style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(
     recharts.ResponsiveContainer,
     {
       width: "100%",
@@ -201,26 +367,51 @@ function SankeyChart({
           node: (props) => {
             const node = graph.nodes[props.index];
             const showColumnLabel = node ? graph.nodes.findIndex((candidate) => candidate.column.id === node.column.id) === props.index : false;
+            const nodeGeometry = node ? fixedGeometry?.nodes.get(node.id) : void 0;
+            const selection = node ? getSankeyChartNodeSelection(node) : void 0;
+            const clickable = Boolean(
+              onNodeClick && selection && (isNodeClickable === void 0 || isNodeClickable(selection))
+            );
             return /* @__PURE__ */ jsxRuntime.jsx(
               SankeyNode,
               {
                 ...props,
+                x: nodeGeometry?.x ?? props.x,
+                y: nodeGeometry?.y ?? props.y,
+                height: nodeGeometry?.height ?? props.height,
                 hueMap,
                 columnLabel: node?.column.label,
+                label: node?.label,
+                nodeValue: node?.displayValue,
+                layoutValue: nodeGeometry ? void 0 : node ? nodeWeights.get(node.id) : void 0,
                 total,
                 showColumnLabel,
-                onHoverChange: setHoveredSourceName
+                isFirstColumn: node?.column.id === firstColumnId,
+                isLastColumn: node?.column.id === lastColumnId,
+                onFocusChange: setFocusedSourceName,
+                onHoverChange: setHoveredSourceName,
+                clickable,
+                onSelect: () => {
+                  if (selection && clickable) onNodeClick?.(selection);
+                }
               }
             );
           },
           link: (props) => {
             const link = graph.links[props.index];
+            const linkGeometry = link ? fixedGeometry?.links.get(link.id) : void 0;
             return /* @__PURE__ */ jsxRuntime.jsx(
               SankeyLink,
               {
                 ...props,
+                sourceY: linkGeometry?.sourceY ?? props.sourceY,
+                targetY: linkGeometry?.targetY ?? props.targetY,
+                sourceWidth: linkGeometry?.sourceWidth,
+                targetWidth: linkGeometry?.targetWidth,
                 hueMap,
-                highlighted: String(props.payload.source.name ?? "") === hoveredSourceName,
+                highlighted: String(props.payload.source.name ?? "") === activeSourceName,
+                displayValue: link?.displayValue,
+                layoutValue: link?.value,
                 onHoverChange: setHoveredSourceName,
                 clickable: onCurveClick !== void 0,
                 onSelect: () => {
@@ -242,40 +433,142 @@ function SankeyNode({
   payload,
   hueMap,
   columnLabel,
+  label,
+  nodeValue,
+  layoutValue,
   total,
   showColumnLabel,
-  onHoverChange
+  isFirstColumn,
+  isLastColumn,
+  clickable,
+  onFocusChange,
+  onHoverChange,
+  onSelect
 }) {
   const name = typeof payload.name === "string" || typeof payload.name === "number" ? String(payload.name) : "";
-  const numericValue = typeof payload.value === "number" ? payload.value : Number(payload.value);
+  const displayLabel = label ?? name;
+  const descriptionIndex = displayLabel.indexOf("\n");
+  const visibleDisplayLabel = descriptionIndex >= 0 ? displayLabel.slice(0, descriptionIndex) : displayLabel;
+  const description = descriptionIndex >= 0 ? displayLabel.slice(descriptionIndex + 1) : void 0;
+  const accessibleLabel = displayLabel.replaceAll("\n", ". ");
+  const visibleLabel = truncateNodeLabel(visibleDisplayLabel);
+  const tooltipId = React.useId();
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [tooltipPosition, setTooltipPosition] = React.useState();
+  const numericValue = nodeValue ?? (typeof payload.value === "number" ? payload.value : Number(payload.value));
   const value = Number.isFinite(numericValue) ? String(numericValue) : "";
   const percentage = total > 0 && Number.isFinite(numericValue) ? Math.round(numericValue / total * 100) : 0;
-  const labelX = x + width / 2;
+  const visibleHeight = scaleSankeyDimension(height, numericValue, layoutValue);
+  const visibleY = y + (height - visibleHeight) / 2;
+  const textAnchor = isFirstColumn ? "start" : isLastColumn ? "end" : "middle";
+  const labelX = isFirstColumn ? x : isLastColumn ? x + width : x + width / 2;
   const columnLabelX = x + width / 2;
   const hue = hueMap[name] ?? 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { onMouseEnter: () => onHoverChange(name), onMouseLeave: () => onHoverChange(void 0), children: [
-    showColumnLabel && columnLabel ? /* @__PURE__ */ jsxRuntime.jsx("text", { x: columnLabelX, y: 18, textAnchor: "middle", fill: sankeyColor.nodeColor(hue), fontSize: 12, fontWeight: 600, children: columnLabel }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y, width, height, rx: 3, fill: sankeyColor.nodeColor(hue) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "text",
+  const isTooltipVisible = Boolean(description && tooltipPosition && (isHovered || isFocused));
+  const showTooltipAt = (target) => {
+    const rect = target.getBoundingClientRect();
+    const placement = rect.top < 120 ? "below" : "above";
+    setTooltipPosition({
+      left: Math.min(Math.max(rect.left, 16), Math.max(window.innerWidth - 336, 16)),
+      top: placement === "above" ? rect.top - 8 : rect.bottom + 8,
+      placement
+    });
+  };
+  const handleKeyDown = (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onSelect();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "g",
       {
-        x: labelX,
-        y: y - 24,
-        textAnchor: "middle",
-        fill: spacings.Colors.neutral5,
-        fontSize: 11,
-        fontFamily: "var(--font-mono)",
-        children: name
+        "aria-describedby": description ? tooltipId : void 0,
+        "aria-label": `${accessibleLabel}: ${value} ${numericValue === 1 ? "trace" : "traces"} (${percentage}%)`,
+        className: "outline-hidden focus-visible:[&>rect]:stroke-neutral6 focus-visible:[&>rect]:stroke-2",
+        onClick: clickable ? onSelect : void 0,
+        onKeyDown: clickable ? handleKeyDown : void 0,
+        role: clickable ? "button" : void 0,
+        onFocus: (event) => {
+          onFocusChange(name);
+          setIsFocused(true);
+          showTooltipAt(event.currentTarget);
+        },
+        onBlur: () => {
+          onFocusChange(void 0);
+          setIsFocused(false);
+        },
+        onMouseEnter: (event) => {
+          onHoverChange(name);
+          setIsHovered(true);
+          showTooltipAt(event.currentTarget);
+        },
+        onMouseLeave: () => {
+          onHoverChange(void 0);
+          setIsHovered(false);
+        },
+        style: { cursor: clickable ? "pointer" : void 0 },
+        tabIndex: 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("title", { children: displayLabel }),
+          showColumnLabel && columnLabel ? /* @__PURE__ */ jsxRuntime.jsx("text", { x: columnLabelX, y: 18, textAnchor: "middle", fill: sankeyColor.nodeColor(hue), fontSize: 12, fontWeight: 600, children: columnLabel }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: visibleY, width, height: visibleHeight, rx: 3, fill: sankeyColor.nodeColor(hue) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: labelX,
+              y: y - 24,
+              textAnchor,
+              fill: spacings.Colors.neutral5,
+              fontSize: 11,
+              fontFamily: "var(--font-mono)",
+              children: visibleLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("text", { x: labelX, y: y - 8, textAnchor, fill: spacings.Colors.neutral3, fontSize: 9.5, children: [
+            value,
+            " (",
+            percentage,
+            "%)"
+          ] })
+        ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: labelX, y: y - 8, textAnchor: "middle", fill: spacings.Colors.neutral3, fontSize: 9.5, children: [
-      value,
-      " (",
-      percentage,
-      "%)"
-    ] })
+    description && isTooltipVisible && tooltipPosition ? reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          "aria-label": `${visibleDisplayLabel}: ${description}`,
+          className: "pointer-events-none fixed z-50 rounded-md border border-border1 bg-surface5 p-2 text-xs leading-4 text-neutral6 shadow-elevated",
+          id: tooltipId,
+          role: "tooltip",
+          style: {
+            left: tooltipPosition.left,
+            maxWidth: "min(20rem, calc(100vw - 2rem))",
+            top: tooltipPosition.top,
+            transform: tooltipPosition.placement === "above" ? "translateY(-100%)" : void 0,
+            width: "max-content"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: visibleDisplayLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap text-neutral4", children: description })
+          ]
+        }
+      ),
+      document.body
+    ) : null
   ] });
 }
+function scaleSankeyDimension(size, displayValue, layoutValue) {
+  if (displayValue === void 0 || layoutValue === void 0 || layoutValue <= 0) return size;
+  return size * Math.min(Math.max(displayValue / layoutValue, 0), 1);
+}
+function truncateNodeLabel(label) {
+  const maximumLength = 23;
+  if (label.length <= maximumLength) return label;
+  return `${label.slice(0, maximumLength - 1).trimEnd()}…`;
+}
 function SankeyLink({
   sourceX,
   targetX,
@@ -288,16 +581,22 @@ function SankeyLink({
   payload,
   hueMap,
   highlighted,
+  displayValue,
+  layoutValue,
+  sourceWidth,
+  targetWidth,
   clickable,
   onHoverChange,
   onSelect
 }) {
-  const halfWidth = Math.max(0, linkWidth) / 2;
+  const visibleWidth = scaleSankeyDimension(linkWidth, displayValue, layoutValue);
+  const sourceHalfWidth = Math.max(0, sourceWidth ?? visibleWidth) / 2;
+  const targetHalfWidth = Math.max(0, targetWidth ?? visibleWidth) / 2;
   const path = [
-    `M${sourceX},${sourceY - halfWidth}`,
-    `C${sourceControlX},${sourceY - halfWidth} ${targetControlX},${targetY - halfWidth} ${targetX},${targetY - halfWidth}`,
-    `L${targetX},${targetY + halfWidth}`,
-    `C${targetControlX},${targetY + halfWidth} ${sourceControlX},${sourceY + halfWidth} ${sourceX},${sourceY + halfWidth}`,
+    `M${sourceX},${sourceY - sourceHalfWidth}`,
+    `C${sourceControlX},${sourceY - sourceHalfWidth} ${targetControlX},${targetY - targetHalfWidth} ${targetX},${targetY - targetHalfWidth}`,
+    `L${targetX},${targetY + targetHalfWidth}`,
+    `C${targetControlX},${targetY + targetHalfWidth} ${sourceControlX},${sourceY + sourceHalfWidth} ${sourceX},${sourceY + sourceHalfWidth}`,
     "Z"
   ].join(" ");
   const sourceName = String(payload.source.name ?? "");
@@ -348,6 +647,7 @@ exports.Sankey = Sankey;
 exports.SankeyChart = SankeyChart;
 exports.buildSankeyChartGraph = buildSankeyChartGraph;
 exports.getSankeyChartCurveSelection = getSankeyChartCurveSelection;
+exports.getSankeyChartNodeSelection = getSankeyChartNodeSelection;
 exports.getSankeyChartNodeWeights = getSankeyChartNodeWeights;
 exports.getSankeyChartValue = getSankeyChartValue;
 exports.reorderSankeyChartColumns = reorderSankeyChartColumns;