From 4c228f3207c3cd130ff744ecbb99ed96b35d300d Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 14 Jun 2024 14:55:15 +0200
Subject: [PATCH 1/8] fix: use api for latest runs instead of local filtering

---
 src/components/Workflows.vue | 6 ++++++
 src/helpers/api.ts           | 2 +-
 src/store/workflows-store.ts | 9 +++------
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Workflows.vue b/src/components/Workflows.vue
index 9ad66e6..773a57c 100644
--- a/src/components/Workflows.vue
+++ b/src/components/Workflows.vue
@@ -50,6 +50,7 @@
     }
 
     workflowsStore.runs = await api.getRuns()
+    workflowsStore.latestRuns = await api.getLatestRuns()
     workflowsStore.gt = await api.getGroundTruth()
     workflowsStore.workflows = await api.getWorkflows()
 
@@ -58,6 +59,11 @@
 
       if (!workflowsStore.gt.find(gt => gt.id === gtId)) console.log(gtId)
     })
+    workflowsStore.latestRuns.forEach(run => {
+      const gtId = mapGtId(run.metadata.gt_workspace.id)
+
+      if (!workflowsStore.gt.find(gt => gt.id === gtId)) console.log(gtId)
+    })
 
     const releasesObj = workflowsStore.runs.reduce((acc, cur) => {
       acc[cur.metadata.release_info.tag_name] = cur.metadata.release_info
diff --git a/src/helpers/api.ts b/src/helpers/api.ts
index 98dc337..6e09a71 100644
--- a/src/helpers/api.ts
+++ b/src/helpers/api.ts
@@ -39,7 +39,7 @@ async function getLatestRuns(gtId?: string, workflowId?: string): Promise<Evalua
 
     path += '/latest'
 
-    return await request(path)
+    return (await request(path)).flat(1)
 }
 
 async function request (url: string) {
diff --git a/src/store/workflows-store.ts b/src/store/workflows-store.ts
index c443700..f1e1251 100644
--- a/src/store/workflows-store.ts
+++ b/src/store/workflows-store.ts
@@ -10,6 +10,7 @@ export default reactive<{
   gt: GroundTruth[],
   workflows: Workflow[],
   runs: EvaluationRun[],
+  latestRuns: EvaluationRun[],
   releases: ReleaseInfo[],
   getRuns: (gtId: string, workflowId?: string) => EvaluationRun[]
   getLatestRuns: () => EvaluationRun[],
@@ -19,6 +20,7 @@ export default reactive<{
   gt: [],
   workflows: [],
   runs: [],
+  latestRuns: [],
   releases: [],
   getRuns(gtId: string, workflowId?: string) {
     return this.runs
@@ -32,12 +34,7 @@ export default reactive<{
       )
   },
   getLatestRuns() {
-    const dates = Object.keys(this.runs.reduce((acc, cur) => {
-      acc[normalizeDate(cur.metadata.timestamp)] = null
-      return acc
-    }, <{ [key: string]: null}>{}))
-
-    return this.runs.filter(({ metadata }) => normalizeDate(metadata.timestamp) === dates[dates.length - 1])
+    return this.latestRuns
   },
   getGtById(id: string): GroundTruth | null {
     return this.gt.find((item) => item.id === id) ?? null

From 6d904fd6dcc7ac15218cdd250fc980d8adbd3851 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 5 Jul 2024 15:07:04 +0200
Subject: [PATCH 2/8] refactor: use explicit types

---
 src/components/workflows/WorkflowsTable.vue | 22 ++++++++++----------
 src/helpers/api.ts                          |  4 ++--
 src/types/index.d.ts                        | 23 +++++++++++++++++++++
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/components/workflows/WorkflowsTable.vue b/src/components/workflows/WorkflowsTable.vue
index f42c6f2..964c0a3 100644
--- a/src/components/workflows/WorkflowsTable.vue
+++ b/src/components/workflows/WorkflowsTable.vue
@@ -2,7 +2,7 @@
 import { watch, ref, onMounted, computed } from "vue"
 import { useI18n } from "vue-i18n"
 import { createReadableMetricValue, getEvalColor, mapGtId } from "@/helpers/utils"
-import type { EvaluationRun } from "@/types"
+import type { EvalDefinitions, EvaluationResultsDocumentWide, EvaluationRun, GroupedTableData } from "@/types"
 import Dropdown from 'primevue/dropdown'
 import workflowsStore from "@/store/workflows-store"
 import api from "@/helpers/api"
@@ -11,8 +11,8 @@ import TrendLegend from "@/components/workflows/TrendLegend.vue"
 
 const { t } = useI18n()
 
-const groupedData = ref({})
-const evals = ref([])
+const groupedData = ref<GroupedTableData>({})
+const evals = ref<string[]>([])
 
 const sortOptions = ref([{
   value: 'documents',
@@ -25,7 +25,7 @@ const sortOptions = ref([{
 const sortBy = ref(sortOptions.value[0])
 const latestRuns = ref<EvaluationRun[]>([])
 const filteredRuns = ref<EvaluationRun[]>([])
-const evalDefinitions = ref([])
+const evalDefinitions = ref<EvalDefinitions>({})
 const loading = ref(false)
 
 onMounted(async () => {
@@ -66,7 +66,7 @@ const groupByWorkflows = () => {
       label: workflowsStore.getGtById(mapGtId(cur.metadata.gt_workspace.id))?.label,
       evaluations: Object.keys(cur.evaluation_results.document_wide).map(key => ({
         name: key,
-        value: cur.evaluation_results.document_wide[key]
+        value: cur.evaluation_results.document_wide[key as keyof EvaluationResultsDocumentWide]
       }))
     }
     if (!acc[ocrWorkflowId]) {
@@ -77,12 +77,12 @@ const groupByWorkflows = () => {
     } else {
       acc[ocrWorkflowId].subjects.push(subject)
       acc[ocrWorkflowId].subjects.sort((a, b) => {
-        if (a.label > b.label) return 1
+        if ((a.label && b.label) && a.label > b.label) return 1
         else return -1
       })
     }
     return acc
-  }, {})
+  }, {} as GroupedTableData)
 }
 
 const groupByDocuments = () => {
@@ -94,7 +94,7 @@ const groupByDocuments = () => {
       label: workflowsStore.getWorkflowById(mapGtId(cur.metadata.ocr_workflow['id']))?.label,
       evaluations: Object.keys(cur.evaluation_results.document_wide).map(key => ({
         name: key,
-        value: cur.evaluation_results.document_wide[key]
+        value: cur.evaluation_results.document_wide[key as keyof EvaluationResultsDocumentWide]
       }))
     }
     if (!acc[gtWorkspaceId]) {
@@ -105,12 +105,12 @@ const groupByDocuments = () => {
     } else {
       acc[gtWorkspaceId].subjects.push(subject)
       acc[gtWorkspaceId].subjects.sort((a, b) => {
-        if (a.label > b.label) return 1
+        if ((a.label && b.label) && a.label > b.label) return 1
         else return -1
       })
     }
     return acc
-  }, {})
+  }, {} as GroupedTableData)
 }
 </script>
 
@@ -161,7 +161,7 @@ const groupByDocuments = () => {
             <span
               class="metric inline-block cursor-pointer text-sm leading-none p-1 rounded-lg min-w-[48px]"
               :class="getEvalColor(name, value)">
-              {{ createReadableMetricValue(name, value) }}
+              {{ createReadableMetricValue(name as keyof EvaluationResultsDocumentWide, value) }}
             </span>
           </td>
         </tr>
diff --git a/src/helpers/api.ts b/src/helpers/api.ts
index 98dc337..912ab10 100644
--- a/src/helpers/api.ts
+++ b/src/helpers/api.ts
@@ -1,4 +1,4 @@
-import type { EvaluationRun, GroundTruth, Workflow } from "@/types"
+import type { EvalDefinition, EvaluationRun, GroundTruth, 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'
@@ -10,7 +10,7 @@ async function getOcrdAllReleases() {
     return await request(baseUrlOld + '/ocrd_all_releases.json')
 }
 
-async function getEvalDefinitions() {
+async function getEvalDefinitions(): Promise<EvalDefinitions> {
     return await request(baseUrlOld + '/metrics_definitions.json')
 }
 
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 2776794..79561ae 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -141,3 +141,26 @@ export interface ReleaseInfo {
   html_url: string
 }
 
+export interface EvalDefinition {
+  label: string,
+  short_descr: string,
+  url: string
+}
+
+export interface EvalDefinitions {
+  [id: string]: EvalDefinition
+}
+
+export interface GroupedTableData {
+  [gtWorkId: string]: {
+    label: string | undefined,
+    subjects: {
+      label: string | undefined
+      evaluations: {
+        name: string
+        value: number | number[] | null
+      }[]
+    }[]
+  }
+}
+

From 6cd3d17aa25911770c6748a3c79cc93b33e6d141 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 5 Jul 2024 16:08:28 +0200
Subject: [PATCH 3/8] docs: add comment explaining the workaround

---
 src/helpers/api.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/helpers/api.ts b/src/helpers/api.ts
index 6e09a71..dccf74c 100644
--- a/src/helpers/api.ts
+++ b/src/helpers/api.ts
@@ -38,7 +38,13 @@ async function getLatestRuns(gtId?: string, workflowId?: string): Promise<Evalua
     if (workflowId) path += `/${workflowId}`
 
     path += '/latest'
-
+    /*
+    TODO: Remove flattening when bug in the backend is fixed.
+    Bug:  The data gets returned as an array of arrays that each contain a single object. 
+          It should have the same structure as the data at the /runs endpoint. (array of objects)
+    Workaround:
+          Flatten the returned list to match the data structure of the /runs endpoint.
+    */
     return (await request(path)).flat(1)
 }
 

From 2887a22eb654dcb0d474310aa585b8ffc5e6978e Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Tue, 9 Jul 2024 13:51:27 +0200
Subject: [PATCH 4/8] wip

---
 src/components/workflows/WorkflowsTable.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/workflows/WorkflowsTable.vue b/src/components/workflows/WorkflowsTable.vue
index 964c0a3..17e864b 100644
--- a/src/components/workflows/WorkflowsTable.vue
+++ b/src/components/workflows/WorkflowsTable.vue
@@ -44,6 +44,7 @@ watch(() => filtersStore.gt, () => {
 
 watch(sortBy, () => {
   groupRuns(sortBy.value.value)
+  console.log(groupedData.value) //TODO: remove, continue here
 })
 
 function setFilteredRuns() {

From 38dbe0c2eb67457193cb2e5deed18d187432f1f4 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Tue, 9 Jul 2024 16:09:40 +0200
Subject: [PATCH 5/8] wip

---
 src/components/workflows/WorkflowsTable.vue | 1 -
 src/helpers/api.ts                          | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/workflows/WorkflowsTable.vue b/src/components/workflows/WorkflowsTable.vue
index 17e864b..964c0a3 100644
--- a/src/components/workflows/WorkflowsTable.vue
+++ b/src/components/workflows/WorkflowsTable.vue
@@ -44,7 +44,6 @@ watch(() => filtersStore.gt, () => {
 
 watch(sortBy, () => {
   groupRuns(sortBy.value.value)
-  console.log(groupedData.value) //TODO: remove, continue here
 })
 
 function setFilteredRuns() {
diff --git a/src/helpers/api.ts b/src/helpers/api.ts
index 912ab10..a641f6b 100644
--- a/src/helpers/api.ts
+++ b/src/helpers/api.ts
@@ -10,7 +10,7 @@ async function getOcrdAllReleases() {
     return await request(baseUrlOld + '/ocrd_all_releases.json')
 }
 
-async function getEvalDefinitions(): Promise<EvalDefinitions> {
+async function getEvalDefinitions(): Promise<EvalDefinition> {
     return await request(baseUrlOld + '/metrics_definitions.json')
 }
 

From fa5db7ede2b79232682a0d161b16659e46699fcf Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 12 Jul 2024 11:29:19 +0200
Subject: [PATCH 6/8] wip

---
 src/components/workflows/WorkflowsTable.vue   |  6 ++-
 .../timeline/WorkflowTableSorter.vue          | 51 +++++++++++++++++++
 src/helpers/api.ts                            |  4 +-
 src/types/index.d.ts                          | 12 ++---
 4 files changed, 63 insertions(+), 10 deletions(-)
 create mode 100644 src/components/workflows/timeline/WorkflowTableSorter.vue

diff --git a/src/components/workflows/WorkflowsTable.vue b/src/components/workflows/WorkflowsTable.vue
index 964c0a3..cac7e75 100644
--- a/src/components/workflows/WorkflowsTable.vue
+++ b/src/components/workflows/WorkflowsTable.vue
@@ -8,6 +8,7 @@ import workflowsStore from "@/store/workflows-store"
 import api from "@/helpers/api"
 import filtersStore from "@/store/filters-store"
 import TrendLegend from "@/components/workflows/TrendLegend.vue"
+import WorkflowsTableSorter from "@/components/workflows/timeline/WorkflowTableSorter.vue"
 
 const { t } = useI18n()
 
@@ -53,6 +54,7 @@ function setFilteredRuns() {
 function groupRuns(groupBy: string) {
   if (groupBy === 'workflows') groupByWorkflows()
   else if (groupBy === 'documents') groupByDocuments()
+  console.log(groupedData.value)
 }
 
 const groupByWorkflows = () => {
@@ -133,7 +135,9 @@ const groupByDocuments = () => {
         <th class="p-2 border">{{ sortBy.value === 'documents' ? $t('workflows') : $t('documents') }}</th>
         <th v-for="(evalKey, i) in evals" :key="i" class="p-2 border">
           <span class="def-label flex items-center justify-center cursor-pointer">
-            {{ evalDefinitions[evalKey] ? evalDefinitions[evalKey].label : evalKey }}
+            <WorkflowsTableSorter :grouped-data="groupedData" :metric="(evalKey as keyof EvaluationResultsDocumentWide)">
+              {{ evalDefinitions[evalKey] ? evalDefinitions[evalKey].label : evalKey }}
+            </WorkflowsTableSorter>
             <i-icon name="ink-info"/>
             <div class="def-tooltip">
               <div class="flex p-2 bg-white border rounded">
diff --git a/src/components/workflows/timeline/WorkflowTableSorter.vue b/src/components/workflows/timeline/WorkflowTableSorter.vue
new file mode 100644
index 0000000..7fe2b40
--- /dev/null
+++ b/src/components/workflows/timeline/WorkflowTableSorter.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import Button from "primevue/button"
+import { Icon } from "@iconify/vue"
+import { ref, watch } from "vue"
+import type { GroupedTableData, EvaluationResultsDocumentWide } from "@/types";
+const props = withDefaults(
+  defineProps<{
+    groupedData: GroupedTableData
+    metric: keyof EvaluationResultsDocumentWide
+    sort?: boolean
+  }>(), 
+  {
+    sort: false
+  }
+)
+//const emit = defineEmits() //emit the sorted data
+
+enum sortStates {
+  none,
+  desc,
+  asc,
+}
+const sortState = ref(sortStates.none)
+
+//watch sort -> set sortState none 
+
+//watch props -> if changes and sortState not none -> resort
+
+const cycleAndSort = () => {
+  cycleSortState()
+  sort()
+}
+const sort = () => {
+  if (sortState.value === sortStates.none) return //prob need to emit smth so that data wont be sorted -> or just emit unsorted data
+  //const sortedData = props.groupedData.sort((left, right)) hmmm need a way to sort an object
+}
+
+const cycleSortState = () => {
+  sortState.value = (sortState.value + 1) % 3 //three sorting states
+  console.log(sortState.value)
+}
+
+</script>
+<template>
+  <Button @click="cycleAndSort()" unstyled>
+    <slot/>
+    <Icon v-if="sortState === sortStates.desc" icon="typcn:arrow-sorted-down" class="ml-2"/>
+    <Icon v-else-if="sortState === sortStates.asc" icon="typcn:arrow-sorted-up" class="ml-2"/>
+    <Icon v-else icon="typcn:arrow-unsorted"></Icon>
+  </Button>
+</template>
\ No newline at end of file
diff --git a/src/helpers/api.ts b/src/helpers/api.ts
index c7be0e8..f44b999 100644
--- a/src/helpers/api.ts
+++ b/src/helpers/api.ts
@@ -1,4 +1,4 @@
-import type { EvalDefinition, EvaluationRun, GroundTruth, Workflow } from "@/types"
+import type { EvalDefinitions, EvaluationRun, GroundTruth, 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'
@@ -10,7 +10,7 @@ async function getOcrdAllReleases() {
     return await request(baseUrlOld + '/ocrd_all_releases.json')
 }
 
-async function getEvalDefinitions(): Promise<EvalDefinition> {
+async function getEvalDefinitions(): Promise<EvalDefinitions> {
     return await request(baseUrlOld + '/metrics_definitions.json')
 }
 
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 79561ae..5f7b4ff 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -141,14 +141,12 @@ export interface ReleaseInfo {
   html_url: string
 }
 
-export interface EvalDefinition {
-  label: string,
-  short_descr: string,
-  url: string
-}
-
 export interface EvalDefinitions {
-  [id: string]: EvalDefinition
+  [id: string]: {
+    label: string,
+    short_descr: string,
+    url: string 
+  }
 }
 
 export interface GroupedTableData {

From 8a5f60128bcf662d39fa80aa0bf3e1e59e53a94e Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Tue, 16 Jul 2024 16:11:58 +0200
Subject: [PATCH 7/8] feat: sort table by metrics while keeping the grouping as
 is

---
 src/components/workflows/WorkflowsTable.vue   | 57 +++++++++-----
 .../timeline/WorkflowTableSorter.vue          | 76 +++++++++++++++----
 src/types/index.d.ts                          | 16 ++--
 3 files changed, 110 insertions(+), 39 deletions(-)

diff --git a/src/components/workflows/WorkflowsTable.vue b/src/components/workflows/WorkflowsTable.vue
index cac7e75..2b55837 100644
--- a/src/components/workflows/WorkflowsTable.vue
+++ b/src/components/workflows/WorkflowsTable.vue
@@ -13,9 +13,15 @@ import WorkflowsTableSorter from "@/components/workflows/timeline/WorkflowTableS
 const { t } = useI18n()
 
 const groupedData = ref<GroupedTableData>({})
+const sortedData = ref<GroupedTableData>({})
 const evals = ref<string[]>([])
+const sortBy = ref<keyof EvaluationResultsDocumentWide | null>(null)
 
-const sortOptions = ref([{
+const tableData = computed<GroupedTableData>(() => {
+  return (sortBy.value === null || Object.keys(sortedData.value).length === 0) ? groupedData.value : sortedData.value
+})
+
+const groupingOptions = ref([{
   value: 'documents',
   label: t('documents')
 }, {
@@ -23,7 +29,7 @@ const sortOptions = ref([{
   label: t('workflows')
 }])
 
-const sortBy = ref(sortOptions.value[0])
+const groupBy = ref(groupingOptions.value[0])
 const latestRuns = ref<EvaluationRun[]>([])
 const filteredRuns = ref<EvaluationRun[]>([])
 const evalDefinitions = ref<EvalDefinitions>({})
@@ -34,17 +40,17 @@ onMounted(async () => {
   latestRuns.value = workflowsStore.getLatestRuns()
   evalDefinitions.value = await api.getEvalDefinitions()
   setFilteredRuns()
-  groupRuns(sortBy.value.value)
+  groupRuns(groupBy.value.value)
   loading.value = false
 })
 
 watch(() => filtersStore.gt, () => {
   setFilteredRuns()
-  groupRuns(sortBy.value.value)
+  groupRuns(groupBy.value.value)
 })
 
-watch(sortBy, () => {
-  groupRuns(sortBy.value.value)
+watch(groupBy, () => {
+  groupRuns(groupBy.value.value)
 })
 
 function setFilteredRuns() {
@@ -54,7 +60,7 @@ function setFilteredRuns() {
 function groupRuns(groupBy: string) {
   if (groupBy === 'workflows') groupByWorkflows()
   else if (groupBy === 'documents') groupByDocuments()
-  console.log(groupedData.value)
+  sortBy.value = null
 }
 
 const groupByWorkflows = () => {
@@ -114,6 +120,15 @@ const groupByDocuments = () => {
     return acc
   }, {} as GroupedTableData)
 }
+
+const getSortValue = (key: keyof EvaluationResultsDocumentWide) => {
+  return sortBy.value === key
+}
+
+const setSorted = (event: GroupedTableData, key: keyof EvaluationResultsDocumentWide) => {
+  sortBy.value = key
+  sortedData.value = event
+}
 </script>
 
 <template>
@@ -121,21 +136,27 @@ const groupByDocuments = () => {
     Loading...
   </template>
   <template v-else>
-    <div class="flex flex-col" v-if="Object.keys(groupedData).length > 0">
+    <div class="flex flex-col" v-if="Object.keys(tableData).length > 0">
       <div class="flex items-center mb-4 ml-auto">
         <p class="mr-2">{{ $t('group_by') }}:</p>
-        <Dropdown v-model="sortBy" :options="sortOptions" optionLabel="label" placeholder="Choose something.." class="" />
+        <Dropdown v-model="groupBy" :options="groupingOptions" optionLabel="label" placeholder="Choose something.." class="" />
       </div>
       <TrendLegend :show-text-colors="false" class="ml-auto mb-4"/>
     </div>
-    <table v-if="Object.keys(groupedData).length > 0" class="w-full border border-collapse rounded text-sm">
+    <table v-if="Object.keys(tableData).length > 0" class="w-full border border-collapse rounded text-sm">
       <thead>
       <tr>
-        <th class="p-2 border">{{ sortBy.value === 'documents' ? $t('documents') : $t('workflows') }}</th>
-        <th class="p-2 border">{{ sortBy.value === 'documents' ? $t('workflows') : $t('documents') }}</th>
+        <th class="p-2 border">{{ groupBy.value === 'documents' ? $t('documents') : $t('workflows') }}</th>
+        <th class="p-2 border">{{ groupBy.value === 'documents' ? $t('workflows') : $t('documents') }}</th>
         <th v-for="(evalKey, i) in evals" :key="i" class="p-2 border">
           <span class="def-label flex items-center justify-center cursor-pointer">
-            <WorkflowsTableSorter :grouped-data="groupedData" :metric="(evalKey as keyof EvaluationResultsDocumentWide)">
+            <WorkflowsTableSorter 
+              :grouped-data="tableData" 
+              :metric="(evalKey as keyof EvaluationResultsDocumentWide)" 
+              :sort="getSortValue(evalKey as keyof EvaluationResultsDocumentWide)"
+              @sorted-data="setSorted($event, evalKey as keyof EvaluationResultsDocumentWide)"
+              @unsorted-data="sortBy = null"
+            >
               {{ evalDefinitions[evalKey] ? evalDefinitions[evalKey].label : evalKey }}
             </WorkflowsTableSorter>
             <i-icon name="ink-info"/>
@@ -150,17 +171,17 @@ const groupByDocuments = () => {
       </tr>
       </thead>
       <tbody>
-      <template v-for="(key, i) in Object.keys(groupedData)" :key="i">
-        <tr v-for="(subject, j) in groupedData[key].subjects" :key="j">
-          <td v-if="j === 0" :rowspan="groupedData[key].subjects.length" class="align-top pl-2 border w-1/3">
-            <span class="font-bold">{{ groupedData[key].label }}</span>
+      <template v-for="(key, i) in Object.keys(tableData)" :key="i">
+        <tr v-for="(subject, j) in tableData[key].subjects" :key="j">
+          <td v-if="j === 0" :rowspan="tableData[key].subjects.length" class="align-top pl-2 border w-1/3">
+            <span class="font-bold">{{ tableData[key].label }}</span>
           </td>
           <td class="align-top pl-2 border">{{ subject.label }}</td>
           <td
             v-for="({ name, value }, k) in subject.evaluations"
             :key="k"
             class="text-center pt-1 border"
-            :class="(j === groupedData[key].subjects.length - 1) ? 'pb-5' : 'pb-1'"
+            :class="(j === tableData[key].subjects.length - 1) ? 'pb-5' : 'pb-1'"
           >
             <span
               class="metric inline-block cursor-pointer text-sm leading-none p-1 rounded-lg min-w-[48px]"
diff --git a/src/components/workflows/timeline/WorkflowTableSorter.vue b/src/components/workflows/timeline/WorkflowTableSorter.vue
index 7fe2b40..f67714a 100644
--- a/src/components/workflows/timeline/WorkflowTableSorter.vue
+++ b/src/components/workflows/timeline/WorkflowTableSorter.vue
@@ -2,7 +2,7 @@
 import Button from "primevue/button"
 import { Icon } from "@iconify/vue"
 import { ref, watch } from "vue"
-import type { GroupedTableData, EvaluationResultsDocumentWide } from "@/types";
+import type { GroupedTableData, EvaluationResultsDocumentWide, GroupedTableDataSubject } from "@/types";
 const props = withDefaults(
   defineProps<{
     groupedData: GroupedTableData
@@ -13,39 +13,87 @@ const props = withDefaults(
     sort: false
   }
 )
-//const emit = defineEmits() //emit the sorted data
+const emit = defineEmits<{
+  (event: 'sortedData', payload: GroupedTableData): void,
+  (event: 'unsortedData'): void
+}>()
 
 enum sortStates {
   none,
   desc,
   asc,
+  __LENGTH
 }
 const sortState = ref(sortStates.none)
 
-//watch sort -> set sortState none 
-
-//watch props -> if changes and sortState not none -> resort
+//set sortState to none if sort changes to false
+watch(() => props.sort, () => {
+  if(!props.sort) sortState.value = sortStates.none
+}) 
 
 const cycleAndSort = () => {
   cycleSortState()
   sort()
 }
+
+const cycleSortState = () => {
+  sortState.value = (sortState.value + 1) % sortStates.__LENGTH
+}
+
 const sort = () => {
-  if (sortState.value === sortStates.none) return //prob need to emit smth so that data wont be sorted -> or just emit unsorted data
-  //const sortedData = props.groupedData.sort((left, right)) hmmm need a way to sort an object
+  if (sortState.value === sortStates.none) {
+    emit('unsortedData')
+    return
+  }
+  const groupedEntriesWithSortedSubjects = Object.entries(props.groupedData).map(elem => {
+    const sorted: typeof elem[1] = { label: elem[1].label, subjects: sortSubjects(props.groupedData[elem[0]].subjects, sortState.value === sortStates.desc) }
+    return [elem[0], sorted]
+  })
+  const sortedData: GroupedTableData = Object.fromEntries(
+    groupedEntriesWithSortedSubjects
+    .sort((left, right) => {
+      const leftData = <GroupedTableData[keyof GroupedTableData]>left[1]
+      const rightData = <GroupedTableData[keyof GroupedTableData]>right[1]
+      const compareByFirstSubject = (subjectsLeft: GroupedTableDataSubject[], subjectsRight: GroupedTableDataSubject[]) => {
+        return compareSubjects(subjectsLeft[0], subjectsRight[0])
+      }
+      return sortState.value === sortStates.desc ? 
+        compareByFirstSubject(rightData.subjects, leftData.subjects) 
+      : compareByFirstSubject(leftData.subjects, rightData.subjects) 
+    })
+  )
+  emit('sortedData', sortedData)
 }
 
-const cycleSortState = () => {
-  sortState.value = (sortState.value + 1) % 3 //three sorting states
-  console.log(sortState.value)
+const sortSubjects = (subjects: GroupedTableDataSubject[], desc: boolean) => {
+  return [...subjects] //copy to avoid sorting props in place
+  .sort((left: GroupedTableDataSubject, right: GroupedTableDataSubject) => {
+    return desc ? compareSubjects(right, left) : compareSubjects(left, right)
+  })
+}
+
+const compareSubjects = (left: GroupedTableDataSubject, right: GroupedTableDataSubject) => {
+  const transformValue = (value: number | number [] | null | undefined): number => {
+    const definedValue = value ?? 0
+    return Array.isArray(definedValue) ? definedValue[0] : definedValue
+  }
+  const evaluationLeft = left.evaluations.find(elem => props.metric === elem.name)
+  const evaluationRight = right.evaluations.find(elem => props.metric === elem.name)
+  const valueLeft = transformValue(evaluationLeft?.value)
+  const valueRight = transformValue(evaluationRight?.value)
+  return valueLeft - valueRight
 }
 
 </script>
 <template>
   <Button @click="cycleAndSort()" unstyled>
-    <slot/>
-    <Icon v-if="sortState === sortStates.desc" icon="typcn:arrow-sorted-down" class="ml-2"/>
-    <Icon v-else-if="sortState === sortStates.asc" icon="typcn:arrow-sorted-up" class="ml-2"/>
-    <Icon v-else icon="typcn:arrow-unsorted"></Icon>
+    <div class="flex items-center space-x-2">
+      <slot/>
+      <span class="flex h-6 w-6 justify-center items-center">
+        <Icon v-if="sortState === sortStates.desc" icon="typcn:arrow-sorted-down"/>
+        <Icon v-else-if="sortState === sortStates.asc" icon="typcn:arrow-sorted-up"/>
+        <Icon v-else icon="typcn:arrow-unsorted"></Icon>
+      </span>
+    </div>
   </Button>
 </template>
\ No newline at end of file
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 5f7b4ff..0261ddb 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -152,13 +152,15 @@ export interface EvalDefinitions {
 export interface GroupedTableData {
   [gtWorkId: string]: {
     label: string | undefined,
-    subjects: {
-      label: string | undefined
-      evaluations: {
-        name: string
-        value: number | number[] | null
-      }[]
-    }[]
+    subjects: GroupedTableDataSubject[]
   }
 }
 
+
+export interface GroupedTableDataSubject {
+  label: string | undefined
+  evaluations: {
+    name: string
+    value: number | number[] | null
+  }[]
+}

From bdd53c5d1df430e1a69185d0f641426e5c354e48 Mon Sep 17 00:00:00 2001
From: jfrer <jasper.frerichs@sub.uni-goettingen.de>
Date: Fri, 19 Jul 2024 11:51:57 +0200
Subject: [PATCH 8/8] feat: add choice to sort without keeping the grouping

---
 src/components/workflows/WorkflowsTable.vue   |  9 ++++-
 .../timeline/WorkflowTableSorter.vue          | 39 ++++++++++++++-----
 src/locales/de.json                           |  3 +-
 src/locales/en.json                           |  3 +-
 4 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/components/workflows/WorkflowsTable.vue b/src/components/workflows/WorkflowsTable.vue
index 2b55837..56ec905 100644
--- a/src/components/workflows/WorkflowsTable.vue
+++ b/src/components/workflows/WorkflowsTable.vue
@@ -4,6 +4,7 @@ import { useI18n } from "vue-i18n"
 import { createReadableMetricValue, getEvalColor, mapGtId } from "@/helpers/utils"
 import type { EvalDefinitions, EvaluationResultsDocumentWide, EvaluationRun, GroupedTableData } from "@/types"
 import Dropdown from 'primevue/dropdown'
+import Checkbox from 'primevue/checkbox'
 import workflowsStore from "@/store/workflows-store"
 import api from "@/helpers/api"
 import filtersStore from "@/store/filters-store"
@@ -21,6 +22,8 @@ const tableData = computed<GroupedTableData>(() => {
   return (sortBy.value === null || Object.keys(sortedData.value).length === 0) ? groupedData.value : sortedData.value
 })
 
+const keepGroupsWhenSorting = ref(true)
+
 const groupingOptions = ref([{
   value: 'documents',
   label: t('documents')
@@ -138,6 +141,9 @@ const setSorted = (event: GroupedTableData, key: keyof EvaluationResultsDocument
   <template v-else>
     <div class="flex flex-col" v-if="Object.keys(tableData).length > 0">
       <div class="flex items-center mb-4 ml-auto">
+        <label for="keepGroupsCheckbox" class="mr-2">{{ $t('keep_grouping_when_sorting') }}</label>
+        <Checkbox v-model="keepGroupsWhenSorting" input-id="keepGroupsCheckbox" binary class="mr-8"></Checkbox>
+        
         <p class="mr-2">{{ $t('group_by') }}:</p>
         <Dropdown v-model="groupBy" :options="groupingOptions" optionLabel="label" placeholder="Choose something.." class="" />
       </div>
@@ -151,9 +157,10 @@ const setSorted = (event: GroupedTableData, key: keyof EvaluationResultsDocument
         <th v-for="(evalKey, i) in evals" :key="i" class="p-2 border">
           <span class="def-label flex items-center justify-center cursor-pointer">
             <WorkflowsTableSorter 
-              :grouped-data="tableData" 
+              :grouped-data="groupedData" 
               :metric="(evalKey as keyof EvaluationResultsDocumentWide)" 
               :sort="getSortValue(evalKey as keyof EvaluationResultsDocumentWide)"
+              :keep-grouping="keepGroupsWhenSorting"
               @sorted-data="setSorted($event, evalKey as keyof EvaluationResultsDocumentWide)"
               @unsorted-data="sortBy = null"
             >
diff --git a/src/components/workflows/timeline/WorkflowTableSorter.vue b/src/components/workflows/timeline/WorkflowTableSorter.vue
index f67714a..012ffb4 100644
--- a/src/components/workflows/timeline/WorkflowTableSorter.vue
+++ b/src/components/workflows/timeline/WorkflowTableSorter.vue
@@ -2,15 +2,17 @@
 import Button from "primevue/button"
 import { Icon } from "@iconify/vue"
 import { ref, watch } from "vue"
-import type { GroupedTableData, EvaluationResultsDocumentWide, GroupedTableDataSubject } from "@/types";
+import type { GroupedTableData, EvaluationResultsDocumentWide, GroupedTableDataSubject } from "@/types"
 const props = withDefaults(
   defineProps<{
     groupedData: GroupedTableData
     metric: keyof EvaluationResultsDocumentWide
     sort?: boolean
+    keepGrouping?: boolean
   }>(), 
   {
-    sort: false
+    sort: false,
+    keepGrouping: true
   }
 )
 const emit = defineEmits<{
@@ -18,6 +20,8 @@ const emit = defineEmits<{
   (event: 'unsortedData'): void
 }>()
 
+type GroupedEntry = [string, GroupedTableData[keyof GroupedTableData]]
+
 enum sortStates {
   none,
   desc,
@@ -26,11 +30,15 @@ enum sortStates {
 }
 const sortState = ref(sortStates.none)
 
-//set sortState to none if sort changes to false
+//set sortState to none if sort changes to false to enable sorting by only a single column at a time 
 watch(() => props.sort, () => {
   if(!props.sort) sortState.value = sortStates.none
 }) 
 
+watch(() => props.keepGrouping, () => {
+  if(sortState.value !== sortStates.none) sort()
+})
+
 const cycleAndSort = () => {
   cycleSortState()
   sort()
@@ -45,18 +53,22 @@ const sort = () => {
     emit('unsortedData')
     return
   }
-  const groupedEntriesWithSortedSubjects = Object.entries(props.groupedData).map(elem => {
-    const sorted: typeof elem[1] = { label: elem[1].label, subjects: sortSubjects(props.groupedData[elem[0]].subjects, sortState.value === sortStates.desc) }
+  const groupedEntries = Object.entries(props.groupedData)
+  const entries = props.keepGrouping ? groupedEntries : transformToSingleSubjectGrouping(groupedEntries)
+  const entriesWithSortedSubjects = entries.map(elem => {
+    const sorted: typeof elem[1] = { label: elem[1].label, subjects: sortSubjects(elem[1].subjects, sortState.value === sortStates.desc) }
     return [elem[0], sorted]
   })
   const sortedData: GroupedTableData = Object.fromEntries(
-    groupedEntriesWithSortedSubjects
+    entriesWithSortedSubjects
     .sort((left, right) => {
-      const leftData = <GroupedTableData[keyof GroupedTableData]>left[1]
-      const rightData = <GroupedTableData[keyof GroupedTableData]>right[1]
+      const leftData = left[1] as GroupedTableData[keyof GroupedTableData]
+      const rightData = right[1] as GroupedTableData[keyof GroupedTableData]
+
       const compareByFirstSubject = (subjectsLeft: GroupedTableDataSubject[], subjectsRight: GroupedTableDataSubject[]) => {
         return compareSubjects(subjectsLeft[0], subjectsRight[0])
       }
+
       return sortState.value === sortStates.desc ? 
         compareByFirstSubject(rightData.subjects, leftData.subjects) 
       : compareByFirstSubject(leftData.subjects, rightData.subjects) 
@@ -66,7 +78,7 @@ const sort = () => {
 }
 
 const sortSubjects = (subjects: GroupedTableDataSubject[], desc: boolean) => {
-  return [...subjects] //copy to avoid sorting props in place
+  return [...subjects] //copy to avoid sorting in place
   .sort((left: GroupedTableDataSubject, right: GroupedTableDataSubject) => {
     return desc ? compareSubjects(right, left) : compareSubjects(left, right)
   })
@@ -84,6 +96,15 @@ const compareSubjects = (left: GroupedTableDataSubject, right: GroupedTableDataS
   return valueLeft - valueRight
 }
 
+const transformToSingleSubjectGrouping = (groupedEntries: GroupedEntry[]): GroupedEntry[] => {
+  return groupedEntries.reduce((acc, curr) => {
+    curr[1].subjects.forEach((subject, index) => {
+      acc.push([`${curr[0]}_${index}`, { label: curr[1].label, subjects: [subject] }])
+    })
+    return acc
+  }, [] as GroupedEntry[])
+}
+
 </script>
 <template>
   <Button @click="cycleAndSort()" unstyled>
diff --git a/src/locales/de.json b/src/locales/de.json
index db55ba1..c623530 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -86,5 +86,6 @@
   "filter_by_processor": "Nach Prozessor filtern",
   "select_a_date_range": "Zeitraum auswählen",
   "select_a_workflow": "Workflow auswählen",
-  "select_a_processor": "Prozessor auswählen"
+  "select_a_processor": "Prozessor auswählen",
+  "keep_grouping_when_sorting": "Gruppierung beim Sortieren beibehalten"
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 2fc3f36..712ccc1 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -80,5 +80,6 @@
   "filter_by_processor": "Filter by processor",
   "select_a_date_range": "Select a date range",
   "select_a_workflow": "Select a workflow",
-  "select_a_processor": "Select a processor"
+  "select_a_processor": "Select a processor",
+  "keep_grouping_when_sorting": "Keep grouping when sorting"
 }