@cyvest/cyvest-vis 3.1.0 → 4.0.0

package/dist/index.js

@@ -41,7 +41,7 @@ var import_react14 = require("react");
 var import_react7 = __toESM(require("react"));
 var import_react8 = require("@xyflow/react");
 var import_style = require("@xyflow/react/dist/style.css");
-var import_cyvest_js = require("@cyvest/cyvest-js");
+var import_cyvest_js2 = require("@cyvest/cyvest-js");
 
 // src/types.ts
 var DEFAULT_FORCE_CONFIG = {
@@ -57,6 +57,7 @@ var import_react = require("react");
 var import_react2 = require("@xyflow/react");
 
 // src/utils/observables.ts
+var import_cyvest_js = require("@cyvest/cyvest-js");
 var OBSERVABLE_EMOJI_MAP = {
   // Network
   "ipv4-addr": "\u{1F310}",
@@ -129,42 +130,22 @@ function truncateLabel(value, maxLength = 20, truncateMiddle = true) {
   return `${value.slice(0, maxLength - 1)}\u2026`;
 }
 function getLevelColor(level) {
-  const colors = {
-    NONE: "#6b7280",
-    // gray-500
-    TRUSTED: "#22c55e",
-    // green-500
-    INFO: "#3b82f6",
-    // blue-500
-    SAFE: "#22c55e",
-    // green-500
-    NOTABLE: "#eab308",
-    // yellow-500
-    SUSPICIOUS: "#f97316",
-    // orange-500
-    MALICIOUS: "#ef4444"
-    // red-500
-  };
-  return colors[level] ?? colors.NONE;
+  return (0, import_cyvest_js.getColorForLevel)(level);
+}
+function lightenHexColor(hex, amount) {
+  const normalized = hex.startsWith("#") ? hex.slice(1) : hex;
+  if (normalized.length !== 6) {
+    return hex;
+  }
+  const r = parseInt(normalized.slice(0, 2), 16);
+  const g = parseInt(normalized.slice(2, 4), 16);
+  const b = parseInt(normalized.slice(4, 6), 16);
+  const mix = (channel) => Math.max(0, Math.min(255, Math.round(channel + (255 - channel) * amount)));
+  const toHex = (channel) => channel.toString(16).padStart(2, "0");
+  return `#${toHex(mix(r))}${toHex(mix(g))}${toHex(mix(b))}`;
 }
 function getLevelBackgroundColor(level) {
-  const colors = {
-    NONE: "#f3f4f6",
-    // gray-100
-    TRUSTED: "#dcfce7",
-    // green-100
-    INFO: "#dbeafe",
-    // blue-100
-    SAFE: "#dcfce7",
-    // green-100
-    NOTABLE: "#fef9c3",
-    // yellow-100
-    SUSPICIOUS: "#ffedd5",
-    // orange-100
-    MALICIOUS: "#fee2e2"
-    // red-100
-  };
-  return colors[level] ?? colors.NONE;
+  return lightenHexColor(getLevelColor(level), 0.85);
 }
 var INVESTIGATION_NODE_EMOJI = {
   root: "\u{1F3AF}",
@@ -554,7 +535,7 @@ var edgeTypes = {
   floating: FloatingEdge
 };
 function createObservableNodes(investigation, rootObservableIds) {
-  const graph = (0, import_cyvest_js.getObservableGraph)(investigation);
+  const graph = (0, import_cyvest_js2.getObservableGraph)(investigation);
   return graph.nodes.map((graphNode, index) => {
     const isRoot = rootObservableIds.has(graphNode.id);
     const shape = getObservableShape(graphNode.type, isRoot);
@@ -584,7 +565,7 @@ function createObservableNodes(investigation, rootObservableIds) {
   });
 }
 function createObservableEdges(investigation) {
-  const graph = (0, import_cyvest_js.getObservableGraph)(investigation);
+  const graph = (0, import_cyvest_js2.getObservableGraph)(investigation);
   return graph.edges.map((graphEdge, index) => {
     const edgeData = {
       relationshipType: graphEdge.type,
@@ -794,19 +775,25 @@ var ObservablesGraphInner = ({
 };
 var ObservablesGraph = (props) => {
   const { investigation } = props;
-  const rootObservables = (0, import_react7.useMemo)(() => {
-    const roots = (0, import_cyvest_js.findRootObservables)(investigation);
-    return new Set(roots.map((r) => r.key));
-  }, [investigation]);
-  const primaryRootId = (0, import_react7.useMemo)(() => {
-    const roots = (0, import_cyvest_js.findRootObservables)(investigation);
-    return roots.length > 0 ? roots[0].key : void 0;
+  const { rootKeys, primaryRootId } = (0, import_react7.useMemo)(() => {
+    const rootType = investigation.data_extraction.root_type;
+    if (!rootType) {
+      return { rootKeys: /* @__PURE__ */ new Set(), primaryRootId: void 0 };
+    }
+    const normalizedRootType = rootType.toLowerCase().trim();
+    const rootsByType = Object.values(investigation.observables).filter(
+      (obs) => obs.type.toLowerCase() === normalizedRootType
+    );
+    return {
+      rootKeys: new Set(rootsByType.map((obs) => obs.key)),
+      primaryRootId: rootsByType[0]?.key
+    };
   }, [investigation]);
   const { initialNodes, initialEdges } = (0, import_react7.useMemo)(() => {
-    const nodes = createObservableNodes(investigation, rootObservables);
+    const nodes = createObservableNodes(investigation, rootKeys);
     const edges = createObservableEdges(investigation);
     return { initialNodes: nodes, initialEdges: edges };
-  }, [investigation, rootObservables]);
+  }, [investigation, rootKeys]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react8.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     ObservablesGraphInner,
     {
@@ -822,7 +809,6 @@ var ObservablesGraph = (props) => {
 var import_react12 = __toESM(require("react"));
 var import_react13 = require("@xyflow/react");
 var import_style2 = require("@xyflow/react/dist/style.css");
-var import_cyvest_js2 = require("@cyvest/cyvest-js");
 
 // src/components/InvestigationNode.tsx
 var import_react9 = require("react");
@@ -1028,10 +1014,14 @@ function flattenContainers(containers) {
 function createInvestigationGraph(investigation) {
   const nodes = [];
   const edges = [];
-  const roots = (0, import_cyvest_js2.findRootObservables)(investigation);
-  const primaryRoot = roots.length > 0 ? roots[0] : null;
-  const rootKey = primaryRoot?.key ?? "investigation-root";
-  const rootValue = primaryRoot?.value ?? "Investigation";
+  const rootType = investigation.data_extraction.root_type;
+  const normalizedRootType = rootType?.toLowerCase().trim();
+  const rootsByType = normalizedRootType ? Object.values(investigation.observables).filter(
+    (obs) => obs.type.toLowerCase() === normalizedRootType
+  ) : [];
+  const primaryRoot = rootsByType[0] ?? null;
+  const rootKey = primaryRoot?.key ?? investigation.investigation_id;
+  const rootValue = primaryRoot?.value ?? investigation.investigation_name ?? investigation.investigation_id;
   const rootLevel = primaryRoot?.level ?? investigation.level;
   const rootNodeData = {
     label: truncateLabel(rootValue, 24),

package/dist/index.mjs

@@ -14,7 +14,7 @@ import {
   ConnectionMode
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { getObservableGraph, findRootObservables } from "@cyvest/cyvest-js";
+import { getObservableGraph } from "@cyvest/cyvest-js";
 
 // src/types.ts
 var DEFAULT_FORCE_CONFIG = {
@@ -30,6 +30,7 @@ import { memo } from "react";
 import { Handle, Position } from "@xyflow/react";
 
 // src/utils/observables.ts
+import { getColorForLevel } from "@cyvest/cyvest-js";
 var OBSERVABLE_EMOJI_MAP = {
   // Network
   "ipv4-addr": "\u{1F310}",
@@ -102,42 +103,22 @@ function truncateLabel(value, maxLength = 20, truncateMiddle = true) {
   return `${value.slice(0, maxLength - 1)}\u2026`;
 }
 function getLevelColor(level) {
-  const colors = {
-    NONE: "#6b7280",
-    // gray-500
-    TRUSTED: "#22c55e",
-    // green-500
-    INFO: "#3b82f6",
-    // blue-500
-    SAFE: "#22c55e",
-    // green-500
-    NOTABLE: "#eab308",
-    // yellow-500
-    SUSPICIOUS: "#f97316",
-    // orange-500
-    MALICIOUS: "#ef4444"
-    // red-500
-  };
-  return colors[level] ?? colors.NONE;
+  return getColorForLevel(level);
+}
+function lightenHexColor(hex, amount) {
+  const normalized = hex.startsWith("#") ? hex.slice(1) : hex;
+  if (normalized.length !== 6) {
+    return hex;
+  }
+  const r = parseInt(normalized.slice(0, 2), 16);
+  const g = parseInt(normalized.slice(2, 4), 16);
+  const b = parseInt(normalized.slice(4, 6), 16);
+  const mix = (channel) => Math.max(0, Math.min(255, Math.round(channel + (255 - channel) * amount)));
+  const toHex = (channel) => channel.toString(16).padStart(2, "0");
+  return `#${toHex(mix(r))}${toHex(mix(g))}${toHex(mix(b))}`;
 }
 function getLevelBackgroundColor(level) {
-  const colors = {
-    NONE: "#f3f4f6",
-    // gray-100
-    TRUSTED: "#dcfce7",
-    // green-100
-    INFO: "#dbeafe",
-    // blue-100
-    SAFE: "#dcfce7",
-    // green-100
-    NOTABLE: "#fef9c3",
-    // yellow-100
-    SUSPICIOUS: "#ffedd5",
-    // orange-100
-    MALICIOUS: "#fee2e2"
-    // red-100
-  };
-  return colors[level] ?? colors.NONE;
+  return lightenHexColor(getLevelColor(level), 0.85);
 }
 var INVESTIGATION_NODE_EMOJI = {
   root: "\u{1F3AF}",
@@ -779,19 +760,25 @@ var ObservablesGraphInner = ({
 };
 var ObservablesGraph = (props) => {
   const { investigation } = props;
-  const rootObservables = useMemo2(() => {
-    const roots = findRootObservables(investigation);
-    return new Set(roots.map((r) => r.key));
-  }, [investigation]);
-  const primaryRootId = useMemo2(() => {
-    const roots = findRootObservables(investigation);
-    return roots.length > 0 ? roots[0].key : void 0;
+  const { rootKeys, primaryRootId } = useMemo2(() => {
+    const rootType = investigation.data_extraction.root_type;
+    if (!rootType) {
+      return { rootKeys: /* @__PURE__ */ new Set(), primaryRootId: void 0 };
+    }
+    const normalizedRootType = rootType.toLowerCase().trim();
+    const rootsByType = Object.values(investigation.observables).filter(
+      (obs) => obs.type.toLowerCase() === normalizedRootType
+    );
+    return {
+      rootKeys: new Set(rootsByType.map((obs) => obs.key)),
+      primaryRootId: rootsByType[0]?.key
+    };
   }, [investigation]);
   const { initialNodes, initialEdges } = useMemo2(() => {
-    const nodes = createObservableNodes(investigation, rootObservables);
+    const nodes = createObservableNodes(investigation, rootKeys);
     const edges = createObservableEdges(investigation);
     return { initialNodes: nodes, initialEdges: edges };
-  }, [investigation, rootObservables]);
+  }, [investigation, rootKeys]);
   return /* @__PURE__ */ jsx3(ReactFlowProvider, { children: /* @__PURE__ */ jsx3(
     ObservablesGraphInner,
     {
@@ -814,7 +801,6 @@ import {
   useEdgesState as useEdgesState2
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { findRootObservables as findRootObservables2 } from "@cyvest/cyvest-js";
 
 // src/components/InvestigationNode.tsx
 import { memo as memo3 } from "react";
@@ -1020,10 +1006,14 @@ function flattenContainers(containers) {
 function createInvestigationGraph(investigation) {
   const nodes = [];
   const edges = [];
-  const roots = findRootObservables2(investigation);
-  const primaryRoot = roots.length > 0 ? roots[0] : null;
-  const rootKey = primaryRoot?.key ?? "investigation-root";
-  const rootValue = primaryRoot?.value ?? "Investigation";
+  const rootType = investigation.data_extraction.root_type;
+  const normalizedRootType = rootType?.toLowerCase().trim();
+  const rootsByType = normalizedRootType ? Object.values(investigation.observables).filter(
+    (obs) => obs.type.toLowerCase() === normalizedRootType
+  ) : [];
+  const primaryRoot = rootsByType[0] ?? null;
+  const rootKey = primaryRoot?.key ?? investigation.investigation_id;
+  const rootValue = primaryRoot?.value ?? investigation.investigation_name ?? investigation.investigation_id;
   const rootLevel = primaryRoot?.level ?? investigation.level;
   const rootNodeData = {
     label: truncateLabel(rootValue, 24),

package/package.json

@@ -1,27 +1,27 @@
 {
   "name": "@cyvest/cyvest-vis",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "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"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@dagrejs/dagre": "^1.1.4",
-    "@xyflow/react": "^12.5.0",
+    "@dagrejs/dagre": "^1.1.8",
+    "@xyflow/react": "^12.10.0",
     "d3-force": "^3.0.0",
-    "@cyvest/cyvest-js": "3.1.0"
+    "@cyvest/cyvest-js": "4.0.0"
   },
   "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"
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.16"
   },
   "engines": {
     "node": ">=20"

package/src/components/InvestigationGraph.tsx

@@ -18,7 +18,6 @@ import {
 import "@xyflow/react/dist/style.css";
 
 import type { CyvestInvestigation, Check, Container } from "@cyvest/cyvest-js";
-import { findRootObservables } from "@cyvest/cyvest-js";
 
 import type {
   InvestigationGraphProps,
@@ -67,13 +66,21 @@ function createInvestigationGraph(
   const nodes: Node<InvestigationNodeData>[] = [];
   const edges: Edge[] = [];
 
-  // Find root observable(s)
-  const roots = findRootObservables(investigation);
-  const primaryRoot = roots.length > 0 ? roots[0] : null;
+  const rootType = investigation.data_extraction.root_type;
+  const normalizedRootType = rootType?.toLowerCase().trim();
+  const rootsByType = normalizedRootType
+    ? Object.values(investigation.observables).filter(
+        (obs) => obs.type.toLowerCase() === normalizedRootType
+      )
+    : [];
+  const primaryRoot = rootsByType[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 rootKey = primaryRoot?.key ?? investigation.investigation_id;
+  const rootValue =
+    primaryRoot?.value ??
+    investigation.investigation_name ??
+    investigation.investigation_id;
   const rootLevel = primaryRoot?.level ?? investigation.level;
 
   // Create root node

package/src/components/ObservablesGraph.tsx

@@ -21,7 +21,7 @@ import {
 import "@xyflow/react/dist/style.css";
 
 import type { CyvestInvestigation } from "@cyvest/cyvest-js";
-import { getObservableGraph, findRootObservables } from "@cyvest/cyvest-js";
+import { getObservableGraph } from "@cyvest/cyvest-js";
 
 import type {
   ObservablesGraphProps,
@@ -344,24 +344,29 @@ const ObservablesGraphInner: React.FC<
 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]);
+  const { rootKeys, primaryRootId } = useMemo(() => {
+    const rootType = investigation.data_extraction.root_type;
+    if (!rootType) {
+      return { rootKeys: new Set<string>(), primaryRootId: undefined };
+    }
+
+    const normalizedRootType = rootType.toLowerCase().trim();
+    const rootsByType = Object.values(investigation.observables).filter(
+      (obs) => obs.type.toLowerCase() === normalizedRootType
+    );
 
-  // Get first root for centering
-  const primaryRootId = useMemo(() => {
-    const roots = findRootObservables(investigation);
-    return roots.length > 0 ? roots[0].key : undefined;
+    return {
+      rootKeys: new Set(rootsByType.map((obs) => obs.key)),
+      primaryRootId: rootsByType[0]?.key,
+    };
   }, [investigation]);
 
   // Create initial nodes and edges
   const { initialNodes, initialEdges } = useMemo(() => {
-    const nodes = createObservableNodes(investigation, rootObservables);
+    const nodes = createObservableNodes(investigation, rootKeys);
     const edges = createObservableEdges(investigation);
     return { initialNodes: nodes, initialEdges: edges };
-  }, [investigation, rootObservables]);
+  }, [investigation, rootKeys]);
 
   return (
     <ReactFlowProvider>

package/src/utils/observables.ts

@@ -2,6 +2,7 @@
  * Utility functions for observable visualization.
  */
 
+import { getColorForLevel, type Level } from "@cyvest/cyvest-js";
 import type { ObservableShape } from "../types";
 
 /**
@@ -118,33 +119,33 @@ export function truncateLabel(
 /**
  * Get color for security level.
  */
-export function getLevelColor(level: string): string {
-  const colors: Record<string, string> = {
-    NONE: "#6b7280", // gray-500
-    TRUSTED: "#22c55e", // green-500
-    INFO: "#3b82f6", // blue-500
-    SAFE: "#22c55e", // green-500
-    NOTABLE: "#eab308", // yellow-500
-    SUSPICIOUS: "#f97316", // orange-500
-    MALICIOUS: "#ef4444", // red-500
-  };
-  return colors[level] ?? colors.NONE;
+export function getLevelColor(level: Level): string {
+  return getColorForLevel(level);
+}
+
+function lightenHexColor(hex: string, amount: number): string {
+  const normalized = hex.startsWith("#") ? hex.slice(1) : hex;
+  if (normalized.length !== 6) {
+    return hex;
+  }
+
+  const r = parseInt(normalized.slice(0, 2), 16);
+  const g = parseInt(normalized.slice(2, 4), 16);
+  const b = parseInt(normalized.slice(4, 6), 16);
+
+  const mix = (channel: number) =>
+    Math.max(0, Math.min(255, Math.round(channel + (255 - channel) * amount)));
+
+  const toHex = (channel: number) => channel.toString(16).padStart(2, "0");
+
+  return `#${toHex(mix(r))}${toHex(mix(g))}${toHex(mix(b))}`;
 }
 
 /**
  * Get background color for security level (lighter version).
  */
-export function getLevelBackgroundColor(level: string): string {
-  const colors: Record<string, string> = {
-    NONE: "#f3f4f6", // gray-100
-    TRUSTED: "#dcfce7", // green-100
-    INFO: "#dbeafe", // blue-100
-    SAFE: "#dcfce7", // green-100
-    NOTABLE: "#fef9c3", // yellow-100
-    SUSPICIOUS: "#ffedd5", // orange-100
-    MALICIOUS: "#fee2e2", // red-100
-  };
-  return colors[level] ?? colors.NONE;
+export function getLevelBackgroundColor(level: Level): string {
+  return lightenHexColor(getLevelColor(level), 0.85);
 }
 
 /**

package/tests/observables.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 
+import { LEVEL_COLORS } from "@cyvest/cyvest-js";
 import {
   getInvestigationNodeEmoji,
   getLevelBackgroundColor,
@@ -29,11 +30,9 @@ describe("observables utils", () => {
     expect(truncateLabel("averyverylongvalue", 10, false)).toBe("averyvery…");
   });
 
-  it("maps levels to colors and falls back to NONE", () => {
-    expect(getLevelColor("SUSPICIOUS")).toBe("#f97316");
-    expect(getLevelColor("UNKNOWN")).toBe("#6b7280");
-    expect(getLevelBackgroundColor("SUSPICIOUS")).toBe("#ffedd5");
-    expect(getLevelBackgroundColor("UNKNOWN")).toBe("#f3f4f6");
+  it("maps levels to colors", () => {
+    expect(getLevelColor("SUSPICIOUS")).toBe(LEVEL_COLORS.SUSPICIOUS);
+    expect(getLevelBackgroundColor("SUSPICIOUS")).toBe("#feeadc");
   });
 
   it("returns investigation node emoji with fallback", () => {

package/vitest.config.ts

@@ -0,0 +1,14 @@
+import { resolve } from "node:path";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@cyvest/cyvest-js": resolve(__dirname, "../cyvest-js/src/index.ts"),
+    },
+  },
+  test: {
+    include: ["tests/**/*.{test,spec}.{ts,js,tsx,jsx}"],
+    name: "cyvest-vis",
+  },
+});