Bug #19300: UX improvement in Multi Panel View component: panels state restoration on un-maximizing. - Arvados Workbench 2 - Arvados

Custom queries

All assigned issues
All issues assigned for grooming
My issues for grooming
Prioritized open issues

Actions

Copy link

Bug #19300

closed

UX improvement in Multi Panel View component: panels state restoration on un-maximizing.

Added by Lucas Di Pentima over 2 years ago. Updated almost 2 years ago.

Status:

Resolved

Priority:

Normal

Assigned To:

Lucas Di Pentima

Category:

Workbench2

Target version:

Arvados - 2022-11-09 sprint

Story points:

Release:

Arvados 2.5.0

Release relationship:

Auto

Description

UX problem¶

The MultiPanelView component suite allows configuring some panels with a "maximize" button. This button closes every other open panel allowing the remaining one to take the entire vertical space and avoiding having an outer vertical scrollbar.
There is a usability issue when the user maximizes a panel and wants to un-maximize it so it can look at another panel. In this case, the user needs to open the closed panels from the upper button bar.

Proposed solution¶

Add a 'restore'/'unmaximize' button that sets the panel visibility states to whatever it was before the user clicked the maximize button.

Updated by Peter Amstutz over 2 years ago

Target version changed from 2022-08-17 sprint to 2022-08-31 sprint

Actions

Copy link

Updated by Peter Amstutz over 2 years ago

Target version changed from 2022-08-31 sprint to 2022-09-14 sprint

Actions

Copy link

Updated by Peter Amstutz over 2 years ago

Target version changed from 2022-09-14 sprint to 2022-09-28 sprint

Actions

Copy link

Updated by Peter Amstutz over 2 years ago

Target version changed from 2022-09-28 sprint to 2022-10-12 sprint

Actions

Copy link

Updated by Peter Amstutz over 2 years ago

Target version changed from 2022-10-12 sprint to 2022-10-26 sprint

Actions

Copy link

Updated by Peter Amstutz about 2 years ago

Target version changed from 2022-10-26 sprint to 2022-11-09 sprint

Actions

Copy link

Updated by Peter Amstutz about 2 years ago

Has duplicate Feature #19531: Add "un-maximize" button that gets the previous panels' visibility state back added

Actions

Copy link

Updated by Lucas Di Pentima about 2 years ago

Description updated (diff)

Actions

Copy link

Updated by Peter Amstutz about 2 years ago

Target version changed from 2022-11-09 sprint to 2022-11-23 sprint

Actions

Copy link

#10

Updated by Lucas Di Pentima about 2 years ago

Assigned To set to Lucas Di Pentima

Actions

Copy link

#11

Updated by Lucas Di Pentima about 2 years ago

Status changed from New to In Progress

Updates at arvados-workbench2|2e7cab4e - branch 19300-unmaximize-panels
Test run: developer-tests-workbench2: #980

Adds un-maximize functionality to the multi panel view component suite.
Implements un-maximize buttons on maximizable process panels.

Actions

Copy link

#12

Updated by Lucas Di Pentima about 2 years ago

Bonus commit arvados-workbench2|a2453dde

Hides the close button when panel is maximized.

Actions

Copy link

#13

Updated by Peter Amstutz about 2 years ago

Target version changed from 2022-11-23 sprint to 2022-11-09 sprint

Actions

Copy link

#14

Updated by Peter Amstutz about 2 years ago

Lucas Di Pentima wrote in #note-11:

Updates at arvados-workbench2|2e7cab4e - branch 19300-unmaximize-panels
Test run: developer-tests-workbench2: #980

Adds un-maximize functionality to the multi panel view component suite.

Implements un-maximize buttons on maximizable process panels.

Thank you for turning this around quickly.

Two thoughts.

I understand wanting to hide the close button, but having the restore button take the place of the close button is a little weird, I had envisioned the restore button taking the place of the maximize button. How would it look if the close button was just disabled, or hidden such that it doesn't cause the other buttons to move?
When it restores, at least on Firefox you end up this behavior where it flickers up to the top and then scrolls back to the selected panel. Is it possible to eliminate the scrolling and just jump straight to panel? (I'm also curious how it would feel if we eliminated the scrolling entirely and pushing one of the top tabs just takes you to the window immediately).

Actions

Copy link

#15

Updated by Lucas Di Pentima about 2 years ago

Updates at arvados-workbench2|35cbda6f
Test run: developer-tests-workbench2: #981

Peter Amstutz wrote in #note-14:

I understand wanting to hide the close button, but having the restore button take the place of the close button is a little weird, I had envisioned the restore button taking the place of the maximize button. How would it look if the close button was just disabled, or hidden such that it doesn't cause the other buttons to move?

Thanks for the reminder, I failed in recording this that we already discussed some weeks ago. Yes, I've now set the maximize buttons to disable when the panel is maximized, it's a far better UX.

When it restores, at least on Firefox you end up this behavior where it flickers up to the top and then scrolls back to the selected panel. Is it possible to eliminate the scrolling and just jump straight to panel? (I'm also curious how it would feel if we eliminated the scrolling entirely and pushing one of the top tabs just takes you to the window immediately).

I've completely eliminated the 'smooth scrolling' behavior so that unmaximizing a panel would just jump to it. I've tested in Chrome & Firefox on MacOS and it doesn't flicker. Please let me know how it works on Linux.
I found that going to the top of the panel list when unmaximizing is confusing if the unmaximized panel suddenly dissapears from the viewport, if you want to check by yourself, you can do so by commenting out line 166 at src/components/multi-panel-view/multi-panel-view.tsx

Actions

Copy link

#16