@konfuzio/document-validation-ui 0.1.5-automatic-document-splitting-2 → 0.1.5-pre-release-1

package/package.json

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

package/src/assets/images/ServerImage.vue

@@ -17,11 +17,11 @@ export default {
     },
     height: {
       default: null,
-      type: String,
+      type: Number,
     },
     width: {
       default: null,
-      type: String,
+      type: Number,
     },
   },
   data() {

package/src/assets/images/SplitZigZag.vue

@@ -1,49 +1,16 @@
 <template>
-  <div>
-    <svg
-      v-if="color === 'dark'"
-      width="6"
-      height="57"
-      viewBox="0 0 6 57"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M1 1L5 7.875L1 14.75L5 21.625L1 28.5L5 35.375L1 42.25L5 49.125L1 56"
-        stroke="#1A1A1A"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-
-    <svg
-      v-if="color === 'green'"
-      width="6"
-      height="52"
-      viewBox="0 0 6 52"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M1 1.67383L5 7.81966L1 13.9655L5 20.1113L1 26.2572L5 32.403L1 38.5488L5 44.6947L1 50.8405"
-        stroke="#44B78B"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  </div>
+  <svg
+    width="6"
+    height="57"
+    viewBox="0 0 6 57"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1 1L5 7.875L1 14.75L5 21.625L1 28.5L5 35.375L1 42.25L5 49.125L1 56"
+      stroke="#1A1A1A"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
 </template>
-
-<script>
-export default {
-  name: "SplitZigZag",
-  props: {
-    color: {
-      type: String,
-      default: null,
-      required: false,
-    },
-  },
-};
-</script>

package/src/assets/scss/document_category.scss

@@ -42,6 +42,7 @@
 
     .category-info {
       min-width: 100px;
+      width: 100px;
       margin-left: 5px;
       margin-right: 5px;
 

package/src/assets/scss/document_dashboard.scss

@@ -25,12 +25,6 @@
       background-size: 9px 9px;
     }
 
-    &.edit-mode {
-      .dashboard-document {
-        flex: 1.5;
-      }
-    }
-
     @media print {
       .dashboard-document {
         position: static;

package/src/assets/scss/document_edit.scss

@@ -7,6 +7,7 @@
 
   &.split-overview-component {
     min-width: 600px;
+    flex: 0;
   }
 
   .pages-section {
@@ -14,9 +15,6 @@
     overflow-y: scroll;
     border-right: $component-border;
     border-left: $component-border;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
 
     .document-grid {
       padding: 42px;
@@ -167,128 +165,86 @@
         }
       }
     }
-
-    .info-bar {
-      position: sticky;
-      width: -moz-fit-content;
-      width: fit-content;
-      bottom: 20px;
-      left: 0;
-      right: 0;
-      margin: 0 auto;
-      padding: 10px;
-
-      .split-info-bar {
-        padding: 5px 13px;
-        min-height: 32px;
-        height: auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 3px;
-        background-color: $text-color;
-        color: $white;
-        font-weight: 400;
-        font-size: 14px;
-        border-radius: 52px;
-        text-align: center;
-      }
-    }
   }
 
   .sidebar {
     width: 45%;
-    max-width: 300px;
-    min-width: 270px;
     background-color: $background;
 
     .edit-sidebar {
       display: flex;
       flex-direction: column;
       align-items: center;
-      justify-content: flex-start;
+      justify-content: center;
       text-align: center;
-      height: 100%;
+      height: calc(100% - 60px);
+      gap: 50px;
+
+      .sidebar-header {
+        width: 85%;
+        height: 50%;
+
+        h3 {
+          color: $text-color;
+          font-weight: 600;
+          font-size: 16px;
+          line-height: 24px;
+          padding-bottom: 15px;
+        }
+
+        .description {
+          color: $grey;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+
+          &:last-child {
+            padding-top: 12px;
+          }
+        }
+      }
 
       .buttons-container {
         width: 85%;
         display: flex;
         flex-direction: column;
+        gap: 24px;
         color: $grey-dark;
 
         .pages-selected {
           font-weight: 400;
           font-size: 14px;
-          margin-bottom: 15px;
 
           &.disabled {
             color: $grey;
           }
         }
 
-        .edit-buttons {
+        .rotate {
           display: flex;
           flex-direction: column;
           gap: 8px;
-          border-bottom: 1px solid $grey-detail;
-
-          .sidebar-buttons {
-            .edit-mode-btn {
-              display: flex;
-              width: 100%;
-
-              .button-content {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 9px;
-
-                .button-text {
-                  font-size: 14px;
-                  font-weight: 500;
-                  max-width: 70%;
-                }
-              }
-            }
-
-            &:first-child {
-              margin-top: 14px;
-            }
-
-            &:last-child {
-              margin-bottom: 14px;
-            }
-          }
+        }
 
-          &:first-child {
-            margin-top: 14px;
-          }
+        .rotate-button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 !important;
+          white-space: initial;
+          line-height: 1;
+          gap: 5px;
 
-          &:last-child {
-            margin-bottom: 14px;
-          }
-        }
-      }
+          .button-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
-      .smart-split {
-        .switch {
-          .control-label {
-            .switch-text {
-              font-size: 14px;
-              padding-right: 10px;
-              color: $grey-dark;
-              font-weight: 500;
+            .button-text {
+              font-size: 16px;
+              max-width: 70%;
             }
           }
-
-          .new-badge {
-            background: linear-gradient(90deg, #c1ff79 0%, #79fff7 100%);
-            border-radius: 36px;
-            font-weight: 700;
-            font-size: 11px;
-            padding: 5px;
-            color: $text-color;
-          }
         }
       }
     }
@@ -472,45 +428,4 @@
       }
     }
   }
-
-  .confirmation-modal-container {
-    .edit-confirmation-modal {
-      .header {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding-bottom: 15px;
-        font-weight: 500;
-        font-size: 18px;
-      }
-
-      .content {
-        text-align: left;
-        font-weight: 400;
-        font-size: 14px;
-        color: $grey-blue;
-      }
-
-      .modal-card-foot {
-        display: flex;
-        gap: 5px;
-
-        .recommended {
-          font-weight: 600;
-          font-size: 11px;
-          background-color: rgba(255, 255, 255, 0.2);
-          padding: 2px 5px;
-          border-radius: 36px;
-        }
-
-        .button {
-          width: 100%;
-
-          &.is-primary {
-            font-weight: 500;
-          }
-        }
-      }
-    }
-  }
 }

