Quiver timeline, diachronic view - enlarge diagram on demand

src/components/workflows/timeline/BaseTimelineDetailedChart.vue

@@ -16,6 +16,7 @@ interface Props {
   height?: number,
   tooltipContent: (d: TimelineChartDataPoint) => string,
   yAxisTitle?: string,
+  workflow?: string,
   higherIsPositive?: boolean
 }
 
@@ -24,9 +25,26 @@ const props = defineProps<Props>()
 const height = props.height || 60
 const marginTop = 10
 const marginRight = 10
-const marginBottom = 50
-const marginLeft = 40
+const marginBottom = 90
+const marginLeft = 70
 const _width = computed(() => props.width ?? 300)
+const yAxisTitle = computed(() => {
+  let text = ''
+  if (props.yAxisTitle) {
+    text = props.yAxisTitle
+
+    if (props.workflow) {
+      text = `${props.workflow} - ${text}`
+    }
+  }
+  return text
+})
+
+const yAxisTextHeight = computed(() => {
+  let value = -(height / 2 + marginTop)
+  value -= yAxisTitle.value.length ** 1.3
+  return Math.round(value)
+})
 
 const container = ref<HTMLDivElement>()
 
@@ -79,6 +97,14 @@ function render([data, startDate, endDate, maxY]) {
   svg.select('.x-axis-group .domain').attr('stroke', colors.gray['400'])
   svg.selectAll('.x-axis-group .tick text').attr('fill', colors.gray['400'])
 
+  // Append x-axis title on the bottom
+  svg
+    .append('text')
+    .attr('x', (_width.value / 2) - marginLeft)
+    .attr('y', height)
+    .text('Date')
+    .attr('fill', colors.gray['400'])
+
 // Add the y-axis.
   svg.append("g")
       .classed('y-axis-group', true)
@@ -94,9 +120,9 @@ function render([data, startDate, endDate, maxY]) {
   // Append y-axis title on the left
   svg.append("text")
       .attr("transform", "rotate(-90)")
-      .attr("y", marginLeft - 30)
-      .attr("x", -(height / 2 + marginTop) )
-      .text(props.yAxisTitle ?? '')
+      .attr("y", marginLeft - 55)
+      .attr("x", yAxisTextHeight.value )
+      .text(yAxisTitle.value)
       .attr('fill', colors.gray['400'])
 
 

src/components/workflows/timeline/MetricAverageChart.vue

@@ -1,21 +1,25 @@
 <script setup lang="ts">
 import {computed, onMounted, ref, watch} from "vue"
-import BaseTimelineChart from "@/components/workflows/timeline/BaseTimelineChart.vue"
+import { useI18n } from 'vue-i18n'
+import OverlayPanel from "primevue/overlaypanel"
 import type {EvaluationResultsDocumentWide, EvaluationRun, TimelineChartDataPoint} from "@/types"
-import { metricChartTooltipContent } from "@/helpers/metric-chart-tooltip-content";
-import OverlayPanel from "primevue/overlaypanel";
-import BaseTimelineDetailedChart from "@/components/workflows/timeline/BaseTimelineDetailedChart.vue";
-import timelineStore from "@/store/timeline-store";
-import {isHigherPositive} from "@/helpers/metrics";
+import { metricChartTooltipContent } from "@/helpers/metric-chart-tooltip-content"
+import BaseTimelineChart from "@/components/workflows/timeline/BaseTimelineChart.vue"
+import BaseTimelineDetailedChart from "@/components/workflows/timeline/BaseTimelineDetailedChart.vue"
+import timelineStore from "@/store/timeline-store"
+import { getUnitOfMetric, isHigherPositive } from "@/helpers/metrics"
 
 const props = defineProps<{
   runs: EvaluationRun[],
   metric: keyof EvaluationResultsDocumentWide,
   startDate: Date,
   endDate: Date,
-  workflowName: string
+  workflowName: string,
+  gtName: string
 }>()
 
+const { t } = useI18n()
+
 const data = ref<TimelineChartDataPoint[]>([])
 const maxY = computed(() => timelineStore.maxValues[props.metric] ?? 0)
 const op = ref<OverlayPanel | null>(null)
@@ -80,11 +84,12 @@ function tooltipContent(d: TimelineChartDataPoint) {
       }
     }"
   >
-    <h3 class="font-semibold">{{ workflowName }}</h3>
+    <h3 class="font-semibold" style="width: 660px; margin-left: 40px">{{ gtName }}</h3>
     <BaseTimelineDetailedChart
       :data="data"
       :max-y="maxY"
-      :y-axis-title="$t(metric)"
+      :y-axis-title="`${t(metric)} (${t(getUnitOfMetric(metric))})`"
+      :workflow="workflowName"
       :start-date="startDate"
       :end-date="endDate"
       :tooltip-content="tooltipContent"

src/components/workflows/timeline/MetricChart.vue

@@ -1,21 +1,25 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue"
-import BaseTimelineChart from "@/components/workflows/timeline/BaseTimelineChart.vue"
+import { useI18n } from 'vue-i18n'
+import OverlayPanel from 'primevue/overlaypanel'
 import type { EvaluationResultsDocumentWide, EvaluationRun, TimelineChartDataPoint } from "@/types"
 import { metricChartTooltipContent } from "@/helpers/metric-chart-tooltip-content"
-import OverlayPanel from 'primevue/overlaypanel'
+import BaseTimelineChart from "@/components/workflows/timeline/BaseTimelineChart.vue"
 import BaseTimelineDetailedChart from "@/components/workflows/timeline/BaseTimelineDetailedChart.vue"
 import timelineStore from "@/store/timeline-store"
-import { isHigherPositive } from "@/helpers/metrics"
+import { getUnitOfMetric, isHigherPositive } from "@/helpers/metrics"
 
 const props = defineProps<{
   runs: EvaluationRun[],
   metric: keyof EvaluationResultsDocumentWide,
   startDate: Date,
   endDate: Date,
-  workflowName: string
+  workflowName: string,
+  gtName: string
 }>()
 
+const { t } = useI18n()
+
 const data = ref([])
 const maxY = computed(() => timelineStore.maxValues[props.metric] ?? 0 )
 const op = ref<OverlayPanel | null>(null)
@@ -67,11 +71,12 @@ function tooltipContent(d: TimelineChartDataPoint) {
       }
     }"
   >
