DM-8833: Creates a basic download dialog based on selected rows

 - create download dialog with extendable options
 - create download button that connects to single table or active table of a named group
 - update LcResults.jsx to use this new download dialog as an example

Author: loitly

src/firefly/html/css/global.css

@@ -92,6 +92,11 @@
     font-weight: bold;
 }
 
+.button.attn {
+    font-weight: bold;
+    color: #005da4; /*highlightColor*/
+}
+
 .button:hover {
     cursor: pointer;
 }

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

@@ -118,7 +118,7 @@ export function* doOnPackage({title, callback}) {
     var isDone = false;
     while (!(isDone)) {
         const action = yield take([BG_JOB_IMMEDIATE, BG_JOB_ADD]);
-        isDone = title === get(action, 'payload.Title');
+        isDone = !title || title === get(action, 'payload.Title');
     }
     callback && callback();
 }

src/firefly/js/templates/lightcurve/LcResult.jsx

@@ -16,16 +16,13 @@ import {VisToolbar} from '../../visualize/ui/VisToolbar.jsx';
 import {MultiImageViewerContainer} from '../../visualize/ui/MultiImageViewerContainer.jsx';
 import {createContentWrapper} from '../../ui/panel/DockLayoutPanel.jsx';
 import {LC} from './LcManager.js';
-import {FormPanel} from '../../ui/FormPanel.jsx';
 import {Tabs, Tab} from '../../ui/panel/TabPanel.jsx';
 import {ValidationField} from '../../ui/ValidationField.jsx';
-import Validate from '../../util/Validate.js';
-import {FieldGroup} from '../../ui/FieldGroup.jsx';
-import {InputGroup} from '../../ui/InputGroup.jsx';
 import {UploadPanel} from './LcViewer.jsx';
 import {LcImageToolbar} from './LcImageToolbar.jsx';
 import {LcPFOptionsPanel} from './LcPhaseFoldingPanel.jsx';
 import {LcPeriodFindingPanel} from './PeriodogramOptionsPanel.jsx';
+import {DownloadButton, DownloadOptionPanel} from '../../ui/DownloadDialog.jsx';
 
 
 export class LcResult extends Component {
@@ -155,7 +152,27 @@ const StandardView = ({visToolbar, title, searchDesc, standard, imagePlot, xyPlo
             { visToolbar &&
                 <div style={{display: 'inline-flex', justifyContent: 'space-between', alignItems: 'center'}}>
                     <div>{visToolbar}</div>
-                    <div><DownloadButton/></div>
+                    <div>
+                        <DownloadButton>
+                            <DownloadOptionPanel
+                                cutoutSize = '200'
+                                dlParams = {{
+                                    MaxBundleSize: 200*1024*1024,    // set it to 200mb to make it easier to test multi-parts download.  each wise image is ~64mb
+                                    FilePrefix: 'WISE_Files',
+                                    BaseFileName: 'WISE_Files',
+                                    DataSource: 'WISE images',
+                                    FileGroupProcessor: 'LightCurveFileGroupsProcessor'
+                                }}>
+                                <ValidationField
+                                        initialState= {{
+                                               value: 'A sample download',
+                                               label : 'Title for this download:'
+                                                   }}
+                                        fieldKey='Title'
+                                        labelWidth={110}/>
+                            </DownloadOptionPanel>
+                        </DownloadButton>
+                    </div>
                 </div>
             }
             {searchDesc}
@@ -178,106 +195,3 @@ const StandardView = ({visToolbar, title, searchDesc, standard, imagePlot, xyPlo
     );
 };
 
-
-
-
-
-//*-------------------------------- TEST CODE FOR BACKGROUND MONITOR -------------------------------*/
-import * as TblUtil from '../../tables/TableUtil.js';
-import {dispatchPackage, doOnPackage} from '../../core/background/BackgroundCntlr.js';
-import {SelectInfo} from '../../tables/SelectInfo.js';
-import DialogRootContainer from '../../ui/DialogRootContainer.jsx';
-import {dispatchShowDialog, dispatchHideDialog} from '../../core/ComponentCntlr.js';
-import {PopupPanel} from '../../ui/PopupPanel.jsx';
-import {dispatchAddSaga} from '../../core/MasterSaga.js';
-
-
-const showDownloadDialog = (show=true, mask) => {
-    const content= (
-        <PopupPanel title={'Download Dialog'} >
-            <DownloadDialog mask= {mask}/>
-        </PopupPanel>
-    );
-    DialogRootContainer.defineDialog('Download Dialog', content);
-    if (show) {
-        dispatchShowDialog('Download Dialog');
-    } else {
-        dispatchHideDialog('Download Dialog');
-    }
-};
-
-function DownloadDialog({mask=false}) {
-
-    const onSearchSubmit = (request) => {
-        const options = {};
-
-        const searchParams = {
-            no_args: 'this is just a test processor.  no parameter is needed'
-        };
-        const dlparams = {
-            MaxBundleSize: 1024*1024*1024,
-            FilePrefix: 'WISE_Files',
-            BaseFileName: 'WISE_Files',
-            DataSource: 'WISE images',
-            Title: request.Title
-        };
-        const rowCount = request.rowCount || 2;
-        const sreq = TblUtil.makeTblRequest(searchParams.id, 'search request', searchParams, options);
-        const dreq = TblUtil.makeTblRequest('LightCurveFileGroupsProcessor', request.Title, dlparams);
-        const selectionInfo = SelectInfo.newInstance({selectAll: true, rowCount}).toString();
-        dispatchPackage(dreq, sreq, selectionInfo);
-        showDownloadDialog(true, true);
-        dispatchAddSaga(doOnPackage, {title: request.Title, callback:() => {
-            showDownloadDialog(false);
-        }});
-    };
-
-    const labelWidth = 150;
-    return (
-        <div style={{position: 'relative'}}>
-            {mask && <div style={{width: '100%', height: '100%'}} className='loading-mask'/>}
-            <FormPanel
-                width='300px' height='100px'
-                groupKey='LC_DOWNLOAD'
-                onSubmit={(request) => onSearchSubmit(request)}
-                onCancel={() => showDownloadDialog(false)}>
-                <FieldGroup groupKey='LC_DOWNLOAD' keepState={true}>
-                    <InputGroup labelWidth={150}>
-                        <ValidationField
-                            initialState= {{
-                                       value: '2',
-                                       validator: Validate.intRange.bind(null, 1, 248, 'Number of images'),
-                                       groupKey: 'LC_DOWNLOAD',
-                                       label : 'Number of images:'
-                                           }}
-                            fieldKey='rowCount'
-                            labelWidth={labelWidth}/>
-                        <ValidationField
-                            initialState= {{
-                                       value: 'A sample download',
-                                       groupKey: 'LC_DOWNLOAD',
-                                       label : 'Title for this download:'
-                                           }}
-                            fieldKey='Title'
-                            labelWidth={labelWidth}/>
-                    </InputGroup>
-                </FieldGroup>
-            </FormPanel>
-        </div>
-    );
-
-}
-
-
-
-const DownloadButton = ({}) => {
-    return (
-        <div>
-            <button type='button'
-                    className='button std hl'
-                    onClick={showDownloadDialog}
-                    title='Download lighcurve images'
-            >Download</button>
-        </div>
-    );
-};