Implement outlier sorting in project Largo UI

src/Http/Controllers/Api/Projects/SortAnnotationsByOutliersController.php

@@ -19,7 +19,7 @@ class SortAnnotationsByOutliersController extends Controller
      * @apiParam {Number} pid The project ID
      * @apiParam {Number} lid The Label ID
      * @apiPermission projectMember
-     * @apiDescription Returns a list of image/video annotation IDs with the outliers first.
+     * @apiDescription Returns a list of image/video annotation IDs with the outliers first. Image annotation IDs are prefixed with `i` (e.g. `i123`) and video annotation IDs are prefixed with `v` (e.g. `v456`).
      *
      * @param  int  $pid Project ID
      * @param int $lid Label ID

src/public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/assets/scripts/main.js": "/assets/scripts/main.js?id=3883a747cf79c488def03032327dd169",
+    "/assets/scripts/main.js": "/assets/scripts/main.js?id=16cb2b713da212fb07792c1a8a43079b",
     "/assets/styles/main.css": "/assets/styles/main.css?id=4bcd521568b8ea929efd8e3f72f7d338"
 }

src/resources/assets/js/api/projects.js

@@ -23,4 +23,8 @@ export default Vue.resource('api/v1/projects{/id}/largo', {}, {
         method: 'GET',
         url: 'api/v1/projects{/id}/video-annotations/filter/label{/label_id}',
     },
+    sortAnnotationsByOutlier: {
+        method: 'GET',
+        url: 'api/v1/projects{/id}/annotations/sort/outliers{/label_id}',
+    },
 });

src/resources/assets/js/largoContainer.vue

@@ -32,7 +32,14 @@ export default {
             return VolumesApi.save({id: this.volumeId}, payload);
         },
         querySortByOutlier(labelId) {
-            return VolumesApi.sortAnnotationsByOutlier({id: this.volumeId, label_id: labelId});
+            return VolumesApi.sortAnnotationsByOutlier({id: this.volumeId, label_id: labelId})
+                .then(function (response) {
+                    // The sorting expects image annotation IDs prefixed with 'i' so it
+                    // can work with mixed image and video annotations.
+                    response.body = response.body.map(id => 'i' + id);
+
+                    return response;
+                });
         },
     },
     created() {

src/resources/assets/js/mixins/largoContainer.vue

@@ -65,11 +65,17 @@ export default {
 
             // This will always be missing for the default sorting.
             const sequence = this.sortingSequenceCache?.[this.selectedLabel?.id]?.[this.sortingKey];
-            // TODO Handle mix of image and video annotations.
+
             if (sequence) {
                 const map = {};
                 sequence.forEach((id, idx) => map[id] = idx);
-                annotations.sort((a, b) => map[a.id] - map[b.id]);
+
+                // Image annotation IDs are prefixed with 'i', video annotations with
+                // 'v' to avoid duplicate IDs whe sorting both types of annotations.
+                annotations.sort((a, b) =>
+                    map[a.type === VIDEO_ANNOTATION ? ('v' + a.id) : ('i' + a.id)] -
+                    map[b.type === VIDEO_ANNOTATION ? ('v' + b.id) : ('i' + b.id)]
+                );
             }
 
             if (this.sortingDirection === SORT_DIRECTION.ASCENDING) {

src/resources/assets/js/projectLargoContainer.vue

@@ -23,6 +23,9 @@ export default {
         performSave(payload) {
             return ProjectsApi.save({id: this.projectId}, payload);
         },
+        querySortByOutlier(labelId) {
+            return ProjectsApi.sortAnnotationsByOutlier({id: this.projectId, label_id: labelId});
+        },
     },
     created() {
         this.projectId = biigle.$require('largo.projectId');