FIREFLY-1754: Fix poor positioning of App Hints

jaladh-singhal · jaladh-singhal · commit 78bc7adcb778 · 2025-06-09T15:01:21.000-07:00
FIREFLY-1754: Make appHint calculate positioning based on anchor

FIREFLY-1754: Move AppHint to its own file

FIREFLY-1754: Make AppHint use DOM refs

FIREFLY-1754: dispatch tab menu nodes only when necessary
diff --git a/src/firefly/js/core/LayoutCntlr.js b/src/firefly/js/core/LayoutCntlr.js
@@ -558,4 +558,7 @@ function getColFitIdx(gridView, row, testIdx, gridColumns, testWidth) {
 
 }
 
-
+// getter/setters for the DOM nodes of Menu Tabs, stored in the layout info
+export const MENU_TAB_NODES = 'menuTabNodes';
+export const getMenuTabNodes = () => getLayouInfo()?.[MENU_TAB_NODES] ?? {};
+export const dispatchUpdateMenuTabNodes = (menuTabNodes) => dispatchUpdateLayoutInfo({[MENU_TAB_NODES]: menuTabNodes});
diff --git a/src/firefly/js/templates/common/FireflyLayout.jsx b/src/firefly/js/templates/common/FireflyLayout.jsx
@@ -15,7 +15,7 @@ import {AppConfigDrawer} from '../../ui/AppConfigDrawer.jsx';
 import {getActionFromUrl} from 'firefly/core/History';
 import {getDropDownInfo, SHOW_DROPDOWN} from 'firefly/core/LayoutCntlr';
 import {flux} from 'firefly/core/ReduxFlux';
