From 0adec5b9b53462e8b7752160a01763b59d7b1796 Mon Sep 17 00:00:00 2001
From: paulpestov <10750176+paulpestov@users.noreply.github.com>
Date: Mon, 17 Jun 2024 14:01:38 +0200
Subject: [PATCH] fix: update metadata display

---
 .../workflows/timeline/TimelineItem.vue       |   4 +-
 .../timeline/TimelineItemMetadata.vue         | 120 ++++++++++--------
 2 files changed, 70 insertions(+), 54 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 84c5fd0..f2e655b 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -91,9 +91,7 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
             />
           </div>
         </div>
-        <div class="pt-6 pb-4 w-full xl:w-1/2">
-          <TimelineItemMetadata :gtMetadata="gt.metadata"/>
-        </div>
+        <TimelineItemMetadata :gtMetadata="gt.metadata"/>
       </div>
     </template>
     <template v-slot:default>
diff --git a/src/components/workflows/timeline/TimelineItemMetadata.vue b/src/components/workflows/timeline/TimelineItemMetadata.vue
index f480e36..3ce5bd7 100644
--- a/src/components/workflows/timeline/TimelineItemMetadata.vue
+++ b/src/components/workflows/timeline/TimelineItemMetadata.vue
@@ -14,6 +14,11 @@ const props = defineProps<{
 }>()
 
 const opLabelling = ref()
+const opVolume = ref()
+const volumeMetadata = {
+    label: t('volume'),
+    data: props.gtMetadata.volume,
+}
 
 const metadata = [
   {
@@ -43,70 +48,83 @@ const metadata = [
     href: 'url',
     isLink: true,
     isArray: true,
-  },
-   {
-    label: t('volume'),
-    data: props.gtMetadata.volume,
-    isDict: true,
-   }
+  }
 ]
 
 function toggleOpLabelling(event: any) {
   opLabelling.value?.toggle(event)
 }
 
+function toggleOpVolume(event: any) {
+  opVolume.value?.toggle(event)
+}
+
 </script>
 <template>
-<div class="sm:grid sm:grid-cols-2 sm:gap-2 lg:grid-cols-3 flex flex-col overflow-x-auto text-sm text-slate-700">
-  <div v-for="meta in metadata" :key="meta.label" :class="{'sm:col-span-2 lg:col-span-3': meta.isDict}">
-    <div class="flex flex-wrap">
-      <span class="mr-2 font-medium">{{ meta.label }}:</span>
-      <div v-if="meta.isLink && meta.isArray">
-        <a v-for="data in meta.data" :key="data.name" :href="data[meta.href as keyof typeof data]" target="_blank" class="flex items-center justify-start mr-2 text-highlight">
+  <div class="sm:grid sm:grid-cols-2 sm:gap-4 lg:grid-cols-5 flex flex-col overflow-x-auto text-sm text-slate-700 pt-6 w-full">
+    <div v-for="meta in metadata" :key="meta.label" :class="{'sm:col-span-2 lg:col-span-3': meta.isDict}">
+      <div class="flex flex-wrap">
+        <span class="mr-2 font-medium">{{ meta.label }}:</span>
+        <div v-if="meta.isLink && meta.isArray">
+          <a v-for="data in meta.data" :key="data.name" :href="data[meta.href as keyof typeof data]" target="_blank" class="flex items-center justify-start mr-2 text-highlight">
+            <Icon icon="ci:external-link" class="mr-1"/>
+            <span>{{ data[meta.title as keyof typeof data] }}</span>
+          </a>
+        </div>
+        <a v-else-if="meta.isLink && !meta.isArray" :href="meta.href" target="_blank" class="flex items-center justify-start mr-2 text-highlight">
           <Icon icon="ci:external-link" class="mr-1"/>
-          <span>{{ data[meta.title as keyof typeof data] }}</span>
+          <span>{{ meta.data }}</span>
         </a>
+        <span v-else-if="meta.isArray">{{ meta.data?.join(', ') }}</span>
+<!--        <div v-else-if="meta.isDict" class="flex flex-row space-x-2 px-2">-->
+<!--          -->
+<!--        </div>-->
+        <span v-else>{{ meta.data }}</span>
       </div>
