@konfuzio/document-validation-ui 0.1.59 → 0.2.0-dev.2

package/src/i18n.js

@@ -1,7 +1,4 @@
-import Vue from "vue";
-import VueI18n from "vue-i18n";
-
-Vue.use(VueI18n);
+import { createI18n } from "vue-i18n";
 
 function loadLocaleMessages() {
   const locales = require.context(
@@ -20,7 +17,7 @@ function loadLocaleMessages() {
   return messages;
 }
 
-export default new VueI18n({
+export const i18n = createI18n({
   locale: process.env.VUE_APP_LOCALE || "en",
   fallbackLocale: "en",
   messages: loadLocaleMessages(),

package/src/locales/de.json

@@ -166,5 +166,6 @@
   "checkbox_ann_details": "Für dieses Label wird ein Kästchen extrahiert.",
   "document_section": "Dokumentabschnitt",
   "label_size": "Spaltengröße:",
-  "powered_by": "betrieben von Konfuzio"
+  "powered_by": "betrieben von Konfuzio",
+  "nav_label_anns": "Durch Annotationen navigieren"
 }

package/src/locales/en.json

@@ -167,5 +167,6 @@
   "checkbox_ann_details": "A checkbox will be extracted for this label.",
   "document_section": "Document Section",
   "label_size": "Column size:",
-  "powered_by": "powered by Konfuzio"
+  "powered_by": "powered by Konfuzio",
+  "nav_label_anns": "Navigate through annotations"
 }

package/src/locales/es.json

@@ -166,5 +166,6 @@
   "checkbox_ann_details": "Se extraerá una casilla de verificación para esta etiqueta.",
   "document_section": "Sección del documento",
   "label_size": "Tamaño de columna:",
-  "powered_by": "impulsado por Konfuzio"
+  "powered_by": "impulsado por Konfuzio",
+  "nav_label_anns": "Navegar por las anotaciones"
 }

package/src/main.js

@@ -1,28 +1,26 @@
 import App from "./components/App";
-import Vue from "vue";
+import { createApp } from "vue";
 import Buefy from "buefy";
 import VueKonva from "vue-konva";
-import i18n from "./i18n";
-import store from "./store";
-import VueObserveVisibility from "vue-observe-visibility";
+import { i18n } from "./i18n";
+import { store } from "./store";
+import VueObserveVisibility from "vue3-observe-visibility";
 import Icons from "./icons";
-import VueSplit from "vue-split-panel";
 
-Vue.component("VueFontawesome", Icons);
-Vue.component("App", App);
-Vue.use(VueKonva);
-Vue.use(Buefy, {
+const app = createApp();
+
+app.component("App", App);
+app.component("VueFontawesome", Icons);
+app.use(VueKonva);
+app.use(Buefy, {
   defaultIconPack: "fas",
   defaultIconComponent: "vue-fontawesome",
 });
-Vue.use(VueObserveVisibility);
-Vue.use(VueSplit);
+app.use(VueObserveVisibility);
+app.use(store);
+app.use(i18n);
 
 /**
  * Main entrypoint for the App
  */
-new Vue({
-  i18n,
-  store,
-  el: "#app",
-});
+app.mount("#app");

package/src/store/display.js

@@ -113,32 +113,43 @@ const getters = {
    * image rendering.
    */
   imageScale: (state) => (page) => {
-    return new BigNumber(page.size[0]).div(page.original_size[0]).toNumber();
+    if (
+      page.size &&
+      page.size.length > 0 &&
+      page.original_size &&
+      page.original_size.length > 0
+    ) {
+      return new BigNumber(page.size[0]).div(page.original_size[0]).toNumber();
+    }
+    return 0;
   },
   bboxToPoint:
     (state, getters) =>
     (page, point, hasOffset = false) => {
-      const imageScale = getters.imageScale(page);
-      const { x, y } = point;
-      const pageHeight = new BigNumber(page.original_size[1]);
-      const newPoint = {
-        // left
-        x: new BigNumber(x)
-          .minus(hasOffset ? 1 : 0)
-          .times(state.scale)
-          .times(imageScale)
-          .div(PIXEL_RATIO)
-          .toNumber(),
-        // top
-        y: pageHeight
-          .minus(new BigNumber(y))
-          .minus(hasOffset ? 17.1 : 0)
-          .times(state.scale)
-          .times(imageScale)
-          .div(PIXEL_RATIO)
-          .toNumber(),
-      };
-      return newPoint;
+      if (page && page.original_size && page.original_size.length > 1) {
+        const imageScale = getters.imageScale(page);
+        const { x, y } = point;
+        const pageHeight = new BigNumber(page.original_size[1]);
+        const newPoint = {
+          // left
+          x: new BigNumber(x)
+            .minus(hasOffset ? 1 : 0)
+            .times(state.scale)
+            .times(imageScale)
+            .div(PIXEL_RATIO)
+            .toNumber(),
+          // top
+          y: pageHeight
+            .minus(new BigNumber(y))
+            .minus(hasOffset ? 17.1 : 0)
+            .times(state.scale)
+            .times(imageScale)
+            .div(PIXEL_RATIO)
+            .toNumber(),
+        };
+        return newPoint;
+      }
+      return { x: 0, y: 0 };
     },
   bboxToRect:
     (state, getters) =>

package/src/store/document.js

@@ -153,6 +153,31 @@ const getters = {
     return annotations.length > 0;
   },
 
+  /* Checks if the label has annotations to show */
+  isLabelMultiFalseAndGroupOfAnns: (state) => (label) => {
+    return (
+      label &&
+      label.annotations &&
+      label.annotations.length > 1 &&
+      !label.has_multiple_top_candidates &&
+      state.enableGroupingFeature
+    );
+  },
+
+  /* Returns the annotations ordered by highest confidence */
+  annotationsByConfidence: (state) => (annotations) => {
+    annotations.sort((a, b) => {
+      if (a.confidence < b.confidence) {
+        return -1;
+      } else if (a.confidence > b.confidence) {
+        return 1;
+      }
+      return 0;
+    });
+
+    return annotations;
+  },
+
   /* Checks if the document has an annotation set */
   annotationSetExists: (state) => (annotationSetId) => {
     return state.annotationSets.find((annSet) => annSet.id === annotationSetId);
@@ -256,11 +281,16 @@ const getters = {
   /* Get label for a given annotation */
   labelOfAnnotation: (state) => (annotationToFind) => {
     let foundLabel = null;
-    state.annotationSets.forEach((annotationSet) => {
-      annotationSet.labels.forEach((label) => {
-        label.annotations.forEach((annotation) => {
-          if (annotation.id === annotationToFind.id) {
-            foundLabel = label;
+    if (state.annotationSets) {
+      state.annotationSets.forEach((annotationSet) => {
+        annotationSet.labels.forEach((label) => {
+          label.annotations.forEach((annotation) => {
+            if (annotation.id === annotationToFind.id) {
+              foundLabel = label;
+              return;
+            }
+          });
+          if (foundLabel) {
             return;
           }
         });
@@ -268,14 +298,12 @@ const getters = {
           return;
         }
       });
-      if (foundLabel) {
-        return;
-      }
-    });
+    }
+
     return foundLabel;
   },
 
-  getAnnotationsFiltered: (state) => {
+  getAnnotationsFiltered: (state, getters) => {
     // group annotations for sidebar
     let annotations = [];
     let labels = [];
@@ -331,6 +359,18 @@ const getters = {
       return false;
     };
 
+    const sortByConfidenceOrByAnnotationSelected = (annotations) => {
+      annotations = getters.annotationsByConfidence(annotations);
+      if (state.annotationId) {
+        for (let i = 0; i < annotations.length; i++) {
+          if (state.annotationId == annotations[i].id) {
+            annotations.unshift(annotations.splice(i, 1)[0]);
+          }
+        }
+      }
+      return annotations;
+    };
+
     if (state.annotationSets) {
       state.annotationSets.forEach((annotationSet) => {
         labels = [];
@@ -350,6 +390,13 @@ const getters = {
             !state.annotationFilters.showFeedbackNeeded ||
             !state.annotationFilters.showAccepted
           ) {
+            if (!label.has_multiple_top_candidates) {
+              // if multi label = false, sort by confidence
+              label.annotations = sortByConfidenceOrByAnnotationSelected(
+                label.annotations
+              );
+            }
+
             label.annotations.forEach((annotation) => {
               if (
                 state.annotationFilters.showFeedbackNeeded &&
@@ -379,6 +426,12 @@ const getters = {
               }
             });
           } else {
+            if (!label.has_multiple_top_candidates) {
+              // if multi label = false, sort by confidence
+              label.annotations = sortByConfidenceOrByAnnotationSelected(
+                label.annotations
+              );
+            }
             // add annotations to the document array
             label.annotations.forEach((annotation) => {
               const added = addAnnotation(
@@ -963,6 +1016,15 @@ const actions = {
     commit("SET_DOC_ID", id);
   },
   setAnnotationId: ({ commit, dispatch, getters }, id) => {
+    if (id) {
+      // check if part of label with multi ann as false
+      const annotation = getters.annotationById(id);
+      const label = getters.labelOfAnnotation(annotation);
+      if (getters.isLabelMultiFalseAndGroupOfAnns(label)) {
+        dispatch("setAnnotationAsFirstInLabel", { label, annotation });
+      }
+    }
+
     commit("SET_ANNOTATION_ID", id);
     setURLAnnotationHash(id);
   },
@@ -1134,6 +1196,7 @@ const actions = {
     // Check if we first open the document dashboard or the edit mode
     if (
       !state.publicView &&
+      state.selectedDocument &&
       (!state.selectedDocument.category ||
         (!state.selectedDocument.category_is_revised &&
           !getters.documentHasCorrectAnnotations &&
@@ -1541,6 +1604,57 @@ const actions = {
   showAcceptedAnnotations({ commit }, show) {
     commit("SET_SHOW_ACCEPTED_ANNOTATIONS", show);
   },
+  setAnnotationAsFirstInLabel({ commit, state }, { label, annotation }) {
+    state.annotationSets.forEach((annotationSet) => {
+      annotationSet.labels.forEach((labelToFind) => {
+        if (labelToFind.id === label.id) {
+          if (labelToFind.annotations && labelToFind.annotations.length > 1) {
+            for (let i = 0; i < labelToFind.annotations.length; i++) {
+              if (labelToFind.annotations[i].id === annotation.id) {
+                labelToFind.annotations.unshift(
+                  labelToFind.annotations.splice(i, 1)[0]
+                );
+                commit("SET_ANNOTATIONS_IN_LABEL", {
+                  label: labelToFind,
+                  annotations: labelToFind.annotations,
+                });
+              }
+            }
+          }
+        }
+      });
+    });
+  },
+  putNextAnnotationInLabelFirst({ commit, state, dispatch }, label) {
+    dispatch("setAnnotationId", null);
+    let newFirstAnn = null;
+    state.annotationSets.forEach((annotationSet) => {
+      annotationSet.labels.forEach((labelToFind) => {
+        if (labelToFind.id === label.id) {
+          if (labelToFind.annotations && labelToFind.annotations.length > 1) {
+            const firstElement = labelToFind.annotations.shift();
+            labelToFind.annotations.push(firstElement);
+            commit("SET_ANNOTATIONS_IN_LABEL", {
+              label: labelToFind,
+              annotations: labelToFind.annotations,
+            });
+            newFirstAnn = labelToFind.annotations[0];
+          }
+        }
+      });
+    });
+
+    if (newFirstAnn) {
+      dispatch("setDocumentAnnotationSelected", {
+        annotation: newFirstAnn,
+        label: label,
+        span: newFirstAnn.span[0],
+        scrollTo: true,
+      });
+
+      dispatch("scrollToDocumentAnnotationSelected");
+    }
+  },
 };
 
 const mutations = {
@@ -1686,6 +1800,13 @@ const mutations = {
   SET_LABELS: (state, labels) => {
     state.labels = labels;
   },
+  SET_ANNOTATIONS_IN_LABEL: (state, { label, annotations }) => {
+    state.labels.forEach((labelToFind) => {
+      if (labelToFind.id === label.id) {
+        labelToFind.annotations = annotations;
+      }
+    });
+  },
   SET_EDIT_ANNOTATION: (state, editAnnotation) => {
     state.editAnnotation = editAnnotation;
   },

package/src/store/index.js

@@ -1,5 +1,4 @@
-import Vue from "vue";
-import Vuex from "vuex";
+import { createStore } from "vuex";
 
 import display from "./display";
 import document from "./document";
@@ -8,15 +7,13 @@ import project from "./project";
 import selection from "./selection";
 import edit from "./edit";
 
-Vue.use(Vuex);
-
-export default new Vuex.Store({
+export const store = createStore({
   modules: {
     display,
     document,
     category,
     project,
     selection,
-    edit
-  }
-});
+    edit,
+  },
+});