Collapsible side panels and inline glyph rename - #454
Conversation
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://blue-flower-0c36fd81e-454.westus2.5.azurestaticapps.net |
There was a problem hiding this comment.
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+CollapsibleSectionComponentto support collapsible rails and drag-resizable overlay panels. - Replaced the old
GlyphMenuComponent+SearchfilterPipeapproach 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.
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://blue-flower-0c36fd81e-454.westus2.5.azurestaticapps.net |
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.
SidePanelComponentthat can collapse to a rail and resize on dragCloses #438