Skip to content

Collapsible side panels and inline glyph rename - #454

Merged
cjmyers merged 5 commits into
finalfrom
pr/side-panels
Jul 22, 2026
Merged

Collapsible side panels and inline glyph rename#454
cjmyers merged 5 commits into
finalfrom
pr/side-panels

Conversation

@travisformayor

Copy link
Copy Markdown
Contributor

Sidebars were fixed-width with glyphs in a toolbar menu. Panels now collapse to a rail and resize by drag and the glyph menu is a palette. You can also rename a glyph by double clicking its label on the canvas, letting you get the initial design down without needing to expand the info side panel.

  • Add SidePanelComponent that can collapse to a rail and resize on drag
  • Side panels overlap the canvas instead of moving it
  • Replace the toolbar glyph menu with a searchable palette
  • Palette sections auto-expand when the search phrase matches a glyph inside
  • Floating canvas widgets (zoom controls, problems, hierarchy) move with panel width resizing
  • Double clicking a glyph's label allows renaming it

Closes #438

@github-actions

Copy link
Copy Markdown

Azure Static Web Apps: Your stage site is ready! Visit it here: https://blue-flower-0c36fd81e-454.westus2.5.azurestaticapps.net

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

This PR modernizes the SBOLCanvas workspace layout by replacing fixed Angular Material sidebars with a custom collapsible/resizable side-panel system that overlays the canvas, introduces a searchable glyph palette, and adds inline glyph renaming via mxGraph label editing.

Changes:

  • Added SidePanelComponent + CollapsibleSectionComponent to support collapsible rails and drag-resizable overlay panels.
  • Replaced the old GlyphMenuComponent + SearchfilterPipe approach with a palette-driven glyph grid (service-backed dicts + drag-source directive).
  • Updated floating canvas widgets positioning (zoom/problems/hierarchy) to track panel widths via CSS variables; added inline glyph label rename handling in GraphService.

Reviewed changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
SBOLCanvasFrontend/src/styles.scss Adds global resizing affordances (disables selection/pointer events during panel drag; suppresses widget transitions).
SBOLCanvasFrontend/src/app/zoom-controls/zoom-controls.component.css Moves zoom controls based on --left-panel-w and animates left offset.
SBOLCanvasFrontend/src/app/problems/problems.component.css Moves problems widget based on --right-panel-w and animates right offset.
SBOLCanvasFrontend/src/app/hierarchy-preview/hierarchy-preview.component.css Moves hierarchy widget based on --right-panel-w and animates right offset.
SBOLCanvasFrontend/src/app/side-panel/side-panel.component.ts New collapsible/resizable side panel controller logic (toggle, search forwarding, pointer resizing).
SBOLCanvasFrontend/src/app/side-panel/side-panel.component.scss New side-panel styling including rail mode, title bar, and resize grabber.
SBOLCanvasFrontend/src/app/side-panel/side-panel.component.html New side-panel template including rail chips, search box, projected content, and resize separator.
SBOLCanvasFrontend/src/app/side-panel/collapsible-section.component.ts New presentational accordion section component with search-driven collapse logic.
SBOLCanvasFrontend/src/app/side-panel/collapsible-section.component.scss Styling for collapsible section headings/body and caret animation.
SBOLCanvasFrontend/src/app/side-panel/collapsible-section.component.html Collapsible section template keeping bodies in-DOM via [hidden] to preserve drag listeners.
SBOLCanvasFrontend/src/app/side-panel/_caret.scss Shared caret mixin for panel/section chevrons.
SBOLCanvasFrontend/src/app/home/home.component.ts Wires palette sections via GlyphPaletteService, adds section auto-expand on search, adjusts canDeactivate typing.
SBOLCanvasFrontend/src/app/home/home.component.html Replaces mat-sidenav layout with overlay workspace using left/right app-side-panel and CSS vars for widget offsets.
SBOLCanvasFrontend/src/app/home/home.component.css Defines overlay panel positioning + canvas area container.
SBOLCanvasFrontend/src/app/graph.service.ts Adds inline rename support on label double-click and overrides mxGraph editing/commit behavior for glyph names.
SBOLCanvasFrontend/src/app/glyph-menu/glyph-palette.service.ts New service providing sanitized SVG dicts + click routing + util search terms/matching.
SBOLCanvasFrontend/src/app/glyph-menu/glyph-grid.component.ts New presentational glyph grid component with [hidden] filtering and stable trackBy.
SBOLCanvasFrontend/src/app/glyph-menu/glyph-grid.component.html New glyph grid template emitting clicks and exposing attrs for drag-source registration.
SBOLCanvasFrontend/src/app/glyph-menu/glyph-grid.component.scss New glyph grid styling (flex wrap, hidden override, focus/hover).
SBOLCanvasFrontend/src/app/glyph-menu/util-glyph-grid.component.ts New util section wrapper binding searchPhrase into palette-driven util tiles.
SBOLCanvasFrontend/src/app/glyph-menu/util-glyph-grid.component.html New util tile markup using palette visibility logic and click routing.
SBOLCanvasFrontend/src/app/glyph-menu/glyph-element-types.ts Centralizes canonical elementType strings used for drag-source dispatch.
SBOLCanvasFrontend/src/app/glyph-menu/glyph-dragsources.directive.ts New directive for mxGraph drag-source registration using IntersectionObserver.
SBOLCanvasFrontend/src/app/app.module.ts Registers new components/directive/service; removes old glyph menu and search pipe.
SBOLCanvasFrontend/src/app/searchfilter.pipe.ts Removed (no longer needed with new palette).
SBOLCanvasFrontend/src/app/searchfilter.pipe.spec.ts Removed tests for removed pipe.
SBOLCanvasFrontend/src/app/glyph-menu/glyph-menu.component.ts Removed legacy Angular Material glyph menu implementation.
SBOLCanvasFrontend/src/app/glyph-menu/glyph-menu.component.html Removed legacy Angular Material glyph menu template.
SBOLCanvasFrontend/src/app/glyph-menu/glyph-menu.component.css Removed legacy glyph menu styles.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread SBOLCanvasFrontend/src/app/graph.service.ts
Comment thread SBOLCanvasFrontend/src/app/side-panel/side-panel.component.ts
Comment thread SBOLCanvasFrontend/src/app/side-panel/side-panel.component.ts
Comment thread SBOLCanvasFrontend/src/app/side-panel/side-panel.component.scss
Comment thread SBOLCanvasFrontend/src/app/side-panel/side-panel.component.html
@github-actions

Copy link
Copy Markdown

Azure Static Web Apps: Your stage site is ready! Visit it here: https://blue-flower-0c36fd81e-454.westus2.5.azurestaticapps.net

@travisformayor
travisformayor requested a review from cjmyers July 21, 2026 20:57
@travisformayor

Copy link
Copy Markdown
Contributor Author

All issues raised by the copilot review resolved in commits 69330e5, 6e717c2, and a73492c.

@travisformayor
travisformayor marked this pull request as ready for review July 21, 2026 21:04
@cjmyers
cjmyers merged commit be119dd into final Jul 22, 2026
6 checks passed
@cjmyers
cjmyers deleted the pr/side-panels branch July 22, 2026 14:59
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.

Collapsible/Resizable Sidebars

3 participants