@opendata-ai/openchart-vanilla 2.0.0

package/src/graph/__tests__/search.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest';
+import { GraphSearchManager } from '../search';
+
+// ---------------------------------------------------------------------------
+// Test data
+// ---------------------------------------------------------------------------
+
+const nodes = [
+  { id: 'node-1', label: 'Alice' },
+  { id: 'node-2', label: 'Bob' },
+  { id: 'node-3', label: 'Charlie' },
+  { id: 'node-4', label: 'alice-bob' },
+  { id: 'alpha-5' },
+];
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('GraphSearchManager', () => {
+  it('matches case-insensitively on label', () => {
+    const search = new GraphSearchManager();
+    const matches = search.search('alice', nodes);
+    expect(matches.has('node-1')).toBe(true); // label "Alice"
+    expect(matches.has('node-4')).toBe(true); // label "alice-bob"
+    expect(matches.size).toBe(2);
+  });
+
+  it('matches on node id when label does not match', () => {
+    const search = new GraphSearchManager();
+    const matches = search.search('alpha', nodes);
+    expect(matches.has('alpha-5')).toBe(true);
+    expect(matches.size).toBe(1);
+  });
+
+  it('supports partial/substring matches', () => {
+    const search = new GraphSearchManager();
+    const matches = search.search('ob', nodes);
+    // "Bob" contains "ob", "alice-bob" contains "ob"
+    expect(matches.has('node-2')).toBe(true);
+    expect(matches.has('node-4')).toBe(true);
+  });
+
+  it('returns empty set for no matches', () => {
+    const search = new GraphSearchManager();
+    const matches = search.search('zzz', nodes);
+    expect(matches.size).toBe(0);
+  });
+
+  it('returns empty set for empty query (clears search)', () => {
+    const search = new GraphSearchManager();
+    const matches = search.search('', nodes);
+    expect(matches.size).toBe(0);
+  });
+
+  it('treats whitespace-only query as empty', () => {
+    const search = new GraphSearchManager();
+    const matches = search.search('   ', nodes);
+    expect(matches.size).toBe(0);
+  });
+
+  it('clearSearch returns null', () => {
+    const search = new GraphSearchManager();
+    search.search('alice', nodes);
+    const result = search.clearSearch();
+    expect(result).toBeNull();
+  });
+
+  it('getMatches returns current state', () => {
+    const search = new GraphSearchManager();
+    expect(search.getMatches()).toBeNull();
+
+    search.search('bob', nodes);
+    const matches = search.getMatches();
+    expect(matches).not.toBeNull();
+    expect(matches!.has('node-2')).toBe(true);
+
+    search.clearSearch();
+    expect(search.getMatches()).toBeNull();
+  });
+
+  it('handles nodes without labels', () => {
+    const search = new GraphSearchManager();
+    const matches = search.search('alpha', nodes);
+    // node "alpha-5" has no label but id matches
+    expect(matches.has('alpha-5')).toBe(true);
+  });
+});

package/src/graph/__tests__/simulation.test.ts

