@konfuzio/document-validation-ui 0.1.48-dev.1 → 0.1.48-dev.3

package/jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   preset: "@vue/cli-plugin-unit-jest/presets/no-babel",
   setupFiles: ["./tests/setup.js"],
-  transformIgnorePatterns: ["node_modules/(?!axios)"],
+  transformIgnorePatterns: ["node_modules/(?!axios|keycloak-js)"],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.48-dev.1",
+  "version": "0.1.48-dev.3",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {
@@ -32,6 +32,7 @@
     "axios": "^1.7.4",
     "bignumber.js": "^9.1.0",
     "buefy": "^0.9.22",
+    "keycloak-js": "^26.0.6",
     "konva": "^8.3.13",
     "sass": "^1.56.0",
     "sass-loader": "^13.1.0",

package/src/api.js

@@ -1,12 +1,10 @@
 import axios from "axios";
+import { updateKeycloakToken } from "./utils/keycloak";
 
-let HTTP, FILE_REQUEST, authToken, appLocale;
+let HTTP, FILE_REQUEST, authToken, appLocale, isKeycloakAuth;
 const DEFAULT_URL = "https://app.konfuzio.com";
 const FILE_URL = process.env.VUE_APP_IMAGE_URL;
 
-axios.defaults.xsrfCookieName = "csrftoken";
-axios.defaults.xsrfHeaderName = "X-CSRFToken";
-
 HTTP = axios.create({
   baseURL: process.env.VUE_APP_API_URL || `${DEFAULT_URL}/api/v3/`,
 });
@@ -20,6 +18,10 @@ const setAuthToken = (token) => {
   authToken = token;
 };
 
+const setIsKeycloakAuth = (result) => {
+  isKeycloakAuth = result;
+};
+
 const setApiUrl = (url) => {
   HTTP.defaults.baseURL = url;
 };
@@ -32,15 +34,22 @@ const setLocale = (locale) => {
   appLocale = locale;
 };
 
-const getInterceptorConfig = (config) => {
+const getInterceptorConfig = async (config) => {
   if (authToken) {
-    config.headers["Authorization"] = `Token ${authToken}`;
-    config.headers["Accept-Language"] = `${appLocale}-${appLocale}`;
+    config.headers["Authorization"] = `${
+      isKeycloakAuth ? "Bearer" : "Token"
+    } ${authToken}`;
   }
+  config.headers["Accept-Language"] = `${appLocale}-${appLocale}`;
+
+  if (isKeycloakAuth) {
+    await updateKeycloakToken();
+  }
+
   return config;
 };
 
-HTTP.interceptors.request.use(getInterceptorConfig, (error) => {
+HTTP.interceptors.request.use(getInterceptorConfig, async (error) => {
   return Promise.reject(error);
 });
 
@@ -107,6 +116,7 @@ export default {
   makeFileRequest,
   makeGetPaginatedRequest,
   setAuthToken,
+  setIsKeycloakAuth,
   setLocale,
   FILE_REQUEST,
   DEFAULT_URL,

package/src/assets/scss/document_page.scss

@@ -9,4 +9,14 @@
   &.default-cursor {
     cursor: default;
   }
+
+  .annotation-label {
+    position: absolute;
+    z-index: 999;
+    background-color: $text-color;
+    color: $white;
+    font-size: 12px;
+    padding: 4px;
+    word-break: break-all;
+  }
 }

package/src/assets/scss/theme.scss

@@ -90,6 +90,15 @@
     &.is-text {
       text-decoration: none;
 
+      &.has-right-icon {
+        > span {
+          padding-right: 16px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
       &:hover {
         background-color: transparent;
       }

package/src/components/App.vue

@@ -19,6 +19,7 @@ import {
 } from "../utils/utils";
 import { Integrations } from "@sentry/tracing";
 import API from "../api";
+import { initKeycloak } from "../utils/keycloak";
 
 export default {
   name: "App",
@@ -98,6 +99,24 @@ export default {
       required: false,
       default: "",
     },
+    // eslint-disable-next-line vue/prop-name-casing
+    sso_url: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    sso_realm: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    // eslint-disable-next-line vue/prop-name-casing
+    sso_client_id: {
+      type: String,
+      required: false,
+      default: "",
+    },
   },
   computed: {
     ...mapState("display", ["pageError"]),
@@ -133,7 +152,11 @@ export default {
       }
     },
     isPublicView() {
-      if (this.userToken || this.fullMode) {
+      if (
+        this.userToken ||
+        this.fullMode ||
+        (this.ssoUrl && this.ssoRealm && this.ssoClientId)
+      ) {
         return false;
       } else {
         return true;
@@ -160,6 +183,33 @@ export default {
         return null;
       }
     },
+    ssoUrl() {
+      if (process.env.VUE_APP_SSO_URL) {
+        return process.env.VUE_APP_SSO_URL;
+      } else if (this.sso_url) {
+        return this.sso_url;
+      } else {
+        return null;
+      }
+    },
+    ssoRealm() {
+      if (process.env.VUE_APP_SSO_REALM) {
+        return process.env.VUE_APP_SSO_REALM;
+      } else if (this.sso_realm) {
+        return this.sso_realm;
+      } else {
+        return null;
+      }
+    },
+    ssoClientId() {
+      if (process.env.VUE_APP_SSO_CLIENT_ID) {
+        return process.env.VUE_APP_SSO_CLIENT_ID;
+      } else if (this.sso_client_id) {
+        return this.sso_client_id;
+      } else {
+        return null;
+      }
+    },
     annotationId() {
       if (getURLValueFromHash("ann")) {
         return getURLValueFromHash("ann");
@@ -183,7 +233,7 @@ export default {
       }
     },
   },
-  created() {
+  async created() {
     // Sentry config
     if (process.env.NODE_ENV != "development") {
       Sentry.init({
@@ -211,7 +261,12 @@ export default {
     }
 
     // api config
-    API.setAuthToken(this.userToken);
+    if (this.userToken) {
+      API.setAuthToken(this.userToken);
+    } else if (this.ssoUrl && this.ssoRealm && this.ssoClientId) {
+      await initKeycloak(this.ssoUrl, this.ssoRealm, this.ssoClientId);
+    }
+
     API.setLocale(this.$i18n.locale);
 
     if (this.api_url !== "") {

package/src/components/DocumentPage/DocumentPage.vue

@@ -31,6 +31,14 @@
       :container-height="scaledViewport.height"
     />
 
+    <div
+      v-if="showAnnotationLabel"
+      class="annotation-label"
+      :style="getAnnotationLabelPosition(showAnnotationLabel)"
+    >
+      {{ showAnnotationLabel.labelName }}
+    </div>
+
     <AnnSetTableOptions v-if="showAnnSetTable" :page="page" />
 
     <v-stage
@@ -78,35 +86,6 @@
               )"
             >
               <v-group :key="'ann' + annotation.id + '-' + index">
-                <v-label
-                  v-if="annotation.id == annotationId && !searchEnabled"
-                  :key="`label${annotation.id}`"
-                  :config="{
-                    listening: false,
-                    ...annotationLabelRect(
-                      bbox,
-                      labelOfAnnotation(annotation).name
-                    ),
-                  }"
-                >
-                  <v-tag
-                    :config="{
-                      fill: '#1A1A1A',
-                      lineJoin: 'round',
-                      hitStrokeWidth: 0,
-                      listening: false,
-                    }"
-                  />
-                  <v-text
-                    :config="{
-                      padding: 4,
-                      text: labelOfAnnotation(annotation).name,
-                      fill: 'white',
-                      fontSize: 12,
-                      listening: false,
-                    }"
-                  />
-                </v-label>
                 <v-rect
                   v-if="!isAnnotationInEditMode(annotation.id)"
                   :config="annotationRect(bbox, annotation.id)"
@@ -142,42 +121,6 @@
           </template>
         </template>
       </v-layer>
-      <v-layer
-        v-if="
-          showFocusedAnnotation &&
-          !isSelecting &&
-          documentAnnotationSelected.labelName !== ''
-        "
-      >
-        <v-label
-          :key="`label${documentAnnotationSelected.id}`"
-          :config="{
-            listening: false,
-            ...annotationLabelRect(
-              documentAnnotationSelected.span,
-              documentAnnotationSelected.labelName
-            ),
-          }"
-        >
-          <v-tag
-            :config="{
-              fill: '#1A1A1A',
-              lineJoin: 'round',
-              hitStrokeWidth: 0,
-              listening: false,
-            }"
-          />
-          <v-text
-            :config="{
-              padding: 4,
-              text: documentAnnotationSelected.labelName,
-              fill: 'white',
-              fontSize: 12,
-              listening: false,
-            }"
-          />
-        </v-label>
-      </v-layer>
       <v-layer v-if="page.number === selectionPage">
         <box-selection
           :page="page"
@@ -337,6 +280,18 @@ export default {
         this.page.number
       );
     },
+    showAnnotationLabel() {
+      if (
+        this.showFocusedAnnotation &&
+        !this.isSelecting &&
+        this.documentAnnotationSelected &&
+        this.documentAnnotationSelected.labelName !== ""
+      ) {
+        return this.documentAnnotationSelected;
+      } else {
+        return null;
+      }
+    },
   },
   watch: {
     recalculatingAnnotations(newState) {
@@ -686,22 +641,28 @@ export default {
         ...this.bboxToRect(this.page, bbox),
       };
     },
-    /**
-     * Builds the konva config object for the annotation label.
-     */
-    annotationLabelRect(bbox, labelName) {
-      const rect = this.bboxToRect(this.page, bbox, true);
-
-      // calculations to check if label name will go off document
-      const calculatedX =
-        rect.x + labelName.length * 5.4 < this.scaledViewport.width
-          ? rect.x
-          : this.scaledViewport.width - labelName.length * 5.4;
-
-      return {
-        x: calculatedX,
-        y: rect.y,
-      };
+    getAnnotationLabelPosition(annotation) {
+      if (annotation && this.$refs.stage) {
+        const padding = 8;
+        const maxCharacters = 10;
+        const minimumSpaceTopY = 50;
+        const rect = this.bboxToRect(this.page, annotation.span, true);
+
+        if (
+          annotation.labelName.length > maxCharacters &&
+          rect.y < minimumSpaceTopY
+        ) {
+          return `left: ${rect.x}px; top: ${
+            rect.y + rect.height * 3 + padding
+          }px`;
+        } else {
+          return `left: ${rect.x}px; bottom: ${
+            this.$refs.stage.$el.clientHeight - rect.y - rect.height - padding
+          }px`;
+        }
+      } else {
+        return "";
+      }
     },
     closePopups() {
       this.newAnnotation = [];

package/src/components/DocumentPage/EditAnnotation.vue

@@ -10,13 +10,18 @@
       :class="[
         'annotation-dropdown',
         'no-padding-bottom',
+        'dropdown-full-width',
         setsList.length === 0 ? 'no-padding-top' : '',
       ]"
       scrollable
     >
       <template #trigger>
         <b-button
-          :class="['popup-input', selectedSet ? '' : 'not-selected']"
+          :class="[
+            'popup-input',
+            selectedSet ? '' : 'not-selected',
+            'has-right-icon',
+          ]"
           type="is-text"
         >
           {{
@@ -24,7 +29,9 @@
               ? `${selectedSet.label_set.name} ${
                   selectedSet.id
                     ? numberOfAnnotationSetGroup(selectedSet)
-                    : `(${$t("new")})`
+                    : `${numberOfLabelSetGroup(selectedSet.label_set)} (${$t(
+                        "new"
+                      )})`
                 }`
               : $t("select_annotation_set")
           }}
@@ -33,6 +40,14 @@
           </span>
         </b-button>
       </template>
+      <b-button
+        type="is-ghost"
+        :class="['add-ann-set', 'dropdown-item', 'no-icon-margin']"
+        icon-left="plus"
+        @click="openAnnotationSetCreation"
+      >
+        {{ $t("new_ann_set_title") }}
+      </b-button>
       <b-dropdown-item
         v-for="(set, index) in setsList"
         :key="`${set.label_set.id}_${index}`"
@@ -41,23 +56,12 @@
       >
         <span>{{
           `${set.label_set.name} ${
-            set.id ? numberOfAnnotationSetGroup(set) : `(${$t("new")})`
+            set.id
+              ? numberOfAnnotationSetGroup(set)
+              : `${numberOfLabelSetGroup(set.label_set)} (${$t("new")})`
           }`
         }}</span>
       </b-dropdown-item>
-      <b-button
-        type="is-ghost"
-        :class="[
-          'add-ann-set',
-          'dropdown-item',
-          'no-icon-margin',
-          setsList.length > 0 ? 'has-border' : '',
-        ]"
-        icon-left="plus"
-        @click="openAnnotationSetCreation"
-      >
-        {{ $t("new_ann_set_title") }}
-      </b-button>
     </b-dropdown>
     <b-tooltip
       multilined
@@ -73,11 +77,11 @@
         aria-role="list"
         :disabled="!labelsFiltered || labelsFiltered.length === 0"
         scrollable
-        class="label-dropdown annotation-dropdown"
+        class="label-dropdown annotation-dropdown dropdown-full-width"
       >
         <template #trigger>
           <b-button
-            class="popup-input"
+            class="popup-input has-right-icon"
             :disabled="!labelsFiltered"
             type="is-text"
           >
@@ -166,6 +170,7 @@ export default {
     ]),
     ...mapGetters("document", [
       "numberOfAnnotationSetGroup",
+      "numberOfLabelSetGroup",
       "labelsFilteredForAnnotationCreation",
     ]),
     ...mapGetters("display", ["bboxToRect"]),
@@ -304,12 +309,21 @@ export default {
       }
     },
     chooseLabelSet(labelSet) {
+      // check if there's already a new entry for that label set to be created
+      const existsIndex = this.setsList.findIndex((set) => {
+        return set.id === null && set.label_set.id === labelSet.id;
+      });
+
       const newSet = {
         label_set: labelSet,
         labels: labelSet.labels,
         id: null,
       };
-      this.setsList.push(newSet);
+      if (existsIndex >= 0) {
+        this.setsList[existsIndex] = newSet;
+      } else {
+        this.setsList.unshift(newSet);
+      }
       this.selectedSet = newSet;
     },
     openAnnotationSetCreation() {

package/src/components/DocumentPage/NewAnnotation.vue

@@ -12,13 +12,18 @@
         'annotation-dropdown',
         'no-padding-bottom',
         'no-padding-top',
+        'dropdown-full-width',
         setsList.length === 0 ? 'no-padding-top' : '',
       ]"
       scrollable
     >
       <template #trigger>
         <b-button
-          :class="['popup-input', selectedSet ? '' : 'not-selected']"
+          :class="[
+            'popup-input',
+            selectedSet ? '' : 'not-selected',
+            'has-right-icon',
+          ]"
           type="is-text"
         >
           {{
@@ -76,11 +81,15 @@
         aria-role="list"
         :disabled="!textFromEntities || !labels || labels.length === 0"
         scrollable
-        class="label-dropdown annotation-dropdown"
+        class="label-dropdown annotation-dropdown dropdown-full-width"
       >
         <template #trigger>
           <b-button
-            :class="['popup-input', selectedLabel ? '' : 'not-selected']"
+            :class="[
+              'popup-input',
+              selectedLabel ? '' : 'not-selected',
+              'has-right-icon',
+            ]"
             type="is-text"
           >
             {{
@@ -323,7 +332,7 @@ export default {
       if (existsIndex >= 0) {
         this.setsList[existsIndex] = newSet;
       } else {
-        this.setsList.push(newSet);
+        this.setsList.unshift(newSet);
       }
       this.selectedSet = newSet;
     },

package/src/store/document.js

@@ -563,9 +563,13 @@ const getters = {
     let returnLabelSets = [];
     if (state.annotationSets) {
       state.annotationSets.forEach((annotationSet) => {
+        // last validation checks if the label set is already present in list
         if (
-          annotationSet.id == null ||
-          annotationSet.label_set.has_multiple_annotation_sets
+          (annotationSet.id == null ||
+            annotationSet.label_set.has_multiple_annotation_sets) &&
+          !returnLabelSets.find(
+            (set) => set.id !== null && set.id === annotationSet.label_set.id
+          )
         ) {
           const labelSet = { ...annotationSet.label_set };
           labelSet.labels = [...annotationSet.labels];
@@ -702,7 +706,10 @@ const getters = {
   },
 
   annotationById: (state) => (annotationId) => {
-    return state.annotations.find((ann) => ann.id == annotationId);
+    if (state.annotations) {
+      return state.annotations.find((ann) => ann.id == annotationId);
+    }
+    return null;
   },
 
   // Check if document is ready to be finished
@@ -950,7 +957,7 @@ const actions = {
     commit("SET_PAGES", []);
     commit("SET_DOC_ID", id);
   },
-  setAnnotationId: ({ commit }, id) => {
+  setAnnotationId: ({ commit, dispatch, getters }, id) => {
     commit("SET_ANNOTATION_ID", id);
     setURLAnnotationHash(id);
   },

package/src/utils/keycloak.js

@@ -0,0 +1,38 @@
+import Keycloak from "keycloak-js";
+import API from "../api";
+
+let keycloak;
+
+export const initKeycloak = async (url, realm, clientId) => {
+  keycloak = new Keycloak({
+    url,
+    realm,
+    clientId,
+  });
+
+  try {
+    const authenticated = await keycloak.init({
+      onLoad: "login-required",
+      enableLogging: true,
+    });
+    if (authenticated) {
+      API.setIsKeycloakAuth(true);
+      API.setAuthToken(keycloak.token);
+    } else {
+      console.error("User is not authenticated");
+    }
+  } catch (error) {
+    console.error("Failed to initialize adapter:", error);
+  }
+};
+
+export const updateKeycloakToken = () => {
+  return new Promise(async (resolve, reject) => {
+    if (keycloak) {
+      const update = await keycloak.updateToken(30);
+      resolve();
+    } else {
+      reject();
+    }
+  });
+};