fix(studio): the timeline scroll gate catches dropped frames in the virtualized view

Author: miguel-heygen

packages/studio/src/player/lib/timelineViewportBudgets.test.ts

@@ -19,6 +19,8 @@ describe("timeline viewport budgets", () => {
       interactionP95Ms: 50,
       constrainedInteractionP95Ms: 75,
       constrainedFrameIntervalP95Ms: 75,
+      ciVirtualizedInteractionP95Ms: 41.7,
+      ciVirtualizedFrameIntervalP95Ms: 25,
       longTaskLimitMs: 50,
       constrainedLongTaskLimitMs: 300,
       posterCoverageRatio: 0.9,

packages/studio/src/player/lib/timelineViewportBudgets.ts

@@ -28,6 +28,8 @@ export interface TimelineViewportBudgets {
   frameIntervalP95Ms: number;
   constrainedInteractionP95Ms: number;
   constrainedFrameIntervalP95Ms: number;
+  ciVirtualizedInteractionP95Ms: number;
+  ciVirtualizedFrameIntervalP95Ms: number;
   longTaskLimitMs: number;
   constrainedLongTaskLimitMs: number;
   memoryReturnToleranceRatio: number;
@@ -86,6 +88,8 @@ export const TIMELINE_VIEWPORT_BUDGETS: Readonly<TimelineViewportBudgets> = Obje
   frameIntervalP95Ms: 33.3,
   constrainedInteractionP95Ms: 75,
   constrainedFrameIntervalP95Ms: 75,
+  ciVirtualizedInteractionP95Ms: 41.7,
+  ciVirtualizedFrameIntervalP95Ms: 25,
   longTaskLimitMs: 50,
   constrainedLongTaskLimitMs: 300,
   memoryReturnToleranceRatio: 0.15,

packages/studio/tests/e2e/timeline-viewport-verdict.mjs

@@ -9,6 +9,24 @@ export function percentile(values, ratio) {
   return sorted[Math.min(sorted.length - 1, Math.ceil(sorted.length * ratio) - 1)];
 }
 
+/** The p95 pair a tier is held to; the CI virtualized arm has its own, tighter one. */
+export function responsivenessLimits(budgets, tier, rowVirtualization) {
+  if (tier === "primary")
+    return {
+      interactionLimitMs: budgets.interactionP95Ms,
+      frameIntervalLimitMs: budgets.frameIntervalP95Ms,
+    };
+  if (tier === "ci" && rowVirtualization === "on")
+    return {
+      interactionLimitMs: budgets.ciVirtualizedInteractionP95Ms,
+      frameIntervalLimitMs: budgets.ciVirtualizedFrameIntervalP95Ms,
+    };
+  return {
+    interactionLimitMs: budgets.constrainedInteractionP95Ms,
+    frameIntervalLimitMs: budgets.constrainedFrameIntervalP95Ms,
+  };
+}
+
 function assertSampleCount(expected, interactions, frameIntervals) {
   if (expected > 0 && interactions.length === expected && frameIntervals.length === expected)
     return;

packages/studio/tests/e2e/timeline-viewport-verdict.test.mjs

@@ -1,5 +1,11 @@
 import { describe, expect, it } from "vitest";
-import { gatePassed, judgeResponsiveness, percentile } from "./timeline-viewport-verdict.mjs";
+import { TIMELINE_VIEWPORT_BUDGETS } from "../../src/player/lib/timelineViewportBudgets";
+import {
+  gatePassed,
+  judgeResponsiveness,
+  percentile,
+  responsivenessLimits,
+} from "./timeline-viewport-verdict.mjs";
 
 const LIMITS = { samplesPerRun: 63, interactionLimitMs: 75, frameIntervalLimitMs: 75 };
 const FAST = 49;
@@ -69,6 +75,48 @@ describe("judgeResponsiveness", () => {
   });
 });
 
+describe("the CI virtualized arm's limits", () => {
+  const limits = {
+    samplesPerRun: 63,
+    ...responsivenessLimits(TIMELINE_VIEWPORT_BUDGETS, "ci", "on"),
+  };
+  // Two frames is a normal step, three a dropped frame; one frame is a normal interval, two a dropped one.
+  const steps = (count, normal, slow) =>
+    Array.from({ length: 5 }, (_, run) =>
+      Array.from({ length: 63 }, (_, step) => (run * 63 + step < count ? slow : normal)),
+    );
+  const interactionRuns = (count) =>
+    steps(count, 33.3, 50).map((interactions) => ({
+      interactions,
+      frameIntervals: interactions.map(() => 16.7),
+    }));
+  const frameRuns = (count) =>
+    steps(count, 16.7, 33.3).map((frameIntervals) => ({
+      interactions: frameIntervals.map(() => 33.3),
+      frameIntervals,
+    }));
+
+  it("fails 16 of 315 steps that drop a frame and passes 15", () => {
+    expect(judgeResponsiveness(interactionRuns(16), limits).passed).toBe(false);
+    expect(judgeResponsiveness(interactionRuns(15), limits).passed).toBe(true);
+  });
+
+  it("fails 16 of 315 frame intervals that drop a frame and passes 15", () => {
+    expect(judgeResponsiveness(frameRuns(16), limits).passed).toBe(false);
+    expect(judgeResponsiveness(frameRuns(15), limits).passed).toBe(true);
+  });
+
+  it("leaves the unvirtualized arm and the other constrained tiers at 75 ms", () => {
+    const loose = { interactionLimitMs: 75, frameIntervalLimitMs: 75 };
+    expect(responsivenessLimits(TIMELINE_VIEWPORT_BUDGETS, "ci", "off")).toEqual(loose);
+    expect(responsivenessLimits(TIMELINE_VIEWPORT_BUDGETS, "low-resource", "on")).toEqual(loose);
+    expect(responsivenessLimits(TIMELINE_VIEWPORT_BUDGETS, "primary", "on")).toEqual({
+      interactionLimitMs: 50,
+      frameIntervalLimitMs: 33.3,
+    });
+  });
+});
+
 describe("gatePassed", () => {
   const passing = {
     directScrollApproved: true,

packages/studio/tests/e2e/timeline-virtualization.mjs

@@ -23,7 +23,11 @@
  */
 import { platform, arch } from "node:os";
 import { launchStudioChrome } from "./chrome-executable.mjs";
-import { gatePassed, judgeResponsiveness } from "./timeline-viewport-verdict.mjs";
+import {
+  gatePassed,
+  judgeResponsiveness,
+  responsivenessLimits,
+} from "./timeline-viewport-verdict.mjs";
 
 const STUDIO_URL = process.env.STUDIO_URL;
 const PROFILE = process.env.TIMELINE_PROFILE || "dense-short";
@@ -291,10 +295,11 @@ try {
   }
 
   const runs = [];
-  const interactionLimitMs =
-    TIER === "primary" ? budgets.interactionP95Ms : budgets.constrainedInteractionP95Ms;
-  const frameIntervalLimitMs =
-    TIER === "primary" ? budgets.frameIntervalP95Ms : budgets.constrainedFrameIntervalP95Ms;
+  const { interactionLimitMs, frameIntervalLimitMs } = responsivenessLimits(
+    budgets,
+    TIER,
+    ROW_VIRTUALIZATION,
+  );
   for (let index = 0; index < budgets.warmupRuns + budgets.measuredRuns; index += 1) {
     const run = await collectRun(page);
     if (index >= budgets.warmupRuns) runs.push(run);