show unmatched query entities with opacity

argilla-io · Apr 25, 2022 · 054f014 · 054f014
1 parent afa6bbc
commit 054f014
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 14 deletions.
diff --git a/frontend/components/token-classifier/results/RecordTokenClassificationAnnotation.vue b/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"

diff --git a/frontend/components/token-classifier/results/RecordTokenClassificationExploration.vue b/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"

diff --git a/frontend/components/token-classifier/results/TextSpan.vue b/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>
diff --git a/frontend/components/token-classifier/results/TextSpanStatic.vue b/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>
@@ -186,6 +200,23 @@ $hue: 360;
     &.prediction ::v-deep .highlight__tooltip:after {
       border-color: transparent transparent $rcolor transparent;
     }
+    &.excluded ::v-deep {
+      .highlight__content {
+        border-color: lighten($rcolor, 10%);
+        &:after {
+          border-color: $rcolor;
+        }
+      }
+      .highlight__tooltip {
+        background: lighten($rcolor, 10%);
+        &:after {
+          border-color: transparent
+            transparent
+            lighten($rcolor, 10%)
+            transparent;
+        }
+      }
+    }
     &.active,
     &.tag:hover {
       border: 2px solid darken($rcolor, 50%);

diff --git a/frontend/components/token-classifier/results/TextSpansStatic.vue b/frontend/components/token-classifier/results/TextSpansStatic.vue
@@ -17,14 +17,25 @@
 
 <template>
   <div v-if="textSpans.length" ref="list" class="content__input">
-    <text-span-static
-      v-once
-      v-for="(token, i) in textSpans"
-      :key="i"
-      :record="record"
-      :token="token"
-      :dataset="dataset"
-    />
+    <template v-if="dataset.query.score">
+      <text-span-static
+        v-for="(token, i) in textSpans"
+        :key="i"
+        :record="record"
+        :token="token"
+        :dataset="dataset"
+      />
+    </template>
+    <template>
+      <text-span-static
+        v-for="(token, i) in textSpans"
+        v-once
+        :key="i"
+        :record="record"
+        :token="token"
+        :dataset="dataset"
+      />
+    </template>
   </div>
 </template>