fix(UI) Metrics value by default if no metric (#875)

* fix(UI) Metrics value by default if no metric

fix #872

* precision and correct metric default value

* update metrics when removing label

* chore: format method

* lint fix

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

frontend/components/text-classifier/labeling-rules/RuleDefinition.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="rule__area">
       <div :class="[query ? 'active' : null, 'rule__container']">
-        <rule-empty-query :dataset="dataset" v-if="!query"/>
+        <rule-empty-query :dataset="dataset" v-if="!query" />
         <rule-labels-definition
           v-else
           :current-rule="currentRule"
@@ -11,7 +11,10 @@
           @update-labels="updateLabels"
         >
           <template v-if="recordsMetric" #records-metric>
-            Records <strong>{{ recordsMetric.value | formatNumber }}</strong>
+            Records
+            <strong>
+              {{ recordsMetric.value }}
+            </strong>
           </template>
         </rule-labels-definition>
       </div>
@@ -70,11 +73,7 @@ export default {
       return this.dataset.query.text;
     },
     activeLabel() {
-      return this.selectedLabels.length
-        ? this.selectedLabels[0]
-        : this.currentRule
-        ? this.currentRule.label
-        : undefined;
+      return this.selectedLabels.length ? this.selectedLabels[0] : undefined;
     },
   },
   watch: {

frontend/components/text-classifier/labeling-rules/RuleLabelsDefinition.vue

@@ -78,7 +78,9 @@
       "
     >
       {{
-        saved ? "The rule has been saved" : "This query with this label are already saved as rule"
+        saved
+          ? "The rule has been saved"
+          : "This query with this label are already saved as rule"
       }}.
     </p>
     <re-button
@@ -162,14 +164,15 @@ export default {
       this.setDescription();
       if (n) {
         this.selectedLabels = [n.label];
+        this.$emit("update-labels", [n.label]);
       }
     },
     query(n) {
       this.setDescription();
       this.saved = false;
       if (!n) {
         this.selectedLabels = [];
-        this.$emit("update-label", undefined);
+        this.$emit("update-labels", undefined);
       }
     },
   },

frontend/components/text-classifier/labeling-rules/RulesMetrics.vue

@@ -31,25 +31,15 @@
           </p>
           <p class="metric__rule" v-if="metricsType !== 'overall'">
             <transition name="fade" mode="out-in" appear>
-              <strong
-                :key="metric.rule.value"
-                v-if="metric.rule.type === 'percent'"
-                >{{ metric.rule.value | percent }}</strong
-              >
-              <strong :key="metric.rule.value" v-else>{{
-                metric.rule.value
-              }}</strong>
+              <strong :key="metric.rule.value">{{ metric.rule.value }}</strong>
             </transition>
           </p>
           <span class="metric__overall" v-if="metricsType !== 'rule'">
             <template v-if="metricsType === 'all'">{{
               metric.overall.description
             }}</template>
             <transition name="fade" mode="out-in" appear>
-              <span :key="metric.overall.value" v-if="metric.overall.type === 'percent'">
-                {{ metric.overall.value | percent }}
-              </span>
-              <span :key="metric.overall.value" v-else>
+              <span :key="metric.overall.value">
                 {{ metric.overall.value }}
               </span>
             </transition>
@@ -63,6 +53,7 @@
 
 <script>
 import { mapActions } from "vuex";
+
 export default {
   props: {
     title: {
@@ -91,14 +82,15 @@ export default {
     return {
       metricsByLabel: {},
       metricsByRules: {},
-      metricsTotal: undefined,
+      metricsTotal: {},
       refresh: 0,
     };
   },
   async fetch() {
     await this.getMetricsByLabel();
     if (this.rules.length) {
-      await Promise.all([this.getMetrics(), this.getMetricsByRules()]);
+      await this.getMetrics();
+      await this.getMetricsByRules();
     }
   },
   computed: {
@@ -117,13 +109,11 @@ export default {
           overall: {
             description: "Avg:",
             tooltip: "Average fraction of correct labels given by the rules",
-            value: this.getAverage("precision") || 0,
+            value: this.formatNumber(this.getAverage("precision")),
             refresh: this.refresh,
-            type: "percent",
           },
           rule: {
-            type: "percent",
-            value: this.metricsByLabel.precision || 0,
+            value: this.formatNumber(this.metricsByLabel.precision),
             tooltip: "Fraction of correct labels given by the rule",
           },
         },
@@ -133,10 +123,9 @@ export default {
             description: "Total:",
             tooltip:
               "Total number of records the rules labeled correctly/incorrectly (if annotations are available)",
-            value:
-              this.getTotal("correct") !== undefined
-                ? `${this.getTotal("correct")}/${this.getTotal("incorrect")}`
-                : "_/_",
+            value: Object.keys(this.metricsByRules).length
+              ? `${this.getTotal("correct")}/${this.getTotal("incorrect")}`
+              : "_/_",
             refresh: this.refresh,
           },
           rule: {
@@ -153,12 +142,10 @@ export default {
           overall: {
             description: "Total:",
             tooltip: "Fraction of records labeled by any rule",
-            value: this.metricsTotal ? this.metricsTotal.coverage : 0,
-            type: "percent",
+            value: this.formatNumber(this.metricsTotal.coverage),
           },
           rule: {
-            type: "percent",
-            value: this.metricsByLabel.coverage || 0,
+            value: this.formatNumber(this.metricsByLabel.coverage),
             tooltip: "Fraction of records labeled by the rule",
           },
         },
@@ -167,12 +154,10 @@ export default {
           overall: {
             description: "Total:",
             tooltip: "Fraction of annotated records labeled by any rule",
-            value: this.metricsTotal ? this.metricsTotal.coverage_annotated : 0,
-            type: "percent",
+            value: this.formatNumber(this.metricsTotal.coverage_annotated),
           },
           rule: {
-            type: "percent",
-            value: this.metricsByLabel.coverage_annotated || 0,
+            value: this.formatNumber(this.metricsByLabel.coverage_annotated),
             tooltip: "Fraction of annotated records labeled by the rule",
           },
         },
@@ -181,10 +166,13 @@ export default {
     recordsMetric() {
       return {
         name: "Records",
-        value:
-          Math.round(
-            this.metricsByLabel.total_records * this.metricsByLabel.coverage
-          ) || 0,
+        value: isNaN(this.metricsByLabel.total_records)
+          ? "-"
+          : this.$options.filters.formatNumber(
+              Math.round(
+                this.metricsByLabel.total_records * this.metricsByLabel.coverage
+              )
+            ),
         tooltip: "Records matching the query",
       };
     },
@@ -197,7 +185,9 @@ export default {
     },
     async rules(n, o) {
       if (n !== o) {
-        await this.getMetricsByRules();
+        if (this.rules.length) {
+          await Promise.all([this.getMetrics(), this.getMetricsByRules()]);
+        }
         this.refresh++;
       }
     },
@@ -211,6 +201,11 @@ export default {
       getRuleMetricsByLabel:
         "entities/text_classification/getRuleMetricsByLabel",
     }),
+
+    formatNumber(value) {
+      return isNaN(value) ? "-" : this.$options.filters.percent(value);
+    },
+
     async getMetrics() {
       this.metricsTotal = await this.getRulesMetrics({
         dataset: this.dataset,