package/src/assets/scss/document_top_bar.scss

@@ -14,7 +14,7 @@
   .document-top-bar {
     width: 100%;
     height: 100%;
-    background-color: $background;
+    background-color: $top-bar-background;
     position: sticky;
     z-index: 39;
     display: flex;

package/src/assets/scss/variables.scss

@@ -42,12 +42,14 @@ $text-color: #1a1a1a;
 :root {
   --primary-color: #{$konfuzio-green};
   --primary-button: 4px;
+  --top-bar-background: #{$white};
 }
 
 $primary: var(--primary-color);
 $hover-style: brightness(0.8) contrast(160%) grayscale(0.4);
 $font-family: "Inter", sans-serif;
 $background: $white;
+$top-bar-background: var(--top-bar-background);
 $toolbar: $text-color;
 $tooltip: $dark;
 $toolbar-elements: $white;
@@ -152,7 +154,7 @@ button {
     }
   }
 
-  &.edit-mode-btn[disabled] {
+  &.rotate-button[disabled] {
     border: 1px solid $detail;
   }
 
@@ -379,10 +381,6 @@ button {
       .modal-card-body {
         background: $white;
         border-radius: 16px 16px 0 0 !important;
-
-        &.split-modal {
-          padding-bottom: 0;
-        }
       }
 
       .modal-card-foot {
@@ -399,16 +397,6 @@ button {
     position: absolute;
   }
 
-  &.edit-modal {
-    .modal-content {
-      max-width: 441px !important;
-
-      .modal-card-body {
-        padding-bottom: 10px;
-      }
-    }
-  }
-
   .modal-background {
     background-color: $full-black;
     opacity: 0.5;
@@ -524,12 +512,6 @@ button {
         right: 0 !important;
       }
     }
-
-    &.finish-review {
-      .tooltip-content {
-        right: 0 !important;
-      }
-    }
   }
 
   &.width-184 {
@@ -570,35 +552,6 @@ button {
       }
     }
   }
-
-  &.split-tooltip {
-    width: 100%;
-  }
-
-  &.bottom-aligned {
-    width: 100%;
-    bottom: 10px;
-
-    .tooltip-content {
-      &::before {
-        border-bottom-color: $text-color !important;
-      }
-
-      a {
-        color: $white;
-        text-decoration: underline;
-        font-weight: 500;
-      }
-    }
-  }
-
-  &.top-aligned {
-    .tooltip-content {
-      &::before {
-        border-top-color: $text-color !important;
-      }
-    }
-  }
 }
 
 .rejected-tag-container {
@@ -771,16 +724,3 @@ button {
     }
   }
 }
