@konfuzio/document-validation-ui 0.1.6-multi-ann-set-2 → 0.1.6-pre-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.6-multi-ann-set-2",
+  "version": "0.1.6-pre-release",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {
@@ -39,6 +39,7 @@
     "vue-i18n": "^8.27.1",
     "vue-i18n-bridge": "^9.2.2",
     "vue-konva": "^2.1.7",
+    "vue-observe-visibility": "^1.0.0",
     "vue-template-compiler": "^2.6.10",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2"

package/src/assets/images/ServerImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex">
+  <div v-observe-visibility="visibilityChanged" style="display: flex">
     <img v-show="loaded" ref="imgTag" :height="height" />
     <slot v-if="!loaded" />
   </div>
@@ -27,16 +27,16 @@ export default {
   data() {
     return {
       loaded: false,
+      isVisible: false,
     };
   },
   watch: {
     imageUrl() {
-      this.loadImage();
+      if (this.isVisible) {
+        this.loadImage();
+      }
     },
   },
-  mounted() {
-    this.loadImage();
-  },
   methods: {
     loadImage() {
       if (!this.imageUrl) return;
@@ -56,6 +56,12 @@ export default {
           this.loaded = false;
         });
     },
+    visibilityChanged(isVisible) {
+      if (!this.isVisible && isVisible) {
+        this.isVisible = isVisible;
+        this.loadImage();
+      }
+    },
   },
 };
 </script>

package/src/assets/scss/document_edit.scss

@@ -26,15 +26,14 @@
       gap: 20px;
 
       .image-section {
+        cursor: grab;
         width: 138px;
         height: 138px;
         display: flex;
         align-items: center;
 
         .img-container {
-          &:hover {
-            cursor: pointer;
-          }
+          cursor: pointer;
 
           .img-thumbnail {
             border: $component-border;

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -75,7 +75,7 @@
             />
           </div>
           <EmptyAnnotation
-            v-else
+            v-else-if="!fromTable"
             :label="label"
             :annotation-set="annotationSet"
             :is-hovered="hoveredAnnotation"
@@ -140,14 +140,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    isSmall: {
-      type: Boolean,
-      default: false,
-    },
-    showHover: {
-      type: Boolean,
-      default: true,
-    },
     fromTable: {
       type: Boolean,
       default: false,

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -498,6 +498,8 @@ export default {
     },
 
     openAnnotationSetTable(tableSet) {
+      this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("document/resetEditAnnotation");
       if (this.showAnnSetTable && this.showAnnSetTable === tableSet) {
         this.$store.dispatch("display/toggleAnnSetTable", tableSet);
       } else {

package/src/components/DocumentPage/AnnSetTableOptions.vue

@@ -49,29 +49,31 @@ export default {
       return this.showAnnSetTable[0].label_set.name;
     },
     coordinates() {
-      let x = 0;
-      let y = 0;
-      const paddingTop = 55;
+      let xFinal = 0;
+      let yFinal = 0;
+      const paddingTop = 40;
 
       this.showAnnSetTable.forEach((annotationSet) => {
-        if (
-          annotationSet.labels &&
-          annotationSet.labels.length > 0 &&
-          annotationSet.labels[0].annotations
-        ) {
-          annotationSet.labels[0].annotations.forEach((annotation) => {
-            annotation.span.forEach((span) => {
-              if (x === 0 || span.x0 < x) {
-                x = span.x0;
-              }
-              if (y === 0 || span.y0 < y) {
-                y = span.y0 + paddingTop;
-              }
+        if (annotationSet.labels) {
+          annotationSet.labels.forEach((label) => {
+            label.annotations.forEach((annotation) => {
+              annotation.span.forEach((span) => {
+                const { x, y } = this.bboxToPoint(this.page, {
+                  x: span.x0,
+                  y: span.y0,
+                });
+                if (xFinal === 0 || x < xFinal) {
+                  xFinal = x;
+                }
+                if (yFinal === 0 || y < yFinal) {
+                  yFinal = y - paddingTop;
+                }
+              });
             });
           });
         }
       });
-      return this.bboxToPoint(this.page, { x, y });
+      return { x: xFinal, y: yFinal };
     },
   },
   methods: {

package/src/components/DocumentPage/MultiAnnSelection.vue

@@ -144,6 +144,7 @@ export default {
       });
     },
     chooseLabelSet(labelSet) {
+      // TODO: deprecated with new multi ann set table
       const tableSelection = {
         labelSet,
         position: {
@@ -196,6 +197,7 @@ export default {
             serverErrorMessage: this.$t("server_error"),
             defaultErrorMessage: this.$t("error_creating_multi_ann"),
           });
+          this.$store.dispatch("selection/disableSelection");
           this.$emit("finished");
         });
     },

package/src/components/DocumentPage/MultiAnnotationTableOverlay.vue

@@ -106,12 +106,18 @@ export default {
   },
   computed: {
     ...mapState("display", ["showAnnSetTable"]),
+    ...mapState("document", ["annotations"]),
   },
   watch: {
     showAnnSetTable() {
       this.handleColumns();
       this.handleRows();
     },
+    annotations() {
+      // if there's a change in the annotations content, we update the table
+      this.handleColumns();
+      this.handleRows();
+    },
   },
   mounted() {
     this.handleColumns();
@@ -151,14 +157,18 @@ export default {
 
       this.showAnnSetTable.forEach((annotationSet) => {
         let row = {};
+        let toAdd = false; // to not push empty labels
 
         annotationSet.labels.forEach((label) => {
           if (label.annotations.length > 0) {
             row[label.id] = label.annotations[0];
             this.orderedAnnotations.push(label.annotations[0]);
+            toAdd = true;
           }
         });
-        this.rows.push(row);
+        if (toAdd) {
+          this.rows.push(row);
+        }
       });
     },
 
@@ -222,6 +232,8 @@ export default {
 
     onDropdownChange(column, open) {
       this.editingLabels = [];
+      this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("document/resetEditAnnotation");
       if (open) {
         if (this.openDropdown) {
           this.$refs[this.openDropdown][0].toggle();

package/src/main.js

@@ -8,6 +8,8 @@ import { Integrations } from "@sentry/tracing";
 import i18n from "./i18n";
 import store from "./store";
 import { library } from "@fortawesome/fontawesome-svg-core";
+import VueObserveVisibility from "vue-observe-visibility";
+
 // internal icons
 import {
   faArrowUp,
@@ -55,6 +57,7 @@ Vue.use(Buefy, {
   defaultIconPack: "fas",
   defaultIconComponent: "vue-fontawesome",
 });
+Vue.use(VueObserveVisibility);
 
 // Sentry config
 if (process.env.NODE_ENV != "development") {