mcamac / react-text-annotate Goto Github PK
View Code? Open in Web Editor NEWReact components for interactively highlighting parts of text.
Home Page: https://mcamac.github.io/react-text-annotate
License: MIT License
React components for interactively highlighting parts of text.
Home Page: https://mcamac.github.io/react-text-annotate
License: MIT License
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?
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!
Is it possible to do annotate based on character position as currently, we do based on word position in start and end
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!
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)
renderMark
for TextAnnotatorHi, 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.
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>
)
}
}
I need this to work on mobile devices also. Are there any plans or suggestions for how to achieve this? Thanks!
I need custom styling for mark which highlights the text, is there anyway i can do that?
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)
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!
I am thinking to use this really cool react library but I dont know what license this software has.
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!
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
Is there any way to use this to annotate a section of HTML that has tags, rather than just a plain text string? Thanks!
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.
Is there a way to keep the paragraphs separated as it before highlighted.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.