#135 Use multiple flexlayout configurations and switch between them

Author: rodriguez-facundo

webapp/components/definition/cellRules/NetPyNECellRules.js

@@ -308,7 +308,7 @@ export default class NetPyNECellRules extends React.Component {
       this.setState({ selectedMechanism: newMechanismName });
     }
 
-    if (Object.keys(this.state.value).length === 0) {
+    if (this.state.value && Object.keys(this.state.value).length === 0) {
       this.setState({ 
         selectedCellRule: undefined,
         selectedSection: undefined,

webapp/components/general/HTMLViewer.js

@@ -51,10 +51,13 @@ class CustomHTMLViewer extends Component {
 
   adjustSVGSize () {
     const svg = this.getSvgComponent()
-    svg.removeAttribute('width');
-    svg.removeAttribute('height');
-    svg.setAttribute('width', `${this.dimensions.width}px`);
-    svg.setAttribute('height', `${this.dimensions.height}px`);
+    if (svg) {
+      svg.removeAttribute('width');
+      svg.removeAttribute('height');
+      svg.setAttribute('width', `${this.dimensions.width - 20}px`);
+      svg.setAttribute('height', `${this.dimensions.height - 20}px`);
+    }
+    
   }
 
   resizeIfNeeded (){

webapp/components/general/NetPyNEPythonConsole.js

@@ -3,43 +3,36 @@ import Utils from '../../Utils'
 
 import PythonConsole from '@geppettoengine/geppetto-client/js/components/interface/pythonConsole/PythonConsole';
 
-import { EDIT_MODE_INITIAL_WIDGET_STATE } from '../../redux/reducers/flexlayout';
-
 export default class NetPyNEPythonConsole extends Component {
 
   addMetadataToWindow (data) {
     console.log("Initialising NetPyNE Tabs");
     window.metadata = data.metadata;
     window.currentFolder = data.currentFolder;
     window.isDocker = data.isDocker;
-    
+    window.pythonConsoleLoaded = true
   }
 
-  addWidgets () {
-    Object.keys(EDIT_MODE_INITIAL_WIDGET_STATE).forEach(widgetId => {
-      this.props.newWidget(EDIT_MODE_INITIAL_WIDGET_STATE[widgetId])
-    })
+  componentWillUnmount () {
+    console.log("unmounting python console")
   }
 
-
   componentDidMount () {
-    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 => {
-        const data = Utils.convertToJSON(response);
-        this.addMetadataToWindow(data)
-        this.props.modelLoaded();
-        
-        
-        GEPPETTO.on(GEPPETTO.Events.Model_loaded, () => {
-          this.addWidgets()
-        });
-        GEPPETTO.trigger("spinner:hide");
-      })
-    });
+    if (!window.pythonConsoleLoaded) {
+      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 => {
+          const data = Utils.convertToJSON(response);
+          this.addMetadataToWindow(data)
+          this.props.modelLoaded();
+          GEPPETTO.trigger("spinner:hide");
+        })
+      });
+    }
+    
   }
   render () {
     return <PythonConsole pythonNotebookPath={"notebooks/notebook.ipynb"} />

webapp/components/index.js

@@ -89,7 +89,7 @@ export const NetPyNECellRule = connect((state, ownProps) => ({
 
 import _LayoutManager from "./layout/LayoutManager";
 export const LayoutManager = connect(
-  state => state.flexlayout,
+  state => ({ ...state.flexlayout, editMode: state.general.editMode }),
   dispatch => ({
     minimizeWidget: id => dispatch(minimizeWidget(id)),
     destroyWidget: id => dispatch(destroyWidget(id)),
@@ -227,7 +227,11 @@ export const PlotButtons = connect(
 import _NetPyNEPythonConsole from './general/NetPyNEPythonConsole'
 export const NetPyNEPythonConsole = connect(
   null,
-  dispatch => ({ modelLoaded: () => dispatch(modelLoaded) })
+  dispatch => ({ 
+    modelLoaded: () => dispatch(modelLoaded), 
+    newWidget: widget => dispatch(newWidget(widget)),
+    activateWidget: widgetId => dispatch(activateWidget(widgetId))
+  })
 )(_NetPyNEPythonConsole)
 
 // ---------------------------------------------------------------------------------------- //

webapp/components/instantiation/NetPyNEInstantiated.js

@@ -12,19 +12,14 @@ const styles = {
     backgroundColor: 'rgba(0, 0, 0, 0.6)',
     zIndex: '999',
     height: '100%',
-    width: '100%',
+    width: '98%',
     overflow: 'hidden'
   },
 
   instantiatedContainer: {
     height: '100%', 
     width: '100%', 
   },
-  controlpanelBtn: {
-    position: 'absolute', 
-    left: 34, 
-    top: 280 
-  },
 };
 
 export default class NetPyNEInstantiated extends React.Component {
@@ -122,15 +117,6 @@ export default class NetPyNEInstantiated extends React.Component {
           </ControlPanel>
         </div>
 
-        <IconButton style={styles.controlpanelBtn}
-          onClick={() => {
-            $('#controlpanel').show()
-            this.setState({ bringItToFront: 1 })
-          }}
-          icon={"fa-list"}
-          id="ControlPanelButton"
-        />
-
         <NetWorkControlButtons/>
 
       </div>

webapp/components/instantiation/NetWorkControlButtons.js

@@ -9,7 +9,7 @@ import { PlotButtons } from 'netpyne/components'
 const styles = ({ spacing }) => ({
   container: {
     position: 'absolute',
-    top: spacing(3),
+    top: spacing(2),
     right: spacing(2)
   },
   innerContainer: { position: 'relative' },
@@ -26,6 +26,21 @@ class NetWorkControlButtons extends React.Component {
     return (
       <div className={classes.container}>
         <div style={{ position: 'relative' }}>
+
+          <Tooltip 
+            title={"Control panel"}
+            placement="left"
+          >
+            <div>
+              <IconButton 
+                className={classes.buttons}
+                onClick={() => $('#controlpanel').show()}
+                icon={"fa-list"}
+                id="ControlPanelButton"
+              />
+            </div>
+          </Tooltip>
+
           <Tooltip 
             title={disableRefreshInstance ? "Your network is in sync" : "Synchronise network"}
             placement="left"

webapp/components/instantiation/PlotButtons.js

@@ -63,7 +63,7 @@ class PlotButtons extends React.Component {
     this.props.newWidget({
       path: pathName,
       component: 'Plot',
-      panelName: 'rightPanel'
+      panelName: 'plotPanel'
     })
 
     if (i < total) {

webapp/components/layout/LayoutManager.js

@@ -8,6 +8,7 @@ import { isEqual } from '../../Utils';
 import WidgetFactory from './WidgetFactory';
 import TabsetIconFactory from './TabsetIconFactory'
 import defaultLayoutConfiguration from './layoutConf.json';
+import simulateLayoutConfiguration from './simulateLayoutConf.json';
 
 /**
  * Transforms a widget configutation into a flexlayout node descriptor
@@ -33,7 +34,6 @@ export default class LayoutManager extends Component {
   constructor (props) {
     super(props);
     const layout = this.props.layout ? this.props.layout : defaultLayoutConfiguration;
-    this.model = FlexLayout.Model.fromJson(layout);
     this.destroyWidget = this.props.destroyWidget ? this.props.destroyWidget : () => console.debug('destroyWidget not defined');
     this.activateWidget = this.props.activateWidget ? this.props.activateWidget : () => console.debug('activateWidget not defined');
     this.maximizeWidget = this.props.maximizeWidget ? this.props.maximizeWidget : () => console.debug('maximizeWidget not defined');
@@ -42,19 +42,34 @@ export default class LayoutManager extends Component {
 
     this.widgetFactory = this.props.widgetFactory ? this.props.widgetFactory : new WidgetFactory();
     this.tabsetIconFactory = this.props.TabsetIconFactory ? this.props.TabsetIconFactory : new TabsetIconFactory();
+
+    this.cacheModels = { 
+      edit: FlexLayout.Model.fromJson(layout), 
+      simulate: FlexLayout.Model.fromJson(simulateLayoutConfiguration) 
+    }
   }
+
+
   componentDidMount () {
     const { widgets } = this.props;
     this.addWidgets(Object.values(widgets));
   }
 
   componentDidUpdate (prevProps, prevState) {
+    if (prevProps.editMode !== this.props.editMode) {
+      return 
+    }
+
     const { widgets } = this.props;
     const oldWidgets = prevProps.widgets;
     const newWidgets = this.findNewWidgets(widgets, oldWidgets);
-    if (newWidgets) {
+    if (newWidgets.length > 0) {
       this.addWidgets(newWidgets);
     }
+
+    if (!this.props.editMode && !this.cacheModels.simulate.getNodeById(widgets.python.id)) {
+      this.addWidgets([widgets.python]);
+    }
 
     const updatedWidgets = this.findUpdatedWidgets(widgets, oldWidgets);
     if (updatedWidgets) {
@@ -68,8 +83,15 @@ export default class LayoutManager extends Component {
     }
   }
 
+  getModel () {
+    if (this.props.editMode) {
+      return this.cacheModels.edit
+    }
+    return this.cacheModels.simulate
+  }
+  
   addWidgets (widgets) {
-    const { model } = this;
+    const model = this.getModel()
     for (let newWidgetDescriptor of widgets) {
 
       if (!model.getNodeById(newWidgetDescriptor.id)) {
@@ -82,16 +104,17 @@ export default class LayoutManager extends Component {
     for (let widget of widgets) {
 
       if (widget.status == WidgetStatus.ACTIVE) {
-        this.model.doAction(FlexLayout.Actions.selectTab(widget.id));
+        model.doAction(FlexLayout.Actions.selectTab(widget.id));
       }
 
     }
     // window.dispatchEvent(new Event('resize'));
   }
 
   deleteWidgets (widgets) {
+    const model = this.getModel()
     for (let widget of widgets) {
-      this.model.doAction(FlexLayout.Actions.deleteTab(widget.id));
+      model.doAction(FlexLayout.Actions.deleteTab(widget.id));
     }
   }
 
@@ -100,24 +123,25 @@ export default class LayoutManager extends Component {
   }
 
   updateWidgets (widgets) {
-
+    const model = this.getModel()
     for (let widget of widgets) {
 
       this.updateWidget(widget);
 
       // This updates plotly.js plots to new panel sizes
       if (widget.status == WidgetStatus.ACTIVE) {
-        this.model.doAction(FlexLayout.Actions.selectTab(widget.id));
+        model.doAction(FlexLayout.Actions.selectTab(widget.id));
       }
 
     }
     // window.dispatchEvent(new Event('resize'));
   }
 
   updateWidget (widget) {
+    const model = this.getModel()
     if (widget) {
       this.widgetFactory.updateWidget(widget);
-      this.model.doAction(Actions.updateNodeAttributes(widget.id, widget2Node(widget))); 
+      model.doAction(Actions.updateNodeAttributes(widget.id, widget2Node(widget))); 
     }
 
   }
@@ -128,6 +152,7 @@ export default class LayoutManager extends Component {
   }
 
   iconFactory (node) {
+    // TODO move to newest flexlayout-react to add this functionality
     return this.tabsetIconFactory.factory(node.getConfig());
   }
 
@@ -152,6 +177,7 @@ export default class LayoutManager extends Component {
 
 
   onAction (action) {
+    const model = this.getModel()
     switch (action.type){
     case Actions.SET_ACTIVE_TABSET:
       break;
@@ -173,11 +199,11 @@ export default class LayoutManager extends Component {
       break;
     }
 
-    this.model.doAction(action);
+    model.doAction(action);
   }
 
   onActionMaximizeWidget (action) {
-    const { model } = this;
+    const model = this.getModel()
     const { widgets } = this.props;
     const { maximizeWidget, activateWidget } = this;
     const panel2maximize = model.getNodeById(action.data.node);
@@ -203,7 +229,7 @@ export default class LayoutManager extends Component {
   }
 
   onActionDeleteWidget (action) {
-    const { model } = this;
+    const model = this.getModel()
     const { widgets } = this.props;
     const maximizedWidget = this.findMaximizedWidget(widgets);
     // change widget status
@@ -226,14 +252,16 @@ export default class LayoutManager extends Component {
 
 
   clickOnBordersAction (node) {
-    this.model.doAction(FlexLayout.Actions.moveNode(node.getId(), 'bottomPanel', FlexLayout.DockLocation.CENTER, 0));
+    const model = this.getModel()
+    model.doAction(FlexLayout.Actions.moveNode(node.getId(), 'bottomPanel', FlexLayout.DockLocation.CENTER, 0));
   }
 
   onRenderTabSet (panel, renderValues) {
+    const model = this.getModel()
     if (panel.getType() === "tabset") {
       if (panel.getId() != 'leftPanel' && panel.getChildren().length > 0){
         renderValues.buttons.push(<div key={panel.getId()} className="fa fa-window-minimize customIconFlexLayout" onClick={() => {
-          this.model.doAction(FlexLayout.Actions.moveNode(panel.getSelectedNode().getId(), "border_bottom", FlexLayout.DockLocation.CENTER, 0));
+          model.doAction(FlexLayout.Actions.moveNode(panel.getSelectedNode().getId(), "border_bottom", FlexLayout.DockLocation.CENTER, 0));
         }} />);
       }
     }
@@ -244,7 +272,7 @@ export default class LayoutManager extends Component {
       <div style={{ position: 'relative', flexGrow: 1 }}>
         <FlexLayout.Layout
           ref="layout"
-          model={this.model}
+          model={this.getModel()}
           factory={this.factory.bind(this)}
           iconFactory={this.iconFactory.bind(this)}
           onAction={action => this.onAction(action)}

webapp/components/layout/layoutConf.json

@@ -34,7 +34,7 @@
                             {
                                 "type": "tabset",
                                 "weight": 100,
-                                "id": "rightPanel",
+                                "id": "hlsPanel",
                                 "enableDeleteWhenEmpty": false,
                                 "children": [
                                 ]