@@ -0,0 +1,233 @@
+import { describe, expect, it } from 'vitest';
+import { SimulationManager } from '../simulation';
+import type { SimEdge, SimNode, WorkerSimulationConfig } from '../worker-protocol';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function defaultConfig(overrides?: Partial<WorkerSimulationConfig>): WorkerSimulationConfig {
+  return {
+    chargeStrength: -30,
+    linkDistance: 30,
+    clustering: null,
+    alphaDecay: 0.0228,
+    velocityDecay: 0.4,
+    collisionRadius: 10,
+    ...overrides,
+  };
+}
+
+function makeTriangle(): { nodes: SimNode[]; edges: SimEdge[] } {
+  return {
+    nodes: [
+      { id: 'a', radius: 5 },
+      { id: 'b', radius: 5 },
+      { id: 'c', radius: 5 },
+    ],
+    edges: [
+      { source: 'a', target: 'b' },
+      { source: 'b', target: 'c' },
+      { source: 'c', target: 'a' },
+    ],
+  };
+}
+
+function makePentagon(): { nodes: SimNode[]; edges: SimEdge[] } {
+  const ids = ['a', 'b', 'c', 'd', 'e'];
+  return {
+    nodes: ids.map((id) => ({ id, radius: 5 })),
+    edges: [
+      { source: 'a', target: 'b' },
+      { source: 'b', target: 'c' },
+      { source: 'c', target: 'd' },
+      { source: 'd', target: 'e' },
+      { source: 'e', target: 'a' },
+      { source: 'a', target: 'c' },
+    ],
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Tests: Synchronous fallback (bun test has no real Web Worker)
+// ---------------------------------------------------------------------------
+
+describe('SimulationManager (sync fallback)', () => {
+  it('produces positions for a simple triangle graph', () => {
+    const { nodes, edges } = makeTriangle();
+    const mgr = SimulationManager.create(nodes, edges, defaultConfig());
+
+    let positions: Array<{ id: string; x: number; y: number }> | null = null;
+    mgr.onTick((pos) => {
+      positions = pos;
+    });
+
+    // Sync path fires immediately during create, but callbacks aren't set yet.
+    // Reheat to trigger another round with the callback attached.
+    mgr.reheat(0.3);
+
+    expect(positions).not.toBeNull();
+    expect(positions!.length).toBe(3);
+
+    // All nodes should have finite positions
+    for (const p of positions!) {
+      expect(Number.isFinite(p.x)).toBe(true);
+      expect(Number.isFinite(p.y)).toBe(true);
+    }
+
+    mgr.destroy();
+  });
+
+  it('converges positions for a 5-node graph', () => {
+    const { nodes, edges } = makePentagon();
+    const mgr = SimulationManager.create(nodes, edges, defaultConfig());
+
+    let positions: Array<{ id: string; x: number; y: number }> | null = null;
+    let _settled = false;
+
+    mgr.onTick((pos) => {
+      positions = pos;
+    });
+    mgr.onSettled(() => {
+      _settled = true;
+    });
+
+    mgr.reheat(1.0);
+
+    expect(positions).not.toBeNull();
+    expect(positions!.length).toBe(5);
+
+    // Nodes should be spread out (not all at origin)
+    const uniqueX = new Set(positions!.map((p) => Math.round(p.x)));
+    expect(uniqueX.size).toBeGreaterThan(1);
+
+    mgr.destroy();
+  });
+
+  it('cluster force pulls same-community nodes closer together', () => {
+    // Two communities: A,B,C in "red" and D,E,F in "blue"
+    const nodes: SimNode[] = [
+      { id: 'a', radius: 5, community: 'red' },
+      { id: 'b', radius: 5, community: 'red' },
+      { id: 'c', radius: 5, community: 'red' },
+      { id: 'd', radius: 5, community: 'blue' },
+      { id: 'e', radius: 5, community: 'blue' },
+      { id: 'f', radius: 5, community: 'blue' },
+    ];
+
+    const edges: SimEdge[] = [
+      { source: 'a', target: 'b' },
+      { source: 'b', target: 'c' },
+      { source: 'd', target: 'e' },
+      { source: 'e', target: 'f' },
+      // One cross-community link
+      { source: 'c', target: 'd' },
+    ];
+
+    const configWithClustering = defaultConfig({
+      clustering: { field: 'community', strength: 0.5 },
+    });
+
+    const mgr = SimulationManager.create(nodes, edges, configWithClustering);
+
+    let positions: Array<{ id: string; x: number; y: number }> | null = null;
+    mgr.onTick((pos) => {
+      positions = pos;
+    });
+
+    mgr.reheat(1.0);
+    expect(positions).not.toBeNull();
+
+    // Compute average position per community
+    const posMap = new Map(positions!.map((p) => [p.id, p]));
+    const redCentroid = {
+      x: (posMap.get('a')!.x + posMap.get('b')!.x + posMap.get('c')!.x) / 3,
+      y: (posMap.get('a')!.y + posMap.get('b')!.y + posMap.get('c')!.y) / 3,
+    };
+    const blueCentroid = {
+      x: (posMap.get('d')!.x + posMap.get('e')!.x + posMap.get('f')!.x) / 3,
+      y: (posMap.get('d')!.y + posMap.get('e')!.y + posMap.get('f')!.y) / 3,
+    };
+
+    // The community centroids should be further apart than members are
+    // from their own centroid (clustering is working)
+    const interClusterDist = Math.hypot(
+      redCentroid.x - blueCentroid.x,
+      redCentroid.y - blueCentroid.y,
+    );
+
+    // At minimum, communities should be separated
+    expect(interClusterDist).toBeGreaterThan(5);
+
+    mgr.destroy();
+  });
+
+  it('pin fixes a node position', () => {
+    const { nodes, edges } = makeTriangle();
+    const mgr = SimulationManager.create(nodes, edges, defaultConfig());
+
+    let positions: Array<{ id: string; x: number; y: number }> | null = null;
+    mgr.onTick((pos) => {
+      positions = pos;
+    });
+
+    // Pin node 'a' at specific coordinates
+    mgr.pinNode('a', 42, 99);
+    mgr.reheat(0.3);
+
+    expect(positions).not.toBeNull();
+    const pinned = positions!.find((p) => p.id === 'a');
+    expect(pinned).toBeDefined();
+    expect(pinned!.x).toBeCloseTo(42, 0);
+    expect(pinned!.y).toBeCloseTo(99, 0);
+
+    mgr.destroy();
+  });
+
+  it('unpin frees a pinned node', () => {
+    const { nodes, edges } = makeTriangle();
+    const mgr = SimulationManager.create(nodes, edges, defaultConfig());
+
+    let positions: Array<{ id: string; x: number; y: number }> | null = null;
+    mgr.onTick((pos) => {
+      positions = pos;
+    });
+
+    mgr.pinNode('a', 500, 500);
+    mgr.reheat(0.3);
+    const pinnedPos = positions!.find((p) => p.id === 'a')!;
+    expect(pinnedPos.x).toBeCloseTo(500, 0);
+
+    // Now unpin and reheat with high alpha so it moves
+    mgr.unpinNode('a');
+    mgr.reheat(1.0);
+
+    // After reheating with forces, 'a' should have moved away from 500,500
+    // because the other nodes are near the center and charge pushes things apart
+    const freedPos = positions!.find((p) => p.id === 'a')!;
+    // It should have moved at least a little
+    const dist = Math.hypot(freedPos.x - 500, freedPos.y - 500);
+    expect(dist).toBeGreaterThan(1);
+
+    mgr.destroy();
+  });
+
+  it('destroy prevents further callbacks', async () => {
+    const { nodes, edges } = makeTriangle();
+    const mgr = SimulationManager.create(nodes, edges, defaultConfig());
+
+    let callCount = 0;
+    mgr.onTick(() => {
+      callCount++;
+    });
+
+    mgr.destroy();
+    mgr.reheat(0.5);
+
+    // Wait for the deferred initial tick microtask to drain
+    await Promise.resolve();
+
+    // No callbacks should fire after destroy
+    expect(callCount).toBe(0);
+  });
+});

package/src/graph/__tests__/spatial-index.test.ts

@@ -0,0 +1,142 @@
+import { describe, expect, it } from 'vitest';
+import { SpatialIndex } from '../spatial-index';
+import type { PositionedNode } from '../types';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeNode(id: string, x: number, y: number, radius = 5): PositionedNode {
+  return {
+    id,
+    x,
+    y,
+    radius,
+    fill: '#3b82f6',
+    stroke: '#2563eb',
+    strokeWidth: 1,
+    label: id,
+    labelPriority: 0.5,
+    community: undefined,
+    data: {},
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('SpatialIndex', () => {
+  describe('findNearest', () => {
+    it('returns the correct nearest node', () => {
+      const idx = new SpatialIndex();
+      const nodes = [makeNode('a', 0, 0), makeNode('b', 100, 100), makeNode('c', 200, 200)];
+      idx.rebuild(nodes);
+
+      const result = idx.findNearest(10, 10);
+      expect(result).not.toBeNull();
+      expect(result!.id).toBe('a');
+    });
+
+    it('returns null for empty tree', () => {
+      const idx = new SpatialIndex();
+      expect(idx.findNearest(0, 0)).toBeNull();
+    });
+
+    it('respects maxDistance', () => {
+      const idx = new SpatialIndex();
+      const nodes = [makeNode('a', 100, 100, 5)];
+      idx.rebuild(nodes);
+
+      // Distance from (0,0) to node center is ~141, minus radius 5 = ~136
+      const tooFar = idx.findNearest(0, 0, 10);
+      expect(tooFar).toBeNull();
+
+      // With a large enough distance, should find it
+      const found = idx.findNearest(0, 0, 200);
+      expect(found).not.toBeNull();
+      expect(found!.id).toBe('a');
+    });
+
+    it('handles radius-based hit (clicking within a large node)', () => {
+      const idx = new SpatialIndex();
+      // Node at (100, 100) with radius 50
+      const nodes = [makeNode('big', 100, 100, 50)];
+      idx.rebuild(nodes);
+
+      // Click at (120, 120) -- within the 50px radius of the node
+      // Distance from center = ~28px, well within 50px radius
+      const hit = idx.findNearest(120, 120, 0);
+      // effectiveDist = max(0, 28.28 - 50) = 0, so it should be found with maxDistance=0
+      expect(hit).not.toBeNull();
+      expect(hit!.id).toBe('big');
+    });
+
+    it('prefers closer nodes even when a large node is present', () => {
+      const idx = new SpatialIndex();
+      const nodes = [makeNode('small-close', 10, 10, 5), makeNode('big-far', 200, 200, 50)];
+      idx.rebuild(nodes);
+
+      const result = idx.findNearest(12, 12);
+      expect(result).not.toBeNull();
+      expect(result!.id).toBe('small-close');
+    });
+  });
+
+  describe('findInRect', () => {
+    it('returns all nodes inside the rectangle', () => {
+      const idx = new SpatialIndex();
+      const nodes = [makeNode('a', 50, 50), makeNode('b', 150, 150), makeNode('c', 250, 250)];
+      idx.rebuild(nodes);
+
+      const result = idx.findInRect(0, 0, 200, 200);
+      const ids = result.map((n) => n.id).sort();
+      expect(ids).toEqual(['a', 'b']);
+    });
+
+    it('returns empty array for empty tree', () => {
+      const idx = new SpatialIndex();
+      const result = idx.findInRect(0, 0, 100, 100);
+      expect(result).toEqual([]);
+    });
+
+    it('handles inverted coordinates (x2 < x1)', () => {
+      const idx = new SpatialIndex();
+      const nodes = [makeNode('a', 50, 50), makeNode('b', 150, 150)];
+      idx.rebuild(nodes);
+
+      // Inverted rect: same area as (0,0)-(200,200)
+      const result = idx.findInRect(200, 200, 0, 0);
+      expect(result.length).toBe(2);
+    });
+
+    it('returns correct subset', () => {
+      const idx = new SpatialIndex();
+      const nodes = [
+        makeNode('origin', 0, 0),
+        makeNode('top-right', 100, 0),
+        makeNode('bottom-left', 0, 100),
+        makeNode('center', 50, 50),
+        makeNode('far', 500, 500),
+      ];
+      idx.rebuild(nodes);
+
+      const result = idx.findInRect(0, 0, 60, 60);
+      const ids = result.map((n) => n.id).sort();
+      expect(ids).toEqual(['center', 'origin']);
+    });
+  });
+
+  describe('generation tracking', () => {
+    it('increments generation on rebuild', () => {
+      const idx = new SpatialIndex();
+      expect(idx.getGeneration()).toBe(0);
+
+      idx.rebuild([makeNode('a', 0, 0)]);
+      expect(idx.getGeneration()).toBe(1);
+
+      idx.rebuild([makeNode('a', 10, 10)]);
+      expect(idx.getGeneration()).toBe(2);
+    });
+  });
+});

package/src/graph/__tests__/zoom.test.ts

@@ -0,0 +1,195 @@
+import { describe, expect, it } from 'vitest';
+import type { PositionedNode } from '../types';
+import { ZoomTransform } from '../zoom';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeNode(id: string, x: number, y: number, radius = 5): PositionedNode {
+  return {
+    id,
+    x,
+    y,
+    radius,
+    fill: '#3b82f6',
+    stroke: '#2563eb',
+    strokeWidth: 1,
+    label: undefined,
+    labelPriority: 0.5,
+    community: undefined,
+    data: {},
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Tests: screenToGraph / graphToScreen inverse
+// ---------------------------------------------------------------------------
+
+describe('ZoomTransform', () => {
+  describe('coordinate conversion', () => {
+    it('screenToGraph and graphToScreen are inverse at identity', () => {
+      const t = ZoomTransform.identity();
+      const screen = { x: 100, y: 200 };
+      const graph = t.screenToGraph(screen.x, screen.y);
+      const back = t.graphToScreen(graph.x, graph.y);
+      expect(back.x).toBeCloseTo(screen.x);
+      expect(back.y).toBeCloseTo(screen.y);
+    });
+
+    it('screenToGraph and graphToScreen are inverse with pan', () => {
+      const t = new ZoomTransform(50, -30, 1);
+      const screen = { x: 200, y: 150 };
+      const graph = t.screenToGraph(screen.x, screen.y);
+      const back = t.graphToScreen(graph.x, graph.y);
+      expect(back.x).toBeCloseTo(screen.x);
+      expect(back.y).toBeCloseTo(screen.y);
+    });
+
+    it('screenToGraph and graphToScreen are inverse with zoom', () => {
+      const t = new ZoomTransform(0, 0, 2.5);
+      const screen = { x: 300, y: 400 };
+      const graph = t.screenToGraph(screen.x, screen.y);
+      const back = t.graphToScreen(graph.x, graph.y);
+      expect(back.x).toBeCloseTo(screen.x);
+      expect(back.y).toBeCloseTo(screen.y);
+    });
+
+    it('screenToGraph and graphToScreen are inverse with pan+zoom', () => {
+      const t = new ZoomTransform(100, -50, 3);
+      const screen = { x: 250, y: 175 };
+      const graph = t.screenToGraph(screen.x, screen.y);
+      const back = t.graphToScreen(graph.x, graph.y);
+      expect(back.x).toBeCloseTo(screen.x);
+      expect(back.y).toBeCloseTo(screen.y);
+    });
+
+    it('graphToScreen follows gx * k + x formula', () => {
+      const t = new ZoomTransform(10, 20, 2);
+      const result = t.graphToScreen(5, 10);
+      expect(result.x).toBe(5 * 2 + 10); // 20
+      expect(result.y).toBe(10 * 2 + 20); // 40
+    });
+
+    it('screenToGraph follows (sx - x) / k formula', () => {
+      const t = new ZoomTransform(10, 20, 2);
+      const result = t.screenToGraph(20, 40);
+      expect(result.x).toBe((20 - 10) / 2); // 5
+      expect(result.y).toBe((40 - 20) / 2); // 10
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // zoomAt preserves pivot point
+  // -------------------------------------------------------------------------
+
+  describe('zoomAt', () => {
+    it('preserves the pivot point position', () => {
+      const t = new ZoomTransform(50, 100, 1);
+      const pivotX = 200;
+      const pivotY = 150;
+
+      // Graph point under the pivot before
+      const before = t.screenToGraph(pivotX, pivotY);
+
+      // Zoom to 2x at the pivot
+      const t2 = t.zoomAt(2, pivotX, pivotY);
+
+      // Graph point under the pivot after
+      const after = t2.screenToGraph(pivotX, pivotY);
+
+      expect(after.x).toBeCloseTo(before.x, 5);
+      expect(after.y).toBeCloseTo(before.y, 5);
+    });
+
+    it('preserves pivot at high zoom', () => {
+      const t = new ZoomTransform(0, 0, 1);
+      const pivot = { x: 400, y: 300 };
+
+      const before = t.screenToGraph(pivot.x, pivot.y);
+      const t2 = t.zoomAt(10, pivot.x, pivot.y);
+      const after = t2.screenToGraph(pivot.x, pivot.y);
+
+      expect(after.x).toBeCloseTo(before.x, 5);
+      expect(after.y).toBeCloseTo(before.y, 5);
+    });
+
+    it('updates the scale', () => {
+      const t = ZoomTransform.identity();
+      const t2 = t.zoomAt(3, 100, 100);
+      expect(t2.k).toBe(3);
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // pan
+  // -------------------------------------------------------------------------
+
+  describe('pan', () => {
+    it('adds delta to x and y', () => {
+      const t = new ZoomTransform(10, 20, 1);
+      const t2 = t.pan(5, -3);
+      expect(t2.x).toBe(15);
+      expect(t2.y).toBe(17);
+      expect(t2.k).toBe(1);
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // fitBounds
+  // -------------------------------------------------------------------------
+
+  describe('fitBounds', () => {
+    it('returns identity for empty node array', () => {
+      const t = ZoomTransform.fitBounds([], 800, 600);
+      expect(t.x).toBe(0);
+      expect(t.y).toBe(0);
+      expect(t.k).toBe(1);
+    });
+
+    it('centers a single node', () => {
+      const nodes = [makeNode('a', 0, 0)];
+      const t = ZoomTransform.fitBounds(nodes, 800, 600, 40);
+      // Single node at origin should be centered
+      // Transform should put graph origin at screen center
+      const screen = t.graphToScreen(0, 0);
+      expect(screen.x).toBeCloseTo(400);
+      expect(screen.y).toBeCloseTo(300);
+    });
+
+    it('fits a spread of nodes within the canvas', () => {
+      const nodes = [makeNode('a', -200, -100), makeNode('b', 200, 100)];
+      const t = ZoomTransform.fitBounds(nodes, 800, 600, 40);
+
+      // Both nodes should map to within the canvas bounds (with padding)
+      const sa = t.graphToScreen(-200, -100);
+      const sb = t.graphToScreen(200, 100);
+
+      expect(sa.x).toBeGreaterThanOrEqual(40);
+      expect(sa.y).toBeGreaterThanOrEqual(40);
+      expect(sb.x).toBeLessThanOrEqual(760);
+      expect(sb.y).toBeLessThanOrEqual(560);
+    });
+
+    it('produces correct scale for known graph bounds', () => {
+      // Graph spans 400x200, canvas 800x600, padding 0
+      const nodes = [makeNode('a', 0, 0, 0), makeNode('b', 400, 200, 0)];
+      const t = ZoomTransform.fitBounds(nodes, 800, 600, 0);
+      // Scale should be min(800/400, 600/200) = min(2, 3) = 2
+      expect(t.k).toBeCloseTo(2);
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // identity
+  // -------------------------------------------------------------------------
+
+  describe('identity', () => {
+    it('has x=0, y=0, k=1', () => {
+      const t = ZoomTransform.identity();
+      expect(t.x).toBe(0);
+      expect(t.y).toBe(0);
+      expect(t.k).toBe(1);
+    });
+  });
+});