-    <h3 class="font-semibold">{{ workflowName }}</h3>
+    <h3 class="font-semibold" style="width: 600px; margin-left: 40px">{{ gtName }}</h3>
     <BaseTimelineDetailedChart
       :data="data"
       :max-y="maxY"
-      :y-axis-title="$t(metric)"
+      :y-axis-title="`${t(metric)} (${t(getUnitOfMetric(metric))})`"
+      :workflow="workflowName"
       :start-date="startDate"
       :end-date="endDate"
       :tooltip-content="tooltipContent"

src/components/workflows/timeline/TimelineItem.vue

@@ -75,6 +75,7 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
           <div class="flex overflow-x-auto">
             <MetricAverageChart
               :workflow-name="$t('average')"
+              :gt-name="gt.label"
               :runs="workflowsStore.getRuns(gt.id)"
               :metric="metric"
               class=""
@@ -112,6 +113,7 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
             <td class="overflow-x-auto">
               <MetricChart
                 :runs="workflowsStore.getRuns(gt.id, workflow.id)"
+                :gt-name="gt.label"
                 :workflow-name="workflow.label"
                 :metric="metric"
                 :width="400"

src/helpers/metrics.ts

@@ -22,6 +22,18 @@ function getDefaultMaxValueOfMetric(metric: string): number {
   else return 1
 }
 
+function getUnitOfMetric(metric: string): string {
+  if (metric === EvaluationMetrics.CER_MEAN) return 'percentage'
+  if (metric === EvaluationMetrics.CER_MEDIAN) return 'percentage'
+  if (metric === EvaluationMetrics.CER_STANDARD_DEVIATION) return 'percentage'
+  if (metric === EvaluationMetrics.WER) return 'percentage'
+  if (metric === EvaluationMetrics.WALL_TIME) return 'seconds'
+  if (metric === EvaluationMetrics.PAGES_PER_MINUTE) return 'pages'
+  if (metric === EvaluationMetrics.CPU_TIME) return 'seconds'
+
+  else return ''
+}
+
 function getMaxValueByMetric(metric: keyof EvaluationResultsDocumentWide, runs: EvaluationRun[] = []): number {
   const values = runs.map((run) => {
     const value = run.evaluation_results.document_wide[metric]
@@ -45,6 +57,7 @@ function isHigherPositive(metric: keyof EvaluationResultsDocumentWide): boolean
 
 export {
   EvaluationMetrics,
+  getUnitOfMetric,
   getMaxValueByMetric,
   getDefaultMaxValueOfMetric,
   isHigherPositive

src/locales/en.json

@@ -55,5 +55,8 @@
   "negative": "negative",
   "better": "better",
   "equal": "equal",
-  "worse": "worse"
+  "worse": "worse",
+  "percentage": "percentage",
+  "pages": "pages",
+  "seconds": "seconds"
 }