feat(#1061): unify records results title (#1111)

This PR includes show records results title on top of records list in Explore and Annotation Mode and unify styles Closes #1061 * results record title margin * make global component * fix lint * show filtered records only for rules * add text2text records title * ResultsTitle * fix lint * ResultsTitle test * ResultsTitle snap * ResultsList component * ResultsTitle component * fix: rename component file Co-authored-by: Francisco Aranda <francisco@recogn.ai> (cherry picked from commit dc49805)
argilla-io · Feb 10, 2022 · 54ebb15 · 54ebb15
1 parent 58ea754
commit 54ebb15
Show file tree

Hide file tree

Showing 13 changed files with 102 additions and 98 deletions.
diff --git a/frontend/components/commons/header/filters/HeaderTitle.vue b/frontend/components/commons/header/filters/HeaderTitle.vue
diff --git a/frontend/components/commons/header/global-actions/GlobalActions.vue b/frontend/components/commons/header/global-actions/GlobalActions.vue
@@ -67,7 +67,6 @@ export default {
   background: $lighter-color;
   border-radius: 1px;
   position: relative;
-  margin-bottom: 10px;
   &--exploration {
     position: relative;
   }

diff --git a/frontend/components/commons/results/ResultsList.vue b/frontend/components/commons/results/ResultsList.vue
@@ -223,6 +223,7 @@ export default {
   }
 }
 </style>
+
 <style lang="scss">
 .vue-recycle-scroller__item-wrapper {
   box-sizing: content-box;

diff --git a/frontend/components/commons/results/ResultsTitle.vue b/frontend/components/commons/results/ResultsTitle.vue
@@ -0,0 +1,45 @@
+<template>
+  <p class="records-title" v-if="dataset.results.total > 0">
+    Records
+    <span v-if="showWhenFiltered && areFiltersApplied.length"
+      >with filters applied</span
+    >
+    ({{ dataset.results.total | formatNumber }})
+  </p>
+</template>
+
+<script>
+export default {
+  props: {
+    dataset: {
+      type: Object,
+      required: true,
+    },
+    showWhenFiltered: {
+      type: Boolean,
+      required: false,
+    },
+    excludedFilter: {
+      type: Array,
+      default: () => {
+        return ["text"];
+      },
+    },
+  },
+  computed: {
+    areFiltersApplied() {
+      const appliedFilters = Object.keys(this.dataset.query)
+        .filter((f) => !this.excludedFilter.includes(f))
+        .map((key) => this.dataset.query[key]);
+      return appliedFilters.filter((v) => v && Object.values(v).length);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.records-title {
+  color: $font-secondary;
+}
+</style>
diff --git a/frontend/components/text-classifier/header/TextClassificationHeader.vue b/frontend/components/text-classifier/header/TextClassificationHeader.vue
@@ -17,11 +17,6 @@
 
 <template>
   <div class="header__filters">
-    <header-title
-      v-if="dataset.results.records && viewMode !== 'labelling-rules'"
-      title="Text Classification"
-      :dataset="dataset"
-    />
     <filters-area
       v-if="!dataset.viewSettings.visibleRulesList"
       :dataset="dataset"

diff --git a/frontend/components/text-classifier/labeling-rules/RuleDefinition.vue b/frontend/components/text-classifier/labeling-rules/RuleDefinition.vue
@@ -29,12 +29,6 @@
         </rules-metrics>
       </div>
     </div>
-    <p class="rule__records" v-if="dataset.results.total > 0">
-      Records
-      <template v-if="filtersApplied.length">with filters applied</template> ({{
-        dataset.results.total | formatNumber
-      }})
-    </p>
   </div>
 </template>
 <script>
@@ -95,11 +89,6 @@ 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 }) {
@@ -145,9 +134,6 @@ export default {
       box-shadow: 0 1px 4px 0 rgba(185, 185, 185, 0.5);
     }
   }
-  &__records {
-    color: $font-secondary;
-  }
   &__button {
     float: left;
     align-self: flex-start;

diff --git a/frontend/components/text-classifier/results/TextClassificationResultsList.vue b/frontend/components/text-classifier/results/TextClassificationResultsList.vue
@@ -24,6 +24,7 @@
   >
     <template slot="results-header">
       <rule-definition :dataset="dataset" v-if="showRulesArea" />
+      <results-title :dataset="dataset" :show-when-filtered="showRulesArea" />
     </template>
     <template slot="record" slot-scope="results">
       <record-text-classification

diff --git a/frontend/components/text2text/header/Text2TextHeader.vue b/frontend/components/text2text/header/Text2TextHeader.vue
@@ -17,11 +17,6 @@
 
 <template>
   <div class="header__filters">
-    <header-title
-      v-if="dataset.results.records"
-      title="Text2Text"
-      :dataset="dataset"
-    />
     <filters-area :dataset="dataset" />
     <global-actions :dataset="dataset">
       <validate-discard-action

diff --git a/frontend/components/text2text/results/Text2TextResultsList.vue b/frontend/components/text2text/results/Text2TextResultsList.vue
@@ -21,6 +21,9 @@
     :metadata-item="selectedMetadataItem"
     @closeMetadata="resetMetadataItem"
   >
+    <template slot="results-header">
+      <results-title :dataset="dataset" />
+    </template>
     <template v-slot:record="{ record }">
       <RecordText2Text
         :dataset="dataset"

diff --git a/frontend/components/token-classifier/header/TokenClassificationHeader.vue b/frontend/components/token-classifier/header/TokenClassificationHeader.vue
@@ -17,11 +17,6 @@
 
 <template>
   <div class="header__filters">
-    <header-title
-      v-if="dataset.results.records"
-      title="Token Classification"
-      :dataset="dataset"
-    />
     <filters-area :dataset="dataset" />
     <entities-header :dataset="dataset" />
     <global-actions :dataset="dataset">

diff --git a/frontend/components/token-classifier/results/TokenClassificationResultsList.vue b/frontend/components/token-classifier/results/TokenClassificationResultsList.vue
@@ -21,6 +21,9 @@
     :metadata-item="selectedMetadataRecord"
     @onCloseMetadata="onCloseMetadata"
   >
+    <template slot="results-header">
+      <results-title :dataset="dataset" />
+    </template>
     <template slot="record" slot-scope="results">
       <record-token-classification
         :dataset="dataset"

diff --git a/frontend/specs/components/results/ResultsTitle.spec.js b/frontend/specs/components/results/ResultsTitle.spec.js
@@ -0,0 +1,40 @@
+import { mount } from "@vue/test-utils";
+import ResultsTitle from "@/components/commons/results/ResultsTitle";
+
+function mountResultsTitle() {
+  return mount(ResultsTitle, {
+    propsData: {
+      dataset: {
+        task: "TextClassification",
+        results: {
+          total: 400,
+        },
+        query: {
+          annotated_as: undefined,
+          annotated_by: undefined,
+          from: undefined,
+          limit: undefined,
+          metadata: {},
+          predicted: undefined,
+          predicted_as: ["Alta"],
+          predicted_by: undefined,
+          score: undefined,
+          status: undefined,
+          text: "de",
+        },
+      },
+      showWhenFiltered: true,
+      excludedFilter: ["text"],
+    },
+  });
+}
+
+describe("ResultsTitle", () => {
+  let spy = jest.spyOn(console, "error");
+  afterEach(() => spy.mockReset());
+
+  test("renders properly", () => {
+    const wrapper = mountResultsTitle();
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/frontend/specs/components/results/__snapshots__/ResultsTitle.spec.js.snap b/frontend/specs/components/results/__snapshots__/ResultsTitle.spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResultsTitle renders properly 1`] = `
+<p class="records-title">
+  Records
+  <span>with filters applied</span>
+  (400)
+</p>
+`;