Add Database Migration for sorting images:

.npmrc

@@ -0,0 +1 @@
+@biigle:registry=https://npm.pkg.github.com

app/Http/Controllers/Api/Volumes/SimilarityIndicesController.php

@@ -4,6 +4,7 @@
 
 use Biigle\Http\Controllers\Api\Controller;
 use Biigle\Volume;
+use Biigle\MediaType;
 
 class SimilarityIndicesController extends Controller
 {
@@ -30,14 +31,11 @@ class SimilarityIndicesController extends Controller
     public function index($id)
     {
         // should not be find or fail
-        $volume = Volume::findOrFail($id);
-        if ($volume->isImageVolume()) {
-            $this->authorize('access', $volume);
+        $volume = Volume::where('media_type_id', MediaType::imageId())->findOrFail($id);
+        $this->authorize('access', $volume);
+
+        return $volume->files()->pluck('similarityIndex', 'id');
 
-            return $volume->files()->pluck('similarityIndex', 'id');
-        }
-        // check right return statement
-        return;
 
     }
 }

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/assets/scripts/main.js": "/assets/scripts/main.js?id=a711e5ebbcf73699cbac",
+    "/assets/scripts/main.js": "/assets/scripts/main.js?id=4026bac24d2927712fa2",
     "/assets/styles/main.css": "/assets/styles/main.css?id=5e394695bd62ab9179f6"
 }

resources/assets/js/volumes/stores/sorters.js

@@ -1,4 +1,5 @@
 import SortComponent from '../components/sortComponent';
+import VolumesApi from '../api/volumes';
 
 let filenameSorter = {
     id: 'filename',
@@ -84,7 +85,6 @@ let randomSorter = {
             },
             getSequence() {
                 let ids = this.shuffle(this.fileIds.slice());
-
                 return new Vue.Promise.resolve(ids);
             },
             handleClick() {
@@ -106,22 +106,38 @@ let similaritySorter = {
         mixins: [SortComponent],
         data() {
             return {
-                fileIds: [],
+                indices: [],
                 title: 'Sort images by Similarity',
                 text: 'Similarity',
                 id: 'similarity',
+                cache: [],
             };
         },
         methods: {
             getSequence() {
-                // let ids = ;
+                return new Vue.Promise.resolve(this.indices);
 
-                // return new Vue.Promise.resolve(ids);
+            },
+            getSimilarityIndices() {
+                this.loadingSequence = true;
+                return VolumesApi.querySimilarityIndices({id: this.volumeId})
+                    .then(this.parseResponse)
+                    .then((sequence) => {
+                        this.cache = sequence;
+                        return sequence;
+                    })
+                    .finally(() => this.loadingSequence = false);
+            },
+            parseResponse(response) {
+                return response.data;
+            },
+            compare(a, b) {
+                return a - b;
             },
 
         },
         created() {
-            this.fileIds = biigle.$require('volumes.fileIds');
+            this.indices = this.getSimilarityIndices();
         },
     },
 

tests/php/Http/Controllers/Api/Volumes/Filters/SimilarityIndicesControllerTest.php

@@ -63,7 +63,7 @@ public function testVideoMediaType()
         // what should the api return if media type ius video
         $this->beGuest();
         $this->get("/api/v1/volumes/{$id}/similarity-indices/")
-            ->assertStatus(200);
+            ->assertStatus(404);
 
     }
 }