@mastra/playground-ui 48.0.0-alpha.13 → 48.0.0-alpha.14

package/dist/components/SankeyChart.es.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useContext, createContext, useRef, useEffect, useMemo, useId } from 'react';
+import { useState, useContext, createContext, useId, useRef, useEffect, useMemo, useSyncExternalStore } from 'react';
 import { b as buildSankeyHueMap, n as nodeColor, a as nodeColorVivid } from '../sankeyColor-CQ5nkgtL.js';
 export { h as hashHue } from '../sankeyColor-CQ5nkgtL.js';
-import { createPortal } from 'react-dom';
 import { ResponsiveContainer, Sankey as Sankey$1 } from 'recharts';
+import { createPortal } from 'react-dom';
 import { C as Colors } from '../spacings-C87dXiT-.js';
 import { c as cn } from '../cn-BakJzhuv.js';
 
@@ -315,6 +315,82 @@ function orderColumns(columns, order) {
   );
 }
 
+const SANKEY_TOOLTIP_MAX_WIDTH_PX = 320;
+const TOOLTIP_TOP_FLIP_THRESHOLD = 120;
+const TOOLTIP_EDGE_INSET = 16;
+const TOOLTIP_RIGHT_INSET = SANKEY_TOOLTIP_MAX_WIDTH_PX + TOOLTIP_EDGE_INSET;
+function useSankeyHoverTooltip(enabled) {
+  const id = useId();
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [position, setPosition] = useState();
+  function showAt(target) {
+    if (!enabled) return;
+    const rect = target.getBoundingClientRect();
+    const placement = rect.top < TOOLTIP_TOP_FLIP_THRESHOLD ? "below" : "above";
+    setPosition({
+      left: Math.min(
+        Math.max(rect.left, TOOLTIP_EDGE_INSET),
+        Math.max(window.innerWidth - TOOLTIP_RIGHT_INSET, TOOLTIP_EDGE_INSET)
+      ),
+      top: placement === "above" ? rect.top - 8 : rect.bottom + 8,
+      placement
+    });
+  }
+  return {
+    id,
+    position,
+    isVisible: Boolean(enabled && position && (isHovered || isFocused)),
+    showOnHover(target) {
+      setIsHovered(true);
+      showAt(target);
+    },
+    hideOnLeave() {
+      setIsHovered(false);
+    },
+    showOnFocus(target) {
+      setIsFocused(true);
+      showAt(target);
+    },
+    hideOnBlur() {
+      setIsFocused(false);
+    }
+  };
+}
+
+function SankeyPortalTooltip({
+  id,
+  title,
+  description,
+  position,
+  visible
+}) {
+  if (!visible || !position) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": `${title}: ${description}`,
+        className: "border-border1 bg-surface5 text-neutral6 shadow-elevated pointer-events-none fixed z-50 rounded-md border p-2 text-xs leading-4",
+        id,
+        role: "tooltip",
+        style: {
+          left: position.left,
+          maxWidth: `min(${SANKEY_TOOLTIP_MAX_WIDTH_PX}px, calc(100vw - 2rem))`,
+          top: position.top,
+          transform: position.placement === "above" ? "translateY(-100%)" : void 0,
+          width: "max-content"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "text-neutral4 whitespace-pre-wrap", children: description })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+
 function useSankeyChartMeasurements({
   graph,
   height,
@@ -356,6 +432,117 @@ function useSankeyChartMeasurements({
   return { chartContainerRef, fixedGeometry, labelWidths };
 }
 
+const TRANSITION_DURATION_MS = 850;
+function mix(from, to, progress) {
+  return from + (to - from) * progress;
+}
+function interpolateNode(from, to, progress) {
+  return {
+    x: mix(from.x, to.x, progress),
+    y: mix(from.y, to.y, progress),
+    centerY: mix(from.centerY, to.centerY, progress),
+    height: mix(from.height, to.height, progress)
+  };
+}
+function interpolateLink(from, to, progress) {
+  return {
+    sourceX: mix(from.sourceX, to.sourceX, progress),
+    targetX: mix(from.targetX, to.targetX, progress),
+    sourceY: mix(from.sourceY, to.sourceY, progress),
+    targetY: mix(from.targetY, to.targetY, progress),
+    sourceWidth: mix(from.sourceWidth, to.sourceWidth, progress),
+    targetWidth: mix(from.targetWidth, to.targetWidth, progress)
+  };
+}
+function interpolateSankeyGeometry(from, to, progress) {
+  const replacedPreviousLinks = [...from.links].filter(([id]) => !to.links.has(id)).map(([, link]) => link);
+  const nodes = /* @__PURE__ */ new Map();
+  const links = /* @__PURE__ */ new Map();
+  for (const [id, target] of to.nodes) {
+    nodes.set(id, interpolateNode(from.nodes.get(id) ?? target, target, progress));
+  }
+  let replacedLinkIndex = 0;
+  for (const [id, target] of to.links) {
+    const matchingSource = from.links.get(id);
+    const syntheticSource = matchingSource ? void 0 : replacedPreviousLinks[replacedLinkIndex++];
+    links.set(id, interpolateLink(matchingSource ?? syntheticSource ?? target, target, progress));
+  }
+  return { nodes, links };
+}
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+class SankeyGeometryMotionStore {
+  animationFrame = 0;
+  key;
+  listeners = /* @__PURE__ */ new Set();
+  snapshot;
+  target;
+  transition;
+  constructor(key, geometry) {
+    this.key = key;
+    this.snapshot = geometry;
+    this.target = geometry;
+  }
+  getSnapshot = () => this.snapshot;
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+  transitionTo(key, geometry) {
+    if (key === this.key && geometry === this.target) return;
+    const keyChanged = key !== this.key;
+    this.key = key;
+    this.target = geometry;
+    if (!keyChanged && geometry && this.transition) {
+      this.transition = { ...this.transition, to: geometry };
+      return;
+    }
+    cancelAnimationFrame(this.animationFrame);
+    this.animationFrame = 0;
+    if (!keyChanged || !geometry || !this.snapshot || prefersReducedMotion()) {
+      this.transition = void 0;
+      this.publish(geometry);
+      return;
+    }
+    this.transition = { from: this.snapshot, to: geometry, startedAt: performance.now() };
+    this.animationFrame = requestAnimationFrame(this.animate);
+  }
+  dispose() {
+    cancelAnimationFrame(this.animationFrame);
+    this.listeners.clear();
+  }
+  animate = (now) => {
+    const transition = this.transition;
+    if (!transition) return;
+    const elapsed = Math.min((now - transition.startedAt) / TRANSITION_DURATION_MS, 1);
+    const progress = 1 - (1 - elapsed) ** 3;
+    this.publish(interpolateSankeyGeometry(transition.from, transition.to, progress));
+    if (elapsed < 1) {
+      this.animationFrame = requestAnimationFrame(this.animate);
+      return;
+    }
+    this.transition = void 0;
+    this.animationFrame = 0;
+  };
+  publish(geometry) {
+    this.snapshot = geometry;
+    for (const listener of this.listeners) listener();
+  }
+}
+function useSankeyGeometryTransition({
+  geometry,
+  transitionKey
+}) {
+  const [store] = useState(() => new SankeyGeometryMotionStore(transitionKey, geometry));
+  const animatedGeometry = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  useEffect(() => {
+    store.transitionTo(transitionKey, geometry);
+  }, [geometry, store, transitionKey]);
+  useEffect(() => () => store.dispose(), [store]);
+  return animatedGeometry;
+}
+
 const NODE_LABEL_FONT_SIZE = 11;
 const COLUMN_LABEL_FONT_SIZE = 12;
 const NODE_LABEL_MAX_CHARACTERS = 23;
@@ -365,7 +552,10 @@ function SankeyChart({
   margin = { top: 64, right: 160, bottom: 12, left: 160 },
   onCurveClick,
   onNodeClick,
-  isNodeClickable
+  isNodeClickable,
+  getColumnDescription,
+  hideColumnLabels = false,
+  geometryTransitionKey
 }) {
   const { graph, enabledColumns, hueMap, usesFixedGeometry } = useSankeyRenderContext();
   const { chartContainerRef, fixedGeometry, labelWidths } = useSankeyChartMeasurements({
@@ -374,6 +564,10 @@ function SankeyChart({
     margin,
     usesFixedGeometry
   });
+  const animatedGeometry = useSankeyGeometryTransition({
+    geometry: fixedGeometry,
+    transitionKey: geometryTransitionKey
+  });
   const [hoveredSourceName, setHoveredSourceName] = useState();
   const [focusedSourceName, setFocusedSourceName] = useState();
   const activeSourceName = hoveredSourceName ?? focusedSourceName;
@@ -407,8 +601,8 @@ function SankeyChart({
           margin,
           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 showColumnLabel = !hideColumnLabels && node ? graph.nodes.findIndex((candidate) => candidate.column.id === node.column.id) === props.index : false;
+            const nodeGeometry = node ? animatedGeometry?.nodes.get(node.id) : void 0;
             const selection = node ? getSankeyChartNodeSelection(node) : void 0;
             const clickable = Boolean(
               onNodeClick && selection && (isNodeClickable === void 0 || isNodeClickable(selection))
@@ -422,6 +616,7 @@ function SankeyChart({
                 height: nodeGeometry?.height ?? props.height,
                 hueMap,
                 columnLabel: node?.column.label,
+                columnDescription: node ? getColumnDescription?.(node.column) : void 0,
                 label: node?.label,
                 nodeValue: node?.displayValue,
                 layoutValue: nodeGeometry ? void 0 : node ? nodeWeights.get(node.id) : void 0,
@@ -441,7 +636,7 @@ function SankeyChart({
           },
           link: (props) => {
             const link = graph.links[props.index];
-            const linkGeometry = link ? fixedGeometry?.links.get(link.id) : void 0;
+            const linkGeometry = link ? animatedGeometry?.links.get(link.id) : void 0;
             const sourceX = linkGeometry?.sourceX ?? props.sourceX;
             const targetX = linkGeometry?.targetX ?? props.targetX;
             const fixedControlX = linkGeometry ? (sourceX + targetX) / 2 : void 0;
@@ -482,6 +677,7 @@ function SankeyNode({
   payload,
   hueMap,
   columnLabel,
+  columnDescription,
   label,
   nodeValue,
   layoutValue,
@@ -508,10 +704,7 @@ function SankeyNode({
     maxCharacters: NODE_LABEL_MAX_CHARACTERS
   });
   const visibleColumnLabel = columnLabel ? truncateSankeyLabel(columnLabel, { fontSize: COLUMN_LABEL_FONT_SIZE, maxWidth: nodeLabelWidth }) : void 0;
-  const tooltipId = useId();
-  const [isHovered, setIsHovered] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const [tooltipPosition, setTooltipPosition] = useState();
+  const tooltip = useSankeyHoverTooltip(description !== void 0);
   const numericValue = nodeValue ?? (typeof payload.value === "number" ? payload.value : Number(payload.value));
   const value = Number.isFinite(numericValue) ? String(numericValue) : "";
   const percentage = columnTotal > 0 && Number.isFinite(numericValue) ? Math.round(numericValue / columnTotal * 100) : 0;
@@ -520,41 +713,27 @@ function SankeyNode({
   const textAnchor = isFirstColumn ? "start" : isLastColumn ? "end" : "middle";
   const labelX = isFirstColumn ? x : isLastColumn ? x + width : x + width / 2;
   const hue = hueMap[name] ?? 0;
-  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__ */ jsxs(Fragment, { children: [
-    showColumnLabel && visibleColumnLabel ? /* @__PURE__ */ jsxs(
-      "text",
+    showColumnLabel && visibleColumnLabel && columnLabel ? /* @__PURE__ */ jsx(
+      SankeyColumnHeader,
       {
         x: labelX,
-        y: 18,
         textAnchor,
         fill: nodeColor(hue),
-        fontSize: COLUMN_LABEL_FONT_SIZE,
-        fontWeight: 600,
-        children: [
-          visibleColumnLabel === columnLabel ? null : /* @__PURE__ */ jsx("title", { children: columnLabel }),
-          visibleColumnLabel
-        ]
+        label: visibleColumnLabel,
+        fullLabel: columnLabel,
+        description: columnDescription
       }
     ) : null,
     /* @__PURE__ */ jsxs(
       "g",
       {
-        "aria-describedby": description ? tooltipId : void 0,
+        "aria-describedby": description ? tooltip.id : void 0,
         "aria-label": `${accessibleLabel}: ${value} ${numericValue === 1 ? "trace" : "traces"} (${percentage}%)`,
         className: "focus-visible:[&>rect]:stroke-neutral6 outline-hidden focus-visible:[&>rect]:stroke-2",
         onClick: clickable ? onSelect : void 0,
@@ -562,21 +741,19 @@ function SankeyNode({
         role: clickable ? "button" : void 0,
         onFocus: (event) => {
           onFocusChange(name);
-          setIsFocused(true);
-          showTooltipAt(event.currentTarget);
+          tooltip.showOnFocus(event.currentTarget);
         },
         onBlur: () => {
           onFocusChange(void 0);
-          setIsFocused(false);
+          tooltip.hideOnBlur();
         },
         onMouseEnter: (event) => {
           onHoverChange(name);
-          setIsHovered(true);
-          showTooltipAt(event.currentTarget);
+          tooltip.showOnHover(event.currentTarget);
         },
         onMouseLeave: () => {
           onHoverChange(void 0);
-          setIsHovered(false);
+          tooltip.hideOnLeave();
         },
         style: { cursor: clickable ? "pointer" : void 0 },
         tabIndex: 0,
@@ -604,28 +781,60 @@ function SankeyNode({
         ]
       }
     ),
-    description && isTooltipVisible && tooltipPosition ? createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "aria-label": `${visibleDisplayLabel}: ${description}`,
-          className: "border-border1 bg-surface5 text-neutral6 shadow-elevated pointer-events-none fixed z-50 rounded-md border p-2 text-xs leading-4",
-          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__ */ jsx("div", { className: "font-medium", children: visibleDisplayLabel }),
-            /* @__PURE__ */ jsx("div", { className: "text-neutral4 whitespace-pre-wrap", children: description })
-          ]
-        }
-      ),
-      document.body
+    description ? /* @__PURE__ */ jsx(
+      SankeyPortalTooltip,
+      {
+        id: tooltip.id,
+        title: visibleDisplayLabel,
+        description,
+        position: tooltip.position,
+        visible: tooltip.isVisible
+      }
+    ) : null
+  ] });
+}
+function SankeyColumnHeader({
+  x,
+  textAnchor,
+  fill,
+  label,
+  fullLabel,
+  description
+}) {
+  const tooltip = useSankeyHoverTooltip(description !== void 0);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "text",
+      {
+        "aria-describedby": description ? tooltip.id : void 0,
+        "aria-label": description ? fullLabel : void 0,
+        role: description ? "img" : void 0,
+        x,
+        y: 18,
+        textAnchor,
+        fill,
+        fontSize: COLUMN_LABEL_FONT_SIZE,
+        fontWeight: 600,
+        tabIndex: description ? 0 : void 0,
+        onMouseEnter: description ? (event) => tooltip.showOnHover(event.currentTarget) : void 0,
+        onMouseLeave: description ? tooltip.hideOnLeave : void 0,
+        onFocus: description ? (event) => tooltip.showOnFocus(event.currentTarget) : void 0,
+        onBlur: description ? tooltip.hideOnBlur : void 0,
+        children: [
+          label === fullLabel || description ? null : /* @__PURE__ */ jsx("title", { children: fullLabel }),
+          label
+        ]
+      }
+    ),
+    description ? /* @__PURE__ */ jsx(
+      SankeyPortalTooltip,
+      {
+        id: tooltip.id,
+        title: fullLabel,
+        description,
+        position: tooltip.position,
+        visible: tooltip.isVisible
+      }
     ) : null
   ] });
 }