diff --git a/src/components/base/MultiSelect.vue b/src/components/base/MultiSelect.vue new file mode 100644 index 0000000..f9efbf8 --- /dev/null +++ b/src/components/base/MultiSelect.vue @@ -0,0 +1,48 @@ + + + + \ No newline at end of file diff --git a/src/components/workflows/timeline/TimelineFilters.vue b/src/components/workflows/timeline/TimelineFilters.vue index 94bf00a..51ed372 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() @@ -25,26 +25,44 @@ const selectedWorkflows = ref([]) const workflowStepOptions = ref([]) const selectedWorkflowSteps = ref([]) -const dateRangeDropdownLabel = computed(() => { - if (dateRangeOptions.value.length === selectedDateRange.value.length) { - return t('filter_by_date_range') - } - return null +/* +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 => + 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 workflowDropdownLabel = computed(() => { - if (workflowOptions.value.length === selectedWorkflows.value.length) { - return t('filter_by_workflow') - } - return null +const selectedLabelling = ref([]) + +const scriptTypeOptions = computed(() => { + return [ + ...new Set(workflowsStore.gt.map(gt => + gt.metadata["script-type"] + )) + ] + .sort() + .map(value => ({ value, label: value })) }) +const selectedScriptTypes = ref([]) -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() +} + +const onScriptTypeChange = (event: any) => { + selectedScriptTypes.value = event + selectGTs() +} const onDateRangeChange = (event: any) => { selectedDateRange.value = event @@ -67,13 +85,29 @@ 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) && + hasSomeSelectedScriptType(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('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) @@ -96,7 +130,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))) > -1 + return selectedWorkflows.value.findIndex(({ value }) => (value === mapGtId(gtRun.metadata.ocr_workflow.id))) > -1 }) } @@ -116,44 +150,57 @@ onMounted(() => { selectedDateRange.value = dateRangeOptions.value selectedWorkflows.value = workflowOptions.value selectedWorkflowSteps.value = workflowStepOptions.value - + selectedLabelling.value = labellingOptions.value + selectedScriptTypes.value = scriptTypeOptions.value + selectGTs() selectWorkflows() })