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

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

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

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

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

@@ -1,141 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { o as ordinal, d as d3, S as Spectral, a as index, h as hierarchy } from "../../../../../index-DJYqRcxJ.js";
-import useMyHighlights from "../../../../../hooks/useMyHighlights.js";
-import { useMyLocalStorageItem } from "../../../../../hooks/useMyLocalStorage.js";
-import { StorageKey } from "../../../../../utils/constants.js";
-import { cyrb53 } from "../../../../../utils/graph.js";
-import { c as countBy } from "../../../../../countBy-C69WslUA.js";
-import { s as sumBy } from "../../../../../sumBy-MYkDPHZL.js";
-import { memo, useRef, useMemo, useCallback } from "react";
-import Leaf from "../Leaf.js";
-const DEFAULT_OPTIONS = {
-  width: "100%",
-  backgroundColor: "grey",
-  textColor: "black",
-  nodeColor: {
-    border: "black",
-    center: "white"
-  },
-  letterSize: 12,
-  letterWidth: 8,
-  nodeRadius: 8,
-  lineWidth: 2,
-  circlePadding: null
-  // We'll make this dynamic
-};
-DEFAULT_OPTIONS.circlePadding = 3 * DEFAULT_OPTIONS.nodeRadius;
-const Cloud = ({ svgRef, graph, options = {} }) => {
-  const {
-    width,
-    backgroundColor,
-    textColor,
-    letterSize,
-    letterWidth,
-    circlePadding,
-    nodeRadius,
-    nodeColor,
-    lineWidth
-  } = {
-    ...DEFAULT_OPTIONS,
-    ...options
-  };
-  const { onNodeHoveredChanged, onNodeClicked, nodeOpacities, highlightedPath } = useMyHighlights(graph);
-  const [colorScheme] = useMyLocalStorageItem(StorageKey.COLOR_SCHEME, "Spectral");
-  const currentX = useRef(2 * nodeRadius);
-  const currentY = useRef(letterSize + nodeRadius);
-  const nodeLocations = useRef({});
-  const nodes = useMemo(
-    () => graph.data.flatMap(
-      (cloud, cloudIndex) => cloud.map((node) => ({
-        ...node,
-        cloud: cloudIndex.toString()
-      }))
-    ),
-    [graph.data]
-  );
-  const clouds = useMemo(() => countBy(nodes, (node) => node.cloud), [nodes]);
-  const colors = useMemo(
-    () => ordinal(
-      Object.keys(clouds).map((cloud) => (d3[`interpolate${colorScheme}`] ?? Spectral)(cyrb53(cloud)))
-    ),
-    [clouds, colorScheme]
-  );
-  const links = useMemo(
-    () => nodes.flatMap(
-      (node) => ((node == null ? void 0 : node.edges) ?? []).map((parent) => ({
-        source: node.id,
-        target: parent
-      }))
-    ),
-    [nodes]
-  );
-  const pack = useMemo(() => index().size([600, 600]).padding(circlePadding), [circlePadding]);
-  const cloudLocations = useMemo(() => {
-    const data = Object.entries(clouds).map(([id]) => ({
-      id,
-      children: nodes.filter((node) => node.cloud === id).map((node) => ({
-        ...node,
-        value: 1
-      }))
-    }));
-    return pack(
-      hierarchy({ children: data }).sum((d) => d.children ? sumBy(d.children, (c) => c.value) : d.value)
-    ).children;
-  }, [clouds, nodes, pack]);
-  const opacities = useCallback(
-    (link) => highlightedPath.size === 0 || highlightedPath.has(link.source) && highlightedPath.has(link.target) ? 1 : 0.2,
-    [highlightedPath]
-  );
-  currentX.current = 2 * nodeRadius;
-  currentY.current = letterSize + nodeRadius;
-  nodeLocations.current = {};
-  return /* @__PURE__ */ jsx("svg", { id: "viz", ref: svgRef, width, height: 600, style: { backgroundColor }, children: /* @__PURE__ */ jsxs("g", { id: "view", children: [
-    cloudLocations.map((cloud) => /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("circle", { cx: cloud.x, cy: cloud.y, r: cloud.r, strokeWidth: 4, stroke: colors(cloud.data.id), fill: "none" }) }, cloud.data.id)),
-    links.map((link) => {
-      const source = cloudLocations.flatMap((c) => c.children).find((node) => node.data.id === link.source);
-      const target = cloudLocations.flatMap((c) => c.children).find((node) => node.data.id === link.target);
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: `M ${source.x} ${source.y} L ${target.x} ${target.y}`,
-            stroke: "black",
-            strokeWidth: lineWidth + 3,
-            strokeOpacity: opacities(link)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: `M ${source.x} ${source.y} L ${target.x} ${target.y}`,
-            stroke: "white",
-            strokeWidth: lineWidth,
-            strokeOpacity: opacities(link)
-          }
-        )
-      ] }, source.data.id + target.data.id);
-    }),
-    cloudLocations.map((cloud) => /* @__PURE__ */ jsx("g", { children: cloud.children.map((node) => /* @__PURE__ */ jsx(
-      Leaf,
-      {
-        nodeId: node.data.id,
-        height: 0,
-        x: node.x,
-        y: node.y,
-        nodeRadius,
-        nodeColor,
-        nodeOpacity: nodeOpacities(node.data.id),
-        letterSize,
-        letterWidth,
-        textColor,
-        onHoverChanged: onNodeHoveredChanged,
-        onClick: onNodeClicked
-      },
-      node.data.id
-    )) }, cloud.id))
-  ] }) });
-};
-const Cloud$1 = memo(Cloud);
-export {
-  Cloud$1 as default
-};

