From d7f6ebb306db1373d3c2db97422ef9ccc46c478a Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Tue, 3 Sep 2024 17:18:13 +0200
Subject: [PATCH 1/2] feat: show processor versions in detailed view

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

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 41d8025..4d509ea 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -23,6 +23,7 @@ const op = ref<OverlayPanel>()
 const isOpVisible = ref(false)
 const selectedStep = ref<WorkflowStep | null>(null)
 const selectedStepUrl = computed<string | null>(() => selectedStep.value ? getStepUrl(selectedStep.value) : null)
+const selectedStepVersion = computed<string | null>(() => selectedStep.value ? getStepVersion(selectedStep.value) : null)
 const startDate = ref<Date>(new Date('2023-10-01'))
 const endDate = ref<Date>(new Date())
 
@@ -61,6 +62,13 @@ function getStepUrl(step: WorkflowStep) {
   return repo?.url ?? null
 }
 
+function getStepVersion(step: WorkflowStep) {
+  const repo = projectsStore.repos.find(({ ocrd_tool }) => {
+    return ocrd_tool && ocrd_tool.tools[step.id]
+  })
+  return repo?.ocrd_tool?.version ?? null
+}
+
 </script>
 
 <template>
@@ -163,12 +171,13 @@ function getStepUrl(step: WorkflowStep) {
   >
     <div class="flex flex-col pt-2">
       
-      <a v-if="selectedStepUrl" class="font-bold px-2 pb-2 mb-2 border-b border-gray-300 flex items-center hover:underline underline-offset-2" :href="selectedStepUrl" target="_blank">
+      <a v-if="selectedStepUrl" class="font-bold px-2 pb-2 border-b border-gray-300 flex items-center hover:underline underline-offset-2" :href="selectedStepUrl" target="_blank">
         <Icon icon="mdi:github" class="text-2xl mr-1"/>
         <span class="">{{ selectedStep?.id }}</span>
       </a>
-      <h2 v-else class="font-bold px-2 pb-2 mb-2 border-b border-gray-300">{{ selectedStep?.id }}</h2>
-      <div class="overflow-y-scroll max-h-[400px] w-full">
+      <h2 v-else class="font-bold px-2 pb-2 border-b border-gray-300">{{ selectedStep?.id }}</h2>
+      <div v-if="selectedStepVersion" class="px-2 mt-1 text-sm">Version: {{ selectedStepVersion }}</div>
+      <div class="overflow-y-scroll max-h-[400px] w-full mt-2">
         <table v-if="selectedStep" class="text-sm border-collapse">
           <tr class="">
             <th class="p-1 pl-2 font-semibold">Parameter</th>

From 196c2b5130e9a6a75c096ec558d946bb0503805d Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Wed, 4 Sep 2024 12:04:18 +0200
Subject: [PATCH 2/2] refactor: use optional chaining

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

diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index 4d509ea..7e47e98 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -57,14 +57,14 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
 
 function getStepUrl(step: WorkflowStep) {
   const repo = projectsStore.repos.find(({ ocrd_tool }) => {
-    return ocrd_tool && ocrd_tool.tools[step.id]
+    return ocrd_tool?.tools[step.id]
   })
   return repo?.url ?? null
 }
 
 function getStepVersion(step: WorkflowStep) {
   const repo = projectsStore.repos.find(({ ocrd_tool }) => {
-    return ocrd_tool && ocrd_tool.tools[step.id]
+    return ocrd_tool?.tools[step.id]
   })
   return repo?.ocrd_tool?.version ?? null
 }