@konfuzio/document-validation-ui 0.1.1 → 0.1.2-pre-release-2

package/src/components/DocumentAnnotations/AnnotationDetails.vue

@@ -1,14 +1,13 @@
 <template>
   <b-tooltip
-    type="is-dark"
     :animated="false"
     position="is-bottom"
     class="left-aligned annotation-details"
   >
     <div class="label-icon">
-      <div v-if="created || edited">
+      <div v-if="created(annotation) || edited(annotation)">
         <div
-          v-if="accepted"
+          v-if="accepted(annotation)"
           :class="[
             'annotation-details-icon',
             animate ? 'animated-ripple' : '',
@@ -29,7 +28,7 @@
         </div>
       </div>
       <div
-        v-else-if="notFound"
+        v-else-if="notFound(annotation)"
         :class="[
           'annotation-details-icon',
           animate ? 'animated-ripple' : '',
@@ -40,8 +39,11 @@
       </div>
       <div v-else>
         <div
-          v-if="accepted"
-          :class="['annotation-details-icon', animate ? 'animated-ripple' : '']"
+          v-if="accepted(annotation)"
+          :class="[
+            'annotation-details-icon success',
+            animate ? 'animated-ripple' : '',
+          ]"
         >
           <AcceptedCheckMark />
         </div>
@@ -59,21 +61,25 @@
         <div v-if="description" class="label-description">
           <span>{{ description }}</span>
         </div>
-        <div v-if="accuracy" class="accuracy">
-          <span>{{ $t("accuracy") }}</span
+        <div v-if="confidence(annotation)" class="confidence">
+          <span>{{ $t("confidence") }}</span
           ><span
             :class="[
               'value',
-              accuracy <= 0.2 ? 'red' : accuracy <= 0.5 ? 'yellow' : '',
+              confidence(annotation) <= 0.2
+                ? 'red'
+                : confidence(annotation) <= 0.5
+                ? 'yellow'
+                : '',
             ]"
-            >{{ Math.floor(accuracy * 100) / 100 }}</span
+            >{{ Math.floor(confidence(annotation) * 100) / 100 }}</span
           >
         </div>
         <div class="revision">
           <div class="detail-icons">
-            <div v-if="created || edited">
+            <div v-if="created(annotation) || edited(annotation)">
               <div
-                v-if="accepted"
+                v-if="accepted(annotation)"
                 :class="[
                   'annotation-details-icon',
                   animate ? 'animated-ripple' : '',
@@ -94,7 +100,7 @@
               </div>
             </div>
             <div
-              v-else-if="notFound"
+              v-else-if="notFound(annotation)"
               :class="[
                 'annotation-details-icon',
                 animate ? 'animated-ripple' : '',
@@ -105,7 +111,7 @@
             </div>
             <div v-else>
               <div
-                v-if="accepted"
+                v-if="accepted(annotation)"
                 :class="[
                   'annotation-details-icon',
                   animate ? 'animated-ripple' : '',
@@ -131,6 +137,7 @@
   </b-tooltip>
 </template>
 <script>
+import { mapGetters } from "vuex";
 import CheckMark from "../../assets/images/CheckMark";
 import AcceptedCheckMark from "../../assets/images/AcceptedCheckMark";
 import QuestionMark from "../../assets/images/QuestionMark";
