Merge pull request #802 from MetaCell/feature/187-drop-downs-selection-2

Fixed issues on NETPYNE-189 and NETPYNE-187

Author: ddelpiano

webapp/components/definition/subcellConnectivity/NetPyNESubcellsConnectivityRule.js

@@ -32,11 +32,34 @@ export default class NetPyNESubCellsConnectivityRule extends React.Component {
       sectionId: 'General',
       errorMessage: undefined,
       errorDetails: undefined,
-      type: 'uniform',
-      coord: '',
+      type: undefined,
+      density: undefined,
+      coord: undefined,
     };
   }
 
+  refreshComponent() {
+    //get initial values
+    Utils.evalPythonMessage(`netpyne_geppetto.netParams.subConnParams["${
+      this.props.name
+    }"]`)
+    .then((response) => {
+      if ((typeof response == 'object') && (response.density))
+      {
+        this.setState({ type: response.density.type, density: response.density }) //splitting so it fires update
+      }
+    })
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (JSON.stringify(prevProps.model) != JSON.stringify(this.props.model))
+      this.refreshComponent();
+  }
+
+  componentDidMount() {
+    this.refreshComponent();
+  }
+
   handleRenameChange = (event) => {
     const storedValue = this.props.name;
     const newValue = Utils.nameValidation(event.target.value);
@@ -105,20 +128,14 @@ export default class NetPyNESubCellsConnectivityRule extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps (nextProps) {
-    this.setState({ currentName: nextProps.name });
+    this.setState({ currentName: nextProps.name, type: nextProps.model.density });
   }
 
   handleDensity (value) {
     this.setState({ type: value })
-    if (value === 'uniform') {
-      Utils.execPythonMessage(
-        `netpyne_geppetto.netParams.subConnParams['${this.props.name}']['density'] = 'uniform'`,
-      )
-    } else {
-      Utils.execPythonMessage(
-        `netpyne_geppetto.netParams.subConnParams['${this.props.name}']['density'] = {}`,
-      )
-    }
+    Utils.execPythonMessage(
+      `netpyne_geppetto.netParams.subConnParams['${this.props.name}']['density'] = { 'type': '${value}' }`,
+    )
   }
 
   handleCoord(value) {

webapp/components/general/Select.js

@@ -4,14 +4,32 @@ import FormControl from '@material-ui/core/FormControl';
 import MuiSelect from '@material-ui/core/Select';
 
 class Select extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectOpen: false,
+    };
+  }
+
+  handleOpen = () => {
+    this.setState({ selectOpen: true });
+  };
+
+  handleClose = () => {
+    this.setState({ selectOpen: false });
+  };
 
   componentDidUpdate (prevProps, prevState) {
     if (this.props.commands !== prevProps.commands)
       this.forceUpdate();
   }
 
   render () {
+    const { id, multiple, pythonparams, children, onChange } = this.props;
+
     let value = this.props.value || '';
+    const { selectOpen } = this.state;
     if (this.props.multiple && value.constructor.name != 'Array') {
       // when loading values from a script, we can't allow strings if *multiple* is enabled
       value = [value];
@@ -23,14 +41,20 @@ class Select extends React.Component {
       <FormControl variant="filled" fullWidth>
         <InputLabel>{this.props.label}</InputLabel>
         <MuiSelect
-          id={this.props.id}
+          id={id}
           value={value}
-          onChange={this.props.onChange}
-          multiple={!!this.props.multiple}
-          pythonparams={this.props.pythonparams}
+          onChange={ (event) => {
+            onChange(event);
+            this.handleClose();
+          }}
+          multiple={!!multiple}
+          pythonparams={pythonparams}
+          open={selectOpen}
+          onOpen={this.handleOpen}
+          onClose={this.handleClose}
         >
-          {this.props.children}
-        </MuiSelect>
+        {children}
+      </MuiSelect>
 
       </FormControl>