@cccsaurora/clue-ui 1.0.2 → 1.1.0-dev.10

package/components/display/graph/index.js

@@ -1,194 +1,252 @@
-import { jsx as i, jsxs as l, Fragment as ye } from "react/jsx-runtime";
-import { useMemo as m, useRef as ee, useState as u, useEffect as z, useCallback as f, createElement as ke } from "react";
-import { useTheme as we, lighten as te, darken as oe, Stack as x, Card as R, Typography as Ce, alpha as ne, Autocomplete as ze, TextField as he, FormControl as Se, InputLabel as Ee, Select as Ie, MenuItem as Ne, IconButton as Oe, Collapse as Me } from "@mui/material";
-import { p as Pe } from "../../../index-CnaCBNrd.js";
-import { z as Fe, i as M, s as p, t as Re, p as ie } from "../../../index-p5_wX7q1.js";
-import Te from "../../../hooks/useComparator.js";
-import { useMyLocalStorageItem as T } from "../../../hooks/useMyLocalStorage.js";
-import { StorageKey as L } from "../../../utils/constants.js";
-import { g as Le } from "../../../get-Bow1vKwx.js";
-import { cssImportant as k } from "../../../utils/graph.js";
-import ae from "../icons/Iconified.js";
-import Ae from "./ExpandMoreButton.js";
-import Be from "./visualizations/cloud/index.js";
-import $e from "./visualizations/panels/NodePanel.js";
-import je from "./visualizations/tree/index.js";
-const et = ({ graph: t, sx: re = {} }) => {
-  var X, Z, U, Y, q;
-  const o = we(), h = m(() => o.palette.mode === "dark", [o]), { runComparator: A } = Te(), r = ee(), se = ee(), [P] = T(L.SHOW_MOUSE_POS, !1), [w] = T(L.SHOW_COORDINATES, !1), [S] = T(L.PANEL_LOCATION, "vertical"), [le, ce] = u(["0", "0"]), [de, me] = u(["0", "0"]), [E, B] = u(!1), $ = m(() => ((t == null ? void 0 : t.data) ?? []).flat(2).map((e) => e.id), [t == null ? void 0 : t.data]), v = m(() => Fe().scaleExtent([0.1, 6]), []), [s, I] = u(M), [N, ue] = u(""), [C, j] = u([]), [O, H] = u(
-    ((Z = (X = t == null ? void 0 : t.metadata.display) == null ? void 0 : X.visualization) == null ? void 0 : Z.type) ?? "tree"
-  ), [pe, F] = u(!1);
-  z(() => {
-    B(C.length > 0);
-  }, [C]);
-  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, alpha, Autocomplete, TextField, FormControl, InputLabel, Select, MenuItem, IconButton, Collapse } from "@mui/material";
+import { p as parseEvent } from "../../../index-BMxyILVD.js";
+import { z as zoom, i as identity, s as select, t as transform, p as pointer } from "../../../index-BbPn6-Mw.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-D3C3lEU3.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 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((a) => (a.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);
     },
