From b3bd269e436fa263a9b4f2cc721ac16052d5a1af Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 3 Nov 2023 18:02:05 -0400
Subject: [PATCH] fix(LayerProperties): handle long layer names

* Long layer names were squishing the opacity slider horizontally to nothing.
* For DICOM sourced layers, use datasets-image name for layer name.
---
 src/components/LayerList.vue                 |  7 ++++++-
 src/components/LayerProperties.vue           | 21 +++++++++++---------
 src/components/PatientStudyVolumeBrowser.vue |  5 +++--
 src/store/datasets-dicom.ts                  | 16 +++++++++++++++
 src/store/datasets.ts                        |  6 ++++--
 5 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/components/LayerList.vue b/src/components/LayerList.vue
index 7a327299f..b15861756 100644
--- a/src/components/LayerList.vue
+++ b/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>
diff --git a/src/components/LayerProperties.vue b/src/components/LayerProperties.vue
index 83d0cb67b..ad9495aa1 100644
--- a/src/components/LayerProperties.vue
+++ b/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"
diff --git a/src/components/PatientStudyVolumeBrowser.vue b/src/components/PatientStudyVolumeBrowser.vue
index 2b2316b18..4c5b575ab 100644
--- a/src/components/PatientStudyVolumeBrowser.vue
+++ b/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>
diff --git a/src/store/datasets-dicom.ts b/src/store/datasets-dicom.ts
index 45fbdf831..ef9b7f98a 100644
--- a/src/store/datasets-dicom.ts
+++ b/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: {},
diff --git a/src/store/datasets.ts b/src/store/datasets.ts
index 32d4c8788..103377fa2 100644
--- a/src/store/datasets.ts
+++ b/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}`);