From 0418c842e2a12ae9d82b05a2394d0c384596d0e1 Mon Sep 17 00:00:00 2001
From: "amtul.noor" <amtul.noor@stud.uni-goettingen.de>
Date: Thu, 11 Jan 2024 16:40:42 +0100
Subject: [PATCH 1/2] fix: maximize processor parameter window

---
 .../workflows/timeline/TimelineItem.vue       | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index c8b3831..0a70b6c 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -6,7 +6,7 @@ import MetricChart from "@/components/workflows/timeline/MetricChart.vue"
 import type { EvaluationResultsDocumentWide, GroundTruth, Workflow, WorkflowStep } from "@/types"
 import MetricAverageChart from "@/components/workflows/timeline/MetricAverageChart.vue"
 import { Icon } from '@iconify/vue'
-import { onMounted, ref } from "vue"
+import { onMounted, nextTick, ref } from "vue"
 import { OverlayPanelDropdownStyles } from "@/helpers/pt"
 import workflowsStore from "@/store/workflows-store"
 
@@ -16,6 +16,7 @@ const props = defineProps<{
 }>()
 
 const op = ref<OverlayPanel>()
+const isOpVisible = ref(false)
 const selectedStep = ref<WorkflowStep | null>(null)
 const startDate = ref<Date>(new Date('2023-10-01'))
 const endDate = ref<Date>(new Date())
@@ -38,6 +39,19 @@ function hideParametersOverlay() {
   op.value?.hide()
 }
 
+function toggleParameterOverlay(step: WorkflowStep, event: Event) {
+  if (isOpVisible.value) {
+    hideParametersOverlay()
+    if (selectedStep.value !== step) {
+      nextTick(() => {
+        showParametersOverlay(step, event)
+      })
+    }
+  } else {
+    showParametersOverlay(step, event)
+  }
+}
+
 </script>
 
 <template>
@@ -90,8 +104,7 @@ function hideParametersOverlay() {
                   v-for="step in workflow.steps"
                   :key="step.id"
                   class="p-1 cursor-pointer"
-                  @mouseenter="showParametersOverlay(step, $event)"
-                  @mouseleave="hideParametersOverlay()"
+                  @click="toggleParameterOverlay(step, $event)"
               >
               {{ getStepAcronym(step.id) }}
             </span>
@@ -119,6 +132,8 @@ function hideParametersOverlay() {
   <OverlayPanel
     ref="op"
     :pt="OverlayPanelDropdownStyles"
+    @show="isOpVisible = true"
+    @hide="isOpVisible = false"
   >
     <div class="flex flex-col pt-2">
       <h2 class="font-bold px-2 pb-2 mb-2 border-b border-gray-300">{{ selectedStep?.id }}</h2>

From ed5f68f24b4e0ea7f05bfbbf9ac394a1e4d553ce Mon Sep 17 00:00:00 2001
From: "amtul.noor" <amtul.noor@stud.uni-goettingen.de>
Date: Wed, 31 Jan 2024 16:49:08 +0100
Subject: [PATCH 2/2] feat: add hover effect on processor names

---
 src/components/workflows/timeline/TimelineItem.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 0a70b6c..c608c60 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -154,5 +154,7 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
 </template>
 
 <style scoped lang="scss">
-
+span:hover {
+  color: var(--highlight-text-color);
+}
 </style>