#135 Base flexlayou scaffolding

Author: filippomc

.gitignore

@@ -18,3 +18,5 @@ Dockerfile_mini
 npm*
 .vscode
 app.log
+utilities/x86_64
+.idea

netpyne_ui/geppetto

@@ -0,0 +1 @@
+Subproject commit bebcc0ddcfd986f4ff00f62d308f3054d314f194

package-lock.json

@@ -0,0 +1 @@
+Subproject commit 840c78f5ff64a291af5af87332f749df1ee84d48

src/jupyter-geppetto

@@ -51,6 +51,7 @@ jQuery(function () {
   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' }] }

webapp/Main.js

@@ -9,9 +9,9 @@ import PythonControlledNetPyNEStimulationSources from './redux/reduxconnect/NetP
 import NetPyNEStimulationTargets from './components/definition/stimulationTargets/NetPyNEStimulationTargets';
 import NetPyNEPlots from './components/definition/plots/NetPyNEPlots';
 import NetPyNESimConfig from './components/definition/configuration/NetPyNESimConfig';
-import NetPyNEInstantiated from './components/instantiation/NetPyNEInstantiated';
 import NetPyNEToolBar from './components/settings/NetPyNEToolBar';
 import NetPyNETabs from './components/settings/NetPyNETabs';
+import LayoutManager from './redux/reduxconnect/LayoutManagerContainer';
 
 var PythonControlledCapability = require('geppetto-client/js/communication/geppettoJupyter/PythonControlledCapability');
 
@@ -30,7 +30,6 @@ export default class NetPyNE extends React.Component {
     this.state = {
       value: 'define',
       prevValue: 'define',
-      model: null,
       tabClicked: false,
       freezeInstance: false,
       freezeSimulation: false,
@@ -49,8 +48,6 @@ export default class NetPyNE extends React.Component {
       window.metadata = nextProps.data.metadata;
       window.currentFolder = nextProps.data.currentFolder;
       window.isDocker = nextProps.data.isDocker;
- 
-      this.setState({ model: nextProps.data })
     }
   }
 
@@ -136,7 +133,7 @@ export default class NetPyNE extends React.Component {
   }
 
   render () {
-    if (this.state.model == null) {
+    if (!this.props.data) {
       return <div></div>
     } else {
       if (this.state.value == 'define'){
@@ -147,15 +144,15 @@ export default class NetPyNE extends React.Component {
           <PythonControlledNetPyNEConnectivity model={"netParams.connParams"} />
           <PythonControlledNetPyNEStimulationSources model={"netParams.stimSourceParams"} />
           <PythonControlledNetPyNEStimulationTargets model={"netParams.stimTargetParams"} />
-          <NetPyNESimConfig model={this.state.model.simConfig} />
+          <NetPyNESimConfig model={this.props.data.simConfig} />
           <PythonControlledNetPyNEPlots model={"simConfig.analysis"} />
         </div>
       } else {
-        var content = <NetPyNEInstantiated key={this.state.freezeInstance ? "FIXME" : "PLEASE"} ref={"simulate"} model={this.state.model} page={"simulate"} />
+        var content = <LayoutManager />
       }
 
       return (
-        <div style={{ height: '100%', width:'100%' }} >
+        <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 }} >
@@ -180,7 +177,7 @@ export default class NetPyNE extends React.Component {
             fastForwardInstantiation={this.state.fastForwardInstantiation}
             fastForwardSimulation={this.state.fastForwardSimulation}
           />
-
+          
           {content}
         </div>
       )

webapp/NetPyNE.js

@@ -185,4 +185,32 @@ const Utils = {
   evalPythonMessage: evalPythonMessage
 }
 
+/**
+ * Deep object comparison
+ * @param {*} a 
+ * @param {*} b 
+ */
+export function isEqual (a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+  if (!a || !b || (typeof a !== 'object' && typeof b !== 'object')) {
+    return a === b;
+  }
+  if (a === null || a === undefined || b === null || b === undefined) {
+    return false;
+  }
+  if (a.prototype !== b.prototype) {
+    return false;
+  }
+  let keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length) {
+    return false;
+  }
+  return keys.every(k => isEqual(a[k], b[k]));
+}
+
 export default Utils

webapp/Utils.js

@@ -178,6 +178,10 @@ export default class NetPyNEInstantiated extends React.Component {
         this.setState({ bringItToFront: 0 })
         this.showWidgets(true)
       });
+
+      GEPPETTO.on(GEPPETTO.Events.Model_loaded, () => {
+        this.props.modelLoaded();
+      });
     }
 
     componentWillUnmount (){