feat(#1379): show prediction score in NER (#1389)

(cherry picked from commit 3f7eec2) - fix: remove wrong annotations from Token Classifier in explore view (#1451) (cherry picked from commit 49a08c3)
argilla-io · May 10, 2022 · 0bdccd2 · 0bdccd2
1 parent 5b7b893
commit 0bdccd2
Show file tree

Hide file tree

Showing 12 changed files with 267 additions and 383 deletions.
diff --git a/frontend/components/commons/header/filters/FilterScore.vue b/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;
+      }
     }
   }
 }

diff --git a/frontend/components/core/ReRange.vue b/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;
   }
 }