Text Annotation / Text Dragging with Mouse in Dash

sjpocket · September 24, 2020, 2:14pm

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 · September 25, 2020, 1:42am

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 · September 25, 2020, 6:09am

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 · September 25, 2020, 6:56am

You could take a look at the Keyboard component,

github.com

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

import React, {Component} from 'react';
import PropTypes from 'prop-types';

/**
 * The Keyboard component listens for keyboard events.
 */
export default class Keyboard extends Component {

    constructor(props) {
        super(props);
        this.keydownHandler = this.keydownHandler.bind(this);
    }

    keydownHandler(event) {
        if(!this.props.captureKeys || this.props.captureKeys.indexOf(event.key) > -1){
            this.props.setProps({keydown: this.props.eventProps.reduce(
                function(o, k) { o[k] = event[k]; return o; }, {})})
            this.props.setProps({n_keydowns: this.props.n_keydowns + 1})
        }
    }

This file has been truncated. show original

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

chriddyp · September 25, 2020, 4:01pm

Also see our documentation on dash.plotly.com:

fraschelle · January 12, 2023, 6:57am

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

Any progress in 2 years on that topic ?

Cheers

jinnyzor · January 12, 2023, 7:01am

Hello @sjpocket,

Welcome to the community!

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

fraschelle · January 12, 2023, 7:25am

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.

Topic		Replies	Views
Toolbox feature for Dash Dash Python community-components	1	73	April 2, 2024
Show-and-Tell - Dash Selectable Dash Python show-and-tell	1	767	July 5, 2021
Dash Shap Components Dash Python show-and-tell	5	3526	February 21, 2021
Dash ace editor component Dash Python show-and-tell , community-components	4	7780	January 7, 2022
In depth documentation Dash Python	2	12579	February 7, 2018

Text Annotation / Text Dragging with Mouse in Dash

Related Topics