@opendata-ai/openchart-vanilla 2.9.1 → 2.11.0

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,6 +123,7 @@ export function createGraph(
   let needsRender = false;
   let isGesturing = false;
   let gestureTimeout: ReturnType<typeof setTimeout> | null = null;
+  let lastEdgeHitTime = 0;
 
   // ---------------------------------------------------------------------------
   // Helpers
@@ -159,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) {
@@ -190,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) ?? {};
   }
 
   /**
@@ -244,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;
   }
 
   // ---------------------------------------------------------------------------
@@ -410,9 +415,9 @@ export function createGraph(
 
     simulation.onSettled(() => {
       // One final fit after simulation settles
-      if (canvas && positionedNodes.length > 0 && interactionManager) {
+      if (canvas && positionedNodes.length > 0 && interactionManager && renderer) {
         const { width: cw, height: ch } = getCanvasDimensions();
-        const fitTransform = ZoomTransform.fitBounds(positionedNodes, cw, ch);
+        const { transform: fitTransform } = ZoomTransform.fitBounds(positionedNodes, cw, ch);
         interactionManager.setTransform(fitTransform);
         needsRender = true;
         scheduleRender();
@@ -510,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
@@ -635,7 +655,7 @@ export function createGraph(
   function zoomToFit(): void {
     if (destroyed || !interactionManager || positionedNodes.length === 0) return;
     const { width: cw, height: ch } = getCanvasDimensions();
-    const fitTransform = ZoomTransform.fitBounds(positionedNodes, cw, ch);
+    const { transform: fitTransform } = ZoomTransform.fitBounds(positionedNodes, cw, ch);
     interactionManager.setTransform(fitTransform);
     needsRender = true;
     scheduleRender();
@@ -689,6 +709,7 @@ export function createGraph(
     // Recompile
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
 
     // Update DOM chrome/legend
     renderChrome();
@@ -718,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) => {
@@ -802,6 +824,7 @@ export function createGraph(
   try {
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
     createDOM();
     initSimulation();
     initInteraction();

package/src/mount.ts

@@ -1115,6 +1115,9 @@ function wireLegendInteraction(
   const hiddenSeries = new Set<string>();
 
   for (const entry of legendEntries) {
+    // Skip overflow indicator entries ("+N more")
+    if (entry.getAttribute('data-legend-overflow') === 'true') continue;
+
     const handleClick = () => {
       const label = entry.getAttribute('data-legend-label');
       if (!label) return;
@@ -1364,6 +1367,7 @@ export function createChart(
   let destroyed = false;
   let isDragging = false;
   let pendingRender = false;
+  let resizeTimer: ReturnType<typeof setTimeout> | null = null;
 
   const measureText = createMeasureText();
 
@@ -1587,6 +1591,10 @@ export function createChart(
     if (destroyed) return;
     destroyed = true;
 
+    if (resizeTimer !== null) {
+      clearTimeout(resizeTimer);
+      resizeTimer = null;
+    }
     if (cleanupTooltipEvents) {
       cleanupTooltipEvents();
       cleanupTooltipEvents = null;
@@ -1634,10 +1642,14 @@ export function createChart(
   // Initial render
   render();
 
-  // Set up responsive resize
+  // Set up responsive resize with debounce to avoid full SVG rebuild on every frame
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {
-      resize();
+      if (resizeTimer !== null) clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        resizeTimer = null;
+        resize();
+      }, 100);
     });
   }
 

package/src/svg-renderer.ts

@@ -868,20 +868,40 @@ function renderLegend(parent: SVGElement, legend: LegendLayout): void {
 
   for (let i = 0; i < legend.entries.length; i++) {
     const entry = legend.entries[i];
+
+    // Pre-check: wrap to next line if this entry would overflow bounds
+    if (isHorizontal && i > 0) {
+      const labelWidth = estimateTextWidth(
+        entry.label,
+        legend.labelStyle.fontSize,
+        legend.labelStyle.fontWeight,
+      );
+      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
+      if (offsetX + entryWidth > legend.bounds.x + legend.bounds.width) {
+        offsetX = legend.bounds.x;
+        offsetY += legend.swatchSize + 6;
+      }
+    }
     const entryG = createSVGElement('g');
     entryG.setAttribute('class', 'viz-legend-entry');
     entryG.setAttribute('role', 'listitem');
     entryG.setAttribute('data-legend-index', String(i));
     entryG.setAttribute('data-legend-label', entry.label);
-    entryG.setAttribute(
-      'aria-label',
-      `${entry.label}: ${entry.active !== false ? 'visible' : 'hidden'}`,
-    );
-    entryG.setAttribute('style', 'cursor: pointer');
+    if (entry.overflow) {
+      entryG.setAttribute('data-legend-overflow', 'true');
+      entryG.setAttribute('aria-label', entry.label);
+      entryG.setAttribute('opacity', '0.5');
+    } else {
+      entryG.setAttribute(
+        'aria-label',
+        `${entry.label}: ${entry.active !== false ? 'visible' : 'hidden'}`,
+      );
+      entryG.setAttribute('style', 'cursor: pointer');
 
-    // Apply dimming for inactive entries
-    if (entry.active === false) {
-      entryG.setAttribute('opacity', '0.3');
+      // Apply dimming for inactive entries
+      if (entry.active === false) {
+        entryG.setAttribute('opacity', '0.3');
+      }
     }
 
     // Swatch
@@ -950,11 +970,6 @@ function renderLegend(parent: SVGElement, legend: LegendLayout): void {
       );
       const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
       offsetX += entryWidth;
-      // Wrap to next line if exceeding bounds
-      if (offsetX > legend.bounds.x + legend.bounds.width && i < legend.entries.length - 1) {
-        offsetX = legend.bounds.x;
-        offsetY += legend.swatchSize + 6;
-      }
     } else {
       offsetY += legend.swatchSize + legend.entryGap;
     }

package/src/tooltip.ts

@@ -2,9 +2,11 @@
  * Tooltip manager: creates and positions a floating tooltip element.
  *
  * Shows tooltip content near the mouse/touch position with viewport
- * edge avoidance. Touch support via tap-to-show, tap-outside-to-hide.
+ * edge avoidance via @floating-ui/dom. Touch support via tap-to-show,
+ * tap-outside-to-hide.
  */
 
