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

package/components/display/graph/visualizations/Leaf.js

@@ -1,106 +1,125 @@
-import { jsxs as U, jsx as b } from "react/jsx-runtime";
-import { i as _, b as G } from "../../../../isObjectLike-BatpeCIi.js";
-import { useState as N, useMemo as Z, useCallback as M, useEffect as d } from "react";
-var g = "[object Number]";
-function q(s) {
-  return typeof s == "number" || _(s) && G(s) == g;
+import { jsxs, jsx } from "react/jsx-runtime";
+import { i as isObjectLike, b as baseGetTag } from "../../../../isObjectLike-OAgjjZye.js";
+import { useState, useMemo, useCallback, useEffect } from "react";
+var numberTag = "[object Number]";
+function isNumber(value) {
+  return typeof value == "number" || isObjectLike(value) && baseGetTag(value) == numberTag;
 }
-const v = 10, J = ({
-  nodeId: s,
-  label: x = s,
-  x: r,
-  y: a,
-  height: h,
-  nodeRadius: k = v,
-  nodeColor: $,
-  nodeOpacity: m = 1,
-  letterSize: l,
-  letterWidth: O,
-  textColor: W,
-  style: t = {},
-  selected: p = !1,
-  alwaysShowText: j = !1,
-  onHoverChanged: i,
-  onClick: o,
-  children: A
+const DEFAULT_NODE_RADIUS = 10;
+const Leaf = ({
+  nodeId,
+  label = nodeId,
+  x,
+  y,
+  height,
+  nodeRadius = DEFAULT_NODE_RADIUS,
+  nodeColor,
+  nodeOpacity = 1,
+  letterSize,
+  letterWidth,
+  textColor,
+  style = {},
+  selected = false,
+  alwaysShowText = false,
+  onHoverChanged,
+  onClick,
+  children
 }) => {
-  const [c, n] = N(p), [u, D] = N(!1), E = Z(() => {
-    const e = ["node"];
-    return u && e.push("hover"), c && e.push("selected"), e;
-  }, [u, c]), S = M(
-    (e) => {
-      o == null || o(s, !c, e), n(!c);
+  const [isSelected, setIsSelected] = useState(selected);
+  const [isHovered, setIsHovered] = useState(false);
+  const classNames = useMemo(() => {
+    const _classNames = ["node"];
+    if (isHovered) {
+      _classNames.push("hover");
+    }
+    if (isSelected) {
+      _classNames.push("selected");
+    }
+    return _classNames;
+  }, [isHovered, isSelected]);
+  const handleOnClick = useCallback(
+    (event) => {
+      onClick == null ? void 0 : onClick(nodeId, !isSelected, event);
+      setIsSelected(!isSelected);
     },
-    [s, o, c]
-  ), L = M(
-    (e) => {
-      D(e), i == null || i(s, e);
+    [nodeId, onClick, isSelected]
+  );
+  const handleOnHoverChanged = useCallback(
+    (value) => {
+      setIsHovered(value);
+      onHoverChanged == null ? void 0 : onHoverChanged(nodeId, value);
     },
-    [s, i]
+    [nodeId, onHoverChanged]
   );
-  d(() => n(p), [p]);
-  let f = `${k}px`;
-  return t.strokeWidth && (q(t.strokeWidth) ? f = `${k * t.strokeWidth}px` : f = t.strokeWidth), /* @__PURE__ */ U(
+  useEffect(() => setIsSelected(selected), [selected]);
+  let strokeWidth = `${nodeRadius}px`;
+  if (style.strokeWidth) {
+    if (isNumber(style.strokeWidth)) {
+      strokeWidth = `${nodeRadius * style.strokeWidth}px`;
+    } else {
+      strokeWidth = style.strokeWidth;
+    }
+  }
+  return /* @__PURE__ */ jsxs(
     "g",
     {
-      id: "node-" + s.replace(/[^A-Za-z0-9]*/g, ""),
+      id: "node-" + nodeId.replace(/[^A-Za-z0-9]*/g, ""),
       style: { strokeLinecap: "round" },
-      className: E.join(" "),
-      onClick: S,
-      onMouseOver: () => L(!0),
-      onMouseLeave: () => L(!1),
+      className: classNames.join(" "),
+      onClick: handleOnClick,
+      onMouseOver: () => handleOnHoverChanged(true),
+      onMouseLeave: () => handleOnHoverChanged(false),
       children: [
-        A,
-        /* @__PURE__ */ b(
+        children,
+        /* @__PURE__ */ jsx(
           "path",
           {
             className: "border",
-            d: `M ${r} ${a} L ${r} ${a + Math.max(h, 0)}`,
+            d: `M ${x} ${y} L ${x} ${y + Math.max(height, 0)}`,
             style: {
-              strokeOpacity: m,
-              ...t,
-              strokeWidth: `calc(${f} * 2)`,
-              stroke: t.stroke ?? $.border
+              strokeOpacity: nodeOpacity,
+              ...style,
+              strokeWidth: `calc(${strokeWidth} * 2)`,
+              stroke: style.stroke ?? nodeColor.border
             }
           },
-          s + "-border"
+          nodeId + "-border"
         ),
-        /* @__PURE__ */ b(
+        /* @__PURE__ */ jsx(
           "path",
           {
             className: "center",
-            d: `M ${r} ${a} L ${r} ${a + Math.max(h, 0)}`,
+            d: `M ${x} ${y} L ${x} ${y + Math.max(height, 0)}`,
             style: {
-              strokeOpacity: m,
-              ...t,
-              strokeWidth: f,
-              stroke: t.fill ?? $.center
+              strokeOpacity: nodeOpacity,
+              ...style,
+              strokeWidth,
+              stroke: style.fill ?? nodeColor.center
             }
           },
-          s + "-middle"
+          nodeId + "-middle"
         ),
-        (u || j) && x.split(`
-`).reverse().map((e, T, F) => /* @__PURE__ */ b(
+        (isHovered || alwaysShowText) && label.split("\n").reverse().map((_label, index, arr) => /* @__PURE__ */ jsx(
           "text",
           {
-            x: r + O,
-            y: a - l / 2 + F.length - T * l,
-            fill: W,
+            x: x + letterWidth,
+            y: y - letterSize / 2 + arr.length - index * letterSize,
+            fill: textColor,
             style: {
               cursor: "default",
               fontFamily: '"Lucida Console", monospace',
-              fontSize: l + "px",
-              fillOpacity: m
+              fontSize: letterSize + "px",
+              fillOpacity: nodeOpacity
             },
-            children: e
+            children: _label
           },
-          s + "-label-" + e
+          nodeId + "-label-" + _label
         ))
       ]
     },
-    s
+    nodeId
   );
 };
 export {
-  J as default
+  Leaf as default
 };

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

@@ -1,14 +1,14 @@
-import { jsx as a, jsxs as x } from "react/jsx-runtime";
-import { o as I, d as N, S as B, a as T, h as _ } from "../../../../../index-p5_wX7q1.js";
-import A from "../../../../../hooks/useMyHighlights.js";
-import { useMyLocalStorageItem as D } from "../../../../../hooks/useMyLocalStorage.js";
-import { StorageKey as F } from "../../../../../utils/constants.js";
-import { cyrb53 as K } from "../../../../../utils/graph.js";
-import { c as U } from "../../../../../countBy-CdYegFSu.js";
-import { s as X } from "../../../../../sumBy-DuMASLPd.js";
-import { memo as Y, useRef as p, useMemo as c, useCallback as q } from "react";
-import G from "../Leaf.js";
-const u = {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { o as ordinal, d as d3, S as Spectral, a as index, h as hierarchy } from "../../../../../index-DCKkHTvx.js";
+import useMyHighlights from "../../../../../hooks/useMyHighlights.js";
+import { useMyLocalStorageItem } from "../../../../../hooks/useMyLocalStorage.js";
+import { StorageKey } from "../../../../../utils/constants.js";
+import { cyrb53 } from "../../../../../utils/graph.js";
+import { c as countBy } from "../../../../../countBy-c6S3dvSW.js";
+import { s as sumBy } from "../../../../../sumBy-D-hb_NY-.js";
+import { memo, useRef, useMemo, useCallback } from "react";
+import Leaf from "../Leaf.js";
+const DEFAULT_OPTIONS = {
   width: "100%",
   backgroundColor: "grey",
   textColor: "black",
@@ -23,102 +23,119 @@ const u = {
   circlePadding: null
   // We'll make this dynamic
 };
-u.circlePadding = 3 * u.nodeRadius;
-const J = ({ svgRef: S, graph: h, options: b = {} }) => {
+DEFAULT_OPTIONS.circlePadding = 3 * DEFAULT_OPTIONS.nodeRadius;
+const Cloud = ({ svgRef, graph, options = {} }) => {
   const {
-    width: M,
-    backgroundColor: O,
-    textColor: $,
-    letterSize: m,
-    letterWidth: v,
-    circlePadding: g,
-    nodeRadius: d,
-    nodeColor: L,
-    lineWidth: f
+    width,
+    backgroundColor,
+    textColor,
+    letterSize,
+    letterWidth,
+    circlePadding,
+    nodeRadius,
+    nodeColor,
+    lineWidth
   } = {
-    ...u,
-    ...b
-  }, { onNodeHoveredChanged: W, onNodeClicked: w, nodeOpacities: z, highlightedPath: s } = A(h), [y] = D(F.COLOR_SCHEME, "Spectral"), P = p(2 * d), R = p(m + d), j = p({}), i = c(
-    () => h.data.flatMap(
-      (t, e) => t.map((r) => ({
-        ...r,
-        cloud: e.toString()
+    ...DEFAULT_OPTIONS,
+    ...options
+  };
+  const { onNodeHoveredChanged, onNodeClicked, nodeOpacities, highlightedPath } = useMyHighlights(graph);
+  const [colorScheme] = useMyLocalStorageItem(StorageKey.COLOR_SCHEME, "Spectral");
+  const currentX = useRef(2 * nodeRadius);
+  const currentY = useRef(letterSize + nodeRadius);
+  const nodeLocations = useRef({});
+  const nodes = useMemo(
+    () => graph.data.flatMap(
+      (cloud, cloudIndex) => cloud.map((node) => ({
+        ...node,
+        cloud: cloudIndex.toString()
       }))
     ),
-    [h.data]
-  ), n = c(() => U(i, (t) => t.cloud), [i]), H = c(
-    () => I(
-      Object.keys(n).map((t) => (N[`interpolate${y}`] ?? B)(K(t)))
+    [graph.data]
+  );
+  const clouds = useMemo(() => countBy(nodes, (node) => node.cloud), [nodes]);
+  const colors = useMemo(
+    () => ordinal(
+      Object.keys(clouds).map((cloud) => (d3[`interpolate${colorScheme}`] ?? Spectral)(cyrb53(cloud)))
     ),
-    [n, y]
-  ), E = c(
-    () => i.flatMap(
-      (t) => ((t == null ? void 0 : t.edges) ?? []).map((e) => ({
-        source: t.id,
-        target: e
+    [clouds, colorScheme]
+  );
+  const links = useMemo(
+    () => nodes.flatMap(
+      (node) => ((node == null ? void 0 : node.edges) ?? []).map((parent) => ({
+        source: node.id,
+        target: parent
       }))
     ),
-    [i]
-  ), k = c(() => T().size([600, 600]).padding(g), [g]), l = c(() => {
-    const t = Object.entries(n).map(([e]) => ({
-      id: e,
-      children: i.filter((r) => r.cloud === e).map((r) => ({
-        ...r,
+    [nodes]
+  );
+  const pack = useMemo(() => index().size([600, 600]).padding(circlePadding), [circlePadding]);
+  const cloudLocations = useMemo(() => {
+    const data = Object.entries(clouds).map(([id]) => ({
+      id,
+      children: nodes.filter((node) => node.cloud === id).map((node) => ({
+        ...node,
         value: 1
       }))
     }));
-    return k(
-      _({ children: t }).sum((e) => e.children ? X(e.children, (r) => r.value) : e.value)
+    return pack(
+      hierarchy({ children: data }).sum((d) => d.children ? sumBy(d.children, (c) => c.value) : d.value)
     ).children;
-  }, [n, i, k]), C = q(
-    (t) => s.size === 0 || s.has(t.source) && s.has(t.target) ? 1 : 0.2,
-    [s]
+  }, [clouds, nodes, pack]);
+  const opacities = useCallback(
+    (link) => highlightedPath.size === 0 || highlightedPath.has(link.source) && highlightedPath.has(link.target) ? 1 : 0.2,
+    [highlightedPath]
   );
-  return P.current = 2 * d, R.current = m + d, j.current = {}, /* @__PURE__ */ a("svg", { id: "viz", ref: S, width: M, height: 600, style: { backgroundColor: O }, children: /* @__PURE__ */ x("g", { id: "view", children: [
-    l.map((t) => /* @__PURE__ */ a("g", { children: /* @__PURE__ */ a("circle", { cx: t.x, cy: t.y, r: t.r, strokeWidth: 4, stroke: H(t.data.id), fill: "none" }) }, t.data.id)),
-    E.map((t) => {
-      const e = l.flatMap((o) => o.children).find((o) => o.data.id === t.source), r = l.flatMap((o) => o.children).find((o) => o.data.id === t.target);
-      return /* @__PURE__ */ x("g", { children: [
-        /* @__PURE__ */ a(
+  currentX.current = 2 * nodeRadius;
+  currentY.current = letterSize + nodeRadius;
+  nodeLocations.current = {};
+  return /* @__PURE__ */ jsx("svg", { id: "viz", ref: svgRef, width, height: 600, style: { backgroundColor }, children: /* @__PURE__ */ jsxs("g", { id: "view", children: [
+    cloudLocations.map((cloud) => /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("circle", { cx: cloud.x, cy: cloud.y, r: cloud.r, strokeWidth: 4, stroke: colors(cloud.data.id), fill: "none" }) }, cloud.data.id)),
+    links.map((link) => {
+      const source = cloudLocations.flatMap((c) => c.children).find((node) => node.data.id === link.source);
+      const target = cloudLocations.flatMap((c) => c.children).find((node) => node.data.id === link.target);
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
           "path",
           {
-            d: `M ${e.x} ${e.y} L ${r.x} ${r.y}`,
+            d: `M ${source.x} ${source.y} L ${target.x} ${target.y}`,
             stroke: "black",
-            strokeWidth: f + 3,
-            strokeOpacity: C(t)
+            strokeWidth: lineWidth + 3,
+            strokeOpacity: opacities(link)
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ jsx(
           "path",
           {
-            d: `M ${e.x} ${e.y} L ${r.x} ${r.y}`,
+            d: `M ${source.x} ${source.y} L ${target.x} ${target.y}`,
             stroke: "white",
-            strokeWidth: f,
-            strokeOpacity: C(t)
+            strokeWidth: lineWidth,
+            strokeOpacity: opacities(link)
           }
         )
-      ] }, e.data.id + r.data.id);
+      ] }, source.data.id + target.data.id);
     }),
-    l.map((t) => /* @__PURE__ */ a("g", { children: t.children.map((e) => /* @__PURE__ */ a(
-      G,
+    cloudLocations.map((cloud) => /* @__PURE__ */ jsx("g", { children: cloud.children.map((node) => /* @__PURE__ */ jsx(
+      Leaf,
       {
-        nodeId: e.data.id,
+        nodeId: node.data.id,
         height: 0,
-        x: e.x,
-        y: e.y,
-        nodeRadius: d,
-        nodeColor: L,
-        nodeOpacity: z(e.data.id),
-        letterSize: m,
-        letterWidth: v,
-        textColor: $,
-        onHoverChanged: W,
-        onClick: w
+        x: node.x,
+        y: node.y,
+        nodeRadius,
+        nodeColor,
+        nodeOpacity: nodeOpacities(node.data.id),
+        letterSize,
+        letterWidth,
+        textColor,
+        onHoverChanged: onNodeHoveredChanged,
+        onClick: onNodeClicked
       },
-      e.data.id
-    )) }, t.id))
+      node.data.id
+    )) }, cloud.id))
   ] }) });
-}, dt = Y(J);
+};
+const Cloud$1 = memo(Cloud);
 export {
-  dt as default
+  Cloud$1 as default
 };

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

@@ -1,32 +1,37 @@
-import { jsxs as o, jsx as s } from "react/jsx-runtime";
-import { useMemo as x } from "react";
-const d = {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+const DEFAULTS = {
   size: 20
-}, y = (e) => {
-  const { width: c, height: i, size: t } = {
-    ...d,
-    ...e
-  }, l = (e.x ?? 0) - (c ?? t) / 2, r = (e.y ?? 0) - (i ?? t) / 2, h = x(() => {
-    const n = { ...e };
-    return delete n.circleStyle, n;
-  }, [e]);
-  return /* @__PURE__ */ o("g", { children: [
-    /* @__PURE__ */ s("circle", { cx: e.x, cy: e.y, r: t / 2, style: e.circleStyle ?? {} }),
-    /* @__PURE__ */ s(
+};
+const BaseIcon = (props) => {
+  const { width, height, size } = {
+    ...DEFAULTS,
+    ...props
+  };
+  const x = (props.x ?? 0) - (width ?? size) / 2;
+  const y = (props.y ?? 0) - (height ?? size) / 2;
+  const trimmedProps = useMemo(() => {
+    const _props = { ...props };
+    delete _props.circleStyle;
+    return _props;
+  }, [props]);
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("circle", { cx: props.x, cy: props.y, r: size / 2, style: props.circleStyle ?? {} }),
+    /* @__PURE__ */ jsx(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 -960 960 960",
-        width: c ?? t,
-        height: i ?? t,
-        ...h,
-        x: l,
-        y: r,
-        children: e.children
+        width: width ?? size,
+        height: height ?? size,
+        ...trimmedProps,
+        x,
+        y,
+        children: props.children
       }
     )
   ] });
 };
 export {
-  y as default
+  BaseIcon as default
 };

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

@@ -1,18 +1,18 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useTheme as h } from "@mui/material";
-import l from "./BaseIcon.js";
-const v = (t) => {
-  const e = h();
-  return /* @__PURE__ */ r(
-    l,
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@mui/material";
+import BaseIcon from "./BaseIcon.js";
+const BugIcon = (props) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    BaseIcon,
     {
-      ...t,
-      style: { fill: e.palette.getContrastText(e.palette.error.dark), ...t.style },
-      circleStyle: { fill: e.palette.error.dark, ...t.style },
-      children: /* @__PURE__ */ r("path", { d: "M480-200q66 0 113-47t47-113v-160q0-66-47-113t-113-47q-66 0-113 47t-47 113v160q0 66 47 113t113 47Zm-80-120h160v-80H400v80Zm0-160h160v-80H400v80Zm80 40Zm0 320q-65 0-120.5-32T272-240H160v-80h84q-3-20-3.5-40t-.5-40h-80v-80h80q0-20 .5-40t3.5-40h-84v-80h112q14-23 31.5-43t40.5-35l-64-66 56-56 86 86q28-9 57-9t57 9l88-86 56 56-66 66q23 15 41.5 34.5T688-640h112v80h-84q3 20 3.5 40t.5 40h80v80h-80q0 20-.5 40t-3.5 40h84v80H688q-32 56-87.5 88T480-120Z" })
+      ...props,
+      style: { fill: theme.palette.getContrastText(theme.palette.error.dark), ...props.style },
+      circleStyle: { fill: theme.palette.error.dark, ...props.style },
+      children: /* @__PURE__ */ jsx("path", { d: "M480-200q66 0 113-47t47-113v-160q0-66-47-113t-113-47q-66 0-113 47t-47 113v160q0 66 47 113t113 47Zm-80-120h160v-80H400v80Zm0-160h160v-80H400v80Zm80 40Zm0 320q-65 0-120.5-32T272-240H160v-80h84q-3-20-3.5-40t-.5-40h-80v-80h80q0-20 .5-40t3.5-40h-84v-80h112q14-23 31.5-43t40.5-35l-64-66 56-56 86 86q28-9 57-9t57 9l88-86 56 56-66 66q23 15 41.5 34.5T688-640h112v80h-84q3 20 3.5 40t.5 40h80v80h-80q0 20-.5 40t-3.5 40h84v80H688q-32 56-87.5 88T480-120Z" })
     }
   );
 };
 export {
-  v as default
+  BugIcon as default
 };

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

@@ -1,15 +1,15 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useTheme as a } from "@mui/material";
-import r from "./BaseIcon.js";
-const n = (t) => {
-  const e = a();
-  return /* @__PURE__ */ l(
-    r,
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@mui/material";
+import BaseIcon from "./BaseIcon.js";
+const HostIcon = (props) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    BaseIcon,
     {
-      ...t,
-      style: { fill: e.palette.getContrastText(e.palette.info.dark), ...t.style },
-      circleStyle: { fill: e.palette.info.dark, ...t.style },
-      children: /* @__PURE__ */ l(
+      ...props,
+      style: { fill: theme.palette.getContrastText(theme.palette.info.dark), ...props.style },
+      circleStyle: { fill: theme.palette.info.dark, ...props.style },
+      children: /* @__PURE__ */ jsx(
         "path",
         {
           style: { transform: "scale(0.75) translateX(16%) translateY(-18%)" },
@@ -20,5 +20,5 @@ const n = (t) => {
   );
 };
 export {
-  n as default
+  HostIcon as default
 };

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

@@ -1,15 +1,15 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useTheme as v } from "@mui/material";
-import r from "./BaseIcon.js";
-const s = (t) => {
-  const e = v();
-  return /* @__PURE__ */ l(
-    r,
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@mui/material";
+import BaseIcon from "./BaseIcon.js";
+const NetworkIcon = (props) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    BaseIcon,
     {
-      ...t,
-      style: { fill: e.palette.getContrastText(e.palette.info.dark), ...t.style },
-      circleStyle: { fill: e.palette.info.dark, ...t.style },
-      children: /* @__PURE__ */ l(
+      ...props,
+      style: { fill: theme.palette.getContrastText(theme.palette.info.dark), ...props.style },
+      circleStyle: { fill: theme.palette.info.dark, ...props.style },
+      children: /* @__PURE__ */ jsx(
         "path",
         {
           style: { transform: "scale(0.75) translateX(16%) translateY(-18%)" },
@@ -20,5 +20,5 @@ const s = (t) => {
   );
 };
 export {
-  s as default
+  NetworkIcon as default
 };

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

@@ -1,18 +1,18 @@
-import { jsx as v } from "react/jsx-runtime";
-import { useTheme as r, colors as e } from "@mui/material";
-import l from "./BaseIcon.js";
-const c = (h) => {
-  const t = r();
-  return /* @__PURE__ */ v(
-    l,
+import { jsx } from "react/jsx-runtime";
+import { useTheme, colors } from "@mui/material";
+import BaseIcon from "./BaseIcon.js";
+const ProcessIcon = (props) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    BaseIcon,
     {
-      ...h,
-      style: { fill: t.palette.getContrastText(e.grey[500]), ...h.style },
-      circleStyle: { fill: e.grey[500], ...h.style },
-      children: /* @__PURE__ */ v("path", { d: "M360-360v-240h240v240H360Zm80-80h80v-80h-80v80Zm-80 320v-80h-80q-33 0-56.5-23.5T200-280v-80h-80v-80h80v-80h-80v-80h80v-80q0-33 23.5-56.5T280-760h80v-80h80v80h80v-80h80v80h80q33 0 56.5 23.5T760-680v80h80v80h-80v80h80v80h-80v80q0 33-23.5 56.5T680-200h-80v80h-80v-80h-80v80h-80Zm320-160v-400H280v400h400ZM480-480Z" })
+      ...props,
+      style: { fill: theme.palette.getContrastText(colors.grey[500]), ...props.style },
+      circleStyle: { fill: colors.grey[500], ...props.style },
+      children: /* @__PURE__ */ jsx("path", { d: "M360-360v-240h240v240H360Zm80-80h80v-80h-80v80Zm-80 320v-80h-80q-33 0-56.5-23.5T200-280v-80h-80v-80h80v-80h-80v-80h80v-80q0-33 23.5-56.5T280-760h80v-80h80v80h80v-80h80v80h80q33 0 56.5 23.5T760-680v80h80v80h-80v80h80v80h-80v80q0 33-23.5 56.5T680-200h-80v80h-80v-80h-80v80h-80Zm320-160v-400H280v400h400ZM480-480Z" })
     }
   );
 };
 export {
-  c as default
+  ProcessIcon as default
 };

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

@@ -1,19 +1,19 @@
-import { jsx as q } from "react/jsx-runtime";
-import { useTheme as T } from "@mui/material";
-import l from "./BaseIcon.js";
-const o = (t) => {
-  const e = T();
-  return /* @__PURE__ */ q(
-    l,
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@mui/material";
+import BaseIcon from "./BaseIcon.js";
+const TargetIcon = (props) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    BaseIcon,
     {
-      ...t,
-      ...t,
-      style: { fill: e.palette.getContrastText(e.palette.info.dark), ...t.style },
-      circleStyle: { fill: e.palette.info.dark, ...t.style },
-      children: /* @__PURE__ */ q("path", { d: "M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-80q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q66 0 113-47t47-113q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-80q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Z" })
+      ...props,
+      ...props,
+      style: { fill: theme.palette.getContrastText(theme.palette.info.dark), ...props.style },
+      circleStyle: { fill: theme.palette.info.dark, ...props.style },
+      children: /* @__PURE__ */ jsx("path", { d: "M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-80q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q66 0 113-47t47-113q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-80q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Z" })
     }
   );
 };
 export {
-  o as default
+  TargetIcon as default
 };