-    [(U = t == null ? void 0 : t.metadata.display) == null ? void 0 : U.displayField, s.k]
-  ), fe = f((e) => {
-    ue(e);
-  }, []), V = f((e) => {
-    const n = e === "view" ? e : `node-${e ?? "will\\%never\\$ever\\*exist"}`;
-    return p(`#${n}`);
-  }, []), _ = f(() => {
-    if (!N) {
-      F(!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 = V(N.replace(/[^A-Za-z0-9]*/g, ""));
-    if (e.empty()) {
-      F(!0);
+    const nodeToGet = checkForNode(nodeId.replace(/[^A-Za-z0-9]*/g, ""));
+    if (nodeToGet.empty()) {
+      setHasError(true);
       return;
     }
-    F(!1), j([N]);
-    const n = r.current.getBoundingClientRect(), a = p(r.current), d = e.node().getBBox();
-    a.transition().duration(500).call(
-      v.transform,
-      M.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)
     );
-  }, [V, N, v.transform]), xe = f(
-    (e) => {
-      const n = Pe(e);
-      n.isCtrl && n.isEnter && _();
+  }, [checkForNode, nodeId, zoom$1.transform]);
+  const onKeyPress = useCallback(
+    (event) => {
+      const parsedEvent = parseEvent(event);
+      if (parsedEvent.isCtrl && parsedEvent.isEnter) {
+        selectNode();
+      }
     },
-    [_]
-  ), ve = f((e) => ((t == null ? void 0 : t.data) ?? []).flat().find((n) => n.id === e), [t == null ? void 0 : t.data]), g = 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(r.current).select("#view").node().getBBox(), a = r.current.getBoundingClientRect(), d = Math.min(a.width / (n.width + 25), (a.height - 96) / n.height);
-      let y = p(r.current);
-      e || (y = y.transition().duration(500)), y.call(
-        v.transform,
-        M.translate(a.width / 2, (a.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 && (se.current = r.current.createSVGPoint(), p(r.current).call(
-      v.on("zoom", (e) => {
-        I == null || I(e.transform), p(r.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);
       })
-    ));
-  }, [I, v, O, t]), z(() => {
-    P && p(r.current).on("mousemove", (e) => {
-      const n = Re(p(r.current).select("#view").node());
-      me(n.invert(ie(e)).map((a) => a.toFixed(0))), ce(ie(e).map((a) => a.toFixed(0)));
-    });
-  }, [P, t]), z(() => {
-    g();
-  }, [O, t == null ? void 0 : t.data]), z(() => {
-    var e, n, a, d;
-    (n = (e = t == null ? void 0 : t.metadata.display) == null ? void 0 : e.visualization) != null && n.type && H((d = (a = t == null ? void 0 : t.metadata.display) == null ? void 0 : a.visualization) == null ? void 0 : d.type);
-  }, [(q = (Y = t == null ? void 0 : t.metadata.display) == null ? void 0 : Y.visualization) == null ? void 0 : q.type]);
-  const G = 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: (h ? te : oe)(o.palette.background.paper, 0.3),
+        border: (isDark ? lighten : darken)(theme.palette.background.paper, 0.3),
         center: "white"
       }
     }),
-    [h, o.palette.background.paper, o.palette.text.primary]
-  ), W = 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: (h ? te : oe)(o.palette.background.paper, 0.3),
+        border: (isDark ? lighten : darken)(theme.palette.background.paper, 0.3),
         center: "white"
       }
     }),
