diff --git a/src/Http/Controllers/Api/Projects/SortAnnotationsByOutliersController.php b/src/Http/Controllers/Api/Projects/SortAnnotationsByOutliersController.php
index f748e665..a15c7f33 100644
--- a/src/Http/Controllers/Api/Projects/SortAnnotationsByOutliersController.php
+++ b/src/Http/Controllers/Api/Projects/SortAnnotationsByOutliersController.php
@@ -4,8 +4,6 @@
 
 use DB;
 use Biigle\Http\Controllers\Api\Controller;
-use Biigle\Modules\Largo\ImageAnnotationLabelFeatureVector;
-use Biigle\Modules\Largo\VideoAnnotationLabelFeatureVector;
 use Biigle\Project;
 
 class SortAnnotationsByOutliersController extends Controller
@@ -30,7 +28,7 @@ public function index($pid, $lid)
         $project = Project::findOrFail($pid);
         $this->authorize('access', $project);
 
-        // This was too complicated with the query builder. Since there is no rist of SQL
+        // This was too complicated with the query builder. Since there is no risk of SQL
         // injection here, we just use raw SQL.
         $sql = <<<SQL
         SELECT "id" FROM (
@@ -67,7 +65,7 @@ public function index($pid, $lid)
 
         $ids = DB::select($sql, ['pid' => $pid, 'lid' => $lid]);
 
-        // Filtering unique IDs is not required here because the UNIQUE in the query
+        // Filtering unique IDs is not required here because the UNION in the query
         // takes care of that.
         return array_map(fn ($v) => $v->id, $ids);
     }
diff --git a/src/Http/Controllers/Api/Projects/SortAnnotationsBySimilarityController.php b/src/Http/Controllers/Api/Projects/SortAnnotationsBySimilarityController.php
new file mode 100644
index 00000000..d4763f62
--- /dev/null
+++ b/src/Http/Controllers/Api/Projects/SortAnnotationsBySimilarityController.php
@@ -0,0 +1,67 @@
+<?php
+
+namespace Biigle\Modules\Largo\Http\Controllers\Api\Projects;
+
+use Biigle\Http\Controllers\Api\Controller;
+use Biigle\Modules\Largo\Http\Requests\IndexProjectAnnotationsSimilarity;
+use DB;
+
+class SortAnnotationsBySimilarityController extends Controller
+{
+    /**
+     * Sort annotations with specific label by similarity.
+     *
+     * @api {get} projects/:id/annotations/sort/similarity Sort annotations with the same label by similarity
+     * @apiGroup Projects
+     * @apiName ShowProjectsAnnotationsSortSimilarity
+     * @apiParam {Number} id The project ID
+     * @apiParam (Required arguments) {Number} label_id The Label ID
+     * @apiParam (Required arguments) {Number} image_annotation_id The reference image annotation to sort by similarity. This is not required if `video_annotation_id` is provided.
+     * @apiParam (Required arguments) {Number} video_annotation_id The reference video annotation to sort by similarity. This is not required if `image_annotation_id` is provided.
+     * @apiPermission projectMember
+     * @apiDescription Returns a list of image/video annotation IDs with the most similar first (without the reference annotation ID). Image annotation IDs are prefixed with `i` (e.g. `i123`) and video annotation IDs are prefixed with `v` (e.g. `v456`).
+     *
+     * @param  IndexProjectAnnotationsSimilarity  $request
+     */
+    public function index(IndexProjectAnnotationsSimilarity $request)
+    {
+        $r = $request->reference;
+
+        // This was too complicated with the query builder. Since there is no risk of SQL
+        // injection here, we just use raw SQL.
+        $sql = <<<SQL
+        SELECT "id" FROM (
+            (
+              SELECT CONCAT('i', "annotation_id") AS id, "vector"
+              FROM "image_annotation_label_feature_vectors"
+              WHERE "label_id" = :lid AND "annotation_id" != :iid AND "volume_id" IN (
+                 SELECT "volume_id" FROM "project_volume" WHERE "project_id" = :pid
+              )
+           )
+           UNION
+           (
+              SELECT CONCAT('v', "annotation_id") AS id, "vector"
+              FROM "video_annotation_label_feature_vectors"
+              WHERE "label_id" = :lid AND "annotation_id" != :vid AND "volume_id" IN (
+                 SELECT "volume_id" FROM "project_volume" WHERE "project_id" = :pid
+              )
+           )
+        ) AS "temp"
+        ORDER BY "temp"."vector" <=> :vector, id DESC
+        SQL;
+
+        $ids = DB::select($sql, [
+            'pid' => $request->project->id,
+            'lid' => $r->label_id,
+            'vector' => $r->vector,
+            // We need only one at a time but since the ID 0 never exists, we just take
+            // it as the other ID.
+            'iid' => $request->input('image_annotation_id', 0),
+            'vid' => $request->input('video_annotation_id', 0),
+        ]);
+
+        // Filtering unique IDs is not required here because the UNION in the query
+        // takes care of that.
+        return array_map(fn ($v) => $v->id, $ids);
+    }
+}
diff --git a/src/Http/Controllers/Api/Volumes/SortAnnotationsBySimilarityController.php b/src/Http/Controllers/Api/Volumes/SortAnnotationsBySimilarityController.php
new file mode 100644
index 00000000..1264cead
--- /dev/null
+++ b/src/Http/Controllers/Api/Volumes/SortAnnotationsBySimilarityController.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace Biigle\Modules\Largo\Http\Controllers\Api\Volumes;
+
+use Biigle\Http\Controllers\Api\Controller;
+use Biigle\Modules\Largo\ImageAnnotationLabelFeatureVector;
+use Biigle\Modules\Largo\VideoAnnotationLabelFeatureVector;
+use Biigle\Modules\Largo\Http\Requests\IndexVolumeAnnotationsSimilarity;
+
+class SortAnnotationsBySimilarityController extends Controller
+{
+    /**
+     * Sort annotations with specific label by similarity.
+     *
+     * @api {get} volumes/:id/annotations/sort/similarity Sort annotations with the same label by similarity
+     * @apiGroup Volumes
+     * @apiName ShowVolumesAnnotationsSortSimilarity
+     * @apiParam {Number} id The volume ID
+     * @apiParam (Required arguments) {Number} label_id The Label ID
+     * @apiParam (Required arguments) {Number} annotation_id The reference annotation to sort by similarity
+     * @apiPermission projectMember
+     * @apiDescription Returns a list of image/video annotation IDs with the most similar first (without the reference annotation ID).
+     *
+     * @param  IndexVolumeAnnotationsSimilarity  $request
+     */
+    public function index(IndexVolumeAnnotationsSimilarity $request)
+    {
+        $r = $request->reference;
+
+        if ($request->volume->isVideoVolume()) {
+            $query = VideoAnnotationLabelFeatureVector::where('volume_id', $r->volume_id)
+                ->where('label_id', $r->label_id)
+                ->where('id', '!=', $r->id)
+                ->orderByRaw('vector <=> ?, annotation_id DESC', [$r->vector]);
+        } else {
+            $query = ImageAnnotationLabelFeatureVector::where('volume_id', $r->volume_id)
+                ->where('label_id', $r->label_id)
+                ->where('id', '!=', $r->id)
+                ->orderByRaw('vector <=> ?, annotation_id DESC', [$r->vector]);
+        }
+
+        return $query->pluck('annotation_id')
+            // Use distinct/unique *after* fetchig from the DB because otherwise the
+            // vector would need to be selected, too (order by expressions must appear in
+            // the select list). But we don't want to get the huge vectors.
+            ->unique()
+            ->values();
+    }
+}
diff --git a/src/Http/Requests/IndexProjectAnnotationsSimilarity.php b/src/Http/Requests/IndexProjectAnnotationsSimilarity.php
new file mode 100644
index 00000000..2ddf675e
--- /dev/null
+++ b/src/Http/Requests/IndexProjectAnnotationsSimilarity.php
@@ -0,0 +1,87 @@
+<?php
+
+namespace Biigle\Modules\Largo\Http\Requests;
+
+use Biigle\Annotation;
+use Biigle\ImageAnnotation;
+use Biigle\Modules\Largo\ImageAnnotationLabelFeatureVector;
+use Biigle\Modules\Largo\VideoAnnotationLabelFeatureVector;
+use Biigle\VideoAnnotation;
+use Biigle\Project;
+use Illuminate\Foundation\Http\FormRequest;
+
+class IndexProjectAnnotationsSimilarity extends FormRequest
+{
+    /**
+     * The project of which to index the annotations.
+     */
+    public Project $project;
+
+    /**
+     * The reference annotation for sorting.
+     */
+    public $reference;
+
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        $this->project = Project::findOrFail($this->route('id'));
+
+        return $this->user()->can('access', $this->project);
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'label_id' => 'required|bail|integer',
+            'image_annotation_id' => 'required_without:video_annotation_id|bail|integer',
+            'video_annotation_id' => 'required_without:image_annotation_id|bail|integer',
+        ];
+    }
+
+    /**
+     * Configure the validator instance.
+     *
+     * @param  \Illuminate\Validation\Validator  $validator
+     * @return void
+     */
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($validator->errors()->isNotEmpty()) {
+                return;
+            }
+
+            $ids = $this->project->volumes()->pluck('id');
+            if ($this->input('image_annotation_id')) {
+                $this->reference = ImageAnnotationLabelFeatureVector::whereIn('volume_id', $ids)
+                    ->where('label_id', $this->input('label_id'))
+                    ->where('annotation_id', $this->input('image_annotation_id'))
+                    ->first();
+
+                if (is_null($this->reference)) {
+                    $validator->errors()->add('image_annotation_id', 'The annotation does not exist in the project.');
+                }
+            } else {
+                $this->reference = VideoAnnotationLabelFeatureVector::whereIn('volume_id', $ids)
+                    ->where('label_id', $this->input('label_id'))
+                    ->where('annotation_id', $this->input('video_annotation_id'))
+                    ->first();
+
+                if (is_null($this->reference)) {
+                    $validator->errors()->add('video_annotation_id', 'The annotation does not exist in the project.');
+                }
+            }
+
+        });
+    }
+}
diff --git a/src/Http/Requests/IndexVolumeAnnotationsSimilarity.php b/src/Http/Requests/IndexVolumeAnnotationsSimilarity.php
new file mode 100644
index 00000000..0792a8bd
--- /dev/null
+++ b/src/Http/Requests/IndexVolumeAnnotationsSimilarity.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace Biigle\Modules\Largo\Http\Requests;
+
+use Biigle\Annotation;
+use Biigle\ImageAnnotation;
+use Biigle\Modules\Largo\ImageAnnotationLabelFeatureVector;
+use Biigle\Modules\Largo\VideoAnnotationLabelFeatureVector;
+use Biigle\VideoAnnotation;
+use Biigle\Volume;
+use Illuminate\Foundation\Http\FormRequest;
+
+class IndexVolumeAnnotationsSimilarity extends FormRequest
+{
+    /**
+     * The volume of which to index the annotations.
+     */
+    public Volume $volume;
+
+    /**
+     * The reference annotation for sorting.
+     */
+    public $reference;
+
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        $this->volume = Volume::findOrFail($this->route('id'));
+
+        return $this->user()->can('access', $this->volume);
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'label_id' => 'required|bail|integer',
+            'annotation_id' => 'required|bail|integer',
+        ];
+    }
+
+    /**
+     * Configure the validator instance.
+     *
+     * @param  \Illuminate\Validation\Validator  $validator
+     * @return void
+     */
+    public function withValidator($validator)
+    {
+        $validator->after(function ($validator) {
+            if ($this->volume->isImageVolume()) {
+                $this->reference = ImageAnnotationLabelFeatureVector::where('volume_id', $this->volume->id)
+                    ->where('label_id', $this->input('label_id'))
+                    ->where('annotation_id', $this->input('annotation_id'))
+                    ->first();
+            } else {
+                $this->reference = VideoAnnotationLabelFeatureVector::where('volume_id', $this->volume->id)
+                    ->where('label_id', $this->input('label_id'))
+                    ->where('annotation_id', $this->input('annotation_id'))
+                    ->first();
+            }
+
+            if (is_null($this->reference)) {
+                $validator->errors()->add('annotation_id', 'The annotation does not exist in the volume.');
+            }
+        });
+    }
+}
diff --git a/src/Http/routes.php b/src/Http/routes.php
index ad39aa3d..4edf1ebe 100644
--- a/src/Http/routes.php
+++ b/src/Http/routes.php
@@ -37,6 +37,10 @@
         'uses' => 'Projects\SortAnnotationsByOutliersController@index',
     ]);
 
+    $router->get('projects/{id}/annotations/sort/similarity', [
+        'uses' => 'Projects\SortAnnotationsBySimilarityController@index',
+    ]);
+
     $router->get('projects/{id}/image-annotations/filter/label/{id2}', [
         'uses' => 'Projects\FilterImageAnnotationsByLabelController@index',
     ]);
@@ -53,6 +57,10 @@
         'uses' => 'Volumes\SortAnnotationsByOutliersController@index',
     ]);
 
+    $router->get('volumes/{id}/annotations/sort/similarity', [
+        'uses' => 'Volumes\SortAnnotationsBySimilarityController@index',
+    ]);
+
     $router->get('volumes/{id}/image-annotations/examples/{id2}', [
         'uses' => 'Volumes\ImageAnnotationExamplesController@index',
     ]);
