Introduce Custom Regex for Tokenizing Words

src/components/Document/index.js

@@ -6,13 +6,14 @@ import type {
   Relationship
 } from "../../types"
 import { styled } from "@material-ui/styles"
-import stringToSequence from "../../string-to-sequence.js"
-import Tooltip from "@material-ui/core/Tooltip"
 import RelationshipArrows from "../RelationshipArrows"
 import colors from "../../colors"
 import ArrowToMouse from "../ArrowToMouse"
 import { useTimeout, useWindowSize } from "react-use"
+import SequenceItem from "../SequenceItem"
 import classNames from "classnames"
+import stringToSequence from "../../string-to-sequence"
+import useEventCallback from "use-event-callback"
 
 const Container = styled("div")(({ relationshipsOn }) => ({
   lineHeight: 1.5,
@@ -21,50 +22,6 @@ const Container = styled("div")(({ relationshipsOn }) => ({
   flexWrap: "wrap"
 }))
 
-const SequenceItem = styled("span")(({ color, relationshipsOn }) => ({
-  display: "inline-flex",
-  cursor: "pointer",
-  backgroundColor: color,
-  color: "#fff",
-  padding: 4,
-  margin: 4,
-  marginBottom: relationshipsOn ? 64 : 4,
-  paddingLeft: 10,
-  paddingRight: 10,
-  borderRadius: 4,
-  userSelect: "none",
-  boxSizing: "border-box",
-  "&.unlabeled": {
-    color: "#333",
-    paddingTop: 4,
-    paddingBottom: 4,
-    paddingLeft: 2,
-    paddingRight: 2,
-    ".notSpace:hover": {
-      paddingTop: 2,
-      paddingBottom: 2,
-      paddingLeft: 0,
-      paddingRight: 0,
-      border: `2px dashed #ccc`
-    }
-  }
-}))
-
-const LabeledText = styled("div")({
-  display: "inline-flex",
-  cursor: "pointer",
-  alignSelf: "center",
-  fontSize: 11,
-  width: 18,
-  height: 18,
-  alignItems: "center",
-  justifyContent: "center",
-  marginLeft: 4,
-  borderRadius: 9,
-  color: "#fff",
-  backgroundColor: "rgba(0,0,0,0.2)"
-})
-
 type Props = {
   sequence: Array<SequenceItemData>,
   relationships: Array<Relationship>,
@@ -126,6 +83,16 @@ export default function Document({
       highlightedItems.push(i)
   }
 
+  const onRemoveLabel = useEventCallback(sequenceItemIndex => {
+    onSequenceChange(
+      sequence
+        .flatMap((s, i) =>
+          i !== sequenceItemIndex ? s : stringToSequence(s.text)
+        )
+        .filter(s => s.text.length > 0)
+    )
+  })
+
   return (
     <Container
       relationshipsOn={Boolean(relationships)}
@@ -142,89 +109,25 @@ export default function Document({
     >
       {sequence.map((seq, i) => (
         <SequenceItem
-          key={seq.textId || i}
-          ref={elm => {
-            if (!elm) return
-            sequenceItemPositionsRef.current[seq.textId] = {
-              offset: {
-                left: elm.offsetLeft,
-                top: elm.offsetTop,
-                width: elm.offsetWidth,
-                height: elm.offsetHeight
-              }
-            }
-          }}
+          {...seq}
+          sequenceItemIndex={i}
+          sequenceItemPositionsRef={sequenceItemPositionsRef}
           relationshipsOn={Boolean(relationships)}
-          onMouseUp={e => {
-            if (!createRelationshipsMode) return
-            if (!secondSequenceItem) {
-              setFirstSequenceItem(null)
-              setSecondSequenceItem(null)
-              onCreateEmptyRelationship([firstSequenceItem, seq.textId])
-            } else {
-              setFirstSequenceItem(null)
-              setSecondSequenceItem(null)
-            }
-          }}
-          onMouseDown={() => {
-            if (createRelationshipsMode) {
-              if (!firstSequenceItem) {
-                setFirstSequenceItem(seq.textId)
-              }
-            } else {
-              if (seq.label) return
-              changeHighlightedRange([i, i])
-            }
-          }}
-          onMouseMove={() => {
-            if (!mouseDown) return
-            if (!createRelationshipsMode) {
-              if (seq.label) return
-              if (i !== lastSelected) {
-                changeHighlightedRange([
-                  firstSelected === null ? i : firstSelected,
-                  i
-                ])
-              }
-            }
-          }}
-          className={classNames(
-            seq.label ? "label" : "unlabeled",
-            seq.text.trim().length > 0 && "notSpace"
-          )}
-          color={
-            seq.label
-              ? seq.color || colorLabelMap[seq.label] || "#333"
-              : !createRelationshipsMode &&
-                seq.text !== " " &&
-                highlightedItems.includes(i)
-              ? "#ccc"
-              : "inherit"
-          }
+          createRelationshipsMode={createRelationshipsMode}
+          onChangeFirstSequenceItem={setFirstSequenceItem}
+          onChangeSecondSequenceItem={setSecondSequenceItem}
+          onCreateEmptyRelationship={onCreateEmptyRelationship}
+          onChangeHighlightedRange={changeHighlightedRange}
+          firstSequenceItem={firstSequenceItem}
+          secondSequenceItem={secondSequenceItem}
+          mouseDown={mouseDown}
+          firstSelected={firstSelected}
+          lastSelected={lastSelected}
+          isHighlighted={highlightedItems.includes(i)}
+          onRemoveLabel={onRemoveLabel}
+          color={seq.color || colorLabelMap[seq.label]}
           key={i}
-        >
-          {seq.label ? (
-            <Tooltip title={seq.label} placement="bottom">
-              <div>{seq.text}</div>
-            </Tooltip>
-          ) : (
-            <div>{seq.text}</div>
-          )}
-          {seq.label && !createRelationshipsMode && (
-            <LabeledText
-              onClick={e => {
-                e.stopPropagation()
-                onSequenceChange(
-                  sequence
-                    .flatMap(s => (s !== seq ? s : stringToSequence(s.text)))
-                    .filter(s => s.text.length > 0)
-                )
-              }}
-            >
-              <span>{"\u2716"}</span>
-            </LabeledText>
-          )}
-        </SequenceItem>
+        />
       ))}
       {firstSequenceItem && !secondSequenceItem && (
         <ArrowToMouse

src/components/Document/index.story.js

@@ -18,14 +18,14 @@ storiesOf("Document", module)
           Math.random() < 0.9
             ? { text: text + " " }
             : {
-                text: text + " ",
-                label:
-                  "somelabel" +
-                  Math.random()
-                    .toString()
-                    .slice(-4),
-                color: "#9638F9"
-              }
+              text: text + " ",
+              label:
+                "somelabel" +
+                Math.random()
+                  .toString()
+                  .slice(-4),
+              color: "#9638F9"
+            }
         )}
     />
   ))
@@ -41,15 +41,15 @@ storiesOf("Document", module)
           Math.random() < 0.9
             ? { text: text + " ", textId: `l${i}` }
             : {
-                text: text + " ",
-                textId: `l${i}`,
-                label:
-                  "somelabel" +
-                  Math.random()
-                    .toString()
-                    .slice(-4),
-                color: "#9638F9"
-              }
+              text: text + " ",
+              textId: `l${i}`,
+              label:
+                "somelabel" +
+                Math.random()
+                  .toString()
+                  .slice(-4),
+              color: "#9638F9"
+            }
         )}
       relationships={[
         {
@@ -60,3 +60,15 @@ storiesOf("Document", module)
       ]}
     />
   ))
+  .add("Character Sequence", () => (
+    <Document
+      onSequenceChange={action("onSequenceChange")}
+      onHighlightedChanged={action("onHighlightedChanged")}
+      sequence={`Barack Hussein Obama II (born August 4, 1961) is an American attorney and politician who served as the 44th President of the United States from January 20, 2009, to January 20, 2017. A member of the Democratic Party, he was the first African American to serve as president. He was previously a United States Senator from Illinois and a member of the Illinois State Senate.`
+        .split("")
+        .map(c => ({
+          text: c
+        }))
+      }
+    />
+  ))

src/components/DocumentLabeler/index.js

@@ -12,9 +12,10 @@ export default function DocumentLabeler(props: LabelDocumentProps) {
   const [selectedLabels, changeSelectedLabels] = useState(
     props.initialLabels || (props.initialLabel ? [props.initialLabel] : [])
   )
-  const sequence = useMemo(() => stringToSequence(props.document), [
-    props.document
-  ])
+  const sequence = useMemo(
+    () => stringToSequence(props.document, props.separatorRegex),
+    [props.document]
+  )
   return (
     <div>
       <div>
@@ -58,7 +59,11 @@ export default function DocumentLabeler(props: LabelDocumentProps) {
             )
           })}
         </div>
