Refactoring to enable better customizability

src/components/DicomQuickInfoButton.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { useDICOMStore } from '@/src/store/datasets-dicom';
+import { Maybe } from '@/src/types';
+import { computed, toRef } from 'vue';
+
+interface Props {
+  imageId: Maybe<string>;
+}
+
+const props = defineProps<Props>();
+const imageId = toRef(props, 'imageId');
+
+const dicomStore = useDICOMStore();
+const dicomInfo = computed(() => {
+  if (imageId.value != null && imageId.value in dicomStore.imageIDToVolumeKey) {
+    const volumeKey = dicomStore.imageIDToVolumeKey[imageId.value];
+    const volumeInfo = dicomStore.volumeInfo[volumeKey];
+    const studyKey = dicomStore.volumeStudy[volumeKey];
+    const studyInfo = dicomStore.studyInfo[studyKey];
+    const patientKey = dicomStore.studyPatient[studyKey];
+    const patientInfo = dicomStore.patientInfo[patientKey];
+
+    const patientID = patientInfo.PatientID;
+    const studyID = studyInfo.StudyID;
+    const studyDescription = studyInfo.StudyDescription;
+    const seriesNumber = volumeInfo.SeriesNumber;
+    const seriesDescription = volumeInfo.SeriesDescription;
+
+    return {
+      patientID,
+      studyID,
+      studyDescription,
+      seriesNumber,
+      seriesDescription,
+    };
+  }
+
+  return null;
+});
+</script>
+
+<template>
+  <v-menu
+    open-on-hover
+    location="bottom left"
+    left
+    nudge-left="10"
+    dark
+    v-if="dicomInfo !== null"
+    max-width="300px"
+  >
+    <template v-slot:activator="{ props }">
+      <v-icon
+        v-bind="props"
+        dark
+        size="x-large"
+        class="pointer-events-all hover-info"
+      >
+        mdi-information
+      </v-icon>
+    </template>
+    <v-list class="bg-grey-darken-3">
+      <v-list-item>
+        <v-list-item-title class="font-weight-bold">
+          PATIENT / CASE
+        </v-list-item-title>
+        <v-divider />
+        <v-list-item-title> ID: {{ dicomInfo.patientID }} </v-list-item-title>
+      </v-list-item>
+      <v-list-item>
+        <v-list-item-title class="font-weight-bold"> STUDY </v-list-item-title>
+        <v-divider />
+        <v-list-item-title> ID: {{ dicomInfo.studyID }} </v-list-item-title>
+        <v-list-item-title>
+          {{ dicomInfo.studyDescription }}
+        </v-list-item-title>
+      </v-list-item>
+      <v-list-item>
+        <v-list-item-title class="font-weight-bold"> SERIES </v-list-item-title>
+        <v-divider />
+        <v-list-item-title>
+          Series #: {{ dicomInfo.seriesNumber }}
+        </v-list-item-title>
+        <v-list-item-title>
+          {{ dicomInfo.seriesDescription }}
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<style scoped src="@/src/components/styles/utils.css"></style>
+<style scoped>
+.hover-info {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}
+</style>

src/components/SliceSlider.vue

@@ -35,7 +35,7 @@ function getYOffsetFromTransform(matStr) {
 
 export default {
   props: {
-    slice: {
+    modelValue: {
       type: Number,
       default: 0,
     },
@@ -57,6 +57,8 @@ export default {
     },
   },
 
+  emits: ['update:modelValue'],
+
   data() {
     return {
       maxHandlePos: 0,
@@ -70,7 +72,7 @@ export default {
   computed: {
     handlePosition() {
       const range = this.max - this.min <= 0 ? 1 : this.max - this.min;
-      const pos = this.maxHandlePos * ((this.slice - this.min) / range);
+      const pos = this.maxHandlePos * ((this.modelValue - this.min) / range);
       return this.dragging ? this.draggingHandlePos : pos;
     },
     draggingHandlePos() {
@@ -118,7 +120,7 @@ export default {
           Math.min(this.maxHandlePos, ev.pageY - y - this.handleHeight / 2)
         );
         const newSlice = this.getNearestSlice(this.initialHandlePos);
-        this.$emit('input', newSlice);
+        this.$emit('modelValue', newSlice);
       }
 
       this.yOffset = 0;
@@ -132,7 +134,7 @@ export default {
 
       this.yOffset = ev.pageY - this.initialMousePosY;
       const slice = this.getNearestSlice(this.handlePosition);
-      this.$emit('input', slice);
+      this.$emit('modelValue', slice);
     },
 
     onDragEnd(ev) {
@@ -142,7 +144,7 @@ export default {
 
       this.dragging = false;
       const slice = this.getNearestSlice(this.handlePosition);
-      this.$emit('input', slice);
+      this.$emit('modelValue', slice);
     },
 
     getNearestSlice(pos) {

src/components/VtkObliqueThreeView.vue

@@ -63,6 +63,7 @@ import vtkMultiSliceRepresentationProxy, {
 } from '@/src/vtk/MultiSliceRepresentationProxy';
 import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { useProxyRepresentation } from '@/src/composables/useProxyRepresentations';
 import PanTool from './tools/PanTool.vue';
 import { LPSAxisDir } from '../types/lps';
 import { useViewProxy } from '../composables/useViewProxy';
@@ -74,7 +75,6 @@ import { InitViewIDs } from '../config';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useResetViewsEvents } from './tools/ResetViews.vue';
 import { VTKResliceCursor, OBLIQUE_OUTLINE_COLORS } from '../constants';
-import { useSceneBuilder } from '../composables/useSceneBuilder';
 import useWindowingStore from '../store/view-configs/windowing';
 
 export default defineComponent({
@@ -106,16 +106,17 @@ export default defineComponent({
 
     // --- view proxy setup --- //
 
-    const { viewProxy, setContainer: setViewProxyContainer } =
-      useViewProxy<vtkLPSView3DProxy>(viewID, ViewProxyType.Oblique3D);
-
-    const { baseImageRep } = useSceneBuilder<vtkMultiSliceRepresentationProxy>(
+    const { viewProxy } = useViewProxy<vtkLPSView3DProxy>(
       viewID,
-      {
-        baseImage: currentImageID,
-      }
+      ViewProxyType.Oblique3D
     );
 
+    const { representation: baseImageRep } =
+      useProxyRepresentation<vtkMultiSliceRepresentationProxy>(
+        currentImageID,
+        viewID
+      );
+
     // --- Set the data and slice outline properties --- //
     const setOutlineProperties = () => {
       const outlineColors = [
@@ -135,7 +136,6 @@ export default defineComponent({
     };
 
     onBeforeUnmount(() => {
-      setViewProxyContainer(null);
       viewProxy.value.setContainer(null);
     });
 
@@ -144,7 +144,7 @@ export default defineComponent({
       viewProxy.value.setOrientationAxesType('cube');
       viewProxy.value.setBackground([0, 0, 0, 0]);
       viewProxy.value.getCamera().setParallelProjection(true);
-      setViewProxyContainer(vtkContainerRef.value);
+      viewProxy.value.setContainer(vtkContainerRef.value ?? null);
     });
 
     const resliceCursor = inject(VTKResliceCursor);