feat: LEAP-1424: LEAP-1370: Allow to zoom and pan the image in preview modal #6781
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Open a simple modal with image from the data of clicked task. Allow to navigate between tasks visible in Grid view by Prev/Next buttons. Only one image is displayed right now.
Modal is `bare` now to allow to make better styles for it. UI is more dense and different elements are aligned.
Check fields for "Image" type and show modal only if it exists.
Co-authored-by: bmartel <[email protected]>
This modal can be invoked in Grid view of Data Manager to quickly preview and select tasks. Now image is interactive and you can zoom in by scroll and pan by drag.
✅ Deploy Preview for label-studio-docs-new-theme ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for heartex-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Apparently `Shift+Up` opens up a Quick View even in a background
Image paddings are a tricky part, but that's the only problem now
hlomzik
changed the title
When we leave the Grid View by browser controls or by hotkeys we need to close the modal. That also means that we don't need to intercept Quick View hotkey. And `capture` was a huge hit for performance, because keydown handler was called million times during handling the same event, leading to browser freeze.
When we leave the Grid View by browser controls or by hotkeys we need to close the modal. That also means that we don't need to intercept Quick View hotkey. And `capture` was a huge hit for performance, because keydown handler was called million times during handling the same event, leading to browser freeze.
useEffect closing the modal should be global one-time one
|
/git merge
|
bmartel
approved these changes
Dec 17, 2024
hlomzik
changed the title
15 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Allow users to zoom in and pan images in preview modal, which you can open from Grid View.
Interactions are intuitive — scroll zooms and drag pans. This is also described in a tooltip.
This PR also includes #6748 for LEAP-1424:
Open a simple modal with image from the data of clicked task. Allow to navigate between tasks visible in Grid view by Prev/Next buttons. Only one image is displayed right now.
Simple common hotkeys are available:
<Arrows left/right>to switch between tasks<Space>to select/unselect task<Escape>to close the modalPR fulfills these requirements
Change has impacts in these area(s)
Describe the reason for change
It's hard to quickly preview task and select it depending on a content in current state — if you open task it's another view and it takes time to load it. Here is the new view for quick preview.
In order to quickly examine images it also would be very helpful to easily zoom in and check details.
Does this change affect performance?
Not anymore!
Does this change affect security?
Nope
What alternative approaches were there?
Embed LSF into this modal, but that would be harder, heavier and current image interactions in Image tag are far from perfect.
What feature flags were used to cover this change?
fflag_feat_front_leap_1424_grid_preview_shortDoes this PR introduce a breaking change?
Click on task in Grid view now has a different action, but task selection is still possible if you click on task id with checkbox.
What level of testing was included in the change?