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

package/components/display/graph/index.js

@@ -1,196 +1,255 @@
-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-BK-zfYhR.js";
-import { z as Re, i as P, s as p, t as Te, p as re } from "../../../index-p5_wX7q1.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-CH7kz5Ix.js";
-import { u as Be } from "../../../index-Dj5C04IX.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 Z, U, Y, 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(
-    ((U = (Z = t == null ? void 0 : t.metadata.display) == null ? void 0 : Z.visualization) == null ? void 0 : U.type) ?? "tree"
-  ), [fe, R] = u(!1);
-  z(() => {
-    B(h.length > 0);
-  }, [h]);
-  const b = m(
+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-JcKyZeoY.js";
+import { z as zoom, i as identity, s as select, t as transform, p as pointer } from "../../../index-DCKkHTvx.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-DSsNkRQs.js";
+import { u as useContextSelector } from "../../../index-AMfoEg_6.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(
     () => {
-      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);
+      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);
     },
-    [(Y = t == null ? void 0 : t.metadata.display) == null ? void 0 : Y.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);
+    [(_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);
       return;
     }
-    const e = _(N.replace(/[^A-Za-z0-9]*/g, ""));
-    if (e.empty()) {
-      R(!0);
+    const nodeToGet = checkForNode(nodeId.replace(/[^A-Za-z0-9]*/g, ""));
+    if (nodeToGet.empty()) {
+      setHasError(true);
       return;
     }
-    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)
+    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)
     );
-  }, [_, N, v.transform]), ve = f(
-    (e) => {
-      const n = Fe(e);
-      n.isCtrl && n.isEnter && G();
+  }, [checkForNode, nodeId, zoom$1.transform]);
+  const onKeyPress = useCallback(
+    (event) => {
+      const parsedEvent = parseEvent(event);
+      if (parsedEvent.isCtrl && parsedEvent.isEnter) {
+        selectNode();
+      }
     },
-    [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)
+    [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) {
         return;
-      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)
+      }
+      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)
       );
     },
-    [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);
+    [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);
       })
