@cccsaurora/clue-ui 0.15.0-dev.27 → 0.15.0-dev.29

package/components/display/graph/index.js

@@ -0,0 +1,438 @@
+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

@@ -0,0 +1,25 @@
+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;

package/components/display/graph/visualizations/Leaf.js

@@ -0,0 +1,125 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { i as isObjectLike, b as baseGetTag } from "../../../../isObjectLike-OAgjjZye.js";
+import { useState, useMemo, useCallback, useEffect } from "react";
+var numberTag = "[object Number]";
+function isNumber(value) {
+  return typeof value == "number" || isObjectLike(value) && baseGetTag(value) == numberTag;
+}
+const DEFAULT_NODE_RADIUS = 10;
+const Leaf = ({
+  nodeId,
+  label = nodeId,
+  x,
+  y,
+  height,
+  nodeRadius = DEFAULT_NODE_RADIUS,
+  nodeColor,
+  nodeOpacity = 1,
+  letterSize,
+  letterWidth,
+  textColor,
+  style = {},
+  selected = false,
+  alwaysShowText = false,
+  onHoverChanged,
+  onClick,
+  children
+}) => {
+  const [isSelected, setIsSelected] = useState(selected);
+  const [isHovered, setIsHovered] = useState(false);
+  const classNames = useMemo(() => {
+    const _classNames = ["node"];
+    if (isHovered) {
+      _classNames.push("hover");
+    }
+    if (isSelected) {
+      _classNames.push("selected");
+    }
+    return _classNames;
+  }, [isHovered, isSelected]);
+  const handleOnClick = useCallback(
+    (event) => {
+      onClick == null ? void 0 : onClick(nodeId, !isSelected, event);
+      setIsSelected(!isSelected);
+    },
+    [nodeId, onClick, isSelected]
+  );
+  const handleOnHoverChanged = useCallback(
+    (value) => {
+      setIsHovered(value);
+      onHoverChanged == null ? void 0 : onHoverChanged(nodeId, value);
+    },
+    [nodeId, onHoverChanged]
+  );
+  useEffect(() => setIsSelected(selected), [selected]);
+  let strokeWidth = `${nodeRadius}px`;
+  if (style.strokeWidth) {
+    if (isNumber(style.strokeWidth)) {
+      strokeWidth = `${nodeRadius * style.strokeWidth}px`;
+    } else {
+      strokeWidth = style.strokeWidth;
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      id: "node-" + nodeId.replace(/[^A-Za-z0-9]*/g, ""),
+      style: { strokeLinecap: "round" },
+      className: classNames.join(" "),
+      onClick: handleOnClick,
+      onMouseOver: () => handleOnHoverChanged(true),
+      onMouseLeave: () => handleOnHoverChanged(false),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "border",
+            d: `M ${x} ${y} L ${x} ${y + Math.max(height, 0)}`,
+            style: {
+              strokeOpacity: nodeOpacity,
+              ...style,
+              strokeWidth: `calc(${strokeWidth} * 2)`,
+              stroke: style.stroke ?? nodeColor.border
+            }
+          },
+          nodeId + "-border"
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "center",
+            d: `M ${x} ${y} L ${x} ${y + Math.max(height, 0)}`,
+            style: {
+              strokeOpacity: nodeOpacity,
+              ...style,
+              strokeWidth,
+              stroke: style.fill ?? nodeColor.center
+            }
+          },
+          nodeId + "-middle"
+        ),
+        (isHovered || alwaysShowText) && label.split("\n").reverse().map((_label, index, arr) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: x + letterWidth,
+            y: y - letterSize / 2 + arr.length - index * letterSize,
+            fill: textColor,
+            style: {
+              cursor: "default",
+              fontFamily: '"Lucida Console", monospace',
+              fontSize: letterSize + "px",
+              fillOpacity: nodeOpacity
+            },
+            children: _label
+          },
+          nodeId + "-label-" + _label
+        ))
+      ]
+    },
+    nodeId
+  );
+};
+export {
+  Leaf as default
+};

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

@@ -0,0 +1,24 @@
+import { NestedDataset } from "../../../../../types/graph";
+import { MutableRefObject } from 'react';
+
+declare const DEFAULT_OPTIONS: {
+    width: string;
+    backgroundColor: string;
+    textColor: string;
+    nodeColor: {
+        border: string;
+        center: string;
+    };
+    letterSize: number;
+    letterWidth: number;
+    nodeRadius: number;
+    lineWidth: number;
+    circlePadding: any;
+};
+type Options = Partial<typeof DEFAULT_OPTIONS>;
+declare const _default: import('react').NamedExoticComponent<{
+    svgRef?: MutableRefObject<SVGSVGElement>;
+    graph: NestedDataset;
+    options?: Options;
+}>;
+export default _default;