@konfuzio/document-validation-ui 0.1.4 → 0.1.5-automatic-document-splitting

package/package.json

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

package/src/assets/images/MagicWandIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="19"
+    height="19"
+    viewBox="0 0 19 19"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.5098 0.833984C11.97 0.833984 12.3431 1.20708 12.3431 1.66732V2.91732C12.3431 3.37755 11.97 3.75065 11.5098 3.75065C11.0496 3.75065 10.6765 3.37755 10.6765 2.91732V1.66732C10.6765 1.20708 11.0496 0.833984 11.5098 0.833984ZM6.70333 2.74473C7.02877 2.41929 7.55641 2.41929 7.88184 2.74473L8.76573 3.62861C9.09116 3.95405 9.09116 4.48169 8.76573 4.80712C8.44029 5.13256 7.91265 5.13256 7.58721 4.80712L6.70333 3.92324C6.37789 3.5978 6.37789 3.07017 6.70333 2.74473ZM16.2657 2.74473C16.5912 3.07017 16.5912 3.5978 16.2657 3.92324L15.3818 4.80712C15.0564 5.13256 14.5288 5.13256 14.2033 4.80712C13.8779 4.48169 13.8779 3.95405 14.2033 3.62861L15.0872 2.74473C15.4127 2.41929 15.9403 2.41929 16.2657 2.74473ZM9.73615 5.84407C10.0709 5.7353 10.4315 5.7353 10.7662 5.84407C11.0076 5.92251 11.1925 6.05549 11.3383 6.17918C11.4709 6.29182 11.6158 6.43668 11.7645 6.58543L12.4164 7.23737C12.5651 7.38607 12.71 7.53089 12.8226 7.66358C12.9463 7.80928 13.0793 7.99419 13.1578 8.23562C13.2665 8.57036 13.2665 8.93094 13.1578 9.26568C13.0793 9.50711 12.9463 9.69202 12.8226 9.83772C12.71 9.9704 12.5652 10.1152 12.4164 10.2639L10.4244 12.256C10.4242 12.2562 10.424 12.2564 10.4238 12.2566C10.4236 12.2568 10.4234 12.257 10.4232 12.2572L4.68113 17.9992C4.53242 18.148 4.3876 18.2928 4.25492 18.4055C4.10921 18.5291 3.9243 18.6621 3.68287 18.7406C3.34813 18.8493 2.98755 18.8493 2.65281 18.7406C2.41138 18.6621 2.22648 18.5291 2.08077 18.4055C1.94809 18.2928 1.80327 18.148 1.65456 17.9992L1.63578 17.9804L1.0214 17.366L1.0026 17.3473C0.853863 17.1986 0.709012 17.0537 0.596376 16.9211C0.472682 16.7754 0.339706 16.5904 0.26126 16.349C0.152497 16.0143 0.152497 15.6537 0.26126 15.319C0.339706 15.0775 0.472681 14.8926 0.596375 14.7469C0.709013 14.6142 0.853865 14.4694 1.0026 14.3207L6.74496 8.57836L8.73791 6.5854C8.88661 6.43667 9.03142 6.29182 9.1641 6.17918C9.30981 6.05549 9.49472 5.92251 9.73615 5.84407ZM7.33451 10.3458L2.19991 15.4804C2.02518 15.6552 1.93003 15.7512 1.86694 15.8255C1.86443 15.8285 1.86207 15.8313 1.85985 15.834C1.86207 15.8366 1.86443 15.8395 1.86694 15.8424C1.93003 15.9167 2.02518 16.0128 2.19991 16.1875L2.81429 16.8019C2.98902 16.9767 3.08509 17.0718 3.1594 17.1349C3.16236 17.1374 3.16518 17.1398 3.16785 17.142C3.17052 17.1398 3.17333 17.1374 3.17629 17.1349C3.2506 17.0718 3.34667 16.9766 3.5214 16.8019L8.656 11.6673L7.33451 10.3458ZM9.83451 10.4888L8.51302 9.16732L9.89762 7.78272C10.0724 7.60799 10.1684 7.51284 10.2427 7.44975C10.2457 7.44724 10.2485 7.44487 10.2512 7.44265C10.2538 7.44487 10.2567 7.44724 10.2596 7.44975C10.3339 7.51284 10.43 7.60799 10.6047 7.78272L11.2191 8.3971C11.3938 8.57183 11.489 8.66789 11.5521 8.74221C11.5546 8.74516 11.557 8.74798 11.5592 8.75065C11.557 8.75332 11.5546 8.75614 11.5521 8.75909C11.489 8.83341 11.3938 8.92947 11.2191 9.1042L9.83451 10.4888ZM15.2598 7.50065C15.2598 7.04041 15.6329 6.66732 16.0931 6.66732H17.3431C17.8034 6.66732 18.1765 7.04041 18.1765 7.50065C18.1765 7.96089 17.8034 8.33398 17.3431 8.33398H16.0931C15.6329 8.33398 15.2598 7.96089 15.2598 7.50065ZM14.2033 10.2447C14.5288 9.91929 15.0564 9.91929 15.3818 10.2447L16.2657 11.1286C16.5912 11.454 16.5912 11.9817 16.2657 12.3071C15.9403 12.6326 15.4127 12.6326 15.0872 12.3071L14.2033 11.4232C13.8779 11.0978 13.8779 10.5702 14.2033 10.2447Z"
+      fill="#41AF85"
+    />
+  </svg>
+</template>

