Ultrasound cine

package.json

@@ -66,6 +66,7 @@
     "cors": "^2.8.5",
     "cross-env": "^10.1.0",
     "deep-equal": "^2.2.3",
+    "dicom-parser": "^1.8.21",
     "dicomweb-client-typed": "^0.8.6",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",

src/components/PatientStudyVolumeBrowser.vue

@@ -3,9 +3,7 @@ import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
 import type { PropType } from 'vue';
 import GroupableItem from '@/src/components/GroupableItem.vue';
 import { DataSelection, isDicomImage } from '@/src/utils/dataSelection';
-import { ThumbnailStrategy } from '@/src/core/streaming/chunkImage';
 import { useImageCacheStore } from '@/src/store/image-cache';
-import DicomChunkImage from '@/src/core/streaming/dicomChunkImage';
 import { getDisplayName, useDICOMStore } from '@/src/store/datasets-dicom';
 import { useDatasetStore } from '@/src/store/datasets';
 import { useMultiSelection } from '@/src/composables/useMultiSelection';
@@ -100,13 +98,11 @@ export default defineComponent({
           }
 
           const image = imageCacheStore.imageById[key];
-          if (!image || !(image instanceof DicomChunkImage)) return;
+          if (!image) return;
 
           try {
-            const thumb = await image.getThumbnail(
-              ThumbnailStrategy.MiddleSlice
-            );
-            if (thumb !== null) {
+            const thumb = await image.getThumbnail();
+            if (thumb) {
               thumbnailCache[cacheKey] = { kind: 'image', value: thumb };
             } else {
               thumbnailCache[cacheKey] = {

src/components/PlayControls.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { computed, ref, toRefs, watch } from 'vue';
+import { useIntervalFn } from '@vueuse/core';
+import { Maybe } from '@/src/types';
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { getCineImage } from '@/src/core/cine/isCineImage';
+
+type Props = {
+  viewId: string;
+  imageId: Maybe<string>;
+};
+
+const props = defineProps<Props>();
+const { imageId, viewId } = toRefs(props);
+
+const cine = computed(() => getCineImage(imageId.value));
+const { slice, range } = useSliceConfig(viewId, imageId);
+
+const playing = ref(false);
+const fps = ref(0);
+
+watch(
+  cine,
+  (image) => {
+    if (!image) {
+      fps.value = 0;
+      return;
+    }
+    const frameTime = image.header.frameTimeMs;
+    fps.value = frameTime && frameTime > 0 ? Math.round(1000 / frameTime) : 24;
+  },
+  { immediate: true }
+);
+
+const period = computed(() =>
+  fps.value > 0 ? Math.max(1, Math.round(1000 / fps.value)) : 1000
+);
+
+const { pause, resume } = useIntervalFn(
+  () => {
+    const [min, max] = range.value;
+    if (max <= min) return;
+    const next = (slice.value ?? min) + 1;
+    slice.value = next > max ? min : next;
+  },
+  period,
+  { immediate: false, immediateCallback: false }
+);
+
+watch(playing, (isPlaying) => {
+  if (isPlaying) resume();
+  else pause();
+});
+
+// Pause when the cine clip changes (or is removed).
+watch(imageId, () => {
+  playing.value = false;
+});
+
+const MIN_FPS = 1;
+const MAX_FPS = 120;
+
+function togglePlay() {
+  playing.value = !playing.value;
+}
+
+function clampFps() {
+  if (!Number.isFinite(fps.value) || fps.value < MIN_FPS) fps.value = MIN_FPS;
+  else if (fps.value > MAX_FPS) fps.value = MAX_FPS;
+  else fps.value = Math.round(fps.value);
+}
+</script>
+
+<template>
+  <div v-if="cine" class="play-controls pointer-events-all">
+    <button
+      type="button"
+      class="play-btn"
+      :title="playing ? 'Pause' : 'Play'"
+      @click="togglePlay"
+    >
+      <v-icon size="14">{{ playing ? 'mdi-pause' : 'mdi-play' }}</v-icon>
+    </button>
+    <input
+      v-model.number="fps"
+      type="number"
+      :min="MIN_FPS"
+      :max="MAX_FPS"
+      class="fps-input"
+      title="Frames per second"
+      @change="clampFps"
+    />
+    <span class="fps-suffix">fps</span>
+  </div>
+</template>
+
+<style scoped>
+.play-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #fff;
+  font-size: 0.8125rem;
+  line-height: 1;
+}
+
+.play-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+.play-btn:hover {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.fps-input {
+  width: 44px;
+  background: transparent;
+  color: inherit;
+  border: none;
+  padding: 0 4px;
+  text-align: right;
+  font-size: inherit;
+}
+
+.fps-input:focus {
+  outline: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.fps-suffix {
+  opacity: 0.7;
+}
+</style>

src/components/SliceViewer.vue

@@ -146,6 +146,7 @@
             <bounding-rectangle :points="selectionPoints" />
           </svg>
           <scalar-probe
+            v-if="!isCine"
             :base-rep="baseSliceRep"
             :layer-reps="layerSliceReps"
             :segment-groups-reps="segSliceReps"
@@ -158,9 +159,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, computed } from 'vue';
+import { ref, toRefs, computed, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useProbeStore } from '@/src/store/probe';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
 import { VtkViewApi } from '@/src/types/vtk-types';
@@ -186,6 +188,7 @@ import { useAnnotationToolStore, useToolStore } from '@/src/store/tools';
 import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool';
 import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { isCineImage } from '@/src/core/cine/isCineImage';
 import VtkSliceViewWindowManipulator from '@/src/components/vtk/VtkSliceViewWindowManipulator.vue';
 import VtkSliceViewSlicingManipulator from '@/src/components/vtk/VtkSliceViewSlicingManipulator.vue';
 import VtkSliceViewSlicingKeyManipulator from '@/src/components/vtk/VtkSliceViewSlicingKeyManipulator.vue';
@@ -240,9 +243,6 @@ useViewAnimationListener(vtkView, viewId, '2D');
 
 // active tool
 const { currentTool } = storeToRefs(useToolStore());
-const windowingManipulatorProps = computed(() =>
-  currentTool.value === Tools.WindowLevel ? { button: 1 } : { button: -1 }
-);
 
 // base image
 const {
@@ -257,6 +257,22 @@ const { slice: currentSlice, range: sliceRange } = useSliceConfig(
   currentImageID
 );
 
+const windowingManipulatorProps = computed(() => {
+  // W/L is meaningless for 8-bit display-encoded cine; keep the manipulator
+  // off so dragging doesn't crush colors.
+  if (currentTool.value !== Tools.WindowLevel) return { button: -1 };
+  if (isCineImage(currentImageID.value)) return { button: -1 };
+  return { button: 1 };
+});
+
+// Scalar probe samples the canonical image; for cine that's frame-0-only.
+// Unmount it for cine views and clear any stale probe data on switch.
+const isCine = computed(() => isCineImage(currentImageID.value));
+const probeStore = useProbeStore();
+watch(isCine, (cine) => {
+  if (cine) probeStore.clearProbeData();
+});
+
 onVTKEvent(currentImageData, 'onModified', () => {
   vtkView.value?.requestRender();
 });

src/components/SliceViewerOverlay.vue

@@ -9,6 +9,9 @@ import { useOrientationLabels } from '@/src/composables/useOrientationLabels';
 import DicomQuickInfoButton from '@/src/components/DicomQuickInfoButton.vue';
 import ViewTypeSwitcher from '@/src/components/ViewTypeSwitcher.vue';
 import { useImage } from '@/src/composables/useCurrentImage';
+import { isCineImage } from '@/src/core/cine/isCineImage';
+import PlayControls from '@/src/components/PlayControls.vue';
+import { computed } from 'vue';
 
 interface Props {
   viewId: string;
@@ -34,6 +37,8 @@ const {
   level: windowLevel,
 } = useWindowingConfig(viewId, imageId);
 const { metadata } = useImage(imageId);
+
+const isCine = computed(() => isCineImage(imageId.value));
 </script>
 
 <template>
@@ -56,13 +61,23 @@ const { metadata } = useImage(imageId);
     <template v-slot:bottom-left>
       <div class="annotation-cell">
         <div v-if="sliceConfig">
-          Slice: {{ slice + 1 }}/{{ sliceRange[1] + 1 }}
+          <span v-if="isCine" class="frame-label">
+            Frame: {{ slice + 1 }} / {{ sliceRange[1] + 1 }}
+          </span>
+          <span v-else class="slice-label">
+            Slice: {{ slice + 1 }}/{{ sliceRange[1] + 1 }}
+          </span>
         </div>
-        <div v-if="wlConfig">
+        <div v-if="wlConfig && !isCine">
           W/L: {{ windowWidth.toFixed(2) }} / {{ windowLevel.toFixed(2) }}
         </div>
       </div>
     </template>
+    <template v-slot:bottom-center>
+      <div v-if="isCine" class="annotation-cell" @click.stop>
+        <play-controls :view-id="viewId" :image-id="imageId" />
+      </div>
+    </template>
     <template v-slot:top-right>
       <div class="annotation-cell">
         <dicom-quick-info-button :image-id="imageId"></dicom-quick-info-button>

src/components/tools/polygon/PolygonWidget2D.vue

@@ -30,6 +30,7 @@ import type { Vector3 } from '@kitware/vtk.js/types';
 import { ToolID } from '@/src/types/annotation-tool';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { getRenderSlice } from '@/src/core/cine/getRenderSlice';
 import SVG2DComponent from './PolygonSVG2D.vue';
 
 export default defineComponent({
@@ -134,10 +135,11 @@ export default defineComponent({
     widget.setManipulator(manipulator);
 
     watchEffect(() => {
+      const semantic = tool.value?.slice ?? slice.value ?? 0;
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        tool.value?.slice ?? slice.value ?? 0,
+        getRenderSlice(imageId.value, semantic),
         imageMetadata.value
       );
     });

src/components/tools/rectangle/RectangleWidget2D.vue

@@ -32,6 +32,7 @@ import { VtkViewContext } from '@/src/components/vtk/context';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
 import { Maybe } from '@/src/types';
 import { whenever } from '@vueuse/core';
+import { getRenderSlice } from '@/src/core/cine/getRenderSlice';
 
 const useStore = useRectangleStore;
 const vtkWidgetFactory = vtkRectangleWidget;
@@ -122,10 +123,11 @@ export default defineComponent({
     widget.setManipulator(manipulator);
 
     watchEffect(() => {
+      const semantic = tool.value?.slice ?? slice.value;
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        tool.value?.slice ?? slice.value,
+        getRenderSlice(imageId.value, semantic),
         imageMetadata.value
       );
     });

src/components/tools/ruler/RulerWidget2D.vue

@@ -33,6 +33,7 @@ import { Maybe } from '@/src/types';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { whenever } from '@vueuse/core';
+import { getRenderSlice } from '@/src/core/cine/getRenderSlice';
 
 export default defineComponent({
   name: 'RulerWidget2D',
@@ -121,10 +122,11 @@ export default defineComponent({
     widget.setManipulator(manipulator);
 
     watchEffect(() => {
+      const semantic = ruler.value?.slice ?? slice.value;
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        ruler.value?.slice ?? slice.value,
+        getRenderSlice(imageId.value, semantic),
         imageMetadata.value
       );
     });