From 999d41969882555dc3c8d3360f5d5a39978356da Mon Sep 17 00:00:00 2001
From: Zdenek Kasner <zdenek.kasner@gmail.com>
Date: Mon, 23 Dec 2024 18:10:40 +0100
Subject: [PATCH] Minor fixes

---
 factgenie/static/js/campaigns.js              |  8 ++-
 factgenie/static/js/example-annotation.js     | 52 +++++++++++++------
 factgenie/static/js/span-annotator.js         |  3 ++
 .../crowdsourcing/annotate_body.html          |  2 +-
 .../templates/pages/crowdsourcing_new.html    |  1 -
 5 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/factgenie/static/js/campaigns.js b/factgenie/static/js/campaigns.js
index 56004eb..89a173b 100644
--- a/factgenie/static/js/campaigns.js
+++ b/factgenie/static/js/campaigns.js
@@ -53,6 +53,12 @@ function createLLMCampaign() {
     const config = gatherConfig();
     var campaignData = gatherSelectedCombinations();
 
+    // if no annotation categories are created, show an alert
+    if (mode != "llm_gen" && config.annotationSpanCategories.length == 0) {
+        alert("Please add at least one annotation span category.");
+        return;
+    }
+
     // if no datasets are selected, show an alert
     if (campaignData.length == 0) {
         alert("Please select at least one existing combination of dataset, split, and output.");
@@ -635,7 +641,7 @@ function updateLLMMetricConfig() {
         $("#annotation-span-categories").empty();
 
         annotationSpanCategories.forEach((annotationSpanCategory) => {
-            createAnnotationSpanCategoryElem(annotationSpanCategory.name, annotationSpanCategory.description, annotationSpanCategory.color);
+            addAnnotationSpanCategory(annotationSpanCategory.name, annotationSpanCategory.description, annotationSpanCategory.color);
         });
     }
     if (mode == "llm_gen") {
diff --git a/factgenie/static/js/example-annotation.js b/factgenie/static/js/example-annotation.js
index ce4a89e..92e1ab6 100644
--- a/factgenie/static/js/example-annotation.js
+++ b/factgenie/static/js/example-annotation.js
@@ -82,7 +82,7 @@ function createButtons() {
         });
 
         const label = $('<label>', {
-            class: "btn btn-err-cat-label  me-1",
+            class: "btn btn-err-cat-label me-1",
             for: `btnradio${idx}`,
             style: `background-color: ${category.color};`
         }).text(category.name);
@@ -94,25 +94,45 @@ function createButtons() {
 
         $('#buttons-area').append(input);
         $('#buttons-area').append(label);
+    }
+
+    // Add eraser button
+    const eraserInput = $('<input>', {
+        type: "radio",
+        class: "btn-check btn-outline-secondary btn-eraser",
+        name: "btnradio",
+        id: "btnradioeraser",
+        autocomplete: "off",
+        "data-cat-idx": "-1"
+    });
+
+    const eraserLabel = $('<label>', {
+        class: "btn btn-err-cat-label ms-auto",
+        for: "btnradioeraser",
+        style: "background-color: #FFF; color: #000 !important;"
+    }).text("Erase mode");
+
+    $('#buttons-area').append(eraserInput);
+    $('#buttons-area').append(eraserLabel);
+
+    // Event handlers
+    $(".btn-err-cat, .btn-eraser").change(function () {
+        if (this.checked) {
+            const cat_idx = $(this).attr("data-cat-idx");
+            spanAnnotator.setCurrentAnnotationType(cat_idx);
+        }
+    });
 
-        $(".btn-err-cat").change(function () {
+    $('.btn-check').on('change', function () {
+        $('.btn-check').each(function () {
+            const label = $(`label[for=${this.id}]`);
             if (this.checked) {
-                const cat_idx = $(this).attr("data-cat-idx");
-                spanAnnotator.setCurrentAnnotationType(cat_idx);
+                label.addClass('active');
+            } else {
+                label.removeClass('active');
             }
         });
-
-        $('.btn-check').on('change', function () {
-            $('.btn-check').each(function () {
-                const label = $(`label[for=${this.id}]`);
-                if (this.checked) {
-                    label.addClass('active');
-                } else {
-                    label.removeClass('active');
-                }
-            });
-        });
-    }
+    });
 }
 
 function initAnnotation() {
diff --git a/factgenie/static/js/span-annotator.js b/factgenie/static/js/span-annotator.js
index 401f6ea..b302fea 100644
--- a/factgenie/static/js/span-annotator.js
+++ b/factgenie/static/js/span-annotator.js
@@ -314,6 +314,9 @@ class SpanAnnotator {
         const doc = this.documents.get(objectId);
         const position = parseInt($span.data('index'));
 
+        const removedAnnotations = doc.annotations.filter(a =>
+            position >= a.start && position < a.start + a.text.length);
+
         doc.annotations = doc.annotations.filter(a =>
             position < a.start || position >= a.start + a.text.length);
 
diff --git a/factgenie/templates/crowdsourcing/annotate_body.html b/factgenie/templates/crowdsourcing/annotate_body.html
index 2fbd1b0..18af6a4 100755
--- a/factgenie/templates/crowdsourcing/annotate_body.html
+++ b/factgenie/templates/crowdsourcing/annotate_body.html
@@ -70,7 +70,7 @@ <h2 class="accordion-header">
                   <input type="radio" class="btn-check btn-outline-secondary btn-eraser" name="btnradio"
                     id="btnradioeraser" autocomplete="off" data-cat-idx="-1">
                   <label class="btn btn-err-cat-label ms-auto" for="btnradioeraser" style="background-color: #FFF; color: #000 !important;">
-                    Eraser mode
+                    Erase mode
                   </label>
                 </div>
               </div>
diff --git a/factgenie/templates/pages/crowdsourcing_new.html b/factgenie/templates/pages/crowdsourcing_new.html
index 6402054..2c6fefd 100755
--- a/factgenie/templates/pages/crowdsourcing_new.html
+++ b/factgenie/templates/pages/crowdsourcing_new.html
@@ -138,7 +138,6 @@ <h3>New crowdsourcing campaign</h3>
                   value="1" required>
               </div>
               <div class="form-group mt-4">
-                <!-- select for sort order -->
                 <label for="annotationGranularity">Annotation granularity</label>
                 <div class="mb-2">
                   <small class="form-text text-muted">The smallest unit annotators can annotate.</small>