@konfuzio/document-validation-ui 0.1.14 → 0.1.16-dev.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.14",
+  "version": "0.1.16-dev.0",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --name DocumentValidationUi ./src/main.js",
     "test:unit": "vue-cli-service test:unit",
+    "cypress:open": "cypress open",
     "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\"",
     "lint": "vue-cli-service lint",
     "format": "prettier .  --write",
@@ -39,6 +40,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"
@@ -51,6 +53,8 @@
     "@vue/test-utils": "^1.1.3",
     "@vue/vue2-jest": "^27.0.0",
     "babel-jest": "^27.0.6",
+    "cypress": "^12.17.3",
+    "dotenv": "^16.3.1",
     "eslint": "^8.30.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-vue": "^9.8.0",

package/src/api.js

@@ -1,49 +1,79 @@
 import axios from "axios";
-import {
-  cacheAdapterEnhancer
-} from 'axios-extensions';
+import { cacheAdapterEnhancer } from "axios-extensions";
 
-let HTTP, IMG_REQUEST, authToken;
+let HTTP, FILE_REQUEST, authToken, appLocale;
 const DEFAULT_URL = "https://app.konfuzio.com";
 
 axios.defaults.xsrfCookieName = "csrftoken";
 axios.defaults.xsrfHeaderName = "X-CSRFToken";
 
 HTTP = axios.create({
-  baseURL: process.env.VUE_APP_API_URL || `${DEFAULT_URL}/api/v3/`
+  baseURL: process.env.VUE_APP_API_URL || `${DEFAULT_URL}/api/v3/`,
 });
 
-IMG_REQUEST = axios.create({
+FILE_REQUEST = axios.create({
   baseURL: process.env.VUE_APP_DOCUMENT_IMAGES_URL || `${DEFAULT_URL}`,
   responseType: "blob",
-  adapter: cacheAdapterEnhancer(axios.defaults.adapter)
+  adapter: cacheAdapterEnhancer(axios.defaults.adapter),
 });
 
 const setAuthToken = (token) => {
   authToken = token;
-}
+};
+
+const setApiUrl = (url) => {
+  HTTP.defaults.baseURL = url;
+};
+
+const setFileUrl = (url) => {
+  FILE_REQUEST.defaults.baseURL = url;
+};
+
+const setLocale = (locale) => {
+  appLocale = locale;
+};
 
 const getInterceptorConfig = (config) => {
   if (authToken) {
-    config.headers['Authorization'] = `Token ${authToken}`;
+    config.headers["Authorization"] = `Token ${authToken}`;
+    config.headers["Accept-Language"] = `${appLocale}-${appLocale}`;
   }
   return config;
-}
+};
 
-HTTP.interceptors.request.use(getInterceptorConfig,
-  error => {
-    return Promise.reject(error);
-  }
-);
+HTTP.interceptors.request.use(getInterceptorConfig, (error) => {
+  return Promise.reject(error);
+});
 
