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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,121 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme } from "@mui/material";
+import { d as d3, S as Spectral } from "../../../../../index-DJYqRcxJ.js";
+import { useMyLocalStorageItem } from "../../../../../hooks/useMyLocalStorage.js";
+import { StorageKey } from "../../../../../utils/constants.js";
+import { buildHorizontalLine, buildVerticalLine } from "../../../../../utils/line.js";
+import { i as isNil } from "../../../../../isNil-CIubwp4T.js";
+import { useMemo } from "react";
+import { cyrb53 } from "../../../../../utils/graph.js";
+const BundleLine = ({
+  bundle,
+  linesByLevel,
+  paddingByLevel,
+  maxArcRadius,
+  lineWidth,
+  linePaddingX,
+  linePaddingY,
+  highlightedPath,
+  nodeLocations,
+  inputsByNode,
+  outputsByNode,
+  lineDirection,
+  colorTheme
+}) => {
+  const theme = useTheme();
+  const [colorSetting] = useMyLocalStorageItem(StorageKey.COLOR_SCHEME, "Spectral");
+  const [forceColorSetting] = useMyLocalStorageItem(StorageKey.FORCE_COLOR_SETTING, "Spectral");
+  const colorScheme = useMemo(
+    () => forceColorSetting ? colorSetting : colorTheme || colorSetting,
+    [colorSetting, colorTheme, forceColorSetting]
+  );
+  const color = useMemo(
+    () => (d3[`interpolate${colorScheme}`] ?? Spectral)(cyrb53(JSON.stringify(bundle))),
+    [bundle, colorScheme]
+  );
+  const opacities = useMemo(
+    () => (_bundle) => highlightedPath.size === 0 || _bundle.sources.some((source) => highlightedPath.has(source.id)) && _bundle.destinations.some((destination) => highlightedPath.has(destination.id)) ? 1 : 0.2,
+    [highlightedPath]
+  );
+  const arrows = [];
+  const d = bundle.sources.flatMap((source) => {
+    const result = bundle.destinations.flatMap((dest) => {
+      var _a, _b;
+      linesByLevel[dest.level].delete(bundle.id);
+      const [parentX, rawParentY] = nodeLocations[source.id];
+      const parentY = rawParentY + (((_a = outputsByNode[source.id]) == null ? void 0 : _a.size) ?? 0) * linePaddingY;
+      const [childX, rawChildY, childHeight] = nodeLocations[dest.id];
+      const childY = rawChildY + (((_b = inputsByNode[dest.id]) == null ? void 0 : _b.size) ?? 0 + +(source.id === dest.id)) * linePaddingY;
+      const distanceX = childX - parentX;
+      const distanceY = childY - parentY;
+      const arcRadius = Math.min(Math.abs(distanceY / 3), maxArcRadius);
+      if (lineDirection === "horizontal") {
+        return buildHorizontalLine({
+          paddingAtLevel: paddingByLevel[dest.level],
+          numLines: linesByLevel[dest.level].size,
+          nodeLocations,
+          dest,
+          distanceX,
+          distanceY,
+          childX,
+          childY,
+          childHeight,
+          parentX,
+          parentY,
+          linePaddingX,
+          arcRadius
+        });
+      } else {
+        return buildVerticalLine({
+          paddingAtLevel: paddingByLevel[dest.level],
+          numLines: linesByLevel[dest.level].size,
+          distanceX,
+          distanceY,
+          childX,
+          childY,
+          childHeight,
+          parentX,
+          parentY,
+          linePaddingX,
+          arcRadius
+        });
+      }
+    });
+    return result;
+  }).join("\n");
+  bundle.destinations.forEach((dest) => {
+    if (isNil(inputsByNode[dest.id])) {
+      inputsByNode[dest.id] = /* @__PURE__ */ new Set();
+    }
+    inputsByNode[dest.id].add(bundle.id);
+  });
+  bundle.sources.forEach((source) => {
+    if (isNil(outputsByNode[source.id])) {
+      outputsByNode[source.id] = /* @__PURE__ */ new Set();
+    }
+    outputsByNode[source.id].add(bundle.id);
+  });
+  return /* @__PURE__ */ jsxs("g", { className: "path", style: { opacity: opacities(bundle) }, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d,
+        style: { fill: "none", stroke: theme.palette.background.paper, strokeWidth: lineWidth + 3 }
+      },
+      bundle.id + "-bg"
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d,
+        strokeWidth: lineWidth,
+        style: { fill: "none", stroke: color, strokeWidth: lineWidth }
+      },
+      bundle.id + "-fg"
+    ),
+    arrows
+  ] }, bundle.id);
+};
+export {
+  BundleLine as default
+};

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+declare const Triangle: FC<{
+    x: number;
+    y: number;
+    fill: string;
+    lineWidth: number;
+}>;
+export default Triangle;

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

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme } from "@mui/material";
+const Triangle = ({ x, y, fill, lineWidth }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs("g", { className: "arrow", children: [
+    /* @__PURE__ */ jsx(
+      "polygon",
+      {
+        points: `${x},${y - 1.5 * lineWidth} ${x - 2 * lineWidth},${y + 1.5 * lineWidth} ${x + 2 * lineWidth},${y + 1.5 * lineWidth}`,
+        style: { fill },
+        stroke: theme.palette.background.paper,
+        strokeWidth: 2
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "polygon",
+      {
+        points: `${x - lineWidth / 2},${y - 2 * lineWidth} ${x + lineWidth / 2},${y - 2 * lineWidth} ${x + lineWidth / 2},${y + 2 * lineWidth} ${x - lineWidth / 2},${y + 2 * lineWidth}`,
+        style: { fill }
+      }
+    )
+  ] });
+};
+export {
+  Triangle as default
+};

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

@@ -0,0 +1,36 @@
+import { NestedDataset, ZoomField } from "../../../../../types/graph";
+import { MutableRefObject } from 'react';
+
+interface TreeOptions {
+    textColor: string;
+    nodeColor: {
+        border: string;
+        center: string;
+    };
+    letterSize: number;
+    letterWidth: number;
+    xSpacing: number;
+    ySpacing: number;
+    nodeRadius: number;
+    maxArcRadius: number;
+    linePaddingX: number;
+    linePaddingY: number;
+    lineWidth: number;
+    enableEntryPadding: boolean;
+    truncateLabels: boolean;
+    enableTimestamps: boolean;
+    rowStep: number;
+    belowPrevious: boolean;
+    iconOrientation: 'horizontal' | 'vertical';
+    lineDirection: 'horizontal' | 'vertical';
+    colorTheme?: string;
+}
+declare const _default: import('react').NamedExoticComponent<{
+    svgRef?: MutableRefObject<SVGSVGElement>;
+    graph: NestedDataset;
+    labelKeys: ZoomField[];
+    onNodeSelectionChanged: (nodeIds: string[]) => void;
+    options?: Partial<TreeOptions>;
+    zoom: d3.ZoomTransform;
+}>;
+export default _default;