@cyvest/cyvest-vis 5.4.0 → 6.0.0

package/dist/index.cjs

@@ -31,30 +31,28 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CyvestGraph: () => CyvestGraph,
-  CyvestInvestigationView: () => CyvestInvestigationView,
   CyvestObservablesView: () => CyvestObservablesView,
+  DARK_CYVEST_THEME: () => DARK_CYVEST_THEME,
   DEFAULT_CYVEST_THEME: () => DEFAULT_CYVEST_THEME,
-  INVESTIGATION_ICON_NAME_MAP: () => INVESTIGATION_ICON_NAME_MAP,
   OBSERVABLE_ICON_NAME_MAP: () => OBSERVABLE_ICON_NAME_MAP,
-  createElkLayout: () => createElkLayout,
-  getDefaultElkOptions: () => getDefaultElkOptions,
-  getInvestigationIconSvg: () => getInvestigationIconSvg,
+  computeForcePositions: () => computeForcePositions,
+  createForceLayout: () => createForceLayout,
+  getDefaultForceOptions: () => getDefaultForceOptions,
   getLevelBackgroundColor: () => getLevelBackgroundColor,
   getLevelColor: () => getLevelColor,
   getObservableIconSvg: () => getObservableIconSvg,
   lightenHexColor: () => lightenHexColor,
+  mixHexColor: () => mixHexColor,
+  startForceSimulation: () => startForceSimulation,
   truncateLabel: () => truncateLabel
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/CyvestGraph.tsx
-var import_react4 = require("react");
-
-// src/components/CyvestInvestigationView.tsx
+// src/components/CyvestObservablesView.tsx
 var import_react2 = require("react");
 