@@ -163,97 +170,23 @@ export default {
     };
   },
   computed: {
-    accuracy() {
-      // TODO: add this verification to store
-      if (this.annotation) {
-        return this.annotation.confidence;
-      } else {
-        return null;
-      }
-    },
-    notFound() {
-      // TODO: add this verification to store
-      if (this.annotation) {
-        return !this.annotation.span;
-      } else {
-        return true;
-      }
-    },
-    created() {
-      // TODO: add this verification to store
-      if (this.annotation) {
-        return (
-          this.annotation.created_by &&
-          !this.annotation.revised &&
-          this.annotation.is_correct
-        );
-      } else {
-        return null;
-      }
-    },
-    edited() {
-      // TODO: add this verification to store
-      if (this.annotation) {
-        if (
-          this.annotation.offset_string !==
-          this.annotation.offset_string_original
-        ) {
-          return true;
-        } else if (this.annotation.created_by) {
-          return true;
-        } else {
-          return false;
-        }
-      } else {
-        return null;
-      }
-    },
-    accepted() {
-      // TODO: add this verification to store
-      if (this.annotation) {
-        return this.annotation.revised && this.annotation.is_correct;
-      } else {
-        return null;
-      }
-    },
-    declined() {
-      // TODO: add this verification to store
-      if (this.annotation) {
-        return this.annotation.revised && !this.annotation.is_correct;
-      } else {
-        return null;
-      }
-    },
-    user() {
-      // TODO: add this verification to store
-      if (this.annotation) {
-        if (this.annotation.created_by && !this.annotation.revised) {
-          // If the annotation was created but not yet revised
-          // we show who created it
-          return this.annotation.created_by;
-        } else if (this.annotation.revised && this.annotation.revised_by) {
-          return this.annotation.revised_by;
-        } else {
-          // If both revised_by and created_by are null, we don't show any user
-          return null;
-        }
-      } else {
-        return null;
-      }
-    },
+    ...mapGetters("document", [
+      "confidence",
+      "notFound",
+      "created",
+      "edited",
+      "accepted",
+      "getUser",
+    ]),
   },
   watch: {
     annotation(newAnnotation, oldAnnotation) {
       // animate an annotation being accepted
-      // TODO: add this accepted check to store
-      const accepted = (ann) => {
-        return ann && ann.id && ann.revised && ann.is_correct;
-      };
       if (
         newAnnotation &&
         newAnnotation.id &&
-        accepted(newAnnotation) &&
-        !accepted(oldAnnotation)
+        this.accepted(newAnnotation) &&
+        !this.accepted(oldAnnotation)
       ) {
         this.animate = true;
         setTimeout(() => {
@@ -262,26 +195,50 @@ export default {
       }
     },
   },
+  mounted() {
+    this.changePositionOfTooltip();
+  },
   methods: {
     getText() {
-      if (this.notFound) {
+      if (this.notFound(this.annotation)) {
         return this.$t("not_found_in_document");
-      } else if (this.created) {
-        return this.user
-          ? `${this.$t("created_by")} ${this.user}`
+      } else if (this.created(this.annotation)) {
+        return this.getUser(this.annotation)
+          ? `${this.$t("created_by")} ${this.getUser(this.annotation)}`
           : this.$t("created");
-      } else if (this.accepted) {
-        return this.user
-          ? `${this.$t("approved_by")} ${this.user}`
+      } else if (this.accepted(this.annotation)) {
+        return this.getUser(this.annotation)
+          ? `${this.$t("approved_by")} ${this.getUser(this.annotation)}`
           : this.$t("approved");
-      } else if (this.declined) {
-        return this.user
-          ? `${this.$t("declined_by")} ${this.user}`
-          : this.$t("declined");
       } else {
         return this.$t("not_revised_yet");
       }
     },
+    changePositionOfTooltip() {
+      // Get all elements
+      const annDetails = document.getElementsByClassName("annotation-details");
+
+      // Only last 3 rows will change the position
+      if (annDetails) {
+        let lastElementsInList;
+
+        if (annDetails.length >= 3) {
+          lastElementsInList = annDetails.length - 2;
+        } else {
+          return;
+        }
+
+        for (let i = lastElementsInList; i < annDetails.length; i++) {
+          this.updateClass(annDetails, i);
+        }
+      }
+    },
+    updateClass(array, index) {
+      if (!array[index]) return;
+
+      array[index].classList.remove("is-bottom");
+      array[index].classList.add("is-top");
+    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/CategorizeModal.vue

@@ -6,7 +6,7 @@
       :can-cancel="canCloseModal()"
       class="modal-absolute modal-400 modal-no-footer"
     >
-      <section class="modal-card-body">
+      <section class="modal-card-body scroll-hidden">
         <div class="content">
           <h3>{{ $t("categorize_document_title") }}</h3>
           <p v-if="documentCategory">
@@ -17,31 +17,51 @@
           <p v-else>
             {{ $t("not_categorized") }}
           </p>
-          <b-dropdown
-            v-model="selectedCategory"
-            aria-role="list"
-            class="categorize-dropdown"
+
+          <b-tooltip
+            multilined
+            :active="singleCategoryInProject"
+            size="is-large"
+            position="is-bottom"
+            class="bottom-aligned"
+            :close-delay="5000"
           >
-            <template #trigger>
-              <div class="category-dropdown">
-                <div>
-                  <span v-if="selectedCategory">{{
-                    selectedCategory.name
-                  }}</span>
-                  <span v-else>{{ $t("choose_category") }}</span>
-                </div>
-              </div>
+            <template #content>
+              <div ref="tooltipContent"></div>
             </template>
-            <b-dropdown-item
-              v-for="categoryItem in categories"
-              :key="categoryItem.id"
-              aria-role="listitem"
-              :value="categoryItem"
-              @click="setSelectedCategory(categoryItem)"
+            <b-dropdown
+              v-model="selectedCategory"
+              aria-role="list"
+              :class="[
+                'categorize-dropdown',
+                singleCategoryInProject && 'dropdown-disabled',
+              ]"
+              :disabled="singleCategoryInProject"
             >
-              <span>{{ categoryItem.name }}</span>
-            </b-dropdown-item>
-          </b-dropdown>
+              <template #trigger>
+                <div class="category-dropdown">
+                  <div>
+                    <span v-if="selectedCategory">{{
+                      selectedCategory.name
+                    }}</span>
+                    <span v-else-if="singleCategoryInProject">{{
+                      categories[0].name
+                    }}</span>
+                    <span v-else>{{ $t("choose_category") }}</span>
+                  </div>
+                </div>
+              </template>
+              <b-dropdown-item
+                v-for="categoryItem in categories"
+                :key="categoryItem.id"
+                aria-role="listitem"
+                :value="categoryItem"
+                @click="setSelectedCategory(categoryItem)"
+              >
+                <span>{{ categoryItem.name }}</span>
+              </b-dropdown-item>
+            </b-dropdown>
+          </b-tooltip>
           <div v-if="selectedCategory" class="category-description">
             {{
               selectedCategory.description
@@ -75,12 +95,6 @@ import { mapGetters, mapState } from "vuex";
 
 export default {
   name: "CategorizeModal",
-  computed: {
-    ...mapState("category", ["categories"]),
-    ...mapState("document", ["selectedDocument"]),
-    ...mapGetters("category", ["category"]),
-    ...mapGetters("document", ["categorizationIsConfirmed"]),
-  },
   data() {
     return {
       show: false,
@@ -88,6 +102,17 @@ export default {
       documentCategory: null, // category associated to document
     };
   },
+  computed: {
+    ...mapState("category", ["categories"]),
+    ...mapState("document", ["selectedDocument"]),
+    ...mapGetters("category", ["category"]),
+    ...mapGetters("document", ["categorizationIsConfirmed"]),
+
+    singleCategoryInProject() {
+      // if only 1 category in the project, we don't enable the dropdown
+      return this.categories && this.categories.length === 1;
+    },
+  },
   watch: {
     selectedDocument(newValue) {
       if (newValue) {
@@ -97,18 +122,43 @@ export default {
     categories(newCategories, oldCategories) {
       if (newCategories && oldCategories === null) {
         this.setDocumentValues();
+
+        if (newCategories.length === 1) {
+          this.setTooltipText();
+        }
       }
     },
+    show(newValue) {
+      this.$store.dispatch("document/setCategorizeModalIsActive", newValue);
+    },
   },
   mounted() {
     this.setDocumentValues();
+
+    this.$nextTick(() => {
+      this.setTooltipText();
+    });
+  },
+  updated() {
+    this.setTooltipText();
   },
   methods: {
     setDocumentValues() {
       if (this.selectedDocument) {
-        const category = this.category(this.selectedDocument.category);
+        let category;
+
+        // Check if the document has an extracted category
+        // or if it doesn't, but the project has only 1 category
+        if (this.selectedDocument.category) {
+          category = this.category(this.selectedDocument.category);
+          this.documentCategory = category;
+        } else if (this.categories && this.categories.length === 1) {
+          category = this.category(this.categories[0].id);
+        } else {
+          category = category;
+        }
+
         this.selectedCategory = category;
-        this.documentCategory = category;
         this.show = !this.categorizationIsConfirmed;
       }
     },
@@ -123,7 +173,8 @@ export default {
         (this.selectedCategory &&
           this.documentCategory &&
           this.selectedCategory.id !== this.documentCategory.id) ||
-        (this.selectedCategory && !this.documentCategory)
+        (this.selectedCategory && !this.documentCategory) ||
+        (this.selectedCategory && this.singleCategoryInProject)
       ) {
         const updatedCategory = {
           category: this.selectedCategory.id,
@@ -152,6 +203,14 @@ export default {
       }
       this.show = false;
     },
+    setTooltipText() {
+      // Text set from innerHTML vs 'label' due to html tag in locales file string
+      if (this.singleCategoryInProject && this.show) {
+        this.$refs.tooltipContent.innerHTML = this.$t(
+          "single_category_in_project"
+        );
+      }
+    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/ChooseLabelSetModal.vue

@@ -23,32 +23,47 @@
                 : $t("new_ann_set_description")
             }}
           </p>
-          <b-dropdown
-            v-model="selectedLabelSet"
-            aria-role="list"
-            :disabled="labelSets.length === 0"
-            class="label-set-dropdown"
+          <b-tooltip
+            multilined
+            :active="labelSets.length === 0"
+            size="is-large"
+            position="is-bottom"
+            class="bottom-aligned"
+            :close-delay="5000"
           >
-            <template #trigger>
-              <div>
-                <div>
-                  <span v-if="selectedLabelSet">{{
-                    selectedLabelSet.name
-                  }}</span>
-                  <span v-else>{{ $t("select_label_set") }}</span>
-                </div>
-              </div>
+            <template #content>
+              <div ref="tooltipContent"></div>
             </template>
-            <b-dropdown-item
-              v-for="labelSetItem in labelSets"
-              :key="labelSetItem.id"
-              aria-role="listitem"
-              :value="labelSetItem"
-              @click="setSelectedLabelSet(labelSetItem)"
+            <b-dropdown
+              v-model="selectedLabelSet"
+              aria-role="list"
+              :disabled="labelSets.length === 0"
+              :class="[
+                'label-set-dropdown',
+                labelSets.length === 0 && 'dropdown-disabled',
+              ]"
             >
-              <span>{{ labelSetItem.name }}</span>
-            </b-dropdown-item>
-          </b-dropdown>
+              <template #trigger>
+                <div>
+                  <div>
+                    <span v-if="selectedLabelSet">{{
+                      selectedLabelSet.name
+                    }}</span>
+                    <span v-else>{{ $t("select_label_set") }}</span>
+                  </div>
+                </div>
+              </template>
+              <b-dropdown-item
+                v-for="labelSetItem in labelSets"
+                :key="labelSetItem.id"
+                aria-role="listitem"
+                :value="labelSetItem"
+                @click="setSelectedLabelSet(labelSetItem)"
+              >
+                <span>{{ labelSetItem.name }}</span>
+              </b-dropdown-item>
+            </b-dropdown>
+          </b-tooltip>
           <div v-if="selectedLabelSet" class="labels-list">
             <div v-if="isMultipleAnnotations" class="labels-select">
               <div v-for="label in labels" :key="label.id">
@@ -90,12 +105,9 @@ import { mapGetters, mapState } from "vuex";
 
 export default {
   name: "CreateAnnotationSetModal",
-  computed: {
-    ...mapState("document", ["annotationSets"]),
-    ...mapGetters("project", ["labelSetsFilteredForAnnotationSetCreation"]),
-  },
   props: {
     isMultipleAnnotations: {
+      type: Boolean,
       default: false,
       required: false,
     },
@@ -108,6 +120,17 @@ export default {
       labels: [],
     };
   },
+  computed: {
+    ...mapState("document", ["annotationSets"]),
+    ...mapGetters("project", ["labelSetsFilteredForAnnotationSetCreation"]),
+  },
+  watch: {
+    labelSets(newValue) {
+      if (newValue.length === 0) {
+        this.setTooltipText();
+      }
+    },
+  },
   mounted() {
     this.$store.dispatch("project/fetchLabelSets").then((data) => {
       this.labelSets = this.labelSetsFilteredForAnnotationSetCreation(
@@ -144,6 +167,12 @@ export default {
         };
       });
     },
+    setTooltipText() {
+      // Text set from innerHTML vs 'label' due to html tag in locales file string
+      this.$refs.tooltipContent.innerHTML = this.$t(
+        "no_multi_ann_labelset_model"
+      );
+    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -144,20 +144,6 @@ export default {
       }
     },
   },
-  watch: {
-    editAnnotation(newValue) {
-      if (!newValue && !this.jumpToNextAnnotation) {
-        this.count = 0;
-      }
-    },
-    acceptAnnotation(newValue, oldValue) {
-      // TODO: rework this to be more generic
-      if (!newValue && oldValue) {
-        this.focusOnNextAnnotation();
-        this.jumpToNextAnnotation = false;
-      }
-    },
-  },
   created() {
     window.addEventListener("keydown", this.keyDownHandler);
   },