-IMG_REQUEST.interceptors.request.use(getInterceptorConfig,
-  error => {
-    return Promise.reject(error);
-  }
-);
+FILE_REQUEST.interceptors.request.use(getInterceptorConfig, (error) => {
+  return Promise.reject(error);
+});
+
+const makeFileRequest = (fileUrl) => {
+  return new Promise((resolve, reject) => {
+    if (process.env.NODE_ENV === "test") {
+      reject("Running unit tests!");
+      return;
+    }
+    FILE_REQUEST.get(fileUrl)
+      .then((response) => {
+        return response.data;
+      })
+      .then((myBlob) => {
+        resolve(myBlob);
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+};
 
 export default {
   HTTP,
-  IMG_REQUEST,
-  setAuthToken
-};
+  setApiUrl,
+  setFileUrl,
+  makeFileRequest,
+  setAuthToken,
+  setLocale,
+  FILE_REQUEST,
+};

package/src/assets/images/DraggableIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.5 4.94922C4.30222 4.94922 4.10888 5.00787 3.94443 5.11775C3.77998 5.22763 3.65181 5.38381 3.57612 5.56654C3.50043 5.74926 3.48063 5.95033 3.51922 6.14431C3.5578 6.33829 3.65304 6.51647 3.79289 6.65633C3.93275 6.79618 4.11093 6.89142 4.30491 6.93C4.49889 6.96859 4.69996 6.94879 4.88268 6.8731C5.06541 6.79741 5.22159 6.66924 5.33147 6.50479C5.44135 6.34034 5.5 6.147 5.5 5.94922C5.5 5.684 5.39464 5.42965 5.20711 5.24211C5.01957 5.05458 4.76522 4.94922 4.5 4.94922ZM4.5 8.44922C4.30222 8.44922 4.10888 8.50787 3.94443 8.61775C3.77998 8.72763 3.65181 8.88381 3.57612 9.06654C3.50043 9.24926 3.48063 9.45033 3.51922 9.64431C3.5578 9.83829 3.65304 10.0165 3.79289 10.1563C3.93275 10.2962 4.11093 10.3914 4.30491 10.43C4.49889 10.4686 4.69996 10.4488 4.88268 10.3731C5.06541 10.2974 5.22159 10.1692 5.33147 10.0048C5.44135 9.84034 5.5 9.647 5.5 9.44922C5.5 9.184 5.39464 8.92965 5.20711 8.74211C5.01957 8.55458 4.76522 8.44922 4.5 8.44922ZM8 3.44922C8.19778 3.44922 8.39112 3.39057 8.55557 3.28069C8.72002 3.17081 8.84819 3.01463 8.92388 2.8319C8.99957 2.64918 9.01937 2.44811 8.98079 2.25413C8.9422 2.06015 8.84696 1.88196 8.70711 1.74211C8.56725 1.60226 8.38907 1.50702 8.19509 1.46843C8.00111 1.42985 7.80004 1.44965 7.61732 1.52534C7.43459 1.60103 7.27841 1.7292 7.16853 1.89365C7.05865 2.0581 7 2.25144 7 2.44922C7 2.71444 7.10536 2.96879 7.29289 3.15633C7.48043 3.34386 7.73478 3.44922 8 3.44922ZM4.5 1.44922C4.30222 1.44922 4.10888 1.50787 3.94443 1.61775C3.77998 1.72763 3.65181 1.88381 3.57612 2.06654C3.50043 2.24926 3.48063 2.45033 3.51922 2.64431C3.5578 2.83829 3.65304 3.01647 3.79289 3.15633C3.93275 3.29618 4.11093 3.39142 4.30491 3.43C4.49889 3.46859 4.69996 3.44879 4.88268 3.3731C5.06541 3.29741 5.22159 3.16924 5.33147 3.00479C5.44135 2.84034 5.5 2.647 5.5 2.44922C5.5 2.184 5.39464 1.92965 5.20711 1.74211C5.01957 1.55458 4.76522 1.44922 4.5 1.44922ZM8 8.44922C7.80222 8.44922 7.60888 8.50787 7.44443 8.61775C7.27998 8.72763 7.15181 8.88381 7.07612 9.06654C7.00043 9.24926 6.98063 9.45033 7.01922 9.64431C7.0578 9.83829 7.15304 10.0165 7.29289 10.1563C7.43275 10.2962 7.61093 10.3914 7.80491 10.43C7.99889 10.4686 8.19996 10.4488 8.38268 10.3731C8.56541 10.2974 8.72159 10.1692 8.83147 10.0048C8.94135 9.84034 9 9.647 9 9.44922C9 9.184 8.89464 8.92965 8.70711 8.74211C8.51957 8.55458 8.26522 8.44922 8 8.44922ZM8 4.94922C7.80222 4.94922 7.60888 5.00787 7.44443 5.11775C7.27998 5.22763 7.15181 5.38381 7.07612 5.56654C7.00043 5.74926 6.98063 5.95033 7.01922 6.14431C7.0578 6.33829 7.15304 6.51647 7.29289 6.65633C7.43275 6.79618 7.61093 6.89142 7.80491 6.93C7.99889 6.96859 8.19996 6.94879 8.38268 6.8731C8.56541 6.79741 8.72159 6.66924 8.83147 6.50479C8.94135 6.34034 9 6.147 9 5.94922C9 5.684 8.89464 5.42965 8.70711 5.24211C8.51957 5.05458 8.26522 4.94922 8 4.94922Z"
+      fill="white"
+    />
+  </svg>
+</template>

package/src/assets/images/GridIcon.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="M1.33203 1.9987C1.33203 1.63051 1.63051 1.33203 1.9987 1.33203H6.66537C7.03356 1.33203 7.33203 1.63051 7.33203 1.9987V6.66537C7.33203 7.03356 7.03356 7.33203 6.66537 7.33203H1.9987C1.63051 7.33203 1.33203 7.03356 1.33203 6.66537V1.9987ZM2.66536 2.66536V5.9987H5.9987V2.66536H2.66536ZM8.66537 1.9987C8.66537 1.63051 8.96384 1.33203 9.33203 1.33203H13.9987C14.3669 1.33203 14.6654 1.63051 14.6654 1.9987V6.66537C14.6654 7.03356 14.3669 7.33203 13.9987 7.33203H9.33203C8.96384 7.33203 8.66537 7.03356 8.66537 6.66537V1.9987ZM9.9987 2.66536V5.9987H13.332V2.66536H9.9987ZM1.33203 9.33203C1.33203 8.96384 1.63051 8.66537 1.9987 8.66537H6.66537C7.03356 8.66537 7.33203 8.96384 7.33203 9.33203V13.9987C7.33203 14.3669 7.03356 14.6654 6.66537 14.6654H1.9987C1.63051 14.6654 1.33203 14.3669 1.33203 13.9987V9.33203ZM2.66536 9.9987V13.332H5.9987V9.9987H2.66536ZM8.66537 9.33203C8.66537 8.96384 8.96384 8.66537 9.33203 8.66537H13.9987C14.3669 8.66537 14.6654 8.96384 14.6654 9.33203V13.9987C14.6654 14.3669 14.3669 14.6654 13.9987 14.6654H9.33203C8.96384 14.6654 8.66537 14.3669 8.66537 13.9987V9.33203ZM9.9987 9.9987V13.332H13.332V9.9987H9.9987Z"
+      fill="#7B61FF"
+    />
+  </svg>
+</template>

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/NotFoundIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="10"
+    height="11"
+    viewBox="0 0 10 11"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.17854 5.83544L9.75604 2.25794C10.0819 1.9321 10.0819 1.40544 9.75604 1.0796C9.43021 0.75377 8.90354 0.75377 8.57771 1.0796L5.00021 4.6571L1.42271 1.0796C1.09688 0.75377 0.570208 0.75377 0.244375 1.0796C-0.0814583 1.40544 -0.0814583 1.9321 0.244375 2.25794L3.82188 5.83544L0.244375 9.41294C-0.0814583 9.73877 -0.0814583 10.2654 0.244375 10.5913C0.406875 10.7538 0.620208 10.8354 0.833542 10.8354C1.04688 10.8354 1.26021 10.7538 1.42271 10.5913L5.00021 7.01377L8.57771 10.5913C8.74021 10.7538 8.95354 10.8354 9.16687 10.8354C9.38021 10.8354 9.59354 10.7538 9.75604 10.5913C10.0819 10.2654 10.0819 9.73877 9.75604 9.41294L6.17854 5.83544Z"
+      fill="#E1E1E1"
+    />
+  </svg>
+</template>

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>
@@ -13,34 +13,35 @@ export default {
   props: {
     imageUrl: {
       required: true,
+      type: String,
     },
     height: {
       default: null,
+      type: String,
     },
     width: {
       default: null,
+      type: String,
     },
   },
   data() {
     return {
       loaded: false,
+      isVisible: false,
     };
   },
   watch: {
     imageUrl() {
-      this.loadImage();
+      if (this.isVisible) {
+        this.loadImage();
+      }
     },
   },
-  mounted() {
-    this.loadImage();
-  },
   methods: {
     loadImage() {
       if (!this.imageUrl) return;
-      return api.IMG_REQUEST.get(this.imageUrl)
-        .then((response) => {
-          return response.data;
-        })
+      return api
+        .makeFileRequest(this.imageUrl)
         .then((myBlob) => {
           this.$refs.imgTag.src = URL.createObjectURL(myBlob);
           if (this.height) {
@@ -50,8 +51,17 @@ export default {
             this.$refs.imgTag.style.width = this.width;
           }
           this.loaded = true;
+        })
+        .catch((error) => {
+          this.loaded = false;
         });
     },
+    visibilityChanged(isVisible) {
+      if (!this.isVisible && isVisible) {
+        this.isVisible = isVisible;
+        this.loadImage();
+      }
+    },
   },
 };
 </script>

package/src/assets/images/SettingsIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.361 8.4396C13.2541 8.31795 13.1952 8.16154 13.1952 7.9996C13.1952 7.83767 13.2541 7.68126 13.361 7.55961L14.2143 6.5996C14.3084 6.49472 14.3668 6.36274 14.3811 6.22261C14.3955 6.08248 14.3651 5.9414 14.2943 5.8196L12.961 3.51294C12.8909 3.39129 12.7843 3.29486 12.6562 3.2374C12.5281 3.17993 12.3851 3.16438 12.2477 3.19294L10.9943 3.44627C10.8349 3.47922 10.6688 3.45266 10.5276 3.3716C10.3864 3.29055 10.2797 3.16059 10.2277 3.00627L9.821 1.78627C9.77627 1.65386 9.69107 1.53885 9.57742 1.4575C9.46377 1.37615 9.32743 1.33258 9.18766 1.33294H6.521C6.37562 1.32535 6.23175 1.36556 6.11138 1.44741C5.991 1.52927 5.90072 1.64828 5.85433 1.78627L5.481 3.00627C5.429 3.16059 5.32231 3.29055 5.18107 3.3716C5.03983 3.45266 4.87381 3.47922 4.71433 3.44627L3.42767 3.19294C3.29737 3.17453 3.16453 3.19509 3.0459 3.25203C2.92726 3.30898 2.82813 3.39976 2.761 3.51294L1.42767 5.8196C1.35511 5.94004 1.32248 6.08033 1.33445 6.22042C1.34643 6.36051 1.40239 6.49323 1.49433 6.5996L2.341 7.55961C2.44788 7.68126 2.50682 7.83767 2.50682 7.9996C2.50682 8.16154 2.44788 8.31795 2.341 8.4396L1.49433 9.39961C1.40239 9.50598 1.34643 9.6387 1.33445 9.77879C1.32248 9.91888 1.35511 10.0592 1.42767 10.1796L2.761 12.4863C2.83106 12.6079 2.93774 12.7044 3.06583 12.7618C3.19392 12.8193 3.33688 12.8348 3.47433 12.8063L4.72766 12.5529C4.88714 12.52 5.05317 12.5465 5.19441 12.6276C5.33565 12.7087 5.44233 12.8386 5.49433 12.9929L5.901 14.2129C5.94738 14.3509 6.03766 14.4699 6.15804 14.5518C6.27842 14.6337 6.42229 14.6739 6.56766 14.6663H9.23433C9.37409 14.6666 9.51044 14.6231 9.62408 14.5417C9.73773 14.4604 9.82294 14.3454 9.86766 14.2129L10.2743 12.9929C10.3263 12.8386 10.433 12.7087 10.5743 12.6276C10.7155 12.5465 10.8815 12.52 11.041 12.5529L12.2943 12.8063C12.4318 12.8348 12.5747 12.8193 12.7028 12.7618C12.8309 12.7044 12.9376 12.6079 13.0077 12.4863L14.341 10.1796C14.4118 10.0578 14.4422 9.91673 14.4278 9.7766C14.4134 9.63647 14.355 9.50449 14.261 9.39961L13.361 8.4396ZM12.3677 9.33294L12.901 9.93294L12.0477 11.4129L11.261 11.2529C10.7809 11.1548 10.2814 11.2364 9.85739 11.4821C9.43341 11.7279 9.11443 12.1208 8.961 12.5863L8.70767 13.3329H7.001L6.761 12.5729C6.60757 12.1075 6.28859 11.7146 5.8646 11.4688C5.44062 11.223 4.94115 11.1415 4.461 11.2396L3.67433 11.3996L2.80767 9.92627L3.341 9.32627C3.66897 8.95959 3.85029 8.48489 3.85029 7.99294C3.85029 7.50098 3.66897 7.02629 3.341 6.6596L2.80767 6.0596L3.661 4.59294L4.44767 4.75294C4.92781 4.85109 5.42728 4.76953 5.85127 4.52374C6.27525 4.27795 6.59423 3.88504 6.74766 3.4196L7.001 2.66627H8.70767L8.961 3.42627C9.11443 3.89171 9.43341 4.28462 9.85739 4.5304C10.2814 4.77619 10.7809 4.85775 11.261 4.7596L12.0477 4.5996L12.901 6.0796L12.3677 6.67961C12.0434 7.04545 11.8643 7.51739 11.8643 8.00627C11.8643 8.49515 12.0434 8.9671 12.3677 9.33294ZM7.85433 5.33294C7.32691 5.33294 6.81134 5.48934 6.37281 5.78235C5.93428 6.07537 5.59249 6.49185 5.39065 6.97912C5.18882 7.46638 5.13601 8.00256 5.2389 8.51985C5.3418 9.03713 5.59577 9.51228 5.96871 9.88522C6.34165 10.2582 6.81681 10.5121 7.33409 10.615C7.85137 10.7179 8.38755 10.6651 8.87482 10.4633C9.36209 10.2615 9.77857 9.91966 10.0716 9.48113C10.3646 9.04259 10.521 8.52702 10.521 7.9996C10.521 7.29236 10.24 6.61408 9.73995 6.11399C9.23985 5.61389 8.56158 5.33294 7.85433 5.33294ZM7.85433 9.33294C7.59062 9.33294 7.33284 9.25474 7.11357 9.10823C6.89431 8.96172 6.72341 8.75348 6.62249 8.50985C6.52158 8.26621 6.49517 7.99813 6.54662 7.73948C6.59807 7.48084 6.72505 7.24327 6.91152 7.0568C7.09799 6.87033 7.33557 6.74334 7.59421 6.69189C7.85285 6.64044 8.12094 6.66685 8.36458 6.76777C8.60821 6.86868 8.81645 7.03958 8.96296 7.25884C9.10947 7.47811 9.18766 7.7359 9.18766 7.9996C9.18766 8.35323 9.04719 8.69237 8.79714 8.94241C8.54709 9.19246 8.20795 9.33294 7.85433 9.33294Z"
+      fill="white"
+    />
+  </svg>
+</template>

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/ann_set_table_options.scss

@@ -0,0 +1,26 @@
+@import "./imports.scss";
+
+.ann-set-table-header {
+  position: absolute;
+  background-color: $purple;
+  color: $white;
+  font-size: 14px;
+  padding: 4px;
+  z-index: 9;
+  border-radius: 2px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  .ann-set-table-header-dropdown {
+    cursor: pointer;
+    .ann-set-label-set-name {
+      margin-right: 4px;
+    }
+
+    .delete-action {
+      color: $red;
+    }
+  }
+}

package/src/assets/scss/annotation_details.scss

@@ -1,99 +1,114 @@
 @import "./imports.scss";
 
-.label-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-
-  .annotation-details-icon {
+.annotation-details {
+  .label-icon {
     display: flex;
-    padding: 0 15px;
+    align-items: center;
+    justify-content: center;
 
-    &.animated-ripple {
-      animation: bounce 0.4s 0.1s;
-      transform: scale(1);
-    }
+    .annotation-details-icon {
+      display: flex;
 
-    svg {
-      width: 25px;
-    }
+      &.animated-ripple {
+        animation: bounce 0.4s 0.1s;
+        transform: scale(1);
+      }
 
-    &.user-icon {
-      padding: 0 18px;
       svg {
-        width: 20px;
+        width: 25px;
       }
-    }
-  }
-}
-
-.label-details {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-width: 100px;
 
-  .label-description {
-    opacity: 0.7;
-    color: $white;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 18px;
-    border-bottom: 1px solid $low-opacity-white;
-    padding-bottom: 8px;
-    word-wrap: break-all;
-    white-space: normal;
-    width: 216px;
+      &.user-icon {
+        padding: 0 3px;
+        svg {
+          width: 20px;
+        }
+      }
+    }
+    &.is-small {
+      .annotation-details-icon {
+        svg {
+          width: 16px;
+        }
+        &.user-icon {
+          svg {
+            width: 12px;
+          }
+        }
+      }
+    }
   }
 
-  .confidence {
-    color: $white;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 18px;
+  .label-details {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    border-bottom: 1px solid $low-opacity-white;
-    padding-bottom: 8px;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 100px;
+
+    .label-description {
+      opacity: 0.7;
+      color: $white;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      border-bottom: 1px solid $low-opacity-white;
+      padding-bottom: 8px;
+      word-wrap: break-all;
+      white-space: normal;
+      width: 216px;
+    }
 
-    .value {
-      color: $green;
+    .confidence {
+      color: $white;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
 
-      &.yellow {
-        color: $yellow;
+      &:not(.tooltip-in-public-view) {
+        border-bottom: 1px solid $low-opacity-white;
+        padding-bottom: 8px;
       }
 
-      &.red {
-        color: $red;
-      }
-    }
-  }
+      .value {
+        color: $green;
 
-  .revision {
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 18px;
-    color: $white;
+        &.yellow {
+          color: $yellow;
+        }
 
-    > div {
-      display: flex;
-      align-items: center;
+        &.red {
+          color: $red;
+        }
+      }
     }
 
-    .annotation-details-icon {
-      display: flex;
+    .revision {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      color: $white;
 
-      svg {
-        width: 25px;
+      > div {
+        display: flex;
+        align-items: center;
       }
 
-      &.user-icon {
-        padding-right: 5px;
+      .annotation-details-icon {
+        display: flex;
 
         svg {
-          width: 20px;
+          width: 25px;
+        }
+
+        &.user-icon {
+          padding-right: 5px;
+
+          svg {
+            width: 20px;
+          }
         }
       }
     }

package/src/assets/scss/choose_label_set_modal.scss

@@ -18,7 +18,7 @@
 
     .label-set-dropdown {
       width: 100%;
-      border: 1px solid #d0d5dd;
+      border: 1px solid $grey-outline;
       height: 40px;
       cursor: pointer;
       box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);