feat(#950): using record search_keywords for highlighting

argilla-io · Mar 8, 2022 · 829dc89 · 829dc89
1 parent 6899272
commit 829dc89
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 18 deletions.
diff --git a/frontend/components/token-classifier/results/EntityHighlight.vue b/frontend/components/token-classifier/results/EntityHighlight.vue
@@ -19,12 +19,7 @@
   <span
     @mouseenter="showTooltip = true"
     @mouseleave="showTooltip = false"
-    :class="[
-      'highlight',
-      span.origin,
-      // isText ? '' : 'highlight--block',
-      annotationEnabled ? 'editable' : null,
-    ]"
+    :class="['highlight', span.origin, annotationEnabled ? 'editable' : null]"
     ><span
       v-for="(token, i) in span.tokens"
       :key="i"
@@ -37,7 +32,7 @@
       @click="openTagSelector"
       @dblclick="removeEntity"
       v-html="
-        `${$highlightSearch(dataset.query.text, token.text)}${
+        `${$highlightKeywords(token.text, record.search_keywords)}${
           token.hasSpaceAfter && i + 1 !== span.tokens.length ? ' ' : ''
         }`
       "
@@ -53,6 +48,7 @@
     <lazy-text-span-tooltip v-if="showTooltip" :span="span" />
   </span>
 </template>
+
 <script>
 import "assets/icons/cross";
 
@@ -69,6 +65,10 @@ export default {
       type: Object,
       required: true,
     },
+    record: {
+      type: Object,
+      required: true,
+    }
   },
   data: () => {
     return {
@@ -79,9 +79,6 @@ export default {
     };
   },
   computed: {
-    // isText() {
-    //   return this.text.replace(/\s/g, "").length;
-    // },
     annotationEnabled() {
       return this.dataset.viewSettings.viewMode === "annotate";
     },
@@ -110,16 +107,17 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .whitespace {
   margin-right: 3.5px;
 }
+
 .highlight {
   @include font-size(0);
   line-height: 1em;
   position: relative;
-  cursor: default;
-  // display: inline-flex;
+  cursor: default; // display: inline-flex;
   border-radius: 2px;
   padding: 0;
   &.editable {
@@ -146,6 +144,7 @@ export default {
     z-index: 5;
   }
 }
+
 .remove-button {
   opacity: 0;
   z-index: -1;

diff --git a/frontend/components/token-classifier/results/TextSpan.vue b/frontend/components/token-classifier/results/TextSpan.vue
@@ -22,6 +22,7 @@
       :class="['color_' + tag_color, { zindex3: showEntitiesSelector }]"
       :span="token"
       :dataset="dataset"
+      :record="record"
       @openTagSelector="openTagSelector"
       @removeEntity="removeEntity"
     /><span
@@ -32,7 +33,7 @@
       v-for="(t, i) in token.tokens"
       :key="i"
       v-html="
-        `${$highlightSearch(dataset.query.text, t.text)}${
+        `${$highlightKeywords(t.text, record.search_keywords)}${
           token.hasSpaceAfter ? ' ' : ''
         }`
       "

diff --git a/frontend/components/token-classifier/results/TextSpanStatic.vue b/frontend/components/token-classifier/results/TextSpanStatic.vue
@@ -22,6 +22,7 @@
       :class="['color_' + tag_color]"
       :span="token"
       :dataset="dataset"
+      :record="record"
     /><template v-else v-for="t in token.tokens">{{ t.text }}</template
     ><template>{{ token.hasSpaceAfter ? " " : "" }}</template>
   </span>

diff --git a/frontend/models/Common.js b/frontend/models/Common.js
@@ -34,6 +34,7 @@ class BaseRecord {
     status,
     selected,
     event_timestamp,
+    search_keywords,
   }) {
     this.id = id;
     this.metadata = metadata;
@@ -43,6 +44,7 @@ class BaseRecord {
     this.status = status;
     this.selected = selected || false;
     this.event_timestamp = event_timestamp;
+    this.search_keywords = search_keywords || [];
   }
 
   recordTitle() {

diff --git a/frontend/plugins/highlight-search.js b/frontend/plugins/highlight-search.js
@@ -16,24 +16,48 @@
  */
 
 export default (context, inject) => {
-  const highlightSearch = function (query, text) {
-    const escapedText = text
+  const escapeText = function (text) {
+    return text
       .toString()
       .replace(/&/g, "&amp;")
       .replace(/</g, "&lt;")
       .replace(/>/g, "&gt;")
       .replace(/"/g, "&quot;")
       .replace(/'/g, "&#039;");
+  };
+
+  const regexFromTerm = function (term) {
+    let q = term.replace(/[-[\]{}()*+?.,\\/^$|#\s]/g, "");
+    return new RegExp(q, "gi");
+  };
+
+  const highlightSearch = function (query, text) {
+    const escapedText = escapeText(text);
     if (!query) {
-      return escapedText;
+      return text;
     }
-    let q = query.replace(/[-[\]{}()*+?.,\\/^$|#\s]/g, "");
+
     return escapedText
       .toString()
       .replace(
-        new RegExp(q, "gi"),
+        regexFromTerm(query),
         (match) => `<span class="highlight-text">${match}</span>`
       );
   };
+
+  const highlightKeywords = function (text, keywords) {
+    let escapedText = escapeText(text).toString();
+
+    (keywords || []).forEach((keyword) => {
+      escapedText = escapedText.replace(
+        regexFromTerm(keyword),
+        (match) => `<span class="highlight-text">${match}</span>`
+      );
+    });
+
+    return escapedText;
+  };
+
   inject("highlightSearch", highlightSearch);
+  inject("highlightKeywords", highlightKeywords);
 };