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

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

@@ -1,15 +1,16 @@
-import r from "./BugIcon.js";
-import t from "./HostIcon.js";
-import c from "./NetworkIcon.js";
-import m from "./ProcessIcon.js";
-import e from "./TargetIcon.js";
-const n = {
-  bug: r,
-  target: e,
-  host: t,
-  network: c,
-  process: m
-}, i = (o) => n[o];
+import BugIcon from "./BugIcon.js";
+import HostIcon from "./HostIcon.js";
+import NetworkIcon from "./NetworkIcon.js";
+import ProcessIcon from "./ProcessIcon.js";
+import TargetIcon from "./TargetIcon.js";
+const ICON_MAP = {
+  bug: BugIcon,
+  target: TargetIcon,
+  host: HostIcon,
+  network: NetworkIcon,
+  process: ProcessIcon
+};
+const getIcon = (icon) => ICON_MAP[icon];
 export {
-  i as default
+  getIcon as default
 };

package/components/display/graph/visualizations/panels/NodePanel.js

@@ -1,10 +1,12 @@
-import { jsxs as e, Fragment as m, jsx as o } from "react/jsx-runtime";
-import { Skeleton as i } from "@mui/material";
-import n from "../../elements/NodeCard.js";
-const d = ({ selectedNodeIds: t, findNode: a }) => /* @__PURE__ */ e(m, { children: [
-  t.map((r) => a(r)).filter((r) => !!r).map((r) => /* @__PURE__ */ o(n, { node: r }, r.id)),
-  t.length < 1 && /* @__PURE__ */ o(i, { variant: "rounded", height: 150 })
-] });
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Skeleton } from "@mui/material";
+import NodeCard from "../../elements/NodeCard.js";
+const NodePanel = ({ selectedNodeIds, findNode }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    selectedNodeIds.map((selectedNodeId) => findNode(selectedNodeId)).filter((node) => !!node).map((node) => /* @__PURE__ */ jsx(NodeCard, { node }, node.id)),
+    selectedNodeIds.length < 1 && /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: 150 })
+  ] });
+};
 export {
-  d as default
+  NodePanel as default
 };

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

