From 94fd7b963673e3320d6c782a78a318bb4fb739d3 Mon Sep 17 00:00:00 2001
From: Paul Pestov <10750176+paulpestov@users.noreply.github.com>
Date: Mon, 6 Nov 2023 22:19:14 +0100
Subject: [PATCH] refactor: create metrics composables
---
src/components/Timeline.vue | 6 +++---
.../timeline/MetricAverageChart.vue | 19 +++----------------
src/components/timeline/MetricChart.vue | 17 +++--------------
src/helpers/metrics.ts | 19 ++++++++++++++++++-
4 files changed, 27 insertions(+), 34 deletions(-)
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 5952e49..3d86f69 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -3,7 +3,7 @@ import api from '@/helpers/api'
import TimelineItem from "@/components/timeline/TimelineItem.vue"
import Dropdown from 'primevue/dropdown'
import { computed, onMounted, ref } from "vue"
-import Metrics from '@/helpers/metrics'
+import { EvaluationMetrics } from '@/helpers/metrics'
import { useI18n } from "vue-i18n"
import type { DropdownOption } from "@/types"
import { DropdownPassThroughStyles } from '@/helpers/pt'
@@ -12,8 +12,8 @@ const { t } = useI18n()
const gtList = ref([])
const workflows = ref([])
const selectedMetric = ref<DropdownOption | null>(null)
-const metrics = computed<DropdownOption[]>(() => Object.keys(Metrics).map(key => ({ value: Metrics[key], label: t(Metrics[key]) })))
-const selectedMetricValue = computed<string>(() => selectedMetric.value?.value || Metrics.CER_MEAN)
+const metrics = computed<DropdownOption[]>(() => Object.keys(EvaluationMetrics).map(key => ({ value: EvaluationMetrics[key], label: t(EvaluationMetrics[key]) })))
+const selectedMetricValue = computed<string>(() => selectedMetric.value?.value || EvaluationMetrics.CER_MEAN)
onMounted(async () => {
gtList.value = await api.getGroundTruth()
workflows.value = await api.getWorkflows()
diff --git a/src/components/timeline/MetricAverageChart.vue b/src/components/timeline/MetricAverageChart.vue
index 17d650f..2622297 100644
--- a/src/components/timeline/MetricAverageChart.vue
+++ b/src/components/timeline/MetricAverageChart.vue
@@ -3,7 +3,7 @@ import { onMounted, ref, watch } from "vue"
import api from "@/helpers/api"
import TimelineChart from "@/components/timeline/TimelineChart.vue"
import type {EvaluationResultsDocumentWide, EvaluationRun, TimelineChartDataPoint, Workflow} from "@/types"
-import Metrics from '@/helpers/metrics'
+import { getMaxValueOfMetric } from '@/helpers/metrics'
const props = defineProps<{
gtId: string,
@@ -24,12 +24,12 @@ onMounted(async () => {
runs.value = await api.getRuns(gtId)
data.value = getTimelineData(runs.value, metric)
- maxY.value = getMaxYByMetric(metric)
+ maxY.value = getMaxValueOfMetric(metric)
})
watch(() => props.metric, async (value) => {
data.value = getTimelineData(runs.value, value)
- maxY.value = getMaxYByMetric(value)
+ maxY.value = getMaxValueOfMetric(value)
})
function getTimelineData(runs: EvaluationRun[], metric: string): TimelineChartDataPoint[] {
@@ -55,19 +55,6 @@ function getTimelineData(runs: EvaluationRun[], metric: string): TimelineChartDa
}
})
}
-
-function getMaxYByMetric(metric: string) {
- if (metric === Metrics.CER_MEAN) return 2
- if (metric === Metrics.CER_MEDIAN) return 2
- if (metric === Metrics.CER_STANDARD_DEVIATION) return 2
- if (metric === Metrics.WER) return 1
- if (metric === Metrics.WALL_TIME) return 2
- if (metric === Metrics.PAGES_PER_MINUTE) return 100
- if (metric === Metrics.CPU_TIME) return 100
-
- else return 1
-}
-
</script>
<template>
diff --git a/src/components/timeline/MetricChart.vue b/src/components/timeline/MetricChart.vue
index f8bdfe6..78581eb 100644
--- a/src/components/timeline/MetricChart.vue
+++ b/src/components/timeline/MetricChart.vue
@@ -2,7 +2,7 @@
import { onMounted, ref, watch } from "vue"
import api from "@/helpers/api"
import TimelineChart from "@/components/timeline/TimelineChart.vue"
-import Metrics from '@/helpers/metrics'
+import { getMaxValueOfMetric } from '@/helpers/metrics'
import type { EvaluationResultsDocumentWide, EvaluationRun } from "@/types"
const props = defineProps(['gtId', 'workflowId', 'metric', 'startDate', 'endDate'])
@@ -10,30 +10,19 @@ const runs = ref<EvaluationRun[]>([])
const data = ref([])
const maxY = ref(2)
-function getMaxYByMetric(metric: string) {
- if (metric === Metrics.CER_MEAN) return 2
- if (metric === Metrics.CER_MEDIAN) return 2
- if (metric === Metrics.CER_STANDARD_DEVIATION) return 2
- if (metric === Metrics.WER) return 1
- if (metric === Metrics.WALL_TIME) return 2
- if (metric === Metrics.PAGES_PER_MINUTE) return 100
- if (metric === Metrics.CPU_TIME) return 100
-
- else return 1
-}
onMounted(async () => {
const { gtId, workflowId, metric } = props
runs.value = await api.getRuns(gtId, workflowId)
data.value = getTimelineData(runs.value, metric)
- maxY.value = getMaxYByMetric(metric)
+ maxY.value = getMaxValueOfMetric(metric)
})
watch(() => props.metric,
(value) => {
if (!runs.value) return
data.value = getTimelineData(runs.value, value)
- maxY.value = getMaxYByMetric(value)
+ maxY.value = getMaxValueOfMetric(value)
}, { immediate: true }
)
diff --git a/src/helpers/metrics.ts b/src/helpers/metrics.ts
index 029ca61..f3da9b4 100644
--- a/src/helpers/metrics.ts
+++ b/src/helpers/metrics.ts
@@ -1,4 +1,4 @@
-export default {
+const EvaluationMetrics = {
CER_MEAN: 'cer_mean',
CER_MEDIAN: 'cer_median',
WER: 'wer',
@@ -7,3 +7,20 @@ export default {
WALL_TIME: 'wall_time',
CPU_TIME: 'cpu_time'
}
+
+function getMaxValueOfMetric(metric: string): number {
+ if (metric === EvaluationMetrics.CER_MEAN) return 2
+ if (metric === EvaluationMetrics.CER_MEDIAN) return 2
+ if (metric === EvaluationMetrics.CER_STANDARD_DEVIATION) return 2
+ if (metric === EvaluationMetrics.WER) return 1
+ if (metric === EvaluationMetrics.WALL_TIME) return 100
+ if (metric === EvaluationMetrics.PAGES_PER_MINUTE) return 100
+ if (metric === EvaluationMetrics.CPU_TIME) return 100
+
+ else return 1
+}
+
+export {
+ EvaluationMetrics,
+ getMaxValueOfMetric
+}
--
GitLab