@cyvest/cyvest-vis 4.0.0 → 4.1.0

package/src/hooks/useForceLayout.ts

@@ -1,6 +1,6 @@
 /**
  * Hook for computing force-directed layout using d3-force.
- * Uses an iterative simulation that updates on each tick.
+ * Uses a stable simulation that persists across renders.
  */
 
 import { useEffect, useRef, useCallback, useMemo } from "react";
@@ -46,10 +46,12 @@ interface SimLink extends SimulationLinkDatum<SimNode> {
 }
 
 /**
- * Selector to check if nodes are initialized
+ * Selector to get node IDs for change detection
  */
-const nodeCountSelector = (state: { nodeLookup: Map<string, Node> }) =>
-  state.nodeLookup.size;
+const nodeIdsSelector = (state: { nodeLookup: Map<string, Node> }) => {
+  const ids = Array.from(state.nodeLookup.keys()).sort();
+  return ids.join(",");
+};
 
 /**
  * Hook that applies iterative force-directed layout to React Flow nodes.
@@ -61,7 +63,7 @@ export function useForceLayout(
 ) {
   const { getNodes, getEdges, setNodes } = useReactFlow();
   const nodesInitialized = useNodesInitialized();
-  const nodeCount = useStore(nodeCountSelector);
+  const nodeIds = useStore(nodeIdsSelector);
 
   // Merge config with defaults
   const forceConfig = useMemo(
@@ -72,29 +74,57 @@ export function useForceLayout(
   // Store the simulation reference
   const simulationRef = useRef<Simulation<SimNode, SimLink> | null>(null);
 
-  // Store dragging state
-  const draggingNodeRef = useRef<string | null>(null);
+  // Track dragging state with ref for immediate access
+  const draggingRef = useRef<{
+    nodeId: string | null;
+    active: boolean;
+  }>({ nodeId: null, active: false });
+
+  // Store node positions in a ref to avoid React state conflicts during drag
+  const nodePositionsRef = useRef<Map<string, { x: number; y: number }>>(
+    new Map()
+  );
+
+  // Animation frame ref for smooth updates
+  const rafRef = useRef<number | null>(null);
 
   // Initialize and run the simulation
   useEffect(() => {
-    if (!nodesInitialized || nodeCount === 0) {
+    if (!nodesInitialized || !nodeIds) {
       return;
     }
 
     const nodes = getNodes();
     const edges = getEdges();
 
+    if (nodes.length === 0) {
+      return;
+    }
+
     // Create simulation nodes from React Flow nodes
     const simNodes: SimNode[] = nodes.map((node) => {
       // Check if this node already exists in the simulation
-      const existingNode = simulationRef.current?.nodes().find((n) => n.id === node.id);
+      const existingNode = simulationRef.current
+        ?.nodes()
+        .find((n) => n.id === node.id);
+
+      // Use existing position if available, otherwise use node position
+      const x =
+        existingNode?.x ??
+        nodePositionsRef.current.get(node.id)?.x ??
+        node.position.x ??
+        Math.random() * 500 - 250;
+      const y =
+        existingNode?.y ??
+        nodePositionsRef.current.get(node.id)?.y ??
+        node.position.y ??
+        Math.random() * 500 - 250;
 
       return {
         id: node.id,
-        // Use existing simulation position or node position
-        x: existingNode?.x ?? node.position.x ?? Math.random() * 500 - 250,
-        y: existingNode?.y ?? node.position.y ?? Math.random() * 500 - 250,
-        // Preserve fixed positions for dragged nodes
+        x,
+        y,
+        // Preserve fixed positions for dragged nodes or root
         fx: existingNode?.fx ?? null,
         fy: existingNode?.fy ?? null,
       };
@@ -122,6 +152,12 @@ export function useForceLayout(
       simulationRef.current.stop();
     }
 
+    // Cancel any pending animation frame
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+
     // Create the force simulation
     const simulation = forceSimulation<SimNode>(simNodes)
       .force(
@@ -129,38 +165,45 @@ export function useForceLayout(
         forceLink<SimNode, SimLink>(simLinks)
           .id((d) => d.id)
           .distance(forceConfig.linkDistance)
-          .strength(0.5)
+          .strength(0.4)
       )
       .force(
         "charge",
         forceManyBody<SimNode>().strength(forceConfig.chargeStrength)
       )
-      .force(
-        "center",
-        forceCenter(0, 0).strength(forceConfig.centerStrength)
-      )
-      .force(
-        "collision",
-        forceCollide<SimNode>(forceConfig.collisionRadius)
-      )
-      .force(
-        "x",
-        forceX<SimNode>(0).strength(0.01)
-      )
-      .force(
-        "y",
-        forceY<SimNode>(0).strength(0.01)
-      )
+      .force("center", forceCenter(0, 0).strength(forceConfig.centerStrength))
+      .force("collision", forceCollide<SimNode>(forceConfig.collisionRadius))
+      .force("x", forceX<SimNode>(0).strength(0.008))
+      .force("y", forceY<SimNode>(0).strength(0.008))
       .alphaDecay(0.02)
-      .velocityDecay(0.4);
+      .velocityDecay(0.35);
+
+    // Batch updates using requestAnimationFrame for smoother rendering
+    const updateNodes = () => {
+      if (draggingRef.current.active) {
+        // Don't update node positions while actively dragging
+        rafRef.current = requestAnimationFrame(updateNodes);
+        return;
+      }
 
-    // Update React Flow nodes on each tick
-    simulation.on("tick", () => {
+      const simNodes = simulation.nodes();
+
+      // Update position cache
+      for (const simNode of simNodes) {
+        nodePositionsRef.current.set(simNode.id, { x: simNode.x, y: simNode.y });
+      }
+
+      // Batch update React Flow nodes
       setNodes((currentNodes) =>
         currentNodes.map((node) => {
-          const simNode = simulation.nodes().find((n) => n.id === node.id);
+          const simNode = simNodes.find((n) => n.id === node.id);
           if (!simNode) return node;
 
+          // Skip update if position hasn't changed significantly
+          const dx = Math.abs(node.position.x - simNode.x);
+          const dy = Math.abs(node.position.y - simNode.y);
+          if (dx < 0.1 && dy < 0.1) return node;
+
           return {
             ...node,
             position: {
@@ -170,6 +213,16 @@ export function useForceLayout(
           };
         })
       );
+
+      if (simulation.alpha() > 0.001) {
+        rafRef.current = requestAnimationFrame(updateNodes);
+      }
+    };
+
+    simulation.on("tick", () => {
+      if (rafRef.current === null && simulation.alpha() > 0.001) {
+        rafRef.current = requestAnimationFrame(updateNodes);
+      }
     });
 
     simulationRef.current = simulation;
@@ -177,10 +230,14 @@ export function useForceLayout(
     // Cleanup: stop simulation when unmounting or dependencies change
     return () => {
       simulation.stop();
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
     };
   }, [
     nodesInitialized,
-    nodeCount,
+    nodeIds,
     getNodes,
     getEdges,
     setNodes,
@@ -189,44 +246,47 @@ export function useForceLayout(
   ]);
 
   /**
-   * Handle drag start - fix the node position and reheat simulation
+   * Handle drag start - fix the node position
    */
   const onNodeDragStart = useCallback(
     (_: React.MouseEvent, node: Node) => {
       const simulation = simulationRef.current;
       if (!simulation) return;
 
-      draggingNodeRef.current = node.id;
-
-      // Reheat the simulation
-      simulation.alphaTarget(0.3).restart();
+      // Mark as dragging immediately
+      draggingRef.current = { nodeId: node.id, active: true };
 
-      // Fix the node position
+      // Find and fix the simulation node
       const simNode = simulation.nodes().find((n) => n.id === node.id);
       if (simNode) {
-        simNode.fx = simNode.x;
-        simNode.fy = simNode.y;
+        simNode.fx = node.position.x;
+        simNode.fy = node.position.y;
       }
+
+      // Gently reheat the simulation
+      simulation.alphaTarget(0.1).restart();
     },
     []
   );
 
   /**
-   * Handle drag - update the fixed position
+   * Handle drag - update the fixed position without triggering React updates
    */
