microsoft/react-text-annotator

A labeler component that Lays out text and overlays textual decorations like labels, predictions, and relations based on given data and handles user interactions on tokens.

react-text-annotator

react-text-annotator is a labeler component that:

• Lays out text and overlays textual decorations like labels, predictions, and relations based on given data.
• Handles user interactions on tokens.
• Is extensible to allow for custom rendering of tokens and decoration overlays.
• Is accessible to use with full keyboard interactions.

This labeler is character tokenized, meaning that it will break all text sent in its props to character level tokens. Tokens are split to lines based on line breaks in the original text and the maximum number of characters allowed in each line. The labeler also ensures that contiguous words in the original text are not split across multiple lines.

Examples

Here are some example of how to use the labeler component:

    const annotations: AnnotationData[] = [
        {
            id: 'id1',
            color: 'red',
            endToken: 15,
            startToken: 5,
            name: 'label',
            kind: 'label'
        },
        {
            id: 'id2',
            color: 'blue',
            endToken: 25,
            startToken: 10,
            name: 'relation',
            kind: 'relation'
        }
    ];

    const labelerText = 'This is sample text to test the labeler functionality.';

    return <Labeler text={labelerText} annotations={annotations} />;

the result is:

---

 const annotations: AnnotationData[] = [
        {
            id: 'id1',
            color: 'red',
            endToken: 15,
            startToken: 2,
            name: 'label',
            kind: 'label'
        }
    ];

    const labelerText = `اسمي محمد و اعمل لدى شركة ميكروسوفت`;

    return <Labeler text={labelerText} annotations={annotations} labelerConfigs={{ isRtl: true, tokenizationType: 'word' }} />;

the result is:

react-text-annotator's Issues

bug

Lack of question mark Solve it as soon as possible. Thank you.

Attn: Repo will be auto-archived on February 15th, 2024

The maintainers of this repository have left Microsoft. With no direct owner, it will be auto-archived on February 15th, 2024.

Pinging users with open issues to ensure they have seen this announcement:
@quhongli123
@te-microsoft
@SC-CTS
@omarsourour

Changing the state variables bound to text & annotation props will break the Labeler

Hi

I have a problem with the Labeler component: When I bind the text and annotations props to a state variable and then change the values of these states delayed, so first I change the text and a couple of seconds later I change the annotations, it will break internally. For some reason suddenly the tokenTocharMap passed to the useAnnotationIndexConverter is empty.

I have a reproduction here: https://stackblitz.com/edit/vitejs-vite-phfdpm?file=src/App.jsx

Use with vue 3

Hello there, would be possible to provide a small example on how to use with vue3 ?

does`t support fluentui v9

Hi, I have a project depends on this tool, but my project need to migrate to fluentui v9.
But react-text-annotator does`t support v9. Can we support fluentui v9.

Todo items for labeler

Some todo items! :)

High priority items

• Thorough documentation on the configuration props the labeler exposes.
• Thorough documentation on how to extend the labeler renderers and tokenizers with examples.
• Host a small app service containing a well designed demo page with example labeler usages.
  • With each example, add a short snippet of the code that enabled it to be.
  • Examples can be:
    • Happy scenario; English text with some labels, predictions, and relations.
    • Full document with labels, predictions and with virtualization enabled.
    • Showcase language support: Character tokenized languages (Ex: CJK) and RTL (Ex: Arabic)
    • Showcase rendering extensibility capabilities:
• The docs folder should be on the top level of the repo.
• The ReadMe file should organize the docs, many developers are interested in the architecture of tools.
  • You can even create a GitHub IO page for the labeler in the future 😍

Medium priority items:

• There is a luisAppSettings.js file. How is that relevant to the labeler? It contains configs for language services. It should be removed? If it is there for reason, I recommend a more generic name relevant to the labeler.
• The setupJest file contains configs that are not relevant to the labeler. Please remove them, ensuring only those for the labeler tests are included.
• Is the public folder there on purpose? If it is not, remove it.
  • If it is, it is actually a good idea to add code for a small app that users can run locally if they download the repo or fork it. Make sure this small app is excluded from the NPM package that gets installed though.