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>
+ }