@opendata-ai/openchart-vanilla 2.10.0 → 2.12.0

package/dist/styles.css

@@ -662,6 +662,8 @@ th[aria-sort="descending"] .viz-table-sort-btn::before {
   overflow: hidden;
   background: var(--viz-bg);
   font-family: var(--viz-font-family);
+  width: 100%;
+  height: 100%;
 }
 
 .viz-graph-canvas {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -49,8 +49,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "2.10.0",
-    "@opendata-ai/openchart-engine": "2.10.0",
+    "@floating-ui/dom": "^1.7.6",
+    "@opendata-ai/openchart-core": "2.12.0",
+    "@opendata-ai/openchart-engine": "2.12.0",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/__tests__/table-keyboard.test.ts

@@ -0,0 +1,361 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { attachKeyboardNav } from '../table-keyboard';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function createTableDOM(rows: number, cols: number, opts?: { search?: boolean }): HTMLDivElement {
+  const wrapper = document.createElement('div');
+  const table = document.createElement('table');
+
+  // thead
+  const thead = document.createElement('thead');
+  const headerRow = document.createElement('tr');
+  for (let c = 0; c < cols; c++) {
+    const th = document.createElement('th');
+    th.textContent = `Col${c}`;
+    th.setAttribute('data-column', `col${c}`);
+    const sortBtn = document.createElement('button');
+    sortBtn.setAttribute('data-sort-column', `col${c}`);
+    th.appendChild(sortBtn);
+    headerRow.appendChild(th);
+  }
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  // tbody
+  const tbody = document.createElement('tbody');
+  for (let r = 0; r < rows; r++) {
+    const tr = document.createElement('tr');
+    for (let c = 0; c < cols; c++) {
+      const td = document.createElement('td');
+      td.textContent = `R${r}C${c}`;
+      tr.appendChild(td);
+    }
+    tbody.appendChild(tr);
+  }
+  table.appendChild(tbody);
+  wrapper.appendChild(table);
+
+  // Search input
+  if (opts?.search) {
+    const searchDiv = document.createElement('div');
+    searchDiv.className = 'viz-table-search';
+    const input = document.createElement('input');
+    searchDiv.appendChild(input);
+    wrapper.appendChild(searchDiv);
+  }
+
+  return wrapper;
+}
+
+function keydown(el: HTMLElement, key: string): void {
+  el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
+}
+
+function focusTbody(wrapper: HTMLDivElement): HTMLElement {
+  const tbody = wrapper.querySelector('tbody')!;
+  tbody.dispatchEvent(new Event('focus'));
+  return tbody;
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('attachKeyboardNav', () => {
+  let wrapper: HTMLDivElement;
+  let onSort: ReturnType<typeof vi.fn>;
+  let onClearSearch: ReturnType<typeof vi.fn>;
+  let onAnnounce: ReturnType<typeof vi.fn>;
+  let cleanup: () => void;
+
+  function attach(w: HTMLDivElement): () => void {
+    return attachKeyboardNav({
+      wrapper: w,
+      onSort,
+      onClearSearch,
+      onAnnounce,
+    });
+  }
+
+  beforeEach(() => {
+    onSort = vi.fn();
+    onClearSearch = vi.fn();
+    onAnnounce = vi.fn();
+    wrapper = createTableDOM(5, 3);
+    document.body.appendChild(wrapper);
+    cleanup = attach(wrapper);
+  });
+
+  afterEach(() => {
+    cleanup();
+    document.body.innerHTML = '';
+  });
+
+  it('makes tbody focusable', () => {
+    const tbody = wrapper.querySelector('tbody')!;
+    expect(tbody.getAttribute('tabindex')).toBe('0');
+  });
+
+  it('makes header cells focusable', () => {
+    const headers = wrapper.querySelectorAll('thead th');
+    for (const th of headers) {
+      expect(th.getAttribute('tabindex')).toBe('0');
+    }
+  });
+
+  it('returns noop cleanup when no table exists', () => {
+    const empty = document.createElement('div');
+    const c = attachKeyboardNav({
+      wrapper: empty,
+      onSort,
+      onClearSearch,
+      onAnnounce,
+    });
+    expect(c).toBeTypeOf('function');
+    c(); // should not throw
+  });
+});
+
+describe('tbody arrow key navigation', () => {
+  let wrapper: HTMLDivElement;
+  let onSort: ReturnType<typeof vi.fn>;
+  let onClearSearch: ReturnType<typeof vi.fn>;
+  let onAnnounce: ReturnType<typeof vi.fn>;
+  let cleanup: () => void;
+
+  beforeEach(() => {
+    onSort = vi.fn();
+    onClearSearch = vi.fn();
+    onAnnounce = vi.fn();
+    wrapper = createTableDOM(5, 3);
+    document.body.appendChild(wrapper);
+    cleanup = attachKeyboardNav({
+      wrapper,
+      onSort,
+      onClearSearch,
+      onAnnounce,
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    document.body.innerHTML = '';
+  });
+
+  it('focus highlights first cell and sets aria-activedescendant', () => {
+    const tbody = focusTbody(wrapper);
+    expect(tbody.getAttribute('aria-activedescendant')).toBe('viz-cell-0-0');
+    const cell = wrapper.querySelector('.viz-table-cell-focus');
+    expect(cell).not.toBeNull();
+    expect(cell?.textContent).toBe('R0C0');
+  });
+
+  it('ArrowDown moves focus down one row', () => {
+    const tbody = focusTbody(wrapper);
+    keydown(tbody, 'ArrowDown');
+    expect(tbody.getAttribute('aria-activedescendant')).toBe('viz-cell-1-0');
+  });
+
+  it('ArrowDown does not go past last row', () => {
+    const tbody = focusTbody(wrapper);
+    for (let i = 0; i < 10; i++) keydown(tbody, 'ArrowDown');
+    expect(tbody.getAttribute('aria-activedescendant')).toBe('viz-cell-4-0');
+  });
+
+  it('ArrowRight moves focus right one column', () => {
+    const tbody = focusTbody(wrapper);
+    keydown(tbody, 'ArrowRight');
+    expect(tbody.getAttribute('aria-activedescendant')).toBe('viz-cell-0-1');
+  });
+
+  it('ArrowRight does not go past last column', () => {
+    const tbody = focusTbody(wrapper);
+    for (let i = 0; i < 10; i++) keydown(tbody, 'ArrowRight');
+    expect(tbody.getAttribute('aria-activedescendant')).toBe('viz-cell-0-2');
+  });
+
+  it('ArrowLeft moves focus left', () => {
+    const tbody = focusTbody(wrapper);
+    keydown(tbody, 'ArrowRight');
+    keydown(tbody, 'ArrowRight');
+    keydown(tbody, 'ArrowLeft');
+    expect(tbody.getAttribute('aria-activedescendant')).toBe('viz-cell-0-1');
+  });
+
+  it('ArrowLeft does not go past first column', () => {
+    const tbody = focusTbody(wrapper);
+    keydown(tbody, 'ArrowLeft');
+    expect(tbody.getAttribute('aria-activedescendant')).toBe('viz-cell-0-0');
+  });
+
+  it('Home moves to first column in current row', () => {
+    const tbody = focusTbody(wrapper);
+    keydown(tbody, 'ArrowRight');
+    keydown(tbody, 'ArrowRight');
+    keydown(tbody, 'Home');
+    expect(tbody.getAttribute('aria-activedescendant')).toBe('viz-cell-0-0');
+  });
+
+  it('End moves to last column in current row', () => {
+    const tbody = focusTbody(wrapper);
+    keydown(tbody, 'End');
+    expect(tbody.getAttribute('aria-activedescendant')).toBe('viz-cell-0-2');
+  });
+
+  it('navigation clears previous focus highlight', () => {
+    const tbody = focusTbody(wrapper);
+    keydown(tbody, 'ArrowDown');
+    const focused = wrapper.querySelectorAll('.viz-table-cell-focus');
+    expect(focused.length).toBe(1);
+    expect(focused[0].textContent).toBe('R1C0');
+  });
+});
+
+describe('header keyboard navigation', () => {
+  let wrapper: HTMLDivElement;
+  let onSort: ReturnType<typeof vi.fn>;
+  let onClearSearch: ReturnType<typeof vi.fn>;
+  let onAnnounce: ReturnType<typeof vi.fn>;
+  let cleanup: () => void;
+
+  beforeEach(() => {
+    onSort = vi.fn();
+    onClearSearch = vi.fn();
+    onAnnounce = vi.fn();
+    wrapper = createTableDOM(3, 3);
+    document.body.appendChild(wrapper);
+    cleanup = attachKeyboardNav({
+      wrapper,
+      onSort,
+      onClearSearch,
+      onAnnounce,
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    document.body.innerHTML = '';
+  });
+
+  it('ArrowUp from first body row moves focus to header', () => {
+    const tbody = focusTbody(wrapper);
+    // ArrowUp from row 0 should focus the header
+    keydown(tbody, 'ArrowUp');
+    // Focus moved to header, so tbody's activedescendant should remain unchanged
+    const headers = wrapper.querySelectorAll('thead th');
+    // Can't easily check document.activeElement in happy-dom, but header focus() was called
+    expect(headers[0]).toBeDefined();
+  });
+
+  it('Enter on header triggers sort', () => {
+    const headers = wrapper.querySelectorAll('thead th');
+    keydown(headers[1] as HTMLElement, 'Enter');
+    expect(onSort).toHaveBeenCalledWith('col1');
+  });
+
+  it('Space on header triggers sort', () => {
+    const headers = wrapper.querySelectorAll('thead th');
+    keydown(headers[0] as HTMLElement, ' ');
+    expect(onSort).toHaveBeenCalledWith('col0');
+  });
+
+  it('ArrowRight on header moves to next header', () => {
+    // This tests the focus logic; in happy-dom we just verify no errors
+    const headers = wrapper.querySelectorAll('thead th');
+    keydown(headers[0] as HTMLElement, 'ArrowRight');
+    // Should not throw
+  });
+
+  it('ArrowDown from header moves to body at same column', () => {
+    const headers = wrapper.querySelectorAll('thead th');
+    keydown(headers[1] as HTMLElement, 'ArrowDown');
+    const tbody = wrapper.querySelector('tbody')!;
+    // The tbody should have activedescendant set to first row, column 1
+    expect(tbody.getAttribute('aria-activedescendant')).toBe('viz-cell-0-1');
+  });
+});
+
+describe('search escape handling', () => {
+  let wrapper: HTMLDivElement;
+  let onSort: ReturnType<typeof vi.fn>;
+  let onClearSearch: ReturnType<typeof vi.fn>;
+  let onAnnounce: ReturnType<typeof vi.fn>;
+  let cleanup: () => void;
+
+  beforeEach(() => {
+    onSort = vi.fn();
+    onClearSearch = vi.fn();
+    onAnnounce = vi.fn();
+    wrapper = createTableDOM(3, 3, { search: true });
+    document.body.appendChild(wrapper);
+    cleanup = attachKeyboardNav({
+      wrapper,
+      onSort,
+      onClearSearch,
+      onAnnounce,
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    document.body.innerHTML = '';
+  });
+
+  it('Escape in search input calls onClearSearch', () => {
+    const input = wrapper.querySelector('.viz-table-search input')!;
+    keydown(input as HTMLElement, 'Escape');
+    expect(onClearSearch).toHaveBeenCalledTimes(1);
+  });
+
+  it('Escape in search announces "Search cleared"', () => {
+    const input = wrapper.querySelector('.viz-table-search input')!;
+    keydown(input as HTMLElement, 'Escape');
+    expect(onAnnounce).toHaveBeenCalledWith('Search cleared');
+  });
+
+  it('non-Escape keys in search do not trigger clear', () => {
+    const input = wrapper.querySelector('.viz-table-search input')!;
+    keydown(input as HTMLElement, 'a');
+    keydown(input as HTMLElement, 'Enter');
+    expect(onClearSearch).not.toHaveBeenCalled();
+  });
+});
+
+describe('cleanup', () => {
+  it('removes event listeners after cleanup', () => {
+    const wrapper = createTableDOM(3, 3, { search: true });
+    document.body.appendChild(wrapper);
+
+    const onSort = vi.fn();
+    const onClearSearch = vi.fn();
+    const onAnnounce = vi.fn();
+
+    const cleanup = attachKeyboardNav({
+      wrapper,
+      onSort,
+      onClearSearch,
+      onAnnounce,
+    });
+
+    cleanup();
+
+    // After cleanup, keyboard events should not trigger callbacks
+    const tbody = wrapper.querySelector('tbody')!;
+    tbody.dispatchEvent(new Event('focus'));
+    keydown(tbody, 'ArrowDown');
+
+    const input = wrapper.querySelector('.viz-table-search input')!;
+    keydown(input as HTMLElement, 'Escape');
+
+    expect(onClearSearch).not.toHaveBeenCalled();
+
+    // Focus highlight should be cleared
+    const focused = wrapper.querySelectorAll('.viz-table-cell-focus');
+    expect(focused.length).toBe(0);
+
+    document.body.innerHTML = '';
+  });
+});

package/src/__tests__/tooltip.test.ts

@@ -5,16 +5,46 @@
  * and cleanup behavior.
  */
 
-import { afterEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createContainer } from '../__test-fixtures__/dom';
-import { createTooltipManager } from '../tooltip';
+
+const mockComputePosition = vi.fn();
+
+vi.mock('@floating-ui/dom', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@floating-ui/dom')>();
+  return {
+    ...actual,
+    computePosition: (...args: unknown[]) => mockComputePosition(...args),
+  };
+});
+
+// Import after mock so the module picks up the mock
+const { createTooltipManager } = await import('../tooltip');
+
+/**
+ * Flush the microtask queue so computePosition's .then() resolves.
+ */
+const flushPositioning = () => vi.waitFor(() => Promise.resolve());
 
 // ---------------------------------------------------------------------------
 // Cleanup
 // ---------------------------------------------------------------------------
 
+const defaultPositionResult = {
+  x: 0,
+  y: 0,
+  placement: 'bottom-start' as const,
+  strategy: 'absolute' as const,
+  middlewareData: {},
+};
+
+beforeEach(() => {
+  mockComputePosition.mockResolvedValue(defaultPositionResult);
+});
+
 afterEach(() => {
   document.body.innerHTML = '';
+  mockComputePosition.mockReset();
 });
 
 // ---------------------------------------------------------------------------
@@ -131,19 +161,99 @@ describe('createTooltipManager lifecycle', () => {
 // ---------------------------------------------------------------------------
 
 describe('tooltip positioning', () => {
-  it('positions tooltip at offset from given coordinates', () => {
+  it('positions tooltip via computePosition with flip and shift', async () => {
+    mockComputePosition.mockResolvedValueOnce({
+      x: 112,
+      y: 212,
+      placement: 'bottom-start',
+      strategy: 'absolute',
+      middlewareData: {},
+    });
+
     const container = createContainer();
     const manager = createTooltipManager(container);
 
     manager.show({ title: 'Test', fields: [{ label: 'V', value: '1' }] }, 100, 200);
+    await flushPositioning();
+
+    // computePosition should have been called with the tooltip element
+    expect(mockComputePosition).toHaveBeenCalledOnce();
+    const [ref, tooltipEl, options] = mockComputePosition.mock.calls[0];
+    expect(tooltipEl).toBeInstanceOf(HTMLElement);
+    expect(options?.placement).toBe('bottom-start');
+    // Should include offset, flip, and shift middleware
+    expect(options?.middleware).toHaveLength(3);
+
+    // Virtual reference should return a rect at the mouse position
+    const rect = (ref as { getBoundingClientRect: () => DOMRect }).getBoundingClientRect();
+    expect(rect.width).toBe(0);
+    expect(rect.height).toBe(0);
+
+    // Position should be applied from computePosition result
+    const tooltip = container.querySelector('.viz-tooltip') as HTMLElement;
+    expect(tooltip.style.left).toContain('px');
+    expect(tooltip.style.top).toContain('px');
+
+    manager.destroy();
+  });
+
+  it('discards stale position callbacks on rapid show() calls', async () => {
+    type PosResult = {
+      x: number;
+      y: number;
+      placement: string;
+      strategy: string;
+      middlewareData: Record<string, never>;
+    };
+    let resolveFirst!: (val: PosResult) => void;
+    let resolveSecond!: (val: PosResult) => void;
+
+    mockComputePosition
+      .mockImplementationOnce(
+        () =>
+          new Promise((r) => {
+            resolveFirst = r;
+          }),
+      )
+      .mockImplementationOnce(
+        () =>
+          new Promise((r) => {
+            resolveSecond = r;
+          }),
+      );
+
+    const container = createContainer();
+    const manager = createTooltipManager(container);
+
+    // Two rapid show() calls
+    manager.show({ title: 'A', fields: [{ label: 'V', value: '1' }] }, 10, 10);
+    manager.show({ title: 'B', fields: [{ label: 'V', value: '2' }] }, 200, 200);
+
+    // Resolve the second (latest) first
+    resolveSecond({
+      x: 212,
+      y: 212,
+      placement: 'bottom-start',
+      strategy: 'absolute',
+      middlewareData: {},
+    });
+    await flushPositioning();
 
     const tooltip = container.querySelector('.viz-tooltip') as HTMLElement;
-    // Tooltip should be positioned (the exact offset is TOOLTIP_OFFSET = 12)
-    const left = parseInt(tooltip.style.left, 10);
-    const top = parseInt(tooltip.style.top, 10);
-    // Should be near the given coordinates (offset by 12)
-    expect(left).toBeGreaterThanOrEqual(0);
-    expect(top).toBeGreaterThanOrEqual(0);
+    const posAfterSecond = tooltip.style.left;
+
+    // Now resolve the first (stale) - should be discarded
+    resolveFirst({
+      x: 22,
+      y: 22,
+      placement: 'bottom-start',
+      strategy: 'absolute',
+      middlewareData: {},
+    });
+    await flushPositioning();
+
+    // Position should not have changed (stale callback was discarded)
+    expect(tooltip.style.left).toBe(posAfterSecond);
 
     manager.destroy();
   });

package/src/graph-mount.ts

@@ -114,6 +114,8 @@ export function createGraph(
   let positionedNodes: PositionedNode[] = [];
   let positionedEdges: PositionedEdge[] = [];
   let adjacencyMap = new Map<string, Set<string>>();
+  let nodeDataMap = new Map<string, Record<string, unknown>>();
+  let edgeDataMap = new Map<string, Record<string, unknown>>();
   let hoveredNodeId: string | null = null;
   let hoveredEdgeId: string | null = null;
   let selectedNodeIds = new Set<string>();
@@ -121,7 +123,7 @@ export function createGraph(
   let needsRender = false;
   let isGesturing = false;
   let gestureTimeout: ReturnType<typeof setTimeout> | null = null;
-  let selfResizing = false;
+  let lastEdgeHitTime = 0;
 
   // ---------------------------------------------------------------------------
   // Helpers
@@ -160,6 +162,11 @@ export function createGraph(
     return compileGraph(currentSpec, compileOpts);
   }
 
+  function buildDataMaps(): void {
+    nodeDataMap = new Map(compilation.nodes.map((n) => [n.id, n.data ?? {}]));
+    edgeDataMap = new Map(compilation.edges.map((e) => [`${e.source}->${e.target}`, e.data ?? {}]));
+  }
+
   function buildAdjacencyMap(edges: CompiledGraphEdge[]): Map<string, Set<string>> {
     const map = new Map<string, Set<string>>();
     for (const edge of edges) {
@@ -191,8 +198,7 @@ export function createGraph(
    * Falls back to an empty object if not found.
    */
   function nodeDataById(nodeId: string): Record<string, unknown> {
-    const node = compilation.nodes.find((n) => n.id === nodeId);
-    return node?.data ?? {};
+    return nodeDataMap.get(nodeId) ?? {};
   }
 
   /**
@@ -245,9 +251,7 @@ export function createGraph(
    * Look up edge data by edge id ("source->target").
    */
   function edgeDataById(edgeId: string): Record<string, unknown> | null {
-    const [source, target] = edgeId.split('->');
-    const edge = compilation.edges.find((e) => e.source === source && e.target === target);
-    return edge?.data ?? null;
+    return edgeDataMap.get(edgeId) ?? null;
   }
 
   // ---------------------------------------------------------------------------
@@ -413,36 +417,8 @@ export function createGraph(
       // One final fit after simulation settles
       if (canvas && positionedNodes.length > 0 && interactionManager && renderer) {
         const { width: cw, height: ch } = getCanvasDimensions();
-        const { transform: fitTransform, contentHeight } = ZoomTransform.fitBounds(
-          positionedNodes,
-          cw,
-          ch,
-        );
+        const { transform: fitTransform } = ZoomTransform.fitBounds(positionedNodes, cw, ch);
         interactionManager.setTransform(fitTransform);
-
-        // Shrink canvas + container to actual content height to eliminate dead space.
-        // The chrome (title/subtitle) sits above the canvas, so total height includes both.
-        const chromeH = chromeEl?.getBoundingClientRect().height || 0;
-        const totalContentHeight = Math.ceil(contentHeight) + chromeH;
-        const containerH = container.getBoundingClientRect().height;
-
-        if (totalContentHeight < containerH) {
-          selfResizing = true;
-          const targetCanvasH = Math.ceil(contentHeight);
-          renderer.resize(cw, targetCanvasH);
-          // Re-fit with the new canvas height
-          const refit = ZoomTransform.fitBounds(positionedNodes, cw, targetCanvasH);
-          interactionManager.setTransform(refit.transform);
-          // Collapse the container to content height instead of filling the parent.
-          // This eliminates dead space below compact graphs in tall containers.
-          container.style.height = 'fit-content';
-          // Hold selfResizing long enough for the ResizeObserver (debounced ~16ms)
-          // to see it and skip the doResize that would clear our height override.
-          setTimeout(() => {
-            selfResizing = false;
-          }, 100);
-        }
-
         needsRender = true;
         scheduleRender();
       }
@@ -539,6 +515,21 @@ export function createGraph(
         }
       },
       onBackgroundHover(graphX, graphY, screenX, screenY) {
+        // Throttle edge hit testing to avoid O(n) scan on every mousemove
+        const now = performance.now();
+        if (now - lastEdgeHitTime < 32) {
+          // When throttled, clear edge hover so hover-off transitions stay snappy
+          if (hoveredEdgeId) {
+            hoveredEdgeId = null;
+            needsRender = true;
+            scheduleRender();
+            options?.onEdgeHover?.(null);
+            tooltipManager?.hide();
+          }
+          return;
+        }
+        lastEdgeHitTime = now;
+
         // Edge hit testing: check proximity to edge line segments
         const transform = interactionManager?.getTransform();
         const threshold = 5 / (transform?.k ?? 1); // 5px in screen space
@@ -699,9 +690,7 @@ export function createGraph(
   }
 
   function doResize(): void {
-    if (destroyed || !canvas || !renderer || !wrapper || selfResizing) return;
-    // Clear any content-fit height override so we read the parent's actual size
-    container.style.height = '';
+    if (destroyed || !canvas || !renderer || !wrapper) return;
     const { width, height } = getContainerDimensions();
     const chromeHeight = chromeEl?.getBoundingClientRect().height || 0;
     const canvasHeight = Math.max(height - chromeHeight, 200);
@@ -720,6 +709,7 @@ export function createGraph(
     // Recompile
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
 
     // Update DOM chrome/legend
     renderChrome();
@@ -749,6 +739,7 @@ export function createGraph(
     // Recompile with new spec (encoding, chrome, nodeOverrides, etc.)
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
 
     // Transfer positions to new compiled nodes
     positionedNodes = compilation.nodes.map((node) => {
@@ -833,6 +824,7 @@ export function createGraph(
   try {
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
     createDOM();
     initSimulation();
     initInteraction();