package/components/display/graph/visualizations/icons/BaseIcon.d.ts

@@ -1,12 +0,0 @@
-import { CSSProperties, FC, SVGProps } from 'react';
-
-export interface IconProps extends SVGProps<SVGSVGElement> {
-    x?: number;
-    y?: number;
-    width?: number;
-    height?: number;
-    size?: number;
-    circleStyle?: CSSProperties;
-}
-declare const BaseIcon: FC<IconProps>;
-export default BaseIcon;

package/components/display/graph/visualizations/icons/BaseIcon.js

@@ -1,37 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-const DEFAULTS = {
-  size: 20
-};
-const BaseIcon = (props) => {
-  const { width, height, size } = {
-    ...DEFAULTS,
-    ...props
-  };
-  const x = (props.x ?? 0) - (width ?? size) / 2;
-  const y = (props.y ?? 0) - (height ?? size) / 2;
-  const trimmedProps = useMemo(() => {
-    const _props = { ...props };
-    delete _props.circleStyle;
-    return _props;
-  }, [props]);
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("circle", { cx: props.x, cy: props.y, r: size / 2, style: props.circleStyle ?? {} }),
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 -960 960 960",
-        width: width ?? size,
-        height: height ?? size,
-        ...trimmedProps,
-        x,
-        y,
-        children: props.children
-      }
-    )
-  ] });
-};
-export {
-  BaseIcon as default
-};

package/components/display/graph/visualizations/icons/BugIcon.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import { IconProps } from './BaseIcon';
-
-declare const BugIcon: FC<IconProps>;
-export default BugIcon;

package/components/display/graph/visualizations/icons/BugIcon.js

@@ -1,18 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-import BaseIcon from "./BaseIcon.js";
-const BugIcon = (props) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    BaseIcon,
-    {
-      ...props,
-      style: { fill: theme.palette.getContrastText(theme.palette.error.dark), ...props.style },
-      circleStyle: { fill: theme.palette.error.dark, ...props.style },
-      children: /* @__PURE__ */ jsx("path", { d: "M480-200q66 0 113-47t47-113v-160q0-66-47-113t-113-47q-66 0-113 47t-47 113v160q0 66 47 113t113 47Zm-80-120h160v-80H400v80Zm0-160h160v-80H400v80Zm80 40Zm0 320q-65 0-120.5-32T272-240H160v-80h84q-3-20-3.5-40t-.5-40h-80v-80h80q0-20 .5-40t3.5-40h-84v-80h112q14-23 31.5-43t40.5-35l-64-66 56-56 86 86q28-9 57-9t57 9l88-86 56 56-66 66q23 15 41.5 34.5T688-640h112v80h-84q3 20 3.5 40t.5 40h80v80h-80q0 20-.5 40t-3.5 40h84v80H688q-32 56-87.5 88T480-120Z" })
-    }
-  );
-};
-export {
-  BugIcon as default
-};

package/components/display/graph/visualizations/icons/HostIcon.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import { IconProps } from './BaseIcon';
-
-declare const HostIcon: FC<IconProps>;
-export default HostIcon;

package/components/display/graph/visualizations/icons/HostIcon.js

@@ -1,24 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-import BaseIcon from "./BaseIcon.js";
-const HostIcon = (props) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    BaseIcon,
-    {
-      ...props,
-      style: { fill: theme.palette.getContrastText(theme.palette.info.dark), ...props.style },
-      circleStyle: { fill: theme.palette.info.dark, ...props.style },
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          style: { transform: "scale(0.75) translateX(16%) translateY(-18%)" },
-          d: "M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"
-        }
-      )
-    }
-  );
-};
-export {
-  HostIcon as default
-};

package/components/display/graph/visualizations/icons/NetworkIcon.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import { IconProps } from './BaseIcon';
-
-declare const NetworkIcon: FC<IconProps>;
-export default NetworkIcon;

package/components/display/graph/visualizations/icons/NetworkIcon.js

@@ -1,24 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-import BaseIcon from "./BaseIcon.js";
-const NetworkIcon = (props) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    BaseIcon,
-    {
-      ...props,
-      style: { fill: theme.palette.getContrastText(theme.palette.info.dark), ...props.style },
-      circleStyle: { fill: theme.palette.info.dark, ...props.style },
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          style: { transform: "scale(0.75) translateX(16%) translateY(-18%)" },
-          d: "M120-80v-280h120v-160h200v-80H320v-280h320v280H520v80h200v160h120v280H520v-280h120v-80H320v80h120v280H120Zm280-600h160v-120H400v120ZM200-160h160v-120H200v120Zm400 0h160v-120H600v120ZM480-680ZM360-280Zm240 0Z"
-        }
-      )
-    }
-  );
-};
-export {
-  NetworkIcon as default
-};

