# Simulate span selection with javascript

**URL:** <https://support.prodi.gy/t/simulate-span-selection-with-javascript/6595>\
**Category:** Uncategorized\
**Tags:** front-end, spancat\
**Created:** [June 8, 2023, 7:55am UTC](https://support.prodi.gy/t/simulate-span-selection-with-javascript/6595 "2023-06-08T07:55:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrzykrzy](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/mrzykrzy/32/3530_2.png) [@mrzykrzy](https://support.prodi.gy/u/mrzykrzy)\
**Post date:** [June 8, 2023, 7:55am UTC](https://support.prodi.gy/t/simulate-span-selection-with-javascript/6595/1 "2023-06-08T07:55:08Z")

</div>

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 = """

  

  
Fruit banana strawberry kiwi  

  

  
Vegetables potato squash leek  

  
"""

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

Many thanks in advance!

---

<div class="post-metadata">

**Author:** ![koaning](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/koaning/32/230_2.png) [@koaning](https://support.prodi.gy/u/koaning)\
**Post date:** [June 8, 2023, 9:41am UTC](https://support.prodi.gy/t/simulate-span-selection-with-javascript/6595/2 "2023-06-08T09:41:42Z")

</div>

It seems that our documentation is missing a segment. If you look at [the ner\_manual interface](https://prodi.gy/docs/api-interfaces#ner_manual) 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.

```python
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
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](https://us1.discourse-cdn.com/flex020/uploads/prodigy/original/2X/3/3756a5a7eedc8756cfd9c44ea63bc04fcd182eec.gif)

Does this solve your problem?

---

<div class="post-metadata">

**Author:** ![mrzykrzy](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/mrzykrzy/32/3530_2.png) [@mrzykrzy](https://support.prodi.gy/u/mrzykrzy)\
**Post date:** [June 8, 2023, 2:10pm UTC](https://support.prodi.gy/t/simulate-span-selection-with-javascript/6595/3 "2023-06-08T14:10:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![koaning](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/koaning/32/230_2.png) [@koaning](https://support.prodi.gy/u/koaning)\
**Post date:** [June 8, 2023, 2:59pm UTC](https://support.prodi.gy/t/simulate-span-selection-with-javascript/6595/4 "2023-06-08T14:59:14Z")

</div>

Happy to hear it.

> [@mrzykrzy](#):
>
> but is there a way to nest dropdowns

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.