-      <a v-else-if="meta.isLink && !meta.isArray" :href="meta.href" target="_blank" class="flex items-center justify-start mr-2 text-highlight">
-        <Icon icon="ci:external-link" class="mr-1"/>
-        <span>{{ meta.data }}</span>
-      </a>
-      <span v-else-if="meta.isArray">{{ meta.data?.join(', ') }}</span>
-      <div v-else-if="meta.isDict" class="flex flex-row space-x-2 px-2">
-        <span v-for="(value, key) in meta.data" :key="key">
-          <ul class="border-b-2 border-gray-300">
-            {{ key }}
-          </ul>
-          <ul>
-            {{ value }}
-          </ul>
-        </span>
-      </div>
-      <span v-else>{{ meta.data }}</span>
     </div>
   </div>
-</div>
-<Button @click="toggleOpLabelling" 
-  unstyled
-  :pt="{ 
-  root: 'text-sm my-2 flex items-center bg-gray-100 text-slate-700 p-2 hover:bg-gray-200 rounded hover:text-black focus:outline-none'
-}">
-  <span>{{ $t('labelling') }}</span>
-  <Icon v-if="opLabelling?.visible" icon="ic:baseline-close-fullscreen" class="ml-2"></Icon>
-  <Icon v-else icon="ic:baseline-open-in-full" class="ml-2"></Icon>
-</Button>
-<OverlayPanel ref="opLabelling" unstyled :pt="OverlayPanelDropdownStyles">
-  <template #container>
-    <div v-if="gtMetadata.labelling?.length > 0" class="flex flex-col py-1 space-y-1 overflow-y-scroll max-w-[80vw] sm:max-w-[90vw] max-h-[300px]">
-      <span v-for="label in gtMetadata.labelling.slice(0).sort()" :key="label" class="hover:bg-gray-200 rounded px-2 text-sm">
-        {{ label }}
-      </span>
-    </div>
-    <div v-else class="py-1 px-2">
-      <span>{{ $t('no_labels_for_this_entry') }}</span>
-    </div>
-  </template>
-</OverlayPanel>
+  <Button @click="toggleOpLabelling"
+    unstyled
+    :pt="{
+    root: 'text-sm my-2 flex items-center bg-gray-100 text-slate-700 p-2 hover:bg-gray-200 rounded hover:text-black focus:outline-none'
+  }">
+    <span>{{ $t('labelling') }}</span>
+    <Icon v-if="opLabelling?.visible" icon="ic:baseline-close-fullscreen" class="ml-2"></Icon>
+    <Icon v-else icon="ic:baseline-open-in-full" class="ml-2"></Icon>
+  </Button>
+
+  <Button @click="toggleOpVolume"
+    unstyled
+    :pt="{ root: 'text-sm my-2 ml-2 flex items-center bg-gray-100 text-slate-700 p-2 hover:bg-gray-200 rounded hover:text-black focus:outline-none'}"
+  >
+    <span>{{ $t('volume') }}</span>
+    <Icon v-if="opVolume?.visible" icon="ic:baseline-close-fullscreen" class="ml-2"></Icon>
+    <Icon v-else icon="ic:baseline-open-in-full" class="ml-2"></Icon>
+  </Button>
+
+  <OverlayPanel ref="opLabelling" unstyled :pt="OverlayPanelDropdownStyles">
+    <template #container>
+      <div v-if="gtMetadata.labelling?.length > 0" class="flex flex-col py-1 space-y-1 overflow-y-scroll max-w-[80vw] sm:max-w-[90vw] max-h-[300px]">
+        <span v-for="label in gtMetadata.labelling.slice(0).sort()" :key="label" class="hover:bg-gray-200 rounded px-2 text-sm">
+          {{ label }}
+        </span>
+      </div>
+      <div v-else class="py-1 px-2">
+        <span>{{ $t('no_labels_for_this_entry') }}</span>
+      </div>
+    </template>
+  </OverlayPanel>
+  <OverlayPanel ref="opVolume" unstyled :pt="OverlayPanelDropdownStyles">
+    <template #container>
+      <div class="flex space-x-2 p-4">
+        <div v-for="(value, key) in volumeMetadata.data" :key="key">
+          <div class="border-b-2 border-gray-300">{{ key }}</div>
+          <div>{{ value }}</div>
+        </div>
+      </div>
+
+    </template>
+  </OverlayPanel>
 </template>
 
 <style scoped lang="scss">