Add WorkerRun grouping for transcriptions in modal

src/components/Element/Transcription/Modal.vue

@@ -22,16 +22,51 @@
         </figure>
       </div>
       <div class="column" :class="{ 'is-full': !isPortrait }">
-        <div v-for="(transcriptions, worker_version_id) in groupedTranscriptions" :key="worker_version_id">
-          <strong>
-            <template v-if="worker_version_id === MANUAL_WORKER_VERSION">
-              Existing manual transcription{{ transcriptions.length > 1 ? 's' : '' }}
-            </template>
-            <template v-else>
-              Worker transcription{{ transcriptions.length > 1 ? 's' : '' }} from
-              <WorkerVersionDetails v-if="worker_version_id" :worker-version-id="worker_version_id" />
-            </template>
-          </strong>
+        <div class="pb-4" v-if="manualTranscriptions.length">
+          <strong class="mb-2">Manual</strong>
+          <table class="table is-hoverable is-fullwidth">
+            <tbody>
+              <EditableTranscription
+                v-for="(transcription, index) in manualTranscriptions"
+                :index="index"
+                :element="element"
+                :transcription="transcription"
+                :key="transcription.id"
+              />
+            </tbody>
+          </table>
+        </div>
+
+        <div
+          class="pb-4"
+          v-for="[workerRunId, transcriptions] in workerRunTranscriptions"
+          :key="workerRunId"
+        >
+          <WorkerRunSummary
+            class="mb-2"
+            :worker-run-details="workerRunSummaries[workerRunId]"
+          />
+          <table class="table is-hoverable is-fullwidth">
+            <tbody>
+              <EditableTranscription
+                v-for="(transcription, index) in transcriptions"
+                :index="index"
+                :element="element"
+                :transcription="transcription"
+                :key="transcription.id"
+              />
+            </tbody>
+          </table>
+        </div>
+
+        <div
+          class="pb-4"
+          v-for="[versionId, transcriptions] in workerVersionTranscriptions"
+          :key="versionId"
+        >
+          <div class="mb-2">
+            <WorkerVersionDetails :worker-version-id="versionId" has-outside-title />
+          </div>
           <table class="table is-hoverable is-fullwidth">
             <tbody>
               <EditableTranscription
@@ -107,7 +142,7 @@
 </template>
 
 <script>
-import { groupBy } from 'lodash'
+import { groupBy, orderBy } from 'lodash'
 import { mapState, mapActions, mapMutations } from 'vuex'
 import { MANUAL_WORKER_VERSION, TEXT_ORIENTATIONS } from '@/config'
 import { errorParser, getSize, boundingBox, mirrorX, rotateAround, orientationStyle } from '@/helpers'
@@ -116,6 +151,7 @@ import ElementImage from '@/components/Image/ElementImage.vue'
 import Modal from '@/components/Modal.vue'
 import EditableTranscription from './EditableTranscription'
 import WorkerVersionDetails from '@/components/Process/Workers/Versions/Details.vue'
+import WorkerRunSummary from '@/components/Process/Workers/WorkerRuns/WorkerRunSummary.vue'
 
 export default {
   mixins: [
@@ -126,7 +162,8 @@ export default {
     ElementImage,
     Modal,
     EditableTranscription,
-    WorkerVersionDetails
+    WorkerVersionDetails,
+    WorkerRunSummary
   },
   emits: ['update:modal'],
   props: {
@@ -154,6 +191,7 @@ export default {
   },
   computed: {
     ...mapState('elements', { eltsTranscriptions: 'transcriptions' }),
+    ...mapState('process', ['workerVersions']),
     orientation: {
       get () {
         return this.$store.state.annotation.textOrientation
@@ -162,11 +200,59 @@ export default {
         this.setTextOrientation(newValue)
       }
     },
-    groupedTranscriptions () {
-      if (!this.element.id || !this.eltsTranscriptions) return []
-      const transcriptions = this.eltsTranscriptions[this.element.id]
-      if (!transcriptions) return []
-      return groupBy(Object.values(transcriptions), transcription => transcription.worker_version_id || MANUAL_WORKER_VERSION)
+    /**
+     * Transcriptions sorted by descending confidence and ascending text.
+     * This sorting is computed once and then re-used by other computed properties
+     * to perform the grouping.
+     */
+    sortedTranscriptions () {
+      return orderBy(
+        this.eltsTranscriptions[this.element.id],
+        ['confidence', 'text'],
+        ['desc', 'asc']
+      )
+    },
+    manualTranscriptions () {
+      return this.sortedTranscriptions.filter(transcription => !transcription.worker_run && !transcription.worker_version_id)
+    },
+    workerRunTranscriptions () {
+      const grouped = groupBy(
+        this.sortedTranscriptions.filter(transcription => transcription.worker_run),
+        'worker_run.id'
+      )
+      return orderBy(Object.entries(grouped), ([id]) => this.workerRunSummaries[id])
+    },
+    /**
+     * Worker run summary serializers mapped to their IDs.
+     * @returns {{ [id: string]: { id: string, summary: string } }}
+     */
+    workerRunSummaries () {
+      return Object.fromEntries(
+        this.sortedTranscriptions
+          .filter(transcription => transcription?.worker_run)
+          .map(transcription => [transcription.worker_run.id, transcription.worker_run])
+      )
+    },
+    /**
+     * Transcriptions with worker versions and no worker runs, grouped by their worker version ID
+     * and sorted by worker name, then revision creation date, then worker version ID.
+     * If the worker version is not yet loaded, this only sorts by worker version ID.
+     * @returns {[string, object[]][]}
+     */
+    workerVersionTranscriptions () {
+      const grouped = groupBy(
+        this.sortedTranscriptions.filter(transcription => transcription.worker_version_id && !transcription.worker_run),
+        'worker_version_id'
+      )
+      return orderBy(Object.entries(grouped), [
+        ([id]) => this.workerVersions[id]?.worker?.name,
+        ([id]) => this.workerVersions[id]?.revision?.created,
+        /*
+         * Fallback to sorting by worker version ID. When the worker version is not yet loaded,
+         * the two functions above will return `null`, and this will be the only sorting criterion.
+         */
+        '0'
+      ])
     },
     elementZone () {
       const zone = this.element.zone