#393 Open LaunchDialog on splitButton action

* Refactor LaunchDialog use
* Add SimpleDialog to replace ActionDialog since impl of ActionDialog provokes errors

Author: Lucas Rebscher

webapp/components/NetPyNE.js

@@ -8,6 +8,7 @@ import {
   LayoutManager,
   Drawer,
   Dialog,
+  LaunchDialog,
 } from 'netpyne/components';
 
 import Utils from '../Utils';
@@ -137,6 +138,7 @@ class NetPyNE extends React.Component {
         </div>
         <Dialog />
         <ErrorDialog />
+        <LaunchDialog />
       </div>
     );
   }

webapp/components/index.js

@@ -20,6 +20,7 @@ import {
 import {
   cloneExperiment,
   getExperiments,
+  openLaunchDialog,
 } from '../redux/actions/experiments';
 
 import {
@@ -60,6 +61,7 @@ import _SelectCellTemplate from './definition/cellRules/SelectCellTemplate';
 import _Experiments from './experiments/Experiments';
 import _ExperimentEdit from './experiments/ExperimentEdit';
 import _ExperimentManager from './experiments/ExperimentManager';
+import _LaunchDialog from './topbar/dialogs/LaunchDialog';
 
 const updateCardsDispatch = (dispatch) => ({ updateCards: () => dispatch(updateCards) });
 
@@ -117,6 +119,18 @@ export const Experiments = connect(
   }),
 )(_Experiments);
 
+export const LaunchDialog = connect(
+  (state, ownProps) => {
+    const { inDesign, openLaunchDialog } = state.experiments;
+    return ({
+      ...ownProps,
+      open: openLaunchDialog,
+      experimentName: inDesign == null ? '' : inDesign.name,
+      numberOfTrials: inDesign == null ? '' : inDesign.trials.length,
+    });
+  },
+)(_LaunchDialog);
+
 export const ExperimentEdit = _ExperimentEdit;
 export const ExperimentManager = _ExperimentManager;
 
@@ -286,7 +300,7 @@ export const Topbar = connect(
     automaticInstantiation: state.general.automaticInstantiation,
     automaticSimulation: state.general.automaticSimulation,
     theme: state.general.theme,
-    experimentInDesign: state.experiments.inDesign,
+    experimentInDesign: state.experiments.inDesign != null,
   }),
   (dispatch) => ({
     dispatchAction: (action) => dispatch(action),
@@ -301,13 +315,15 @@ export const SwitchPageButton = connect(
     modelState: state.general.modelState,
     automaticInstantiation: state.general.automaticInstantiation,
     automaticSimulation: state.general.automaticSimulation,
+    experimentInDesign: state.experiments.inDesign != null,
   }),
   (dispatch) => ({
     switchToEditModelPage: () => dispatch(editModel),
     createNetwork: () => dispatch(createNetwork),
     createAndSimulateNetwork: () => dispatch(createAndSimulateNetwork),
     showNetwork: () => dispatch(showNetwork),
     simulateNetwork: () => dispatch(simulateNetwork()),
+    openLaunchDialog: () => dispatch(openLaunchDialog()),
   }),
 )(_SwitchPageButton);
 

webapp/components/topbar/SwitchPageButton.js

