PR: Improve UX of the Plots plugin #22029

ccordoba12 · 2024-04-27T02:18:45Z

Description of Changes

Move Fit plots action to the plugin toolbar and make plots be fitted automatically to the pane the first time they are generated. That makes the zoom in/out buttons be enabled by default, which is a much better usability experience than having them disabled.
Disabling Fit plots shows them at full size.
Save the Fit plots and zoom level for every plot. That way, we'll be able to show each plot in the specific way users want to see them.
Implement drag and drop of thumbnails so that users can manually reorganize plots as they see fit.
Improve organization of buttons in its main toolbar and increase default width of thumbnail bar to go with this change.
Make doing double click on a plot show it at full size.

Visual changes

Main toolbar
- Before
- After
Fit plots button
Separate zoom level for each plot
Drag and drop
Zoom in on double click

Issue(s) Resolved

Fixes #21899.
Fixes #12158
Part of spyder-ide/ux-improvements#19

Affirmation

By submitting this Pull Request or typing my (user)name below,
I affirm the Developer Certificate of Origin
with respect to all commits and content included in this PR,
and understand I am releasing the same under Spyder's MIT (Expat) license.

I certify the above statement is true and correct:

ccordoba12 · 2024-04-27T02:20:27Z

@dalthviz, could you review if the functionality of these changes is working as expected? Thanks!

About the UI/UX changes, I already discussed them with the UX team and they agreed with them.

dalthviz · 2024-04-30T22:54:56Z

Gave this a check and seems like the double click is changing the zoom factor value even when the option to Fit plots to window is enabled causing a sudden zoom factor change when the option gets disabled again. Probably the zoom factor when disabling the Fit plots to window should be the one the plot have before the option was enabled but not sure if that is intended. Here a preview of that behavior:

Other than that seems like things are working 👍

ccordoba12 · 2024-05-02T00:51:04Z

Great catch @dalthviz! I disabled doing zooming in and out with double clicks when Fit plots to window is enabled. That actually doesn't make much sense because the zoom factor is fixed to the size of the Plots pane when that option es enabled.

dalthviz · 2024-05-02T21:19:34Z

