# Text Annotation / Text Dragging with Mouse in Dash **URL:** \ **Category:** Dash Python\ **Created:** [September 24, 2020, 2:14pm UTC](https://community.plotly.com/t/text-annotation-text-dragging-with-mouse-in-dash/45292 "2020-09-24T14:14:37Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![sjpocket](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@sjpocket](https://community.plotly.com/u/sjpocket)\ **Post date:** [September 24, 2020, 2:14pm UTC](https://community.plotly.com/t/text-annotation-text-dragging-with-mouse-in-dash/45292/1 "2020-09-24T14:14:37Z")
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. ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/a/aa65a7e0a7625fa60d0ecb33eb07d020b38b5d4f.png) Thanks! ---
**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\ **Post date:** [September 25, 2020, 1:42am UTC](https://community.plotly.com/t/text-annotation-text-dragging-with-mouse-in-dash/45292/2 "2020-09-25T01:42:46Z")
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. ---
**Author:** ![sjpocket](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@sjpocket](https://community.plotly.com/u/sjpocket)\ **Post date:** [September 25, 2020, 6:09am UTC](https://community.plotly.com/t/text-annotation-text-dragging-with-mouse-in-dash/45292/4 "2020-09-25T06:09:47Z")
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? ---
**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\ **Post date:** [September 25, 2020, 6:56am UTC](https://community.plotly.com/t/text-annotation-text-dragging-with-mouse-in-dash/45292/5 "2020-09-25T06:56:21Z")
You could take a look at the Keyboard component, > In your case, you would capture selection(s) from window rather than keyboard events, but I guess the principle is the same. ---
**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\ **Post date:** [September 25, 2020, 4:01pm UTC](https://community.plotly.com/t/text-annotation-text-dragging-with-mouse-in-dash/45292/6 "2020-09-25T16:01:24Z")
> [@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](http://dash.plotly.com): ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/8/8269dcf350ff7f2f86e54296651b19610ad50866.png) - [https://dash.plotly.com/react-for-python-developers](https://dash.plotly.com/react-for-python-developers) - [Build Your Own Components | Dash for Python Documentation | Plotly](https://dash.plotly.com/plugins) ---
**Author:** ![fraschelle](https://avatars.discourse-cdn.com/v4/letter/f/eb9ed0/32.png) [@fraschelle](https://community.plotly.com/u/fraschelle)\ **Post date:** [January 12, 2023, 6:57am UTC](https://community.plotly.com/t/text-annotation-text-dragging-with-mouse-in-dash/45292/7 "2023-01-12T06:57:52Z")
I’m really interested in exactly the same as you @sjpocket 🙂 Any progress in 2 years on that topic ? Cheers 🙂 ---
**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\ **Post date:** [January 12, 2023, 7:01am UTC](https://community.plotly.com/t/text-annotation-text-dragging-with-mouse-in-dash/45292/8 "2023-01-12T07:01:52Z")
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](https://community.plotly.com/t/spacy-natural-language-processing-with-dash/70923): > > 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](https://spacy.io/usage/visualizers) shows how to use spaCy with Jupyter notebooks and other frameworks, but doesn’t show how easy it is to use with Dash. tada 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…](https://spacy.io/usage/visualizers#dep) ---
**Author:** ![fraschelle](https://avatars.discourse-cdn.com/v4/letter/f/eb9ed0/32.png) [@fraschelle](https://community.plotly.com/u/fraschelle)\ **Post date:** [January 12, 2023, 7:25am UTC](https://community.plotly.com/t/text-annotation-text-dragging-with-mouse-in-dash/45292/9 "2023-01-12T07:25:23Z")
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](https://framagit.org/nlp/iamvisannotating) 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.