design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dees-table): stabilize live updates by reusing row DOM and avoiding redundant layout recalculations

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-14 13:58:00 +00:00
parent 05e74cbe2e
commit 3e86ba034b
4 changed files with 274 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
ts_web/elements/00group-dataview/dees-table/dees-table.ts
View File

@@ -293,9 +293,9 @@ export class DeesTable<T> extends DeesElement {
private accessor __floatingActive: boolean = false;
// ─── Flash-on-update state (only populated when highlightUpdates === 'flash') ──
/** rowId → set of colKey strings currently flashing. */
/** rowId → (colKey → flash token) for cells currently flashing. */
@state()
private accessor __flashingCells: Map<string, Set<string>> = new Map();
private accessor __flashingCells: Map<string, Map<string, number>> = new Map();
/** rowId → (colKey → last-seen resolved cell value). Populated per diff pass. */
private __prevSnapshot?: Map<string, Map<string, unknown>>;
@@ -303,7 +303,7 @@ export class DeesTable<T> extends DeesElement {
/** Single shared timer that clears __flashingCells after highlightDuration ms. */
private __flashClearTimer?: ReturnType<typeof setTimeout>;
/** Monotonic counter bumped each flash batch so directives.keyed recreates the cell node and restarts the animation. */
/** Monotonic counter bumped per flash batch so only changed cells restart their animation. */
private __flashTick: number = 0;
/** One-shot console.warn gate for missing rowKey in flash mode. */
@@ -317,7 +317,7 @@ export class DeesTable<T> extends DeesElement {
columns: any;
augment: boolean;
displayFunction: any;
data: any;
displayShapeKey: string;
out: Column<T>[];
};
private __memoViewData?: {
@@ -329,8 +329,13 @@ export class DeesTable<T> extends DeesElement {
effectiveColumns: Column<T>[];
out: T[];
};
/** Tracks the (data, columns) pair that `determineColumnWidths()` last sized for. */
private __columnsSizedFor?: { data: any; columns: any };
/** Tracks the layout inputs that `determineColumnWidths()` last sized for. */
private __columnsSizedFor?: {
effectiveColumns: Column<T>[];
showSelectionCheckbox: boolean;
inRowActionCount: number;
table: HTMLTableElement;
};
// ─── Virtualization state ────────────────────────────────────────────
/** Estimated row height (px). Measured once from the first rendered row. */
@@ -409,15 +414,7 @@ export class DeesTable<T> extends DeesElement {
const view: T[] = (this as any)._lastViewData ?? [];
const item = view.find((r) => this.getRowId(r) === this.__focusedCell!.rowId);
if (!item) return;
const allCols: Column<T>[] =
Array.isArray(this.columns) && this.columns.length > 0
? computeEffectiveColumnsFn(
this.columns,
this.augmentFromDisplayFunction,
this.displayFunction,
this.data
)
: computeColumnsFromDisplayFunctionFn(this.displayFunction, this.data);
const allCols = this.__getEffectiveColumns();
const col = allCols.find((c) => String(c.key) === this.__focusedCell!.colKey);
if (!col || !this.__isColumnEditable(col)) return;
eventArg.preventDefault();
@@ -469,15 +466,24 @@ export class DeesTable<T> extends DeesElement {
* that affect it. Avoids re-running `computeEffectiveColumnsFn` /
* `computeColumnsFromDisplayFunctionFn` on every Lit update.
*/
private __getDisplayFunctionShapeKey(): string {
if (!this.data || this.data.length === 0) return '';
const firstTransformedItem = this.displayFunction(this.data[0]) ?? {};
return Object.keys(firstTransformedItem).join('\u0000');
}
private __getEffectiveColumns(): Column<T>[] {
const usingColumns = Array.isArray(this.columns) && this.columns.length > 0;
const displayShapeKey = !usingColumns || this.augmentFromDisplayFunction
? this.__getDisplayFunctionShapeKey()
: '';
const cache = this.__memoEffectiveCols;
if (
cache &&
cache.columns === this.columns &&
cache.augment === this.augmentFromDisplayFunction &&
cache.displayFunction === this.displayFunction &&
cache.data === this.data
cache.displayShapeKey === displayShapeKey
) {
return cache.out;
}
@@ -493,7 +499,7 @@ export class DeesTable<T> extends DeesElement {
columns: this.columns,
augment: this.augmentFromDisplayFunction,
displayFunction: this.displayFunction,
data: this.data,
displayShapeKey,
out,
};
return out;
@@ -543,6 +549,9 @@ export class DeesTable<T> extends DeesElement {
public render(): TemplateResult {
const effectiveColumns = this.__getEffectiveColumns();
const viewData = this.__getViewData(effectiveColumns);
const headerActions = this.getActionsForType('header');
const footerActions = this.getActionsForType('footer');
const inRowActions = this.getActionsForType('inRow');
(this as any)._lastViewData = viewData;
// Virtualization slice — only the rows in `__virtualRange` actually
@@ -572,29 +581,22 @@ export class DeesTable<T> extends DeesElement {
<div class="heading heading2">${this.heading2}</div>
</div>
<div class="headerActions">
${directives.resolveExec(async () => {
const resultArray: TemplateResult[] = [];
for (const action of this.dataActions) {
if (!action.type?.includes('header')) continue;
resultArray.push(
html`<div
class="headerAction"
@click=${() => {
action.actionFunc({
item: this.selectedDataRow,
table: this,
});
}}
>
${action.iconName
? html`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
${action.name}`
: action.name}
</div>`
);
}
return resultArray;
})}
${headerActions.map(
(action) => html`<div
class="headerAction"
@click=${() => {
action.actionFunc({
item: this.selectedDataRow,
table: this,
});
}}
>
${action.iconName
? html`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
${action.name}`
: action.name}
</div>`
)}
</div>
</div>
<div class="headingSeparation"></div>
@@ -658,11 +660,11 @@ export class DeesTable<T> extends DeesElement {
: html``}
${directives.repeat(
renderRows,
(itemArg, sliceIdx) => `${this.getRowId(itemArg)}::${renderStart + sliceIdx}`,
(itemArg) => this.getRowId(itemArg),
(itemArg, sliceIdx) => {
const rowIndex = renderStart + sliceIdx;
const rowId = this.getRowId(itemArg);
const flashSet = this.__flashingCells.get(rowId);
const flashTokens = this.__flashingCells.get(rowId);
return html`
<tr
data-row-idx=${rowIndex}
@@ -694,7 +696,8 @@ export class DeesTable<T> extends DeesElement {
const isEditing =
this.__editingCell?.rowId === rowId &&
this.__editingCell?.colKey === editKey;
const isFlashing = !!flashSet?.has(editKey);
const flashToken = flashTokens?.get(editKey);
const isFlashing = flashToken !== undefined;
const useFlashBorder = isFlashing && !!col.flashBorder;
const cellClasses = [
isEditable ? 'editable' : '',
@@ -720,7 +723,7 @@ export class DeesTable<T> extends DeesElement {
>
${isFlashing
? directives.keyed(
`${rowId}:${editKey}:${this.__flashTick}`,
`${rowId}:${editKey}:${flashToken}`,
innerHtml
)
: innerHtml}
@@ -728,11 +731,11 @@ export class DeesTable<T> extends DeesElement {
`;
})}
${(() => {
if (this.dataActions && this.dataActions.length > 0) {
if (inRowActions.length > 0) {
return html`
<td class="actionsCol">
<div class="actionsContainer">
${this.getActionsForType('inRow').map(
${inRowActions.map(
(actionArg) => html`
<div
class="action"
@@ -780,29 +783,22 @@ export class DeesTable<T> extends DeesElement {
selected
</div>
<div class="footerActions">
${directives.resolveExec(async () => {
const resultArray: TemplateResult[] = [];
for (const action of this.dataActions) {
if (!action.type?.includes('footer')) continue;
resultArray.push(
html`<div
class="footerAction"
@click=${() => {
action.actionFunc({
item: this.selectedDataRow,
table: this,
});
}}
>
${action.iconName
? html`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
${action.name}`
: action.name}
</div>`
);
}
return resultArray;
})}
${footerActions.map(
(action) => html`<div
class="footerAction"
@click=${() => {
action.actionFunc({
item: this.selectedDataRow,
table: this,
});
}}
>
${action.iconName
? html`<dees-icon .iconSize=${14} .icon=${action.iconName}></dees-icon>
${action.name}`
: action.name}
</div>`
)}
</div>
</div>
</dees-tile>
@@ -1160,7 +1156,7 @@ export class DeesTable<T> extends DeesElement {
/**
* Measures the height of the first rendered body row and stores it for
* subsequent virtualization math. Idempotent — only measures once per
* `data`/`columns` pair (cleared in `updated()` when those change).
* rendered table layout (cleared in `updated()` when that layout changes).
*/
private __measureRowHeight() {
if (!this.virtualized || this.__rowHeightMeasured) return;
@@ -1426,20 +1422,16 @@ export class DeesTable<T> extends DeesElement {
if (newlyFlashing.size === 0) return;
// Merge with any in-flight flashes from a rapid second update so a cell
// that changes twice before its animation ends gets a single clean
// restart (via __flashTick / directives.keyed) instead of stacking.
// that changes twice before its animation ends gets a clean restart,
// while unrelated cells keep their existing DOM subtree.
const flashToken = ++this.__flashTick;
const nextFlashingCells = new Map(this.__flashingCells);
for (const [rowId, cols] of newlyFlashing) {
const existing = this.__flashingCells.get(rowId);
if (existing) {
for (const c of cols) existing.add(c);
} else {
this.__flashingCells.set(rowId, cols);
}
const existing = new Map(nextFlashingCells.get(rowId) ?? []);
for (const colKey of cols) existing.set(colKey, flashToken);
nextFlashingCells.set(rowId, existing);
}
this.__flashTick++;
// Reactivity nudge: we've mutated the Map in place, so give Lit a fresh
// reference so the @state change fires for render.
this.__flashingCells = new Map(this.__flashingCells);
this.__flashingCells = nextFlashingCells;
if (this.__flashClearTimer) clearTimeout(this.__flashClearTimer);
this.__flashClearTimer = setTimeout(() => {
this.__flashingCells = new Map();
@@ -1449,6 +1441,9 @@ export class DeesTable<T> extends DeesElement {
public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
super.updated(changedProperties);
const effectiveColumns = this.__getEffectiveColumns();
const currentTable = this.shadowRoot?.querySelector('table') ?? null;
const inRowActionCount = this.getActionsForType('inRow').length;
// Feed highlightDuration into the CSS variable so JS and CSS stay in
// sync via a single source of truth.
@@ -1456,15 +1451,23 @@ export class DeesTable<T> extends DeesElement {
this.style.setProperty('--dees-table-flash-duration', `${this.highlightDuration}ms`);
}
// Only re-measure column widths when the data or schema actually changed
// (or on first paint). `determineColumnWidths` is the single biggest
// first-paint cost — it forces multiple layout flushes per row.
const dataOrColsChanged =
!this.__columnsSizedFor ||
this.__columnsSizedFor.data !== this.data ||
this.__columnsSizedFor.columns !== this.columns;
if (dataOrColsChanged) {
this.__columnsSizedFor = { data: this.data, columns: this.columns };
// Only re-measure column widths when layout-affecting inputs changed or
// when a new <table> element was rendered after previously having none.
const columnLayoutChanged =
!!currentTable && (
!this.__columnsSizedFor ||
this.__columnsSizedFor.effectiveColumns !== effectiveColumns ||
this.__columnsSizedFor.showSelectionCheckbox !== this.showSelectionCheckbox ||
this.__columnsSizedFor.inRowActionCount !== inRowActionCount ||
this.__columnsSizedFor.table !== currentTable
);
if (currentTable && columnLayoutChanged) {
this.__columnsSizedFor = {
effectiveColumns,
showSelectionCheckbox: this.showSelectionCheckbox,
inRowActionCount,
table: currentTable,
};
this.determineColumnWidths();
// Force re-measure of row height; structure may have changed.
this.__rowHeightMeasured = false;
@@ -1502,7 +1505,7 @@ export class DeesTable<T> extends DeesElement {
if (
!this.fixedHeight &&
this.data.length > 0 &&
(this.__floatingActive || dataOrColsChanged)
(this.__floatingActive || columnLayoutChanged)
) {
this.__syncFloatingHeader();
}
@@ -1804,10 +1807,7 @@ export class DeesTable<T> extends DeesElement {
* Used by the modal helper to render human-friendly labels.
*/
private _lookupColumnByKey(key: string): Column<T> | undefined {
const usingColumns = Array.isArray(this.columns) && this.columns.length > 0;
const effective = usingColumns
? computeEffectiveColumnsFn(this.columns, this.augmentFromDisplayFunction, this.displayFunction, this.data)
: computeColumnsFromDisplayFunctionFn(this.displayFunction, this.data);
const effective = this.__getEffectiveColumns();
return effective.find((c) => String(c.key) === key);
}
@@ -2543,9 +2543,7 @@ export class DeesTable<T> extends DeesElement {
const view: T[] = (this as any)._lastViewData ?? [];
if (view.length === 0) return;
// Recompute editable columns from the latest effective set.
const allCols: Column<T>[] = Array.isArray(this.columns) && this.columns.length > 0
? computeEffectiveColumnsFn(this.columns, this.augmentFromDisplayFunction, this.displayFunction, this.data)
: computeColumnsFromDisplayFunctionFn(this.displayFunction, this.data);
const allCols = this.__getEffectiveColumns();
const editableCols = this.__editableColumns(allCols);
if (editableCols.length === 0) return;