cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-19 22:24:11 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

perf(cuesheet): add temporary first-render metrics scaffold

Browse Source 
Adds a dev-only, self-contained instrumentation module under
common/devtools/cuesheet-metrics to measure the first-render (mount) cost
of virtualised cuesheet rows, so scroll-performance changes can be backed
by before/after numbers.

- Console-only API on window.__cuesheetPerf (deterministic scroll benchmark
  + manual start/stop), gated by isDev && ?perf=1, runtime-inert in prod.
- Whole-row mount probe plus per-subsystem attribution: colour calc,
  getVisibleCells, AutoTextarea autosize, Tooltip portal mount,
  useReactiveTextInput hotkey-handler init; FPS/long-frame timing.
- All edits to existing files tagged // PERF-METRICS for a one-pass teardown.

Temporary: to be deleted once the optimizations are proven.
This commit is contained in:
Claude
2026-06-15 20:17:01 +00:00
parent c238147b75
commit eab63e838d
12 changed files with 437 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
+21 -18
View File
@@ -5,6 +5,7 @@ import { CSSProperties, memo, useMemo } from 'react';
import { IoEllipsisHorizontal } from 'react-icons/io5';
import IconButton from '../../../../common/components/buttons/IconButton';
import { timeSync, useMountProbe } from '../../../../common/devtools/cuesheet-metrics/usePerfMark'; // PERF-METRICS
import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
import { AppMode } from '../../../../ontimeConfig';
@@ -56,25 +57,29 @@ function EventRow({
const openMenu = useCuesheetTableMenu((store) => store.openMenu);
useMountProbe('EventRow', true); // PERF-METRICS
const { rowBgColour, backgroundColor, mutedText } = useMemo(() => {
const accessible = getAccessibleColour(colour);
const tmpColour = cssOrHexToColour(accessible.color) as RGBColour;
return timeSync('row.colourCalc', () => { // PERF-METRICS
const accessible = getAccessibleColour(colour);
const tmpColour = cssOrHexToColour(accessible.color) as RGBColour;
let rowBgColour: string | undefined;
if (isLoaded) {
rowBgColour = '#087A27'; // $active-green
} else if (colour) {
const accessibleBg = cssOrHexToColour(accessible.backgroundColor);
if (accessibleBg !== null) {
rowBgColour = colourToHex({ ...accessibleBg, alpha: accessibleBg.alpha * 0.25 });
let rowBgColour: string | undefined;
if (isLoaded) {
rowBgColour = '#087A27'; // $active-green
} else if (colour) {
const accessibleBg = cssOrHexToColour(accessible.backgroundColor);
if (accessibleBg !== null) {
rowBgColour = colourToHex({ ...accessibleBg, alpha: accessibleBg.alpha * 0.25 });
}
}
}
return {
rowBgColour,
backgroundColor: accessible.backgroundColor,
mutedText: colourToHex({ ...tmpColour, alpha: tmpColour.alpha * 0.8 }),
};
return {
rowBgColour,
backgroundColor: accessible.backgroundColor,
mutedText: colourToHex({ ...tmpColour, alpha: tmpColour.alpha * 0.8 }),
};
}); // PERF-METRICS
}, [colour, isLoaded]);
return (
@@ -117,9 +122,7 @@ function EventRow({
{eventIndex}
</td>
)}
{table
.getRow(rowId)
.getVisibleCells()
{timeSync('row.getVisibleCells', () => table.getRow(rowId).getVisibleCells()) // PERF-METRICS
.map((cell) => {
return (
<td