feat: add workflow name to metric detail charts

OCR-D · Dec 5, 2023 · 0dd9f26 · 0dd9f26
1 parent c8d2f4d
commit 0dd9f26
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 5 deletions.
diff --git a/src/components/Workflows.vue b/src/components/Workflows.vue
@@ -74,7 +74,7 @@
     </div>
     <div class="flex mb-3">
       <SelectButton v-model="selectedOption" :options="options" optionLabel="name"></SelectButton>
-      <Filters class="ml-auto w-1/3"/>
+      <Filters class="ml-auto"/>
     </div>
     <div v-if="selectedOption">
       <WorkflowsTimeline v-if="selectedOption.value === 'timeline'" />

diff --git a/src/components/workflows/timeline/MetricAverageChart.vue b/src/components/workflows/timeline/MetricAverageChart.vue
@@ -15,7 +15,8 @@ const props = defineProps<{
   runs: EvaluationRun[],
   metric: keyof EvaluationResultsDocumentWide,
   startDate: Date,
-  endDate: Date
+  endDate: Date,
+  workflowName: string
 }>()
 
 const data = ref<TimelineChartDataPoint[]>([])
@@ -82,6 +83,7 @@ function tooltipContent(d: TimelineChartDataPoint) {
       }
     }"
   >
+    <h3 class="font-semibold">{{ workflowName }}</h3>
     <BaseTimelineDetailedChart
       :data="data"
       :max-y="maxY"

diff --git a/src/components/workflows/timeline/MetricChart.vue b/src/components/workflows/timeline/MetricChart.vue
@@ -11,7 +11,8 @@ const props = defineProps<{
   runs: EvaluationRun[],
   metric: keyof EvaluationResultsDocumentWide,
   startDate: Date,
-  endDate: Date
+  endDate: Date,
+  workflowName: string
 }>()
 
 const data = ref([])
@@ -64,6 +65,7 @@ function tooltipContent(d: TimelineChartDataPoint) {
       }
     }"
   >
+    <h3 class="font-semibold">{{ workflowName }}</h3>
     <BaseTimelineDetailedChart
       :data="data"
       :max-y="maxY"

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
@@ -60,6 +60,7 @@ function hideParametersOverlay() {
         <div class="w-1/2 flex justify-end">
           <div class="flex overflow-x-auto">
             <MetricAverageChart
+              :workflow-name="$t('average')"
               :runs="workflowsStore.getRuns(gt.id)"
               :metric="metric"
               class=""
@@ -90,6 +91,7 @@ function hideParametersOverlay() {
             <td class="overflow-x-auto">
               <MetricChart
                 :runs="workflowsStore.getRuns(gt.id, workflow.id)"
+                :workflow-name="workflow.label"
                 :metric="metric"
                 :width="400"
                 :start-date="startDate"

diff --git a/src/locales/de.json b/src/locales/de.json
@@ -53,5 +53,6 @@
   "pages_per_minute": "Seiten pro Minute",
   "cpu_standard_deviation": "CPU Standardabweichung",
   "date": "Datum",
-  "ground_truth": "Ground Truth"
+  "ground_truth": "Ground Truth",
+  "average": "Durchschnitt"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -47,5 +47,6 @@
   "pages_per_minute": "Pages per minute",
   "cpu_standard_deviation": "CPU Standard Deviation",
   "date": "Date",
-  "ground_truth": "Ground Truth"
+  "ground_truth": "Ground Truth",
+  "average": "Average"
 }