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

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

@@ -1,73 +1,89 @@
-import { jsxs as l, jsx as r, Fragment as b } from "react/jsx-runtime";
-import { Stack as m, Typography as u, Card as v, CardContent as k, Divider as d, Collapse as w } from "@mui/material";
-import { a as y, f as S } from "../../../../utils-CD0rFIFU.js";
-import { cssImportant as f } from "../../../../utils/graph.js";
-import { b as A, c as h, t as I, a as L } from "../../../../_baseGet-Dgf6_xCm.js";
-import { c as F, g as O, b as N } from "../../../../_baseClone-BlMmRXeX.js";
-import { l as _ } from "../../../../last-7CdUxN0r.js";
-import { b as D } from "../../../../_baseSlice-M5RKzt1A.js";
-import { b as M, s as G, o as T } from "../../../../_baseFlatten-CN7vDNEQ.js";
-import { useState as g, useEffect as z, useCallback as B, Fragment as P } from "react";
-import J from "../../icons/Iconified.js";
-import { J as K } from "../../../../index-CnaCBNrd.js";
-import R from "../../markdown/index.js";
-import $ from "../ExpandMoreButton.js";
-import x from "./NodeTag.js";
-function U(e) {
-  var t = e == null ? 0 : e.length;
-  return t ? M(e) : [];
+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-Dr4wbKBZ.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-BMxyILVD.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 V(e) {
-  return G(T(e, void 0, U), e + "");
+function flatRest(func) {
+  return setToString(overRest(func, void 0, flatten), func + "");
 }
-function Y(e, t) {
-  return t.length < 2 ? e : A(e, D(t, 0, -1));
+function parent(object, path) {
+  return path.length < 2 ? object : baseGet(object, baseSlice(path, 0, -1));
 }
-function q(e, t) {
-  return t = h(t, e), e = Y(e, t), e == null || delete e[I(_(t))];
+function baseUnset(object, path) {
+  path = castPath(path, object);
+  object = parent(object, path);
+  return object == null || delete object[toKey(last(path))];
 }
-function H(e) {
-  return y(e) ? void 0 : e;
+function customOmitClone(value) {
+  return isPlainObject(value) ? void 0 : value;
 }
-var Q = 1, W = 2, X = 4, Z = V(function(e, t) {
-  var a = {};
-  if (e == null)
-    return a;
-  var i = !1;
-  t = L(t, function(n) {
-    return n = h(n, e), i || (i = n.length > 1), n;
-  }), F(e, O(e), a), i && (a = N(a, Q | W | X, H));
-  for (var s = t.length; s--; )
-    q(a, t[s]);
-  return a;
+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 ue = ({ node: e, sx: t = {} }) => {
-  var c;
-  const [a, i] = g(!1), [s, n] = g(), C = () => {
-    i(!a);
+const NodeCard = ({ node, sx = {} }) => {
+  var _a;
+  const [expanded, setExpanded] = useState(false);
+  const [nodeExtraData, setNodeExtraData] = useState();
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
   };
-  z(() => {
-    n(Z(e, ["id", "edges"]));
-  }, [e]);
-  const E = B((o) => /* @__PURE__ */ l(m, { alignSelf: "stretch", children: [
-    /* @__PURE__ */ r(u, { textAlign: "left", variant: "body2", color: "text.secondary", children: "Edges" }),
-    /* @__PURE__ */ r(m, { spacing: 0.25, children: o.map((p) => /* @__PURE__ */ r(x, { nodeId: p }, p)) })
-  ] }), []);
-  return /* @__PURE__ */ r(
-    v,
+  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: a ? 100 : "initial",
+        zIndex: expanded ? 100 : "initial",
         "& *": {
           opacity: 1
         },
-        ...t
+        ...sx
       },
-      children: /* @__PURE__ */ r(k, { sx: { p: 1 }, children: /* @__PURE__ */ l(
-        m,
+      children: /* @__PURE__ */ jsx(CardContent, { sx: { p: 1 }, children: /* @__PURE__ */ jsxs(
+        Stack,
         {
           spacing: 1,
           sx: {
@@ -78,44 +94,44 @@ const ue = ({ node: e, sx: t = {} }) => {
             }
           },
           children: [
-            /* @__PURE__ */ r(x, { nodeId: e.id, label: e.id, type: "header", children: /* @__PURE__ */ r(
-              $,
+            /* @__PURE__ */ jsx(NodeTag, { nodeId: node.id, label: node.id, type: "header", children: /* @__PURE__ */ jsx(
+              ExpandMoreButton,
               {
-                expand: a,
-                onClick: C,
-                "aria-expanded": a,
+                expand: expanded,
+                onClick: handleExpandClick,
+                "aria-expanded": expanded,
                 "aria-label": "show more",
                 size: "small",
-                children: /* @__PURE__ */ r(J, { icon: "ic:baseline-expand-more", fontSize: "medium" })
+                children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-expand-more", fontSize: "medium" })
               }
             ) }),
-            e.markdown && /* @__PURE__ */ l(b, { children: [
-              /* @__PURE__ */ r(d, { flexItem: !0 }),
-              /* @__PURE__ */ r(R, { md: e.markdown, components: S(e) })
+            node.markdown && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Divider, { flexItem: true }),
+              /* @__PURE__ */ jsx(Markdown, { md: node.markdown, components: flatten$1(node) })
             ] }),
-            !!((c = e == null ? void 0 : e.edges) != null && c.length) && /* @__PURE__ */ l(P, { children: [
-              /* @__PURE__ */ r(d, { flexItem: !0 }),
-              E(e == null ? void 0 : e.edges)
+            !!((_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__ */ r(w, { in: a, timeout: "auto", children: /* @__PURE__ */ l(
-              m,
+            /* @__PURE__ */ jsx(Collapse, { in: expanded, timeout: "auto", children: /* @__PURE__ */ jsxs(
+              Stack,
               {
                 justifyContent: "start",
                 alignItems: "start",
                 spacing: 1,
-                sx: (o) => ({
+                sx: (theme) => ({
                   "& > ul": {
                     width: "100%",
                     textAlign: "left",
-                    p: f(o.spacing(1)),
-                    mx: f("0"),
-                    backgroundColor: f(o.palette.background.paper)
+                    p: cssImportant(theme.spacing(1)),
+                    mx: cssImportant("0"),
+                    backgroundColor: cssImportant(theme.palette.background.paper)
                   }
                 }),
                 children: [
-                  /* @__PURE__ */ r(d, { flexItem: !0 }),
-                  /* @__PURE__ */ r(u, { textAlign: "left", variant: "body1", children: "Metadata:" }),
-                  /* @__PURE__ */ r(K, { data: s })
+                  /* @__PURE__ */ jsx(Divider, { flexItem: true }),
+                  /* @__PURE__ */ jsx(Typography, { textAlign: "left", variant: "body1", children: "Metadata:" }),
+                  /* @__PURE__ */ jsx(JSONViewer, { data: nodeExtraData })
                 ]
               }
             ) })
@@ -126,5 +142,5 @@ const ue = ({ node: e, sx: t = {} }) => {
   );
 };
 export {
-  ue as default
+  NodeCard as default
 };

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

@@ -1,15 +1,17 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Stack as t, Typography as a, Tooltip as d } from "@mui/material";
-import { F as s } from "../../../../FlexOne-BXWFOd1T.js";
-import l from "../../icons/Iconified.js";
-const T = ({ nodeId: n, label: r = n, type: o = "content", children: c }) => /* @__PURE__ */ i(t, { direction: "row", spacing: 1, alignItems: "center", pr: 1, children: [
-  o === "header" ? /* @__PURE__ */ i(t, { direction: "row", spacing: 1, alignItems: "center", sx: { overflow: "hidden" }, children: [
-    /* @__PURE__ */ e(a, { variant: "body1", sx: { wordWrap: "break-all" }, children: r.replace(" (TRUNCATED)", "") }),
-    r.includes("TRUNCATED") && /* @__PURE__ */ e(d, { title: "Field is truncated.", children: /* @__PURE__ */ e(l, { icon: "ic:baseline-content-cut", fontSize: "small", style: { fontSize: "0.9em" } }) })
-  ] }) : r,
-  /* @__PURE__ */ e(s, {}),
-  c
-] });
+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 {
-  T as default
+  NodeTag as default
 };