feat(#951): Filter uncovered records (#1156)

This PR allows filtering of records by uncovered by rules

* perf: initialize text classification with load rules definition

* chore: remove fetch rules from common filters

* persist uncovered_by_rules filter

* condition and selected filter state

* allow remove from "remove all filters"

* test FilterUncoveredByRules

* uncovered filter display condition

* checkbox label copy

* update snapshot

Co-authored-by: Francisco Aranda <francisco@recogn.ai>

frontend/components/commons/header/filters/FilterUncoveredByRules.vue

@@ -0,0 +1,40 @@
+<template>
+  <ReCheckbox
+    @change="changeUncoveredByRules"
+    class="re-checkbox--dark"
+    :value="filter.selected"
+  >
+    Only records not covered by rules
+  </ReCheckbox>
+</template>
+
+<script>
+import { TextClassificationDataset } from "@/models/TextClassification";
+export default {
+  props: {
+    dataset: {
+      type: TextClassificationDataset,
+      required: true,
+    },
+    filter: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    async changeUncoveredByRules() {
+      const rulesId = this.dataset.rules.map((r) => r.query);
+      this.$emit("apply", this.filter, !this.filter.selected ? rulesId : []);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.re-checkbox {
+  flex-direction: row-reverse;
+  ::v-deep .checkbox-label {
+    margin-left: 1em;
+  }
+}
+</style>

frontend/components/commons/header/filters/FiltersList.vue

@@ -59,6 +59,13 @@
               :filter="filter"
               @apply="onApply"
             />
+            <FilterUncoveredByRules
+              v-else-if="showUncoveredByRulesFilter"
+              class="filter"
+              :filter="filter"
+              :dataset="dataset"
+              @apply="onApply"
+            />
           </span>
           <a
             v-if="
@@ -167,6 +174,14 @@ export default {
     isMultiLabel() {
       return this.dataset.isMultiLabel;
     },
+    showUncoveredByRulesFilter() {
+      return (
+        this.dataset.rules &&
+        this.dataset.rules.length &&
+        !this.dataset.isMultiLabel &&
+        this.dataset.task === "TextClassification"
+      );
+    },
     filterList() {
       const aggregations = this.dataset.results.aggregations;
       const filters = this.filters
@@ -210,7 +225,16 @@ export default {
             a.key.toLowerCase() > b.key.toLowerCase() ? 1 : -1
           )) ||
         [];
-      return [...filters, ...sortedMetadataFilters];
+      const uncoveredByRules = {
+        id: "uncovered_by_rules",
+        key: "uncovered_by_rules",
+        group: "Annotations",
+        options: [true, false],
+        selected:
+          this.dataset.query.uncovered_by_rules &&
+          this.dataset.query.uncovered_by_rules.length > 0,
+      };
+      return [...filters, ...sortedMetadataFilters, uncoveredByRules];
     },
   },
   methods: {
@@ -337,7 +361,6 @@ $number-size: 18px;
 }
 
 .filter {
-  display: block;
   margin-bottom: 1em;
 }
 </style>

frontend/models/TextClassification.js

@@ -48,9 +48,10 @@ class TextClassificationSearchQuery extends BaseSearchQuery {
   score;
 
   constructor(data) {
-    const { score, confidence, ...superData } = data;
+    const { score, confidence, uncovered_by_rules, ...superData } = data;
     super(superData);
     this.score = score;
+    this.uncovered_by_rules = uncovered_by_rules;
     // TODO: remove backward compatibility
     if (confidence) {
       this.score = confidence;
@@ -114,6 +115,9 @@ class TextClassificationDataset extends ObservationDataset {
         },
       ],
     });
+    if (!this.labelingRules) {
+      await this.refreshRules();
+    }
     return entity.find(this.id);
   }
 

frontend/specs/components/filters/FilterUncoveredByRules.spec.js

@@ -0,0 +1,26 @@
+import { mount } from "@vue/test-utils";
+import FilterUncoveredByRules from "@/components/commons/header/filters/FilterUncoveredByRules";
+
+function mountFilterUncoveredByRules() {
+  return mount(FilterUncoveredByRules, {
+    propsData: {
+      dataset: {
+        task: "TextClassification",
+        rules: ["alta", "baja"],
+      },
+      filter: {
+        selected: true,
+      },
+    },
+  });
+}
+
+describe("FilterUncoveredByRules", () => {
+  let spy = jest.spyOn(console, "error");
+  afterEach(() => spy.mockReset());
+
+  test("renders properly", () => {
+    const wrapper = mountFilterUncoveredByRules();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

frontend/specs/components/filters/__snapshots__/FilterUncoveredByRules.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilterUncoveredByRules renders properly 1`] = `
+<recheckbox value="true" class="re-checkbox--dark">
+  Only records not covered by rules
+</recheckbox>
+`;