From d4d967c1119f8064b4331eb61f8c84a18d12e0c4 Mon Sep 17 00:00:00 2001
From: LeireA <leire@recogn.ai>
Date: Mon, 28 Mar 2022 16:46:24 +0200
Subject: [PATCH] fix(#1320):  render car return in Token Classifier

fix #1320
---
 .../results/EntityHighlight.vue               | 26 ++++++++++++-------
 .../results/RecordTokenClassification.vue     | 16 +++++++++---
 .../token-classifier/results/TextSpan.vue     |  2 +-
 .../results/TextSpanStatic.vue                |  2 +-
 .../token-classifier/results/TextSpans.vue    |  4 +--
 .../results/TextSpansStatic.vue               |  4 +--
 6 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/frontend/components/token-classifier/results/EntityHighlight.vue b/frontend/components/token-classifier/results/EntityHighlight.vue
index c7207a2e82..d4a9c8e43d 100755
--- a/frontend/components/token-classifier/results/EntityHighlight.vue
+++ b/frontend/components/token-classifier/results/EntityHighlight.vue
@@ -23,16 +23,12 @@
     ><span
       v-for="(token, i) in span.tokens"
       :key="i"
-      :class="[
-        token.hasSpaceAfter && i + 1 === span.tokens.length
-          ? 'whitespace'
-          : null,
-        'highlight__content',
-      ]"
+      class="highlight__content"
       @click="openTagSelector"
       @dblclick="removeEntity"
       v-html="visualizeToken(token, i)"
-    ></span>
+    ></span
+    ><span class="whitespace">{{ charsBetweenTokens }}</span>
     <svgicon
       class="remove-button"
       @click="removeEntity"
@@ -78,6 +74,9 @@ export default {
     annotationEnabled() {
       return this.dataset.viewSettings.viewMode === "annotate";
     },
+    charsBetweenTokens() {
+      return this.span.tokens.at(-1).charsBetweenTokens;
+    },
   },
   methods: {
     openTagSelector() {
@@ -105,7 +104,9 @@ export default {
         ? this.$htmlHighlightText(token.text)
         : this.$htmlText(token.text);
       return `${text}${
-        token.hasSpaceAfter && i + 1 !== this.span.tokens.length ? " " : ""
+        token.charsBetweenTokens && i + 1 !== this.span.tokens.length
+          ? token.charsBetweenTokens
+          : ""
       }`;
     },
   },
@@ -113,8 +114,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.whitespace {
-  margin-right: 3.5px;
+::v-deep .whitespace {
+  background: palette(white);
+  padding-bottom: 3px;
+  border-bottom: 5px solid palette(white);
+  @include font-size(18px);
+  white-space: pre-line;
+  display: inline;
 }
 
 .highlight {
diff --git a/frontend/components/token-classifier/results/RecordTokenClassification.vue b/frontend/components/token-classifier/results/RecordTokenClassification.vue
index 378a6a44c1..c8d65bcefc 100755
--- a/frontend/components/token-classifier/results/RecordTokenClassification.vue
+++ b/frontend/components/token-classifier/results/RecordTokenClassification.vue
@@ -61,12 +61,22 @@ export default {
       );
 
       const { visualTokens } = this.record.tokens.reduce(
-        ({ visualTokens, startPosition }, token) => {
+        ({ visualTokens, startPosition }, token, index) => {
           const start = recordHasEmoji
             ? indexOf(this.record.text, token, startPosition)
             : this.record.text.indexOf(token, startPosition);
+          const nextStart = recordHasEmoji
+            ? indexOf(
+                this.record.text,
+                this.record.tokens[index + 1],
+                startPosition
+              )
+            : this.record.text.indexOf(
+                this.record.tokens[index + 1],
+                startPosition
+              );
           const end = start + (recordHasEmoji ? length(token) : token.length);
-          const hasSpaceAfter = this.record.text.slice(end, end + 1) === " ";
+          const charsBetweenTokens = this.record.text.slice(end, nextStart);
 
           let highlighted = false;
           for (let highlight of searchKeywordsSpans) {
@@ -78,7 +88,7 @@ export default {
           return {
             visualTokens: [
               ...visualTokens,
-              { start, end, highlighted, text: token, hasSpaceAfter },
+              { start, end, highlighted, text: token, charsBetweenTokens },
             ],
             startPosition: end,
           };
diff --git a/frontend/components/token-classifier/results/TextSpan.vue b/frontend/components/token-classifier/results/TextSpan.vue
index d2519d3504..bfbefa38e4 100755
--- a/frontend/components/token-classifier/results/TextSpan.vue
+++ b/frontend/components/token-classifier/results/TextSpan.vue
@@ -156,7 +156,7 @@ export default {
       let text = token.highlighted
         ? this.$htmlHighlightText(token.text)
         : this.$htmlText(token.text);
-      return `${text}${token.hasSpaceAfter ? " " : ""}`;
+      return `${text}${token.charsBetweenTokens}`;
     },
   },
 };
diff --git a/frontend/components/token-classifier/results/TextSpanStatic.vue b/frontend/components/token-classifier/results/TextSpanStatic.vue
index f6f340155c..177b70ef6e 100755
--- a/frontend/components/token-classifier/results/TextSpanStatic.vue
+++ b/frontend/components/token-classifier/results/TextSpanStatic.vue
@@ -24,7 +24,7 @@
       :dataset="dataset"
       :record="record"
     /><template v-else v-for="t in token.tokens">{{ t.text }}</template
-    ><template>{{ token.hasSpaceAfter ? " " : "" }}</template>
+    ><template>{{ token.charsBetweenTokens }}</template>
   </span>
 </template>
 
diff --git a/frontend/components/token-classifier/results/TextSpans.vue b/frontend/components/token-classifier/results/TextSpans.vue
index 38966bc717..cc40af888b 100755
--- a/frontend/components/token-classifier/results/TextSpans.vue
+++ b/frontend/components/token-classifier/results/TextSpans.vue
@@ -123,7 +123,7 @@ export default {
             start: entity.start,
             end: entity.end,
             origin: this.origin,
-            hasSpaceAfter: entity.hasSpaceAfter,
+            charsBetweenTokens: entity.charsBetweenTokens,
           });
           idx = entity.end_token;
         } else {
@@ -134,7 +134,7 @@ export default {
             start: token.start,
             end: token.end,
             origin: this.origin,
-            hasSpaceAfter: token.hasSpaceAfter,
+            charsBetweenTokens: token.charsBetweenTokens,
           });
           idx++;
         }
diff --git a/frontend/components/token-classifier/results/TextSpansStatic.vue b/frontend/components/token-classifier/results/TextSpansStatic.vue
index 9ec645855c..0fd8215a67 100755
--- a/frontend/components/token-classifier/results/TextSpansStatic.vue
+++ b/frontend/components/token-classifier/results/TextSpansStatic.vue
@@ -91,7 +91,7 @@ export default {
             start: entity.start,
             end: entity.end,
             origin: this.origin,
-            hasSpaceAfter: entity.hasSpaceAfter,
+            charsBetweenTokens: entity.charsBetweenTokens,
           });
           idx = entity.end_token;
         } else {
@@ -102,7 +102,7 @@ export default {
             start: token.start,
             end: token.end,
             origin: this.origin,
-            hasSpaceAfter: token.hasSpaceAfter,
+            charsBetweenTokens: token.charsBetweenTokens,
           });
           idx++;
         }