-  const onNodeDrag = useCallback(
-    (_: React.MouseEvent, node: Node) => {
-      const simulation = simulationRef.current;
-      if (!simulation) return;
+  const onNodeDrag = useCallback((_: React.MouseEvent, node: Node) => {
+    const simulation = simulationRef.current;
+    if (!simulation) return;
 
-      const simNode = simulation.nodes().find((n) => n.id === node.id);
-      if (simNode) {
-        simNode.fx = node.position.x;
-        simNode.fy = node.position.y;
-      }
-    },
-    []
-  );
+    const simNode = simulation.nodes().find((n) => n.id === node.id);
+    if (simNode) {
+      simNode.fx = node.position.x;
+      simNode.fy = node.position.y;
+      // Update cache
+      nodePositionsRef.current.set(node.id, {
+        x: node.position.x,
+        y: node.position.y,
+      });
+    }
+  }, []);
 
   /**
    * Handle drag end - unfix the node and let simulation cool down
@@ -234,11 +294,13 @@ export function useForceLayout(
   const onNodeDragStop = useCallback(
     (_: React.MouseEvent, node: Node) => {
       const simulation = simulationRef.current;
-      if (!simulation) return;
 
-      draggingNodeRef.current = null;
+      // Clear dragging state first
+      draggingRef.current = { nodeId: null, active: false };
 
-      // Let simulation cool down
+      if (!simulation) return;
+
+      // Let simulation cool down gradually
       simulation.alphaTarget(0);
 
       // Unfix the node (unless it's the root)
@@ -249,6 +311,13 @@ export function useForceLayout(
           simNode.fy = null;
         }
       }
+
+      // Schedule a gentle restart to let the graph settle
+      setTimeout(() => {
+        if (simulationRef.current && !draggingRef.current.active) {
+          simulationRef.current.alpha(0.1).restart();
+        }
+      }, 50);
     },
     [rootNodeId]
   );
@@ -269,7 +338,9 @@ export function useForceLayout(
       }
 
       if (updates.linkDistance !== undefined) {
-        const linkForce = simulation.force("link") as ReturnType<typeof forceLink<SimNode, SimLink>> | undefined;
+        const linkForce = simulation.force("link") as
+          | ReturnType<typeof forceLink<SimNode, SimLink>>
+          | undefined;
         if (linkForce) {
           linkForce.distance(updates.linkDistance);
         }
@@ -283,7 +354,7 @@ export function useForceLayout(
       }
 
       // Reheat simulation to apply changes
-      simulation.alpha(0.5).restart();
+      simulation.alpha(0.3).restart();
     },
     []
   );
@@ -358,7 +429,10 @@ export function computeForceLayout(
         .distance(config.linkDistance)
     )
     .force("charge", forceManyBody().strength(config.chargeStrength))
-    .force("center", forceCenter(centerX, centerY).strength(config.centerStrength))
+    .force(
+      "center",
+      forceCenter(centerX, centerY).strength(config.centerStrength)
+    )
     .force("collision", forceCollide(config.collisionRadius))
     .stop();
 

package/src/index.ts

@@ -6,8 +6,31 @@
  * @packageDocumentation
  */
 
