@opendata-ai/openchart-vanilla 2.9.1 → 2.11.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.9.1",
+  "version": "2.11.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.9.1",
-    "@opendata-ai/openchart-engine": "2.9.1",
+    "@floating-ui/dom": "^1.7.6",
+    "@opendata-ai/openchart-core": "2.11.0",
+    "@opendata-ai/openchart-engine": "2.11.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/__tests__/zoom.test.ts

@@ -141,7 +141,7 @@ describe('ZoomTransform', () => {
 
   describe('fitBounds', () => {
     it('returns identity for empty node array', () => {
-      const t = ZoomTransform.fitBounds([], 800, 600);
+      const { transform: t } = ZoomTransform.fitBounds([], 800, 600);
       expect(t.x).toBe(0);
       expect(t.y).toBe(0);
       expect(t.k).toBe(1);
@@ -149,7 +149,7 @@ describe('ZoomTransform', () => {
 
     it('centers a single node', () => {
       const nodes = [makeNode('a', 0, 0)];
-      const t = ZoomTransform.fitBounds(nodes, 800, 600, 40);
+      const { transform: 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);
@@ -159,7 +159,7 @@ describe('ZoomTransform', () => {
 
     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);
+      const { transform: t } = ZoomTransform.fitBounds(nodes, 800, 600, 40);
 
       // Both nodes should map to within the canvas bounds (with padding)
       const sa = t.graphToScreen(-200, -100);
@@ -174,10 +174,18 @@ describe('ZoomTransform', () => {
     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);
+      const { transform: t } = ZoomTransform.fitBounds(nodes, 800, 600, 0);
       // Scale should be min(800/400, 600/200) = min(2, 3) = 2
       expect(t.k).toBeCloseTo(2);
     });
+
+    it('returns contentHeight matching scaled graph bounds plus padding', () => {
+      const nodes = [makeNode('a', 0, 0, 0), makeNode('b', 400, 200, 0)];
+      const { contentHeight } = ZoomTransform.fitBounds(nodes, 800, 600, 40);
+      // k = min(720/400, 520/200) = min(1.8, 2.6) = 1.8
+      // contentHeight = 200 * 1.8 + 80 = 440
+      expect(contentHeight).toBeCloseTo(440);
+    });
   });
 
   // -------------------------------------------------------------------------

package/src/graph/zoom.ts

@@ -52,15 +52,18 @@ export class ZoomTransform {
   /**
    * Compute a transform that fits all nodes within the given canvas
    * dimensions with the specified padding.
+   *
+   * Returns the transform and the ideal content height (in screen pixels)
+   * so callers can shrink the canvas to eliminate dead space.
    */
   static fitBounds(
     nodes: PositionedNode[],
     canvasW: number,
     canvasH: number,
     padding: number = 40,
-  ): ZoomTransform {
+  ): { transform: ZoomTransform; contentHeight: number } {
     if (nodes.length === 0) {
-      return ZoomTransform.identity();
+      return { transform: ZoomTransform.identity(), contentHeight: canvasH };
     }
 
     let minX = Infinity;
@@ -81,7 +84,10 @@ export class ZoomTransform {
 
     if (graphW === 0 && graphH === 0) {
       // All nodes at the same point; just center
-      return new ZoomTransform(canvasW / 2 - minX, canvasH / 2 - minY, 1);
+      return {
+        transform: new ZoomTransform(canvasW / 2 - minX, canvasH / 2 - minY, 1),
+        contentHeight: padding * 2,
+      };
     }
 
     const availW = canvasW - padding * 2;
@@ -95,7 +101,13 @@ export class ZoomTransform {
     const tx = canvasW / 2 - cx * k;
     const ty = padding - minY * k;
 
-    return new ZoomTransform(tx, ty, k);
+    // Content height = scaled graph extent + top and bottom padding
+    const contentHeight = graphH * k + padding * 2;
+
+    return {
+      transform: new ZoomTransform(tx, ty, k),
+      contentHeight,
+    };
   }
 
   /** Identity transform (no pan, no zoom). */