Merge pull request #1574 from Caltech-IPAC/FIREFLY-1494-column-reset

Firefly 1494 column reset

src/firefly/html/css/global.css

@@ -308,30 +308,6 @@ div.rootStyle img {
 
 
 /*-------------------< loading mask ---------------------*/
-.mask-only {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: var(--joy-palette-background-backdrop);
-    backdrop-filter: blur(8px);
-}
-
-.loading-mask {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-}
-
-.loading-mask::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: var(--joy-palette-background-backdrop);
-    backdrop-filter: blur(8px);
-}
 @-webkit-keyframes spin {
     from { transform: rotate(0deg);}
     to {transform: rotate(359deg);}
@@ -353,23 +329,6 @@ div.rootStyle img {
     animation-iteration-count: infinite;
     animation-timing-function: linear;
 }
-
-.loading-mask::after {
-    content: "";
-    position: absolute;
-    border-width: 3px;
-    border-style: solid;
-    border-color: transparent rgb(255, 255, 255) rgb(255, 255, 255);
-    border-radius: 50%;
-    width: 24px;
-    height: 24px;
-    top: calc(50% - 12px);
-    left: calc(50% - 12px);
-    animation-name: spin;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-}
 /*------------------- loading mask >---------------------*/
 
 .lost-connection--small {

src/firefly/js/charts/ui/PlotlyWrapper.jsx

@@ -14,6 +14,7 @@ import {logger} from '../../util/Logger.js';
 import BrowserInfo from '../../util/BrowserInfo.js';
 import Enum from 'enum';
 import {showPlotLySaveDialog} from 'firefly/charts/ui/PlotlySaveDialog.jsx';
+import {Skeleton} from '@mui/joy';
 
 const PLOTLY_BASE_ID= 'plotly-plot';
 const MASKING_DELAY= 400;
@@ -397,7 +398,7 @@ export class PlotlyWrapper extends Component {
         return (
             <div style={nstyle} >
                 <div id={chartId || this.id} style={{height: '100%', width: '100%'}} ref={this.refUpdate}/>
-                {showMask && <div style={maskWrapper}> <div className='loading-mask'/> </div>}
+                {showMask && <div style={maskWrapper}> <Skeleton/> </div>}
             </div>
         );
     }

src/firefly/js/core/ComponentCntlr.js

@@ -3,7 +3,7 @@
  */
 
 import {flux} from './ReduxFlux';
-import {get} from 'lodash';
+import {get, isNil} from 'lodash';
 import update from 'immutability-helper';
 import {REINIT_APP} from './AppDataCntlr.js';
 
@@ -168,6 +168,14 @@ const hideAllDialogsChange= function(state) {
 const changeComponentState=  function(state, action) {
     const {componentId, componentState} = action.payload;
     if (!componentId) {return state;}
+
+    if (isNil(componentState)) {
+        return update(state,
+            {
+                [COMPONENT_KEY]: {[componentId]: {$set: undefined}}
+            });
+    }
+
     if (!state[COMPONENT_KEY][componentId]) {
         state = update(state,
             {

src/firefly/js/core/background/BackgroundCntlr.js

@@ -203,7 +203,7 @@ function bgPackage(action) {
                     }
                 }
             } else {
-                showInfoPopup(jobInfo?.error);
+                jobInfo?.error && showInfoPopup(jobInfo.error);
             }
         };
         doPackageRequest({dlRequest, searchRequest, selectInfo:selectionInfo, bgKey, onComplete});

src/firefly/js/core/background/BackgroundMonitor.jsx

@@ -29,7 +29,6 @@ import CANCEL from 'html/images/stop.gif';
 import DOWNLOAED from 'html/images/blue_check-on_10x10.gif';
 import FAILED from 'html/images/exclamation16x16.gif';
 import INFO from 'html/images/info-icon.png';
-import './BackgroundMonitor.css';
 import CompleteButton from 'firefly/ui/CompleteButton';
 
 

src/firefly/js/core/background/BgMaskPanel.jsx

@@ -1,15 +1,14 @@
 import React, {useEffect} from 'react';
-import PropTypes from 'prop-types';
-import {Button, Stack} from '@mui/joy';
-import shallowequal from 'shallowequal';
+import {bool, string, func, object, element} from 'prop-types';
+import {Button, LinearProgress, Skeleton, Stack, Typography} from '@mui/joy';
 
 import {dispatchJobAdd, dispatchJobCancel} from './BackgroundCntlr.js';
 import {dispatchComponentStateChange, getComponentState} from '../ComponentCntlr.js';
-import {useStoreConnector} from '../../ui/SimpleComponent.jsx';
+import {useStoreConnector, Slot} from '../../ui/SimpleComponent.jsx';
 import {Logger} from '../../util/Logger.js';
 import {showJobInfo} from './JobInfo.jsx';
 import {getJobInfo} from './BackgroundUtil.js';
-import INFO from 'html/images/info-icon.png';
+import {InfoButton} from 'firefly/visualize/ui/Buttons.jsx';
 
 const logger = Logger('BgMaskPanel');
 
@@ -23,16 +22,13 @@ const logger = Logger('BgMaskPanel');
  */
 
 
-export const BgMaskPanel = React.memo(({componentKey, onMaskComplete, style={}}) => {
-
-    const {inProgress, jobInfo} = useStoreConnector((oldState={}) => {
-        const {inProgress:oProg, jobInfo:oInfo} = oldState;
-        const {inProgress=false, jobId} = getComponentState(componentKey);
-        const jobInfo = getJobInfo(jobId);
-        if (oProg === inProgress && shallowequal(oInfo, jobInfo)) return oldState;
-        return {inProgress, jobInfo};
-    });
+export const BgMaskPanel = React.memo(({componentKey, onMaskComplete, mask, showError= true, ...props}) => {
 
+    const inProgress = useStoreConnector(() => getComponentState(componentKey)?.inProgress || false);
+    const jobInfo    = useStoreConnector(() => {
+                           const {jobId} = getComponentState(componentKey);
+                           return jobId && getJobInfo(jobId);
+                       });
     const sendToBg = () => {
         if (jobInfo) {
             dispatchComponentStateChange(componentKey, {inProgress:false});
@@ -46,16 +42,12 @@ export const BgMaskPanel = React.memo(({componentKey, onMaskComplete, style={}})
         }
     };
 
-    const showInfo = () => {
-        jobInfo && showJobInfo(jobInfo.jobId);
-    };
-
     const msg = jobInfo?.errorSummary?.message || jobInfo?.jobInfo?.progressDesc || 'Working...';
 
-    const Options = () => ( (inProgress || true) &&
+    const Options = () => (
         <Stack direction='row' spacing={1}>
-            <Button variant='solid' color='primary' onClick={sendToBg}>Send to background</Button>
-            <Button onClick={abort}>Cancel</Button>
+            <Button variant='solid' color='primary' disabled={!jobInfo} onClick={sendToBg}>Send to background</Button>
+            <Button disabled={!jobInfo} onClick={abort}>Cancel</Button>
         </Stack>
     );
 
@@ -69,39 +61,42 @@ export const BgMaskPanel = React.memo(({componentKey, onMaskComplete, style={}})
     logger.debug(inProgress ? 'show' : 'hide');
     if (inProgress) {
         return (
-            <div className='BgMaskPanel' style={style}>
-                <div className='loading-mask'/>
-                <div style={{display: 'flex', alignItems: 'center'}}>
-                    <div className='BgMaskPanel__content'>
-                        <div style={{display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
-                            <div className='BgMaskPanel__msg'>{msg}</div>
-                            <img className='JobInfo__items--link' onClick={showInfo} src={INFO} style={{height: 20}}/>
-                        </div>
-                        <Options/>
-                    </div>
-                </div>
-            </div>
+            <MaskP msg={msg} jobInfo={jobInfo} mask={mask} {...props}>
+                <Options/>
+            </MaskP>
         );
-    } else if (errorInJob) {
+    } else if (errorInJob && showError) {
         return (
-            <div className='BgMaskPanel' style={style}>
-                <div className='mask-only'/>
-                <div style={{display: 'flex', alignItems: 'center'}}>
-                    <div className='BgMaskPanel__content'>
-                        <div style={{display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
-                            <div style={{marginRight: 5, fontSize: 18}}> {jobInfo.phase} </div>
-                            <img className='JobInfo__items--link' onClick={showInfo} src={INFO} style={{height: 20}}/>
-                        </div>
-                        <div className='BgMaskPanel__msg'>{msg}</div>
-                    </div>
-                </div>
-            </div>
+            <MaskP msg={msg} jobInfo={jobInfo} mask={mask} {...props}/>
         );
     } else return null;
 });
 
+function MaskP({msg, jobInfo, children, mask=<Skeleton/>, ...props}) {
+    const showInfo = () => {
+        showJobInfo(jobInfo.jobId);
+    };
+
+    return (
+        <Slot component={Stack} position='absolute' sx={{inset:0}} slotProps={props}>
+            {mask}
+            <Stack whiteSpace='nowrap' position='absolute' zIndex={10} top='50%' left='50%' spacing={2} sx={{transform: 'translate(-50%, -50%)'}}>
+                <Stack direction='row' alignItems='center' justifyContent='center' spacing={1}>
+                    <Typography level='title-md' color='warning' fontStyle='italic' noWrap={true}>{msg}</Typography>
+                    <InfoButton enabled={!!jobInfo} onClick={showInfo}/>
+                </Stack>
+                {children}
+                <LinearProgress color='neutral'/>
+            </Stack>
+        </Slot>
+
+    );
+}
+
 BgMaskPanel.propTypes = {
-    componentKey: PropTypes.string.isRequired,  // key used to identify this background job
-    style: PropTypes.object,                    // used for overriding default styling
-    onMaskComplete: PropTypes.func
+    componentKey: string.isRequired,  // key used to identify this background job
+    style: object,                    // used for overriding default styling
+    onMaskComplete: func,
+    showError: bool,
+    mask: element
 };

src/firefly/js/core/background/JobInfo.jsx

@@ -9,12 +9,17 @@ import {dispatchShowDialog} from '../ComponentCntlr.js';
 import {HelpIcon} from '../../ui/HelpIcon.jsx';
 import {CollapsibleItem, CollapsibleGroup} from 'firefly/ui/panel/CollapsiblePanel.jsx';
 import {uwsJobInfo} from 'firefly/rpc/SearchServicesJson.js';
-import {Box, Button, Stack} from '@mui/joy';
+import {Box, Button, Skeleton, Stack} from '@mui/joy';
 import {OverflowMarker} from 'firefly/tables/ui/TablePanel.jsx';
 
 
-const popupSx = {justifyContent: 'space-between', resize: 'both', overflow: 'auto',
-    minHeight: 200, minWidth: 450};
+const popupSx = {
+    justifyContent: 'space-between',
+    resize: 'both',
+    overflow: 'auto',
+    minHeight: 200, minWidth: 450,
+    width: '45vh', height: '45wh'
+};
 
 export function showJobInfo(jobId) {
     const ID = 'show-job-info';
@@ -36,7 +41,7 @@ export async function showUwsJob({jobUrl, jobId}) {
     const mask = (
         <PopupPanel title='UWS Job' >
             <Box key={jobId} sx={{...popupSx, position: 'relative'}}>
-                <div className='loading-mask'/>
+                <Skeleton/>
             </Box>
         </PopupPanel>
     );