From d68ffe8ea9a63687181e76ad8e42783bbd36cf30 Mon Sep 17 00:00:00 2001
From: Jasper Frerichs <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 7 Jun 2024 11:35:39 +0200
Subject: [PATCH 01/15] wip

---
 .../workflows/timeline/TimelineItem.vue       | 86 ++++++++++++++++++-
 src/locales/de.json                           | 12 ++-
 src/locales/en.json                           |  9 +-
 src/types/index.d.ts                          | 23 ++++-
 4 files changed, 123 insertions(+), 7 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index c265cfc..5d939c3 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -9,6 +9,10 @@ import { Icon } from '@iconify/vue'
 import { onMounted, nextTick, ref } from "vue"
 import { OverlayPanelDropdownStyles } from "@/helpers/pt"
 import workflowsStore from "@/store/workflows-store"
+import { useI18n } from "vue-i18n"
+import Tag from "primevue/tag"
+
+const { t } = useI18n()
 
 const props = defineProps<{
   gt: GroundTruth,
@@ -22,6 +26,48 @@ const startDate = ref<Date>(new Date('2023-10-01'))
 const endDate = ref<Date>(new Date())
 const workflows = ref<Workflow[]>([])
 
+const metadata = [
+  {
+    label: t('url'),
+    data: props.gt.metadata.title,
+    href: props.gt.metadata.url,
+    isLink: true,
+  },
+  {
+    label: t('language', props.gt.metadata.language.length),
+    data: props.gt.metadata.language,
+    isArray: true,
+  },
+  {
+    label: t('script', props.gt.metadata.script.length),
+    data: props.gt.metadata.script,
+    isArray: true,
+  },
+  {
+    label: t('script-type'),
+    data: props.gt.metadata["script-type"],
+  },
+  {
+    label: t('license', props.gt.metadata.license.length),
+    data: props.gt.metadata.license,
+    title: 'name',
+    href: 'url',
+    isLink: true,
+    isArray: true,
+  },
+   {
+    label: t('volume'),
+    data: props.gt.metadata.volume,
+    isDict: true,
+   },
+   {
+    label: t('labelling'),
+    data: props.gt.metadata.labelling?.sort(),
+    isArray: true,
+    isLabelling: true,
+   }
+]
+
 onMounted(() => {
   workflows.value = workflowsStore.workflows
 })
@@ -69,8 +115,10 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
     }"
   >
     <template v-slot:header>
-      <div class="flex w-full px-4 pb-2">
-        <h2 class="w-1/2 text-xl font-bold flex-shrink-0 truncate" :title="gt.label">{{ gt.label }}</h2>
+      <div class="flex w-full px-4 pb-2 flex-wrap">
+        <div class="w-1/2 flex">
+          <h2 class="w-full flex-shrink-0 text-xl font-bold truncate" :title="gt.label">{{ gt.label }}</h2>
+        </div>
         <div class="w-1/2 flex justify-end">
           <div class="flex overflow-x-auto">
             <MetricAverageChart
@@ -85,6 +133,36 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
             />
           </div>
         </div>
+        <div class="flex-col">
+        <div v-for="meta in metadata">
+            <p class="flex flex-wrap">
+              <span class="mr-2">{{ meta.label }}:</span>
+              <a v-if="meta.isLink && meta.isArray" v-for="data in meta.data" :href="data[meta.href as keyof typeof data]" 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>
+              <a v-else-if="meta.isLink && !meta.isArray" :href="meta.href" class="flex items-center justify-start mr-2 text-highlight">
+                <Icon icon="ci:external-link" class="mr-1"/>
+                <span>{{ meta.data }}</span>
+              </a>
+              <div v-else-if="meta.isLabelling" class="flex flex-wrap pr-4 justify-start items-center gap-1">
+                <Tag v-for="data in meta.data" :value="data" unstyled class="text-xs p-1 bg-gray-200 rounded-lg"></Tag>
+              </div>
+              <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, index) in meta.data">
+                  <ul class="border-b-2">
+                    {{ key }}
+                  </ul>
+                  <ul>
+                    {{ value }}
+                  </ul>
+                </span>
+              </div>
+              <span v-else>{{ meta.data }}</span>
+            </p>
+          </div>
+          </div>
       </div>
     </template>
     <template v-slot:default>
