feat(#950): using record search_keywords for highlighting

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,

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;
     },

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 {

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"

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;
     },

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"

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;

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 ? ' ' : ''
         }`
       "

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>

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() {

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, "&")
       .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);
 };

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>