Support overriding the current image

src/components/CurrentImageProvider.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Maybe } from '@/src/types';
+import { provide, toRefs } from 'vue';
+import { CurrentImageInjectionKey } from '@/src/composables/useCurrentImage';
+
+const props = defineProps<{
+  imageId: Maybe<string>;
+}>();
+
+const { imageId: imageID } = toRefs(props);
+
+provide(CurrentImageInjectionKey, {
+  imageID,
+});
+</script>
+
+<template>
+  <slot />
+</template>

src/components/VtkObliqueView.vue

@@ -219,7 +219,7 @@ export default defineComponent({
       get: () => windowingStore.getConfig(viewID.value, curImageID.value),
       set: (newValue) => {
         const imageID = curImageID.value;
-        if (imageID !== null && newValue != null) {
+        if (imageID != null && newValue != null) {
           windowingStore.updateConfig(viewID.value, imageID, newValue);
         }
       },
@@ -229,7 +229,7 @@ export default defineComponent({
     const windowLevel = computed(() => wlConfig.value?.level);
     const dicomInfo = computed(() => {
       if (
-        curImageID.value !== null &&
+        curImageID.value != null &&
         curImageID.value in dicomStore.imageIDToVolumeKey
       ) {
         const volumeKey = dicomStore.imageIDToVolumeKey[curImageID.value];

src/components/VtkTwoView.vue

@@ -333,7 +333,7 @@ export default defineComponent({
       get: () => windowingStore.getConfig(viewID.value, curImageID.value),
       set: (newValue) => {
         const imageID = curImageID.value;
-        if (imageID !== null && newValue != null) {
+        if (imageID != null && newValue != null) {
           windowingStore.updateConfig(viewID.value, imageID, newValue);
         }
       },
@@ -346,7 +346,7 @@ export default defineComponent({
     );
     const dicomInfo = computed(() => {
       if (
-        curImageID.value !== null &&
+        curImageID.value != null &&
         curImageID.value in dicomStore.imageIDToVolumeKey
       ) {
         const volumeKey = dicomStore.imageIDToVolumeKey[curImageID.value];
@@ -388,7 +388,7 @@ export default defineComponent({
     // --- setters --- //
 
     const setSlice = (slice: number) => {
-      if (curImageID.value !== null) {
+      if (curImageID.value != null) {
         viewSliceStore.updateConfig(viewID.value, curImageID.value, {
           slice,
         });
@@ -863,7 +863,7 @@ export default defineComponent({
         .filter(
           ({ tool }) =>
             tool.slice === currentSlice.value &&
-            doesToolFrameMatchViewAxis(viewAxis, tool)
+            doesToolFrameMatchViewAxis(viewAxis, tool, curImageMetadata)
         )
         .flatMap(({ store, tool }) => store.getPoints(tool.id));
     });

src/components/tools/SliceScrollTool.vue

@@ -96,7 +96,7 @@ export default defineComponent({
         range.step,
         () => scrollVal.value,
         (slice) => {
-          if (currentImageID.value !== null) {
+          if (currentImageID.value != null) {
             viewSliceStore.updateConfig(viewID.value, currentImageID.value, {
               slice,
             });

src/composables/annotationTool.ts

@@ -1,4 +1,13 @@
-import { Ref, UnwrapRef, computed, readonly, ref, watch } from 'vue';
+import {
+  MaybeRef,
+  Ref,
+  UnwrapRef,
+  computed,
+  readonly,
+  ref,
+  unref,
+  watch,
+} from 'vue';
 import { Vector2 } from '@kitware/vtk.js/types';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReference';
@@ -19,34 +28,35 @@ import {
   ContextMenuEvent,
   vtkAnnotationToolWidget,
 } from '@/src/vtk/ToolWidgetUtils/types';
+import { ImageMetadata } from '@/src/types/image';
 
 const SHOW_OVERLAY_DELAY = 250; // milliseconds
 
 // does the tools's frame of reference match
 // the view's axis
 export const doesToolFrameMatchViewAxis = <Tool extends AnnotationTool>(
-  viewAxis: Ref<LPSAxis>,
-  tool: Partial<Tool>
+  viewAxis: MaybeRef<LPSAxis>,
+  tool: Partial<Tool>,
+  imageMetadata: MaybeRef<ImageMetadata>
 ) => {
   if (!tool.frameOfReference) return false;
 
-  const { currentImageMetadata } = useCurrentImage();
   const toolAxis = frameOfReferenceToImageSliceAndAxis(
     tool.frameOfReference,
-    currentImageMetadata.value,
+    unref(imageMetadata),
     {
       allowOutOfBoundsSlice: true,
     }
   );
-  return !!toolAxis && toolAxis.axis === viewAxis.value;
+  return !!toolAxis && toolAxis.axis === unref(viewAxis);
 };
 
 export const useCurrentTools = <S extends AnnotationToolStore>(
   toolStore: S,
   viewAxis: Ref<LPSAxis>
-) =>
-  computed(() => {
-    const { currentImageID } = useCurrentImage();
+) => {
+  const { currentImageID, currentImageMetadata } = useCurrentImage();
+  return computed(() => {
     const curImageID = currentImageID.value;
 
     type ToolType = S['tools'][number];
@@ -55,11 +65,12 @@ export const useCurrentTools = <S extends AnnotationToolStore>(
       // current view axis and not hidden
       return (
         tool.imageID === curImageID &&
-        doesToolFrameMatchViewAxis(viewAxis, tool) &&
+        doesToolFrameMatchViewAxis(viewAxis, tool, currentImageMetadata) &&
         !tool.hidden
       );
     });
   });
+};
 
 // --- Context Menu --- //
 

src/composables/useCurrentImage.ts

@@ -1,12 +1,32 @@
-import { computed } from 'vue';
-import { useDatasetStore } from '../store/datasets';
-import { useDICOMStore } from '../store/datasets-dicom';
-import { defaultImageMetadata, useImageStore } from '../store/datasets-images';
-import { useLayersStore } from '../store/datasets-layers';
-import { createLPSBounds, getAxisBounds } from '../utils/lps';
+import {
+  InjectionKey,
+  MaybeRef,
+  Ref,
+  computed,
+  hasInjectionContext,
+  inject,
+  unref,
+} from 'vue';
+import { Maybe } from '@/src/types';
+import {
+  defaultImageMetadata,
+  useImageStore,
+} from '@/src/store/datasets-images';
+import { useLayersStore } from '@/src/store/datasets-layers';
+import { createLPSBounds, getAxisBounds } from '@/src/utils/lps';
+import { getImageID, useDatasetStore } from '@/src/store/datasets';
+import { storeToRefs } from 'pinia';
+
+export interface CurrentImageContext {
+  imageID: Ref<Maybe<string>>;
+}
+
+export const CurrentImageInjectionKey = Symbol(
+  'CurrentImage'
+) as InjectionKey<CurrentImageContext>;
 
 // Returns a spatially inflated image extent
-export function getImageSpatialExtent(imageID: string | null) {
+export function getImageSpatialExtent(imageID: Maybe<string>) {
   const imageStore = useImageStore();
 
   if (imageID && imageID in imageStore.metadata) {
@@ -24,62 +44,59 @@ export function getImageSpatialExtent(imageID: string | null) {
   return createLPSBounds();
 }
 
-export function useCurrentImage() {
-  const dataStore = useDatasetStore();
-  const dicomStore = useDICOMStore();
-  const imageStore = useImageStore();
-  const layersStore = useLayersStore();
-
-  const currentImageID = computed(() => {
-    const { primarySelection } = dataStore;
-    const { volumeToImageID } = dicomStore;
+export function getImageMetadata(imageID: Maybe<string>) {
+  const { metadata } = useImageStore();
+  return imageID ? metadata[imageID] : defaultImageMetadata();
+}
 
-    if (primarySelection?.type === 'image') {
-      return primarySelection.dataID;
-    }
-    if (primarySelection?.type === 'dicom') {
-      return volumeToImageID[primarySelection.volumeKey] || null;
-    }
-    return null;
-  });
+export function getImageData(imageID: Maybe<string>) {
+  const { dataIndex } = useImageStore();
+  return imageID ? dataIndex[imageID] : null;
+}
 
-  const currentImageMetadata = computed(() => {
-    const { metadata } = imageStore;
-    const imageID = currentImageID.value;
+export function getIsImageLoading(imageID: Maybe<string>) {
+  const dataStore = useDatasetStore();
+  if (!dataStore.primarySelection) return false;
 
-    if (imageID) {
-      return metadata[imageID];
-    }
-    return defaultImageMetadata();
-  });
+  const selectedImageID = getImageID(dataStore.primarySelection);
+  if (selectedImageID !== unref(imageID)) return false;
 
-  const currentImageData = computed(() => {
-    if (currentImageID.value)
-      // assumed to be only images for now
-      return imageStore.dataIndex[currentImageID.value];
-    return undefined;
-  });
+  return !!dataStore.primarySelection && !dataStore.primaryDataset;
+}
 
-  const currentImageExtent = computed(() =>
-    getImageSpatialExtent(currentImageID.value)
-  );
+export function getImageLayers(imageID: Maybe<string>) {
+  const layersStore = useLayersStore();
+  return layersStore
+    .getLayers(imageID ? { type: 'image', dataID: imageID } : null)
+    .filter(({ id }) => id in layersStore.layerImages);
+}
 
-  const isImageLoading = computed(() => {
-    return !!dataStore.primarySelection && !dataStore.primaryDataset;
-  });
+export function useImage(imageID: MaybeRef<Maybe<string>>) {
+  return {
+    id: computed(() => unref(imageID)),
+    imageData: computed(() => getImageData(unref(imageID))),
+    metadata: computed(() => getImageMetadata(unref(imageID))),
+    extent: computed(() => getImageSpatialExtent(unref(imageID))),
+    isLoading: computed(() => getIsImageLoading(unref(imageID))),
+    layers: computed(() => getImageLayers(unref(imageID))),
+  };
+}
 
-  const currentLayers = computed(() =>
-    layersStore
-      .getLayers(dataStore.primarySelection)
-      .filter(({ id }) => id in layersStore.layerImages)
-  );
+export function useCurrentImage() {
+  const { primaryImageID } = storeToRefs(useDatasetStore());
+  const defaultContext = { imageID: primaryImageID };
+  const { imageID } = hasInjectionContext()
+    ? inject(CurrentImageInjectionKey, defaultContext)
+    : defaultContext;
 
+  const { id, imageData, metadata, extent, isLoading, layers } =
+    useImage(imageID);
   return {
-    currentImageData,
-    currentImageID,
-    currentImageMetadata,
-    currentImageExtent,
-    isImageLoading,
-    currentLayers,
+    currentImageID: id,
+    currentImageMetadata: metadata,
+    currentImageData: imageData,
+    currentImageExtent: extent,
+    isImageLoading: isLoading,
+    currentLayers: layers,
   };
 }

src/composables/usePersistCameraConfig.ts

@@ -1,12 +1,13 @@
 import { manageVTKSubscription } from '@/src/composables/manageVTKSubscription';
 import { Ref } from 'vue';
+import { Maybe } from '@/src/types';
 import { CameraConfig } from '../store/view-configs/types';
 import { vtkLPSViewProxy } from '../types/vtk-types';
 import useViewCameraStore from '../store/view-configs/camera';
 
 export function usePersistCameraConfig(
   viewID: Ref<string>,
-  dataID: Ref<string | null>,
+  dataID: Ref<Maybe<string>>,
   viewProxy: Ref<vtkLPSViewProxy>,
   ...toPersist: (keyof CameraConfig)[]
 ) {
@@ -19,7 +20,7 @@ export function usePersistCameraConfig(
 
   if (toPersist.indexOf('position') > -1) {
     persist.push(() => {
-      if (dataID.value !== null && persistCameraConfig) {
+      if (dataID.value != null && persistCameraConfig) {
         viewCameraStore.updateConfig(viewID.value, dataID.value, {
           position: viewProxy.value.getCamera().getPosition(),
         });
@@ -28,7 +29,7 @@ export function usePersistCameraConfig(
   }
   if (toPersist.indexOf('viewUp') > -1) {
     persist.push(() => {
-      if (dataID.value !== null && persistCameraConfig) {
+      if (dataID.value != null && persistCameraConfig) {
         viewCameraStore.updateConfig(viewID.value, dataID.value, {
           viewUp: viewProxy.value.getCamera().getViewUp(),
         });
@@ -37,7 +38,7 @@ export function usePersistCameraConfig(
   }
   if (toPersist.indexOf('focalPoint') > -1) {
     persist.push(() => {
-      if (dataID.value !== null && persistCameraConfig) {
+      if (dataID.value != null && persistCameraConfig) {
         viewCameraStore.updateConfig(viewID.value, dataID.value, {
           focalPoint: viewProxy.value.getCamera().getFocalPoint(),
         });
@@ -46,7 +47,7 @@ export function usePersistCameraConfig(
   }
   if (toPersist.indexOf('directionOfProjection') > -1) {
     persist.push(() => {
-      if (dataID.value !== null && persistCameraConfig) {
+      if (dataID.value != null && persistCameraConfig) {
         viewCameraStore.updateConfig(viewID.value, dataID.value, {
           directionOfProjection: viewProxy.value
             .getCamera()
@@ -57,7 +58,7 @@ export function usePersistCameraConfig(
   }
   if (toPersist.indexOf('parallelScale') > -1) {
     persist.push(() => {
-      if (dataID.value !== null && persistCameraConfig) {
+      if (dataID.value != null && persistCameraConfig) {
         viewCameraStore.updateConfig(viewID.value, dataID.value, {
           parallelScale: viewProxy.value.getCamera().getParallelScale(),
         });

src/composables/useSceneBuilder.ts

@@ -1,11 +1,12 @@
 import vtkAbstractRepresentationProxy from '@kitware/vtk.js/Proxy/Core/AbstractRepresentationProxy';
 import { computed, Ref, watch } from 'vue';
+import { Maybe } from '@/src/types';
 import { useViewStore } from '../store/views';
 import { vtkLPSViewProxy } from '../types/vtk-types';
 import { arrayEquals } from '../utils';
 
 interface Scene {
-  baseImage?: Ref<string | null>;
+  baseImage?: Ref<Maybe<string>>;
   labelmaps?: Ref<string[]>;
   layers?: Ref<string[]>;
   models?: Ref<string[]>;

src/store/datasets.ts

@@ -179,6 +179,7 @@ export const useDatasetStore = defineStore('dataset', () => {
   });
 
   return {
+    primaryImageID,
     primarySelection,
     primaryDataset,
     allDataIDs,