@@ -104,7 +182,7 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
               <span
                   v-for="step in workflow.steps"
                   :key="step.id"
-                  class="p-1 cursor-pointer"
+                  class="p-1 cursor-pointer text-highlight"
                   @click="toggleParameterOverlay(step, $event)"
               >
               {{ getStepAcronym(step.id) }}
@@ -156,7 +234,7 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
 </template>
 
 <style scoped lang="scss">
-span:hover {
+.text-highlight:hover {
   color: var(--highlight-text-color);
 }
 </style>
diff --git a/src/locales/de.json b/src/locales/de.json
index 951f383..218dccc 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -61,5 +61,15 @@
   "negative": "negativ",
   "better": "besser",
   "equal": "gleich",
-  "worse": "schlechter"
+  "worse": "schlechter",
+  "percentage": "Prozent",
+  "pages": "Seiten",
+  "seconds": "Sekunden",
+  "url": "URL",
+  "language": "Sprache | Sprachen",
+  "script": "Skript | Skripte",
+  "scripttype": "Skript-Typ",
+  "license": "Lizenz | Lizenzen",
+  "volume": "Umfang",
+  "labelling": "Kennzeichnung"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index ea04f5d..bfdb7d9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -58,5 +58,12 @@
   "worse": "worse",
   "percentage": "percentage",
   "pages": "pages",
-  "seconds": "seconds"
+  "seconds": "seconds",
+  "url": "URL",
+  "language": "Language | Languages",
+  "script": "Script | Scripts",
+  "script-type": "Script-Type",
+  "license": "License | Licenses",
+  "volume": "Volume",
+  "labelling": "Labelling"
 }
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 02c7f3b..7eda565 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -1,6 +1,27 @@
 export interface GroundTruth {
   id: string,
-  label: string
+  label: string,
+  metadata: {
+    title: string,
+    url: string,
+    language: string[],
+    script: string[],
+    'script-type': string,
+    license: {
+      name: string,
+      url: string,
+    }[],
+    volume: {
+      TxtRegion?: string,
+      GraphRegion?: string,
+      SepRegion?: string,
+      MusicRegion?: string,
+      NoiseRegion?: string,
+      TextLine?: string,
+      Page?: string,
+    }
+    labelling: string[],
+  }
 }
 
 export interface Workflow {

From 270fd761d07ebbf2acc04aad0729e8b02b0de76f Mon Sep 17 00:00:00 2001
From: Jasper Frerichs <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 7 Jun 2024 15:50:08 +0200
Subject: [PATCH 02/15] wip

---
 src/components/workflows/timeline/TimelineItem.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 5d939c3..8b90dbe 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -133,10 +133,10 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
             />
           </div>
         </div>
-        <div class="flex-col">
-        <div v-for="meta in metadata">
+        <div class="sm:grid sm:grid-cols-2 sm:gap-2 lg:grid-cols-3 flex flex-col w-full overflow-x-auto pt-2">
+          <div v-for="meta in metadata" :class="{'sm:col-span-2 lg:col-span-3': meta.isLabelling || meta.isDict}">
             <p class="flex flex-wrap">
-              <span class="mr-2">{{ meta.label }}:</span>
+              <span class="mr-2 font-semibold">{{ meta.label }}:</span>
               <a v-if="meta.isLink && meta.isArray" v-for="data in meta.data" :href="data[meta.href as keyof typeof data]" 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>
@@ -162,7 +162,7 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
               <span v-else>{{ meta.data }}</span>
             </p>
           </div>
-          </div>
+        </div>
       </div>
     </template>
     <template v-slot:default>

From acb3804d2ad5017edc953bdf61ad367ef7d2e0b3 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Tue, 11 Jun 2024 17:36:24 +0200
Subject: [PATCH 03/15] hide labels in overlay

---
 .../workflows/timeline/TimelineItem.vue       | 51 ++++++++++++-------
 src/locales/de.json                           |  3 +-
 src/locales/en.json                           |  3 +-
 3 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 8b90dbe..edb1d92 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -10,7 +10,6 @@ import { onMounted, nextTick, ref } from "vue"
 import { OverlayPanelDropdownStyles } from "@/helpers/pt"
 import workflowsStore from "@/store/workflows-store"
 import { useI18n } from "vue-i18n"
-import Tag from "primevue/tag"
 
 const { t } = useI18n()
 
@@ -20,6 +19,7 @@ const props = defineProps<{
 }>()
 
 const op = ref<OverlayPanel>()
+const opLabelling = ref()
 const isOpVisible = ref(false)
 const selectedStep = ref<WorkflowStep | null>(null)
 const startDate = ref<Date>(new Date('2023-10-01'))
@@ -59,12 +59,6 @@ const metadata = [
     label: t('volume'),
     data: props.gt.metadata.volume,
     isDict: true,
-   },
-   {
-    label: t('labelling'),
-    data: props.gt.metadata.labelling?.sort(),
-    isArray: true,
-    isLabelling: true,
    }
 ]
 
