@cyvest/cyvest-vis 2.0.1

package/src/components/ObservableNode.tsx

@@ -0,0 +1,173 @@
+/**
+ * Custom node component for the Observables Graph.
+ * Renders nodes with different shapes based on observable type.
+ */
+
+import React, { memo } from "react";
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import type { ObservableNodeData, ObservableShape } from "../types";
+import { getLevelColor, getLevelBackgroundColor } from "../utils/observables";
+
+/**
+ * Node size constants - keep small for nice force layout
+ */
+const NODE_SIZE = 28;
+const ROOT_NODE_SIZE = 36;
+
+/**
+ * Observable node component with centered connection points.
+ */
+function ObservableNodeComponent({
+  data,
+  selected,
+}: NodeProps) {
+  const nodeData = data as unknown as ObservableNodeData;
+  const {
+    label,
+    emoji,
+    shape,
+    level,
+    isRoot,
+    whitelisted,
+    fullValue,
+  } = nodeData;
+
+  const size = isRoot ? ROOT_NODE_SIZE : NODE_SIZE;
+  const borderColor = getLevelColor(level);
+  const backgroundColor = getLevelBackgroundColor(level);
+
+  // Get shape styles
+  const getShapeStyle = (): React.CSSProperties => {
+    const baseStyle: React.CSSProperties = {
+      width: size,
+      height: size,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor,
+      border: `${selected ? 3 : 2}px solid ${borderColor}`,
+      opacity: whitelisted ? 0.5 : 1,
+      fontSize: isRoot ? 14 : 12,
+    };
+
+    switch (shape) {
+      case "square":
+        return { ...baseStyle, borderRadius: 4 };
+      case "circle":
+        return { ...baseStyle, borderRadius: "50%" };
+      case "triangle":
+        // Use clip-path for triangle
+        return {
+          ...baseStyle,
+          borderRadius: 0,
+          border: "none",
+          background: `linear-gradient(to bottom right, ${backgroundColor} 50%, transparent 50%)`,
+          clipPath: "polygon(50% 0%, 100% 100%, 0% 100%)",
+          position: "relative",
+        };
+      case "rectangle":
+      default:
+        return { ...baseStyle, width: size * 1.4, borderRadius: 6 };
+    }
+  };
+
+  // For triangle, we need a different approach
+  const isTriangle = shape === "triangle";
+
+  return (
+    <div
+      className="observable-node"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        cursor: "pointer",
+      }}
+    >
+      {/* Shape container */}
+      <div style={{ position: "relative" }}>
+        {isTriangle ? (
+          // Triangle using SVG
+          <svg width={size} height={size} viewBox="0 0 100 100">
+            <polygon
+              points="50,10 90,90 10,90"
+              fill={backgroundColor}
+              stroke={borderColor}
+              strokeWidth={selected ? 6 : 4}
+              opacity={whitelisted ? 0.5 : 1}
+            />
+            <text
+              x="50"
+              y="65"
+              textAnchor="middle"
+              fontSize="32"
+              dominantBaseline="middle"
+            >
+              {emoji}
+            </text>
+          </svg>
+        ) : (
+          // Other shapes using CSS
+          <div style={getShapeStyle()}>
+            <span style={{ userSelect: "none" }}>{emoji}</span>
+          </div>
+        )}
+
+        {/* Center handle for source connections */}
+        <Handle
+          type="source"
+          position={Position.Right}
+          id="source"
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 1,
+            height: 1,
+            background: "transparent",
+            border: "none",
+            opacity: 0,
+          }}
+        />
+        {/* Center handle for target connections */}
+        <Handle
+          type="target"
+          position={Position.Left}
+          id="target"
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 1,
+            height: 1,
+            background: "transparent",
+            border: "none",
+            opacity: 0,
+          }}
+        />
+      </div>
+
+      {/* Label below the shape */}
+      <div
+        style={{
+          marginTop: 2,
+          fontSize: 9,
+          maxWidth: 70,
+          textAlign: "center",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          color: "#374151",
+          fontFamily: "system-ui, sans-serif",
+        }}
+        title={fullValue}
+      >
+        {label}
+      </div>
+    </div>
+  );
+}
+
+export const ObservableNode = memo(ObservableNodeComponent);

package/src/components/ObservablesGraph.tsx

