From f348023f27c9f00be5363b65d99db33c263f0d0d Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Tue, 29 Aug 2023 20:34:07 -0400
Subject: [PATCH 1/2] feat(CurrentImageProvider): inject current image

Decouples the current image from the current selection.
---
 src/components/CurrentImageProvider.vue |  31 +++++++
 src/components/LayoutGrid.vue           |  34 ++++++--
 src/composables/useCurrentImage.ts      | 109 ++++++++++++------------
 3 files changed, 112 insertions(+), 62 deletions(-)
 create mode 100644 src/components/CurrentImageProvider.vue

diff --git a/src/components/CurrentImageProvider.vue b/src/components/CurrentImageProvider.vue
new file mode 100644
index 000000000..30c36a965
--- /dev/null
+++ b/src/components/CurrentImageProvider.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Maybe } from '@/src/types';
+import { computed, provide, toRefs } from 'vue';
+import {
+  CurrentImageInjectionKey,
+  getImageMetadata,
+  getImageData,
+  getImageLayers,
+  getImageSpatialExtent,
+  getIsImageLoading,
+} from '@/src/composables/useCurrentImage';
+
+const props = defineProps<{
+  imageId: Maybe<string>;
+}>();
+
+const { imageId } = toRefs(props);
+
+provide(CurrentImageInjectionKey, {
+  id: imageId,
+  metadata: computed(() => getImageMetadata(imageId.value)),
+  imageData: computed(() => getImageData(imageId.value)),
+  extent: computed(() => getImageSpatialExtent(imageId.value)),
+  isLoading: computed(() => getIsImageLoading(imageId.value)),
+  layers: computed(() => getImageLayers(imageId.value)),
+});
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/src/components/LayoutGrid.vue b/src/components/LayoutGrid.vue
index 4325f18df..012e27ee3 100644
--- a/src/components/LayoutGrid.vue
+++ b/src/components/LayoutGrid.vue
@@ -7,12 +7,14 @@
     <div v-for="(item, i) in items" :key="i" class="d-flex flex-equal">
       <layout-grid v-if="item.type === 'layout'" :layout="item" />
       <div v-else class="layout-item">
-        <component
-          :is="item.component"
-          :key="item.id"
-          :id="item.id"
-          v-bind="item.props"
-        />
+        <current-image-provider :image-id="selectedImageID">
+          <component
+            :is="item.component"
+            :key="item.id"
+            :id="item.id"
+            v-bind="item.props"
+          />
+        </current-image-provider>
       </div>
     </div>
   </div>
@@ -21,6 +23,9 @@
 <script lang="ts">
 import { Component, computed, defineComponent, PropType, toRefs } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useDatasetStore } from '@/src/store/datasets';
+import { useDICOMStore } from '@/src/store/datasets-dicom';
+import CurrentImageProvider from '@/src/components/CurrentImageProvider.vue';
 import VtkTwoView from './VtkTwoView.vue';
 import VtkThreeView from './VtkThreeView.vue';
 import { Layout, LayoutDirection } from '../types/layout';
@@ -40,11 +45,27 @@ export default defineComponent({
       required: true,
     },
   },
+  components: {
+    CurrentImageProvider,
+  },
   setup(props) {
     const { layout } = toRefs(props);
     const viewStore = useViewStore();
     const { viewSpecs } = storeToRefs(viewStore);
 
+    const selectedImageID = computed(() => {
+      const { primarySelection } = useDatasetStore();
+      const { volumeToImageID } = useDICOMStore();
+
+      if (primarySelection?.type === 'image') {
+        return primarySelection.dataID;
+      }
+      if (primarySelection?.type === 'dicom') {
+        return volumeToImageID[primarySelection.volumeKey] || null;
+      }
+      return null;
+    });
+
     const flexFlow = computed(() => {
       return layout.value.direction === LayoutDirection.H
         ? 'flex-column'
@@ -73,6 +94,7 @@ export default defineComponent({
     return {
       items,
       flexFlow,
+      selectedImageID,
     };
   },
 });
diff --git a/src/composables/useCurrentImage.ts b/src/composables/useCurrentImage.ts
index eaf365470..5816b31e5 100644
--- a/src/composables/useCurrentImage.ts
+++ b/src/composables/useCurrentImage.ts
@@ -1,12 +1,33 @@
-import { computed } from 'vue';
-import { useDatasetStore } from '../store/datasets';
-import { useDICOMStore } from '../store/datasets-dicom';
+import { InjectionKey, Ref, inject } from 'vue';
+import { Maybe } from '@/src/types';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import { ImageMetadata } from '@/src/types/image';
+import { Vector2 } from '@kitware/vtk.js/types';
 import { defaultImageMetadata, useImageStore } from '../store/datasets-images';
-import { useLayersStore } from '../store/datasets-layers';
+import { Layer, useLayersStore } from '../store/datasets-layers';
 import { createLPSBounds, getAxisBounds } from '../utils/lps';
 
+type SpatialExtent = {
+  Sagittal: Vector2;
+  Coronal: Vector2;
+  Axial: Vector2;
+};
+
+export interface CurrentImageContext {
+  id: Ref<Maybe<string>>;
+  imageData: Ref<Maybe<vtkImageData>>;
+  metadata: Ref<ImageMetadata>;
+  extent: Ref<SpatialExtent>;
+  isLoading: Ref<boolean>;
+  layers: Ref<Layer[]>;
+}
+
+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 +45,38 @@ 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;
-
-    if (primarySelection?.type === 'image') {
-      return primarySelection.dataID;
-    }
-    if (primarySelection?.type === 'dicom') {
-      return volumeToImageID[primarySelection.volumeKey] || null;
-    }
-    return null;
-  });
-
-  const currentImageMetadata = computed(() => {
-    const { metadata } = imageStore;
-    const imageID = currentImageID.value;
-
-    if (imageID) {
-      return metadata[imageID];
-    }
-    return defaultImageMetadata();
-  });
+export function getImageMetadata(imageID: Maybe<string>) {
+  const { metadata } = useImageStore();
+  return imageID ? metadata[imageID] : defaultImageMetadata();
+}
 
