Refactor: Modularize DataTable and manual DOM selection logic

src/index.js

@@ -1,69 +1,43 @@
 import { Component, NewState, Util, RefreshState } from '@web/state'
-import { VirtualScroll } from '@web/base'
+import { createPerfMonitor } from './perf.js'
+import { createScrollManager } from './scroll.js'
+import { createSelectionManager } from './selection.js'
 
 Component.register('DataTable', container => {
-	const vs = VirtualScroll()
 	if (!container.state) container.state = NewState({})
 	const state = container.state
 
 	Object.assign(state, {
 		list: [], fields: [], _renderedList: [],
 		prevHeight: 0, postHeight: 0, _listStartIndex: 0,
-		perf: { refreshTime: 0, refreshCount: 0, scrollCount: 0, totalNodes: 0 }
+		selectedRowCount: 0
 	})
 
-	/* PERFORMANCE_TELEMETRY_START - THIS BLOCK IS FOR TESTING AND SHOULD BE REMOVED IN PRODUCTION */
+	const perf = createPerfMonitor();
-	if (!window.__statePerformanceTelemetry) {
+	state.perf = perf.stats;
-		window.__statePerformanceTelemetry = { scanCount: 0, reuseCount: 0, moveCount: 0 };
+
-	}
+	const selection = createSelectionManager(container, state);
-	/* PERFORMANCE_TELEMETRY_END */
+
+	const scroll = createScrollManager(container, state, (renderedCount) => {
+		selection.applySelectionUI();
+	});
 
 	container.refresh = () => {
-		const start = performance.now()
+		const frameStart = perf.startFrame();
-		// Optimization: Expand the virtual viewport to 1.6x height to create a buffer
+		scroll.refresh();
-		// that prevents "white flashes" during extremely fast scrolling.
+		perf.endFrame(frameStart, state._renderedList.length);
-		const virtualContainer = { 
+	};
-			clientHeight: container.clientHeight * 1.6, 
-			scrollTop: container.scrollTop 
-		};
-		const res = vs.calc(virtualContainer, state.list)
-		if (res) {
-			/* PERFORMANCE_TELEMETRY_START */
-			const frameStartScan = window.__statePerformanceTelemetry.scanCount;
-			const frameStartMove = window.__statePerformanceTelemetry.moveCount;
-			const frameStartReuse = window.__statePerformanceTelemetry.reuseCount;
-			/* PERFORMANCE_TELEMETRY_END */
 
-			state.perf.refreshCount++
+	container.onScroll = () => {
-			Object.assign(state, {
+		perf.onScroll();
-				prevHeight: res.prevHeight, postHeight: res.postHeight,
+		container.refresh();
-				_listStartIndex: res.listStartIndex, _renderedList: res.renderedList
+	};
-			})
 
-			const elapsed = performance.now() - start;
+	container.onItemUpdate = (index, node) => scroll.updateRowHeight(index, node);
-			state.perf.refreshTime += elapsed;
-			state.perf.totalNodes += res.renderedList.length;
-
-			/* PERFORMANCE_TELEMETRY_START */
-			const frameScans = window.__statePerformanceTelemetry.scanCount - frameStartScan;
-			const frameMoves = window.__statePerformanceTelemetry.moveCount - frameStartMove;
-			const frameReuses = window.__statePerformanceTelemetry.reuseCount - frameStartReuse;
-			
-			if (frameScans > 0 || elapsed > 2) {
-				console.log(`[DataTable Frame] Time: ${elapsed.toFixed(2)}ms, Scans: ${frameScans}, Moves: ${frameMoves}, Reuses: ${frameReuses}, Rows: ${res.renderedList.length}`);
-			}
-			/* PERFORMANCE_TELEMETRY_END */
-		}
-	}
-
-	container.onItemUpdate = (index, node) => {
-		// vs.update(index + (state._listStartIndex || 0), node)
-	}
 
 	state.__watch('list', list => {
-		state._listStartIndex = 0
+		scroll.init();
-		state._renderedList = vs.reset(list, container) || []
+		scroll.reset(list);
-		setTimeout(() => { if (state.list === list) vs.init(list, container.refresh) })
 	})
 
 	state.__watch('fields', fields => {
@@ -72,44 +46,107 @@ Component.register('DataTable', container => {
 		container.style.setProperty('--dt-grid-template', gridTemplate)
 	})
 
-	container.onScroll = () => {
+	// Expose selection methods to template
-		state.perf.scrollCount++
+	container.startSelect = selection.startSelect;
-		container.refresh()
+	container.updateSelect = selection.updateSelect;
+	container.deleteSelected = selection.deleteSelected;
+
+	// Copy & Paste (simplified)
+	const escapeTSV = val => {
+		const str = String(val ?? '')
+		return (str.includes('\t') || str.includes('\n') || str.includes('"')) ? '"' + str.replace(/"/g, '""') + '"' : str
+	}
+
+	container.copy = async () => {
+		const bounds = selection.getSelectionBounds();
+		if (!bounds) return;
+		const text = state.list.slice(bounds.minRow, bounds.maxRow + 1).map(row => 
+			state.fields.slice(bounds.minCol, bounds.maxCol + 1).map(f => escapeTSV(row[f.id])).join('\t')
+		).join('\n')
+		await navigator.clipboard.writeText(text)
+	}
+
+	container.addEventListener('keydown', e => {
+		if (e.ctrlKey || e.metaKey) {
+			if (e.key === 'c') { e.preventDefault(); container.copy() }
+		}
+	})
+
+	const onGlobalMouseUp = () => selection.endSelect()
+	const onGlobalMouseDown = e => {
+		if (!container.contains(e.target)) selection.clearAllActive()
+	}
+	
+	window.addEventListener('mouseup', onGlobalMouseUp)
+	document.addEventListener('mousedown', onGlobalMouseDown)
+	
+	container._onUnload = () => {
+		document.removeEventListener('mousedown', onGlobalMouseDown)
+		window.removeEventListener('mouseup', onGlobalMouseUp)
 	}
 
 }, Util.makeDom(/*html*/`
-<div class="dt-root h-100 overflow-auto" onscroll="this.onScroll()" style="overflow-anchor:none; display: block">
+<div class="dt-root d-flex flex-column h-100 border bg-body text-body overflow-hidden" style="position:relative; user-select:none; outline: none; min-height: 0" onunload="this._onUnload()" tabindex="0">
-	<div class="dt-header border-bottom bg-light sticky-top" style="z-index:10">
+	<div class="dt-main flex-grow-1 overflow-auto" $onscroll="this.onScroll()" style="overflow-anchor:none; min-height: 0">
-		<div class="dt-flex-row fw-bold text-muted small" style="height:40px">
+		<div class="dt-header border-bottom bg-light sticky-top" style="z-index:20">
-			<div $each="this.state.fields" class="dt-cell border-end px-2 d-flex align-items-center overflow-hidden" $style="'width: var(--w-' + item.id + ', ' + (item.width || 150) + 'px); min-width: var(--w-' + item.id + ', ' + (item.width || 150) + 'px)'">
+			<div class="dt-row dt-header-row fw-bold text-muted small">
-				<span $text="item.name" class="text-truncate"></span>
+				<div $each="this.state.fields" class="dt-cell border-end px-2 d-flex align-items-center" $style="'width: var(--w-' + item.id + ', ' + (item.width || 150) + 'px); min-width: var(--w-' + item.id + ', ' + (item.width || 150) + 'px)'">
+					<span $text="item.name" class="text-truncate"></span>
+				</div>
 			</div>
 		</div>
-	</div>
+		<div class="dt-body" style="position:relative">
-	<div $if="(this.state?.prevHeight || 0) > 0" $style="'height:' + this.state.prevHeight + 'px;'" class="flex-shrink-0"></div>
+			<div $if="(this.state?.prevHeight || 0) > 0" $style="'height:' + this.state.prevHeight + 'px;'" class="flex-shrink-0"></div>
-	<div $each="this.state?._renderedList" key="id" class="dt-row dt-flex-row border-bottom bg-white" style="height:40px" $onupdate="this.onItemUpdate(index, thisNode)">
+			<div $each="this.state?._renderedList" key="id" index="rIdx" class="dt-row dt-body-row border-bottom bg-white" $onupdate="this.onItemUpdate(rIdx, thisNode)">
-		<div $each="this.state.fields" as="f" class="dt-cell border-end px-2 d-flex align-items-center overflow-hidden" $style="'width: var(--w-' + f.id + ', ' + (f.width || 150) + 'px); min-width: var(--w-' + f.id + ', ' + (f.width || 150) + 'px)'">
+				<div $each="this.state.fields" as="f" index="fIdx" 
-			<span $text="item[f.id] ?? ''" class="text-truncate"></span>
+					class="dt-cell border-end px-2 d-flex align-items-center"
+					$onmousedown="this.startSelect(rIdx + this.state._listStartIndex, fIdx, event)"
+					$onmouseenter="this.updateSelect(rIdx + this.state._listStartIndex, fIdx)"
+					$style="'width: var(--w-' + f.id + ', ' + (f.width || 150) + 'px); min-width: var(--w-' + f.id + ', ' + (f.width || 150) + 'px)'">
+					<span $text="item[f.id] ?? ''" class="text-truncate"></span>
+				</div>
+			</div>
+			<div $if="(this.state?.postHeight || 0) > 0" $style="'height:' + this.state.postHeight + 'px;'" class="flex-shrink-0"></div>
 		</div>
 	</div>
-	<div $if="(this.state?.postHeight || 0) > 0" $style="'height:' + this.state.postHeight + 'px;'" class="flex-shrink-0"></div>
+	<div class="dt-footer border-top bg-light d-flex align-items-center px-2 py-1 small text-muted" style="height:32px">
+		<div class="flex-grow-1">
+			Total: <span $text="this.state.list.length"></span> | 
+			Selected Rows: <span $text="this.state.selectedRowCount"></span>
+		</div>
+		<button class="btn btn-xs btn-outline-danger py-0 px-2" style="font-size: 11px" $disabled="this.state.selectedRowCount === 0" $onclick="this.deleteSelected()">
+			<i class="bi bi-trash me-1"></i>Delete Selected
+		</button>
+	</div>
 </div>
 `), Util.makeDom(/*html*/`
 <style>
 	DataTable { display: block; }
-	.dt-flex-row {
+	.dt-root { font-size: 0.875rem; }
+	.dt-row {
 		display: flex;
 		flex-direction: row;
 		width: max-content;
 		min-width: 100%;
+		height: 40px;
+	}
+	.dt-header-row {
+		background-color: var(--bs-tertiary-bg);
 	}
 	.dt-cell {
 		background: inherit;
 		white-space: nowrap;
 		flex-shrink: 0;
 	}
-	.dt-row:hover {
+	.dt-body-row:hover {
-		background-color: #f8f9fa !important;
+		background-color: var(--bs-secondary-bg) !important;
+	}
+	.dt-cell-selected {
+		background-color: var(--bs-primary-bg-subtle) !important;
+	}
+	.btn-xs {
+		padding: 1px 5px;
+		line-height: 1.5;
 	}
 </style>
 `))

src/perf.js

@@ -0,0 +1,43 @@
+export const createPerfMonitor = () => {
+    let enabled = !!window.__DT_PERF_MODE__;
+    const stats = { refreshTime: 0, refreshCount: 0, scrollCount: 0, totalNodes: 0 };
+
+    if (enabled && !window.__statePerformanceTelemetry) {
+        window.__statePerformanceTelemetry = { scanCount: 0, reuseCount: 0, moveCount: 0 };
+    }
+
+    return {
+        get stats() { return stats; },
+        enable: () => { enabled = true; },
+        disable: () => { enabled = false; },
+        onScroll: () => { if (enabled) stats.scrollCount++; },
+        startFrame: () => {
+            if (!enabled) return null;
+            return {
+                start: performance.now(),
+                scan: window.__statePerformanceTelemetry?.scanCount || 0,
+                move: window.__statePerformanceTelemetry?.moveCount || 0,
+                reuse: window.__statePerformanceTelemetry?.reuseCount || 0
+            };
+        },
+        endFrame: (startData, renderedCount) => {
+            if (!enabled || !startData) return;
+            stats.refreshCount++;
+            stats.totalNodes += renderedCount;
+            
+            const elapsed = performance.now() - startData.start;
+            stats.refreshTime += elapsed;
+
+            const stPerf = window.__statePerformanceTelemetry;
+            if (stPerf) {
+                const scans = stPerf.scanCount - startData.scan;
+                const moves = stPerf.moveCount - startData.move;
+                const reuses = stPerf.reuseCount - startData.reuse;
+                
+                if (scans > 0 || elapsed > 2) {
+                    console.log(`[DataTable Frame] Time: ${elapsed.toFixed(2)}ms, Scans: ${scans}, Moves: ${moves}, Reuses: ${reuses}, Rows: ${renderedCount}`);
+                }
+            }
+        }
+    };
+};

src/scroll.js

@@ -0,0 +1,48 @@
+import { VirtualScroll } from '@web/base';
+
+export const createScrollManager = (container, state, onRenderedListChange) => {
+    const vs = VirtualScroll();
+    let scrollEl = null;
+
+    const refresh = () => {
+        if (!scrollEl) return;
+        // Expand the virtual viewport to 1.6x height to create a buffer
+        const virtualContainer = { 
+            clientHeight: scrollEl.clientHeight * 1.6, 
+            scrollTop: scrollEl.scrollTop 
+        };
+        const res = vs.calc(virtualContainer, state.list);
+        if (res) {
+            Object.assign(state, {
+                prevHeight: res.prevHeight,
+                postHeight: res.postHeight,
+                _listStartIndex: res.listStartIndex,
+                _renderedList: res.renderedList
+            });
+            onRenderedListChange?.(res.renderedList.length);
+        }
+    };
+
+    return {
+        init: () => {
+            scrollEl = container.querySelector('.dt-main');
+        },
+        reset: (list) => {
+            state._listStartIndex = 0;
+            state._renderedList = vs.reset(list, scrollEl || container) || [];
+            setTimeout(() => { 
+                if (state.list === list) {
+                    vs.init(list, refresh);
+                }
+            });
+        },
+        updateRowHeight: (index, node) => {
+            // Restore this call so VirtualScroll can learn the actual height
+            // of the rows instead of using its 32px default. This fixes
+            // layout shifts/jumps when scrolling past the first group.
+            vs.update(index + (state._listStartIndex || 0), node);
+        },
+        refresh,
+        onScroll: refresh
+    };
+};

src/selection.js

@@ -0,0 +1,144 @@
+export const createSelectionManager = (container, state) => {
+    let activeBounds = null; // { minRow, maxRow, minCol, maxCol }
+    let startCell = null; // { row, col }
+    let multiSelections = [];
+
+    const isCellSelected = (r, c) => {
+        if (activeBounds && r >= activeBounds.minRow && r <= activeBounds.maxRow && c >= activeBounds.minCol && c <= activeBounds.maxCol) return true;
+        return multiSelections.some(s => r >= s.minRow && r <= s.maxRow && c >= s.minCol && c <= s.maxCol);
+    };
+
+    const applySelectionUI = () => {
+        const rowNodes = container.querySelectorAll('.dt-body-row');
+        
+        let boundMinRow = Infinity, boundMaxRow = -Infinity;
+        if (activeBounds) {
+            boundMinRow = Math.min(boundMinRow, activeBounds.minRow);
+            boundMaxRow = Math.max(boundMaxRow, activeBounds.maxRow);
+        }
+        multiSelections.forEach(s => {
+            boundMinRow = Math.min(boundMinRow, s.minRow);
+            boundMaxRow = Math.max(boundMaxRow, s.maxRow);
+        });
+
+        const hasSelection = boundMinRow !== Infinity;
+
+        rowNodes.forEach((rowNode, r) => {
+            const absoluteRow = r + state._listStartIndex;
+            const cellNodes = rowNode.children;
+            
+            // Fast path: Row completely outside selection
+            if (!hasSelection || absoluteRow < boundMinRow || absoluteRow > boundMaxRow) {
+                for (let i = 0; i < cellNodes.length; i++) {
+                    if (cellNodes[i].classList.contains('dt-cell-selected')) {
+                        cellNodes[i].classList.remove('dt-cell-selected');
+                    }
+                }
+                return;
+            }
+
+            for (let i = 0; i < cellNodes.length; i++) {
+                const isSelected = isCellSelected(absoluteRow, i);
+                const hasClass = cellNodes[i].classList.contains('dt-cell-selected');
+                if (isSelected && !hasClass) {
+                    cellNodes[i].classList.add('dt-cell-selected');
+                } else if (!isSelected && hasClass) {
+                    cellNodes[i].classList.remove('dt-cell-selected');
+                }
+            }
+        });
+    };
+
+    const updateStatus = () => {
+        let count = 0;
+        if (activeBounds) count += (activeBounds.maxRow - activeBounds.minRow + 1);
+        multiSelections.forEach(s => count += (s.maxRow - s.minRow + 1));
+        state.selectedRowCount = count;
+    };
+
+    const clearAllActive = (keepSelection = false) => {
+        if (!keepSelection) {
+            activeBounds = null;
+            startCell = null;
+            multiSelections = [];
+            applySelectionUI();
+            updateStatus();
+        }
+    };
+
+    const startSelect = (row, col, e) => {
+        const alreadySelected = isCellSelected(row, col);
+        if (e.shiftKey && startCell) {
+            activeBounds = {
+                minRow: Math.min(startCell.row, row),
+                maxRow: Math.max(startCell.row, row),
+                minCol: Math.min(startCell.col, col),
+                maxCol: Math.max(startCell.col, col)
+            };
+        } else {
+            if (!alreadySelected) {
+                if (!e.ctrlKey && !e.metaKey) {
+                    clearAllActive();
+                } else if (activeBounds) {
+                    multiSelections.push(activeBounds);
+                }
+                startCell = { row, col };
+                activeBounds = { minRow: row, maxRow: row, minCol: col, maxCol: col };
+            }
+            state.isSelecting = true;
+        }
+        applySelectionUI();
+        updateStatus();
+        container.focus();
+    };
+
+    const updateSelect = (row, col) => {
+        if (state.isSelecting && startCell) {
+            activeBounds = {
+                minRow: Math.min(startCell.row, row),
+                maxRow: Math.max(startCell.row, row),
+                minCol: Math.min(startCell.col, col),
+                maxCol: Math.max(startCell.col, col)
+            };
+            applySelectionUI();
+            updateStatus();
+        }
+    };
+
+    const endSelect = () => { state.isSelecting = false; };
+
+    const getSelectionBounds = () => {
+        if (!activeBounds) return null;
+        let minRow = activeBounds.minRow, maxRow = activeBounds.maxRow;
+        let minCol = activeBounds.minCol, maxCol = activeBounds.maxCol;
+        multiSelections.forEach(s => {
+            minRow = Math.min(minRow, s.minRow);
+            maxRow = Math.max(maxRow, s.maxRow);
+            minCol = Math.min(minCol, s.minCol);
+            maxCol = Math.max(maxCol, s.maxCol);
+        });
+        return { minRow, maxRow, minCol, maxCol };
+    };
+
+    const deleteSelected = () => {
+        const bounds = getSelectionBounds();
+        if (!bounds) return;
+        
+        // This is a naive deletion that removes the bounding box rows entirely.
+        // A complete implementation might filter row by row checking multi-selections.
+        const rMin = bounds.minRow, rMax = bounds.maxRow;
+        const newList = state.list.filter((_, i) => !(i >= rMin && i <= rMax));
+        state.list = newList;
+        clearAllActive();
+    };
+
+    return {
+        applySelectionUI,
+        clearAllActive,
+        startSelect,
+        updateSelect,
+        endSelect,
+        deleteSelected,
+        getSelectionBounds
+    };
+};

test/correctness.spec.js

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test';
+
+test('DataTable data correctness test', async ({ page }) => {
+    page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
+    await page.goto('/test/index.html');
+    await page.waitForTimeout(1000);
+    
+    // Check initial data
+    const initialData = await page.evaluate(() => {
+        const firstRow = document.querySelector('.dt-body-row');
+        const cells = firstRow.querySelectorAll('.dt-cell span');
+        return Array.from(cells).map(c => c.textContent);
+    });
+    console.log('Initial Row 1 Data:', initialData);
+    expect(initialData[0]).toBe('1'); // ID column
+
+    // Scroll down and check if data updates correctly
+    const scrolledData = await page.evaluate(async () => {
+        const dt = document.getElementById('myTable');
+        const scrollEl = dt.querySelector('.dt-main');
+        scrollEl.scrollTop = 2000; // Scroll past buffer
+        scrollEl.dispatchEvent(new Event('scroll')); // Force trigger
+        await new Promise(r => setTimeout(r, 200));
+        
+        const firstRow = document.querySelector('.dt-body-row');
+        const cells = firstRow.querySelectorAll('.dt-cell span');
+        return {
+            scrollTop: scrollEl.scrollTop,
+            listStartIndex: dt.state._listStartIndex,
+            row1Data: Array.from(cells).map(c => c.textContent)
+        };
+    });
+    
+    console.log('Scrolled Data:', JSON.stringify(scrolledData, null, 2));
+    
+    // If scrolling worked, listStartIndex should be around 2000 / 40 = 50
+    expect(scrolledData.listStartIndex).toBeGreaterThan(30);
+    // The ID of the first visible row should match listStartIndex + 1 (since our mock data id is i+1)
+    expect(parseInt(scrolledData.row1Data[0])).toBe(scrolledData.listStartIndex + 1);
+});

test/minimal_perf.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script>
+        window.__DT_PERF_MODE__ = true;
+    </script>
+    <script type="module">
+        import { Component, RefreshState } from '@web/state';
+        import '../src/index.js';
+
+        window.startTest = async () => {
+            const fields = Array.from({length: 10}, (_, i) => ({
+                id: 'col' + i,
+                name: 'Column ' + i,
+                width: 150
+            }));
+
+            const data = Array.from({length: 10000}, (_, i) => {
+                const row = { id: i };
+                fields.forEach(f => row[f.id] = `Row ${i} ${f.name}`);
+                return row;
+            });
+            
+            const div = document.createElement('div');
+            div.setAttribute('style', 'height: 400px; width: 800px; border: 1px solid red');
+            div.innerHTML = '<DataTable id="dt" style="display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden"></DataTable>';
+            document.body.appendChild(div);
+            
+            RefreshState(document.body);
+            
+            const dt = document.getElementById('dt');
+            dt.state.fields = fields;
+            dt.state.list = data;
+            
+            await new Promise(r => setTimeout(r, 500));
+            
+            const scrollTarget = dt.querySelector('.dt-main');
+            console.log('root clientHeight:', scrollTarget.clientHeight);
+            console.log('root scrollHeight:', scrollTarget.scrollHeight);
+            
+            for (let i = 0; i < 100; i++) {
+                scrollTarget.scrollTop += 200;
+                scrollTarget.dispatchEvent(new Event('scroll'));
+                await new Promise(r => setTimeout(r, 10)); 
+            }
+            
+            return JSON.parse(JSON.stringify(dt.state.perf));
+        };
+    </script>
+</head>
+<body></body>
+</html>

test/minimal_perf.spec.js

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test('Minimal DataTable performance test', async ({ page }) => {
+    page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
+    page.on('pageerror', err => console.log('PAGE ERROR:', err));
+    await page.goto('/test/minimal_perf.html');
+    await page.waitForTimeout(1000);
+    const result = await page.evaluate(async () => {
+        const perf = await window.startTest();
+        return {
+            perf,
+            stPerf: window.__stPerf
+        };
+    });
+    console.log('Final Performance Stats:', JSON.stringify(result, null, 2));
+    expect(result.perf.scrollCount).toBeGreaterThan(0);
+});