Skip to content

Update/UI cosmetics#283

Merged
gokugiant merged 8 commits into
masterfrom
update/ui_cosmetics
May 28, 2026
Merged

Update/UI cosmetics#283
gokugiant merged 8 commits into
masterfrom
update/ui_cosmetics

Conversation

@gokugiant
Copy link
Copy Markdown
Contributor

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] [2] [3] [4] [5]
  • 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] [2] [3] [4] [5] [6] [7] [8]
  • Improved UI code formatting for the laser slider and value display, and removed the redundant instructional Typography since tooltip help is now provided. [1] [2]

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] [2] [3]

Minor Consistency and Readability Updates:

  • Updated arrow function formatting and argument parentheses for consistency throughout the codebase. [1] [2]
  • Added missing trailing commas in multi-line function calls for improved diff clarity and code style. [1] [2] [3] [4]

These changes collectively enhance the maintainability and usability of the frontend, making the UI more intuitive and the code easier to read and extend.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

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 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 Tabs to ButtonGroup; right-panel section headers gain icons and an illumination tooltip; stage-tab labels shortened.
  • IlluminationController / StreamPresets: reformat fetch calls, switch StreamPresets to dispatch setNotification (drops Alert/error/info local state), and add per-laser initial-state fetching and Redux init.
  • ObjectiveSwitcher: collapses 4 buttons into a 2-button ButtonGroup plus a "Z leveling" Switch; removes the unused refreshStatus helper and the apiObjectiveControllerGetCurrentObjective import.

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.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

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

@gokugiant gokugiant added this pull request to the merge queue May 28, 2026
Merged via the queue into master with commit 98edfb4 May 28, 2026
14 checks passed
@gokugiant gokugiant deleted the update/ui_cosmetics branch May 28, 2026 13:03
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.
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.

2 participants