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

@seankmartin seankmartin commented May 15, 2026

Copy link
Copy Markdown
Contributor

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.

Edit:
Will leave for now since will need to update for conflicts later anyway. But right now this is missing some data source changing listeners to show/hide accordions depending on the available data. E.g. if the segmentation layer actually has a mesh.

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

chrisj commented May 19, 2026

Copy link
Copy Markdown
Contributor

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

Comment thread src/widget/accordion.ts
import "#src/widget/accordion.css";
import { Tab } from "#src/widget/tab_view.js";

declare let NEUROGLANCER_USE_ACCORDIONS: boolean | undefined;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we could eliminate these build-time options for simplicity.

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.

4 participants