SmartScrollbar component to show cached slices

[Adithyan-Dinesh-Trenser]

Context

A Viewport scrollbar that shows the cached slices of the displayset loading in that viewport. Also, a feature was added to scroll only to the cached slices in normal scrolling operations. To force scrolling ( scrolling to uncached slices ) must press the Ctrl key when scrolling.

Changes & Results

• Created a 'SmartScrollbar' component based on 'ViewportImageScrollbar' and added a layer to show cached slices.
• Extended 'StackScrollTool' and StackScrollMouseWheelTool' to support both regular and smart scrolling used when initializing instead of the original tools.
• Modified the 'scroll' command to include an optional property to identify smart scrolling.
• Modified tools are added in 'longitudinal' and 'segmentation' modes.
• The SmartScrollbar is only available in stack viewport as the number of imagesIds and the number of slices may vary in 2d MPR viewports.

  A sample screenshot of the SmartScrollbar

  

Testing

Checklist

PR

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

Code

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

Public Documentation Updates

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

Tested Environment

• [x] OS: Windows 11 Pro
• [x] Node version: 18.17.0
• [x] Browser: Chrome 127.0.6533.120 (Official Build) (64-bit)

[netlify[bot]]

✅ Deploy Preview for ohif-platform-docs ready!

Name	Link
🔨 Latest commit	b2e4b284125c81bec53dc1a4d22b0322a7683d0d
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-platform-docs/deploys/66fe8c9b6f73b00008cf8795
😎 Deploy Preview	https://deploy-preview-4340--ohif-platform-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[netlify[bot]]

✅ Deploy Preview for ohif-dev canceled.

Name	Link
🔨 Latest commit	b2e4b284125c81bec53dc1a4d22b0322a7683d0d
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-dev/deploys/66fe8c9b944c7700082d8bee

[Adithyan-Dinesh-Trenser]

Cc : @Ouwen

[Ouwen]

@sedghi is this something that could be in upstream?

[sedghi]

@Ouwen Hey guys, thanks, yes it can be. CCing our designer for this

@dan-rukas @james-hanks

[dan-rukas]

Hi everyone! I work as a UX designer on the OHIF team. This is amazing! Thank you for sharing! We would love to add this to OHIF. We are currently looking at some design updates that we'll want to apply here. I can take a look at those applied to this component at the end of this week (or early next) and share them here.

Thank you again! ❤️

[salimkanoun]

Hi there, thanks for this nice addition,

I have a question about this statement

The SmartScrollbar is only available in stack viewport as the number of imagesIds and the number of slices may vary in 2d MPR viewports.

I wonder if it woundn't be possible to see things differently, rather then trying to mach the number of slice in the viewport consider the displayset loaded fraction.

The displayset has a known number of frames so it would be possible to display how many slice of the display set have been loaded and this could work for a volume viewport no matter of its orientation.

Maybe would need a bit different presentation. The actual vertical make sense for a stack viewport to display which slice is available.

Could this PR be extended to another overlay maybe a progress circle to show the fraction of laoaded display set in case of a volume viewport ?

[sedghi]

We were too busy with the rest of the component library, and still didn't have time to look at the design here, sorry about the delay

[sedghi]

We're sorry we couldn't include this in 3.9 due to other high priorities. We appreciate your patience and will review this, and give a design as soon as possible.