@konfuzio/document-validation-ui 0.1.17-dev.3 → 0.1.18-dev.0

package/package.json

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

package/src/assets/images/TranslateArrows.vue

@@ -1,13 +1,22 @@
 <template>
   <svg
-id="exchange" xmlns="http://www.w3.org/2000/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>      
+  >
+    <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>
@@ -15,10 +24,10 @@ export default {
   name: "TranslateArrows",
   props: {
     translation: {
-      type: Boolean,
-      default: false,
+      type: String,
+      default: null,
       required: false,
     },
   },
 };
-</script>
+</script>

package/src/assets/scss/document_annotations.scss

@@ -197,6 +197,10 @@
                 display: flex;
                 padding-left: 20px;
 
+                &.pointer {
+                  cursor: pointer;
+                }
+
                 .icon {
                   display: flex;
                 }
@@ -205,29 +209,39 @@
                   display: flex;
                   flex-direction: column;
                   gap: 8px;
-                  min-width: 100px;
+                  min-width: 216px;
                   text-align: left;
+                  border-bottom: 1px solid $low-opacity-white;
+                  padding-bottom: 8px;
+                  word-wrap: break-all;
+                  white-space: normal;
 
                   .translation-title {
-                    font-size: 14px;
-                    font-weight: 500;
-                  }
-
-                  .translation-info {
+                    color: $white;
+                    font-weight: 400;
+                    font-size: 12px;
+                    line-height: 18px;
                     display: flex;
+                    flex-direction: row;
                     justify-content: space-between;
-                    gap: 8px;
-                    font-size: 12px;
-
-                    .annotation-details-link {
-                      color: $primary;
-
-                      &:hover {
-                        filter: $hover-style;
+                    .translated-string {
+                      font-weight: 500;
+                      text-align: right;
+                      &.no-translation {
+                        color: $red;
+                        font-weight: 400;
                       }
                     }
                   }
                 }
+                .translation-info {
+                  padding-top: 8px;
+                  line-height: 18px;
+                  font-size: 12px;
+                  opacity: 0.7;
+                  color: $white;
+                  font-weight: 400;
+                }
               }
             }
 

package/src/assets/scss/new_annotation.scss

@@ -28,6 +28,8 @@
     width: 100%;
     justify-content: space-between;
     position: relative;
+    text-wrap: wrap;
+    text-align: left;
 
     .caret-icon {
       position: absolute;

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -38,35 +38,41 @@
         <span>{{ label.name }} </span>
       </div>
 
-      <div v-if="showTranslationsDetails" class="annotation-translation">
-        <b-tooltip :animated="false" position="is-bottom" :close-delay="2000">
+      <div
+        v-if="showTranslationsDetails"
+        :class="['annotation-translation', !isDocumentReviewed && 'pointer']"
+        @click="editAnnotationTranslation(annotation.id)"
+      >
+        <b-tooltip :animated="false" position="is-bottom">
           <div class="icon">
-            <TranslateArrows
-              :translation="annotation.translated_string && true"
-            />
+            <TranslateArrows :translation="annotation.translated_string" />
           </div>
 
           <template #content>
             <div class="translation-details">
               <div class="translation-title">
                 <span>{{ $t("translated_string_title") }}</span>
+                <span
+                  :class="[
+                    'translated-string',
+                    !annotation.translated_string && 'no-translation',
+                  ]"
+                >
+                  {{
+                    annotation.translated_string
+                      ? annotation.translated_string
+                      : $t("no_translated_string")
+                  }}
+                </span>
               </div>
