overthesun / simoc-web

This is the web interface to SIMOC
https://ngs.simoc.space/
Other
3 stars 0 forks source link

Improve fullscreen panels (zooming/panning/decimation/transitions/etc.) #723

Open ezio-melotti opened 1 month ago

ezio-melotti commented 1 month ago

This meta-issue is a follow-up of the following issues/PRs, collecting and listing a few ideas that had been proposed but not implemented:

There are a still a few issues/improvements with fullscreen panels. With a single-panel layout the panel now takes the whole screen and looks like a fullscreen panel. However the panel is not marked as "fullscreen" and its content (e.g. the number of steps visualized) doesn't change. We might want to update the number of steps for both 1x1 and 2x1 layouts, since they both take the whole width of the screen now. Note that marking the panel as "fullscreen" is not a valid solution, because it also affects the menus (e.g. it shows a "Minimize panel" button to exit the fullscreen).

For regular panels, the current step is always the rightmost one, but with fullscreen panels that show all the steps, there is no indication of which the current step is. We discussed adding a vertical bar to mark the current step and match the scrubber as a possible solution.

In addition, while showing all the steps might work for sims with a limited number of total steps, it doesn't scale too well for sims with a long duration (e.g. the B2 ones) or with SIMOC live, where we might end up with a technically endless number of steps. As mentioned in #75, a better solution to this would be implementing zooming/panning. This might also affect how we solve the number of steps visualized by the fullscreen panels and how to indicate the current step.

When there are a lot of steps plotted at once, it might be necessary to implement data decimation to keep the graphs reasonably manageable and fast.

75 also suggested adding an Esc shortcut to minimize a fullscreen panel and to return to the regular layout.

https://github.com/overthesun/simoc-web/pull/103#issuecomment-915703693 suggests improvements to the dropdown panel menu, possibly expanding the panel automatically on hover and adding icons like:

➕ Add panel
➖ Remove panel
🗘 Change panel
⤢ Maximize panel

The same comment also discusses adding CSS3 transitions to smooth layout changes when adding/removing panels or switching to/from fullscreen, but so far all attempts to implement them failed. Vue transitions might be a solution, but I haven't tried them yet.

In summary:

All these issues can be tackled by several separate PRs.