@cccsaurora/clue-ui 0.15.0-dev.31 → 0.15.0

package/components/display/graph/elements/NodeCard.js

@@ -1,146 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Stack, Typography, Card, CardContent, Divider, Collapse } from "@mui/material";
-import { a as isPlainObject, f as flatten$1 } from "../../../../utils-CxIhC2xH.js";
-import { cssImportant } from "../../../../utils/graph.js";
-import { b as baseGet, c as castPath, t as toKey, a as arrayMap } from "../../../../_baseGet-BSK_nnoz.js";
-import { c as copyObject, g as getAllKeysIn, b as baseClone } from "../../../../_baseClone-D3a8Pa4T.js";
-import { l as last } from "../../../../last-CUCl67Im.js";
-import { b as baseSlice } from "../../../../_baseSlice-GAv_YFTT.js";
-import { b as baseFlatten, s as setToString, o as overRest } from "../../../../_baseFlatten-D4huXoEI.js";
-import { useState, useEffect, useCallback, Fragment as Fragment$1 } from "react";
-import Iconified from "../../icons/Iconified.js";
-import { J as JSONViewer } from "../../../../index-BDrtH5ec.js";
-import Markdown from "../../markdown/index.js";
-import ExpandMoreButton from "../ExpandMoreButton.js";
-import NodeTag from "./NodeTag.js";
-function flatten(array) {
-  var length = array == null ? 0 : array.length;
-  return length ? baseFlatten(array) : [];
-}
-function flatRest(func) {
-  return setToString(overRest(func, void 0, flatten), func + "");
-}
-function parent(object, path) {
-  return path.length < 2 ? object : baseGet(object, baseSlice(path, 0, -1));
-}
-function baseUnset(object, path) {
-  path = castPath(path, object);
-  object = parent(object, path);
-  return object == null || delete object[toKey(last(path))];
-}
-function customOmitClone(value) {
-  return isPlainObject(value) ? void 0 : value;
-}
-var CLONE_DEEP_FLAG = 1, CLONE_FLAT_FLAG = 2, CLONE_SYMBOLS_FLAG = 4;
-var omit = flatRest(function(object, paths) {
-  var result = {};
-  if (object == null) {
-    return result;
-  }
-  var isDeep = false;
-  paths = arrayMap(paths, function(path) {
-    path = castPath(path, object);
-    isDeep || (isDeep = path.length > 1);
-    return path;
-  });
-  copyObject(object, getAllKeysIn(object), result);
-  if (isDeep) {
-    result = baseClone(result, CLONE_DEEP_FLAG | CLONE_FLAT_FLAG | CLONE_SYMBOLS_FLAG, customOmitClone);
-  }
-  var length = paths.length;
-  while (length--) {
-    baseUnset(result, paths[length]);
-  }
-  return result;
-});
-const NodeCard = ({ node, sx = {} }) => {
-  var _a;
-  const [expanded, setExpanded] = useState(false);
-  const [nodeExtraData, setNodeExtraData] = useState();
-  const handleExpandClick = () => {
-    setExpanded(!expanded);
-  };
-  useEffect(() => {
-    setNodeExtraData(omit(node, ["id", "edges"]));
-  }, [node]);
-  const renderEdgeList = useCallback((edgeIds) => {
-    return /* @__PURE__ */ jsxs(Stack, { alignSelf: "stretch", children: [
-      /* @__PURE__ */ jsx(Typography, { textAlign: "left", variant: "body2", color: "text.secondary", children: "Edges" }),
-      /* @__PURE__ */ jsx(Stack, { spacing: 0.25, children: edgeIds.map((edgeId) => /* @__PURE__ */ jsx(NodeTag, { nodeId: edgeId }, edgeId)) })
-    ] });
-  }, []);
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      variant: "outlined",
-      sx: {
-        position: "relative",
-        overflow: "auto",
-        zIndex: expanded ? 100 : "initial",
-        "& *": {
-          opacity: 1
-        },
-        ...sx
-      },
-      children: /* @__PURE__ */ jsx(CardContent, { sx: { p: 1 }, children: /* @__PURE__ */ jsxs(
-        Stack,
-        {
-          spacing: 1,
-          sx: {
-            textAlign: "left",
-            wordBreak: "break-all",
-            "& pre": {
-              whiteSpace: "pre-wrap"
-            }
-          },
-          children: [
-            /* @__PURE__ */ jsx(NodeTag, { nodeId: node.id, label: node.id, type: "header", children: /* @__PURE__ */ jsx(
-              ExpandMoreButton,
-              {
-                expand: expanded,
-                onClick: handleExpandClick,
-                "aria-expanded": expanded,
-                "aria-label": "show more",
-                size: "small",
-                children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-expand-more", fontSize: "medium" })
-              }
-            ) }),
-            node.markdown && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Divider, { flexItem: true }),
-              /* @__PURE__ */ jsx(Markdown, { md: node.markdown, components: flatten$1(node) })
-            ] }),
-            !!((_a = node == null ? void 0 : node.edges) == null ? void 0 : _a.length) && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              /* @__PURE__ */ jsx(Divider, { flexItem: true }),
-              renderEdgeList(node == null ? void 0 : node.edges)
-            ] }),
-            /* @__PURE__ */ jsx(Collapse, { in: expanded, timeout: "auto", children: /* @__PURE__ */ jsxs(
-              Stack,
-              {
-                justifyContent: "start",
-                alignItems: "start",
-                spacing: 1,
-                sx: (theme) => ({
-                  "& > ul": {
-                    width: "100%",
-                    textAlign: "left",
-                    p: cssImportant(theme.spacing(1)),
-                    mx: cssImportant("0"),
-                    backgroundColor: cssImportant(theme.palette.background.paper)
-                  }
-                }),
-                children: [
-                  /* @__PURE__ */ jsx(Divider, { flexItem: true }),
-                  /* @__PURE__ */ jsx(Typography, { textAlign: "left", variant: "body1", children: "Metadata:" }),
-                  /* @__PURE__ */ jsx(JSONViewer, { data: nodeExtraData })
-                ]
-              }
-            ) })
-          ]
-        }
-      ) })
-    }
-  );
-};
-export {
-  NodeCard as default
-};

