feat: display more gt metadata in timeline view

src/components/workflows/timeline/TimelineItem.vue

@@ -9,19 +9,59 @@ 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"
+
+const { t } = useI18n()
 
 const props = defineProps<{
   gt: GroundTruth,
   metric: keyof EvaluationResultsDocumentWide
 }>()
 
 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'))
 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
 })
@@ -51,6 +91,9 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
     showParametersOverlay(step, event)
   }
 }
+function toggleOpLabelling(event: any) {
+  opLabelling.value?.toggle(event)
+}
 
 </script>
 
@@ -69,8 +112,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 +130,52 @@ 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" :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]" 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>
+              <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>
+        </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>
@@ -104,7 +195,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 +247,7 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
 </template>
 
 <style scoped lang="scss">
-span:hover {
+.text-highlight:hover {
   color: var(--highlight-text-color);
 }
 </style>

src/locales/de.json

@@ -70,5 +70,13 @@
   "workflows_intro_additional_infos": "Weitere Informationen finden Sie auf der OCR-D-Website {ocrd_link}.",
   "ocrd_link": "https://ocr-d.de/de/",
   "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/"
+  "gt_guidelines_link": "https://ocr-d.de/de/gt-guidelines/trans/",
+  "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."
 }

src/locales/en.json

@@ -64,5 +64,13 @@
   "workflows_intro_additional_infos": "For more information see the OCR-D website {ocrd_link}.",
   "ocrd_link": "https://ocr-d.de/en/",
   "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/"
+  "gt_guidelines_link": "https://ocr-d.de/en/gt-guidelines/trans/",
+  "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."
 }

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 {