mcamac / react-text-annotate

React components for interactively highlighting parts of text.

react-text-annotate

A React component for interactively highlighting parts of text.

Usage

React 16.8.0 or higher is required as a peer dependency of this package.

npm install --save react-text-annotate

Docs

Examples

A simple controlled annotation.

import {TokenAnnotator, TextAnnotator} from 'react-text-annotate'

<TokenAnnotator
  tokens={['My', 'text', 'needs', 'annotating', 'for', 'NLP', 'training']}
  value={[{start: 5, end: 6, tag: 'TOPIC', color: '#EEE'}]}
/>

react-text-annotate's Issues

How do I draw annotations for a simple sentence

I'm trying to use this just to draw annotations on text from an NER tagger. I have span, offset, and tag for text - which would just be rendered by this tool. There are multiple tags, (person, location...) and they would all be rendered on the same line. I believe I would be using your TextAnnotator as opposed to the token annotator as the spans and offsets are for the original text. It's not clear how to use this tool for that. I think it could be quite useful, but there are not enough examples or documentation.

Could you show how I would use this to render this simple text.

text="Mary lives in Oklahoma and works at Kaiser"
with span and offsets
a=[{start :0 ,end:4, tag : "Person"},{start :15, end:22, tag: "Location"},{start:37,end:42,tag:"Organization"}]

all 3 tags would be rendered in the same sentence (possibly with different colors). Again, I believe this would be using the TextAnnotator.

Thanks!

Cannot annotate using mobile devicce

Hi @mcamac,

thanks for providing this React module!

I use your TokenAnnotator component in a Web app.

My issue is that I cannot annotate text when accessing the App from a mobile device:

I've tested this manually using Chrome (Version 95.0.4638.69) on macOS.

Any idea how I can enable annotation on mobile devices?

Thanks a lot in advance!

[Question] Is it possible to stop user annotate of text by passing prop

can we pass a prop like stopAnnotate={false} so that the users dont be able to annotate the text themself, the annotation be only done by the json data received from server

Type is not assignable to type Tokenspan

I am getting this type error when passing tag in value
value={[{start: 5, end: 6, tag: 'TOPIC', color: '#EEE'}]}
Type '{ start: number; end: number; tag: string; color: string; }' is not assignable to type 'TokenSpan'.
Object literal may only specify known properties, and 'tag' does not exist in type 'TokenSpan'.ts(2322)

Is there any way to override the mark style?

I need custom styling for mark which highlights the text, is there anyway i can do that?

After highlighting, tokens are squished together if token is paragraph

Is there a way to keep the paragraphs separated as it before highlighted.

Custom mark render function `renderMark` should be in documentation

Thanks for this awesome library!

I meant to do some customization on the mark UI and just forked this library. I found out that there is a custom render function :

renderMark={props => (
                <mark
                  key={props.key}
                  onClick={() => props.onClick({start: props.start, end: props.end})}
                >
                  {props.content} [{props.tag}]
                </mark>
              )}

It is very useful for further customization, and it would be very nice to demo this example on the documentation.

Thanks a lot! Sincerely.

how to set default value of tag and value based on an input from an another app

In my below code. I have set initial state values (tag and value under public state) to empty. As per your code, these values currently changes based on the react select option (handlechange and handletagchange class) . But, i am also getting some input values from an upstream streamlit app and i want to use these values to set the initial values of state i.e for 'value' :(init_value) and 'tag' :(firsttag) - (please refer to variables after public render). Then later i want to change these default change based on the selection from the react select (handle change and handle tag change). Can some one help how to do that?

import {
  Streamlit,
  StreamlitComponentBase,
  withStreamlitConnection,
} from "streamlit-component-lib"
import React, { ReactNode } from "react"
import {TokenAnnotator, TextAnnotator} from 'react-text-annotate'
//import _ from 'lodash'
//import { Label } from 'semantic-ui-react'


const Card = ({children}:any) => (
  <div
    style={{
      boxShadow: '0 2px 4px rgba(0,0,0,.1)',
      margin: 6,
      maxWidth: 500,
      padding: 16,
    }}
  >
    {children}
  </div>
)

/**
 * This is a React-based component template. The `render()` function is called
 * automatically when your component should be re-rendered.
 */

class NlpAnnotate extends StreamlitComponentBase {
  
  public state = {value: [], tag: ''}
 
  handleChange = (value:any) => {
    this.setState({value})
  }

