feat: Add drag and drop to Dashboard layouts

[bprusinowski]

This PR adds a drag and drop functionality to Dashboard layouts (Vertical and Tall) in the edit mode.

How to test

1. Go to this link.
2. Add two additional charts, so that there are three in total.
3. Proceed to layout options.
4. Change layout to Dashboard.
5. See that there are drag handles next to charts metadata buttons.
6. See that it's possible to drag and drop the charts to change their order.
7. Change layout from Vertical to Tall.
8. See that drag and drop also works for this layout.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
visualization-tool	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 31, 2024 7:43am

[ptbrowne]

Code looks good, I saw no blocker. LGTM 👍 Some remarks after testing:

• I wonder though about having a drag overlay since the drag overlay does not show exactly what's under it (since it is another re-rendering of the chart) and there is an animation inside the drag overlay.
• I also wondered if it would not be better to directly move the chart while dragging (not the overlay, but really dispatch re-order events while we drag)
• The tall layout goes below the fold on my tiny screen. Maybe it would be good to reduce the width of the whole layout so that the first chart does not take the whole screen. Below a screenshot of what I see

[bprusinowski]

Hey @ptbrowne, thanks for reviewing and testing 💯

I adjusted the drag and drop behavior a bit to hide the dragged element and disable animations when creating an overlay, I think it is better now.

I initially tried with moving the chart instead of using overlay, but it was quite "messy", especially for Tall layout, when the thing you drag suddenly changes size in the middle of page scroll, I think it's more clean when we need to "confirm" the action. Let me know if the new behavior is still confusing, it would be also great to get @KerstinFaye's view on this 🎨

We've also discussed limiting the width of the edit / publish views with @KerstinFaye, I'll introduce the changes in later PRs 👍

[KerstinFaye]

Thanks a lot for your great work @bprusinowski and for your testing and feedback @ptbrowne.

• Patrick, to your first point: I wasn't 100% sure what you meant with the drag overlay. Something like this?
  https://github.com/visualize-admin/visualization-tool/assets/127507692/bd9a40e9-d85d-4e98-bfd1-3faa4c56d409
  I think this could be a nice addition.

• Patrick, to your last point: I think it could be beneficial for the user to see what will change before it actually changes.

• Bartosz, I can imagine that the animation might feel a bit messy. I like the new version. I think it's very clear like this.