Add tooltips at evaluation headings

src/assets/main.scss

@@ -15,4 +15,8 @@
 
 .eval-high {
   background-color: var(--green-200);
+}
+
+.p-tooltip-text {
+  white-space: nowrap;
 }
\ No newline at end of file

src/components/Workflows.vue

@@ -2,8 +2,8 @@
   <div class="container mb-3">
     <SelectButton v-model="selectedOption" :options="options" optionLabel="name"></SelectButton>
   </div>
-  <WorkflowsList v-if="selectedOption.value === 'list'" :data="data" />
-  <WorkflowsTable v-else :data="data" />
+  <WorkflowsList v-if="selectedOption.value === 'list'" :data="data" :defs="defs" />
+  <WorkflowsTable v-else :data="data" :defs="defs" />
 </template>
 
 <script setup>
@@ -17,6 +17,7 @@ import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 
 const data = ref([]);
+const defs = ref({});
 const router = useRouter();
 const route = useRoute();
 
@@ -33,6 +34,7 @@ watch(selectedOption, ({ value }) => {
 
 onMounted(async () => {
   data.value = await api.getWorkflows();
+  defs.value = await api.getEvalDefinitions();
 
   selectedOption.value = options.value.map((option) => {
     return (!route.query.view || route.query.view === option.value) ? option : options.value[0];

src/components/workflows/WorkflowsList.vue

@@ -8,8 +8,8 @@
         <div class="grid">
           <div class="col-5 py-0 ml-auto">
             <div class="grid">
-              <div class="col py-0" v-for="(evalName, i) in evals" :key="i">
-                <span class="font-bold">{{evalName}}</span>
+              <div class="col py-0" v-for="(evalKey, i) in evals" :key="i">
+                <span class="font-bold">{{defs[evalKey] ? defs[evalKey].label : evalKey}}</span>
               </div>
             </div>
             <div class="grid">
@@ -32,7 +32,7 @@
 import { ref, onMounted, watch } from "vue";
 import { getEvalColor } from "@/helpers/eval-colors";
 
-const props = defineProps(['data']);
+const props = defineProps(['data', 'defs']);
 const list = ref([]);
 const evals = ref([]);
 

src/components/workflows/WorkflowsTable.vue

 <template>
   <div class="container">
-    <div class="grid mb-3">
+    <div class="grid mb-4">
       <div class="flex align-items-center ml-auto">
-        <p class="mr-2">{{ $t('sort_by')}}:</p>
+        <p class="mr-2">{{ $t('group_by')}}:</p>
         <Dropdown
             v-model="sortBy"
             :options="sortOptions"
@@ -15,8 +15,20 @@
       <tr>
         <th class="border-gray-400"></th>
         <th class="border-gray-400"></th>
-        <th class="border-left-1 border-gray-400 pb-2" v-for="(evalName, i) in evals" :key="i">
-          <span class="font-bold">{{evalName}}</span>
+        <th class="border-left-1 border-gray-400 pb-2" v-for="(evalKey, i) in evals" :key="i">
+<!--          v-tooltip.top="defs[evalKey] ? defs[evalKey].short_descr : $t('no_description')"-->
+          <span
+              class="def-label font-bold flex align-items-center justify-content-center gap-2 cursor-pointer"
+          >
+            {{defs[evalKey] ? defs[evalKey].label : evalKey}}
+            <i class="pi pi-question-circle"></i>
+            <div class="def-tooltip">
+              <p>
+                {{ defs[evalKey] ? defs[evalKey].short_descr : $t('no_description') }}.
+                <a v-if="defs[evalKey]" :href="defs[evalKey].url">{{ $t('details')}}</a>
+              </p>
+            </div>
+          </span>
         </th>
       </tr>
       <template v-for="(key, i) in Object.keys(groupedData)" :key="i">
@@ -49,7 +61,7 @@ import { useI18n } from "vue-i18n";
 import { getEvalColor } from "@/helpers/eval-colors";
 
 const { t } = useI18n();
-const props = defineProps(['data']);
+const props = defineProps(['data', 'defs']);
 const groupedData = ref({});
 const evals = ref([]);
 const sortOptions = ref([{
@@ -119,6 +131,26 @@ const groupByDocuments = () => {
 watch(() => props.data, groupByDocuments, { immediate: true });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import 'primeflex/primeflex.scss';
 
+.def-label {
+  position: relative;
+  &:hover {
+    .def-tooltip {
+      visibility: visible;
+    }
+  }
+}
+.def-tooltip {
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  padding: 10px 14px;
+  transform: translateY(-100%);
+  width: 300px;
+  z-index: 100;
+  background: #fff;
+  @include styleclass('border-gray-300 border-1 border-round shadow-2');
+}
 </style>

src/helpers/api.js

@@ -184,11 +184,14 @@ async function getProjects() {
 }
 
 async function getWorkflows() {
-    // return await request(baseUrl + '/workflows.json');
-    return Promise.resolve(workflowsJson);
-
+    return await request(baseUrl + '/workflows.json');
+    // return Promise.resolve(workflowsJson);
+}
+async function getEvalDefinitions() {
+    return await request(baseUrl + '/metrics_definitions.json');
 }
 
+
 async function request (url) {
     const response = await fetch(url);
     return await response.json();
@@ -196,5 +199,6 @@ async function request (url) {
 
 export default {
     getProjects,
-    getWorkflows
+    getWorkflows,
+    getEvalDefinitions
 };

src/locales/de.json

@@ -7,5 +7,7 @@
   "sort_by": "Sortieren nach",
   "group_by": "Gruppieren nach",
   "documents": "Dokumente",
-  "no_content": "Diese Ansicht befindet sich im Aufbau. Bitte schauen Sie später vorbei."
+  "no_content": "Diese Ansicht befindet sich im Aufbau. Bitte schauen Sie später vorbei.",
+  "no_description": "Keine Beschreibung verfügbar.",
+  "details": "Details"
 }

src/main.js

@@ -7,6 +7,7 @@ import Button from 'primevue/button';
 import Card from 'primevue/card';
 import Dropdown from 'primevue/dropdown';
 import SelectButton from 'primevue/selectbutton';
+import Tooltip from 'primevue/tooltip';
 
 import { createI18n } from "vue-i18n";
 
@@ -36,5 +37,5 @@ app.component('Button', Button);
 app.component('Card', Card);
 app.component('Dropdown', Dropdown);
 app.component('SelectButton', SelectButton);
-
+app.directive('tooltip', Tooltip);
 app.mount('#app');