-import {APP_HINT_IDS, appHintPrefName} from 'firefly/templates/fireflyviewer/LandingPage';
+import {APP_HINT_IDS, appHintPrefName} from 'firefly/ui/AppHint';
 import {InitArgsCtx} from './InitArgsCtx';
 
 /*
diff --git a/src/firefly/js/templates/fireflyviewer/LandingPage.jsx b/src/firefly/js/templates/fireflyviewer/LandingPage.jsx
@@ -1,29 +1,25 @@
-import {Box, Button, Divider, Sheet, Snackbar, Stack, Typography} from '@mui/joy';
+import {Box, Divider, Sheet, Stack, Typography} from '@mui/joy';
 import React, {useContext, useState} from 'react';
-import {elementType, shape, object, string, arrayOf, oneOf, node} from 'prop-types';
+import {elementType, shape, object, string, arrayOf, node} from 'prop-types';
 import QueryStats from '@mui/icons-material/QueryStats';
-import TipsAndUpdates from '@mui/icons-material/TipsAndUpdates';
 
 import {getBackgroundInfo, isMonitored, isSearchJob} from '../../core/background/BackgroundUtil.js';
-import {dispatchShowDropDown} from '../../core/LayoutCntlr.js';
+import {dispatchShowDropDown, getMenuTabNodes} from '../../core/LayoutCntlr.js';
 import {AppPropertiesCtx} from '../../ui/AppPropertiesCtx.jsx';
 import {Slot, useStoreConnector} from '../../ui/SimpleComponent.jsx';
 import {FileDropZone} from '../../visualize/ui/FileUploadViewPanel.jsx';
-import {dispatchAddPreference, getPreference} from 'firefly/core/AppDataCntlr';
-
-export const APP_HINT_IDS = {
-    TABS_MENU: 'tabsMenu',
-    BG_MONITOR: 'bgMonitor'
-};
+import {APP_HINT_IDS, AppHint, HINT_TIP_PLACEMENTS} from 'firefly/ui/AppHint';
 
 
 export function LandingPage({slotProps={}, sx, ...props}) {
     const {appTitle,footer,
         fileDropEventAction='FileUploadDropDownCmd'} = useContext(AppPropertiesCtx);
 
+    const {first: tabsMenuHintAnchor, last: bgMonitorHintAnchor} = useStoreConnector(getMenuTabNodes);
+
     const defSlotProps = {
-        tabsMenuHint: {appTitle, id: APP_HINT_IDS.TABS_MENU, hintText: 'Choose a tab to search for or upload data.', sx: { left: '16rem' }},
-        bgMonitorHint: {appTitle, id: APP_HINT_IDS.BG_MONITOR, hintText: 'Load job results from background monitor', tipPlacement: 'end', sx: { right: 8 }},
+        tabsMenuHint: {appTitle, id: APP_HINT_IDS.TABS_MENU, anchorNode: tabsMenuHintAnchor, hintText: 'Choose a tab to search for or upload data.'},
+        bgMonitorHint: {appTitle, id: APP_HINT_IDS.BG_MONITOR, anchorNode: bgMonitorHintAnchor, hintText: 'Load job results from background monitor', tipPlacement: HINT_TIP_PLACEMENTS.START},
         topSection: { title: `Welcome to ${appTitle}` },
         bottomSection: {
                 icon: <QueryStats sx={{ width: '6rem', height: '6rem' }} />,
@@ -47,7 +43,7 @@ export function LandingPage({slotProps={}, sx, ...props}) {
 
     return (
         <Sheet className='ff-ResultsPanel-StandardView' sx={{width: 1, height: 1, ...sx}} {...props}>
-            <Slot component={AppHint} {...defSlotProps.tabsMenuHint} slotProps={slotProps?.tabsMenuHint}/>
+            {tabsMenuHintAnchor && <Slot component={AppHint} {...defSlotProps.tabsMenuHint} slotProps={slotProps?.tabsMenuHint}/>}
             {haveBgJobs && <Slot component={AppHint} {...defSlotProps.bgMonitorHint} slotProps={slotProps?.bgMonitorHint}/>}
             <FileDropZone {...{
                 dropEvent, setDropEvent,
@@ -118,61 +114,6 @@ function EmptyResults({icon, text, subtext, summaryText, actionItems, slotProps}
     );
 }
 
-// An app hint needs to be shown only the first time user loads an app. So this is controlled by a flag saved as app preference
-export const appHintPrefName = (appTitle, hintId) => `showAppHint__${appTitle}--${hintId}`;
-
-function AppHint({appTitle, id, hintText, tipPlacement='middle', sx={}}) {
-    const showAppHint = useStoreConnector(() => getPreference(appHintPrefName(appTitle, id), true));
-
-    const arrowTip = {
-        '&::before': {
-            content: '""',
-            width: '1rem',
-            height: '1rem',
-            backgroundColor: 'inherit',
-            transform: 'rotate(-45deg)',
-            position: 'absolute',
-            top: '-0.5rem',
-            left: 'calc(50% - 0.5rem)',
-            ...tipPlacement==='start' && {left: 'var(--Snackbar-padding)'},
-            ...tipPlacement==='end' && {left: 'auto', right: 'var(--Snackbar-padding)'}
-        }
-    };
-
-    // to undo positioning controlled by anchorOrigin prop of Snackbar, and to place it directly below Banner
-    const positioningSx = {
-        position: 'absolute',
-        top: '0.75rem',
-        left: 'auto',
-        right: 'auto',
-        bottom: 'auto'
-    };
-
-    return (
-        <Snackbar open={Boolean(showAppHint)}
-                  size='lg'
-                  variant='solid' //to make it look different from alerts
-                  color='primary'
-                  invertedColors={true}
-                  onClose={(e, reason)=> {
-                      //don't close a hint if the click made outside it (clickaway) originated from another hint
-                      if (reason==='clickaway' && e?.target?.closest('.MuiSnackbar-root')) return;
-                      dispatchAddPreference(appHintPrefName(appTitle, id), false);
-                  }}
-                  sx={{...positioningSx, ...sx, ...arrowTip}}
-                  startDecorator={<TipsAndUpdates/>}
-                  endDecorator={
-                      <Button
-                          onClick={() => dispatchAddPreference(appHintPrefName(appTitle, id), false)}
-                          variant='outlined'
-                          color='primary'>
-                          Got it
-                      </Button>
-                  }>
-            {hintText}
-        </Snackbar>
-    );
-}
 
 
 LandingPage.propTypes = {
@@ -216,12 +157,3 @@ EmptyResults.propTypes = {
     })),
     slotProps: object,
 };
-
-
-AppHint.propTypes = {
-    appTitle: string.isRequired,
-    id: string.isRequired,
-    hintText: string.isRequired,
-    tipPlacement: oneOf(['start', 'middle', 'end']),
-    sx: object,
-};
diff --git a/src/firefly/js/templates/hydra/HydraViewer.jsx b/src/firefly/js/templates/hydra/HydraViewer.jsx
@@ -161,7 +161,6 @@ const HydraAppBranding = ({title, desc}) => (
 );
 
 const defaultCommonProps = ({title, desc}) => ({
-    bgMonitorHint: { sx: { right: 50 } },
     topSection: { title, desc }
 });
 
diff --git a/src/firefly/js/ui/AppHint.jsx b/src/firefly/js/ui/AppHint.jsx
@@ -0,0 +1,109 @@
+import {useStoreConnector} from 'firefly/ui/SimpleComponent';
+import {dispatchAddPreference, getPreference} from 'firefly/core/AppDataCntlr';
+import React, {useLayoutEffect, useRef, useState} from 'react';
+import {Button, Snackbar} from '@mui/joy';
+import TipsAndUpdates from '@mui/icons-material/TipsAndUpdates';
+import {object, oneOf, string} from 'prop-types';
+
+
+export const APP_HINT_IDS = {
+    TABS_MENU: 'tabsMenu',
+    BG_MONITOR: 'bgMonitor'
+};
+
+export const HINT_TIP_PLACEMENTS = {
+    START: 'start',
+    MIDDLE: 'middle',
+    END: 'end'
+};
+
+/**An app hint needs to be shown only the first time user loads an app. So this is controlled by a flag saved as app preference**/
+export const appHintPrefName = (appTitle, hintId) => `showAppHint__${appTitle}--${hintId}`;
+
+export function AppHint({appTitle, id, anchorNode, hintText, tipPlacement=HINT_TIP_PLACEMENTS.MIDDLE, sx={}}) {
+    const showAppHint = useStoreConnector(() => getPreference(appHintPrefName(appTitle, id), true));
+    const appHintRef = useRef();
+
+    // AppHint is rendered inside LandingPage, so we cannot yet compute top/bottom from the anchor node but only left/right
+    const [anchorRelativePosSx, setAnchorRelativePosSx] = useState({});
+    useLayoutEffect(() => {
+        if (anchorNode) {
+            const anchorRect = anchorNode.getBoundingClientRect();
+            const appHintRect = appHintRef.current?.getBoundingClientRect() ?? {width: 0};
+            const posSx = {left: 'auto', right: 'auto'};
+            switch (tipPlacement) {
+                case HINT_TIP_PLACEMENTS.START:
+                    posSx.left = anchorRect.left;
+                    break;
+                case HINT_TIP_PLACEMENTS.END:
+                    posSx.right = `calc(100vw - ${anchorRect.right}px)`;
+                    break;
+                case HINT_TIP_PLACEMENTS.MIDDLE:
+                default:
+                    posSx.left = anchorRect.left + (anchorRect.width/2) - (appHintRect.width/2); // to center the hint
+                    break;
+            }
+            setAnchorRelativePosSx(posSx);
+        }
+    }, [anchorNode]);
+
+    const arrowTip = {
+        '&::before': {
+            content: '""',
+            width: '1rem',
+            height: '1rem',
+            backgroundColor: 'inherit',
+            transform: 'rotate(-45deg)',
+            position: 'absolute',
+            top: '-0.5rem',
+            left: 'calc(50% - 0.5rem)', //tipPlacement===HINT_TIP_PLACEMENTS.MIDDLE
+            ...tipPlacement===HINT_TIP_PLACEMENTS.START && {left: 'var(--Snackbar-padding)'},
+            ...tipPlacement===HINT_TIP_PLACEMENTS.END && {left: 'auto', right: 'var(--Snackbar-padding)'}
+        }
+    };
+
+    // to undo positioning controlled by anchorOrigin prop of Snackbar, and to place it directly below MenuTabBar
+    const defaultPositionSx = {
+        position: 'absolute',
+        top: '0.75rem', // to create space for the arrow tip (with height: sqrt(2) * 1 rem / 2)
+        bottom: 'auto',
+        left: 'auto',
+        right: 'auto',
+    };
+
+    return (
+        <Snackbar open={Boolean(showAppHint)}
+                  ref={appHintRef}
+                  size='lg'
+                  variant='solid' //to make it look different from alerts
+                  color='primary'
+                  invertedColors={true}
+                  onClose={(e, reason)=> {
+                      //don't close a hint if the click made outside it (clickaway) originated from another hint
+                      if (reason==='clickaway' && e?.target?.closest('.MuiSnackbar-root')) return;
+                      dispatchAddPreference(appHintPrefName(appTitle, id), false);
+                  }}
+                  sx={{...defaultPositionSx, ...anchorRelativePosSx, ...sx, ...arrowTip}}
+                  startDecorator={<TipsAndUpdates/>}
+                  endDecorator={
+                      <Button
+                          onClick={() => dispatchAddPreference(appHintPrefName(appTitle, id), false)}
+                          variant='outlined'
+                          color='primary'>
+                          Got it
+                      </Button>
+                  }>
+            {hintText}
+        </Snackbar>
+    );
+}
+
+AppHint.propTypes = {
+    appTitle: string.isRequired,
+    id: string.isRequired,
+    anchorNode: object, // generally a Menu Tab DOM node
+    hintText: string.isRequired,
+    tipPlacement: oneOf(['start', 'middle', 'end']),
+    sx: object,
+};
+
diff --git a/src/firefly/js/ui/Menu.jsx b/src/firefly/js/ui/Menu.jsx
@@ -15,7 +15,13 @@ import {
     getMenu, getPreference, getSelectedMenuItem, getUserInfo
 } from '../core/AppDataCntlr.js';
 import {flux} from '../core/ReduxFlux.js';
