@cccsaurora/clue-ui 1.2.4 → 1.2.5-dev.298

package/components/display/graph/visualizations/tree/index.js

@@ -1,41 +1,55 @@
-import { jsxs as it, jsx as L, Fragment as At } from "react/jsx-runtime";
-import { useTheme as Bt, colors as wt, Box as Ft } from "@mui/material";
-import It from "../../../../../hooks/useComparator.js";
-import Wt from "../../../../../hooks/useMyHighlights.js";
-import { useMyLocalStorageItem as Ot } from "../../../../../hooks/useMyLocalStorage.js";
-import { StorageKey as Pt, BUNDLE_SEPARATOR as Ht } from "../../../../../utils/constants.js";
-import { c as Xt } from "../../../../../cloneDeep-CF8TtLHr.js";
-import { g as Tt } from "../../../../../get-CH7kz5Ix.js";
-import { i as Yt } from "../../../../../isNil-CjWwlQS3.js";
-import { b as $t, a as jt } from "../../../../../_baseExtremum-Ca2EHgy2.js";
-import { i as Nt } from "../../../../../identity-ByMq8VxU.js";
-import { i as Ut } from "../../../../../_isIterateeCall-DkJP7Rbx.js";
-import { t as et } from "../../../../../toFinite-BMy6GObD.js";
-import { b as Gt } from "../../../../../_baseSum-wEbgNeUs.js";
-import { memo as Vt, useMemo as S } from "react";
-import qt from "../../elements/NodeCard.js";
-import zt from "../icons/index.js";
-import Jt from "../Leaf.js";
-import Qt from "./BundleLine.js";
-function kt(c) {
-  return c && c.length ? $t(c, Nt, jt) : void 0;
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useTheme, colors, Box } from "@mui/material";
+import useComparator from "../../../../../hooks/useComparator.js";
+import useMyHighlights from "../../../../../hooks/useMyHighlights.js";
+import { useMyLocalStorageItem } from "../../../../../hooks/useMyLocalStorage.js";
+import { StorageKey, BUNDLE_SEPARATOR } from "../../../../../utils/constants.js";
+import { c as cloneDeep } from "../../../../../cloneDeep-DJrLSw8W.js";
+import { g as get } from "../../../../../get-DSsNkRQs.js";
+import { i as isNil } from "../../../../../isNil-CIubwp4T.js";
+import { b as baseExtremum, a as baseGt } from "../../../../../_baseExtremum-kob8QXyt.js";
+import { i as identity } from "../../../../../identity-CPGTqrE4.js";
+import { i as isIterateeCall } from "../../../../../_isIterateeCall-Ds3sw2SF.js";
+import { t as toFinite } from "../../../../../toFinite-Bc55msYj.js";
+import { b as baseSum } from "../../../../../_baseSum-D0WC1dN0.js";
+import { memo, useMemo } from "react";
+import NodeCard from "../../elements/NodeCard.js";
+import getIcon from "../icons/index.js";
+import Leaf from "../Leaf.js";
+import BundleLine from "./BundleLine.js";
+function max(array) {
+  return array && array.length ? baseExtremum(array, identity, baseGt) : void 0;
 }
