From a4bbdacb3b89e65b248ff24f357716fcbdec9721 Mon Sep 17 00:00:00 2001
From: jfrer <76432831+jfrer@users.noreply.github.com>
Date: Wed, 19 Jun 2024 11:00:20 +0200
Subject: [PATCH] feat: display more gt metadata in timeline view (#79)

* wip

* wip

* hide labels in overlay

* refactor: use value, key instead of value, key, index

* fix: add target blank to all external links

* fix: make metadata font smaller and more muted

* fix: make button more visible as a button

* refactor: make gtMetadata own component

* fix: smaller width on xl screens to avoid stretching

* style: remove unused var

* fix: update metadata display

* fix: display volume of reichsanzeiger correctly

* style: spaces

* fix: update metadata display

* fix: adjust design for smaller screen sizes

---------
Co-authored-by: paulpestov <10750176+paulpestov@users.noreply.github.com>
---
 .../workflows/timeline/MetricAverageChart.vue |   2 +-
 .../workflows/timeline/TimelineItem.vue       |  33 ++++--
 .../timeline/TimelineItemMetadata.vue         | 107 ++++++++++++++++++
 src/locales/de.json                           |  11 +-
 src/locales/en.json                           |  12 +-
 src/types/index.d.ts                          |  27 ++++-
 6 files changed, 181 insertions(+), 11 deletions(-)
 create mode 100644 src/components/workflows/timeline/TimelineItemMetadata.vue

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 c265cfc..cbf2e4c 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -9,6 +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 TimelineItemMetadata from "@/components/workflows/timeline/TimelineItemMetadata.vue"
+
 
 const props = defineProps<{
   gt: GroundTruth,
@@ -22,6 +24,7 @@ const startDate = ref<Date>(new Date('2023-10-01'))
 const endDate = ref<Date>(new Date())
 const workflows = ref<Workflow[]>([])
 
+
 onMounted(() => {
   workflows.value = workflowsStore.workflows
 })
@@ -52,6 +55,7 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
   }
 }
 
+
 </script>
 
 <template>
@@ -69,10 +73,24 @@ 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="w-1/2 flex justify-end">
-          <div class="flex overflow-x-auto">
+      <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="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="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')"
               :gt-name="gt.label"
@@ -82,9 +100,10 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
               :width="400"
               :start-date="startDate"
               :end-date="endDate"
-            />
+          />
           </div>
         </div>
+
       </div>
     </template>
     <template v-slot:default>
@@ -104,7 +123,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 +175,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/components/workflows/timeline/TimelineItemMetadata.vue b/src/components/workflows/timeline/TimelineItemMetadata.vue
new file mode 100644
index 0000000..2bb1012
--- /dev/null
+++ b/src/components/workflows/timeline/TimelineItemMetadata.vue
@@ -0,0 +1,107 @@
+<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 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,
+}
+
+const metadata = [
+  {
+    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"],
+  },
+]
+
+function toggleOpLabelling(event: any) {
+  opLabelling.value?.toggle(event)
+}
+
+function toggleOpVolume(event: any) {
+  opVolume.value?.toggle(event)
+}
+
+</script>
+<template>
+  <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="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 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>
+      <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>
+      <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">
+.text-highlight:hover {
+  color: var(--highlight-text-color);
+}
+</style>
\ No newline at end of file
diff --git a/src/locales/de.json b/src/locales/de.json
index 7f5f5b7..d367ca3 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -71,5 +71,14 @@
   "workflows_intro_gt_guidelines": "Die OCR-D Ground Truth Richtlinien können unter {gt_guidelines_link} abgerufen werden.",
   "gt_guidelines_link": "https://ocr-d.de/de/gt-guidelines/trans/",
   "no_documents_selected": "Es sind keine Dokumente (Ground Truth) ausgewählt. Bitte wählen Sie alle oder spezifische Ground Truths aus.",
-  "error_please_try_again_later": "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut!"
+  "error_please_try_again_later": "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut!",
+  "url": "URL",
+  "language": "Sprache | Sprachen",
+  "script": "Skript | Skripte",
+  "scripttype": "Skript-Typ",
+  "license": "Lizenz | Lizenzen",
+  "volume": "Umfang",
+  "labelling": "Kennzeichnung",
+  "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 28ce724..1ab9d4c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -65,5 +65,15 @@
   "workflows_intro_gt_guidelines": "The OCR-D Ground Truth Guidelines can be found under {gt_guidelines_link}.",
   "gt_guidelines_link": "https://ocr-d.de/en/gt-guidelines/trans/",
   "no_documents_selected": "No documents (Ground Truth) are selected. Please select all or specific ground truths.",
-  "error_please_try_again_later": "An error has occurred. Please try again later!"
+  "error_please_try_again_later": "An error has occurred. Please try again later!",
+  "url": "URL",
+  "language": "Language | Languages",
+  "script": "Script | Scripts",
+  "script-type": "Script-Type",
+  "license": "License | Licenses",
+  "volume": "Volume",
+  "labelling": "Labelling",
+  "no_labels_for_this_entry": "No labels for this entry.",
+  "average_timeline": "Average Timeline"
+
 }
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 2259c74..270a5ac 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -1,6 +1,31 @@
 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,
+    } |
+    {
+      metric: string,
+      count: number,
+    }[]
+    labelling: string[],
+  }
 }
 
 export interface Workflow {