#139 Hide python console on border

Author: rodriguez-facundo

webapp/components/NetPyNE.js

@@ -7,7 +7,6 @@ import {
 } from "netpyne/components";
 
 import { withStyles } from '@material-ui/core/styles'
-import { NetPyNEPythonConsole } from 'netpyne/components'
 
 const styles = ({ zIndex, palette, spacing }) => ({
   root: { height: '100%', overflow: 'hidden' },
@@ -17,14 +16,6 @@ const styles = ({ zIndex, palette, spacing }) => ({
     display: "flex",
     flexDirection: "column"
   },
-  console: { marginTop: 12, width: 0, height: 0 },
-  views: {
-    display: "flex",
-    flexFlow: "rows",
-    width: "100%",
-    marginRight: spacing(-1)
-  },
-  drawer: { marginLeft: spacing(-1) },
   topbar: { position: "relative", zIndex: zIndex.drawer + 1 },
   content: { flexGrow:1, display: 'flex', flexDirection: 'row', position: 'relative' }
 })
@@ -47,7 +38,6 @@ class NetPyNE extends React.Component {
 
   render () {
     const { classes } = this.props
-
     return (
       <div className={classes.root}>
         <div className={classes.container}>

webapp/components/general/NetPyNEIcons.js

@@ -79,7 +79,7 @@ export const Dimensions = connect(
 
 import _NetPyNE from "./NetPyNE";
 export const NetPyNE = connect(
-  state => ({ editMode: state.general.editMode, pythonConsoleWidget: state.flexlayout.widgets['python'] }),
+  state => ({ editMode: state.general.editMode }),
   pythonCallErrorDispatch
 )(_NetPyNE);
 
@@ -213,6 +213,7 @@ export const Drawer = connect(
     editMode: state.general.editMode 
   }),
   dispatch => ({ 
+    updateWidget: newConf => dispatch(updateWidget(newConf)),
     newWidget: widget => dispatch(newWidget(widget)),
     activateWidget: widgetId => dispatch(activateWidget(widgetId))
   })

webapp/components/index.js

@@ -3,14 +3,15 @@ import * as FlexLayout from 'geppetto-client/js/components/interface/flexLayout2
 import Actions from '@geppettoengine/geppetto-client/js/components/interface/flexLayout2/src/model/Actions';
 
 
-import { WidgetStatus } from '../../constants';
+import { WidgetStatus, WIDGETS_IDS } from '../../constants';
 import { isEqual } from '../../Utils';
 import WidgetFactory from './WidgetFactory';
 import TabsetIconFactory from './TabsetIconFactory'
 import defaultLayoutConfiguration from './layoutConf.json';
 
 import { withStyles } from '@material-ui/core/styles'
 import onAction from './OnLayoutAction';
+import { getPythonDefaultConsoleWidget } from '../../redux/reducers/flexlayout';
 
 /**
  * Transforms a widget configutation into a flexlayout node descriptor
@@ -77,18 +78,18 @@ class LayoutManager extends Component {
 
     const { widgets } = this.props;
     const oldWidgets = prevProps.widgets;
+    
     const newWidgets = this.findNewWidgets(widgets, oldWidgets);
     if (newWidgets.length > 0) {
       this.addWidgets(newWidgets);
     }
 
     const updatedWidgets = this.findUpdatedWidgets(widgets, oldWidgets);
     if (updatedWidgets) {
-      this.updateWidgets(updatedWidgets);
+      this.updateWidgets(updatedWidgets, oldWidgets);
     }
 
     const deletedWidgets = this.findDeletedWidgets(widgets, oldWidgets);
-
     if (deletedWidgets) {
       this.deleteWidgets(deletedWidgets);
     }
@@ -170,19 +171,23 @@ class LayoutManager extends Component {
     }
   }
 
-  updateWidgets (widgets) {
+  updateWidgets (widgets, oldWidgets) {
     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) {
-        model.doAction(FlexLayout.Actions.selectTab(widget.id));
+      if (oldWidgets[widget.id].status === WidgetStatus.BORDER && widget.status !== WidgetStatus.BORDER) {
+        this.restoreWidgetFromBottom(widget)
+      } else if (oldWidgets[widget.id].status !== WidgetStatus.BORDER && widget.status === WidgetStatus.BORDER){
+        this.moveWidget(widget)
+      } else {
+        // update plotly.js plots to new panel sizes
+        if (widget.status == WidgetStatus.ACTIVE) {
+          model.doAction(FlexLayout.Actions.selectTab(widget.id));
+        }
       }
-      
     }
-    // window.dispatchEvent(new Event('resize'));
   }
 
   updateWidget (widget) {
@@ -228,31 +233,40 @@ class LayoutManager extends Component {
   }
 
 
-  clickOnBordersAction (node) {
+  restoreWidgetFromBottom (widget) {
     const model = this.getModel()
-    let tabset = model.getNodeById('consolePanel')
+    // We only allow python console to be send to the bottom
+    const panelName = getPythonDefaultConsoleWidget(this.props.editMode).panelName
+    let tabset = model.getNodeById(panelName)
     if (tabset === undefined) {
-      this.createTabSet('consolePanel')
+      this.createTabSet(panelName)
     }
-    model.doAction(FlexLayout.Actions.moveNode(node.getId(), 'consolePanel', FlexLayout.DockLocation.CENTER, 0));
+    this.moveWidget(widget)
   }
 
+  
+  moveWidget (widget) {
+    const model = this.getModel()
+    model.doAction(FlexLayout.Actions.moveNode(widget.id, widget.panelName, FlexLayout.DockLocation.CENTER, 0));
+    // Resize of canvas and SVG images
+    window.dispatchEvent(new Event('resize'));
+  }
+  
   onRenderTab (node,renderValues) {
-    console.log('pepe')
   }
   render () {
     const { classes, widgets } = this.props
+    const model = this.getModel()
     return (
       <div className={classes.container}>
         <div className={classes.spacer}/>
         <div className={classes.flexlayout}>
           <FlexLayout.Layout
             ref="layout"
-            model={this.getModel()}
+            model={model}
             factory={this.factory.bind(this)}
             iconFactory={this.iconFactory.bind(this)}
-            onAction={action => onAction(action, widgets, this.getModel(), this.props.updateWidget, this.activateWidget, this.destroyWidget, this.maximizeWidget, this.minimizeWidget)}
-            clickOnBordersAction={node => this.clickOnBordersAction(node)}
+            onAction={action => onAction(action, widgets, model, this.props.updateWidget, this.activateWidget, this.destroyWidget, this.maximizeWidget, this.minimizeWidget)}
             onRenderTab={(node,renderValues) => this.onRenderTab(node,renderValues)}
           />
         </div>

webapp/components/layout/LayoutManager.js

@@ -1,16 +1,21 @@
 import Actions from '@geppettoengine/geppetto-client/js/components/interface/flexLayout2/src/model/Actions';
-import { WidgetStatus } from '../../constants';
+import { WidgetStatus, WIDGETS_IDS } from '../../constants';
 
-const onAction = (action, widgets, model, udpateWidget, activateWidget, destroyWidget, maximizeWidget, minimizeWidget) => {
+const onAction = (action, widgets, model, updateWidget, activateWidget, destroyWidget, maximizeWidget, minimizeWidget) => {
   switch (action.type){
   case Actions.SET_ACTIVE_TABSET:
     break;
   case Actions.SELECT_TAB: 
     activateWidget(action.data.tabNode);
     break;
-  case Actions.DELETE_TAB:
-    onActionDeleteWidget(action, widgets, model, destroyWidget);
+  case Actions.DELETE_TAB:{
+    onActionDeleteWidget(action, widgets, model, updateWidget, destroyWidget);
+    if (action.data.node.includes('python')) {
+      // prevent python widget from been destroyed
+      return
+    } 
     break;
+  }
   case Actions.MAXIMIZE_TOGGLE:
     onActionMaximizeWidget(action, widgets, model, maximizeWidget);
     break;
@@ -35,7 +40,7 @@ const onAction = (action, widgets, model, udpateWidget, activateWidget, destroyW
 
   // Flexlayout needs to create a tabset before we can update the panelName for the moved widget
   if (action.type === Actions.MOVE_NODE){
-    moveNode(action, widgets, model, fromTabsetId, udpateWidget, activateWidget)
+    moveNode(action, widgets, model, fromTabsetId, updateWidget, activateWidget)
   }
   window.dispatchEvent(new Event('resize'));
 }
@@ -93,13 +98,21 @@ const findWidgetInsertionIndex = (action, widgets, model) => {
 
 const findMaximizedWidget = widgets => Object.values(widgets).find(widget => widget && widget.status == WidgetStatus.MAXIMIZED)
 
-const onActionDeleteWidget = (action, widgets, model, destroyWidget) => {
-  const maximizedWidget = findMaximizedWidget(widgets);
+const onActionDeleteWidget = (action, widgets, model, updateWidget, destroyWidget) => {
+  if (action.data.node === WIDGETS_IDS.EDIT_MODE.PYTHON_CONSOLE_EDIT || action.data.node === WIDGETS_IDS.EXPLORE_MODE.PYTHON_CONSOLE_EXPLORE){
+    moveWidgetToBorder(action, widgets, updateWidget)
+  } else {
+    destroyWidget(action.data.node);
+  }
   // change widget status
-  destroyWidget(action.data.node);
+  updateMaximizedWidget(action, widgets, model)
+}
+
+const updateMaximizedWidget = (action, widgets, model) => {
+  const maximizedWidget = findMaximizedWidget(widgets);
   // check if the current maximized widget is the same than in the action dispatched
   if (maximizedWidget && maximizedWidget.id == action.data.node) {
-    // find if there exists another widget in the maximized panel that could take its place
+  // find if there exists another widget in the maximized panel that could take its place
     const panelChildren = model.getActiveTabset().getChildren();
     const index = panelChildren.findIndex(child => child.getId() == action.data.node);
     // Understand if the tab to the left or right of the destroyed tab will be the next one to be maximized
@@ -113,6 +126,16 @@ const onActionDeleteWidget = (action, widgets, model, destroyWidget) => {
   }
 }
 
+const moveWidgetToBorder = (action, widgets, udpateWidget) => {
+  var updatedWidget = { ...widgets[action.data.node] }
+  if (updatedWidget === undefined) {
+    return
+  }
+  updatedWidget.status = WidgetStatus.BORDER
+  updatedWidget.panelName = "border_bottom"
+  udpateWidget(updatedWidget)
+}
+
 const onActionMaximizeWidget = (action, widgets, model, activateWidget, maximizeWidget) => {
   const panel2maximize = model.getNodeById(action.data.node);
 

webapp/components/layout/OnLayoutAction.js

@@ -1,6 +1,4 @@
-import React, { lazy, Suspense } from 'react';
-
-import PythonConsole from '@geppettoengine/geppetto-client/js/components/interface/pythonConsole/PythonConsole';
+import React, { lazy, Suspense } from 'react'
 
 import { NetPyNEInstantiated, HTMLViewer } from 'netpyne/components';
 

webapp/components/layout/WidgetFactory.js

@@ -4,15 +4,20 @@
         "tabSetHeaderHeight": 26,
         "tabSetTabStripHeight": 26,
         "enableEdgeDock": false,
-        "borderBarSize": "0px"
+        "borderBarSize": 0
     },
+    "borders": [
+        {
+            "type":"border",
+            "location": "bottom",
+            "children": []
+        }
+    ],
     "layout": {
         "type": "tabset",
         "weight": 100,
         "id": "root",
-        "children": [
-            
-        ]
+        "children": []
     }
   }