@cccsaurora/clue-ui 1.2.4-patch.275 → 1.2.5-dev.298

package/components/actions/formats/FileResult.js

@@ -1,85 +1,112 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import { Stack as v, Typography as u, Divider as A, Table as C, TableBody as S, TableRow as d, TableCell as l, Button as k } from "@mui/material";
-import M from "../../display/icons/Iconified.js";
-import { ClueComponentContext as R } from "../../../hooks/ClueComponentContext.js";
-import { useState as T, useMemo as U, useEffect as _ } from "react";
-import { u as j } from "../../../index-Dj5C04IX.js";
-const b = (t) => {
-  const e = atob(t), o = new Uint8Array(new ArrayBuffer(e.length));
-  for (let a = 0; a < e.length; a++)
-    o[a] = e.charCodeAt(a);
-  return o;
-}, H = (t) => {
-  if (t === 0)
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Stack, Typography, Divider, Table, TableBody, TableRow, TableCell, Button } from "@mui/material";
+import Iconified from "../../display/icons/Iconified.js";
+import { ClueComponentContext } from "../../../hooks/ClueComponentContext.js";
+import { useState, useMemo, useEffect } from "react";
+import { u as useContextSelector } from "../../../index-AMfoEg_6.js";
+const decodeBase64ToBytes = (base64Data) => {
+  const byteCharacters = atob(base64Data);
+  const byteArray = new Uint8Array(new ArrayBuffer(byteCharacters.length));
+  for (let i = 0; i < byteCharacters.length; i++) {
+    byteArray[i] = byteCharacters.charCodeAt(i);
+  }
+  return byteArray;
+};
+const formatBytes = (bytes) => {
+  if (bytes === 0) {
     return "0 B";
-  const e = ["B", "KB", "MB", "GB"], o = Math.min(Math.floor(Math.log(t) / Math.log(1024)), e.length - 1);
-  return `${(t / 1024 ** o).toFixed(o === 0 ? 0 : 2)} ${e[o]}`;
-}, F = (t) => {
-  const e = b(t.data), o = new Blob([e], { type: t.mime_type || "application/octet-stream" }), a = URL.createObjectURL(o), i = document.createElement("a");
-  i.href = a, i.download = t.file_name || "result.txt", document.body.appendChild(i), i.click(), document.body.removeChild(i), URL.revokeObjectURL(a);
-}, D = ({ result: t }) => {
-  var h, f, m, p, y;
-  const { t: e } = j(R, (r) => r == null ? void 0 : r.i18next), [o, a] = T(""), i = ((h = t.action) == null ? void 0 : h.name) ?? e("actions.result.file.unknown"), s = U(() => {
-    var r;
-    if (!((r = t.output) != null && r.data))
+  }
+  const units = ["B", "KB", "MB", "GB"];
+  const unitIndex = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const value = bytes / 1024 ** unitIndex;
+  return `${value.toFixed(unitIndex === 0 ? 0 : 2)} ${units[unitIndex]}`;
+};
+const saveFileFromServer = (output) => {
+  const byteArray = decodeBase64ToBytes(output.data);
+  const blob = new Blob([byteArray], { type: output.mime_type || "application/octet-stream" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = output.file_name || "result.txt";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+};
+const FileResult = ({ result }) => {
+  var _a, _b, _c, _d, _e;
+  const { t } = useContextSelector(ClueComponentContext, (ctx) => ctx == null ? void 0 : ctx.i18next);
+  const [sha256Hash, setSha256Hash] = useState("");
+  const actionName = ((_a = result.action) == null ? void 0 : _a.name) ?? t("actions.result.file.unknown");
+  const outputBytes = useMemo(() => {
+    var _a2;
+    if (!((_a2 = result.output) == null ? void 0 : _a2.data)) {
       return null;
+    }
     try {
-      return b(t.output.data);
+      return decodeBase64ToBytes(result.output.data);
     } catch {
       return null;
     }
-  }, [(f = t.output) == null ? void 0 : f.data]);
-  return _(() => {
-    let r = !1;
-    const g = async () => {
-      if (!s || typeof crypto > "u" || !crypto.subtle) {
-        a("N/A");
+  }, [(_b = result.output) == null ? void 0 : _b.data]);
+  useEffect(() => {
+    let cancelled = false;
+    const generateHash = async () => {
+      if (!outputBytes || typeof crypto === "undefined" || !crypto.subtle) {
+        setSha256Hash("N/A");
         return;
       }
-      const w = await crypto.subtle.digest("SHA-256", s), x = Array.from(new Uint8Array(w)).map((B) => B.toString(16).padStart(2, "0")).join("");
-      r || a(x);
+      const digest = await crypto.subtle.digest("SHA-256", outputBytes);
+      const digestArray = Array.from(new Uint8Array(digest));
+      const digestHex = digestArray.map((value) => value.toString(16).padStart(2, "0")).join("");
+      if (!cancelled) {
+        setSha256Hash(digestHex);
+      }
     };
-    return a(""), g(), () => {
-      r = !0;
+    setSha256Hash("");
+    generateHash();
+    return () => {
+      cancelled = true;
     };
-  }, [s]), /* @__PURE__ */ c(v, { sx: { overflowY: "auto" }, spacing: 3, children: [
-    /* @__PURE__ */ n(u, { variant: "h5", children: e("actions.result.file.title", { actionName: i }) }),
-    /* @__PURE__ */ n(u, { children: e("actions.result.file.description", { actionName: i }) }),
-    /* @__PURE__ */ n(A, { flexItem: !0 }),
-    /* @__PURE__ */ n(u, { variant: "h6", children: e("actions.result.file.stats.title") }),
-    s && /* @__PURE__ */ n(C, { sx: { maxWidth: 900 }, children: /* @__PURE__ */ c(S, { children: [
-      /* @__PURE__ */ c(d, { children: [
-        /* @__PURE__ */ n(l, { sx: { width: "35%" }, children: e("actions.result.file.stats.label.decoded_size") }),
-        /* @__PURE__ */ n(l, { children: H(s.length) || "n/a" })
+  }, [outputBytes]);
+  return /* @__PURE__ */ jsxs(Stack, { sx: { overflowY: "auto" }, spacing: 3, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h5", children: t("actions.result.file.title", { actionName }) }),
+    /* @__PURE__ */ jsx(Typography, { children: t("actions.result.file.description", { actionName }) }),
+    /* @__PURE__ */ jsx(Divider, { flexItem: true }),
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", children: t("actions.result.file.stats.title") }),
+    outputBytes && /* @__PURE__ */ jsx(Table, { sx: { maxWidth: 900 }, children: /* @__PURE__ */ jsxs(TableBody, { children: [
+      /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { sx: { width: "35%" }, children: t("actions.result.file.stats.label.decoded_size") }),
+        /* @__PURE__ */ jsx(TableCell, { children: formatBytes(outputBytes.length) || "n/a" })
       ] }),
-      /* @__PURE__ */ c(d, { children: [
-        /* @__PURE__ */ n(l, { sx: { width: "35%" }, children: e("actions.result.file.stats.label.decoded_bytes") }),
-        /* @__PURE__ */ n(l, { children: s.length || "n/a" })
+      /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { sx: { width: "35%" }, children: t("actions.result.file.stats.label.decoded_bytes") }),
+        /* @__PURE__ */ jsx(TableCell, { children: outputBytes.length || "n/a" })
       ] }),
-      /* @__PURE__ */ c(d, { children: [
-        /* @__PURE__ */ n(l, { sx: { width: "35%" }, children: e("actions.result.file.stats.label.base64_length") }),
-        /* @__PURE__ */ n(l, { children: ((m = t.output) == null ? void 0 : m.data.length) ?? "n/a" })
+      /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { sx: { width: "35%" }, children: t("actions.result.file.stats.label.base64_length") }),
+        /* @__PURE__ */ jsx(TableCell, { children: ((_c = result.output) == null ? void 0 : _c.data.length) ?? "n/a" })
       ] }),
-      /* @__PURE__ */ c(d, { children: [
-        /* @__PURE__ */ n(l, { sx: { width: "35%" }, children: e("actions.result.file.stats.label.sha256") }),
-        /* @__PURE__ */ n(l, { children: /* @__PURE__ */ n("code", { children: o || e("actions.result.file.stats.calculating") }) })
+      /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { sx: { width: "35%" }, children: t("actions.result.file.stats.label.sha256") }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("code", { children: sha256Hash || t("actions.result.file.stats.calculating") }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ n(
-      k,
+    /* @__PURE__ */ jsx(
+      Button,
       {
-        startIcon: /* @__PURE__ */ n(M, { icon: "ic:baseline-download" }),
+        startIcon: /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-download" }),
         variant: "outlined",
         sx: { alignSelf: "center" },
-        disabled: !((p = t.output) != null && p.data),
-        onClick: () => t.output && F(t.output),
+        disabled: !((_d = result.output) == null ? void 0 : _d.data),
+        onClick: () => result.output && saveFileFromServer(result.output),
         name: "download",
         role: "button",
-        children: e("download", { file: ((y = t.output) == null ? void 0 : y.file_name) ?? "result.txt" })
+        children: t("download", { file: ((_e = result.output) == null ? void 0 : _e.file_name) ?? "result.txt" })
       }
     )
   ] });
 };
 export {
-  D as default
+  FileResult as default
 };

package/components/actions/formats/index.js

@@ -1,12 +1,23 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { Stack as f } from "@mui/material";
-import { J as t } from "../../../index-BK-zfYhR.js";
-import a from "../../display/markdown/index.js";
-import i from "./FileResult.js";
-const u = ({ result: o }) => o.format === "markdown" ? /* @__PURE__ */ r(a, { md: o.output }) : o.format === "json" ? /* @__PURE__ */ r(t, { data: o.output, collapse: !0, forceCompact: !0 }) : o.format === "file" ? /* @__PURE__ */ r(i, { result: o }) : /* @__PURE__ */ m(f, { sx: { overflowY: "auto" }, children: [
-  /* @__PURE__ */ r(a, { md: "`" + o.format + "` is not recognized as a format in this application." }),
-  /* @__PURE__ */ r(t, { data: o, collapse: !0, forceCompact: !0 })
-] });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Stack } from "@mui/material";
+import { J as JSONViewer } from "../../../index-JcKyZeoY.js";
+import Markdown from "../../display/markdown/index.js";
+import FileResult from "./FileResult.js";
+const Result = ({ result }) => {
+  if (result.format === "markdown") {
+    return /* @__PURE__ */ jsx(Markdown, { md: result.output });
+  }
+  if (result.format === "json") {
+    return /* @__PURE__ */ jsx(JSONViewer, { data: result.output, collapse: true, forceCompact: true });
+  }
+  if (result.format === "file") {
+    return /* @__PURE__ */ jsx(FileResult, { result });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { sx: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ jsx(Markdown, { md: "`" + result.format + "` is not recognized as a format in this application." }),
+    /* @__PURE__ */ jsx(JSONViewer, { data: result, collapse: true, forceCompact: true })
+  ] });
+};
 export {
-  u as default
+  Result as default
 };

package/components/display/graph/ExpandMoreButton.js

@@ -1,18 +1,18 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconButton as a } from "@mui/material";
-const m = (t) => {
-  const { expand: o, ...r } = t;
-  return /* @__PURE__ */ e(
-    a,
+import { jsx } from "react/jsx-runtime";
+import { IconButton } from "@mui/material";
+const ExpandMoreButton = (props) => {
+  const { expand, ...other } = props;
+  return /* @__PURE__ */ jsx(
+    IconButton,
     {
-      ...r,
+      ...other,
       sx: {
-        transform: o ? "rotate(180deg)" : "rotate(0deg)",
-        transition: (n) => n.transitions.create("transform")
+        transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
+        transition: (theme) => theme.transitions.create("transform")
       }
     }
   );
 };
 export {
-  m as default
+  ExpandMoreButton as default
 };

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

@@ -1,91 +1,111 @@
-import { jsxs as l, jsx as n, Fragment as b } from "react/jsx-runtime";
-import { Stack as c, Typography as g, Card as C, CardContent as w, Divider as m, Collapse as _ } from "@mui/material";
-import { a as E, f as O } from "../../../../utils-DmwSUrum.js";
-import { cssImportant as d } from "../../../../utils/graph.js";
-import { b as S, c as v, t as k, a as A } from "../../../../_baseGet-DSZygzyq.js";
-import { c as I, g as L, b as F } from "../../../../_baseClone-BnT-6pyM.js";
-import { l as N } from "../../../../last-7CdUxN0r.js";
-import { b as P } from "../../../../_baseSlice-M5RKzt1A.js";
-import { b as D, s as M, o as G } from "../../../../_baseFlatten-Bfr_Molw.js";
-import { useState as x, useEffect as T, useCallback as z, Fragment as B } from "react";
-import R from "../../icons/Iconified.js";
-import { J } from "../../../../index-BK-zfYhR.js";
-import K from "../../markdown/index.js";
-import $ from "../ExpandMoreButton.js";
-import h from "./NodeTag.js";
-function U(e) {
-  var t = e == null ? 0 : e.length;
-  return t ? D(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-HmNPuoDB.js";
+import { cssImportant } from "../../../../utils/graph.js";
+import { b as baseGet, c as castPath, t as toKey, a as arrayMap } from "../../../../_baseGet-Bx3A4Qfp.js";
+import { c as copyObject, g as getAllKeysIn, b as baseClone } from "../../../../_baseClone-CkNrTyhm.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-jIR_sN_-.js";
+import { useState, useEffect, useCallback, Fragment as Fragment$1 } from "react";
+import Iconified from "../../icons/Iconified.js";
+import { J as JSONViewer } from "../../../../index-JcKyZeoY.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 M(G(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 : S(e, P(t, 0, -1));
+function parent(object, path) {
+  return path.length < 2 ? object : baseGet(object, baseSlice(path, 0, -1));
 }
-var j = Object.prototype, q = j.hasOwnProperty;
-function H(e, t) {
-  t = v(t, e);
-  var r = -1, i = t.length;
-  if (!i)
-    return !0;
-  for (var o = e == null || typeof e != "object" && typeof e != "function"; ++r < i; ) {
-    var a = t[r];
-    if (typeof a == "string") {
-      if (a === "__proto__" && !q.call(e, "__proto__"))
-        return !1;
-      if (a === "constructor" && r + 1 < i && typeof t[r + 1] == "string" && t[r + 1] === "prototype") {
-        if (o && r === 0)
-          continue;
-        return !1;
+var objectProto = Object.prototype;
+var hasOwnProperty = objectProto.hasOwnProperty;
+function baseUnset(object, path) {
+  path = castPath(path, object);
+  var index = -1, length = path.length;
+  if (!length) {
+    return true;
+  }
+  var isRootPrimitive = object == null || typeof object !== "object" && typeof object !== "function";
+  while (++index < length) {
+    var key = path[index];
+    if (typeof key !== "string") {
+      continue;
+    }
+    if (key === "__proto__" && !hasOwnProperty.call(object, "__proto__")) {
+      return false;
+    }
+    if (key === "constructor" && index + 1 < length && typeof path[index + 1] === "string" && path[index + 1] === "prototype") {
+      if (isRootPrimitive && index === 0) {
+        continue;
       }
+      return false;
     }
   }
-  var s = Y(e, t);
-  return s == null || delete s[k(N(t))];
+  var obj = parent(object, path);
+  return obj == null || delete obj[toKey(last(path))];
 }
-function Q(e) {
-  return E(e) ? void 0 : e;
+function customOmitClone(value) {
+  return isPlainObject(value) ? void 0 : value;
 }
-var W = 1, X = 2, Z = 4, ee = V(function(e, t) {
-  var r = {};
-  if (e == null)
-    return r;
-  var i = !1;
-  t = A(t, function(a) {
-    return a = v(a, e), i || (i = a.length > 1), a;
-  }), I(e, L(e), r), i && (r = F(r, W | X | Z, Q));
-  for (var o = t.length; o--; )
-    H(r, t[o]);
-  return r;
+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 xe = ({ node: e, sx: t = {} }) => {
-  var u;
-  const [r, i] = x(!1), [o, a] = x(), s = () => {
-    i(!r);
+const NodeCard = ({ node, sx = {} }) => {
+  var _a;
+  const [expanded, setExpanded] = useState(false);
+  const [nodeExtraData, setNodeExtraData] = useState();
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
   };
-  T(() => {
-    a(ee(e, ["id", "edges"]));
-  }, [e]);
-  const y = z((f) => /* @__PURE__ */ l(c, { alignSelf: "stretch", children: [
-    /* @__PURE__ */ n(g, { textAlign: "left", variant: "body2", color: "text.secondary", children: "Edges" }),
-    /* @__PURE__ */ n(c, { spacing: 0.25, children: f.map((p) => /* @__PURE__ */ n(h, { nodeId: p }, p)) })
-  ] }), []);
-  return /* @__PURE__ */ n(
-    C,
+  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: r ? 100 : "initial",
+        zIndex: expanded ? 100 : "initial",
         "& *": {
           opacity: 1
         },
-        ...t
+        ...sx
       },
-      children: /* @__PURE__ */ n(w, { sx: { p: 1 }, children: /* @__PURE__ */ l(
-        c,
+      children: /* @__PURE__ */ jsx(CardContent, { sx: { p: 1 }, children: /* @__PURE__ */ jsxs(
+        Stack,
         {
           spacing: 1,
           sx: {
@@ -96,44 +116,44 @@ const xe = ({ node: e, sx: t = {} }) => {
             }
           },
           children: [
-            /* @__PURE__ */ n(h, { nodeId: e.id, label: e.id, type: "header", children: /* @__PURE__ */ n(
-              $,
+            /* @__PURE__ */ jsx(NodeTag, { nodeId: node.id, label: node.id, type: "header", children: /* @__PURE__ */ jsx(
+              ExpandMoreButton,
               {
-                expand: r,
-                onClick: s,
-                "aria-expanded": r,
+                expand: expanded,
+                onClick: handleExpandClick,
+                "aria-expanded": expanded,
                 "aria-label": "show more",
                 size: "small",
-                children: /* @__PURE__ */ n(R, { 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__ */ n(m, { flexItem: !0 }),
-              /* @__PURE__ */ n(K, { md: e.markdown, components: O(e) })
+            node.markdown && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Divider, { flexItem: true }),
+              /* @__PURE__ */ jsx(Markdown, { md: node.markdown, components: flatten$1(node) })
             ] }),
-            !!((u = e == null ? void 0 : e.edges) != null && u.length) && /* @__PURE__ */ l(B, { children: [
-              /* @__PURE__ */ n(m, { flexItem: !0 }),
-              y(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__ */ n(_, { in: r, timeout: "auto", children: /* @__PURE__ */ l(
-              c,
+            /* @__PURE__ */ jsx(Collapse, { in: expanded, timeout: "auto", children: /* @__PURE__ */ jsxs(
+              Stack,
               {
                 justifyContent: "start",
                 alignItems: "start",
                 spacing: 1,
-                sx: (f) => ({
+                sx: (theme) => ({
                   "& > ul": {
                     width: "100%",
                     textAlign: "left",
-                    p: d(f.spacing(1)),
-                    mx: d("0"),
-                    backgroundColor: d(f.palette.background.paper)
+                    p: cssImportant(theme.spacing(1)),
+                    mx: cssImportant("0"),
+                    backgroundColor: cssImportant(theme.palette.background.paper)
                   }
                 }),
                 children: [
-                  /* @__PURE__ */ n(m, { flexItem: !0 }),
-                  /* @__PURE__ */ n(g, { textAlign: "left", variant: "body1", children: "Metadata:" }),
-                  /* @__PURE__ */ n(J, { data: o })
+                  /* @__PURE__ */ jsx(Divider, { flexItem: true }),
+                  /* @__PURE__ */ jsx(Typography, { textAlign: "left", variant: "body1", children: "Metadata:" }),
+                  /* @__PURE__ */ jsx(JSONViewer, { data: nodeExtraData })
                 ]
               }
             ) })
@@ -144,5 +164,5 @@ const xe = ({ node: e, sx: t = {} }) => {
   );
 };
 export {
-  xe 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
 };