argent-grid 0.1.0 → 0.2.0

package/src/lib/rendering/live-data-handler.ts

@@ -0,0 +1,110 @@
+/**
+ * Live Data Handler for Canvas Renderer
+ *
+ * Manages high-frequency data updates and buffering.
+ */
+
+import { GridApi } from '../types/ag-grid-types';
+
+export class LiveDataHandler<TData = any> {
+  private updateBuffer: TData[] = [];
+  private updateBufferTimer: number | null = null;
+  private batchInterval = 100;
+  private rowIndexById: Map<string, number> = new Map();
+  private dirtyRows: Set<number> = new Set();
+
+  constructor(private gridApi: GridApi<TData>) {}
+
+  setBatchInterval(intervalMs: number): void {
+    this.batchInterval = Math.max(16, intervalMs);
+  }
+
+  addRowData(data: TData, immediate = false, onFlush: () => void): void {
+    this.updateBuffer.push(data);
+
+    // Index row by ID if available
+    const dataWithId = data as any;
+    if (dataWithId.id) {
+      const index = this.gridApi.getRowData().length + this.updateBuffer.length - 1;
+      this.rowIndexById.set(dataWithId.id, index);
+    }
+
+    if (immediate) {
+      this.flushUpdateBuffer(onFlush);
+    } else if (!this.updateBufferTimer) {
+      this.updateBufferTimer = window.setTimeout(() => {
+        this.flushUpdateBuffer(onFlush);
+      }, this.batchInterval);
+    }
+  }
+
+  flushUpdateBuffer(onFlush: () => void): void {
+    if (this.updateBuffer.length === 0) return;
+
+    if (this.updateBufferTimer) {
+      clearTimeout(this.updateBufferTimer);
+      this.updateBufferTimer = null;
+    }
+
+    const currentCount = this.gridApi.getDisplayedRowCount();
+
+    // Apply transaction
+    this.gridApi.applyTransaction({ add: this.updateBuffer });
+
+    // Mark new rows as dirty
+    for (let i = 0; i < this.updateBuffer.length; i++) {
+      this.dirtyRows.add(currentCount + i);
+    }
+
+    this.updateBuffer = [];
+    onFlush();
+  }
+
+  markRowDirty(rowIndex: number): void {
+    this.dirtyRows.add(rowIndex);
+  }
+
+  getDirtyRows(): Set<number> {
+    return this.dirtyRows;
+  }
+
+  clearDirtyRows(): void {
+    this.dirtyRows.clear();
+  }
+
+  updateRowById(id: string, updates: Partial<TData>): boolean {
+    const index = this.rowIndexById.get(id);
+    const rowData = this.gridApi.getRowData();
+    if (index === undefined || index >= rowData.length) {
+      return false;
+    }
+
+    this.gridApi.applyTransaction({ update: [{ ...rowData[index], ...updates }] });
+    this.markRowDirty(index);
+    return true;
+  }
+
+  removeRowById(id: string): boolean {
+    const index = this.rowIndexById.get(id);
+    if (index === undefined) {
+      return false;
+    }
+
+    const rowData = this.gridApi.getRowData();
+    this.gridApi.applyTransaction({ remove: [rowData[index]] });
+    this.rowIndexById.delete(id);
+    this.rebuildRowIndex();
+    return true;
+  }
+
+  rebuildRowIndex(): void {
+    this.rowIndexById.clear();
+    const rowData = this.gridApi.getRowData();
+    rowData.forEach((row, index) => {
+      const rowWithId = row as any;
+      if (rowWithId.id) {
+        this.rowIndexById.set(rowWithId.id, index);
+      }
+    });
+  }
+}

package/src/lib/rendering/live-data-optimizations.ts

