@cccsaurora/clue-ui 0.15.0-dev.28 → 0.15.0-dev.30

package/components/display/graph/visualizations/tree/index.js

@@ -0,0 +1,485 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useTheme, colors, Box } from "@mui/material";
+import useComparator from "../../../../../hooks/useComparator.js";
+import useMyHighlights from "../../../../../hooks/useMyHighlights.js";
+import { useMyLocalStorageItem } from "../../../../../hooks/useMyLocalStorage.js";
+import { StorageKey, BUNDLE_SEPARATOR } from "../../../../../utils/constants.js";
+import { c as cloneDeep } from "../../../../../cloneDeep-CjP5k9zW.js";
+import { g as get } from "../../../../../get-D3C3lEU3.js";
+import { i as isNil } from "../../../../../isNil-CIubwp4T.js";
+import { b as baseExtremum, a as baseGt, i as isIterateeCall } from "../../../../../_baseExtremum-B1o1zHjR.js";
+import { i as identity } from "../../../../../identity-CPGTqrE4.js";
+import { t as toFinite } from "../../../../../toFinite-CArjry_l.js";
+import { b as baseSum } from "../../../../../_baseSum-D0WC1dN0.js";
+import { memo, useMemo } from "react";
+import NodeCard from "../../elements/NodeCard.js";
+import getIcon from "../icons/index.js";
+import Leaf from "../Leaf.js";
+import BundleLine from "./BundleLine.js";
+function max(array) {
+  return array && array.length ? baseExtremum(array, identity, baseGt) : void 0;
+}
+var nativeCeil = Math.ceil, nativeMax = Math.max;
+function baseRange(start, end, step, fromRight) {
+  var index = -1, length = nativeMax(nativeCeil((end - start) / (step || 1)), 0), result = Array(length);
+  while (length--) {
+    result[++index] = start;
+    start += step;
+  }
+  return result;
+}
+function createRange(fromRight) {
+  return function(start, end, step) {
+    if (step && typeof step != "number" && isIterateeCall(start, end, step)) {
+      end = step = void 0;
+    }
+    start = toFinite(start);
+    if (end === void 0) {
+      end = start;
+      start = 0;
+    } else {
+      end = toFinite(end);
+    }
+    step = step === void 0 ? start < end ? 1 : -1 : toFinite(step);
+    return baseRange(start, end, step);
+  };
+}
+var range = createRange();
+function sum(array) {
+  return array && array.length ? baseSum(array, identity) : 0;
+}
+const DEFAULT_OPTIONS = {
+  textColor: "white",
+  nodeColor: {
+    border: "grey",
+    center: "white"
+  },
+  letterSize: 10,
+  letterWidth: 6.5,
+  xSpacing: 8,
+  ySpacing: 20,
+  nodeRadius: 6,
+  maxArcRadius: 8,
+  linePaddingX: 10,
+  linePaddingY: 10,
+  lineWidth: 3,
+  enableEntryPadding: true,
+  truncateLabels: true,
+  enableTimestamps: true,
+  iconOrientation: "vertical",
+  lineDirection: "horizontal",
+  rowStep: null,
+  // We'll make this dynamic
+  belowPrevious: false
+};
+DEFAULT_OPTIONS.rowStep = DEFAULT_OPTIONS.ySpacing * 2;
+const Tree = ({ svgRef, graph, labelKeys, onNodeSelectionChanged, zoom, options = {} }) => {
+  var _a, _b, _c;
+  const combinedOptions = useMemo(
+    () => {
+      var _a2, _b2;
+      return {
+        ...DEFAULT_OPTIONS,
+        ...options,
+        ...((_b2 = (_a2 = graph == null ? void 0 : graph.metadata.display) == null ? void 0 : _a2.visualization) == null ? void 0 : _b2.config) ?? {}
+      };
+    },
+    [(_b = (_a = graph == null ? void 0 : graph.metadata.display) == null ? void 0 : _a.visualization) == null ? void 0 : _b.config, options]
+  );
+  const {
+    xSpacing: baseXSpacing,
+    ySpacing: baseYSpacing,
+    linePaddingX: baseLinePaddingX,
+    linePaddingY: baseLinePaddingY
+  } = combinedOptions;
+  const { runComparators, runComparator } = useComparator();
+  const { onNodeHoveredChanged, onNodeClicked, nodeOpacities, highlightedPath, highlightedNodes, hoveredNode } = useMyHighlights(graph, (nodeIds) => onNodeSelectionChanged(nodeIds));
+  const theme = useTheme();
+  const isDark = useMemo(() => theme.palette.mode === "dark", [theme]);
+  const [showCardsSettings] = useMyLocalStorageItem(StorageKey.SHOW_CARDS, false);
+  const [cardCutoff] = useMyLocalStorageItem(StorageKey.CARD_CUTOFF, 2.5);
+  const showCards = useMemo(() => zoom.k > cardCutoff && showCardsSettings, [cardCutoff, showCardsSettings, zoom.k]);
+  const levels = useMemo(
+    () => graph.data.map(
+      (level, levelIndex) => level.map((node) => ({
+        ...node,
+        parents: node == null ? void 0 : node.edges,
+        level: levelIndex
+      }))
+    ),
+    [graph.data]
+  );
+  const flatNodes = useMemo(() => levels.flat(), [levels]);
+  const [xSpacing, linePaddingX, ySpacing, linePaddingY] = useMemo(() => {
+    const baseValues = [
+      [baseXSpacing, baseLinePaddingX],
+      [baseYSpacing, baseLinePaddingY]
+    ];
+    if (zoom.k > 1 && showCardsSettings) {
+      return baseValues.flatMap(
+        (arr, index) => arr.map((_v) => _v * Math.pow(2.5 - index * 1.25, Math.min(zoom.k, 2.5) - 1))
+      );
+    } else {
+      return baseValues.flat();
+    }
+  }, [baseLinePaddingX, baseLinePaddingY, baseXSpacing, baseYSpacing, showCardsSettings, zoom.k]);
+  let portBounds;
+  if (!graph || !svgRef.current) {
+    portBounds = [
+      [0, 0],
+      [0, 0]
+    ];
+  } else {
+    const data = svgRef.current.getBoundingClientRect();
+    portBounds = [zoom.invert([0, 0]), zoom.invert([data.width, data.height])];
+  }
+  const bundles = useMemo(() => {
+    const bundlesDict = {};
+    flatNodes.forEach((node) => {
+      if (!node.parents) {
+        return;
+      }
+      const bundleId = node.parents.join(BUNDLE_SEPARATOR);
+      if (bundlesDict[bundleId]) {
+        bundlesDict[bundleId].destinations.push(node);
+      } else {
+        bundlesDict[bundleId] = {
+          id: bundleId,
+          sources: node.parents.map((parent) => flatNodes.find((_node) => _node.id === parent)),
+          destinations: [node]
+        };
+      }
+    });
+    return Object.values(bundlesDict);
+  }, [flatNodes]);
+  const layoutData = useMemo(() => {
+    const {
+      letterSize,
+      letterWidth,
+      enableEntryPadding,
+      truncateLabels,
+      rowStep,
+      belowPrevious
+    } = combinedOptions;
+    let currentX = 0;
+    let currentY = 0;
+    const nodeLocations = {};
+    const linesByLevel = {};
+    const paddingByLevel = {};
+    const inputs = {};
+    const outputs = {};
+    levels.forEach((level, levelIndex) => {
+      let longestLabel = 0;
+      level.forEach((node) => {
+        var _a2;
+        const validKeys = labelKeys == null ? void 0 : labelKeys.filter((_comparator) => runComparator(_comparator, node));
+        const labelKey = (_a2 = validKeys == null ? void 0 : validKeys.pop()) == null ? void 0 : _a2.label;
+        const labelRows = (labelKey == null ? void 0 : labelKey.split(",").map((key) => get(node, key)).filter((val) => !!val)) ?? [];
+        if (labelRows.length < 1) {
+          node.id.split("\n").forEach((line) => labelRows.push(line));
+        }
+        const labelHeight = labelRows.length * letterSize;
+        currentY += labelHeight;
+        nodeLocations[node.id] = [+currentX, +currentY, -linePaddingY];
+        currentY += ySpacing;
+        if (enableEntryPadding) {
+          longestLabel = Math.max(longestLabel, max((labelRows == null ? void 0 : labelRows.map((row) => row.toString().length)) ?? [node.id.length]));
+        }
+      });
+      currentX += xSpacing + (!truncateLabels ? longestLabel : Math.min(longestLabel, 44)) * letterWidth;
+      if (!belowPrevious) {
+        currentY = (levelIndex + 1) * rowStep;
+      } else {
+        currentY += rowStep;
+      }
+    });
+    bundles.forEach((bundle) => {
+      bundle.sources.forEach((source) => {
+        if (!outputs[source.id]) {
+          outputs[source.id] = /* @__PURE__ */ new Set();
+        }
+        outputs[source.id].add(bundle.id);
+      });
+      bundle.destinations.forEach((dest) => {
+        if (isNil(linesByLevel[dest.level])) {
+          linesByLevel[dest.level] = /* @__PURE__ */ new Set();
+        }
+        if (!inputs[dest.id]) {
+          inputs[dest.id] = /* @__PURE__ */ new Set();
+        }
+        linesByLevel[dest.level].add(bundle.id);
+        inputs[dest.id].add(bundle.id);
+      });
+    });
+    Object.entries(linesByLevel).forEach(([level, lines]) => paddingByLevel[level] = lines.size);
+    levels.forEach((level, levelIndex) => {
+      const indexesSoFar = range(levelIndex + 1);
+      const paddingArray = indexesSoFar.map((_levelIndex) => paddingByLevel[_levelIndex] ?? 0);
+      const totalPadding = sum(paddingArray) * linePaddingX;
+      level.forEach((node) => {
+        nodeLocations[node.id][0] += totalPadding;
+      });
+    });
+    flatNodes.forEach((node) => {
+      var _a2, _b2, _c2;
+      let maxHeight = max([((_a2 = inputs[node.id]) == null ? void 0 : _a2.size) - 1, ((_b2 = outputs[node.id]) == null ? void 0 : _b2.size) - 1, 0]) * linePaddingY;
+      if ((_c2 = inputs[node.id]) == null ? void 0 : _c2.has(node.id)) {
+        maxHeight += linePaddingY;
+      }
+      nodeLocations[node.id][2] = maxHeight;
+      const levelIndex = levels[node.level].findIndex((_node) => _node.id === node.id);
+      levels[node.level].filter((__, index) => levelIndex < index).forEach((_node) => {
+        nodeLocations[_node.id][1] += maxHeight;
+      });
+    });
+    return {
+      nodeLocations,
+      linesByLevel,
+      paddingByLevel
+    };
+  }, [
+    bundles,
+    combinedOptions,
+    flatNodes,
+    labelKeys,
+    levels,
+    linePaddingX,
+    linePaddingY,
+    runComparator,
+    xSpacing,
+    ySpacing
+  ]);
+  const [timestamps, bundleElements, nodes] = useMemo(() => {
+    const {
+      textColor,
+      letterSize,
+      letterWidth,
+      nodeRadius,
+      nodeColor,
+      maxArcRadius,
+      lineWidth,
+      truncateLabels,
+      enableTimestamps,
+      belowPrevious,
+      iconOrientation,
+      lineDirection,
+      colorTheme
+    } = combinedOptions;
+    const { nodeLocations, linesByLevel, paddingByLevel } = layoutData;
+    const _nodes = [];
+    const _timestamps = [];
+    flatNodes.forEach((node) => {
+      var _a2, _b2, _c2, _d;
+      const [x, y, _height] = nodeLocations[node.id];
+      const labelKey = ((_a2 = labelKeys == null ? void 0 : labelKeys.filter((_comparator) => runComparator(_comparator, node)).pop()) == null ? void 0 : _a2.label) ?? "id";
+      let label = labelKey == null ? void 0 : labelKey.split(",").map((key) => {
+        let labelSection = get(node, key);
+        if (labelSection && truncateLabels && labelSection.length > 44) {
+          labelSection = labelSection.replace(/^(.{32}).+$/, "$1 (TRUNCATED)");
+        }
+        return labelSection;
+      }).filter((section) => !!section).join("\n");
+      if (!label) {
+        if (node.id.length > 44) {
+          label = node.id.replace(/^(.{32}).+$/, "$1 (TRUNCATED)");
+        } else {
+          label = node.id;
+        }
+      }
+      if (belowPrevious && enableTimestamps && (node.timestamp || node.annotation)) {
+        _timestamps.push(
+          /* @__PURE__ */ jsxs(
+            "g",
+            {
+              style: {
+                cursor: "default",
+                fontFamily: '"Lucida Console", monospace',
+                fontSize: letterSize * 0.75 + "px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: portBounds[0][0] + xSpacing,
+                    y: y + (_height + nodeRadius) / 2,
+                    fill: theme.palette.getContrastText(theme.palette.background.paper),
+                    style: {
+                      fillOpacity: nodeOpacities(node.id) / 2,
+                      transition: theme.transitions.create(["fill-opacity"], {
+                        duration: theme.transitions.duration.short
+                      })
+                    },
+                    children: node.timestamp
+                  }
+                ),
+                node.annotation && node.annotation.split("\n").map((line, index) => {
+                  var _a3;
+                  return /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: portBounds[0][0] + (((_a3 = node.timestamp) == null ? void 0 : _a3.length) ?? 0) * letterWidth,
+                      y: y + (_height + nodeRadius) / 2 + index * letterSize,
+                      fill: isDark ? colors.orange[300] : colors.blue[900],
+                      style: {
+                        fillOpacity: nodeOpacities(node.id),
+                        transition: theme.transitions.create(["fill-opacity"], {
+                          duration: theme.transitions.duration.short
+                        })
+                      },
+                      children: line
+                    },
+                    line
+                  );
+                })
+              ]
+            },
+            node.id + "-timestamp"
+          )
+        );
+      }
+      if (!showCards) {
+        const style = runComparators(
+          (_c2 = (_b2 = graph.metadata.display) == null ? void 0 : _b2.styles) == null ? void 0 : _c2.filter((comparator) => comparator.type === "node"),
+          node
+        );
+        const nodeOpacity = nodeOpacities(node.id);
+        const icons = (_d = node.icons) == null ? void 0 : _d.map((icon) => [icon, getIcon(icon)]).filter(([__, icon]) => !!icon).map(([icon, Icon], index) => /* @__PURE__ */ jsx(
+          Icon,
+          {
+            x: x - nodeRadius * 3 * (iconOrientation === "horizontal" ? index + 1 : 0),
+            y: y - nodeRadius * 3 * (iconOrientation === "vertical" ? index + 1 : 0),
+            size: letterSize * 1.5,
+            style: {
+              fillOpacity: nodeOpacity
+            },
+            circleStyle: {
+              fillOpacity: nodeOpacity
+            }
+          },
+          icon
+        ));
+        _nodes.push(
+          /* @__PURE__ */ jsx(
+            Leaf,
+            {
+              alwaysShowText: true,
+              nodeId: node.id,
+              label,
+              height: _height,
+              x,
+              y,
+              style,
+              nodeRadius,
+              nodeColor,
+              nodeOpacity,
+              letterSize,
+              letterWidth,
+              textColor,
+              selected: highlightedNodes.has(node.id),
+              onHoverChanged: onNodeHoveredChanged,
+              onClick: onNodeClicked,
+              children: icons
+            },
+            node.id
+          )
+        );
+      }
+    });
+    const readonlyNodeLocations = cloneDeep(nodeLocations);
+    const outputsByNode = {};
+    const inputsByNode = {};
+    const _bundleElements = bundles.map((bundle) => {
+      return /* @__PURE__ */ jsx(
+        BundleLine,
+        {
+          lineDirection,
+          linesByLevel,
+          paddingByLevel,
+          nodeLocations: readonlyNodeLocations,
+          outputsByNode,
+          inputsByNode,
+          bundle,
+          maxArcRadius,
+          lineWidth,
+          linePaddingX,
+          linePaddingY,
+          highlightedPath,
+          colorTheme
+        },
+        bundle.id
+      );
+    });
+    return [_timestamps, _bundleElements, _nodes];
+  }, [
+    bundles,
+    combinedOptions,
+    (_c = graph.metadata.display) == null ? void 0 : _c.styles,
+    flatNodes,
+    highlightedNodes,
+    highlightedPath,
+    isDark,
+    labelKeys,
+    layoutData,
+    linePaddingX,
+    linePaddingY,
+    nodeOpacities,
+    onNodeClicked,
+    onNodeHoveredChanged,
+    portBounds,
+    runComparator,
+    runComparators,
+    showCards,
+    theme.palette,
+    theme.transitions,
+    xSpacing
+  ]);
+  const cards = useMemo(() => {
+    const { nodeRadius, lineWidth } = combinedOptions;
+    const { nodeLocations } = layoutData;
+    return flatNodes.filter((node) => showCards || hoveredNode === node.id).map((node) => {
+      const [x, y] = nodeLocations[node.id];
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          onMouseOver: () => onNodeHoveredChanged(node.id, true),
+          onMouseLeave: () => setTimeout(() => onNodeHoveredChanged(node.id, false), 100),
+          sx: {
+            position: "absolute",
+            left: zoom.k * x + zoom.x,
+            top: zoom.k * y + zoom.y,
+            transform: `translateX(-${nodeRadius * 2}px) translateY(${lineWidth}px)`,
+            backgroundColor: theme.palette.background.paper,
+            maxWidth: "450px",
+            maxHeight: "500px",
+            overflow: "auto"
+          },
+          children: /* @__PURE__ */ jsx(NodeCard, { node })
+        },
+        node.id
+      );
+    });
+  }, [
+    combinedOptions,
+    flatNodes,
+    hoveredNode,
+    layoutData,
+    onNodeHoveredChanged,
+    showCards,
+    theme.palette.background.paper,
+    zoom.k,
+    zoom.x,
+    zoom.y
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("svg", { id: "viz", ref: svgRef, children: /* @__PURE__ */ jsxs("g", { id: "view", children: [
+      timestamps,
+      bundleElements,
+      nodes
+    ] }) }),
+    cards
+  ] });
+};
+const Tree$1 = memo(Tree);
+export {
+  Tree$1 as default
+};

