fix(cine): seed remounted render buffers during playback

Author: PaulHax

src/components/vtk/VtkBaseSliceRepresentation.vue

@@ -95,18 +95,22 @@ const cine = computed(() => getCineImage(imageID.value));
 // geometry; the mapper renders from this local image so two views can show
 // different frames without overwriting each other's pixels.
 const cineRender = shallowRef<CineRenderImage | null>(null);
-// Pending per-view buffer. Published to cineRender only after decoded pixels land.
+// Current per-view buffer. It may be attached before pixels are decoded so the
+// actor exists when the first frame lands after a rapid remount.
 let localCineRender: CineRenderImage | null = null;
+let localCineRenderHasFrame = false;
 
 watchEffect((onCleanup) => {
   const cineImage = cine.value;
   if (!cineImage) return;
   const local = createCineRenderImage(cineImage);
   localCineRender = local;
-  cineRender.value = null;
+  localCineRenderHasFrame = false;
+  cineRender.value = local;
   onCleanup(() => {
     if (localCineRender === local) {
       localCineRender = null;
+      localCineRenderHasFrame = false;
     }
     if (cineRender.value === local) {
       cineRender.value = null;
@@ -157,13 +161,17 @@ watch(
     cineImage
       .getFrame(frame)
       .then((decoded) => {
-        if (myToken !== frameToken) return;
         if (localCineRender !== target) return;
+        // During playback, a remounted view can request frames faster than a
+        // JPEG decode finishes. Seed an empty view with the first decoded frame
+        // so it does not stay black while newer requests are still in flight.
+        if (myToken !== frameToken && localCineRenderHasFrame) return;
         if (!copyDecodedFrameToRgb(decoded, target)) return;
+        localCineRenderHasFrame = true;
         target.dataArray.modified();
         target.imageData.modified();
         cineRender.value = target;
-        view.requestRender();
+        view.requestRender({ immediate: true });
       })
       .catch(() => {
         // getFrame already routed the error through reportError.

tests/specs/cine-rendering.e2e.ts

@@ -1,10 +1,63 @@
 import { Key } from 'webdriverio';
 import { volViewPage } from '../pageobjects/volview.page';
-import { CINE_US_DATASET } from './configTestUtils';
+import {
+  CINE_US_DATASET,
+  COLOR3D_JPEG_BASELINE_DICOM,
+} from './configTestUtils';
 import { openUrls } from './utils';
 
 const PLAY_CONTROLS = '.play-controls';
 const FRAME_LABEL = '.view-annotations .frame-label';
+const VIEW_SELECTOR = 'div[data-testid="vtk-view vtk-two-view"]';
+
+async function getFirstCineCanvasStats() {
+  return browser.execute((selector: string) => {
+    const views = Array.from(document.querySelectorAll(selector)).filter(
+      (view) => {
+        const rect = view.getBoundingClientRect();
+        return rect.width > 10 && rect.height > 10;
+      }
+    );
+    const canvas = views[0]?.querySelector(
+      'canvas'
+    ) as HTMLCanvasElement | null;
+    if (!canvas) return null;
+
+    const context = canvas.getContext('2d');
+    if (!context) return null;
+
+    const { width, height } = canvas;
+    if (width < 2 || height < 2) return { width, height, nonBlack: 0 };
+
+    const pixels = context.getImageData(0, 0, width, height).data;
+    let nonBlack = 0;
+    const stride = Math.max(4, Math.floor(pixels.length / 4000 / 4) * 4);
+
+    for (let i = 0; i < pixels.length; i += stride) {
+      if (pixels[i] > 5 || pixels[i + 1] > 5 || pixels[i + 2] > 5) {
+        nonBlack++;
+      }
+    }
+
+    return { width, height, nonBlack };
+  }, VIEW_SELECTOR);
+}
+
+async function waitForFirstCineCanvasToRender(timeout = 5000) {
+  await browser.waitUntil(
+    async () => {
+      const stats = await getFirstCineCanvasStats();
+      return (
+        !!stats && stats.width > 10 && stats.height > 10 && stats.nonBlack > 0
+      );
+    },
+    {
+      timeout,
+      interval: 50,
+      timeoutMsg: 'Expected cine canvas to stay non-black',
+    }
+  );
+}
 
 describe('VolView cine playback', () => {
   it('loads a multi-frame ultrasound and scrubs frames', async () => {
@@ -35,4 +88,25 @@ describe('VolView cine playback', () => {
     expect(after).toMatch(/^Frame: [1-8] \/ 8$/);
     expect(after).not.toBe(initialText);
   });
+
+  it('keeps rendering after repeated maximize toggles during playback', async () => {
+    await openUrls([COLOR3D_JPEG_BASELINE_DICOM]);
+
+    const playButton = $(`${PLAY_CONTROLS} .play-btn`);
+    await playButton.waitForDisplayed({ timeout: 10000 });
+    await playButton.click();
+
+    await $(VIEW_SELECTOR).waitForDisplayed({
+      timeout: 10000,
+    });
+    await waitForFirstCineCanvasToRender();
+
+    for (let i = 0; i < 12; i++) {
+      const firstView = $(VIEW_SELECTOR);
+      await firstView.waitForDisplayed({ timeout: 5000 });
+      await firstView.doubleClick();
+      await browser.pause(50);
+      await waitForFirstCineCanvasToRender(1500);
+    }
+  });
 });

tests/specs/configTestUtils.ts

@@ -88,6 +88,13 @@ export const CINE_US_DATASET = {
   name: 'US-MONO2-8-8x-echo.dcm',
 } as const;
 
+// 120-frame RGB ultrasound cine encoded as JPEG Baseline. This exercises the
+// async browser JPEG decode path used by common compressed ultrasound clips.
+export const COLOR3D_JPEG_BASELINE_DICOM = {
+  url: 'https://raw.githubusercontent.com/pydicom/pydicom-data/master/data_store/data/color3d_jpeg_baseline.dcm',
+  name: 'color3d_jpeg_baseline.dcm',
+} as const;
+
 export type DatasetResource = {
   url: string;
   name?: string;