@@ -97,6 +91,9 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
     showParametersOverlay(step, event)
   }
 }
+function toggleOpLabelling(event: any) {
+  opLabelling.value?.toggle(event)
+}
 
 </script>
 
@@ -134,23 +131,24 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
           </div>
         </div>
         <div class="sm:grid sm:grid-cols-2 sm:gap-2 lg:grid-cols-3 flex flex-col w-full overflow-x-auto pt-2">
-          <div v-for="meta in metadata" :class="{'sm:col-span-2 lg:col-span-3': meta.isLabelling || meta.isDict}">
-            <p class="flex flex-wrap">
+          <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-semibold">{{ meta.label }}:</span>
-              <a v-if="meta.isLink && meta.isArray" v-for="data in meta.data" :href="data[meta.href as keyof typeof data]" 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 v-if="meta.isLink && meta.isArray">
+                <a v-for="data in meta.data" :key="data.name" :href="data[meta.href as keyof typeof data]" 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" class="flex items-center justify-start mr-2 text-highlight">
                 <Icon icon="ci:external-link" class="mr-1"/>
                 <span>{{ meta.data }}</span>
               </a>
-              <div v-else-if="meta.isLabelling" class="flex flex-wrap pr-4 justify-start items-center gap-1">
-                <Tag v-for="data in meta.data" :value="data" unstyled class="text-xs p-1 bg-gray-200 rounded-lg"></Tag>
-              </div>
               <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, index) in meta.data">
+                <!-- eslint-disable vue/no-unused-vars -->
+                <span v-for="(value, key, _) in meta.data" :key="key">
+                  <!-- eslint-enable -->
                   <ul class="border-b-2">
                     {{ key }}
                   </ul>
@@ -160,9 +158,26 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
                 </span>
               </div>
               <span v-else>{{ meta.data }}</span>
-            </p>
+            </div>
           </div>
         </div>
+        <button class="font-semibold my-2 flex items-center text-highlight" @click="toggleOpLabelling">
+          <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="gt.metadata.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 gt.metadata.labelling.slice(0).sort()" :key="label" class="hover:bg-gray-200 rounded px-2">
+                {{ label }}
+              </span>
+            </div>
+            <div v-else class="py-1 px-2">
+              <span>{{ $t('no_labels_for_this_entry') }}</span>
+            </div>
+          </template>
+        </OverlayPanel>
       </div>
     </template>
     <template v-slot:default>
diff --git a/src/locales/de.json b/src/locales/de.json
index 218dccc..9dd74e9 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -71,5 +71,6 @@
   "scripttype": "Skript-Typ",
   "license": "Lizenz | Lizenzen",
   "volume": "Umfang",
-  "labelling": "Kennzeichnung"
+  "labelling": "Kennzeichnung",
+  "no_labels_for_this_entry": "Keine Kennzeichnung für diesen Eintrag."
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index bfdb7d9..384c38c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -65,5 +65,6 @@
   "script-type": "Script-Type",
   "license": "License | Licenses",
   "volume": "Volume",
-  "labelling": "Labelling"
+  "labelling": "Labelling",
+  "no_labels_for_this_entry": "No labels for this entry."
 }

From 65be49d43db74e39c1a170f42e56f784eae15a00 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Thu, 13 Jun 2024 11:06:13 +0200
Subject: [PATCH 04/15] refactor: use value, key instead of value, key, index