package/src/assets/images/ServerImage.vue

@@ -13,12 +13,15 @@ export default {
   props: {
     imageUrl: {
       required: true,
+      type: String,
     },
     height: {
       default: null,
+      type: String,
     },
     width: {
       default: null,
+      type: String,
     },
   },
   data() {

package/src/assets/images/SplitZigZag.vue

@@ -1,16 +1,49 @@
 <template>
-  <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>
+  <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>
 </template>
+
+<script>
+export default {
+  name: "SplitZigZag",
+  props: {
+    color: {
+      type: String,
+      default: null,
+      required: false,
+    },
+  },
+};
+</script>

package/src/assets/images/StarIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.99935 0.667969C3.36754 0.667969 3.66602 0.966446 3.66602 1.33464V2.33464H4.66602C5.03421 2.33464 5.33268 2.63311 5.33268 3.0013C5.33268 3.36949 5.03421 3.66797 4.66602 3.66797H3.66602V4.66797C3.66602 5.03616 3.36754 5.33464 2.99935 5.33464C2.63116 5.33464 2.33268 5.03616 2.33268 4.66797V3.66797H1.33268C0.964492 3.66797 0.666016 3.36949 0.666016 3.0013C0.666016 2.63311 0.964492 2.33464 1.33268 2.33464H2.33268V1.33464C2.33268 0.966446 2.63116 0.667969 2.99935 0.667969ZM8.66601 1.33464C8.94186 1.33464 9.18922 1.50452 9.28824 1.76198L10.4444 4.76789C10.6446 5.28859 10.7076 5.43863 10.7936 5.5597C10.88 5.68117 10.9861 5.7873 11.1076 5.87367C11.2287 5.95975 11.3787 6.02268 11.8994 6.22295L14.9053 7.37907C15.1628 7.47809 15.3327 7.72545 15.3327 8.0013C15.3327 8.27715 15.1628 8.52451 14.9053 8.62353L11.8994 9.77965C11.3787 9.97992 11.2287 10.0429 11.1076 10.1289C10.9861 10.2153 10.88 10.3214 10.7936 10.4429C10.7076 10.564 10.6446 10.714 10.4444 11.2347L9.28825 14.2406C9.18922 14.4981 8.94186 14.668 8.66602 14.668C8.39017 14.668 8.14281 14.4981 8.04379 14.2406L6.88767 11.2347C6.6874 10.714 6.62447 10.564 6.53838 10.4429C6.45201 10.3214 6.34588 10.2153 6.22441 10.1289C6.10335 10.0429 5.9533 9.97992 5.4326 9.77965L2.4267 8.62353C2.16923 8.52451 1.99935 8.27715 1.99935 8.0013C1.99935 7.72545 2.16923 7.47809 2.4267 7.37907L5.4326 6.22295C5.9533 6.02268 6.10335 5.95975 6.22441 5.87367C6.34588 5.7873 6.45201 5.68117 6.53838 5.5597C6.62447 5.43863 6.6874 5.28859 6.88767 4.76789L8.04378 1.76198C8.14281 1.50452 8.39017 1.33464 8.66601 1.33464ZM2.99935 10.668C3.36754 10.668 3.66602 10.9664 3.66602 11.3346V12.3346H4.66602C5.03421 12.3346 5.33268 12.6331 5.33268 13.0013C5.33268 13.3695 5.03421 13.668 4.66602 13.668H3.66602V14.668C3.66602 15.0362 3.36754 15.3346 2.99935 15.3346C2.63116 15.3346 2.33268 15.0362 2.33268 14.668V13.668H1.33268C0.964492 13.668 0.666016 13.3695 0.666016 13.0013C0.666016 12.6331 0.964492 12.3346 1.33268 12.3346H2.33268V11.3346C2.33268 10.9664 2.63116 10.668 2.99935 10.668Z"
+      fill="#41AF85"
+    />
+  </svg>
+</template>

package/src/assets/scss/document_category.scss

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

package/src/assets/scss/document_dashboard.scss

@@ -25,6 +25,12 @@
       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,7 +7,6 @@
 
   &.split-overview-component {
     min-width: 600px;
-    flex: 0;
   }
 
   .pages-section {
@@ -15,6 +14,9 @@
     overflow-y: scroll;
     border-right: $component-border;
     border-left: $component-border;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 
     .document-grid {
       padding: 42px;
@@ -165,88 +167,134 @@
         }
       }
     }
+
+    .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: center;
+      justify-content: flex-start;
       text-align: center;
-      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;
-          }
-        }
-      }
+      height: 100%;
 
       .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;
           }
         }
 