package/components/display/graph/elements/NodeTag.d.ts

@@ -1,9 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-
-interface TagOptions {
-    nodeId: string;
-    label?: string;
-    type?: 'header' | 'content';
-}
-declare const NodeTag: FC<PropsWithChildren<TagOptions>>;
-export default NodeTag;

package/components/display/graph/elements/NodeTag.js

@@ -1,17 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Stack, Typography, Tooltip } from "@mui/material";
-import { F as FlexOne } from "../../../../FlexOne-BSYAhhtG.js";
-import Iconified from "../../icons/Iconified.js";
-const NodeTag = ({ nodeId, label = nodeId, type = "content", children }) => {
-  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", pr: 1, children: [
-    type === "header" ? /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", sx: { overflow: "hidden" }, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { wordWrap: "break-all" }, children: label.replace(" (TRUNCATED)", "") }),
-      label.includes("TRUNCATED") && /* @__PURE__ */ jsx(Tooltip, { title: "Field is truncated.", children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-content-cut", fontSize: "small", style: { fontSize: "0.9em" } }) })
-    ] }) : label,
-    /* @__PURE__ */ jsx(FlexOne, {}),
-    children
-  ] });
-};
-export {
-  NodeTag as default
-};

package/components/display/graph/index.d.ts

@@ -1,9 +0,0 @@
-import { StackProps } from '@mui/material';
-import { NestedDataset } from "../../../types/graph";
-import { FC } from 'react';
-
-declare const Graph: FC<{
-    graph: NestedDataset;
-    sx?: StackProps['sx'];
-}>;
-export default Graph;

package/components/display/graph/index.js

