Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script setup>
import { onMounted, ref, watch } from "vue"
import api from "@/helpers/api"
import TimelineChart from "@/components/timeline/TimelineChart.vue"
import Metrics from '@/helpers/metrics'
const props = defineProps(['gtId', 'workflowId', 'metric'])
const runs = ref([])
const data = ref([])
const maxY = ref(2)
function getMaxYByMetric(metric) {
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)
})
watch(() => props.metric,
(value) => {
if (!runs.value) return
data.value = getTimelineData(runs.value, value)
maxY.value = getMaxYByMetric(value)
}, { immediate: true }
)
function getTimelineData(runs, metric) {
return runs.map(({ metadata, evaluation_results }) => {
const value = evaluation_results.document_wide[metric]
return {
date: new Date(metadata.timestamp),
value
}
})
}
</script>
<template>
<TimelineChart :data="data" :max-y="maxY" />
</template>
<style scoped lang="scss">
</style>