---
 src/components/workflows/timeline/TimelineItem.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index edb1d92..085db34 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -146,9 +146,7 @@ function toggleOpLabelling(event: any) {
               </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">
-                <!-- eslint-disable vue/no-unused-vars -->
-                <span v-for="(value, key, _) in meta.data" :key="key">
-                  <!-- eslint-enable -->
+                <span v-for="(value, key) in meta.data" :key="key">
                   <ul class="border-b-2">
                     {{ key }}
                   </ul>

From 1beffb1c225764c91b5e1932264c0877a002a69a Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Thu, 13 Jun 2024 13:17:31 +0200
Subject: [PATCH 05/15] fix: add target blank to all external links

---
 src/components/workflows/timeline/TimelineItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 085db34..b9cd915 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -135,12 +135,12 @@ function toggleOpLabelling(event: any) {
             <div class="flex flex-wrap">
               <span class="mr-2 font-semibold">{{ 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]" class="flex items-center justify-start mr-2 text-highlight">
+                <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" class="flex items-center justify-start mr-2 text-highlight">
+              <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>

From d17f42572831cc67ab9f6e25301cfd8fdcf5df12 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 14 Jun 2024 11:28:42 +0200
Subject: [PATCH 06/15] fix: make metadata font smaller and more muted

---
 .../workflows/timeline/TimelineItem.vue       | 82 ++++++++++---------
 1 file changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index b9cd915..655083f 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -130,52 +130,54 @@ function toggleOpLabelling(event: any) {
             />
           </div>
         </div>
-        <div class="sm:grid sm:grid-cols-2 sm:gap-2 lg:grid-cols-3 flex flex-col w-full overflow-x-auto pt-2">
-          <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-semibold">{{ 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="pt-6 pb-4 w-full">
+          <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">
+                    <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">
+                  <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>
-              <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">
-                    {{ key }}
-                  </ul>
-                  <ul>
-                    {{ value }}
-                  </ul>
-                </span>
-              </div>
-              <span v-else>{{ meta.data }}</span>
             </div>
           </div>
+          <button class="font-medium text-sm my-2 flex items-center text-highlight" @click="toggleOpLabelling">
+            <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="gt.metadata.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 gt.metadata.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>
         </div>
-        <button class="font-semibold my-2 flex items-center text-highlight" @click="toggleOpLabelling">
-          <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="gt.metadata.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 gt.metadata.labelling.slice(0).sort()" :key="label" class="hover:bg-gray-200 rounded px-2">
-                {{ label }}
-              </span>
-            </div>
-            <div v-else class="py-1 px-2">
-              <span>{{ $t('no_labels_for_this_entry') }}</span>
-            </div>
-          </template>
-        </OverlayPanel>
       </div>
     </template>
     <template v-slot:default>

From ac06de774ca07d1753744e9305bfd710d61b73dc Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 14 Jun 2024 13:22:05 +0200
Subject: [PATCH 07/15] fix: make button more visible as a button

---
 src/components/workflows/timeline/TimelineItem.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 655083f..94efc50 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -10,6 +10,7 @@ import { onMounted, nextTick, ref } from "vue"
 import { OverlayPanelDropdownStyles } from "@/helpers/pt"
 import workflowsStore from "@/store/workflows-store"
 import { useI18n } from "vue-i18n"
+import Button from "primevue/button"
 
 const { t } = useI18n()
 
@@ -160,11 +161,15 @@ function toggleOpLabelling(event: any) {
               </div>
             </div>
           </div>
-          <button class="font-medium text-sm my-2 flex items-center text-highlight" @click="toggleOpLabelling">
+          <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>
           <OverlayPanel ref="opLabelling" unstyled :pt="OverlayPanelDropdownStyles">
             <template #container>
               <div v-if="gt.metadata.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]">

From fc46a6c2a4493ef8c6418432d2a5da01f12cf3cd Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 14 Jun 2024 13:53:47 +0200
Subject: [PATCH 08/15] refactor: make gtMetadata own component

---
 .../workflows/timeline/TimelineItem.vue       |  94 +-------------
 .../timeline/TimelineItemMetadata.vue         | 116 ++++++++++++++++++
 2 files changed, 119 insertions(+), 91 deletions(-)
 create mode 100644 src/components/workflows/timeline/TimelineItemMetadata.vue

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 94efc50..1ea883c 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -9,10 +9,8 @@ import { Icon } from '@iconify/vue'
 import { onMounted, nextTick, ref } from "vue"
 import { OverlayPanelDropdownStyles } from "@/helpers/pt"
 import workflowsStore from "@/store/workflows-store"
-import { useI18n } from "vue-i18n"
-import Button from "primevue/button"
+import TimelineItemMetadata from "@/components/workflows/timeline/TimelineItemMetadata.vue"
 
-const { t } = useI18n()
 
 const props = defineProps<{
   gt: GroundTruth,
@@ -27,41 +25,6 @@ const startDate = ref<Date>(new Date('2023-10-01'))
 const endDate = ref<Date>(new Date())
 const workflows = ref<Workflow[]>([])
 
-const metadata = [
-  {
-    label: t('url'),
-    data: props.gt.metadata.title,
-    href: props.gt.metadata.url,
-    isLink: true,
-  },
-  {
-    label: t('language', props.gt.metadata.language.length),
-    data: props.gt.metadata.language,
-    isArray: true,
-  },
-  {
-    label: t('script', props.gt.metadata.script.length),
-    data: props.gt.metadata.script,
-    isArray: true,
-  },
-  {
-    label: t('script-type'),
-    data: props.gt.metadata["script-type"],
-  },
-  {
-    label: t('license', props.gt.metadata.license.length),
-    data: props.gt.metadata.license,
-    title: 'name',
-    href: 'url',
-    isLink: true,
-    isArray: true,
-  },
-   {
-    label: t('volume'),
-    data: props.gt.metadata.volume,
-    isDict: true,
-   }
-]
 
 onMounted(() => {
   workflows.value = workflowsStore.workflows
@@ -92,9 +55,7 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
     showParametersOverlay(step, event)
   }
 }
-function toggleOpLabelling(event: any) {
-  opLabelling.value?.toggle(event)
-}
+
 
 </script>
 
@@ -132,56 +93,7 @@ function toggleOpLabelling(event: any) {
           </div>
         </div>
         <div class="pt-6 pb-4 w-full">
-          <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">
-                    <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>{{ 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="gt.metadata.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 gt.metadata.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>
+          <TimelineItemMetadata :gtMetadata="gt.metadata"/>
         </div>
       </div>
     </template>
diff --git a/src/components/workflows/timeline/TimelineItemMetadata.vue b/src/components/workflows/timeline/TimelineItemMetadata.vue
new file mode 100644
index 0000000..f480e36
--- /dev/null
+++ b/src/components/workflows/timeline/TimelineItemMetadata.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import OverlayPanel from "primevue/overlaypanel"
+import Button from "primevue/button"
+import { Icon } from "@iconify/vue"
+import { OverlayPanelDropdownStyles } from "@/helpers/pt"
+import { ref } from "vue"
+import type { GroundTruth } from "@/types"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  gtMetadata: GroundTruth["metadata"]
+}>()
+
+const opLabelling = ref()
+
+const metadata = [
+  {
+    label: t('url'),
+    data: props.gtMetadata.title,
+    href: props.gtMetadata.url,
+    isLink: true,
+  },
+  {
+    label: t('language', props.gtMetadata.language.length),
+    data: props.gtMetadata.language,
+    isArray: true,
+  },
+  {
+    label: t('script', props.gtMetadata.script.length),
+    data: props.gtMetadata.script,
+    isArray: true,
+  },
+  {
+    label: t('script-type'),
+    data: props.gtMetadata["script-type"],
+  },
+  {
+    label: t('license', props.gtMetadata.license.length),
+    data: props.gtMetadata.license,
+    title: 'name',
+    href: 'url',
+    isLink: true,
+    isArray: true,
+  },
+   {
+    label: t('volume'),
+    data: props.gtMetadata.volume,
+    isDict: true,
+   }
+]
+
+function toggleOpLabelling(event: any) {
+  opLabelling.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">
+          <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>{{ 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>
+</template>
+
+<style scoped lang="scss">
+.text-highlight:hover {
+  color: var(--highlight-text-color);
+}
+</style>
\ No newline at end of file

From a0fe9739acb336e9330bb5ffd51a0c8d7a76242d Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 14 Jun 2024 13:55:19 +0200
Subject: [PATCH 09/15] fix: smaller width on xl screens to avoid stretching

---
 src/components/workflows/timeline/TimelineItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 1ea883c..e2a1efa 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -92,7 +92,7 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
             />
           </div>
         </div>
-        <div class="pt-6 pb-4 w-full">
+        <div class="pt-6 pb-4 w-full xl:w-1/2">
           <TimelineItemMetadata :gtMetadata="gt.metadata"/>
         </div>
       </div>

From 820a540f6aa9f38c7e3c0b9a7a0497de6969d5af Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 14 Jun 2024 13:57:44 +0200
Subject: [PATCH 10/15] style: remove unused var

---
 src/components/workflows/timeline/TimelineItem.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index e2a1efa..84c5fd0 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -18,7 +18,6 @@ const props = defineProps<{
 }>()
 
 const op = ref<OverlayPanel>()
-const opLabelling = ref()
 const isOpVisible = ref(false)
 const selectedStep = ref<WorkflowStep | null>(null)
 const startDate = ref<Date>(new Date('2023-10-01'))

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 11/15] 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">

From db360bd393f64b4e660c7b65bd97409e84df190c Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Mon, 17 Jun 2024 15:21:16 +0200
Subject: [PATCH 12/15] fix: display volume of reichsanzeiger correctly

---
 src/components/workflows/timeline/TimelineItemMetadata.vue | 2 +-
 src/types/index.d.ts                                       | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineItemMetadata.vue b/src/components/workflows/timeline/TimelineItemMetadata.vue
index 3ce5bd7..d34de2e 100644
--- a/src/components/workflows/timeline/TimelineItemMetadata.vue
+++ b/src/components/workflows/timeline/TimelineItemMetadata.vue
@@ -17,7 +17,7 @@ const opLabelling = ref()
 const opVolume = ref()
 const volumeMetadata = {
     label: t('volume'),
-    data: props.gtMetadata.volume,
+    data: Array.isArray(props.gtMetadata.volume) ? props.gtMetadata.volume.reduce((acc, curr) => ({...acc, [curr.metric]: curr.count}), {}) : props.gtMetadata.volume,
 }
 
 const metadata = [
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index f13780a..270a5ac 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -19,7 +19,11 @@ export interface GroundTruth {
       NoiseRegion?: string,
       TextLine?: string,
       Page?: string,
-    }
+    } |
+    {
+      metric: string,
+      count: number,
+    }[]
     labelling: string[],
   }
 }

From 16b62536388a6fae20cacf7604f6b3a77de657f3 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Mon, 17 Jun 2024 15:25:32 +0200
Subject: [PATCH 13/15] style: spaces

---
 src/components/workflows/timeline/TimelineItemMetadata.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/workflows/timeline/TimelineItemMetadata.vue b/src/components/workflows/timeline/TimelineItemMetadata.vue
index d34de2e..cb83134 100644
--- a/src/components/workflows/timeline/TimelineItemMetadata.vue
+++ b/src/components/workflows/timeline/TimelineItemMetadata.vue
@@ -17,7 +17,7 @@ const opLabelling = ref()
 const opVolume = ref()
 const volumeMetadata = {
     label: t('volume'),
-    data: Array.isArray(props.gtMetadata.volume) ? props.gtMetadata.volume.reduce((acc, curr) => ({...acc, [curr.metric]: curr.count}), {}) : props.gtMetadata.volume,
+    data: Array.isArray(props.gtMetadata.volume) ? props.gtMetadata.volume.reduce((acc, curr) => ({ ...acc, [curr.metric]: curr.count }), {}) : props.gtMetadata.volume,
 }
 
 const metadata = [

From a9fdc7a330c48a82f8859ce21f75a0740c7fe8c6 Mon Sep 17 00:00:00 2001
From: paulpestov <10750176+paulpestov@users.noreply.github.com>
Date: Tue, 18 Jun 2024 12:50:44 +0200
Subject: [PATCH 14/15] fix: update metadata display

---
 .../workflows/timeline/MetricAverageChart.vue |  2 +-
 .../workflows/timeline/TimelineItem.vue       | 26 ++++++---
 .../timeline/TimelineItemMetadata.vue         | 55 +++++++------------
 src/locales/de.json                           |  3 +-
 src/locales/en.json                           |  4 +-
 5 files changed, 44 insertions(+), 46 deletions(-)

diff --git a/src/components/workflows/timeline/MetricAverageChart.vue b/src/components/workflows/timeline/MetricAverageChart.vue
index 0cd682c..54e6a93 100644
--- a/src/components/workflows/timeline/MetricAverageChart.vue
+++ b/src/components/workflows/timeline/MetricAverageChart.vue
@@ -65,7 +65,7 @@ function tooltipContent(d: TimelineChartDataPoint) {
 </script>
 
 <template>
-  <div @click="op?.toggle($event)" class="cursor-pointer flex justify-end">
+  <div @click="op?.toggle($event)" class="cursor-pointer flex">
     <BaseTimelineChart
       :data="data"
       :max-y="maxY"
diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index f2e655b..9117ae3 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -73,12 +73,24 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
     }"
   >
     <template v-slot:header>
-      <div class="flex w-full px-4 pb-2 flex-wrap">
-        <div class="w-1/2 flex">
-          <h2 class="w-full flex-shrink-0 text-xl font-bold truncate" :title="gt.label">{{ gt.label }}</h2>
+      <div class="flex flex-col px-4 pb-2">
+        <div class="flex items-center overflow-hidden">
+          <h2 class="text-xl font-bold truncate mr-8" :title="gt.label">{{ gt.label }}</h2>
+          <a :href="gt.metadata.url" class="text-gray-500 hover:text-gray-600 flex-shrink-0 ml-auto mr-2 flex items-center bg-gray-100 rounded-full py-1 px-2">
+            <Icon icon="mdi:github" class="text-xl mr-1"/>
+            <span class="text-xs">{{ gt.metadata.title }}</span>
+          </a>
+          <a :href="gt.metadata.license[0].url" class="text-gray-500 hover:text-gray-600 flex-shrink-0 flex items-center bg-gray-100 rounded-full py-1 px-2">
+            <Icon icon="octicon:law" class="text-xl mr-1"/>
+            <span class="text-xs">{{ gt.metadata.license[0].name }}</span>
+          </a>
         </div>
-        <div class="w-1/2 flex justify-end">
-          <div class="flex overflow-x-auto">
+        <div class="flex mt-6">
+          <div class="w-1/2">
+            <TimelineItemMetadata :gtMetadata="gt.metadata"/>
+          </div>
+          <div class="w-1/2 flex flex-col overflow-x-auto items-end">
+            <h3 class="font-bold pr-[240px] mb-2">{{$t('average_timeline')}}</h3>
             <MetricAverageChart
               :workflow-name="$t('average')"
               :gt-name="gt.label"
@@ -88,10 +100,10 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
               :width="400"
               :start-date="startDate"
               :end-date="endDate"
-            />
+          />
           </div>
         </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 cb83134..c53e53d 100644
--- a/src/components/workflows/timeline/TimelineItemMetadata.vue
+++ b/src/components/workflows/timeline/TimelineItemMetadata.vue
@@ -21,12 +21,6 @@ const volumeMetadata = {
 }
 
 const metadata = [
-  {
-    label: t('url'),
-    data: props.gtMetadata.title,
-    href: props.gtMetadata.url,
-    isLink: true,
-  },
   {
     label: t('language', props.gtMetadata.language.length),
     data: props.gtMetadata.language,
@@ -41,14 +35,6 @@ const metadata = [
     label: t('script-type'),
     data: props.gtMetadata["script-type"],
   },
-  {
-    label: t('license', props.gtMetadata.license.length),
-    data: props.gtMetadata.license,
-    title: 'name',
-    href: 'url',
-    isLink: true,
-    isArray: true,
-  }
 ]
 
 function toggleOpLabelling(event: any) {
@@ -61,9 +47,9 @@ function toggleOpVolume(event: any) {
 
 </script>
 <template>
-  <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 class="flex space-x-5 items-start text-sm text-slate-700 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">
+      <div class="flex flex-col">
         <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">
@@ -76,31 +62,28 @@ function toggleOpVolume(event: any) {
           <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>
     </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'
+    <Button @click="toggleOpLabelling"
+            unstyled
+            :pt="{
+    root: 'text-sm 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>
+      <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>
+    <Button @click="toggleOpVolume"
+            unstyled
+            :pt="{ root: 'text-sm 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>
+  </div>
 
   <OverlayPanel ref="opLabelling" unstyled :pt="OverlayPanelDropdownStyles">
     <template #container>
diff --git a/src/locales/de.json b/src/locales/de.json
index 7a6655b..d367ca3 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -79,5 +79,6 @@
   "license": "Lizenz | Lizenzen",
   "volume": "Umfang",
   "labelling": "Kennzeichnung",
-  "no_labels_for_this_entry": "Keine Kennzeichnung für diesen Eintrag."
+  "no_labels_for_this_entry": "Keine Kennzeichnung für diesen Eintrag.",
+  "average_timeline": "Chronik (Durchschnitt)"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 506050a..1ab9d4c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -73,5 +73,7 @@
   "license": "License | Licenses",
   "volume": "Volume",
   "labelling": "Labelling",
-  "no_labels_for_this_entry": "No labels for this entry."
+  "no_labels_for_this_entry": "No labels for this entry.",
+  "average_timeline": "Average Timeline"
+
 }

From 829ebb3b1f4eaa17c0dc72cf2476e0daa66ef5ae Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Tue, 18 Jun 2024 14:22:36 +0200
Subject: [PATCH 15/15] fix: adjust design for smaller screen sizes

---
 .../workflows/timeline/TimelineItem.vue       |  6 +++---
 .../timeline/TimelineItemMetadata.vue         | 20 +++++--------------
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 9117ae3..cbf2e4c 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -85,11 +85,11 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
             <span class="text-xs">{{ gt.metadata.license[0].name }}</span>
           </a>
         </div>
-        <div class="flex mt-6">
-          <div class="w-1/2">
+        <div class="flex mt-6 md:flex-row flex-col">
+          <div class="md:w-1/2 mb-5 md:mb-0">
             <TimelineItemMetadata :gtMetadata="gt.metadata"/>
           </div>
-          <div class="w-1/2 flex flex-col overflow-x-auto items-end">
+          <div class="md:w-1/2 flex flex-col overflow-x-auto md:items-end">
             <h3 class="font-bold pr-[240px] mb-2">{{$t('average_timeline')}}</h3>
             <MetricAverageChart
               :workflow-name="$t('average')"
diff --git a/src/components/workflows/timeline/TimelineItemMetadata.vue b/src/components/workflows/timeline/TimelineItemMetadata.vue
index c53e53d..2bb1012 100644
--- a/src/components/workflows/timeline/TimelineItemMetadata.vue
+++ b/src/components/workflows/timeline/TimelineItemMetadata.vue
@@ -47,28 +47,18 @@ function toggleOpVolume(event: any) {
 
 </script>
 <template>
-  <div class="flex space-x-5 items-start text-sm text-slate-700 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 md:grid md:grid-cols-3 md:space-x-0 md:gap-2 lg:flex lg:space-x-5 lg:flex-nowrap items-start text-sm text-slate-700">
+    <div v-for="meta in metadata" :key="meta.label" class="mr-5 mb-5 md:mr-0 md:mb-0">
       <div class="flex flex-col">
-        <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>{{ meta.data }}</span>
-        </a>
-        <span v-else-if="meta.isArray">{{ meta.data?.join(', ') }}</span>
+        <span class="font-medium">{{ meta.label }}:</span>
+        <span v-if="meta.isArray">{{ meta.data?.join(', ') }}</span>
         <span v-else>{{ meta.data }}</span>
       </div>
     </div>
     <Button @click="toggleOpLabelling"
             unstyled
             :pt="{
-    root: 'text-sm flex items-center bg-gray-100 text-slate-700 p-2 hover:bg-gray-200 rounded hover:text-black focus:outline-none'
+    root: 'text-sm mr-5 md:mr-0 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>