From 093f78bdfa81f88a8910c1517d8924905a4d9b45 Mon Sep 17 00:00:00 2001
From: Francisco Aranda <francisco@recogn.ai>
Date: Wed, 16 Mar 2022 13:29:05 +0100
Subject: [PATCH] fix(#1211): fix score scale (#1261)

Using the fixed range [0-1] for score filter visualization.

Closes #1211
---
 .../commons/header/filters/FilterScore.vue         | 14 ++++++++++----
 frontend/components/core/ReRange.vue               |  2 +-
 .../text-classifier/results/RecordExplain.vue      |  2 +-
 .../text-classifier/results/RecordInputs.vue       |  4 ++--
 .../text-classifier/results/RecordString.vue       |  4 ++--
 .../text2text/results/RecordStringText2Text.vue    |  4 ++--
 .../token-classifier/results/EntityHighlight.vue   |  2 +-
 7 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/frontend/components/commons/header/filters/FilterScore.vue b/frontend/components/commons/header/filters/FilterScore.vue
index fad3df31f3..bb60b93ae9 100644
--- a/frontend/components/commons/header/filters/FilterScore.vue
+++ b/frontend/components/commons/header/filters/FilterScore.vue
@@ -115,6 +115,7 @@ export default {
         color: "#D9D7E4",
         binSpacing: 0,
       },
+
       bar: {
         binSpacing: 0,
         discreteBandSize: 0,
@@ -129,7 +130,12 @@ export default {
       },
     },
     encoding: {
-      x: { field: "key", type: "ordinal", scale: { rangeStep: null } },
+      x: {
+        scale: { zero: true },
+        bin: { maxbins: 100, extent: [0.0, 1.0] },
+        field: "key",
+        type: "quantitative",
+      },
       y: { field: "count", type: "quantitative", aggregate: "sum" },
     },
   }),
@@ -137,7 +143,7 @@ export default {
     options() {
       let test = Object.keys(this.filter.options).map((key) => {
         return {
-          key: key,
+          key: Number(key),
           count: this.filter.options[key],
         };
       });
@@ -228,8 +234,8 @@ export default {
     text-align: center;
   }
   .range__container {
-    margin-top: -8px;
-    padding: 0 0.5em;
+    margin-top: 2px;
+    padding: 0;
   }
   .range {
     @include font-size(14px);
diff --git a/frontend/components/core/ReRange.vue b/frontend/components/core/ReRange.vue
index beaddb0ac9..e7d3a49220 100644
--- a/frontend/components/core/ReRange.vue
+++ b/frontend/components/core/ReRange.vue
@@ -1160,7 +1160,7 @@ export default {
   -webkit-user-select: none;
   -moz-user-select: none;
   -o-user-select: none;
-  padding: 0;
+  padding: 0 !important;
   &.vue-slider-disabled {
     .vue-slider-dot {
       background: $line-light-color;
diff --git a/frontend/components/text-classifier/results/RecordExplain.vue b/frontend/components/text-classifier/results/RecordExplain.vue
index 9eb47d7121..a1a8609491 100644
--- a/frontend/components/text-classifier/results/RecordExplain.vue
+++ b/frontend/components/text-classifier/results/RecordExplain.vue
@@ -39,7 +39,7 @@ export default {
     },
     explain: {
       type: Array,
-    }
+    },
   },
   computed: {
     predicted() {
diff --git a/frontend/components/text-classifier/results/RecordInputs.vue b/frontend/components/text-classifier/results/RecordInputs.vue
index a0a162fb79..271bb10892 100644
--- a/frontend/components/text-classifier/results/RecordInputs.vue
+++ b/frontend/components/text-classifier/results/RecordInputs.vue
@@ -48,8 +48,8 @@ export default {
   props: {
     record: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   data: () => ({
     showFullRecord: false,
diff --git a/frontend/components/text-classifier/results/RecordString.vue b/frontend/components/text-classifier/results/RecordString.vue
index e1ef1473b5..3014a61583 100644
--- a/frontend/components/text-classifier/results/RecordString.vue
+++ b/frontend/components/text-classifier/results/RecordString.vue
@@ -50,8 +50,8 @@ export default {
   },
   computed: {
     keywords() {
-      return this.record.search_keywords
-    }
+      return this.record.search_keywords;
+    },
   },
   methods: {
     isList(record) {
diff --git a/frontend/components/text2text/results/RecordStringText2Text.vue b/frontend/components/text2text/results/RecordStringText2Text.vue
index 7c14e7e522..5d5a1842f7 100644
--- a/frontend/components/text2text/results/RecordStringText2Text.vue
+++ b/frontend/components/text2text/results/RecordStringText2Text.vue
@@ -36,8 +36,8 @@ export default {
   props: {
     record: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   data: () => ({
     showFullRecord: false,
diff --git a/frontend/components/token-classifier/results/EntityHighlight.vue b/frontend/components/token-classifier/results/EntityHighlight.vue
index e911582311..2bcde5592c 100755
--- a/frontend/components/token-classifier/results/EntityHighlight.vue
+++ b/frontend/components/token-classifier/results/EntityHighlight.vue
@@ -68,7 +68,7 @@ export default {
     record: {
       type: Object,
       required: true,
-    }
+    },
   },
   data: () => {
     return {