@konfuzio/document-validation-ui 0.1.24-dev.0 → 0.1.24-dev.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.24-dev.0",
+  "version": "0.1.24-dev.2",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/assets/scss/document_annotations.scss

@@ -515,8 +515,12 @@
 
     .missing-button-container {
       background-color: transparent;
+      display: flex;
+      flex-direction: row;
 
-      .missing-btn {
+      .missing-btn,
+      .search-btn {
+        padding: 6px;
         color: $grey-blue !important;
         font-size: 14px !important;
         font-weight: 500;

package/src/assets/scss/document_search_bar.scss

@@ -0,0 +1,71 @@
+@import "./imports.scss";
+#document-search {
+  position: absolute;
+  right: 8px;
+  min-width: 276px;
+  width: fit-content;
+  z-index: 95;
+
+  .search-container {
+    background-color: $searchbar;
+    color: $white;
+    height: 40px;
+    padding: 8px 4px;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    .button {
+      background: none;
+      color: inherit;
+
+      &:disabled {
+        pointer-events: none;
+      }
+
+      &:hover {
+        background: $low-opacity-white;
+        border-radius: 4px;
+        color: inherit;
+      }
+      .icon {
+        vertical-align: middle;
+      }
+    }
+
+    .search-input {
+      margin-left: 8px;
+      flex: 1;
+      font-size: 14px;
+      background: inherit;
+      color: inherit;
+      border: 0;
+      outline: none;
+    }
+
+    .search-no-results {
+      color: $text-lighter;
+      font-size: 12px;
+    }
+
+    .search-navigation {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .search-counters {
+        font-size: 12px;
+        margin-right: 6px;
+        color: $text-lighter;
+      }
+    }
+
+    .search-loading {
+      display: flex;
+      font-size: 12px;
+      color: $text-lighter;
+    }
+  }
+}

package/src/assets/scss/document_toolbar.scss

@@ -95,7 +95,8 @@
       }
     }
 