-// Main component export
+// Main component exports
 export { CyvestGraph } from "./components/CyvestGraph";
+export { ObservablesGraph } from "./components/ObservablesGraph";
+export { InvestigationGraph } from "./components/InvestigationGraph";
+
+// Icon exports for customization
+export {
+  getObservableIcon,
+  getInvestigationIcon,
+  OBSERVABLE_ICON_MAP,
+  INVESTIGATION_ICON_MAP,
+  type IconProps,
+} from "./components/Icons";
 
 // Re-export types for consumers
-export type { CyvestGraphProps, ForceLayoutConfig } from "./types";
+export type {
+  CyvestGraphProps,
+  ObservablesGraphProps,
+  InvestigationGraphProps,
+  ForceLayoutConfig,
+  ObservableNodeData,
+  ObservableEdgeData,
+  InvestigationNodeData,
+  InvestigationNodeType,
+  ObservableShape,
+} from "./types";
+
+export { DEFAULT_FORCE_CONFIG } from "./types";

package/src/types.ts

@@ -11,8 +11,9 @@ import type { Level } from "@cyvest/cyvest-js";
 
 /**
  * Shape types for observable nodes.
+ * In the current design, all non-root nodes are circles.
  */
-export type ObservableShape = "square" | "circle" | "rectangle" | "triangle";
+export type ObservableShape = "circle" | "rectangle";
 
 /**
  * Data attached to observable graph nodes.
@@ -28,8 +29,6 @@ export interface ObservableNodeData extends Record<string, unknown> {
   level: Level;
   /** Numeric score */
   score: number;
