#135 Refactor component wrappers and imports

As well as main state on tab switching (to be completed)

Author: filippomc

netpyne_ui/geppetto

@@ -3,22 +3,25 @@ global.GEPPETTO_CONFIGURATION = require('./GeppettoConfiguration.json');
 
 jQuery(function () {
   require('geppetto-client-initialization');
-  var ReactDOM = require('react-dom');
-  var React = require('react');
-  var getMuiTheme = require('@material-ui/core/styles/createMuiTheme').default;
-  var MuiThemeProvider = require('@material-ui/core/styles').MuiThemeProvider;
-  var NetPyNE = require('./NetPyNE').default;
+  const ReactDOM = require('react-dom');
+  const React = require('react');
+  const getMuiTheme = require('@material-ui/core/styles/createMuiTheme').default;
+  const MuiThemeProvider = require('@material-ui/core/styles').MuiThemeProvider;
+  const NetPyNE = require('./components').NetPyNE;
 
 
-  var Utils = require('./Utils').default;
-  var Console = require('geppetto-client/js/components/interface/console/Console');
-  var TabbedDrawer = require('geppetto-client/js/components/interface/drawer/TabbedDrawer');
-  var PythonConsole = require('geppetto-client/js/components/interface/pythonConsole/PythonConsole');
-  var theme = require('./Theme').default
+  const Utils = require('./Utils').default;
+  const Console = require('geppetto-client/js/components/interface/console/Console');
+  const TabbedDrawer = require('geppetto-client/js/components/interface/drawer/TabbedDrawer');
+  const PythonConsole = require('geppetto-client/js/components/interface/pythonConsole/PythonConsole');
+
+  const theme = require('./Theme').default
 
   const Provider = require("react-redux").Provider;
   const configureStore = require('./redux/store').default;
 
+  const modelLoaded = require('./redux/actions/general').modelLoaded;
+
   require('./css/netpyne.less');
   require('./css/material.less');
   require('./css/traceback.less');
@@ -59,7 +62,10 @@ jQuery(function () {
     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)
+      const data = Utils.convertToJSON(response);
+      GEPPETTO.on(GEPPETTO.Events.Model_loaded, () => {
+        store.dispatch(modelLoaded);
+      });
       ReactDOM.render(<App data={data} />, document.querySelector('#mainContainer'));
       GEPPETTO.trigger("spinner:hide");
     })

webapp/Main.js

@@ -0,0 +1,115 @@
+import React from "react";
+import Toolbar from "@material-ui/core/Toolbar";
+import Transition from "./transition/Transition";
+import {
+  NetPyNESynapses,
+  NetPyNEConnectivityRules,
+  NetPyNECellRules,
+  NetPyNEStimulationSources,
+  NetPyNEStimulationTargets,
+  NetPyNESimConfig,
+  NetPyNEToolBar,
+  NetPyNETabs,
+  NetPyNEPopulations,
+  LayoutManager,
+  NetPyNEPlots
+} from "netpyne/components";
+
+export default class NetPyNE extends React.Component {
+  constructor (props) {
+    super(props);
+    this.widgets = {};
+    
+  }
+
+  UNSAFE_componentWillReceiveProps (nextProps) {
+    if (this.props.data != nextProps.data) {
+      console.log("Initialising NetPyNE Tabs");
+
+      window.metadata = nextProps.data.metadata;
+      window.currentFolder = nextProps.data.currentFolder;
+      window.isDocker = nextProps.data.isDocker;
+    }
+  }
+  
+
+  render () {
+    if (!this.props.data) {
+      return <div></div>;
+    } else {
+      if (this.props.editMode) {
+        var content = (
+          <div style={{ marginBottom: "50px" }}>
+            <NetPyNEPopulations model={"netParams.popParams"} />
+            <NetPyNECellRules model={"netParams.cellParams"} />
+            <NetPyNESynapses model={"netParams.synMechParams"} />
+            <NetPyNEConnectivityRules model={"netParams.connParams"} />
+            <NetPyNEStimulationSources model={"netParams.stimSourceParams"} />
+            <NetPyNEStimulationTargets model={"netParams.stimTargetParams"} />
+            <NetPyNESimConfig model={this.props.data.simConfig} />
+            <NetPyNEPlots model={"simConfig.analysis"} />
+          </div>
+        );
+      } else {
+        var content = <LayoutManager />;
+      }
+
+      return (
+        <div
+          style={{
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            flexDirection: "column"
+          }}
+        >
+          <div style={{ position: "relative", zIndex: "100" }}>
+            <Toolbar
+              id="appBar"
+              style={{
+                backgroundColor: "#543a73",
+                width: "100%",
+                boxShadow:
+                  "0 0px 4px 0 rgba(0, 0, 0, 0.2), 0 0px 8px 0 rgba(0, 0, 0, 0.19)",
+                position: "relative",
+                top: "0px",
+                left: "0px",
+                zIndex: 100
+              }}
+            >
+              <div style={{ marginLeft: -12 }}>
+                <NetPyNEToolBar />
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  flexFlow: "rows",
+                  width: "100%",
+                  marginRight: -10
+                }}
+              >
+                <NetPyNETabs />
+              </div>
+            </Toolbar>
+          </div>
+
+          {/** TODO Reengineer Transition using the middleware to handle simulation and instantiation. The transition should only show content related to what actually we want to do
+          <Transition
+            tab={this.state.value}
+            clickOnTab={this.state.tabClicked}
+            handleDeactivateInstanceUpdate={this.handleDeactivateInstanceUpdate}
+            handleDeactivateSimulationUpdate={
+              this.handleDeactivateSimulationUpdate
+            }
+            freezeInstance={this.state.freezeInstance}
+            freezeSimulation={this.state.freezeSimulation}
+            fastForwardInstantiation={this.state.fastForwardInstantiation}
+            fastForwardSimulation={this.state.fastForwardSimulation}
+          /> */}
+
+          {content}
+        </div>
+      );
+    }
+  }
+}