@@ -1,94 +1,121 @@
-import { jsxs as W, jsx as x } from "react/jsx-runtime";
-import { useTheme as $ } from "@mui/material";
-import { d as q, S as D } from "../../../../../index-p5_wX7q1.js";
-import { useMyLocalStorageItem as H } from "../../../../../hooks/useMyLocalStorage.js";
-import { StorageKey as A } from "../../../../../utils/constants.js";
-import { buildHorizontalLine as Q, buildVerticalLine as U } from "../../../../../utils/line.js";
-import { i as I } from "../../../../../isNil-CjWwlQS3.js";
-import { useMemo as z } from "react";
-import { cyrb53 as Z } from "../../../../../utils/graph.js";
-const or = ({
-  bundle: t,
-  linesByLevel: c,
-  paddingByLevel: M,
-  maxArcRadius: T,
-  lineWidth: n,
-  linePaddingX: k,
-  linePaddingY: C,
-  highlightedPath: o,
-  nodeLocations: m,
-  inputsByNode: s,
-  outputsByNode: a,
-  lineDirection: X,
-  colorTheme: E
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme } from "@mui/material";
+import { d as d3, S as Spectral } from "../../../../../index-DCKkHTvx.js";
+import { useMyLocalStorageItem } from "../../../../../hooks/useMyLocalStorage.js";
+import { StorageKey } from "../../../../../utils/constants.js";
+import { buildHorizontalLine, buildVerticalLine } from "../../../../../utils/line.js";
+import { i as isNil } from "../../../../../isNil-CIubwp4T.js";
+import { useMemo } from "react";
+import { cyrb53 } from "../../../../../utils/graph.js";
+const BundleLine = ({
+  bundle,
+  linesByLevel,
+  paddingByLevel,
+  maxArcRadius,
+  lineWidth,
+  linePaddingX,
+  linePaddingY,
+  highlightedPath,
+  nodeLocations,
+  inputsByNode,
+  outputsByNode,
+  lineDirection,
+  colorTheme
 }) => {
-  const _ = $(), [l] = H(A.COLOR_SCHEME, "Spectral"), [O] = H(A.FORCE_COLOR_SETTING, "Spectral"), w = z(
-    () => O ? l : E || l,
-    [l, E, O]
-  ), F = z(
-    () => (q[`interpolate${w}`] ?? D)(Z(JSON.stringify(t))),
-    [t, w]
-  ), G = z(
-    () => (r) => o.size === 0 || r.sources.some((e) => o.has(e.id)) && r.destinations.some((e) => o.has(e.id)) ? 1 : 0.2,
-    [o]
-  ), J = [], L = t.sources.flatMap((r) => t.destinations.flatMap((i) => {
-    var g, j;
-    c[i.level].delete(t.id);
-    const [f, K] = m[r.id], p = K + (((g = a[r.id]) == null ? void 0 : g.size) ?? 0) * C, [S, V, v] = m[i.id], d = V + (((j = s[i.id]) == null ? void 0 : j.size) ?? 0 + +(r.id === i.id)) * C, R = S - f, h = d - p, Y = Math.min(Math.abs(h / 3), T);
-    return X === "horizontal" ? Q({
-      paddingAtLevel: M[i.level],
-      numLines: c[i.level].size,
-      nodeLocations: m,
-      dest: i,
-      distanceX: R,
-      distanceY: h,
-      childX: S,
-      childY: d,
-      childHeight: v,
-      parentX: f,
-      parentY: p,
-      linePaddingX: k,
-      arcRadius: Y
-    }) : U({
-      paddingAtLevel: M[i.level],
-      numLines: c[i.level].size,
-      distanceX: R,
-      distanceY: h,
-      childX: S,
-      childY: d,
-      childHeight: v,
-      parentX: f,
-      parentY: p,
-      linePaddingX: k,
-      arcRadius: Y
+  const theme = useTheme();
+  const [colorSetting] = useMyLocalStorageItem(StorageKey.COLOR_SCHEME, "Spectral");
+  const [forceColorSetting] = useMyLocalStorageItem(StorageKey.FORCE_COLOR_SETTING, "Spectral");
+  const colorScheme = useMemo(
+    () => forceColorSetting ? colorSetting : colorTheme || colorSetting,
+    [colorSetting, colorTheme, forceColorSetting]
+  );
+  const color = useMemo(
+    () => (d3[`interpolate${colorScheme}`] ?? Spectral)(cyrb53(JSON.stringify(bundle))),
+    [bundle, colorScheme]
+  );
+  const opacities = useMemo(
+    () => (_bundle) => highlightedPath.size === 0 || _bundle.sources.some((source) => highlightedPath.has(source.id)) && _bundle.destinations.some((destination) => highlightedPath.has(destination.id)) ? 1 : 0.2,
+    [highlightedPath]
+  );
+  const arrows = [];
+  const d = bundle.sources.flatMap((source) => {
+    const result = bundle.destinations.flatMap((dest) => {
+      var _a, _b;
+      linesByLevel[dest.level].delete(bundle.id);
+      const [parentX, rawParentY] = nodeLocations[source.id];
+      const parentY = rawParentY + (((_a = outputsByNode[source.id]) == null ? void 0 : _a.size) ?? 0) * linePaddingY;
+      const [childX, rawChildY, childHeight] = nodeLocations[dest.id];
+      const childY = rawChildY + (((_b = inputsByNode[dest.id]) == null ? void 0 : _b.size) ?? 0 + +(source.id === dest.id)) * linePaddingY;
+      const distanceX = childX - parentX;
+      const distanceY = childY - parentY;
+      const arcRadius = Math.min(Math.abs(distanceY / 3), maxArcRadius);
+      if (lineDirection === "horizontal") {
+        return buildHorizontalLine({
+          paddingAtLevel: paddingByLevel[dest.level],
+          numLines: linesByLevel[dest.level].size,
+          nodeLocations,
+          dest,
+          distanceX,
+          distanceY,
+          childX,
+          childY,
+          childHeight,
+          parentX,
+          parentY,
+          linePaddingX,
+          arcRadius
+        });
+      } else {
+        return buildVerticalLine({
+          paddingAtLevel: paddingByLevel[dest.level],
+          numLines: linesByLevel[dest.level].size,
+          distanceX,
+          distanceY,
+          childX,
+          childY,
+          childHeight,
+          parentX,
+          parentY,
+          linePaddingX,
+          arcRadius
+        });
+      }
     });
-  })).join(`
-`);
-  return t.destinations.forEach((r) => {
-    I(s[r.id]) && (s[r.id] = /* @__PURE__ */ new Set()), s[r.id].add(t.id);
-  }), t.sources.forEach((r) => {
-    I(a[r.id]) && (a[r.id] = /* @__PURE__ */ new Set()), a[r.id].add(t.id);
-  }), /* @__PURE__ */ W("g", { className: "path", style: { opacity: G(t) }, children: [
-    /* @__PURE__ */ x(
+    return result;
+  }).join("\n");
+  bundle.destinations.forEach((dest) => {
+    if (isNil(inputsByNode[dest.id])) {
+      inputsByNode[dest.id] = /* @__PURE__ */ new Set();
+    }
+    inputsByNode[dest.id].add(bundle.id);
+  });
+  bundle.sources.forEach((source) => {
+    if (isNil(outputsByNode[source.id])) {
+      outputsByNode[source.id] = /* @__PURE__ */ new Set();
+    }
+    outputsByNode[source.id].add(bundle.id);
+  });
+  return /* @__PURE__ */ jsxs("g", { className: "path", style: { opacity: opacities(bundle) }, children: [
+    /* @__PURE__ */ jsx(
       "path",
       {
-        d: L,
-        style: { fill: "none", stroke: _.palette.background.paper, strokeWidth: n + 3 }
+        d,
+        style: { fill: "none", stroke: theme.palette.background.paper, strokeWidth: lineWidth + 3 }
       },
-      t.id + "-bg"
+      bundle.id + "-bg"
     ),
-    /* @__PURE__ */ x(
+    /* @__PURE__ */ jsx(
       "path",
       {
-        d: L,
-        strokeWidth: n,
-        style: { fill: "none", stroke: F, strokeWidth: n }
+        d,
+        strokeWidth: lineWidth,
+        style: { fill: "none", stroke: color, strokeWidth: lineWidth }
       },
-      t.id + "-fg"
+      bundle.id + "-fg"
     ),
-    J
-  ] }, t.id);
+    arrows
+  ] }, bundle.id);
 };
 export {
-  or as default
+  BundleLine as default
 };

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

@@ -1,26 +1,26 @@
-import { jsxs as m, jsx as p } from "react/jsx-runtime";
-import { useTheme as e } from "@mui/material";
-const t = ({ x: r, y: s, fill: $, lineWidth: o }) => {
-  const a = e();
-  return /* @__PURE__ */ m("g", { className: "arrow", children: [
-    /* @__PURE__ */ p(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme } from "@mui/material";
+const Triangle = ({ x, y, fill, lineWidth }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs("g", { className: "arrow", children: [
+    /* @__PURE__ */ jsx(
       "polygon",
       {
-        points: `${r},${s - 1.5 * o} ${r - 2 * o},${s + 1.5 * o} ${r + 2 * o},${s + 1.5 * o}`,
-        style: { fill: $ },
-        stroke: a.palette.background.paper,
+        points: `${x},${y - 1.5 * lineWidth} ${x - 2 * lineWidth},${y + 1.5 * lineWidth} ${x + 2 * lineWidth},${y + 1.5 * lineWidth}`,
+        style: { fill },
+        stroke: theme.palette.background.paper,
         strokeWidth: 2
       }
     ),
-    /* @__PURE__ */ p(
+    /* @__PURE__ */ jsx(
       "polygon",
       {
-        points: `${r - o / 2},${s - 2 * o} ${r + o / 2},${s - 2 * o} ${r + o / 2},${s + 2 * o} ${r - o / 2},${s + 2 * o}`,
-        style: { fill: $ }
+        points: `${x - lineWidth / 2},${y - 2 * lineWidth} ${x + lineWidth / 2},${y - 2 * lineWidth} ${x + lineWidth / 2},${y + 2 * lineWidth} ${x - lineWidth / 2},${y + 2 * lineWidth}`,
+        style: { fill }
       }
     )
   ] });
 };
 export {
-  t as default
+  Triangle as default
 };