Simulate span selection with javascript

Hi there,

I'm making a customisable interface and want to include dropdowns for my span labels.
I've read all the discussions on the downsides of having too many labels but I'd like to rearrange my labels in a way which fits with our current annotation system.
In my custom recipe, I've included custom CSS and HTML which works but I'm struggling with the JavaScript and wondering if what I'm trying to do is possible.
Having tested the examples given on the documentation and given in previous discussions, I think (?) I'm not referencing the right internals.

I'm using spans to label my data but instead of using the span buttons, I would like to use a dropdown and hide the span labels.
I would like to simulate the selection of a span label when the corresponding text in the dropdown is selected. Is that possible? If so, would it be possible to know what internals to reference (apologies my JavaScript is pretty basic).

Here's just a simple example of the span labels/html and css that mimics what I have in my recipe.

span_labels = ["banana", "strawberry", "kiwi", "potato", "squash", "leek"]

HTML_TEMPLATE = """








"""

CSS = """
.prodigy-title{
display: none;
}
"""

Many thanks in advance!

It seems that our documentation is missing a segment. If you look at the ner_manual interface you'll see that there is a configuration for a dropdown via the label_style parameter. This is also available for the spans_manual interface, but the docs are missing a segment.

When you use this in a custom recipe (or in a prodigy.json) then you'll be able to configure a dropdown. Here's an example with a custom recipe.

import spacy 
import srsly
from prodigy.components.preprocess import add_tokens
from pathlib import Path
import prodigy

@prodigy.recipe(
    "my-custom-recipe",
    dataset=("Dataset to save answers to", "positional", None, str),
    file_in=("Input file", "positional", None, Path),
)
def my_custom_recipe(dataset, file_in):
    # Load your own streams from anywhere you want
    stream = srsly.read_jsonl(file_in)
    nlp = spacy.blank("en")

    return {
        "dataset": dataset,
        "view_id": "spans_manual",
        "stream": add_tokens(nlp, stream),
        "config":{
            "labels": ["foo", "bar", "buz"],
            "label_style": "dropdown"
        }
    }

When I run it via this call:

python -m prodigy my-custom-recipe issue-6595 ../news_headlines.jsonl -F recipe.py

I get this interface:

CleanShot 2023-06-08 at 11.40.55

Does this solve your problem?

Hi @koaning, thank you so much for the quick response. It does solve the problem.

Just last question from me,
I think the answer is no to this but is there a way to nest dropdowns? e.g. have two dropdowns for different groups of span labels?

Thanks again in advance

Happy to hear it.

That's not supported, no. Part of the reasoning is that these interfaces should be kept as simple as possible to keep the mental burden at bay. We might revisit some of this in Prodigy v2 though.