@@ -51,9 +51,17 @@ class SwitchPageButton extends Component {
         this.props.showNetwork();
       }
     } else if (selectedOption === SIMULATE) {
-      this.props.simulateNetwork();
+      if (this.props.experimentInDesign) {
+        this.props.openLaunchDialog();
+      } else {
+        this.props.simulateNetwork();
+      }
     } else if (selectedOption === CREATE_AND_SIMULATE) {
-      this.props.createAndSimulateNetwork();
+      if (this.props.experimentInDesign) {
+        this.props.openLaunchDialog();
+      } else {
+        this.props.createAndSimulateNetwork();
+      }
     } else if (selectedOption === BACK_TO_EDIT) {
       this.props.switchToEditModelPage();
     } else {

webapp/components/topbar/Topbar.js

@@ -19,7 +19,6 @@ import NewModelDialog from './dialogs/NewModel';
 import ImportExportHLSDialog from './dialogs/ImportExportHLS';
 import ImportCellParamsDialog from './dialogs/ImportCellParams';
 import UploadDownloadFilesDialog from './dialogs/UploadDownloadFiles';
-import LaunchDialog from './dialogs/LaunchDialog';
 
 import { TOPBAR_CONSTANTS } from '../../constants';
 
@@ -104,7 +103,6 @@ class Topbar extends Component {
       dialogOpen,
       topbarDialogName,
       topbarDialogMetadata,
-      experimentInDesign,
     } = this.props;
     let content;
     if (dialogOpen) {
@@ -185,16 +183,6 @@ class Topbar extends Component {
             />
           );
           break;
-        case TOPBAR_CONSTANTS.SIMULATE:
-          content = (
-            <LaunchDialog
-              open={dialogOpen}
-              onRequestClose={() => this.handleClose()}
-              experimentName={experimentInDesign == null ? '' : experimentInDesign.name}
-              numberOfTrials={experimentInDesign == null ? '' : experimentInDesign.trials.length}
-            />
-          );
-          break;
         default:
           content = <div />;
           break;

webapp/components/topbar/dialogs/ActionDialog.js

@@ -22,6 +22,19 @@ class ActionDialog extends React.Component {
     this.state = { hide: !this.props.openErrorDialogBox && !this.props.openDialog };
   }
 
+  handleClickGoBack () {
+    this.setState({ hide: true });
+    this.clearErrorDialogBox();
+  }
+
+  cancelDialog = () => {
+    this.clearErrorDialogBox();
+    this.setState({ hide: true });
+    if (this.props.onRequestClose) {
+      this.props.onRequestClose();
+    }
+  };
+
   performAction = () => {
     if (this.props.command) {
       if (this.props.isFormValid === undefined || this.props.isFormValid()) {
@@ -41,19 +54,6 @@ class ActionDialog extends React.Component {
     }
   }
 
-  cancelDialog = () => {
-    this.clearErrorDialogBox();
-    this.setState({ hide: true });
-    if (this.props.onRequestClose) {
-      this.props.onRequestClose();
-    }
-  };
-
-  handleClickGoBack () {
-    this.setState({ hide: true });
-    this.clearErrorDialogBox();
-  }
-
   render () {
     const {
       classes,

webapp/components/topbar/dialogs/LaunchDialog.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { ActionDialog } from 'netpyne/components';
 import * as ExperimentsApi from 'root/api/experiments';
 import {
   DialogContentText,
@@ -21,11 +20,11 @@ import InfoIcon from '@material-ui/icons/Info';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { useDispatch } from 'react-redux';
 import { simulateNetwork } from 'root/redux/actions/general';
+import { closeLaunchDialog } from '../../../redux/actions/experiments';
 import currentModal from '../../../static/icons/modelSelected.png';
 import currentModalUnselected from '../../../static/icons/modelUnselected.png';
 import experimentSelected from '../../../static/icons/experimentSelected.png';
 import experimentUnselected from '../../../static/icons/experimentUnselected.png';
-import Checkbox from '../../general/Checkbox';
 import { LAUNCH_MODAL } from '../../../constants';
 import {
   bgLight,
@@ -39,6 +38,7 @@ import {
 } from '../../../theme';
 import CircularLoader from '../../general/Loader';
 import { openBackendErrorDialog } from '../../../redux/actions/errors';
+import SimpleDialog from './SimpleDialog';
 
 const useStyles = (theme) => ({
   root: {
@@ -228,6 +228,11 @@ const useStyles = (theme) => ({
 });
 
 const LaunchDialog = (props) => {
+  const {
+    classes, experimentName, numberOfTrials, open,
+  } = props;
+  const dispatch = useDispatch();
+
   const [value, setValue] = useState(LAUNCH_MODAL.modelState);
   const [runConfig, setRunConfig] = useState({
     asynchronous: true,
@@ -237,37 +242,41 @@ const LaunchDialog = (props) => {
 
   const [expandConfiguration, setExpandConfiguration] = useState(false);
   const [loading, setLoading] = useState(false);
-  const dispatch = useDispatch();
-  const { classes, experimentName, numberOfTrials } = props;
+
+  useEffect(() => {
+    if (open) {
+      ExperimentsApi.getRunConfiguration().then((runConfig) => {
+        setRunConfig(runConfig);
+      }).catch(() => {
+        dispatch(openBackendErrorDialog({
+          errorMessage: 'Failed to retrieve configuration',
+          errorDetails: '',
+        }));
+      });
+    }
+  }, [open]);
+
   const handleConfigurationUpdate = (e) => {
     e.stopPropagation();
     setLoading(true);
-    ExperimentsApi.editRunConfiguration(runConfig).then(() => {
-      setLoading(false);
-      setExpandConfiguration(false);
-    }).catch(() => {
-      setLoading(false);
-      dispatch(openBackendErrorDialog({
-        errorMessage: 'Failed to update configuration',
-        errorDetails: '',
-      }));
-    });
-  };
 
-  useEffect(() => {
-    ExperimentsApi.getRunConfiguration().then((runConfig) => {
-      setRunConfig(runConfig);
-    }).catch(() => {
-      dispatch(openBackendErrorDialog({
-        errorMessage: 'Failed to retrieve configuration',
-        errorDetails: '',
-      }));
-    });
-  }, []);
+    ExperimentsApi.editRunConfiguration(runConfig)
+      .then(() => {
+        setLoading(false);
+        setExpandConfiguration(false);
+      }).catch(() => {
+        setLoading(false);
+        dispatch(openBackendErrorDialog({
+          errorMessage: 'Failed to update configuration',
+          errorDetails: '',
+        }));
+      });
+  };
 
   return (
-    <ActionDialog
-      buttonLabel={LAUNCH_MODAL.actionSimulate}
+    <SimpleDialog
+      actionLabel={LAUNCH_MODAL.actionSimulate}
+      open={open}
       title={(
         <span>
           {LAUNCH_MODAL.actionSimulate}
@@ -276,12 +285,15 @@ const LaunchDialog = (props) => {
         </span>
       )}
       classes={classes}
-      onAction={() => dispatch(simulateNetwork(value === LAUNCH_MODAL.experimentState))}
+      onAction={() => {
+        dispatch(closeLaunchDialog());
+        dispatch(simulateNetwork(value === LAUNCH_MODAL.experimentState));
+      }}
+      onClose={() => dispatch(closeLaunchDialog())}
     >
       <DialogContentText>
         {LAUNCH_MODAL.title}
       </DialogContentText>
-
       <Box className="custom-radio">
         <Typography component="label">
           <Radio
@@ -382,7 +394,7 @@ const LaunchDialog = (props) => {
           )}
         </AccordionDetails>
       </Accordion>
-    </ActionDialog>
+    </SimpleDialog>
   );
 };
 

webapp/components/topbar/dialogs/SimpleDialog.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = () => ({
+  cancel: { marginRight: 10 },
+});
+
+/**
+ * Customizable Dialog Component with action and cancel buttons.
+ */
+const SimpleDialog = (props) => {
+  const {
+    classes, title, open, onClose, onAction, actionLabel, children,
+  } = props;
+
+  return (
+    <Dialog
+      fullWidth
+      maxWidth="sm"
+      open={open}
+      onClose={onClose}
+      className={classes.root}
+    >
+      <DialogTitle>
+        {title}
+      </DialogTitle>
+      <DialogContent>
+        {children}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={onClose}
+          style={styles.cancel}
+          key="CANCEL"
+        >
+          CANCEL
+        </Button>
+        <Button
+          id="appBarPerformActionButton"
+          key="appBarPerformActionButton"
+          variant="contained"
+          color="primary"
+          onClick={onAction}
+        >
+          {actionLabel}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default withStyles(styles)(SimpleDialog);