feat(#1379): show prediction score in NER

closes #1379
This PR includes score in prediction tooltip, improves score filter styles and prediction highlighting in text

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

@@ -112,7 +112,7 @@ export default {
     mark: "area",
     config: {
       mark: {
-        color: "#D9D7E4",
+        color: "#0508d9",
         binSpacing: 0,
       },
 
@@ -197,15 +197,16 @@ export default {
   background: $lighter-color;
   width: auto;
   height: 45px;
-  border: 1px solid $line-smooth-color;
   align-items: center;
   padding: 0 1em;
   transition: all 0.2s ease;
   border-radius: $border-radius;
-  &:hover,
-  &:focus {
+  &:not(.expanded) {
+    border: 1px solid $line-smooth-color;
+  }
+  &:not(.expanded):hover,
+  &:not(.expanded):focus {
     border: 1px solid $primary-color;
-    background: $lighter-color;
     transition: border 0.2s ease, background 0.2s ease;
   }
   &:after {
@@ -219,7 +220,7 @@ export default {
     transform: translateY(-50%) rotate(133deg);
     transition: all 1.5s ease;
     position: absolute;
-    right: 2.1em;
+    right: 1.5em;
     top: 50%;
     pointer-events: none;
   }
@@ -229,8 +230,6 @@ export default {
   }
   .score-content {
     width: 100%;
-    padding-right: 0.8em;
-    padding-left: 0.8em;
     text-align: center;
   }
   .range__container {
@@ -258,20 +257,16 @@ export default {
   &.expanded {
     margin-top: 10px;
     position: absolute;
-    top: 0;
-    background: $lighter-color;
+    top: 40px;
+    right: 0;
+    background: $bg;
     padding: 20px 20px 10px 20px;
-    min-height: auto;
-    height: auto;
-    min-height: auto;
-    transition: height 0.1s ease-in-out;
+    width: 270px;
     overflow: visible;
     border-radius: $border-radius;
     z-index: 4;
-    width: 400px;
-    max-width: 100vw;
-    min-height: 210px;
-    border: 1px solid $primary-color;
+    box-shadow: $shadow;
+    min-height: 270px;
     pointer-events: all;
     &:after {
       content: none;
@@ -313,9 +308,16 @@ export default {
     margin-right: 1em;
     cursor: pointer;
   }
+  &__item {
+    &--open {
+      background: $bg;
+      border-color: $bg !important;
+    }
+  }
   &__row {
     display: flex;
     align-items: center;
+    position: relative;
     .filter__item--score:not(.expanded) {
       margin-right: 0;
       margin-left: auto;

frontend/components/core/ReRange.vue

@@ -1400,7 +1400,7 @@ export default {
 
 .vue-slider-process {
   .filter & {
-    background: $line-smooth-color;
+    background: $secondary-color;
     border-radius: 3px;
   }
 }

frontend/components/token-classifier/results/TextSpanStatic.vue

@@ -170,6 +170,15 @@ $hue: 360;
     &.prediction ::v-deep .highlight__content {
       padding-bottom: 3px;
       border-bottom: 5px solid $rcolor;
+      position: relative;
+      &:after {
+        content: "";
+        border-top: 1px solid darken($rcolor, 50%);
+        position: absolute;
+        top: 26px;
+        left: 0;
+        right: 0;
+      }
     }
     &.annotation ::v-deep .highlight__tooltip:after {
       border-color: $rcolor transparent transparent transparent;

frontend/components/token-classifier/results/TextSpanTooltip.vue

@@ -5,7 +5,14 @@
         <span class="highlight__tooltip__origin" v-if="span.origin">{{
           span.origin === "prediction" ? "pred." : "annot."
         }}</span>
-        <span>{{ span.entity.label }} </span>
+        <span
+          >{{ span.entity.label }}
+          <span
+            class="highlight__tooltip__score"
+            v-if="score && span.origin === 'prediction'"
+            >{{ score | percent(0, 0) }}</span
+          ></span
+        >
       </span>
     </span>
   </span>
@@ -19,6 +26,11 @@ export default {
       required: true,
     },
   },
+  computed: {
+    score() {
+      return this.span.entity.score;
+    },
+  },
 };
 </script>
 
@@ -45,7 +57,8 @@ export default {
       margin-top: 0.5em;
     }
     & > span {
-      display: block;
+      display: flex;
+      align-items: center;
     }
     &__container {
       position: absolute;
@@ -65,6 +78,11 @@ export default {
       @include font-size(12px);
       font-weight: normal;
     }
+    &__score {
+      @include font-size(14px);
+      font-weight: 400;
+      margin-left: 0.5em;
+    }
   }
   &__tooltip:after {
     margin: auto;

frontend/plugins/filters.js

@@ -12,11 +12,11 @@ Vue.filter("formatNumber", function (value) {
   return new Intl.NumberFormat(locale.length ? locale[0] : "en").format(value);
 });
 
-Vue.filter("percent", function (value) {
+Vue.filter("percent", function (value, min, max) {
   const formatter = new Intl.NumberFormat(locale.length ? locale[0] : "en", {
     style: "percent",
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 3,
+    minimumFractionDigits: min !== undefined ? min : 2,
+    maximumFractionDigits: max !== undefined ? max : 3,
   });
   return formatter.format(value);
 });

frontend/specs/components/token-classification/results/__snapshots__/TextSpanTooltip.spec.js.snap

@@ -1,3 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TextSpanTooltip renders properly 1`] = `<span class="highlight__label"><span class="highlight__tooltip__container"><span class="highlight__tooltip"><span class="highlight__tooltip__origin">annot.</span> <span>Arreglo </span></span></span></span>`;
+exports[`TextSpanTooltip renders properly 1`] = `
+<span class="highlight__label"><span class="highlight__tooltip__container"><span class="highlight__tooltip"><span class="highlight__tooltip__origin">annot.</span> <span>Arreglo
+        <!----></span></span></span></span>
+`;