From d75253a2d98ebde0fff7724a8fd3dddebf4421cf Mon Sep 17 00:00:00 2001
From: "amtul.noor" <amtul.noor@stud.uni-goettingen.de>
Date: Thu, 1 Feb 2024 19:06:32 +0100
Subject: [PATCH 01/26] feat: filter by workflow and processor

---
 .../workflows/WorkflowsTimeline.vue           |  73 ++++++-
 src/components/workflows/filters/Filters.vue  |   3 +
 .../workflows/timeline/TimelineItem.vue       | 202 +++++++++---------
 src/helpers/utils.ts                          |  14 +-
 src/store/filters-store.ts                    |   6 +-
 5 files changed, 196 insertions(+), 102 deletions(-)

diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index e957da8..fa18f82 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -6,18 +6,40 @@ import {EvaluationMetrics, getMaxValueByMetric} from '@/helpers/metrics'
 import { useI18n } from "vue-i18n"
 import type { DropdownOption, EvaluationResultsDocumentWide, Workflow, GroundTruth } from "@/types"
 import { DropdownPassThroughStyles } from '@/helpers/pt'
+import { deduplicateStepIds } from '@/helpers/utils'
 import workflowsStore from '@/store/workflows-store'
 import filtersStore from '@/store/filters-store'
 import timelineStore from "@/store/timeline-store"
 import TrendLegend from "@/components/workflows/TrendLegend.vue";
 
 const { t } = useI18n()
-const gtList = computed<GroundTruth[]>(() => workflowsStore.gt.filter(({ id }) => filtersStore.gt.findIndex(({ value }) => value === id) > -1))
 const workflows = ref<Workflow[]>([])
+
 const selectedMetric = ref<DropdownOption | null>(null)
 const metrics = computed<DropdownOption[]>(() => Object.keys(EvaluationMetrics).map(key => ({ value: EvaluationMetrics[key], label: t(EvaluationMetrics[key]) })))
 const selectedMetricValue = computed<keyof EvaluationResultsDocumentWide>(() => <keyof EvaluationResultsDocumentWide>selectedMetric.value?.value || EvaluationMetrics.CER_MEAN)
 
