@konfuzio/document-validation-ui 0.1.17-dev.1 → 0.1.17-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.17-dev.1",
+  "version": "0.1.17-dev.2",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/api.js

@@ -3,6 +3,7 @@ import { cacheAdapterEnhancer } from "axios-extensions";
 
 let HTTP, FILE_REQUEST, authToken, appLocale;
 const DEFAULT_URL = "https://app.konfuzio.com";
+const FILE_URL = process.env.VUE_APP_DOCUMENT_IMAGES_URL;
 
 axios.defaults.xsrfCookieName = "csrftoken";
 axios.defaults.xsrfHeaderName = "X-CSRFToken";
@@ -12,7 +13,7 @@ HTTP = axios.create({
 });
 
 FILE_REQUEST = axios.create({
-  baseURL: process.env.VUE_APP_DOCUMENT_IMAGES_URL || `${DEFAULT_URL}`,
+  baseURL: FILE_URL || `${DEFAULT_URL}`,
   responseType: "blob",
   adapter: cacheAdapterEnhancer(axios.defaults.adapter),
 });
@@ -76,4 +77,6 @@ export default {
   setAuthToken,
   setLocale,
   FILE_REQUEST,
+  DEFAULT_URL,
+  FILE_URL
 };

package/src/assets/images/TranslateArrows.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg
+id="exchange" xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+    >
+    <path v-if="translation"  fill="#1A1A1A" d="M18,10a1,1,0,0,0-1-1H5.41l2.3-2.29A1,1,0,0,0,6.29,5.29l-4,4a1,1,0,0,0-.21,1.09A1,1,0,0,0,3,11H17A1,1,0,0,0,18,10Zm3.92,3.62A1,1,0,0,0,21,13H7a1,1,0,0,0,0,2H18.59l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l4-4A1,1,0,0,0,21.92,13.62Z"></path>
+    <path v-else fill="#E1E1E1" d="M18,10a1,1,0,0,0-1-1H5.41l2.3-2.29A1,1,0,0,0,6.29,5.29l-4,4a1,1,0,0,0-.21,1.09A1,1,0,0,0,3,11H17A1,1,0,0,0,18,10Zm3.92,3.62A1,1,0,0,0,21,13H7a1,1,0,0,0,0,2H18.59l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l4-4A1,1,0,0,0,21.92,13.62Z"></path>
+  </svg>      
+</template>
+
+<script>
+export default {
+  name: "TranslateArrows",
+  props: {
+    translation: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+};
+</script>

package/src/assets/scss/document_annotations.scss

@@ -192,6 +192,43 @@
                 padding: 10px 0;
                 padding-right: 4px;
               }
