relationship annotator completely integrated

Author: seveibar

src/components/Document/index.js

@@ -16,7 +16,7 @@ import classNames from "classnames"
 
 const Container = styled("div")(({ relationshipsOn }) => ({
   lineHeight: 1.5,
-  marginTop: 64,
+  marginTop: relationshipsOn ? 64 : 0,
   display: "flex",
   flexWrap: "wrap"
 }))

src/components/NLPAnnotator/index.js

@@ -5,13 +5,20 @@ import React, { useState, useEffect, useMemo } from "react"
 import type { NLPAnnotatorProps } from "../../types"
 import SequenceAnnotator from "../SequenceAnnotator"
 import DocumentLabeler from "../DocumentLabeler"
+import RelationshipAnnotator from "../RelationshipAnnotator"
 import Transcriber from "../Transcriber"
 import colors from "../../colors"
 import Container from "../Container"
 import useEventCallback from "use-event-callback"
 
 const defaultValidator = () => []
 
+const addColors = inputLabels => {
+  return (inputLabels || []).map((label, i) =>
+    label.color ? label : { ...label, color: colors[i % colors.length] }
+  )
+}
+
 export default function NLPAnnotator(props: NLPAnnotatorProps) {
   const validator = props.validator || defaultValidator
   let [output, changeOutput] = useState(null)
@@ -22,6 +29,12 @@ export default function NLPAnnotator(props: NLPAnnotatorProps) {
   if (output === null && props.type === "label-sequence") {
     output = props.initialSequence || [{ text: props.document }]
   }
+  if (output === null && props.type === "label-relationships") {
+    output = {
+      sequence: props.initialSequence,
+      relationships: props.initialRelationships
+    }
+  }
 
   useEffect(() => {
     const eventFunc = e => {
@@ -40,22 +53,18 @@ export default function NLPAnnotator(props: NLPAnnotatorProps) {
     changeOutput(newOutput)
   }
 
-  let labels = useMemo(() => {
-    let labels = props.labels || []
-    if (!labels.some(l => !l.color)) {
-      labels = labels.map((l, i) => ({
-        ...l,
-        color: colors[i % colors.length]
-      }))
-    }
-    return labels
-  }, [props.labels])
+  let labels = useMemo(() => addColors(props.labels), [props.labels])
+  let entityLabels = useMemo(() => addColors(props.entityLabels), [
+    props.entityLabels
+  ])
+  let relationshipLabels = useMemo(() => addColors(props.relationshipLabels), [
+    props.relationshipLabels
+  ])
 
   const isPassingValidation = !validator(output).some(msg =>
     msg.toLowerCase().includes("error")
   )
 
-  console.log({ output })
   const onFinish = useEventCallback(() => {
     if (!isPassingValidation) return
     console.log("onFinish", output)
@@ -73,6 +82,7 @@ export default function NLPAnnotator(props: NLPAnnotatorProps) {
   })
 
   let annotator
+  console.log("props.type", props.type)
   switch (props.type) {
     case "label-sequence":
       annotator = (
@@ -87,6 +97,16 @@ export default function NLPAnnotator(props: NLPAnnotatorProps) {
     case "transcribe":
       annotator = <Transcriber {...props} onChange={onChange} />
       break
+    case "label-relationships":
+      annotator = (
+        <RelationshipAnnotator
+          {...props}
+          entityLabels={entityLabels}
+          relationshipLabels={relationshipLabels}
+          onChange={onChange}
+        />
+      )
+      break
     default:
       annotator = null
   }

src/components/NLPAnnotator/index.story.js

@@ -78,3 +78,34 @@ storiesOf("NLPAnnotator", module)
       onFinish={action("onFinish")}
     />
   ))
+  .add("Relationship Labeler", () => (
+    <NLPAnnotator
+      hotkeysEnabled
+      onChange={action("onChange")}
+      onFinish={action("onFinish")}
+      onNext={action("onNext")}
+      onPrev={action("onPrev")}
+      type="label-relationships"
+      document={`Lorem ipsum dolor sit amet.`}
+      entityLabels={[
+        {
+          id: "noun",
+          displayName: "Noun"
+        },
+        {
+          id: "proper-noun",
+          displayName: "Proper Noun"
+        }
+      ]}
+      relationshipLabels={[
+        {
+          id: "eaten by",
+          displayName: "Eaten By"
+        },
+        {
+          id: "lives in",
+          displayName: "Lives In"
+        }
+      ]}
+    />
+  ))

src/components/RelationshipAnnotator/index.js

@@ -29,6 +29,7 @@ const LabelSelectorContainer = styled("div")({ display: "flex" })
 export default function RelationshipAnnotator(
   props: RelationshipAnnotatorProps
 ) {
+  console.log({ props })
   const [highlightedItems, changeHighlightedItems] = useState([])
   const [relationships, setRelationships] = useState(props.relationships || [])
   const [activePair, setActivePair] = useState(null)
@@ -52,7 +53,9 @@ export default function RelationshipAnnotator(
       (props.entityLabels || [])
         .concat(props.relationshipLabels)
         .reduce(
-          (acc, l, i) => ((acc[l.id] = colors[i % colors.length]), acc),
+          (acc, l, i) => (
+            (acc[l.id] = l.color || colors[i % colors.length]), acc
+          ),
           {}
         ),
     [props.entityLabels, props.relationshipLabels]

src/types.js

@@ -49,10 +49,10 @@ export type RelationshipAnnotatorProps = {
   type: "label-relationships",
   hotkeysEnabled?: boolean,
   separatorRegex?: RegExp,
-  relationships: Array<Relationship>,
   entityLabels?: Array<Label>,
   relationshipLabels?: Array<Label>,
   initialSequence?: Array<SequenceItem>,
+  initialRelationships?: Array<Relationship>,
   document: string,
   onChange: ({
     sequence: Array<SequenceItem>,
@@ -74,7 +74,8 @@ export type NLPAnnotatorProps = {
   ...
     | $Exact<SequenceAnnotatorProps>
     | $Exact<LabelDocumentProps>
-    | $Exact<TranscriberProps>,
+    | $Exact<TranscriberProps>
+    | $Exact<RelationshipAnnotatorProps>,
   onNext?: Function,
   onPrev?: Function,
   titleContent?: string | ReactNode,
@@ -99,3 +100,9 @@ export type Output =
       initialTranscriptionText?: string,
       transcription: string
     }
+  | {
+      outputType: "label-relationships",
+      document: string,
+      sequence: Array<SequenceItem>,
+      relationships: Array<Relationship>
+    }