Fix/token annotator whitespace and reset (#892)

* Fix token annotator whitespace and allowing answer unselecting * Removed duplicate setData() call
facebookresearch · Feb 24, 2022 · ab17e4a · ab17e4a
1 parent cdfa0d3
commit ab17e4a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/frontends/web/src/common/Annotation/AnnotationComponent.css b/frontends/web/src/common/Annotation/AnnotationComponent.css
@@ -13,3 +13,15 @@
     text-transform: uppercase;
     color: #005798;
 }
+
+.token-annotator > span {
+    /* Fix for react-text-annote token annotator added whitespace around tokens */
+    margin-right: -4px;
+    white-space: pre-wrap;
+    letter-spacing: 0.2px;
+    line-height: 1.8;
+}
+
+.token-annotator > mark {
+    margin-right: 2px;
+}
diff --git a/frontends/web/src/common/Annotation/AnnotationComponent.js b/frontends/web/src/common/Annotation/AnnotationComponent.js
@@ -258,15 +258,20 @@ const ContextStringSelection = ({
             {configObj.reference_name}:
           </h6>
           <TokenAnnotator
-            className="mb-1 p-3 light-gray-bg"
-            tokens={data[configObj.reference_name].split(/\b/)}
+            className="mb-1 p-3 light-gray-bg token-annotator"
+            tokens={data[configObj.reference_name].split(
+              /\b|(?<=[\s\(\)])|(?=[\s\(\)])/
+            )}
             value={selectionInfo}
             onChange={(value) => {
               if (value.length > 0) {
                 setSelectionInfo([value[value.length - 1]]);
                 data[name] = value[value.length - 1].tokens.join("");
-                setData(data);
+              } else {
+                setSelectionInfo([]);
+                data[name] = "";
               }
+              setData(data);
             }}
             getSpan={(span) => ({
               ...span,