Merge pull request #387 from SCIInstitute/image-viewer-toggle

Add image viewer toggle
MedVIC-Lab · Jul 16, 2024 · e478055 · e478055
2 parents fc3a3c6 + e7839c6
commit e478055
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 8 deletions.
diff --git a/web/shapeworks/src/components/DataList.vue b/web/shapeworks/src/components/DataList.vue
@@ -9,9 +9,11 @@ import {
     allSubjectsForDataset,
     allDataObjectsInDataset,
     anatomies,
+    selectedAnatomies,
     selectedDataObjects,
     loadingState,
     loadReconstructedSamplesForProject,
+imageViewMode,
 } from '@/store';
 
 
@@ -31,8 +33,6 @@ export default {
         }
     },
     setup(props) {
-
-        const selectedAnatomies = ref<string[]>([]);
         const selectedSubjects = ref<number[]>([])
         const headers =  [
             {text: 'ID', value: 'id'},
@@ -60,7 +60,10 @@ export default {
             )).flat()
             loadReconstructedSamplesForProject('', 0)
             anatomies.value = Object.keys(
-                groupBy(allDataObjectsInDataset.value, 'anatomy_type')
+                {
+                    ...groupBy(allDataObjectsInDataset.value, 'anatomy_type'),
+                    ...groupBy(allDataObjectsInDataset.value, 'modality'),
+                }
             ).filter((key) => key !== 'undefined')
             selectedAnatomies.value = anatomies.value;
             if(allSubjectsForDataset.value.length > 0) {
@@ -83,15 +86,22 @@ export default {
                     return (
                         (
                             !selectedAnatomies.value.length ||
-                            selectedAnatomies.value.includes(dataObject.anatomy_type)
+                            selectedAnatomies.value.includes(dataObject.anatomy_type) ||
+                            selectedAnatomies.value.includes(dataObject.modality)
                         ) && selectedSubjects.value.includes(dataObject.subject)
                     )
                 }
             )
         }
 
         function selectedObjectsUpdated() {
-            const uniqueAnatomies = [...new Set(selectedDataObjects.value.map(item => item.anatomy_type))]
+            const uniqueAnatomies = [...new Set(selectedDataObjects.value.map(item => {
+                // if the item is an image, it will have "modality" instead of anatomy_type
+                if (item.modality && imageViewMode.value) {
+                    return item.modality
+                }
+                return item.anatomy_type
+            }))].filter((anatomy) => anatomy !== undefined);
             const uniqueSubjects = [...new Set(selectedDataObjects.value.map(item => item.subject))]
             if (JSON.stringify(uniqueAnatomies) !== JSON.stringify(selectedAnatomies.value)) {
                 selectedAnatomies.value = uniqueAnatomies
@@ -133,8 +143,9 @@ export default {
         <v-list dense shaped>
             <v-subheader>ANATOMIES</v-subheader>
             <v-list-item-group>
+                <!-- Anatomy list. Filter out any anatomies that match the image modality label (ex: anatomy_mri) -->
                 <v-list-item
-                    v-for="anatomy_type in anatomies"
+                    v-for="anatomy_type in anatomies.filter((anatomy) => anatomy !== allDataObjectsInDataset[0].modality)"
                     :key="anatomy_type"
                 >
                         <v-checkbox

diff --git a/web/shapeworks/src/components/RenderControls.vue b/web/shapeworks/src/components/RenderControls.vue
@@ -33,6 +33,8 @@ import {
     deepSSMSamplePage,
     uniformScale,
     DEEPSSM_SAMPLES_PER_PAGE,
+    selectedAnatomies,
+    allDataObjectsInDataset,
 } from '@/store';
 
 
@@ -81,6 +83,17 @@ export default {
         ]
         const axisSystem = ref()
 
+        function changeImageViewMode(value) {
+            imageViewMode.value = value;
+            // filter selectedAnatomies according to imageViewMode. True -> include 'anatomy_mri', False -> exclude 'anatomy_mri'
+            if (value) {
+                selectedAnatomies.value = [...selectedAnatomies.value, 'anatomy_mri']
+            } else {
+                const modality = allDataObjectsInDataset.value[0].modality
+                selectedAnatomies.value = selectedAnatomies.value.filter((anatomy) => anatomy !== modality)
+            }
+        }
+
         function changeAxisSystem(newSystemValue: string){
             const newSystem = axisSystemOptions.find(
                 (system) => system.value == newSystemValue
@@ -272,6 +285,7 @@ export default {
             imageViewWindowRange,
             changeImageViewSlice,
             changeAxisSystem,
+            changeImageViewMode,
             resetView,
             selectedDataObjects,
             captureThumbnail,
@@ -331,7 +345,13 @@ export default {
                 :items="axisSystemOptions"
                 @change="changeAxisSystem"
                 label="Axis System"
-                style="width: 150px"
+                style="width: 100px"
+            />
+            <v-switch
+                v-if="layersShown.includes('Original')"
+                :value="imageViewMode"
+                @change="changeImageViewMode"
+                label="Image View"
             />
             <v-switch
                 v-if="showAnalysisOptions && currentTab === 'analyze'"

diff --git a/web/shapeworks/src/store/index.ts b/web/shapeworks/src/store/index.ts
@@ -35,7 +35,9 @@ export const allDataObjectsInDataset = ref<DataObject[]>([])
 
 export const anatomies = ref<string[]>([]);
 
-export const selectedDataObjects = ref<DataObject[]>([])
+export const selectedAnatomies = ref<string[]>([]);
+
+export const selectedDataObjects = ref<DataObject[]>([]);
 
 export const orientationIndicator = ref<vtkAnnotatedCubeActor>(vtkAnnotatedCubeActor.newInstance())