-  /** Emoji representing the observable type */
-  emoji: string;
   /** Shape for this node type */
   shape: ObservableShape;
   /** Whether this is the root observable */
@@ -85,8 +84,6 @@ export interface InvestigationNodeData extends Record<string, unknown> {
   description?: string;
   /** Path (for containers) */
   path?: string;
-  /** Emoji for the node */
-  emoji: string;
 }
 
 /**
@@ -107,26 +104,27 @@ export type InvestigationEdge = Edge;
  * Configuration options for d3-force layout.
  */
 export interface ForceLayoutConfig {
-  /** Strength of the charge force (repulsion). Default: -300 */
+  /** Strength of the charge force (repulsion). Default: -200 */
   chargeStrength: number;
-  /** Target distance between linked nodes. Default: 100 */
+  /** Target distance between linked nodes. Default: 80 */
   linkDistance: number;
-  /** Strength of the centering force. Default: 0.1 */
+  /** Strength of the centering force. Default: 0.05 */
   centerStrength: number;
-  /** Strength of the collision force. Default: 30 */
+  /** Radius for collision detection. Default: 40 */
   collisionRadius: number;
-  /** Number of simulation iterations. Default: 300 */
+  /** Number of simulation iterations (for static layout). Default: 300 */
   iterations: number;
 }
 
 /**
  * Default force layout configuration.
+ * Tuned for good visual separation and smooth animations.
  */
 export const DEFAULT_FORCE_CONFIG: ForceLayoutConfig = {
   chargeStrength: -200,
   linkDistance: 80,
   centerStrength: 0.05,
-  collisionRadius: 40,
+  collisionRadius: 45,
   iterations: 300,
 };
 

package/src/utils/observables.ts

@@ -5,95 +5,20 @@
 import { getColorForLevel, type Level } from "@cyvest/cyvest-js";
 import type { ObservableShape } from "../types";
 
