From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Thu, 10 Mar 2022 21:00:05 +0000 (-0300)
Subject: 16672: Improves UX by avoiding to instantly focus on a MPV panel.
X-Git-Tag: 2.4.0~2^2~16
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/38fecec459a6ed195c771540bab9367835f968c8

16672: Improves UX by avoiding to instantly focus on a MPV panel.

100ms seems "instant enough" for cases where the user is really attempting
to use the multi-panel-view task bar. For other cases where the user
casually hovers through any of the buttons because is trying to reach
some different part of the UI, not making the UI "move" is a lot less
confusing.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
---

diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index 185c3b90..6fb3cc49 100644
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -112,7 +112,7 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
         children = [children];
     }
     const visibility = (children as ReactNodeArray).map((_, idx) =>
-        !!!panelStates || // if panelStates wasn't passed, default to all visible panels
+        !panelStates || // if panelStates wasn't passed, default to all visible panels
             (panelStates[idx] &&
                 (panelStates[idx].visible || panelStates[idx].visible === undefined)));
     const [panelVisibility, setPanelVisibility] = useState<boolean[]>(visibility);
@@ -159,13 +159,20 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
             const panelIsMaximized = panelVisibility[idx] &&
                 panelVisibility.filter(e => e).length === 1;
 
+            let brightenerTimer: NodeJS.Timer;
             toggles = [
                 ...toggles,
                 <Tooltip title={toggleTooltip} disableFocusListener>
                     <Button variant={toggleVariant} size="small" color="primary"
                         className={classNames(classes.button)}
-                        onMouseEnter={() => setBrightenedPanel(idx)}
-                        onMouseLeave={() => setBrightenedPanel(-1)}
+                        onMouseEnter={() => {
+                            brightenerTimer = setTimeout(
+                                () => setBrightenedPanel(idx), 100);
+                        }}
+                        onMouseLeave={() => {
+                            brightenerTimer && clearTimeout(brightenerTimer);
+                            setBrightenedPanel(-1);
+                        }}
                         onClick={showFn(idx)}>
                             {panelName}
                             {toggleIcon}