@cyvest/cyvest-vis 4.0.0 → 4.1.0

package/src/components/InvestigationGraph.tsx

@@ -14,6 +14,8 @@ import {
   type Node,
   type Edge,
   type NodeTypes,
+  BackgroundVariant,
+  MarkerType,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 
@@ -25,11 +27,7 @@ import type {
   InvestigationNodeType,
 } from "../types";
 import { InvestigationNode } from "./InvestigationNode";
-import {
-  getInvestigationNodeEmoji,
-  getLevelColor,
-  truncateLabel,
-} from "../utils/observables";
+import { getLevelColor, truncateLabel } from "../utils/observables";
 import { computeDagreLayout } from "../hooks/useDagreLayout";
 
 /**
@@ -39,6 +37,23 @@ const nodeTypes: NodeTypes = {
   investigation: InvestigationNode,
 };
 
+/**
+ * Default edge style
+ */
+const defaultEdgeOptions = {
+  type: "smoothstep",
+  style: {
+    stroke: "#94a3b8",
+    strokeWidth: 1.5,
+  },
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    width: 16,
+    height: 16,
+    color: "#94a3b8",
+  },
+};
+
 /**
  * Flatten containers recursively to get all container keys.
  */
@@ -89,7 +104,6 @@ function createInvestigationGraph(
     nodeType: "root",
     level: rootLevel,
     score: primaryRoot?.score ?? investigation.score,
-    emoji: getInvestigationNodeEmoji("root"),
   };
 
   nodes.push({
@@ -97,8 +111,20 @@ function createInvestigationGraph(
     type: "investigation",
     position: { x: 0, y: 0 },
     data: rootNodeData,
+    selectable: true,
+    draggable: true,
   });
 
+  // Collect all check keys that belong to containers
+  // These checks should NOT have a direct link to the root node
+  const allContainers = flattenContainers(investigation.containers);
+  const checksInContainers = new Set<string>();
+  for (const container of allContainers) {
+    for (const checkKey of container.checks) {
+      checksInContainers.add(checkKey);
+    }
+  }
+
   // Add check nodes
   // Group checks by scope for better organization
   const allChecks: Check[] = [];
@@ -118,7 +144,6 @@ function createInvestigationGraph(
       level: check.level,
       score: check.score,
       description: truncateLabel(check.description, 30),
-      emoji: getInvestigationNodeEmoji("check"),
     };
 
     nodes.push({
@@ -126,28 +151,34 @@ function createInvestigationGraph(
       type: "investigation",
       position: { x: 0, y: 0 },
       data: checkNodeData,
+      selectable: true,
+      draggable: true,
     });
 
-    // Edge from root to check
-    edges.push({
-      id: `edge-root-${check.key}`,
-      source: rootKey,
-      target: `check-${check.key}`,
-      type: "default",
-    });
+    // Only create edge from root to check if check is NOT in a container
+    // Checks in containers will be linked through their container instead
+    if (!checksInContainers.has(check.key)) {
+      edges.push({
+        id: `edge-root-${check.key}`,
+        source: rootKey,
+        target: `check-${check.key}`,
+        type: "smoothstep",
+        animated: false,
+      });
+    }
   }
 
   // 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),
+      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({
@@ -155,6 +186,8 @@ function createInvestigationGraph(
       type: "investigation",
       position: { x: 0, y: 0 },
       data: containerNodeData,
+      selectable: true,
+      draggable: true,
     });
 
     // Edge from root to container
@@ -162,7 +195,8 @@ function createInvestigationGraph(
       id: `edge-root-container-${container.key}`,
       source: rootKey,
       target: `container-${container.key}`,
-      type: "default",
+      type: "smoothstep",
+      animated: false,
     });
 
     // Edges from container to its checks
@@ -172,8 +206,8 @@ function createInvestigationGraph(
           id: `edge-container-check-${container.key}-${checkKey}`,
           source: `container-${container.key}`,
           target: `check-${checkKey}`,
-          type: "default",
-          style: { strokeDasharray: "5,5" },
+          type: "smoothstep",
+          animated: false,
         });
       }
     }