-var Zt = Math.ceil, Kt = Math.max;
-function ti(c, n, r, h) {
-  for (var d = -1, _ = Kt(Zt((n - c) / (r || 1)), 0), v = Array(_); _--; )
-    v[++d] = c, c += r;
-  return v;
+var nativeCeil = Math.ceil, nativeMax = Math.max;
+function baseRange(start, end, step, fromRight) {
+  var index = -1, length = nativeMax(nativeCeil((end - start) / (step || 1)), 0), result = Array(length);
+  while (length--) {
+    result[++index] = start;
+    start += step;
+  }
+  return result;
 }
-function ii(c) {
-  return function(n, r, h) {
-    return h && typeof h != "number" && Ut(n, r, h) && (r = h = void 0), n = et(n), r === void 0 ? (r = n, n = 0) : r = et(r), h = h === void 0 ? n < r ? 1 : -1 : et(h), ti(n, r, h);
+function createRange(fromRight) {
+  return function(start, end, step) {
+    if (step && typeof step != "number" && isIterateeCall(start, end, step)) {
+      end = step = void 0;
+    }
+    start = toFinite(start);
+    if (end === void 0) {
+      end = start;
+      start = 0;
+    } else {
+      end = toFinite(end);
+    }
+    step = step === void 0 ? start < end ? 1 : -1 : toFinite(step);
+    return baseRange(start, end, step);
   };
 }
-var ei = ii();
-function ni(c) {
-  return c && c.length ? Gt(c, Nt) : 0;
+var range = createRange();
+function sum(array) {
+  return array && array.length ? baseSum(array, identity) : 0;
 }
-const nt = {
+const DEFAULT_OPTIONS = {
   textColor: "white",
   nodeColor: {
     border: "grey",
@@ -50,335 +64,423 @@ const nt = {
   linePaddingX: 10,
   linePaddingY: 10,
   lineWidth: 3,
-  enableEntryPadding: !0,
-  truncateLabels: !0,
-  enableTimestamps: !0,
+  enableEntryPadding: true,
+  truncateLabels: true,
+  enableTimestamps: true,
   iconOrientation: "vertical",
   lineDirection: "horizontal",
   rowStep: null,
   // We'll make this dynamic
-  belowPrevious: !1
+  belowPrevious: false
 };
-nt.rowStep = nt.ySpacing * 2;
-const ai = ({ svgRef: c, graph: n, labelKeys: r, onNodeSelectionChanged: h, zoom: d, options: _ = {} }) => {
-  var gt, xt, vt;
-  const v = S(
+DEFAULT_OPTIONS.rowStep = DEFAULT_OPTIONS.ySpacing * 2;
+const Tree = ({ svgRef, graph, labelKeys, onNodeSelectionChanged, zoom, options = {} }) => {
+  var _a, _b, _c;
+  const combinedOptions = useMemo(
     () => {
-      var i, o;
+      var _a2, _b2;
       return {
-        ...nt,
-        ..._,
-        ...((o = (i = n == null ? void 0 : n.metadata.display) == null ? void 0 : i.visualization) == null ? void 0 : o.config) ?? {}
+        ...DEFAULT_OPTIONS,
+        ...options,
+        ...((_b2 = (_a2 = graph == null ? void 0 : graph.metadata.display) == null ? void 0 : _a2.visualization) == null ? void 0 : _b2.config) ?? {}
       };
     },
-    [(xt = (gt = n == null ? void 0 : n.metadata.display) == null ? void 0 : gt.visualization) == null ? void 0 : xt.config, _]
-  ), {
-    xSpacing: at,
-    ySpacing: ot,
-    linePaddingX: rt,
-    linePaddingY: st
-  } = v, { runComparators: lt, runComparator: W } = It(), { onNodeHoveredChanged: A, onNodeClicked: ct, nodeOpacities: H, highlightedPath: dt, highlightedNodes: ft, hoveredNode: pt } = Wt(n, (i) => h(i)), u = Bt(), ut = S(() => u.palette.mode === "dark", [u]), [X] = Ot(Pt.SHOW_CARDS, !1), [mt] = Ot(Pt.CARD_CUTOFF, 2.5), Y = S(() => d.k > mt && X, [mt, X, d.k]), w = S(
-    () => n.data.map(
-      (i, o) => i.map((l) => ({
-        ...l,
-        parents: l == null ? void 0 : l.edges,
-        level: o
+    [(_b = (_a = graph == null ? void 0 : graph.metadata.display) == null ? void 0 : _a.visualization) == null ? void 0 : _b.config, options]
+  );
+  const {
+    xSpacing: baseXSpacing,
+    ySpacing: baseYSpacing,
+    linePaddingX: baseLinePaddingX,
+    linePaddingY: baseLinePaddingY
+  } = combinedOptions;
+  const { runComparators, runComparator } = useComparator();
+  const { onNodeHoveredChanged, onNodeClicked, nodeOpacities, highlightedPath, highlightedNodes, hoveredNode } = useMyHighlights(graph, (nodeIds) => onNodeSelectionChanged(nodeIds));
+  const theme = useTheme();
+  const isDark = useMemo(() => theme.palette.mode === "dark", [theme]);
+  const [showCardsSettings] = useMyLocalStorageItem(StorageKey.SHOW_CARDS, false);
+  const [cardCutoff] = useMyLocalStorageItem(StorageKey.CARD_CUTOFF, 2.5);
+  const showCards = useMemo(() => zoom.k > cardCutoff && showCardsSettings, [cardCutoff, showCardsSettings, zoom.k]);
+  const levels = useMemo(
+    () => graph.data.map(
+      (level, levelIndex) => level.map((node) => ({
+        ...node,
+        parents: node == null ? void 0 : node.edges,
+        level: levelIndex
       }))
     ),
-    [n.data]
-  ), C = S(() => w.flat(), [w]), [$, j, ht, M] = S(() => {
-    const i = [
-      [at, rt],
-      [ot, st]
+    [graph.data]
+  );
+  const flatNodes = useMemo(() => levels.flat(), [levels]);
+  const [xSpacing, linePaddingX, ySpacing, linePaddingY] = useMemo(() => {
+    const baseValues = [
+      [baseXSpacing, baseLinePaddingX],
+      [baseYSpacing, baseLinePaddingY]
     ];
-    return d.k > 1 && X ? i.flatMap(
-      (o, l) => o.map((s) => s * Math.pow(2.5 - l * 1.25, Math.min(d.k, 2.5) - 1))
-    ) : i.flat();
-  }, [rt, st, at, ot, X, d.k]);
-  let B;
-  if (!n || !c.current)
-    B = [
+    if (zoom.k > 1 && showCardsSettings) {
+      return baseValues.flatMap(
+        (arr, index) => arr.map((_v) => _v * Math.pow(2.5 - index * 1.25, Math.min(zoom.k, 2.5) - 1))
+      );
+    } else {
+      return baseValues.flat();
+    }
+  }, [baseLinePaddingX, baseLinePaddingY, baseXSpacing, baseYSpacing, showCardsSettings, zoom.k]);
+  let portBounds;
+  if (!graph || !svgRef.current) {
+    portBounds = [
       [0, 0],
       [0, 0]
     ];
-  else {
-    const i = c.current.getBoundingClientRect();
-    B = [d.invert([0, 0]), d.invert([i.width, i.height])];
+  } else {
+    const data = svgRef.current.getBoundingClientRect();
+    portBounds = [zoom.invert([0, 0]), zoom.invert([data.width, data.height])];
   }
-  const U = S(() => {
-    const i = {};
-    return C.forEach((o) => {
-      if (!o.parents)
+  const bundles = useMemo(() => {
+    const bundlesDict = {};
+    flatNodes.forEach((node) => {
+      if (!node.parents) {
         return;
-      const l = o.parents.join(Ht);
-      i[l] ? i[l].destinations.push(o) : i[l] = {
-        id: l,
-        sources: o.parents.map((s) => C.find((E) => E.id === s)),
-        destinations: [o]
-      };
-    }), Object.values(i);
-  }, [C]), G = S(() => {
+      }
+      const bundleId = node.parents.join(BUNDLE_SEPARATOR);
+      if (bundlesDict[bundleId]) {
+        bundlesDict[bundleId].destinations.push(node);
+      } else {
+        bundlesDict[bundleId] = {
+          id: bundleId,
+          sources: node.parents.map((parent) => flatNodes.find((_node) => _node.id === parent)),
+          destinations: [node]
+        };
+      }
+    });
+    return Object.values(bundlesDict);
+  }, [flatNodes]);
+  const layoutData = useMemo(() => {
     const {
-      letterSize: i,
-      letterWidth: o,
-      enableEntryPadding: l,
-      truncateLabels: s,
-      rowStep: E,
-      belowPrevious: F
-    } = v;
-    let V = 0, O = 0;
-    const P = {}, T = {}, R = {}, k = {}, D = {};
-    return w.forEach((e, a) => {
-      let b = 0;
-      e.forEach((f) => {
-        var q;
-        const g = r == null ? void 0 : r.filter((t) => W(t, f)), m = (q = g == null ? void 0 : g.pop()) == null ? void 0 : q.label, p = (m == null ? void 0 : m.split(",").map((t) => Tt(f, t)).filter((t) => !!t)) ?? [];
-        p.length < 1 && f.id.split(`
-`).forEach((t) => p.push(t));
-        const I = p.length * i;
-        O += I, P[f.id] = [+V, +O, -M], O += ht, l && (b = Math.max(b, kt((p == null ? void 0 : p.map((t) => t.toString().length)) ?? [f.id.length])));
-      }), V += $ + (s ? Math.min(b, 44) : b) * o, F ? O += E : O = (a + 1) * E;
-    }), U.forEach((e) => {
-      e.sources.forEach((a) => {
-        D[a.id] || (D[a.id] = /* @__PURE__ */ new Set()), D[a.id].add(e.id);
-      }), e.destinations.forEach((a) => {
-        Yt(T[a.level]) && (T[a.level] = /* @__PURE__ */ new Set()), k[a.id] || (k[a.id] = /* @__PURE__ */ new Set()), T[a.level].add(e.id), k[a.id].add(e.id);
+      letterSize,
+      letterWidth,
+      enableEntryPadding,
+      truncateLabels,
+      rowStep,
+      belowPrevious
+    } = combinedOptions;
+    let currentX = 0;
+    let currentY = 0;
+    const nodeLocations = {};
+    const linesByLevel = {};
+    const paddingByLevel = {};
+    const inputs = {};
+    const outputs = {};
+    levels.forEach((level, levelIndex) => {
+      let longestLabel = 0;
+      level.forEach((node) => {
+        var _a2;
+        const validKeys = labelKeys == null ? void 0 : labelKeys.filter((_comparator) => runComparator(_comparator, node));
+        const labelKey = (_a2 = validKeys == null ? void 0 : validKeys.pop()) == null ? void 0 : _a2.label;
+        const labelRows = (labelKey == null ? void 0 : labelKey.split(",").map((key) => get(node, key)).filter((val) => !!val)) ?? [];
+        if (labelRows.length < 1) {
+          node.id.split("\n").forEach((line) => labelRows.push(line));
+        }
+        const labelHeight = labelRows.length * letterSize;
+        currentY += labelHeight;
+        nodeLocations[node.id] = [+currentX, +currentY, -linePaddingY];
+        currentY += ySpacing;
+        if (enableEntryPadding) {
+          longestLabel = Math.max(longestLabel, max((labelRows == null ? void 0 : labelRows.map((row) => row.toString().length)) ?? [node.id.length]));
+        }
       });
-    }), Object.entries(T).forEach(([e, a]) => R[e] = a.size), w.forEach((e, a) => {
-      const f = ei(a + 1).map((m) => R[m] ?? 0), g = ni(f) * j;
-      e.forEach((m) => {
-        P[m.id][0] += g;
+      currentX += xSpacing + (!truncateLabels ? longestLabel : Math.min(longestLabel, 44)) * letterWidth;
+      if (!belowPrevious) {
+        currentY = (levelIndex + 1) * rowStep;
+      } else {
+        currentY += rowStep;
+      }
+    });
+    bundles.forEach((bundle) => {
+      bundle.sources.forEach((source) => {
+        if (!outputs[source.id]) {
+          outputs[source.id] = /* @__PURE__ */ new Set();
+        }
+        outputs[source.id].add(bundle.id);
       });
-    }), C.forEach((e) => {
-      var f, g, m;
-      let a = kt([((f = k[e.id]) == null ? void 0 : f.size) - 1, ((g = D[e.id]) == null ? void 0 : g.size) - 1, 0]) * M;
-      (m = k[e.id]) != null && m.has(e.id) && (a += M), P[e.id][2] = a;
-      const b = w[e.level].findIndex((p) => p.id === e.id);
-      w[e.level].filter((p, I) => b < I).forEach((p) => {
-        P[p.id][1] += a;
+      bundle.destinations.forEach((dest) => {
+        if (isNil(linesByLevel[dest.level])) {
+          linesByLevel[dest.level] = /* @__PURE__ */ new Set();
+        }
+        if (!inputs[dest.id]) {
+          inputs[dest.id] = /* @__PURE__ */ new Set();
+        }
+        linesByLevel[dest.level].add(bundle.id);
+        inputs[dest.id].add(bundle.id);
       });
-    }), {
-      nodeLocations: P,
-      linesByLevel: T,
-      paddingByLevel: R
+    });
+    Object.entries(linesByLevel).forEach(([level, lines]) => paddingByLevel[level] = lines.size);
+    levels.forEach((level, levelIndex) => {
+      const indexesSoFar = range(levelIndex + 1);
+      const paddingArray = indexesSoFar.map((_levelIndex) => paddingByLevel[_levelIndex] ?? 0);
+      const totalPadding = sum(paddingArray) * linePaddingX;
+      level.forEach((node) => {
+        nodeLocations[node.id][0] += totalPadding;
+      });
+    });
+    flatNodes.forEach((node) => {
+      var _a2, _b2, _c2;
+      let maxHeight = max([((_a2 = inputs[node.id]) == null ? void 0 : _a2.size) - 1, ((_b2 = outputs[node.id]) == null ? void 0 : _b2.size) - 1, 0]) * linePaddingY;
+      if ((_c2 = inputs[node.id]) == null ? void 0 : _c2.has(node.id)) {
+        maxHeight += linePaddingY;
+      }
+      nodeLocations[node.id][2] = maxHeight;
+      const levelIndex = levels[node.level].findIndex((_node) => _node.id === node.id);
+      levels[node.level].filter((__, index) => levelIndex < index).forEach((_node) => {
+        nodeLocations[_node.id][1] += maxHeight;
+      });
+    });
+    return {
+      nodeLocations,
+      linesByLevel,
+      paddingByLevel
     };
   }, [
-    U,
-    v,
-    C,
-    r,
-    w,
-    j,
-    M,
-    W,
-    $,
-    ht
-  ]), [Mt, Rt, Dt] = S(() => {
+    bundles,
+    combinedOptions,
+    flatNodes,
+    labelKeys,
+    levels,
+    linePaddingX,
+    linePaddingY,
+    runComparator,
+    xSpacing,
+    ySpacing
+  ]);
+  const [timestamps, bundleElements, nodes] = useMemo(() => {
     const {
-      textColor: i,
-      letterSize: o,
-      letterWidth: l,
-      nodeRadius: s,
-      nodeColor: E,
-      maxArcRadius: F,
-      lineWidth: V,
-      truncateLabels: O,
-      enableTimestamps: P,
-      belowPrevious: T,
-      iconOrientation: R,
-      lineDirection: k,
-      colorTheme: D
-    } = v, { nodeLocations: e, linesByLevel: a, paddingByLevel: b } = G, f = [], g = [];
-    C.forEach((t) => {
-      var St, Ct, bt, Et;
-      const [yt, z, Z] = e[t.id], K = ((St = r == null ? void 0 : r.filter((y) => W(y, t)).pop()) == null ? void 0 : St.label) ?? "id";
-      let J = K == null ? void 0 : K.split(",").map((y) => {
-        let x = Tt(t, y);
-        return x && O && x.length > 44 && (x = x.replace(/^(.{32}).+$/, "$1 (TRUNCATED)")), x;
-      }).filter((y) => !!y).join(`
-`);
-      if (J || (t.id.length > 44 ? J = t.id.replace(/^(.{32}).+$/, "$1 (TRUNCATED)") : J = t.id), T && P && (t.timestamp || t.annotation) && g.push(
-        /* @__PURE__ */ it(
-          "g",
-          {
-            style: {
-              cursor: "default",
-              fontFamily: '"Lucida Console", monospace',
-              fontSize: o * 0.75 + "px"
-            },
-            children: [
-              /* @__PURE__ */ L(
-                "text",
-                {
-                  x: B[0][0] + $,
-                  y: z + (Z + s) / 2,
-                  fill: u.palette.getContrastText(u.palette.background.paper),
-                  style: {
-                    fillOpacity: H(t.id) / 2,
-                    transition: u.transitions.create(["fill-opacity"], {
-                      duration: u.transitions.duration.short
-                    })
-                  },
-                  children: t.timestamp
-                }
-              ),
-              t.annotation && t.annotation.split(`
-`).map((y, x) => {
-                var Q;
-                return /* @__PURE__ */ L(
+      textColor,
+      letterSize,
+      letterWidth,
+      nodeRadius,
+      nodeColor,
+      maxArcRadius,
+      lineWidth,
+      truncateLabels,
+      enableTimestamps,
+      belowPrevious,
+      iconOrientation,
+      lineDirection,
+      colorTheme
+    } = combinedOptions;
+    const { nodeLocations, linesByLevel, paddingByLevel } = layoutData;
+    const _nodes = [];
+    const _timestamps = [];
+    flatNodes.forEach((node) => {
+      var _a2, _b2, _c2, _d;
+      const [x, y, _height] = nodeLocations[node.id];
+      const labelKey = ((_a2 = labelKeys == null ? void 0 : labelKeys.filter((_comparator) => runComparator(_comparator, node)).pop()) == null ? void 0 : _a2.label) ?? "id";
+      let label = labelKey == null ? void 0 : labelKey.split(",").map((key) => {
+        let labelSection = get(node, key);
+        if (labelSection && truncateLabels && labelSection.length > 44) {
+          labelSection = labelSection.replace(/^(.{32}).+$/, "$1 (TRUNCATED)");
+        }
+        return labelSection;
+      }).filter((section) => !!section).join("\n");
+      if (!label) {
+        if (node.id.length > 44) {
+          label = node.id.replace(/^(.{32}).+$/, "$1 (TRUNCATED)");
+        } else {
+          label = node.id;
+        }
+      }
+      if (belowPrevious && enableTimestamps && (node.timestamp || node.annotation)) {
+        _timestamps.push(
+          /* @__PURE__ */ jsxs(
+            "g",
+            {
+              style: {
+                cursor: "default",
+                fontFamily: '"Lucida Console", monospace',
+                fontSize: letterSize * 0.75 + "px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
                   "text",
                   {
-                    x: B[0][0] + (((Q = t.timestamp) == null ? void 0 : Q.length) ?? 0) * l,
-                    y: z + (Z + s) / 2 + x * o,
-                    fill: ut ? wt.orange[300] : wt.blue[900],
+                    x: portBounds[0][0] + xSpacing,
+                    y: y + (_height + nodeRadius) / 2,
+                    fill: theme.palette.getContrastText(theme.palette.background.paper),
                     style: {
-                      fillOpacity: H(t.id),
-                      transition: u.transitions.create(["fill-opacity"], {
-                        duration: u.transitions.duration.short
+                      fillOpacity: nodeOpacities(node.id) / 2,
+                      transition: theme.transitions.create(["fill-opacity"], {
+                        duration: theme.transitions.duration.short
                       })
                     },
-                    children: y
-                  },
-                  y
-                );
-              })
-            ]
-          },
-          t.id + "-timestamp"
-        )
-      ), !Y) {
-        const y = lt(
-          (bt = (Ct = n.metadata.display) == null ? void 0 : Ct.styles) == null ? void 0 : bt.filter((N) => N.type === "node"),
-          t
-        ), x = H(t.id), Q = (Et = t.icons) == null ? void 0 : Et.map((N) => [N, zt(N)]).filter(([N, tt]) => !!tt).map(([N, tt], Lt) => /* @__PURE__ */ L(
-          tt,
+                    children: node.timestamp
+                  }
+                ),
+                node.annotation && node.annotation.split("\n").map((line, index) => {
+                  var _a3;
+                  return /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: portBounds[0][0] + (((_a3 = node.timestamp) == null ? void 0 : _a3.length) ?? 0) * letterWidth,
+                      y: y + (_height + nodeRadius) / 2 + index * letterSize,
+                      fill: isDark ? colors.orange[300] : colors.blue[900],
+                      style: {
+                        fillOpacity: nodeOpacities(node.id),
+                        transition: theme.transitions.create(["fill-opacity"], {
+                          duration: theme.transitions.duration.short
+                        })
+                      },
+                      children: line
+                    },
+                    line
+                  );
+                })
+              ]
+            },
+            node.id + "-timestamp"
+          )
+        );
+      }
+      if (!showCards) {
+        const style = runComparators(
+          (_c2 = (_b2 = graph.metadata.display) == null ? void 0 : _b2.styles) == null ? void 0 : _c2.filter((comparator) => comparator.type === "node"),
+          node
+        );
+        const nodeOpacity = nodeOpacities(node.id);
+        const icons = (_d = node.icons) == null ? void 0 : _d.map((icon) => [icon, getIcon(icon)]).filter(([__, icon]) => !!icon).map(([icon, Icon], index) => /* @__PURE__ */ jsx(
+          Icon,
           {
-            x: yt - s * 3 * (R === "horizontal" ? Lt + 1 : 0),
-            y: z - s * 3 * (R === "vertical" ? Lt + 1 : 0),
-            size: o * 1.5,
+            x: x - nodeRadius * 3 * (iconOrientation === "horizontal" ? index + 1 : 0),
+            y: y - nodeRadius * 3 * (iconOrientation === "vertical" ? index + 1 : 0),
+            size: letterSize * 1.5,
             style: {
-              fillOpacity: x
+              fillOpacity: nodeOpacity
             },
             circleStyle: {
-              fillOpacity: x
+              fillOpacity: nodeOpacity
             }
           },
-          N
+          icon
         ));
-        f.push(
-          /* @__PURE__ */ L(
-            Jt,
+        _nodes.push(
+          /* @__PURE__ */ jsx(
+            Leaf,
             {
-              alwaysShowText: !0,
-              nodeId: t.id,
-              label: J,
-              height: Z,
-              x: yt,
-              y: z,
-              style: y,
-              nodeRadius: s,
-              nodeColor: E,
-              nodeOpacity: x,
-              letterSize: o,
-              letterWidth: l,
-              textColor: i,
-              selected: ft.has(t.id),
-              onHoverChanged: A,
-              onClick: ct,
-              children: Q
+              alwaysShowText: true,
+              nodeId: node.id,
+              label,
+              height: _height,
+              x,
+              y,
+              style,
+              nodeRadius,
+              nodeColor,
+              nodeOpacity,
+              letterSize,
+              letterWidth,
+              textColor,
+              selected: highlightedNodes.has(node.id),
+              onHoverChanged: onNodeHoveredChanged,
+              onClick: onNodeClicked,
+              children: icons
             },
-            t.id
+            node.id
           )
         );
       }
     });
-    const m = Xt(e), p = {}, I = {}, q = U.map((t) => /* @__PURE__ */ L(
-      Qt,
-      {
-        lineDirection: k,
-        linesByLevel: a,
-        paddingByLevel: b,
-        nodeLocations: m,
-        outputsByNode: p,
-        inputsByNode: I,
-        bundle: t,
-        maxArcRadius: F,
-        lineWidth: V,
-        linePaddingX: j,
-        linePaddingY: M,
-        highlightedPath: dt,
-        colorTheme: D
-      },
-      t.id
-    ));
-    return [g, q, f];
+    const readonlyNodeLocations = cloneDeep(nodeLocations);
+    const outputsByNode = {};
+    const inputsByNode = {};
+    const _bundleElements = bundles.map((bundle) => {
+      return /* @__PURE__ */ jsx(
+        BundleLine,
+        {
+          lineDirection,
+          linesByLevel,
+          paddingByLevel,
+          nodeLocations: readonlyNodeLocations,
+          outputsByNode,
+          inputsByNode,
+          bundle,
+          maxArcRadius,
+          lineWidth,
+          linePaddingX,
+          linePaddingY,
+          highlightedPath,
+          colorTheme
+        },
+        bundle.id
+      );
+    });
+    return [_timestamps, _bundleElements, _nodes];
   }, [
-    U,
-    v,
-    (vt = n.metadata.display) == null ? void 0 : vt.styles,
-    C,
-    ft,
-    dt,
-    ut,
-    r,
-    G,
-    j,
-    M,
-    H,
-    ct,
-    A,
-    B,
-    W,
-    lt,
-    Y,
-    u.palette,
-    u.transitions,
-    $
-  ]), _t = S(() => {
-    const { nodeRadius: i, lineWidth: o } = v, { nodeLocations: l } = G;
-    return C.filter((s) => Y || pt === s.id).map((s) => {
-      const [E, F] = l[s.id];
-      return /* @__PURE__ */ L(
-        Ft,
+    bundles,
+    combinedOptions,
+    (_c = graph.metadata.display) == null ? void 0 : _c.styles,
+    flatNodes,
+    highlightedNodes,
+    highlightedPath,
+    isDark,
+    labelKeys,
+    layoutData,
+    linePaddingX,
+    linePaddingY,
+    nodeOpacities,
+    onNodeClicked,
+    onNodeHoveredChanged,
+    portBounds,
+    runComparator,
+    runComparators,
+    showCards,
+    theme.palette,
+    theme.transitions,
+    xSpacing
+  ]);
+  const cards = useMemo(() => {
+    const { nodeRadius, lineWidth } = combinedOptions;
+    const { nodeLocations } = layoutData;
+    return flatNodes.filter((node) => showCards || hoveredNode === node.id).map((node) => {
+      const [x, y] = nodeLocations[node.id];
+      return /* @__PURE__ */ jsx(
+        Box,
         {
-          onMouseOver: () => A(s.id, !0),
-          onMouseLeave: () => setTimeout(() => A(s.id, !1), 100),
+          onMouseOver: () => onNodeHoveredChanged(node.id, true),
+          onMouseLeave: () => setTimeout(() => onNodeHoveredChanged(node.id, false), 100),
           sx: {
             position: "absolute",
-            left: d.k * E + d.x,
-            top: d.k * F + d.y,
-            transform: `translateX(-${i * 2}px) translateY(${o}px)`,
-            backgroundColor: u.palette.background.paper,
+            left: zoom.k * x + zoom.x,
+            top: zoom.k * y + zoom.y,
+            transform: `translateX(-${nodeRadius * 2}px) translateY(${lineWidth}px)`,
+            backgroundColor: theme.palette.background.paper,
             maxWidth: "450px",
             maxHeight: "500px",
             overflow: "auto"
           },
-          children: /* @__PURE__ */ L(qt, { node: s })
+          children: /* @__PURE__ */ jsx(NodeCard, { node })
         },
-        s.id
+        node.id
       );
     });
   }, [
-    v,
-    C,
-    pt,
-    G,
-    A,
-    Y,
-    u.palette.background.paper,
-    d.k,
-    d.x,
-    d.y
+    combinedOptions,
+    flatNodes,
+    hoveredNode,
+    layoutData,
+    onNodeHoveredChanged,
+    showCards,
+    theme.palette.background.paper,
+    zoom.k,
+    zoom.x,
+    zoom.y
   ]);
-  return /* @__PURE__ */ it(At, { children: [
-    /* @__PURE__ */ L("svg", { id: "viz", ref: c, children: /* @__PURE__ */ it("g", { id: "view", children: [
-      Mt,
-      Rt,
-      Dt
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("svg", { id: "viz", ref: svgRef, children: /* @__PURE__ */ jsxs("g", { id: "view", children: [
+      timestamps,
+      bundleElements,
+      nodes
     ] }) }),
-    _t
+    cards
   ] });
-}, Li = Vt(ai);
+};
+const Tree$1 = memo(Tree);
 export {
-  Li as default
+  Tree$1 as default
 };