UX DICOMWeb fixes

src/components/DataBrowser.vue

@@ -45,7 +45,10 @@ export default defineComponent({
           .length > 0
     );
 
-    const panels = ref<string[]>([SAMPLE_DATA_KEY]);
+    const panels = ref<string[]>([
+      SAMPLE_DATA_KEY,
+      ...(dicomWeb.isConfigured ? [DICOM_WEB_KEY] : []),
+    ]);
 
     watch(
       [hasAnonymousImages, patients] as const,

src/components/dicom-web/PatientDetails.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent, ref, toRefs } from 'vue';
+import { computed, defineComponent, ref, toRefs, watch } from 'vue';
 import { useDicomMetaStore } from '../../store/dicom-web/dicom-meta-store';
 import { useDicomWebStore } from '../../store/dicom-web/dicom-web-store';
 import StudyVolumeDicomWeb from './StudyVolumeDicomWeb.vue';
@@ -39,19 +39,38 @@ export default defineComponent({
       });
     });
 
+    const studyKeys = computed(() => studies.value.map(({ key }) => key));
+    const panels = ref<string[]>([]);
+
+    watch(
+      studyKeys,
+      (keys) => {
+        if (dicomWebStore.linkedToStudyOrSeries)
+          panels.value = Array.from(new Set([...panels.value, ...keys]));
+      },
+      { immediate: true }
+    );
+
     return {
       studies,
       isFetching,
+      panels,
     };
   },
 });
 </script>
 
 <template>
-  <v-expansion-panels id="patient-data-studies" accordion multiple>
+  <v-expansion-panels
+    id="patient-data-studies"
+    v-model="panels"
+    accordion
+    multiple
+  >
     <v-expansion-panel
       v-for="study in studies"
       :key="study.StudyInstanceUID"
+      :value="study.StudyInstanceUID"
       class="patient-data-study-panel"
     >
       <v-expansion-panel-title

src/components/dicom-web/PatientList.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, ref, watch } from 'vue';
 
 import { useDicomWebStore } from '@/src/store/dicom-web/dicom-web-store';
 import { useDicomMetaStore } from '@/src/store/dicom-web/dicom-meta-store';
