#135 Moved drawer menu actions to redux

Author: rodriguez-facundo

webapp/Utils.js

@@ -145,7 +145,7 @@ const Utils = {
   },
 
   parsePythonException (exception){
-    return <pre dangerouslySetInnerHTML={{ __html: IPython.utils.fixConsole(exception) }}></pre>
+    return <pre style={{ whiteSpace: 'pre-wrap' }} dangerouslySetInnerHTML={{ __html: IPython.utils.fixConsole(exception) }}></pre>
   },
 
   handleUpdate (updateCondition, newValue, originalValue, context, componentName) {

webapp/components/NetPyNE.js

@@ -22,6 +22,19 @@ export default class NetPyNE extends React.Component {
 
   }
 
+  openPythonCallDialog (event) {
+    const payload = { errorMessage: event['evalue'], errorDetails: event['traceback'].join('\n') }
+    this.props.pythonCallErrorDialogBox(payload)
+  }
+
+  componentDidMount () {
+    GEPPETTO.on(GEPPETTO.Events.Error_while_exec_python_command, this.openPythonCallDialog, this)
+  }
+
+  componentWillUnmount () {
+    GEPPETTO.off(GEPPETTO.Events.Error_while_exec_python_command, this.openPythonCallDialog, this)
+  }
+
   UNSAFE_componentWillReceiveProps (nextProps) {
     if (this.props.data != nextProps.data) {
       console.log("Initialising NetPyNE Tabs");

webapp/components/definition/cellRules/NetPyNECellRules.js

@@ -307,6 +307,15 @@ export default class NetPyNECellRules extends React.Component {
     if (newMechanismName !== undefined) {
       this.setState({ selectedMechanism: newMechanismName });
     }
+
+    if (Object.keys(this.state.value).length === 0) {
+      this.setState({ 
+        selectedCellRule: undefined,
+        selectedSection: undefined,
+        selectedMechanism: undefined,
+        page: 'main'
+      })
+    }
   }
 
   handleHierarchyClick = nextPage => {
@@ -540,7 +549,7 @@ export default class NetPyNECellRules extends React.Component {
           />
         )
       }
-    } else if (page == "sections") {
+    } else if (page == "sections" && Object.keys(model).length > 0) {
       const sectionsModel = model[selectedCellRule].secs;
       if ( selectedSection !== undefined && Object.keys(sectionsModel).indexOf(selectedSection) > -1 ) {
         selection = (
@@ -562,7 +571,7 @@ export default class NetPyNECellRules extends React.Component {
           handleClick={this.selectSection} 
         />
       )
-    } else if (page == "mechanisms") {
+    } else if (page == "mechanisms" && Object.keys(model).length > 0) {
       const mechanismsModel = model[selectedCellRule].secs[selectedSection].mechs;
       if ((selectedMechanism !== undefined) && Object.keys(mechanismsModel).indexOf(selectedMechanism) > -1) {
         selection = (

webapp/components/definition/cellRules/sections/NetPyNESectionThumbnail.js

@@ -3,7 +3,7 @@ import FontIcon from '@material-ui/core/Icon';
 import Button from '@material-ui/core/Button';
 import DeleteDialogBox from '../../../general/DeleteDialogBox';
 
-const styles = { btn: { borderRadius: '25px', marginRight: '8px' } };
+const styles = { btn: { borderRadius: '25px', margin: '8px' } };
 
 export default class NetPyNESectionThumbnail extends React.Component {
 

webapp/components/general/Checkbox.js

@@ -13,7 +13,7 @@ export default class Checkbox extends Component {
           control={
             <MuiCheckbox
               id={this.props.id}
-              checked={this.props.checked}
+              checked={this.props.checked || false}
               onChange={this.props.onChange}
             />
           }

webapp/components/general/Select.js

@@ -5,12 +5,20 @@ import MuiSelect from '@material-ui/core/Select';
 
 export default class Select extends Component {
   render () {
+    var value = this.props.value
+    if (this.props.multiple && this.props.value.constructor.name != 'Array') {
+      // when loading values from a script, we can't allow strings if *multiple* is enabled
+      value = [this.props.value]
+    } else if (!this.props.multiple && this.props.value.length === 0 && this.props.value.constructor.name === 'Array' ) {
+      // when *multiple* is disabled, we can't allow arrays
+      value = ''
+    }
     return (
       <FormControl >
         <InputLabel>{this.props.label}</InputLabel>
         <MuiSelect
           id={this.props.id}
-          value={!this.props.multiple && this.props.value.length === 0 ? '' : this.props.value}
+          value={value}
           onChange={this.props.onChange}
           multiple={!!this.props.multiple}
         >

webapp/components/index.js

@@ -8,13 +8,13 @@ import {
   minimizeWidget,
   maximizeWidget
 } from "../redux/actions/flexlayout";
-
-import { updateCards, editModel, createNetwork, createAndSimulateNetwork, showNetwork } from "../redux/actions/general";
+import { openBackendErrorDialog, closeBackendErrorDialog } from '../redux/actions/errors';
+import { updateCards, editModel, createNetwork, createAndSimulateNetwork, showNetwork, pythonCall } from "../redux/actions/general";
+import { closeDrawerDialogBox, openDrawerDialogBox } from '../redux/actions/drawer';
 import { newWidget } from "../redux/actions/flexlayout";
 
 const updateCardsDispatch = dispatch => ({ updateCards: () => dispatch(updateCards) });
-const editModelDispatch = dispatch => ({ editModel: () => dispatch(editModel) });
-
+const pythonCallErrorDispatch = dispatch => ({ pythonCallErrorDialogBox: payload => dispatch(openBackendErrorDialog(payload)) });
 
 /** **** COMPONENT PROXIES ******/
 
@@ -74,7 +74,7 @@ export const Dimensions = connect(
 import _NetPyNE from "./NetPyNE";
 export const NetPyNE = connect(
   state => ({ editMode: state.general.editMode, }),
-  editModelDispatch
+  pythonCallErrorDispatch
 )(_NetPyNE);
 
 import _NetPyNECellRule from "./definition/cellRules/NetPyNECellRule";
@@ -163,7 +163,11 @@ export const NetPyNETabs = connect(
 
 import _NetPyNEToolbar from "./settings/NetPyNEToolBar";
 export const NetPyNEToolBar = connect(
-  state => state.general
+  state => ({ ...state.general, ...state.drawer }),
+  dispatch => ({
+    closeDrawerDialogBox: () => dispatch(closeDrawerDialogBox),
+    openDrawerDialogBox: () => dispatch(openDrawerDialogBox),
+  })
 )(_NetPyNEToolbar);
 
 import SelectField from "./general/Select";
@@ -187,6 +191,15 @@ export const NetPyNEInstantiated = connect(
   dispatch => ({ newWidget: conf => dispatch(newWidget(conf)), })
 )(_NetPyNEInstantiated)
 
+
+import _ActionDialog from './settings/actions/ActionDialog'
+export const ActionDialog = connect(
+  state => ({ ...state.errors, openErrorDialogBox: state.errors.openDialog }),
+  dispatch => ({ 
+    pythonCall: (cmd, args) => dispatch(pythonCall(cmd, args)),
+    closeBackendErrorDialog: () => dispatch(closeBackendErrorDialog)
+  })
+)(_ActionDialog)
 // ---------------------------------------------------------------------------------------- //
 
 // DEFAULTS

webapp/components/instantiation/NetPyNEInstantiated.js

@@ -164,7 +164,11 @@ export default class NetPyNEInstantiated extends React.Component {
   componentDidMount () {
     this.canvasRef.current.engine.setLinesThreshold(10000);
     this.canvasRef.current.displayAllInstances();
-    this.canvasRef.current.engine.updateSceneWithNewInstances(window.Instances);
+    if (Instances.length > 2) {
+      // update canvas only if there are instances to show
+      this.canvasRef.current.engine.updateSceneWithNewInstances(window.Instances);
+    }
+    
     this.canvasRef.current.setBackgroundColor('#191919')
 
     window.addEventListener('resize', this.delayedResize.bind(this))

webapp/components/settings/NetPyNEToolBar.js

@@ -22,11 +22,33 @@ const ExportIcon = props => <SvgIcon {...props}><svg viewBox='0 0 750 750'><path
 const ImportIcon = props => <SvgIcon {...props}><svg viewBox='0 0 750 750'><path d='M16 288c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h112v-64H16zm336-152V0H152c-13.3 0-24 10.7-24 24v264h127.99v-65.18c0-14.28 17.29-21.41 27.36-11.27l95.7 96.43c6.6 6.65 6.6 17.39 0 24.04l-95.7 96.42c-10.06 10.14-27.36 3.01-27.36-11.27V352H128v136c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H376c-13.2 0-24-10.8-24-24zm153-31L407.1 7c-4.5-4.5-10.6-7-17-7H384v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z'></path></svg></SvgIcon>;
 const CellTemplateIcon = props => <SvgIcon {...props}><svg viewBox="0 0 448 512"><path d="M448 75.2v361.7c0 24.3-19 43.2-43.2 43.2H43.2C19.3 480 0 461.4 0 436.8V75.2C0 51.1 18.8 32 43.2 32h361.7c24 0 43.1 18.8 43.1 43.2zm-37.3 361.6V75.2c0-3-2.6-5.8-5.8-5.8h-9.3L285.3 144 224 94.1 162.8 144 52.5 69.3h-9.3c-3.2 0-5.8 2.8-5.8 5.8v361.7c0 3 2.6 5.8 5.8 5.8h361.7c3.2.1 5.8-2.7 5.8-5.8zM150.2 186v37H76.7v-37h73.5zm0 74.4v37.3H76.7v-37.3h73.5zm11.1-147.3l54-43.7H96.8l64.5 43.7zm210 72.9v37h-196v-37h196zm0 74.4v37.3h-196v-37.3h196zm-84.6-147.3l64.5-43.7H232.8l53.9 43.7zM371.3 335v37.3h-99.4V335h99.4z"></path></svg></SvgIcon>;
 
+const OPTIONS = {
+  Load: { component: LoadFile, },
+  Save: { component: SaveFile },
+  ImportHLS: {
+    component: ImportExportHLS,
+    mode: 'IMPORT'
+  },
+  ExportHLS: {
+    component: ImportExportHLS,
+    mode: 'EXPORT'
+  },
+  ImportCellTemplate: { component: ImportCellParams, },
+  NewModel: { component: NewModel, },
+  UploadFiles: {
+    component: UploadDownloadFiles,
+    mode: 'UPLOAD'
+  },
+  DownloadFiles: {
+    component: UploadDownloadFiles,
+    mode: 'DOWNLOAD'
+  },
+}
+
 export default class NetPyNEToolBar extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      openDialogBox: false,
       open: false,
       openSnackBar: false,
       action: null
@@ -35,69 +57,73 @@ export default class NetPyNEToolBar extends React.Component {
   }
 
   handleMenuItemClick = action => {
-    this.setState({ action:action, openDialogBox:true, open: false })   
+    this.props.openDrawerDialogBox()
+    this.setState({ action:action, open: false })   
   }
 
   handleOpenSnackBar (message) {
     this.snackBarMessage = message
     this.setState({ openSnackBar: true }) 
   }
 
-
+  handleClose () {
+    this.setState({ open: false })
+    this.props.closeDrawerDialogBox()
+  }
   render () {
 
-    if (this.state.openDialogBox){
+    if (this.props.dialogBoxOpen){
       switch (this.state.action){
       case 'Load':
         var content = <LoadFile
-          open={this.state.openDialogBox}
-          onRequestClose={() => this.setState({ openDialogBox: false })}
+          open={this.props.dialogBoxOpen}
+          onRequestClose={() => this.handleClose()}
         />
         break;
       case 'Save':
         var content = <SaveFile
-          open={this.state.openDialogBox}    
-          onRequestClose={() => this.setState({ openDialogBox: false })}
+          open={this.props.dialogBoxOpen}
+          onRequestClose={() => this.handleClose()}
         />
         break;
       case 'ImportHLS':
         var content = <ImportExportHLS 
-          open={this.state.openDialogBox}
-          onRequestClose={() => this.setState({ openDialogBox: false })}
+          open={this.props.dialogBoxOpen}
+          onRequestClose={() => this.handleClose()}
           mode ={"IMPORT"}/>
         break;
       case 'ExportHLS':
         var content = <ImportExportHLS 
-          open={this.state.openDialogBox}
-          onRequestClose={() => this.setState({ openDialogBox: false })}
+          open={this.props.dialogBoxOpen}
+          onRequestClose={() => this.handleClose()}
           mode ={"EXPORT"}
         />
         break;
       case 'ImportCellTemplate':
         var content = <ImportCellParams
-          open={this.state.openDialogBox}
-          onRequestClose={() => this.setState({ openDialogBox: false })}
+          open={this.props.dialogBoxOpen}
+          onRequestClose={() => this.handleClose()}
         />
         break;
       case 'NewModel':
         var content = <NewModel
-          open={this.state.openDialogBox}
-          onRequestClose={() => this.setState({ openDialogBox: false })}
+          open={this.props.dialogBoxOpen}
+          onRequestClose={() => this.handleClose()}
         />
         break;
       case 'UploadFiles':
         var content = <UploadDownloadFiles
-          open={this.state.openDialogBox}
-          onRequestClose={() => this.setState({ openDialogBox: false })}
+          open={this.props.dialogBoxOpen}
+          onRequestClose={() => this.handleClose()}
           openSnackBar={message => {
             this.handleOpenSnackBar(message)
           } }
           mode ={"UPLOAD"}/>
         break;
       case 'DownloadFiles':
         var content = <UploadDownloadFiles 
-          open={this.state.openDialogBox}
-          onRequestClose={() => this.setState({ openDialogBox: false })}
+          open={this.props.dialogBoxOpen}
+          onRequestClose={() => this.handleClose()}
           openSnackBar={message => {
             this.handleOpenSnackBar(message)
           } }