feat(#982): show filters in labelling rules view (#1038)

(cherry picked from commit 6d1e575)
argilla-io · Feb 10, 2022 · 7ff677b · 7ff677b
1 parent 7fc994e
commit 7ff677b
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 38 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -135,7 +135,6 @@ jobs:
         with:
           images: recognai/rubrix
       - name: Login to DockerHub
-        if: github.event_name != 'pull_request'
         uses: docker/login-action@v1
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -145,7 +144,7 @@ jobs:
         with:
           context: .
           file: release.Dockerfile
-          push: ${{ github.event_name != 'pull_request' }}
+          push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
 

diff --git a/frontend/components/commons/TaskSearch.vue b/frontend/components/commons/TaskSearch.vue
@@ -37,23 +37,12 @@ export default {
     annotationEnabled() {
       return this.dataset.viewSettings.viewMode === "annotate";
     },
-    currentViewMode() {
-      return this.dataset.viewSettings.viewMode;
-    },
     workspace() {
       return currentWorkspace(this.$route);
     },
   },
-  watch: {
-    async currentViewMode(n) {
-      if (n === "labelling-rules") {
-        await this.resetSearch({ dataset: this.dataset });
-      }
-    },
-  },
   methods: {
     ...mapActions({
-      resetSearch: "entities/datasets/resetSearch",
       fetchDataset: "entities/datasets/fetchByName",
     }),
   },

diff --git a/frontend/components/commons/header/filters/FiltersArea.vue b/frontend/components/commons/header/filters/FiltersArea.vue
@@ -21,13 +21,11 @@
       <div class="container">
         <div class="filters__row">
           <SearchBar
-            :expand-searchbar="expandSearchbar"
             class="filters__searchbar"
             :dataset="dataset"
             @submit="onTextQuerySearch"
           />
           <FiltersList
-            v-if="!expandSearchbar"
             :dataset="dataset"
             @applyFilter="onApplyFilter"
             @applyMetaFilter="onApplyMetaFilter"
@@ -51,10 +49,6 @@ export default {
       type: Object,
       default: () => ({}),
     },
-    expandSearchbar: {
-      type: Boolean,
-      default: false,
-    },
   },
   data: () => ({
     sortable: {
@@ -125,6 +119,13 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   margin-left: 0;
+  padding-right: calc(4em + 45px);
+  .--metrics & {
+    @include media(">desktop") {
+      padding-right: calc(294px + 100px);
+      transition: padding 0.1s ease-in-out;
+    }
+  }
   &--intro {
     padding-top: 2em;
     margin-bottom: 1.5em;
@@ -156,13 +157,14 @@ export default {
   &__content {
     padding: 1em 0;
     position: relative;
-    padding-right: 45px;
     .fixed-header & {
       padding: 0.5em 45px 0.5em 0;
     }
   }
   &__searchbar {
     margin-right: 2em;
+    width: 100%;
+    max-width: 610px;
     &.--extended {
       width: 100%;
       margin-right: 0;

diff --git a/frontend/components/commons/header/filters/FiltersList.vue b/frontend/components/commons/header/filters/FiltersList.vue
@@ -298,6 +298,7 @@ $number-size: 18px;
     }
     &__item {
       position: relative;
+      flex-shrink: 0;
     }
     &__sort {
       svg {
@@ -323,6 +324,7 @@ $number-size: 18px;
       color: $font-secondary;
       @include font-size(15px);
       font-family: $sff;
+      white-space: nowrap;
       &:hover {
         background: palette(grey, smooth);
       }

diff --git a/frontend/components/commons/header/filters/HeaderTitle.vue b/frontend/components/commons/header/filters/HeaderTitle.vue
@@ -18,7 +18,10 @@
 <template>
   <div class="container">
     <h2 class="title">
-      {{ title }} records ({{ dataset.results.total | formatNumber }})
+      Records
+      <template v-if="filtersApplied.length">with filters applied</template> ({{
+        dataset.results.total | formatNumber
+      }})
     </h2>
   </div>
 </template>
@@ -35,6 +38,13 @@ export default {
       required: true,
     },
   },
+  computed: {
+    filtersApplied() {
+      return Object.values(this.dataset.query).filter(
+        (v) => v && Object.values(v).length
+      );
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

diff --git a/frontend/components/commons/header/filters/SearchBar.vue b/frontend/components/commons/header/filters/SearchBar.vue
@@ -17,7 +17,6 @@
 
 <template>
   <form
-    :class="{ '--extended': expandSearchbar }"
     @submit.prevent="submit(query)"
   >
     <div :class="['searchbar__container', { active: query }]">
@@ -103,14 +102,12 @@ export default {
   margin-left: auto;
   pointer-events: all;
   border-radius: 5px;
+  min-width: 100%;
   &__container {
     position: relative;
-    max-width: 280px;
     margin-right: auto;
     margin-left: 0;
-    .--extended & {
-      min-width: 100%;
-    }
+    min-width: 100%;
   }
   &__button {
     cursor: pointer;
@@ -130,8 +127,5 @@ export default {
   &:hover {
     box-shadow: 0px 3px 8px 3px rgba(222, 222, 222, 0.4);
   }
-  .--extended & {
-    min-width: 100%;
-  }
 }
 </style>
diff --git a/frontend/components/text-classifier/header/TextClassificationHeader.vue b/frontend/components/text-classifier/header/TextClassificationHeader.vue
@@ -24,7 +24,6 @@
     />
     <filters-area
       v-if="!dataset.viewSettings.visibleRulesList"
-      :expand-searchbar="viewMode === 'labelling-rules'"
       :dataset="dataset"
     />
     <explain-help-info v-if="isExplainedRecord" :dataset="dataset" />

diff --git a/frontend/components/text-classifier/labeling-rules/RuleDefinition.vue b/frontend/components/text-classifier/labeling-rules/RuleDefinition.vue
@@ -30,7 +30,10 @@
       </div>
     </div>
     <p class="rule__records" v-if="dataset.results.total > 0">
-      Records ({{ dataset.results.total | formatNumber }})
+      Records
+      <template v-if="filtersApplied.length">with filters applied</template> ({{
+        dataset.results.total | formatNumber
+      }})
     </p>
   </div>
 </template>
@@ -92,6 +95,11 @@ export default {
     rulesMetrics() {
       return this.dataset.labelingRulesMetrics;
     },
+    filtersApplied() {
+      return Object.values(this.dataset.query).filter(
+        (v) => v && Object.values(v).length
+      );
+    },
   },
   methods: {
     async updateCurrentRule({ query, label }) {

diff --git a/frontend/components/text-classifier/labeling-rules/RuleEmptyQuery.vue b/frontend/components/text-classifier/labeling-rules/RuleEmptyQuery.vue
@@ -43,7 +43,7 @@
         >.
       </p>
     </div>
-    <div class="empty-query">
+    <div v-if="labels.length" class="empty-query">
       <p><strong>Introduce a query</strong> to define a rule.</p>
     </div>
   </div>

diff --git a/frontend/components/text-classifier/labeling-rules/RuleLabelsDefinition.vue b/frontend/components/text-classifier/labeling-rules/RuleLabelsDefinition.vue
@@ -21,11 +21,7 @@
       <p class="rule__description">{{ query }}</p>
       <p class="rule__records">
         Records:
-        <strong>{{
-          isNaN(currentRuleMetrics.records)
-            ? "-"
-            : $options.filters.formatNumber(currentRuleMetrics.records)
-        }}</strong>
+        <strong>{{ coveredRecords }}</strong>
       </p>
     </div>
     <div class="rule__labels" v-if="labels.length">
@@ -135,7 +131,11 @@ export default {
         return "This query with this label are already saved as rule";
       }
     },
-
+    coveredRecords() {
+      return isNaN(this.currentRuleMetrics.records)
+        ? "-"
+        : this.$options.filters.formatNumber(this.currentRuleMetrics.records);
+    },
     maxVisibleLabels() {
       return DatasetViewSettings.MAX_VISIBLE_LABELS;
     },