feat: LEAP-1424: Open preview window for images in Grid view #6748
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.
✅ Deploy Preview for heartex-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for label-studio-docs-new-theme ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
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.
bmartel
reviewed
Dec 10, 2024
web/libs/datamanager/src/components/MainView/GridView/GridPreview.tsx
Outdated
Show resolved
Hide resolved
bmartel
reviewed
Dec 10, 2024
web/libs/datamanager/src/components/MainView/GridView/GridPreview.tsx
Outdated
Show resolved
Hide resolved
bmartel
reviewed
Dec 10, 2024
web/libs/datamanager/src/components/MainView/GridView/GridPreview.tsx
Outdated
Show resolved
Hide resolved
bmartel
reviewed
Dec 10, 2024
web/libs/datamanager/src/components/MainView/GridView/GridPreview.tsx
Outdated
Show resolved
Hide resolved
bmartel
reviewed
Dec 10, 2024
web/libs/datamanager/src/components/MainView/GridView/GridPreview.tsx
Outdated
Show resolved
Hide resolved
bmartel
reviewed
Dec 10, 2024
web/libs/datamanager/src/components/MainView/GridView/GridView.jsx
Outdated
Show resolved
Hide resolved
bmartel
reviewed
Dec 10, 2024
web/libs/datamanager/src/components/MainView/GridView/GridView.jsx
Outdated
Show resolved
Hide resolved
Co-authored-by: bmartel <[email protected]>
bmartel
approved these changes
Dec 10, 2024
|
/git merge
|
|
/git merge
|
Apparently `Shift+Up` opens up a Quick View even in a background
|
/git merge
|
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
|
15 tasks
hlomzik
added a commit
that referenced
this pull request
Dec 18, 2024
…w modal (#6781) 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 modal Co-authored-by: bmartel <[email protected]> Co-authored-by: MihajloHoma <[email protected]> Co-authored-by: hlomzik <[email protected]>
|
merged already by #6781 |
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.
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)
Feature flags used to cover this change
fflag_feat_front_leap_1424_grid_preview_shortDescribe 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.
Does 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?