MetaCell · filippomc · Mar 11, 2020
diff --git a/ComponentsInitialization.js b/ComponentsInitialization.js
@@ -0,0 +1,68 @@
+define(function (require) {
+    return function (GEPPETTO) {
+        var ReactDOM = require('react-dom');
+        var React = require('react');
+        var getMuiTheme = require('material-ui/styles/getMuiTheme').default;
+        var MuiThemeProvider = require('material-ui/styles/MuiThemeProvider').default;
+        var NetPyNE = require('./NetPyNE').default;
+        var injectTapEventPlugin = require('react-tap-event-plugin');
+
+        var Utils = require('./Utils').default;
+        var Console = require('../../js/components/interface/console/Console');
+        var TabbedDrawer = require('../../js/components/interface/drawer/TabbedDrawer');
+        var PythonConsole = require('../../js/components/interface/pythonConsole/PythonConsole');
+
+        require('./css/netpyne.less');
+        require('./css/material.less');
+        require('./css/traceback.less');
+
+        injectTapEventPlugin();
+
+        const customTheme = {
+            palette: {
+                primary1Color: '#543a73',
+                primary2Color: '#eb557a',
+                primary3Color: '#ebd07a'
+            }
+        };
+
+        const theme = getMuiTheme(customTheme);
+
+        function App(data = {}) {
+            return (
+                <div>
+                    <MuiThemeProvider muiTheme={theme}>
+                        <NetPyNE {...data}></NetPyNE>
+                    </MuiThemeProvider>
+
+                    <div id="footer">
+                        <div id="footerHeader">
+                            <TabbedDrawer labels={["Console", "Python"]} iconClass={["fa fa-terminal", "fa fa-flask"]} >
+                                <Console />
+                                <PythonConsole pythonNotebookPath={"notebooks/notebook.ipynb"} />
+                            </TabbedDrawer>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+        ReactDOM.render(<App />, document.querySelector('#mainContainer'));
+
+        GEPPETTO.G.setIdleTimeOut(-1);
+        GEPPETTO.G.debug(false); //Change this to true to see messages on the Geppetto console while loading
+        GEPPETTO.Resources.COLORS.DEFAULT = "#6f54aa";
+        GEPPETTO.trigger(GEPPETTO.Events.Show_spinner, "Initialising NetPyNE");
+
+        GEPPETTO.on('jupyter_geppetto_extension_ready',  (data) => {
+            let project = { id: 1, name: 'Project', experiments: [{ "id": 1, "name": 'Experiment', "status": 'DESIGN' }] }
+            GEPPETTO.Manager.loadProject(project, false);
+            GEPPETTO.Manager.loadExperiment(1, [], []);
+            Utils.execPythonMessage('from netpyne_ui.netpyne_geppetto import netpyne_geppetto');
+            Utils.evalPythonMessage('netpyne_geppetto.getData',[]).then((response) => {
+                var data = Utils.convertToJSON(response)
+                ReactDOM.render(<App data={data} />, document.querySelector('#mainContainer'));
+                GEPPETTO.trigger("spinner:hide");
+            })
+        });
+    };
+});
diff --git a/GeppettoConfiguration.json b/GeppettoConfiguration.json
@@ -1,18 +1,22 @@
 {
-  "_README" : "http://docs.geppetto.org/en/latest/build.html",
-  "contextPath": "org.geppetto.frontend",
-  "useSsl": false,
-  "embedded": false,
-  "embedderURL": ["/"],
-  "rootRedirect":"",
-  "noTest": false,
-  "themes": "css/colors",
-  "properties": {
-    "title" : "geppetto",
-    "description": "Geppetto is an open-source platform to build web-based tools to visualize and simulate neuroscience data and models. This is a live deployment to showcase its functionalities.",
-    "type": "website",
-    "url": "http://live.geppetto.org",
-    "icon" :"geppetto/style/favicon.png",
-    "image": "http://www.geppetto.org/images/logo.png"
-  }
-}
+    "_README" : "http://docs.geppetto.org/en/latest/build.html",
+    "contextPath": "org.geppetto.frontend",
+    "useSsl": false,
+    "embedded": false,
+    "embedderURL": ["/"],
+    "rootRedirect":"",
+    "noTest": false,
+    "extensions": {
+        "geppetto-default/ComponentsInitialization": false,
+        "geppetto-netpyne/ComponentsInitialization": true
+    },
+    "themes": "css/colors",
+    "properties": {
+        "title" : "NetPyNE",
+        "description": "NetPyNE-UI is a user interface for building, visualizing and simulationg neuronal network models using NetPyNE.",
+        "type": "website",
+        "url": "https://github.com/MetaCell/NetPyNE-UI",
+        "icon" :"https://d30y9cdsu7xlg0.cloudfront.net/png/38902-200.png",
+        "image": "http://www.geppetto.org/images/logo.png"
+    }
+}
diff --git a/LICENSE b/LICENSE
diff --git a/Main.js b/Main.js
diff --git a/NetPyNE.js b/NetPyNE.js
@@ -1,9 +1,5 @@
 import React from 'react';
 import Toolbar from '@material-ui/core/Toolbar';
-import { ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails } from '@material-ui/core';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import Typography from '@material-ui/core/Typography';
-
 import Transition from './components/transition/Transition';
 import NetPyNEPopulations from './components/definition/populations/NetPyNEPopulations';
 import NetPyNECellRules from './components/definition/cellRules/NetPyNECellRules';
@@ -46,7 +42,7 @@ export default class NetPyNE extends React.Component {
     this.handleTabChangedByToolBar = this.handleTabChangedByToolBar.bind(this)
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (this.props.data != nextProps.data) {
       console.log("Initialising NetPyNE Tabs")
 
@@ -104,11 +100,11 @@ export default class NetPyNE extends React.Component {
       }))
     };
 