package/components/display/graph/visualizations/tree/types.d.ts

@@ -0,0 +1,11 @@
+import { RawEntry } from "../../../../../types/graph";
+
+export interface Node extends RawEntry {
+    level: number;
+    parents: string[];
+}
+export interface Bundle {
+    id: string;
+    sources: Node[];
+    destinations: Node[];
+}

package/components/display/graph/visualizations/tree/types.js

@@ -0,0 +1 @@
+

package/components/display/icons/Iconified.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+
+declare const _default: import('react').NamedExoticComponent<{
+    icon: string;
+    fontSize?: "small" | "medium" | "large" | "inherit" | number;
+    color?: "disabled" | "action" | "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+    style?: CSSProperties;
+}>;
+export default _default;

package/components/display/icons/Iconified.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { I as Icon } from "../../../iconify-CXMreGTg.js";
+import { useTheme } from "@mui/material";
+import { memo, useMemo } from "react";
+const Iconified = ({ icon, fontSize = "medium", color, style = {} }) => {
+  const theme = useTheme();
+  const _fontSize = useMemo(() => {
+    if (fontSize === "small") {
+      return 20;
+    } else if (fontSize === "medium") {
+      return 24;
+    } else if (fontSize === "large") {
+      return 35;
+    }
+    return fontSize;
+  }, [fontSize]);
+  const styles = useMemo(() => {
+    const _styles = style;
+    if (color) {
+      _styles.color = theme.palette[color].main;
+    }
+    return _styles;
+  }, [color, style, theme.palette]);
+  return /* @__PURE__ */ jsx("span", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(Icon, { icon, fontSize: _fontSize, style: styles }) });
+};
+const Iconified$1 = memo(Iconified);
+export {
+  Iconified$1 as default
+};

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

