Text Annotation / Text Dragging with Mouse in Dash

[sjpocket]

Hi, I am working on a task which has some component of named entity recognition, and I was wondering if there is any feature in Dash where it allows interactive text annotation of intervals of words.
An example of what I would like to do is something like the image below (which is from Doccano, an NER labeling tool). I like the flexibility of Dash, and hence I would like to leverage Dash (instead of just using tools like Doccano or BRAT) but would need a mouse-highlighting event that could capture the fact that I am dragging from index x to index y and the ability to let people annotate this span of text, in order for it to work.

Thanks!

[chriddyp]

There isn’t a component that doesn’t this out of the box, but you could write your own Dash React component using JavaScript’s window.getSelection(); method.

[sjpocket]

Thank you very much for the direction @chriddyp!
I really would like to look into writing this dash react component, but I am not familiar to this (and I know just the very basics in javascript)

• I guess there is a way to write this react component in javascript and then call this within the Python Dash framework?
• Would you be able to point me to any sample links to these react components (and maybe how these components are called within python dash) so that I could get familiar with how this would be done?

[Emil]

You could take a look at the Keyboard component,

thedirtyfew/dash-extensions/blob/master/src/lib/components/Keyboard.react.js

In your case, you would capture selection(s) from window rather than keyboard events, but I guess the principle is the same.

[chriddyp]

@sjpocket

• Would you be able to point me to any sample links to these react components (and maybe how these components are called within python dash) so that I could get familiar with how this would be done?

Also see our documentation on dash.plotly.com:

• https://dash.plotly.com/react-for-python-developers
• Build Your Own Components | Dash for Python Documentation | Plotly

[fraschelle]

I’m really interested in exactly the same as you @sjpocket

Any progress in 2 years on that topic ?

Cheers

[jinnyzor]

Hello @sjpocket,

Welcome to the community!

Not sure if this would work for you, but have a look here:

spaCy natural language processing with Dash

spaCy is a popular natural language processing library that provides advanced features for tokenization, part-of-speech tagging, and dependency parsing. The spaCy docs on Visualizers shows how to use spaCy with Jupyter notebooks and other frameworks, but doesn’t show how easy it is to use with Dash. Here are the missing docs! If you create something cool - please post it in show-and-tell, or add your example here! Using spaCy natural language processing with Dash 1. Visualizing th…

[fraschelle]

Thank you @jinnyzor ! This spacy vizualizer is quite nice indeed

It is nevertheless not what I’m looking for. To visualise annotations is pretty easy I think (I even made a really simple implementation directly in the terminal or on Jupyter console, see nlp / iamVisAnnotating · GitLab for basic introduction).

What I’d like to do is to capture new annotations on a given text. So I need to somehow record mouse movements (clic-drag at least) and to capture the text underneath the highlighted area. What is quite strange to me is that even a simple terminal has highlighting facilities (I can highlight some text anywhere on the console) but I can’t find any documentation about that highlighting and/or the capture of the highlight. So I’m trying the other way : instead of using terminal, use a predefined window. The first guess before venturing too far would be to use app, such as Dash, to display and capture annotations inside a “quasi-controlled” window.

FYI: Problem with existing tools is that they generally rely on files (as BRAT or Docanno) or on web service (as hypothes.is), while we are working with sensible datas (health records from public hospital) that we must keep inside secure databases and preprocess on-demand. To my knowledge there is no open-source annotator that we can tune easily to do all of that.