@cyvest/cyvest-vis 2.0.1

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@cyvest/cyvest-vis",
+  "version": "2.0.1",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@dagrejs/dagre": "^1.1.4",
+    "@xyflow/react": "^12.5.0",
+    "d3-force": "^3.0.0",
+    "@cyvest/cyvest-js": "2.0.1"
+  },
+  "devDependencies": {
+    "@types/d3-force": "^3.0.10",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.0.0",
+    "typescript": "^5.6.0",
+    "vitest": "^2.0.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --dts --format cjs,esm --external react --external react-dom",
+    "test": "vitest",
+    "test:ci": "vitest run --reporter=dot"
+  }
+}

package/src/components/CyvestGraph.tsx

@@ -0,0 +1,117 @@
+/**
+ * CyvestGraph component - combined view with toggle between observables and investigation views.
+ */
+
+import React, { useState, useCallback } from "react";
+import type { CyvestGraphProps, InvestigationNodeType } from "../types";
+import { ObservablesGraph } from "./ObservablesGraph";
+import { InvestigationGraph } from "./InvestigationGraph";
+
+/**
+ * View toggle button component.
+ */
+const ViewToggle: React.FC<{
+  currentView: "observables" | "investigation";
+  onChange: (view: "observables" | "investigation") => void;
+}> = ({ currentView, onChange }) => {
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 10,
+        left: 10,
+        display: "flex",
+        gap: 4,
+        background: "white",
+        padding: 4,
+        borderRadius: 8,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+        zIndex: 10,
+        fontFamily: "system-ui, sans-serif",
+      }}
+    >
+      <button
+        onClick={() => onChange("observables")}
+        style={{
+          padding: "6px 12px",
+          border: "none",
+          borderRadius: 4,
+          cursor: "pointer",
+          fontSize: 12,
+          fontWeight: currentView === "observables" ? 600 : 400,
+          background: currentView === "observables" ? "#3b82f6" : "#f3f4f6",
+          color: currentView === "observables" ? "white" : "#374151",
+        }}
+      >
+        Observables
+      </button>
+      <button
+        onClick={() => onChange("investigation")}
+        style={{
+          padding: "6px 12px",
+          border: "none",
+          borderRadius: 4,
+          cursor: "pointer",
+          fontSize: 12,
+          fontWeight: currentView === "investigation" ? 600 : 400,
+          background: currentView === "investigation" ? "#3b82f6" : "#f3f4f6",
+          color: currentView === "investigation" ? "white" : "#374151",
+        }}
+      >
+        Investigation
+      </button>
+    </div>
+  );
+};
+
+/**
+ * CyvestGraph component - provides toggle between ObservablesGraph and InvestigationGraph.
+ */
+export const CyvestGraph: React.FC<CyvestGraphProps> = ({
+  investigation,
+  height = 500,
+  width = "100%",
+  initialView = "observables",
+  onNodeClick,
+  className,
+  showViewToggle = true,
+}) => {
+  const [view, setView] = useState<"observables" | "investigation">(initialView);
+
+  const handleNodeClick = useCallback(
+    (nodeId: string, _nodeType?: InvestigationNodeType) => {
+      onNodeClick?.(nodeId);
+    },
+    [onNodeClick]
+  );
+
+  return (
+    <div
+      className={className}
+      style={{
+        width,
+        height,
+        position: "relative",
+      }}
+    >
+      {showViewToggle && <ViewToggle currentView={view} onChange={setView} />}
+
+      {view === "observables" ? (
+        <ObservablesGraph
+          investigation={investigation}
+          height="100%"
+          width="100%"
+          onNodeClick={handleNodeClick}
+          showControls={true}
+        />
+      ) : (
+        <InvestigationGraph
+          investigation={investigation}
+          height="100%"
+          width="100%"
+          onNodeClick={handleNodeClick}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/FloatingEdge.tsx

@@ -0,0 +1,43 @@
+/**
+ * Floating Edge component for use with force-directed layout.
+ * Uses simple straight lines that connect to node edges.
+ */
+
+import React, { memo } from "react";
+import { BaseEdge, getStraightPath, type EdgeProps } from "@xyflow/react";
+
+/**
+ * Floating edge component that uses straight lines.
+ * React Flow passes sourceX, sourceY, targetX, targetY based on node positions.
+ */
+function FloatingEdgeComponent({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  style,
+  markerEnd,
+}: EdgeProps) {
+  const [edgePath] = getStraightPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  });
+
+  return (
+    <BaseEdge
+      id={id}
+      path={edgePath}
+      style={{
+        strokeWidth: 1.5,
+        stroke: "#94a3b8",
+        ...style,
+      }}
+      markerEnd={markerEnd}
+    />
+  );
+}
+
+export const FloatingEdge = memo(FloatingEdgeComponent);

package/src/components/InvestigationGraph.tsx

@@ -0,0 +1,257 @@
+/**
+ * InvestigationGraph component - displays investigation structure with Dagre layout.
+ * Shows root observable, checks, and containers in a hierarchical view.
+ */
+
+import React, { useMemo, useCallback } from "react";
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  type Node,
+  type Edge,
+  type NodeTypes,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+
+import type { CyvestInvestigation, Check, Container } from "@cyvest/cyvest-js";
+import { findRootObservables } from "@cyvest/cyvest-js";
+
+import type {
+  InvestigationGraphProps,
+  InvestigationNodeData,
+  InvestigationNodeType,
+} from "../types";
+import { InvestigationNode } from "./InvestigationNode";
+import {
+  getInvestigationNodeEmoji,
+  getLevelColor,
+  truncateLabel,
+} from "../utils/observables";
+import { computeDagreLayout } from "../hooks/useDagreLayout";
+
+/**
+ * Custom node types for React Flow.
+ */
+const nodeTypes: NodeTypes = {
+  investigation: InvestigationNode,
+};
+
+/**
+ * Flatten containers recursively to get all container keys.
+ */
+function flattenContainers(
+  containers: Record<string, Container>
+): Container[] {
+  const result: Container[] = [];
+
+  for (const container of Object.values(containers)) {
+    result.push(container);
+    if (container.sub_containers) {
+      result.push(...flattenContainers(container.sub_containers));
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Create investigation graph nodes and edges.
+ */
+function createInvestigationGraph(
+  investigation: CyvestInvestigation
+): { nodes: Node<InvestigationNodeData>[]; edges: Edge[] } {
+  const nodes: Node<InvestigationNodeData>[] = [];
+  const edges: Edge[] = [];
+
+  // Find root observable(s)
+  const roots = findRootObservables(investigation);
+  const primaryRoot = roots.length > 0 ? roots[0] : null;
+
+  // If no root found, use the first observable or create a placeholder
+  const rootKey = primaryRoot?.key ?? "investigation-root";
+  const rootValue = primaryRoot?.value ?? "Investigation";
+  const rootLevel = primaryRoot?.level ?? investigation.level;
+
+  // Create root node
+  const rootNodeData: InvestigationNodeData = {
+    label: truncateLabel(rootValue, 24),
+    nodeType: "root",
+    level: rootLevel,
+    score: primaryRoot?.score ?? investigation.score,
+    emoji: getInvestigationNodeEmoji("root"),
+  };
+
+  nodes.push({
+    id: rootKey,
+    type: "investigation",
+    position: { x: 0, y: 0 },
+    data: rootNodeData,
+  });
+
+  // Add check nodes
+  // Group checks by scope for better organization
+  const allChecks: Check[] = [];
+  for (const checksForKey of Object.values(investigation.checks)) {
+    allChecks.push(...checksForKey);
+  }
+
+  // Create unique check nodes (by check_id to avoid duplicates)
+  const seenCheckIds = new Set<string>();
+  for (const check of allChecks) {
+    if (seenCheckIds.has(check.key)) continue;
+    seenCheckIds.add(check.key);
+
+    const checkNodeData: InvestigationNodeData = {
+      label: truncateLabel(check.check_id, 20),
+      nodeType: "check",
+      level: check.level,
+      score: check.score,
+      description: truncateLabel(check.description, 30),
+      emoji: getInvestigationNodeEmoji("check"),
+    };
+
+    nodes.push({
+      id: `check-${check.key}`,
+      type: "investigation",
+      position: { x: 0, y: 0 },
+      data: checkNodeData,
+    });
+
+    // Edge from root to check
+    edges.push({
+      id: `edge-root-${check.key}`,
+      source: rootKey,
+      target: `check-${check.key}`,
+      type: "default",
+    });
+  }
+
+  // Add container nodes
+  const allContainers = flattenContainers(investigation.containers);
+
+  for (const container of allContainers) {
+    const containerNodeData: InvestigationNodeData = {
+      label: truncateLabel(container.path.split("/").pop() ?? container.path, 20),
+      nodeType: "container",
+      level: container.aggregated_level,
+      score: container.aggregated_score,
+      path: container.path,
+      emoji: getInvestigationNodeEmoji("container"),
+    };
+
+    nodes.push({
+      id: `container-${container.key}`,
+      type: "investigation",
+      position: { x: 0, y: 0 },
+      data: containerNodeData,
+    });
+
+    // Edge from root to container
+    edges.push({
+      id: `edge-root-container-${container.key}`,
+      source: rootKey,
+      target: `container-${container.key}`,
+      type: "default",
+    });
+
+    // Edges from container to its checks
+    for (const checkKey of container.checks) {
+      if (seenCheckIds.has(checkKey)) {
+        edges.push({
+          id: `edge-container-check-${container.key}-${checkKey}`,
+          source: `container-${container.key}`,
+          target: `check-${checkKey}`,
+          type: "default",
+          style: { strokeDasharray: "5,5" },
+        });
+      }
+    }
+  }
+
+  return { nodes, edges };
+}
+
+/**
+ * InvestigationGraph component.
+ * Displays investigation structure with horizontal Dagre layout.
+ */
+export const InvestigationGraph: React.FC<InvestigationGraphProps> = ({
+  investigation,
+  height = 500,
+  width = "100%",
+  onNodeClick,
+  className,
+}) => {
+  // Create initial graph structure
+  const { initialNodes, initialEdges } = useMemo(() => {
+    const { nodes, edges } = createInvestigationGraph(investigation);
+    return { initialNodes: nodes, initialEdges: edges };
+  }, [investigation]);
+
+  // Apply Dagre layout
+  const { nodes: layoutNodes, edges: layoutEdges } = useMemo(() => {
+    return computeDagreLayout(initialNodes, initialEdges, {
+      direction: "LR",
+      nodeSpacing: 30,
+      rankSpacing: 120,
+    });
+  }, [initialNodes, initialEdges]);
+
+  // React Flow state
+  const [nodes, setNodes, onNodesChange] = useNodesState(layoutNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(layoutEdges);
+
+  // Update nodes when layout changes
+  React.useEffect(() => {
+    setNodes(layoutNodes);
+    setEdges(layoutEdges);
+  }, [layoutNodes, layoutEdges, setNodes, setEdges]);
+
+  // Handle node click
+  const handleNodeClick = useCallback(
+    (_: React.MouseEvent, node: Node) => {
+      const data = node.data as unknown as InvestigationNodeData;
+      onNodeClick?.(node.id, data.nodeType);
+    },
+    [onNodeClick]
+  );
+
+  // MiniMap node color based on level
+  const miniMapNodeColor = useCallback((node: Node) => {
+    const data = node.data as unknown as InvestigationNodeData;
+    return getLevelColor(data.level);
+  }, []);
+
+  return (
+    <div
+      className={className}
+      style={{
+        width,
+        height,
+        position: "relative",
+      }}
+    >
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={handleNodeClick}
+        nodeTypes={nodeTypes}
+        fitView
+        fitViewOptions={{ padding: 0.2 }}
+        minZoom={0.1}
+        maxZoom={2}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background />
+        <Controls />
+        <MiniMap nodeColor={miniMapNodeColor} zoomable pannable />
+      </ReactFlow>
+    </div>
+  );
+};

package/src/components/InvestigationNode.tsx

@@ -0,0 +1,145 @@
+/**
+ * Custom node component for the Investigation Graph (Dagre layout).
+ * Renders root, check, and container nodes.
+ */
+
+import React, { memo } from "react";
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import type { InvestigationNodeData } from "../types";
+import { getLevelColor, getLevelBackgroundColor } from "../utils/observables";
+
+/**
+ * Investigation node component.
+ */
+function InvestigationNodeComponent({
+  data,
+  selected,
+}: NodeProps) {
+  const nodeData = data as unknown as InvestigationNodeData;
+  const {
+    label,
+    emoji,
+    nodeType,
+    level,
+    description,
+  } = nodeData;
+
+  const borderColor = getLevelColor(level);
+  const backgroundColor = getLevelBackgroundColor(level);
+
+  // Different styles based on node type
+  const getNodeStyle = () => {
+    switch (nodeType) {
+      case "root":
+        return {
+          minWidth: 120,
+          padding: "8px 16px",
+          borderRadius: 8,
+          fontWeight: 600 as const,
+        };
+      case "check":
+        return {
+          minWidth: 100,
+          padding: "6px 12px",
+          borderRadius: 4,
+          fontWeight: 400 as const,
+        };
+      case "container":
+        return {
+          minWidth: 100,
+          padding: "6px 12px",
+          borderRadius: 12,
+          fontWeight: 400 as const,
+        };
+      default:
+        return {
+          minWidth: 80,
+          padding: "6px 12px",
+          borderRadius: 4,
+          fontWeight: 400 as const,
+        };
+    }
+  };
+
+  const style = getNodeStyle();
+
+  return (
+    <div
+      className="investigation-node"
+      style={{
+        ...style,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        backgroundColor,
+        border: `${selected ? 3 : 2}px solid ${borderColor}`,
+        cursor: "pointer",
+        fontFamily: "system-ui, sans-serif",
+      }}
+    >
+      {/* Header with emoji and label */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+        }}
+      >
+        <span style={{ fontSize: 14 }}>{emoji}</span>
+        <span
+          style={{
+            fontSize: 12,
+            fontWeight: style.fontWeight,
+            maxWidth: 150,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+          title={label}
+        >
+          {label}
+        </span>
+      </div>
+
+      {/* Description for checks */}
+      {description && (
+        <div
+          style={{
+            marginTop: 4,
+            fontSize: 10,
+            color: "#6b7280",
+            maxWidth: 140,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+          title={description}
+        >
+          {description}
+        </div>
+      )}
+
+      {/* Handles for edges */}
+      <Handle
+        type="target"
+        position={Position.Left}
+        style={{
+          width: 8,
+          height: 8,
+          background: borderColor,
+        }}
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{
+          width: 8,
+          height: 8,
+          background: borderColor,
+        }}
+      />
+    </div>
+  );
+}
+
+export const InvestigationNode = memo(InvestigationNodeComponent);