-        <Document nothingHighlighted sequence={sequence} />
+        <Document
+          nothingHighlighted
+          sequence={sequence}
+          separatorRegex={props.separatorRegex}
+        />
       </div>
     </div>
   )

src/components/NLPAnnotator/index.story.js

@@ -32,6 +32,30 @@ storiesOf("NLPAnnotator", module)
       ]}
     />
   ))
+  .add("Sequence Labeler with Custom Regex", () => (
+    <NLPAnnotator
+      hotkeysEnabled
+      onChange={action("onChange")}
+      onFinish={action("onFinish")}
+      onNext={action("onNext")}
+      onPrev={action("onPrev")}
+      type="label-sequence"
+      document={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra ipsum tristique ligula venenatis placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce mollis velit nec tellus sollicitudin aliquam. In velit erat, iaculis id consectetur et, tincidunt sit amet mauris. Quisque ultricies, purus eleifend congue malesuada, ipsum erat molestie dolor, in pellentesque lacus purus vel nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sed vestibulum magna. Quisque ut lorem imperdiet, aliquam velit nec, dictum felis.`}
+      labels={[
+        {
+          color: colors[0],
+          id: "noun",
+          displayName: "Noun"
+        },
+        {
+          color: colors[1],
+          id: "proper-noun",
+          displayName: "Proper Noun"
+        }
+      ]}
+      separatorRegex="."
+    />
+  ))
   .add("Document Labeler", () => (
     <NLPAnnotator
       hotkeysEnabled

src/components/RelationshipAnnotator/index.js

@@ -133,6 +133,7 @@ export default function RelationshipAnnotator(
       </LabelSelectorContainer>
       <div style={{ borderTop: "1px solid #ccc", marginTop: 8, paddingTop: 5 }}>
         <Document
+          separatorRegex={props.separatorRegex}
           colorLabelMap={colorLabelMap}
           nothingHighlighted={highlightedItems.length === 0}
           onCreateEmptyRelationship={([first, second]) => {

src/components/SequenceAnnotator/index.js

@@ -18,7 +18,7 @@ export default function SequenceAnnotator(props: SequenceAnnotatorProps) {
             ? [entity]
             : stringToSequence(entity.text, props.separatorRegex)
         )
-      : stringToSequence(props.document)
+      : stringToSequence(props.document, props.separatorRegex)
   )
   const colorLabelMap = useMemo(
     () =>
@@ -71,6 +71,7 @@ export default function SequenceAnnotator(props: SequenceAnnotatorProps) {
       </div>
       <div style={{ borderTop: "1px solid #ccc", marginTop: 8, paddingTop: 5 }}>
         <Document
+          separatorRegex={props.separatorRegex}
           colorLabelMap={colorLabelMap}
           nothingHighlighted={highlightedItems.length === 0}
           onHighlightedChanged={highlightedItems =>