diff --git a/ui/web/src/components/graph/graph-node-colors.ts b/ui/web/src/components/graph/graph-node-colors.ts new file mode 100644 index 00000000..47d9fb12 --- /dev/null +++ b/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, 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); +} diff --git a/ui/web/src/components/graph/sigma-graph-container.test.ts b/ui/web/src/components/graph/sigma-graph-container.test.ts new file mode 100644 index 00000000..cec5d34d --- /dev/null +++ b/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"); + }); +}); diff --git a/ui/web/src/components/graph/sigma-graph-container.tsx b/ui/web/src/components/graph/sigma-graph-container.tsx index a3653ac4..6322f790 100644 --- a/ui/web/src/components/graph/sigma-graph-container.tsx +++ b/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