@@ -0,0 +1,376 @@
+/**
+ * ObservablesGraph component - displays observables as a force-directed graph.
+ * Uses iterative d3-force simulation for smooth, interactive layout.
+ */
+
+import React, { useMemo, useCallback, useState } from "react";
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  type Node,
+  type Edge,
+  type NodeTypes,
+  type EdgeTypes,
+  ConnectionMode,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+
+import type { CyvestInvestigation } from "@cyvest/cyvest-js";
+import { getObservableGraph, findRootObservables } from "@cyvest/cyvest-js";
+
+import type {
+  ObservablesGraphProps,
+  ObservableNodeData,
+  ObservableEdgeData,
+  ForceLayoutConfig,
+} from "../types";
+import { DEFAULT_FORCE_CONFIG } from "../types";
+import { ObservableNode } from "./ObservableNode";
+import { FloatingEdge } from "./FloatingEdge";
+import {
+  getObservableEmoji,
+  getObservableShape,
+  truncateLabel,
+  getLevelColor,
+} from "../utils/observables";
+import { useForceLayout } from "../hooks/useForceLayout";
+
+/**
+ * Custom node types for React Flow.
+ */
+const nodeTypes: NodeTypes = {
+  observable: ObservableNode,
+};
+
+/**
+ * Custom edge types for React Flow.
+ */
+const edgeTypes: EdgeTypes = {
+  floating: FloatingEdge,
+};
+
+/**
+ * Convert investigation observables to React Flow nodes.
+ */
+function createObservableNodes(
+  investigation: CyvestInvestigation,
+  rootObservableIds: Set<string>
+): Node<ObservableNodeData>[] {
+  const graph = getObservableGraph(investigation);
+
+  return graph.nodes.map((graphNode, index) => {
+    const isRoot = rootObservableIds.has(graphNode.id);
+    const shape = getObservableShape(graphNode.type, isRoot);
+
+    const nodeData: ObservableNodeData = {
+      label: truncateLabel(graphNode.value, 18),
+      fullValue: graphNode.value,
+      observableType: graphNode.type,
+      level: graphNode.level,
+      score: graphNode.score,
+      emoji: getObservableEmoji(graphNode.type),
+      shape,
+      isRoot,
+      whitelisted: graphNode.whitelisted,
+      internal: graphNode.internal,
+    };
+
+    // Spread initial positions in a circle for better starting layout
+    const angle = (index / graph.nodes.length) * 2 * Math.PI;
+    const radius = isRoot ? 0 : 150;
+
+    return {
+      id: graphNode.id,
+      type: "observable",
+      position: {
+        x: Math.cos(angle) * radius,
+        y: Math.sin(angle) * radius,
+      },
+      data: nodeData,
+    };
+  });
+}
+
+/**
+ * Convert investigation relationships to React Flow edges.
+ */
+function createObservableEdges(
+  investigation: CyvestInvestigation
+): Edge<ObservableEdgeData>[] {
+  const graph = getObservableGraph(investigation);
+
+  return graph.edges.map((graphEdge, index) => {
+    const edgeData: ObservableEdgeData = {
+      relationshipType: graphEdge.type,
+      bidirectional: graphEdge.direction === "bidirectional",
+    };
+
+    return {
+      id: `edge-${graphEdge.source}-${graphEdge.target}-${index}`,
+      source: graphEdge.source,
+      target: graphEdge.target,
+      type: "floating",
+      data: edgeData,
+      style: { stroke: "#94a3b8", strokeWidth: 1.5 },
+    };
+  });
+}
+
+/**
+ * Force controls panel component.
+ */
+const ForceControls: React.FC<{
+  config: ForceLayoutConfig;
+  onChange: (updates: Partial<ForceLayoutConfig>) => void;
+  onRestart: () => void;
+}> = ({ config, onChange, onRestart }) => {
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 10,
+        right: 10,
+        background: "white",
+        padding: 12,
+        borderRadius: 8,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+        fontSize: 12,
+        fontFamily: "system-ui, sans-serif",
+        zIndex: 10,
+        minWidth: 160,
+      }}
+    >
+      <div style={{ fontWeight: 600, marginBottom: 8 }}>Force Layout</div>
+
+      <div style={{ marginBottom: 8 }}>
+        <label style={{ display: "block", marginBottom: 2 }}>
+          Repulsion: {config.chargeStrength}
+        </label>
+        <input
+          type="range"
+          min="-500"
+          max="-50"
+          value={config.chargeStrength}
+          onChange={(e) =>
+            onChange({ chargeStrength: Number(e.target.value) })
+          }
+          style={{ width: "100%" }}
+        />
+      </div>
+
+      <div style={{ marginBottom: 8 }}>
+        <label style={{ display: "block", marginBottom: 2 }}>
+          Link Distance: {config.linkDistance}
+        </label>
+        <input
+          type="range"
+          min="30"
+          max="200"
+          value={config.linkDistance}
+          onChange={(e) =>
+            onChange({ linkDistance: Number(e.target.value) })
+          }
+          style={{ width: "100%" }}
+        />
+      </div>
+
+      <div style={{ marginBottom: 8 }}>
+        <label style={{ display: "block", marginBottom: 2 }}>
+          Collision: {config.collisionRadius}
+        </label>
+        <input
+          type="range"
+          min="10"
+          max="80"
+          value={config.collisionRadius}
+          onChange={(e) =>
+            onChange({ collisionRadius: Number(e.target.value) })
+          }
+          style={{ width: "100%" }}
+        />
+      </div>
+
+      <button
+        onClick={onRestart}
+        style={{
+          width: "100%",
+          padding: "6px 12px",
+          border: "none",
+          borderRadius: 4,
+          background: "#3b82f6",
+          color: "white",
+          cursor: "pointer",
+          fontSize: 12,
+        }}
+      >
+        Restart Simulation
+      </button>
+    </div>
+  );
+};
+
+/**
+ * Inner component that uses the force layout hook.
+ * Must be wrapped in ReactFlowProvider.
+ */
+const ObservablesGraphInner: React.FC<
+  ObservablesGraphProps & {
+    initialNodes: Node[];
+    initialEdges: Edge[];
+    primaryRootId?: string;
+  }
+> = ({
+  initialNodes,
+  initialEdges,
+  primaryRootId,
+  height,
+  width,
+  forceConfig: initialForceConfig = {},
+  onNodeClick,
+  onNodeDoubleClick,
+  className,
+  showControls = true,
+}) => {
+  // Force config state
+  const [forceConfig, setForceConfig] = useState<ForceLayoutConfig>({
+    ...DEFAULT_FORCE_CONFIG,
+    ...initialForceConfig,
+  });
+
+  // React Flow state - initialized with initial nodes/edges
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  // Set initial nodes/edges when they change
+  React.useEffect(() => {
+    setNodes(initialNodes);
+    setEdges(initialEdges);
+  }, [initialNodes, initialEdges, setNodes, setEdges]);
+
+  // Use the iterative force layout hook
+  const {
+    onNodeDragStart,
+    onNodeDrag,
+    onNodeDragStop,
+    updateForceConfig,
+    restartSimulation,
+  } = useForceLayout(forceConfig, primaryRootId);
+
+  // Handle node click
+  const handleNodeClick = useCallback(
+    (_: React.MouseEvent, node: Node) => {
+      onNodeClick?.(node.id);
+    },
+    [onNodeClick]
+  );
+
+  // Handle node double click
+  const handleNodeDoubleClick = useCallback(
+    (_: React.MouseEvent, node: Node) => {
+      onNodeDoubleClick?.(node.id);
+    },
+    [onNodeDoubleClick]
+  );
+
+  // Handle force config update
+  const handleConfigChange = useCallback(
+    (updates: Partial<ForceLayoutConfig>) => {
+      setForceConfig((prev) => ({ ...prev, ...updates }));
+      updateForceConfig(updates);
+    },
+    [updateForceConfig]
+  );
+
+  // MiniMap node color based on level
+  const miniMapNodeColor = useCallback((node: Node) => {
+    const data = node.data as unknown as ObservableNodeData;
+    return getLevelColor(data.level);
+  }, []);
+
+  return (
+    <div
+      className={className}
+      style={{
+        width,
+        height,
+        position: "relative",
+      }}
+    >
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={handleNodeClick}
+        onNodeDoubleClick={handleNodeDoubleClick}
+        onNodeDragStart={onNodeDragStart}
+        onNodeDrag={onNodeDrag}
+        onNodeDragStop={onNodeDragStop}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        connectionMode={ConnectionMode.Loose}
+        fitView
+        fitViewOptions={{ padding: 0.3 }}
+        minZoom={0.1}
+        maxZoom={2}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background />
+        <Controls />
+        <MiniMap nodeColor={miniMapNodeColor} zoomable pannable />
+      </ReactFlow>
+
+      {showControls && (
+        <ForceControls
+          config={forceConfig}
+          onChange={handleConfigChange}
+          onRestart={restartSimulation}
+        />
+      )}
+    </div>
+  );
+};
+
+/**
+ * ObservablesGraph component.
+ * Displays all observables from an investigation as a force-directed graph.
+ * Wraps the inner component with ReactFlowProvider for hook access.
+ */
+export const ObservablesGraph: React.FC<ObservablesGraphProps> = (props) => {
+  const { investigation } = props;
+
+  // Find root observables
+  const rootObservables = useMemo(() => {
+    const roots = findRootObservables(investigation);
+    return new Set(roots.map((r) => r.key));
+  }, [investigation]);
+
+  // Get first root for centering
+  const primaryRootId = useMemo(() => {
+    const roots = findRootObservables(investigation);
+    return roots.length > 0 ? roots[0].key : undefined;
+  }, [investigation]);
+
+  // Create initial nodes and edges
+  const { initialNodes, initialEdges } = useMemo(() => {
+    const nodes = createObservableNodes(investigation, rootObservables);
+    const edges = createObservableEdges(investigation);
+    return { initialNodes: nodes, initialEdges: edges };
+  }, [investigation, rootObservables]);
+
+  return (
+    <ReactFlowProvider>
+      <ObservablesGraphInner
+        {...props}
+        initialNodes={initialNodes}
+        initialEdges={initialEdges}
+        primaryRootId={primaryRootId}
+      />
+    </ReactFlowProvider>
+  );
+};

