@cyvest/cyvest-vis 4.4.0 → 5.0.0

package/package.json

@@ -1,9 +1,22 @@
 {
   "name": "@cyvest/cyvest-vis",
-  "version": "4.4.0",
+  "version": "5.0.0",
+  "type": "module",
   "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
   "sideEffects": false,
   "peerDependencies": {
     "react": "^19.0.0",
@@ -13,7 +26,7 @@
     "@dagrejs/dagre": "^1.1.8",
     "@xyflow/react": "^12.10.0",
     "d3-force": "^3.0.0",
-    "@cyvest/cyvest-js": "4.4.0"
+    "@cyvest/cyvest-js": "5.0.0"
   },
   "devDependencies": {
     "@types/d3-force": "^3.0.10",

package/src/components/Icons.tsx

@@ -594,9 +594,9 @@ export const CheckIcon: React.FC<IconProps> = ({
 );
 
 /**
- * Box icon for containers
+ * Tag icon for tags
  */
-export const BoxIcon: React.FC<IconProps> = ({
+export const TagIcon: React.FC<IconProps> = ({
   size = defaultSize,
   color = defaultColor,
   className,
@@ -706,7 +706,7 @@ export const INVESTIGATION_ICON_MAP: Record<
 > = {
   root: CrosshairIcon,
   check: CheckIcon,
-  container: BoxIcon,
+  tag: TagIcon,
 };
 
 /**

package/src/components/InvestigationGraph.tsx

@@ -1,6 +1,6 @@
 /**
  * InvestigationGraph component - displays investigation structure with Dagre layout.
- * Shows root observable, checks, and containers in a hierarchical view.
+ * Shows root observable, checks, and tags in a hierarchical view.
  */
 
 import React, { useMemo, useCallback } from "react";
@@ -19,7 +19,8 @@ import {
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 
-import type { CyvestInvestigation, Check, Container } from "@cyvest/cyvest-js";
+import type { CyvestInvestigation, Check, Tag } from "@cyvest/cyvest-js";
+import { getTagAncestors } from "@cyvest/cyvest-js";
 
 import type {
   InvestigationGraphProps,
@@ -55,21 +56,10 @@ const defaultEdgeOptions = {
 };
 
 /**
- * Flatten containers recursively to get all container keys.
+ * Get all tags as an array.
  */
-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;
+function getAllTags(tags: Record<string, Tag>): Tag[] {
+  return Object.values(tags);
 }
 
 /**
@@ -115,31 +105,27 @@ function createInvestigationGraph(
     draggable: true,
   });
 
-  // Collect all check keys that belong to containers
+  // Collect all check keys that belong to tags
   // 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);
+  const allTags = getAllTags(investigation.tags);
+  const checksInTags = new Set<string>();
+  for (const tag of allTags) {
+    for (const checkKey of tag.checks) {
+      checksInTags.add(checkKey);
     }
   }
 
   // Add check nodes
-  // Group checks by scope for better organization
-  const allChecks: Check[] = [];
-  for (const checksForKey of Object.values(investigation.checks)) {
-    allChecks.push(...checksForKey);
-  }
+  const allChecks = Object.values(investigation.checks);
 
-  // Create unique check nodes (by check_id to avoid duplicates)
+  // Create unique check nodes (by key 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),
+      label: truncateLabel(check.check_name, 20),
       nodeType: "check",
       level: check.level,
       score: check.score,
@@ -155,9 +141,9 @@ function createInvestigationGraph(
       draggable: true,
     });
 
-    // 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)) {
+    // Only create edge from root to check if check is NOT in a tag
+    // Checks in tags will be linked through their tag instead
+    if (!checksInTags.has(check.key)) {
       edges.push({
         id: `edge-root-${check.key}`,
         source: rootKey,
@@ -168,43 +154,79 @@ function createInvestigationGraph(
     }
   }
 
-  // Add container nodes
-  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,
+  // Build hierarchical tag structure
+  // First, collect all tag names and find/create ancestor tags
+  const tagByName = new Map<string, Tag>();
+  for (const tag of allTags) {
+    tagByName.set(tag.name, tag);
+  }
+
+  // Collect all unique tag names including synthetic ancestors
+  const allTagNames = new Set<string>();
+  for (const tag of allTags) {
+    allTagNames.add(tag.name);
+    // Add ancestors (they may not exist as actual tags)
+    for (const ancestor of getTagAncestors(tag.name)) {
+      allTagNames.add(ancestor);
+    }
+  }
+
+  // Create tag nodes (real and synthetic)
+  for (const tagName of allTagNames) {
+    const realTag = tagByName.get(tagName);
+
+    const tagNodeData: InvestigationNodeData = {
+      label: truncateLabel(tagName.split(":").pop() ?? tagName, 20),
+      nodeType: "tag",
+      level: realTag?.direct_level ?? "INFO",
+      score: realTag?.direct_score ?? 0,
+      name: tagName,
     };
 
     nodes.push({
-      id: `container-${container.key}`,
+      id: `tag-${tagName}`,
       type: "investigation",
       position: { x: 0, y: 0 },
-      data: containerNodeData,
+      data: tagNodeData,
       selectable: true,
       draggable: true,
     });
+  }
 
-    // Edge from root to container
-    edges.push({
-      id: `edge-root-container-${container.key}`,
-      source: rootKey,
-      target: `container-${container.key}`,
-      type: "smoothstep",
-      animated: false,
-    });
+  // Create edges based on tag hierarchy
+  for (const tagName of allTagNames) {
+    const nodeId = `tag-${tagName}`;
+    const parts = tagName.split(":");
+
+    if (parts.length === 1) {
+      // Top-level tag, connect to root
+      edges.push({
+        id: `edge-root-tag-${tagName}`,
+        source: rootKey,
+        target: nodeId,
+        type: "smoothstep",
+        animated: false,
+      });
+    } else {
+      // Has a parent tag, connect to parent
+      const parentName = parts.slice(0, -1).join(":");
+      edges.push({
+        id: `edge-tag-${parentName}-${tagName}`,
+        source: `tag-${parentName}`,
+        target: nodeId,
+        type: "smoothstep",
+        animated: false,
+      });
+    }
+  }
 
-    // Edges from container to its checks
-    for (const checkKey of container.checks) {
+  // Create edges from tags to their checks (only for real tags with checks)
+  for (const tag of allTags) {
+    for (const checkKey of tag.checks) {
       if (seenCheckIds.has(checkKey)) {
         edges.push({
-          id: `edge-container-check-${container.key}-${checkKey}`,
-          source: `container-${container.key}`,
+          id: `edge-tag-check-${tag.name}-${checkKey}`,
+          source: `tag-${tag.name}`,
           target: `check-${checkKey}`,
           type: "smoothstep",
           animated: false,

package/src/components/InvestigationNode.tsx

@@ -1,6 +1,6 @@
 /**
  * Custom node component for the Investigation Graph (Dagre layout).
- * Professional design with SVG icons for root, check, and container nodes.
+ * Professional design with SVG icons for root, check, and tag nodes.
  */
 
 import React, { memo, useMemo } from "react";
@@ -33,7 +33,7 @@ const NODE_CONFIG = {
     showIcon: false, // No icon for checks
     alignCenter: false, // Left-aligned
   },
-  container: {
+  tag: {
     minWidth: 120,
     padding: "8px 14px",
     borderRadius: 16,

package/src/types.ts

@@ -66,7 +66,7 @@ export type ObservableEdge = Edge<ObservableEdgeData>;
 /**
  * Node types for the investigation graph view.
  */
-export type InvestigationNodeType = "root" | "check" | "container";
+export type InvestigationNodeType = "root" | "check" | "tag";
 
 /**
  * Data attached to investigation graph nodes.
@@ -74,7 +74,7 @@ export type InvestigationNodeType = "root" | "check" | "container";
 export interface InvestigationNodeData extends Record<string, unknown> {
   /** Display label */
   label: string;
-  /** Node type (root, check, or container) */
+  /** Node type (root, check, or tag) */
   nodeType: InvestigationNodeType;
   /** Security level */
   level: Level;
@@ -82,8 +82,8 @@ export interface InvestigationNodeData extends Record<string, unknown> {
   score: number;
   /** Description (for checks) */
   description?: string;
-  /** Path (for containers) */
-  path?: string;
+  /** Name (for tags) */
+  name?: string;
 }
 
 /**