From 084933b7a37ad15cf694ae5ac979711a77c5af66 Mon Sep 17 00:00:00 2001
From: jfrer <76432831+jfrer@users.noreply.github.com>
Date: Tue, 25 Jun 2024 10:55:51 +0200
Subject: [PATCH 1/2] feat: add filtering by workflow, processor and date range
 to timeline view (#85)

* feat: filter by workflow and processor

* feat: filter by date range

* feat: implement multi-selectable workflow steps filtering

* fix: make only related workflows visible while filtering by processors

* fix: set all checkboxes of processor filter to selected on page load

* ref: highlight selected processors

* fix: refactor to own component and prepare visual filtering

* fix: show filter also when no data is selected

* fix: workflow filter label

* feat: hide workflow when neither workflow or processor in workflow are selected

* refactor: remove unused imports/vars, style

* fix: remove search from workflow filter

* feat: change date range dropdown to multiselect

* refactor: change order

* feat: add i18n translations

* fix: adjust filter position for smaller screens

* fix: changed faulty imported that failed build

* fix: workflow filter not working

---------

Co-authored-by: amtul.noor <amtul.noor@stud.uni-goettingen.de>
Co-authored-by: noornoorie <noorkhaled968@gmail.com>
Co-authored-by: jfrer <jasper.frerichs@sub.uni-goettingen.de>
---
 .../workflows/WorkflowsTimeline.vue           |  34 ++--
 src/components/workflows/filters/Filters.vue  |   3 +-
 .../workflows/timeline/TimelineFilters.vue    | 156 ++++++++++++++++++
 .../workflows/timeline/TimelineItem.vue       |   9 +-
 src/helpers/utils.ts                          |  14 +-
 src/locales/de.json                           |   8 +-
 src/locales/en.json                           |   9 +-
 src/store/filters-store.ts                    |   8 +-
 src/types/index.d.ts                          |  76 ++++++---
 9 files changed, 261 insertions(+), 56 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 b594de5..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'
@@ -10,9 +10,10 @@ 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.gt.findIndex(({ value }) => value === id) > -1))
+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]) })))
@@ -34,20 +35,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"/>
-    </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" />
diff --git a/src/components/workflows/filters/Filters.vue b/src/components/workflows/filters/Filters.vue
index b3957be..b45a3d7 100644
--- a/src/components/workflows/filters/Filters.vue
+++ b/src/components/workflows/filters/Filters.vue
@@ -4,6 +4,7 @@ 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 })))
 
 onMounted(() => {
@@ -21,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..ca40b64
--- /dev/null
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+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, GroundTruth } from "@/types"
+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[]>([])
+
+const workflowOptions = computed(() => workflowsStore.workflows.map(({ id, label }) => ({ value: id, label })))
+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')
+  }
+  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) && hasSomeSelectedDateRange(gt) && hasSomeSelectedWorkflow(gt)
+  })
+}
+
+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) => {
+    return gtRuns.some((gtRun) => {
+      return gtRun.metadata.workflow_steps.findIndex(({ id }) => id === selectedStep.value) > -1
+    })
+  })
+}
+
+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) => {
+  const gtRuns = workflowsStore.getRuns(gt.id)
+  return gtRuns.some((gtRun) => {
+    return selectedWorkflows.value.findIndex(({ value }) => (value === mapGtId(gtRun.metadata.ocr_workflow.id))) > -1 
+  })
+}
+
+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)
+}
+
+onMounted(() => {
+  workflowStepOptions.value = deduplicateStepIds(workflowsStore.workflows).map(id => ({ value: id, label: t(id) }))
+  
+  selectedDateRange.value = dateRangeOptions.value
+  selectedWorkflows.value = workflowOptions.value
+  selectedWorkflowSteps.value = workflowStepOptions.value
+  
+  selectGTs()
+  selectWorkflows()
+})
+</script>
+
+<template>
+<div class="flex flex-wrap mb-4 justify-start lg:justify-end">
+  <MultiSelect
+    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"
+    class="mr-4 mb-2 lg:m-0 lg:ml-auto md:w-14rem"
+  />
+  <MultiSelect
+    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"
+    class="mr-4 mb-2 lg:m-0 lg: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="lg:ml-4 md:w-14rem"
+  />
+</div>
+
+</template>
\ No newline at end of file
diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index cbf2e4c..f7cb57e 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, 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,12 +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]
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/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"
 }
diff --git a/src/store/filters-store.ts b/src/store/filters-store.ts
index e1d92f1..1dfec73 100644
--- a/src/store/filters-store.ts
+++ b/src/store/filters-store.ts
@@ -3,8 +3,12 @@ import type { FilterOption } from "@/types"
 
 export default reactive<{
   gt: FilterOption[],
-  metric: FilterOption[]
+  gtTimeline: FilterOption[],
+  metric: FilterOption[],
+  workflow: FilterOption[],
 }>({
   gt: [],
-  metric: []
+  gtTimeline: [],
+  metric: [],
+  workflow: []
 })
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 270a5ac..2776794 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -1,31 +1,57 @@
 export interface GroundTruth {
   id: string,
   label: string,
-  metadata: {
-    title: string,
-    url: string,
-    language: string[],
-    script: string[],
-    'script-type': string,
-    license: {
-      name: string,
-      url: string,
-    }[],
-    volume: {
-      TxtRegion?: string,
-      GraphRegion?: string,
-      SepRegion?: string,
-      MusicRegion?: string,
-      NoiseRegion?: string,
-      TextLine?: string,
-      Page?: string,
-    } |
-    {
-      metric: string,
-      count: number,
-    }[]
-    labelling: string[],
-  }
+  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: {
+    TxtRegion?: string,
+    GraphRegion?: string,
+    SepRegion?: string,
+    MusicRegion?: string,
+    NoiseRegion?: string,
+    TextLine?: string,
+    Page?: string,
+  } |
+  {
+    metric: string,
+    count: number,
+  }[],
 }
 
 export interface Workflow {

From 1fbbbac5f2f591f75396488122172b962b536832 Mon Sep 17 00:00:00 2001
From: jfrer <76432831+jfrer@users.noreply.github.com>
Date: Fri, 28 Jun 2024 11:35:38 +0200
Subject: [PATCH 2/2] fix: document filter is now reactive again (#87)

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

diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue
index ca40b64..de050d3 100644
--- a/src/components/workflows/timeline/TimelineFilters.vue
+++ b/src/components/workflows/timeline/TimelineFilters.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import filtersStore from "@/store/filters-store"
 import workflowsStore from "@/store/workflows-store"
-import { computed, onMounted, ref } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
 import MultiSelect from "primevue/multiselect"
 import type { DropdownOption, GroundTruth } from "@/types"
 import { deduplicateStepIds, mapGtId } from '@/helpers/utils'
@@ -106,6 +106,10 @@ const workflowhasSomeSelectedWorkflowStep = (workflowId: string) => {
   return workflow.steps.some((step) => selectedWorkflowSteps.value.findIndex(({ value }) => (value === step.id)) > -1)
 }
 
+watch(() => filtersStore.gt, () => {
+  selectGTs()
+})
+
 onMounted(() => {
   workflowStepOptions.value = deduplicateStepIds(workflowsStore.workflows).map(id => ({ value: id, label: t(id) }))