diff --git a/src/public/assets/scripts/main.js b/src/public/assets/scripts/main.js
index 7b2c2e29..71fd61a2 100644
--- a/src/public/assets/scripts/main.js
+++ b/src/public/assets/scripts/main.js
@@ -1 +1 @@
-(()=>{"use strict";var t,e={235:()=>{var t="imageAnnotation",e="videoAnnotation";function n(t,e,n,i,s,o,a,r){var l,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),i&&(u.functional=!0),o&&(u._scopeId="data-v-"+o),a?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=l):s&&(l=r?function(){s.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:s),l)if(u.functional){u._injectStyles=l;var d=u.render;u.render=function(t,e){return l.call(e),d(t,e)}}else{var c=u.beforeCreate;u.beforeCreate=c?[].concat(c,l):[l]}return{exports:t,options:u}}const i=n({computed:{id:function(){return this.image.id},uuid:function(){return this.image.uuid},type:function(){return this.image.type},patchPrefix:function(){return this.uuid[0]+this.uuid[1]+"/"+this.uuid[2]+this.uuid[3]+"/"+this.uuid},urlTemplate:function(){return biigle.$require("largo.patchUrlTemplate")}},methods:{getThumbnailUrl:function(){return this.type===e?this.urlTemplate.replace(":prefix",this.patchPrefix).replace(":id","v-".concat(this.id)):this.urlTemplate.replace(":prefix",this.patchPrefix).replace(":id",this.id)}},created:function(){this.type===t?this.showAnnotationRoute=biigle.$require("largo.showImageAnnotationRoute"):this.showAnnotationRoute=biigle.$require("largo.showVideoAnnotationRoute")}},undefined,undefined,!1,null,null,null).exports;const s=n({mixins:[i],props:{_id:{type:String,required:!0},_uuid:{type:String,required:!0},label:{type:Object,required:!0},emptySrc:{type:String,required:!0},_urlTemplate:{type:String,required:!0}},data:function(){return{url:""}},computed:{title:function(){return"Example annotation for label "+this.label.name},src:function(){return this.url||this.emptySrc},image:function(){return{id:this._id,uuid:this._uuid,type:t}},urlTemplate:function(){return this._urlTemplate}},methods:{showEmptyImage:function(){this.url=""}},created:function(){this.url=this.getThumbnailUrl()}},undefined,undefined,!1,null,null,null).exports,o=Vue.resource("api/v1/volumes{/id}/largo",{},{queryImageAnnotations:{method:"GET",url:"api/v1/volumes{/id}/image-annotations/filter/label{/label_id}"},queryVideoAnnotations:{method:"GET",url:"api/v1/volumes{/id}/video-annotations/filter/label{/label_id}"},queryExampleAnnotations:{method:"GET",url:"api/v1/volumes{/id}/image-annotations/examples{/label_id}"},sortAnnotationsByOutlier:{method:"GET",url:"api/v1/volumes{/id}/annotations/sort/outliers{/label_id}"}});var a=biigle.$require("echo"),r=biigle.$require("events"),l=biigle.$require("messages").handleErrorResponse,u=biigle.$require("volumes.components.imageGrid"),d=biigle.$require("volumes.components.imageGridImage"),c=biigle.$require("annotations.components.labelsTabPlugins"),h=biigle.$require("labelTrees.components.labelTrees"),g=biigle.$require("core.mixins.loader"),m=biigle.$require("messages"),f=biigle.$require("core.components.powerToggle"),p=biigle.$require("core.models.Settings"),b=biigle.$require("annotations.components.settingsTabPlugins"),v=biigle.$require("core.components.sidebar"),y=biigle.$require("core.components.sidebarTab");const w=n({mixins:[g],components:{annotationPatch:s},props:{label:{default:null},volumeId:{type:Number,required:!0},count:{type:Number,default:3}},data:function(){return{exampleLabel:null,exampleAnnotations:[],cache:{},shown:!0}},computed:{isShown:function(){return this.shown&&null!==this.label},hasExamples:function(){return this.exampleLabel&&this.exampleAnnotations&&Object.keys(this.exampleAnnotations).length>0}},methods:{parseResponse:function(t){return t.data},setExampleAnnotations:function(t){(!t[0].hasOwnProperty("annotations")||Object.keys(t[0].annotations).length<this.count)&&delete this.cache[t[1]],t[0].hasOwnProperty("label")&&t[0].label.id===t[1]||delete this.cache[t[1]],this.label&&this.label.id===t[1]&&(this.exampleAnnotations=t[0].annotations,this.exampleLabel=t[0].label)},updateShown:function(t){this.shown=t},updateExampleAnnotations:function(){this.exampleAnnotations=[],this.isShown&&(this.startLoading(),this.cache.hasOwnProperty(this.label.id)||(this.cache[this.label.id]=o.queryExampleAnnotations({id:this.volumeId,label_id:this.label.id,take:this.count}).then(this.parseResponse)),Vue.Promise.all([this.cache[this.label.id],this.label.id]).then(this.setExampleAnnotations).finally(this.finishLoading))}},watch:{label:function(){this.updateExampleAnnotations()},shown:function(){this.updateExampleAnnotations()}},created:function(){r.$on("settings.exampleAnnotations",this.updateShown)}},undefined,undefined,!1,null,null,null).exports;c&&(c.exampleAnnotations=w);const A=n({components:{powerButton:f},props:{settings:{type:Object,required:!0}},data:function(){return{isShown:!0}},methods:{hide:function(){this.isShown=!1,this.settings.set("exampleAnnotations",!1)},show:function(){this.isShown=!0,this.settings.delete("exampleAnnotations")}},watch:{isShown:function(t){r.$emit("settings.exampleAnnotations",t)}},created:function(){this.settings.has("exampleAnnotations")&&(this.isShown=this.settings.get("exampleAnnotations"))}},undefined,undefined,!1,null,null,null).exports;b&&(b.exampleAnnotations=A),biigle.$declare("largo.mixins.annotationPatch",i);var S=n({mixins:[d,i],data:function(){return{showAnnotationRoute:null}},computed:{showAnnotationLink:function(){return this.showAnnotationRoute?this.showAnnotationRoute+this.image.id:""}},created:function(){this.type===t?this.showAnnotationRoute=biigle.$require("annotationCatalog.showImageAnnotationRoute"):this.showAnnotationRoute=biigle.$require("annotationCatalog.showVideoAnnotationRoute")}},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("figure",{staticClass:"image-grid__image image-grid__image--catalog",class:t.classObject},[t.showAnnotationLink?n("a",{attrs:{href:t.showAnnotationLink,target:"_blank",title:"Show the annotation in the annotation tool"}},[n("img",{attrs:{src:t.srcUrl},on:{error:t.showEmptyImage}})]):n("img",{attrs:{src:t.srcUrl},on:{error:t.showEmptyImage}})])}),[],!1,null,null,null);const _=n({mixins:[u],components:{imageGridImage:S.exports}},undefined,undefined,!1,null,null,null).exports,C=Vue.resource("api/v1/labels{/id}",{},{queryImageAnnotations:{method:"GET",url:"api/v1/labels{/id}/image-annotations"},queryVideoAnnotations:{method:"GET",url:"api/v1/labels{/id}/video-annotations"}});var I=n({mixins:[d,i],data:function(){return{showAnnotationRoute:null,overlayIsLoaded:!1,overlayHasError:!1}},inject:["outlines"],computed:{showAnnotationLink:function(){return this.showAnnotationRoute?this.showAnnotationRoute+this.image.id:""},selected:function(){return this.image.dismissed},title:function(){return this.selected?"Undo dismissing this annotation":"Dismiss this annotation"},svgSrcUrl:function(){return this.srcUrl.replace(/.[A-Za-z]*$/,".svg")},showAnnotationOutlines:function(){return!this.overlayHasError&&this.outlines.showAnnotationOutlines}},methods:{handleOverlayLoad:function(){this.overlayIsLoaded=!0},handleOverlayError:function(){this.overlayHasError=!0}}},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("figure",{staticClass:"image-grid__image image-grid__image--largo",class:t.classObject,attrs:{title:t.title}},[t.selectable?n("div",{staticClass:"image-icon"},[n("i",{staticClass:"fas",class:t.iconClass})]):t._e(),t._v(" "),n("img",{attrs:{src:t.srcUrl},on:{error:t.showEmptyImage,click:t.toggleSelect}}),t._v(" "),this.showAnnotationOutlines?n("img",{directives:[{name:"show",rawName:"v-show",value:t.overlayIsLoaded,expression:"overlayIsLoaded"}],staticClass:"outlines",attrs:{src:t.svgSrcUrl},on:{error:t.handleOverlayError,load:t.handleOverlayLoad}}):t._e(),t._v(" "),t.showAnnotationLink?n("div",{staticClass:"image-buttons"},[n("a",{staticClass:"image-button",attrs:{href:t.showAnnotationLink,target:"_blank",title:"Show the annotation in the annotation tool"}},[n("span",{staticClass:"fa fa-external-link-square-alt fa-fw",attrs:{"aria-hidden":"true"}})])]):t._e()])}),[],!1,null,null,null);const L=n({mixins:[u],components:{imageGridImage:I.exports}},undefined,undefined,!1,null,null,null).exports;var O=n({mixins:[d,i],data:function(){return{showAnnotationRoute:null,overlayIsLoaded:!1,overlayHasError:!1}},inject:["outlines"],computed:{showAnnotationLink:function(){return this.showAnnotationRoute?this.showAnnotationRoute+this.image.id:""},selected:function(){return this.image.newLabel},title:function(){return this.selected?"Revert changing the label of this annotation":"Change the label of this annotation"},newLabelStyle:function(){return{"background-color":"#"+this.image.newLabel.color}},svgSrcUrl:function(){return this.srcUrl.replace(/.[A-Za-z]*$/,".svg")},showAnnotationOutlines:function(){return!this.overlayHasError&&this.outlines.showAnnotationOutlines}},methods:{handleOverlayLoad:function(){this.overlayIsLoaded=!0},handleOverlayError:function(){this.overlayHasError=!0}}},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("figure",{staticClass:"image-grid__image image-grid__image--largo image-grid__image--relabel",class:t.classObject,attrs:{title:t.title}},[t.selectable?n("div",{staticClass:"image-icon"},[n("i",{staticClass:"fas",class:t.iconClass})]):t._e(),t._v(" "),n("img",{attrs:{src:t.srcUrl},on:{click:t.toggleSelect,error:t.showEmptyImage}}),t._v(" "),this.showAnnotationOutlines?n("img",{directives:[{name:"show",rawName:"v-show",value:t.overlayIsLoaded,expression:"overlayIsLoaded"}],staticClass:"outlines",attrs:{src:t.svgSrcUrl},on:{error:t.handleOverlayError,load:t.handleOverlayLoad}}):t._e(),t._v(" "),t.showAnnotationLink?n("div",{staticClass:"image-buttons"},[n("a",{staticClass:"image-button",attrs:{href:t.showAnnotationLink,target:"_blank",title:"Show the annotation in the annotation tool"}},[n("span",{staticClass:"fa fa-external-link-square-alt",attrs:{"aria-hidden":"true"}})])]):t._e(),t._v(" "),t.selected?n("div",{staticClass:"new-label"},[n("span",{staticClass:"new-label__color",style:t.newLabelStyle}),t._v(" "),n("span",{staticClass:"new-label__name",domProps:{textContent:t._s(t.image.newLabel.name)}})]):t._e()])}),[],!1,null,null,null);const x=n({mixins:[u],components:{imageGridImage:O.exports}},undefined,undefined,!1,null,null,null).exports;const q=new p({data:{storageKey:"biigle.largo.settings",defaults:{showOutlines:!0}}});const T=n({components:{PowerToggle:f},data:function(){return{restoreKeys:["showOutlines"],showOutlines:!0}},computed:{settings:function(){return q}},methods:{enableOutlines:function(){this.showOutlines=!0},disableOutlines:function(){this.showOutlines=!1}},watch:{showOutlines:function(t){this.$emit("change-outlines",t),this.settings.set("showOutlines",t)}},created:function(){var t=this;this.restoreKeys.forEach((function(e){t[e]=t.settings.get(e)}))}},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"settings-tab"},[n("div",{staticClass:"largo-tab__button"},[n("power-toggle",{attrs:{active:t.showOutlines},on:{on:t.enableOutlines,off:t.disableOutlines}},[t._v("\n            Show annotation outlines\n        ")])],1)])}),[],!1,null,null,null).exports;var $=0,E=1,k=0,D=1;var P=n({data:function(){return{sortDirection:E,sortKey:k}},computed:{sortedAscending:function(){return this.sortDirection===$},sortedDescending:function(){return this.sortDirection===E},sortingByAnnotationId:function(){return this.sortKey===k},sortingByOutlier:function(){return this.sortKey===D}},methods:{sortAscending:function(){this.sortDirection=$},sortDescending:function(){this.sortDirection=E},reset:function(){this.sortDescending(),this.sortByAnnotationId()},sortByAnnotationId:function(){this.sortKey=k},sortByOutlier:function(){this.sortKey=D}},watch:{sortDirection:function(t){this.$emit("change-direction",t)},sortKey:function(t){this.$emit("change-key",t)}}},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"sorting-tab"},[n("div",{staticClass:"sorting-tab__buttons"},[n("div",{staticClass:"btn-group",attrs:{role:"group"}},[n("button",{staticClass:"btn btn-default",class:{active:t.sortedDescending},attrs:{type:"button",title:"Sort descending"},on:{click:t.sortDescending}},[n("span",{staticClass:"fa fa-sort-amount-down"})]),t._v(" "),n("button",{staticClass:"btn btn-default",class:{active:t.sortedAscending},attrs:{type:"button",title:"Sort ascending"},on:{click:t.sortAscending}},[n("span",{staticClass:"fa fa-sort-amount-up"})])]),t._v(" "),n("div",{staticClass:"btn-group pull-right",attrs:{role:"group"}},[n("button",{staticClass:"btn btn-default",attrs:{type:"button",title:"Reset sorting"},on:{click:t.reset}},[n("span",{staticClass:"fa fa-times"})])])]),t._v(" "),n("div",{staticClass:"list-group sorter-list-group"},[n("button",{staticClass:"list-group-item",class:{active:t.sortingByAnnotationId},attrs:{title:"Sort by annotation timestamp (higher is newer)"},on:{click:t.sortByAnnotationId}},[t._v("\n            Created\n        ")]),t._v(" "),n("button",{staticClass:"list-group-item",class:{active:t.sortingByOutlier},attrs:{title:"Sort by outliers (higher is more dissimilar)"},on:{click:t.sortByOutlier}},[t._v("\n            Outliers\n        ")])])])}),[],!1,null,null,null);const R=n({mixins:[g],components:{labelTrees:h,sidebar:v,sidebarTab:y,powerToggle:f,dismissImageGrid:L,relabelImageGrid:x,settingsTab:T,sortingTab:P.exports},data:function(){return{user:null,labelTrees:[],step:0,selectedLabel:null,annotationsCache:{},lastSelectedImage:null,forceChange:!1,waitForSessionId:null,showAnnotationOutlines:!0,sortingSequenceCache:{},sortingDirection:E,sortingKey:k}},provide:function(){var t=this,e={};return Object.defineProperty(e,"showAnnotationOutlines",{get:function(){return t.showAnnotationOutlines}}),{outlines:e}},computed:{isInDismissStep:function(){return 0===this.step},isInRelabelStep:function(){return 1===this.step},annotations:function(){return this.selectedLabel&&this.annotationsCache.hasOwnProperty(this.selectedLabel.id)?this.annotationsCache[this.selectedLabel.id]:[]},sortedAnnotations:function(){var t,n,i,s=this.annotations.slice(),o=null===(t=this.sortingSequenceCache)||void 0===t||null===(n=t[null===(i=this.selectedLabel)||void 0===i?void 0:i.id])||void 0===n?void 0:n[this.sortingKey];if(o){var a={};o.forEach((function(t,e){return a[t]=e})),s.sort((function(t,n){return a[t.type===e?"v"+t.id:"i"+t.id]-a[n.type===e?"v"+n.id:"i"+n.id]}))}return this.sortingDirection===$?s.reverse():s},allAnnotations:function(){var t=[];for(var e in this.annotationsCache)this.annotationsCache.hasOwnProperty(e)&&Array.prototype.push.apply(t,this.annotationsCache[e]);return t},hasNoAnnotations:function(){return this.selectedLabel&&!this.loading&&0===this.annotations.length},dismissedAnnotations:function(){return this.allAnnotations.filter((function(t){return t.dismissed}))},annotationsWithNewLabel:function(){return this.dismissedAnnotations.filter((function(t){return!!t.newLabel}))},hasDismissedAnnotations:function(){return this.dismissedAnnotations.length>0},dismissedImageAnnotationsToSave:function(){return this.packDismissedToSave(this.dismissedAnnotations.filter((function(e){return e.type===t})))},dismissedVideoAnnotationsToSave:function(){return this.packDismissedToSave(this.dismissedAnnotations.filter((function(t){return t.type===e})))},changedImageAnnotationsToSave:function(){return this.packChangedToSave(this.annotationsWithNewLabel.filter((function(e){return e.type===t})))},changedVideoAnnotationsToSave:function(){return this.packChangedToSave(this.annotationsWithNewLabel.filter((function(t){return t.type===e})))},toDeleteCount:function(){return this.dismissedAnnotations.length-this.annotationsWithNewLabel.length},saveButtonClass:function(){return this.forceChange?"btn-danger":"btn-success"},sortingIsActive:function(){return this.isInDismissStep&&(this.sortingKey!==k||this.sortingDirection!==E)}},methods:{getAnnotations:function(t){var e,n,i,s,o=this;this.annotationsCache.hasOwnProperty(t.id)?i=Vue.Promise.resolve():(Vue.set(this.annotationsCache,t.id,[]),this.startLoading(),i=this.queryAnnotations(t).then((function(e){return o.gotAnnotations(t,e)}),l));var a=null===(e=this.sortingSequenceCache)||void 0===e||null===(n=e[t.id])||void 0===n?void 0:n[this.sortingKey];this.sortingIsActive&&!a?(this.loading||this.startLoading(),s=this.fetchSortingSequence(this.sortingKey,t.id).catch(l)):s=Vue.Promise.resolve(),Vue.Promise.all([i,s]).finally(this.finishLoading)},gotAnnotations:function(n,i){var s=i[0].data,o=i[1].data,a=[];s&&(a=a.concat(this.initAnnotations(n,s,t))),o&&(a=a.concat(this.initAnnotations(n,o,e))),a=a.sort((function(t,e){return e.id-t.id})),Vue.set(this.annotationsCache,n.id,a)},initAnnotations:function(t,e,n){return Object.keys(e).map((function(i){return{id:i,uuid:e[i],label_id:t.id,dismissed:!1,newLabel:null,type:n}}))},handleSelectedLabel:function(t){this.selectedLabel=t,this.isInDismissStep&&this.getAnnotations(t)},handleDeselectedLabel:function(){this.selectedLabel=null},handleSelectedImageDismiss:function(t,e){t.dismissed?(t.dismissed=!1,t.newLabel=null):(t.dismissed=!0,e.shiftKey&&this.lastSelectedImage?this.dismissAllImagesBetween(t,this.lastSelectedImage):this.lastSelectedImage=t)},goToRelabel:function(){this.step=1,this.lastSelectedImage=null},goToDismiss:function(){this.step=0,this.lastSelectedImage=null,this.selectedLabel&&this.getAnnotations(this.selectedLabel)},handleSelectedImageRelabel:function(t,e){t.newLabel?this.selectedLabel&&t.newLabel.id!==this.selectedLabel.id?t.newLabel=this.selectedLabel:t.newLabel=null:this.selectedLabel&&(t.newLabel=this.selectedLabel,e.shiftKey&&this.lastSelectedImage?this.relabelAllImagesBetween(t,this.lastSelectedImage):this.lastSelectedImage=t)},save:function(){var t=this;if(!this.loading){if(this.toDeleteCount>0){for(var e;null!==e&&parseInt(e,10)!==this.toDeleteCount;)e=prompt("This might delete ".concat(this.toDeleteCount," annotation(s). Please enter the number to continue."));if(null===e)return}this.startLoading(),this.performSave({dismissed_image_annotations:this.dismissedImageAnnotationsToSave,changed_image_annotations:this.changedImageAnnotationsToSave,dismissed_video_annotations:this.dismissedVideoAnnotationsToSave,changed_video_annotations:this.changedVideoAnnotationsToSave,force:this.forceChange}).then((function(e){return t.waitForSessionId=e.body.id}),(function(e){t.finishLoading(),l(e)}))}},handleSessionSaved:function(t){if(t.id==this.waitForSessionId){for(var e in this.finishLoading(),m.success("Saved. You can now start a new re-evaluation session."),this.step=0,this.annotationsCache)this.annotationsCache.hasOwnProperty(e)&&delete this.annotationsCache[e];for(var n in this.sortingSequenceCache)this.sortingSequenceCache.hasOwnProperty(n)&&delete this.sortingSequenceCache[n];this.handleSelectedLabel(this.selectedLabel)}},handleSessionFailed:function(t){t.id==this.waitForSessionId&&(this.finishLoading(),m.danger("There was an unexpected error."))},dismissAllImagesBetween:function(t,e){var n=this.sortedAnnotations.indexOf(t),i=this.sortedAnnotations.indexOf(e);if(i<n){var s=i;i=n,n=s}for(var o=n+1;o<i;o++)this.sortedAnnotations[o].dismissed=!0},relabelAllImagesBetween:function(t,e){var n=this.selectedLabel,i=this.allAnnotations.indexOf(t),s=this.allAnnotations.indexOf(e);if(s<i){var o=s;s=i,i=o}for(var a=i+1;a<s;a++)this.allAnnotations[a].dismissed&&(this.allAnnotations[a].newLabel=n)},enableForceChange:function(){this.forceChange=!0},disableForceChange:function(){this.forceChange=!1},packDismissedToSave:function(t){for(var e={},n=t.length-1;n>=0;n--)e.hasOwnProperty(t[n].label_id)?e[t[n].label_id].push(t[n].id):e[t[n].label_id]=[t[n].id];return e},packChangedToSave:function(t){for(var e={},n=t.length-1;n>=0;n--)e.hasOwnProperty(t[n].newLabel.id)?e[t[n].newLabel.id].push(t[n].id):e[t[n].newLabel.id]=[t[n].id];return e},initializeEcho:function(){a.getInstance().private("user-".concat(this.user.id)).listen(".Biigle\\Modules\\Largo\\Events\\LargoSessionSaved",this.handleSessionSaved).listen(".Biigle\\Modules\\Largo\\Events\\LargoSessionFailed",this.handleSessionFailed)},updateShowOutlines:function(t){this.showAnnotationOutlines=t},updateSortDirection:function(t){this.sortingDirection=t},fetchSortingSequence:function(t,e){var n=this;return(t===D?this.querySortByOutlier(e).then((function(t){return t.body})):Vue.Promise.resolve([])).then((function(i){return n.putSortingSequenceToCache(t,e,i)}))},putSortingSequenceToCache:function(t,e,n){this.sortingSequenceCache[e]||Vue.set(this.sortingSequenceCache,e,{}),this.sortingSequenceCache[e][t]=n},updateSortKey:function(t){var e,n,i,s=this,o=null===(e=this.selectedLabel)||void 0===e?void 0:e.id,a=null===(n=this.sortingSequenceCache)||void 0===n||null===(i=n[o])||void 0===i?void 0:i[t];o&&!a?(this.startLoading(),this.fetchSortingSequence(t,o).then((function(){return s.sortingKey=t})).catch(l).finally(this.finishLoading)):this.sortingKey=t}},watch:{annotations:function(t){r.$emit("annotations-count",t.length)},dismissedAnnotations:function(t){r.$emit("dismissed-annotations-count",t.length)},step:function(t){r.$emit("step",t)},selectedLabel:function(){this.isInDismissStep&&this.$refs.dismissGrid.setOffset(0)}},created:function(){var t=this;this.user=biigle.$require("largo.user"),window.addEventListener("beforeunload",(function(e){if(t.hasDismissedAnnotations)return e.preventDefault(),e.returnValue="","This page is asking you to confirm that you want to leave - data you have entered may not be saved."})),this.initializeEcho()}},undefined,undefined,!1,null,null,null).exports;const V=n({mixins:[R],components:{catalogImageGrid:_},data:function(){return{labelTrees:[]}},methods:{queryAnnotations:function(t){var e=C.queryImageAnnotations({id:t.id}),n=C.queryVideoAnnotations({id:t.id});return Vue.Promise.all([e,n])}},created:function(){var t=biigle.$require("annotationCatalog.labelTree");this.labelTrees=[t]}},undefined,undefined,!1,null,null,null).exports;const j=n({mixins:[R],data:function(){return{volumeId:null,labelTrees:[],mediaType:""}},methods:{queryAnnotations:function(t){var e,n;return"image"===this.mediaType?(e=o.queryImageAnnotations({id:this.volumeId,label_id:t.id}),n=Vue.Promise.resolve([])):(e=Vue.Promise.resolve([]),n=o.queryVideoAnnotations({id:this.volumeId,label_id:t.id})),Vue.Promise.all([e,n])},performSave:function(t){return o.save({id:this.volumeId},t)},querySortByOutlier:function(t){var e=this;return o.sortAnnotationsByOutlier({id:this.volumeId,label_id:t}).then((function(t){return"image"===e.mediaType?t.body=t.body.map((function(t){return"i"+t})):t.body=t.body.map((function(t){return"v"+t})),t}))}},created:function(){this.volumeId=biigle.$require("largo.volumeId"),this.labelTrees=biigle.$require("largo.labelTrees"),this.mediaType=biigle.$require("largo.mediaType")}},undefined,undefined,!1,null,null,null).exports;const B=n({data:function(){return{step:0,count:0,dismissedCount:0}},computed:{shownCount:function(){return this.isInDismissStep?this.count:this.dismissedCount},isInDismissStep:function(){return 0===this.step},isInRelabelStep:function(){return 1===this.step}},methods:{updateStep:function(t){this.step=t},updateCount:function(t){this.count=t},updateDismissedCount:function(t){this.dismissedCount=t}},created:function(){r.$on("annotations-count",this.updateCount),r.$on("dismissed-annotations-count",this.updateDismissedCount),r.$on("step",this.updateStep)}},undefined,undefined,!1,null,null,null).exports,K=Vue.resource("api/v1/projects{/id}/largo",{},{queryImageAnnotations:{method:"GET",url:"api/v1/projects{/id}/image-annotations/filter/label{/label_id}"},queryVideoAnnotations:{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}"}});const G=n({mixins:[R],data:function(){return{projectId:null,labelTrees:[]}},methods:{queryAnnotations:function(t){var e=K.queryImageAnnotations({id:this.projectId,label_id:t.id}),n=K.queryVideoAnnotations({id:this.projectId,label_id:t.id});return Vue.Promise.all([e,n])},performSave:function(t){return K.save({id:this.projectId},t)},querySortByOutlier:function(t){return K.sortAnnotationsByOutlier({id:this.projectId,label_id:t})}},created:function(){this.projectId=biigle.$require("largo.projectId"),this.labelTrees=biigle.$require("largo.labelTrees")}},undefined,undefined,!1,null,null,null).exports;biigle.$mount("annotation-catalog-container",V),biigle.$mount("largo-container",j),biigle.$mount("largo-title",B),biigle.$mount("project-largo-container",G)},401:()=>{}},n={};function i(t){var s=n[t];if(void 0!==s)return s.exports;var o=n[t]={exports:{}};return e[t](o,o.exports,i),o.exports}i.m=e,t=[],i.O=(e,n,s,o)=>{if(!n){var a=1/0;for(d=0;d<t.length;d++){for(var[n,s,o]=t[d],r=!0,l=0;l<n.length;l++)(!1&o||a>=o)&&Object.keys(i.O).every((t=>i.O[t](n[l])))?n.splice(l--,1):(r=!1,o<a&&(a=o));if(r){t.splice(d--,1);var u=s();void 0!==u&&(e=u)}}return e}o=o||0;for(var d=t.length;d>0&&t[d-1][2]>o;d--)t[d]=t[d-1];t[d]=[n,s,o]},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{var t={355:0,392:0};i.O.j=e=>0===t[e];var e=(e,n)=>{var s,o,[a,r,l]=n,u=0;if(a.some((e=>0!==t[e]))){for(s in r)i.o(r,s)&&(i.m[s]=r[s]);if(l)var d=l(i)}for(e&&e(n);u<a.length;u++)o=a[u],i.o(t,o)&&t[o]&&t[o][0](),t[o]=0;return i.O(d)},n=self.webpackChunkbiigle_largo=self.webpackChunkbiigle_largo||[];n.forEach(e.bind(null,0)),n.push=e.bind(null,n.push.bind(n))})(),i.O(void 0,[392],(()=>i(235)));var s=i.O(void 0,[392],(()=>i(401)));s=i.O(s)})();
\ No newline at end of file
+(()=>{"use strict";var t,e={67:()=>{var t="imageAnnotation",e="videoAnnotation";function n(t,e,n,i,s,o,a,r){var l,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),i&&(u.functional=!0),o&&(u._scopeId="data-v-"+o),a?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=l):s&&(l=r?function(){s.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:s),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(t,e){return l.call(e),c(t,e)}}else{var d=u.beforeCreate;u.beforeCreate=d?[].concat(d,l):[l]}return{exports:t,options:u}}const i=n({computed:{id:function(){return this.image.id},uuid:function(){return this.image.uuid},type:function(){return this.image.type},patchPrefix:function(){return this.uuid[0]+this.uuid[1]+"/"+this.uuid[2]+this.uuid[3]+"/"+this.uuid},urlTemplate:function(){return biigle.$require("largo.patchUrlTemplate")}},methods:{getThumbnailUrl:function(){return this.type===e?this.urlTemplate.replace(":prefix",this.patchPrefix).replace(":id","v-".concat(this.id)):this.urlTemplate.replace(":prefix",this.patchPrefix).replace(":id",this.id)}},created:function(){this.type===t?this.showAnnotationRoute=biigle.$require("largo.showImageAnnotationRoute"):this.showAnnotationRoute=biigle.$require("largo.showVideoAnnotationRoute")}},undefined,undefined,!1,null,null,null).exports;const s=n({mixins:[i],props:{_id:{type:String,required:!0},_uuid:{type:String,required:!0},label:{type:Object,required:!0},emptySrc:{type:String,required:!0},_urlTemplate:{type:String,required:!0}},data:function(){return{url:""}},computed:{title:function(){return"Example annotation for label "+this.label.name},src:function(){return this.url||this.emptySrc},image:function(){return{id:this._id,uuid:this._uuid,type:t}},urlTemplate:function(){return this._urlTemplate}},methods:{showEmptyImage:function(){this.url=""}},created:function(){this.url=this.getThumbnailUrl()}},undefined,undefined,!1,null,null,null).exports,o=Vue.resource("api/v1/volumes{/id}/largo",{},{queryImageAnnotations:{method:"GET",url:"api/v1/volumes{/id}/image-annotations/filter/label{/label_id}"},queryVideoAnnotations:{method:"GET",url:"api/v1/volumes{/id}/video-annotations/filter/label{/label_id}"},queryExampleAnnotations:{method:"GET",url:"api/v1/volumes{/id}/image-annotations/examples{/label_id}"},sortAnnotationsByOutlier:{method:"GET",url:"api/v1/volumes{/id}/annotations/sort/outliers{/label_id}"},sortAnnotationsBySimilarity:{method:"GET",url:"api/v1/volumes{/id}/annotations/sort/similarity"}});var a=biigle.$require("echo"),r=biigle.$require("events"),l=biigle.$require("messages").handleErrorResponse,u=biigle.$require("volumes.components.imageGrid"),c=biigle.$require("volumes.components.imageGridImage"),d=biigle.$require("annotations.components.labelsTabPlugins"),h=biigle.$require("labelTrees.components.labelTrees"),m=biigle.$require("core.mixins.loader"),g=biigle.$require("messages"),f=biigle.$require("core.components.powerToggle"),p=biigle.$require("core.models.Settings"),b=biigle.$require("annotations.components.settingsTabPlugins"),v=biigle.$require("core.components.sidebar"),y=biigle.$require("core.components.sidebarTab");const S=n({mixins:[m],components:{annotationPatch:s},props:{label:{default:null},volumeId:{type:Number,required:!0},count:{type:Number,default:3}},data:function(){return{exampleLabel:null,exampleAnnotations:[],cache:{},shown:!0}},computed:{isShown:function(){return this.shown&&null!==this.label},hasExamples:function(){return this.exampleLabel&&this.exampleAnnotations&&Object.keys(this.exampleAnnotations).length>0}},methods:{parseResponse:function(t){return t.data},setExampleAnnotations:function(t){(!t[0].hasOwnProperty("annotations")||Object.keys(t[0].annotations).length<this.count)&&delete this.cache[t[1]],t[0].hasOwnProperty("label")&&t[0].label.id===t[1]||delete this.cache[t[1]],this.label&&this.label.id===t[1]&&(this.exampleAnnotations=t[0].annotations,this.exampleLabel=t[0].label)},updateShown:function(t){this.shown=t},updateExampleAnnotations:function(){this.exampleAnnotations=[],this.isShown&&(this.startLoading(),this.cache.hasOwnProperty(this.label.id)||(this.cache[this.label.id]=o.queryExampleAnnotations({id:this.volumeId,label_id:this.label.id,take:this.count}).then(this.parseResponse)),Vue.Promise.all([this.cache[this.label.id],this.label.id]).then(this.setExampleAnnotations).finally(this.finishLoading))}},watch:{label:function(){this.updateExampleAnnotations()},shown:function(){this.updateExampleAnnotations()}},created:function(){r.$on("settings.exampleAnnotations",this.updateShown)}},undefined,undefined,!1,null,null,null).exports;d&&(d.exampleAnnotations=S);const w=n({components:{powerButton:f},props:{settings:{type:Object,required:!0}},data:function(){return{isShown:!0}},methods:{hide:function(){this.isShown=!1,this.settings.set("exampleAnnotations",!1)},show:function(){this.isShown=!0,this.settings.delete("exampleAnnotations")}},watch:{isShown:function(t){r.$emit("settings.exampleAnnotations",t)}},created:function(){this.settings.has("exampleAnnotations")&&(this.isShown=this.settings.get("exampleAnnotations"))}},undefined,undefined,!1,null,null,null).exports;b&&(b.exampleAnnotations=w),biigle.$declare("largo.mixins.annotationPatch",i);var A=n({mixins:[c,i],data:function(){return{showAnnotationRoute:null}},computed:{showAnnotationLink:function(){return this.showAnnotationRoute?this.showAnnotationRoute+this.image.id:""}},created:function(){this.type===t?this.showAnnotationRoute=biigle.$require("annotationCatalog.showImageAnnotationRoute"):this.showAnnotationRoute=biigle.$require("annotationCatalog.showVideoAnnotationRoute")}},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("figure",{staticClass:"image-grid__image image-grid__image--catalog",class:t.classObject},[t.showAnnotationLink?n("a",{attrs:{href:t.showAnnotationLink,target:"_blank",title:"Show the annotation in the annotation tool"}},[n("img",{attrs:{src:t.srcUrl},on:{error:t.showEmptyImage}})]):n("img",{attrs:{src:t.srcUrl},on:{error:t.showEmptyImage}})])}),[],!1,null,null,null);const _=n({mixins:[u],components:{imageGridImage:A.exports}},undefined,undefined,!1,null,null,null).exports,C=Vue.resource("api/v1/labels{/id}",{},{queryImageAnnotations:{method:"GET",url:"api/v1/labels{/id}/image-annotations"},queryVideoAnnotations:{method:"GET",url:"api/v1/labels{/id}/video-annotations"}});var I=n({mixins:[c,i],data:function(){return{showAnnotationRoute:null,overlayIsLoaded:!1,overlayHasError:!1}},inject:["outlines"],computed:{showAnnotationLink:function(){return this.showAnnotationRoute?this.showAnnotationRoute+this.image.id:""},selected:function(){return this.image.dismissed},title:function(){return this.selected?"Undo dismissing this annotation":"Dismiss this annotation"},pinTitle:function(){return this.isPinned?"Reset sorting":"Select as reference (sort by similarity)"},svgSrcUrl:function(){return this.srcUrl.replace(/.[A-Za-z]*$/,".svg")},showAnnotationOutlines:function(){return!this.overlayHasError&&this.outlines.showAnnotationOutlines}},methods:{handleOverlayLoad:function(){this.overlayIsLoaded=!0},handleOverlayError:function(){this.overlayHasError=!0}}},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("figure",{staticClass:"image-grid__image image-grid__image--largo",class:t.classObject,attrs:{title:t.title}},[t.selectable?n("div",{staticClass:"image-icon"},[n("i",{staticClass:"fas",class:t.iconClass})]):t._e(),t._v(" "),n("img",{attrs:{src:t.srcUrl},on:{error:t.showEmptyImage,click:t.toggleSelect}}),t._v(" "),this.showAnnotationOutlines?n("img",{directives:[{name:"show",rawName:"v-show",value:t.overlayIsLoaded,expression:"overlayIsLoaded"}],staticClass:"outlines",attrs:{src:t.svgSrcUrl},on:{error:t.handleOverlayError,load:t.handleOverlayLoad}}):t._e(),t._v(" "),t.pinnable||t.isPinned?n("div",{staticClass:"image-buttons-bottom"},[n("button",{staticClass:"image-button image-button__pin",attrs:{title:t.pinTitle},on:{click:t.emitPin}},[n("span",{staticClass:"fa fa-thumbtack fa-fw"})])]):t._e(),t._v(" "),t.showAnnotationLink?n("div",{staticClass:"image-buttons"},[n("a",{staticClass:"image-button",attrs:{href:t.showAnnotationLink,target:"_blank",title:"Show the annotation in the annotation tool"}},[n("span",{staticClass:"fa fa-external-link-square-alt fa-fw",attrs:{"aria-hidden":"true"}})])]):t._e()])}),[],!1,null,null,null);const L=n({mixins:[u],components:{imageGridImage:I.exports}},undefined,undefined,!1,null,null,null).exports;var x=n({mixins:[c,i],data:function(){return{showAnnotationRoute:null,overlayIsLoaded:!1,overlayHasError:!1}},inject:["outlines"],computed:{showAnnotationLink:function(){return this.showAnnotationRoute?this.showAnnotationRoute+this.image.id:""},selected:function(){return this.image.newLabel},title:function(){return this.selected?"Revert changing the label of this annotation":"Change the label of this annotation"},newLabelStyle:function(){return{"background-color":"#"+this.image.newLabel.color}},svgSrcUrl:function(){return this.srcUrl.replace(/.[A-Za-z]*$/,".svg")},showAnnotationOutlines:function(){return!this.overlayHasError&&this.outlines.showAnnotationOutlines}},methods:{handleOverlayLoad:function(){this.overlayIsLoaded=!0},handleOverlayError:function(){this.overlayHasError=!0}}},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("figure",{staticClass:"image-grid__image image-grid__image--largo image-grid__image--relabel",class:t.classObject,attrs:{title:t.title}},[t.selectable?n("div",{staticClass:"image-icon"},[n("i",{staticClass:"fas",class:t.iconClass})]):t._e(),t._v(" "),n("img",{attrs:{src:t.srcUrl},on:{click:t.toggleSelect,error:t.showEmptyImage}}),t._v(" "),this.showAnnotationOutlines?n("img",{directives:[{name:"show",rawName:"v-show",value:t.overlayIsLoaded,expression:"overlayIsLoaded"}],staticClass:"outlines",attrs:{src:t.svgSrcUrl},on:{error:t.handleOverlayError,load:t.handleOverlayLoad}}):t._e(),t._v(" "),t.showAnnotationLink?n("div",{staticClass:"image-buttons"},[n("a",{staticClass:"image-button",attrs:{href:t.showAnnotationLink,target:"_blank",title:"Show the annotation in the annotation tool"}},[n("span",{staticClass:"fa fa-external-link-square-alt",attrs:{"aria-hidden":"true"}})])]):t._e(),t._v(" "),t.selected?n("div",{staticClass:"new-label"},[n("span",{staticClass:"new-label__color",style:t.newLabelStyle}),t._v(" "),n("span",{staticClass:"new-label__name",domProps:{textContent:t._s(t.image.newLabel.name)}})]):t._e()])}),[],!1,null,null,null);const O=n({mixins:[u],components:{imageGridImage:x.exports}},undefined,undefined,!1,null,null,null).exports;const q=new p({data:{storageKey:"biigle.largo.settings",defaults:{showOutlines:!0}}});const T=n({components:{PowerToggle:f},data:function(){return{restoreKeys:["showOutlines"],showOutlines:!0}},computed:{settings:function(){return q}},methods:{enableOutlines:function(){this.showOutlines=!0},disableOutlines:function(){this.showOutlines=!1}},watch:{showOutlines:function(t){this.$emit("change-outlines",t),this.settings.set("showOutlines",t)}},created:function(){var t=this;this.restoreKeys.forEach((function(e){t[e]=t.settings.get(e)}))}},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"settings-tab"},[n("div",{staticClass:"largo-tab__button"},[n("power-toggle",{attrs:{active:t.showOutlines},on:{on:t.enableOutlines,off:t.disableOutlines}},[t._v("\n            Show annotation outlines\n        ")])],1)])}),[],!1,null,null,null).exports;var $=0,E=1,R=0,k=1,B=2;var P=n({props:{sortKey:{type:Number,required:!0},sortDirection:{type:Number,required:!0},needsSimilarityReference:{type:Boolean,default:!1}},computed:{sortedAscending:function(){return this.sortDirection===$},sortedDescending:function(){return this.sortDirection===E},sortingByAnnotationId:function(){return this.sortKey===R},sortingByOutlier:function(){return this.sortKey===k},sortingBySimilarity:function(){return this.sortKey===B}},methods:{sortAscending:function(){this.$emit("change-direction",$)},sortDescending:function(){this.$emit("change-direction",E)},reset:function(){this.sortDescending(),this.sortByAnnotationId()},sortByAnnotationId:function(){this.$emit("change-key",R),this.needsSimilarityReference&&this.cancelSortBySimilarity()},sortByOutlier:function(){this.$emit("change-key",k),this.needsSimilarityReference&&this.cancelSortBySimilarity()},initializeSortBySimilarity:function(){this.$emit("init-similarity")},cancelSortBySimilarity:function(){this.$emit("cancel-similarity")}}},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"sorting-tab"},[n("div",{staticClass:"sorting-tab__buttons"},[n("div",{staticClass:"btn-group",attrs:{role:"group"}},[n("button",{staticClass:"btn btn-default",class:{active:t.sortedDescending},attrs:{type:"button",title:"Sort descending"},on:{click:t.sortDescending}},[n("span",{staticClass:"fa fa-sort-amount-down"})]),t._v(" "),n("button",{staticClass:"btn btn-default",class:{active:t.sortedAscending},attrs:{type:"button",title:"Sort ascending"},on:{click:t.sortAscending}},[n("span",{staticClass:"fa fa-sort-amount-up"})])]),t._v(" "),n("div",{staticClass:"btn-group pull-right",attrs:{role:"group"}},[n("button",{staticClass:"btn btn-default",attrs:{type:"button",title:"Reset sorting"},on:{click:t.reset}},[n("span",{staticClass:"fa fa-times"})])])]),t._v(" "),n("div",{staticClass:"list-group sorter-list-group"},[n("button",{staticClass:"list-group-item",class:{active:t.sortingByAnnotationId},attrs:{title:"Sort by annotation timestamp (higher is newer)"},on:{click:t.sortByAnnotationId}},[t._v("\n            Created\n        ")]),t._v(" "),n("button",{staticClass:"list-group-item",class:{active:t.sortingByOutlier},attrs:{title:"Sort by outliers (higher is more dissimilar)"},on:{click:t.sortByOutlier}},[t._v("\n            Outliers\n        ")]),t._v(" "),n("a",{staticClass:"list-group-item",class:{active:t.sortingBySimilarity,"list-group-item-warning":t.needsSimilarityReference},attrs:{title:"Sort by similarity (higher is more similar)",href:"#"},on:{click:function(e){return e.preventDefault(),t.initializeSortBySimilarity.apply(null,arguments)}}},[t.needsSimilarityReference?n("button",{staticClass:"btn btn-default btn-xs pull-right",attrs:{title:"Cancel selecting a reference annotation"},on:{click:function(e){return e.stopPropagation(),t.cancelSortBySimilarity.apply(null,arguments)}}},[n("i",{staticClass:"fa fa-undo"})]):t._e(),t._v("\n            Similarity\n            "),t.needsSimilarityReference?n("p",[t._v("\n                Select a reference annotation with a click on the "),n("i",{staticClass:"fa fa-thumbtack fa-fw"}),t._v(" button.\n            ")]):t._e()])])])}),[],!1,null,null,null);const D=n({mixins:[m],components:{labelTrees:h,sidebar:v,sidebarTab:y,powerToggle:f,dismissImageGrid:L,relabelImageGrid:O,settingsTab:T,sortingTab:P.exports},data:function(){return{user:null,labelTrees:[],step:0,selectedLabel:null,annotationsCache:{},lastSelectedImage:null,forceChange:!1,waitForSessionId:null,showAnnotationOutlines:!0,sortingSequenceCache:{},sortingSequence:[],sortingDirection:E,sortingKey:R,needsSimilarityReference:!1,similarityReference:null,pinnedImage:null}},provide:function(){var t=this,e={};return Object.defineProperty(e,"showAnnotationOutlines",{get:function(){return t.showAnnotationOutlines}}),{outlines:e}},computed:{isInDismissStep:function(){return 0===this.step},isInRelabelStep:function(){return 1===this.step},annotations:function(){return this.selectedLabel&&this.annotationsCache.hasOwnProperty(this.selectedLabel.id)?this.annotationsCache[this.selectedLabel.id]:[]},sortedAnnotations:function(){var t=this.annotations;if(0===t.length)return t;if(this.sortingSequence.length>0){var n={};t.forEach((function(t){n[t.type===e?"v"+t.id:"i"+t.id]=t})),t=this.sortingSequence.map((function(t){return n[t]}))}return this.sortingDirection===$?t.slice().reverse():t},allAnnotations:function(){var t=[];for(var e in this.annotationsCache)this.annotationsCache.hasOwnProperty(e)&&Array.prototype.push.apply(t,this.annotationsCache[e]);return t},hasNoAnnotations:function(){return this.selectedLabel&&!this.loading&&0===this.annotations.length},dismissedAnnotations:function(){return this.allAnnotations.filter((function(t){return t.dismissed}))},annotationsWithNewLabel:function(){return this.dismissedAnnotations.filter((function(t){return!!t.newLabel}))},hasDismissedAnnotations:function(){return this.dismissedAnnotations.length>0},dismissedImageAnnotationsToSave:function(){return this.packDismissedToSave(this.dismissedAnnotations.filter((function(e){return e.type===t})))},dismissedVideoAnnotationsToSave:function(){return this.packDismissedToSave(this.dismissedAnnotations.filter((function(t){return t.type===e})))},changedImageAnnotationsToSave:function(){return this.packChangedToSave(this.annotationsWithNewLabel.filter((function(e){return e.type===t})))},changedVideoAnnotationsToSave:function(){return this.packChangedToSave(this.annotationsWithNewLabel.filter((function(t){return t.type===e})))},toDeleteCount:function(){return this.dismissedAnnotations.length-this.annotationsWithNewLabel.length},saveButtonClass:function(){return this.forceChange?"btn-danger":"btn-success"},sortingIsActive:function(){return this.isInDismissStep&&(this.sortingKey!==R||this.sortingDirection!==E)},imagesPinnable:function(){return this.needsSimilarityReference||this.sortingKey===B}},methods:{getAnnotations:function(t){var e,n,i=this;this.annotationsCache.hasOwnProperty(t.id)?e=Vue.Promise.resolve():(Vue.set(this.annotationsCache,t.id,[]),this.startLoading(),e=this.queryAnnotations(t).then((function(e){return i.gotAnnotations(t,e)}),l)),n=this.sortingKey===B?this.resetSorting():this.sortingIsActive?this.updateSortKey(this.sortingKey):Vue.Promise.resolve(),Vue.Promise.all([e,n]).finally(this.finishLoading)},gotAnnotations:function(n,i){var s=i[0].data,o=i[1].data,a=[];s&&(a=a.concat(this.initAnnotations(n,s,t))),o&&(a=a.concat(this.initAnnotations(n,o,e))),a=a.sort((function(t,e){return e.id-t.id})),Vue.set(this.annotationsCache,n.id,a)},initAnnotations:function(t,e,n){return Object.keys(e).map((function(i){return{id:i,uuid:e[i],label_id:t.id,dismissed:!1,newLabel:null,type:n}}))},handleSelectedLabel:function(t){this.selectedLabel=t,this.isInDismissStep&&this.getAnnotations(t)},handleDeselectedLabel:function(){this.selectedLabel=null},handleSelectedImageDismiss:function(t,e){t.dismissed?(t.dismissed=!1,t.newLabel=null):(t.dismissed=!0,e.shiftKey&&this.lastSelectedImage?this.dismissAllImagesBetween(t,this.lastSelectedImage):this.lastSelectedImage=t)},goToRelabel:function(){this.step=1,this.lastSelectedImage=null},goToDismiss:function(){this.step=0,this.lastSelectedImage=null,this.selectedLabel&&this.getAnnotations(this.selectedLabel)},handleSelectedImageRelabel:function(t,e){t.newLabel?this.selectedLabel&&t.newLabel.id!==this.selectedLabel.id?t.newLabel=this.selectedLabel:t.newLabel=null:this.selectedLabel&&(t.newLabel=this.selectedLabel,e.shiftKey&&this.lastSelectedImage?this.relabelAllImagesBetween(t,this.lastSelectedImage):this.lastSelectedImage=t)},save:function(){var t=this;if(!this.loading){if(this.toDeleteCount>0){for(var e;null!==e&&parseInt(e,10)!==this.toDeleteCount;)e=prompt("This might delete ".concat(this.toDeleteCount," annotation(s). Please enter the number to continue."));if(null===e)return}this.startLoading(),this.performSave({dismissed_image_annotations:this.dismissedImageAnnotationsToSave,changed_image_annotations:this.changedImageAnnotationsToSave,dismissed_video_annotations:this.dismissedVideoAnnotationsToSave,changed_video_annotations:this.changedVideoAnnotationsToSave,force:this.forceChange}).then((function(e){return t.waitForSessionId=e.body.id}),(function(e){t.finishLoading(),l(e)}))}},handleSessionSaved:function(t){if(t.id==this.waitForSessionId){for(var e in this.finishLoading(),g.success("Saved. You can now start a new re-evaluation session."),this.step=0,this.annotationsCache)this.annotationsCache.hasOwnProperty(e)&&delete this.annotationsCache[e];for(var n in this.sortingSequenceCache)this.sortingSequenceCache.hasOwnProperty(n)&&delete this.sortingSequenceCache[n];this.handleSelectedLabel(this.selectedLabel)}},handleSessionFailed:function(t){t.id==this.waitForSessionId&&(this.finishLoading(),g.danger("There was an unexpected error."))},dismissAllImagesBetween:function(t,e){var n=this.sortedAnnotations.indexOf(t),i=this.sortedAnnotations.indexOf(e);if(i<n){var s=i;i=n,n=s}for(var o=n+1;o<i;o++)this.sortedAnnotations[o].dismissed=!0},relabelAllImagesBetween:function(t,e){var n=this.selectedLabel,i=this.allAnnotations.indexOf(t),s=this.allAnnotations.indexOf(e);if(s<i){var o=s;s=i,i=o}for(var a=i+1;a<s;a++)this.allAnnotations[a].dismissed&&(this.allAnnotations[a].newLabel=n)},enableForceChange:function(){this.forceChange=!0},disableForceChange:function(){this.forceChange=!1},packDismissedToSave:function(t){for(var e={},n=t.length-1;n>=0;n--)e.hasOwnProperty(t[n].label_id)?e[t[n].label_id].push(t[n].id):e[t[n].label_id]=[t[n].id];return e},packChangedToSave:function(t){for(var e={},n=t.length-1;n>=0;n--)e.hasOwnProperty(t[n].newLabel.id)?e[t[n].newLabel.id].push(t[n].id):e[t[n].newLabel.id]=[t[n].id];return e},initializeEcho:function(){a.getInstance().private("user-".concat(this.user.id)).listen(".Biigle\\Modules\\Largo\\Events\\LargoSessionSaved",this.handleSessionSaved).listen(".Biigle\\Modules\\Largo\\Events\\LargoSessionFailed",this.handleSessionFailed)},updateShowOutlines:function(t){this.showAnnotationOutlines=t},updateSortDirection:function(t){this.sortingDirection=t},fetchSortingSequence:function(t,e){var n,i,s,o=this,a=null===(n=this.sortingSequenceCache)||void 0===n||null===(i=n[e])||void 0===i?void 0:i[t];if(a)return Vue.Promise.resolve(a);if(t===k)s=this.querySortByOutlier(e).then((function(t){return t.body}));else{if(t===B)return this.querySortBySimilarity(e,this.similarityReference).then((function(t){return t.body}));s=Vue.Promise.resolve([])}return s.then((function(n){return o.putSortingSequenceToCache(t,e,n)}))},putSortingSequenceToCache:function(t,e,n){return this.sortingSequenceCache[e]||Vue.set(this.sortingSequenceCache,e,{}),this.sortingSequenceCache[e][t]=n,n},updateSortKey:function(t){var e,n=this;t!==B&&(this.similarityReference=null,this.pinnedImage=null);var i=null===(e=this.selectedLabel)||void 0===e?void 0:e.id;return this.startLoading(),this.fetchSortingSequence(t,i).then((function(e){n.sortingKey=t,n.sortingSequence=e,t===B&&(n.needsSimilarityReference=!1,n.pinnedImage=n.similarityReference)})).catch((function(t){n.handleErrorResponse(t),n.similarityReference=null})).finally(this.finishLoading)},handleInitSimilaritySort:function(){this.sortingKey!==B&&(this.needsSimilarityReference=!0)},handleCancelSimilaritySort:function(){this.needsSimilarityReference=!1},handlePinImage:function(t){var e;(null===(e=this.pinnedImage)||void 0===e?void 0:e.id)===t.id?this.resetSorting():this.imagesPinnable&&(this.similarityReference=t,this.updateSortKey(B))},resetSorting:function(){var t=this;return this.updateSortKey(R).then((function(){return t.sortingDirection=E}))}},watch:{annotations:function(t){r.$emit("annotations-count",t.length)},dismissedAnnotations:function(t){r.$emit("dismissed-annotations-count",t.length)},step:function(t){r.$emit("step",t)},selectedLabel:function(){this.isInDismissStep&&this.$refs.dismissGrid.setOffset(0)}},created:function(){var t=this;this.user=biigle.$require("largo.user"),window.addEventListener("beforeunload",(function(e){if(t.hasDismissedAnnotations)return e.preventDefault(),e.returnValue="","This page is asking you to confirm that you want to leave - data you have entered may not be saved."})),this.initializeEcho()}},undefined,undefined,!1,null,null,null).exports;const V=n({mixins:[D],components:{catalogImageGrid:_},data:function(){return{labelTrees:[]}},methods:{queryAnnotations:function(t){var e=C.queryImageAnnotations({id:t.id}),n=C.queryVideoAnnotations({id:t.id});return Vue.Promise.all([e,n])}},created:function(){var t=biigle.$require("annotationCatalog.labelTree");this.labelTrees=[t]}},undefined,undefined,!1,null,null,null).exports;const j=n({mixins:[D],data:function(){return{volumeId:null,labelTrees:[],mediaType:""}},methods:{queryAnnotations:function(t){var e,n;return"image"===this.mediaType?(e=o.queryImageAnnotations({id:this.volumeId,label_id:t.id}),n=Vue.Promise.resolve([])):(e=Vue.Promise.resolve([]),n=o.queryVideoAnnotations({id:this.volumeId,label_id:t.id})),Vue.Promise.all([e,n])},performSave:function(t){return o.save({id:this.volumeId},t)},querySortByOutlier:function(t){return o.sortAnnotationsByOutlier({id:this.volumeId,label_id:t}).then(this.parseSortingQuery)},querySortBySimilarity:function(t,e){return o.sortAnnotationsBySimilarity({id:this.volumeId,label_id:t,annotation_id:e.id}).then(this.parseSortingQuery)},parseSortingQuery:function(t){return"image"===this.mediaType?t.body=t.body.map((function(t){return"i"+t})):t.body=t.body.map((function(t){return"v"+t})),t}},created:function(){this.volumeId=biigle.$require("largo.volumeId"),this.labelTrees=biigle.$require("largo.labelTrees"),this.mediaType=biigle.$require("largo.mediaType")}},undefined,undefined,!1,null,null,null).exports;const G=n({data:function(){return{step:0,count:0,dismissedCount:0}},computed:{shownCount:function(){return this.isInDismissStep?this.count:this.dismissedCount},isInDismissStep:function(){return 0===this.step},isInRelabelStep:function(){return 1===this.step}},methods:{updateStep:function(t){this.step=t},updateCount:function(t){this.count=t},updateDismissedCount:function(t){this.dismissedCount=t}},created:function(){r.$on("annotations-count",this.updateCount),r.$on("dismissed-annotations-count",this.updateDismissedCount),r.$on("step",this.updateStep)}},undefined,undefined,!1,null,null,null).exports,K=Vue.resource("api/v1/projects{/id}/largo",{},{queryImageAnnotations:{method:"GET",url:"api/v1/projects{/id}/image-annotations/filter/label{/label_id}"},queryVideoAnnotations:{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}"},sortAnnotationsBySimilarity:{method:"GET",url:"api/v1/projects{/id}/annotations/sort/similarity"}});const U=n({mixins:[D],data:function(){return{projectId:null,labelTrees:[]}},methods:{queryAnnotations:function(t){var e=K.queryImageAnnotations({id:this.projectId,label_id:t.id}),n=K.queryVideoAnnotations({id:this.projectId,label_id:t.id});return Vue.Promise.all([e,n])},performSave:function(t){return K.save({id:this.projectId},t)},querySortByOutlier:function(t){return K.sortAnnotationsByOutlier({id:this.projectId,label_id:t})},querySortBySimilarity:function(e,n){var i={id:this.projectId,label_id:e};return n.type===t?i.image_annotation_id=n.id:i.video_annotation_id=n.id,K.sortAnnotationsBySimilarity(i)}},created:function(){this.projectId=biigle.$require("largo.projectId"),this.labelTrees=biigle.$require("largo.labelTrees")}},undefined,undefined,!1,null,null,null).exports;biigle.$mount("annotation-catalog-container",V),biigle.$mount("largo-container",j),biigle.$mount("largo-title",G),biigle.$mount("project-largo-container",U)},401:()=>{}},n={};function i(t){var s=n[t];if(void 0!==s)return s.exports;var o=n[t]={exports:{}};return e[t](o,o.exports,i),o.exports}i.m=e,t=[],i.O=(e,n,s,o)=>{if(!n){var a=1/0;for(c=0;c<t.length;c++){for(var[n,s,o]=t[c],r=!0,l=0;l<n.length;l++)(!1&o||a>=o)&&Object.keys(i.O).every((t=>i.O[t](n[l])))?n.splice(l--,1):(r=!1,o<a&&(a=o));if(r){t.splice(c--,1);var u=s();void 0!==u&&(e=u)}}return e}o=o||0;for(var c=t.length;c>0&&t[c-1][2]>o;c--)t[c]=t[c-1];t[c]=[n,s,o]},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{var t={355:0,392:0};i.O.j=e=>0===t[e];var e=(e,n)=>{var s,o,[a,r,l]=n,u=0;if(a.some((e=>0!==t[e]))){for(s in r)i.o(r,s)&&(i.m[s]=r[s]);if(l)var c=l(i)}for(e&&e(n);u<a.length;u++)o=a[u],i.o(t,o)&&t[o]&&t[o][0](),t[o]=0;return i.O(c)},n=self.webpackChunkbiigle_largo=self.webpackChunkbiigle_largo||[];n.forEach(e.bind(null,0)),n.push=e.bind(null,n.push.bind(n))})(),i.O(void 0,[392],(()=>i(67)));var s=i.O(void 0,[392],(()=>i(401)));s=i.O(s)})();
\ No newline at end of file
diff --git a/src/public/assets/styles/main.css b/src/public/assets/styles/main.css
index e4146932..fa538f45 100644
--- a/src/public/assets/styles/main.css
+++ b/src/public/assets/styles/main.css
@@ -1 +1 @@
-.navbar-text.navbar-largo-breadcrumbs,.navbar-text.navbar-largo-breadcrumbs a{color:#ccc}.largo-images__alerts{align-items:center;display:flex;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;transition:background-color .25s ease;width:100%;z-index:2}.largo-images__alerts.block{background-color:rgba(0,0,0,.5);pointer-events:auto}.sidebar__tab--open.largo-tab{display:flex!important;flex-direction:column}.sidebar__tab--open.largo-tab .largo-tab__button{padding-bottom:10px}.sidebar__tab--open.largo-tab .largo-tab__label-trees{flex:1;overflow:auto}.image-grid__image--largo .outlines{height:calc(100% - 4px);left:2px;pointer-events:none;position:absolute;top:2px;width:calc(100% - 4px)}.image-grid__image--catalog>a{width:100%}.image-grid__image--relabel .new-label{bottom:0;left:0;overflow-x:hidden;padding:.5em;pointer-events:none;position:absolute;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%}.image-grid__image--relabel .new-label__name{padding-right:16px}.image-grid__image--relabel .new-label__color{border:2px solid #eee;border-radius:50%;display:inline-block;height:1em;vertical-align:middle;width:1em}.largo-example-annotations .largo-example-annotations__images{margin-right:-1em;overflow-x:auto;white-space:nowrap}.largo-example-annotations .largo-example-annotation{image-orientation:none;height:125px;width:auto}.largo-example-annotations .largo-example-annotation:not(:last-child){margin-right:.5em}.largo-example-annotations .alert{margin-bottom:0}
+.navbar-text.navbar-largo-breadcrumbs,.navbar-text.navbar-largo-breadcrumbs a{color:#ccc}.largo-images__alerts{align-items:center;display:flex;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;transition:background-color .25s ease;width:100%;z-index:2}.largo-images__alerts.block{background-color:rgba(0,0,0,.5);pointer-events:auto}.sidebar__tab--open.largo-tab{display:flex!important;flex-direction:column}.sidebar__tab--open.largo-tab .largo-tab__button{padding-bottom:10px}.sidebar__tab--open.largo-tab .largo-tab__label-trees{flex:1;overflow:auto}.image-grid__image--largo .outlines{height:calc(100% - 4px);left:2px;pointer-events:none;position:absolute;top:2px;width:calc(100% - 4px)}.image-grid__image--largo .image-buttons-bottom{bottom:6px;position:absolute;right:6px}.image-grid__image--catalog>a{width:100%}.image-grid__image--relabel .new-label{bottom:0;left:0;overflow-x:hidden;padding:.5em;pointer-events:none;position:absolute;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%}.image-grid__image--relabel .new-label__name{padding-right:16px}.image-grid__image--relabel .new-label__color{border:2px solid #eee;border-radius:50%;display:inline-block;height:1em;vertical-align:middle;width:1em}.largo-example-annotations .largo-example-annotations__images{margin-right:-1em;overflow-x:auto;white-space:nowrap}.largo-example-annotations .largo-example-annotation{image-orientation:none;height:125px;width:auto}.largo-example-annotations .largo-example-annotation:not(:last-child){margin-right:.5em}.largo-example-annotations .alert{margin-bottom:0}
diff --git a/src/public/mix-manifest.json b/src/public/mix-manifest.json
index ab8337a3..efdc1799 100644
--- a/src/public/mix-manifest.json
+++ b/src/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/assets/scripts/main.js": "/assets/scripts/main.js?id=9d428530385ad8ea4cbd82e4600d8cd0",
-    "/assets/styles/main.css": "/assets/styles/main.css?id=f5673570cda3cacb644da42a2840c218"
+    "/assets/scripts/main.js": "/assets/scripts/main.js?id=608af5558117398ca4c3d3598a905abb",
+    "/assets/styles/main.css": "/assets/styles/main.css?id=5295955359904ac00dbeabaf613c5792"
 }
diff --git a/src/resources/assets/js/api/projects.js b/src/resources/assets/js/api/projects.js
index 5cbb196e..2c9d31d2 100644
--- a/src/resources/assets/js/api/projects.js
+++ b/src/resources/assets/js/api/projects.js
@@ -27,4 +27,8 @@ export default Vue.resource('api/v1/projects{/id}/largo', {}, {
         method: 'GET',
         url: 'api/v1/projects{/id}/annotations/sort/outliers{/label_id}',
     },
+    sortAnnotationsBySimilarity: {
+        method: 'GET',
+        url: 'api/v1/projects{/id}/annotations/sort/similarity',
+    },
 });
diff --git a/src/resources/assets/js/api/volumes.js b/src/resources/assets/js/api/volumes.js
index 62542e72..cd27cdf4 100644
--- a/src/resources/assets/js/api/volumes.js
+++ b/src/resources/assets/js/api/volumes.js
@@ -35,4 +35,8 @@ export default Vue.resource('api/v1/volumes{/id}/largo', {}, {
         method: 'GET',
         url: 'api/v1/volumes{/id}/annotations/sort/outliers{/label_id}',
     },
+    sortAnnotationsBySimilarity: {
+        method: 'GET',
+        url: 'api/v1/volumes{/id}/annotations/sort/similarity',
+    },
 });
diff --git a/src/resources/assets/js/components/dismissImageGridImage.vue b/src/resources/assets/js/components/dismissImageGridImage.vue
index 03187fd0..6b3828b2 100644
--- a/src/resources/assets/js/components/dismissImageGridImage.vue
+++ b/src/resources/assets/js/components/dismissImageGridImage.vue
@@ -1,10 +1,26 @@
 <template>
-    <figure class="image-grid__image image-grid__image--largo" :class="classObject" :title="title">
+    <figure
+        class="image-grid__image image-grid__image--largo"
+        :class="classObject"
+        :title="title"
+        >
         <div v-if="selectable" class="image-icon">
             <i class="fas" :class="iconClass"></i>
         </div>
         <img :src="srcUrl" @error="showEmptyImage" @click="toggleSelect">
         <img v-if="this.showAnnotationOutlines" v-show="overlayIsLoaded" :src="svgSrcUrl" @error="handleOverlayError" @load="handleOverlayLoad" class="outlines">
+        <div
+            v-if="pinnable || isPinned"
+            class="image-buttons-bottom"
+            >
+            <button
+                class="image-button image-button__pin"
+                @click="emitPin"
+                :title="pinTitle"
+                >
+                <span class="fa fa-thumbtack fa-fw"></span>
+            </button>
+        </div>
         <div v-if="showAnnotationLink" class="image-buttons">
             <a :href="showAnnotationLink" target="_blank" class="image-button"
                 title="Show the annotation in the annotation tool">
@@ -46,6 +62,13 @@ export default {
         title() {
             return this.selected ? 'Undo dismissing this annotation' : 'Dismiss this annotation';
         },
+        pinTitle() {
+            if (this.isPinned) {
+                return 'Reset sorting';
+            }
+
+            return 'Select as reference (sort by similarity)';
+        },
         svgSrcUrl() {
             // Replace file extension by svg file format
             return this.srcUrl.replace(/.[A-Za-z]*$/, '.svg');
diff --git a/src/resources/assets/js/components/sortingTab.vue b/src/resources/assets/js/components/sortingTab.vue
index c28c3013..80b6c372 100644
--- a/src/resources/assets/js/components/sortingTab.vue
+++ b/src/resources/assets/js/components/sortingTab.vue
@@ -50,7 +50,31 @@
                 >
                 Outliers
             </button>
+            <a
+                class="list-group-item"
+                title="Sort by similarity (higher is more similar)"
+                href="#"
+                :class="{
+                    active: sortingBySimilarity,
+                    'list-group-item-warning': needsSimilarityReference
+                }"
+                @click.prevent="initializeSortBySimilarity"
+                >
+                <button
+                    v-if="needsSimilarityReference"
+                    class="btn btn-default btn-xs pull-right"
+                    title="Cancel selecting a reference annotation"
+                    @click.stop="cancelSortBySimilarity"
+                    >
+                    <i class="fa fa-undo"></i>
+                </button>
+                Similarity
+                <p v-if="needsSimilarityReference">
+                    Select a reference annotation with a click on the <i class="fa fa-thumbtack fa-fw"></i> button.
+                </p>
+            </a>
         </div>
+
     </div>
 </template>
 
@@ -64,14 +88,23 @@ export const SORT_DIRECTION = {
 export const SORT_KEY = {
     ANNOTATION_ID: 0,
     OUTLIER: 1,
+    SIMILARITY: 2,
 };
 
 export default {
-    data() {
-        return {
-            sortDirection: SORT_DIRECTION.DESCENDING,
-            sortKey: SORT_KEY.ANNOTATION_ID,
-        };
+    props: {
+        sortKey: {
+            type: Number,
+            required: true,
+        },
+        sortDirection: {
+            type: Number,
+            required: true,
+        },
+        needsSimilarityReference: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         sortedAscending() {
@@ -86,31 +119,40 @@ export default {
         sortingByOutlier() {
             return this.sortKey === SORT_KEY.OUTLIER;
         },
+        sortingBySimilarity() {
+            return this.sortKey === SORT_KEY.SIMILARITY;
+        },
     },
     methods: {
         sortAscending() {
-            this.sortDirection = SORT_DIRECTION.ASCENDING;
+            this.$emit('change-direction', SORT_DIRECTION.ASCENDING);
         },
         sortDescending() {
-            this.sortDirection = SORT_DIRECTION.DESCENDING;
+            this.$emit('change-direction', SORT_DIRECTION.DESCENDING);
         },
         reset() {
             this.sortDescending();
             this.sortByAnnotationId();
         },
         sortByAnnotationId() {
-            this.sortKey = SORT_KEY.ANNOTATION_ID;
+            this.$emit('change-key', SORT_KEY.ANNOTATION_ID);
+
+            if (this.needsSimilarityReference) {
+                this.cancelSortBySimilarity();
+            }
         },
         sortByOutlier() {
-            this.sortKey = SORT_KEY.OUTLIER;
+            this.$emit('change-key', SORT_KEY.OUTLIER);
+
+            if (this.needsSimilarityReference) {
+                this.cancelSortBySimilarity();
+            }
         },
-    },
-    watch: {
-        sortDirection(direction) {
-            this.$emit('change-direction', direction);
+        initializeSortBySimilarity() {
+            this.$emit('init-similarity');
         },
-        sortKey(key) {
-            this.$emit('change-key', key);
+        cancelSortBySimilarity() {
+            this.$emit('cancel-similarity');
         },
     },
 };
diff --git a/src/resources/assets/js/largoContainer.vue b/src/resources/assets/js/largoContainer.vue
index c5e8b3c0..949ffffc 100644
--- a/src/resources/assets/js/largoContainer.vue
+++ b/src/resources/assets/js/largoContainer.vue
@@ -33,18 +33,23 @@ export default {
         },
         querySortByOutlier(labelId) {
             return VolumesApi.sortAnnotationsByOutlier({id: this.volumeId, label_id: labelId})
-                .then((response) => {
-                    // The sorting expects annotation IDs prefixed with 'i' or 'v' so it
-                    // can work with mixed image and video annotations.
-                    if (this.mediaType === 'image') {
-                        response.body = response.body.map(id => 'i' + id);
-                    } else {
-                        response.body = response.body.map(id => 'v' + id);
-                    }
-
-                    return response;
-                });
+                .then(this.parseSortingQuery);
+        },
+        querySortBySimilarity(labelId, reference) {
+            return VolumesApi.sortAnnotationsBySimilarity({id: this.volumeId, label_id: labelId, annotation_id: reference.id})
+                .then(this.parseSortingQuery);
         },
+        parseSortingQuery(response) {
+            // The sorting expects annotation IDs prefixed with 'i' or 'v' so it
+            // can work with mixed image and video annotations.
+            if (this.mediaType === 'image') {
+                response.body = response.body.map(id => 'i' + id);
+            } else {
+                response.body = response.body.map(id => 'v' + id);
+            }
+
+            return response;
+        }
     },
     created() {
         this.volumeId = biigle.$require('largo.volumeId');
diff --git a/src/resources/assets/js/mixins/largoContainer.vue b/src/resources/assets/js/mixins/largoContainer.vue
index e5f011e5..c66488b9 100644
--- a/src/resources/assets/js/mixins/largoContainer.vue
+++ b/src/resources/assets/js/mixins/largoContainer.vue
@@ -45,8 +45,12 @@ export default {
             // The second level key is the sorting key. The cached value is an array
             // of annotation IDs sorted in ascending order.
             sortingSequenceCache: {},
+            sortingSequence: [],
             sortingDirection: SORT_DIRECTION.DESCENDING,
             sortingKey: SORT_KEY.ANNOTATION_ID,
+            needsSimilarityReference: false,
+            similarityReference: null,
+            pinnedImage: null,
         };
     },
     provide() {
@@ -75,25 +79,26 @@ export default {
             return [];
         },
         sortedAnnotations() {
-            let annotations = this.annotations.slice();
+            let annotations = this.annotations;
 
-            // This will always be missing for the default sorting.
-            const sequence = this.sortingSequenceCache?.[this.selectedLabel?.id]?.[this.sortingKey];
+            if (annotations.length === 0) {
+                return annotations;
+            }
 
-            if (sequence) {
+            // This will be empty for the default sorting.
+            if (this.sortingSequence.length > 0) {
                 const map = {};
-                sequence.forEach((id, idx) => map[id] = idx);
+                annotations.forEach((a) => {
+                    // Image annotation IDs are prefixed with 'i', video annotations with
+                    // 'v' to avoid duplicate IDs whe sorting both types of annotations.
+                    map[a.type === VIDEO_ANNOTATION ? ('v' + a.id) : ('i' + a.id)] = a;
+                });
 
-                // 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)]
-                );
+                annotations = this.sortingSequence.map(id => map[id]);
             }
 
             if (this.sortingDirection === SORT_DIRECTION.ASCENDING) {
-                return annotations.reverse();
+                return annotations.slice().reverse();
             }
 
             return annotations;
@@ -148,6 +153,9 @@ export default {
         sortingIsActive() {
             return this.isInDismissStep && (this.sortingKey !== SORT_KEY.ANNOTATION_ID || this.sortingDirection !== SORT_DIRECTION.DESCENDING);
         },
+        imagesPinnable() {
+            return this.needsSimilarityReference || this.sortingKey === SORT_KEY.SIMILARITY;
+        },
     },
     methods: {
         getAnnotations(label) {
@@ -163,13 +171,11 @@ export default {
                 promise1 = Vue.Promise.resolve();
             }
 
-            const sequence = this.sortingSequenceCache?.[label.id]?.[this.sortingKey];
-            if (this.sortingIsActive && !sequence) {
-                if (!this.loading) {
-                    this.startLoading();
-                }
-                promise2 = this.fetchSortingSequence(this.sortingKey, label.id)
-                    .catch(handleErrorResponse);
+            if (this.sortingKey === SORT_KEY.SIMILARITY) {
+                promise2 = this.resetSorting();
+            } else if (this.sortingIsActive) {
+                // Reload sequence for new label.
+                promise2 = this.updateSortKey(this.sortingKey);
             } else {
                 promise2 = Vue.Promise.resolve();
             }
@@ -387,10 +393,19 @@ export default {
             this.sortingDirection = direction;
         },
         fetchSortingSequence(key, labelId) {
+            const sequence = this.sortingSequenceCache?.[labelId]?.[key];
+            if (sequence) {
+                return Vue.Promise.resolve(sequence);
+            }
+
             let promise;
             if (key === SORT_KEY.OUTLIER) {
                 promise = this.querySortByOutlier(labelId)
                     .then(response => response.body);
+            } else if (key === SORT_KEY.SIMILARITY) {
+                // Skip cacheing for this sorting method.
+                return this.querySortBySimilarity(labelId, this.similarityReference)
+                    .then(response => response.body);
             } else {
                 promise = Vue.Promise.resolve([]);
             }
@@ -403,20 +418,52 @@ export default {
             }
 
             this.sortingSequenceCache[labelId][key] = sequence;
+
+            return sequence;
         },
         updateSortKey(key) {
+            if (key !== SORT_KEY.SIMILARITY) {
+                this.similarityReference = null;
+                this.pinnedImage = null;
+            }
+
             const labelId = this.selectedLabel?.id;
-            const sequence = this.sortingSequenceCache?.[labelId]?.[key];
-            if (labelId && !sequence) {
-                this.startLoading();
-                this.fetchSortingSequence(key, labelId)
-                    .then(() => this.sortingKey = key)
-                    .catch(handleErrorResponse)
-                    .finally(this.finishLoading);
-            } else {
-                this.sortingKey = key;
+            this.startLoading();
+            return this.fetchSortingSequence(key, labelId)
+                .then((sequence) => {
+                    this.sortingKey = key;
+                    this.sortingSequence = sequence;
+                    if (key === SORT_KEY.SIMILARITY) {
+                        this.needsSimilarityReference = false;
+                        this.pinnedImage = this.similarityReference;
+                    }
+                })
+                .catch((r) => {
+                    this.handleErrorResponse(r);
+                    this.similarityReference = null;
+                })
+                .finally(this.finishLoading);
+        },
+        handleInitSimilaritySort() {
+            if (this.sortingKey !== SORT_KEY.SIMILARITY) {
+                this.needsSimilarityReference = true;
+            }
+        },
+        handleCancelSimilaritySort() {
+            this.needsSimilarityReference = false;
+        },
+        handlePinImage(image) {
+            if (this.pinnedImage?.id === image.id) {
+                this.resetSorting();
+            } else if (this.imagesPinnable) {
+                this.similarityReference = image;
+                this.updateSortKey(SORT_KEY.SIMILARITY);
             }
         },
+        resetSorting() {
+            return this.updateSortKey(SORT_KEY.ANNOTATION_ID)
+                .then(() => this.sortingDirection = SORT_DIRECTION.DESCENDING);
+        },
     },
     watch: {
         annotations(annotations) {
diff --git a/src/resources/assets/js/projectLargoContainer.vue b/src/resources/assets/js/projectLargoContainer.vue
index ba221c5b..c3c03ec2 100644
--- a/src/resources/assets/js/projectLargoContainer.vue
+++ b/src/resources/assets/js/projectLargoContainer.vue
@@ -1,6 +1,7 @@
 <script>
 import LargoContainer from './mixins/largoContainer';
 import ProjectsApi from './api/projects';
+import {IMAGE_ANNOTATION} from './constants';
 
 /**
  * View model for the main Largo container (for projects)
@@ -26,6 +27,20 @@ export default {
         querySortByOutlier(labelId) {
             return ProjectsApi.sortAnnotationsByOutlier({id: this.projectId, label_id: labelId});
         },
+        querySortBySimilarity(labelId, reference) {
+            let params = {
+                id: this.projectId,
+                label_id: labelId,
+            };
+
+            if (reference.type === IMAGE_ANNOTATION) {
+                params.image_annotation_id = reference.id;
+            } else {
+                params.video_annotation_id = reference.id;
+            }
+
+            return ProjectsApi.sortAnnotationsBySimilarity(params);
+        },
     },
     created() {
         this.projectId = biigle.$require('largo.projectId');
diff --git a/src/resources/assets/sass/main.scss b/src/resources/assets/sass/main.scss
index c7a9f30f..2304fa8c 100644
--- a/src/resources/assets/sass/main.scss
+++ b/src/resources/assets/sass/main.scss
@@ -49,6 +49,12 @@
         width: calc(100% - 4px);
         height: calc(100% - 4px);
     }
+
+    .image-buttons-bottom {
+        position: absolute;
+        right: 6px;
+        bottom: 6px;
+    }
 }
 
 .image-grid__image--catalog {
diff --git a/src/resources/views/manual/tutorials/largo.blade.php b/src/resources/views/manual/tutorials/largo.blade.php
index df8546cf..a7fc074f 100644
--- a/src/resources/views/manual/tutorials/largo.blade.php
+++ b/src/resources/views/manual/tutorials/largo.blade.php
@@ -122,6 +122,14 @@
                     Sorting by unusual annotation patches can help you to quickly identify errors. If most of the patches show objects with a similar visual appearance, those patches that show different objects will be shown at the top and you can quickly select them.
                 </p>
             </li>
+            <li>
+                <p>
+                    <strong>Similarity</strong>: Sort the annotation patches by similarity to a reference annotation. When this sorting method is selected, you have to select a reference annotation by clicking on the <button class="btn btn-default btn-xs"><i class="fa fa-thumbtack fa-fw"></i></button> button of an annotation patch next. Once the reference annotation is selected, the patches are sorted. In descending order, the annotations looking most similar to the reference annotation are shown first.
+                </p>
+                <p>
+                    The selected reference annotation will be pinned to the top left of the grid of annotation patches. You can select a new reference annotation by clicking on its <button class="btn btn-default btn-xs"><i class="fa fa-thumbtack fa-fw"></i></button> button. If you select a different label while similarity sorting is active, the sorting method will be reset, as the reference annotation is no longer available.
+                </p>
+            </li>
         </ul>
 
         <h4>Settings</h4>
diff --git a/src/resources/views/show/content.blade.php b/src/resources/views/show/content.blade.php
index 08b1f757..1ddbe3df 100644
--- a/src/resources/views/show/content.blade.php
+++ b/src/resources/views/show/content.blade.php
@@ -1,6 +1,28 @@
 <div class="sidebar-container__content">
-    <dismiss-image-grid v-if="isInDismissStep" ref="dismissGrid" :images="sortedAnnotations" empty-url="{{ asset(config('thumbnails.empty_url')) }}" :width="{{config('thumbnails.width')}}" :height="{{config('thumbnails.height')}}" v-on:select="handleSelectedImageDismiss" :selectable="true" selected-icon="times"></dismiss-image-grid>
-    <relabel-image-grid v-cloak v-else :images="dismissedAnnotations" empty-url="{{ asset(config('thumbnails.empty_url')) }}" :width="{{config('thumbnails.width')}}" :height="{{config('thumbnails.height')}}" v-on:select="handleSelectedImageRelabel" :selectable="true"></relabel-image-grid>
+    <dismiss-image-grid
+        v-if="isInDismissStep"
+        ref="dismissGrid"
+        empty-url="{{ asset(config('thumbnails.empty_url')) }}"
+        selected-icon="times"
+        :images="sortedAnnotations"
+        :width="{{config('thumbnails.width')}}"
+        :height="{{config('thumbnails.height')}}"
+        :selectable="true"
+        :pinnable="imagesPinnable"
+        :pinned-image="pinnedImage"
+        v-on:select="handleSelectedImageDismiss"
+        v-on:pin="handlePinImage"
+        ></dismiss-image-grid>
+    <relabel-image-grid
+        v-cloak
+        v-else
+        empty-url="{{ asset(config('thumbnails.empty_url')) }}"
+        :images="dismissedAnnotations"
+        :width="{{config('thumbnails.width')}}"
+        :height="{{config('thumbnails.height')}}"
+        :selectable="true"
+        v-on:select="handleSelectedImageRelabel"
+        ></relabel-image-grid>
     <div class="largo-images__alerts" :class="{block: loading}">
         <div v-cloak v-if="loading">
             <loader :active="true" :fancy="true"></loader>
@@ -36,8 +58,13 @@
     </sidebar-tab>
     <sidebar-tab :disabled="isInRelabelStep" name="sorting" icon="exchange-alt fa-rotate-90" title="Sort patches" :highlight="sortingIsActive">
         <sorting-tab
+            :needs-similarity-reference="needsSimilarityReference"
+            :sort-key="sortingKey"
+            :sort-direction="sortingDirection"
             v-on:change-direction="updateSortDirection"
             v-on:change-key="updateSortKey"
+            v-on:init-similarity="handleInitSimilaritySort"
+            v-on:cancel-similarity="handleCancelSimilaritySort"
             ></sorting-tab>
     </sidebar-tab>
     <sidebar-tab name="settings" icon="cog" title="Settings">
diff --git a/tests/Http/Controllers/Api/Projects/SortAnnotationsBySimilarityControllerTest.php b/tests/Http/Controllers/Api/Projects/SortAnnotationsBySimilarityControllerTest.php
new file mode 100644
index 00000000..bc0a335f
--- /dev/null
+++ b/tests/Http/Controllers/Api/Projects/SortAnnotationsBySimilarityControllerTest.php
@@ -0,0 +1,118 @@
+<?php
+
+namespace Biigle\Tests\Modules\Largo\Http\Controllers\Api\Projects;
+
+use ApiTestCase;
+use Biigle\MediaType;
+use Biigle\Volume;
+use Biigle\Modules\Largo\ImageAnnotationLabelFeatureVector;
+use Biigle\Modules\Largo\VideoAnnotationLabelFeatureVector;
+
+class SortAnnotationsBySimilarityControllerTest extends ApiTestCase
+{
+    public function testIndex()
+    {
+        $id = $this->project()->id;
+
+        $v1 = Volume::factory()->create();
+        $this->project()->addVolumeId($v1->id);
+
+        $l1 = ImageAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $v1->id,
+        ]);
+        $l2 = ImageAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $v1->id,
+            'label_id' => $l1->label_id,
+        ]);
+        $l3 = ImageAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $v1->id,
+            'label_id' => $l1->label_id,
+            // The other feature vectors are identical so this one will be an outlier.
+            'vector' => range(1, 384),
+        ]);
+        $l4 = ImageAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $v1->id,
+        ]);
+
+        $v2 = Volume::factory()->create(['media_type_id' => MediaType::videoId()]);
+        $this->project()->addVolumeId($v2->id);
+
+        $l5 = VideoAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $v2->id,
+            'label_id' => $l1->label_id,
+        ]);
+        $l6 = VideoAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $v2->id,
+            'label_id' => $l1->label_id,
+            'vector' => range(1, 384),
+        ]);
+
+        // Annotations from other volume should not appear.
+        $l7 = ImageAnnotationLabelFeatureVector::factory()->create();
+        VideoAnnotationLabelFeatureVector::factory()->create();
+
+        $this->doTestApiRoute('GET', "/api/v1/projects/{$id}/annotations/sort/similarity");
+
+        $this->beUser();
+        $this->get("/api/v1/projects/{$id}/annotations/sort/similarity")
+            ->assertStatus(403);
+
+        $this->beGuest();
+
+        // Missing arguments.
+        $this->getJson("/api/v1/projects/{$id}/annotations/sort/similarity")
+            ->assertStatus(422);
+
+        // Label ID does not fit to annotation ID.
+        $this->call('GET', "/api/v1/projects/{$id}/annotations/sort/similarity", [
+                'label_id' => $l4->label_id,
+                'image_annotation_id' => $l1->annotation_id,
+            ])
+            ->assertStatus(302);
+
+        // Annotation does not belong to project.
+        $this->call('GET', "/api/v1/projects/{$id}/annotations/sort/similarity", [
+                'label_id' => $l7->label_id,
+                'image_annotation_id' => $l7->annotation_id,
+            ])
+            ->assertStatus(302);
+
+        $this->call('GET', "/api/v1/projects/{$id}/annotations/sort/similarity", [
+                'label_id' => $l1->label_id,
+                'image_annotation_id' => $l1->annotation_id,
+            ])
+            ->assertStatus(200)
+            ->assertExactJson([
+                'v'.$l5->annotation_id,
+                'i'.$l2->annotation_id,
+                'v'.$l6->annotation_id,
+                'i'.$l3->annotation_id,
+            ]);
+    }
+
+    public function testIndexDuplicate()
+    {
+        $id = $this->project()->id;
+        $vid = $this->volume(['media_type_id' => MediaType::videoId()])->id;
+        $l1 = VideoAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $vid,
+        ]);
+        $l2 = VideoAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $vid,
+            'label_id' => $l1->label_id,
+            'annotation_id' => $l1->annotation_id,
+        ]);
+        $l3 = VideoAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $vid,
+            'label_id' => $l1->label_id,
+        ]);
+
+        $this->beEditor();
+        $this->call('GET', "/api/v1/projects/{$id}/annotations/sort/similarity", [
+                'label_id' => $l3->label_id,
+                'video_annotation_id' => $l3->annotation_id,
+            ])
+            ->assertStatus(200)
+            ->assertExactJson(['v'.$l2->annotation_id]);
+    }
+}
diff --git a/tests/Http/Controllers/Api/Volumes/SortAnnotationsBySimilarityControllerTest.php b/tests/Http/Controllers/Api/Volumes/SortAnnotationsBySimilarityControllerTest.php
new file mode 100644
index 00000000..e42b4fa4
--- /dev/null
+++ b/tests/Http/Controllers/Api/Volumes/SortAnnotationsBySimilarityControllerTest.php
@@ -0,0 +1,184 @@
+<?php
+
+namespace Biigle\Tests\Modules\Largo\Http\Controllers\Api\Volumes;
+
+use ApiTestCase;
+use Biigle\MediaType;
+use Biigle\Modules\Largo\ImageAnnotationLabelFeatureVector;
+use Biigle\Modules\Largo\VideoAnnotationLabelFeatureVector;
+
+class SortAnnotationsBySimilarityControllerTest extends ApiTestCase
+{
+    public function testIndexImage()
+    {
+        $id = $this->volume()->id;
+        $l1 = ImageAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+        ]);
+        $l2 = ImageAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+            'label_id' => $l1->label_id,
+        ]);
+        $l3 = ImageAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+            'label_id' => $l1->label_id,
+            // The other feature vectors are identical so this one will be an outlier.
+            'vector' => range(1, 384),
+        ]);
+        $l4 = ImageAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+        ]);
+
+        // Annotations from other volume should not appear.
+        $l5 = ImageAnnotationLabelFeatureVector::factory()->create();
+
+        $this->doTestApiRoute('GET', "/api/v1/volumes/{$id}/annotations/sort/similarity");
+
+        $this->beUser();
+        $this->get("/api/v1/volumes/{$id}/annotations/sort/similarity")
+            ->assertStatus(403);
+
+        $this->beGuest();
+
+        // Missing arguments.
+        $this->getJson("/api/v1/volumes/{$id}/annotations/sort/similarity")
+            ->assertStatus(422);
+
+        // Label ID does not fit to annotation ID.
+        $this->call('GET', "/api/v1/volumes/{$id}/annotations/sort/similarity", [
+                'label_id' => $l4->label_id,
+                'annotation_id' => $l1->annotation_id,
+            ])
+            ->assertStatus(302);
+
+        // Annotation does not belong to volume.
+        $this->call('GET', "/api/v1/volumes/{$id}/annotations/sort/similarity", [
+                'label_id' => $l5->label_id,
+                'annotation_id' => $l5->annotation_id,
+            ])
+            ->assertStatus(302);
+
+        $this->call('GET', "/api/v1/volumes/{$id}/annotations/sort/similarity", [
+                'label_id' => $l1->label_id,
+                'annotation_id' => $l1->annotation_id,
+            ])
+            ->assertStatus(200)
+            ->assertExactJson([
+                $l2->annotation_id,
+                $l3->annotation_id,
+            ]);
+
+    }
+
+    public function testIndexDuplicateImage()
+    {
+        $id = $this->volume()->id;
+        $l1 = ImageAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+        ]);
+        $l2 = ImageAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+            'label_id' => $l1->label_id,
+            'annotation_id' => $l1->annotation_id,
+        ]);
+        $l3 = ImageAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+            'label_id' => $l1->label_id,
+            'annotation_id' => $l1->annotation_id,
+        ]);
+
+        $this->beEditor();
+        $this->call('GET', "/api/v1/volumes/{$id}/annotations/sort/similarity", [
+                'label_id' => $l1->label_id,
+                'annotation_id' => $l1->annotation_id,
+            ])
+            ->assertStatus(200)
+            ->assertExactJson([$l3->annotation_id]);
+    }
+
+    public function testIndexVideo()
+    {
+        $id = $this->volume(['media_type_id' => MediaType::videoId()])->id;
+        $l1 = VideoAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+        ]);
+        $l2 = VideoAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+            'label_id' => $l1->label_id,
+        ]);
+        $l3 = VideoAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+            'label_id' => $l1->label_id,
+            // The other feature vectors are identical so this one will be an outlier.
+            'vector' => range(1, 384),
+        ]);
+        $l4 = VideoAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+        ]);
+
+        // Annotations from other volume should not appear.
+        $l5 = VideoAnnotationLabelFeatureVector::factory()->create();
+
+        $this->doTestApiRoute('GET', "/api/v1/volumes/{$id}/annotations/sort/similarity");
+
+        $this->beUser();
+        $this->get("/api/v1/volumes/{$id}/annotations/sort/similarity")
+            ->assertStatus(403);
+
+        $this->beGuest();
+
+        // Missing arguments.
+        $this->getJson("/api/v1/volumes/{$id}/annotations/sort/similarity")
+            ->assertStatus(422);
+
+        // Label ID does not fit to annotation ID.
+        $this->call('GET', "/api/v1/volumes/{$id}/annotations/sort/similarity", [
+                'label_id' => $l4->label_id,
+                'annotation_id' => $l1->annotation_id,
+            ])
+            ->assertStatus(302);
+
+        // Annotation does not belong to volume.
+        $this->call('GET', "/api/v1/volumes/{$id}/annotations/sort/similarity", [
+                'label_id' => $l5->label_id,
+                'annotation_id' => $l5->annotation_id,
+            ])
+            ->assertStatus(302);
+
+        $this->call('GET', "/api/v1/volumes/{$id}/annotations/sort/similarity", [
+                'label_id' => $l1->label_id,
+                'annotation_id' => $l1->annotation_id,
+            ])
+            ->assertStatus(200)
+            ->assertExactJson([
+                $l2->annotation_id,
+                $l3->annotation_id,
+            ]);
+    }
+
+    public function testIndexDuplicateVideo()
+    {
+        $id = $this->volume(['media_type_id' => MediaType::videoId()])->id;
+        $l1 = VideoAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+        ]);
+        $l2 = VideoAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+            'label_id' => $l1->label_id,
+            'annotation_id' => $l1->annotation_id,
+        ]);
+        $l3 = VideoAnnotationLabelFeatureVector::factory()->create([
+            'volume_id' => $id,
+            'label_id' => $l1->label_id,
+            'annotation_id' => $l1->annotation_id,
+        ]);
+
+        $this->beEditor();
+        $this->call('GET', "/api/v1/volumes/{$id}/annotations/sort/similarity", [
+                'label_id' => $l1->label_id,
+                'annotation_id' => $l1->annotation_id,
+            ])
+            ->assertStatus(200)
+            ->assertExactJson([$l3->annotation_id]);
+    }
+}