feat: implement multi-selectable workflow steps filtering

OCR-D · Feb 27, 2024 · 42c02f8 · 42c02f8
1 parent 38c2776
commit 42c02f8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git 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
@@ -15,6 +15,7 @@ const props = defineProps<{
   metric: keyof EvaluationResultsDocumentWide,
   selectedWorkflowId?: string,
   selectedWorkflowStepId?: string,
+  selectedWorkflowStepIds: string[],
 }>()
 
 const op = ref<OverlayPanel>()
@@ -32,7 +33,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) {