From da7c130b352e8c28c8b7a45ce2c50931bbc2f6df Mon Sep 17 00:00:00 2001
From: Paul Pestov <pestov@sub.uni-goettingen.de>
Date: Mon, 6 Nov 2023 21:15:28 +0100
Subject: [PATCH] feat: set fixed start and end dates to all charts

---
 .../timeline/MetricAverageChart.vue           |  6 +++--
 src/components/timeline/MetricChart.vue       | 13 ++++++-----
 src/components/timeline/TimelineChart.vue     | 16 +++++++-------
 src/components/timeline/TimelineItem.vue      | 22 ++++++++++++++++---
 4 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/components/timeline/MetricAverageChart.vue b/src/components/timeline/MetricAverageChart.vue
index 2e38633..17d650f 100644
--- a/src/components/timeline/MetricAverageChart.vue
+++ b/src/components/timeline/MetricAverageChart.vue
@@ -7,7 +7,9 @@ import Metrics from '@/helpers/metrics'
 
 const props = defineProps<{
   gtId: string,
-  metric: string
+  metric: string,
+  startDate: Date,
+  endDate: Date
 }>()
 
 const data = ref<TimelineChartDataPoint[]>([])
@@ -69,7 +71,7 @@ function getMaxYByMetric(metric: string) {
 </script>
 
 <template>
-  <TimelineChart :data="data" :max-y="maxY" />
+  <TimelineChart :data="data" :max-y="maxY" :start-date="startDate" :end-date="endDate"/>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/components/timeline/MetricChart.vue b/src/components/timeline/MetricChart.vue
index 6a022cb..f8bdfe6 100644
--- a/src/components/timeline/MetricChart.vue
+++ b/src/components/timeline/MetricChart.vue
@@ -1,15 +1,16 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, ref, watch } from "vue"
 import api from "@/helpers/api"
 import TimelineChart from "@/components/timeline/TimelineChart.vue"
 import Metrics from '@/helpers/metrics'
+import type { EvaluationResultsDocumentWide, EvaluationRun } from "@/types"
 
-const props = defineProps(['gtId', 'workflowId', 'metric'])
-const runs = ref([])
+const props = defineProps(['gtId', 'workflowId', 'metric', 'startDate', 'endDate'])
+const runs = ref<EvaluationRun[]>([])
 const data = ref([])
 const maxY = ref(2)
 
-function getMaxYByMetric(metric) {
+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
@@ -36,7 +37,7 @@ watch(() => props.metric,
     }, { immediate: true }
 )
 
-function getTimelineData(runs, metric) {
+function getTimelineData(runs: EvaluationRun[], metric: keyof EvaluationResultsDocumentWide) {
   return runs.map(({ metadata, evaluation_results }) => {
     const value = evaluation_results.document_wide[metric]
     return {
@@ -49,7 +50,7 @@ function getTimelineData(runs, metric) {
 </script>
 
 <template>
-  <TimelineChart :data="data" :max-y="maxY" />
+  <TimelineChart :data="data" :max-y="maxY" :start-date="startDate" :end-date="endDate" />
 </template>
 
 <style scoped lang="scss">
diff --git a/src/components/timeline/TimelineChart.vue b/src/components/timeline/TimelineChart.vue
index f4b1965..d717d06 100644
--- a/src/components/timeline/TimelineChart.vue
+++ b/src/components/timeline/TimelineChart.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import * as d3 from "d3"
-import { onMounted, ref, watch, withDefaults, defineProps, computed } from "vue"
+import { ref, watch, computed } from "vue"
 import type { TimelineChartDataPoint } from "@/types"
 import { createTooltip, setEventListeners } from "@/helpers/d3/d3-tooltip"
 
-
 interface Props {
   data: TimelineChartDataPoint[],
   maxY?: number,
-  width?: number
+  width?: number,
+  startDate: Date,
+  endDate: Date
 }
 
 const props = defineProps<Props>()
@@ -37,14 +38,14 @@ function isUp(data: TimelineChartDataPoint[], higherIsUp = true) {
   else return -1
 }
 
-watch(() => props.data, (value) => {
-  let data = value
+watch([() => props.data, () => props.startDate, () => props.endDate], ([data, startDate, endDate]) => {
+  if (!data || !startDate || !endDate) return
 
   if (data.length === 0) return
 
   // Declare the x (horizontal position) scale.
   const x = d3.scaleTime()
-    .domain([data[0].date, data[data.length -1].date])
+    .domain([startDate, endDate])
     .range([marginLeft, _width.value - marginRight])
 
 // Declare the y (vertical position) scale.
@@ -83,8 +84,6 @@ watch(() => props.data, (value) => {
         .y(function(d) { return y(d.value) })
     )
 
-
-
   const pointGroups = pathGroup.selectAll("myCircles")
     .data(data)
     .enter()
@@ -113,6 +112,7 @@ watch(() => props.data, (value) => {
   setEventListeners(svg.selectAll('.chart-point'), tooltip, { useData: (d) => d.value })
 
   // Append the SVG element.
+  if (!container.value) return
   container.value.replaceChildren()
   container.value.append(svg.node())
 })
diff --git a/src/components/timeline/TimelineItem.vue b/src/components/timeline/TimelineItem.vue
index 1852b37..0b1b726 100644
--- a/src/components/timeline/TimelineItem.vue
+++ b/src/components/timeline/TimelineItem.vue
@@ -17,6 +17,8 @@ const props = defineProps<{
 
 const op = ref<OverlayPanel>()
 const selectedStep = ref<WorkflowStep | null>(null)
+const startDate = ref<Date>(new Date('2023-10-01'))
+const endDate = ref<Date>(new Date())
 
 function getStepAcronym(stepId) {
   return StepsAcronyms[stepId]
@@ -52,7 +54,14 @@ function hideParametersOverlay() {
         <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" />
+            <MetricAverageChart
+              :gt-id="gt.id"
+              :metric="metric"
+              class=""
+              :width="400"
+              :start-date="startDate"
+              :end-date="endDate"
+            />
           </div>
         </div>
       </div>
@@ -63,7 +72,6 @@ function hideParametersOverlay() {
           <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"
@@ -75,7 +83,15 @@ function hideParametersOverlay() {
             </span>
             </td>
             <td class="overflow-x-auto">
-              <MetricChart :gt-id="gt.id" :workflow-id="workflow.id" :metric="metric" :width="400" class="flex justify-end"/>
+              <MetricChart
+                :gt-id="gt.id"
+                :workflow-id="workflow.id"
+                :metric="metric"
+                :width="400"
+                :start-date="startDate"
+                :end-date="endDate"
+                class="flex justify-end"
+              />
             </td>
           </tr>
         </table>