package/components/display/graph/visualizations/icons/ProcessIcon.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import { IconProps } from './BaseIcon';
-
-declare const ProcessIcon: FC<IconProps>;
-export default ProcessIcon;

package/components/display/graph/visualizations/icons/ProcessIcon.js

@@ -1,18 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useTheme, colors } from "@mui/material";
-import BaseIcon from "./BaseIcon.js";
-const ProcessIcon = (props) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    BaseIcon,
-    {
-      ...props,
-      style: { fill: theme.palette.getContrastText(colors.grey[500]), ...props.style },
-      circleStyle: { fill: colors.grey[500], ...props.style },
-      children: /* @__PURE__ */ jsx("path", { d: "M360-360v-240h240v240H360Zm80-80h80v-80h-80v80Zm-80 320v-80h-80q-33 0-56.5-23.5T200-280v-80h-80v-80h80v-80h-80v-80h80v-80q0-33 23.5-56.5T280-760h80v-80h80v80h80v-80h80v80h80q33 0 56.5 23.5T760-680v80h80v80h-80v80h80v80h-80v80q0 33-23.5 56.5T680-200h-80v80h-80v-80h-80v80h-80Zm320-160v-400H280v400h400ZM480-480Z" })
-    }
-  );
-};
-export {
-  ProcessIcon as default
-};

package/components/display/graph/visualizations/icons/TargetIcon.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import { IconProps } from './BaseIcon';
-
-declare const TargetIcon: FC<IconProps>;
-export default TargetIcon;

package/components/display/graph/visualizations/icons/TargetIcon.js

@@ -1,19 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-import BaseIcon from "./BaseIcon.js";
-const TargetIcon = (props) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    BaseIcon,
-    {
-      ...props,
-      ...props,
-      style: { fill: theme.palette.getContrastText(theme.palette.info.dark), ...props.style },
-      circleStyle: { fill: theme.palette.info.dark, ...props.style },
-      children: /* @__PURE__ */ jsx("path", { d: "M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-80q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm0-80q66 0 113-47t47-113q0-66-47-113t-113-47q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-80q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Z" })
-    }
-  );
-};
-export {
-  TargetIcon as default
-};

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

@@ -1,2 +0,0 @@
-declare const getIcon: (icon: string) => any;
-export default getIcon;

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

@@ -1,16 +0,0 @@
-import BugIcon from "./BugIcon.js";
-import HostIcon from "./HostIcon.js";
-import NetworkIcon from "./NetworkIcon.js";
-import ProcessIcon from "./ProcessIcon.js";
-import TargetIcon from "./TargetIcon.js";
-const ICON_MAP = {
-  bug: BugIcon,
-  target: TargetIcon,
-  host: HostIcon,
-  network: NetworkIcon,
-  process: ProcessIcon
-};
-const getIcon = (icon) => ICON_MAP[icon];
-export {
-  getIcon as default
-};

package/components/display/graph/visualizations/panels/NodePanel.d.ts

@@ -1,8 +0,0 @@
-import { RawEntry } from "../../../../../types/graph";
-import { FC } from 'react';
-
-declare const NodePanel: FC<{
-    selectedNodeIds: string[];
-    findNode: (id: string) => RawEntry;
-}>;
-export default NodePanel;

package/components/display/graph/visualizations/panels/NodePanel.js

@@ -1,12 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Skeleton } from "@mui/material";
-import NodeCard from "../../elements/NodeCard.js";
-const NodePanel = ({ selectedNodeIds, findNode }) => {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    selectedNodeIds.map((selectedNodeId) => findNode(selectedNodeId)).filter((node) => !!node).map((node) => /* @__PURE__ */ jsx(NodeCard, { node }, node.id)),
-    selectedNodeIds.length < 1 && /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: 150 })
-  ] });
-};
-export {
-  NodePanel as default
-};

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

@@ -1,29 +0,0 @@
-import { FC } from 'react';
-import { Bundle } from './types';
-
-declare const BundleLine: FC<{
-    bundle: Bundle;
-    linesByLevel: {
-        [level: number]: Set<string>;
-    };
-    paddingByLevel: {
-        [level: number]: number;
-    };
-    nodeLocations: {
-        [id: string]: [number, number, number];
-    };
-    inputsByNode: {
-        [id: string]: Set<string>;
-    };
-    outputsByNode: {
-        [id: string]: Set<string>;
-    };
-    lineWidth: number;
-    linePaddingX: number;
-    linePaddingY: number;
-    maxArcRadius: number;
-    highlightedPath: Set<string>;
-    lineDirection: 'horizontal' | 'vertical';
-    colorTheme?: string;
-}>;
-export default BundleLine;