Skip to content

feat: add tab accordions to allow grouping controls within tabs#992

Open
seankmartin wants to merge 38 commits into
google:masterfrom
MetaCell:feat/tab-accordions
Open

feat: add tab accordions to allow grouping controls within tabs#992
seankmartin wants to merge 38 commits into
google:masterfrom
MetaCell:feat/tab-accordions

Conversation

@seankmartin
Copy link
Copy Markdown
Contributor

@seankmartin seankmartin commented May 15, 2026

This PR introduces accordion functionality to organise UI tabs into collapsible sections. The main change is an AccordionTab widget that extends the base Tab class and allows content to be grouped into expandable/collapsible sections with persistent state. The state is stored per layer, so individual layers can expand/collapse these sections independently of each other. This is currently in place for the rendering tab of images and segmentations, and the annotation tab.

Example
image

One important factor if neuroglancer adopts this PR is what the default behaviour should be. There are two main build flags which can control the accordions, unsure what the preferred default is. Overall these are designed to allow opting in or out of using accordions, and controlling their state. These are:

  1. NEUROGLANCER_USE_ACCORDIONS: default true. If True, visually shows accordions in the UI. Setting this to False should keep neuroglancer almost visually identically to if this PR was not in place. So essentially opting out of using accordions.
  2. NEUROGLANCER_ACCORDION_DEFAULT_EXPANDED: default false. If True, accordions all have a default state of being expanded. If False, each Accordion Tab holds setup options for all the accordion sections within the tab, and these options specify the default state of the section. For example, the current segmentation accordion setup options are:
new AccordionState({
      accordionJsonKey: SEGMENTATION_RENDERING_ACCORDION_JSON_KEY,
      sections: [
        {
          jsonKey: VISIBILITY_SECTION_JSON_KEY,
          displayName: "Visibility",
        },
        {
          jsonKey: APPEARANCE_SECTION_JSON_KEY,
          displayName: "Appearance",
          defaultExpanded: true,
          isDefaultKey: true,
        },
        {
          jsonKey: SLICE_SECTION_JSON_KEY,
          displayName: "Slice 2D",
        },
        {
          jsonKey: MESH_SECTION_JSON_KEY,
          displayName: "Mesh 3D",
        },
        {
          jsonKey: SKELETON_SECTION_JSON_KEY,
          displayName: "Skeletons",
        },
      ],
    }),

So the only section here which would be expanded by default if NEUROGLANCER_ACCORDION_DEFAULT_EXPANDED is false is the appearance section, because of defaultExpanded being true. isDefaultKey is a separate concept - in case an element is added to the accordion without specifying the section it should be in, then that element will go into the section marked as the default key.

For now I've left these flags as what we are using, but neuroglancer may want to change NEUROGLANCER_ACCORDION_DEFAULT_EXPANDED to true.

seankmartin and others added 30 commits September 2, 2025 18:00
Base styling of accordions for neuroglancer
@chrisj
Copy link
Copy Markdown
Contributor

chrisj commented May 19, 2026

I think this definitely has value, especially when creating a complex user shader with multiple ui controls.

I'll ask the designers in the AIBS apps team to take a look

My thoughts are:
This takes up some vertical space and adds more elements on the screen.
I think we should consider how to better utilize/encourage tool palettes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants