Refactor: Modularize DataTable and manual DOM selection logic
This commit is contained in:
AI Engineer
parent
bff76354dc
commit
d45a815d55
169
src/index.js
169
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 */
|
||||
if (!window.__statePerformanceTelemetry) {
|
||||
window.__statePerformanceTelemetry = { scanCount: 0, reuseCount: 0, moveCount: 0 };
|
||||
}
|
||||
/* PERFORMANCE_TELEMETRY_END */
|
||||
const perf = createPerfMonitor();
|
||||
state.perf = perf.stats;
|
||||
|
||||
const selection = createSelectionManager(container, state);
|
||||
|
||||
const scroll = createScrollManager(container, state, (renderedCount) => {
|
||||
selection.applySelectionUI();
|
||||
});
|
||||
|
||||
container.refresh = () => {
|
||||
const start = performance.now()
|
||||
// Optimization: Expand the virtual viewport to 1.6x height to create a buffer
|
||||
// that prevents "white flashes" during extremely fast scrolling.
|
||||
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++
|
||||
Object.assign(state, {
|
||||
prevHeight: res.prevHeight, postHeight: res.postHeight,
|
||||
_listStartIndex: res.listStartIndex, _renderedList: res.renderedList
|
||||
})
|
||||
|
||||
const elapsed = performance.now() - start;
|
||||
state.perf.refreshTime += elapsed;
|
||||
state.perf.totalNodes += res.renderedList.length;
|
||||
const frameStart = perf.startFrame();
|
||||
scroll.refresh();
|
||||
perf.endFrame(frameStart, state._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.onScroll = () => {
|
||||
perf.onScroll();
|
||||
container.refresh();
|
||||
};
|
||||
|
||||
container.onItemUpdate = (index, node) => {
|
||||
// vs.update(index + (state._listStartIndex || 0), node)
|
||||
}
|
||||
container.onItemUpdate = (index, node) => scroll.updateRowHeight(index, node);
|
||||
|
||||
state.__watch('list', list => {
|
||||
state._listStartIndex = 0
|
||||
state._renderedList = vs.reset(list, container) || []
|
||||
setTimeout(() => { if (state.list === list) vs.init(list, container.refresh) })
|
||||
scroll.init();
|
||||
scroll.reset(list);
|
||||
})
|
||||
|
||||
state.__watch('fields', fields => {
|
||||
@ -72,44 +46,107 @@ Component.register('DataTable', container => {
|
||||
container.style.setProperty('--dt-grid-template', gridTemplate)
|
||||
})
|
||||
|
||||
container.onScroll = () => {
|
||||
state.perf.scrollCount++
|
||||
container.refresh()
|
||||
// Expose selection methods to template
|
||||
container.startSelect = selection.startSelect;
|
||||
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-header border-bottom bg-light sticky-top" style="z-index:10">
|
||||
<div class="dt-flex-row fw-bold text-muted small" style="height:40px">
|
||||
<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)'">
|
||||
<span $text="item.name" class="text-truncate"></span>
|
||||
<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-main flex-grow-1 overflow-auto" $onscroll="this.onScroll()" style="overflow-anchor:none; min-height: 0">
|
||||
<div class="dt-header border-bottom bg-light sticky-top" style="z-index:20">
|
||||
<div class="dt-row dt-header-row fw-bold text-muted small">
|
||||
<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 $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.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)'">
|
||||
<span $text="item[f.id] ?? ''" class="text-truncate"></span>
|
||||
<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 $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" index="fIdx"
|
||||
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 {
|
||||
background-color: #f8f9fa !important;
|
||||
.dt-body-row:hover {
|
||||
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>
|
||||
`))
|
||||
|
||||
43
src/perf.js
Normal file
43
src/perf.js
Normal file
@ -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}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
48
src/scroll.js
Normal file
48
src/scroll.js
Normal file
@ -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
|
||||
};
|
||||
};
|
||||
144
src/selection.js
Normal file
144
src/selection.js
Normal file
@ -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
|
||||
};
|
||||
};
|
||||
40
test/correctness.spec.js
Normal file
40
test/correctness.spec.js
Normal file
@ -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);
|
||||
});
|
||||
52
test/minimal_perf.html
Normal file
52
test/minimal_perf.html
Normal file
@ -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>
|
||||
17
test/minimal_perf.spec.js
Normal file
17
test/minimal_perf.spec.js
Normal file
@ -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);
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user