add loading time to plots

gabrielburnworth · gabrielburnworth · commit 76ee0fcb19d4 · 2026-06-16T16:41:44.000-07:00
diff --git a/scripts/ci/combine-render-images b/scripts/ci/combine-render-images
@@ -19,6 +19,7 @@ const fpsSamplesName = requiredEnv('FPS_SAMPLES_NAME');
 const sceneMetricsName = requiredEnv('SCENE_METRICS_NAME');
 const feCoverageName = requiredEnv('FE_COVERAGE_NAME');
 const fpsHistoryName = requiredEnv('FPS_HISTORY');
+const loadDurationName = requiredEnv('LOAD_DURATION_NAME');
 const renderImageScale = Number(process.env.COMBINED_RENDER_IMAGE_SCALE || 3);
 if (!Number.isFinite(renderImageScale) || renderImageScale <= 0) {
     console.error('COMBINED_RENDER_IMAGE_SCALE must be a positive number');
@@ -74,7 +75,7 @@ const rows = [
     [
         ['fe coverage', imagePath(feCoverageName)],
         ['fps history', imagePath(fpsHistoryName)],
-        [],
+        ['load duration', imagePath(loadDurationName)],
     ],
 ];
 
diff --git a/scripts/ci/render-env b/scripts/ci/render-env
@@ -6,6 +6,7 @@
 : "${SCENE_METRICS_NAME:=scene_metrics}"
 : "${CHOSEN_METRICS:=${SCENE_METRICS_NAME}_${CHOSEN_NAME}}"
 : "${FPS_HISTORY:=fps_history}"
+: "${LOAD_DURATION_NAME:=load_duration}"
 : "${COMBINED_RENDER_IMAGE:=render_summary}"
 : "${COMBINED_RENDER_IMAGE_SCALE:=3}"
 : "${FE_COVERAGE_NAME:=fe_coverage}"
diff --git a/scripts/ci/run-playwright-render b/scripts/ci/run-playwright-render
@@ -134,6 +134,7 @@ while IFS=$'\034' read -r -u 3 name mode url actions state roi; do
     echo "${fps_output}"
 
     fps_value=$(echo "${fps_output}" | awk -F= '/^FPS_VALUE=/{print $2; exit}')
+    load_duration=$(echo "${fps_output}" | awk -F= '/^LOAD_DURATION=/{print $2; exit}')
     scene_metrics=$(echo "${fps_output}" | awk -F= '/^SCENE_METRICS=/{print $2; exit}')
     if ! valid_scene_metrics "$scene_metrics"; then
       echo "Missing scene metrics for ${url}"
@@ -146,6 +147,7 @@ while IFS=$'\034' read -r -u 3 name mode url actions state roi; do
 
     if [ "$name" = "${CHOSEN_NAME}" ]; then
       echo "FPS_VALUE=${fps_value}" >> "$GITHUB_ENV"
+      echo "LOAD_DURATION=${load_duration}" >> "$GITHUB_ENV"
       echo "SCENE_METRICS=${scene_metrics}" >> "$GITHUB_ENV"
       chosen_seen=true
     fi
diff --git a/scripts/ci/test_python_scripts.py b/scripts/ci/test_python_scripts.py
@@ -68,10 +68,10 @@ def test_previous_fps_value_reads_latest_history_row(self):
         history_name = f"fps_history_test_{os.getpid()}"
         path = Path("/tmp") / f"{history_name}.csv"
         path.write_text(
-            "fps,% change\n"
-            "80,0.00\n"
-            "90,12.50\n"
-            "100,11.11\n",
+            "fps,% change,load duration,commit sha\n"
+            "80,0.00,5.00,old123\n"
+            "90,12.50,5.00,old123\n"
+            "100,11.11,5.00,old123\n",
         )
         try:
             code, stdout, stderr = run_script("previous-fps-value", env={
@@ -98,13 +98,14 @@ def test_track_fps_history_appends_csv(self):
         path = Path("/tmp") / f"{history_name}.csv"
         github_env = Path("/tmp") / f"github_env_track_test_{os.getpid()}"
         path.write_text(
-            "fps,% change,commit sha\n"
-            "100.00,0.00,old123\n")
+            "fps,% change,load duration,commit sha\n"
+            "100.00,0.00,5.00,old123\n")
         try:
             code, stdout, stderr = run_script("track-fps-history", env={
                 "FPS_HISTORY": history_name,
                 "FPS_VALUE": "106.04",
                 "FALLBACK_FPS_VALUE": "100",
+                "LOAD_DURATION": "5.00",
                 "GITHUB_SHA": "0123456789abcdef",
                 "GITHUB_ENV": str(github_env),
                 "PATH": os.environ["PATH"],
@@ -117,9 +118,9 @@ def test_track_fps_history_appends_csv(self):
             self.assertEqual(stderr, "")
             self.assertEqual(
                 path.read_text(),
-                "fps,% change,commit sha\n"
-                "100.00,0.00,old123\n"
-                "106.04,6.04,0123456789\n")
+                "fps,% change,load duration,commit sha\n"
+                "100.00,0.00,5.00,old123\n"
+                "106.04,6.04,5.00,0123456789\n")
             self.assertEqual(github_env.read_text(), "PERCENT_CHANGE=6.04\n")
         finally:
             path.unlink(missing_ok=True)
diff --git a/scripts/ci/track-fps-history b/scripts/ci/track-fps-history
@@ -7,10 +7,11 @@ import subprocess
 
 fps_history = os.environ["FPS_HISTORY"]
 fps_value = os.environ["FPS_VALUE"]
+load_duration = os.environ["LOAD_DURATION"]
 commit_sha = os.environ["GITHUB_SHA"][:10]
 github_env = os.environ["GITHUB_ENV"]
 csv_path = Path("/tmp") / f"{fps_history}.csv"
-csv_header = ["fps", "% change", "commit sha"]
+csv_header = ["fps", "% change", "load duration", "commit sha"]
 
 previous = subprocess.check_output(
     ["scripts/ci/previous-fps-value"],
@@ -35,4 +36,4 @@ if not csv_path.exists():
 
 with csv_path.open("a", newline="") as csv_file:
     writer = csv.writer(csv_file)
-    writer.writerow([fps_value, percent_change, commit_sha])
+    writer.writerow([fps_value, percent_change, load_duration, commit_sha])
diff --git a/scripts/fps.js b/scripts/fps.js
@@ -360,6 +360,7 @@ async function main() {
             throw new Error('Average post-load FPS was not a valid value');
         }
         console.log(`FPS_VALUE=${averagePostLoadSample.toFixed(2)}`);
+        console.log(`LOAD_DURATION=${sampleValues.find(s => !s.loading)?.elapsedSeconds.toFixed(2) || 'unknown'}`);
         const data = await page.evaluate(() => window.__scene_metrics);
         if (!data || data === 'undefined') {
             throw new Error('window.__scene_metrics was not available');
diff --git a/scripts/metric_plot.js b/scripts/metric_plot.js
@@ -66,6 +66,8 @@ function buildMetricPlotSvg(samples, options = {}) {
     const yMaxOverride = Number(options.yMax);
     const yMaxBaseline = Number(options.yMaxBaseline);
     const yTickInterval = Number(options.yTickInterval);
+    const xTickInterval = Number(options.xTickInterval);
+    const xGridInterval = Number(options.xGridInterval);
     const rightYMinOverride = Number(options.rightYMin);
     const rightYMaxBaseline = Number(options.rightYMaxBaseline);
     const rightYTickInterval = Number(options.rightYTickInterval);
@@ -84,6 +86,14 @@ function buildMetricPlotSvg(samples, options = {}) {
     if (!Number.isFinite(yTickInterval)) {
         throw new Error('yTickInterval is required');
     }
+    if (options.xTickInterval !== undefined
+        && (!Number.isFinite(xTickInterval) || xTickInterval <= 0)) {
+        throw new Error('xTickInterval must be a positive number');
+    }
+    if (options.xGridInterval !== undefined
+        && (!Number.isFinite(xGridInterval) || xGridInterval <= 0)) {
+        throw new Error('xGridInterval must be a positive number');
+    }
     if (hasRightAxis && ![
         rightYMinOverride,
         rightYMaxBaseline,
@@ -230,7 +240,18 @@ function buildMetricPlotSvg(samples, options = {}) {
             })
             .join('')
         : '';
-    const tickInterval = maxX <= 10 ? 1 : maxX <= 100 ? 10 : 100;
+    const tickInterval = Number.isFinite(xTickInterval)
+        ? xTickInterval
+        : maxX <= 10 ? 1 : maxX <= 100 ? 10 : 100;
+    const xGrid = Number.isFinite(xGridInterval)
+        ? Array.from({ length: Math.floor(maxX / xGridInterval) + 1 },
+            (_value, index) => {
+                const gridValue = index * xGridInterval;
+                const x = formatPoint(xFor(gridValue));
+                return `<line x1="${x}" y1="${margin.top}" x2="${x}" y2="${height - margin.bottom}" stroke="#d0d7de" />`;
+            })
+            .join('')
+        : '';
     const xTicks = Array.from({ length: Math.floor(maxX / tickInterval) + 1 },
         (_value, index) => {
             const tickValue = index * tickInterval;
@@ -242,10 +263,13 @@ function buildMetricPlotSvg(samples, options = {}) {
         })
         .join('');
     const firstLoaded = series[0]?.samples.find(({ loading }) => loading === false);
+    const loadedLabel = firstLoaded
+        ? escapeSvgText(`Loaded ${formatStat(firstLoaded.x)}s`)
+        : '';
     const loadedMarker = firstLoaded
         ? [
             `<line x1="${formatPoint(xFor(firstLoaded.x))}" y1="${margin.top}" x2="${formatPoint(xFor(firstLoaded.x))}" y2="${height - margin.bottom}" stroke="#f97316" stroke-width="2" stroke-dasharray="5 4" />`,
-            `<text x="${formatPoint(xFor(firstLoaded.x) + 6)}" y="${margin.top + 16}" fill="#c2410c" font-family="Arial, sans-serif" font-size="12" font-weight="700">Loaded</text>`,
+            `<text x="${formatPoint(xFor(firstLoaded.x) + 6)}" y="${margin.top + 16}" fill="#c2410c" font-family="Arial, sans-serif" font-size="12" font-weight="700">${loadedLabel}</text>`,
         ].join('')
         : '';
     const averageValue = Number(options.averageValue);
@@ -284,6 +308,7 @@ function buildMetricPlotSvg(samples, options = {}) {
     <text x="${margin.left}" y="28" fill="#24292f" font-family="Arial, sans-serif" font-size="20" font-weight="700">${title}</text>
     ${legend}
     ${grid}
+    ${xGrid}
     <line x1="${margin.left}" y1="${margin.top}" x2="${margin.left}" y2="${height - margin.bottom}" stroke="#8c959f" />
     ${hasRightAxis ? `<line x1="${width - margin.right}" y1="${margin.top}" x2="${width - margin.right}" y2="${height - margin.bottom}" stroke="${rightAxisColor}" stroke-width="2" />` : ''}
     ${rightAxisTicks}
@@ -413,7 +438,7 @@ const inferCsvPlot = ({ headers, rows }, filename = '') => {
             yMin: 0,
             yMaxBaseline: 200,
             yTickInterval: 100,
-            decimalValues: true,
+            decimalValues: false,
             samples: rows.map((row, index) => sampleFor(row, index, 'fps')),
             latestCommitSha: latestCommitShaFor(rows, ['fps']),
         };
@@ -464,6 +489,8 @@ const inferCsvPlot = ({ headers, rows }, filename = '') => {
         return {
             title: title(basename, 'FPS samples'),
             xLabel: xHeader ? 'Seconds' : 'Samples',
+            xTickInterval: xHeader ? 1 : undefined,
+            xGridInterval: xHeader ? 1 : undefined,
             yMin: 0,
             yMaxBaseline: 200,
             yTickInterval: 100,
@@ -478,9 +505,11 @@ const inferCsvPlot = ({ headers, rows }, filename = '') => {
 };
 
 const buildCsvPlotSvg = (content, options = {}) => {
-    const inferred = inferCsvPlot(parseCsv(content), options.filename);
+    const inferred = options.inferred || inferCsvPlot(parseCsv(content), options.filename);
     const { latestCommitSha, ...plotOptions } = inferred;
-    const svg = buildMetricPlotSvg(inferred.samples, { ...plotOptions, ...options });
+    const svgOptions = { ...options };
+    delete svgOptions.inferred;
+    const svg = buildMetricPlotSvg(inferred.samples, { ...plotOptions, ...svgOptions });
     return addLatestCommitSha(svg, latestCommitSha);
 };
 
@@ -502,6 +531,36 @@ async function saveCsvPlot(browser, csvPath, destination, options = {}) {
     }
 }
 
+async function saveLoadDurationPlot(browser, csvPath, destination) {
+    const content = fs.readFileSync(csvPath, 'utf8');
+    const { headers, rows } = parseCsv(content);
+    if (
+        !headers.includes('fps')
+        || !headers.includes('% change')
+        || !headers.includes('load duration')
+        || !rows.some(row => Number.isFinite(Number(row['load duration'])))
+    ) {
+        return undefined;
+    }
+
+    await saveCsvPlot(browser, csvPath, destination, {
+        inferred: {
+            title: 'Load duration',
+            xLabel: 'Runs',
+            yMin: 0,
+            yMaxBaseline: 10,
+            yTickInterval: 1,
+            decimalValues: true,
+            samples: rows.map((row, index) => ({
+                x: index,
+                value: Number(row['load duration']),
+            })),
+            latestCommitSha: latestCommitShaFor(rows, ['load duration']),
+        },
+    });
+    return destination;
+}
+
 function printUsage() {
     console.log([
         'Usage: bun scripts/metric_plot.js <csv_path> [plot_path]',
@@ -538,6 +597,13 @@ async function main() {
     try {
         await saveCsvPlot(browser, csvPath, destination);
         console.log(`CSV_PLOT=${destination}`);
+        const loadDurationName = process.env.LOAD_DURATION_NAME || 'load_duration';
+        const loadDurationDestination = path.join('/tmp', `${loadDurationName}.png`);
+        const loadDurationPlot = await saveLoadDurationPlot(
+            browser, csvPath, loadDurationDestination);
+        if (loadDurationPlot) {
+            console.log(`CSV_PLOT=${loadDurationPlot}`);
+        }
     } finally {
         await browser.close();
     }
@@ -550,6 +616,7 @@ module.exports = {
     inferCsvPlot,
     parseCsv,
     saveCsvPlot,
+    saveLoadDurationPlot,
     saveMetricPlot,
 };
 

Original file line number	Diff line number	Diff line change
`@@ -360,6 +360,7 @@ async function main() {`
`360`	`360`	`throw new Error('Average post-load FPS was not a valid value');`
`361`	`361`	`}`
`362`	`362`	console.log(`FPS_VALUE=${averagePostLoadSample.toFixed(2)}`);
	`363`	+ console.log(`LOAD_DURATION=${sampleValues.find(s => !s.loading)?.elapsedSeconds.toFixed(2) \|\| 'unknown'}`);
`363`	`364`	`const data = await page.evaluate(() => window.__scene_metrics);`
`364`	`365`	`if (!data \|\| data === 'undefined') {`
`365`	`366`	`throw new Error('window.__scene_metrics was not available');`