package/src/hooks/useDagreLayout.ts

@@ -0,0 +1,102 @@
+/**
+ * Hook for computing Dagre layout (hierarchical).
+ */
+
+import { useMemo } from "react";
+import Dagre from "@dagrejs/dagre";
+import type { Node, Edge } from "@xyflow/react";
+
+/**
+ * Dagre layout options.
+ */
+export interface DagreLayoutOptions {
+  /** Direction of the layout: TB (top-bottom), BT, LR (left-right), RL */
+  direction?: "TB" | "BT" | "LR" | "RL";
+  /** Horizontal spacing between nodes */
+  nodeSpacing?: number;
+  /** Vertical spacing between ranks */
+  rankSpacing?: number;
+}
+
+const DEFAULT_OPTIONS: Required<DagreLayoutOptions> = {
+  direction: "LR", // Horizontal layout by default
+  nodeSpacing: 50,
+  rankSpacing: 100,
+};
+
+/**
+ * Apply Dagre layout to nodes and edges.
+ */
+export function computeDagreLayout(
+  nodes: Node[],
+  edges: Edge[],
+  options: DagreLayoutOptions = {}
+): { nodes: Node[]; edges: Edge[] } {
+  if (nodes.length === 0) {
+    return { nodes, edges };
+  }
+
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+
+  // Create dagre graph
+  const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+
+  g.setGraph({
+    rankdir: opts.direction,
+    nodesep: opts.nodeSpacing,
+    ranksep: opts.rankSpacing,
+    marginx: 20,
+    marginy: 20,
+  });
+
+  // Add nodes to graph
+  for (const node of nodes) {
+    // Estimate node dimensions
+    const width = node.measured?.width ?? 150;
+    const height = node.measured?.height ?? 50;
+    g.setNode(node.id, { width, height });
+  }
+
+  // Add edges to graph
+  for (const edge of edges) {
+    g.setEdge(edge.source, edge.target);
+  }
+
+  // Compute layout
+  Dagre.layout(g);
+
+  // Update node positions
+  const positionedNodes = nodes.map((node) => {
+    const dagNode = g.node(node.id);
+    // Dagre returns center positions, adjust for React Flow (top-left)
+    const width = node.measured?.width ?? 150;
+    const height = node.measured?.height ?? 50;
+    return {
+      ...node,
+      position: {
+        x: dagNode.x - width / 2,
+        y: dagNode.y - height / 2,
+      },
+    };
+  });
+
+  return { nodes: positionedNodes, edges };
+}
+
+/**
+ * Hook for Dagre layout computation.
+ */
+export function useDagreLayout(
+  initialNodes: Node[],
+  initialEdges: Edge[],
+  options: DagreLayoutOptions = {}
+): {
+  nodes: Node[];
+  edges: Edge[];
+} {
+  const { nodes, edges } = useMemo(() => {
+    return computeDagreLayout(initialNodes, initialEdges, options);
+  }, [initialNodes, initialEdges, options]);
+
+  return { nodes, edges };
+}