From 7e31f07924a35893393369c32435aae8a0bded72 Mon Sep 17 00:00:00 2001 From: Vorflux AI Date: Sun, 29 Mar 2026 00:27:18 +0000 Subject: [PATCH] fix: make all three edge types visually distinct with unique colors - Derives: soft blue/steel (#7094B8) -- cool desaturated blue for structural doc-to-memory links, visible but not attention-grabbing - Updates: purple (#A78BFA) -- unchanged, glow + arrowheads for version chains - Extends: sky blue (#38BDF8) -- bright blue with glow + dashed pattern for cross-references between memories Previously derives and extends both used similar teal/cyan colors, making extends edges invisible among the 220 derives edges. Now each type has a completely different appearance (steel blue vs purple vs bright cyan dashed). Also fixed extends edge zoom culling threshold from 0.3 to 0.08 -- extends edges were being hidden at normal zoom levels (10-26%). All edge types get glow for luminous aesthetic. Extends edges use dashed lines matching the legend icon. - All 107 tests pass, types clean --- .../memory-graph/src/__tests__/edge-logic.test.ts | 6 +++--- .../src/__tests__/graph-data-utils.test.ts | 6 +++--- packages/memory-graph/src/canvas/renderer.ts | 12 ++++++------ packages/memory-graph/src/constants.ts | 4 ++-- packages/memory-graph/src/hooks/use-graph-data.ts | 4 ++-- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/memory-graph/src/__tests__/edge-logic.test.ts b/packages/memory-graph/src/__tests__/edge-logic.test.ts index 8204cfcb..ff9003f4 100644 --- a/packages/memory-graph/src/__tests__/edge-logic.test.ts +++ b/packages/memory-graph/src/__tests__/edge-logic.test.ts @@ -633,10 +633,10 @@ describe("getEdgeVisualProps: all MemoryRelation values return valid visual prop }) } - it("extends edges have lower opacity than derives edges (barely visible)", () => { + it("extends edges have higher opacity than derives edges (rare but meaningful)", () => { const ext = getEdgeVisualProps("extends") const der = getEdgeVisualProps("derives") - expect(ext.opacity).toBeLessThan(der.opacity) + expect(ext.opacity).toBeGreaterThan(der.opacity) }) it("updates edges have higher opacity than derives edges (version chains are prominent)", () => { @@ -647,7 +647,7 @@ describe("getEdgeVisualProps: all MemoryRelation values return valid visual prop it("unknown edge type returns default props (opacity 0.4, thickness 1.2)", () => { // The default case returns { opacity: 0.4, thickness: 1.2 }. - // A safe conservative fallback that doesn't match any specific known type. + // A safe conservative fallback matching derives (the most common edge type). const unknown = getEdgeVisualProps("nonexistent") expect(unknown.opacity).toBeCloseTo(0.4) expect(unknown.thickness).toBeCloseTo(1.2) diff --git a/packages/memory-graph/src/__tests__/graph-data-utils.test.ts b/packages/memory-graph/src/__tests__/graph-data-utils.test.ts index 0f8c5e9f..9c643925 100644 --- a/packages/memory-graph/src/__tests__/graph-data-utils.test.ts +++ b/packages/memory-graph/src/__tests__/graph-data-utils.test.ts @@ -61,7 +61,7 @@ describe("getMemoryBorderColor", () => { describe("getEdgeVisualProps", () => { it("returns correct props for derives edges", () => { const props = getEdgeVisualProps("derives") - expect(props.opacity).toBeCloseTo(0.45) + expect(props.opacity).toBeCloseTo(0.4) expect(props.thickness).toBeCloseTo(1.2) }) @@ -73,8 +73,8 @@ describe("getEdgeVisualProps", () => { it("returns correct props for extends edges", () => { const props = getEdgeVisualProps("extends") - expect(props.opacity).toBeCloseTo(0.4) - expect(props.thickness).toBeCloseTo(1.2) + expect(props.opacity).toBeCloseTo(0.55) + expect(props.thickness).toBeCloseTo(1.5) }) it("returns default props for unknown edge types", () => { diff --git a/packages/memory-graph/src/canvas/renderer.ts b/packages/memory-graph/src/canvas/renderer.ts index 257d61cc..3c0d66b1 100644 --- a/packages/memory-graph/src/canvas/renderer.ts +++ b/packages/memory-graph/src/canvas/renderer.ts @@ -59,11 +59,11 @@ function edgeStyle( colors: GraphThemeColors, ): { color: string; width: number; opacity: number } { if (edge.edgeType === "derives") - return { color: colors.edgeDerives, width: 1.2, opacity: 0.45 } + return { color: colors.edgeDerives, width: 1.2, opacity: 0.4 } if (edge.edgeType === "updates") return { color: colors.edgeUpdates, width: 2, opacity: 0.7 } // "extends" and any unknown edge types - return { color: colors.edgeExtends, width: 1.2, opacity: 0.4 } + return { color: colors.edgeExtends, width: 1.5, opacity: 0.55 } } function batchKey(style: { @@ -101,9 +101,9 @@ function drawEdges( const prepared: PreparedEdge[] = [] for (const edge of edges) { - // Zoom-based edge culling for extends edges (low-priority visual) + // Zoom-based edge culling for extends edges at very low zoom if (edge.edgeType === "extends") { - if (viewport.zoom < 0.3) continue + if (viewport.zoom < 0.08) continue } const src = @@ -181,12 +181,12 @@ function drawEdges( const isDimmed = key.endsWith("|d") const batchEdgeType = first.edgeType - // Draw subtle glow pass behind all edge types (stronger for updates) + // Draw glow pass behind all edge types for luminous aesthetic if (!isDimmed) { const glowAlpha = batchEdgeType === "updates" ? first.style.opacity * 0.4 - : first.style.opacity * 0.25 + : first.style.opacity * 0.3 const glowWidth = batchEdgeType === "updates" ? first.style.width + 2 diff --git a/packages/memory-graph/src/constants.ts b/packages/memory-graph/src/constants.ts index 89a0a7d3..3361f6f2 100644 --- a/packages/memory-graph/src/constants.ts +++ b/packages/memory-graph/src/constants.ts @@ -48,9 +48,9 @@ export const DEFAULT_COLORS: GraphThemeColors = { textPrimary: "#ffffff", textSecondary: "#e2e8f0", textMuted: "#94a3b8", - edgeDerives: "#38BDF8", + edgeDerives: "#7094B8", edgeUpdates: "#A78BFA", - edgeExtends: "#2DD4BF", + edgeExtends: "#38BDF8", memBorderForgotten: "#EF4444", memBorderExpiring: "#F59E0B", memBorderRecent: "#10B981", diff --git a/packages/memory-graph/src/hooks/use-graph-data.ts b/packages/memory-graph/src/hooks/use-graph-data.ts index de5ef60e..ea840799 100644 --- a/packages/memory-graph/src/hooks/use-graph-data.ts +++ b/packages/memory-graph/src/hooks/use-graph-data.ts @@ -30,11 +30,11 @@ export function getMemoryBorderColor( export function getEdgeVisualProps(edgeType: string) { switch (edgeType) { case "derives": - return { opacity: 0.45, thickness: 1.2 } + return { opacity: 0.4, thickness: 1.2 } case "updates": return { opacity: 0.7, thickness: 2 } case "extends": - return { opacity: 0.4, thickness: 1.2 } + return { opacity: 0.55, thickness: 1.5 } default: return { opacity: 0.4, thickness: 1.2 } }