fix(LayerProperties): handle long layer names

src/components/LayerList.vue

@@ -21,7 +21,12 @@ export default defineComponent({
 
 <template>
   <div class="mx-2">
-    <layer-properties v-for="layer in layers" :key="layer.id" :layer="layer">
+    <layer-properties
+      v-for="layer in layers"
+      :key="layer.id"
+      :layer="layer"
+      class="py-4"
+    >
     </layer-properties>
   </div>
 </template>

src/components/LayerProperties.vue

@@ -4,8 +4,8 @@ import { InitViewSpecs } from '../config';
 import { useImageStore } from '../store/datasets-images';
 import { BlendConfig } from '../types/views';
 import { Layer } from '../store/datasets-layers';
-import { useDICOMStore } from '../store/datasets-dicom';
 import useLayerColoringStore from '../store/view-configs/layers';
+import { getImageID } from '../store/datasets';
 
 const VIEWS_2D = Object.entries(InitViewSpecs)
   .filter(([, { viewType }]) => viewType === '2D')
@@ -25,13 +25,9 @@ export default defineComponent({
 
     const imageName = computed(() => {
       const { selection } = props.layer;
-      if (selection.type === 'dicom')
-        return useDICOMStore().volumeInfo[selection.volumeKey].Modality;
-      if (selection.type === 'image')
-        return imageStore.metadata[selection.dataID].name;
-
-      const _exhaustiveCheck: never = selection;
-      throw new Error(`invalid selection type ${_exhaustiveCheck}`);
+      const imageID = getImageID(selection);
+      if (imageID === undefined) throw new Error('imageID is undefined');
+      return imageStore.metadata[imageID].name;
     });
 
     const layerColoringStore = useLayerColoringStore();
@@ -70,8 +66,15 @@ export default defineComponent({
 
 <template>
   <div class="mx-2" v-if="blendConfig">
+    <v-tooltip :text="imageName" location="top">
+      <template v-slot:activator="{ props }">
+        <h4 class="text-ellipsis" v-bind="props">{{ imageName }}</h4>
+      </template>
+    </v-tooltip>
+    <!-- padding top so thumb value tip does not overlap image name too much -->
     <v-slider
-      :label="imageName + ' Opacity'"
+      class="pt-4"
+      label="Opacity"
       min="0"
       max="1"
       step="0.01"

src/components/PatientStudyVolumeBrowser.vue

@@ -3,7 +3,7 @@ import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
 import { Image } from 'itk-wasm';
 import type { PropType } from 'vue';
 import GroupableItem from '@/src/components/GroupableItem.vue';
-import { useDICOMStore } from '../store/datasets-dicom';
+import { getDisplayName, useDICOMStore } from '../store/datasets-dicom';
 import {
   DataSelection,
   DICOMSelection,
@@ -104,6 +104,7 @@ export default defineComponent({
           // for thumbnailing
           cacheKey: dicomCacheKey(volumeKey),
           info: volumeInfo[volumeKey],
+          name: getDisplayName(volumeInfo[volumeKey]),
           // for UI selection
           selectionKey,
           layerable,
@@ -300,7 +301,7 @@ export default defineComponent({
                 class="text--primary text-caption text-center series-desc mt-n3"
               >
                 <div class="text-ellipsis">
-                  {{ volume.info.SeriesDescription || '(no description)' }}
+                  {{ volume.name }}
                 </div>
               </v-card-text>
             </v-card>

src/store/datasets-dicom.ts

@@ -101,6 +101,22 @@ const readDicomTags = (dicomIO: DICOMIO, file: File) =>
     { name: 'WindowWidth', tag: '0028|1051' },
   ]);
 
+/**
+ * Trims and collapses multiple spaces into one.
+ * @param name
+ * @returns string
+ */
+const cleanupName = (name: string) => {
+  return name.trim().replace(/\s+/g, ' ');
+};
+
+export const getDisplayName = (info: VolumeInfo) => {
+  return (
+    cleanupName(info.SeriesDescription || info.SeriesNumber) ||
+    info.SeriesInstanceUID
+  );
+};
+
 export const useDICOMStore = defineStore('dicom', {
   state: (): State => ({
     sliceData: {},

src/store/datasets.ts

@@ -34,8 +34,10 @@ export type DataSelection = DICOMSelection | ImageSelection;
 
 export const getImageID = (selection: DataSelection) => {
   if (selection.type === 'image') return selection.dataID;
-  if (selection.type === 'dicom')
-    return useDICOMStore().volumeToImageID[selection.volumeKey]; // volume selected, but image may not have been made yet
+  if (selection.type === 'dicom') {
+    // possibly undefined because image may not have been made yet
+    return useDICOMStore().volumeToImageID[selection.volumeKey];
+  }
 
   const _exhaustiveCheck: never = selection;
   throw new Error(`invalid selection type ${_exhaustiveCheck}`);