From f09746e7cb30ef7250575589dcf316fe6b01efb1 Mon Sep 17 00:00:00 2001
From: leiyre <leire@recogn.ai>
Date: Thu, 7 Apr 2022 17:16:15 +0200
Subject: [PATCH] feat(home): improve table actions and styles (#1384)

Closes #1355
Closes #1333

(cherry picked from commit b50a36a513d84a3228d5155568cb9a6e4a5596ae)
---
 .../components/commons/header/appHeader.vue   |  6 +-
 frontend/components/core/ReBreadcrumbs.vue    | 36 ++++++---
 frontend/components/core/ReCheckbox.vue       |  9 ++-
 .../components/core/table/ReTableInfo.vue     | 50 ++++++------
 .../core/table/TableFiltrableColumn.vue       | 68 +++++++++++++---
 .../labeling-rules/RulesManagement.vue        | 61 +++++++++------
 frontend/pages/datasets/index.vue             | 78 ++++++++++++++++---
 .../__snapshots__/ReTableInfo.spec.js.snap    |  6 +-
 8 files changed, 227 insertions(+), 87 deletions(-)

diff --git a/frontend/components/commons/header/appHeader.vue b/frontend/components/commons/header/appHeader.vue
index 2cb7bb9dc5..f2f170ba8b 100644
--- a/frontend/components/commons/header/appHeader.vue
+++ b/frontend/components/commons/header/appHeader.vue
@@ -22,7 +22,11 @@
     :class="['header', sticky && dataset ? 'sticky' : null]"
   >
     <ReTopbarBrand>
-      <ReBreadcrumbs :breadcrumbs="breadcrumbs" :copy-button="copyButton" />
+      <ReBreadcrumbs
+        :breadcrumbs="breadcrumbs"
+        :copy-button="copyButton"
+        @breadcrumb-action="$emit('breadcrumb-action', $event)"
+      />
       <user />
     </ReTopbarBrand>
     <slot />
diff --git a/frontend/components/core/ReBreadcrumbs.vue b/frontend/components/core/ReBreadcrumbs.vue
index e02697d139..093849bc0a 100644
--- a/frontend/components/core/ReBreadcrumbs.vue
+++ b/frontend/components/core/ReBreadcrumbs.vue
@@ -18,15 +18,20 @@
 <template>
   <div class="breadcrumbs">
     <ul>
-      <li>
+      <li v-for="breadcrumb in filteredBreadcrumbs" :key="breadcrumb.name">
         <NuxtLink
-          v-for="breadcrumb in filteredBreadcrumbs"
-          :key="breadcrumb.name"
           class="breadcrumbs__item"
+          v-if="breadcrumb.link"
           :to="breadcrumb.link"
         >
           {{ breadcrumb.name }}
         </NuxtLink>
+        <span
+          class="breadcrumbs__item --action"
+          v-else
+          @click="$emit('breadcrumb-action', breadcrumb.action)"
+          >{{ breadcrumb.name }}</span
+        >
       </li>
     </ul>
     <re-action-tooltip tooltip="Copied">
@@ -84,27 +89,36 @@ export default {
   display: flex;
   align-items: center;
   ul {
-    display: inline-block;
+    display: flex;
     padding-left: 0;
     font-weight: normal;
     list-style: none;
   }
+  li {
+    margin: auto 0.5em auto auto;
+    &:not(:last-child):after {
+      content: "/";
+      margin-left: 0.5em;
+    }
+    &:last-child {
+      font-weight: 600;
+      a {
+        cursor: default;
+        pointer-events: none;
+      }
+    }
+  }
   &__copy {
     .svg-icon {
       fill: $lighter-color;
     }
   }
   &__item {
-    margin: auto 0.5em auto auto;
     color: $lighter-color;
     text-decoration: none;
     outline: none;
-    &:not(:last-child):after {
-      content: "/";
-      margin-left: 0.5em;
-    }
-    &:last-child {
-      font-weight: 600;
+    &.--action {
+      cursor: pointer;
     }
   }
 }
diff --git a/frontend/components/core/ReCheckbox.vue b/frontend/components/core/ReCheckbox.vue
index 7997c31183..3f9d0b21a2 100644
--- a/frontend/components/core/ReCheckbox.vue
+++ b/frontend/components/core/ReCheckbox.vue
@@ -40,6 +40,7 @@
 
 <script>
 import "assets/icons/check2";
+import _ from "lodash";
 export default {
   model: {
     prop: "areChecked",
@@ -55,7 +56,8 @@ export default {
     classes() {
       return {
         checked: Array.isArray(this.areChecked)
-          ? this.areChecked.includes(this.value)
+          ? this.areChecked.includes(this.value) ||
+            _.find(this.areChecked, this.value)
           : this.checked,
         disabled: this.disabled,
       };
@@ -76,7 +78,10 @@ export default {
       if (!this.disabled) {
         if (Array.isArray(this.areChecked)) {
           const checked = this.areChecked.slice();
-          const found = checked.indexOf(this.value);
+          const found =
+            typeof this.value === "string"
+              ? checked.indexOf(this.value)
+              : _.findIndex(checked, this.value);
           if (found !== -1) {
             checked.splice(found, 1);
           } else {
diff --git a/frontend/components/core/table/ReTableInfo.vue b/frontend/components/core/table/ReTableInfo.vue
index 85435f9027..1b5af9810a 100644
--- a/frontend/components/core/table/ReTableInfo.vue
+++ b/frontend/components/core/table/ReTableInfo.vue
@@ -39,7 +39,7 @@
                 :class="[sortOrder, { active: sortedBy === column.field }]"
                 @click="sort(column)"
               >
-                {{ column.name }}
+                <span>{{ column.name }}</span>
                 <svgicon color="#4C4EA3" width="15" height="15" name="sort" />
               </button>
             </div>
@@ -65,7 +65,13 @@
               :key="String(item.id)"
             >
               <div class="table-info__item">
-                <!-- <ReCheckbox v-if="globalActions" v-model="item.selectedRecord" class="list__item__checkbox" :value="item.name" @change="onCheckboxChanged($event, item.id, key)" /> -->
+                <re-checkbox
+                  v-if="globalActions"
+                  v-model="item.selectedRecord"
+                  class="list__item__checkbox"
+                  :value="item.name"
+                  @change="onCheckboxChanged($event, item.id)"
+                />
                 <span
                   v-for="(column, idx) in columns"
                   :key="idx"
@@ -192,26 +198,6 @@
               </div>
             </li>
           </ul>
-          <!-- <ReModal :modal-custom="true" :prevent-body-scroll="true" modal-class="modal-primary" :modal-visible="visibleModalId === 'all'" modal-position="modal-center" @close-modal="$emit('close-modal')">
-            <div>
-              <p class="modal__title">Delete confirmation</p>
-              <span>
-                You are about to delete: <br />
-                <span v-for="item in selectedItems" :key="item.id">
-                  <strong>{{ item.actionName }}</strong><br /></span>
-              </span>
-              <p>This process cannot be undone</p>
-              <br />
-              <div class="modal-buttons">
-                <ReButton class="button-tertiary--small button-tertiary--outline" @click="$emit('close-modal')">
-                  Cancel
-                </ReButton>
-                <ReButton class="button-primary--small" @click="$emit('delete-multiple')">
-                  Yes, delete
-                </ReButton>
-              </div>
-            </div>
-          </ReModal> -->
         </div>
       </template>
       <ResultsEmpty v-else :title="emptySearchInfo.title" />
@@ -328,7 +314,13 @@ export default {
       const matchFilters = (item) => {
         if (Object.values(this.filters).length) {
           return Object.keys(this.filters).every((key) => {
-            return this.filters[key].toString().includes(item[key]);
+            if (this.isObject(item[key])) {
+              return this.filters[key].find(
+                (filter) => filter.value === item[key][filter.key]
+              );
+            } else {
+              return this.filters[key].toString().includes(item[key]);
+            }
           });
         }
         return true;
@@ -359,6 +351,9 @@ export default {
     this.sortedBy = this.sortedByField;
   },
   methods: {
+    isObject(obj) {
+      return Object.prototype.toString.call(obj) === "[object Object]";
+    },
     itemValue(item, column) {
       if (column.subfield) {
         return item[column.field][column.subfield];
@@ -482,8 +477,12 @@ export default {
       color: $font-secondary;
       @include font-size(14px);
       font-family: $sff;
+      text-align: left;
+      span {
+        white-space: nowrap;
+      }
       .svg-icon {
-        margin-left: 0.5em;
+        margin-left: 5px;
       }
     }
   }
@@ -504,7 +503,7 @@ export default {
     outline: none;
     &__col {
       text-align: left;
-      margin-right: 1.5em;
+      margin-right: 1em;
       flex: 1 1 0px;
       &:nth-last-of-type(-n + 1) {
         max-width: 120px;
@@ -602,6 +601,7 @@ export default {
       margin-top: 0;
       margin-bottom: 0;
       display: block;
+      word-break: break-all;
     }
   }
   .text {
diff --git a/frontend/components/core/table/TableFiltrableColumn.vue b/frontend/components/core/table/TableFiltrableColumn.vue
index 83dd13fff6..9971069b8d 100644
--- a/frontend/components/core/table/TableFiltrableColumn.vue
+++ b/frontend/components/core/table/TableFiltrableColumn.vue
@@ -19,7 +19,7 @@
       <ul>
         <li
           v-for="option in filterOptions(this.options, searchText)"
-          :key="option"
+          :key="option.index"
         >
           <ReCheckbox
             :id="option"
@@ -27,7 +27,8 @@
             class="re-checkbox--dark"
             :value="option"
           >
-            {{ option }} ({{ datasetsCounter(option) | formatNumber }})
+            {{ isObject(option) ? `${option.key}: ${option.value}` : option }}
+            ({{ tableItemsCounter(option) | formatNumber }})
           </ReCheckbox>
         </li>
         <li
@@ -74,15 +75,42 @@ export default {
   computed: {
     options() {
       const rawOptions = this.data.map((item) => item[this.column.field]);
-      return [...new Set(rawOptions)];
+      if (rawOptions.every((option) => this.isObject(option))) {
+        const removedEmptyOptions = rawOptions
+          .filter((opt) => Object.values(opt).length)
+          .flatMap((opt) => opt);
+        const optionsArray = Object.values(removedEmptyOptions).flatMap(
+          (options) =>
+            Object.keys(options).map((key) => {
+              return { key: key, value: options[key] };
+            })
+        );
+        const keys = ["key", "value"];
+        return optionsArray.filter(
+          (
+            (s) => (o) =>
+              ((k) => !s.has(k) && s.add(k))(keys.map((k) => o[k]).join("|"))
+          )(new Set())
+        );
+      } else {
+        return [...new Set(rawOptions)];
+      }
     },
   },
   watch: {
     selectedOptions() {
       this.$emit("applyFilters", this.column, this.selectedOptions);
     },
+    filters(val) {
+      if (!Object.keys(val).length) {
+        this.selectedOptions = [];
+      }
+    },
   },
   methods: {
+    isObject(obj) {
+      return Object.prototype.toString.call(obj) === "[object Object]";
+    },
     openFilter() {
       this.visibleFilter = true;
     },
@@ -94,22 +122,37 @@ export default {
         return options;
       }
       let filtered = options.filter((id) =>
-        id.toLowerCase().match(text.toLowerCase())
+        JSON.stringify(id).toLowerCase().match(text.toLowerCase())
       );
       return filtered;
     },
-    datasetsCounter(option) {
+    tableItemsCounter(option) {
       const keys = Object.keys(this.filters).filter(
         (k) => k !== this.column.field
       );
-      const filteredData = this.data.filter((dataset) => {
+      const filteredData = this.data.filter((tableItem) => {
         return keys.every((key) => {
-          return this.filters[key].includes(dataset[key]);
+          if (this.filters[key].every((f) => this.isObject(f))) {
+            return this.filters[key].find(
+              (f) => f.value === tableItem[key][f.key]
+            );
+          } else {
+            return this.filters[key].includes(tableItem[key]);
+          }
         });
       });
-      return filteredData.filter(
-        (dataset) => dataset[this.column.field] === option
-      ).length;
+      if (
+        filteredData.every((data) => this.isObject(data[this.column.field]))
+      ) {
+        return filteredData.filter(
+          (tableItem) =>
+            tableItem[this.column.field][option.key] === option.value
+        ).length;
+      } else {
+        return filteredData.filter(
+          (tableItem) => tableItem[this.column.field] === option
+        ).length;
+      }
     },
   },
 };
@@ -143,6 +186,9 @@ export default {
     width: 100% !important;
     cursor: default;
   }
+  ::v-deep .checkbox-label {
+    line-height: 13px;
+  }
 }
 .highlight-text {
   display: inline-block;
@@ -201,7 +247,7 @@ button {
     }
   }
   .svg-icon {
-    margin-left: 0.5em;
+    margin-left: 5px;
     margin-right: 1em;
   }
 }
diff --git a/frontend/components/text-classifier/labeling-rules/RulesManagement.vue b/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
index d0c8c9519f..ad5e4ce52b 100644
--- a/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
+++ b/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
@@ -72,7 +72,27 @@ export default {
       querySearch: undefined,
       visibleModalId: undefined,
       isLoading: undefined,
-      tableColumns: [
+      sortedOrder: "desc",
+      sortedByField: "created_at",
+      actions: [{ name: "delete", icon: "delete", title: "Delete rule" }],
+      noDataInfo: {
+        title: "0 rules defined",
+        message: `You have not defined any rules for this dataset yet.`,
+        icon: "empty-rules",
+      },
+      emptySearchInfo: {
+        title: "0 rules found",
+      },
+    };
+  },
+  async fetch() {
+    if (!this.rules) {
+      await this.dataset.refreshRules();
+    }
+  },
+  computed: {
+    tableColumns() {
+      return [
         {
           name: "Query",
           field: "query",
@@ -88,7 +108,7 @@ export default {
           tooltip: "Percentage of records labeled by the rule",
         },
         {
-          name: "Annot. Cover.",
+          name: this.$mq >= "sm" ? "An. Cover." : "Annot. Cover.",
           field: "coverage_annotated",
           class: "text",
           type: "percentage",
@@ -121,26 +141,8 @@ export default {
           class: "date",
           type: "date",
         },
-      ],
-      sortedOrder: "desc",
-      sortedByField: "created_at",
-      actions: [{ name: "delete", icon: "delete", title: "Delete rule" }],
-      noDataInfo: {
-        title: "0 rules defined",
-        message: `You have not defined any rules for this dataset yet.`,
-        icon: "empty-rules",
-      },
-      emptySearchInfo: {
-        title: "0 rules found",
-      },
-    };
-  },
-  async fetch() {
-    if (!this.rules) {
-      await this.dataset.refreshRules();
-    }
-  },
-  computed: {
+      ];
+    },
     rules() {
       return this.dataset.labelingRules;
     },
@@ -266,12 +268,21 @@ export default {
   }
   &__table {
     margin-bottom: 2em !important;
+    @include media("<=desktop") {
+      ::v-deep .table-info__header {
+        .table-info__item__col:first-child button {
+          width: 70px;
+        }
+      }
+    }
     ::v-deep {
-      .table-info__item__col:nth-of-type(2) {
-        min-width: 100px;
+      .table-info__item__col {
+        width: 130px;
       }
       .table-info__item__col:first-child {
-        min-width: 120px;
+        width: auto;
+        min-width: auto;
+        flex-grow: 1.5;
       }
       .table-info__body {
         overflow: visible;
diff --git a/frontend/pages/datasets/index.vue b/frontend/pages/datasets/index.vue
index 999b759933..ade158d724 100644
--- a/frontend/pages/datasets/index.vue
+++ b/frontend/pages/datasets/index.vue
@@ -22,8 +22,9 @@
       <div class="main">
         <app-header
           :copy-button="false"
-          :breadcrumbs="[{ link: `/datasets`, name: 'Datasets' }]"
+          :breadcrumbs="breadcrumbs"
           :sticky="false"
+          @breadcrumb-action="onBreadcrumbAction($event)"
         />
         <Error
           v-if="$fetchState.error"
@@ -37,6 +38,7 @@
           </div>
           <div>
             <ReTableInfo
+              ref="table"
               :data="datasets"
               :sorted-order="sortedOrder"
               :sorted-by-field="sortedByField"
@@ -66,10 +68,12 @@
 import { ObservationDataset } from "@/models/Dataset";
 import { mapActions } from "vuex";
 import { currentWorkspace } from "@/models/Workspace";
+import { Base64 } from "js-base64";
 export default {
   layout: "app",
   data: () => ({
     querySearch: undefined,
+    breadcrumbs: [{ action: "clearFilters", name: "Datasets" }],
     tableColumns: [
       { name: "Name", field: "name", class: "table-info__title", type: "link" },
       {
@@ -86,7 +90,13 @@ export default {
         type: "task",
         filtrable: "true",
       },
-      { name: "Tags", field: "tags", class: "text", type: "object" },
+      {
+        name: "Tags",
+        field: "tags",
+        class: "text",
+        type: "object",
+        filtrable: "true",
+      },
       { name: "Created at", field: "created_at", class: "date", type: "date" },
       {
         name: "Updated at",
@@ -118,10 +128,13 @@ export default {
   computed: {
     activeFilters() {
       const workspaces = this.workspaces;
-      if (workspaces) {
-        return [{ column: "owner", values: workspaces }];
-      }
-      return [];
+      const tasks = this.tasks;
+      const tags = this.tags;
+      return [
+        { column: "owner", values: workspaces || [] },
+        { column: "task", values: tasks || [] },
+        { column: "tags", values: tags || [] },
+      ];
     },
     datasets() {
       return ObservationDataset.all().map((dataset) => {
@@ -139,6 +152,22 @@ export default {
       }
       return _workspaces;
     },
+    tasks() {
+      let _tasks = this.$route.query.task;
+      if (typeof _tasks == "string") {
+        _tasks = [_tasks];
+      }
+      return _tasks;
+    },
+    tags() {
+      let _tags = this.$route.query.tags
+        ? JSON.parse(Base64.decode(this.$route.query.tags))
+        : undefined;
+      if (typeof _tags == "string") {
+        _tags = [_tags];
+      }
+      return _tags;
+    },
     workspace() {
       // THIS IS WRONG !!!
       this.$route.query.workspace;
@@ -165,15 +194,32 @@ export default {
       fetchDatasets: "entities/datasets/fetchAll",
       _deleteDataset: "entities/datasets/deleteDataset",
     }),
-
     onColumnFilterApplied({ column, values }) {
       if (column === "owner") {
         if (values !== this.workspaces) {
-          this.$router.replace({ query: { workspace: values } });
+          this.$router.push({
+            query: { ...this.$route.query, workspace: values },
+          });
+        }
+      }
+      if (column === "task") {
+        if (values !== this.tasks) {
+          this.$router.push({ query: { ...this.$route.query, task: values } });
+        }
+      }
+      if (column === "tags") {
+        if (values !== this.tags) {
+          this.$router.push({
+            query: {
+              ...this.$route.query,
+              tags: values.length
+                ? Base64.encodeURI(JSON.stringify(values))
+                : undefined,
+            },
+          });
         }
       }
     },
-
     datasetWorkspace(dataset) {
       var workspace = dataset.owner;
       if (workspace === null || workspace === "null") {
@@ -181,7 +227,6 @@ export default {
       }
       return `/datasets/${workspace}/${dataset.name}`;
     },
-
     onActionClicked(action, dataset) {
       switch (action) {
         case "delete":
@@ -236,6 +281,19 @@ export default {
     closeModal() {
       this.datasetCompositeId = undefined;
     },
+    async clearFilters() {
+      if (this.$refs.table) {
+        await this.activeFilters.forEach((filter) => {
+          this.$refs.table.onApplyFilters({ field: filter.column }, []);
+        });
+        this.$router.push({ path: "/datasets" });
+      }
+    },
+    onBreadcrumbAction(e) {
+      if (e === "clearFilters") {
+        this.clearFilters();
+      }
+    },
   },
 };
 </script>
diff --git a/frontend/specs/components/core/table/__snapshots__/ReTableInfo.spec.js.snap b/frontend/specs/components/core/table/__snapshots__/ReTableInfo.spec.js.snap
index 3a24b007d9..e6e82b7dd0 100644
--- a/frontend/specs/components/core/table/__snapshots__/ReTableInfo.spec.js.snap
+++ b/frontend/specs/components/core/table/__snapshots__/ReTableInfo.spec.js.snap
@@ -14,7 +14,8 @@ exports[`ReTableInfo renders properly 1`] = `
       <!---->
       <ul>
         <li>
-          <div class="table-info__item"><span class="table-info__item__col"><span class="text"><span>recognai</span></span></span>
+          <div class="table-info__item">
+            <!----> <span class="table-info__item__col"><span class="text"><span>recognai</span></span></span>
             <div class="table-info__actions"></div>
             <remodal modal-custom="true" prevent-body-scroll="true" modal-class="modal-secondary" modal-visible="true" modal-position="modal-center">
               <div>
@@ -33,7 +34,8 @@ exports[`ReTableInfo renders properly 1`] = `
           </div>
         </li>
         <li>
-          <div class="table-info__item"><span class="table-info__item__col"><span class="text"><span>recognai</span></span></span>
+          <div class="table-info__item">
+            <!----> <span class="table-info__item__col"><span class="text"><span>recognai</span></span></span>
             <div class="table-info__actions"></div>
             <remodal modal-custom="true" prevent-body-scroll="true" modal-class="modal-secondary" modal-visible="true" modal-position="modal-center">
               <div>