@@ -0,0 +1,14 @@
+import { ReactJsonViewProps } from '@microlink/react-json-view';
+import { StackProps } from '@mui/material';
+import { FC } from 'react';
+
+declare const JSONViewer: FC<{
+    data: object;
+    collapse?: boolean;
+    forceCompact?: boolean;
+    slotProps?: {
+        stack?: StackProps;
+        json?: Partial<ReactJsonViewProps>;
+    };
+}>;
+export default JSONViewer;

package/components/display/json/index.js

@@ -0,0 +1,12 @@
+import "react/jsx-runtime";
+import "@mui/material";
+import { J } from "../../../index-BDrtH5ec.js";
+import "../../../utils-CxIhC2xH.js";
+import "../../../hooks/ClueComponentContext.js";
+import "../../../hooks/useMyLocalStorage.js";
+import "../../../utils/constants.js";
+import "react";
+import "../../../index-BDVjGvMI.js";
+export {
+  J as default
+};

package/components/display/markdown/DynamicTabs.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare const DynamicTabs: React.FC<{
+    tabs: {
+        title: string;
+        children: React.ReactNode;
+    }[];
+}>;
+export default DynamicTabs;

package/components/display/markdown/DynamicTabs.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Box, Tabs, Tab } from "@mui/material";
+import * as React from "react";
+const CustomTabPanel = (props) => {
+  const { children, value, index, ...other } = props;
+  return /* @__PURE__ */ jsx("div", { role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}`, ...other, children: value === index && /* @__PURE__ */ jsx(Box, { sx: { p: 1 }, children }) });
+};
+const a11yProps = (index) => {
+  return {
+    id: `tab-${index}`,
+    "aria-controls": `tabpanel-${index}`
+  };
+};
+const DynamicTabs = ({ tabs }) => {
+  const [value, setValue] = React.useState(0);
+  const handleChange = (_event, newValue) => {
+    setValue(newValue);
+  };
+  return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Box, { sx: { borderBottom: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsx(Tabs, { value, onChange: handleChange, "aria-label": "dynamic tabs", children: tabs.map((t, index) => /* @__PURE__ */ jsx(Tab, { label: t.title, ...a11yProps(index) }, t.title)) }) }),
+    tabs.map((t, index) => /* @__PURE__ */ jsx(CustomTabPanel, { value, index, children: t.children }, t.title))
+  ] });
+};
+export {
+  DynamicTabs as default
+};

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

@@ -0,0 +1,9 @@
+import { FC, ReactElement } from 'react';
+
+declare const Markdown: FC<{
+    md: string;
+    components?: {
+        [index: string]: ReactElement;
+    };
+}>;
+export default Markdown;