+import { computePosition, flip, offset, shift } from '@floating-ui/dom';
 import type { TooltipContent } from '@opendata-ai/openchart-core';
 
 export interface TooltipManager {
@@ -36,6 +38,11 @@ export function createTooltipManager(container: HTMLElement): TooltipManager {
   container.style.position = container.style.position || 'relative';
   container.appendChild(tooltip);
 
+  // Track last content to skip innerHTML when only position changes
+  let lastContentKey = '';
+  // Generation counter to discard stale async position callbacks
+  let currentPositionId = 0;
+
   // Hide on tap-outside for touch devices
   const handleDocumentTouch = (e: Event): void => {
     if (!container.contains(e.target as Node)) {
@@ -45,60 +52,78 @@ export function createTooltipManager(container: HTMLElement): TooltipManager {
   document.addEventListener('touchstart', handleDocumentTouch);
 
   function show(content: TooltipContent, x: number, y: number): void {
-    let html = '';
-
-    // Title row: optional color dot + title text
-    if (content.title) {
-      const titleColor = content.fields.find((f) => f.color)?.color;
-      html += '<div class="viz-tooltip-header">';
-      if (titleColor) {
-        html += `<span class="viz-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
+    // Fast content identity check: title + field count + first/last field values
+    const contentKey = `${content.title}|${content.fields.length}|${content.fields[0]?.value}|${content.fields[content.fields.length - 1]?.value}`;
+
+    if (contentKey !== lastContentKey) {
+      lastContentKey = contentKey;
+
+      let html = '';
+
+      // Title row: optional color dot + title text
+      if (content.title) {
+        const titleColor = content.fields.find((f) => f.color)?.color;
+        html += '<div class="viz-tooltip-header">';
+        if (titleColor) {
+          html += `<span class="viz-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
+        }
+        html += `<span class="viz-tooltip-title">${esc(content.title)}</span>`;
+        html += '</div>';
       }
-      html += `<span class="viz-tooltip-title">${esc(content.title)}</span>`;
-      html += '</div>';
-    }
 
-    // Field rows
-    if (content.fields.length > 0) {
-      html += '<div class="viz-tooltip-body">';
-      for (const field of content.fields) {
-        html += '<div class="viz-tooltip-row">';
-        html += `<span class="viz-tooltip-label">${esc(field.label)}</span>`;
-        html += `<span class="viz-tooltip-value">${esc(field.value)}</span>`;
+      // Field rows
+      if (content.fields.length > 0) {
+        html += '<div class="viz-tooltip-body">';
+        for (const field of content.fields) {
+          html += '<div class="viz-tooltip-row">';
+          html += `<span class="viz-tooltip-label">${esc(field.label)}</span>`;
+          html += `<span class="viz-tooltip-value">${esc(field.value)}</span>`;
+          html += '</div>';
+        }
         html += '</div>';
       }
-      html += '</div>';
-    }
-
-    tooltip.innerHTML = html;
-    tooltip.style.display = 'block';
-
-    // Position with viewport edge avoidance
-    const containerRect = container.getBoundingClientRect();
-    const tooltipRect = tooltip.getBoundingClientRect();
-
-    let left = x + TOOLTIP_OFFSET;
-    let top = y + TOOLTIP_OFFSET;
 
-    // Flip horizontal if overflowing right
-    if (left + tooltipRect.width > containerRect.width) {
-      left = x - tooltipRect.width - TOOLTIP_OFFSET;
-    }
-    // Flip vertical if overflowing bottom
-    if (top + tooltipRect.height > containerRect.height) {
-      top = y - tooltipRect.height - TOOLTIP_OFFSET;
+      tooltip.innerHTML = html;
     }
 
-    // Clamp to container bounds
-    left = Math.max(0, Math.min(left, containerRect.width - tooltipRect.width));
-    top = Math.max(0, Math.min(top, containerRect.height - tooltipRect.height));
+    tooltip.style.display = 'block';
 
-    tooltip.style.left = `${left}px`;
-    tooltip.style.top = `${top}px`;
+    // Position with viewport-aware edge avoidance via @floating-ui/dom.
+    // Uses a virtual element since the reference point is a coordinate,
+    // not a DOM element.
+    const positionId = ++currentPositionId;
+    const virtualRef = {
+      getBoundingClientRect() {
+        const rect = container.getBoundingClientRect();
+        return {
+          x: rect.left + x,
+          y: rect.top + y,
+          width: 0,
+          height: 0,
+          top: rect.top + y,
+          left: rect.left + x,
+          right: rect.left + x,
+          bottom: rect.top + y,
+        };
+      },
+    };
+
+    computePosition(virtualRef, tooltip, {
+      placement: 'bottom-start',
+      middleware: [offset(TOOLTIP_OFFSET), flip(), shift({ padding: 5 })],
+    }).then(({ x: fx, y: fy }) => {
+      // Discard stale callbacks from earlier show() calls
+      if (positionId !== currentPositionId) return;
+      // computePosition returns coordinates relative to the tooltip's offset
+      // parent (the container with position: relative), so apply directly.
+      tooltip.style.left = `${fx}px`;
+      tooltip.style.top = `${fy}px`;
+    });
   }
 
   function hide(): void {
     tooltip.style.display = 'none';
+    lastContentKey = '';
   }
 
   function destroy(): void {
@@ -116,5 +141,6 @@ function esc(str: string): string {
     .replace(/&/g, '&amp;')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#x27;');
 }