fix(graph): preserve knowledge graph node colors (#1409)

Co-authored-by: Collective Developer <man@collective.dev>

ui/web/src/components/graph/graph-node-colors.ts

@@ -0,0 +1,11 @@
+import { getVaultNodeColor } from "@/adapters/vault-graph-adapter";
+
+export function resolveGraphNodeDisplayColor(attrs: Record<string, unknown>, isDark: boolean): string {
+  const docType = typeof attrs.docType === "string" ? attrs.docType : "";
+  if (docType) {
+    return getVaultNodeColor(docType, isDark);
+  }
+  return typeof attrs.color === "string" && attrs.color
+    ? attrs.color
+    : getVaultNodeColor("other", isDark);
+}

ui/web/src/components/graph/sigma-graph-container.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { resolveGraphNodeDisplayColor } from "./graph-node-colors";
+
+describe("resolveGraphNodeDisplayColor", () => {
+  it("keeps the adapter-assigned color for knowledge graph entity nodes", () => {
+    expect(resolveGraphNodeDisplayColor({
+      entityType: "person",
+      color: "#E85D24",
+    }, false)).toBe("#E85D24");
+  });
+
+  it("uses theme-aware vault colors for vault document nodes", () => {
+    expect(resolveGraphNodeDisplayColor({
+      docType: "document",
+      entityType: "document",
+      color: "#8b5cf6",
+    }, false)).toBe("#0891b2");
+  });
+});

ui/web/src/components/graph/sigma-graph-container.tsx

@@ -8,7 +8,7 @@ import noverlap from "graphology-layout-noverlap";
 import type Graph from "graphology";
 import { useUiStore } from "@/stores/use-ui-store";
 import { SIGMA_SETTINGS, getFA2WorkerSettings, ZOOM_TIERS, TIER_MIN_DEGREE, TIER_EDGE_DEGREE } from "./graph-utils";
-import { getVaultNodeColor } from "@/adapters/vault-graph-adapter";
+import { resolveGraphNodeDisplayColor } from "./graph-node-colors";
 
 export type EdgeType = "curvedArrow" | "arrow";
 
@@ -281,7 +281,7 @@ export function SigmaGraphContainer({
 
     sigma.setSetting("nodeReducer", (node, data) => {
       const docType = getNodeType(data);
-      const themedColor = getVaultNodeColor(docType, isDark);
+      const themedColor = resolveGraphNodeDisplayColor(data, isDark);
       const themedData = { ...data, color: themedColor };
 
       // Filter: hide nodes of hidden types