-
-.switch {
-  input[type="checkbox"] {
-    &:checked + .check {
-      background: $primary !important;
-      box-shadow: none !important;
-    }
-
-    &:focus + .check {
-      box-shadow: none !important;
-    }
-  }
-}

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -41,7 +41,7 @@ export default {
       required: true,
     },
     span: {
-      type: [Object, Array],
+      type: Object,
       required: true,
     },
     spanIndex: {

package/src/components/DocumentAnnotations/CategorizeModal.vue

@@ -105,18 +105,9 @@ export default {
   },
   computed: {
     ...mapState("category", ["categories"]),
-    ...mapState("document", [
-      "selectedDocument",
-      "categorizeModalIsActive",
-      "splittingSuggestions",
-    ]),
+    ...mapState("document", ["selectedDocument"]),
     ...mapGetters("category", ["category", "projectHasSingleCategory"]),
     ...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) {
@@ -136,13 +127,6 @@ export default {
     show(newValue) {
       this.$store.dispatch("display/setCategorizeModalIsActive", newValue);
     },
-    categorizeModalIsActive(newValue) {
-      // Show modal after split suggestion modal
-      // if no category confirmed
-      if (newValue) {
-        this.show = newValue && !this.categorizationIsConfirmed;
-      }
-    },
   },
   mounted() {
     this.setDocumentValues();
@@ -175,11 +159,7 @@ export default {
         }
 
         this.selectedCategory = category;
-        this.documentCategory = category;
-
-        // By default, if the document has no category, the categorize modal is shown
-        // But if there is a category, we also need to check if there are splitting suggestions or not
-        this.show = !category || (category && !this.splittingSuggestions);
+        this.show = !this.categorizationIsConfirmed;
       }
     },
     canCloseModal() {

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -14,9 +14,7 @@
 
     <!-- When there's no annotations in the label -->
     <div v-else-if="annotationSets.length === 0">
-      <CategorizeModal
-        v-if="!publicView && !waitingForSplittingConfirmation(selectedDocument)"
-      />
+      <CategorizeModal v-if="!publicView" />
       <EmptyState />
     </div>
 
@@ -27,9 +25,7 @@
         missingAnnotations.length && !publicView && 'showing-rejected',
       ]"
     >
-      <CategorizeModal
-        v-if="!publicView && !waitingForSplittingConfirmation(selectedDocument)"
-      />
+      <CategorizeModal v-if="!publicView" />
       <div
         v-for="(annotationSet, indexGroup) in annotationSets"
         :key="indexGroup"
@@ -127,13 +123,9 @@ export default {
       "loading",
       "labels",
       "selectedDocument",
-      "splittingSuggestions",
     ]),
     ...mapGetters("category", ["category"]),
