relationship interface feeling good!

Author: seveibar

package.json

@@ -3,6 +3,8 @@
   "version": "0.2.0",
   "homepage": "https://waoai.github.io/react-nlp-annotate/",
   "dependencies": {
+    "@material-ui/lab": "^4.0.0-alpha.56",
+    "color-alpha": "^1.0.4",
     "react-hotkeys": "^2.0.0",
     "react-material-workspace-layout": "^0.1.6",
     "react-use": "^15.3.3",

src/components/ArrowToMouse/index.js

@@ -0,0 +1,75 @@
+// @flow
+
+import React, { useRef } from "react"
+import { styled } from "@material-ui/core/styles"
+import { useMouse } from "react-use"
+
+const Container = styled("div")({
+  position: "absolute",
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  pointerEvents: "none"
+})
+
+export const ArrowToMouse = ({ startAt } = {}) => {
+  const ref = useRef(null)
+  let { elX: mx, elY: my } = useMouse(ref)
+  let dx, dy
+  if (mx === 0 && my === 0) {
+    dx = 0
+    dy = 0
+    mx = startAt.left + startAt.width / 2
+    my = startAt.top + startAt.height / 2
+  } else {
+    const a = mx - startAt.left
+    const b = my - startAt.top
+    const c = Math.sqrt(a * a + b * b)
+    const sf = c < 100 ? (c / 100) ** 2 : 1
+    dx = (a / c) * sf
+    dy = (b / c) * sf
+  }
+  return (
+    <Container ref={ref}>
+      <svg
+        width={Math.max(mx, startAt.left + startAt.width + 8)}
+        height={Math.max(my, startAt.top + startAt.height + 8)}
+      >
+        <defs>
+          <marker
+            id={"arrowhead"}
+            markerWidth="5"
+            markerHeight="5"
+            refX="0"
+            refY="2.5"
+            orient="auto"
+          >
+            <polygon fill={"rgba(255,0,0,0.75)"} points="0 0, 6 2.5, 0 5" />
+          </marker>
+        </defs>
+        <rect
+          x={startAt.left - 5}
+          y={startAt.top - 5}
+          width={startAt.width + 10}
+          height={startAt.height + 10}
+          stroke="rgba(255,0,0,0.75)"
+          stroke-dasharray="10 5"
+          fill="none"
+        />
+        <line
+          x1={startAt.left + startAt.width / 2}
+          y1={startAt.top + startAt.height / 2}
+          x2={mx - dx * 30}
+          y2={my - dy * 30}
+          marker-end={`url(#arrowhead)`}
+          stroke-width={3}
+          stroke="rgba(255,0,0,0.75)"
+          fill="none"
+        />
+      </svg>
+    </Container>
+  )
+}
+
+export default ArrowToMouse

src/components/Document/index.js

@@ -10,7 +10,9 @@ 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 classNames from "classnames"
 
 const Container = styled("div")(({ relationshipsOn }) => ({
   lineHeight: 1.5,
@@ -21,6 +23,7 @@ const Container = styled("div")(({ relationshipsOn }) => ({
 
 const SequenceItem = styled("span")(({ color, relationshipsOn }) => ({
   display: "inline-flex",
+  cursor: "pointer",
   backgroundColor: color,
   color: "#fff",
   padding: 4,
@@ -30,12 +33,20 @@ const SequenceItem = styled("span")(({ color, relationshipsOn }) => ({
   paddingRight: 10,
   borderRadius: 4,
   userSelect: "none",
+  boxSizing: "border-box",
   "&.unlabeled": {
     color: "#333",
     paddingTop: 4,
     paddingBottom: 4,
     paddingLeft: 2,
-    paddingRight: 2
+    paddingRight: 2,
+    ".notSpace:hover": {
+      paddingTop: 2,
+      paddingBottom: 2,
+      paddingLeft: 0,
+      paddingRight: 0,
+      border: `2px dashed #ccc`
+    }
   }
 }))
 
@@ -68,7 +79,7 @@ export default function Document({
   sequence,
   relationships,
   onHighlightedChanged = () => null,
-  onLastPairClickedChanged = () => null,
+  onCreateEmptyRelationship = () => null,
   onSequenceChange = () => null,
   onRelationshipsChange = () => null,
   nothingHighlighted = false,
@@ -77,7 +88,7 @@ export default function Document({
 }: Props) {
   const sequenceItemPositionsRef = useRef({})
   const [mouseDown, changeMouseDown] = useState()
-  const [timeoutCalled, cancelTimeout, resetTimeout] = useTimeout(10) // Force rerender after mounting
+  const [timeoutCalled, cancelTimeout, resetTimeout] = useTimeout(30) // Force rerender after mounting
   const windowSize = useWindowSize()
   useEffect(() => {
     resetTimeout()
@@ -87,10 +98,18 @@ export default function Document({
     changeHighlightedRangeState
   ] = useState([null, null])
 
+  const [firstSequenceItem, setFirstSequenceItem] = useState(null)
+  const [secondSequenceItem, setSecondSequenceItem] = useState(null)
+
+  useEffect(() => {
+    setFirstSequenceItem(null)
+    setSecondSequenceItem(null)
+    changeHighlightedRangeState([null, null])
+    changeMouseDown(false)
+  }, [createRelationshipsMode])
+
   const changeHighlightedRange = ([first, last]) => {
-    if (first !== firstSelected && first !== null && firstSelected !== null) {
-      onLastPairClickedChanged([firstSelected, first])
-    }
+    if (createRelationshipsMode) return
     changeHighlightedRangeState([first, last])
     const highlightedItems = []
     for (let i = Math.min(first, last); i <= Math.max(first, last); i++)
@@ -111,7 +130,15 @@ export default function Document({
     <Container
       relationshipsOn={Boolean(relationships)}
       onMouseDown={() => changeMouseDown(true)}
-      onMouseUp={() => changeMouseDown(false)}
+      onMouseUp={() => {
+        if (createRelationshipsMode && firstSequenceItem) {
+          setFirstSequenceItem(null)
+          if (secondSequenceItem) {
+            setSecondSequenceItem(null)
+          }
+        }
+        changeMouseDown(false)
+      }}
     >
       {sequence.map((seq, i) => (
         <SequenceItem
@@ -128,10 +155,26 @@ export default function Document({
             }
           }}
           relationshipsOn={Boolean(relationships)}
-          onClick={e => e.stopPropagation()}
+          onMouseUp={e => {
+            if (!createRelationshipsMode) return
+            if (!secondSequenceItem) {
+              setFirstSequenceItem(null)
+              setSecondSequenceItem(null)
+              onCreateEmptyRelationship([firstSequenceItem, seq.textId])
+            } else {
+              setFirstSequenceItem(null)
+              setSecondSequenceItem(null)
+            }
+          }}
           onMouseDown={() => {
-            if (seq.label && !createRelationshipsMode) return
-            changeHighlightedRange([i, i])
+            if (createRelationshipsMode) {
+              if (!firstSequenceItem) {
+                setFirstSequenceItem(seq.textId)
+              }
+            } else {
+              if (seq.label) return
+              changeHighlightedRange([i, i])
+            }
           }}
           onMouseMove={() => {
             if (!mouseDown) return
@@ -145,7 +188,10 @@ export default function Document({
               }
             }
           }}
-          className={seq.label ? "label" : "unlabeled"}
+          className={classNames(
+            seq.label ? "label" : "unlabeled",
+            seq.text.trim().length > 0 && "notSpace"
+          )}
           color={
             seq.label
               ? seq.color || colorLabelMap[seq.label] || "#333"
@@ -164,7 +210,7 @@ export default function Document({
           ) : (
             <div>{seq.text}</div>
           )}
-          {seq.label && (
+          {seq.label && !createRelationshipsMode && (
             <LabeledText
               onClick={e => {
                 e.stopPropagation()
@@ -180,6 +226,14 @@ export default function Document({
           )}
         </SequenceItem>
       ))}
+      {firstSequenceItem && !secondSequenceItem && (
+        <ArrowToMouse
+          startAt={
+            ((sequenceItemPositionsRef.current || {})[firstSequenceItem] || {})
+              .offset
+          }
+        />
+      )}
       {relationships && (
         <RelationshipArrows
           onClickArrow={({ label, from, to }) => {