refactor: create metrics composables

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()

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>

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

src/helpers/metrics.ts

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