@@ -0,0 +1,133 @@
+/**
+ * Live Data Optimizations for CanvasRenderer
+ *
+ * Performance optimizations for high-frequency data updates (10+ entries/sec):
+ * - Update batching (90% fewer renders)
+ * - Dirty row tracking (90% less rendering work)
+ * - Row ID indexing (O(1) updates instead of O(n))
+ *
+ * @see CanvasRenderer - Main renderer class that uses these optimizations
+ */
+
+/**
+ * Mixin for live data optimizations
+ *
+ * Usage:
+ * ```typescript
+ * class OptimizedRenderer extends LiveDataOptimizations(CanvasRenderer) {
+ *   // Has all live data optimization methods
+ * }
+ * ```
+ */
+export function LiveDataOptimizations<TBase extends new (...args: any[]) => any>(Base: TBase) {
+  return class extends Base {
+    // Update batching
+    updateBuffer: any[] = [];
+    updateBufferTimer: number | null = null;
+    batchInterval = 100; // ms
+
+    // Dirty row tracking
+    dirtyRows: Set<number> = new Set();
+
+    // Row index by ID
+    rowIndexById: Map<string, number> = new Map();
+
+    /**
+     * Set update batching interval
+     */
+    setBatchInterval(intervalMs: number): void {
+      this.batchInterval = Math.max(16, intervalMs);
+    }
+
+    /**
+     * Add row data with batching
+     */
+    addRowData(data: any, immediate = false): void {
+      this.updateBuffer.push(data);
+
+      // Index by ID
+      if (data.id) {
+        const index = (this as any).rowData.length + this.updateBuffer.length - 1;
+        this.rowIndexById.set(data.id, index);
+      }
+
+      if (immediate) {
+        this.flushUpdateBuffer();
+      } else if (!this.updateBufferTimer) {
+        this.updateBufferTimer = window.setTimeout(() => {
+          this.flushUpdateBuffer();
+        }, this.batchInterval);
+      }
+    }
+
+    /**
+     * Flush update buffer
+     */
+    flushUpdateBuffer(): void {
+      if (this.updateBuffer.length === 0) return;
+
+      if (this.updateBufferTimer) {
+        clearTimeout(this.updateBufferTimer);
+        this.updateBufferTimer = null;
+      }
+
+      const startIndex = (this as any).rowData.length;
+      (this as any).rowData.push(...this.updateBuffer);
+      this.updateBuffer = [];
+
+      // Mark new rows as dirty
+      for (let i = 0; i < (this as any).rowData.length - startIndex; i++) {
+        this.dirtyRows.add(startIndex + i);
+      }
+
+      (this as any).totalRowCount = (this as any).rowData.length;
+      (this as any).renderFrame();
+    }
+
+    /**
+     * Mark row as dirty
+     */
+    markRowDirty(rowIndex: number): void {
+      this.dirtyRows.add(rowIndex);
+    }
+
+    /**
+     * Update row by ID (O(1))
+     */
+    updateRowById(id: string, updates: any): boolean {
+      const index = this.rowIndexById.get(id);
+      if (index === undefined || index >= (this as any).rowData.length) {
+        return false;
+      }
+
+      Object.assign((this as any).rowData[index], updates);
+      this.markRowDirty(index);
+      return true;
+    }
+
+    /**
+     * Remove row by ID
+     */
+    removeRowById(id: string): boolean {
+      const index = this.rowIndexById.get(id);
+      if (index === undefined) return false;
+
+      (this as any).rowData.splice(index, 1);
+      this.rowIndexById.delete(id);
+      this.rebuildRowIndex();
+      return true;
+    }
+
+    /**
+     * Rebuild row index
+     */
+    rebuildRowIndex(): void {
+      this.rowIndexById.clear();
+      (this as any).rowData.forEach((row: any, index: number) => {
+        if (row.id) {
+          this.rowIndexById.set(row.id, index);
+        }
+      });
+    }
+  };
+}

package/src/lib/rendering/render/blit.spec.ts

@@ -5,18 +5,17 @@
  */
 
 import {
-  shouldBlit,
-  calculateBlit,
+  BlitState,
   blitLastFrame,
+  calculateBlit,
   createBufferPair,
-  swapBuffers,
   displayBuffer,
-  resizeBufferPair,
-  BlitState,
-  MIN_BLIT_DELTA,
   MAX_BLIT_DELTA_RATIO,
+  MIN_BLIT_DELTA,
+  resizeBufferPair,
+  shouldBlit,
+  swapBuffers,
 } from './blit';