-    [h, o.palette.background.paper, o.palette.text.primary]
-  ), K = m(
+    [isDark, theme.palette.background.paper, theme.palette.text.primary]
+  );
+  const visualizations = useMemo(
     () => ({
-      tree: () => /* @__PURE__ */ i(
-        je,
+      tree: () => /* @__PURE__ */ jsx(
+        Tree,
         {
-          svgRef: r,
-          graph: t,
-          labelKeys: b,
-          onNodeSelectionChanged: D,
-          zoom: s,
-          options: G
+          svgRef,
+          graph,
+          labelKeys,
+          onNodeSelectionChanged,
+          zoom: currentZoom,
+          options: treeOptions
         }
       ),
-      cloud: () => /* @__PURE__ */ i(Be, { svgRef: r, graph: t, options: W })
+      cloud: () => /* @__PURE__ */ jsx(Cloud, { svgRef, graph, options: cloudOptions })
     }),
-    [W, s, t, b, D, G]
-  ), be = m(() => $.flatMap((e) => {
-    var y, J;
-    const n = (((y = t == null ? void 0 : t.data) == null ? void 0 : y.flat()) ?? []).find((c) => c.id === e);
-    return n ? (((J = b == null ? void 0 : b.filter((c) => A(c, n)).pop()) == null ? void 0 : J.label) ?? "id").split(",").map((c) => {
-      var Q;
-      return (Q = Le(n, c)) == null ? void 0 : Q.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: S === "vertical" ? "row" : "column",
+      direction: panelLocation === "vertical" ? "row" : "column",
       spacing: 1,
       overflow: "hidden",
       height: "100%",
       width: "100%",
-      sx: re,
+      sx,
       children: [
-        /* @__PURE__ */ i(x, { direction: "column", spacing: 1, sx: { position: "relative", flex: 1 }, children: /* @__PURE__ */ l(
-          R,
+        /* @__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 ? K[O]() : /* @__PURE__ */ l(ye, { children: [
-                /* @__PURE__ */ i("svg", { id: "viz", ref: r, children: /* @__PURE__ */ i("g", { id: "view" }) }),
-                /* @__PURE__ */ i(
-                  Ce,
+              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",
@@ -203,19 +261,19 @@ const et = ({ graph: t, sx: re = {} }) => {
                   }
                 )
               ] }),
-              /* @__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,
@@ -223,62 +281,62 @@ const et = ({ graph: t, sx: re = {} }) => {
                         "& > div:first-of-type": {
                           flex: 1,
                           maxWidth: "775px",
-                          backgroundColor: ne(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) => fe(n.id),
-                            onKeyDown: xe,
-                            options: be,
+                            disablePortal: true,
+                            onChange: (__, value) => onNodeChange(value.id),
+                            onKeyDown: onKeyPress,
+                            options: suggestions,
                             sx: { width: "400px" },
-                            getOptionLabel: (e) => e.value,
-                            filterOptions: (e, n) => e.filter((a) => a.value.toLowerCase().includes(n.inputValue)),
-                            renderOption: (e, n) => /* @__PURE__ */ ke("li", { ...e, key: n.id + n.value }, n.value),
-                            renderInput: (e) => /* @__PURE__ */ i(
-                              he,
+                            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,
                               {
-                                ...e,
-                                error: pe,
+                                ...params,
+                                error: hasError,
                                 label: "Enter a node ID, and press [ctrl + enter] to select it. [ctrl + space] will open an autocomplete menu."
                               }
                             )
                           }
                         ),
-                        /* @__PURE__ */ l(Se, { sx: { minWidth: "150px", backgroundColor: ne(o.palette.background.paper, 0.8) }, children: [
-                          /* @__PURE__ */ i(Ee, { id: "viz-label", children: "Visualization" }),
-                          /* @__PURE__ */ i(
-                            Ie,
+                        /* @__PURE__ */ jsxs(FormControl, { sx: { minWidth: "150px", backgroundColor: alpha(theme.palette.background.paper, 0.8) }, children: [
+                          /* @__PURE__ */ jsx(InputLabel, { id: "viz-label", children: "Visualization" }),
+                          /* @__PURE__ */ jsx(
+                            Select,
                             {
                               label: "Visualization",
                               labelId: "viz-label",
-                              value: O,
-                              onChange: (e) => H(e.target.value),
+                              value: viz,
+                              onChange: (event) => setViz(event.target.value),
                               sx: { textTransform: "capitalize" },
-                              children: Object.keys(K).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(
-                          Ae,
+                        /* @__PURE__ */ jsx(
+                          ExpandMoreButton,
                           {
-                            disabled: C.length < 1,
-                            expand: E,
-                            onClick: () => B(!E),
-                            "aria-expanded": E,
+                            disabled: selectedNodeIds.length < 1,
+                            expand: showPanel,
+                            onClick: () => setShowPanel(!showPanel),
+                            "aria-expanded": showPanel,
                             "aria-label": "show more",
                             size: "small",
                             sx: {
                               marginLeft: "auto !important",
                               alignSelf: "center"
                             },
-                            children: /* @__PURE__ */ i(
-                              ae,
+                            children: /* @__PURE__ */ jsx(
+                              Iconified,
                               {
-                                icon: S === "vertical" ? "ic:baseline-chevron-left" : "ic:baseline-expand-more",
+                                icon: panelLocation === "vertical" ? "ic:baseline-chevron-left" : "ic:baseline-expand-more",
                                 fontSize: "medium"
                               }
                             )
@@ -289,61 +347,61 @@ const et = ({ graph: t, sx: re = {} }) => {
                   )
                 }
               ),
-              /* @__PURE__ */ i(
-                R,
+              /* @__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(
-                      Oe,
+                    /* @__PURE__ */ jsx(
+                      IconButton,
                       {
-                        size: w ? "small" : "medium",
-                        onClick: () => g(),
-                        disabled: s.k === M.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" })
                       }
                     )
                   ] })
                 }
               ),
-              P && /* @__PURE__ */ i(
-                R,
+              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: ",
-                      de.join(", "),
+                      absoluteMousePos.join(", "),
                       ")"
                     ] }),
-                    /* @__PURE__ */ l("span", { children: [
+                    /* @__PURE__ */ jsxs("span", { children: [
                       "(rel: ",
-                      le.join(", "),
+                      relativeMousePos.join(", "),
                       ")"
                     ] })
                   ] }) })
@@ -352,21 +410,21 @@ const et = ({ graph: t, sx: re = {} }) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ i(
-          Me,
+        /* @__PURE__ */ jsx(
+          Collapse,
           {
-            in: E && C.length > 0,
-            orientation: S === "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: S === "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($e, { selectedNodeIds: C, findNode: ve })
+                children: /* @__PURE__ */ jsx(NodePanel, { selectedNodeIds, findNode })
               }
             )
           }
@@ -376,5 +434,5 @@ const et = ({ graph: t, sx: re = {} }) => {
   );
 };
 export {
-  et as default
+  Graph as default
 };