@@ -1,438 +0,0 @@
-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-DJYqRcxJ.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 _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);
-    },
-    [(_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 nodeToGet = checkForNode(nodeId.replace(/[^A-Za-z0-9]*/g, ""));
-    if (nodeToGet.empty()) {
-      setHasError(true);
-      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)
-    );
-  }, [checkForNode, nodeId, zoom$1.transform]);
-  const onKeyPress = useCallback(
-    (event) => {
-      const parsedEvent = parseEvent(event);
-      if (parsedEvent.isCtrl && parsedEvent.isEnter) {
-        selectNode();
-      }
-    },
-    [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 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)
-      );
-    },
-    [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);
-      })
-    );
-  }, [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: theme.palette.text.primary,
-      backgroundColor: theme.palette.background.paper,
-      nodeColor: {
-        border: (isDark ? lighten : darken)(theme.palette.background.paper, 0.3),
-        center: "white"
-      }
-    }),
-    [isDark, theme.palette.background.paper, theme.palette.text.primary]
-  );
-  const cloudOptions = useMemo(
-    () => ({
-      textColor: theme.palette.text.primary,
-      backgroundColor: theme.palette.background.paper,
-      nodeColor: {
-        border: (isDark ? lighten : darken)(theme.palette.background.paper, 0.3),
-        center: "white"
-      }
-    }),
-    [isDark, theme.palette.background.paper, theme.palette.text.primary]
-  );
-  const visualizations = useMemo(
-    () => ({
-      tree: () => /* @__PURE__ */ jsx(
-        Tree,
-        {
-          svgRef,
-          graph,
-          labelKeys,
-          onNodeSelectionChanged,
-          zoom: currentZoom,
-          options: treeOptions
-        }
-      ),
-      cloud: () => /* @__PURE__ */ jsx(Cloud, { svgRef, graph, options: cloudOptions })
-    }),
-    [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: panelLocation === "vertical" ? "row" : "column",
-      spacing: 1,
-      overflow: "hidden",
-      height: "100%",
-      width: "100%",
-      sx,
-      children: [
-        /* @__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 - ${theme.spacing(1)})`,
-              "& #viz": {
-                maxHeight: `calc(100vh - 64px - ${theme.spacing(1)})`,
-                width: "100%",
-                height: "100%",
-                backgroundColor: theme.palette.background.paper
-              },
-              "& .path": {
-                transition: theme.transitions.create(["opacity"], {
-                  duration: theme.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
-                  })
-                },
-                "&.hover > .center": {
-                  stroke: cssImportant(theme.palette.primary.main)
-                },
-                "&.hover > .border": {
-                  stroke: cssImportant(theme.palette.primary.dark)
-                },
-                "&.selected > .center": {
-                  stroke: cssImportant(theme.palette.success.main)
-                },
-                "&.selected > .border": {
-                  stroke: cssImportant(theme.palette.success.dark)
-                },
-                "&.selected.hover > .center": {
-                  stroke: cssImportant(theme.palette.primary.main)
-                },
-                "&.selected.hover > .border": {
-                  stroke: cssImportant(theme.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,
-                  {
-                    variant: "h1",
-                    color: "text.secondary",
-                    sx: {
-                      position: "absolute",
-                      top: "50%",
-                      left: "50%",
-                      opacity: 0.3,
-                      transform: "translateX(-50%) translateY(-50%)"
-                    },
-                    children: "No dataset has been selected!"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                Stack,
-                {
-                  direction: "column",
-                  spacing: 1,
-                  sx: {
-                    position: "absolute",
-                    top: theme.spacing(1),
-                    left: theme.spacing(1),
-                    right: theme.spacing(1)
-                  },
-                  children: /* @__PURE__ */ jsxs(
-                    Stack,
-                    {
-                      direction: "row",
-                      spacing: 1,
-                      sx: {
-                        "& > div:first-of-type": {
-                          flex: 1,
-                          maxWidth: "775px",
-                          backgroundColor: alpha(theme.palette.background.paper, 0.8)
-                        }
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          Autocomplete,
-                          {
-                            disablePortal: true,
-                            onChange: (__, value) => onNodeChange(value.id),
-                            onKeyDown: onKeyPress,
-                            options: suggestions,
-                            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: "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,
-                            {
-                              label: "Visualization",
-                              labelId: "viz-label",
-                              value: viz,
-                              onChange: (event) => setViz(event.target.value),
-                              sx: { textTransform: "capitalize" },
-                              children: Object.keys(visualizations).map((_viz) => /* @__PURE__ */ jsx(MenuItem, { value: _viz, sx: { textTransform: "capitalize" }, children: _viz }, _viz))
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsx(
-                          ExpandMoreButton,
-                          {
-                            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__ */ jsx(
-                              Iconified,
-                              {
-                                icon: panelLocation === "vertical" ? "ic:baseline-chevron-left" : "ic:baseline-expand-more",
-                                fontSize: "medium"
-                              }
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Card,
-                {
-                  variant: showCoordinates ? "elevation" : "outlined",
-                  elevation: showCoordinates ? 4 : 0,
-                  sx: {
-                    position: "absolute",
-                    bottom: theme.spacing(0.5),
-                    right: theme.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),
-                      ", ",
-                      currentZoom.y.toFixed(0),
-                      " (",
-                      currentZoom.k.toFixed(2),
-                      "x)"
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      IconButton,
-                      {
-                        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" })
-                      }
-                    )
-                  ] })
-                }
-              ),
-              showMousePos && /* @__PURE__ */ jsx(
-                Card,
-                {
-                  variant: "elevation",
-                  elevation: 4,
-                  sx: {
-                    position: "absolute",
-                    bottom: theme.spacing(0.5),
-                    left: theme.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: [
-                      "(abs: ",
-                      absoluteMousePos.join(", "),
-                      ")"
-                    ] }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      "(rel: ",
-                      relativeMousePos.join(", "),
-                      ")"
-                    ] })
-                  ] }) })
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          Collapse,
-          {
-            in: showPanel && selectedNodeIds.length > 0,
-            orientation: panelLocation === "vertical" ? "horizontal" : "vertical",
-            appear: true,
-            unmountOnExit: true,
-            children: /* @__PURE__ */ jsx(
-              Stack,
-              {
-                direction: "column",
-                spacing: 1,
-                sx: panelLocation === "vertical" ? { width: "450px", height: "100%" } : { width: "100%", height: "300px" },
-                pb: 1,
-                children: /* @__PURE__ */ jsx(NodePanel, { selectedNodeIds, findNode })
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  Graph as default
-};

package/components/display/graph/visualizations/Leaf.d.ts

@@ -1,25 +0,0 @@
-import { CSSProperties, FC, PropsWithChildren } from 'react';
-
-interface LeafPropsType {
-    nodeId: string;
-    label?: string;
-    x: number;
-    y: number;
-    height: number;
-    nodeRadius: number;
-    nodeColor: {
-        border: string;
-        center: string;
-    };
-    nodeOpacity: number;
-    letterSize: number;
-    letterWidth: number;
-    textColor: string;
-    selected?: boolean;
-    alwaysShowText?: boolean;
-    style?: CSSProperties;
-    onHoverChanged?: (nodeId: string, isHovered: boolean) => void;
-    onClick?: (nodeId: string, isSelected: boolean, event: MouseEvent) => void;
-}
-declare const Leaf: FC<PropsWithChildren<LeafPropsType>>;
-export default Leaf;