-    ...mapGetters("document", [
-      "numberOfAnnotationSetGroup",
-      "waitingForSplittingConfirmation",
-    ]),
+    ...mapGetters("document", ["numberOfAnnotationSetGroup"]),
     isAnnotationBeingEdited() {
       return this.editAnnotation && this.editAnnotation.id;
     },

package/src/components/DocumentCategory.vue

@@ -29,7 +29,11 @@
               {{ $t("category") }}
             </p>
             <div class="category-name">
-              {{ setCategoryDefaultText }}
+              {{
+                !splitMode
+                  ? categoryName(selectedDocument.category)
+                  : categoryName(updatedDocument[index].category)
+              }}
             </div>
           </div>
           <div :class="[!splitMode && 'caret-section']">
@@ -98,18 +102,6 @@ export default {
     ...mapState("document", ["selectedDocument", "annotations"]),
     ...mapState("category", ["categories"]),
     ...mapState("edit", ["editMode", "updatedDocument"]),
-
-    setCategoryDefaultText() {
-      if (!this.splitMode) {
-        return this.categoryName(this.selectedDocument.category);
-      } else {
-        const categoryName = this.categoryName(
-          this.updatedDocument[this.index].category
-        );
-
-        return categoryName ? categoryName : this.$t("choose_category");
-      }
-    },
   },
   watch: {
     categories(newValue) {

package/src/components/DocumentDashboard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dashboard">
     <DocumentTopBar />
-    <div :class="['dashboard-viewer', splitOverview ? 'edit-mode' : '']">
+    <div :class="['dashboard-viewer', editMode ? 'edit-mode' : '']">
       <DocumentThumbnails v-if="!editMode" ref="documentPages" />
       <ScrollingDocument ref="scrollingDocument" class="dashboard-document" />
       <DocumentAnnotations v-if="!editMode" ref="annotations" />
@@ -18,7 +18,7 @@
       </transition>
     </div>
     <div v-if="showDocumentError" class="error-modal">
-      <DocumentErrorModal />
+      <DocumentError />
     </div>
     <div v-if="!optimalResolution" class="not-optimized">
       <NotOptimizedViewportModal />
@@ -28,13 +28,6 @@
         {{ $t("resolution_not_supported") }}
       </div>
     </div>
-    <div
-      v-if="
-        selectedDocument && waitingForSplittingConfirmation(selectedDocument)
-      "
-    >
-      <SplittingSuggestionsModal />
-    </div>
   </div>
 </template>
 
@@ -46,9 +39,8 @@ import { DocumentThumbnails } from "./DocumentThumbnails";
 import { DocumentAnnotations } from "./DocumentAnnotations";
 import { DocumentEdit } from "./DocumentEdit";
 import ErrorMessage from "./ErrorMessage";
-import NotOptimizedViewportModal from "../components/DocumentModals/NotOptimizedViewportModal";
-import DocumentErrorModal from "../components/DocumentModals/DocumentErrorModal";
-import SplittingSuggestionsModal from "../components/DocumentModals/SplittingSuggestionsModal";
+import NotOptimizedViewportModal from "./NotOptimizedViewportModal";
+import DocumentError from "./DocumentError";
 
 /**
  * This component shows the PDF pages in a scrolling component and
@@ -64,8 +56,7 @@ export default {
     DocumentEdit,
     ErrorMessage,
     NotOptimizedViewportModal,
-    DocumentErrorModal,
-    SplittingSuggestionsModal,
+    DocumentError,
   },
   data() {
     return {
@@ -86,11 +77,9 @@ export default {
       "showDocumentError",
       "errorMessageWidth",
       "selectedDocument",
-      "splittingSuggestions",
     ]),
-    ...mapState("edit", ["editMode", "splitOverview"]),
+    ...mapState("edit", ["editMode"]),
     ...mapGetters("display", ["isMinimumWidth"]),
-    ...mapGetters("document", ["waitingForSplittingConfirmation"]),
   },
   watch: {
     selectedDocument(newDocument, oldDocument) {