relationship annotator checkpoint

Author: seveibar

src/components/Document/index.js

@@ -68,14 +68,16 @@ export default function Document({
   sequence,
   relationships,
   onHighlightedChanged = () => null,
+  onLastPairClickedChanged = () => null,
   onSequenceChange = () => null,
   onRelationshipsChange = () => null,
   nothingHighlighted = false,
+  createRelationshipsMode = false,
   colorLabelMap = {}
 }: Props) {
   const sequenceItemPositionsRef = useRef({})
   const [mouseDown, changeMouseDown] = useState()
-  const [timeoutCalled, cancelTimeout, resetTimeout] = useTimeout(100) // Force rerender after mounting
+  const [timeoutCalled, cancelTimeout, resetTimeout] = useTimeout(10) // Force rerender after mounting
   const windowSize = useWindowSize()
   useEffect(() => {
     resetTimeout()
@@ -84,7 +86,11 @@ export default function Document({
     [firstSelected, lastSelected],
     changeHighlightedRangeState
   ] = useState([null, null])
+
   const changeHighlightedRange = ([first, last]) => {
+    if (first !== firstSelected && first !== null && firstSelected !== null) {
+      onLastPairClickedChanged([firstSelected, first])
+    }
     changeHighlightedRangeState([first, last])
     const highlightedItems = []
     for (let i = Math.min(first, last); i <= Math.max(first, last); i++)
@@ -122,24 +128,30 @@ export default function Document({
             }
           }}
           relationshipsOn={Boolean(relationships)}
+          onClick={e => e.stopPropagation()}
           onMouseDown={() => {
-            if (seq.label) return
+            if (seq.label && !createRelationshipsMode) return
             changeHighlightedRange([i, i])
           }}
           onMouseMove={() => {
-            if (seq.label) return
-            if (mouseDown && i !== lastSelected) {
-              changeHighlightedRange([
-                firstSelected === null ? i : firstSelected,
-                i
-              ])
+            if (!mouseDown) return
+            if (!createRelationshipsMode) {
+              if (seq.label) return
+              if (i !== lastSelected) {
+                changeHighlightedRange([
+                  firstSelected === null ? i : firstSelected,
+                  i
+                ])
+              }
             }
           }}
           className={seq.label ? "label" : "unlabeled"}
           color={
             seq.label
               ? seq.color || colorLabelMap[seq.label] || "#333"
-              : seq.text !== " " && highlightedItems.includes(i)
+              : !createRelationshipsMode &&
+                seq.text !== " " &&
+                highlightedItems.includes(i)
               ? "#ccc"
               : "inherit"
           }
@@ -154,7 +166,8 @@ export default function Document({
           )}
           {seq.label && (
             <LabeledText
-              onClick={() => {
+              onClick={e => {
+                e.stopPropagation()
                 onSequenceChange(
                   sequence
                     .flatMap(s => (s !== seq ? s : stringToSequence(s.text)))

src/components/Document/index.story.js

@@ -31,6 +31,7 @@ storiesOf("Document", module)
   ))
   .add("Relationships", () => (
     <Document
+      createRelationshipsMode
       onSequenceChange={action("onSequenceChange")}
       onRelationshipsChange={action("onRelationshipsChange")}
       onHighlightedChanged={action("onHighlightedChanged")}

src/components/RelationshipAnnotator/index.js

@@ -2,23 +2,38 @@
 
 import React, { useState, useMemo } from "react"
 
-import type { SequenceAnnotatorProps } from "../../types"
+import type { RelationshipAnnotatorProps } from "../../types"
 import Document from "../Document"
 import LabelSelector from "../LabelSelector"
 import stringToSequence from "../../string-to-sequence.js"
 import mergeSequence from "../../merge-sequence.js"
 import colors from "../../colors"
 
-export default function RelationshipAnnotator(props: SequenceAnnotatorProps) {
+const withId = entity =>
+  entity.textId
+    ? entity
+    : {
+        ...entity,
+        textId: Math.random()
+          .toString(36)
+          .slice(-8)
+      }
+
+export default function RelationshipAnnotator(
+  props: RelationshipAnnotatorProps
+) {
   const [highlightedItems, changeHighlightedItems] = useState([])
+  const [relationships, setRelationships] = useState(props.relationships || [])
+  const [activePair, setActivePair] = useState(null)
+  const [creatingRelationships, setCreatingRelationships] = useState(true)
   const [sequence, changeSequence] = useState(() =>
     props.initialSequence
       ? props.initialSequence.flatMap(entity =>
           entity.label
-            ? [entity]
-            : stringToSequence(entity.text, props.separatorRegex)
+            ? [withId(entity)]
+            : stringToSequence(entity.text, props.separatorRegex).map(withId)
         )
-      : stringToSequence(props.document)
+      : stringToSequence(props.document).map(withId)
   )
   const colorLabelMap = useMemo(
     () =>
@@ -30,57 +45,96 @@ export default function RelationshipAnnotator(props: SequenceAnnotatorProps) {
   )
 
   return (
-    <div>
+    <div
+      onMouseMove={e => {
+        lastMousePosition.current = { x: e.target.clientX, y: e.target.clientX }
+      }}
+    >
       <div>
         <LabelSelector
           hotkeysEnabled={props.hotkeysEnabled}
           labels={props.labels}
           onSelectLabel={(label: string) => {
-            const { color } = props.labels.find(({ id }) => label === id) || {}
-            let buildText = ""
-            const newSequence = []
-            for (let itemIndex = 0; itemIndex < sequence.length; itemIndex++) {
-              const item = sequence[itemIndex]
-              if (!highlightedItems.includes(itemIndex) || item.label) {
-                if (buildText.length > 0) {
-                  newSequence.push({
-                    text: buildText,
-                    color,
-                    label
-                  })
-                  buildText = ""
+            if (!creatingRelationships) {
+              const { color } =
+                props.labels.find(({ id }) => label === id) || {}
+              let buildText = ""
+              const newSequence = []
+              for (
+                let itemIndex = 0;
+                itemIndex < sequence.length;
+                itemIndex++
+              ) {
+                const item = sequence[itemIndex]
+                if (!highlightedItems.includes(itemIndex) || item.label) {
+                  if (buildText.length > 0) {
+                    newSequence.push({
+                      text: buildText,
+                      color,
+                      label
+                    })
+                    buildText = ""
+                  }
+                  newSequence.push(item)
+                } else {
+                  buildText += item.text
                 }
-                newSequence.push(item)
-              } else {
-                buildText += item.text
               }
-            }
-            if (buildText.length > 0) {
-              newSequence.push({
-                text: buildText,
-                color,
-                label
+              if (buildText.length > 0) {
+                newSequence.push({
+                  text: buildText,
+                  color,
+                  label
+                })
+              }
+
+              changeSequence(newSequence)
+              props.onChange({
+                sequence: mergeSequence(newSequence),
+                relationships
+              })
+              changeHighlightedItems([])
+            } else {
+              setActivePair(null)
+              const newRelationships = relationships.concat([
+                { ...activePair, label: label, color: colorLabelMap[label] }
+              ])
+              setRelationships(newRelationships)
+              props.onChange({
+                sequence,
+                relationships: newRelationships
               })
             }
-
-            changeSequence(newSequence)
-            props.onChange(mergeSequence(newSequence))
-            changeHighlightedItems([])
           }}
         />
       </div>
       <div style={{ borderTop: "1px solid #ccc", marginTop: 8, paddingTop: 5 }}>
         <Document
           colorLabelMap={colorLabelMap}
           nothingHighlighted={highlightedItems.length === 0}
+          onLastPairClickedChanged={([first, second]) => {
+            setActivePair({
+              from: sequence[first].textId,
+              to: sequence[second].textId,
+              label: "???",
+              color: "#333"
+            })
+          }}
+          onRelationshipsChange={relationships =>
+            setRelationships(relationships)
+          }
           onHighlightedChanged={highlightedItems =>
             changeHighlightedItems(highlightedItems)
           }
           onSequenceChange={sequence => {
             changeSequence(sequence)
-            props.onChange(mergeSequence(sequence))
+            props.onChange({ sequence: mergeSequence(sequence) })
           }}
           sequence={sequence}
+          relationships={relationships.concat(
+            activePair !== null ? [activePair] : []
+          )}
+          createRelationshipsMode={creatingRelationships}
         />
       </div>
     </div>

src/components/RelationshipAnnotator/index.story.js

@@ -0,0 +1,130 @@
+// @flow
+
+import React from "react"
+
+import { storiesOf } from "@storybook/react"
+import { action } from "@storybook/addon-actions"
+import colors from "../../colors"
+
+import RelationshipAnnotator from "./"
+
+storiesOf("RelationshipAnnotator", module)
+  .add("Basic", () => (
+    <RelationshipAnnotator
+      type="label-relationships"
+      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"
+        }
+      ]}
+      onChange={action("onChange")}
+    />
+  ))
+  .add("Initial Content", () => (
+    <RelationshipAnnotator
+      type="label-relationships"
+      document={`Lorem ipsum dolor.`}
+      initialSequence={[
+        { label: "noun", text: "Lorem" },
+        { text: " ipsum  " },
+        { label: "proper-noun", text: "dolor." },
+        { text: " this should be broken up into words." }
+      ]}
+      labels={[
+        {
+          color: colors[0],
+          id: "noun",
+          displayName: "Noun"
+        },
+        {
+          color: colors[1],
+          id: "proper-noun",
+          displayName: "Proper Noun"
+        }
+      ]}
+      onChange={action("onChange")}
+    />
+  ))
+  .add("Basic Nested Labels", () => (
+    <RelationshipAnnotator
+      type="label-relationships"
+      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: "intent",
+          displayName: "Intent"
+        },
+        {
+          color: colors[1],
+          id: "subject",
+          displayName: "Subject"
+        },
+        {
+          color: colors[6],
+          id: "desire",
+          displayName: "Desire",
+          parent: "intent"
+        },
+        {
+          color: colors[7],
+          id: "informative-desire",
+          displayName: "Informative Desire",
+          parent: "desire"
+        },
+        {
+          color: colors[2],
+          id: "wants-information",
+          displayName: "Wants More Information",
+          parent: "informative-desire"
+        },
+        {
+          color: colors[3],
+          id: "cancel",
+          displayName: "Wants To Cancel",
+          parent: "desire"
+        },
+        {
+          color: colors[4],
+          id: "continue",
+          displayName: "Wants To Continue",
+          parent: "desire"
+        },
+        {
+          color: colors[5],
+          id: "person",
+          displayName: "Person",
+          parent: "subject"
+        },
+        {
+          color: colors[6],
+          id: "object",
+          displayName: "Object",
+          parent: "subject"
+        }
+      ]}
+      onChange={action("onChange")}
+    />
+  ))
+  .add("Accented Characters", () => (
+    <RelationshipAnnotator
+      type="label-relationships"
+      document={`This should appear as a single word: aùbûcàdâeçfégèhêiëjïkîlôm (and not multiple letters)`}
+      labels={[
+        {
+          color: colors[0],
+          id: "test",
+          displayName: "test"
+        }
+      ]}
+      onChange={action("onChange")}
+    />
+  ))

src/components/RelationshipArrows/index.js

@@ -418,7 +418,10 @@ export const RelationshipArrows = ({
       </div>
       {arrows.map((arrow, i) => (
         <ArrowLabel
-          onClick={() => onClickArrow(arrow)}
+          onClick={e => {
+            e.stopPropagation()
+            onClickArrow(arrow)
+          }}
           style={{
             left: labelPositions[i][0],
             top: labelPositions[i][1] - 9,