-  const currentImageData = computed(() => {
-    if (currentImageID.value)
-      // assumed to be only images for now
-      return imageStore.dataIndex[currentImageID.value];
-    return undefined;
-  });
+export function getImageData(imageID: Maybe<string>) {
+  const { dataIndex } = useImageStore();
+  return imageID ? dataIndex[imageID] : null;
+}
 
-  const currentImageExtent = computed(() =>
-    getImageSpatialExtent(currentImageID.value)
-  );
+export function getIsImageLoading(imageID: Maybe<string>) {
+  // TODO imageID -> loading status
+  return !imageID;
+}
 
-  const isImageLoading = computed(() => {
-    return !!dataStore.primarySelection && !dataStore.primaryDataset;
-  });
+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 currentLayers = computed(() =>
-    layersStore
-      .getLayers(dataStore.primarySelection)
-      .filter(({ id }) => id in layersStore.layerImages)
-  );
+export function useCurrentImage() {
+  const context = inject(CurrentImageInjectionKey);
+  if (!context) throw new Error('useCurrentImage: no CurrentImageContext!');
 
   return {
-    currentImageData,
-    currentImageID,
-    currentImageMetadata,
-    currentImageExtent,
-    isImageLoading,
-    currentLayers,
+    currentImageData: context.imageData,
+    currentImageID: context.id,
+    currentImageMetadata: context.metadata,
+    currentImageExtent: context.extent,
+    isImageLoading: context.isLoading,
+    currentLayers: context.layers,
   };
 }

From 4a7f0f951e42e9578570071e32614f1714320edc Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 31 Aug 2023 11:09:00 -0400
Subject: [PATCH 2/2] refactor: currentImageID is now Maybe<string>

---
 src/components/VtkTwoView.vue             |  6 +++---
 src/components/tools/SliceScrollTool.vue  |  2 +-
 src/composables/usePersistCameraConfig.ts | 13 +++++++------
 src/composables/useSceneBuilder.ts        |  3 ++-
 src/store/tools/crop.ts                   |  3 ++-
 src/store/tools/paint.ts                  |  3 ++-
 6 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 5952d4b76..17df7fb5e 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -310,7 +310,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);
         }
       },
@@ -320,7 +320,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];
@@ -362,7 +362,7 @@ export default defineComponent({
     // --- setters --- //
 
     const setSlice = (slice: number) => {
-      if (curImageID.value !== null) {
+      if (curImageID.value != null) {
         viewSliceStore.updateConfig(viewID.value, curImageID.value, {
           slice,
         });
diff --git a/src/components/tools/SliceScrollTool.vue b/src/components/tools/SliceScrollTool.vue
index cd04de824..0feaf6c51 100644
--- a/src/components/tools/SliceScrollTool.vue
+++ b/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,
             });
diff --git a/src/composables/usePersistCameraConfig.ts b/src/composables/usePersistCameraConfig.ts
index 2fdfb5eea..5bddbe127 100644
--- a/src/composables/usePersistCameraConfig.ts
+++ b/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(),
         });
diff --git a/src/composables/useSceneBuilder.ts b/src/composables/useSceneBuilder.ts
index d3d02838c..1fbcd7c91 100644
--- a/src/composables/useSceneBuilder.ts
+++ b/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[]>;
diff --git a/src/store/tools/crop.ts b/src/store/tools/crop.ts
index 81a181ec1..3af2dd7cb 100644
--- a/src/store/tools/crop.ts
+++ b/src/store/tools/crop.ts
@@ -8,6 +8,7 @@ import { MaybeRef } from '@vueuse/core';
 import { vec3 } from 'gl-matrix';
 import { defineStore } from 'pinia';
 import { arrayEqualsWithComparator } from '@/src/utils';
+import { Maybe } from '@/src/types';
 import { useImageStore } from '../datasets-images';
 import { LPSCroppingPlanes } from '../../types/crop';
 import { ImageMetadata } from '../../types/image';
@@ -60,7 +61,7 @@ export const useCropStore = defineStore('crop', () => {
     croppingByImageID: {} as Record<string, LPSCroppingPlanes>,
   });
 
-  const getComputedVTKPlanes = (imageID: MaybeRef<string | null>) =>
+  const getComputedVTKPlanes = (imageID: MaybeRef<Maybe<string>>) =>
     computed(() => {
       const id = unref(imageID);
       if (id && id in state.croppingByImageID && id in imageStore.metadata) {
diff --git a/src/store/tools/paint.ts b/src/store/tools/paint.ts
index 5df201a79..bbe44d3d5 100644
--- a/src/store/tools/paint.ts
+++ b/src/store/tools/paint.ts
@@ -4,6 +4,7 @@ import { Manifest, StateFile } from '@/src/io/state-file/schema';
 import { computed, ref, watch } from 'vue';
 import { vec3 } from 'gl-matrix';
 import { defineStore } from 'pinia';
+import { Maybe } from '@/src/types';
 import { Tools } from './types';
 import { useLabelmapStore } from '../datasets-labelmaps';
 
@@ -34,7 +35,7 @@ export const usePaintToolStore = defineStore('paint', () => {
 
   // --- actions --- //
 
-  function selectOrCreateLabelmap(imageID: string | null) {
+  function selectOrCreateLabelmap(imageID: Maybe<string>) {
     if (!imageID) {
       activeLabelmapID.value = null;
       return;