feat(#1379): show prediction score in NER

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

@@ -26,60 +26,64 @@
       height="14"
       @click="onRemovescoreRange()"
     />
-    <p class="filter__label">{{ filter.name }}:</p>
-    <div
-      class="filter__item filter__item--score"
-      :class="{
-        'filter__item--open': scoreExpanded,
-        highlighted: filter.selected,
-      }"
-      @click="expandScore"
-    >
-      <div class="score-content">
-        <vega-lite
-          class="score"
-          :data="options"
-          :autosize="autosize"
-          :config="config"
-          :mark="mark"
-          :encoding="encoding"
-        />
-      </div>
-    </div>
-    <div
-      v-if="scoreExpanded"
-      v-click-outside="onClose"
-      class="filter__item filter__item--score"
-      :class="{ expanded: scoreExpanded }"
-    >
-      <div class="score-content">
-        <p class="range__panel">{{ min }}% to {{ max }}%</p>
-        <vega-lite
-          class="score"
-          :data="options"
-          :autosize="autosize"
-          :config="config"
-          :mark="mark"
-          :encoding="encoding"
-        />
-        <div class="range__container">
-          <ReRange
-            v-if="scoreExpanded"
-            ref="slider"
-            v-bind="rangeOptions"
-            v-model="scoreRanges"
-          ></ReRange>
+    <div class="filter__row__content">
+      <p class="filter__label">{{ filter.name }}:</p>
+      <div
+        class="filter__item filter__item--score"
+        :class="{
+          'filter__item--open': scoreExpanded,
+          highlighted: filter.selected,
+        }"
+        @click="expandScore"
+      >
+        <div class="score-content">
+          <vega-lite
+            class="score"
+            :data="options"
+            :autosize="autosize"
+            :config="config"
+            :mark="mark"
+            :encoding="encoding"
+          />
         </div>
       </div>
-      <div class="filter__buttons">
-        <ReButton
-          class="button-tertiary--small button-tertiary--outline"
-          @click="onClose()"
-          >Cancel</ReButton
-        >
-        <ReButton class="button-primary--small" @click="onApplyscoreRange"
-          >Apply</ReButton
-        >
+      <div
+        v-if="scoreExpanded"
+        v-click-outside="onClose"
+        class="filter__item filter__item--score"
+        :class="{ expanded: scoreExpanded }"
+      >
+        <div class="score-content">
+          <p class="range__panel">
+            {{ min | percent(0, 2) }} to {{ max | percent(0, 2) }}
+          </p>
+          <vega-lite
+            class="score"
+            :data="options"
+            :autosize="autosize"
+            :config="config"
+            :mark="mark"
+            :encoding="encoding"
+          />
+          <div class="range__container">
+            <ReRange
+              v-if="scoreExpanded"
+              ref="slider"
+              v-bind="rangeOptions"
+              v-model="scoreRanges"
+            ></ReRange>
+          </div>
+        </div>
+        <div class="filter__buttons">
+          <ReButton
+            class="button-tertiary--small button-tertiary--outline"
+            @click="onClose()"
+            >Cancel</ReButton
+          >
+          <ReButton class="button-primary--small" @click="onApplyscoreRange"
+            >Apply</ReButton
+          >
+        </div>
       </div>
     </div>
   </div>
@@ -112,7 +116,7 @@ export default {
     mark: "area",
     config: {
       mark: {
-        color: "#D9D7E4",
+        color: "#0508d9",
         binSpacing: 0,
       },
 
@@ -153,10 +157,10 @@ export default {
       return this.scoreExpanded;
     },
     min() {
-      return this.scoreRanges[0];
+      return this.scoreRanges[0] * 0.01;
     },
     max() {
-      return this.scoreRanges[1];
+      return this.scoreRanges[1] * 0.01;
     },
   },
   beforeMount() {
@@ -174,8 +178,8 @@ export default {
     },
     onApplyscoreRange() {
       this.$emit("apply", this.filter, {
-        from: this.min * 0.01,
-        to: this.max * 0.01,
+        from: this.min,
+        to: this.max,
       });
       this.scoreExpanded = false;
     },
@@ -197,15 +201,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 +224,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 +234,6 @@ export default {
   }
   .score-content {
     width: 100%;
-    padding-right: 0.8em;
-    padding-left: 0.8em;
     text-align: center;
   }
   .range__container {
@@ -258,20 +261,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,13 +312,24 @@ export default {
     margin-right: 1em;
     cursor: pointer;
   }
+  &__item {
+    &--open {
+      background: $bg;
+      border-color: $bg !important;
+    }
+  }
   &__row {
     display: flex;
     align-items: center;
-    .filter__item--score:not(.expanded) {
-      margin-right: 0;
-      margin-left: auto;
-      width: 270px;
+    &__content {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      .filter__item--score:not(.expanded) {
+        margin-left: auto;
+        width: 270px;
+      }
     }
   }
 }

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/RecordTokenClassificationAnnotation.vue

@@ -20,7 +20,6 @@
     <div class="origins">
       <text-spans-static
         v-if="record.prediction"
-        v-once
         key="prediction"
         origin="prediction"
         class="prediction"

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

@@ -19,7 +19,6 @@
   <div class="origins">
     <text-spans-static
       v-if="record.prediction"
-      v-once
       key="prediction"
       origin="prediction"
       class="prediction"

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

@@ -223,6 +223,9 @@ $hue: 360;
       padding-bottom: 3px;
       border-bottom: 5px solid $rcolor;
     }
+    & ::v-deep .highlight__tooltip {
+      background: $rcolor;
+    }
     &.annotation ::v-deep .highlight__tooltip:after {
       border-color: $rcolor transparent transparent transparent;
     }
@@ -248,8 +251,5 @@ $hue: 360;
       border: 2px solid mix(black, $rcolor, 20%);
     }
   }
-  .color_#{$i - 1} ::v-deep .highlight__tooltip {
-    background: $rcolor;
-  }
 }
 </style>

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

@@ -19,7 +19,10 @@
   <span class="span__text">
     <EntityHighlight
       v-if="token.entity"
-      :class="['color_' + (tag_color % this.$entitiesMaxColors)]"
+      :class="[
+        'color_' + (tag_color % this.$entitiesMaxColors),
+        matchQueryClass,
+      ]"
       :span="token"
       :dataset="dataset"
       :record="record"
@@ -50,6 +53,17 @@ export default {
         (entity) => entity.text === this.token.entity.label
       )[0].colorId;
     },
+    queryScore() {
+      return this.dataset.query.score;
+    },
+    matchQueryClass() {
+      if (this.queryScore) {
+        const score = this.token.entity.score;
+        return score >= this.queryScore.from && score <= this.queryScore.to
+          ? undefined
+          : "excluded";
+      }
+    },
   },
 };
 </script>
@@ -170,13 +184,29 @@ $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;
     }
     &.prediction ::v-deep .highlight__tooltip:after {
       border-color: transparent transparent $rcolor transparent;
     }
+    &.excluded ::v-deep {
+      .highlight__content {
+        &:after {
+          content: none;
+        }
+      }
+    }
     &.active,
     &.tag:hover {
       border: 2px solid darken($rcolor, 50%);

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;