@@ -11,9 +11,9 @@ export default defineComponent({
     PatientDetails,
   },
   setup() {
-    const dicomWeb = useDicomWebStore();
+    const dicomWebStore = useDicomWebStore();
     const dicomWebMeta = useDicomMetaStore();
-    dicomWeb.fetchInitialDicomsOnce();
+    dicomWebStore.fetchInitialDicomsOnce();
 
     const patients = computed(() =>
       Object.values(dicomWebMeta.patientInfo)
@@ -24,21 +24,43 @@ export default defineComponent({
         .sort((a, b) => (a.name < b.name ? -1 : 1))
     );
 
+    const patientKeys = computed(() => patients.value.map(({ key }) => key));
+    const panels = ref<string[]>([]);
+
+    watch(
+      patientKeys,
+      (keys) => {
+        if (dicomWebStore.linkedToStudyOrSeries)
+          panels.value = Array.from(new Set([...panels.value, ...keys]));
+      },
+      { immediate: true }
+    );
+
     return {
       patients,
-      dicomWeb,
+      dicomWebStore,
+      panels,
     };
   },
 });
 </script>
 
 <template>
-  <p v-if="dicomWeb.message.length > 0" class="error-message">
-    {{ dicomWeb.message }}
+  <p v-if="dicomWebStore.message.length > 0" class="error-message">
+    {{ dicomWebStore.message }}
   </p>
 
-  <v-expansion-panels v-else-if="patients.length > 0" multiple accordion>
-    <v-expansion-panel v-for="patient in patients" :key="patient.key">
+  <v-expansion-panels
+    v-else-if="patients.length > 0"
+    v-model="panels"
+    multiple
+    accordion
+  >
+    <v-expansion-panel
+      v-for="patient in patients"
+      :key="patient.key"
+      :value="patient.key"
+    >
       <v-expansion-panel-title>
         <div class="patient-header">
           <v-icon class="collection-header-icon">mdi-account</v-icon>

src/components/dicom-web/StudyVolumeDicomWeb.vue

@@ -26,11 +26,19 @@ export default defineComponent({
   },
   components: { PersistentOverlay },
   setup(props) {
-    const { volumeKeys } = toRefs(props);
-
     const dicomStore = useDicomMetaStore();
     const dicomWebStore = useDicomWebStore();
 
+    const { volumeKeys } = toRefs(props);
+
+    // If deep linking for specific series, don't try to show other series initially, so filter.
+    const volumeKeysWithInstanceInfo = computed(() => {
+      const { volumeInstances, instanceInfo } = dicomStore;
+      return volumeKeys.value.filter(
+        (volumeKey) => instanceInfo[volumeInstances[volumeKey][0]]
+      );
+    });
+
     const isFetching = ref(true);
     dicomWebStore.fetchVolumesMeta(volumeKeys.value).then(() => {
       isFetching.value = false;
@@ -40,7 +48,7 @@ export default defineComponent({
       if (isFetching.value) return [];
 
       const { volumeInfo, volumeInstances, instanceInfo } = dicomStore;
-      return volumeKeys.value.map((volumeKey) => {
+      return volumeKeysWithInstanceInfo.value.map((volumeKey) => {
         const { Rows: rows, Columns: columns } =
           instanceInfo[volumeInstances[volumeKey][0]];
         const info = volumeInfo[volumeKey];
@@ -60,7 +68,7 @@ export default defineComponent({
     const thumbnailCache = reactive<Record<string, string>>({});
 
     watch(
-      [volumeKeys, isFetching],
+      [volumeKeysWithInstanceInfo, isFetching],
       ([keys, guard]) => {
         if (guard) return;
 

src/store/dicom-web/dicom-web-store.ts

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useLocalStorage, UrlParams } from '@vueuse/core';
 import { defineStore } from 'pinia';
 import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
@@ -55,6 +55,8 @@ const levelToMetaKey = {
   series: 'SeriesInstanceUID',
 };
 
+type InitialDicomListFetchProgress = 'Idle' | 'Pending' | 'Done';
+
 /**
  * Collect DICOM data from DICOMWeb
  */
@@ -65,15 +67,21 @@ export const useDicomWebStore = defineStore('dicom-web', () => {
     ? ref(VITE_DICOM_WEB_NAME)
     : useLocalStorage<string>('dicomWebHostName', '');
 
-  const host = useLocalStorage<string | null>('dicomWebHost', ''); // null if cleared by vuetify text input
-
   // URL param overrides env var, which overrides local storage
   const urlParams = vtkURLExtract.extractURLParameters() as UrlParams;
   const dicomWebFromURLParam = urlParams[DICOM_WEB_URL_PARAM] as
     | string
     | undefined;
   const hostConfig = dicomWebFromURLParam ?? VITE_DICOM_WEB_URL;
-  if (hostConfig) host.value = hostConfig;
+
+  // Don't save URL param or env var to local storage. Only save user input.
+  const savedHost = useLocalStorage<string | null>('dicomWebHost', ''); // null if cleared by vuetify text input
+
+  const host = ref<string | null>(hostConfig ?? savedHost.value);
+
+  watch(savedHost, () => {
+    host.value = savedHost.value;
+  });
 
   // Remove trailing slash and pull study/series IDs from URL
   const parsedURL = computed(() => parseUrl(host.value ?? ''));
@@ -205,11 +213,15 @@ export const useDicomWebStore = defineStore('dicom-web', () => {
     }
   };
 
+  const fetchDicomsProgress = ref<InitialDicomListFetchProgress>('Idle');
   const fetchError = ref<undefined | unknown>(undefined);
-  let hasFetchedPatients = false;
+  // DICOMWeb DataBrowser components automatically expands panels if true
+  const linkedToStudyOrSeries = ref(false);
   const fetchInitialDicoms = async () => {
-    hasFetchedPatients = true;
+    fetchDicomsProgress.value = 'Pending';
     fetchError.value = undefined;
+    linkedToStudyOrSeries.value = false;
+
     const dicoms = useDicomMetaStore();
     dicoms.$reset();
     if (!cleanHost.value) return;
@@ -218,6 +230,9 @@ export const useDicomWebStore = defineStore('dicom-web', () => {
       parsedURL.value
     ).pop() as keyof typeof fetchFunctions; // at least host key guaranteed to exist
 
+    linkedToStudyOrSeries.value =
+      deepestLevel === 'studies' || deepestLevel === 'series';
+
     const fetchFunc = fetchFunctions[deepestLevel];
     const urlIDs = omit(parsedURL.value, 'host');
     const fetchOptions = remapKeys(urlIDs, levelToFetchKey);
@@ -243,21 +258,28 @@ export const useDicomWebStore = defineStore('dicom-web', () => {
       const seriesID = Object.values(parsedURL.value).pop() as string;
       downloadVolume(seriesID);
     }
+
+    fetchDicomsProgress.value = 'Done';
   };
 
-  // Safe to call in ephemeral components' setup()
+  // Safe to call in components' setup()
   const fetchInitialDicomsOnce = () => {
-    if (!hasFetchedPatients) {
+    if (fetchDicomsProgress.value === 'Idle') {
       fetchInitialDicoms();
     }
   };
 
   const message = computed(() => {
     if (fetchError.value)
       return `Error fetching DICOMWeb data: ${fetchError.value}`;
+
     const dicoms = useDicomMetaStore();
-    if (Object.values(dicoms.patientInfo).length === 0)
+    if (
+      fetchDicomsProgress.value === 'Done' &&
+      Object.values(dicoms.patientInfo).length === 0
+    )
       return 'Found zero dicoms.';
+
     return '';
   });
 
@@ -285,6 +307,7 @@ export const useDicomWebStore = defineStore('dicom-web', () => {
     hostName,
     message,
     volumes,
+    linkedToStudyOrSeries,
     fetchInitialDicoms,
     fetchInitialDicomsOnce,
     fetchPatientMeta,