  handleTagChange = (e:any) => {
    this.setState({tag: e.target.value})
  }
  
  public render = (): ReactNode => {
  
    const TEXT = this.props.args["text"]
    const options = this.props.args["options"]
    const init_value:any = []
    var first = options[0]
    const firsttag = first.value
    
    
    const TAG_COLORS:any = {};
    for (var i = 0; i < options.length; i++) {TAG_COLORS[options[i].label] = options[i].color;}
    
    return (
        <div style={{padding: 24, fontFamily: 'IBM Plex Sans'}}>
        <div style={{display: 'flex', flexDirection: 'column', marginBottom: 24}}>
          <Card>
            <h4>Text for annotation</h4>
            <select onChange={this.handleTagChange} value={this.state.tag}>
                {options.map((option:any) => (
                <option value={option.value}>{option.label}</option>
                ))}
            </select>
            <TextAnnotator
              style={{
                fontFamily: 'IBM Plex Sans',
                maxWidth: 500,
                lineHeight: 1.5,
              }}
              content={TEXT}
              value={this.state.value}
              onChange={this.handleChange}
              getSpan={(span:any) => ({
                ...span,
                tag: this.state.tag,
                color: TAG_COLORS[this.state.tag],
              })}
            />
          </Card>
        </div>
        
        <Card>
          <h4>Json String</h4>
          <pre>{JSON.stringify({TEXT},null,2)}</pre>
          <pre>{JSON.stringify(this.state.value, null, 2)}</pre>
        </Card>
        <button
            onClick={() => Streamlit.setComponentValue(JSON.stringify(this.state.value, null, 2))}
        >
        save
        </button>
      </div>
    )
  }
}

// "withStreamlitConnection" is a wrapper function. It bootstraps the
// connection between your component and the Streamlit app, and handles
// passing arguments from Python -> Component.
//
// You don't need to edit withStreamlitConnection (but you're welcome to!).
export default withStreamlitConnection(NlpAnnotate)

[Question] Token position based on character position

Is it possible to do annotate based on character position as currently, we do based on word position in start and end

Annotate HTML

Is there any way to use this to annotate a section of HTML that has tags, rather than just a plain text string? Thanks!

Display Labels side by side (with the different colors) instead of a list

Hi is there a way to change the labels display. instead of showing it as a list, can we pass it as an args along with prefered color and the span should display the colored labels side by side on top of the text? because its always difficult to annoate the text by selecting the various labels from the drop down - especially if you have a long list of labels. Attached a sample span for your reference.

dependency issues in react

Dealing with many issues while installing the "react-text-annotate" using npm. There are several version compatibility issues. Please specify the compatibility versions also with react and react-dom. Thanks!

[Question]

Hello, thanks for contributing this code!

I plan on using it for a demo. Seeing your example, I cannot quite understand the difference between
TextAnnotator and TokenAnnotator Do you mind explaining and/or adding some documentation around this?

Thanks!

Custom `renderMark` for TextAnnotator

Custom renderMark for TextAnnotator

Hi, I could be mistaken, but am I right in thinking, that it is possible to implement a custom renderMark optionally passed through props to the TextAnnotator component?

I am looking to implement a popover menu that appears above the selection and for that it would be useful for me to be able to pass a custom mark.

Example

is modifying TextAnnotator like so feasible?

class TextAnnotator extends React.Component<TextAnnotatorProps, {}> {
  static defaultProps = {
    renderMark: props => <Mark {...props} />,
  }

  // ...

  render() {
    const {content, value, style} = this.props
    const splits = splitWithOffsets(content, value)
    return (
      <div style={style} ref={this.rootRef}>
        {splits.map((split, i) =>
          split.mark ? (
            renderMark({
              key: `${split.start}-${split.end}`,
              ...split,
              onClick: this.handleSplitClick,
            })
          ) : (
            <Split key={`${split.start}-${split.end}`} {...split} onClick={this.handleSplitClick} />
          )
        )}
      </div>
    )
  }
}

Mobile-friendly?

I need this to work on mobile devices also. Are there any plans or suggestions for how to achieve this? Thanks!

[Question] Is it possible to annotate relations between entities?

Hi,

Thanks for the work! I have a simple question. Once a user marks spans, is it possible to also relate them through some predefined relation types such as dependency relations, for instance?

License?

I am thinking to use this really cool react library but I dont know what license this software has.