feat: add processor github links to the overlays of each step of a ti…

…meline 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

@@ -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>
 

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)

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(() => {

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

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="">

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')
 }
 

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
+  }
+})

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
+}