-// src/adapters/investigationElements.ts
-var import_cyvest_js2 = require("@cyvest/cyvest-js");
+// src/adapters/observablesElements.ts
+var import_cyvest_js = require("@cyvest/cyvest-js");
 
 // src/icons/svg.ts
 var ICON_PATHS = {
@@ -66,9 +64,7 @@ var ICON_PATHS = {
   hash: '<line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/>',
   flask: '<path d="M10 2v7.5a2 2 0 0 1-.2.9L4.7 20.5a1 1 0 0 0 .9 1.5h12.8a1 1 0 0 0 .9-1.5l-5.1-10.1a2 2 0 0 1-.2-.9V2"/><path d="M8.5 2h7"/><path d="M7 16h10"/>',
   question: '<circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
-  crosshair: '<circle cx="12" cy="12" r="10"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/>',
-  check: '<rect x="7" y="3" width="10" height="4" rx="1.5"/><rect x="5" y="5" width="14" height="16" rx="2"/><path d="m9 14 2.5 2.5L16 12"/>',
-  tag: '<path d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3.4 13.4a2 2 0 0 1 0-2.8l7.2-7.2a2 2 0 0 1 2.8 0l7.2 7.2a2 2 0 0 1 0 2.8z"/><circle cx="9" cy="9" r="1.2"/>'
+  finding: '<rect x="7" y="3" width="10" height="4" rx="1.5"/><rect x="5" y="5" width="14" height="16" rx="2"/><path d="m9 14 2.5 2.5L16 12"/>'
 };
 var OBSERVABLE_ICON_NAME_MAP = {
   ipv4: "globe",
@@ -78,17 +74,18 @@ var OBSERVABLE_ICON_NAME_MAP = {
   email: "mail",
   hash: "hash",
   file: "file",
-  artifact: "flask"
-};
-var INVESTIGATION_ICON_NAME_MAP = {
-  root: "crosshair",
-  check: "check",
-  tag: "tag"
+  artifact: "flask",
+  host: "domain",
+  process: "finding",
+  user: "mail",
+  command_line: "link",
+  cloud_resource: "globe"
 };
 function toSvgDataUri(iconName, color) {
   const body = ICON_PATHS[iconName] ?? ICON_PATHS.question;
   const svg = [
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"',
+    '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"',
+    ' viewBox="0 0 24 24" fill="none"',
     ` stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`,
     body,
     "</svg>"
@@ -100,48 +97,93 @@ function getObservableIconSvg(observableType, options) {
   const icon = OBSERVABLE_ICON_NAME_MAP[normalizedType] ?? "question";
   return toSvgDataUri(icon, options?.color ?? "#314264");
 }
-function getInvestigationIconSvg(nodeType, options) {
-  const icon = INVESTIGATION_ICON_NAME_MAP[nodeType] ?? "question";
-  return toSvgDataUri(icon, options?.color ?? "#314264");
-}
-
-// src/utils/colors.ts
-var import_cyvest_js = require("@cyvest/cyvest-js");
 
 // src/types.ts
 var DEFAULT_CYVEST_THEME = {
-  background: "#f4f7fb",
-  gridColor: "#d7dfeb",
-  panelBackground: "rgba(255, 255, 255, 0.96)",
-  panelBorder: "#d3dae6",
-  panelText: "#172033",
-  panelTextMuted: "#556079",
-  accent: "#1f6feb",
-  edgeColor: "#8a95aa",
-  edgeSelectedColor: "#1f6feb",
-  fontFamily: "'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif"
+  background: "#f8fafc",
+  gridColor: "#e2e8f0",
+  panelBackground: "rgba(255, 255, 255, 0.97)",
+  panelBorder: "#e2e8f0",
+  panelText: "#0f172a",
+  panelTextMuted: "#64748b",
+  accent: "#334155",
+  edgeColor: "#cbd5e1",
+  edgeSelectedColor: "#475569",
+  fontFamily: "IBM Plex Sans, Segoe UI, Helvetica Neue, Arial, sans-serif",
+  nodeSurface: "#ffffff",
+  rootSurface: "#1e293b",
+  rootText: "#ffffff",
+  iconColor: "#314264",
+  iconMutedColor: "#475569",
+  levelSurfaceMix: "#ffffff",
+  levelSurfaceMixRatio: 0.94
+};
+var DARK_CYVEST_THEME = {
+  background: "#0f172a",
+  gridColor: "#1e293b",
+  panelBackground: "rgba(15, 23, 42, 0.97)",
+  panelBorder: "#334155",
+  panelText: "#e2e8f0",
+  panelTextMuted: "#94a3b8",
+  accent: "#cbd5e1",
+  edgeColor: "#475569",
+  edgeSelectedColor: "#cbd5e1",
+  fontFamily: "IBM Plex Sans, Segoe UI, Helvetica Neue, Arial, sans-serif",
+  nodeSurface: "#1e293b",
+  rootSurface: "#020617",
+  rootText: "#f8fafc",
+  iconColor: "#cbd5e1",
+  iconMutedColor: "#cbd5e1",
+  levelSurfaceMix: "#0f172a",
+  levelSurfaceMixRatio: 0.7
 };
 
 // src/utils/colors.ts
 function getLevelColor(level) {
-  return (0, import_cyvest_js.getColorForLevel)(level);
+  const colors = {
+    NONE: "#cbd5e1",
+    TRUSTED: "#94a3b8",
+    INFO: "#94a3b8",
+    SAFE: "#648b79",
+    NOTABLE: "#aa8958",
+    SUSPICIOUS: "#ad704b",
+    MALICIOUS: "#ad5555"
+  };
+  return colors[level] ?? colors.INFO;
 }
 function clampChannel(channel) {
   return Math.max(0, Math.min(255, Math.round(channel)));
 }
-function lightenHexColor(hex, ratio) {
+function parseHex(hex) {
   const normalized = hex.startsWith("#") ? hex.slice(1) : hex;
   if (!/^[0-9a-fA-F]{6}$/.test(normalized)) {
+    return null;
+  }
+  return [
+    Number.parseInt(normalized.slice(0, 2), 16),
+    Number.parseInt(normalized.slice(2, 4), 16),
+    Number.parseInt(normalized.slice(4, 6), 16)
+  ];
+}
+function mixHexColor(hex, target, ratio) {
+  const from = parseHex(hex);
+  const to = parseHex(target);
+  if (!from || !to) {
     return hex;
   }
-  const red = Number.parseInt(normalized.slice(0, 2), 16);
-  const green = Number.parseInt(normalized.slice(2, 4), 16);
-  const blue = Number.parseInt(normalized.slice(4, 6), 16);
-  const mix = (channel) => clampChannel(channel + (255 - channel) * ratio).toString(16).padStart(2, "0");
-  return `#${mix(red)}${mix(green)}${mix(blue)}`;
+  const mix = (a, b) => clampChannel(a + (b - a) * ratio).toString(16).padStart(2, "0");
+  return `#${mix(from[0], to[0])}${mix(from[1], to[1])}${mix(from[2], to[2])}`;
 }
-function getLevelBackgroundColor(level) {
-  return lightenHexColor(getLevelColor(level), 0.9);
+function lightenHexColor(hex, ratio) {
+  return mixHexColor(hex, "#ffffff", ratio);
+}
+function getLevelBackgroundColor(level, theme) {
+  const resolved = resolveTheme(theme);
+  return mixHexColor(
+    getLevelColor(level),
+    resolved.levelSurfaceMix,
+    resolved.levelSurfaceMixRatio
+  );
 }
 function resolveTheme(theme) {
   return {
@@ -163,206 +205,106 @@ function truncateLabel(value, maxLength = 28, truncateMiddle = true) {
   return `${value.slice(0, leftLength)}\u2026${value.slice(-rightLength)}`;
 }
 
-// src/adapters/investigationElements.ts
-var ROOT_NODE_ID = "inv-root";
-function createNodeData(nodeId, nodeType, label, level, score, maxLabelLength) {
-  const borderColor = getLevelColor(level);
-  const sizeByType = {
-    root: { width: 190, height: 52 },
-    tag: { width: 156, height: 46 },
-    check: { width: 174, height: 52 }
-  };
-  const dimensions = sizeByType[nodeType];
-  return {
-    id: nodeId,
-    nodeType,
-    labelShort: truncateLabel(
-      label,
-      nodeType === "root" ? maxLabelLength + 4 : maxLabelLength,
-      true
-    ),
-    labelFull: label,
-    level,
-    score,
-    borderColor,
-    fillColor: getLevelBackgroundColor(level),
-    icon: getInvestigationIconSvg(nodeType, { color: borderColor }),
-    width: dimensions.width,
-    height: dimensions.height,
-    shape: "round-rectangle",
-    borderWidth: 2
-  };
+// src/adapters/observablesElements.ts
+function findFallbackRootId(graph) {
+  if (graph.nodes.length === 0) {
+    return void 0;
+  }
+  const incoming = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    incoming.set(node.id, 0);
+  }
+  for (const edge of graph.edges) {
+    incoming.set(edge.target, (incoming.get(edge.target) ?? 0) + 1);
+  }
+  const sourceCandidates = graph.nodes.filter((node) => (incoming.get(node.id) ?? 0) === 0);
+  if (sourceCandidates.length === 0) {
+    return graph.nodes[0]?.id;
+  }
+  sourceCandidates.sort((a, b) => b.score - a.score);
+  return sourceCandidates[0]?.id;
 }
-function getRootLabel(investigation) {
-  const rootObservable = (0, import_cyvest_js2.getRootObservable)(investigation);
-  if (rootObservable) {
+function getArrowShapes(edge) {
+  if (edge.direction === "bidirectional") {
     return {
-      value: rootObservable.value,
-      level: rootObservable.level,
-      score: rootObservable.score
+      sourceArrowShape: "triangle",
+      targetArrowShape: "triangle"
     };
   }
-  const firstObservable = Object.values(investigation.observables)[0];
-  if (firstObservable) {
+  if (edge.direction === "inbound") {
     return {
-      value: firstObservable.value,
-      level: firstObservable.level,
-      score: firstObservable.score
+      sourceArrowShape: "triangle",
+      targetArrowShape: "none"
     };
   }
   return {
-    value: investigation.investigation_name ?? investigation.investigation_id,
-    level: investigation.level,
-    score: investigation.score
-  };
-}
-function getTagMap(tags) {
-  const map = /* @__PURE__ */ new Map();
-  for (const tag of Object.values(tags)) {
-    map.set(tag.name, tag);
-  }
-  return map;
-}
-function createEdge(id, source, target, relationshipType, edgeColor) {
-  const data = {
-    id,
-    relationshipType,
-    color: edgeColor,
-    width: 1.5,
     sourceArrowShape: "none",
     targetArrowShape: "triangle"
   };
-  return {
-    group: "edges",
-    data: {
-      ...data,
-      source,
-      target
-    }
-  };
 }
-function buildInvestigationElements(investigation, options) {
-  const maxLabelLength = options?.maxLabelLength ?? 26;
-  const edgeColor = options?.edgeColor ?? "#8a95aa";
-  const nodes = [];
-  const edges = [];
-  const root = getRootLabel(investigation);
-  nodes.push({
-    group: "nodes",
-    data: createNodeData(
-      ROOT_NODE_ID,
-      "root",
-      root.value,
-      root.level,
-      root.score,
-      maxLabelLength
-    )
-  });
-  const checks = Object.values(investigation.checks);
-  const allTags = Object.values(investigation.tags);
-  const tagByName = getTagMap(investigation.tags);
-  const checksInTags = /* @__PURE__ */ new Set();
-  for (const tag of allTags) {
-    for (const checkKey of tag.checks) {
-      checksInTags.add(checkKey);
-    }
-  }
-  for (const check of checks) {
-    const checkNodeId = `inv-check:${check.key}`;
-    const nodeData = createNodeData(
-      checkNodeId,
-      "check",
-      check.check_name,
-      check.level,
-      check.score,
-      maxLabelLength
-    );
-    nodes.push({ group: "nodes", data: nodeData });
-    if (!checksInTags.has(check.key)) {
-      edges.push(
-        createEdge(
-          `inv-edge-root-check:${check.key}`,
-          ROOT_NODE_ID,
-          checkNodeId,
-          "contains-check",
-          edgeColor
-        )
-      );
-    }
-  }
-  const tagNames = /* @__PURE__ */ new Set();
-  for (const tag of allTags) {
-    tagNames.add(tag.name);
-    for (const ancestor of (0, import_cyvest_js2.getTagAncestors)(tag.name)) {
-      tagNames.add(ancestor);
-    }
-  }
-  for (const tagName of tagNames) {
-    const tag = tagByName.get(tagName);
-    const tagLevel = tag?.direct_level ?? "INFO";
-    const tagScore = tag?.direct_score ?? 0;
-    const shortTagName = tagName.split(":").pop() ?? tagName;
-    nodes.push({
+function buildObservablesElements(investigation, options) {
+  const graph = (0, import_cyvest_js.getObservableGraph)(investigation);
+  const rootObservable = (0, import_cyvest_js.getRootObservable)(investigation);
+  const rootId = rootObservable?.key ?? findFallbackRootId(graph);
+  const maxLabelLength = options?.maxLabelLength ?? 28;
+  const theme = resolveTheme(options?.theme);
+  const edgeColor = options?.edgeColor ?? theme.edgeColor;
+  const nodes = graph.nodes.map((node) => {
+    const isRoot = node.id === rootId;
+    const borderColor = getLevelColor(node.level);
+    const dimension = isRoot ? 52 : 38;
+    const iconColor = isRoot ? theme.rootText : theme.iconMutedColor;
+    const data = {
+      id: node.id,
+      nodeType: "observable",
+      labelShort: truncateLabel(node.value, maxLabelLength, true),
+      labelFull: node.value,
+      observableType: node.type,
+      level: node.level,
+      score: node.score,
+      isRoot,
+      whitelisted: node.whitelisted,
+      internal: node.internal,
+      shape: "ellipse",
+      width: dimension,
+      height: dimension,
+      borderWidth: isRoot ? 1 : 2,
+      borderColor: isRoot ? theme.rootSurface : borderColor,
+      fillColor: isRoot ? theme.rootSurface : node.internal ? theme.nodeSurface : getLevelBackgroundColor(node.level, theme),
+      icon: getObservableIconSvg(node.type, { color: iconColor }),
+      opacity: node.whitelisted ? 0.52 : 1
+    };
+    return {
       group: "nodes",
-      data: createNodeData(
-        `inv-tag:${tagName}`,
-        "tag",
-        shortTagName,
-        tagLevel,
-        tagScore,
-        maxLabelLength
-      )
-    });
-  }
-  for (const tagName of tagNames) {
-    const parts = tagName.split(":");
-    if (parts.length === 1) {
-      edges.push(
-        createEdge(
-          `inv-edge-root-tag:${tagName}`,
-          ROOT_NODE_ID,
-          `inv-tag:${tagName}`,
-          "contains-tag",
-          edgeColor
-        )
-      );
-      continue;
-    }
-    const parentName = parts.slice(0, -1).join(":");
-    edges.push(
-      createEdge(
-        `inv-edge-tag:${parentName}->${tagName}`,
-        `inv-tag:${parentName}`,
-        `inv-tag:${tagName}`,
-        "tag-hierarchy",
-        edgeColor
-      )
-    );
-  }
-  const checksByKey = new Map(
-    checks.map((check) => [check.key, check])
-  );
-  for (const tag of allTags) {
-    for (const checkKey of tag.checks) {
-      if (!checksByKey.has(checkKey)) {
-        continue;
+      data
+    };
+  });
+  const nodeIds = new Set(graph.nodes.map((node) => node.id));
+  const edges = graph.edges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target)).map((edge, index) => {
+    const arrowShape = getArrowShapes(edge);
+    const data = {
+      id: `obs-edge-${index}-${edge.source}-${edge.target}-${edge.type}`,
+      relationshipType: edge.type,
+      direction: edge.direction,
+      color: edgeColor,
+      width: 1.15,
+      sourceArrowShape: arrowShape.sourceArrowShape,
+      targetArrowShape: arrowShape.targetArrowShape
+    };
+    return {
+      group: "edges",
+      data: {
+        ...data,
+        source: edge.source,
+        target: edge.target
       }
-      edges.push(
-        createEdge(
-          `inv-edge-tag-check:${tag.name}->${checkKey}`,
-          `inv-tag:${tag.name}`,
-          `inv-check:${checkKey}`,
-          "tag-check",
-          edgeColor
-        )
-      );
-    }
-  }
+    };
+  });
   return [...nodes, ...edges];
 }
 
 // src/core/styles.ts
-function createObservablesStylesheet(theme) {
+function createSharedStylesheet(theme) {
   const resolved = resolveTheme(theme);
   return [
     {
@@ -373,34 +315,58 @@ function createObservablesStylesheet(theme) {
         height: "data(height)",
         label: "data(labelShort)",
         color: resolved.panelText,
-        "font-size": 11,
+        "font-size": 10.5,
         "font-family": resolved.fontFamily,
         "font-weight": 500,
+        "min-zoomed-font-size": 8,
         "text-wrap": "none",
-        "text-max-width": 210,
+        "text-max-width": 190,
         "text-halign": "center",
         "text-valign": "bottom",
-        "text-margin-y": 10,
+        "text-margin-y": 9,
+        "text-background-color": resolved.panelBackground,
+        "text-background-opacity": 0.86,
+        "text-background-padding": 2,
+        "text-background-shape": "roundrectangle",
         "background-color": "data(fillColor)",
         "border-color": "data(borderColor)",
         "border-width": "data(borderWidth)",
         "background-image": "data(icon)",
         "background-fit": "none",
-        "background-width": "13px",
-        "background-height": "13px",
+        "background-width": "48%",
+        "background-height": "48%",
         "background-position-x": "50%",
         "background-position-y": "50%",
         "background-image-opacity": 1,
         "background-opacity": 1,
         opacity: "data(opacity)",
-        "overlay-opacity": 0
+        "overlay-opacity": 0,
+        "transition-property": "opacity, border-width, border-color, underlay-opacity, underlay-padding",
+        "transition-duration": 140
       }
     },
     {
       selector: "node:selected",
       style: {
-        "border-color": resolved.accent,
-        "border-width": 3
+        "border-color": resolved.edgeSelectedColor,
+        "border-width": 2.5,
+        "underlay-color": resolved.accent,
+        "underlay-opacity": 0.12,
+        "underlay-padding": 7
+      }
+    },
+    {
+      selector: "node.cyvest-focus",
+      style: {
+        "underlay-color": resolved.accent,
+        "underlay-opacity": 0.08,
+        "underlay-padding": 6
+      }
+    },
+    {
+      selector: ".cyvest-dimmed",
+      style: {
+        opacity: 0.16
       }
     },
     {
@@ -413,169 +379,286 @@ function createObservablesStylesheet(theme) {
         "target-arrow-shape": "data(targetArrowShape)",
         "source-arrow-shape": "data(sourceArrowShape)",
         "curve-style": "bezier",
-        "arrow-scale": 1,
-        opacity: 0.88,
-        "overlay-opacity": 0
+        "arrow-scale": 0.62,
+        opacity: 0.78,
+        "overlay-opacity": 0,
+        "transition-property": "opacity, line-color, width",
+        "transition-duration": 140
+      }
+    },
+    {
+      selector: "edge.cyvest-focus",
+      style: {
+        width: 1.7,
+        "line-color": resolved.edgeSelectedColor,
+        "target-arrow-color": resolved.edgeSelectedColor,
+        "source-arrow-color": resolved.edgeSelectedColor,
+        opacity: 0.9
       }
     },
     {
       selector: "edge:selected",
       style: {
+        width: 1.9,
         "line-color": resolved.edgeSelectedColor,
         "target-arrow-color": resolved.edgeSelectedColor,
         "source-arrow-color": resolved.edgeSelectedColor,
         label: "data(relationshipType)",
         color: resolved.panelTextMuted,
-        "font-size": 10,
+        "font-size": 9,
         "font-family": resolved.fontFamily,
         "text-background-color": resolved.panelBackground,
-        "text-background-opacity": 0.98,
+        "text-background-opacity": 0.94,
         "text-background-padding": 2
       }
     }
   ];
 }
-function createInvestigationStylesheet(theme) {
-  const resolved = resolveTheme(theme);
+function createObservablesStylesheet(theme) {
   return [
+    ...createSharedStylesheet(theme),
     {
-      selector: "node",
+      selector: "node[?isRoot]",
       style: {
-        shape: "data(shape)",
-        width: "data(width)",
-        height: "data(height)",
-        label: "data(labelShort)",
-        color: resolved.panelText,
-        "font-size": 10,
-        "font-family": resolved.fontFamily,
-        "font-weight": 500,
-        "text-wrap": "none",
-        "text-max-width": 190,
-        "text-halign": "center",
-        "text-valign": "center",
-        "text-justification": "center",
-        "background-color": "data(fillColor)",
-        "border-color": "data(borderColor)",
-        "border-width": "data(borderWidth)",
-        "background-image": "data(icon)",
-        "background-fit": "none",
-        "background-width": "18px",
-        "background-height": "18px",
-        "background-position-x": "10px",
-        "background-position-y": "50%",
-        "background-image-opacity": 0.9,
-        "text-margin-x": 0,
-        "overlay-opacity": 0
-      }
-    },
-    {
-      selector: "node[nodeType = 'check']",
-      style: {
-        "text-halign": "center",
-        "background-position-x": "10px"
-      }
-    },
-    {
-      selector: "node:selected",
-      style: {
-        "border-color": resolved.accent,
-        "border-width": 3
-      }
-    },
-    {
-      selector: "edge",
-      style: {
-        width: "data(width)",
-        "line-color": "data(color)",
-        "target-arrow-color": "data(color)",
-        "source-arrow-color": "data(color)",
-        "target-arrow-shape": "data(targetArrowShape)",
-        "source-arrow-shape": "data(sourceArrowShape)",
-        "curve-style": "taxi",
-        "taxi-direction": "rightward",
-        "taxi-turn": "26px",
-        "arrow-scale": 0.95,
-        opacity: 0.9,
-        "overlay-opacity": 0
-      }
-    },
-    {
-      selector: "edge:selected",
-      style: {
-        "line-color": resolved.edgeSelectedColor,
-        "target-arrow-color": resolved.edgeSelectedColor,
-        "source-arrow-color": resolved.edgeSelectedColor
+        "font-weight": 700,
+        "text-margin-y": 11
       }
     }
   ];
 }
 
-// src/layout/elk.ts
+// src/layout/force.ts
+var import_d3_force = require("d3-force");
 var DEFAULT_OBSERVABLES_LAYOUT = {
-  algorithm: "stress",
-  spacingNodeNode: 70,
-  spacingEdgeNode: 40,
-  padding: 56,
-  fit: true,
-  animate: false
-};
-var DEFAULT_INVESTIGATION_LAYOUT = {
-  algorithm: "dagre",
-  direction: "RIGHT",
-  spacingNodeNode: 50,
-  spacingEdgeNode: 30,
-  spacingBetweenLayers: 120,
-  padding: 56,
+  linkDistance: 118,
+  linkStrength: 0.72,
+  chargeStrength: -420,
+  collisionPadding: 30,
+  radialStep: 128,
+  radialStrength: 0.38,
+  centerStrength: 0.055,
+  iterations: 320,
+  padding: 72,
   fit: true,
-  animate: false
+  animate: true,
+  animationDuration: 420
 };
-function getDefaultElkOptions(view) {
-  return view === "observables" ? { ...DEFAULT_OBSERVABLES_LAYOUT } : { ...DEFAULT_INVESTIGATION_LAYOUT };
+function getDefaultForceOptions() {
+  return { ...DEFAULT_OBSERVABLES_LAYOUT };
 }
-function mergeElkOptions(view, overrides) {
+function resolveOptions(overrides) {
   return {
-    ...getDefaultElkOptions(view),
-    ...overrides,
-    extra: {
-      ...getDefaultElkOptions(view).extra ?? {},
-      ...overrides?.extra ?? {}
-    }
+    ...getDefaultForceOptions(),
+    ...overrides
   };
 }
-function createElkLayout(view, overrides) {
-  const merged = mergeElkOptions(view, overrides);
-  if (view === "investigation") {
+function configureSimulation(nodes, links, options) {
+  return (0, import_d3_force.forceSimulation)(nodes).alpha(1).alphaDecay(1 - Math.pow(1e-3, 1 / options.iterations)).velocityDecay(0.34).force(
+    "link",
+    (0, import_d3_force.forceLink)(links).id((node) => node.id).distance((link) => {
+      const sourceDepth = typeof link.source === "string" ? 0 : link.source.depth;
+      const targetDepth = typeof link.target === "string" ? 0 : link.target.depth;
+      return options.linkDistance + Math.abs(sourceDepth - targetDepth) * 8;
+    }).strength(options.linkStrength)
+  ).force("charge", (0, import_d3_force.forceManyBody)().strength(options.chargeStrength)).force(
+    "collision",
+    (0, import_d3_force.forceCollide)().radius((node) => node.radius + options.collisionPadding).strength(0.92).iterations(3)
+  ).force(
+    "radial",
+    (0, import_d3_force.forceRadial)(
+      (node) => node.depth * options.radialStep,
+      0,
+      0
+    ).strength((node) => node.isRoot ? 1 : options.radialStrength)
+  ).force("center", (0, import_d3_force.forceCenter)(0, 0).strength(options.centerStrength)).force("x", (0, import_d3_force.forceX)(0).strength(options.centerStrength)).force("y", (0, import_d3_force.forceY)(0).strength(options.centerStrength));
+}
+function getNodeId(element) {
+  return String(element.data.id);
+}
+function getNodeRadius(element) {
+  const width = Number(element.data.width ?? 40);
+  const height = Number(element.data.height ?? width);
+  return Math.max(width, height) / 2;
+}
+function findRootId(nodes) {
+  const explicitRoot = nodes.find(
+    (node) => node.data.isRoot === true || node.data.nodeType === "root"
+  );
+  return explicitRoot ? getNodeId(explicitRoot) : nodes[0] ? getNodeId(nodes[0]) : void 0;
+}
+function calculateDepths(nodeIds, links, rootId) {
+  const depths = /* @__PURE__ */ new Map();
+  if (!rootId) {
+    return depths;
+  }
+  const neighbors = /* @__PURE__ */ new Map();
+  for (const id of nodeIds) {
+    neighbors.set(id, []);
+  }
+  for (const link of links) {
+    const source = String(link.source);
+    const target = String(link.target);
+    neighbors.get(source)?.push(target);
+    neighbors.get(target)?.push(source);
+  }
+  const queue = [rootId];
+  depths.set(rootId, 0);
+  while (queue.length > 0) {
+    const current = queue.shift();
+    if (!current) continue;
+    const nextDepth = (depths.get(current) ?? 0) + 1;
+    for (const neighbor of neighbors.get(current) ?? []) {
+      if (depths.has(neighbor)) continue;
+      depths.set(neighbor, nextDepth);
+      queue.push(neighbor);
+    }
+  }
+  const fallbackDepth = Math.max(1, ...depths.values()) + 1;
+  for (const nodeId of nodeIds) {
+    if (!depths.has(nodeId)) {
+      depths.set(nodeId, fallbackDepth);
+    }
+  }
+  return depths;
+}
+function computeForcePositions(elements, overrides) {
+  const options = resolveOptions(overrides);
+  const nodeElements = elements.filter((element) => element.group === "nodes");
+  const edgeElements = elements.filter((element) => element.group === "edges");
+  const nodeIds = nodeElements.map(getNodeId);
+  const rootId = findRootId(nodeElements);
+  const links = edgeElements.map((edge) => ({
+    source: String(edge.data.source),
+    target: String(edge.data.target)
+  }));
+  const depths = calculateDepths(nodeIds, links, rootId);
+  const nodes = nodeElements.map((element) => {
+    const id = getNodeId(element);
+    const isRoot = id === rootId;
+    return {
+      id,
+      radius: getNodeRadius(element),
+      depth: depths.get(id) ?? 1,
+      isRoot,
+      ...isRoot ? { fx: 0, fy: 0 } : {}
+    };
+  });
+  const simulation = configureSimulation(nodes, links, options).stop();
+  for (let index = 0; index < options.iterations; index += 1) {
+    simulation.tick();
+  }
+  return Object.fromEntries(
+    nodes.map((node) => [
+      node.id,
+      {
+        x: Number.isFinite(node.x) ? node.x ?? 0 : 0,
+        y: Number.isFinite(node.y) ? node.y ?? 0 : 0
+      }
+    ])
+  );
+}
+function startForceSimulation(cy, overrides) {
+  if (cy.nodes().empty()) {
     return {
-      name: "dagre",
-      fit: merged.fit ?? true,
-      padding: merged.padding ?? 56,
-      animate: merged.animate ?? false,
-      // Force horizontal left-to-right investigation flow.
-      rankDir: "LR",
-      rankSep: merged.spacingBetweenLayers ?? 120,
-      nodeSep: merged.spacingNodeNode ?? 50,
-      edgeSep: merged.spacingEdgeNode ?? 30,
-      ...merged.extra ?? {}
+      reheat: () => void 0,
+      stop: () => void 0
     };
   }
-  const elkOptions = {
-    "elk.algorithm": merged.algorithm ?? "stress",
-    "elk.spacing.nodeNode": merged.spacingNodeNode ?? 60,
-    "elk.spacing.edgeNode": merged.spacingEdgeNode ?? 30,
-    ...merged.direction ? { "elk.direction": merged.direction } : {},
-    ...merged.spacingBetweenLayers ? {
-      "elk.layered.spacing.nodeNodeBetweenLayers": merged.spacingBetweenLayers
-    } : {},
-    ...merged.extra ?? {}
+  const options = resolveOptions(overrides);
+  const cyNodes = cy.nodes();
+  const nodeIds = cyNodes.map((node) => node.id());
+  const rootNode = cyNodes.filter(
+    (node) => node.data("isRoot") === true || node.data("nodeType") === "root"
+  ).first();
+  const rootId = (!rootNode.empty() ? rootNode : cyNodes.first()).id();
+  const links = cy.edges().map((edge) => ({
+    source: edge.source().id(),
+    target: edge.target().id()
+  }));
+  const depths = calculateDepths(nodeIds, links, rootId);
+  const nodeById = /* @__PURE__ */ new Map();
+  const nodes = cyNodes.map((node) => {
+    const position = node.position();
+    const forceNode = {
+      id: node.id(),
+      radius: Math.max(
+        Number(node.data("width") ?? 40),
+        Number(node.data("height") ?? 40)
+      ) / 2,
+      depth: depths.get(node.id()) ?? 1,
+      isRoot: node.id() === rootId,
+      x: position.x,
+      y: position.y
+    };
+    if (forceNode.isRoot) {
+      forceNode.fx = position.x;
+      forceNode.fy = position.y;
+    }
+    nodeById.set(forceNode.id, forceNode);
+    return forceNode;
+  });
+  const simulation = configureSimulation(nodes, links, options).alpha(0.42).alphaTarget(0).on("tick", () => {
+    cy.batch(() => {
+      for (const forceNode of nodes) {
+        const cyNode = cy.getElementById(forceNode.id);
+        if (cyNode.empty() || cyNode.grabbed()) continue;
+        cyNode.position({
+          x: forceNode.x ?? 0,
+          y: forceNode.y ?? 0
+        });
+      }
+    });
+  });
+  const handleGrab = (event) => {
+    const forceNode = nodeById.get(event.target.id());
+    if (!forceNode) return;
+    const position = event.target.position();
+    forceNode.fx = position.x;
+    forceNode.fy = position.y;
+    simulation.alphaTarget(0.22).restart();
+  };
+  const handleDrag = (event) => {
+    const forceNode = nodeById.get(event.target.id());
+    if (!forceNode) return;
+    const position = event.target.position();
+    forceNode.fx = position.x;
+    forceNode.fy = position.y;
   };
+  const handleFree = (event) => {
+    const forceNode = nodeById.get(event.target.id());
+    if (!forceNode) return;
+    if (!forceNode.isRoot) {
+      forceNode.fx = null;
+      forceNode.fy = null;
+    }
+    simulation.alphaTarget(0);
+  };
+  cy.on("grab", "node", handleGrab);
+  cy.on("drag", "node", handleDrag);
+  cy.on("free", "node", handleFree);
+  return {
+    reheat: () => {
+      simulation.alpha(0.72).alphaTarget(0).restart();
+    },
+    stop: () => {
+      simulation.stop();
+      cy.removeListener("grab", "node", handleGrab);
+      cy.removeListener("drag", "node", handleDrag);
+      cy.removeListener("free", "node", handleFree);
+    }
+  };
+}
+function createForceLayout(elements, overrides) {
+  const options = resolveOptions(overrides);
+  const positions = computeForcePositions(elements, overrides);
   return {
-    name: "elk",
-    fit: merged.fit ?? true,
-    padding: merged.padding ?? 56,
-    animate: merged.animate ?? false,
-    nodeDimensionsIncludeLabels: true,
-    // cytoscape-elk reads these options and forwards them to elkjs
-    elk: elkOptions
+    name: "preset",
+    positions,
+    fit: options.fit,
+    padding: options.padding,
+    animate: options.animate,
+    animationDuration: options.animationDuration,
+    animationEasing: "ease-out-cubic"
   };
 }
 
@@ -584,19 +667,7 @@ var import_react = require("react");
 
 // src/core/createCyInstance.ts
 var import_cytoscape = __toESM(require("cytoscape"), 1);
-var import_cytoscape_dagre = __toESM(require("cytoscape-dagre"), 1);
-var import_cytoscape_elk = __toESM(require("cytoscape-elk"), 1);
-var pluginRegistered = false;
-function ensurePluginsRegistered() {
-  if (pluginRegistered) {
-    return;
-  }
-  import_cytoscape.default.use(import_cytoscape_elk.default);
-  import_cytoscape.default.use(import_cytoscape_dagre.default);
-  pluginRegistered = true;
-}
 function createCyInstance(container) {
-  ensurePluginsRegistered();
   return (0, import_cytoscape.default)({
     container,
     elements: [],
@@ -604,9 +675,9 @@ function createCyInstance(container) {
     autoungrabify: false,
     boxSelectionEnabled: false,
     selectionType: "single",
-    wheelSensitivity: 0.2,
-    minZoom: 0.1,
-    maxZoom: 2.4
+    wheelSensitivity: 0.16,
+    minZoom: 0.16,
+    maxZoom: 3
   });
 }
 
@@ -633,10 +704,11 @@ function joinClassNames(...names) {
   return names.filter(Boolean).join(" ");
 }
 var CytoscapeCanvas = ({
-  view,
   elements,
   stylesheet,
   layout,
+  forceOptions,
+  physics = true,
   width,
   height,
   className,
@@ -649,7 +721,12 @@ var CytoscapeCanvas = ({
   const containerRef = (0, import_react.useRef)(null);
   const cyRef = (0, import_react.useRef)(null);
   const layoutRef = (0, import_react.useRef)(layout);
+  const forceOptionsRef = (0, import_react.useRef)(forceOptions);
+  const physicsRef = (0, import_react.useRef)(physics);
+  const simulationRef = (0, import_react.useRef)(null);
   layoutRef.current = layout;
+  forceOptionsRef.current = forceOptions;
+  physicsRef.current = physics;
   (0, import_react.useEffect)(() => {
     if (!containerRef.current) {
       return;
@@ -658,6 +735,8 @@ var CytoscapeCanvas = ({
     cyRef.current = cy;
     onCyReady?.(cy);
     return () => {
+      simulationRef.current?.stop();
+      simulationRef.current = null;
       cy.destroy();
       cyRef.current = null;
     };
@@ -667,8 +746,19 @@ var CytoscapeCanvas = ({
     if (!cy) {
       return;
     }
-    const runner = cy.layout(layoutRef.current);
+    simulationRef.current?.stop();
+    simulationRef.current = null;
+    const runner = cy.layout({
+      ...layoutRef.current,
+      animate: false
+    });
     runner.run();
+    if (physicsRef.current) {
+      simulationRef.current = startForceSimulation(
+        cy,
+        forceOptionsRef.current
+      );
+    }
   }, []);
   (0, import_react.useEffect)(() => {
     const cy = cyRef.current;
@@ -695,7 +785,7 @@ var CytoscapeCanvas = ({
       const data = node.data();
       const rawLabel = data.labelFull ?? data.labelShort ?? node.id();
       onNodeSelect({
-        view,
+        view: "observables",
         nodeId: node.id(),
         nodeType: typeof data.nodeType === "string" ? data.nodeType : "unknown",
         label: String(rawLabel),
@@ -710,7 +800,7 @@ var CytoscapeCanvas = ({
       const edge = event.target;
       const data = edge.data();
       onEdgeSelect({
-        view,
+        view: "observables",
         edgeId: edge.id(),
         sourceId: edge.source().id(),
         targetId: edge.target().id(),
@@ -719,13 +809,35 @@ var CytoscapeCanvas = ({
         element: edge
       });
     };
+    const handleNodeMouseOver = (event) => {
+      const node = event.target;
+      const neighborhood = node.closedNeighborhood();
+      cy.elements().addClass("cyvest-dimmed");
+      neighborhood.removeClass("cyvest-dimmed");
+      node.addClass("cyvest-focus");
+      node.connectedEdges().addClass("cyvest-focus");
+    };
+    const clearFocus = () => {
+      cy.elements().removeClass("cyvest-dimmed cyvest-focus");
+    };
+    const handleCanvasTap = (event) => {
+      if (event.target === cy) {
+        cy.elements().unselect();
+      }
+    };
     cy.on("tap", "node", handleNodeTap);
     cy.on("tap", "edge", handleEdgeTap);
+    cy.on("mouseover", "node", handleNodeMouseOver);
+    cy.on("mouseout", "node", clearFocus);
+    cy.on("tap", handleCanvasTap);
     return () => {
       cy.removeListener("tap", "node", handleNodeTap);
       cy.removeListener("tap", "edge", handleEdgeTap);
+      cy.removeListener("mouseover", "node", handleNodeMouseOver);
+      cy.removeListener("mouseout", "node", clearFocus);
+      cy.removeListener("tap", handleCanvasTap);
     };
-  }, [onEdgeSelect, onNodeSelect, view]);
+  }, [onEdgeSelect, onNodeSelect]);
   const handleFit = (0, import_react.useCallback)(() => {
     const cy = cyRef.current;
     if (!cy) {
@@ -779,8 +891,8 @@ var CytoscapeCanvas = ({
               type: "button",
               className: "cyvest-toolbar__button",
               onClick: runLayout,
-              title: "Re-run layout",
-              "aria-label": "Re-run layout",
+              title: "Reheat physics",
+              "aria-label": "Reheat physics",
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 1 1-2.64-6.36" }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 3v6h-6" })
@@ -807,156 +919,8 @@ var CytoscapeCanvas = ({
   );
 };
 
-// src/components/CyvestInvestigationView.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var CyvestInvestigationView = ({
-  investigation,
-  height = 500,
-  width = "100%",
-  className,
-  theme,
-  onCyReady,
-  onNodeSelect,
-  onEdgeSelect,
-  showToolbar = true,
-  layout,
-  maxLabelLength = 26
-}) => {
-  const elements = (0, import_react2.useMemo)(
-    () => buildInvestigationElements(investigation, {
-      maxLabelLength,
-      edgeColor: theme?.edgeColor
-    }),
-    [investigation, maxLabelLength, theme?.edgeColor]
-  );
-  const stylesheet = (0, import_react2.useMemo)(
-    () => createInvestigationStylesheet(theme),
-    [theme]
-  );
-  const elkLayout = (0, import_react2.useMemo)(
-    () => createElkLayout("investigation", layout),
-    [layout]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    CytoscapeCanvas,
-    {
-      view: "investigation",
-      elements,
-      stylesheet,
-      layout: elkLayout,
-      width,
-      height,
-      className,
-      theme,
-      onCyReady,
-      onNodeSelect,
-      onEdgeSelect,
-      showToolbar
-    }
-  );
-};
-
 // src/components/CyvestObservablesView.tsx
-var import_react3 = require("react");
-
-// src/adapters/observablesElements.ts
-var import_cyvest_js3 = require("@cyvest/cyvest-js");
-function findFallbackRootId(graph) {
-  if (graph.nodes.length === 0) {
-    return void 0;
-  }
-  const incoming = /* @__PURE__ */ new Map();
-  for (const node of graph.nodes) {
-    incoming.set(node.id, 0);
-  }
-  for (const edge of graph.edges) {
-    incoming.set(edge.target, (incoming.get(edge.target) ?? 0) + 1);
-  }
-  const sourceCandidates = graph.nodes.filter((node) => (incoming.get(node.id) ?? 0) === 0);
-  if (sourceCandidates.length === 0) {
-    return graph.nodes[0]?.id;
-  }
-  sourceCandidates.sort((a, b) => b.score - a.score);
-  return sourceCandidates[0]?.id;
-}
-function getArrowShapes(edge) {
-  if (edge.direction === "bidirectional") {
-    return {
-      sourceArrowShape: "triangle",
-      targetArrowShape: "triangle"
-    };
-  }
-  if (edge.direction === "inbound") {
-    return {
-      sourceArrowShape: "triangle",
-      targetArrowShape: "none"
-    };
-  }
-  return {
-    sourceArrowShape: "none",
-    targetArrowShape: "triangle"
-  };
-}
-function buildObservablesElements(investigation, options) {
-  const graph = (0, import_cyvest_js3.getObservableGraph)(investigation);
-  const rootObservable = (0, import_cyvest_js3.getRootObservable)(investigation);
-  const rootId = rootObservable?.key ?? findFallbackRootId(graph);
-  const maxLabelLength = options?.maxLabelLength ?? 28;
-  const edgeColor = options?.edgeColor ?? "#8a95aa";
-  const nodes = graph.nodes.map((node) => {
-    const isRoot = node.id === rootId;
-    const borderColor = getLevelColor(node.level);
-    const data = {
-      id: node.id,
-      nodeType: "observable",
-      labelShort: truncateLabel(node.value, maxLabelLength, true),
-      labelFull: node.value,
-      observableType: node.type,
-      level: node.level,
-      score: node.score,
-      isRoot,
-      whitelisted: node.whitelisted,
-      internal: node.internal,
-      shape: "ellipse",
-      width: 48,
-      height: 48,
-      borderWidth: 2,
-      borderColor,
-      fillColor: getLevelBackgroundColor(node.level),
-      icon: getObservableIconSvg(node.type, { color: borderColor }),
-      opacity: node.whitelisted ? 0.5 : 1
-    };
-    return {
-      group: "nodes",
-      data
-    };
-  });
-  const nodeIds = new Set(graph.nodes.map((node) => node.id));
-  const edges = graph.edges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target)).map((edge, index) => {
-    const arrowShape = getArrowShapes(edge);
-    const data = {
-      id: `obs-edge-${index}-${edge.source}-${edge.target}-${edge.type}`,
-      relationshipType: edge.type,
-      direction: edge.direction,
-      color: edgeColor,
-      width: 1.6,
-      sourceArrowShape: arrowShape.sourceArrowShape,
-      targetArrowShape: arrowShape.targetArrowShape
-    };
-    return {
-      group: "edges",
-      data: {
-        ...data,
-        source: edge.source,
-        target: edge.target
-      }
-    };
-  });
-  return [...nodes, ...edges];
-}
-
-// src/components/CyvestObservablesView.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var CyvestObservablesView = ({
   investigation,
   height = 500,
@@ -966,32 +930,34 @@ var CyvestObservablesView = ({
   onCyReady,
   onNodeSelect,
   onEdgeSelect,
+  physics = true,
   showToolbar = true,
   layout,
   maxLabelLength = 28
 }) => {
-  const elements = (0, import_react3.useMemo)(
+  const elements = (0, import_react2.useMemo)(
     () => buildObservablesElements(investigation, {
       maxLabelLength,
-      edgeColor: theme?.edgeColor
+      theme
     }),
-    [investigation, maxLabelLength, theme?.edgeColor]
+    [investigation, maxLabelLength, theme]
   );
-  const stylesheet = (0, import_react3.useMemo)(
+  const stylesheet = (0, import_react2.useMemo)(
     () => createObservablesStylesheet(theme),
     [theme]
   );
-  const elkLayout = (0, import_react3.useMemo)(
-    () => createElkLayout("observables", layout),
-    [layout]
+  const forceLayout = (0, import_react2.useMemo)(
+    () => createForceLayout(elements, layout),
+    [elements, layout]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     CytoscapeCanvas,
     {
-      view: "observables",
       elements,
       stylesheet,
-      layout: elkLayout,
+      layout: forceLayout,
+      forceOptions: layout,
+      physics,
       width,
       height,
       className,
@@ -1005,10 +971,7 @@ var CyvestObservablesView = ({
 };
 
 // src/components/CyvestGraph.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function normalizeInitialView(view) {
-  return view === "investigation" ? "investigation" : "observables";
-}
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var CyvestGraph = ({
   investigation,
   height = 500,
@@ -1018,105 +981,42 @@ var CyvestGraph = ({
   onCyReady,
   onNodeSelect,
   onEdgeSelect,
-  initialView = "observables",
-  showViewToggle = true,
-  onViewChange,
+  physics = true,
   showToolbar = true,
-  observablesLayout,
-  investigationLayout,
-  maxObservableLabelLength = 28,
-  maxInvestigationLabelLength = 26
-}) => {
-  const [activeView, setActiveView] = (0, import_react4.useState)(
-    () => normalizeInitialView(initialView)
-  );
-  (0, import_react4.useEffect)(() => {
-    setActiveView(normalizeInitialView(initialView));
-  }, [initialView]);
-  (0, import_react4.useEffect)(() => {
-    onViewChange?.(activeView);
-  }, [activeView, onViewChange]);
-  const containerStyle = (0, import_react4.useMemo)(
-    () => ({
-      width,
-      height,
-      position: "relative"
-    }),
-    [width, height]
-  );
-  const handleViewChange = (0, import_react4.useCallback)((view) => {
-    setActiveView(view);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, style: containerStyle, children: [
-    showViewToggle && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cyvest-view-toggle", role: "tablist", "aria-label": "Graph view mode", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "button",
-        {
-          type: "button",
-          className: activeView === "observables" ? "cyvest-view-toggle__button cyvest-view-toggle__button--active" : "cyvest-view-toggle__button",
-          onClick: () => handleViewChange("observables"),
-          role: "tab",
-          "aria-selected": activeView === "observables",
-          children: "Observables"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "button",
-        {
-          type: "button",
-          className: activeView === "investigation" ? "cyvest-view-toggle__button cyvest-view-toggle__button--active" : "cyvest-view-toggle__button",
-          onClick: () => handleViewChange("investigation"),
-          role: "tab",
-          "aria-selected": activeView === "investigation",
-          children: "Investigation"
-        }
-      )
-    ] }),
-    activeView === "observables" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      CyvestObservablesView,
-      {
-        investigation,
-        width: "100%",
-        height: "100%",
-        theme,
-        onCyReady,
-        onNodeSelect,
-        onEdgeSelect,
-        showToolbar,
-        layout: observablesLayout,
-        maxLabelLength: maxObservableLabelLength
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      CyvestInvestigationView,
-      {
-        investigation,
-        width: "100%",
-        height: "100%",
-        theme,
-        onCyReady,
-        onNodeSelect,
-        onEdgeSelect,
-        showToolbar,
-        layout: investigationLayout,
-        maxLabelLength: maxInvestigationLabelLength
-      }
-    )
-  ] });
-};
+  layout,
+  maxLabelLength = 28
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  CyvestObservablesView,
+  {
+    investigation,
+    width,
+    height,
+    className,
+    theme,
+    onCyReady,
+    onNodeSelect,
+    onEdgeSelect,
+    physics,
+    showToolbar,
+    layout,
+    maxLabelLength
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CyvestGraph,
-  CyvestInvestigationView,
   CyvestObservablesView,
+  DARK_CYVEST_THEME,
   DEFAULT_CYVEST_THEME,
-  INVESTIGATION_ICON_NAME_MAP,
   OBSERVABLE_ICON_NAME_MAP,
-  createElkLayout,
-  getDefaultElkOptions,
-  getInvestigationIconSvg,
+  computeForcePositions,
+  createForceLayout,
+  getDefaultForceOptions,
   getLevelBackgroundColor,
   getLevelColor,
   getObservableIconSvg,
   lightenHexColor,
+  mixHexColor,
+  startForceSimulation,
   truncateLabel
 });