-    ));
-  }, [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(
+    );
+  }, [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(
     () => ({
-      textColor: o.palette.text.primary,
-      backgroundColor: o.palette.background.paper,
+      textColor: theme.palette.text.primary,
+      backgroundColor: theme.palette.background.paper,
       nodeColor: {
-        border: (S ? oe : ne)(o.palette.background.paper, 0.3),
+        border: (isDark ? lighten : darken)(theme.palette.background.paper, 0.3),
         center: "white"
       }
     }),
-    [S, o.palette.background.paper, o.palette.text.primary]
-  ), K = m(
+    [isDark, theme.palette.background.paper, theme.palette.text.primary]
+  );
+  const cloudOptions = useMemo(
     () => ({
-      textColor: o.palette.text.primary,
-      backgroundColor: o.palette.background.paper,
+      textColor: theme.palette.text.primary,
+      backgroundColor: theme.palette.background.paper,
       nodeColor: {
-        border: (S ? oe : ne)(o.palette.background.paper, 0.3),
+        border: (isDark ? lighten : darken)(theme.palette.background.paper, 0.3),
         center: "white"
       }
     }),
-    [S, o.palette.background.paper, o.palette.text.primary]
-  ), X = m(
+    [isDark, theme.palette.background.paper, theme.palette.text.primary]
+  );
+  const visualizations = useMemo(
     () => ({
-      tree: () => /* @__PURE__ */ i(
-        _e,
+      tree: () => /* @__PURE__ */ jsx(
+        Tree,
         {
-          svgRef: a,
-          graph: t,
-          labelKeys: b,
-          onNodeSelectionChanged: D,
-          zoom: s,
-          options: V
+          svgRef,
+          graph,
+          labelKeys,
+          onNodeSelectionChanged,
+          zoom: currentZoom,
+          options: treeOptions
         }
       ),
-      cloud: () => /* @__PURE__ */ i(je, { svgRef: a, graph: t, options: K })
+      cloud: () => /* @__PURE__ */ jsx(Cloud, { svgRef, graph, options: cloudOptions })
     }),
-    [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,
+    [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,
     {
-      direction: E === "vertical" ? "row" : "column",
+      direction: panelLocation === "vertical" ? "row" : "column",
       spacing: 1,
       overflow: "hidden",
       height: "100%",
       width: "100%",
-      sx: se,
+      sx,
       children: [
-        /* @__PURE__ */ i(x, { direction: "column", spacing: 1, sx: { position: "relative", flex: 1 }, children: /* @__PURE__ */ l(
-          T,
+        /* @__PURE__ */ jsx(Stack, { direction: "column", spacing: 1, sx: { position: "relative", flex: 1 }, children: /* @__PURE__ */ jsxs(
+          Card,
           {
             variant: "outlined",
             sx: {
               flex: 1,
               position: "relative",
-              maxHeight: `calc(100vh - 64px - ${o.spacing(1)})`,
+              maxHeight: `calc(100vh - 64px - ${theme.spacing(1)})`,
               "& #viz": {
-                maxHeight: `calc(100vh - 64px - ${o.spacing(1)})`,
+                maxHeight: `calc(100vh - 64px - ${theme.spacing(1)})`,
                 width: "100%",
                 height: "100%",
-                backgroundColor: o.palette.background.paper
+                backgroundColor: theme.palette.background.paper
               },
               "& .path": {
-                transition: o.transitions.create(["opacity"], {
-                  duration: o.transitions.duration.short
+                transition: theme.transitions.create(["opacity"], {
+                  duration: theme.transitions.duration.short
                 })
               },
               "& .node": {
                 cursor: "pointer",
                 "& > path, & > text, & > polygon, & circle": {
-                  transition: o.transitions.create(["stroke", "fill", "fill-opacity", "stroke-opacity"], {
-                    duration: o.transitions.duration.short
+                  transition: theme.transitions.create(["stroke", "fill", "fill-opacity", "stroke-opacity"], {
+                    duration: theme.transitions.duration.short
                   })
                 },
                 "&.hover > .center": {
-                  stroke: k(o.palette.primary.main)
+                  stroke: cssImportant(theme.palette.primary.main)
                 },
                 "&.hover > .border": {
-                  stroke: k(o.palette.primary.dark)
+                  stroke: cssImportant(theme.palette.primary.dark)
                 },
                 "&.selected > .center": {
-                  stroke: k(o.palette.success.main)
+                  stroke: cssImportant(theme.palette.success.main)
                 },
                 "&.selected > .border": {
-                  stroke: k(o.palette.success.dark)
+                  stroke: cssImportant(theme.palette.success.dark)
                 },
                 "&.selected.hover > .center": {
-                  stroke: k(o.palette.primary.main)
+                  stroke: cssImportant(theme.palette.primary.main)
                 },
                 "&.selected.hover > .border": {
-                  stroke: k(o.palette.primary.dark)
+                  stroke: cssImportant(theme.palette.primary.dark)
                 }
               }
             },
             children: [
-              t ? X[M]() : /* @__PURE__ */ l(ke, { children: [
-                /* @__PURE__ */ i("svg", { id: "viz", ref: a, children: /* @__PURE__ */ i("g", { id: "view" }) }),
-                /* @__PURE__ */ i(
-                  he,
+              graph ? visualizations[viz]() : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("svg", { id: "viz", ref: svgRef, children: /* @__PURE__ */ jsx("g", { id: "view" }) }),
+                /* @__PURE__ */ jsx(
+                  Typography,
                   {
                     variant: "h1",
                     color: "text.secondary",
@@ -201,23 +260,23 @@ const rt = ({ graph: t, sx: se = {} }) => {
                       opacity: 0.3,
                       transform: "translateX(-50%) translateY(-50%)"
                     },
-                    children: C("graph.no.dataset")
+                    children: t("graph.no.dataset")
                   }
                 )
               ] }),
-              /* @__PURE__ */ i(
-                x,
+              /* @__PURE__ */ jsx(
+                Stack,
                 {
                   direction: "column",
                   spacing: 1,
                   sx: {
                     position: "absolute",
-                    top: o.spacing(1),
-                    left: o.spacing(1),
-                    right: o.spacing(1)
+                    top: theme.spacing(1),
+                    left: theme.spacing(1),
+                    right: theme.spacing(1)
                   },
-                  children: /* @__PURE__ */ l(
-                    x,
+                  children: /* @__PURE__ */ jsxs(
+                    Stack,
                     {
                       direction: "row",
                       spacing: 1,
@@ -225,55 +284,55 @@ const rt = ({ graph: t, sx: se = {} }) => {
                         "& > div:first-of-type": {
                           flex: 1,
                           maxWidth: "775px",
-                          backgroundColor: ie(o.palette.background.paper, 0.8)
+                          backgroundColor: alpha(theme.palette.background.paper, 0.8)
                         }
                       },
                       children: [
-                        /* @__PURE__ */ i(
-                          ze,
+                        /* @__PURE__ */ jsx(
+                          Autocomplete,
                           {
-                            disablePortal: !0,
-                            onChange: (e, n) => xe(n.id),
-                            onKeyDown: ve,
-                            options: ye,
+                            disablePortal: true,
+                            onChange: (__, value) => onNodeChange(value.id),
+                            onKeyDown: onKeyPress,
+                            options: suggestions,
                             sx: { width: "400px" },
-                            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") })
+                            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") })
                           }
                         ),
-                        /* @__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,
+                        /* @__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,
                             {
-                              label: C("graph.visualization"),
+                              label: t("graph.visualization"),
                               labelId: "viz-label",
-                              value: M,
-                              onChange: (e) => H(e.target.value),
+                              value: viz,
+                              onChange: (event) => setViz(event.target.value),
                               sx: { textTransform: "capitalize" },
-                              children: Object.keys(X).map((e) => /* @__PURE__ */ i(Ne, { value: e, sx: { textTransform: "capitalize" }, children: e }, e))
+                              children: Object.keys(visualizations).map((_viz) => /* @__PURE__ */ jsx(MenuItem, { value: _viz, sx: { textTransform: "capitalize" }, children: _viz }, _viz))
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ i(
-                          $e,
+                        /* @__PURE__ */ jsx(
+                          ExpandMoreButton,
                           {
-                            disabled: h.length < 1,
-                            expand: I,
-                            onClick: () => B(!I),
-                            "aria-expanded": I,
-                            "aria-label": C("graph.show.more"),
+                            disabled: selectedNodeIds.length < 1,
+                            expand: showPanel,
+                            onClick: () => setShowPanel(!showPanel),
+                            "aria-expanded": showPanel,
+                            "aria-label": t("graph.show.more"),
                             size: "small",
                             sx: {
                               marginLeft: "auto !important",
                               alignSelf: "center"
                             },
-                            children: /* @__PURE__ */ i(
-                              ae,
+                            children: /* @__PURE__ */ jsx(
+                              Iconified,
                               {
-                                icon: E === "vertical" ? "ic:baseline-chevron-left" : "ic:baseline-expand-more",
+                                icon: panelLocation === "vertical" ? "ic:baseline-chevron-left" : "ic:baseline-expand-more",
                                 fontSize: "medium"
                               }
                             )
@@ -284,64 +343,64 @@ const rt = ({ graph: t, sx: se = {} }) => {
                   )
                 }
               ),
-              /* @__PURE__ */ i(
-                T,
+              /* @__PURE__ */ jsx(
+                Card,
                 {
-                  variant: w ? "elevation" : "outlined",
-                  elevation: w ? 4 : 0,
+                  variant: showCoordinates ? "elevation" : "outlined",
+                  elevation: showCoordinates ? 4 : 0,
                   sx: {
                     position: "absolute",
-                    bottom: o.spacing(0.5),
-                    right: o.spacing(0.5),
+                    bottom: theme.spacing(0.5),
+                    right: theme.spacing(0.5),
                     px: 1,
                     py: 0.5,
                     border: "none !important"
                   },
-                  children: /* @__PURE__ */ l(x, { direction: "row", spacing: 0.5, alignItems: "center", children: [
-                    w && /* @__PURE__ */ l("span", { children: [
-                      s.x.toFixed(0),
+                  children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+                    showCoordinates && /* @__PURE__ */ jsxs("span", { children: [
+                      currentZoom.x.toFixed(0),
                       ", ",
-                      s.y.toFixed(0),
+                      currentZoom.y.toFixed(0),
                       " (",
-                      s.k.toFixed(2),
+                      currentZoom.k.toFixed(2),
                       "x",
                       ")"
                     ] }),
-                    /* @__PURE__ */ i(
-                      Me,
+                    /* @__PURE__ */ jsx(
+                      IconButton,
                       {
-                        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" })
+                        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" })
                       }
                     )
                   ] })
                 }
               ),
-              F && /* @__PURE__ */ i(
-                T,
+              showMousePos && /* @__PURE__ */ jsx(
+                Card,
                 {
                   variant: "elevation",
                   elevation: 4,
                   sx: {
                     position: "absolute",
-                    bottom: o.spacing(0.5),
-                    left: o.spacing(0.5),
+                    bottom: theme.spacing(0.5),
+                    left: theme.spacing(0.5),
                     px: 1,
                     py: 0.5
                   },
-                  children: /* @__PURE__ */ i("code", { children: /* @__PURE__ */ l(x, { direction: "row", spacing: 1, children: [
-                    /* @__PURE__ */ l("span", { children: [
+                  children: /* @__PURE__ */ jsx("code", { children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+                    /* @__PURE__ */ jsxs("span", { children: [
                       "(",
                       "abs: ",
-                      me.join(", "),
+                      absoluteMousePos.join(", "),
                       ")"
                     ] }),
-                    /* @__PURE__ */ l("span", { children: [
+                    /* @__PURE__ */ jsxs("span", { children: [
                       "(",
                       "rel: ",
-                      ce.join(", "),
+                      relativeMousePos.join(", "),
                       ")"
                     ] })
                   ] }) })
@@ -350,21 +409,21 @@ const rt = ({ graph: t, sx: se = {} }) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ i(
-          Pe,
+        /* @__PURE__ */ jsx(
+          Collapse,
           {
-            in: I && h.length > 0,
-            orientation: E === "vertical" ? "horizontal" : "vertical",
-            appear: !0,
-            unmountOnExit: !0,
-            children: /* @__PURE__ */ i(
-              x,
+            in: showPanel && selectedNodeIds.length > 0,
+            orientation: panelLocation === "vertical" ? "horizontal" : "vertical",
+            appear: true,
+            unmountOnExit: true,
+            children: /* @__PURE__ */ jsx(
+              Stack,
               {
                 direction: "column",
                 spacing: 1,
-                sx: E === "vertical" ? { width: "450px", height: "100%" } : { width: "100%", height: "300px" },
+                sx: panelLocation === "vertical" ? { width: "450px", height: "100%" } : { width: "100%", height: "300px" },
                 pb: 1,
-                children: /* @__PURE__ */ i(He, { selectedNodeIds: h, findNode: be })
+                children: /* @__PURE__ */ jsx(NodePanel, { selectedNodeIds, findNode })
               }
             )
           }
@@ -374,5 +433,5 @@ const rt = ({ graph: t, sx: se = {} }) => {
   );
 };
 export {
-  rt as default
+  Graph as default
 };