Add dynamic evals color calculation for cer and wall time

src/components/Workflows.vue

@@ -15,6 +15,7 @@ import { useRouter, useRoute } from "vue-router";
 import WorkflowsList from "@/components/workflows/WorkflowsList.vue";
 import WorkflowsTable from "@/components/workflows/WorkflowsTable.vue";
 import { useI18n } from "vue-i18n";
+import { setEvalColors } from "../helpers/eval-colors";
 
 const { t } = useI18n();
 
@@ -40,6 +41,8 @@ onMounted(async () => {
   data.value = await api.getWorkflows();
   defs.value = await api.getEvalDefinitions();
 
+  setEvalColors(data.value);
+
   const filtered = options.value.filter((option) => {
     return route.query.view && route.query.view === option.value;
   });

src/helpers/eval-colors.js

-const evalColors = {
+import { ref } from 'vue';
+
+const evalColors = ref({
     wall_time: {
         'eval-low': 2000,
         'eval-medium': 4000,
@@ -14,10 +16,10 @@ const evalColors = {
         'eval-medium': 0.8,
         'eval-high': 0.9
     }
-};
+});
 
 const getEvalColor = (name, value) => {
-    const colorMap = evalColors[name];
+    const colorMap = evalColors.value[name];
     if (colorMap) {
         const keys = Object.keys(colorMap);
         return keys.find((key, i) => {
@@ -28,6 +30,40 @@ const getEvalColor = (name, value) => {
     return null;
 };
 
+const setEvalColors = (data) => {
+    const allCERs = [];
+    const allWallTimes = [];
+
+    data.forEach(({ evaluation }) => {
+        const { document_wide: evals } = evaluation;
+        const { cer, wall_time, cer_min_max } = evals;
+
+        if (cer) allCERs.push(cer);
+        if (wall_time) allWallTimes.push(wall_time);
+    });
+
+    const minCER = Math.min(...allCERs);
+    const maxCER = Math.max(...allCERs);
+
+    const minWallTime = Math.min(...allWallTimes);
+    const maxWallTime = Math.max(...allWallTimes);
+
+    const diffCER = maxCER - minCER;
+    const stepCER = diffCER / 3;
+
+    evalColors.value.cer["eval-low"] = minCER + stepCER;
+    evalColors.value.cer["eval-medium"] = minCER + 2 * stepCER;
+    evalColors.value.cer["eval-high"] = minCER + 3 * stepCER;
+
+    const diffallTime = maxWallTime - minWallTime;
+    const stepWallTime = diffallTime / 3;
+
+    evalColors.value.wall_time["eval-low"] = minWallTime + stepWallTime;
+    evalColors.value.wall_time["eval-medium"] = minWallTime + 2 * stepWallTime;
+    evalColors.value.wall_time["eval-high"] = minWallTime + 3 * stepWallTime;
+};
+
 export {
-    getEvalColor
-};
\ No newline at end of file
+    getEvalColor,
+    setEvalColors
+};