-              <div class="translation-info">
-                <span class="translated-string">{{
+            </div>
+            <div class="translation-info">
+              <div v-if="!isDocumentReviewed" class="annotation-details-link">
+                {{
                   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
-                >
+                    ? $t("edit_translation")
+                    : $t("add_translation")
+                }}
               </div>
             </div>
           </template>
@@ -679,7 +685,7 @@ export default {
       }
     },
     enableLoading(annotations) {
-      if (annotations && this.annotation) {
+      if (annotations && this.annotation && !this.annotation.is_correct) {
         const found = annotations.find(
           (annotation) => annotation === this.annotation.id
         );
@@ -727,7 +733,7 @@ export default {
       }
     },
     editAnnotationTranslation(annotationId) {
-      if (!annotationId) return;
+      if (!annotationId || this.isDocumentReviewed) return;
 
       const baseUrl = api.FILE_URL ? api.FILE_URL : api.DEFAULT_URL;
 

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -110,7 +110,8 @@
 
         <div v-if="annotationSet.labels.length === 0" class="no-labels">
           <span> {{ $t("no_labels_in_set") }}</span>
-          <span v-if="!publicView && !isDocumentReviewed" v-html="$t('link_to_add_labels')"></span>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <span v-if="isDocumentEditable" v-html="$t('link_to_add_labels')" />
         </div>
 
         <div
@@ -178,6 +179,9 @@ export default {
     isAnnotationBeingEdited() {
       return this.editAnnotation && this.editAnnotation.id;
     },
+    isDocumentEditable() {
+      return !this.publicView && !this.isDocumentReviewed;
+    },
   },
   watch: {
     editAnnotation(newValue) {
@@ -266,7 +270,7 @@ export default {
 
     keyDownHandler(event) {
       // only allow keyboard navigation if we are not in public view mode
-      if (this.publicView || this.isDocumentReviewed) return;
+      if (!this.isDocumentEditable) return;
 
       // Exit edit mode and navigation
       if (event.key === "Escape") {

package/src/components/DocumentCategory.vue

@@ -18,7 +18,7 @@
       :class="[
         'category-chooser',
         splitMode && 'split-mode',
-        selectedDocument.is_reviewed && 'disabled',
+        isDocumentReviewed && 'disabled',
       ]"
       aria-role="list"
       scrollable
@@ -60,7 +60,9 @@
         @click="handleChangeCategory(category)"
       >
         <span>{{ category.name }}</span>
-        <span v-if="splitMode && category.confidence >= 0">{{ ` (${ category.confidence }%)` }}</span>
+        <span v-if="splitMode && category.confidence >= 0">{{
+          ` (${category.confidence}%)`
+        }}</span>
       </b-dropdown-item>
     </b-dropdown>
   </b-tooltip>
@@ -79,14 +81,14 @@ export default {
     splitMode: {
       type: Boolean,
     },
-  page: {
-    type: Object,
-    default: null,
-  },
-  index: {
-    type: Number,
-    default: 0,
-  },
+    page: {
+      type: Object,
+      default: null,
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
@@ -101,6 +103,7 @@ export default {
     ...mapGetters("document", [
       "documentCannotBeEdited",
       "documentHasCorrectAnnotations",
+      "isDocumentReviewed",
     ]),
     ...mapState("document", ["selectedDocument", "annotations"]),
     ...mapState("category", ["categories"]),
@@ -117,7 +120,7 @@ export default {
         // if there is just 1 category in the project,
         // and one or more sub-documents has no category,
         // assign the only category by default
-        if (this.projectHasSingleCategory() && missingCategory) {
+        if (this.projectHasSingleCategory && missingCategory) {
           const updatedValuesForDocuments = this.updatedDocument.map(
             (document) => {
               if (!document.category && this.categories) {
@@ -146,14 +149,18 @@ export default {
     },
 
     setCategoryConfidence() {
-      if (!this.updatedDocument[this.index].categories || !this.categoryName(
-          this.updatedDocument[this.index].category
-        )) return;
+      if (
+        !this.updatedDocument[this.index].categories ||
+        !this.categoryName(this.updatedDocument[this.index].category)
+      )
+        return;
+
+      const found = this.updatedDocument[this.index].categories.find(
+        (category) => category.id === this.updatedDocument[this.index].category
+      );
 
-      const found = this.updatedDocument[this.index].categories.find(category => category.id === this.updatedDocument[this.index].category);
-      
       return this.handleCategoryConfidence(found.confidence);
-    }
+    },
   },
   watch: {
     annotations() {
@@ -162,7 +169,7 @@ export default {
     },
   },
   mounted() {
-    if (this.projectHasSingleCategory()) {
+    if (this.projectHasSingleCategory) {
       this.tooltipIsShown = true;
     }
   },
@@ -174,10 +181,14 @@ export default {
     listOfCategories() {
       let list;
 
-      if(this.splitMode && this.updatedDocument[this.index].categories) {
-        list = this.handleCategories(this.updatedDocument[this.index].categories);
+      if (this.splitMode && this.updatedDocument[this.index].categories) {
+        list = this.handleCategories(
+          this.updatedDocument[this.index].categories
+        );
       } else if (this.categories) {
-        const filtered = this.categories.filter(category => category.project === this.selectedDocument.project)
+        const filtered = this.categories.filter(
+          (category) => category.project === this.selectedDocument.project
+        );
         list = this.handleCategories(filtered);
       }
 
@@ -185,12 +196,16 @@ export default {
     },
     handleCategories(categories) {
       return categories.map((category) => {
-          return {id: category.id, name: this.categoryName(category.id), confidence: this.handleCategoryConfidence(category.confidence)};
-        });
+        return {
+          id: category.id,
+          name: this.categoryName(category.id),
+          confidence: this.handleCategoryConfidence(category.confidence),
+        };
+      });
     },
     handleCategoryConfidence(confidence) {
-      if(!confidence) {
-        if(confidence === 0) return confidence.toFixed(2);
+      if (!confidence) {
+        if (confidence === 0) return confidence.toFixed(2);
 
         return;
       }
@@ -199,9 +214,9 @@ export default {
     },
     checkIfDropdownIsDisabled() {
       if (
-        this.projectHasSingleCategory() ||
+        this.projectHasSingleCategory ||
         this.documentCannotBeEdited(this.selectedDocument) ||
-        (this.documentHasCorrectAnnotations() && !this.splitMode)
+        (this.documentHasCorrectAnnotations && !this.splitMode)
       ) {
         this.dropdownIsDisabled = true;
       } else {
@@ -253,9 +268,9 @@ export default {
 
       if (this.documentCannotBeEdited(this.selectedDocument)) {
         tooltipText = this.$t("edit_not_available");
-      } else if (this.documentHasCorrectAnnotations()) {
+      } else if (this.documentHasCorrectAnnotations) {
         tooltipText = this.$t("approved_annotations");
-      } else if (this.projectHasSingleCategory()) {
+      } else if (this.projectHasSingleCategory) {
         tooltipText = this.$t("single_category_in_project");
         tooltipDelay = 5000;
       }

package/src/components/DocumentPage/DocumentPage.vue

@@ -232,7 +232,8 @@ export default {
           if (
             annotation.span.find(
               (span) => span.page_index + 1 === this.page.number
-            ) && !this.isNegative(annotation)
+            ) &&
+            !this.isNegative(annotation)
           ) {
             annotations.push(annotation);
           }
@@ -385,6 +386,8 @@ export default {
 
       if (trigger && trigger === "click") {
         this.closePopups(true);
+      } else {
+        this.onElementEnter();
       }
     },
 

package/src/locales/de.json

@@ -143,5 +143,6 @@
   "redirecting_to_documents_list": "Wir führen Sie zur Dokumentenliste, sodass Sie Ihre Dokumente weiter überprüfen können, während wir die vorgenommenen Änderungen verarbeiten.",
   "translated_string_title": "Übersetzter Text",
   "no_translated_string": "Es existiert noch keine Übersetzung.",
-  "add_translation": "Eins hinzufügen"
+  "add_translation": "Klicken Sie zum hinzufügen",
+  "edit_translation": "Zum Bearbeiten anklicken"
 }

package/src/locales/en.json

@@ -143,5 +143,6 @@
   "redirecting_to_documents_list": "We are taking you to the documents list, so you can continue reviewing your documents while we process the changes made.",
   "translated_string_title": "Translated text",
   "no_translated_string": "No translation exists yet.",
-  "add_translation": "Add one"
+  "add_translation": "Click to add one",
+  "edit_translation": "Click to edit"
 }

package/src/locales/es.json

@@ -143,5 +143,6 @@
   "redirecting_to_documents_list": "Lo estamos redirigiendo a la lista de documentos, para que pueda continuar la revisión de sus documentos mientras procesamos los cambios realizados.",
   "translated_string_title": "Texto traducido",
   "no_translated_string": "Aún no existe traducción.",
-  "add_translation": "Agregar"
+  "add_translation": "Clic para agregar",
+  "edit_translation": "Clic para editar"
 }

package/src/store/category.js

@@ -33,7 +33,7 @@ const getters = {
     return null;
   },
 
-  projectHasSingleCategory: (state) => () => {
+  projectHasSingleCategory: (state) => {
     return state.categories && state.categories.length === 1;
   },
 };

package/src/store/document.js

@@ -121,9 +121,9 @@ const getters = {
     let availableLabels = [];
     if (set.id && set.labels) {
       // check if label can be multiple, if there's already an annotation created & if it's a negative annotation
-      set.labels.map(label => {
+      set.labels.map((label) => {
         // check if we already added the same label to the array
-        const found = availableLabels.find(l => l.id === label.id);
+        const found = availableLabels.find((l) => l.id === label.id);
 
         if (found) return;
 
@@ -134,13 +134,12 @@ const getters = {
             availableLabels.push(label);
           } else {
             // if the label has negative annotations, we show the label
-            label.annotations.map(annotation => {
+            label.annotations.map((annotation) => {
               if (getters.isNegative(annotation)) {
                 availableLabels.push(label);
               }
             });
           }
-
         }
       });
     } else if (set.labels) {
@@ -255,7 +254,6 @@ const getters = {
     const labels = [];
     const processedAnnotationSets = annotationSets.map((annotationSet) => {
       const annotationSetLabels = annotationSet.labels.map((label) => {
-
         // add annotations to the document array
         annotations.push(...label.annotations);
         labels.push(label);
@@ -274,7 +272,7 @@ const getters = {
   },
 
   /* Checks if there are annotations correct in the document */
-  documentHasCorrectAnnotations: (state) => () => {
+  documentHasCorrectAnnotations: (state) => {
     if (
       !state.annotations ||
       (state.annotations &&
@@ -335,7 +333,7 @@ const getters = {
         // check which one has more confidence or if it's the same, then check if one is revised or not
         if (
           highestConfidenceAnnotation.confidence <
-          label.annotations[i].confidence ||
+            label.annotations[i].confidence ||
           (highestConfidenceAnnotation.confidence ===
             label.annotations[i].confidence &&
             label.annotations[i].revised)
@@ -360,17 +358,17 @@ const getters = {
    */
   isAnnotationInEditMode:
     (state) =>
-      (annotationId, index = null) => {
-        if (state.editAnnotation && annotationId) {
-          if (index != null) {
-            return (
-              state.editAnnotation.id === annotationId &&
-              state.editAnnotation.index === index
-            );
-          }
-          return state.editAnnotation.id === annotationId;
+    (annotationId, index = null) => {
+      if (state.editAnnotation && annotationId) {
+        if (index != null) {
+          return (
+            state.editAnnotation.id === annotationId &&
+            state.editAnnotation.index === index
+          );
         }
-      },
+        return state.editAnnotation.id === annotationId;
+      }
+    },
 
   /**
    * Get number of empty labels per annotation set
@@ -386,14 +384,13 @@ const getters = {
           annotationSet.label_set.id === l.label_set
       );
 
-      const foundNegative = label.annotations.find(annotation =>
+      const foundNegative = label.annotations.find((annotation) =>
         getters.isNegative(annotation)
       );
 
       if (!foundMissing && (label.annotations.length === 0 || foundNegative)) {
         pendingEmpty.push(label);
       }
-
     });
 
     return pendingEmpty;
@@ -442,7 +439,7 @@ const getters = {
       notCorrect = state.annotations.filter((a) => !a.is_correct);
 
       if (notCorrect) {
-        notCorrect.map(annotation => {
+        notCorrect.map((annotation) => {
           emptyAnnotations.push(annotation);
         });
       }
@@ -517,14 +514,14 @@ const getters = {
    */
   documentCannotBeEdited:
     (state) =>
-      (document = state.selectedDocument) => {
-        return (
-          document.dataset_status === 1 ||
-          document.dataset_status === 2 ||
-          document.dataset_status === 3 ||
-          document.is_reviewed
-        );
-      },
+    (document = state.selectedDocument) => {
+      return (
+        document.dataset_status === 1 ||
+        document.dataset_status === 2 ||
+        document.dataset_status === 3 ||
+        document.is_reviewed
+      );
+    },
 
   /**
    * If automatic splitting is enabled for the project
@@ -778,7 +775,7 @@ const actions = {
       if (
         !state.selectedDocument.category ||
         (!state.selectedDocument.category_is_revised &&
-          !getters.documentHasCorrectAnnotations() &&
+          !getters.documentHasCorrectAnnotations &&
           state.missingAnnotations.length === 0)
       ) {
         dispatch("edit/enableEditMode", null, {
@@ -851,7 +848,10 @@ const actions = {
     commit("SET_DOCUMENT_ANNOTATION_SELECTED", null);
   },
 
-  createAnnotation: ({ commit, getters, dispatch }, { annotation, negativeAnnotationId }) => {
+  createAnnotation: (
+    { commit, getters, dispatch },
+    { annotation, negativeAnnotationId }
+  ) => {
     return new Promise((resolve, reject) => {
       HTTP.post(`/annotations/`, annotation)
         .then(async (response) => {