@opendata-ai/openchart-vanilla 6.4.1 → 6.5.0

package/package.json

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

package/src/__tests__/animation.test.ts

@@ -0,0 +1,358 @@
+/**
+ * Animation integration tests for the vanilla renderer.
+ *
+ * Tests the full pipeline from spec -> compile -> render for animation-related
+ * behavior. Verifies that the compiled layout carries animation config and that
+ * the SVG output is correctly structured for CSS animations to work.
+ *
+ * Note: CSS animation keyframes and class-based triggers are defined in the
+ * CSS partials under packages/core/src/styles/. These tests verify the DOM
+ * structure that CSS hooks into, not the visual animation itself (which
+ * requires a real browser).
+ */
+
+import type { ChartSpec } from '@opendata-ai/openchart-engine';
+import { compileChart } from '@opendata-ai/openchart-engine';
+import { afterEach, describe, expect, it } from 'vitest';
+import { createContainer } from '../__test-fixtures__/dom';
+import { barSpec, columnSpec, lineSpec } from '../__test-fixtures__/specs';
+import { createChart } from '../mount';
+import { renderChartSVG } from '../svg-renderer';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function compileAndRender(spec: ChartSpec, width = 600, height = 400) {
+  const container = createContainer(width, height);
+  const layout = compileChart(spec, { width, height });
+  const svg = renderChartSVG(layout, container);
+  return { svg, container, layout };
+}
+
+// ---------------------------------------------------------------------------
+// Cleanup
+// ---------------------------------------------------------------------------
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+// ---------------------------------------------------------------------------
+// Layout carries animation config through to render
+// ---------------------------------------------------------------------------
+
+describe('animation in compiled layout', () => {
+  it('layout has animation config when spec enables animation', () => {
+    const spec = { ...barSpec, animation: true } as ChartSpec;
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    expect(layout.animation).toBeDefined();
+    expect(layout.animation!.enabled).toBe(true);
+  });
+
+  it('layout has no animation config when spec omits animation', () => {
+    const layout = compileChart(barSpec, { width: 600, height: 400 });
+    expect(layout.animation).toBeUndefined();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// SVG mark structure supports CSS animation selectors
+// ---------------------------------------------------------------------------
+
+describe('SVG structure for animation CSS hooks', () => {
+  it('bar chart renders rect elements inside oc-mark groups', () => {
+    const spec = { ...barSpec, animation: true } as ChartSpec;
+    const { svg } = compileAndRender(spec);
+
+    // CSS animations target .oc-mark-rect rect and .oc-mark-bar rect
+    const rects = svg.querySelectorAll('.oc-marks rect');
+    expect(rects.length).toBeGreaterThan(0);
+  });
+
+  it('column chart renders rect elements for vertical bars', () => {
+    const spec = { ...columnSpec, animation: true } as ChartSpec;
+    const { svg } = compileAndRender(spec);
+
+    const rects = svg.querySelectorAll('.oc-marks rect');
+    expect(rects.length).toBeGreaterThan(0);
+  });
+
+  it('line chart renders path elements inside oc-mark-line groups', () => {
+    const spec = { ...lineSpec, animation: true } as ChartSpec;
+    const { svg } = compileAndRender(spec);
+
+    const paths = svg.querySelectorAll('.oc-mark-line path');
+    expect(paths.length).toBeGreaterThan(0);
+  });
+
+  it('mark groups have data-mark-id attributes for targeting', () => {
+    const spec = { ...barSpec, animation: true } as ChartSpec;
+    const { svg } = compileAndRender(spec);
+
+    const markGroups = svg.querySelectorAll('[data-mark-id]');
+    expect(markGroups.length).toBeGreaterThan(0);
+  });
+
+  it('SVG root has oc-chart class (oc-animate is added by mount, not renderer)', () => {
+    const spec = { ...barSpec, animation: true } as ChartSpec;
+    const { svg } = compileAndRender(spec);
+    expect(svg.getAttribute('class')).toContain('oc-chart');
+    // oc-animate is added by mount.ts on first render only, not by the renderer
+    expect(svg.getAttribute('class')).not.toContain('oc-animate');
+  });
+
+  it('SVG root does not have oc-animate class when animation is disabled', () => {
+    const { svg } = compileAndRender(barSpec);
+    expect(svg.getAttribute('class')).toContain('oc-chart');
+    expect(svg.getAttribute('class')).not.toContain('oc-animate');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Animation CSS custom properties on SVG root
+// ---------------------------------------------------------------------------
+
+describe('animation CSS custom properties', () => {
+  it('sets --oc-animation-duration on SVG root', () => {
+    const spec = {
+      ...barSpec,
+      animation: { enter: { duration: 800 } },
+    } as ChartSpec;
+    const { svg } = compileAndRender(spec);
+    expect(svg.style.getPropertyValue('--oc-animation-duration')).toBe('800ms');
+  });
+
+  it('sets --oc-animation-stagger on SVG root', () => {
+    const spec = { ...barSpec, animation: true } as ChartSpec;
+    const { svg } = compileAndRender(spec);
+    const stagger = svg.style.getPropertyValue('--oc-animation-stagger');
+    expect(stagger).toMatch(/^\d+ms$/);
+  });
+
+  it('sets --oc-annotation-delay on SVG root', () => {
+    const spec = {
+      ...barSpec,
+      animation: { enter: true, annotationDelay: 500 },
+    } as ChartSpec;
+    const { svg } = compileAndRender(spec);
+    expect(svg.style.getPropertyValue('--oc-annotation-delay')).toBe('500ms');
+  });
+
+  it('does not set animation custom properties when animation is disabled', () => {
+    const { svg } = compileAndRender(barSpec);
+    expect(svg.style.getPropertyValue('--oc-animation-duration')).toBe('');
+    expect(svg.style.getPropertyValue('--oc-animation-stagger')).toBe('');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// --oc-mark-index stamped on mark elements
+// ---------------------------------------------------------------------------
+
+describe('mark animation index attributes', () => {
+  it('stamps --oc-mark-index on rect mark groups', () => {
+    const spec = { ...columnSpec, animation: true } as ChartSpec;
+    const { svg } = compileAndRender(spec);
+
+    const markGroups = svg.querySelectorAll('.oc-mark-rect');
+    expect(markGroups.length).toBeGreaterThan(0);
+
+    for (const group of markGroups) {
+      const el = group as SVGElement & ElementCSSInlineStyle;
+      const markIndex = el.style.getPropertyValue('--oc-mark-index');
+      expect(markIndex).not.toBe('');
+    }
+  });
+
+  it('stamps data-animation-index attribute on mark groups', () => {
+    const spec = { ...columnSpec, animation: true } as ChartSpec;
+    const { svg } = compileAndRender(spec);
+
+    const markGroups = svg.querySelectorAll('[data-animation-index]');
+    expect(markGroups.length).toBeGreaterThan(0);
+
+    // Each should have a numeric index
+    for (const group of markGroups) {
+      const idx = group.getAttribute('data-animation-index');
+      expect(idx).toMatch(/^\d+$/);
+    }
+  });
+
+  it('does not stamp animation attributes when animation is disabled', () => {
+    const { svg } = compileAndRender(columnSpec);
+
+    const withAnimIdx = svg.querySelectorAll('[data-animation-index]');
+    expect(withAnimIdx.length).toBe(0);
+  });
+
+  it('stamps --oc-mark-index on line mark groups', () => {
+    const spec = { ...lineSpec, animation: true } as ChartSpec;
+    const { svg } = compileAndRender(spec);
+
+    const lineGroups = svg.querySelectorAll('.oc-mark-line');
+    expect(lineGroups.length).toBeGreaterThan(0);
+
+    for (const group of lineGroups) {
+      const el = group as SVGElement & ElementCSSInlineStyle;
+      const markIndex = el.style.getPropertyValue('--oc-mark-index');
+      expect(markIndex).not.toBe('');
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// data-orient attribute for horizontal bars
+// ---------------------------------------------------------------------------
+
+describe('data-orient for horizontal bars', () => {
+  it('sets data-orient=horizontal on mark groups for horizontal bar charts', () => {
+    // barSpec has x=quantitative, y=nominal which is a horizontal bar chart
+    const spec = { ...barSpec, animation: true } as ChartSpec;
+    const { svg } = compileAndRender(spec);
+
+    const horizontalGroups = svg.querySelectorAll('[data-orient="horizontal"]');
+    expect(horizontalGroups.length).toBeGreaterThan(0);
+  });
+
+  it('does not set data-orient=horizontal on vertical column charts', () => {
+    // columnSpec has x=nominal, y=quantitative which is a vertical column chart
+    const spec = { ...columnSpec, animation: true } as ChartSpec;
+    const { svg } = compileAndRender(spec);
+
+    const horizontalGroups = svg.querySelectorAll('[data-orient="horizontal"]');
+    expect(horizontalGroups.length).toBe(0);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Value-based stagger ordering assigns animationIndex on marks
+// ---------------------------------------------------------------------------
+
+describe('animationIndex for value-based stagger', () => {
+  it('assigns animationIndex to rect marks when stagger order is value', () => {
+    const spec = {
+      ...columnSpec,
+      animation: {
+        enter: { stagger: { order: 'value' as const } },
+      },
+    } as ChartSpec;
+    const layout = compileChart(spec, { width: 600, height: 400 });
+
+    const rectMarks = layout.marks.filter((m) => m.type === 'rect');
+    expect(rectMarks.length).toBe(3);
+
+    // Each rect mark should have animationIndex
+    for (const mark of rectMarks) {
+      const idx = (mark as unknown as { animationIndex?: number }).animationIndex;
+      expect(idx).toBeDefined();
+    }
+  });
+
+  it('orders marks by their primary quantitative value', () => {
+    // columnSpec has revenues: Q1=100, Q2=200, Q3=150
+    // Value ordering should sort by bar height (revenue)
+    const spec = {
+      ...columnSpec,
+      animation: {
+        enter: { stagger: { order: 'value' as const } },
+      },
+    } as ChartSpec;
+    const layout = compileChart(spec, { width: 600, height: 400 });
+
+    const rectMarks = layout.marks.filter((m) => m.type === 'rect');
+    const indexed = rectMarks.map((m) => ({
+      index: (m as unknown as { animationIndex: number }).animationIndex,
+    }));
+
+    // All indices should be unique
+    const indices = indexed.map((m) => m.index);
+    const uniqueIndices = new Set(indices);
+    expect(uniqueIndices.size).toBe(rectMarks.length);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// createChart mount lifecycle with animation
+// ---------------------------------------------------------------------------
+
+describe('createChart animation lifecycle', () => {
+  it('produces valid SVG on mount with animation enabled', () => {
+    const container = createContainer();
+    const spec = { ...barSpec, animation: true } as ChartSpec;
+    const chart = createChart(container, spec);
+
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+    expect(svg?.getAttribute('class')).toContain('oc-chart');
+    expect(svg?.getAttribute('class')).toContain('oc-animate');
+
+    // Marks are rendered
+    const rects = container.querySelectorAll('.oc-marks rect');
+    expect(rects.length).toBeGreaterThan(0);
+
+    chart.destroy();
+  });
+
+  it('update re-renders chart correctly with animation', () => {
+    const container = createContainer();
+    const spec = { ...barSpec, animation: true } as ChartSpec;
+    const chart = createChart(container, spec);
+
+    // Verify initial render
+    let rects = container.querySelectorAll('.oc-marks rect');
+    const initialCount = rects.length;
+    expect(initialCount).toBeGreaterThan(0);
+
+    // Update with different data but same animation setting
+    const updatedSpec = {
+      ...barSpec,
+      data: [
+        { name: 'X', value: 50 },
+        { name: 'Y', value: 70 },
+      ],
+      animation: true,
+    } as ChartSpec;
+    chart.update(updatedSpec);
+
+    // SVG is re-rendered
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+
+    // Marks reflect updated data
+    rects = container.querySelectorAll('.oc-marks rect');
+    expect(rects.length).toBeGreaterThan(0);
+
+    chart.destroy();
+  });
+
+  it('works correctly when animation is toggled off on update', () => {
+    const container = createContainer();
+    const specWithAnim = { ...barSpec, animation: true } as ChartSpec;
+    const chart = createChart(container, specWithAnim);
+
+    // Update with animation disabled
+    const specNoAnim = { ...barSpec, animation: false } as ChartSpec;
+    chart.update(specNoAnim);
+
+    // Chart should still render correctly
+    const svg = container.querySelector('svg');
+    expect(svg).not.toBeNull();
+    const rects = container.querySelectorAll('.oc-marks rect');
+    expect(rects.length).toBeGreaterThan(0);
+
+    chart.destroy();
+  });
+
+  it('destroy cleans up the container', () => {
+    const container = createContainer();
+    const spec = { ...barSpec, animation: true } as ChartSpec;
+    const chart = createChart(container, spec);
+
+    expect(container.querySelector('svg')).not.toBeNull();
+
+    chart.destroy();
+
+    expect(container.querySelector('svg')).toBeNull();
+  });
+});

package/src/__tests__/edit-events.test.ts

@@ -105,7 +105,7 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onEdit });
 
-      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotation = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotation) {
         chart.destroy();
         return;
@@ -119,7 +119,7 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onEdit });
 
-      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotation = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotation) {
         chart.destroy();
         return;
@@ -143,7 +143,7 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onEdit });
 
-      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotation = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotation) {
         chart.destroy();
         return;
@@ -161,7 +161,7 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onAnnotationClick, onEdit });
 
-      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotation = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotation) {
         chart.destroy();
         return;
@@ -184,7 +184,7 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onEdit });
 
-      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotation = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotation) {
         chart.destroy();
         return;
@@ -227,19 +227,19 @@ describe('edit events', () => {
       const chart = createChart(container, fullEditSpec, {});
 
       // Chrome elements should not have grab cursor
-      const chromeTexts = container.querySelectorAll('.viz-chrome text[data-chrome-key]');
+      const chromeTexts = container.querySelectorAll('.oc-chrome text[data-chrome-key]');
       for (const el of chromeTexts) {
         expect((el as HTMLElement).style.cursor).not.toBe('grab');
       }
 
       // Legend should not have grab cursor
-      const legendG = container.querySelector('.viz-legend') as SVGGElement | null;
+      const legendG = container.querySelector('.oc-legend') as SVGGElement | null;
       if (legendG) {
         expect(legendG.style.cursor).not.toBe('grab');
       }
 
       // Series labels should not have grab cursor
-      const seriesLabels = container.querySelectorAll('.viz-mark-label');
+      const seriesLabels = container.querySelectorAll('.oc-mark-label');
       for (const el of seriesLabels) {
         expect((el as HTMLElement).style.cursor).not.toBe('grab');
       }
@@ -252,19 +252,19 @@ describe('edit events', () => {
       const chart = createChart(container, fullEditSpec, { onEdit });
 
       // Chrome elements should have grab cursor
-      const chromeTexts = container.querySelectorAll('.viz-chrome text[data-chrome-key]');
+      const chromeTexts = container.querySelectorAll('.oc-chrome text[data-chrome-key]');
       for (const el of chromeTexts) {
         expect((el as HTMLElement).style.cursor).toBe('grab');
       }
 
       // Legend should have grab cursor (if present)
-      const legendG = container.querySelector('.viz-legend') as SVGGElement | null;
+      const legendG = container.querySelector('.oc-legend') as SVGGElement | null;
       if (legendG) {
         expect(legendG.style.cursor).toBe('grab');
       }
 
       // Series labels should have grab cursor (if any rendered with data-series)
-      const seriesLabels = container.querySelectorAll('.viz-mark-label[data-series]');
+      const seriesLabels = container.querySelectorAll('.oc-mark-label[data-series]');
       for (const el of seriesLabels) {
         expect((el as HTMLElement).style.cursor).toBe('grab');
       }
@@ -277,7 +277,7 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onAnnotationEdit, onEdit });
 
-      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotation = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotation) {
         chart.destroy();
         return;
@@ -311,7 +311,7 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onEdit });
 
-      const annotation = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotation = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotation) {
         chart.destroy();
         return;
@@ -336,7 +336,7 @@ describe('edit events', () => {
       const chart = createChart(container, rangeAnnotatedSpec, { onEdit });
 
       const rangeLabel = container.querySelector(
-        '.viz-annotation-range .viz-annotation-label',
+        '.oc-annotation-range .oc-annotation-label',
       ) as SVGTextElement | null;
       if (!rangeLabel) {
         // Range may not render a visible label in test env
@@ -353,7 +353,7 @@ describe('edit events', () => {
       const chart = createChart(container, rangeAnnotatedSpec, { onEdit });
 
       const rangeLabel = container.querySelector(
-        '.viz-annotation-range .viz-annotation-label',
+        '.oc-annotation-range .oc-annotation-label',
       ) as SVGTextElement | null;
       if (!rangeLabel) {
         chart.destroy();
@@ -380,7 +380,7 @@ describe('edit events', () => {
       const chart = createChart(container, reflineAnnotatedSpec, { onEdit });
 
       const reflineLabel = container.querySelector(
-        '.viz-annotation-refline .viz-annotation-label',
+        '.oc-annotation-refline .oc-annotation-label',
       ) as SVGTextElement | null;
       if (!reflineLabel) {
         chart.destroy();
@@ -396,7 +396,7 @@ describe('edit events', () => {
       const chart = createChart(container, reflineAnnotatedSpec, { onEdit });
 
       const reflineLabel = container.querySelector(
-        '.viz-annotation-refline .viz-annotation-label',
+        '.oc-annotation-refline .oc-annotation-label',
       ) as SVGTextElement | null;
       if (!reflineLabel) {
         chart.destroy();
@@ -427,7 +427,7 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, fullEditSpec, { onEdit });
 
-      const chromeTexts = container.querySelectorAll('.viz-chrome text[data-chrome-key]');
+      const chromeTexts = container.querySelectorAll('.oc-chrome text[data-chrome-key]');
       expect(chromeTexts.length).toBeGreaterThan(0);
 
       for (const el of chromeTexts) {
@@ -442,7 +442,7 @@ describe('edit events', () => {
       const chart = createChart(container, fullEditSpec, { onEdit });
 
       const titleEl = container.querySelector(
-        '.viz-chrome text[data-chrome-key="title"]',
+        '.oc-chrome text[data-chrome-key="title"]',
       ) as SVGTextElement | null;
       if (!titleEl) {
         chart.destroy();
@@ -474,7 +474,7 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, fullEditSpec, { onEdit });
 
-      const legendG = container.querySelector('.viz-legend') as SVGGElement | null;
+      const legendG = container.querySelector('.oc-legend') as SVGGElement | null;
       if (!legendG) {
         chart.destroy();
         return;
@@ -488,7 +488,7 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, fullEditSpec, { onEdit });
 
-      const legendG = container.querySelector('.viz-legend') as SVGGElement | null;
+      const legendG = container.querySelector('.oc-legend') as SVGGElement | null;
       if (!legendG) {
         chart.destroy();
         return;
@@ -512,7 +512,7 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, fullEditSpec, { onLegendToggle, onEdit });
 
-      const legendG = container.querySelector('.viz-legend') as SVGGElement | null;
+      const legendG = container.querySelector('.oc-legend') as SVGGElement | null;
       if (!legendG) {
         chart.destroy();
         return;
@@ -540,16 +540,16 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onEdit });
 
-      const annotationG = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotationG = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotationG) {
         chart.destroy();
         return;
       }
 
       // Check that connector handles exist within the annotation group
-      const handles = annotationG.querySelectorAll('.viz-connector-handle');
+      const handles = annotationG.querySelectorAll('.oc-connector-handle');
       // There should be 2 handles (from and to) if a connector is present
-      const connector = annotationG.querySelector('.viz-annotation-connector');
+      const connector = annotationG.querySelector('.oc-annotation-connector');
       if (connector) {
         expect(handles.length).toBe(2);
         // Verify they have the correct data-endpoint attributes
@@ -565,13 +565,13 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onEdit });
 
-      const annotationG = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotationG = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotationG) {
         chart.destroy();
         return;
       }
 
-      const handles = annotationG.querySelectorAll('.viz-connector-handle');
+      const handles = annotationG.querySelectorAll('.oc-connector-handle');
       if (handles.length === 0) {
         chart.destroy();
         return;
@@ -597,13 +597,13 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onEdit });
 
-      const annotationG = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotationG = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotationG) {
         chart.destroy();
         return;
       }
 
-      const handles = annotationG.querySelectorAll('.viz-connector-handle');
+      const handles = annotationG.querySelectorAll('.oc-connector-handle');
       if (handles.length === 0) {
         chart.destroy();
         return;
@@ -625,7 +625,7 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onEdit });
 
-      const annotationG = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotationG = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotationG) {
         chart.destroy();
         return;
@@ -633,7 +633,7 @@ describe('edit events', () => {
 
       // Find the "from" handle
       const fromHandle = annotationG.querySelector(
-        '.viz-connector-handle[data-endpoint="from"]',
+        '.oc-connector-handle[data-endpoint="from"]',
       ) as SVGCircleElement | null;
 
       if (!fromHandle) {
@@ -661,14 +661,14 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, textAnnotatedSpec, { onEdit });
 
-      const annotationG = container.querySelector('.viz-annotation-text') as SVGGElement | null;
+      const annotationG = container.querySelector('.oc-annotation-text') as SVGGElement | null;
       if (!annotationG) {
         chart.destroy();
         return;
       }
 
       const toHandle = annotationG.querySelector(
-        '.viz-connector-handle[data-endpoint="to"]',
+        '.oc-connector-handle[data-endpoint="to"]',
       ) as SVGCircleElement | null;
 
       if (!toHandle) {
@@ -697,7 +697,7 @@ describe('edit events', () => {
       const onEdit = vi.fn();
       const chart = createChart(container, fullEditSpec, { onEdit });
 
-      const seriesLabels = container.querySelectorAll('.viz-mark-label[data-series]');
+      const seriesLabels = container.querySelectorAll('.oc-mark-label[data-series]');
       if (seriesLabels.length === 0) {
         // Labels may not render in the test env depending on layout
         chart.destroy();
@@ -716,7 +716,7 @@ describe('edit events', () => {
       const chart = createChart(container, fullEditSpec, { onEdit });
 
       const seriesLabel = container.querySelector(
-        '.viz-mark-label[data-series]',
+        '.oc-mark-label[data-series]',
       ) as SVGTextElement | null;
       if (!seriesLabel) {
         chart.destroy();