+
+              .annotation-translation {
+                display: flex;
+                padding-left: 20px;
+
+                .icon {
+                  display: flex;
+                }
+
+                .translation-details {
+                  display: flex;
+                  flex-direction: column;
+                  gap: 8px;
+                  min-width: 100px;
+                  text-align: left;
+
+                  .translation-title {
+                    font-size: 14px;
+                    font-weight: 500;
+                  }
+
+                  .translation-info {
+                    display: flex;
+                    justify-content: space-between;
+                    gap: 8px;
+                    font-size: 12px;
+
+                    .annotation-details-link {
+                      color: $primary;
+
+                      &:hover {
+                        filter: $hover-style;
+                      }
+                    }
+                  }
+                }
+              }
             }
 
             .annotation-row-right {

package/src/components/App.vue

@@ -25,11 +25,6 @@ export default {
       required: false,
       default: null,
     },
-    project: {
-      type: String,
-      required: false,
-      default: null,
-    },
     // eslint-disable-next-line vue/prop-name-casing
     user_token: {
       type: String,
@@ -92,15 +87,6 @@ export default {
         return null;
       }
     },
-    projectId() {
-      if (process.env.VUE_APP_PROJECT_ID) {
-        return process.env.VUE_APP_PROJECT_ID;
-      } else if (this.project) {
-        return this.project;
-      } else {
-        return null;
-      }
-    },
     userToken() {
       if (process.env.VUE_APP_GUEST_USER_TOKEN) {
         return process.env.VUE_APP_GUEST_USER_TOKEN;
@@ -170,7 +156,6 @@ export default {
 
     // document and project config
     Promise.all([
-      this.$store.dispatch("project/setProjectId", this.projectId),
       this.$store.dispatch("document/setDocId", this.documentId),
       this.$store.dispatch("document/setPublicView", this.isPublicView),
       this.$store.dispatch(

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -11,9 +11,8 @@
           editAnnotation &&
           editAnnotation.id === annotation.id &&
           'error-editing',
-        isAnnotationBeingEdited && 'clicked-ann',
-        !annotation.revised && 'not-revised'
-      ]"
+        isAnnotationBeingEdited && 'clicked-ann'      
+        ]"
       role="textbox"
       :contenteditable="isAnnotationBeingEdited"
       @click="handleEditAnnotation"
@@ -75,10 +74,6 @@ export default {
       "newAcceptedAnnotations",
       "showActionError",
     ]),
-
-    isAnnotationDeleted() {
-      return this.annotation.revised && !this.annotation.is_correct;
-    },
     isAnnotationBeingEdited() {
       return this.isAnnotationInEditMode(this.annotation.id, this.spanIndex);
     },

package/src/components/DocumentAnnotations/AnnotationDetails.vue

@@ -5,9 +5,8 @@
     :class="[!fromTable && 'left-aligned', 'annotation-details']"
   >
     <div :class="['label-icon', fromTable && 'is-small']">
-      <div v-if="(created(annotation) || edited(annotation)) && !publicView">
+      <div v-if="(created(annotation) || edited(annotation)) && !isNegative(annotation) && !publicView">
         <div
-          v-if="accepted(annotation)"
           :class="[
             'annotation-details-icon',
             animate ? 'animated-ripple' : '',
@@ -16,16 +15,6 @@
         >
           <AcceptedUser />
         </div>
-        <div
-          v-else
-          :class="[
-            'annotation-details-icon',
-            animate ? 'animated-ripple' : '',
-            'user-icon',
-          ]"
-        >
-          <UserIcon />
-        </div>
       </div>
       <div
         v-else-if="annotationIsNotFound(annotationSet, label) && !publicView"
@@ -34,7 +23,7 @@
         <NotFoundIcon />
       </div>
       <div
-        v-else-if="notExtracted(annotation) && !publicView"
+        v-else-if="notExtracted(annotation) || isNegative(annotation) && !publicView"
         :class="[
           'annotation-details-icon',
           animate ? 'animated-ripple' : '',
@@ -68,7 +57,7 @@
           <span>{{ description }}</span>
         </div>
         <div
-          v-if="confidence(annotation)"
+          v-if="confidence(annotation) && !isNegative(annotation)"
           :class="['confidence', publicView && 'tooltip-in-public-view']"
         >
           <span>{{ $t("confidence") }}</span
@@ -88,7 +77,6 @@
           <div class="detail-icons">
             <div v-if="created(annotation) || edited(annotation)">
               <div
-                v-if="accepted(annotation)"
                 :class="[
                   'annotation-details-icon',
                   animate ? 'animated-ripple' : '',
@@ -97,16 +85,6 @@
               >
                 <AcceptedUser />
               </div>
-              <div
-                v-else
-                :class="[
-                  'annotation-details-icon',
-                  animate ? 'animated-ripple' : '',
-                  'user-icon',
-                ]"
-              >
-                <UserIcon />
-              </div>
             </div>
             <div
               v-else-if="notExtracted(annotation)"
@@ -151,7 +129,6 @@ import CheckMark from "../../assets/images/CheckMark";
 import AcceptedCheckMark from "../../assets/images/AcceptedCheckMark";
 import QuestionMark from "../../assets/images/QuestionMark";
 import AcceptedUser from "../../assets/images/AcceptedUser";
-import UserIcon from "../../assets/images/UserIcon";
 import NotFoundIcon from "../../assets/images/NotFoundIcon";
 
 export default {
@@ -161,7 +138,6 @@ export default {
     QuestionMark,
     AcceptedCheckMark,
     AcceptedUser,
-    UserIcon,
     NotFoundIcon,
   },
   props: {
@@ -199,6 +175,7 @@ export default {
       "created",
       "edited",
       "accepted",
+      "isNegative",
       "getUser",
       "annotationIsNotFound",
     ]),
@@ -225,7 +202,7 @@ export default {
   },
   methods: {
     getText() {
-      if (this.notExtracted(this.annotation)) {
+      if (this.notExtracted(this.annotation) || this.isNegative(this.annotation)) {
         return this.$t("not_found_in_document");
       } else if (this.created(this.annotation)) {
         return this.getUser(this.annotation)

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -37,10 +37,34 @@
       >
         <span>{{ label.name }} </span>
       </div>
+
+      <div v-if="showTranslationsDetails" class="annotation-translation">
+        <b-tooltip
+          :animated="false"
+          position="is-bottom"
+          :close-delay="2000"
+        >
+          <div class="icon">
+            <TranslateArrows :translation="annotation.translated_string && true"/>
+          </div>
+
+          <template #content> 
+            <div class="translation-details">
+              <div class="translation-title">
+                <span>{{ $t("translated_string_title") }}</span>
+              </div>
+              <div  class="translation-info">
+                <span class="translated-string">{{ annotation.translated_string ? annotation.translated_string : $t("no_translated_string")}}</span>
+                <a v-if=!isDocumentReviewed class="annotation-details-link" @click="editAnnotationTranslation(annotation.id)">{{ annotation.translated_string ? $t("edit") : $t("add_translation")}}</a>
+              </div>
+            </div> 
+          </template>
+        </b-tooltip>
+      </div>
     </div>
     <div class="annotation-row-right">
       <div class="annotation-content">
-        <div v-if="annotation">
+        <div v-if="annotation && !isNegative(annotation)">
           <div
             v-for="(span, index) in spanForEditing
               ? spanSelection
@@ -87,7 +111,7 @@
           />
         </div>
       </div>
-      <div v-if="showButtons" class="buttons-container">
+      <div class="buttons-container">
         <AnnotationActionButtons
           :cancel-btn="showCancelButton()"
           :accept-btn="showAcceptButton()"
@@ -113,7 +137,10 @@ import AnnotationDetails from "./AnnotationDetails";
 import AnnotationContent from "./AnnotationContent";
 import EmptyAnnotation from "./EmptyAnnotation";
 import AnnotationActionButtons from "./AnnotationActionButtons";
+import TranslateArrows from "../../assets/images/TranslateArrows";
+
 import { isElementArray } from "../../utils/utils";
+import api from "../../api";
 
 export default {
   name: "AnnotationRow",
@@ -122,6 +149,7 @@ export default {
     AnnotationContent,
     EmptyAnnotation,
     AnnotationActionButtons,
+    TranslateArrows,
   },
   props: {
     annotationSet: {
@@ -140,10 +168,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    showButtons: {
-      type: Boolean,
-      default: true,
-    },
     fromTable: {
       type: Boolean,
       default: false,
@@ -175,14 +199,19 @@ export default {
       "elementSelected",
       "selectedEntities",
     ]),
+    ...mapState("project", [
+      "translationsEnabled"
+    ]),
     ...mapGetters("document", [
       "isAnnotationInEditMode",
       "annotationIsNotFound",
       "isDocumentReviewed",
+      "isNegative"
     ]),
     defaultSpan() {
       if (
         this.annotation &&
+        !this.isNegative(this.annotation) &&
         this.annotation.span &&
         this.annotation.span.length > 0
       ) {
@@ -200,6 +229,7 @@ export default {
     isAnnotation() {
       return (
         this.annotation &&
+        !this.isNegative(this.annotation) &&
         this.isAnnotationInEditMode(
           this.annotationId(),
           this.editAnnotation.index
@@ -222,9 +252,14 @@ export default {
         this.hoveredAnnotationSet &&
         this.hoveredAnnotationSet.type == "accept" &&
         this.annotation &&
-        this.hoveredPendingAnnotations() === this.annotation.id
+        !this.isNegative(this.annotation) &&
+        this.hoveredNotCorrectAnnotations() === this.annotation.id
       );
     },
+    showTranslationsDetails() {
+      // Only show translation option for filled annotations and if the feature is enabled for the project
+      return this.annotation && this.translationsEnabled && !this.publicView;
+    }
   },
   watch: {
     sidebarAnnotationSelected(newSidebarAnnotationSelected) {
@@ -238,7 +273,7 @@ export default {
         annotationSelected = newSidebarAnnotationSelected;
       }
 
-      if (this.annotation && this.annotation.id === annotationSelected.id) {
+      if (this.annotation && !this.isNegative(this.annotation) && this.annotation.id === annotationSelected.id) {
         clearTimeout(this.annotationAnimationTimeout);
 
         let timeout;
@@ -308,12 +343,11 @@ export default {
       }
     },
   },
-
   methods: {
     annotationId() {
       if (!this.annotationSet || !this.label) return;
 
-      if (this.annotation && this.annotation.id) return this.annotation.id;
+      if (this.annotation && this.annotation.id && !this.isNegative(this.annotation)) return this.annotation.id;
 
       let emptyAnnotationId;
 
@@ -354,10 +388,12 @@ export default {
         }
       );
       const found = labels.find((l) => l.id === this.label.id);
-      if (found && found.annotations.length === 0) return found.id;
+      const negativeAnnotations = found.annotations.find(annotation => this.isNegative(annotation));
+
+      if ((found && found.annotations.length === 0) || negativeAnnotations) return found.id;
       return null;
     },
-    hoveredPendingAnnotations() {
+    hoveredNotCorrectAnnotations() {
       // This method will change the style of Annotations in the same Label Set
       // when the "Accept all" button is hovered
       if (!this.hoveredAnnotationSet) return;
@@ -385,7 +421,8 @@ export default {
         !this.editAnnotation &&
         !this.isAnnotationInEditMode(this.annotationId()) &&
         this.annotation &&
-        !this.annotation.revised &&
+        !this.isNegative(this.annotation) &&
+        !this.annotation.is_correct &&
         this.hoveredAnnotation === this.annotation.id
       );
     },
@@ -394,6 +431,7 @@ export default {
         !this.editAnnotation &&
         !this.isAnnotationInEditMode(this.annotationId()) &&
         this.annotation &&
+        !this.isNegative(this.annotation) &&
         this.hoveredAnnotation === this.annotation.id
       );
     },
@@ -402,7 +440,7 @@ export default {
         !this.editAnnotation &&
         this.hoveredAnnotation &&
         !this.isAnnotationInEditMode(this.annotationId()) &&
-        !this.annotation &&
+        (!this.annotation || this.isNegative(this.annotation)) &&
         !this.annotationIsNotFound(this.annotationSet, this.label)
       );
     },
@@ -416,7 +454,6 @@ export default {
     },
     showCancelButton() {
       if (!this.editAnnotation || this.isLoading) return;
-
       if (this.isAnnotationInEditMode(this.annotationId())) {
         return true;
       }
@@ -457,7 +494,7 @@ export default {
 
       // Verify if we are editing a filled or empty annotation
       if (
-        this.annotation &&
+        this.annotation && !this.isNegative(this.annotation) &&
         (this.showAcceptButton() ||
           this.showDeclineButton() ||
           this.isAnnotationInEditMode(
@@ -486,7 +523,7 @@ export default {
 
         this.saveAnnotationChanges(spans, decline);
       } else if (
-        !this.annotation &&
+        (!this.annotation || this.isNegative(this.annotation)) &&
         this.isAnnotationInEditMode(this.annotationId())
       ) {
         this.saveEmptyAnnotationChanges();
@@ -582,9 +619,16 @@ export default {
         };
       }
       this.isLoading = true;
+      let negativeAnnotationId;
+
+      // check if the annotation to create comes from a negative annotation
+      // so we can create the new one and remove the negative one from the annotations array
+      if(this.isNegative(this.annotation)) {
+        negativeAnnotationId = this.annotation.id;
+      }
 
       this.$store
-        .dispatch("document/createAnnotation", annotationToCreate)
+        .dispatch("document/createAnnotation", {annotation: annotationToCreate, negativeAnnotationId: negativeAnnotationId})
         .catch((error) => {
           this.$store.dispatch("document/createErrorMessage", {
             error,
@@ -652,6 +696,15 @@ export default {
         });
       }
     },
+    editAnnotationTranslation(annotationId) {
+      if(!annotationId) return;
+
+      const  baseUrl = api.FILE_URL ? api.FILE_URL : api.DEFAULT_URL;
+      
+      const annotationDetailsUrl = `${baseUrl}/admin/server/sequenceannotation/${annotationId}/change/`;
+
+      window.open(annotationDetailsUrl, "_blank");
+    }
   },
 };
 </script>

package/src/components/DocumentAnnotations/AnnotationSetActionButtons.vue

@@ -27,11 +27,11 @@
       <b-button
         type="is-primary"
         class="accept-all-btn"
-        :disabled="numberOfPendingAnnotationsInAnnotationSet === 0"
+        :disabled="numberOfNotCorrectAnnotationsInAnnotationSet === 0"
         @click.stop="acceptAllPending"
       >
         {{ $t("accept_group") }} ({{
-          numberOfPendingAnnotationsInAnnotationSet
+          numberOfNotCorrectAnnotationsInAnnotationSet
         }})
       </b-button>
     </div>
@@ -49,7 +49,7 @@ export default {
       type: Number,
       default: 0,
     },
-    numberOfPendingAnnotationsInAnnotationSet: {
+    numberOfNotCorrectAnnotationsInAnnotationSet: {
       type: Number,
       default: 0,
     },

package/src/components/DocumentAnnotations/DocumentAnnotations.cy.js

@@ -144,7 +144,7 @@ describe("Document Annotations", () => {
         cy.get("#document-annotations")
           .find(".label")
           .find(".annotation-row")
-          .find(".not-revised")
+          .find(".annotation")
           .each(($row) => {
             cy.wrap($row)
               .trigger("mouseover");
@@ -296,7 +296,7 @@ describe("Document Annotations", () => {
     cy.get("#document-annotations")
       .find(".label")
       .find(".annotation-row")
-      .find(".not-revised")
+      .find(".annotation")
       .first()
       .then(($element) => {
         const annotationId = $element[0].id;
@@ -399,4 +399,44 @@ describe("Document Annotations", () => {
         cy.wait("@deleteMissingAnnotation").its("response.statusCode").should("eq", 204);
       });
   });
+
+  it("shows details regarding translated strings if they are enabled for the project", () => {
+    cy.getStore("project").then($project => {      
+      if($project.translationsEnabled) {
+        cy.getStore("document").then($document => {
+          if($document.annotations.length > 0) {
+            cy.get("#document-annotations")
+              .find(".labels")
+              .find(".label")
+              .find(".annotation-row")
+              .find(".annotation-row-left")
+              .find(".annotation-translation")
+              .first()
+              .find(".icon")
+              .should("be.visible");
+
+            cy.get("#document-annotations")
+              .find(".labels")
+              .find(".label")
+              .find(".annotation-row")
+              .find(".annotation-row-left")
+              .find(".annotation-translation")
+              .first()
+              .trigger("mouseenter");
+
+            cy.get("#document-annotations")
+              .find(".labels")
+              .find(".label")
+              .find(".annotation-row")
+              .find(".annotation-row-left")
+              .find(".annotation-translation")
+              .first()
+              .find(".tooltip-content")
+              .find(".translation-details")
+              .should("be.visible");
+          }
+        });
+      }
+    })
+  });
 });

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -67,10 +67,10 @@
           >
             <AnnotationSetActionButtons
               :number-of-empty-labels-in-annotation-set="
-                emptyLabelsLength(annotationSet)
+                emptyLabels(annotationSet).length
               "
-              :number-of-pending-annotations-in-annotation-set="
-                annotationsWithPendingReviewLength(annotationSet)
+              :number-of-not-correct-annotations-in-annotation-set="
+                notCorrectAnnotations(annotationSet).length
               "
               @mark-all-empty-missing="
                 markAnnotationsAsMissing(null, null, annotationSet, true)
@@ -110,7 +110,7 @@
 
         <div v-if="annotationSet.labels.length === 0" class="no-labels">
           <span> {{ $t("no_labels_in_set") }}</span>
-          <span v-if="!publicView" v-html="$t('link_to_add_labels')"></span>
+          <span v-if="!publicView && !isDocumentReviewed" v-html="$t('link_to_add_labels')"></span>
         </div>
 
         <div
@@ -169,8 +169,8 @@ export default {
     ...mapGetters("category", ["category"]),
     ...mapGetters("document", [
       "numberOfAnnotationSetGroup",
-      "emptyLabelsLength",
-      "annotationsWithPendingReviewLength",
+      "emptyLabels",
+      "notCorrectAnnotations",
       "annotationSetsToShowInList",
       "annotationSetsInTable",
       "isDocumentReviewed",
@@ -424,26 +424,9 @@ export default {
       } else if (annotationSet && markAllMissing) {
         // mark all annotations as missing in annotation set
 
-        const allEmptyLabels = annotationSet.labels.filter(
-          (label) => label.annotations.length === 0
-        );
-
         // Check if any of the empty annotations was already marked as missing individually
         // and remove them
-        const toMarkAsMissing = [];
-
-        allEmptyLabels.map((label) => {
-          const found = this.missingAnnotations.find(
-            (l) =>
-              l.label === label.id &&
-              l.annotation_set === annotationSet.id &&
-              l.label_set === annotationSet.label_set.id
-          );
-
-          if (!found) {
-            toMarkAsMissing.push(label);
-          }
-        });
+        const toMarkAsMissing = this.emptyLabels(annotationSet);
 
         missing = toMarkAsMissing.map((label) => {
           return {