+const workflowOptions = computed<DropdownOption[]>(() => filtersStore.workflow)
+const selectedWorkflow = ref<DropdownOption | null>(null)
+
+const workflowStepOptions = ref<DropdownOption[]>([])
+const selectedWorkflowStep = ref<DropdownOption | null>(null)
+
+const gtList = computed<GroundTruth[]>(() => {
+  return workflowsStore.gt.filter(({ id }) => {
+    let flag = filtersStore.gt.findIndex(({ value }) => value === id) > -1
+    if (selectedWorkflow.value) {
+      flag = flag && workflowsStore.getRuns(id, selectedWorkflow.value.value).length > 0
+    }
+    if (selectedWorkflowStep.value) {
+      flag = flag && workflowsStore.getRuns(id).findIndex(({ metadata }) => {
+        return metadata.workflow_steps.findIndex(({ id }) => id === selectedWorkflowStep.value?.value) > -1
+      }) > -1
+    }
+    return flag
+  })
+})
+
 onMounted(async () => {
   selectedMetric.value = metrics.value[0]
   workflows.value = workflowsStore.workflows
@@ -30,6 +52,24 @@ watch(selectedMetric,
   ),
     { immediate: true }
 )
+
+watch(
+  selectedWorkflow,
+  (selected) => {
+    selectedWorkflowStep.value = null
+    if (!selected) {
+      workflowStepOptions.value = deduplicateStepIds(workflowsStore.workflows).map(id => ({ value: id, label: t(id) }))
+      return
+    }
+    const workflow = workflowsStore.workflows.find((item) => item.id === selected.value)
+    if (!workflow) {
+      console.error("Invalid state")
+      return
+    }
+    workflowStepOptions.value = workflow.steps.map(({ id }) => ({ value: id, label: t(id) }))
+  },
+  { immediate: true }
+)
 </script>
 
 <template>
@@ -45,10 +85,39 @@ watch(selectedMetric,
         unstyled
       />
     </div>
+    <div class="flex w-full mb-4">
+      <Dropdown
+        v-model="selectedWorkflow"
+        :options="workflowOptions"
+        :pt="DropdownPassThroughStyles"
+        optionLabel="label"
+        :placeholder="t('Filter by workflow')"
+        showClear
+        class="ml-auto md:w-14rem"
+        unstyled
+      />
+      <Dropdown
+        v-model="selectedWorkflowStep"
+        :options="workflowStepOptions"
+        :pt="DropdownPassThroughStyles"
+        optionLabel="label"
+        :placeholder="t('Filter by processor')"
+        showClear
+        class="ml-4 md:w-14rem"
+        unstyled
+      />
+    </div>
     <TrendLegend class="ml-auto mb-4"/>
     <div class="flex flex-col space-y-6">
       <template v-if="gtList.length > 0">
-        <TimelineItem v-for="gt in gtList" :key="gt.id" :gt="gt" :metric="selectedMetricValue" />
+        <TimelineItem
+          v-for="gt in gtList"
+          :key="gt.id"
+          :gt="gt"
+          :metric="selectedMetricValue"
+          :selected-workflow-id="selectedWorkflow?.value"
+          :selected-workflow-step-id="selectedWorkflowStep?.value"
+        />
       </template>
       <template v-else>
         <div class="my-6">An error has occurred. Please try again later!</div>
diff --git a/src/components/workflows/filters/Filters.vue b/src/components/workflows/filters/Filters.vue
index b3957be..eddc783 100644
--- a/src/components/workflows/filters/Filters.vue
+++ b/src/components/workflows/filters/Filters.vue
@@ -4,10 +4,13 @@ import workflowsStore from "@/store/workflows-store"
 import { computed, onMounted } from "vue"
 import MultiSelect from "primevue/multiselect"
 import type { FilterOption } from "@/types"
+
 const gtOptions = computed(() => workflowsStore.gt.map(({ id, label }) => ({ value: id, label })))
+const workflowOptions = computed(() => workflowsStore.workflows.map(({ id, label }) => ({value: id, label})))
 
 onMounted(() => {
   filtersStore.gt = gtOptions.value
+  filtersStore.workflow =  workflowOptions.value
 })
 </script>
 
diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index c608c60..7db8e3a 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -6,13 +6,15 @@ import MetricChart from "@/components/workflows/timeline/MetricChart.vue"
 import type { EvaluationResultsDocumentWide, GroundTruth, Workflow, WorkflowStep } from "@/types"
 import MetricAverageChart from "@/components/workflows/timeline/MetricAverageChart.vue"
 import { Icon } from '@iconify/vue'
-import { onMounted, nextTick, ref } from "vue"
+import { computed, nextTick, ref } from "vue"
 import { OverlayPanelDropdownStyles } from "@/helpers/pt"
 import workflowsStore from "@/store/workflows-store"
 
 const props = defineProps<{
   gt: GroundTruth,
-  metric: keyof EvaluationResultsDocumentWide
+  metric: keyof EvaluationResultsDocumentWide,
+  selectedWorkflowId?: string,
+  selectedWorkflowStepId?: string,
 }>()
 
 const op = ref<OverlayPanel>()
@@ -20,16 +22,20 @@ 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[]>([])
-
-onMounted(() => {
-  workflows.value = workflowsStore.workflows
+const workflows = computed(() => {
+  return props.selectedWorkflowId
+    ? workflowsStore.workflows.filter((item) => item.id === props.selectedWorkflowId)
+    : workflowsStore.workflows
 })
 
 function getStepAcronym(stepId) {
   return StepsAcronyms[stepId]
 }
 
+function showWorkflowStep(stepId: string) {
+  return props.selectedWorkflowStepId ? stepId === props.selectedWorkflowStepId : true
+}
+
 function showParametersOverlay(step: WorkflowStep, event: Event) {
   selectedStep.value = step
   op.value?.show(event)
@@ -55,102 +61,106 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
 </script>
 
 <template>
-  <Panel
-    header="Header"
-    toggleable
-    :collapsed="true"
-    unstyled
-    :pt="{
-      root: 'border border-gray-300 rounded-lg overflow-hidden',
-      header: 'pt-4',
-      content: '',
-      icons: 'w-full flex',
-      toggler: 'w-full flex justify-center bg-gray-50 text-gray-500 p-2 hover:bg-gray-100 rounded hover:text-gray-700 focus:outline-none'
-    }"
-  >
-    <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">
-            <MetricAverageChart
-              :workflow-name="$t('average')"
-              :runs="workflowsStore.getRuns(gt.id)"
-              :metric="metric"
-              class=""
-              :width="400"
-              :start-date="startDate"
-              :end-date="endDate"
-            />
-          </div>
-        </div>
-      </div>
-    </template>
-    <template v-slot:default>
-      <div class="flex border-t border-gray-300 py-4 px-4">
-        <table class="table-fixed w-full">
-          <thead>
-            <tr class="">
-              <th class="text-left pb-4">{{ $t('workflows') }}</th>
-              <th class="text-left pb-4">{{ $t('processors') }}</th>
-              <th class="text-right pr-[314px] pb-4">{{ $t('timeline') }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="workflow in workflows" :key="workflow.id">
-            <td class="font-semibold pe-2">{{ workflow.label }}</td>
-            <td class="p-1 overflow-x-auto">
-              <span
-                  v-for="step in workflow.steps"
-                  :key="step.id"
-                  class="p-1 cursor-pointer"
-                  @click="toggleParameterOverlay(step, $event)"
-              >
-              {{ getStepAcronym(step.id) }}
-            </span>
-            </td>
-            <td class="overflow-x-auto">
-              <MetricChart
-                :runs="workflowsStore.getRuns(gt.id, workflow.id)"
-                :workflow-name="workflow.label"
+  <div>
+    <Panel
+      header="Header"
+      toggleable
+      :collapsed="true"
+      unstyled
+      :pt="{
+        root: 'border border-gray-300 rounded-lg overflow-hidden',
+        header: 'pt-4',
+        content: '',
+        icons: 'w-full flex',
+        toggler: 'w-full flex justify-center bg-gray-50 text-gray-500 p-2 hover:bg-gray-100 rounded hover:text-gray-700 focus:outline-none'
+      }"
+    >
+      <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">
+              <MetricAverageChart
+                :workflow-name="$t('average')"
+                :runs="workflowsStore.getRuns(gt.id)"
                 :metric="metric"
+                class=""
                 :width="400"
                 :start-date="startDate"
                 :end-date="endDate"
-                class="flex justify-end"
               />
-            </td>
-          </tr>
-          </tbody>
-        </table>
-      </div>
-    </template>
-    <template v-slot:togglericon="{ collapsed }">
-      <Icon :icon="collapsed ? 'bi:chevron-down' : 'bi:chevron-up'"/>
-    </template>
-  </Panel>
-  <OverlayPanel
-    ref="op"
-    :pt="OverlayPanelDropdownStyles"
-    @show="isOpVisible = true"
-    @hide="isOpVisible = false"
-  >
-    <div class="flex flex-col pt-2">
-      <h2 class="font-bold px-2 pb-2 mb-2 border-b border-gray-300">{{ selectedStep?.id }}</h2>
-      <div class="overflow-y-auto max-h-[400px] w-full">
-        <table v-if="selectedStep" class="text-sm border-collapse">
-          <tr class="">
-            <th class="p-1 pl-2 font-semibold">Parameter</th>
-            <th class="p-1 pr-2 font-semibold">Value</th>
-          </tr>
-          <tr v-for="step in Object.keys(selectedStep.params)" :key="step">
-            <td class="p-1 pl-2 border-collapse border border-l-0 border-b-0 border-gray-300">{{ step }}</td>
-            <td class="p-1 pr-2 border-collapse border border-r-0 border-b-0 border-gray-300">{{ selectedStep.params[step] }}</td>
-          </tr>
-        </table>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template v-slot:default>
+        <div class="flex border-t border-gray-300 py-4 px-4">
+          <table class="table-fixed w-full">
+            <thead>
+              <tr class="">
+                <th class="text-left pb-4">{{ $t('workflows') }}</th>
+                <th class="text-left pb-4">{{ $t('processors') }}</th>
+                <th class="text-right pr-[314px] pb-4">{{ $t('timeline') }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="workflow in workflows" :key="workflow.id">
+              <td class="font-semibold pe-2">{{ workflow.label }}</td>
+              <td class="p-1 overflow-x-auto">
+                <template v-for="step in workflow.steps">
+                  <span
+                      v-if="showWorkflowStep(step.id)"
+                      :key="step.id"
+                      class="p-1 cursor-pointer"
+                      @click="toggleParameterOverlay(step, $event)"
+                  >
+                    {{ getStepAcronym(step.id) }}
+                  </span>
+                </template>
+              </td>
+              <td class="overflow-x-auto">
+                <MetricChart
+                  :runs="workflowsStore.getRuns(gt.id, workflow.id)"
+                  :workflow-name="workflow.label"
+                  :metric="metric"
+                  :width="400"
+                  :start-date="startDate"
+                  :end-date="endDate"
+                  class="flex justify-end"
+                />
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </template>
+      <template v-slot:togglericon="{ collapsed }">
+        <Icon :icon="collapsed ? 'bi:chevron-down' : 'bi:chevron-up'"/>
+      </template>
+    </Panel>
+    <OverlayPanel
+      ref="op"
+      :pt="OverlayPanelDropdownStyles"
+      @show="isOpVisible = true"
+      @hide="isOpVisible = false"
+    >
+      <div class="flex flex-col pt-2">
+        <h2 class="font-bold px-2 pb-2 mb-2 border-b border-gray-300">{{ selectedStep?.id }}</h2>
+        <div class="overflow-y-auto max-h-[400px] w-full">
+          <table v-if="selectedStep" class="text-sm border-collapse">
+            <tr class="">
+              <th class="p-1 pl-2 font-semibold">Parameter</th>
+              <th class="p-1 pr-2 font-semibold">Value</th>
+            </tr>
+            <tr v-for="step in Object.keys(selectedStep.params)" :key="step">
+              <td class="p-1 pl-2 border-collapse border border-l-0 border-b-0 border-gray-300">{{ step }}</td>
+              <td class="p-1 pr-2 border-collapse border border-r-0 border-b-0 border-gray-300">{{ selectedStep.params[step] }}</td>
+            </tr>
+          </table>
+        </div>
       </div>
-    </div>
-  </OverlayPanel>
+    </OverlayPanel>
+  </div>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/helpers/utils.ts b/src/helpers/utils.ts
index 70dc749..0bc3f08 100644
--- a/src/helpers/utils.ts
+++ b/src/helpers/utils.ts
@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import type { EvaluationResultsDocumentWide, EvaluationRun } from "@/types"
+import type { EvaluationResultsDocumentWide, EvaluationRun, Workflow, WorkflowStep } from "@/types"
 
 const utils = ref({})
 
@@ -72,9 +72,19 @@ const mapGtId = (id: string) => {
   return arr[arr.length - 1].split('.')[0]
 }
 
+const deduplicateStepIds = (workflows: Workflow[]) => {
+  return Array.from(workflows.reduce((acc, cur) => {
+    cur.steps.forEach(({ id }) => {
+      acc.add(id)
+    })
+    return acc
+  }, new Set<string>()))
+}
+
 export {
   getEvalColor,
   setEvalColors,
   createReadableMetricValue,
-  mapGtId
+  mapGtId,
+  deduplicateStepIds,
 }
diff --git a/src/store/filters-store.ts b/src/store/filters-store.ts
index e1d92f1..31841cf 100644
--- a/src/store/filters-store.ts
+++ b/src/store/filters-store.ts
@@ -3,8 +3,10 @@ import type { FilterOption } from "@/types"
 
 export default reactive<{
   gt: FilterOption[],
-  metric: FilterOption[]
+  metric: FilterOption[],
+  workflow: FilterOption[],
 }>({
   gt: [],
-  metric: []
+  metric: [],
+  workflow: [],
 })

From 26699d2269966fd7ebc1d7fcf3f7b89189fcc9b8 Mon Sep 17 00:00:00 2001
From: "amtul.noor" <amtul.noor@stud.uni-goettingen.de>
Date: Tue, 6 Feb 2024 16:37:34 +0100
Subject: [PATCH 02/26] feat: filter by date range

---
 .../workflows/WorkflowsTimeline.vue           | 28 +++++++++++--
 src/components/workflows/filters/Filters.vue  |  8 ++++
 src/store/filters-store.ts                    |  2 +
 src/types/index.d.ts                          | 41 ++++++++++++++++++-
 4 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index fa18f82..330f4e3 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -19,6 +19,9 @@ const selectedMetric = ref<DropdownOption | null>(null)
 const metrics = computed<DropdownOption[]>(() => Object.keys(EvaluationMetrics).map(key => ({ value: EvaluationMetrics[key], label: t(EvaluationMetrics[key]) })))
 const selectedMetricValue = computed<keyof EvaluationResultsDocumentWide>(() => <keyof EvaluationResultsDocumentWide>selectedMetric.value?.value || EvaluationMetrics.CER_MEAN)
 
+const dateRangeOptions = computed<DropdownOption[]>(() => filtersStore.dateRange)
+const selectedDateRange = ref<DropdownOption | null>()
+
 const workflowOptions = computed<DropdownOption[]>(() => filtersStore.workflow)
 const selectedWorkflow = ref<DropdownOption | null>(null)
 
@@ -26,12 +29,19 @@ const workflowStepOptions = ref<DropdownOption[]>([])
 const selectedWorkflowStep = ref<DropdownOption | null>(null)
 
 const gtList = computed<GroundTruth[]>(() => {
-  return workflowsStore.gt.filter(({ id }) => {
+  return workflowsStore.gt.filter(({ id, metadata }) => {
     let flag = filtersStore.gt.findIndex(({ value }) => value === id) > -1
-    if (selectedWorkflow.value) {
+    if (flag && selectedDateRange.value) {
+      const splitDateRange = selectedDateRange.value.value.split('-')
+      const from = splitDateRange[0]
+      const to = splitDateRange[1]
+
+      flag = flag && (metadata.time.notBefore === from && metadata.time.notAfter === to)
+    }
+    if (flag && selectedWorkflow.value) {
       flag = flag && workflowsStore.getRuns(id, selectedWorkflow.value.value).length > 0
     }
-    if (selectedWorkflowStep.value) {
+    if (flag && selectedWorkflowStep.value) {
       flag = flag && workflowsStore.getRuns(id).findIndex(({ metadata }) => {
         return metadata.workflow_steps.findIndex(({ id }) => id === selectedWorkflowStep.value?.value) > -1
       }) > -1
@@ -86,6 +96,16 @@ watch(
       />
     </div>
     <div class="flex w-full mb-4">
+      <Dropdown
+        v-model="selectedDateRange"
+        :options="dateRangeOptions"
+        :pt="DropdownPassThroughStyles"
+        optionLabel="label"
+        :placeholder="t('Filter by date range')"
+        showClear
+        class="ml-auto md:w-14rem"
+        unstyled
+      />
       <Dropdown
         v-model="selectedWorkflow"
         :options="workflowOptions"
@@ -93,7 +113,7 @@ watch(
         optionLabel="label"
         :placeholder="t('Filter by workflow')"
         showClear
-        class="ml-auto md:w-14rem"
+        class="ml-4 md:w-14rem"
         unstyled
       />
       <Dropdown
diff --git a/src/components/workflows/filters/Filters.vue b/src/components/workflows/filters/Filters.vue
index eddc783..f9fe340 100644
--- a/src/components/workflows/filters/Filters.vue
+++ b/src/components/workflows/filters/Filters.vue
@@ -7,10 +7,18 @@ import type { FilterOption } from "@/types"
 
 const gtOptions = computed(() => workflowsStore.gt.map(({ id, label }) => ({ value: id, label })))
 const workflowOptions = computed(() => workflowsStore.workflows.map(({ id, label }) => ({value: id, label})))
+const dateRangeOptions = computed(() => {
+  const values = workflowsStore.gt.reduce((acc, cur) => {
+    acc.add(`${cur.metadata.time.notBefore}-${cur.metadata.time.notAfter}`)
+    return acc
+  }, new Set<string>())
+  return Array.from(values).sort().map(value => ({ value, label: value }))
+})
 
 onMounted(() => {
   filtersStore.gt = gtOptions.value
   filtersStore.workflow =  workflowOptions.value
+  filtersStore.dateRange = dateRangeOptions.value
 })
 </script>
 
diff --git a/src/store/filters-store.ts b/src/store/filters-store.ts
index 31841cf..63a9ec4 100644
--- a/src/store/filters-store.ts
+++ b/src/store/filters-store.ts
@@ -5,8 +5,10 @@ export default reactive<{
   gt: FilterOption[],
   metric: FilterOption[],
   workflow: FilterOption[],
+  dateRange: FilterOption[],
 }>({
   gt: [],
   metric: [],
   workflow: [],
+  dateRange: [],
 })
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 02c7f3b..0b8e095 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -1,6 +1,45 @@
 export interface GroundTruth {
   id: string,
-  label: string
+  label: string,
+  metadata: GroundTruthMetadata
+}
+
+export interface GroundTruthMetadata {
+  authors: {
+    name: string,
+    surname: string,
+    roles: string[]
+  }[],
+  description: string,
+  format: string,
+  gtTyp: string,
+  hands: {
+    count: string,
+    level: string
+  },
+  labelling: string[],
+  language: string[],
+  license: {
+    name: string,
+    url: string
+  }[],
+  'project-name': string,
+  'project-website': string,
+  schema: string,
+  script: string[],
+  'script-type': string,
+  sources: {
+    reference: string,
+    link: string
+  }[],
+  time: {
+    notBefore: string,
+    notAfter: string
+  },
+  title: string,
+  'transcription-guidelines': string,
+  url: string,
+  volume: any,
 }
 
 export interface Workflow {

From 78b3830d9f16bf53a46952c8c25125ebf2b33b4f Mon Sep 17 00:00:00 2001
From: "amtul.noor" <amtul.noor@stud.uni-goettingen.de>
Date: Tue, 27 Feb 2024 18:55:58 +0100
Subject: [PATCH 03/26] feat: implement multi-selectable workflow steps
 filtering

---
 .../workflows/WorkflowsTimeline.vue           | 29 +++++++++++--------
 .../workflows/timeline/TimelineItem.vue       |  7 ++++-
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index 330f4e3..d82e8f3 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import TimelineItem from "@/components/workflows/timeline/TimelineItem.vue"
 import Dropdown from 'primevue/dropdown'
+import MultiSelect from 'primevue/multiselect'
 import {computed, onMounted, ref, watch} from "vue"
 import {EvaluationMetrics, getMaxValueByMetric} from '@/helpers/metrics'
 import { useI18n } from "vue-i18n"
@@ -26,7 +27,7 @@ const workflowOptions = computed<DropdownOption[]>(() => filtersStore.workflow)
 const selectedWorkflow = ref<DropdownOption | null>(null)
 
 const workflowStepOptions = ref<DropdownOption[]>([])
-const selectedWorkflowStep = ref<DropdownOption | null>(null)
+const selectedWorkflowSteps = ref<DropdownOption[]>([])
 
 const gtList = computed<GroundTruth[]>(() => {
   return workflowsStore.gt.filter(({ id, metadata }) => {
@@ -41,10 +42,15 @@ const gtList = computed<GroundTruth[]>(() => {
     if (flag && selectedWorkflow.value) {
       flag = flag && workflowsStore.getRuns(id, selectedWorkflow.value.value).length > 0
     }
-    if (flag && selectedWorkflowStep.value) {
-      flag = flag && workflowsStore.getRuns(id).findIndex(({ metadata }) => {
-        return metadata.workflow_steps.findIndex(({ id }) => id === selectedWorkflowStep.value?.value) > -1
-      }) > -1
+    if (flag && selectedWorkflowSteps.value.length > 0) {
+      selectedWorkflowSteps.value.forEach(({ value }) => {
+        if (!flag) {
+          return
+        }
+        flag = flag && workflowsStore.getRuns(id).findIndex(({ metadata }) => {
+          return metadata.workflow_steps.findIndex(({ id }) => id === value) > -1
+        }) > -1
+      })
     }
     return flag
   })
@@ -66,7 +72,7 @@ watch(selectedMetric,
 watch(
   selectedWorkflow,
   (selected) => {
-    selectedWorkflowStep.value = null
+    selectedWorkflowSteps.value = []
     if (!selected) {
       workflowStepOptions.value = deduplicateStepIds(workflowsStore.workflows).map(id => ({ value: id, label: t(id) }))
       return
@@ -116,15 +122,14 @@ watch(
         class="ml-4 md:w-14rem"
         unstyled
       />
-      <Dropdown
-        v-model="selectedWorkflowStep"
+      <MultiSelect
+        v-model="selectedWorkflowSteps"
+        filter
+        :max-selected-labels="1"
         :options="workflowStepOptions"
-        :pt="DropdownPassThroughStyles"
         optionLabel="label"
         :placeholder="t('Filter by processor')"
-        showClear
         class="ml-4 md:w-14rem"
-        unstyled
       />
     </div>
     <TrendLegend class="ml-auto mb-4"/>
@@ -136,7 +141,7 @@ watch(
           :gt="gt"
           :metric="selectedMetricValue"
           :selected-workflow-id="selectedWorkflow?.value"
-          :selected-workflow-step-id="selectedWorkflowStep?.value"
+          :selected-workflow-step-ids="selectedWorkflowSteps.map((item) => item.value)"
         />
       </template>
       <template v-else>
diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 7db8e3a..524dae2 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -15,6 +15,7 @@ const props = defineProps<{
   metric: keyof EvaluationResultsDocumentWide,
   selectedWorkflowId?: string,
   selectedWorkflowStepId?: string,
+  selectedWorkflowStepIds: string[],
 }>()
 
 const op = ref<OverlayPanel>()
@@ -33,7 +34,11 @@ function getStepAcronym(stepId) {
 }
 
 function showWorkflowStep(stepId: string) {
-  return props.selectedWorkflowStepId ? stepId === props.selectedWorkflowStepId : true
+  if (props.selectedWorkflowStepIds.length > 0) {
+    return props.selectedWorkflowStepIds.findIndex(id => id === stepId) > -1
+  } else {
+    return true
+  }
 }
 
 function showParametersOverlay(step: WorkflowStep, event: Event) {

From f4b6adb4e47a946d9083483cbaeb6f5e38dc36ee Mon Sep 17 00:00:00 2001
From: "amtul.noor" <amtul.noor@stud.uni-goettingen.de>
Date: Mon, 18 Mar 2024 16:01:30 +0100
Subject: [PATCH 04/26] fix: make only related workflows visible while
 filtering by processors

---
 .../workflows/timeline/TimelineItem.vue          | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 524dae2..2b15aab 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -24,9 +24,19 @@ const selectedStep = ref<WorkflowStep | null>(null)
 const startDate = ref<Date>(new Date('2023-10-01'))
 const endDate = ref<Date>(new Date())
 const workflows = computed(() => {
-  return props.selectedWorkflowId
-    ? workflowsStore.workflows.filter((item) => item.id === props.selectedWorkflowId)
-    : workflowsStore.workflows
+  if (props.selectedWorkflowId) {
+    return workflowsStore.workflows.filter((item) => item.id === props.selectedWorkflowId)
+  } else {
+    if (props.selectedWorkflowStepIds.length > 0) {
+      return workflowsStore.workflows.filter(({ steps }) => {
+        return props.selectedWorkflowStepIds.findIndex((id) => {
+          return steps.findIndex((step) => step.id === id) > -1
+        }) > -1
+      })
+    } else {
+      return workflowsStore.workflows
+    }
+  }
 })
 
 function getStepAcronym(stepId) {

From 3387ceb8b373eb650731887fff73f75d1d0feded Mon Sep 17 00:00:00 2001
From: "amtul.noor" <amtul.noor@stud.uni-goettingen.de>
Date: Wed, 17 Apr 2024 17:03:24 +0200
Subject: [PATCH 05/26] fix: set all checkboxes of processor filter to selected
 on page load

---
 src/components/workflows/WorkflowsTimeline.vue   | 12 ++++++++++++
 .../workflows/timeline/TimelineItem.vue          | 16 ++++++----------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index d82e8f3..259c2c1 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -29,6 +29,14 @@ const selectedWorkflow = ref<DropdownOption | null>(null)
 const workflowStepOptions = ref<DropdownOption[]>([])
 const selectedWorkflowSteps = ref<DropdownOption[]>([])
 
+const workflowStepDropdownChanged = ref(false)
+const workflowStepDropdownLabel = computed(() => {
+  if (!workflowStepDropdownChanged.value && workflowStepOptions.value.length === selectedWorkflowSteps.value.length) {
+    return t('Filter by processor')
+  }
+  return null
+})
+
 const gtList = computed<GroundTruth[]>(() => {
   return workflowsStore.gt.filter(({ id, metadata }) => {
     let flag = filtersStore.gt.findIndex(({ value }) => value === id) > -1
@@ -75,6 +83,7 @@ watch(
     selectedWorkflowSteps.value = []
     if (!selected) {
       workflowStepOptions.value = deduplicateStepIds(workflowsStore.workflows).map(id => ({ value: id, label: t(id) }))
+      selectedWorkflowSteps.value = workflowStepOptions.value
       return
     }
     const workflow = workflowsStore.workflows.find((item) => item.id === selected.value)
@@ -83,6 +92,7 @@ watch(
       return
     }
     workflowStepOptions.value = workflow.steps.map(({ id }) => ({ value: id, label: t(id) }))
+    selectedWorkflowSteps.value = workflowStepOptions.value
   },
   { immediate: true }
 )
@@ -129,6 +139,8 @@ watch(
         :options="workflowStepOptions"
         optionLabel="label"
         :placeholder="t('Filter by processor')"
+        :selected-items-label="workflowStepDropdownLabel"
+        @change="workflowStepDropdownChanged = true"
         class="ml-4 md:w-14rem"
       />
     </div>
diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 2b15aab..ddec813 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -27,15 +27,11 @@ const workflows = computed(() => {
   if (props.selectedWorkflowId) {
     return workflowsStore.workflows.filter((item) => item.id === props.selectedWorkflowId)
   } else {
-    if (props.selectedWorkflowStepIds.length > 0) {
-      return workflowsStore.workflows.filter(({ steps }) => {
-        return props.selectedWorkflowStepIds.findIndex((id) => {
-          return steps.findIndex((step) => step.id === id) > -1
-        }) > -1
-      })
-    } else {
-      return workflowsStore.workflows
-    }
+    return workflowsStore.workflows.filter(({ steps }) => {
+      return props.selectedWorkflowStepIds.findIndex((id) => {
+        return steps.findIndex((step) => step.id === id) > -1
+      }) > -1
+    })
   }
 })
 
@@ -47,7 +43,7 @@ function showWorkflowStep(stepId: string) {
   if (props.selectedWorkflowStepIds.length > 0) {
     return props.selectedWorkflowStepIds.findIndex(id => id === stepId) > -1
   } else {
-    return true
+    return false
   }
 }
 

From cedbc59875bd4d78df539d9117a0ac632a8c4b66 Mon Sep 17 00:00:00 2001
From: noornoorie <noorkhaled968@gmail.com>
Date: Tue, 21 May 2024 17:11:28 +0200
Subject: [PATCH 06/26] ref: highlight selected processors

---
 .../workflows/WorkflowsTimeline.vue           | 23 +----
 .../workflows/timeline/TimelineItem.vue       | 85 ++++++++++---------
 2 files changed, 49 insertions(+), 59 deletions(-)

diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index 259c2c1..bfbfd62 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -67,6 +67,8 @@ const gtList = computed<GroundTruth[]>(() => {
 onMounted(async () => {
   selectedMetric.value = metrics.value[0]
   workflows.value = workflowsStore.workflows
+  workflowStepOptions.value = deduplicateStepIds(workflowsStore.workflows).map(id => ({ value: id, label: t(id) }))
+  selectedWorkflowSteps.value = workflowStepOptions.value
 })
 
 watch(selectedMetric,
@@ -76,26 +78,6 @@ watch(selectedMetric,
   ),
     { immediate: true }
 )
-
-watch(
-  selectedWorkflow,
-  (selected) => {
-    selectedWorkflowSteps.value = []
-    if (!selected) {
-      workflowStepOptions.value = deduplicateStepIds(workflowsStore.workflows).map(id => ({ value: id, label: t(id) }))
-      selectedWorkflowSteps.value = workflowStepOptions.value
-      return
-    }
-    const workflow = workflowsStore.workflows.find((item) => item.id === selected.value)
-    if (!workflow) {
-      console.error("Invalid state")
-      return
-    }
-    workflowStepOptions.value = workflow.steps.map(({ id }) => ({ value: id, label: t(id) }))
-    selectedWorkflowSteps.value = workflowStepOptions.value
-  },
-  { immediate: true }
-)
 </script>
 
 <template>
@@ -152,7 +134,6 @@ watch(
           :key="gt.id"
           :gt="gt"
           :metric="selectedMetricValue"
-          :selected-workflow-id="selectedWorkflow?.value"
           :selected-workflow-step-ids="selectedWorkflowSteps.map((item) => item.value)"
         />
       </template>
diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index ddec813..30c1154 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -6,15 +6,13 @@ import MetricChart from "@/components/workflows/timeline/MetricChart.vue"
 import type { EvaluationResultsDocumentWide, GroundTruth, Workflow, WorkflowStep } from "@/types"
 import MetricAverageChart from "@/components/workflows/timeline/MetricAverageChart.vue"
 import { Icon } from '@iconify/vue'
-import { computed, nextTick, ref } from "vue"
+import { onMounted, nextTick, ref } from "vue"
 import { OverlayPanelDropdownStyles } from "@/helpers/pt"
 import workflowsStore from "@/store/workflows-store"
 
 const props = defineProps<{
   gt: GroundTruth,
   metric: keyof EvaluationResultsDocumentWide,
-  selectedWorkflowId?: string,
-  selectedWorkflowStepId?: string,
   selectedWorkflowStepIds: string[],
 }>()
 
@@ -23,23 +21,17 @@ 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 = computed(() => {
-  if (props.selectedWorkflowId) {
-    return workflowsStore.workflows.filter((item) => item.id === props.selectedWorkflowId)
-  } else {
-    return workflowsStore.workflows.filter(({ steps }) => {
-      return props.selectedWorkflowStepIds.findIndex((id) => {
-        return steps.findIndex((step) => step.id === id) > -1
-      }) > -1
-    })
-  }
+const workflows = ref<Workflow[]>([])
+
+onMounted(() => {
+  workflows.value = workflowsStore.workflows
 })
 
 function getStepAcronym(stepId) {
   return StepsAcronyms[stepId]
 }
 
-function showWorkflowStep(stepId: string) {
+function highlightWorkflowStep(stepId: string) {
   if (props.selectedWorkflowStepIds.length > 0) {
     return props.selectedWorkflowStepIds.findIndex(id => id === stepId) > -1
   } else {
@@ -47,6 +39,17 @@ function showWorkflowStep(stepId: string) {
   }
 }
 
+function showWorkflow(id: string) {
+  const wf = workflows.value.find((item) => item.id === id)
+  return wf && wf.steps.length > 0
+    ? wf.steps.findIndex((step) => (
+      props.selectedWorkflowStepIds.findIndex((id) => (
+        step.id === id
+      )) > -1
+    )) > -1
+    : false
+}
+
 function showParametersOverlay(step: WorkflowStep, event: Event) {
   selectedStep.value = step
   op.value?.show(event)
@@ -116,31 +119,32 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
             </thead>
             <tbody>
               <tr v-for="workflow in workflows" :key="workflow.id">
-              <td class="font-semibold pe-2">{{ workflow.label }}</td>
-              <td class="p-1 overflow-x-auto">
-                <template v-for="step in workflow.steps">
-                  <span
-                      v-if="showWorkflowStep(step.id)"
-                      :key="step.id"
-                      class="p-1 cursor-pointer"
-                      @click="toggleParameterOverlay(step, $event)"
-                  >
-                    {{ getStepAcronym(step.id) }}
-                  </span>
+                <template v-if="showWorkflow(workflow.id)">
+                  <td class="font-semibold pe-2">{{ workflow.label }}</td>
+                  <td class="p-1 overflow-x-auto">
+                    <span
+                        v-for="step in workflow.steps"
+                        :key="step.id"
+                        class="p-1 cursor-pointer"
+                        :class="{ highlighted: highlightWorkflowStep(step.id) }"
+                        @click="toggleParameterOverlay(step, $event)"
+                    >
+                      {{ getStepAcronym(step.id) }}
+                    </span>
+                  </td>
+                  <td class="overflow-x-auto">
+                    <MetricChart
+                      :runs="workflowsStore.getRuns(gt.id, workflow.id)"
+                      :workflow-name="workflow.label"
+                      :metric="metric"
+                      :width="400"
+                      :start-date="startDate"
+                      :end-date="endDate"
+                      class="flex justify-end"
+                    />
+                  </td>
                 </template>
-              </td>
-              <td class="overflow-x-auto">
-                <MetricChart
-                  :runs="workflowsStore.getRuns(gt.id, workflow.id)"
-                  :workflow-name="workflow.label"
-                  :metric="metric"
-                  :width="400"
-                  :start-date="startDate"
-                  :end-date="endDate"
-                  class="flex justify-end"
-                />
-              </td>
-            </tr>
+              </tr>
             </tbody>
           </table>
         </div>
@@ -176,6 +180,11 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
 
 <style scoped lang="scss">
 span:hover {
+  border: 1px solid var(--highlight-text-color);
+  background-color: var(--highlight-bg);
+}
+
+.highlighted {
   color: var(--highlight-text-color);
 }
 </style>

From 23793999618750a4c949514c9f5f1a903d53ef43 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 21 Jun 2024 14:21:41 +0200
Subject: [PATCH 07/26] fix: refactor to own component and prepare visual
 filtering

---
 .../workflows/WorkflowsTimeline.vue           |  87 +---------
 src/components/workflows/filters/Filters.vue  |  12 +-
 .../workflows/timeline/TimelineFilters.vue    | 160 ++++++++++++++++++
 .../workflows/timeline/TimelineItem.vue       |  29 +---
 src/store/filters-store.ts                    |   2 +
 5 files changed, 175 insertions(+), 115 deletions(-)
 create mode 100644 src/components/workflows/timeline/TimelineFilters.vue

diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index bfbfd62..c838263 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -1,74 +1,28 @@
 <script setup lang="ts">
 import TimelineItem from "@/components/workflows/timeline/TimelineItem.vue"
 import Dropdown from 'primevue/dropdown'
-import MultiSelect from 'primevue/multiselect'
 import {computed, onMounted, ref, watch} from "vue"
 import {EvaluationMetrics, getMaxValueByMetric} from '@/helpers/metrics'
 import { useI18n } from "vue-i18n"
 import type { DropdownOption, EvaluationResultsDocumentWide, Workflow, GroundTruth } from "@/types"
 import { DropdownPassThroughStyles } from '@/helpers/pt'
-import { deduplicateStepIds } from '@/helpers/utils'
 import workflowsStore from '@/store/workflows-store'
 import filtersStore from '@/store/filters-store'
 import timelineStore from "@/store/timeline-store"
 import TrendLegend from "@/components/workflows/TrendLegend.vue";
+import TimelineFilters from "./timeline/TimelineFilters.vue"
 
 const { t } = useI18n()
+const gtList = computed<GroundTruth[]>(() => workflowsStore.gt.filter(({ id }) => filtersStore.gtTimeline.findIndex(({ value }) => value === id) > -1))
 const workflows = ref<Workflow[]>([])
 
 const selectedMetric = ref<DropdownOption | null>(null)
 const metrics = computed<DropdownOption[]>(() => Object.keys(EvaluationMetrics).map(key => ({ value: EvaluationMetrics[key], label: t(EvaluationMetrics[key]) })))
 const selectedMetricValue = computed<keyof EvaluationResultsDocumentWide>(() => <keyof EvaluationResultsDocumentWide>selectedMetric.value?.value || EvaluationMetrics.CER_MEAN)
 
-const dateRangeOptions = computed<DropdownOption[]>(() => filtersStore.dateRange)
-const selectedDateRange = ref<DropdownOption | null>()
-
-const workflowOptions = computed<DropdownOption[]>(() => filtersStore.workflow)
-const selectedWorkflow = ref<DropdownOption | null>(null)
-
-const workflowStepOptions = ref<DropdownOption[]>([])
-const selectedWorkflowSteps = ref<DropdownOption[]>([])
-
-const workflowStepDropdownChanged = ref(false)
-const workflowStepDropdownLabel = computed(() => {
-  if (!workflowStepDropdownChanged.value && workflowStepOptions.value.length === selectedWorkflowSteps.value.length) {
-    return t('Filter by processor')
-  }
-  return null
-})
-
-const gtList = computed<GroundTruth[]>(() => {
-  return workflowsStore.gt.filter(({ id, metadata }) => {
-    let flag = filtersStore.gt.findIndex(({ value }) => value === id) > -1
-    if (flag && selectedDateRange.value) {
-      const splitDateRange = selectedDateRange.value.value.split('-')
-      const from = splitDateRange[0]
-      const to = splitDateRange[1]
-
-      flag = flag && (metadata.time.notBefore === from && metadata.time.notAfter === to)
-    }
-    if (flag && selectedWorkflow.value) {
-      flag = flag && workflowsStore.getRuns(id, selectedWorkflow.value.value).length > 0
-    }
-    if (flag && selectedWorkflowSteps.value.length > 0) {
-      selectedWorkflowSteps.value.forEach(({ value }) => {
-        if (!flag) {
-          return
-        }
-        flag = flag && workflowsStore.getRuns(id).findIndex(({ metadata }) => {
-          return metadata.workflow_steps.findIndex(({ id }) => id === value) > -1
-        }) > -1
-      })
-    }
-    return flag
-  })
-})
-
 onMounted(async () => {
   selectedMetric.value = metrics.value[0]
   workflows.value = workflowsStore.workflows
-  workflowStepOptions.value = deduplicateStepIds(workflowsStore.workflows).map(id => ({ value: id, label: t(id) }))
-  selectedWorkflowSteps.value = workflowStepOptions.value
 })
 
 watch(selectedMetric,
@@ -93,39 +47,7 @@ watch(selectedMetric,
         unstyled
       />
     </div>
-    <div class="flex w-full mb-4">
-      <Dropdown
-        v-model="selectedDateRange"
-        :options="dateRangeOptions"
-        :pt="DropdownPassThroughStyles"
-        optionLabel="label"
-        :placeholder="t('Filter by date range')"
-        showClear
-        class="ml-auto md:w-14rem"
-        unstyled
-      />
-      <Dropdown
-        v-model="selectedWorkflow"
-        :options="workflowOptions"
-        :pt="DropdownPassThroughStyles"
-        optionLabel="label"
-        :placeholder="t('Filter by workflow')"
-        showClear
-        class="ml-4 md:w-14rem"
-        unstyled
-      />
-      <MultiSelect
-        v-model="selectedWorkflowSteps"
-        filter
-        :max-selected-labels="1"
-        :options="workflowStepOptions"
-        optionLabel="label"
-        :placeholder="t('Filter by processor')"
-        :selected-items-label="workflowStepDropdownLabel"
-        @change="workflowStepDropdownChanged = true"
-        class="ml-4 md:w-14rem"
-      />
-    </div>
+    <TimelineFilters></TimelineFilters>
     <TrendLegend class="ml-auto mb-4"/>
     <div class="flex flex-col space-y-6">
       <template v-if="gtList.length > 0">
@@ -134,8 +56,9 @@ watch(selectedMetric,
           :key="gt.id"
           :gt="gt"
           :metric="selectedMetricValue"
-          :selected-workflow-step-ids="selectedWorkflowSteps.map((item) => item.value)"
+          
         />
+        <!-- ^ :selected-workflow-step-ids="selectedWorkflowSteps.map((item) => item.value)"-->
       </template>
       <template v-else>
         <div class="my-6">An error has occurred. Please try again later!</div>
diff --git a/src/components/workflows/filters/Filters.vue b/src/components/workflows/filters/Filters.vue
index f9fe340..b45a3d7 100644
--- a/src/components/workflows/filters/Filters.vue
+++ b/src/components/workflows/filters/Filters.vue
@@ -6,19 +6,9 @@ import MultiSelect from "primevue/multiselect"
 import type { FilterOption } from "@/types"
 
 const gtOptions = computed(() => workflowsStore.gt.map(({ id, label }) => ({ value: id, label })))
-const workflowOptions = computed(() => workflowsStore.workflows.map(({ id, label }) => ({value: id, label})))
-const dateRangeOptions = computed(() => {
-  const values = workflowsStore.gt.reduce((acc, cur) => {
-    acc.add(`${cur.metadata.time.notBefore}-${cur.metadata.time.notAfter}`)
-    return acc
-  }, new Set<string>())
-  return Array.from(values).sort().map(value => ({ value, label: value }))
-})
 
 onMounted(() => {
   filtersStore.gt = gtOptions.value
-  filtersStore.workflow =  workflowOptions.value
-  filtersStore.dateRange = dateRangeOptions.value
 })
 </script>
 
@@ -32,7 +22,7 @@ onMounted(() => {
         optionLabel="label"
         placeholder="Select Ground Truth"
         panel-class="max-w-[500px]"
-        max-selected-labels="1"
+        :max-selected-labels="1"
         filter
         class="relative flex-1"
     >
diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
new file mode 100644
index 0000000..e63dc05
--- /dev/null
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import filtersStore from "@/store/filters-store"
+import workflowsStore from "@/store/workflows-store"
+import { computed, onMounted, ref } from "vue"
+import Dropdown from "primevue/dropdown"
+import MultiSelect from "primevue/multiselect"
+import { type FilterOption, type DropdownOption, type GroundTruth } from "@/types"
+import { DropdownPassThroughStyles } from '@/helpers/pt'
+import { deduplicateStepIds, mapGtId } from '@/helpers/utils'
+import { useI18n } from "vue-i18n"
+
+
+const { t } = useI18n()
+
+const dateRangeOptions = computed(() => {
+  const values = workflowsStore.gt.reduce((acc, cur) => {
+    acc.add(`${cur.metadata.time.notBefore}-${cur.metadata.time.notAfter}`)
+    return acc
+  }, new Set<string>())
+  return Array.from(values).sort().map(value => ({ value, label: value }))
+})
+
+const selectedDateRange = ref<DropdownOption | null>()
+//const dateRangeOptions = computed<DropdownOption[]>(() => filtersStore.dateRange)
+
+const workflowOptions = computed(() => workflowsStore.workflows.map(({ id, label }) => ({ value: id, label })))
+//const workflowOptions = computed<DropdownOption[]>(() => filtersStore.workflow)
+const selectedWorkflows = ref<DropdownOption[]>([])
+
+const workflowStepOptions = ref<DropdownOption[]>([])
+const selectedWorkflowSteps = ref<DropdownOption[]>([])
+
+const workflowDropdownLabel = computed(() => {
+  if (workflowStepOptions.value.length === selectedWorkflowSteps.value.length) {
+    return t('Filter by workflow')
+  }
+  return null
+})
+
+const workflowStepDropdownLabel = computed(() => {
+  if (workflowStepOptions.value.length === selectedWorkflowSteps.value.length) {
+    return t('Filter by processor')
+  }
+  return null
+})
+
+const onDateRangeChange = (event: any) => {
+  selectedDateRange.value = event
+  selectGTs()
+}
+
+const onWorkflowChange = (event: any) => {
+  selectedWorkflows.value = event
+  selectGTs()
+  selectWorkflows()
+}
+
+const onWorkflowStepChange = (event: any) => {
+  selectedWorkflowSteps.value = event
+  selectGTs()
+  selectWorkflows()
+}
+
+const selectGTs = () => {
+  filtersStore.gtTimeline = filtersStore.gt.filter(({value}) => {
+    const gt = workflowsStore.getGtById(value)
+    if(!gt) return false
+    return hasSomeSelectedProcessor(gt) && hasSelectedDateRange(gt) && hasSomeSelectedWorkflow(gt)
+  })
+}
+
+function hasSomeSelectedProcessor(gt: GroundTruth) {
+  if (selectedWorkflowSteps.value.length <= 0) return false
+  const gtRuns = workflowsStore.getRuns(gt.id)
+  return selectedWorkflowSteps.value.some((selectedStep) => {
+    return gtRuns.some((gtRun) => {
+      return gtRun.metadata.workflow_steps.findIndex(({ id }) => id === selectedStep.value) > -1
+    })
+  })
+}
+
+function hasSelectedDateRange(gt: GroundTruth) {
+  if (!selectedDateRange.value) return true //later false if multiselect
+  const splitDateRange = selectedDateRange.value.value.split('-')
+  const from = splitDateRange[0]
+  const to = splitDateRange[1]
+  return gt.metadata.time.notBefore === from && gt.metadata.time.notAfter === to
+}
+
+function hasSomeSelectedWorkflow(gt: GroundTruth) {
+  if (selectedWorkflows.value.length <= 0) return false
+  const gtRuns = workflowsStore.getRuns(gt.id)
+  return gtRuns.some((gtRun) => {
+    return selectedWorkflows.value.findIndex(({ value }) => (value === mapGtId(gtRun.metadata.ocr_workflow.id)))
+  })
+}
+
+const selectWorkflows = () => {
+  filtersStore.workflow = selectedWorkflows.value.filter(({value}) => (workflowhasSomeSelectedWorkflowStep(value)))
+}
+
+function workflowhasSomeSelectedWorkflowStep(workflowId: string) {
+  const workflow = workflowsStore.getWorkflowById(workflowId)
+  if (workflow == null) return false
+  return workflow.steps.some((step) => selectedWorkflowSteps.value.findIndex(({value}) => (value === step.id)) > -1)
+}
+
+onMounted(() => {
+  //filtersStore.workflow =  workflowOptions.value
+  //filtersStore.dateRange = dateRangeOptions.value
+  workflowStepOptions.value = deduplicateStepIds(workflowsStore.workflows).map(id => ({ value: id, label: t(id) }))
+  selectedWorkflowSteps.value = workflowStepOptions.value
+  selectedWorkflows.value = workflowOptions.value
+  selectGTs()
+})
+</script>
+
+<template>
+<div class="flex w-full mb-4">
+  <Dropdown
+    v-model="selectedDateRange"
+    @update:model-value="onDateRangeChange($event)"
+    :max-selected-labels="1"
+    :options="dateRangeOptions"
+    :pt="DropdownPassThroughStyles"
+    optionLabel="label"
+    :placeholder="t('Select a date range')"
+    showClear
+    class="ml-auto md:w-14rem"
+    unstyled
+  />
+  <MultiSelect
+    v-model="selectedWorkflows"
+    @update:model-value="onWorkflowChange($event)"
+    filter
+    :max-selected-labels="1"
+    :options="workflowOptions"
+    optionLabel="label"
+    :placeholder="t('Select a workflow')"
+    :selected-items-label="workflowDropdownLabel"
+    class="ml-4 md:w-14rem"
+  />
+  <MultiSelect
+    v-model="selectedWorkflowSteps"
+    @update:model-value="onWorkflowStepChange($event)"
+    filter
+    :max-selected-labels="1"
+    :options="workflowStepOptions"
+    optionLabel="label"
+    :placeholder="t('Select a processor')"
+    :selected-items-label="workflowStepDropdownLabel"
+    class="ml-4 md:w-14rem"
+  />
+</div>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 30c1154..304810f 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -13,7 +13,7 @@ import workflowsStore from "@/store/workflows-store"
 const props = defineProps<{
   gt: GroundTruth,
   metric: keyof EvaluationResultsDocumentWide,
-  selectedWorkflowStepIds: string[],
+  selectedWorkflowStepIds?: string[],
 }>()
 
 const op = ref<OverlayPanel>()
@@ -23,32 +23,15 @@ const startDate = ref<Date>(new Date('2023-10-01'))
 const endDate = ref<Date>(new Date())
 const workflows = ref<Workflow[]>([])
 
+/*
 onMounted(() => {
   workflows.value = workflowsStore.workflows
-})
+})*/
 
 function getStepAcronym(stepId) {
   return StepsAcronyms[stepId]
 }
 
-function highlightWorkflowStep(stepId: string) {
-  if (props.selectedWorkflowStepIds.length > 0) {
-    return props.selectedWorkflowStepIds.findIndex(id => id === stepId) > -1
-  } else {
-    return false
-  }
-}
-
-function showWorkflow(id: string) {
-  const wf = workflows.value.find((item) => item.id === id)
-  return wf && wf.steps.length > 0
-    ? wf.steps.findIndex((step) => (
-      props.selectedWorkflowStepIds.findIndex((id) => (
-        step.id === id
-      )) > -1
-    )) > -1
-    : false
-}
 
 function showParametersOverlay(step: WorkflowStep, event: Event) {
   selectedStep.value = step
@@ -119,14 +102,16 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
             </thead>
             <tbody>
               <tr v-for="workflow in workflows" :key="workflow.id">
-                <template v-if="showWorkflow(workflow.id)">
+            <!--<template v-if="showWorkflow(workflow.id)">-->
+                <template>
                   <td class="font-semibold pe-2">{{ workflow.label }}</td>
                   <td class="p-1 overflow-x-auto">
+                    <!--:class="/*{ highlighted: highlightWorkflowStep(step.id) }*/" (span below)-->
                     <span
                         v-for="step in workflow.steps"
                         :key="step.id"
                         class="p-1 cursor-pointer"
-                        :class="{ highlighted: highlightWorkflowStep(step.id) }"
+                        
                         @click="toggleParameterOverlay(step, $event)"
                     >
                       {{ getStepAcronym(step.id) }}
diff --git a/src/store/filters-store.ts b/src/store/filters-store.ts
index 63a9ec4..ef13768 100644
--- a/src/store/filters-store.ts
+++ b/src/store/filters-store.ts
@@ -3,11 +3,13 @@ import type { FilterOption } from "@/types"
 
 export default reactive<{
   gt: FilterOption[],
+  gtTimeline: FilterOption[],
   metric: FilterOption[],
   workflow: FilterOption[],
   dateRange: FilterOption[],
 }>({
   gt: [],
+  gtTimeline: [],
   metric: [],
   workflow: [],
   dateRange: [],

From ee81e7f6305d9a028cba52f8fa92229d8a00f198 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 21 Jun 2024 14:43:16 +0200
Subject: [PATCH 08/26] fix: show filter also when no data is selected

---
 .../workflows/WorkflowsTimeline.vue           | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index 6d8a5ff..defee00 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -36,21 +36,19 @@ watch(selectedMetric,
 
 <template>
   <div class="flex flex-col">
-    <template v-if="gtList.length > 0">
-      <div class="flex w-full mb-4">
-        <Dropdown
-          v-model="selectedMetric"
-          :options="metrics"
-          :pt="DropdownPassThroughStyles"
-          optionLabel="label"
-          placeholder="Select a metric"
-          class="ml-auto md:w-14rem"
-          unstyled
-        />
-      </div>
-      <TrendLegend class="ml-auto mb-4"/>
-      <TimelineFilters></TimelineFilters>
-    </template>
+    <div class="flex w-full mb-4">
+      <Dropdown
+        v-model="selectedMetric"
+        :options="metrics"
+        :pt="DropdownPassThroughStyles"
+        optionLabel="label"
+        placeholder="Select a metric"
+        class="ml-auto md:w-14rem"
+        unstyled
+      />
+    </div>
+    <TrendLegend class="ml-auto mb-4"/>
+    <TimelineFilters></TimelineFilters>
     <div class="flex flex-col space-y-6">
       <template v-if="gtList.length > 0">
         <TimelineItem v-for="gt in gtList" :key="gt.id" :gt="gt" :metric="selectedMetricValue" />

From d0c7689fa3371e569d5eef85f0201562b0ed7b3a Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 21 Jun 2024 14:44:27 +0200
Subject: [PATCH 09/26] fix: workflow filter label

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

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index e63dc05..a37ce8b 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -31,7 +31,7 @@ const workflowStepOptions = ref<DropdownOption[]>([])
 const selectedWorkflowSteps = ref<DropdownOption[]>([])
 
 const workflowDropdownLabel = computed(() => {
-  if (workflowStepOptions.value.length === selectedWorkflowSteps.value.length) {
+  if (workflowOptions.value.length === selectedWorkflows.value.length) {
     return t('Filter by workflow')
   }
   return null

From 040a8e815fbf4d95d434dabf19753b2d76dce2db Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 21 Jun 2024 15:04:19 +0200
Subject: [PATCH 10/26] feat: hide workflow when neither workflow or processor
 in workflow are selected

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

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index a37ce8b..efd5031 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -112,6 +112,7 @@ onMounted(() => {
   selectedWorkflowSteps.value = workflowStepOptions.value
   selectedWorkflows.value = workflowOptions.value
   selectGTs()
+  selectWorkflows()
 })
 </script>
 
diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index e95be2e..bb1ac77 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -6,10 +6,11 @@ import MetricChart from "@/components/workflows/timeline/MetricChart.vue"
 import type { EvaluationResultsDocumentWide, GroundTruth, Workflow, WorkflowStep } from "@/types"
 import MetricAverageChart from "@/components/workflows/timeline/MetricAverageChart.vue"
 import { Icon } from '@iconify/vue'
-import { onMounted, nextTick, ref } from "vue"
+import { computed, onMounted, nextTick, ref } from "vue"
 import { OverlayPanelDropdownStyles } from "@/helpers/pt"
 import workflowsStore from "@/store/workflows-store"
 import TimelineItemMetadata from "@/components/workflows/timeline/TimelineItemMetadata.vue"
+import filtersStore from "@/store/filters-store"
 
 
 const props = defineProps<{
@@ -22,11 +23,8 @@ 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[]>([])
 
-onMounted(() => {
-  workflows.value = workflowsStore.workflows
-})
+const workflows = computed<Workflow[]>(() => workflowsStore.workflows.filter(({ id }) => filtersStore.workflow.findIndex(({ value }) => value === id ) > - 1))
 
 function getStepAcronym(stepId) {
   return StepsAcronyms[stepId]

From ea3cbeadcc128b162134afb1c0de9dc0d4d52eff Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 21 Jun 2024 15:23:29 +0200
Subject: [PATCH 11/26] refactor: remove unused imports/vars, style

---
 .../workflows/timeline/TimelineFilters.vue    | 21 +++++++------------
 .../workflows/timeline/TimelineItem.vue       |  3 +--
 src/store/filters-store.ts                    |  4 +---
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index efd5031..e4f8d18 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -4,7 +4,7 @@ import workflowsStore from "@/store/workflows-store"
 import { computed, onMounted, ref } from "vue"
 import Dropdown from "primevue/dropdown"
 import MultiSelect from "primevue/multiselect"
-import { type FilterOption, type DropdownOption, type GroundTruth } from "@/types"
+import { type DropdownOption, type GroundTruth } from "@/types"
 import { DropdownPassThroughStyles } from '@/helpers/pt'
 import { deduplicateStepIds, mapGtId } from '@/helpers/utils'
 import { useI18n } from "vue-i18n"
@@ -19,12 +19,9 @@ const dateRangeOptions = computed(() => {
   }, new Set<string>())
   return Array.from(values).sort().map(value => ({ value, label: value }))
 })
-
 const selectedDateRange = ref<DropdownOption | null>()
-//const dateRangeOptions = computed<DropdownOption[]>(() => filtersStore.dateRange)
 
 const workflowOptions = computed(() => workflowsStore.workflows.map(({ id, label }) => ({ value: id, label })))
-//const workflowOptions = computed<DropdownOption[]>(() => filtersStore.workflow)
 const selectedWorkflows = ref<DropdownOption[]>([])
 
 const workflowStepOptions = ref<DropdownOption[]>([])
@@ -62,14 +59,14 @@ const onWorkflowStepChange = (event: any) => {
 }
 
 const selectGTs = () => {
-  filtersStore.gtTimeline = filtersStore.gt.filter(({value}) => {
+  filtersStore.gtTimeline = filtersStore.gt.filter(({ value }) => {
     const gt = workflowsStore.getGtById(value)
     if(!gt) return false
     return hasSomeSelectedProcessor(gt) && hasSelectedDateRange(gt) && hasSomeSelectedWorkflow(gt)
   })
 }
 
-function hasSomeSelectedProcessor(gt: GroundTruth) {
+const hasSomeSelectedProcessor = (gt: GroundTruth) => {
   if (selectedWorkflowSteps.value.length <= 0) return false
   const gtRuns = workflowsStore.getRuns(gt.id)
   return selectedWorkflowSteps.value.some((selectedStep) => {
@@ -79,7 +76,7 @@ function hasSomeSelectedProcessor(gt: GroundTruth) {
   })
 }
 
-function hasSelectedDateRange(gt: GroundTruth) {
+const hasSelectedDateRange = (gt: GroundTruth) => {
   if (!selectedDateRange.value) return true //later false if multiselect
   const splitDateRange = selectedDateRange.value.value.split('-')
   const from = splitDateRange[0]
@@ -87,7 +84,7 @@ function hasSelectedDateRange(gt: GroundTruth) {
   return gt.metadata.time.notBefore === from && gt.metadata.time.notAfter === to
 }
 
-function hasSomeSelectedWorkflow(gt: GroundTruth) {
+const hasSomeSelectedWorkflow = (gt: GroundTruth) => {
   if (selectedWorkflows.value.length <= 0) return false
   const gtRuns = workflowsStore.getRuns(gt.id)
   return gtRuns.some((gtRun) => {
@@ -96,18 +93,16 @@ function hasSomeSelectedWorkflow(gt: GroundTruth) {
 }
 
 const selectWorkflows = () => {
-  filtersStore.workflow = selectedWorkflows.value.filter(({value}) => (workflowhasSomeSelectedWorkflowStep(value)))
+  filtersStore.workflow = selectedWorkflows.value.filter(({ value }) => (workflowhasSomeSelectedWorkflowStep(value)))
 }
 
-function workflowhasSomeSelectedWorkflowStep(workflowId: string) {
+const workflowhasSomeSelectedWorkflowStep = (workflowId: string) => {
   const workflow = workflowsStore.getWorkflowById(workflowId)
   if (workflow == null) return false
-  return workflow.steps.some((step) => selectedWorkflowSteps.value.findIndex(({value}) => (value === step.id)) > -1)
+  return workflow.steps.some((step) => selectedWorkflowSteps.value.findIndex(({ value }) => (value === step.id)) > -1)
 }
 
 onMounted(() => {
-  //filtersStore.workflow =  workflowOptions.value
-  //filtersStore.dateRange = dateRangeOptions.value
   workflowStepOptions.value = deduplicateStepIds(workflowsStore.workflows).map(id => ({ value: id, label: t(id) }))
   selectedWorkflowSteps.value = workflowStepOptions.value
   selectedWorkflows.value = workflowOptions.value
diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index bb1ac77..f7cb57e 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -6,7 +6,7 @@ import MetricChart from "@/components/workflows/timeline/MetricChart.vue"
 import type { EvaluationResultsDocumentWide, GroundTruth, Workflow, WorkflowStep } from "@/types"
 import MetricAverageChart from "@/components/workflows/timeline/MetricAverageChart.vue"
 import { Icon } from '@iconify/vue'
-import { computed, onMounted, nextTick, ref } from "vue"
+import { computed, nextTick, ref } from "vue"
 import { OverlayPanelDropdownStyles } from "@/helpers/pt"
 import workflowsStore from "@/store/workflows-store"
 import TimelineItemMetadata from "@/components/workflows/timeline/TimelineItemMetadata.vue"
@@ -30,7 +30,6 @@ function getStepAcronym(stepId) {
   return StepsAcronyms[stepId]
 }
 
-
 function showParametersOverlay(step: WorkflowStep, event: Event) {
   selectedStep.value = step
   op.value?.show(event)
diff --git a/src/store/filters-store.ts b/src/store/filters-store.ts
index ef13768..1dfec73 100644
--- a/src/store/filters-store.ts
+++ b/src/store/filters-store.ts
@@ -6,11 +6,9 @@ export default reactive<{
   gtTimeline: FilterOption[],
   metric: FilterOption[],
   workflow: FilterOption[],
-  dateRange: FilterOption[],
 }>({
   gt: [],
   gtTimeline: [],
   metric: [],
-  workflow: [],
-  dateRange: [],
+  workflow: []
 })

From 00336ceba156dc40d2856895c23c49ea24edc282 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 21 Jun 2024 15:43:42 +0200
Subject: [PATCH 12/26] fix: remove search from workflow filter

---
 src/components/workflows/WorkflowsTimeline.vue        | 1 -
 src/components/workflows/timeline/TimelineFilters.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index defee00..f49a498 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -15,7 +15,6 @@ import TimelineFilters from "./timeline/TimelineFilters.vue"
 const { t } = useI18n()
 const gtList = computed<GroundTruth[]>(() => workflowsStore.gt.filter(({ id }) => filtersStore.gtTimeline.findIndex(({ value }) => value === id) > -1))
 const workflows = ref<Workflow[]>([])
-
 const selectedMetric = ref<DropdownOption | null>(null)
 const metrics = computed<DropdownOption[]>(() => Object.keys(EvaluationMetrics).map(key => ({ value: EvaluationMetrics[key], label: t(EvaluationMetrics[key]) })))
 const selectedMetricValue = computed<keyof EvaluationResultsDocumentWide>(() => <keyof EvaluationResultsDocumentWide>selectedMetric.value?.value || EvaluationMetrics.CER_MEAN)
diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index e4f8d18..e27ef0d 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -128,7 +128,6 @@ onMounted(() => {
   <MultiSelect
     v-model="selectedWorkflows"
     @update:model-value="onWorkflowChange($event)"
-    filter
     :max-selected-labels="1"
     :options="workflowOptions"
     optionLabel="label"

From 11afc47dfc7a740346638064fcd40c944872493b Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 21 Jun 2024 15:56:32 +0200
Subject: [PATCH 13/26] feat: change date range dropdown to multiselect

---
 .../workflows/timeline/TimelineFilters.vue    | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index e27ef0d..063a1a0 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -2,10 +2,8 @@
 import filtersStore from "@/store/filters-store"
 import workflowsStore from "@/store/workflows-store"
 import { computed, onMounted, ref } from "vue"
-import Dropdown from "primevue/dropdown"
 import MultiSelect from "primevue/multiselect"
 import { type DropdownOption, type GroundTruth } from "@/types"
-import { DropdownPassThroughStyles } from '@/helpers/pt'
 import { deduplicateStepIds, mapGtId } from '@/helpers/utils'
 import { useI18n } from "vue-i18n"
 
@@ -19,7 +17,7 @@ const dateRangeOptions = computed(() => {
   }, new Set<string>())
   return Array.from(values).sort().map(value => ({ value, label: value }))
 })
-const selectedDateRange = ref<DropdownOption | null>()
+const selectedDateRange = ref<DropdownOption[]>([])
 
 const workflowOptions = computed(() => workflowsStore.workflows.map(({ id, label }) => ({ value: id, label })))
 const selectedWorkflows = ref<DropdownOption[]>([])
@@ -27,6 +25,13 @@ const selectedWorkflows = ref<DropdownOption[]>([])
 const workflowStepOptions = ref<DropdownOption[]>([])
 const selectedWorkflowSteps = ref<DropdownOption[]>([])
 
+const dateRangeDropdownLabel = computed(() => {
+  if (dateRangeOptions.value.length === selectedDateRange.value.length) {
+    return t('Filter by date range')
+  }
+  return null
+})
+
 const workflowDropdownLabel = computed(() => {
   if (workflowOptions.value.length === selectedWorkflows.value.length) {
     return t('Filter by workflow')
@@ -62,12 +67,11 @@ const selectGTs = () => {
   filtersStore.gtTimeline = filtersStore.gt.filter(({ value }) => {
     const gt = workflowsStore.getGtById(value)
     if(!gt) return false
-    return hasSomeSelectedProcessor(gt) && hasSelectedDateRange(gt) && hasSomeSelectedWorkflow(gt)
+    return hasSomeSelectedProcessor(gt) && hasSomeSelectedDateRange(gt) && hasSomeSelectedWorkflow(gt)
   })
 }
 
 const hasSomeSelectedProcessor = (gt: GroundTruth) => {
-  if (selectedWorkflowSteps.value.length <= 0) return false
   const gtRuns = workflowsStore.getRuns(gt.id)
   return selectedWorkflowSteps.value.some((selectedStep) => {
     return gtRuns.some((gtRun) => {
@@ -76,16 +80,16 @@ const hasSomeSelectedProcessor = (gt: GroundTruth) => {
   })
 }
 
-const hasSelectedDateRange = (gt: GroundTruth) => {
-  if (!selectedDateRange.value) return true //later false if multiselect
-  const splitDateRange = selectedDateRange.value.value.split('-')
-  const from = splitDateRange[0]
-  const to = splitDateRange[1]
-  return gt.metadata.time.notBefore === from && gt.metadata.time.notAfter === to
+const hasSomeSelectedDateRange = (gt: GroundTruth) => {
+  return selectedDateRange.value.some(({ value }) => {
+    const splitDateRange = value.split('-')
+    const from = splitDateRange[0]
+    const to = splitDateRange[1]
+    return gt.metadata.time.notBefore === from && gt.metadata.time.notAfter === to
+  })
 }
 
 const hasSomeSelectedWorkflow = (gt: GroundTruth) => {
-  if (selectedWorkflows.value.length <= 0) return false
   const gtRuns = workflowsStore.getRuns(gt.id)
   return gtRuns.some((gtRun) => {
     return selectedWorkflows.value.findIndex(({ value }) => (value === mapGtId(gtRun.metadata.ocr_workflow.id)))
@@ -104,8 +108,11 @@ const workflowhasSomeSelectedWorkflowStep = (workflowId: string) => {
 
 onMounted(() => {
   workflowStepOptions.value = deduplicateStepIds(workflowsStore.workflows).map(id => ({ value: id, label: t(id) }))
-  selectedWorkflowSteps.value = workflowStepOptions.value
+  
+  selectedDateRange.value = dateRangeOptions.value
   selectedWorkflows.value = workflowOptions.value
+  selectedWorkflowSteps.value = workflowStepOptions.value
+  
   selectGTs()
   selectWorkflows()
 })
@@ -113,17 +120,15 @@ onMounted(() => {
 
 <template>
 <div class="flex w-full mb-4">
-  <Dropdown
+  <MultiSelect
     v-model="selectedDateRange"
     @update:model-value="onDateRangeChange($event)"
     :max-selected-labels="1"
     :options="dateRangeOptions"
-    :pt="DropdownPassThroughStyles"
     optionLabel="label"
     :placeholder="t('Select a date range')"
-    showClear
+    :selected-items-label="dateRangeDropdownLabel"
     class="ml-auto md:w-14rem"
-    unstyled
   />
   <MultiSelect
     v-model="selectedWorkflows"

From b6ff953ef0e0ef85d2601ca9f619d170ef926102 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 21 Jun 2024 15:58:07 +0200
Subject: [PATCH 14/26] refactor: change order

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

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index 063a1a0..6e8aab8 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -71,6 +71,10 @@ const selectGTs = () => {
   })
 }
 
+const selectWorkflows = () => {
+  filtersStore.workflow = selectedWorkflows.value.filter(({ value }) => (workflowhasSomeSelectedWorkflowStep(value)))
+}
+
 const hasSomeSelectedProcessor = (gt: GroundTruth) => {
   const gtRuns = workflowsStore.getRuns(gt.id)
   return selectedWorkflowSteps.value.some((selectedStep) => {
@@ -96,10 +100,6 @@ const hasSomeSelectedWorkflow = (gt: GroundTruth) => {
   })
 }
 
-const selectWorkflows = () => {
-  filtersStore.workflow = selectedWorkflows.value.filter(({ value }) => (workflowhasSomeSelectedWorkflowStep(value)))
-}
-
 const workflowhasSomeSelectedWorkflowStep = (workflowId: string) => {
   const workflow = workflowsStore.getWorkflowById(workflowId)
   if (workflow == null) return false

From d138ebc848dbfdcc8a47acffdc5fe8cfab919e5e Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 21 Jun 2024 16:08:53 +0200
Subject: [PATCH 15/26] feat: add i18n translations

---
 src/components/workflows/WorkflowsTimeline.vue       |  4 ++--
 .../workflows/timeline/TimelineFilters.vue           | 12 ++++++------
 src/locales/de.json                                  |  8 +++++++-
 src/locales/en.json                                  |  9 +++++++--
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/workflows/WorkflowsTimeline.vue b/src/components/workflows/WorkflowsTimeline.vue
index f49a498..c3c4d63 100644
--- a/src/components/workflows/WorkflowsTimeline.vue
+++ b/src/components/workflows/WorkflowsTimeline.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import TimelineItem from "@/components/workflows/timeline/TimelineItem.vue"
 import Dropdown from 'primevue/dropdown'
-import {computed, onMounted, ref, watch} from "vue"
-import {EvaluationMetrics, getMaxValueByMetric} from '@/helpers/metrics'
+import { computed, onMounted, ref, watch} from "vue"
+import { EvaluationMetrics, getMaxValueByMetric} from '@/helpers/metrics'
 import { useI18n } from "vue-i18n"
 import type { DropdownOption, EvaluationResultsDocumentWide, Workflow, GroundTruth } from "@/types"
 import { DropdownPassThroughStyles } from '@/helpers/pt'
diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index 6e8aab8..4c5692a 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -27,21 +27,21 @@ const selectedWorkflowSteps = ref<DropdownOption[]>([])
 
 const dateRangeDropdownLabel = computed(() => {
   if (dateRangeOptions.value.length === selectedDateRange.value.length) {
-    return t('Filter by date range')
+    return t('filter_by_date_range')
   }
   return null
 })
 
 const workflowDropdownLabel = computed(() => {
   if (workflowOptions.value.length === selectedWorkflows.value.length) {
-    return t('Filter by workflow')
+    return t('filter_by_workflow')
   }
   return null
 })
 
 const workflowStepDropdownLabel = computed(() => {
   if (workflowStepOptions.value.length === selectedWorkflowSteps.value.length) {
-    return t('Filter by processor')
+    return t('filter_by_processor')
   }
   return null
 })
@@ -126,7 +126,7 @@ onMounted(() => {
     :max-selected-labels="1"
     :options="dateRangeOptions"
     optionLabel="label"
-    :placeholder="t('Select a date range')"
+    :placeholder="t('select_a_date_range')"
     :selected-items-label="dateRangeDropdownLabel"
     class="ml-auto md:w-14rem"
   />
@@ -136,7 +136,7 @@ onMounted(() => {
     :max-selected-labels="1"
     :options="workflowOptions"
     optionLabel="label"
-    :placeholder="t('Select a workflow')"
+    :placeholder="t('select_a_workflow')"
     :selected-items-label="workflowDropdownLabel"
     class="ml-4 md:w-14rem"
   />
@@ -147,7 +147,7 @@ onMounted(() => {
     :max-selected-labels="1"
     :options="workflowStepOptions"
     optionLabel="label"
-    :placeholder="t('Select a processor')"
+    :placeholder="t('select_a_processor')"
     :selected-items-label="workflowStepDropdownLabel"
     class="ml-4 md:w-14rem"
   />
diff --git a/src/locales/de.json b/src/locales/de.json
index d367ca3..db55ba1 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -80,5 +80,11 @@
   "volume": "Umfang",
   "labelling": "Kennzeichnung",
   "no_labels_for_this_entry": "Keine Kennzeichnung für diesen Eintrag.",
-  "average_timeline": "Chronik (Durchschnitt)"
+  "average_timeline": "Chronik (Durchschnitt)",
+  "filter_by_date_range": "Nach Zeitspanne filtern",
+  "filter_by_workflow": "Nach Workflow filtern",
+  "filter_by_processor": "Nach Prozessor filtern",
+  "select_a_date_range": "Zeitraum auswählen",
+  "select_a_workflow": "Workflow auswählen",
+  "select_a_processor": "Prozessor auswählen"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 1ab9d4c..2fc3f36 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -74,6 +74,11 @@
   "volume": "Volume",
   "labelling": "Labelling",
   "no_labels_for_this_entry": "No labels for this entry.",
-  "average_timeline": "Average Timeline"
-
+  "average_timeline": "Average Timeline",
+  "filter_by_date_range": "Filter by date range",
+  "filter_by_workflow": "Filter by workflow",
+  "filter_by_processor": "Filter by processor",
+  "select_a_date_range": "Select a date range",
+  "select_a_workflow": "Select a workflow",
+  "select_a_processor": "Select a processor"
 }

From db665abdf5c5324e0620a67881a5b9cbcb4c7325 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 21 Jun 2024 16:25:30 +0200
Subject: [PATCH 16/26] fix: adjust filter position for smaller screens

---
 .../workflows/timeline/TimelineFilters.vue         | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index 4c5692a..218eb87 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -119,7 +119,7 @@ onMounted(() => {
 </script>
 
 <template>
-<div class="flex w-full mb-4">
+<div class="flex flex-wrap mb-4 justify-start lg:justify-end">
   <MultiSelect
     v-model="selectedDateRange"
     @update:model-value="onDateRangeChange($event)"
@@ -128,7 +128,7 @@ onMounted(() => {
     optionLabel="label"
     :placeholder="t('select_a_date_range')"
     :selected-items-label="dateRangeDropdownLabel"
-    class="ml-auto md:w-14rem"
+    class="mr-4 mb-2 lg:m-0 lg:ml-auto md:w-14rem"
   />
   <MultiSelect
     v-model="selectedWorkflows"
@@ -138,7 +138,7 @@ onMounted(() => {
     optionLabel="label"
     :placeholder="t('select_a_workflow')"
     :selected-items-label="workflowDropdownLabel"
-    class="ml-4 md:w-14rem"
+    class="mr-4 mb-2 lg:m-0 lg:ml-4 md:w-14rem"
   />
   <MultiSelect
     v-model="selectedWorkflowSteps"
@@ -149,12 +149,8 @@ onMounted(() => {
     optionLabel="label"
     :placeholder="t('select_a_processor')"
     :selected-items-label="workflowStepDropdownLabel"
-    class="ml-4 md:w-14rem"
+    class="lg:ml-4 md:w-14rem"
   />
 </div>
 
-</template>
-
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file

From 4687958a84e86976851ec3dfe07052ace257bdee Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 21 Jun 2024 16:33:20 +0200
Subject: [PATCH 17/26] fix: changed faulty imported that failed build

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

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index 218eb87..873cfd7 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -3,7 +3,7 @@ import filtersStore from "@/store/filters-store"
 import workflowsStore from "@/store/workflows-store"
 import { computed, onMounted, ref } from "vue"
 import MultiSelect from "primevue/multiselect"
-import { type DropdownOption, type GroundTruth } from "@/types"
+import type { DropdownOption, GroundTruth } from "@/types"
 import { deduplicateStepIds, mapGtId } from '@/helpers/utils'
 import { useI18n } from "vue-i18n"
 

From 73c0cacc4ed33433a7b1fb183399cd651a7391b3 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Tue, 25 Jun 2024 15:32:43 +0200
Subject: [PATCH 18/26] wip: add label filter

---
 .../workflows/timeline/TimelineFilters.vue    | 44 ++++++++++++++++++-
 src/types/index.d.ts                          |  2 +-
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index 873cfd7..1e7ba25 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -25,6 +25,23 @@ const selectedWorkflows = ref<DropdownOption[]>([])
 const workflowStepOptions = ref<DropdownOption[]>([])
 const selectedWorkflowSteps = ref<DropdownOption[]>([])
 
+const labellingOptions = computed(() => {
+  return [
+      ...new Set(workflowsStore.gt.map(gt => 
+      Array.isArray(gt.metadata.labelling) && gt.metadata.labelling.length > 0 ? gt.metadata.labelling : [t('Kein Labelling')]) //gt.metadata.labelling ?? [t('Kein Labelling')])
+      .flat(1))
+    ].sort()
+    .map(label => ({ value: label, label }))
+})
+const selectedLabelling = ref<DropdownOption[]>([])
+
+const labellingDropdownLabel = computed(() => {
+  if (labellingOptions.value.length === selectedLabelling.value.length) {
+    return t('Filter by labelling')
+  }
+  return null
+})
+
 const dateRangeDropdownLabel = computed(() => {
   if (dateRangeOptions.value.length === selectedDateRange.value.length) {
     return t('filter_by_date_range')
@@ -46,6 +63,11 @@ const workflowStepDropdownLabel = computed(() => {
   return null
 })
 
+const onLabellingChange = (event: any) => {
+  selectedLabelling.value = event
+  selectGTs()
+}
+
 const onDateRangeChange = (event: any) => {
   selectedDateRange.value = event
   selectGTs()
@@ -67,13 +89,19 @@ const selectGTs = () => {
   filtersStore.gtTimeline = filtersStore.gt.filter(({ value }) => {
     const gt = workflowsStore.getGtById(value)
     if(!gt) return false
-    return hasSomeSelectedProcessor(gt) && hasSomeSelectedDateRange(gt) && hasSomeSelectedWorkflow(gt)
+    return hasSomeSelectedLabelling(gt) && hasSomeSelectedProcessor(gt) && hasSomeSelectedDateRange(gt) && hasSomeSelectedWorkflow(gt)
   })
 }
 
 const selectWorkflows = () => {
   filtersStore.workflow = selectedWorkflows.value.filter(({ value }) => (workflowhasSomeSelectedWorkflowStep(value)))
 }
+const hasSomeSelectedLabelling = (gt: GroundTruth) => {
+  return selectedLabelling.value.some(({ value }) => {
+    if(!Array.isArray(gt.metadata.labelling) || gt.metadata.labelling.length <= 0) return value === t('Kein Labelling')
+    return gt.metadata.labelling?.some(labelling => labelling === value)
+  })
+}
 
 const hasSomeSelectedProcessor = (gt: GroundTruth) => {
   const gtRuns = workflowsStore.getRuns(gt.id)
@@ -112,7 +140,8 @@ onMounted(() => {
   selectedDateRange.value = dateRangeOptions.value
   selectedWorkflows.value = workflowOptions.value
   selectedWorkflowSteps.value = workflowStepOptions.value
-  
+  selectedLabelling.value = labellingOptions.value
+
   selectGTs()
   selectWorkflows()
 })
@@ -120,6 +149,17 @@ onMounted(() => {
 
 <template>
 <div class="flex flex-wrap mb-4 justify-start lg:justify-end">
+  <MultiSelect
+    v-model="selectedLabelling"
+    @update:model-value="onLabellingChange($event)"
+    filter
+    :max-selected-labels="0"
+    :options="labellingOptions"
+    option-label="label"
+    :placeholder="t('Select labelling')"
+    :selected-items-label="labellingDropdownLabel"
+    class=""
+  />
   <MultiSelect
     v-model="selectedDateRange"
     @update:model-value="onDateRangeChange($event)"
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 2776794..c4e5362 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -17,7 +17,7 @@ export interface GroundTruthMetadata {
     count: string,
     level: string
   },
-  labelling: string[],
+  labelling?: string[],
   language: string[],
   license: {
     name: string,

From ae905c7d2a8c91266f17a6a2b8c64b0846e2ab3a Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Tue, 25 Jun 2024 17:21:23 +0200
Subject: [PATCH 19/26] wip: added label and script-type filter

---
 .../workflows/timeline/TimelineFilters.vue    | 49 ++++++++++++++++---
 src/locales/de.json                           |  7 ++-
 src/locales/en.json                           |  7 ++-
 3 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index 1e7ba25..4f3fc70 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -28,16 +28,33 @@ const selectedWorkflowSteps = ref<DropdownOption[]>([])
 const labellingOptions = computed(() => {
   return [
       ...new Set(workflowsStore.gt.map(gt => 
-      Array.isArray(gt.metadata.labelling) && gt.metadata.labelling.length > 0 ? gt.metadata.labelling : [t('Kein Labelling')]) //gt.metadata.labelling ?? [t('Kein Labelling')])
+      Array.isArray(gt.metadata.labelling) && gt.metadata.labelling.length > 0 ? gt.metadata.labelling : [t('no_labelling')])
       .flat(1))
     ].sort()
-    .map(label => ({ value: label, label }))
+    .map(value => ({ value, label: value }))
 })
 const selectedLabelling = ref<DropdownOption[]>([])
 
+const scriptTypeOptions = computed(() => {
+  return [
+    ...new Set(workflowsStore.gt.map(gt => 
+      gt.metadata["script-type"]
+    ))
+  ].sort()
+  .map(value => ({value, label: value}))
+})
+const selectedScriptTypes = ref<DropdownOption[]>([])
+
 const labellingDropdownLabel = computed(() => {
   if (labellingOptions.value.length === selectedLabelling.value.length) {
-    return t('Filter by labelling')
+    return t('filter_by_labelling')
+  }
+  return null
+})
+
+const scriptTypeDropdownLabel = computed(() => {
+  if (scriptTypeOptions.value.length === selectedScriptTypes.value.length) {
+    return t('filter_by_script_type')
   }
   return null
 })
@@ -68,6 +85,11 @@ const onLabellingChange = (event: any) => {
   selectGTs()
 }
 
+const onScriptTypeChange = (event: any) => {
+  selectedScriptTypes.value = event
+  selectGTs()
+}
+
 const onDateRangeChange = (event: any) => {
   selectedDateRange.value = event
   selectGTs()
@@ -89,7 +111,7 @@ const selectGTs = () => {
   filtersStore.gtTimeline = filtersStore.gt.filter(({ value }) => {
     const gt = workflowsStore.getGtById(value)
     if(!gt) return false
-    return hasSomeSelectedLabelling(gt) && hasSomeSelectedProcessor(gt) && hasSomeSelectedDateRange(gt) && hasSomeSelectedWorkflow(gt)
+    return hasSomeSelectedLabelling(gt) && hasSomeSelectedScriptType(gt) && hasSomeSelectedProcessor(gt) && hasSomeSelectedDateRange(gt) && hasSomeSelectedWorkflow(gt)
   })
 }
 
@@ -98,11 +120,15 @@ const selectWorkflows = () => {
 }
 const hasSomeSelectedLabelling = (gt: GroundTruth) => {
   return selectedLabelling.value.some(({ value }) => {
-    if(!Array.isArray(gt.metadata.labelling) || gt.metadata.labelling.length <= 0) return value === t('Kein Labelling')
+    if(!Array.isArray(gt.metadata.labelling) || gt.metadata.labelling.length <= 0) return value === t('no_labelling')
     return gt.metadata.labelling?.some(labelling => labelling === value)
   })
 }
 
+const hasSomeSelectedScriptType = (gt: GroundTruth) => {
+  return selectedScriptTypes.value.some(({value}) => value === gt.metadata["script-type"])
+}
+
 const hasSomeSelectedProcessor = (gt: GroundTruth) => {
   const gtRuns = workflowsStore.getRuns(gt.id)
   return selectedWorkflowSteps.value.some((selectedStep) => {
@@ -141,6 +167,7 @@ onMounted(() => {
   selectedWorkflows.value = workflowOptions.value
   selectedWorkflowSteps.value = workflowStepOptions.value
   selectedLabelling.value = labellingOptions.value
+  selectedScriptTypes.value = scriptTypeOptions.value
 
   selectGTs()
   selectWorkflows()
@@ -156,10 +183,20 @@ onMounted(() => {
     :max-selected-labels="0"
     :options="labellingOptions"
     option-label="label"
-    :placeholder="t('Select labelling')"
+    :placeholder="t('select_a_label')"
     :selected-items-label="labellingDropdownLabel"
     class=""
   />
+  <MultiSelect
+    v-model="selectedScriptTypes"
+    @update:model-value="onScriptTypeChange($event)"
+    :max-selected-labels="0"
+    :options="scriptTypeOptions"
+    option-label="label"
+    :placeholder="t('select_a_script_type')"
+    :selected-items-label="scriptTypeDropdownLabel"
+    class=""
+  />
   <MultiSelect
     v-model="selectedDateRange"
     @update:model-value="onDateRangeChange($event)"
diff --git a/src/locales/de.json b/src/locales/de.json
index db55ba1..e8c9e3a 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -84,7 +84,12 @@
   "filter_by_date_range": "Nach Zeitspanne filtern",
   "filter_by_workflow": "Nach Workflow filtern",
   "filter_by_processor": "Nach Prozessor filtern",
+  "filter_by_labelling": "Nach Kennzeichnungen filtern",
+  "filter_by_script_type": "Nach Skript-Typ filtern",
   "select_a_date_range": "Zeitraum auswählen",
   "select_a_workflow": "Workflow auswählen",
-  "select_a_processor": "Prozessor auswählen"
+  "select_a_processor": "Prozessor auswählen",
+  "select_a_label": "Kennzeichnung auswählen",
+  "select_a_script_type": "Skript-Typ auswählen",
+  "no_labelling": "Keine Kennzeichnung"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 2fc3f36..f851d9d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -78,7 +78,12 @@
   "filter_by_date_range": "Filter by date range",
   "filter_by_workflow": "Filter by workflow",
   "filter_by_processor": "Filter by processor",
+  "filter_by_labelling": "Filter by labelling",
+  "filter_by_script_type": "Filter by Script-Type",
   "select_a_date_range": "Select a date range",
   "select_a_workflow": "Select a workflow",
-  "select_a_processor": "Select a processor"
+  "select_a_processor": "Select a processor",
+  "select_a_label": "Select a label",
+  "select_a_script_type": "Select a Script-Type",
+  "no_labelling": "No labelling"
 }

From 8b3539b4390c97de38492ef1bb72af04a7b88917 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Tue, 25 Jun 2024 17:42:35 +0200
Subject: [PATCH 20/26] fix: adjust styling for all screen sizes

---
 src/components/workflows/timeline/TimelineFilters.vue | 11 +++--------
 src/locales/en.json                                   |  4 ++--
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index 4f3fc70..81ad702 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -41,7 +41,7 @@ const scriptTypeOptions = computed(() => {
       gt.metadata["script-type"]
     ))
   ].sort()
-  .map(value => ({value, label: value}))
+  .map(value => ({ value, label: value }))
 })
 const selectedScriptTypes = ref<DropdownOption[]>([])
 
@@ -126,7 +126,7 @@ const hasSomeSelectedLabelling = (gt: GroundTruth) => {
 }
 
 const hasSomeSelectedScriptType = (gt: GroundTruth) => {
-  return selectedScriptTypes.value.some(({value}) => value === gt.metadata["script-type"])
+  return selectedScriptTypes.value.some(({ value }) => value === gt.metadata["script-type"])
 }
 
 const hasSomeSelectedProcessor = (gt: GroundTruth) => {
@@ -175,7 +175,7 @@ onMounted(() => {
 </script>
 
 <template>
-<div class="flex flex-wrap mb-4 justify-start lg:justify-end">
+<div class="pb-4 lg:pb-6 grid sm:grid-cols-2 gap-4 xl:grid-cols-5 xl:gap-8">
   <MultiSelect
     v-model="selectedLabelling"
     @update:model-value="onLabellingChange($event)"
@@ -185,7 +185,6 @@ onMounted(() => {
     option-label="label"
     :placeholder="t('select_a_label')"
     :selected-items-label="labellingDropdownLabel"
-    class=""
   />
   <MultiSelect
     v-model="selectedScriptTypes"
@@ -195,7 +194,6 @@ onMounted(() => {
     option-label="label"
     :placeholder="t('select_a_script_type')"
     :selected-items-label="scriptTypeDropdownLabel"
-    class=""
   />
   <MultiSelect
     v-model="selectedDateRange"
@@ -205,7 +203,6 @@ onMounted(() => {
     optionLabel="label"
     :placeholder="t('select_a_date_range')"
     :selected-items-label="dateRangeDropdownLabel"
-    class="mr-4 mb-2 lg:m-0 lg:ml-auto md:w-14rem"
   />
   <MultiSelect
     v-model="selectedWorkflows"
@@ -215,7 +212,6 @@ onMounted(() => {
     optionLabel="label"
     :placeholder="t('select_a_workflow')"
     :selected-items-label="workflowDropdownLabel"
-    class="mr-4 mb-2 lg:m-0 lg:ml-4 md:w-14rem"
   />
   <MultiSelect
     v-model="selectedWorkflowSteps"
@@ -226,7 +222,6 @@ onMounted(() => {
     optionLabel="label"
     :placeholder="t('select_a_processor')"
     :selected-items-label="workflowStepDropdownLabel"
-    class="lg:ml-4 md:w-14rem"
   />
 </div>
 
diff --git a/src/locales/en.json b/src/locales/en.json
index f851d9d..f53ba48 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -79,11 +79,11 @@
   "filter_by_workflow": "Filter by workflow",
   "filter_by_processor": "Filter by processor",
   "filter_by_labelling": "Filter by labelling",
-  "filter_by_script_type": "Filter by Script-Type",
+  "filter_by_script_type": "Filter by script-type",
   "select_a_date_range": "Select a date range",
   "select_a_workflow": "Select a workflow",
   "select_a_processor": "Select a processor",
   "select_a_label": "Select a label",
-  "select_a_script_type": "Select a Script-Type",
+  "select_a_script_type": "Select a script-type",
   "no_labelling": "No labelling"
 }

From 9be2ba805170682e099721b3d89a0a67899b8118 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 28 Jun 2024 11:56:00 +0200
Subject: [PATCH 21/26] style: clearer indentation

---
 src/components/workflows/timeline/TimelineFilters.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index 81ad702..c0ebae3 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -28,9 +28,11 @@ const selectedWorkflowSteps = ref<DropdownOption[]>([])
 const labellingOptions = computed(() => {
   return [
       ...new Set(workflowsStore.gt.map(gt => 
-      Array.isArray(gt.metadata.labelling) && gt.metadata.labelling.length > 0 ? gt.metadata.labelling : [t('no_labelling')])
-      .flat(1))
-    ].sort()
+          Array.isArray(gt.metadata.labelling) && gt.metadata.labelling.length > 0 ? gt.metadata.labelling : [t('no_labelling')]
+        ).flat(1)
+      )
+    ]
+    .sort()
     .map(value => ({ value, label: value }))
 })
 const selectedLabelling = ref<DropdownOption[]>([])
@@ -40,7 +42,8 @@ const scriptTypeOptions = computed(() => {
     ...new Set(workflowsStore.gt.map(gt => 
       gt.metadata["script-type"]
     ))
-  ].sort()
+  ]
+  .sort()
   .map(value => ({ value, label: value }))
 })
 const selectedScriptTypes = ref<DropdownOption[]>([])

From 07a1b35e1e531373905aaccf89d1131f133df00c Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 28 Jun 2024 12:06:50 +0200
Subject: [PATCH 22/26] fix: readd missing comparision

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

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index d15c3e6..eb5c562 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -153,7 +153,7 @@ const hasSomeSelectedDateRange = (gt: GroundTruth) => {
 const hasSomeSelectedWorkflow = (gt: GroundTruth) => {
   const gtRuns = workflowsStore.getRuns(gt.id)
   return gtRuns.some((gtRun) => {
-    return selectedWorkflows.value.findIndex(({ value }) => (value === mapGtId(gtRun.metadata.ocr_workflow.id)))
+    return selectedWorkflows.value.findIndex(({ value }) => (value === mapGtId(gtRun.metadata.ocr_workflow.id))) > -1
   })
 }
 

From 046878863c7b2de3635d8be546a46d81fdb455e8 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 5 Jul 2024 16:19:38 +0200
Subject: [PATCH 23/26] style: break filter condition into multiple lines

---
 src/components/workflows/timeline/TimelineFilters.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index eb5c562..071f09b 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -114,7 +114,13 @@ const selectGTs = () => {
   filtersStore.gtTimeline = filtersStore.gt.filter(({ value }) => {
     const gt = workflowsStore.getGtById(value)
     if(!gt) return false
-    return hasSomeSelectedLabelling(gt) && hasSomeSelectedScriptType(gt) && hasSomeSelectedProcessor(gt) && hasSomeSelectedDateRange(gt) && hasSomeSelectedWorkflow(gt)
+    return (
+      hasSomeSelectedLabelling(gt) && 
+      hasSomeSelectedScriptType(gt) && 
+      hasSomeSelectedProcessor(gt) && 
+      hasSomeSelectedDateRange(gt) && 
+      hasSomeSelectedWorkflow(gt)
+    )
   })
 }
 

From b4f790d8b3bf7e46fe4c06e975514f73356965e3 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 5 Jul 2024 16:40:59 +0200
Subject: [PATCH 24/26] docs: add comment explaining the computed ref
 labellingOptions

---
 src/components/workflows/timeline/TimelineFilters.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index 071f09b..5ec256a 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -25,6 +25,12 @@ const selectedWorkflows = ref<DropdownOption[]>([])
 const workflowStepOptions = ref<DropdownOption[]>([])
 const selectedWorkflowSteps = ref<DropdownOption[]>([])
 
+/*
+Compiles the DropdownOption[] for the labelling filter.
+
+Each gt can have a list of labels, while some have no labelling at all.
+The DropdownOption[] is computed by adding all labelling options to a flat list, then making them unique and sorting them. 
+*/
 const labellingOptions = computed(() => {
   return [
       ...new Set(workflowsStore.gt.map(gt => 

From 96396900cf6627d58c8df3b64bd27611b648b513 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 12 Jul 2024 15:53:11 +0200
Subject: [PATCH 25/26] feat: add select all label; refactor to own component

---
 src/components/base/MultiSelect.vue           | 42 +++++++++++++
 .../workflows/timeline/TimelineFilters.vue    | 62 ++++---------------
 2 files changed, 53 insertions(+), 51 deletions(-)
 create mode 100644 src/components/base/MultiSelect.vue

diff --git a/src/components/base/MultiSelect.vue b/src/components/base/MultiSelect.vue
new file mode 100644
index 0000000..8b44c2c
--- /dev/null
+++ b/src/components/base/MultiSelect.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import MultiSelect from "primevue/multiselect"
+import { computed, ref } from 'vue'
+import { useI18n } from "vue-i18n"
+import type { DropdownOption } from '@/types'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  filter?: boolean
+  allSelectedLabel?: string
+  options: DropdownOption[]
+}>()
+
+const allItemsSelected = ref(true)
+
+const dropdownLabel = computed(() => {
+  if (allItemsSelected.value) {
+    return props.allSelectedLabel
+  }
+  return undefined
+})
+</script>
+<template>
+  <MultiSelect
+    @change="allItemsSelected = $event.value.length === options.length"
+    :filter="filter?? false"
+    :selected-items-label="dropdownLabel"
+    :options="options"
+    option-label="label"
+    :pt="{
+    filterContainer: {
+      class: { 'ml-20': props.filter }
+    }
+  }">
+    <template #headercheckboxicon="{ allSelected }">
+      <Icon v-show="allSelected" icon="prime:check" class="p-checkbox-icon h-5 w-5" data-pc-section="headercheckboxicon"/>
+      <span :class="['ml-[7.5rem] absolute w-20 z-[1001]', allSelected ? 'text-[#1D4ED8]' : 'text-black']">{{ t('select_all') }}</span>
+    </template>
+  </MultiSelect>
+</template>
\ No newline at end of file
diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index 5ec256a..f94297e 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -2,10 +2,10 @@
 import filtersStore from "@/store/filters-store"
 import workflowsStore from "@/store/workflows-store"
 import { computed, onMounted, ref, watch } from "vue"
-import MultiSelect from "primevue/multiselect"
 import type { DropdownOption, GroundTruth } from "@/types"
 import { deduplicateStepIds, mapGtId } from '@/helpers/utils'
 import { useI18n } from "vue-i18n"
+import BaseMultiSelect from "@/components/base/MultiSelect.vue"
 
 
 const { t } = useI18n()
@@ -54,41 +54,6 @@ const scriptTypeOptions = computed(() => {
 })
 const selectedScriptTypes = ref<DropdownOption[]>([])
 
-const labellingDropdownLabel = computed(() => {
-  if (labellingOptions.value.length === selectedLabelling.value.length) {
-    return t('filter_by_labelling')
-  }
-  return null
-})
-
-const scriptTypeDropdownLabel = computed(() => {
-  if (scriptTypeOptions.value.length === selectedScriptTypes.value.length) {
-    return t('filter_by_script_type')
-  }
-  return null
-})
-
-const dateRangeDropdownLabel = computed(() => {
-  if (dateRangeOptions.value.length === selectedDateRange.value.length) {
-    return t('filter_by_date_range')
-  }
-  return null
-})
-
-const workflowDropdownLabel = computed(() => {
-  if (workflowOptions.value.length === selectedWorkflows.value.length) {
-    return t('filter_by_workflow')
-  }
-  return null
-})
-
-const workflowStepDropdownLabel = computed(() => {
-  if (workflowStepOptions.value.length === selectedWorkflowSteps.value.length) {
-    return t('filter_by_processor')
-  }
-  return null
-})
-
 const onLabellingChange = (event: any) => {
   selectedLabelling.value = event
   selectGTs()
@@ -195,52 +160,47 @@ onMounted(() => {
 
 <template>
 <div class="pb-4 lg:pb-6 grid sm:grid-cols-2 gap-4 xl:grid-cols-5 xl:gap-8">
-  <MultiSelect
+  <BaseMultiSelect
     v-model="selectedLabelling"
     @update:model-value="onLabellingChange($event)"
     filter
     :max-selected-labels="0"
     :options="labellingOptions"
-    option-label="label"
     :placeholder="t('select_a_label')"
-    :selected-items-label="labellingDropdownLabel"
+    :all-selected-label="t('filter_by_labelling')"
   />
-  <MultiSelect
+  <BaseMultiSelect
     v-model="selectedScriptTypes"
     @update:model-value="onScriptTypeChange($event)"
     :max-selected-labels="0"
     :options="scriptTypeOptions"
-    option-label="label"
     :placeholder="t('select_a_script_type')"
-    :selected-items-label="scriptTypeDropdownLabel"
+    :all-selected-label="t('filter_by_script_type')"
   />
-  <MultiSelect
+  <BaseMultiSelect
     v-model="selectedDateRange"
     @update:model-value="onDateRangeChange($event)"
     :max-selected-labels="1"
     :options="dateRangeOptions"
-    optionLabel="label"
     :placeholder="t('select_a_date_range')"
-    :selected-items-label="dateRangeDropdownLabel"
+    :all-selected-label="t('filter_by_date_range')"
   />
-  <MultiSelect
+  <BaseMultiSelect
     v-model="selectedWorkflows"
     @update:model-value="onWorkflowChange($event)"
     :max-selected-labels="1"
     :options="workflowOptions"
-    optionLabel="label"
     :placeholder="t('select_a_workflow')"
-    :selected-items-label="workflowDropdownLabel"
+    :all-selected-label="t('filter_by_workflow')"
   />
-  <MultiSelect
+  <BaseMultiSelect
     v-model="selectedWorkflowSteps"
     @update:model-value="onWorkflowStepChange($event)"
     filter
     :max-selected-labels="1"
     :options="workflowStepOptions"
-    optionLabel="label"
     :placeholder="t('select_a_processor')"
-    :selected-items-label="workflowStepDropdownLabel"
+    :all-selected-label="t('filter_by_processor')"
   />
 </div>
 

From f660f0a0e22c0b0f41652baeaa98498189f79da2 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 19 Jul 2024 12:09:55 +0200
Subject: [PATCH 26/26] fix: make color of select all variable

---
 src/components/base/MultiSelect.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/base/MultiSelect.vue b/src/components/base/MultiSelect.vue
index 8b44c2c..f9efbf8 100644
--- a/src/components/base/MultiSelect.vue
+++ b/src/components/base/MultiSelect.vue
@@ -36,7 +36,13 @@ const dropdownLabel = computed(() => {
   }">
     <template #headercheckboxicon="{ allSelected }">
       <Icon v-show="allSelected" icon="prime:check" class="p-checkbox-icon h-5 w-5" data-pc-section="headercheckboxicon"/>
-      <span :class="['ml-[7.5rem] absolute w-20 z-[1001]', allSelected ? 'text-[#1D4ED8]' : 'text-black']">{{ t('select_all') }}</span>
+      <span :class="['ml-[7.5rem] absolute w-20 z-[1001]', allSelected ? 'text-highlight' : 'text-black']">{{ t('select_all') }}</span>
     </template>
   </MultiSelect>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped lang="scss">
+.text-highlight {
+  color: var(--highlight-text-color);
+}
+</style>
\ No newline at end of file