Merge remote-tracking branch 'origin/master' into label-dropdowns

src/assets/app.scss

@@ -86,3 +86,10 @@ h3 {
 .p-overlaypanel .p-overlaypanel-content {
   padding: 0;
 }
+
+.p-dropdown:not(.p-disabled):hover {
+  border-color: var(--primary-color);
+}
+.p-multiselect:not(.p-disabled):hover {
+  border-color: var(--primary-color);
+}

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/base/MultiSelect.vue

@@ -38,6 +38,9 @@ const dropdownLabel = computed(() => {
       <Icon v-show="allSelected" icon="prime:check" class="p-checkbox-icon h-5 w-5" data-pc-section="headercheckboxicon"/>
       <span :class="['ml-[7.5rem] absolute w-20 z-[1001]', allSelected ? 'text-highlight' : 'text-black']">{{ t('select_all') }}</span>
     </template>
+    <template v-for="(_, slot) in $slots" v-slot:[slot]="slotData">
+      <slot :name="slot" v-bind="slotData"></slot>
+    </template>
   </MultiSelect>
 </template>
 

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/WorkflowsTimeline.vue

@@ -5,7 +5,6 @@ import { computed, onMounted, ref, watch } from "vue"
 import { EvaluationMetrics, getMaxValueByMetric } from '@/helpers/metrics'
 import { useI18n } from "vue-i18n"
 import type { DropdownOption, EvaluationResultsDocumentWide, Workflow, GroundTruth } from "@/types"
-import { DropdownPassThroughStyles } from '@/helpers/pt'
 import workflowsStore from '@/store/workflows-store'
 import filtersStore from '@/store/filters-store'
 import timelineStore from "@/store/timeline-store"
@@ -49,11 +48,9 @@ watch(selectedMetric,
         <Dropdown
           v-model="selectedMetric"
           :options="metrics"
-          :pt="DropdownPassThroughStyles"
           optionLabel="label"
           placeholder="Select a metric"
-          class="grow-0"
-          unstyled
+          class="w-full md:w-56"
         />
       </div>
     </div>

src/components/workflows/filters/Filters.vue

@@ -2,8 +2,11 @@
 import filtersStore from "@/store/filters-store"
 import workflowsStore from "@/store/workflows-store"
 import { computed, onMounted } from "vue"
-import MultiSelect from "primevue/multiselect"
+import BaseMultiSelect from "@/components/base/MultiSelect.vue"
 import type { FilterOption } from "@/types"
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
 
 const gtOptions = computed(() => workflowsStore.gt.map(({ id, label }) => ({ value: id, label })))
 
@@ -15,12 +18,11 @@ onMounted(() => {
 <template>
   <div class="flex flex-col items-start md:flex-row md:items-center">
     <p class="font-semibold mb-2 md:mb-0 md:mr-4">{{ $t('documents')}} ({{ $t('ground_truth')}}):</p>
-    <MultiSelect
-        :model-value="filtersStore.gt"
+    <BaseMultiSelect
+        v-model="filtersStore.gt"
         @update:model-value="filtersStore.gt = $event"
         :options="gtOptions"
-        optionLabel="label"
-        placeholder="Select Ground Truth"
+        :placeholder="t('select_ground_truth')"
         panel-class="max-w-[500px]"
         :max-selected-labels="1"
         filter
@@ -29,7 +31,7 @@ onMounted(() => {
       <template #option="{ option }: { option: FilterOption }">
         <span class="truncate">{{ option.label }}</span>
       </template>
-    </MultiSelect>
+    </BaseMultiSelect>
   </div>
 
 </template>

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/components/workflows/timeline/TimelineSorting.vue

@@ -4,7 +4,6 @@ import { computed, ref, watch } from "vue"
 import Dropdown from "primevue/dropdown"
 import { GTTimelineSortingOptions, sortByOption } from "@/helpers/sorting"
 import { useI18n } from "vue-i18n"
-import { DropdownPassThroughStyles } from "@/helpers/pt"
 
 const { t } = useI18n()
 
@@ -41,15 +40,14 @@ function updateSortedList(event: any) {
 
 </script>
 <template>
-  <div class="flex flex-col items-start sm:flex-row sm:items-center">
+  <div class="flex flex-col items-start sm:flex-row sm:items-center w-full">
     <p class="font-semibold mb-2 sm:mr-4 sm:mb-0">{{ t('sort_by')}}:</p>
     <Dropdown
     v-model="selectedSortOption"
     @update:model-value="updateSortedList($event)"
     :options="sortOptions"
-    :pt="DropdownPassThroughStyles"
     option-label="label"
-    unstyled
+    class="w-full md:w-56"
     />
   </div>
 </template>

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/helpers/pt.ts

@@ -7,79 +7,10 @@ const TRANSITIONS = {
   }
 }
 
-const DropdownPassThroughStyles = {
-  root: ({ props }) => ({
-    class: [
-      'cursor-pointer inline-flex relative select-none',
-      'bg-white border border-gray-300 transition-colors duration-200 ease-in-out rounded-md',
-      'dark:bg-gray-900 dark:border-primary-900/40 dark:hover:border-primary-300',
-      'w-full md:w-56',
-      'hover:border-primary focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
-      { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
-    ]
-  }),
-  input: ({ props }) => ({
-    class: [
-      'cursor-pointer block flex flex-auto overflow-hidden text-ellipsis whitespace-nowrap relative',
-      'bg-transparent border-0 text-gray-800',
-      'dark:text-white/80',
-      'p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base',
-      'focus:outline-none focus:shadow-none',
-      { 'pr-7': props.showClear }
-    ]
-  }),
-  trigger: {
-    class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-500 w-12 rounded-tr-lg rounded-br-lg']
-  },
-  wrapper: {
-    class: ['max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
-  },
-  list: {
-    class: 'py-3 list-none m-0'
-  },
-  item: ({ context }) => ({
-    class: [
-      'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
-      'm-0 p-3 border-0  transition-shadow duration-200 rounded-none',
-      {
-        'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
-        'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
-        'bg-primary-100 text-primary dark:bg-primary-400 dark:text-white/80': context.focused && context.selected,
-        'bg-primary-50 text-primary dark:bg-primary-300 dark:text-white/80': !context.focused && context.selected
-      }
-    ]
-  }),
-  itemgroup: {
-    class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
-  },
-  header: {
-    class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-primary-900/40']
-  },
-  filtercontainer: {
-    class: 'relative'
-  },
-  filterinput: {
-    class: [
-      'pr-7 -mr-7',
-      'w-full',
-      'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
-      'dark:bg-gray-900 dark:border-primary-900/40 dark:hover:border-primary-300 dark:text-white/80',
-      'hover:border-primary focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
-    ]
-  },
-  filtericon: {
-    class: '-mt-2 absolute top-1/2'
-  },
-  clearicon: {
-    class: 'text-gray-500 right-12 -mt-2 absolute top-1/2'
-  },
-}
-
 const OverlayPanelDropdownStyles = {
   root: 'bg-white border border-gray-300 rounded-md'
 }
 
 export {
-  DropdownPassThroughStyles,
   OverlayPanelDropdownStyles
 }

src/locales/de.json

@@ -99,6 +99,7 @@
   "select_a_label": "Kennzeichnung auswählen",
   "select_a_script_type": "Skript-Typ auswählen",
   "no_labelling": "Keine Kennzeichnung",
+  "select_ground_truth": "Ground Truth auswählen",
   "filter_by": "Filtern nach",
   "metric": "Metric"
 }

src/locales/en.json

@@ -94,6 +94,7 @@
   "select_a_label": "Select a label",
   "select_a_script_type": "Select a script-type",
   "no_labelling": "No labelling",
+  "select_ground_truth": "Select Ground Truth",
   "filter_by": "Filter by",
   "metric": "Metric"
 }