@@ -203,8 +237,8 @@ export const InvestigationGraph: React.FC<InvestigationGraphProps> = ({
   const { nodes: layoutNodes, edges: layoutEdges } = useMemo(() => {
     return computeDagreLayout(initialNodes, initialEdges, {
       direction: "LR",
-      nodeSpacing: 30,
-      rankSpacing: 120,
+      nodeSpacing: 40,
+      rankSpacing: 140,
     });
   }, [initialNodes, initialEdges]);
 
@@ -233,15 +267,19 @@ export const InvestigationGraph: React.FC<InvestigationGraphProps> = ({
     return getLevelColor(data.level);
   }, []);
 
+  // Container styles
+  const containerStyle = useMemo(
+    () => ({
+      width,
+      height,
+      position: "relative" as const,
+      background: "linear-gradient(180deg, #fafbfc 0%, #f0f4f8 100%)",
+    }),
+    [width, height]
+  );
+
   return (
-    <div
-      className={className}
-      style={{
-        width,
-        height,
-        position: "relative",
-      }}
-    >
+    <div className={className} style={containerStyle}>
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -249,15 +287,48 @@ export const InvestigationGraph: React.FC<InvestigationGraphProps> = ({
         onEdgesChange={onEdgesChange}
         onNodeClick={handleNodeClick}
         nodeTypes={nodeTypes}
+        defaultEdgeOptions={defaultEdgeOptions}
         fitView
-        fitViewOptions={{ padding: 0.2 }}
+        fitViewOptions={{ padding: 0.3, maxZoom: 1.5 }}
         minZoom={0.1}
-        maxZoom={2}
+        maxZoom={2.5}
         proOptions={{ hideAttribution: true }}
+        // UX settings
+        nodesDraggable={true}
+        nodesConnectable={false}
+        elementsSelectable={true}
+        selectNodesOnDrag={false}
+        panOnDrag={true}
+        zoomOnScroll={true}
+        zoomOnPinch={true}
+        panOnScroll={false}
       >
-        <Background />
-        <Controls />
-        <MiniMap nodeColor={miniMapNodeColor} zoomable pannable />
+        <Background
+          variant={BackgroundVariant.Dots}
+          gap={24}
+          size={1}
+          color="#d1d5db"
+        />
+        <Controls
+          showInteractive={false}
+          style={{
+            borderRadius: 10,
+            boxShadow: "0 2px 12px rgba(0,0,0,0.1)",
+            border: "1px solid rgba(0,0,0,0.06)",
+          }}
+        />
+        <MiniMap
+          nodeColor={miniMapNodeColor}
+          zoomable
+          pannable
+          style={{
+            borderRadius: 10,
+            boxShadow: "0 2px 12px rgba(0,0,0,0.1)",
+            border: "1px solid rgba(0,0,0,0.06)",
+            background: "rgba(255,255,255,0.9)",
+          }}
+          maskColor="rgba(0,0,0,0.08)"
+        />
       </ReactFlow>
     </div>
   );

package/src/components/InvestigationNode.tsx

@@ -1,143 +1,160 @@
 /**
  * Custom node component for the Investigation Graph (Dagre layout).
- * Renders root, check, and container nodes.
+ * Professional design with SVG icons for root, check, and container nodes.
  */
 
-import React, { memo } from "react";
+import React, { memo, useMemo } from "react";
 import { Handle, Position, type NodeProps } from "@xyflow/react";
 import type { InvestigationNodeData } from "../types";
 import { getLevelColor, getLevelBackgroundColor } from "../utils/observables";
+import { getInvestigationIcon } from "./Icons";
 
 /**
- * Investigation node component.
+ * Node style configuration by type
  */
-function InvestigationNodeComponent({
-  data,
-  selected,
-}: NodeProps) {
+const NODE_CONFIG = {
+  root: {
+    minWidth: 140,
+    padding: "10px 18px",
+    borderRadius: 20,
+    fontWeight: 600 as const,
+    fontSize: 13,
+    iconSize: 18,
+    showIcon: true,
+    alignCenter: true,
+  },
+  check: {
+    minWidth: 140,
+    padding: "8px 14px",
+    borderRadius: 8,
+    fontWeight: 500 as const,
+    fontSize: 12,
+    iconSize: 14,
+    showIcon: false, // No icon for checks
+    alignCenter: false, // Left-aligned
+  },
+  container: {
+    minWidth: 120,
+    padding: "8px 14px",
+    borderRadius: 16,
+    fontWeight: 500 as const,
+    fontSize: 12,
+    iconSize: 16,
+    showIcon: true,
+    alignCenter: true,
+  },
+} as const;
+
+/**
+ * Investigation node component with professional design.
+ */
+function InvestigationNodeComponent({ data, selected }: NodeProps) {
   const nodeData = data as unknown as InvestigationNodeData;
-  const {
-    label,
-    emoji,
-    nodeType,
-    level,
-    description,
-  } = nodeData;
+  const { label, nodeType, level, description } = nodeData;
 
   const borderColor = getLevelColor(level);
   const backgroundColor = getLevelBackgroundColor(level);
+  const config = NODE_CONFIG[nodeType] || NODE_CONFIG.check;
 
-  // 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,
-        };
-    }
-  };
+  // Get the appropriate icon component
+  const IconComponent = useMemo(
+    () => getInvestigationIcon(nodeType),
+    [nodeType]
+  );
+
+  // Memoize node style
+  const nodeStyle = useMemo(
+    () => ({
+      minWidth: config.minWidth,
+      padding: config.padding,
+      borderRadius: config.borderRadius,
+      display: "flex",
+      flexDirection: "column" as const,
+      alignItems: config.alignCenter ? "center" : "flex-start",
+      backgroundColor,
+      border: `2px solid ${borderColor}`,
+      boxShadow: selected
+        ? `0 0 0 3px ${borderColor}40, 0 4px 12px rgba(0,0,0,0.15)`
+        : "0 2px 8px rgba(0,0,0,0.08)",
+      cursor: "pointer",
+      fontFamily:
+        "'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+      transition: "box-shadow 0.15s ease-out, transform 0.1s ease-out",
+    }),
+    [config, backgroundColor, borderColor, selected]
+  );
 
-  const style = getNodeStyle();
+  const headerStyle = useMemo(
+    () => ({
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      width: config.alignCenter ? "auto" : "100%",
+    }),
+    [config.alignCenter]
+  );
+
+  const labelStyle = useMemo(
+    () => ({
+      fontSize: config.fontSize,
+      fontWeight: config.fontWeight,
+      maxWidth: 180,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap" as const,
+      color: "#1f2937",
+      letterSpacing: "-0.01em",
+    }),
+    [config]
+  );
+
+  const descriptionStyle = useMemo(
+    () => ({
+      marginTop: 4,
+      fontSize: 10,
+      color: "#6b7280",
+      maxWidth: 170,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap" as const,
+      lineHeight: 1.3,
+      width: "100%",
+      textAlign: config.alignCenter ? ("center" as const) : ("left" as const),
+    }),
+    [config.alignCenter]
+  );
+
+  // Hidden handle style - edges connect but no visible dots
+  const handleStyle: React.CSSProperties = {
+    width: 1,
+    height: 1,
+    background: "transparent",
+    border: "none",
+    opacity: 0,
+  };
 
   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}
-        >
+    <div className="investigation-node" style={nodeStyle}>
+      {/* Header with optional icon and label */}
+      <div style={headerStyle}>
+        {config.showIcon && (
+          <IconComponent size={config.iconSize} color={borderColor} />
+        )}
+        <span style={labelStyle} 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}
-        >
+        <div style={descriptionStyle} 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,
-        }}
-      />
+      {/* Hidden handles for edges - edges still connect but no visible dots */}
+      <Handle type="target" position={Position.Left} style={handleStyle} />
+      <Handle type="source" position={Position.Right} style={handleStyle} />
     </div>
   );
 }