kodjo/MyFastHtml
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed performance issues by creating a dedicated store for dataframe and optimizing

Browse Source
This commit is contained in:
Kodjo Sossouvi
2026-02-11 22:09:08 +01:00
parent 520a8914fc
commit fe322300c1
4 changed files with 65 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/myfasthtml/assets/datagrid/datagrid.js
View File

@@ -638,10 +638,17 @@ function updateDatagridSelection(datagridId) {
if (wrapper) wrapper.removeAttribute('mf-no-tooltip');
// Clear browser text selection to prevent stale ranges from reappearing
window.getSelection()?.removeAllRanges();
// But skip if an input/textarea/contenteditable has focus (would clear text cursor)
if (!document.activeElement?.closest('input, textarea, [contenteditable]')) {
window.getSelection()?.removeAllRanges();
}
// OPTIMIZATION: scope to table instead of scanning the entire document
const table = document.getElementById(`t_${datagridId}`);
const searchRoot = table ?? document;
// Clear previous selections and drag preview
document.querySelectorAll('.dt2-selected-focus, .dt2-selected-cell, .dt2-selected-row, .dt2-selected-column, .dt2-drag-preview, .dt2-selection-border-top, .dt2-selection-border-bottom, .dt2-selection-border-left, .dt2-selection-border-right').forEach((element) => {
searchRoot.querySelectorAll('.dt2-selected-focus, .dt2-selected-cell, .dt2-selected-row, .dt2-selected-column, .dt2-drag-preview, .dt2-selection-border-top, .dt2-selection-border-bottom, .dt2-selection-border-left, .dt2-selection-border-right').forEach((element) => {
element.classList.remove('dt2-selected-focus', 'dt2-selected-cell', 'dt2-selected-row', 'dt2-selected-column', 'dt2-drag-preview', 'dt2-selection-border-top', 'dt2-selection-border-bottom', 'dt2-selection-border-left', 'dt2-selection-border-right');
element.style.userSelect = '';
});
@@ -669,7 +676,7 @@ function updateDatagridSelection(datagridId) {
}
} else if (selectionType === 'column') {
// Select all elements in the specified column
document.querySelectorAll(`[data-col="${elementId}"]`).forEach((columnElement) => {
searchRoot.querySelectorAll(`[data-col="${elementId}"]`).forEach((columnElement) => {
columnElement.classList.add('dt2-selected-column');
});
} else if (selectionType === 'range') {
@@ -721,6 +728,9 @@ function getCellId(event) {
return {cell_id: null};
}
// OPTIMIZATION: Cache of highlighted cells per grid to avoid querySelectorAll on every animation frame
const _dragHighlightCache = new Map();
/**
* Highlight the drag selection range in real time during a mousedown>mouseup drag.
* Called by mouse.js on each animation frame while dragging.
@@ -765,16 +775,19 @@ function highlightDatagridDragRange(event, combination, mousedownResult) {
if (isNaN(startCol) || isNaN(startRow) || isNaN(endCol) || isNaN(endRow)) return;
// Clear previous selection and drag preview within this table
table.querySelectorAll('.dt2-drag-preview, .dt2-selected-cell, .dt2-selected-row, .dt2-selected-column, .dt2-selected-focus, .dt2-selection-border-top, .dt2-selection-border-bottom, .dt2-selection-border-left, .dt2-selection-border-right')
.forEach(c => c.classList.remove('dt2-drag-preview', 'dt2-selected-cell', 'dt2-selected-row', 'dt2-selected-column', 'dt2-selected-focus', 'dt2-selection-border-top', 'dt2-selection-border-bottom', 'dt2-selection-border-left', 'dt2-selection-border-right'));
// OPTIMIZATION: Clear only previously highlighted cells instead of querySelectorAll on all table cells
const prevHighlighted = _dragHighlightCache.get(gridId);
if (prevHighlighted) {
prevHighlighted.forEach(c => c.classList.remove('dt2-drag-preview', 'dt2-selected-cell', 'dt2-selected-row', 'dt2-selected-column', 'dt2-selected-focus', 'dt2-selection-border-top', 'dt2-selection-border-bottom', 'dt2-selection-border-left', 'dt2-selection-border-right'));
}
// Apply preview to all cells in the rectangular range
// Apply preview to all cells in the rectangular range and track them
const minCol = Math.min(startCol, endCol);
const maxCol = Math.max(startCol, endCol);
const minRow = Math.min(startRow, endRow);
const maxRow = Math.max(startRow, endRow);
const newHighlighted = [];
for (let col = minCol; col <= maxCol; col++) {
for (let row = minRow; row <= maxRow; row++) {
const cell = document.getElementById(`tcell_${gridId}-${col}-${row}`);
@@ -784,7 +797,9 @@ function highlightDatagridDragRange(event, combination, mousedownResult) {
if (row === maxRow) cell.classList.add('dt2-selection-border-bottom');
if (col === minCol) cell.classList.add('dt2-selection-border-left');
if (col === maxCol) cell.classList.add('dt2-selection-border-right');
newHighlighted.push(cell);
}
}
}
_dragHighlightCache.set(gridId, newHighlighted);
}