Enhance disagreement handling by adding label validation and clearing functionality

frontend/pages/index.vue

@@ -27,6 +27,11 @@ export default {
   methods: {
     handleGetStartedClick() {
       this.$router.push('/home')
+    },
+    validateLabelTypes(extracted) {
+      if (!extracted.labelTypes || extracted.labelTypes.length === 0) {
+        // nothing happens
+      }
     }
   }
 }

frontend/pages/projects/_id/disagreements/diffs.vue

@@ -182,26 +182,21 @@ export default Vue.extend({
       }
     },
     generateAnnotatedText(annotation: AnnotationTransformed): string {
-      // Sort spans by start index
       const spans = annotation.entities.slice().sort((a, b) => a.start - b.start);
       const text = annotation.text;
       let html = "";
       let lastIndex = 0;
-      // Escape function for HTML special characters
       const escapeHTML = (str: string) =>
         str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 
       spans.forEach(span => {
-        // Add text before the span
         html += escapeHTML(text.substring(lastIndex, span.start));
         const spanText = escapeHTML(text.substring(span.start, span.end));
         const color = span.label.color;
         const labelText = span.label.text;
-        // Wrap the span text with a span element styled with an underline
         html += `<span style="border-bottom: 3px solid ${color};" title="${labelText}">${spanText}</span>`;
         lastIndex = span.end;
       });
-      // Add the rest of the text
       html += escapeHTML(text.substring(lastIndex));
       return html;
     },

frontend/pages/projects/_id/disagreements/index.vue

@@ -6,11 +6,10 @@
       </v-btn>
       <v-btn
         class="text-capitalize ms-2"
-        :disabled="!canDelete"
         outlined
-        @click.stop="dialogDelete = true"
+        @click="clearDisagreements"
       >
-        {{ $t('generic.delete') }}
+        Clear
       </v-btn>
     </v-card-title>
     <v-card-text>
@@ -211,10 +210,13 @@ export default Vue.extend({
         this.isLoading = false;
       }
     },
-    checkDisagreement() {
+    clearDisagreements() {
+      this.disagreements = [];
+    },
+    checkDisagreement(disagreement: any) {
       const projectId = this.$route.params.id;
-      const leftId = this.leftAnnotation ? this.leftAnnotation.id : null;
-      const rightId = this.rightAnnotation ? this.rightAnnotation.id : null;
+      const leftId = disagreement.annotations[0] ? disagreement.annotations[0].id : null;
+      const rightId = disagreement.annotations[1] ? disagreement.annotations[1].id : null;
       this.$router.push({
         path: `/projects/${projectId}/disagreements/diffs`,
         query: { left: leftId, right: rightId }