From 61236952f7a8ce33168ba2f2bf5d697976f2c4c4 Mon Sep 17 00:00:00 2001
From: jfrer <76432831+jfrer@users.noreply.github.com>
Date: Tue, 6 Aug 2024 10:55:40 +0200
Subject: [PATCH] feat: add processor github links to the overlays of each step
 of a timeline item (#100)

* refactor: unify project store, use typescript

* feat: add processor github links to timeline item step overlays

* feat: add hover effect to links

* style: lint
---
 src/components/Projects.vue                   |  6 +--
 src/components/Workflows.vue                  |  2 +
 src/components/projects/Project.vue           |  4 +-
 src/components/workflows/WorkflowsList.vue    |  4 +-
 .../workflows/timeline/TimelineItem.vue       | 15 +++++-
 src/helpers/api.ts                            |  6 +--
 src/helpers/store.ts                          | 41 ----------------
 src/store/projects-store.ts                   | 25 ++++++++++
 src/types/index.d.ts                          | 48 +++++++++++++++++++
 9 files changed, 99 insertions(+), 52 deletions(-)
 delete mode 100644 src/helpers/store.ts
 create mode 100644 src/store/projects-store.ts

diff --git a/src/components/Projects.vue b/src/components/Projects.vue
index d6434c9..c71a2d1 100644
--- a/src/components/Projects.vue
+++ b/src/components/Projects.vue
@@ -23,17 +23,17 @@
 <script setup>
 
 import { onMounted, ref } from "vue"
-import { store } from "@/helpers/store"
+import projectsStore from "@/store/projects-store"
 import api from "@/helpers/api"
 import Project from "@/components/projects/Project.vue"
 
 const releases = ref([])
 
 onMounted(async () => {
-  store.setRepos(await api.getProjects())
+  projectsStore.setRepos(await api.getProjects())
 
   releases.value = await api.getOcrdAllReleases()
-  store.setReleases(releases.value)
+  projectsStore.setReleases(releases.value)
 })
 </script>
 
diff --git a/src/components/Workflows.vue b/src/components/Workflows.vue
index 8596a2b..ee20a74 100644
--- a/src/components/Workflows.vue
+++ b/src/components/Workflows.vue
@@ -12,6 +12,7 @@
   import filtersStore from "@/store/filters-store"
   import workflowsStore from "@/store/workflows-store"
   import type { ReleaseInfo } from "@/types"
+import projectsStore from "@/store/projects-store"
 
   const { t } = useI18n()
 
@@ -53,6 +54,7 @@
     workflowsStore.latestRuns = await api.getLatestRuns()
     workflowsStore.gt = await api.getGroundTruth()
     workflowsStore.workflows = await api.getWorkflows()
+    projectsStore.setRepos(await api.getProjects())
 
     workflowsStore.runs.forEach(run => {
       const gtId = mapGtId(run.metadata.gt_workspace.id)
diff --git a/src/components/projects/Project.vue b/src/components/projects/Project.vue
index c993642..10dee38 100644
--- a/src/components/projects/Project.vue
+++ b/src/components/projects/Project.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref, watch } from "vue"
-import { store } from "@/helpers/store"
+import projectsStore from "@/store/projects-store"
 import Icon from "@/components/Icon.vue"
 import { useI18n } from "vue-i18n"
 import Button from "primevue/button"
@@ -13,7 +13,7 @@ const repo = ref(null)
 const op = ref(null)
 
 watch(() => props.id, (id) => {
-  repo.value = store.getRepoById(id)
+  repo.value = projectsStore.getRepoById(id)
 }, { immediate: true })
 
 const statusList = computed(() => {
diff --git a/src/components/workflows/WorkflowsList.vue b/src/components/workflows/WorkflowsList.vue
index e77886f..fe1d279 100644
--- a/src/components/workflows/WorkflowsList.vue
+++ b/src/components/workflows/WorkflowsList.vue
@@ -100,7 +100,7 @@
 <script setup>
 import { ref, onMounted, watch } from "vue"
 import { useI18n } from "vue-i18n"
-import { store } from "@/helpers/store"
+import projectsStore from "@/store/projects-store"
 import { createReadableMetricValue, getEvalColor } from "@/helpers/utils"
 import Icon from "@/components/Icon.vue"
 
@@ -252,7 +252,7 @@ const setListData = (data) => {
 }
 
 const getRepoUrl = (needleId) => {
-  const repo = store.repos.find(({ ocrd_tool }) => {
+  const repo = projectsStore.repos.find(({ ocrd_tool }) => {
     return ocrd_tool && ocrd_tool.tools[needleId]
   })
   if (!repo) return null
diff --git a/src/components/workflows/timeline/TimelineItem.vue b/src/components/workflows/timeline/TimelineItem.vue
index a499d7c..41d8025 100644
--- a/src/components/workflows/timeline/TimelineItem.vue
+++ b/src/components/workflows/timeline/TimelineItem.vue
@@ -11,6 +11,7 @@ import { OverlayPanelDropdownStyles } from "@/helpers/pt"
 import workflowsStore from "@/store/workflows-store"
 import TimelineItemMetadata from "@/components/workflows/timeline/TimelineItemMetadata.vue"
 import filtersStore from "@/store/filters-store"
+import projectsStore from "@/store/projects-store"
 
 
 defineProps<{
@@ -21,6 +22,7 @@ defineProps<{
 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 startDate = ref<Date>(new Date('2023-10-01'))
 const endDate = ref<Date>(new Date())
 
@@ -52,6 +54,12 @@ 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 repo?.url ?? null
+}
 
 </script>
 
@@ -154,7 +162,12 @@ function toggleParameterOverlay(step: WorkflowStep, event: Event) {
     @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>
+      
+      <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">
+        <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">
         <table v-if="selectedStep" class="text-sm border-collapse">
           <tr class="">
diff --git a/src/helpers/api.ts b/src/helpers/api.ts
index f44b999..9821708 100644
--- a/src/helpers/api.ts
+++ b/src/helpers/api.ts
@@ -1,12 +1,12 @@
-import type { EvalDefinitions, EvaluationRun, GroundTruth, Workflow } from "@/types"
+import type { EvalDefinitions, EvaluationRun, GroundTruth, Project, Release, Workflow } from "@/types"
 
 const baseUrlOld = 'https://raw.githubusercontent.com/OCR-D/quiver-back-end/main/data'
 const baseUrl = 'https://quiver-dev.sub.uni-goettingen.de/api'
-async function getProjects() {
+async function getProjects(): Promise<Project[]> {
     return await request(baseUrlOld + '/repos.json')
 }
 
-async function getOcrdAllReleases() {
+async function getOcrdAllReleases(): Promise<Release[]> {
     return await request(baseUrlOld + '/ocrd_all_releases.json')
 }
 
diff --git a/src/helpers/store.ts b/src/helpers/store.ts
deleted file mode 100644
index 69e0f08..0000000
--- a/src/helpers/store.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { reactive } from 'vue'
-import type { GroundTruth, Workflow } from "@/types"
-
-interface State {
-  gtList: GroundTruth[],
-  workflows: Workflow[],
-  setGTList: (gt: GroundTruth[]) => void,
-  setWorkflows: (workflows: Workflow[]) => void,
-}
-
-export const store = reactive<State>({
-  repos: [],
-  releases: [],
-  evaluations: [],
-  metricDefinitions: {},
-  gtList: [],
-  workflows: [],
-  setGTList(gtList) {
-    this.gtList = gtList
-  },
-  setWorkflows(workflows) {
-    this.workflows = workflows
-  },
-  setRepos(repos) {
-    this.repos = repos
-  },
-  setReleases(releases) {
-    this.releases = releases
-  },
-  setEvaluations(evaluations) {
-    this.evaluations = evaluations
-  },
-  setMetricDefinitions(defs) {
-    this.metricDefinitions = defs
-  },
-  getRepoById(id) {
-    return this.repos.find(repo => {
-      return repo.id === id
-    })
-  }
-})
diff --git a/src/store/projects-store.ts b/src/store/projects-store.ts
new file mode 100644
index 0000000..86b323d
--- /dev/null
+++ b/src/store/projects-store.ts
@@ -0,0 +1,25 @@
+import { reactive } from 'vue'
+import type { Project, Release } from '@/types'
+
+
+export default reactive<{
+  repos: Project[],
+  releases: Release[],
+  setRepos: (repos: Project[]) => void
+  setReleases: (releases: Release[]) => void
+  getRepoById: (id: string) => Project | null
+}>({
+  repos: [],
+  releases: [],
+  setRepos(repos: Project[]) {
+    this.repos = repos
+  },
+  setReleases(releases: Release[]) {
+    this.releases = releases
+  },
+  getRepoById(id) {
+    return this.repos.find(repo => {
+      return repo.id === id
+    }) ?? null
+  }
+})
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 67a625e..b83743d 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -136,6 +136,11 @@ export interface FilterOption {
   label: string
 }
 
+export interface Release {
+  projects: string[],
+  tag: string
+}
+
 export interface ReleaseInfo {
   id: number,
   published_at: string,
@@ -166,3 +171,46 @@ export interface GroupedTableDataSubject {
     value: number | number[] | null
   }[]
 }
+
+export interface Project {
+  additional_info: {
+    links: {
+      Dockerfile?: string
+      "README.md"?: string
+      "ocrd-tool.json"?: string
+      "setup.py"?: string
+    }
+  }
+  compliant_cli: boolean
+  dependencies: {
+    [package: string]: string
+  }
+  dependency_conflicts?: {
+    [package: string]: {
+      [package: string]: string
+    }
+  }
+  id: string
+  latest_version: string
+  ocrd_tool?: {
+    git_url: string
+    tools: {
+      [ocrd_tool: string]: {
+        categrories: string[]
+        description: string
+        executable: string
+        input_file_grp: string[]
+        output_file_grp: string[]
+        parameters: any
+        steps: string[]
+      }
+    }
+    version: string
+  }
+  ocrd_tool_json_valid: boolean
+  official: boolean
+  org_plus_name: string
+  project_type: string
+  unreleased_changes: number
+  url: string
+}
\ No newline at end of file