-/**
- * Map observable types to emojis.
- */
-const OBSERVABLE_EMOJI_MAP: Record<string, string> = {
-  // Network
-  "ipv4-addr": "🌐",
-  "ipv6-addr": "🌐",
-  "domain-name": "🏠",
-  url: "🔗",
-  "autonomous-system": "🌍",
-  "mac-addr": "📶",
-
-  // Email
-  "email-addr": "📧",
-  "email-message": "✉️",
-
-  // File
-  file: "📄",
-  "file-hash": "🔐",
-  "file:hash:md5": "🔐",
-  "file:hash:sha1": "🔐",
-  "file:hash:sha256": "🔐",
-
-  // User/Identity
-  user: "👤",
-  "user-account": "👤",
-  identity: "🪪",
-
-  // Process/System
-  process: "⚙️",
-  software: "💿",
-  "windows-registry-key": "📝",
-
-  // Threat Intelligence
-  "threat-actor": "👹",
-  malware: "🦠",
-  "attack-pattern": "⚔️",
-  campaign: "🎯",
-  indicator: "🚨",
-
-  // Artifacts
-  artifact: "🧪",
-  certificate: "📜",
-  "x509-certificate": "📜",
-
-  // Default
-  unknown: "❓",
-};
-
-/**
- * Get the emoji for an observable type.
- * Falls back to a generic icon if type is unknown.
- */
-export function getObservableEmoji(observableType: string): string {
-  const normalized = observableType.toLowerCase().trim();
-  return OBSERVABLE_EMOJI_MAP[normalized] ?? OBSERVABLE_EMOJI_MAP.unknown;
-}
-
-/**
- * Map observable types to shapes.
- */
-const OBSERVABLE_SHAPE_MAP: Record<string, ObservableShape> = {
-  // Domains get squares
-  "domain-name": "square",
-
-  // URLs get circles
-  url: "circle",
-
-  // IPs get triangles
-  "ipv4-addr": "triangle",
-  "ipv6-addr": "triangle",
-
-  // Root/files get rectangles (default for root)
-  file: "rectangle",
-  "email-message": "rectangle",
-};
-
 /**
  * Get the shape for an observable type.
+ * All non-root nodes are circles for a cleaner look.
  */
 export function getObservableShape(
-  observableType: string,
+  _observableType: string,
   isRoot: boolean
 ): ObservableShape {
+  // Root nodes get a rounded rectangle (pill shape)
   if (isRoot) {
     return "rectangle";
   }
-  const normalized = observableType.toLowerCase().trim();
-  return OBSERVABLE_SHAPE_MAP[normalized] ?? "circle";
+  // All other nodes are circles
+  return "circle";
 }
 
 /**
@@ -123,6 +48,9 @@ export function getLevelColor(level: Level): string {
   return getColorForLevel(level);
 }
 
+/**
+ * Lighten a hex color by a percentage.
+ */
 function lightenHexColor(hex: string, amount: number): string {
   const normalized = hex.startsWith("#") ? hex.slice(1) : hex;
   if (normalized.length !== 6) {
@@ -145,21 +73,5 @@ function lightenHexColor(hex: string, amount: number): string {
  * Get background color for security level (lighter version).
  */
 export function getLevelBackgroundColor(level: Level): string {
-  return lightenHexColor(getLevelColor(level), 0.85);
-}
-
-/**
- * Emoji map for investigation node types.
- */
-const INVESTIGATION_NODE_EMOJI: Record<string, string> = {
-  root: "🎯",
-  check: "✅",
-  container: "📦",
-};
-
-/**
- * Get emoji for investigation node type.
- */
-export function getInvestigationNodeEmoji(nodeType: string): string {
-  return INVESTIGATION_NODE_EMOJI[nodeType] ?? "❓";
+  return lightenHexColor(getLevelColor(level), 0.88);
 }

package/tests/observables.test.ts

@@ -2,26 +2,21 @@ import { describe, expect, it } from "vitest";
 
 import { LEVEL_COLORS } from "@cyvest/cyvest-js";
 import {
-  getInvestigationNodeEmoji,
   getLevelBackgroundColor,
   getLevelColor,
-  getObservableEmoji,
   getObservableShape,
   truncateLabel,
 } from "../src/utils/observables";
 
 describe("observables utils", () => {
-  it("returns emojis for known and unknown observable types", () => {
-    expect(getObservableEmoji("domain-name")).toBe("🏠");
-    expect(getObservableEmoji("IPv4-Addr")).toBe("🌐");
-    expect(getObservableEmoji("unmapped")).toBe("❓");
-  });
-
-  it("returns shapes based on type and root flag", () => {
-    expect(getObservableShape("domain-name", false)).toBe("square");
-    expect(getObservableShape("ipv6-addr", false)).toBe("triangle");
+  it("returns shapes based on root flag (all non-root nodes are circles)", () => {
+    // All non-root nodes are now circles for a cleaner design
+    expect(getObservableShape("domain-name", false)).toBe("circle");
+    expect(getObservableShape("ipv6-addr", false)).toBe("circle");
     expect(getObservableShape("anything-else", false)).toBe("circle");
+    // Root nodes get a rectangle (pill shape)
     expect(getObservableShape("anything-else", true)).toBe("rectangle");
+    expect(getObservableShape("domain-name", true)).toBe("rectangle");
   });
 
   it("truncates long labels in the middle by default", () => {
@@ -32,11 +27,9 @@ describe("observables utils", () => {
 
   it("maps levels to colors", () => {
     expect(getLevelColor("SUSPICIOUS")).toBe(LEVEL_COLORS.SUSPICIOUS);
-    expect(getLevelBackgroundColor("SUSPICIOUS")).toBe("#feeadc");
-  });
-
-  it("returns investigation node emoji with fallback", () => {
-    expect(getInvestigationNodeEmoji("root")).toBe("🎯");
-    expect(getInvestigationNodeEmoji("missing")).toBe("❓");
+    // Background color is the level color lightened by 88%
+    const bgColor = getLevelBackgroundColor("SUSPICIOUS");
+    // Just verify it's a valid hex color that's lighter than the original
+    expect(bgColor).toMatch(/^#[0-9a-f]{6}$/i);
   });
 });