-  handleTransitionOptionsChange = (e, v) => {
+  handleTransitionOptionsChange = value => {
     var state = { fastForwardInstantiation: false, fastForwardSimulation: false }
-    if (v == 'Create and Simulate Network') {
+    if (value == 'Create and Simulate Network') {
       state = { fastForwardInstantiation: true, fastForwardSimulation: true }
-    } else if (v == 'Create Network') {
+    } else if (value == 'Create Network') {
       state = { fastForwardInstantiation: true, fastForwardSimulation: false }
     }
     this.setState(state)
@@ -144,7 +140,16 @@ export default class NetPyNE extends React.Component {
       return <div></div>
     } else {
       if (this.state.value == 'define'){
-        var content = this.renderModelConfiguration()
+        var content = <div>
+          <PythonControlledNetPyNEPopulations model={"netParams.popParams"} />
+          <PythonControlledNetPyNECellRules model={"netParams.cellParams"} />
+          <PythonControlledNetPyNESynapses model={"netParams.synMechParams"} />
+          <PythonControlledNetPyNEConnectivity model={"netParams.connParams"} />
+          <PythonControlledNetPyNEStimulationSources model={"netParams.stimSourceParams"} />
+          <PythonControlledNetPyNEStimulationTargets model={"netParams.stimTargetParams"} />
+          <NetPyNESimConfig model={this.state.model.simConfig} />
+          <PythonControlledNetPyNEPlots model={"simConfig.analysis"} />
+        </div>
       } else {
         var content = <NetPyNEInstantiated key={this.state.freezeInstance ? "FIXME" : "PLEASE"} ref={"simulate"} model={this.state.model} page={"simulate"} />
       }
@@ -157,7 +162,10 @@ export default class NetPyNE extends React.Component {
                 <NetPyNEToolBar changeTab={this.handleTabChangedByToolBar} />
               </div>
               <div style={{ display: 'flex', flexFlow: 'rows', width:'100%', marginRight: -10 }}>
-                <NetPyNETabs label={this.state.value} handleChange={this.handleChange} handleTransitionOptionsChange={this.handleTransitionOptionsChange}/>
+                <NetPyNETabs 
+                  label={this.state.value} 
+                  handleChange={this.handleChange} 
+                  handleTransitionOptionsChange={this.handleTransitionOptionsChange}/>
               </div>
             </Toolbar>
           </div>
@@ -178,50 +186,4 @@ export default class NetPyNE extends React.Component {
       )
     }
   }
-
-
-  renderModelConfiguration () {
-    const Expandable = ({ title, subtitle, children }) => <ExpansionPanel key={title} style={{ clear: 'both' }}>
-      <ExpansionPanelSummary
-        id="CellRules"
-        expandIcon={<ExpandMoreIcon />}
-      >
-        <div>
-          <Typography variant="h2">{title}</Typography>
-          <Typography variant="subtitle1">{subtitle}</Typography>
-        </div>
-      </ExpansionPanelSummary>
-      {children}
-    </ExpansionPanel>;
-
-
-    return <div>
-      <Expandable title="Populations" subtitle="Define here the populations of your network">
-        <PythonControlledNetPyNEPopulations model={"netParams.popParams"} />
-      </Expandable>
-      <Expandable title="Cell rules" subtitle="Define here the rules to set the biophysics and morphology of the cells in your network">
-        <PythonControlledNetPyNECellRules model={"netParams.cellParams"} />
-      </Expandable>
-      <Expandable title="Synaptic mechanisms" subtitle="Define here the synaptic mechanisms available in your network">
-        <PythonControlledNetPyNESynapses model={"netParams.synMechParams"} />
-      </Expandable>
-      <Expandable title="Connectivity rules" subtitle="Define here the rules to generate the connections in your network">
-        <PythonControlledNetPyNEConnectivity model={"netParams.connParams"} />
-      </Expandable>
-      <Expandable title="Stimulation sources" subtitle="Define here the sources of stimulation in your network">
-        <PythonControlledNetPyNEStimulationSources model={"netParams.stimSourceParams"} />
-      </Expandable>
-      <Expandable title="Stimulation target rules" subtitle="Define here the rules to connect stimulation sources to targets in your network">
-        <PythonControlledNetPyNEStimulationTargets model={"netParams.stimTargetParams"} />
-      </Expandable>
-      <Expandable title="Simulation configuration" subtitle="Define here the configuration options for the simulation">
-        <NetPyNESimConfig model={this.state.model.simConfig} />
-      </Expandable> 
-      <Expandable title="Plots configuration" subtitle="Define here the options to customize the plots">
-        <PythonControlledNetPyNEPlots model={"simConfig.analysis"} />
-      </Expandable> 
-
-
-    </div>;
-  }
 }
diff --git a/PULL_REQUEST_TEMPLATE b/PULL_REQUEST_TEMPLATE
diff --git a/Utils.js b/Utils.js
@@ -132,19 +132,18 @@ const Utils = {
 
   getErrorResponse (data){
     var parsedData = this.convertToJSON(data)
-    if (parsedData['type'] == 'ERROR'){
+    if (parsedData.type && parsedData['type'] == 'ERROR') {
       const error = { details: parsedData['details'] }
-      if (parsedData.message) {
+      if (Object.prototype.hasOwnProperty.call(parsedData, "message")) {
         error["message"] = parsedData['message']
-      } else if (parsedData.websocket) {
+      } else if (Object.prototype.hasOwnProperty.call(parsedData, "websocket")) {
         error["message"] = parsedData['websocket']
       }
       return error
     }
     return null;
   },
 
-
   parsePythonException (exception){
     return <pre dangerouslySetInnerHTML={{ __html: IPython.utils.fixConsole(exception) }}></pre>
   },

diff --git a/WEB-INF/shiro.ini b/WEB-INF/shiro.ini