@cccsaurora/clue-ui 1.3.0-dev.403 → 1.3.0

package/components/display/graph/index.js

@@ -1,255 +1,197 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, useRef, useState, useEffect, useCallback, createElement } from "react";
-import { useTheme, lighten, darken, Stack, Card, Typography, Autocomplete, TextField, FormControl, InputLabel, Select, MenuItem, alpha, IconButton, Collapse } from "@mui/material";
-import { p as parseEvent } from "../../../index-DUEubgWN.js";
-import { z as zoom, i as identity, s as select, t as transform, p as pointer } from "../../../index-CVUD9o3t.js";
-import { ClueComponentContext } from "../../../hooks/ClueComponentContext.js";
-import useComparator from "../../../hooks/useComparator.js";
-import { useMyLocalStorageItem } from "../../../hooks/useMyLocalStorage.js";
-import { StorageKey } from "../../../utils/constants.js";
-import { g as get } from "../../../get-CdMThM8x.js";
-import { a as useContextSelector } from "../../../index-_gpzM2Px.js";
-import { cssImportant } from "../../../utils/graph.js";
-import Iconified from "../icons/Iconified.js";
-import ExpandMoreButton from "./ExpandMoreButton.js";
-import Cloud from "./visualizations/cloud/index.js";
-import NodePanel from "./visualizations/panels/NodePanel.js";
-import Tree from "./visualizations/tree/index.js";
-const Graph = ({ graph, sx = {} }) => {
-  var _a, _b, _c, _d, _e;
-  const { t } = useContextSelector(ClueComponentContext, (ctx) => ctx.i18next);
-  const theme = useTheme();
-  const isDark = useMemo(() => theme.palette.mode === "dark", [theme]);
-  const { runComparator } = useComparator();
-  const svgRef = useRef();
-  const pointRef = useRef();
-  const [showMousePos] = useMyLocalStorageItem(StorageKey.SHOW_MOUSE_POS, false);
-  const [showCoordinates] = useMyLocalStorageItem(StorageKey.SHOW_COORDINATES, false);
-  const [panelLocation] = useMyLocalStorageItem(StorageKey.PANEL_LOCATION, "vertical");
-  const [relativeMousePos, setRelativeMousePos] = useState(["0", "0"]);
-  const [absoluteMousePos, setAbsoluteMousePos] = useState(["0", "0"]);
-  const [showPanel, setShowPanel] = useState(false);
-  const nodeIds = useMemo(() => ((graph == null ? void 0 : graph.data) ?? []).flat(2).map((node) => node.id), [graph == null ? void 0 : graph.data]);
-  const zoom$1 = useMemo(() => zoom().scaleExtent([0.1, 6]), []);
-  const [currentZoom, setCurrentZoom] = useState(identity);
-  const [nodeId, setNodeId] = useState("");
-  const [selectedNodeIds, setSelectedNodeIds] = useState([]);
-  const [viz, setViz] = useState(
-    ((_b = (_a = graph == null ? void 0 : graph.metadata.display) == null ? void 0 : _a.visualization) == null ? void 0 : _b.type) ?? "tree"
-  );
-  const [hasError, setHasError] = useState(false);
-  useEffect(() => {
-    setShowPanel(selectedNodeIds.length > 0);
-  }, [selectedNodeIds]);
-  const labelKeys = useMemo(
+import { jsx as i, jsxs as l, Fragment as ke } from "react/jsx-runtime";
+import { useMemo as m, useRef as te, useState as u, useEffect as z, useCallback as f, createElement as Ce } from "react";
+import { useTheme as we, lighten as oe, darken as ne, Stack as x, Card as T, Typography as he, Autocomplete as ze, TextField as Se, FormControl as Ee, InputLabel as Ie, Select as Oe, MenuItem as Ne, alpha as ie, IconButton as Me, Collapse as Pe } from "@mui/material";
+import { p as Fe } from "../../../index-Cj4d5cGz.js";
+import { z as Re, i as P, s as p, t as Te, p as re } from "../../../index-Dh2PP9h8.js";
+import { ClueComponentContext as ge } from "../../../hooks/ClueComponentContext.js";
+import Le from "../../../hooks/useComparator.js";
+import { useMyLocalStorageItem as g } from "../../../hooks/useMyLocalStorage.js";
+import { StorageKey as L } from "../../../utils/constants.js";
+import { g as Ae } from "../../../get-Bil3mzRD.js";
+import { a as Be } from "../../../index-BM9Sve5T.js";
+import { cssImportant as k } from "../../../utils/graph.js";
+import ae from "../icons/Iconified.js";
+import $e from "./ExpandMoreButton.js";
+import je from "./visualizations/cloud/index.js";
+import He from "./visualizations/panels/NodePanel.js";
+import _e from "./visualizations/tree/index.js";
+const rt = ({ graph: t, sx: se = {} }) => {
+  var Y, Z, U, q, J;
+  const { t: C } = Be(ge, (e) => e.i18next), o = we(), S = m(() => o.palette.mode === "dark", [o]), { runComparator: A } = Le(), a = te(), le = te(), [F] = g(L.SHOW_MOUSE_POS, !1), [w] = g(L.SHOW_COORDINATES, !1), [E] = g(L.PANEL_LOCATION, "vertical"), [ce, de] = u(["0", "0"]), [me, ue] = u(["0", "0"]), [I, B] = u(!1), $ = m(() => ((t == null ? void 0 : t.data) ?? []).flat(2).map((e) => e.id), [t == null ? void 0 : t.data]), v = m(() => Re().scaleExtent([0.1, 6]), []), [s, O] = u(P), [N, pe] = u(""), [h, j] = u([]), [M, H] = u(
+    ((Z = (Y = t == null ? void 0 : t.metadata.display) == null ? void 0 : Y.visualization) == null ? void 0 : Z.type) ?? "tree"
+  ), [fe, R] = u(!1);
+  z(() => {
+    B(h.length > 0);
+  }, [h]);
+  const b = m(
     () => {
-      var _a2, _b2;
-      return (_b2 = (_a2 = graph == null ? void 0 : graph.metadata.display) == null ? void 0 : _a2.displayField) == null ? void 0 : _b2.filter((entry) => (entry.zoom ?? Number.MAX_SAFE_INTEGER) > currentZoom.k);
+      var e, n;
+      return (n = (e = t == null ? void 0 : t.metadata.display) == null ? void 0 : e.displayField) == null ? void 0 : n.filter((r) => (r.zoom ?? Number.MAX_SAFE_INTEGER) > s.k);
     },
-    [(_c = graph == null ? void 0 : graph.metadata.display) == null ? void 0 : _c.displayField, currentZoom.k]
-  );
-  const onNodeChange = useCallback((node) => {
-    setNodeId(node);
-  }, []);
-  const checkForNode = useCallback((_nodeId) => {
-    const selector = _nodeId === "view" ? _nodeId : `node-${_nodeId ?? "will\\%never\\$ever\\*exist"}`;
-    return select(`#${selector}`);
-  }, []);
-  const selectNode = useCallback(() => {
-    if (!nodeId) {
-      setHasError(true);
+    [(U = t == null ? void 0 : t.metadata.display) == null ? void 0 : U.displayField, s.k]
+  ), xe = f((e) => {
+    pe(e);
+  }, []), _ = f((e) => {
+    const n = e === "view" ? e : `node-${e ?? "will\\%never\\$ever\\*exist"}`;
+    return p(`#${n}`);
+  }, []), G = f(() => {
+    if (!N) {
+      R(!0);
       return;
     }
-    const nodeToGet = checkForNode(nodeId.replace(/[^A-Za-z0-9]*/g, ""));
-    if (nodeToGet.empty()) {
-      setHasError(true);
+    const e = _(N.replace(/[^A-Za-z0-9]*/g, ""));
+    if (e.empty()) {
+      R(!0);
       return;
     }
-    setHasError(false);
-    setSelectedNodeIds([nodeId]);
-    const clientRect = svgRef.current.getBoundingClientRect();
-    const svg = select(svgRef.current);
-    const box = nodeToGet.node().getBBox();
-    svg.transition().duration(500).call(
-      zoom$1.transform,
-      identity.translate(clientRect.width / 2, clientRect.height / 2).scale(4).translate(-box.x, -box.y)
+    R(!1), j([N]);
+    const n = a.current.getBoundingClientRect(), r = p(a.current), d = e.node().getBBox();
+    r.transition().duration(500).call(
+      v.transform,
+      P.translate(n.width / 2, n.height / 2).scale(4).translate(-d.x, -d.y)
     );
-  }, [checkForNode, nodeId, zoom$1.transform]);
-  const onKeyPress = useCallback(
-    (event) => {
-      const parsedEvent = parseEvent(event);
-      if (parsedEvent.isCtrl && parsedEvent.isEnter) {
-        selectNode();
-      }
+  }, [_, N, v.transform]), ve = f(
+    (e) => {
+      const n = Fe(e);
+      n.isCtrl && n.isEnter && G();
     },
-    [selectNode]
-  );
-  const findNode = useCallback((id) => ((graph == null ? void 0 : graph.data) ?? []).flat().find((n) => n.id === id), [graph == null ? void 0 : graph.data]);
-  const resetZoom = useCallback(
-    (instant = false) => {
-      if (!graph) {
+    [G]
+  ), be = f((e) => ((t == null ? void 0 : t.data) ?? []).flat().find((n) => n.id === e), [t == null ? void 0 : t.data]), W = f(
+    (e = !1) => {
+      if (!t)
         return;
-      }
-      const box = select(svgRef.current).select("#view").node().getBBox();
-      const clientRect = svgRef.current.getBoundingClientRect();
-      const zoomLevel = Math.min(clientRect.width / (box.width + 25), (clientRect.height - 96) / box.height);
-      let selection = select(svgRef.current);
-      if (!instant) {
-        selection = selection.transition().duration(500);
-      }
-      selection.call(
-        zoom$1.transform,
-        identity.translate(clientRect.width / 2, (clientRect.height + 96) / 2).scale(zoomLevel).translate(-box.width / 2, -box.height / 2 - 10)
+      const n = p(a.current).select("#view").node().getBBox(), r = a.current.getBoundingClientRect(), d = Math.min(r.width / (n.width + 25), (r.height - 96) / n.height);
+      let y = p(a.current);
+      e || (y = y.transition().duration(500)), y.call(
+        v.transform,
+        P.translate(r.width / 2, (r.height + 96) / 2).scale(d).translate(-n.width / 2, -n.height / 2 - 10)
       );
     },
-    [zoom$1.transform, graph]
-  );
-  const onNodeSelectionChanged = useCallback((_nodeIds) => setSelectedNodeIds(_nodeIds), []);
-  useEffect(() => {
-    if (!graph) {
-      return;
-    }
-    pointRef.current = svgRef.current.createSVGPoint();
-    select(svgRef.current).call(
-      zoom$1.on("zoom", (event) => {
-        setCurrentZoom == null ? void 0 : setCurrentZoom(event.transform);
-        select(svgRef.current).select("#view").attr("transform", event.transform);
+    [v.transform, t]
+  ), D = f((e) => j(e), []);
+  z(() => {
+    t && (le.current = a.current.createSVGPoint(), p(a.current).call(
+      v.on("zoom", (e) => {
+        O == null || O(e.transform), p(a.current).select("#view").attr("transform", e.transform);
       })
-    );
-  }, [setCurrentZoom, zoom$1, viz, graph]);
-  useEffect(() => {
-    if (showMousePos) {
-      select(svgRef.current).on("mousemove", (event) => {
-        const _zoom = transform(select(svgRef.current).select("#view").node());
-        setAbsoluteMousePos(_zoom.invert(pointer(event)).map((n) => n.toFixed(0)));
-        setRelativeMousePos(pointer(event).map((n) => n.toFixed(0)));
-      });
-    }
-  }, [showMousePos, graph]);
-  useEffect(() => {
-    resetZoom();
-  }, [viz, graph == null ? void 0 : graph.data]);
-  useEffect(() => {
-    var _a2, _b2, _c2, _d2;
-    if ((_b2 = (_a2 = graph == null ? void 0 : graph.metadata.display) == null ? void 0 : _a2.visualization) == null ? void 0 : _b2.type) {
-      setViz((_d2 = (_c2 = graph == null ? void 0 : graph.metadata.display) == null ? void 0 : _c2.visualization) == null ? void 0 : _d2.type);
-    }
-  }, [(_e = (_d = graph == null ? void 0 : graph.metadata.display) == null ? void 0 : _d.visualization) == null ? void 0 : _e.type]);
-  const treeOptions = useMemo(
+    ));
+  }, [O, v, M, t]), z(() => {
+    F && p(a.current).on("mousemove", (e) => {
+      const n = Te(p(a.current).select("#view").node());
+      ue(n.invert(re(e)).map((r) => r.toFixed(0))), de(re(e).map((r) => r.toFixed(0)));
+    });
+  }, [F, t]), z(() => {
+    W();
+  }, [M, t == null ? void 0 : t.data]), z(() => {
+    var e, n, r, d;
+    (n = (e = t == null ? void 0 : t.metadata.display) == null ? void 0 : e.visualization) != null && n.type && H((d = (r = t == null ? void 0 : t.metadata.display) == null ? void 0 : r.visualization) == null ? void 0 : d.type);
+  }, [(J = (q = t == null ? void 0 : t.metadata.display) == null ? void 0 : q.visualization) == null ? void 0 : J.type]);
+  const V = m(
     () => ({
-      textColor: theme.palette.text.primary,
-      backgroundColor: theme.palette.background.paper,
+      textColor: o.palette.text.primary,
+      backgroundColor: o.palette.background.paper,
       nodeColor: {
-        border: (isDark ? lighten : darken)(theme.palette.background.paper, 0.3),
+        border: (S ? oe : ne)(o.palette.background.paper, 0.3),
         center: "white"
       }
     }),
-    [isDark, theme.palette.background.paper, theme.palette.text.primary]
-  );
-  const cloudOptions = useMemo(
+    [S, o.palette.background.paper, o.palette.text.primary]
+  ), K = m(
     () => ({
-      textColor: theme.palette.text.primary,
-      backgroundColor: theme.palette.background.paper,
+      textColor: o.palette.text.primary,
+      backgroundColor: o.palette.background.paper,
       nodeColor: {
-        border: (isDark ? lighten : darken)(theme.palette.background.paper, 0.3),
+        border: (S ? oe : ne)(o.palette.background.paper, 0.3),
         center: "white"
       }
     }),
-    [isDark, theme.palette.background.paper, theme.palette.text.primary]
-  );
-  const visualizations = useMemo(
+    [S, o.palette.background.paper, o.palette.text.primary]
+  ), X = m(
     () => ({
-      tree: () => /* @__PURE__ */ jsx(
-        Tree,
+      tree: () => /* @__PURE__ */ i(
+        _e,
         {
-          svgRef,
-          graph,
-          labelKeys,
-          onNodeSelectionChanged,
-          zoom: currentZoom,
-          options: treeOptions
+          svgRef: a,
+          graph: t,
+          labelKeys: b,
+          onNodeSelectionChanged: D,
+          zoom: s,
+          options: V
         }
       ),
-      cloud: () => /* @__PURE__ */ jsx(Cloud, { svgRef, graph, options: cloudOptions })
+      cloud: () => /* @__PURE__ */ i(je, { svgRef: a, graph: t, options: K })
     }),
-    [cloudOptions, currentZoom, graph, labelKeys, onNodeSelectionChanged, treeOptions]
-  );
-  const suggestions = useMemo(() => {
-    return nodeIds.flatMap((id) => {
-      var _a2, _b2;
-      const node = (((_a2 = graph == null ? void 0 : graph.data) == null ? void 0 : _a2.flat()) ?? []).find((_node) => _node.id === id);
-      if (!node) {
-        return { id, value: id };
-      }
-      const key = ((_b2 = labelKeys == null ? void 0 : labelKeys.filter((comparator) => runComparator(comparator, node)).pop()) == null ? void 0 : _b2.label) ?? "id";
-      const value = key.split(",").map((_key) => {
-        var _a3;
-        return (_a3 = get(node, _key)) == null ? void 0 : _a3.toString();
-      }).filter((val) => !!val).map((_value) => ({ id, value: _value.trim() }));
-      return value;
-    });
-  }, [graph == null ? void 0 : graph.data, labelKeys, nodeIds, runComparator]);
-  return /* @__PURE__ */ jsxs(
-    Stack,
+    [K, s, t, b, D, V]
+  ), ye = m(() => $.flatMap((e) => {
+    var y, Q;
+    const n = (((y = t == null ? void 0 : t.data) == null ? void 0 : y.flat()) ?? []).find((c) => c.id === e);
+    return n ? (((Q = b == null ? void 0 : b.filter((c) => A(c, n)).pop()) == null ? void 0 : Q.label) ?? "id").split(",").map((c) => {
+      var ee;
+      return (ee = Ae(n, c)) == null ? void 0 : ee.toString();
+    }).filter((c) => !!c).map((c) => ({ id: e, value: c.trim() })) : { id: e, value: e };
+  }), [t == null ? void 0 : t.data, b, $, A]);
+  return /* @__PURE__ */ l(
+    x,
     {
-      direction: panelLocation === "vertical" ? "row" : "column",
+      direction: E === "vertical" ? "row" : "column",
       spacing: 1,
       overflow: "hidden",
       height: "100%",
       width: "100%",
-      sx,
+      sx: se,
       children: [
-        /* @__PURE__ */ jsx(Stack, { direction: "column", spacing: 1, sx: { position: "relative", flex: 1 }, children: /* @__PURE__ */ jsxs(
-          Card,
+        /* @__PURE__ */ i(x, { direction: "column", spacing: 1, sx: { position: "relative", flex: 1 }, children: /* @__PURE__ */ l(
+          T,
           {
             variant: "outlined",
             sx: {
               flex: 1,
               position: "relative",
-              maxHeight: `calc(100vh - 64px - ${theme.spacing(1)})`,
+              maxHeight: `calc(100vh - 64px - ${o.spacing(1)})`,
               "& #viz": {
-                maxHeight: `calc(100vh - 64px - ${theme.spacing(1)})`,
+                maxHeight: `calc(100vh - 64px - ${o.spacing(1)})`,
                 width: "100%",
                 height: "100%",
-                backgroundColor: theme.palette.background.paper
+                backgroundColor: o.palette.background.paper
               },
               "& .path": {
-                transition: theme.transitions.create(["opacity"], {
-                  duration: theme.transitions.duration.short
-                })
+                transition: o.transitions.create(["opacity"], {
+                  duration: o.transitions.duration.short
+                }),
+                transform: "translateY(-10px)"
               },
               "& .node": {
                 cursor: "pointer",
                 "& > path, & > text, & > polygon, & circle": {
-                  transition: theme.transitions.create(["stroke", "fill", "fill-opacity", "stroke-opacity"], {
-                    duration: theme.transitions.duration.short
+                  transition: o.transitions.create(["stroke", "fill", "fill-opacity", "stroke-opacity"], {
+                    duration: o.transitions.duration.short
                   })
                 },
                 "&.hover > .center": {
-                  stroke: cssImportant(theme.palette.primary.main)
+                  stroke: k(o.palette.primary.main)
                 },
                 "&.hover > .border": {
-                  stroke: cssImportant(theme.palette.primary.dark)
+                  stroke: k(o.palette.primary.dark)
                 },
                 "&.selected > .center": {
-                  stroke: cssImportant(theme.palette.success.main)
+                  stroke: k(o.palette.success.main)
                 },
                 "&.selected > .border": {
-                  stroke: cssImportant(theme.palette.success.dark)
+                  stroke: k(o.palette.success.dark)
                 },
                 "&.selected.hover > .center": {
-                  stroke: cssImportant(theme.palette.primary.main)
+                  stroke: k(o.palette.primary.main)
                 },
                 "&.selected.hover > .border": {
-                  stroke: cssImportant(theme.palette.primary.dark)
+                  stroke: k(o.palette.primary.dark)
                 }
               }
             },
             children: [
-              graph ? visualizations[viz]() : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("svg", { id: "viz", ref: svgRef, children: /* @__PURE__ */ jsx("g", { id: "view" }) }),
-                /* @__PURE__ */ jsx(
-                  Typography,
+              t ? X[M]() : /* @__PURE__ */ l(ke, { children: [
+                /* @__PURE__ */ i("svg", { id: "viz", ref: a, children: /* @__PURE__ */ i("g", { id: "view" }) }),
+                /* @__PURE__ */ i(
+                  he,
                   {
                     variant: "h1",
                     color: "text.secondary",
@@ -260,23 +202,23 @@ const Graph = ({ graph, sx = {} }) => {
                       opacity: 0.3,
                       transform: "translateX(-50%) translateY(-50%)"
                     },
-                    children: t("graph.no.dataset")
+                    children: C("graph.no.dataset")
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx(
-                Stack,
+              /* @__PURE__ */ i(
+                x,
                 {
                   direction: "column",
                   spacing: 1,
                   sx: {
                     position: "absolute",
-                    top: theme.spacing(1),
-                    left: theme.spacing(1),
-                    right: theme.spacing(1)
+                    top: o.spacing(1),
+                    left: o.spacing(1),
+                    right: o.spacing(1)
                   },
-                  children: /* @__PURE__ */ jsxs(
-                    Stack,
+                  children: /* @__PURE__ */ l(
+                    x,
                     {
                       direction: "row",
                       spacing: 1,
@@ -284,55 +226,55 @@ const Graph = ({ graph, sx = {} }) => {
                         "& > div:first-of-type": {
                           flex: 1,
                           maxWidth: "775px",
-                          backgroundColor: alpha(theme.palette.background.paper, 0.8)
+                          backgroundColor: ie(o.palette.background.paper, 0.8)
                         }
                       },
                       children: [
-                        /* @__PURE__ */ jsx(
-                          Autocomplete,
+                        /* @__PURE__ */ i(
+                          ze,
                           {
-                            disablePortal: true,
-                            onChange: (__, value) => onNodeChange(value.id),
-                            onKeyDown: onKeyPress,
-                            options: suggestions,
+                            disablePortal: !0,
+                            onChange: (e, n) => xe(n.id),
+                            onKeyDown: ve,
+                            options: ye,
                             sx: { width: "400px" },
-                            getOptionLabel: (option) => option.value,
-                            filterOptions: (options, state) => options.filter((opt) => opt.value.toLowerCase().includes(state.inputValue)),
-                            renderOption: (props, option) => /* @__PURE__ */ createElement("li", { ...props, key: option.id + option.value }, option.value),
-                            renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, error: hasError, label: t("graph.node.input.label") })
+                            getOptionLabel: (e) => e.value,
+                            filterOptions: (e, n) => e.filter((r) => r.value.toLowerCase().includes(n.inputValue)),
+                            renderOption: (e, n) => /* @__PURE__ */ Ce("li", { ...e, key: n.id + n.value }, n.value),
+                            renderInput: (e) => /* @__PURE__ */ i(Se, { ...e, error: fe, label: C("graph.node.input.label") })
                           }
                         ),
-                        /* @__PURE__ */ jsxs(FormControl, { sx: { minWidth: "150px", backgroundColor: alpha(theme.palette.background.paper, 0.8) }, children: [
-                          /* @__PURE__ */ jsx(InputLabel, { id: "viz-label", children: t("graph.visualization") }),
-                          /* @__PURE__ */ jsx(
-                            Select,
+                        /* @__PURE__ */ l(Ee, { sx: { minWidth: "150px", backgroundColor: ie(o.palette.background.paper, 0.8) }, children: [
+                          /* @__PURE__ */ i(Ie, { id: "viz-label", children: C("graph.visualization") }),
+                          /* @__PURE__ */ i(
+                            Oe,
                             {
-                              label: t("graph.visualization"),
+                              label: C("graph.visualization"),
                               labelId: "viz-label",
-                              value: viz,
-                              onChange: (event) => setViz(event.target.value),
+                              value: M,
+                              onChange: (e) => H(e.target.value),
                               sx: { textTransform: "capitalize" },
-                              children: Object.keys(visualizations).map((_viz) => /* @__PURE__ */ jsx(MenuItem, { value: _viz, sx: { textTransform: "capitalize" }, children: _viz }, _viz))
+                              children: Object.keys(X).map((e) => /* @__PURE__ */ i(Ne, { value: e, sx: { textTransform: "capitalize" }, children: e }, e))
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ jsx(
-                          ExpandMoreButton,
+                        /* @__PURE__ */ i(
+                          $e,
                           {
-                            disabled: selectedNodeIds.length < 1,
-                            expand: showPanel,
-                            onClick: () => setShowPanel(!showPanel),
-                            "aria-expanded": showPanel,
-                            "aria-label": t("graph.show.more"),
+                            disabled: h.length < 1,
+                            expand: I,
+                            onClick: () => B(!I),
+                            "aria-expanded": I,
+                            "aria-label": C("graph.show.more"),
                             size: "small",
                             sx: {
                               marginLeft: "auto !important",
                               alignSelf: "center"
                             },
-                            children: /* @__PURE__ */ jsx(
-                              Iconified,
+                            children: /* @__PURE__ */ i(
+                              ae,
                               {
-                                icon: panelLocation === "vertical" ? "ic:baseline-chevron-left" : "ic:baseline-expand-more",
+                                icon: E === "vertical" ? "ic:baseline-chevron-left" : "ic:baseline-expand-more",
                                 fontSize: "medium"
                               }
                             )
@@ -343,64 +285,64 @@ const Graph = ({ graph, sx = {} }) => {
                   )
                 }
               ),
-              /* @__PURE__ */ jsx(
-                Card,
+              /* @__PURE__ */ i(
+                T,
                 {
-                  variant: showCoordinates ? "elevation" : "outlined",
-                  elevation: showCoordinates ? 4 : 0,
+                  variant: w ? "elevation" : "outlined",
+                  elevation: w ? 4 : 0,
                   sx: {
                     position: "absolute",
-                    bottom: theme.spacing(0.5),
-                    right: theme.spacing(0.5),
+                    bottom: o.spacing(0.5),
+                    right: o.spacing(0.5),
                     px: 1,
                     py: 0.5,
                     border: "none !important"
                   },
-                  children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
-                    showCoordinates && /* @__PURE__ */ jsxs("span", { children: [
-                      currentZoom.x.toFixed(0),
+                  children: /* @__PURE__ */ l(x, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+                    w && /* @__PURE__ */ l("span", { children: [
+                      s.x.toFixed(0),
                       ", ",
-                      currentZoom.y.toFixed(0),
+                      s.y.toFixed(0),
                       " (",
-                      currentZoom.k.toFixed(2),
+                      s.k.toFixed(2),
                       "x",
                       ")"
                     ] }),
-                    /* @__PURE__ */ jsx(
-                      IconButton,
+                    /* @__PURE__ */ i(
+                      Me,
                       {
-                        size: showCoordinates ? "small" : "medium",
-                        onClick: () => resetZoom(),
-                        disabled: currentZoom.k === identity.k && currentZoom.x === 0 && currentZoom.y === 0,
-                        children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-refresh", fontSize: showCoordinates ? "small" : "medium" })
+                        size: w ? "small" : "medium",
+                        onClick: () => W(),
+                        disabled: s.k === P.k && s.x === 0 && s.y === 0,
+                        children: /* @__PURE__ */ i(ae, { icon: "ic:baseline-refresh", fontSize: w ? "small" : "medium" })
                       }
                     )
                   ] })
                 }
               ),
-              showMousePos && /* @__PURE__ */ jsx(
-                Card,
+              F && /* @__PURE__ */ i(
+                T,
                 {
                   variant: "elevation",
                   elevation: 4,
                   sx: {
                     position: "absolute",
-                    bottom: theme.spacing(0.5),
-                    left: theme.spacing(0.5),
+                    bottom: o.spacing(0.5),
+                    left: o.spacing(0.5),
                     px: 1,
                     py: 0.5
                   },
-                  children: /* @__PURE__ */ jsx("code", { children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
-                    /* @__PURE__ */ jsxs("span", { children: [
+                  children: /* @__PURE__ */ i("code", { children: /* @__PURE__ */ l(x, { direction: "row", spacing: 1, children: [
+                    /* @__PURE__ */ l("span", { children: [
                       "(",
                       "abs: ",
-                      absoluteMousePos.join(", "),
+                      me.join(", "),
                       ")"
                     ] }),
-                    /* @__PURE__ */ jsxs("span", { children: [
+                    /* @__PURE__ */ l("span", { children: [
                       "(",
                       "rel: ",
-                      relativeMousePos.join(", "),
+                      ce.join(", "),
                       ")"
                     ] })
                   ] }) })
@@ -409,21 +351,21 @@ const Graph = ({ graph, sx = {} }) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(
-          Collapse,
+        /* @__PURE__ */ i(
+          Pe,
           {
-            in: showPanel && selectedNodeIds.length > 0,
-            orientation: panelLocation === "vertical" ? "horizontal" : "vertical",
-            appear: true,
-            unmountOnExit: true,
-            children: /* @__PURE__ */ jsx(
-              Stack,
+            in: I && h.length > 0,
+            orientation: E === "vertical" ? "horizontal" : "vertical",
+            appear: !0,
+            unmountOnExit: !0,
+            children: /* @__PURE__ */ i(
+              x,
               {
                 direction: "column",
                 spacing: 1,
-                sx: panelLocation === "vertical" ? { width: "450px", height: "100%" } : { width: "100%", height: "300px" },
+                sx: E === "vertical" ? { width: "450px", height: "100%" } : { width: "100%", height: "300px" },
                 pb: 1,
-                children: /* @__PURE__ */ jsx(NodePanel, { selectedNodeIds, findNode })
+                children: /* @__PURE__ */ i(He, { selectedNodeIds: h, findNode: be })
               }
             )
           }
@@ -433,5 +375,5 @@ const Graph = ({ graph, sx = {} }) => {
   );
 };
 export {
-  Graph as default
+  rt as default
 };