Formatting of Select options

Is it possible to format or indent the available selections in a Select widget? My code has a Select widget which is used to select a geographical region from which to plot sea ice data. The main regions are the northern hemisphere, the southern hemisphere, and a global index. The northern and southern hemispheres have subregion selections underneath their selections. Here’s the Select widget from my code:

area_selector = Select(title="Area:", value="NH",
                       options=[("NH", "Northern Hemisphere"),
                                ("bar", "Barents Sea"),
                                ("beau", "Beaufort Sea"),
                                ("chuk", "Chukchi Sea"),
                                ("ess", "East Siberian Sea"),
                                ("fram", "Fram Strait-NP"),
                                ("kara", "Kara Sea"),
                                ("lap", "Laptev Sea"),
                                ("sval", "Svalbard-NIS"),
                                ("SH", "Southern Hemisphere"),
                                ("bell", "Amundsen-Bellingshausen Sea"),
                                ("indi", "Indian Ocean"),
                                ("ross", "Ross Sea"),
                                ("wedd", "Weddell Sea"),
                                ("wpac", "Western Pacific Ocean"),
                                ("GLOBAL", "Global")])

I want to make it more apparent that these are subregions of said regions by indenting them, and I tried simply adding a couple of spaces in front of the options as such:

area_selector = Select(title="Area:", value="NH",
                       options=[("NH", "Northern Hemisphere"),
                                ("bar", "  Barents Sea"),
                                ("beau", "  Beaufort Sea"),
                                ("chuk", "  Chukchi Sea"),
                                ("ess", "  East Siberian Sea"),
                                ("fram", "  Fram Strait-NP"),
                                ("kara", "  Kara Sea"),
                                ("lap", "  Laptev Sea"),
                                ("sval", "  Svalbard-NIS"),
                                ("SH", "Southern Hemisphere"),
                                ("bell", "  Amundsen-Bellingshausen Sea"),
                                ("indi", "  Indian Ocean"),
                                ("ross", "  Ross Sea"),
                                ("wedd", "  Weddell Sea"),
                                ("wpac", "  Western Pacific Ocean"),
                                ("GLOBAL", "Global")])

However, Bokeh ignores the preceeding white space. Is there any way to indent these subregions? If not, are there perhaps other ways to make the parent regions look different from the subregions?

Dictionaries can be used to define option groups:

from bokeh.models import Select
from bokeh.plotting import show

opts = {
   "Northern Hemisphere": [
        ("NH", "Northern Hemisphere"),
        ("bar", "Barents Sea"),
        ("beau", "Beaufort Sea"),
        ("chuk", "Chukchi Sea"),
        ("ess", "East Siberian Sea"),
        ("fram", "Fram Strait-NP"),
        ("kara", "Kara Sea"),
        ("lap", "Laptev Sea"),
        ("sval", "Svalbard-NIS"),
    ],
    "Southern Hemisphere": [
        ("SH", "Southern Hemisphere"),
        ("bell", "Amundsen-Bellingshausen Sea"),
        ("indi", "Indian Ocean"),
        ("ross", "Ross Sea"),
        ("wedd", "Weddell Sea"),
        ("wpac", "Western Pacific Ocean"),
    ],
    "Global": [
        ("GLOBAL", "Global"),
    ]
}

select = Select(title="Area:", value="NH", options=opts)

show(select)

Yields the result:

Screenshot 2023-01-26 at 15.11.46396×696 46.8 KB

Excellent! Thanks for the help

Wow TIL! This is great!

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.