Update/UI cosmetics#283
Merged
Merged
Conversation
…s sections for better user experience
… better structure and accessibility
…ck and remove error/info state management
…for improved user interaction
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refines the frontend UI for stage, illumination, and objective control. It replaces detector tabs with a ButtonGroup, adds section icons/tooltips in the right panel, refactors IlluminationController and StreamPresets for consistent multi-line formatting and uses the global notification system instead of local Alerts, and adds a "Z leveling" toggle to ObjectiveSwitcher so a single button per objective replaces the previous duplicate "+Z" buttons.
Changes:
- LiveView: detector selection switched from
TabstoButtonGroup; right-panel section headers gain icons and an illumination tooltip; stage-tab labels shortened. - IlluminationController / StreamPresets: reformat fetch calls, switch StreamPresets to dispatch
setNotification(dropsAlert/error/infolocal state), and add per-laser initial-state fetching and Redux init. - ObjectiveSwitcher: collapses 4 buttons into a 2-button
ButtonGroupplus a "Z leveling"Switch; removes the unusedrefreshStatushelper and theapiObjectiveControllerGetCurrentObjectiveimport.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/components/LiveView.js | Replace detector Tabs with ButtonGroup; add icons/tooltip to section headers; shorten stage-tab labels. |
| frontend/src/components/IlluminationController.js | Reformat fetches; add initial laser state fetch and Redux dispatch; minor JSX formatting. |
| frontend/src/components/StreamPresets.js | Switch from inline Alerts to setNotification; wrap snapshot/fetch JSX; convert ×/— to x/-; legend in fieldset. |
| frontend/src/components/ObjectiveSwitcher.js | Add Z-leveling Switch; collapse to two-button group; remove unused import/function. |
| frontend/src/components/StreamControls.js | Change Record button color from secondary to primary. |
| frontend/src/components/AxisControl.jsx | Add trailing commas; change "Home All" button to primary. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Franzili
pushed a commit
that referenced
this pull request
May 30, 2026
This pull request makes several improvements to the frontend UI components for stage, illumination, and objective control, focusing on code readability, UI clarity, and enhanced user interaction. The main changes include UI enhancements for better grouping and labeling, improved code formatting for consistency, and the addition of new features such as Z-leveling toggle for objectives and iconography for different sections. **UI Enhancements and User Experience:** * Replaced detector selection `Tabs` with a `ButtonGroup` in `LiveView.js` for clearer detector selection and improved accessibility. Added section icons (e.g., for Stage Control, Autofocus, Illumination, Objective, Detector Trigger) and tooltips for better user guidance. [[1]](diffhunk://#diff-98c10fd4b655ab7b1f6ad50e69ded7733ec826bf99fa81a60ddd9e2eaa613d07R8-R23) [[2]](diffhunk://#diff-98c10fd4b655ab7b1f6ad50e69ded7733ec826bf99fa81a60ddd9e2eaa613d07L543-R600) [[3]](diffhunk://#diff-98c10fd4b655ab7b1f6ad50e69ded7733ec826bf99fa81a60ddd9e2eaa613d07R747-R762) [[4]](diffhunk://#diff-98c10fd4b655ab7b1f6ad50e69ded7733ec826bf99fa81a60ddd9e2eaa613d07R782-R810) [[5]](diffhunk://#diff-98c10fd4b655ab7b1f6ad50e69ded7733ec826bf99fa81a60ddd9e2eaa613d07R823-R826) * Changed the "Home All" button color in `AxisControl.jsx` from secondary to primary for better visual prominence. * Improved section labeling and grouping (e.g., "Axis View", "Joystick", "Virtual Joystick") for more intuitive navigation in the right panel. **Illumination Controller Code Quality and Consistency:** * Refactored all fetch API calls in `IlluminationController.js` for improved readability and consistent multi-line formatting. Enhanced error handling and Redux state initialization for laser sources. [[1]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L15-R20) [[2]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L36-R40) [[3]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L48-R52) [[4]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L61-R67) [[5]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L71-R112) [[6]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L102-R127) [[7]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L121-R161) [[8]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L142-R177) * Improved UI code formatting for the laser slider and value display, and removed the redundant instructional `Typography` since tooltip help is now provided. [[1]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L157-L163) [[2]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L180-R238) **Objective Controller Improvements:** * Added a Z-leveling toggle (`Switch`) to `ObjectiveSwitcher.js`, allowing users to enable or disable Z-leveling when switching objectives. Refactored the objective switching logic to respect this toggle. [[1]](diffhunk://#diff-8dbccd645a421cdf580b426f89f4259ce8d8921ce3068d257ad6969ae7320f4cR5-R9) [[2]](diffhunk://#diff-8dbccd645a421cdf580b426f89f4259ce8d8921ce3068d257ad6969ae7320f4cL15-R24) [[3]](diffhunk://#diff-8dbccd645a421cdf580b426f89f4259ce8d8921ce3068d257ad6969ae7320f4cL45-R56) **Minor Consistency and Readability Updates:** * Updated arrow function formatting and argument parentheses for consistency throughout the codebase. [[1]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L36-R40) [[2]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L48-R52) * Added missing trailing commas in multi-line function calls for improved diff clarity and code style. [[1]](diffhunk://#diff-8ae8ac1715ced9cb4171f62ce0f7e923dc31fef5545b83813f4079190866a024L64-R64) [[2]](diffhunk://#diff-8ae8ac1715ced9cb4171f62ce0f7e923dc31fef5545b83813f4079190866a024L101-R113) [[3]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L61-R67) [[4]](diffhunk://#diff-606733c39a7cbf75c555963223773a56c0b0e003296d940dca90b6bfb0667047L71-R112) These changes collectively enhance the maintainability and usability of the frontend, making the UI more intuitive and the code easier to read and extend.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request makes several improvements to the frontend UI components for stage, illumination, and objective control, focusing on code readability, UI clarity, and enhanced user interaction. The main changes include UI enhancements for better grouping and labeling, improved code formatting for consistency, and the addition of new features such as Z-leveling toggle for objectives and iconography for different sections.
UI Enhancements and User Experience:
Tabswith aButtonGroupinLiveView.jsfor clearer detector selection and improved accessibility. Added section icons (e.g., for Stage Control, Autofocus, Illumination, Objective, Detector Trigger) and tooltips for better user guidance. [1] [2] [3] [4] [5]AxisControl.jsxfrom secondary to primary for better visual prominence.Illumination Controller Code Quality and Consistency:
IlluminationController.jsfor improved readability and consistent multi-line formatting. Enhanced error handling and Redux state initialization for laser sources. [1] [2] [3] [4] [5] [6] [7] [8]Typographysince tooltip help is now provided. [1] [2]Objective Controller Improvements:
Switch) toObjectiveSwitcher.js, allowing users to enable or disable Z-leveling when switching objectives. Refactored the objective switching logic to respect this toggle. [1] [2] [3]Minor Consistency and Readability Updates:
These changes collectively enhance the maintainability and usability of the frontend, making the UI more intuitive and the code easier to read and extend.