fix(UI) Metrics value by default if no metric

fix #872
argilla-io · Jan 4, 2022 · 6c4833b · 6c4833b
1 parent d6a32dc
commit 6c4833b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 34 deletions.
diff --git a/frontend/components/text-classifier/labeling-rules/RuleDefinition.vue b/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>

diff --git a/frontend/components/text-classifier/labeling-rules/RuleLabelsDefinition.vue b/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

diff --git a/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue b/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>
@@ -91,14 +81,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 +108,15 @@ export default {
           overall: {
             description: "Avg:",
             tooltip: "Average fraction of correct labels given by the rules",
-            value: this.getAverage("precision") || 0,
+            value: this.$options.filters.percent(
+              this.getAverage("precision") || 0
+            ),
             refresh: this.refresh,
-            type: "percent",
           },
           rule: {
-            type: "percent",
-            value: this.metricsByLabel.precision || 0,
+            value: this.$options.filters.percent(
+              this.metricsByLabel.precision || 0
+            ),
             tooltip: "Fraction of correct labels given by the rule",
           },
         },
@@ -153,12 +146,14 @@ export default {
           overall: {
             description: "Total:",
             tooltip: "Fraction of records labeled by any rule",
-            value: this.metricsTotal ? this.metricsTotal.coverage : 0,
-            type: "percent",
+            value: isNaN(this.metricsTotal.coverage)
+              ? "-"
+              : this.$options.filters.percent(this.metricsTotal.coverage),
           },
           rule: {
-            type: "percent",
-            value: this.metricsByLabel.coverage || 0,
+            value: isNaN(this.metricsByLabel.coverage)
+              ? "-"
+              : this.$options.filters.percent(this.metricsByLabel.coverage),
             tooltip: "Fraction of records labeled by the rule",
           },
         },
@@ -167,12 +162,18 @@ 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: isNaN(this.metricsTotal.coverage_annotated)
+              ? "-"
+              : this.$options.filters.percent(
+                  this.metricsTotal.coverage_annotated
+                ),
           },
           rule: {
-            type: "percent",
-            value: this.metricsByLabel.coverage_annotated || 0,
+            value: isNaN(this.metricsByLabel.coverage_annotated)
+              ? "-"
+              : this.$options.filters.percent(
+                  this.metricsByLabel.coverage_annotated
+                ),
             tooltip: "Fraction of annotated records labeled by the rule",
           },
         },
@@ -181,10 +182,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 +201,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++;
       }
     },