feat: add titles to timeline item columns

src/components/Workflows.vue

@@ -70,9 +70,9 @@
   </template>
   <template v-else>
     <div class="flex mb-6">
-      <p class="text-amber-600 flex-grow-0 p-4 bg-amber-100 rounded-md"><span class="font-semibold">Disclaimer:</span> This is an experimental view.</p>
+      <p class="text-amber-600 flex-grow-0 px-4 py-2 bg-amber-100 rounded-md text-sm"><span class="font-semibold">Disclaimer:</span> This is an experimental view.</p>
     </div>
-    <div class="flex mb-3">
+    <div class="flex mb-6">
       <SelectButton v-model="selectedOption" :options="options" optionLabel="name"></SelectButton>
       <Filters class="ml-auto"/>
     </div>

src/components/workflows/WorkflowsTimeline.vue

@@ -44,7 +44,7 @@ watch(selectedMetric,
         unstyled
       />
     </div>
-    <div class="flex flex-col space-y-4">
+    <div class="flex flex-col space-y-6">
       <template v-if="gtList.length > 0">
         <TimelineItem v-for="gt in gtList" :key="gt.id" :gt="gt" :metric="selectedMetricValue" />
       </template>

src/components/workflows/timeline/TimelineItem.vue

@@ -9,6 +9,7 @@ import { Icon } from '@iconify/vue'
 import { onMounted, ref } from "vue"
 import { OverlayPanelDropdownStyles } from "@/helpers/pt"
 import workflowsStore from "@/store/workflows-store"
+import HomeView from "@/views/HomeView.vue"
 
 const props = defineProps<{
   gt: GroundTruth,
@@ -75,31 +76,40 @@ function hideParametersOverlay() {
     <template v-slot:default>
       <div class="flex border-t border-gray-300 py-4 px-4">
         <table class="table-fixed w-full">
-          <tr v-for="workflow in workflows" :key="workflow.id">
+          <thead>
+            <tr class="">
+              <th class="text-left pb-4">{{ $t('workflows') }}</th>
+              <th class="text-left pb-4">{{ $t('processors') }}</th>
+              <th class="text-right pr-[314px] pb-4">{{ $t('timeline') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <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">
               <span
-                v-for="step in workflow.steps"
-                :key="step.id"
-                class="p-1 cursor-pointer"
-                @mouseenter="showParametersOverlay(step, $event)"
-                @mouseleave="hideParametersOverlay()"
+                  v-for="step in workflow.steps"
+                  :key="step.id"
+                  class="p-1 cursor-pointer"
+                  @mouseenter="showParametersOverlay(step, $event)"
+                  @mouseleave="hideParametersOverlay()"
               >
               {{ getStepAcronym(step.id) }}
             </span>
             </td>
             <td class="overflow-x-auto">
               <MetricChart
-                :runs="workflowsStore.getRuns(gt.id, workflow.id)"
-                :workflow-name="workflow.label"
-                :metric="metric"
-                :width="400"
-                :start-date="startDate"
-                :end-date="endDate"
-                class="flex justify-end"
+                  :runs="workflowsStore.getRuns(gt.id, workflow.id)"
+                  :workflow-name="workflow.label"
+                  :metric="metric"
+                  :width="400"
+                  :start-date="startDate"
+                  :end-date="endDate"
+                  class="flex justify-end"
               />
             </td>
           </tr>
+          </tbody>
         </table>
       </div>
     </template>