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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<script setup lang="ts">
import Panel from "primevue/panel"
import OverlayPanel from 'primevue/overlaypanel'
import StepsAcronyms from '@/helpers/workflow-steps-acronyms'
import MetricChart from "@/components/timeline/MetricChart.vue"
import type { GroundTruth, Workflow, WorkflowStep } from "@/types"
import MetricAverageChart from "@/components/timeline/MetricAverageChart.vue"
import { Icon } from '@iconify/vue'
import { ref } from "vue"
import { OverlayPanelDropdownStyles } from "@/helpers/pt"
const props = defineProps<{
gt: GroundTruth,
workflows: Workflow[],
metric: string
}>()
const op = ref<OverlayPanel>()
const selectedStep = ref<WorkflowStep | null>(null)
function getStepAcronym(stepId) {
return StepsAcronyms[stepId]
}
function showParametersOverlay(step: WorkflowStep, event: Event) {
selectedStep.value = step
op.value?.show(event)
}
function hideParametersOverlay() {
op.value?.hide()
}
</script>
<template>
<Panel
header="Header"
toggleable
:collapsed="true"
unstyled
:pt="{
root: 'border border-gray-300 rounded-lg overflow-hidden',
header: 'pt-4',
content: '',
icons: 'w-full flex',
toggler: 'w-full flex justify-center bg-gray-50 text-gray-500 p-2 hover:bg-gray-100 rounded hover:text-gray-700 focus:outline-none'
}"
>
<template v-slot:header>
<div class="flex w-full px-4">
<h2 class="w-1/2 text-xl font-bold flex-shrink-0">{{ gt.label }}</h2>
<div class="w-1/2 flex justify-end">
<div class="flex overflow-x-auto">
<MetricAverageChart :gt-id="gt.id" :metric="metric" class="" :width="400" />
</div>
</div>
</div>
</template>
<template v-slot:default>
<div class="flex border-t border-gray-300 pt-4 px-4">
<table class="table-fixed w-full">
<tr v-for="workflow in workflows" :key="workflow.id">
<td class="font-semibold pe-2">{{ workflow.label }}</td>
<td class="p-1 overflow-x-auto">
<!-- <Icon :icon="getStepIcon(step.id)" v-for="step in workflow.workflow_steps" :key="step.id"/>-->
<span
v-for="step in workflow.steps"
:key="step.id"
class="p-1 cursor-pointer"
@mouseenter="showParametersOverlay(step, $event)"
@mouseleave="hideParametersOverlay()"
>
{{ getStepAcronym(step.id) }}
</span>
</td>
<td class="overflow-x-auto">
<MetricChart :gt-id="gt.id" :workflow-id="workflow.id" :metric="metric" :width="400" class="flex justify-end"/>
</td>
</tr>
</table>
</div>
</template>
<template v-slot:togglericon="{ collapsed }">
<Icon :icon="collapsed ? 'bi:chevron-down' : 'bi:chevron-up'"/>
</template>
</Panel>
<OverlayPanel
ref="op"
:pt="OverlayPanelDropdownStyles"
>
<div class="flex flex-col pt-2">
<h2 class="font-bold px-2 pb-2 mb-2 border-b border-gray-300">{{ selectedStep?.id }}</h2>
<table v-if="selectedStep" class="text-sm border-collapse">
<tr class="">
<th class="p-1 pl-2 font-semibold">Parameter</th>
<th class="p-1 pr-2 font-semibold">Value</th>
</tr>
<tr v-for="step in Object.keys(selectedStep.params)" :key="step">
<td class="p-1 pl-2 border-collapse border border-l-0 border-b-0 border-gray-300">{{ step }}</td>
<td class="p-1 pr-2 border-collapse border border-r-0 border-b-0 border-gray-300">{{ selectedStep.params[step] }}</td>
</tr>
</table>
</div>
</OverlayPanel>
</template>
<style scoped lang="scss">
</style>