@cccsaurora/clue-ui 1.0.0-dev.49 → 1.0.0

package/components/display/graph/index.js

@@ -1,252 +1,194 @@
-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-BDrtH5ec.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(
+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-4YFAh_sa.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(
     () => {
-      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((a) => (a.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]
+  ), 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);
       return;
     }
-    const nodeToGet = checkForNode(nodeId.replace(/[^A-Za-z0-9]*/g, ""));
-    if (nodeToGet.empty()) {
-      setHasError(true);
+    const e = V(N.replace(/[^A-Za-z0-9]*/g, ""));
+    if (e.empty()) {
+      F(!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)
+    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)
     );
-  }, [checkForNode, nodeId, zoom$1.transform]);
-  const onKeyPress = useCallback(
-    (event) => {
-      const parsedEvent = parseEvent(event);
-      if (parsedEvent.isCtrl && parsedEvent.isEnter) {
-        selectNode();
-      }
+  }, [V, N, v.transform]), xe = f(
+    (e) => {
+      const n = Pe(e);
+      n.isCtrl && n.isEnter && _();
     },
-    [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) {
+    [_]
+  ), 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)
         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(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)
       );
     },
-    [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 && (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);
       })
-    );
-  }, [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(
+    ));
+  }, [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(
     () => ({
-      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: (h ? te : oe)(o.palette.background.paper, 0.3),
         center: "white"
       }
     }),
-    [isDark, theme.palette.background.paper, theme.palette.text.primary]
-  );
-  const cloudOptions = useMemo(
+    [h, o.palette.background.paper, o.palette.text.primary]
+  ), W = 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: (h ? te : oe)(o.palette.background.paper, 0.3),
         center: "white"
       }
     }),
-    [isDark, theme.palette.background.paper, theme.palette.text.primary]
-  );
-  const visualizations = useMemo(
+    [h, o.palette.background.paper, o.palette.text.primary]
+  ), K = m(
     () => ({
-      tree: () => /* @__PURE__ */ jsx(
-        Tree,
+      tree: () => /* @__PURE__ */ i(
+        je,
         {
-          svgRef,
-          graph,
-          labelKeys,
-          onNodeSelectionChanged,
-          zoom: currentZoom,
-          options: treeOptions
+          svgRef: r,
+          graph: t,
+          labelKeys: b,
+          onNodeSelectionChanged: D,
+          zoom: s,
+          options: G
         }
       ),
-      cloud: () => /* @__PURE__ */ jsx(Cloud, { svgRef, graph, options: cloudOptions })
+      cloud: () => /* @__PURE__ */ i(Be, { svgRef: r, graph: t, options: W })
     }),
-    [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,
+    [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,
     {
-      direction: panelLocation === "vertical" ? "row" : "column",
+      direction: S === "vertical" ? "row" : "column",
       spacing: 1,
       overflow: "hidden",
       height: "100%",
       width: "100%",
-      sx,
+      sx: re,
       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(
+          R,
           {
             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
                 })
               },
               "& .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 ? K[O]() : /* @__PURE__ */ l(ye, { children: [
+                /* @__PURE__ */ i("svg", { id: "viz", ref: r, children: /* @__PURE__ */ i("g", { id: "view" }) }),
+                /* @__PURE__ */ i(
+                  Ce,
                   {
                     variant: "h1",
                     color: "text.secondary",
@@ -261,19 +203,19 @@ const Graph = ({ graph, sx = {} }) => {
                   }
                 )
               ] }),
-              /* @__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,
@@ -281,62 +223,62 @@ const Graph = ({ graph, sx = {} }) => {
                         "& > div:first-of-type": {
                           flex: 1,
                           maxWidth: "775px",
-                          backgroundColor: alpha(theme.palette.background.paper, 0.8)
+                          backgroundColor: ne(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) => fe(n.id),
+                            onKeyDown: xe,
+                            options: be,
                             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,
+                            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,
                               {
-                                ...params,
-                                error: hasError,
+                                ...e,
+                                error: pe,
                                 label: "Enter a node ID, and press [ctrl + enter] to select it. [ctrl + space] will open an autocomplete menu."
                               }
                             )
                           }
                         ),
-                        /* @__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,
+                        /* @__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,
                             {
                               label: "Visualization",
                               labelId: "viz-label",
-                              value: viz,
-                              onChange: (event) => setViz(event.target.value),
+                              value: O,
+                              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(K).map((e) => /* @__PURE__ */ i(Ne, { value: e, sx: { textTransform: "capitalize" }, children: e }, e))
                             }
                           )
                         ] }),
-                        /* @__PURE__ */ jsx(
-                          ExpandMoreButton,
+                        /* @__PURE__ */ i(
+                          Ae,
                           {
-                            disabled: selectedNodeIds.length < 1,
-                            expand: showPanel,
-                            onClick: () => setShowPanel(!showPanel),
-                            "aria-expanded": showPanel,
+                            disabled: C.length < 1,
+                            expand: E,
+                            onClick: () => B(!E),
+                            "aria-expanded": E,
                             "aria-label": "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: S === "vertical" ? "ic:baseline-chevron-left" : "ic:baseline-expand-more",
                                 fontSize: "medium"
                               }
                             )
@@ -347,61 +289,61 @@ const Graph = ({ graph, sx = {} }) => {
                   )
                 }
               ),
-              /* @__PURE__ */ jsx(
-                Card,
+              /* @__PURE__ */ i(
+                R,
                 {
-                  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(
+                      Oe,
                       {
-                        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: () => g(),
+                        disabled: s.k === M.k && s.x === 0 && s.y === 0,
+                        children: /* @__PURE__ */ i(ae, { icon: "ic:baseline-refresh", fontSize: w ? "small" : "medium" })
                       }
                     )
                   ] })
                 }
               ),
-              showMousePos && /* @__PURE__ */ jsx(
-                Card,
+              P && /* @__PURE__ */ i(
+                R,
                 {
                   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(", "),
+                      de.join(", "),
                       ")"
                     ] }),
-                    /* @__PURE__ */ jsxs("span", { children: [
+                    /* @__PURE__ */ l("span", { children: [
                       "(rel: ",
-                      relativeMousePos.join(", "),
+                      le.join(", "),
                       ")"
                     ] })
                   ] }) })
@@ -410,21 +352,21 @@ const Graph = ({ graph, sx = {} }) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(
-          Collapse,
+        /* @__PURE__ */ i(
+          Me,
           {
-            in: showPanel && selectedNodeIds.length > 0,
-            orientation: panelLocation === "vertical" ? "horizontal" : "vertical",
-            appear: true,
-            unmountOnExit: true,
-            children: /* @__PURE__ */ jsx(
-              Stack,
+            in: E && C.length > 0,
+            orientation: S === "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: S === "vertical" ? { width: "450px", height: "100%" } : { width: "100%", height: "300px" },
                 pb: 1,
-                children: /* @__PURE__ */ jsx(NodePanel, { selectedNodeIds, findNode })
+                children: /* @__PURE__ */ i($e, { selectedNodeIds: C, findNode: ve })
               }
             )
           }
@@ -434,5 +376,5 @@ const Graph = ({ graph, sx = {} }) => {
   );
 };
 export {
-  Graph as default
+  et as default
 };