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

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>

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
   }
 }