-        .rotate {
+        .edit-buttons {
           display: flex;
           flex-direction: column;
           gap: 8px;
-        }
+          border-bottom: 1px solid $grey-detail;
 
-        .rotate-button {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 0 !important;
-          white-space: initial;
-          line-height: 1;
-          gap: 5px;
+          .sidebar-buttons {
+            .edit-mode-btn {
+              display: flex;
+              width: 100%;
 
-          .button-content {
-            display: flex;
-            align-items: center;
-            justify-content: center;
+              .button-content {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 9px;
+
+                .button-text {
+                  font-size: 14px;
+                  font-weight: 500;
+                  max-width: 70%;
+                }
+              }
+            }
 
-            .button-text {
-              font-size: 16px;
-              max-width: 70%;
+            &:first-child {
+              margin-top: 14px;
+            }
+
+            &:last-child {
+              margin-bottom: 14px;
             }
           }
+
+          &:first-child {
+            margin-top: 14px;
+          }
+
+          &:last-child {
+            margin-bottom: 14px;
+          }
         }
       }
+
+      .smart-split {
+        .switch {
+          .control-label {
+            .switch-text {
+              font-size: 14px;
+              padding-right: 10px;
+              color: $grey-dark;
+              font-weight: 500;
+            }
+          }
+
+          .new-badge {
+            background: linear-gradient(90deg, #c1ff79 0%, #79fff7 100%);
+            border-radius: 36px;
+            font-weight: 700;
+            font-size: 11px;
+            padding: 5px;
+            color: $text-color;
+          }
+        }
+
+        // &.smart-split-disabled {
+        //   filter: opacity(0.5);
+        // }
+      }
     }
   }
 
@@ -428,4 +476,45 @@
       }
     }
   }
