From 829dc89d28807c0efe9af7435e4ed2e34c6fc4de Mon Sep 17 00:00:00 2001
From: Francisco Aranda <francisco@recogn.ai>
Date: Tue, 8 Mar 2022 17:46:45 +0100
Subject: [PATCH 1/5] feat(#950): using record search_keywords for highlighting

---
 .../results/EntityHighlight.vue               | 23 ++++++-------
 .../token-classifier/results/TextSpan.vue     |  3 +-
 .../results/TextSpanStatic.vue                |  1 +
 frontend/models/Common.js                     |  2 ++
 frontend/plugins/highlight-search.js          | 34 ++++++++++++++++---
 5 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/frontend/components/token-classifier/results/EntityHighlight.vue b/frontend/components/token-classifier/results/EntityHighlight.vue
index 5f852487f7..e911582311 100755
--- 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
index 6aebaa3b65..73587c2c7b 100755
--- 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
index dec0f1aea5..abf7a5be72 100755
--- 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
index 05038c582f..b662986217 100644
--- 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
index 2087357e3d..7c50e8d6f2 100644
--- 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);
 };

From a459637b7918e5bd145d37aa4aa84da2264870f5 Mon Sep 17 00:00:00 2001
From: Francisco Aranda <francisco@recogn.ai>
Date: Wed, 9 Mar 2022 10:10:19 +0100
Subject: [PATCH 2/5] feat(highlight): keywords for text-classification

---
 .../text-classifier/results/RecordExplain.vue | 19 ++++++-------
 .../text-classifier/results/RecordInputs.vue  | 28 ++++++++-----------
 .../text-classifier/results/RecordString.vue  | 19 +++++++++----
 .../results/RecordTextClassification.vue      |  7 +----
 4 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/frontend/components/text-classifier/results/RecordExplain.vue b/frontend/components/text-classifier/results/RecordExplain.vue
