feat(#821): token classifier show predictions in explore view (#1009)

* add toggle buttons

* fix typo

* toggle prediction/annotation

* show annotation and predictions in exploration

* get explore and annotate components

* entities new styles

* fix lint

* fix margin

* remove agent

* fix reset selected span

(cherry picked from commit aad8ad8)

frontend/components/commons/results/ResultsList.vue

@@ -227,11 +227,11 @@ export default {
 <style lang="scss">
 .vue-recycle-scroller__item-wrapper {
   box-sizing: content-box;
-   padding-bottom: 260px;
-   .fixed-header & {
+  padding-bottom: 260px;
+  .fixed-header & {
     padding-bottom: 260px;
-   }
- }
+  }
+}
 .vue-recycle-scroller__item-view {
   box-sizing: border-box;
 }

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

@@ -37,7 +37,7 @@
     </span>
     <ReButton
       v-if="dataset.entities.length > entitiesNumber"
-      class="entities__container__button button-clear"
+      class="entities__container__button"
       @click="toggleEntitiesNumber"
       >{{ showEntitySelector ? "Show less" : "Show all" }}</ReButton
     >
@@ -117,8 +117,12 @@ export default {
       padding: 0.5em;
       color: $secondary-color !important;
       transition: background 0.2s ease-in-out;
+      padding: 5px;
+      border-radius: 5px;
+      border: 0;
+      background: none;
       &:hover {
-        background: palette(grey, smooth);
+        background: palette(grey, smooth) !important;
         transition: background 0.2s ease-in-out;
       }
     }
@@ -138,6 +142,7 @@ export default {
   max-height: 28px;
   border: 2px solid transparent;
   transition: all 0.2s ease-in-out;
+  font-weight: 600;
   // &:not(.active):hover {
   //   filter: brightness(90%);
   // }
@@ -161,12 +166,7 @@ export default {
 $colors: 50;
 $hue: 360;
 @for $i from 1 through $colors {
-  $rcolor: hsla(
-    ($colors * $i) + ($hue * $i / $colors),
-    100% - $i / 2,
-    82% - ($colors % $i),
-    1
-  );
+  $rcolor: hsla(($colors * $i) + ($hue * $i / $colors), 100% - $i / 2, 80%, 1);
   .color_#{$i - 1} {
     background: $rcolor;
     &.active,

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

@@ -16,7 +16,9 @@
   -->
 
 <template>
-  <span :class="['highlight', isText ? '' : 'highlight--block']">
+  <span
+    :class="['highlight', span.entity.origin, isText ? '' : 'highlight--block']"
+  >
     <span
       class="highlight__content"
       @click="openTagSelector"
@@ -30,12 +32,15 @@
           annotationEnabled ? 'highlight__tooltip--icon' : '',
         ]"
       >
+        <span class="highlight__tooltip__origin" v-if="span.entity.origin">{{
+          span.entity.origin === "annotation" ? "annot." : "pred."
+        }}</span>
         <span
           >{{ span.entity.label }}
           <svgicon
             v-if="annotationEnabled"
-            width="12"
-            height="12"
+            width="8"
+            height="8"
             name="cross"
             @click="removeEntity"
           ></svgicon>
@@ -103,13 +108,17 @@ export default {
 </script>
 <style lang="scss" scoped>
 .highlight {
-  @include font-size(16px);
+  @include font-size(18px);
   line-height: 1em;
   position: relative;
   cursor: default;
-  display: inline;
+  // display: inline-flex;
   border-radius: 2px;
   padding: 0;
+  margin-right: -3.2px;
+  ::selection {
+    background: none;
+  }
   &--block {
     display: block;
     .highlight__content:after {
@@ -123,17 +132,17 @@ export default {
   &__label {
     @include font-size(0px);
   }
-  .highlight__content {
+  &__content {
     display: inline;
+    padding-bottom: 1px;
   }
-  .highlight__tooltip {
+  &__tooltip {
     display: block;
     position: absolute;
     border-radius: 2px;
-    padding: 4px 9px 5px 9px;
+    padding: 5px 10px 6px 10px;
     opacity: 0;
     z-index: -1;
-    bottom: 100%;
     margin-bottom: 0.5em;
     transition: opacity 0.5s ease, z-index 0.2s ease;
     white-space: nowrap;
@@ -142,24 +151,46 @@ export default {
     font-weight: 600;
     right: 50%;
     transform: translateX(50%);
-    @include font-size(12px);
+    min-width: 80px;
+    @include font-size(16px);
+    & > span {
+      display: block;
+    }
+    &__origin {
+      @include font-size(12px);
+      font-weight: normal;
+    }
+    .annotation & {
+      bottom: 100%;
+    }
+    .prediction & {
+      top: calc(100% + 15px);
+    }
     &--icon {
       padding-right: 20px;
       .svg-icon {
-        display: inline-block;
-        margin-left: 1em;
+        position: absolute;
+        top: 10px;
+        right: 10px;
         cursor: pointer;
       }
     }
   }
-  .highlight__tooltip:after {
+  &__tooltip:after {
     margin: auto;
-    transform: translateY(10px);
-    @include triangle(bottom, 6px, 6px, auto);
     position: absolute;
-    bottom: 5px;
     right: 0;
     left: 0;
+    .annotation & {
+      @include triangle(bottom, 6px, 6px, auto);
+      bottom: 5px;
+      transform: translateY(10px);
+    }
+    .prediction & {
+      @include triangle(top, 6px, 6px, auto);
+      top: -15px;
+      transform: translateY(10px);
+    }
   }
   &:hover .highlight__tooltip {
     opacity: 1;