-import {dispatchHideDropDown, dispatchShowDropDown, getLayouInfo, getResultCounts} from '../core/LayoutCntlr.js';
+import {
+    dispatchHideDropDown,
+    dispatchShowDropDown,
+    dispatchUpdateMenuTabNodes,
+    getLayouInfo, getMenuTabNodes,
+    getResultCounts,
+} from '../core/LayoutCntlr.js';
 import QuizOutlinedIcon from '@mui/icons-material/QuizOutlined';
 import {AppPropertiesCtx} from './AppPropertiesCtx.jsx';
 import {useStoreConnector} from './SimpleComponent.jsx';
@@ -110,6 +116,10 @@ function AdjustableMenu({menuTabItems, helpItem, selected, dropDown, showUserInf
     const {current:tbarElement}= useRef({element:undefined});
     const {current:tabRenderedInfo}= useRef({tabWidths:{}});
     const {current:lastButtonSize}= useRef({size:'lg'});
+
+    const storedMenuTabNodes = useStoreConnector(getMenuTabNodes);
+    const tabNodesRef = useRef({first: undefined, last: undefined});
+
     const showHelp= Boolean(helpItem);
 
     useEffect(() => {
@@ -123,15 +133,28 @@ function AdjustableMenu({menuTabItems, helpItem, selected, dropDown, showUserInf
         setTabCount(menuTabItems.length); // force a rerender if number of tabs change
     }, [menuTabItems.length]);
 
+    useEffect(() => {
+        const newTabNodes = Object.fromEntries(Object.entries(tabNodesRef.current).filter(
+            ([k, node])=> storedMenuTabNodes?.[k] !== node));
+        if (Object.keys(newTabNodes).length > 0) {
+            dispatchUpdateMenuTabNodes(newTabNodes);
+        }
+    });
+
     const setTabBarElement= useCallback((ts) => {
         tbarElement.element= ts;
         if (ts && tabCount===-1) setTabCount(menuTabItems.length); // force a rerender when we know the html element of the tab bar
     },[]);
 
-    const setElement= useCallback( (key,e) => {
-        if (!e) return;
+    const setElement= useCallback( (key,el) => {
+        if (!el) return;
+
+        // save the first and last tab elements as they are needed for positioning the app hints
+        if (key==='0') tabNodesRef.current['first'] = el;
+        if (key===menuTabItems.length-1+'') tabNodesRef.current['last'] = el;
+
         const {tabWidths}= tabRenderedInfo;
-        tabWidths[key]= Math.trunc(e.getBoundingClientRect()?.width ?? 0);
+        tabWidths[key]= Math.trunc(el.getBoundingClientRect()?.width ?? 0);
         Object.keys(tabWidths).forEach( (key) => {
             if (Number(key)>=menuTabItems.length) tabWidths[key]= undefined;
         });
@@ -192,13 +215,13 @@ function MenuTabBar({menuTabItems=[], size, selected, dropDown, displayMask, set
     const color='primary';
 
     const tabItems= [
-        <ResultsTab {...{key:'results-tab', size, color, variant, ref: (c) => setElement('results-tab ',c)}}/>,
+        <ResultsTab {...{key:'results-tab', size, color, variant, ref: (el) => setElement('results-tab ', el)}}/>,
         ...menuTabItems
             .filter( isItemEnabled)
             .map(({action,label,TabRenderer,title}, idx) =>
             {
                 const tabProps = {key: idx, value:action, disableIndicator:true, color, variant,
-                    ref: (c) => setElement(idx+'',c),
+                    ref: (el) => setElement(idx + '', el),
                     sx: (theme) => ({ ...setupTabCss(theme,size) })
                 };
                 const tab= TabRenderer ? <TabRenderer {...tabProps} /> : <Tab {...tabProps}> {label}</Tab>;

Original file line number	Diff line number	Diff line change
`@@ -558,4 +558,7 @@ function getColFitIdx(gridView, row, testIdx, gridColumns, testWidth) {`
`558`	`558`
`559`	`559`	`}`
`560`	`560`
`561`		`-`
	`561`	`+// getter/setters for the DOM nodes of Menu Tabs, stored in the layout info`
	`562`	`+export const MENU_TAB_NODES = 'menuTabNodes';`
	`563`	`+export const getMenuTabNodes = () => getLayouInfo()?.[MENU_TAB_NODES] ?? {};`
	`564`	`+export const dispatchUpdateMenuTabNodes = (menuTabNodes) => dispatchUpdateLayoutInfo({[MENU_TAB_NODES]: menuTabNodes});`