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

• 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: Windows 11 Pro
• Node version: 18.17.0
• Browser: Chrome 127.0.6533.120 (Official Build) (64-bit)

[netlify]

✅ Deploy Preview for ohif-platform-docs ready!

Name	Link
🔨 Latest commit	b2e4b28
🔍 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]

✅ Deploy Preview for ohif-dev canceled.

Name	Link
🔨 Latest commit	b2e4b28
🔍 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.

[wayfarer3130]

There isn't any reason that the same display can't be used for volumes - it is just as interesting there to know how much of the volume has gotten loaded.
As well, there should be a way to track whether all the images have been viewed, as that is clinically useful to know, and again, that can be done on the MPR viewport, but not the 3d viewport

[sedghi]

When we revisit this, we should consider adding a visual state to show whether a reader has viewed a slice. Some PACS already have this feature, preventing users from submitting a report until they have scrolled through every slice. Because of that, including a visual indicator in this component is really necessary.

[jbocce]

Everyone on this PR a big thank you. We have an open PR #5960 that is solidifying all your efforts and ideas from here.

[jbocce]

The two PRs that address/replace this

• feat(component): Adds SmartScrollbar to ui-next - OHIF-2558 #5924
• feat(slice scrollbar): Integrate ViewportSliceProgressScrollbar with customizations and docs #5960