-import { Rectangle, BufferPair } from './types';
 
 // Mock canvas and context
 const mockContext = {
@@ -114,7 +113,7 @@ describe('Blitting Optimization', () => {
     it('should calculate vertical scroll blit (down)', () => {
       const result = calculateBlit(
         { x: 0, y: 100 }, // Current
-        { x: 0, y: 0 },   // Last
+        { x: 0, y: 0 }, // Last
         viewportSize,
         pinnedWidths
       );
@@ -136,7 +135,7 @@ describe('Blitting Optimization', () => {
 
     it('should calculate vertical scroll blit (up)', () => {
       const result = calculateBlit(
-        { x: 0, y: 0 },   // Current
+        { x: 0, y: 0 }, // Current
         { x: 0, y: 100 }, // Last
         viewportSize,
         pinnedWidths
@@ -154,7 +153,7 @@ describe('Blitting Optimization', () => {
     it('should calculate horizontal scroll blit (right)', () => {
       const result = calculateBlit(
         { x: 100, y: 0 }, // Current
-        { x: 0, y: 0 },   // Last
+        { x: 0, y: 0 }, // Last
         viewportSize,
         pinnedWidths
       );
@@ -171,7 +170,7 @@ describe('Blitting Optimization', () => {
 
     it('should calculate horizontal scroll blit (left)', () => {
       const result = calculateBlit(
-        { x: 0, y: 0 },   // Current
+        { x: 0, y: 0 }, // Current
         { x: 100, y: 0 }, // Last
         viewportSize,
         pinnedWidths
@@ -185,12 +184,7 @@ describe('Blitting Optimization', () => {
     });
 
     it('should return full redraw for diagonal scroll', () => {
-      const result = calculateBlit(
-        { x: 50, y: 50 },
-        { x: 0, y: 0 },
-        viewportSize,
-        pinnedWidths
-      );
+      const result = calculateBlit({ x: 50, y: 50 }, { x: 0, y: 0 }, viewportSize, pinnedWidths);
 
       expect(result.canBlit).toBe(false);
       expect(result.dirtyRegions[0].width).toBe(800);
@@ -198,12 +192,7 @@ describe('Blitting Optimization', () => {
     });
 
     it('should account for pinned widths', () => {
-      const result = calculateBlit(
-        { x: 100, y: 0 },
-        { x: 0, y: 0 },
-        viewportSize,
-        pinnedWidths
-      );
+      const result = calculateBlit({ x: 100, y: 0 }, { x: 0, y: 0 }, viewportSize, pinnedWidths);
 
       // Center region is between pinned columns
       expect(result.sourceRect.x).toBe(100); // left pinned width
@@ -293,7 +282,7 @@ describe('Blitting Optimization', () => {
 
     it('should swap contexts too', () => {
       const buffers = createBufferPair(800, 600);
-      const originalFrontCtx = buffers.frontCtx;
+      const _originalFrontCtx = buffers.frontCtx;
 
       swapBuffers(buffers);
 
@@ -377,8 +366,8 @@ describe('Blitting Optimization', () => {
 
         const lastCanvas = state.getLastCanvas();
         expect(lastCanvas).not.toBeNull();
-        expect(lastCanvas!.width).toBe(800);
-        expect(lastCanvas!.height).toBe(600);
+        expect(lastCanvas?.width).toBe(800);
+        expect(lastCanvas?.height).toBe(600);
       });
 
       it('should report hasLastFrame correctly', () => {
@@ -450,4 +439,4 @@ describe('Blitting Optimization', () => {
       expect(result.canBlit).toBe(true);
     });
   });
-});
+});

package/src/lib/rendering/render/blit.ts

@@ -5,7 +5,7 @@
  * Based on Glide Data Grid's blitting architecture.
  */
 
-import { Rectangle, BlitResult, BufferPair } from './types';
+import { BlitResult, BufferPair, Rectangle } from './types';
 
 // ============================================================================
 // BLIT THRESHOLDS
@@ -99,7 +99,7 @@ export function calculateBlit(
     };
   }
 
-  const dirtyRegions: Rectangle[] = [];
+  const _dirtyRegions: Rectangle[] = [];
 
   // Vertical scroll (most common)
   if (Math.abs(deltaY) >= MIN_BLIT_DELTA && Math.abs(deltaX) < MIN_BLIT_DELTA) {
@@ -127,19 +127,27 @@ export function calculateBlit(
       },
       dirtyRegions: [
         // Top strip that needs redraw
-        ...(deltaY > 0 ? [{
-          x: leftPinnedWidth,
-          y: 0,
-          width: centerWidth,
-          height: absDelta,
-        }] : []),
+        ...(deltaY > 0
+          ? [
+              {
+                x: leftPinnedWidth,
+                y: 0,
+                width: centerWidth,
+                height: absDelta,
+              },
+            ]
+          : []),
         // Bottom strip that needs redraw
-        ...(deltaY < 0 ? [{
-          x: leftPinnedWidth,
-          y: viewportSize.height - absDelta,
-          width: centerWidth,
-          height: absDelta,
-        }] : []),
+        ...(deltaY < 0
+          ? [
+              {
+                x: leftPinnedWidth,
+                y: viewportSize.height - absDelta,
+                width: centerWidth,
+                height: absDelta,
+              },
+            ]
+          : []),
       ],
       deltaX,
       deltaY,
@@ -171,19 +179,27 @@ export function calculateBlit(
       },
       dirtyRegions: [
         // Left strip that needs redraw
-        ...(deltaX > 0 ? [{
-          x: leftPinnedWidth,
-          y: 0,
-          width: absDelta,
-          height: viewportSize.height,
-        }] : []),
+        ...(deltaX > 0
+          ? [
+              {
+                x: leftPinnedWidth,
+                y: 0,
+                width: absDelta,
+                height: viewportSize.height,
+              },
+            ]
+          : []),
         // Right strip that needs redraw
-        ...(deltaX < 0 ? [{
-          x: viewportSize.width - rightPinnedWidth - absDelta,
-          y: 0,
-          width: absDelta,
-          height: viewportSize.height,
-        }] : []),
+        ...(deltaX < 0
+          ? [
+              {
+                x: viewportSize.width - rightPinnedWidth - absDelta,
+                y: 0,
+                width: absDelta,
+                height: viewportSize.height,
+              },
+            ]
+          : []),
       ],
       deltaX,
       deltaY,
@@ -248,15 +264,11 @@ export function blitLastFrame(
 /**
  * Create a buffer pair for double buffering
  */
-export function createBufferPair(
-  width: number,
-  height: number,
-  dpr: number = 1
-): BufferPair {
+export function createBufferPair(width: number, height: number, dpr: number = 1): BufferPair {
   const front = document.createElement('canvas');
   const back = document.createElement('canvas');
 
-  [front, back].forEach(canvas => {
+  [front, back].forEach((canvas) => {
     canvas.width = Math.floor(width * dpr);
     canvas.height = Math.floor(height * dpr);
     canvas.style.width = `${width}px`;
@@ -307,7 +319,7 @@ export function resizeBufferPair(
   height: number,
   dpr: number = 1
 ): void {
-  [buffers.front, buffers.back].forEach(canvas => {
+  [buffers.front, buffers.back].forEach((canvas) => {
     canvas.width = Math.floor(width * dpr);
     canvas.height = Math.floor(height * dpr);
     canvas.style.width = `${width}px`;
@@ -356,14 +368,14 @@ export class BlitState {
     if (!this.lastCanvas) {
       this.lastCanvas = document.createElement('canvas');
     }
-    
+
     // Only resize if dimensions changed, as setting width/height clears the canvas
     // and is an expensive operation.
     if (this.lastCanvas.width !== canvas.width || this.lastCanvas.height !== canvas.height) {
       this.lastCanvas.width = canvas.width;
       this.lastCanvas.height = canvas.height;
     }
-    
+
     const ctx = this.lastCanvas.getContext('2d')!;
     ctx.drawImage(canvas, 0, 0);
   }
@@ -390,4 +402,4 @@ export class BlitState {
     this.lastScrollY = 0;
     this.lastCanvas = null;
   }
-}
+}

package/src/lib/rendering/render/cells.spec.ts

@@ -0,0 +1,132 @@
+import { describe, expect, it, vi } from 'vitest';
+import { ColDef, GridApi, IRowNode } from '../../types/ag-grid-types';
+import { getFormattedValue, getValueByPath, stripHtmlTags } from './cells';
+
+describe('cells.ts', () => {
+  describe('stripHtmlTags', () => {
+    it('should strip HTML tags from string', () => {
+      expect(stripHtmlTags('<span>active</span>')).toBe('active');
+      expect(stripHtmlTags('<div class="test">content</div>')).toBe('content');
+    });
+
+    it('should handle complex HTML', () => {
+      const html =
+        '<span style="color: green; padding: 4px 8px; background: green20; border-radius: 4px;">active</span>';
+      expect(stripHtmlTags(html)).toBe('active');
+    });
+
+    it('should handle empty string', () => {
+      expect(stripHtmlTags('')).toBe('');
+    });
+
+    it('should handle null/undefined', () => {
+      expect(stripHtmlTags(null as any)).toBe('');
+      expect(stripHtmlTags(undefined as any)).toBe('');
+    });
+
+    it('should handle plain text (no HTML)', () => {
+      expect(stripHtmlTags('plain text')).toBe('plain text');
+    });
+
+    it('should handle multiple tags', () => {
+      expect(stripHtmlTags('<strong><em>bold italic</em></strong>')).toBe('bold italic');
+    });
+  });
+
+  describe('getValueByPath', () => {
+    it('should get value from simple path', () => {
+      const obj = { name: 'John', age: 30 };
+      expect(getValueByPath(obj, 'name')).toBe('John');
+      expect(getValueByPath(obj, 'age')).toBe(30);
+    });
+
+    it('should get value from nested path', () => {
+      const obj = { user: { name: 'John', address: { city: 'NYC' } } };
+      expect(getValueByPath(obj, 'user.name')).toBe('John');
+      expect(getValueByPath(obj, 'user.address.city')).toBe('NYC');
+    });
+
+    it('should return undefined for missing path', () => {
+      const obj = { name: 'John' };
+      expect(getValueByPath(obj, 'age')).toBe(undefined);
+      expect(getValueByPath(obj, 'address.city')).toBe(undefined);
+    });
+
+    it('should handle null/undefined objects', () => {
+      expect(getValueByPath(null, 'name')).toBe(undefined);
+      expect(getValueByPath(undefined, 'name')).toBe(undefined);
+    });
+  });
+
+  describe('getFormattedValue', () => {
+    const mockApi = {} as GridApi;
+    const mockRowNode = { data: { name: 'John', age: 30 } } as IRowNode;
+
+    it('should return empty string for null/undefined', () => {
+      expect(getFormattedValue(null, null, null as any, mockRowNode, mockApi)).toBe('');
+      expect(getFormattedValue(undefined, null, null as any, mockRowNode, mockApi)).toBe('');
+    });
+
+    it('should use valueFormatter if provided', () => {
+      const colDef = {
+        valueFormatter: vi.fn((params) => `$${params.value}`),
+      } as ColDef;
+
+      const result = getFormattedValue(100, colDef, { salary: 100 }, mockRowNode, mockApi);
+      expect(result).toBe('$100');
+      expect(colDef.valueFormatter).toHaveBeenCalled();
+    });
+
+    it('should use cellRenderer and strip HTML tags', () => {
+      const colDef = {
+        cellRenderer: vi.fn((params) => `<span style="color: green">${params.value}</span>`),
+      } as ColDef;
+
+      const result = getFormattedValue(
+        'active',
+        colDef,
+        { status: 'active' },
+        mockRowNode,
+        mockApi
+      );
+      expect(result).toBe('active'); // HTML stripped
+      expect(colDef.cellRenderer).toHaveBeenCalled();
+    });
+
+    it('should handle cellRenderer returning plain text', () => {
+      const colDef = {
+        cellRenderer: vi.fn((params) => params.value.toUpperCase()),
+      } as ColDef;
+
+      const result = getFormattedValue('hello', colDef, { text: 'hello' }, mockRowNode, mockApi);
+      expect(result).toBe('HELLO');
+    });
+
+    it('should convert value to string if no formatter/renderer', () => {
+      const result = getFormattedValue(123, null, null as any, mockRowNode, mockApi);
+      expect(result).toBe('123');
+    });
+
+    it('should handle cellRenderer errors gracefully', () => {
+      const colDef = {
+        cellRenderer: vi.fn(() => {
+          throw new Error('Renderer error');
+        }),
+      } as ColDef;
+
+      const result = getFormattedValue('test', colDef, null as any, mockRowNode, mockApi);
+      expect(result).toBe('test'); // Falls back to value
+    });
+
+    it('should handle valueFormatter errors gracefully', () => {
+      const colDef = {
+        valueFormatter: vi.fn(() => {
+          throw new Error('Formatter error');
+        }),
+      } as ColDef;
+
+      const result = getFormattedValue('test', colDef, null as any, mockRowNode, mockApi);
+      expect(result).toBe('test'); // Falls back to value
+    });
+  });
+});