@cccsaurora/clue-ui 1.2.0-dev.254 → 1.2.0

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

@@ -1,54 +1,40 @@
-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-DmUylbkM.js";
-import { g as get } from "../../../../../get-DSsNkRQs.js";
-import { i as isNil } from "../../../../../isNil-CIubwp4T.js";
-import { b as baseExtremum, a as baseGt, i as isIterateeCall } from "../../../../../_baseExtremum-BY663UjY.js";
-import { i as identity } from "../../../../../identity-CPGTqrE4.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;
+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-wjl3XmFj.js";
+import { g as Tt } from "../../../../../get-CH7kz5Ix.js";
+import { i as Yt } from "../../../../../isNil-CjWwlQS3.js";
+import { b as $t, a as jt, i as Ut } from "../../../../../_baseExtremum-DhV10dXG.js";
+import { i as Nt } from "../../../../../identity-ByMq8VxU.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;
 }
-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;
+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;
 }
-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);
+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);
   };
 }
-var range = createRange();
-function sum(array) {
-  return array && array.length ? baseSum(array, identity) : 0;
+var ei = ii();
+function ni(c) {
+  return c && c.length ? Gt(c, Nt) : 0;
 }
-const DEFAULT_OPTIONS = {
+const nt = {
   textColor: "white",
   nodeColor: {
     border: "grey",
@@ -63,423 +49,335 @@ const DEFAULT_OPTIONS = {
   linePaddingX: 10,
   linePaddingY: 10,
   lineWidth: 3,
-  enableEntryPadding: true,
-  truncateLabels: true,
-  enableTimestamps: true,
+  enableEntryPadding: !0,
+  truncateLabels: !0,
+  enableTimestamps: !0,
   iconOrientation: "vertical",
   lineDirection: "horizontal",
   rowStep: null,
   // We'll make this dynamic
-  belowPrevious: false
+  belowPrevious: !1
 };
-DEFAULT_OPTIONS.rowStep = DEFAULT_OPTIONS.ySpacing * 2;
-const Tree = ({ svgRef, graph, labelKeys, onNodeSelectionChanged, zoom, options = {} }) => {
-  var _a, _b, _c;
-  const combinedOptions = useMemo(
+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(
     () => {
-      var _a2, _b2;
+      var i, o;
       return {
-        ...DEFAULT_OPTIONS,
-        ...options,
-        ...((_b2 = (_a2 = graph == null ? void 0 : graph.metadata.display) == null ? void 0 : _a2.visualization) == null ? void 0 : _b2.config) ?? {}
+        ...nt,
+        ..._,
+        ...((o = (i = n == null ? void 0 : n.metadata.display) == null ? void 0 : i.visualization) == null ? void 0 : o.config) ?? {}
       };
     },
-    [(_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
+    [(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
       }))
     ),
-    [graph.data]
-  );
-  const flatNodes = useMemo(() => levels.flat(), [levels]);
-  const [xSpacing, linePaddingX, ySpacing, linePaddingY] = useMemo(() => {
-    const baseValues = [
-      [baseXSpacing, baseLinePaddingX],
-      [baseYSpacing, baseLinePaddingY]
+    [n.data]
+  ), C = S(() => w.flat(), [w]), [$, j, ht, M] = S(() => {
+    const i = [
+      [at, rt],
+      [ot, st]
     ];
-    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 = [
+    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 = [
       [0, 0],
       [0, 0]
     ];
-  } else {
-    const data = svgRef.current.getBoundingClientRect();
-    portBounds = [zoom.invert([0, 0]), zoom.invert([data.width, data.height])];
+  else {
+    const i = c.current.getBoundingClientRect();
+    B = [d.invert([0, 0]), d.invert([i.width, i.height])];
   }
-  const bundles = useMemo(() => {
-    const bundlesDict = {};
-    flatNodes.forEach((node) => {
-      if (!node.parents) {
+  const U = S(() => {
+    const i = {};
+    return C.forEach((o) => {
+      if (!o.parents)
         return;
-      }
-      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 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 {
-      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]));
-        }
+      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);
       });
-      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);
+    }), 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;
       });
-      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);
+    }), 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;
       });
-    });
-    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
+    }), {
+      nodeLocations: P,
+      linesByLevel: T,
+      paddingByLevel: R
     };
   }, [
-    bundles,
-    combinedOptions,
-    flatNodes,
-    labelKeys,
-    levels,
-    linePaddingX,
-    linePaddingY,
-    runComparator,
-    xSpacing,
-    ySpacing
-  ]);
-  const [timestamps, bundleElements, nodes] = useMemo(() => {
+    U,
+    v,
+    C,
+    r,
+    w,
+    j,
+    M,
+    W,
+    $,
+    ht
+  ]), [Mt, Rt, Dt] = S(() => {
     const {
-      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(
+      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(
                   "text",
                   {
-                    x: portBounds[0][0] + xSpacing,
-                    y: y + (_height + nodeRadius) / 2,
-                    fill: theme.palette.getContrastText(theme.palette.background.paper),
+                    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],
                     style: {
-                      fillOpacity: nodeOpacities(node.id) / 2,
-                      transition: theme.transitions.create(["fill-opacity"], {
-                        duration: theme.transitions.duration.short
+                      fillOpacity: H(t.id),
+                      transition: u.transitions.create(["fill-opacity"], {
+                        duration: u.transitions.duration.short
                       })
                     },
-                    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,
+                    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,
           {
-            x: x - nodeRadius * 3 * (iconOrientation === "horizontal" ? index + 1 : 0),
-            y: y - nodeRadius * 3 * (iconOrientation === "vertical" ? index + 1 : 0),
-            size: letterSize * 1.5,
+            x: yt - s * 3 * (R === "horizontal" ? Lt + 1 : 0),
+            y: z - s * 3 * (R === "vertical" ? Lt + 1 : 0),
+            size: o * 1.5,
             style: {
-              fillOpacity: nodeOpacity
+              fillOpacity: x
             },
             circleStyle: {
-              fillOpacity: nodeOpacity
+              fillOpacity: x
             }
           },
-          icon
+          N
         ));
-        _nodes.push(
-          /* @__PURE__ */ jsx(
-            Leaf,
+        f.push(
+          /* @__PURE__ */ L(
+            Jt,
             {
-              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
+              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
             },
-            node.id
+            t.id
           )
         );
       }
     });
-    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];
+    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];
   }, [
-    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,
+    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,
         {
-          onMouseOver: () => onNodeHoveredChanged(node.id, true),
-          onMouseLeave: () => setTimeout(() => onNodeHoveredChanged(node.id, false), 100),
+          onMouseOver: () => A(s.id, !0),
+          onMouseLeave: () => setTimeout(() => A(s.id, !1), 100),
           sx: {
             position: "absolute",
-            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,
+            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,
             maxWidth: "450px",
             maxHeight: "500px",
             overflow: "auto"
           },
-          children: /* @__PURE__ */ jsx(NodeCard, { node })
+          children: /* @__PURE__ */ L(qt, { node: s })
         },
-        node.id
+        s.id
       );
     });
   }, [
-    combinedOptions,
-    flatNodes,
-    hoveredNode,
-    layoutData,
-    onNodeHoveredChanged,
-    showCards,
-    theme.palette.background.paper,
-    zoom.k,
-    zoom.x,
-    zoom.y
+    v,
+    C,
+    pt,
+    G,
+    A,
+    Y,
+    u.palette.background.paper,
+    d.k,
+    d.x,
+    d.y
   ]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("svg", { id: "viz", ref: svgRef, children: /* @__PURE__ */ jsxs("g", { id: "view", children: [
-      timestamps,
-      bundleElements,
-      nodes
+  return /* @__PURE__ */ it(At, { children: [
+    /* @__PURE__ */ L("svg", { id: "viz", ref: c, children: /* @__PURE__ */ it("g", { id: "view", children: [
+      Mt,
+      Rt,
+      Dt
     ] }) }),
-    cards
+    _t
   ] });
-};
-const Tree$1 = memo(Tree);
+}, Ei = Vt(ai);
 export {
-  Tree$1 as default
+  Ei as default
 };