Merge pull request UniversalDataTool#9 from UniversalDataTool/feat/workspace-and-more

Integrate React Material Workspace and Introduce Entity Relations

Author: seveibar

package.json

@@ -3,8 +3,11 @@
  "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",
  "use-event-callback": "^0.1.0"
  },
  "scripts": {

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

@@ -1,15 +1,73 @@
 // @flow
 
-import React, { useState } from "react"
-import type { SequenceItem } from "../../types"
-import { makeStyles } from "@material-ui/styles"
+import React, { useState, useRef, useEffect } from "react"
+import type {
+ SequenceItem as SequenceItemData,
+ 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 classNames from "classnames"
 
-const useStyles = makeStyles({})
+const Container = styled("div")(({ relationshipsOn }) => ({
+ lineHeight: 1.5,
+ marginTop: relationshipsOn ? 64 : 0,
+ display: "flex",
+ 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<SequenceItem>,
+ sequence: Array<SequenceItemData>,
+ relationships: Array<Relationship>,
  canModifySequence?: boolean,
  onSequenceChange?: (Array<SequenceItem>) => any,
  onHighlightedChanged?: (Array<number>) => any,
@@ -19,17 +77,39 @@ type Props = {
 
 export default function Document({
  sequence,
+ relationships,
  onHighlightedChanged = () => null,
+ onCreateEmptyRelationship = () => null,
  onSequenceChange = () => null,
+ onRelationshipsChange = () => null,
  nothingHighlighted = false,
+ createRelationshipsMode = false,
  colorLabelMap = {}
 }: Props) {
+ const sequenceItemPositionsRef = useRef({})
  const [mouseDown, changeMouseDown] = useState()
+ const [timeoutCalled, cancelTimeout, resetTimeout] = useTimeout(30) // Force rerender after mounting
+ const windowSize = useWindowSize()
+ useEffect(() => {
+ resetTimeout()
+ }, [windowSize])
  const [
  [firstSelected, lastSelected],
  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 (createRelationshipsMode) return
  changeHighlightedRangeState([first, last])
  const highlightedItems = []
  for (let i = Math.min(first, last); i <= Math.max(first, last); i++)
@@ -47,55 +127,79 @@ export default function Document({
  }
 
  return (
- <div
+ <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) => (
- <span
- key={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
+ }
+ }
+ }}
+ 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 (seq.label) return
- changeHighlightedRange([i, i])
+ if (createRelationshipsMode) {
+ if (!firstSequenceItem) {
+ setFirstSequenceItem(seq.textId)
+ }
+ } else {
+ if (seq.label) 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
+ ])
+ }
  }
  }}
- style={
+ className={classNames(
+ seq.label ? "label" : "unlabeled",
+ seq.text.trim().length > 0 && "notSpace"
+ )}
+ color={
  seq.label
- ? {
- display: "inline-flex",
- backgroundColor:
- seq.color || colorLabelMap[seq.label] || "#333",
- color: "#fff",
- padding: 4,
- margin: 4,
- paddingLeft: 10,
- paddingRight: 10,
- borderRadius: 4,
- userSelect: "none"
- }
- : {
- display: "inline-flex",
- backgroundColor:
- seq.text !== " " && highlightedItems.includes(i)
- ? "#ccc"
- : "inherit",
- color: "#333",
- marginTop: 4,
- marginBottom: 4,
- paddingTop: 4,
- paddingBottom: 4,
- paddingLeft: 2,
- paddingRight: 2,
- userSelect: "none"
- }
+ ? seq.color || colorLabelMap[seq.label] || "#333"
+ : !createRelationshipsMode &&
+ seq.text !== " " &&
+ highlightedItems.includes(i)
+ ? "#ccc"
+ : "inherit"
  }
  key={i}
  >
@@ -106,35 +210,46 @@ export default function Document({
  ) : (
  <div>{seq.text}</div>
  )}
- {seq.label && (
- <div
- onClick={() => {
+ {seq.label && !createRelationshipsMode && (
+ <LabeledText
+ onClick={e => {
+ e.stopPropagation()
  onSequenceChange(
  sequence
  .flatMap(s => (s !== seq ? s : stringToSequence(s.text)))
  .filter(s => s.text.length > 0)
  )
  }}
- style={{
- 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)"
- }}
  >
  <span>{"\u2716"}</span>
- </div>
+ </LabeledText>
  )}
- </span>
+ </SequenceItem>
  ))}
- </div>
+ {firstSequenceItem && !secondSequenceItem && (
+ <ArrowToMouse
+ startAt={
+ ((sequenceItemPositionsRef.current || {})[firstSequenceItem] || {})
+ .offset
+ }
+ />
+ )}
+ {relationships && (
+ <RelationshipArrows
+ onClickArrow={({ label, from, to }) => {
+ onRelationshipsChange(
+ relationships.filter(
+ r => !(r.from === from && r.to === to && r.label === label)
+ )
+ )
+ }}
+ positions={sequenceItemPositionsRef.current}
+ arrows={relationships.map((a, i) => ({
+ ...a,
+ color: a.color || colors[i % colors.length]
+ }))}
+ />
+ )}
+ </Container>
  )
 }