-    .download-file {
+    .download-file,
+    .search-icon {
       color: $toolbar-elements;
 
       .is-active {

package/src/assets/scss/theme.scss

@@ -253,7 +253,8 @@
       width: 100%;
 
       .icon {
-        &.download-file {
+        &.download-file,
+        &.search-icon {
           svg {
             height: 100% !important;
             width: 100% !important;

package/src/assets/scss/variables.scss

@@ -48,6 +48,7 @@ $font-family: "Inter", sans-serif;
 $background: $white;
 $top-bar-background: var(--top-bar-background);
 $toolbar: $text-color;
+$searchbar: $text-color;
 $tooltip: $dark;
 $toolbar-elements: $white;
 

package/src/components/App.vue

@@ -72,6 +72,12 @@ export default {
       required: false,
       default: "",
     },
+    // eslint-disable-next-line vue/prop-name-casing
+    details_url: {
+      type: String,
+      required: false,
+      default: "",
+    },
   },
   computed: {
     documentId() {
@@ -115,6 +121,15 @@ export default {
         return null;
       }
     },
+    detailsUrl() {
+      if (process.env.VUE_APP_DOCUMENT_DETAILS_URL) {
+        return process.env.VUE_APP_DOCUMENT_DETAILS_URL;
+      } else if (this.details_url) {
+        return this.details_url;
+      } else {
+        return null;
+      }
+    },
   },
   created() {
     // Sentry config
@@ -156,6 +171,7 @@ export default {
 
     // document and project config
     Promise.all([
+      this.$store.dispatch("display/setDetailsUrl", this.detailsUrl),
       this.$store.dispatch("document/setDocId", this.documentId),
       this.$store.dispatch("document/setPublicView", this.isPublicView),
       this.$store.dispatch(

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -59,6 +59,13 @@
       <b-button type="is-ghost" class="missing-btn" @click.stop="markAsMissing">
         {{ $t("missing_annotation") }}
       </b-button>
+      <b-button
+        type="is-ghost"
+        class="search-btn"
+        @click.stop="searchInDocument"
+      >
+        {{ $t("search_in_document") }}
+      </b-button>
     </div>
 
     <!-- Restore not found annotations -->
@@ -141,6 +148,9 @@ export default {
     restore() {
       this.$emit("restore");
     },
+    searchInDocument() {
+      this.$emit("search-label-in-document");
+    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -137,12 +137,13 @@
           :save-btn="showSaveButton()"
           :restore-btn="showRestoreButton()"
           :is-loading="isLoading"
-          @mark-as-missing="handleMissingAnnotation()"
-          @save="handleSaveChanges()"
-          @accept="handleSaveChanges()"
+          @mark-as-missing="handleMissingAnnotation"
+          @save="handleSaveChanges"
+          @accept="handleSaveChanges"
           @decline="handleSaveChanges(true)"
-          @cancel="handleCancelButton()"
-          @restore="handleRestore()"
+          @cancel="handleCancelButton"
+          @restore="handleRestore"
+          @search-label-in-document="searchLabelInDocument"
         />
       </div>
     </div>
@@ -511,7 +512,7 @@ export default {
         false
       );
     },
-    handleSaveChanges(decline) {
+    handleSaveChanges(decline = false) {
       if (this.publicView || this.isDocumentReviewed) return;
 
       // Verify if we are editing a filled or empty annotation
@@ -732,6 +733,10 @@ export default {
 
       window.open(annotationDetailsUrl, "_blank");
     },
+    searchLabelInDocument() {
+      this.$store.dispatch("display/enableSearch", true);
+      this.$store.dispatch("display/setCurrentSearch", this.label.name);
+    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -63,8 +63,7 @@
               :icon="
                 annotationSetsAccordion[indexGroup] ? 'angle-up' : 'angle-down'
               "
-            >
-            </b-icon>
+            />
             {{
               `${annotationSet.label_set.name} ${numberOfAnnotationSetGroup(
                 annotationSet
@@ -388,9 +387,6 @@ export default {
       // Not allow starting edit mode with ArrowUp key
       if (event.key === "ArrowUp" && !this.isAnnotationBeingEdited) return;
 
-      // open accordions
-      this.openAllAccordions();
-
       // Get all the annotation elements
       let annotations = this.createArray("keyboard-nav");
 
@@ -404,6 +400,9 @@ export default {
 
       // navigate with the arrow up or down keys
       if (event.key === "ArrowDown") {
+        // open accordions
+        this.openAllAccordions();
+
         // Check if we are focusing on the Finish Review button
         if (this.count >= annotations.length) {
           const finishBtn = this.createArray("finish-review-btn");

package/src/components/DocumentPage/DocumentPage.cy.js

@@ -1,5 +1,5 @@
-import DocumentDashboard from "../DocumentDashboard.vue";
 import DocumentPage from "../DocumentPage/DocumentPage.vue";
+import SearchBar from "../DocumentPage/SearchBar.vue";
 
 const viewport = {
   width: 1280,
@@ -13,6 +13,87 @@ describe("Document Page", () => {
     cy.viewport(viewport.width, viewport.height);
   });
 
+  it("Search for text in the document", () => {
+    cy.getStore("document").then(($document) => {
+      if ($document.selectedDocument.pages[0]) {
+        cy.setScale($document.selectedDocument.pages[0]);
+        cy.fetchBlob(
+          `${$document.selectedDocument.pages[0].image_url}?${$document.selectedDocument.downloaded_at}`
+        ).then((blob) => {
+          cy.mount(SearchBar).then(({ wrapper, component }) => {
+            if ($document.pages && $document.pages.length > 0) {
+              const entities = $document.pages.flatMap((page) => {
+                return page.entities;
+              });
+              let entity;
+              do {
+                entity = entities[Math.floor(Math.random() * entities.length)]; // get a random entity
+              } while (!entity || entity.offset_string.length < 3);
+
+              cy.dispatchAction("display", "enableSearch", true);
+              cy.dispatchAction(
+                "display",
+                "setCurrentSearch",
+                entity.offset_string
+              );
+              cy.wait(2000);
+              cy.getStore("display").then(($display) => {
+                expect($display.searchResults.length).to.be.greaterThan(0);
+              });
+            }
+          });
+        });
+      } else {
+        throw new Error("Document not loaded");
+      }
+    });
+  });
+
+  it("Navigate to next search result if exists", () => {
+    cy.getStore("document").then(($document) => {
+      if ($document.selectedDocument.pages[0]) {
+        cy.setScale($document.selectedDocument.pages[0]);
+        cy.fetchBlob(
+          `${$document.selectedDocument.pages[0].image_url}?${$document.selectedDocument.downloaded_at}`
+        ).then((blob) => {
+          cy.mount(SearchBar).then(({ wrapper, component }) => {
+            cy.wait(2000);
+            if ($document.pages && $document.pages.length > 0) {
+              const entities = $document.pages.flatMap((page) => {
+                return page.entities;
+              });
+              let entity;
+              do {
+                entity = entities[Math.floor(Math.random() * entities.length)]; // get a random entity
+              } while (!entity || entity.offset_string.length < 3);
+
+              cy.dispatchAction("display", "enableSearch", true);
+              cy.dispatchAction(
+                "display",
+                "setCurrentSearch",
+                entity.offset_string
+              );
+              cy.wait(2000);
+              cy.getStore("display").then(($display) => {
+                if ($display.searchResults.length > 1) {
+                  expect(component.currentCounter).to.be.eql(1);
+                  cy.get("#document-search .next-search").click();
+                  cy.getStore("display").then(() => {
+                    expect(component.currentCounter).to.be.eql(2);
+                  });
+                } else {
+                  cy.get("#document-search .next-search").should("be.disabled");
+                }
+              });
+            }
+          });
+        });
+      } else {
+        throw new Error("Document not loaded");
+      }
+    });
+  });
+
   it("All annotations appear at the right place", () => {
     cy.getStore("document").then(($document) => {
       if (

package/src/components/DocumentPage/DocumentPage.vue

@@ -51,6 +51,15 @@
           }"
         />
         <template v-if="pageInVisibleRange && !editMode">
+          <template v-if="searchResults.length > 0">
+            <v-rect
+              v-for="(bbox, index) in searchResults"
+              :key="'sr' + index"
+              :config="{
+                ...selectionTextRect(bbox, bbox === currentSearchResultForPage),
+              }"
+            ></v-rect>
+          </template>
           <v-group v-if="!publicView || !isDocumentReviewed" ref="entities">
             <v-rect
               v-for="(entity, index) in scaledEntities"
@@ -266,8 +275,25 @@ export default {
       );
     },
 
+    searchResults() {
+      const results = this.$store.getters["display/searchResultsForPage"](
+        this.page.number
+      );
+      return results;
+    },
+
+    currentSearchResultForPage() {
+      return this.$store.getters["display/currentSearchResultForPage"](
+        this.page.number
+      );
+    },
+
     ...mapState("selection", ["isSelecting", "selectedEntities"]),
-    ...mapState("display", ["scale", "categorizeModalIsActive"]),
+    ...mapState("display", [
+      "scale",
+      "categorizeModalIsActive",
+      "searchEnabled",
+    ]),
     ...mapState("document", [
       "documentAnnotationSelected",
       "recalculatingAnnotations",
@@ -308,6 +334,11 @@ export default {
         this.drawPage(true);
       }
     },
+    searchEnabled(isEnabled) {
+      if (isEnabled) {
+        this.closePopups(true);
+      }
+    },
   },
   mounted() {
     if (
@@ -495,6 +526,15 @@ export default {
       }
     },
 
+    selectionTextRect(bbox, isFocused) {
+      return {
+        fill: isFocused ? "orange" : "greenyellow",
+        stroke: isFocused ? "orange" : "",
+        globalCompositeOperation: "multiply",
+        ...this.bboxToRect(this.page, bbox),
+      };
+    },
+
     /**
      * Builds the konva config object for the entity.
      */

package/src/components/DocumentPage/DocumentToolbar.cy.js

@@ -6,6 +6,18 @@ describe("Document Toolbar", () => {
     cy.setFullMode();
   });
 
+  it("open document search", () => {
+    cy.mount(DocumentDashboard).then(({ wrapper, component }) => {
+      component.onDocumentResize();
+      cy.get("#toolbar-container").find(".search-document").first().click();
+
+      cy.getStore("display").then(($display) => {
+        expect($display.searchEnabled).to.eql(true);
+        cy.get("#document-search").should("exist");
+      });
+    });
+  });
+
   it("downloads the original file", () => {
     cy.mount(DocumentDashboard).then(({ wrapper, component }) => {
       component.onDocumentResize();

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -24,6 +24,13 @@
         </div>
       </b-tooltip>
       <div v-if="isEditModeAvailable" class="toolbar-divider" />
+      <div
+        v-if="!publicView"
+        class="search-document icons"
+        @click="toggleSearch"
+      >
+        <b-icon icon="search" size="small" class="search-icon" />
+      </div>
 
       <div v-if="!publicView" class="download-file icons">
         <b-dropdown aria-role="list" position="is-top-right" scrollable>
@@ -80,7 +87,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState, mapGetters } from "vuex";
 import FitZoomIcon from "../../assets/images/FitZoomIcon";
 import PlusIcon from "../../assets/images/PlusIcon";
 import MinusIcon from "../../assets/images/MinusIcon";
@@ -144,6 +151,7 @@ export default {
     }
   },
   methods: {
+    ...mapActions("display", ["toggleSearch"]),
     handleEdit() {
       if (this.editModeDisabled) return;
       this.$store.dispatch("selection/disableSelection");

package/src/components/DocumentPage/NewAnnotation.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="annotation-popup" :style="{ left: `${left}px`, top: `${top}px` }">
-    <input v-model="textFromEntities" class="popup-input" type="text" />
+    <div v-if="!textFromEntities" class="popup-input">
+      <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
+    </div>
+    <input v-else v-model="textFromEntities" class="popup-input" type="text" />
     <b-dropdown
       v-model="selectedSet"
+      :disabled="!textFromEntities"
       aria-role="list"
       :class="[
         'annotation-dropdown',
@@ -70,7 +74,7 @@
       <b-dropdown
         v-model="selectedLabel"
         aria-role="list"
-        :disabled="!labels || labels.length === 0"
+        :disabled="!textFromEntities || !labels || labels.length === 0"
         scrollable
         class="label-dropdown annotation-dropdown"
       >

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -5,6 +5,9 @@
       v-scroll.immediate="updateScrollBounds"
       class="scrolling-document"
     >
+      <transition :name="searchEnabled ? 'slide-down' : 'slide-up'">
+        <SearchBar v-if="searchEnabled" />
+      </transition>
       <div
         v-if="
           selectedDocument && scale && !loading && !recalculatingAnnotations
@@ -36,12 +39,14 @@ import scroll from "../../directives/scroll";
 import ScrollingPage from "./ScrollingPage";
 import Toolbar from "./DocumentToolbar";
 import ActionBar from "./ActionBar";
+import SearchBar from "./SearchBar";
 
 export default {
   components: {
     ScrollingPage,
     Toolbar,
     ActionBar,
+    SearchBar,
   },
   directives: {
     scroll,
@@ -73,6 +78,7 @@ export default {
       "documentActionBar",
       "pageChangedFromThumbnail",
       "currentPage",
+      "searchEnabled",
     ]),
     ...mapGetters("display", ["visiblePageRange"]),
 

package/src/components/DocumentPage/ScrollingPage.vue

@@ -49,7 +49,9 @@ export default {
   },
 
   computed: {
-    ...mapState("display", ["pageChangedFromThumbnail"]),
+    ...mapState("display", ["pageChangedFromThumbnail", "currentPage"]),
+    ...mapState("document", ["pages", "documentAnnotationSelected", "loading"]),
+    ...mapState("edit", ["editMode"]),
     ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
     ...mapGetters("document", ["scrollDocumentToAnnotation"]),
 
@@ -90,9 +92,11 @@ export default {
       return this.scrollTop + this.clientHeight;
     },
 
-    ...mapState("display", ["currentPage"]),
-    ...mapState("document", ["pages", "documentAnnotationSelected", "loading"]),
-    ...mapState("edit", ["editMode"]),
+    currentSearchResultForPage() {
+      return this.$store.getters["display/currentSearchResultForPage"](
+        this.page.number
+      );
+    },
   },
 
   watch: {
@@ -128,6 +132,24 @@ export default {
         this.$emit("page-jump", this.elementTop, 0);
       }
     },
+    /**
+     * Scroll to the search result if the current one changes and it's on this page.
+     */
+    currentSearchResultForPage(res) {
+      // skip page jump if the result is null (the current search result is not on this page)
+      if (!res) {
+        return;
+      }
+      const y = this.getYForBbox(res); // y of the search result
+      const totalY = y + this.elementTop; // y of search result + page top
+      // skip page jump if the search result is already visible on this page
+      if (totalY < this.scrollBottom && totalY > this.scrollTop) {
+        return;
+      }
+      this.$nextTick(function () {
+        this.scrollTo(y);
+      });
+    },
   },
   mounted() {
     this.updateElementBounds();