Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui(panels): Tool option components and responsive behavior for ROIThreshold #4876

Merged
merged 8 commits into from
Mar 20, 2025

Conversation

dan-rukas
Copy link
Member

@dan-rukas dan-rukas commented Mar 20, 2025

Context

This PR updates the ROI Threshold Segmentation panel from legacy UI components to use the new UI-next library, improving the panel's responsive behavior and consistency with the Viewer.

Changes & Results

Component Replacements:

  • Replaced legacy Select with UI-next's compositional Select
  • Replaced legacy Label with UI-next's Label component
  • Replaced legacy Input with UI-next's Input component
  • Replaced legacy LegacyButton and LegacyButtonGroup with UI-next's Button

Responsive Layout Improvements:

  • Replaced table-based layout with tailwind layout classes
  • Spacing updates for readability
  • Components will resize with panel width

pr-panel-roithreshold

Testing

The panel has been tested at various widths to ensure responsive behavior. All functionality (Strategy selection, input fields, and button actions) works as expected.

Checklist

PR

  • My Pull Request title is descriptive, accurate and follows the
    semantic-release format and guidelines.

Code

  • My code has been well-documented (function documentation, inline comments,
    etc.)

Public Documentation Updates

  • [] The documentation page has been updated as necessary for any public API
    additions or removals.

Tested Environment

  • OS: macOS Sequoia 15.3 (24D60), Apple M4 Pro
  • Node version: 23.7.0
  • Browser: 134.0.6998.89 (Current)

Copy link

netlify bot commented Mar 20, 2025

Deploy Preview for ohif-platform-docs failed. Why did it fail? →

Name Link
🔨 Latest commit 4d18f57
🔍 Latest deploy log https://app.netlify.com/sites/ohif-platform-docs/deploys/67dc6365bef2360008734574

Copy link

netlify bot commented Mar 20, 2025

Deploy Preview for ohif-dev ready!

Name Link
🔨 Latest commit 4d18f57
🔍 Latest deploy log https://app.netlify.com/sites/ohif-dev/deploys/67dc6366bef2360008734578
😎 Deploy Preview https://deploy-preview-4876--ohif-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Member

@sedghi sedghi left a comment

Choose a reason for hiding this comment

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

There appears to be some padding issues on the left

CleanShot 2025-03-20 at 13 11 18@2x

maybe we add some left margin?

commented out since it was in the original code
@dan-rukas
Copy link
Member Author

There appears to be some padding issues on the left

maybe we add some left margin?

Yes, the "focus ring" goes outside the component. I added 1px padding around all edges to fix.

@sedghi sedghi merged commit 782a6a0 into OHIF:master Mar 20, 2025
16 of 17 checks passed
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