Gave another check and although the click with the option enabled is fixed, seems like now (or at least I didn't noticed that before 🤔) a double double click needs to be done to zoom up to 100%:

I think is related with passing to another plot when the previous one was left at 100% 🤔

- That makes the zoom in/out buttons be enabled by default, which is a much better usability experience than having them disabled. - Adjust the plot scale factor according to the scaling of fitted image, so that zoom in/out works as expected. - Fix test_zoom_figure_viewer, which checked that functionality.

That simplifies the layout of that widget and it'll also allow us to change the order of thumbnails in it with drag and drop.

Also, increase default width of thumbnail bar to go with this change.

pep8speaks · 2024-05-13T02:22:13Z

Hello @ccordoba12! Thanks for updating this PR. We checked the lines you've touched for PEP 8 issues, and found:

In the file spyder/utils/icon_manager.py:

Line 208:80: E501 line too long (96 > 79 characters)

Comment last updated at 2024-05-15 17:07:28 UTC

ccordoba12 · 2024-05-13T17:43:29Z

Thanks for the additional review @dalthviz! After considering it carefully, I decided to push the following improvements to make the UX more intuitive:

Move the fit action to the main toolbar as a toggle and check it after every a new plot is generated.
When that action is unchecked the plot is shown at full size.
When the user does zoom in/out on a plot, that action is automatically unchecked.
Preserve the zoom level of each plot so that switching plots in the thumbnail bar shows them exactly as users were seeing them the last time.

I updated the OP with these new changes accordingly.

dalthviz · 2024-05-13T20:34:31Z

Gave this another check and seems like now, besides the previous behavior (double double click need to effectivly change between zoom factors when changing between plots), there is also a possiblitity to make the zoom factor to get stuck in 100% 🤔:

Edit: Could it be worthy to add some sort of test for the double click behavior?

- Move it to the plugin toolbar and check it by default after every new plot is generated so the plot always fit in the pane. - Unchecking the action makes the plot to zoom in at its full size. - Clicking the zoom in/out buttons unchecks the action, which means the plot doesn't fit into the pane anymore. - Save the auto-fit state in the current thumbnail. This will be useful to restore the zoom level of each plot when loaded. - Remove the auto_fit_plotting option because it's no longer needed.

ccordoba12 · 2024-05-13T23:48:22Z

@dalthviz, I didn't understand that problem very well but I do now. So, I rewrote one of my previous commits to fix it. That removed the ability to zoom out to the previous size with a second double-click. But I think that's not so important now that I added the auto-fit button to the toolbar.

So, please check again.

dalthviz · 2024-05-14T00:22:44Z

Checked again and now I'm unable to reproduce the mentioned behaviors so seems like things are working as described 👍 The only suggestion that came to mind while checking the new behavior is to maybe add a shortcut for the new auto-fit button.

spyder/plugins/plots/widgets/figurebrowser.py

ccordoba12 · 2024-05-14T02:29:24Z

The only suggestion that came to mind while checking the new behavior is to maybe add a shortcut for the new auto-fit button.

Good idea. I set Ctrl+0 for this action.

I also changed the shortcuts for save/close all plots to avoid issues in Eastern European keyboards.

- Also, change shortcuts for save/close all plots to avoid issues in Eastern European languages. - Add clarifying comment the usage of timers to set the scrollbar values after a figure is loaded.

dalthviz

Thanks @ccordoba12 ! Things LGTM 👍 Maybe adding some sort of test could be nice to have but leaving this approved so feel free to merge

ccordoba12 · 2024-05-15T19:04:12Z

I added a couple of tests to cover the new auto-fit and zoom level per plot functionality, which I think are the most important ones added here. So, this is ready now.

ccordoba12 added type:Enhancement User Interface (UI) User Experience (UX) component:Plots labels Apr 27, 2024

ccordoba12 added this to the v6.0beta1 milestone Apr 27, 2024

ccordoba12 requested a review from dalthviz April 27, 2024 02:18

ccordoba12 self-assigned this Apr 27, 2024

ccordoba12 added 5 commits May 10, 2024 19:47

Plots: Use a vertical layout in ThumbnailScrollBar

87a1014

That simplifies the layout of that widget and it'll also allow us to change the order of thumbnails in it with drag and drop.

Plots: Implement drag and drop of thumbnails in ThumbnailScrollBar

1c0823a

Plots: Improve margins of thumbnails area

97f70d5

Plots: Improve organization of buttons in its main toolbar

654fc61

Also, increase default width of thumbnail bar to go with this change.

ccordoba12 force-pushed the improve-plots-ux branch from 3ea1e40 to 1d9bcf4 Compare May 13, 2024 02:22

ccordoba12 force-pushed the improve-plots-ux branch from e2f2e19 to 307881a Compare May 13, 2024 17:43

ccordoba12 force-pushed the improve-plots-ux branch from 307881a to 5a1c3f4 Compare May 13, 2024 23:25

ccordoba12 added 5 commits May 13, 2024 18:31

Plots: Make doing double click on a plot show it at full size

1c4af7d

Plots: Display each plot with the scale factor set by users for it

c3e7e54

Plots: Enable panning with no auto fit and the scrollbars are visible

7777e45

Plots: Save scrollbars positions and restore them after loading a plot

5a95c07

ccordoba12 force-pushed the improve-plots-ux branch from 5a1c3f4 to 5a95c07 Compare May 13, 2024 23:34

dalthviz reviewed May 14, 2024

View reviewed changes

spyder/plugins/plots/widgets/figurebrowser.py Show resolved Hide resolved

Plots: Add shortcut for the auto-fit action

0f68022

- Also, change shortcuts for save/close all plots to avoid issues in Eastern European languages. - Add clarifying comment the usage of timers to set the scrollbar values after a figure is loaded.

ccordoba12 force-pushed the improve-plots-ux branch from ef7a671 to 0f68022 Compare May 14, 2024 02:45

dalthviz approved these changes May 14, 2024

View reviewed changes

Testing: Add tests to check the new UX of the Plots plugin

d351599

ccordoba12 merged commit bee5542 into spyder-ide:master May 15, 2024
14 checks passed

ccordoba12 deleted the improve-plots-ux branch May 15, 2024 19:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PR: Improve UX of the Plots plugin #22029

PR: Improve UX of the Plots plugin #22029

ccordoba12 commented Apr 27, 2024 •

edited

ccordoba12 commented Apr 27, 2024 •

edited

dalthviz commented Apr 30, 2024

ccordoba12 commented May 2, 2024 •

edited

dalthviz commented May 2, 2024

pep8speaks commented May 13, 2024 •

edited

ccordoba12 commented May 13, 2024

dalthviz commented May 13, 2024 •

edited

ccordoba12 commented May 13, 2024 •

edited

dalthviz commented May 14, 2024

ccordoba12 commented May 14, 2024 •

edited

dalthviz left a comment

ccordoba12 commented May 15, 2024 •

edited

PR: Improve UX of the Plots plugin #22029

PR: Improve UX of the Plots plugin #22029

Conversation

ccordoba12 commented Apr 27, 2024 • edited

Description of Changes

Visual changes

Issue(s) Resolved

Affirmation

ccordoba12 commented Apr 27, 2024 • edited

dalthviz commented Apr 30, 2024

ccordoba12 commented May 2, 2024 • edited

dalthviz commented May 2, 2024

pep8speaks commented May 13, 2024 • edited

Comment last updated at 2024-05-15 17:07:28 UTC

ccordoba12 commented May 13, 2024

dalthviz commented May 13, 2024 • edited

ccordoba12 commented May 13, 2024 • edited

dalthviz commented May 14, 2024

ccordoba12 commented May 14, 2024 • edited

dalthviz left a comment

Choose a reason for hiding this comment

ccordoba12 commented May 15, 2024 • edited

ccordoba12 commented Apr 27, 2024 •

edited

ccordoba12 commented Apr 27, 2024 •

edited

ccordoba12 commented May 2, 2024 •

edited

pep8speaks commented May 13, 2024 •

edited

dalthviz commented May 13, 2024 •

edited

ccordoba12 commented May 13, 2024 •

edited

ccordoba12 commented May 14, 2024 •

edited

ccordoba12 commented May 15, 2024 •

edited