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

Replace react-mosaic with mirador-mosaic #3640

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

Conversation

cbeer
Copy link
Collaborator

@cbeer cbeer commented Feb 22, 2023

This PR replaces react-mosaic, a 3rd party library for managing the mosaic window layout, with a custom mirador-mosaic window manager.

This work was initially started out of necessity (react-mosaic did not support newer versions of react-dnd, blocking us from upgrading to new versions of react). react-mosaic 6.x was released with that support, so this is no longer an upgrade blocking issue, but may address some of the UX and usability feedback:

UM

Rearranging the windows is challenging (Issue #1)

  • When attempting to rearrange the windows within the Mosaic workspace, it was difficult for participants to get the windows in the arrangement they wanted and then to expand or contract the window width to make each window equal.
  • Make the frame of each window more visually apparent and grabbable/draggable to allow for easier re-sizing

mirador-mosaic also opens up some opportunities for pre-canned layouts specified using css grids (although that work was not done in this PR):

  • Consider having some of the more common layouts (ex: vertical columns, 2x2 boxes) offered as menu options
Kapture.2023-02-22.at.10.33.22.mp4

TODO:

  • mouseover styling for window frame borders
  • visual feedback when borders "snap"
  • path for migrating WorkspaceMosaic layouts to WorkspaceGrid
  • user testing?
  • implement custom drag layer for prettier drag previews? (in particular, making sure that surrounding content isn't picked up as part of the browser native preview)
  • actually calculate the drag/drop area sizes to give a more accurate preview

@cbeer cbeer force-pushed the mirador-mosaic branch 2 times, most recently from 0b3b4eb to 306205d Compare February 22, 2023 01:16
@codecov-commenter
Copy link

codecov-commenter commented Feb 22, 2023

Codecov Report

Merging #3640 (afbb72c) into master (2c2f553) will decrease coverage by 0.20%.
The diff coverage is 44.44%.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@            Coverage Diff             @@
##           master    #3640      +/-   ##
==========================================
- Coverage   88.92%   88.73%   -0.20%     
==========================================
  Files         200      200              
  Lines        3430     3372      -58     
==========================================
- Hits         3050     2992      -58     
  Misses        380      380              
Impacted Files Coverage Δ
src/components/AppProviders.js 91.30% <ø> (ø)
src/components/SearchResults.js 100.00% <ø> (ø)
src/components/Workspace.js 95.83% <0.00%> (-4.17%) ⬇️
src/components/WorkspaceSelectionDialog.js 93.75% <0.00%> (-6.25%) ⬇️
src/config/settings.js 0.00% <ø> (ø)
src/state/reducers/rootReducer.js 100.00% <ø> (ø)
src/components/WorkspaceGrid.js 14.28% <14.28%> (ø)
src/state/reducers/gridLayout.js 66.66% <66.66%> (ø)
src/components/SearchHit.js 100.00% <100.00%> (ø)
src/components/Window.js 83.33% <100.00%> (+8.33%) ⬆️
... and 1 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

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.

None yet

2 participants