From 4d0bf028885f7b09e7e6017994ac7c27b77b5a5d Mon Sep 17 00:00:00 2001
From: Zdenek Kasner <zdenek.kasner@gmail.com>
Date: Thu, 30 Jan 2025 14:17:57 +0100
Subject: [PATCH] Sort annotator ids in browse view

---
 factgenie/static/js/browse.js         | 8 ++++++--
 factgenie/templates/pages/browse.html | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/factgenie/static/js/browse.js b/factgenie/static/js/browse.js
index 17ffee8..816e0f9 100644
--- a/factgenie/static/js/browse.js
+++ b/factgenie/static/js/browse.js
@@ -96,12 +96,15 @@ function createOutputBoxes(generated_outputs, highlight_setup_id) {
             annIds.set(ann_id, { "campaign_id": campaign_id, "annotator_group": annotator_group });
         });
     });
+
     const selectBox = $("#annotations-select");
     // clear the selectbox
     selectBox.empty();
 
+    const sortedAnnIds = Array.from(annIds.keys()).sort();
+
     // add an option for each campaign id
-    for (const [ann_id, { campaign_id, annotator_group }] of annIds) {
+    for (const ann_id of sortedAnnIds) {
         const button = $(`<button type="button" class="btn btn-sm btn-primary btn-ann-select" data-ann="${ann_id}">${ann_id}</button>`);
         button.on('click', function () {
             $(this).toggleClass('active');
@@ -124,7 +127,8 @@ function createOutputBoxes(generated_outputs, highlight_setup_id) {
         card = createOutputBox(plain_output, null, "original", output.setup_id);
         card.appendTo(groupDiv);
 
-        for (const [annId, { campaign_id, annotator_group }] of annIds) {
+        for (const annId of sortedAnnIds) {
+            const { campaign_id, annotator_group } = annIds.get(annId);
             annotations = output.annotations.filter(a => a.campaign_id == campaign_id && a.annotator_group == annotator_group)[0];
 
             const annotated_output = getAnnotatedOutput(output, annId, annotations);
diff --git a/factgenie/templates/pages/browse.html b/factgenie/templates/pages/browse.html
index 4b9ed1e..a83e72a 100755
--- a/factgenie/templates/pages/browse.html
+++ b/factgenie/templates/pages/browse.html
@@ -122,7 +122,7 @@
           <div id='setuparea' style="display: none">
             <div class="mb-1 d-flex align-items-center justify-content-between">
               <small class="text-muted">
-                <i class="fa fa-pencil"></i> Annotations (click to show)
+                <i class="fa fa-pencil"></i> Annotations
               </small>
               <!-- <div class="form-check form-switch">
                 <input class="form-check-input" type="checkbox" role="switch" id="badgesSwitch">