index 742fa08b56..9eb47d7121 100644
--- a/frontend/components/text-classifier/results/RecordExplain.vue
+++ b/frontend/components/text-classifier/results/RecordExplain.vue
@@ -33,19 +33,18 @@
 <script>
 export default {
   props: {
-    queryText: {
-      type: String,
-      default: undefined,
+    record: {
+      type: Object,
+      required: true,
     },
     explain: {
       type: Array,
-    },
-    predicted: {
-      type: String,
-      default: undefined,
-    },
+    }
   },
   computed: {
+    predicted() {
+      return this.record.predicted;
+    },
     explainFormatted() {
       // TODO ALLOW FOR MULTI LABEL
       return this.explain.map((token) => {
@@ -58,8 +57,8 @@ export default {
           percent = Math.round(Math.log10(percent) ** p * s);
         }
         return {
-          text: this.queryText
-            ? this.$highlightSearch(this.queryText, token.token)
+          text: this.record.search_keywords
+            ? this.$highlightKeyword(token.token, this.record.search_keywords)
             : token.token,
           percent: percent.toString(),
           grad,
diff --git a/frontend/components/text-classifier/results/RecordInputs.vue b/frontend/components/text-classifier/results/RecordInputs.vue
index a9075d6c39..a0a162fb79 100644
--- a/frontend/components/text-classifier/results/RecordInputs.vue
+++ b/frontend/components/text-classifier/results/RecordInputs.vue
@@ -26,11 +26,10 @@
           <span class="record__key">{{ index }}:</span>
           <LazyRecordExplain
             v-if="explanation"
-            :predicted="predicted"
-            :query-text="queryText"
+            :record="record"
             :explain="explanation[index]"
           />
-          <LazyRecordString v-else :query-text="queryText" :text="text" />
+          <LazyRecordString v-else :record="record" :text="text" />
         </span>
       </span>
     </div>
@@ -47,27 +46,22 @@
 <script>
 export default {
   props: {
-    data: {
+    record: {
       type: Object,
-      required: true,
-    },
-    queryText: {
-      type: String,
-    },
-    predicted: {
-      type: String,
-      default: undefined,
-    },
-    explanation: {
-      type: Object,
-      default: () => undefined,
-    },
+      required: true
+    }
   },
   data: () => ({
     showFullRecord: false,
     scrollHeight: undefined,
   }),
   computed: {
+    data() {
+      return this.record.inputs;
+    },
+    explanation() {
+      return this.record.explanation;
+    },
     visibleRecordHeight() {
       return this.$mq === "lg" ? 468 : 174;
     },
diff --git a/frontend/components/text-classifier/results/RecordString.vue b/frontend/components/text-classifier/results/RecordString.vue
index 761bb085b5..e1ef1473b5 100644
--- a/frontend/components/text-classifier/results/RecordString.vue
+++ b/frontend/components/text-classifier/results/RecordString.vue
@@ -21,7 +21,7 @@
       <div v-for="item in text" :key="item.index">
         <span
           class="record__content"
-          v-html="$highlightSearch(queryText, item)"
+          v-html="$highlightKeywords(item, keywords)"
         >
         </span>
       </div>
@@ -30,22 +30,28 @@
     <span
       v-else
       class="record__content"
-      v-html="$highlightSearch(queryText, text)"
+      v-html="$highlightKeywords(text, keywords)"
     >
     </span>
   </div>
 </template>
+
 <script>
 export default {
   props: {
+    record: {
+      type: Object,
+      required: true,
+    },
     text: {
       type: [String, Array],
       required: true,
     },
-    queryText: {
-      type: String,
-      default: undefined,
-    },
+  },
+  computed: {
+    keywords() {
+      return this.record.search_keywords
+    }
   },
   methods: {
     isList(record) {
@@ -54,6 +60,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 .record {
   &__content {
diff --git a/frontend/components/text-classifier/results/RecordTextClassification.vue b/frontend/components/text-classifier/results/RecordTextClassification.vue
index 31c43bec04..111041f02f 100644
--- a/frontend/components/text-classifier/results/RecordTextClassification.vue
+++ b/frontend/components/text-classifier/results/RecordTextClassification.vue
@@ -20,12 +20,7 @@
     <!-- annotation labels and prediction status -->
     <div class="record--left">
       <!-- record text -->
-      <RecordInputs
-        :predicted="record.predicted"
-        :data="record.inputs"
-        :explanation="record.explanation"
-        :query-text="dataset.query.text"
-      />
+      <RecordInputs :record="record" />
       <ClassifierAnnotationArea
         v-if="annotationEnabled"
         :dataset="dataset"

From 79a149efcd8139fdc99ee9b2678a4586b971c171 Mon Sep 17 00:00:00 2001
From: Francisco Aranda <francisco@recogn.ai>
Date: Wed, 9 Mar 2022 10:10:42 +0100
Subject: [PATCH 3/5] feat(highlight): keywords for text2text

---
 .../results/RecordStringText2Text.vue         | 20 ++++++++++---------
 .../text2text/results/RecordText2Text.vue     |  5 +----
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/frontend/components/text2text/results/RecordStringText2Text.vue b/frontend/components/text2text/results/RecordStringText2Text.vue
index 60a0fc543f..7c14e7e522 100644
--- a/frontend/components/text2text/results/RecordStringText2Text.vue
+++ b/frontend/components/text2text/results/RecordStringText2Text.vue
@@ -20,7 +20,7 @@
     ref="list"
     :class="showFullRecord ? 'record__expanded' : 'record__collapsed'"
   >
-    <span class="record__content" v-html="$highlightSearch(queryText, text)">
+    <span class="record__content" v-html="$highlightKeywords(text, keywords)">
     </span>
     <a
       href="#"
@@ -34,20 +34,22 @@
 <script>
 export default {
   props: {
-    text: {
-      type: [String, Array],
-      required: true,
-    },
-    queryText: {
-      type: String,
-      default: undefined,
-    },
+    record: {
+      type: Object,
+      required: true
+    }
   },
   data: () => ({
     showFullRecord: false,
     scrollHeight: undefined,
   }),
   computed: {
+    text() {
+      return this.record.text;
+    },
+    keywords() {
+      return this.record.search_keywords;
+    },
     visibleRecordHeight() {
       return this.$mq === "lg" ? 570 : 260;
     },
diff --git a/frontend/components/text2text/results/RecordText2Text.vue b/frontend/components/text2text/results/RecordText2Text.vue
index 0c9748293b..ca13e20bfd 100644
--- a/frontend/components/text2text/results/RecordText2Text.vue
+++ b/frontend/components/text2text/results/RecordText2Text.vue
@@ -18,10 +18,7 @@
 <template>
   <div class="record">
     <div class="record--left record__item">
-      <record-string-text-2-text
-        :query-text="dataset.query.text"
-        :text="record.text"
-      />
+      <record-string-text-2-text :record="record" />
       <div>
         <text-2-text-list
           ref="list"

From 0edf98660c9dd534bff63d583d385d7045192f2d Mon Sep 17 00:00:00 2001
From: Francisco Aranda <francisco@recogn.ai>
Date: Wed, 9 Mar 2022 10:34:05 +0100
Subject: [PATCH 4/5] test: update snapshots

---
 .../results/__snapshots__/RecordTextClassification.spec.js.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/specs/components/text-classification/results/__snapshots__/RecordTextClassification.spec.js.snap b/frontend/specs/components/text-classification/results/__snapshots__/RecordTextClassification.spec.js.snap
index d4ef8bb6b7..fc02aedcc2 100644
--- a/frontend/specs/components/text-classification/results/__snapshots__/RecordTextClassification.spec.js.snap
+++ b/frontend/specs/components/text-classification/results/__snapshots__/RecordTextClassification.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`RecordTextClassification renders properly 1`] = `
 <div class="record">
   <div class="record--left">
-    <recordinputs data="[object Object]" query-text="mock test"></recordinputs>
+    <recordinputs record="[object Object]"></recordinputs>
     <classifierexplorationarea dataset="[object Object]" record="[object Object]"></classifierexplorationarea>
     <!---->
   </div>

From ca3b109dc7f8adbc9ddfe9989840c59fa2b3d5c5 Mon Sep 17 00:00:00 2001
From: Francisco Aranda <francisco@recogn.ai>
Date: Wed, 9 Mar 2022 10:35:08 +0100
Subject: [PATCH 5/5] fix: compute search keywords for old datasets, based on
 'words' field

---
 src/rubrix/server/tasks/commons/dao/dao.py | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/rubrix/server/tasks/commons/dao/dao.py b/src/rubrix/server/tasks/commons/dao/dao.py
index 5f8471faf9..356159cf2b 100644
--- a/src/rubrix/server/tasks/commons/dao/dao.py
+++ b/src/rubrix/server/tasks/commons/dao/dao.py
@@ -396,7 +396,12 @@ def __configure_query_highlight__(cls):
             "pre_tags": [cls.__HIGHLIGHT_PRE_TAG__],
             "post_tags": [cls.__HIGHLIGHT_POST_TAG__],
             "require_field_match": False,
-            "fields": {"text": {}},
+            "fields": {
+                "text": {},
+                # TODO: `words` will be removed once the migration will be completed.
+                #  This configuration is included just for old datasets records
+                "words": {},
+            },
         }