Revisit right panel #368

[igoroctaviano]

Revisit right panel (Settings drawer and sidebar)

Closes #368

Description

This PR refactors the right panel layout: display/segmentation/parametric map settings move from the sidebar into a dedicated Settings drawer, while the sidebar gains clearer section styling and Presentation States. Visual consistency is improved across sections, with theme-aware borders and disabled states.

Changes

Settings panel (Drawer)

• New Settings drawer – Display, Segmentation, and Parametric Map settings are now in a right-side Drawer opened via the Settings button in the header.
• Sections – Collapse replaced with Menu/SubMenu for consistency with the sidebar:
  • Display – ICC Profiles toggle (Switch). Shown when ICC profiles are unavailable; label and switch are disabled with a grayed-out style.
  • Segmentation – Clustering toggle, Clustering Pixel Size Threshold, and Segmentation Interpolation (when segments exist).
  • Parametric Map – Parametric Map Interpolation toggle.
• Settings panel styling – Dedicated SettingsPanel.css:
  • Full-width content, no box shadow
  • First section: no top border (Drawer header supplies it), no gap above
  • Reduced left padding on expanded content only
  • Disabled state styling (e.g. ICC Profiles when unavailable)
• Drawer header – Teal bottom border for separation; theme-aware (light/dark).

Sidebar

• Presentation States moved to main page – Now in the sidebar between Optical Paths and Annotations (no longer in Settings).
• Removed from sidebar – ICC Profiles, Segmentation Interpolation, and Parametric Map Interpolation (moved to Settings drawer).
• Clustering settings – Moved from ClusteringSettings into the Settings panel. ClusteringSettings component removed.

Header and context

• Settings button – New Settings button in the header (gear icon) that opens the Settings drawer. Rendered only when a viewer (with settings) is mounted.
• SettingsContext – New context (SettingsProvider, SettingsRegistration, SettingsButton) to connect the header button with the SlideViewer settings drawer.
• Debug button – Swapped with Settings; Debug now uses BugOutlined, Settings uses SettingOutlined.

Visual updates (App.light.less, App.dark.less)

• Collapse headers – Font weight 600, borders with teal color.
• Menu submenu titles – Light teal background (#e0f2f7 / rgba(0, 126, 163, 0.25)), font weight 600, top/bottom borders; overlapping borders between sections.
• First section – No top border (sidebar and Settings drawer).
• Settings drawer header – Theme-aware bottom border.
• List items in sider – No padding to remove gaps.

Other

• Checkbox → Switch – ICC Profiles, Segmentation Interpolation, and Parametric Map Interpolation use Switches instead of Checkboxes.
• Handler signatures – Toggle handlers updated from (event: CheckboxChangeEvent) to (checked: boolean) for Switch onChange.
• openSubMenuItems – Default items updated to include equipment, remove presentation-states from static list (added dynamically when applicable).

Files changed

File	Change
src/App.dark.less	Submenu/collapse styling, first-section rule, settings drawer header
src/App.light.less	Same as above
src/App.tsx	Wrap case viewer routes in SettingsProvider
src/components/Header.tsx	Settings button, Debug icon, button order
src/components/SlideViewer.tsx	Settings drawer, settings panel content, Presentation States menu, ICC Profiles disabled state
src/components/SlideViewer/SettingsPanel.css	New – settings panel styles
src/components/SlideViewer/SlideViewerSidebar.tsx	Add presentationStateMenu, remove ICC/interpolation menus
src/components/SlideViewer/SlideViewerSidebar.css	New/updated (minimal)
src/contexts/SettingsContext.tsx	New – SettingsProvider, SettingsButton, SettingsRegistration
src/components/ClusteringSettings.tsx	Removed (logic inlined in SlideViewer)

[deepsource-io]

DeepSource Code Review

DeepSource reviewed changes in the commit range 894f63f...924ff3a on this pull request. Below is the summary for the review, and you can see the individual issues we found as review comments.

For detailed review results, please see the PR on DeepSource ↗

PR Report Card

Security	× 0 issues		Overall PR Quality    Focus Area: Reliability Guidance Resolve 3 high-severity unbound method references causing potential `this` scoping issues in src/App.tsx.
Reliability	× 3 issues
Complexity	× 2 issues
Hygiene	× 0 issues

Code Review Summary

Analyzer	Status	Summary	Details
JavaScript		5 new issues detected. 3 existing issues fixed.	Review ↗

How are these analyzer statuses calculated?

Administrators can configure which issue categories are reported and cause analysis to be marked as failed when detected. This helps prevent bad and insecure code from being introduced in the codebase. If you're an administrator, you can modify this in the repository's settings.

[sonarqubecloud]

Quality Gate passed

Issues
6 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.9% Duplication on New Code

See analysis details on SonarQube Cloud