Feat/tab accordions #115
Feat/tab accordions #115
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR introduces accordion functionality to organize UI tabs into collapsible sections. The implementation adds an AccordionTab widget that extends the base Tab class and allows content to be grouped into expandable/collapsible sections with persistent state management.
Key changes include:
- Created a new accordion component with state management and CSS styling
- Updated layer tabs to use accordion organization instead of flat layout
- Added section keys to layer controls to specify which accordion section they belong to
Reviewed Changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/widget/accordion.ts | New accordion component implementation with state management |
| src/widget/accordion.css | Styling for accordion UI elements |
| src/widget/layer_control.ts | Added optional sectionKey property to layer control options |
| src/ui/segmentation_display_options_tab.ts | Updated to use AccordionTab with section organization |
| src/ui/layer_data_sources_tab.ts | Updated to use AccordionTab for data source organization |
| src/ui/annotations.ts | Updated annotation UI to use accordion sections |
| src/layer/segmentation/layer_controls.ts | Added section keys for segmentation controls |
| src/layer/segmentation/index.ts | Added accordion state management to segmentation layers |
| src/layer/index.ts | Added source accordion state to base UserLayer |
| src/layer/image/index.ts | Updated image layer rendering tab to use accordion |
| src/layer/annotation/index.ts | Updated annotation layer to use accordion sections |
| python/neuroglancer/viewer_state.py | Added Python bindings for accordion state |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| @@ -472,20 +474,20 @@ export class AnnotationLayerView extends Tab { | |||
| mutableControls.appendChild(ellipsoidButton); | |||
| const helpIcon = makeIcon({ | |||
| title: | |||
| "The left icons allow you to select the type of the anotation. Color and other display settings are available in the 'Rendering' tab.", | |||
| "The left icons allow you to select the type of the annotation. Color and other display settings are available in the 'Rendering' tab.", | |||
There was a problem hiding this comment.
Fixed typo: 'anotation' should be 'annotation'
Copilot uses AI. Check for mistakes.
| @@ -522,14 +530,15 @@ export class LayerDataSourcesTab extends Tab { | |||
| const { layerTypeElement } = this; | |||
| layerTypeElement.textContent = layerConstructor.type; | |||
| layerTypeDetection.title = | |||
| "Click here or press enter in the data source URL input box to create as " + | |||
| `${layerConstructor.type} layer`; | |||
| "Click here to create as " + `${layerConstructor.type} layer`; | |||
There was a problem hiding this comment.
[nitpick] The tooltip text was simplified and the 'or press enter in the data source URL input box' instruction was removed, which may reduce user guidance on available interaction methods.
| "Click here to create as " + `${layerConstructor.type} layer`; | |
| `Click here or press Enter in the data source URL input box to create as ${layerConstructor.type} layer`; |
Copilot uses AI. Check for mistakes.
No description provided.