fix(cine): persist current frame

Author: PaulHax

src/io/state-file/schema.ts

@@ -22,6 +22,7 @@ import type {
   LayersConfig,
   SegmentGroupConfig,
   VolumeColorConfig,
+  CinePlaybackViewConfig,
 } from '@/src/store/view-configs/types';
 import type { LPSAxis } from '@/src/types/lps';
 import type {
@@ -270,13 +271,18 @@ const SegmentGroupConfig = z.object({
   outlineThickness: z.number(),
 }) satisfies z.ZodType<SegmentGroupConfig>;
 
+const CinePlaybackViewConfig = z.object({
+  frame: z.number(),
+}) satisfies z.ZodType<CinePlaybackViewConfig>;
+
 const ViewConfig = z.object({
   window: WindowLevelConfig.optional(),
   slice: SliceConfig.optional(),
   layers: LayersConfig.optional(),
   segmentGroup: SegmentGroupConfig.optional(),
   camera: CameraConfig.optional(),
   volumeColorConfig: VolumeColorConfig.optional(),
+  cinePlayback: CinePlaybackViewConfig.optional(),
 });
 
 export type ViewConfig = z.infer<typeof ViewConfig>;

src/io/state-file/serialize.ts

@@ -13,7 +13,7 @@ import { migrateManifest } from '@/src/io/state-file/migrations';
 import { useViewConfigStore } from '@/src/store/view-configs';
 
 export const MANIFEST = 'manifest.json';
-export const MANIFEST_VERSION = '6.2.0';
+export const MANIFEST_VERSION = '6.3.0';
 
 export async function serialize() {
   const datasetStore = useDatasetStore();

src/store/view-configs.ts

@@ -46,6 +46,7 @@ export const useViewConfigStore = defineStore('viewConfig', () => {
     layerColoringStore.serialize(stateFile);
     viewCameraStore.serialize(stateFile);
     volumeColoringStore.serialize(stateFile);
+    cinePlaybackStore.serialize(stateFile);
   };
 
   const deserialize = (
@@ -65,6 +66,7 @@ export const useViewConfigStore = defineStore('viewConfig', () => {
     layerColoringStore.deserialize(viewID, updatedConfig);
     viewCameraStore.deserialize(viewID, updatedConfig);
     volumeColoringStore.deserialize(viewID, updatedConfig);
+    cinePlaybackStore.deserialize(viewID, updatedConfig);
   };
 
   const deserializeAll = (

src/store/view-configs/cine-playback.ts

@@ -9,6 +9,9 @@ import {
   patchDoubleKeyRecord,
 } from '@/src/utils/doubleKeyRecord';
 import { getCineImage } from '@/src/core/cine/isCineImage';
+import { createViewConfigSerializer } from '@/src/store/view-configs/common';
+import type { StateFile, ViewConfig } from '@/src/io/state-file/schema';
+import type { CinePlaybackViewConfig } from '@/src/store/view-configs/types';
 
 export const MIN_CINE_FPS = 1;
 export const MAX_CINE_FPS = 120;
@@ -94,12 +97,33 @@ export const useCinePlaybackStore = defineStore('cinePlayback', () => {
     }
   };
 
+  const serialize = (stateFile: StateFile) => {
+    const frameConfigs: DoubleKeyRecord<CinePlaybackViewConfig> = {};
+    Object.entries(configs).forEach(([viewID, byDataID]) => {
+      frameConfigs[viewID] = {};
+      Object.entries(byDataID).forEach(([dataID, config]) => {
+        frameConfigs[viewID][dataID] = { frame: config.frame };
+      });
+    });
+    createViewConfigSerializer(frameConfigs, 'cinePlayback')(stateFile);
+  };
+
+  const deserialize = (viewID: string, config: Record<string, ViewConfig>) => {
+    Object.entries(config).forEach(([dataID, viewConfig]) => {
+      if (viewConfig.cinePlayback) {
+        updateConfig(viewID, dataID, { frame: viewConfig.cinePlayback.frame });
+      }
+    });
+  };
+
   return {
     configs,
     getConfig,
     updateConfig,
     removeView,
     removeData,
+    serialize,
+    deserialize,
   };
 });
 

src/store/view-configs/types.ts

@@ -55,3 +55,7 @@ export interface SegmentGroupConfig {
   outlineOpacity: number;
   outlineThickness: number;
 }
+
+export interface CinePlaybackViewConfig {
+  frame: number;
+}

tests/specs/cine-ruler-session.e2e.ts

@@ -13,6 +13,7 @@ import {
   countCineRulerLines,
   getCineCanvasCenter,
   getCineFrame,
+  retreatCineFrame,
   waitForFrame,
 } from './cineTestUtils';
 
@@ -25,7 +26,7 @@ const placeRulerAtCanvasCenter = async () => {
 };
 
 describe('Cine ruler survives save/reload at its placed frame', () => {
-  it('reloads with the ruler hidden on frame 1 and visible on the placed frame', async () => {
+  it('reloads at the persisted frame with the ruler visible and hides it on frame 1', async () => {
     await openUrls([CINE_US_DATASET]);
     await $('.play-controls').waitForDisplayed();
     await waitForFrame(1);
@@ -55,13 +56,14 @@ describe('Cine ruler survives save/reload at its placed frame', () => {
     await volViewPage.open(`?urls=[tmp/${sessionFileName}]`);
     await volViewPage.waitForViews();
     await $('.play-controls').waitForDisplayed({ timeout: 30000 });
-    await waitForFrame(1);
+    // The cine frame is persisted, so reload restores the cursor to
+    // placementFrame rather than frame 1.
+    await waitForFrame(placementFrame);
 
     // Wait for the deserialized ruler to surface in the Measurements list
-    // before asserting it's hidden on the canvas. Without this anchor a
-    // regression that loses `frame` (ruler tagged frame 1 instead) could
-    // race the assertion and pass for the wrong reason; the list entry
-    // proves deserialization has completed.
+    // before asserting visibility on the canvas. The list entry proves
+    // deserialization has completed, so the subsequent canvas checks
+    // can't race the load.
     const annotationsTab = await $(
       'button[data-testid="module-tab-Annotations"]'
     );
@@ -77,18 +79,21 @@ describe('Cine ruler survives save/reload at its placed frame', () => {
       }
     );
 
-    // On reload the cursor lives at frame 1 (playback frame is not
-    // persisted). The ruler must be hidden here — if `frame` was lost
-    // during serialize/deserialize, it would render at frame 1 instead.
-    expect(await countCineRulerLines()).toBe(0);
+    // The ruler must be visible at the persisted placement frame — if
+    // `frame` was lost during serialize/deserialize, it would still
+    // render here, so we also need to verify it hides elsewhere.
+    await browser.waitUntil(async () => (await countCineRulerLines()) >= 1, {
+      timeoutMsg: `Expected the ruler to be visible at the persisted placement frame (${placementFrame}) after reload`,
+    });
 
-    // Scrub forward to the placement frame and the ruler should reappear.
+    // Scrub back to frame 1 — the ruler must hide there. A regression
+    // that dropped `frame` would leave it visible on every frame.
     await volViewPage.focusFirst2DView();
-    while ((await getCineFrame())! < placementFrame) {
-      await advanceCineFrame();
+    while ((await getCineFrame())! > 1) {
+      await retreatCineFrame();
     }
-    await browser.waitUntil(async () => (await countCineRulerLines()) >= 1, {
-      timeoutMsg: `Expected the ruler to reappear at the placement frame (${placementFrame}) after reload`,
+    await browser.waitUntil(async () => (await countCineRulerLines()) === 0, {
+      timeoutMsg: 'Expected the ruler to hide on frame 1 after reload',
     });
   });
 });