#139 Move Plots to drawer, remove plot button from 3D canvas

Author: rodriguez-facundo

webapp/components/index.js

@@ -212,18 +212,6 @@ export const ActionDialog = connect(
   })
 )(_ActionDialog)
 
-
-import _PlotButton from './instantiation/PlotButtons'
-export const PlotButtons = connect(
-  state => ({ ...state.errors, openErrorDialogBox: state.errors.openDialog }),
-  dispatch => ({
-    newWidget: conf => dispatch(newWidget(conf)),
-    closeBackendErrorDialog: () => dispatch(closeBackendErrorDialog),
-    pythonCallErrorDialogBox: payload => dispatch(openBackendErrorDialog(payload)) 
-  })
-)(_PlotButton)
-
-
 import _NetPyNEPythonConsole from './general/NetPyNEPythonConsole'
 export const NetPyNEPythonConsole = connect(
   null,

webapp/components/instantiation/NetWorkControlButtons.js

@@ -4,7 +4,6 @@ import { Tooltip } from 'netpyne/components';
 
 import { MODEL_STATE } from '../../constants'
 import { withStyles } from '@material-ui/core/styles';
-import { PlotButtons } from 'netpyne/components'
 
 const styles = ({ spacing }) => ({
   container: {
@@ -76,9 +75,6 @@ class NetWorkControlButtons extends React.Component {
             </div>
 
           </Tooltip>
-
-          
-          <PlotButtons/>
 
         </div>
       </div>

webapp/components/instantiation/PlotButtons.js

@@ -26,7 +26,7 @@ function widget2Node (configuration) {
     component,
     type: "tab",
     enableRename: false,
-    enableClose: enableClose,
+    enableClose,
     // attr defined inside config, will also be available from within flexlayout nodes.  For example:  node.getNodeById(id).getConfig()
     config: configuration ,
     ...others

webapp/components/layout/LayoutManager.js

@@ -17,7 +17,8 @@ import Typography from '@material-ui/core/Typography';
 import AdjustIcon from '@material-ui/icons/Adjust';
 import {
   HLS_WIDGETS, PYTHON_CONSOLE_WIDGET, 
-  FLEXLAYOUT_DEFAULT_STATE, MORPHOLOGY_WIDGET 
+  FLEXLAYOUT_DEFAULT_STATE, MORPHOLOGY_WIDGET,
+  PLOTS_WIDGETS
 } from '../../redux/reducers/flexlayout'
 
 
@@ -48,8 +49,8 @@ const useStyles = makeStyles(({ transitions, palette }) => ({
   },
   paper: { backgroundColor: palette.grey['900'] },
 
-  selected: { height: 60, color: palette.primary.main },
-  unselected: { height: 60, color: palette.common.white },
+  selected: { height: 48, color: palette.primary.main },
+  unselected: { height: 48, color: palette.common.white },
   noColor: { color: 'inherit' }
 }))
 
@@ -62,18 +63,30 @@ export default ({ widgets, newWidget, editMode }) => {
     if (!widgets[widgetId]) {
       let widget = HLS_WIDGETS[widgetId]
       if (!editMode) {
-        widget = MORPHOLOGY_WIDGET
+        widget = simulateModeWidget(widgetId)
       }
 
       newWidget({ path: widget.id, ...widget })
     }
   }
 
+  function simulateModeWidget (widgetId) {
+    if (widgetId.includes('Plot')) {
+      return PLOTS_WIDGETS[widgetId]
+    }
+    return MORPHOLOGY_WIDGET
+  }
+
+
   function getMenu () {
     if (editMode) {
       return Object.values({ ...HLS_WIDGETS, python: PYTHON_CONSOLE_WIDGET })
     } else {
-      return Object.values({ ...FLEXLAYOUT_DEFAULT_STATE.widgetsBackground, python: PYTHON_CONSOLE_WIDGET })
+      return Object.values({ 
+        ...FLEXLAYOUT_DEFAULT_STATE.widgetsBackground,
+        ...PLOTS_WIDGETS,
+        python: PYTHON_CONSOLE_WIDGET 
+      })
     }
 
   }
@@ -87,7 +100,7 @@ export default ({ widgets, newWidget, editMode }) => {
       >
         <div>
           <Toolbar/>
-          <List>
+          <List dense>
             {getMenu().map(({ name, id }) => (
               <ListItem 
                 button

webapp/components/settings/Drawer.js

@@ -26,6 +26,7 @@ export const NETPYNE_COMMANDS = {
   simulateModel: 'netpyne_geppetto.simulateNetPyNEModelInGeppetto',
   importModel: 'netpyne_geppetto.importModel',
   exportModel: 'netpyne_geppetto.exportModel',
-  exportHLS: 'netpyne_geppetto.exportHLS'
+  exportHLS: 'netpyne_geppetto.exportHLS',
+  plotFigure: 'netpyne_geppetto.getPlot'
 }
 

webapp/constants.js

@@ -16,7 +16,7 @@ export const newWidget = ({ path, component, panelName, ...others }) => ({
     id: path,
     instancePath: path,
     component: component,
-    name: path.slice(FILEVARIABLE_LENGTH),
+    name: path,
     status: WidgetStatus.ACTIVE,
     panelName: panelName,
     ...others

webapp/redux/actions/flexlayout.js

@@ -86,7 +86,7 @@ const createSimulateBackendCall = async (cmd, payload, next, action, consoleMess
   }
 }
 
-const processError = response => {
+export const processError = response => {
   var parsedResponse = Utils.getErrorResponse(response);
   if (parsedResponse) {
     return { errorMessage: parsedResponse['message'], errorDetails: parsedResponse['details'] }