+
+  .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/splitting_confirmation_modal.scss

@@ -0,0 +1,41 @@
+@import "./imports.scss";
+
+.splitting-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: $text-color;
+  }
+
+  .modal-card-foot {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .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/variables.scss

@@ -152,7 +152,7 @@ button {
     }
   }
 
-  &.rotate-button[disabled] {
+  &.edit-mode-btn[disabled] {
     border: 1px solid $detail;
   }
 
@@ -379,6 +379,10 @@ button {
       .modal-card-body {
         background: $white;
         border-radius: 16px 16px 0 0 !important;
+
+        &.split-modal {
+          padding-bottom: 0;
+        }
       }
 
       .modal-card-foot {
@@ -395,6 +399,16 @@ 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;
@@ -510,6 +524,12 @@ button {
         right: 0 !important;
       }
     }
+
+    &.finish-review {
+      .tooltip-content {
+        right: 0 !important;
+      }
+    }
   }
 
   &.width-184 {
@@ -550,6 +570,35 @@ 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 {
@@ -722,3 +771,16 @@ button {
     }
   }
 }
+
+.switch {
+  input[type="checkbox"] {
+    &:checked + .check {
+      background: $primary !important;
+      box-shadow: none !important;
+    }
+
+    &:focus + .check {
+      box-shadow: none !important;
+    }
+  }
+}

package/src/components/App.vue

@@ -20,20 +20,30 @@ export default {
     document: {
       type: String,
       required: false,
+      default: null,
     },
     project: {
       type: String,
       required: false,
+      default: null,
     },
+    // eslint-disable-next-line vue/prop-name-casing
     user_token: {
       type: String,
       required: false,
+      default: "",
     },
+    // eslint-disable-next-line vue/prop-name-casing
     full_mode: {
       type: String,
       required: false,
+      default: "false",
+    },
+    locale: {
+      type: String,
+      required: false,
+      default: "en",
     },
-    locale: { type: String, required: false },
   },
   computed: {
     documentId() {

package/src/components/DocumentAnnotations/ActionButtons.vue

@@ -142,6 +142,7 @@
   </div>
 </template>
 <script>
+/* Component for showing actions for each annotation row */
 import { mapState, mapGetters } from "vuex";
 export default {
   name: "ActionButtons",
@@ -161,23 +162,29 @@ export default {
     acceptBtn: {
       type: Boolean,
     },
+    // TODO: finishReviewBtn should not be here (see comment above for purpose of this component)
     finishReviewBtn: {
       type: Boolean,
     },
+    // TODO: finishDisabled should not be here
     finishDisabled: {
       type: Boolean,
     },
+    // TODO: handleReject should not be here
     handleReject: {
       type: Function,
       default: null,
     },
+    // TODO: rejectAllEmptyBtn should not be here
     rejectAllEmptyBtn: {
       type: Boolean,
     },
+    // TODO: annotationSet should not be needed on a UI only component
     annotationSet: {
       type: Object,
       default: null,
     },
+    // TODO: acceptAllBtn should not be here
     acceptAllBtn: {
       type: Boolean,
     },

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -41,6 +41,7 @@ export default {
       required: true,
     },
     span: {
+      type: [Object, Array],
       required: true,
     },
     spanIndex: {
@@ -49,9 +50,11 @@ export default {
     },
     label: {
       type: Object,
+      required: true,
     },
     annotationSet: {
       type: Object,
+      required: true,
     },
     saveChanges: {
       type: Boolean,

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -116,12 +116,15 @@ export default {
   },
   props: {
     annotationSet: {
+      type: Object,
       required: true,
     },
     label: {
+      type: Object,
       required: true,
     },
     annotation: {
+      type: Object,
       default: null,
     },
   },