Project

General

Profile

Actions

Bug #19300

closed

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

Added by Lucas Di Pentima 6 months ago. Updated about 2 months ago.

Status:
Resolved
Priority:
Normal
Assigned To:
Category:
Workbench2
Start date:
10/26/2022
Due date:
% Done:

100%

Estimated time:
(Total: 0.00 h)
Story points:
-
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.

Related problem

Offering a 'close' (X) button on maximized panels may not be what we want because there's no use in a panel-less UI. We might be able to save screen real estate by not showing it when the panel is maximized and just offering the un-maximize button.


Subtasks 1 (0 open1 closed)

Arvados - Task #19640: Review 19300-unmaximize-panelsResolvedPeter Amstutz10/26/2022

Actions

Related issues

Has duplicate Arvados Workbench 2 - Feature #19531: Add "un-maximize" button that gets the previous panels' visibility state backDuplicate

Actions
Actions #1

Updated by Peter Amstutz 6 months ago

  • Target version changed from 2022-08-17 sprint to 2022-08-31 sprint
Actions #2

Updated by Peter Amstutz 6 months ago

  • Target version changed from 2022-08-31 sprint to 2022-09-14 sprint
Actions #3

Updated by Peter Amstutz 6 months ago

  • Target version changed from 2022-09-14 sprint to 2022-09-28 sprint
Actions #4

Updated by Peter Amstutz 6 months ago

  • Target version changed from 2022-09-28 sprint to 2022-10-12 sprint
Actions #5

Updated by Peter Amstutz 6 months ago

  • Target version changed from 2022-10-12 sprint to 2022-10-26 sprint
Actions #6

Updated by Peter Amstutz 4 months ago

  • Target version changed from 2022-10-26 sprint to 2022-11-09 sprint
Actions #7

Updated by Peter Amstutz 4 months ago

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

Updated by Lucas Di Pentima 4 months ago

  • Description updated (diff)
Actions #9

Updated by Peter Amstutz 3 months ago

  • Target version changed from 2022-11-09 sprint to 2022-11-23 sprint
Actions #10

Updated by Lucas Di Pentima 3 months ago

  • Assigned To set to Lucas Di Pentima
Actions #11

Updated by Lucas Di Pentima 3 months 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 #12

Updated by Lucas Di Pentima 3 months ago

Bonus commit arvados-workbench2|a2453dde

  • Hides the close button when panel is maximized.
Actions #13

Updated by Peter Amstutz 3 months ago

  • Target version changed from 2022-11-23 sprint to 2022-11-09 sprint
Actions #14

Updated by Peter Amstutz 3 months 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.

  1. 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?
  2. 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 #15

Updated by Lucas Di Pentima 3 months 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 #16

Updated by Peter Amstutz 3 months ago

I really like this, thank you! LGTM

Actions #17

Updated by Lucas Di Pentima 3 months ago

  • Status changed from In Progress to Resolved
Actions #18

Updated by Peter Amstutz about 2 months ago

  • Release set to 47
Actions

Also available in: Atom PDF