#139 Bring new icons for plots

Author: rodriguez-facundo

webapp/Theme.js

@@ -2,7 +2,7 @@
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
 
 // orange
-const primaryColor = '#37ABC8'
+export const primaryColor = '#37ABC8'
 
 export const bgLight = '#4A4A4A';
 export const bgRegular = '#434343';

webapp/components/NetPyNE.js

@@ -59,16 +59,6 @@ class NetPyNE extends React.Component {
             <LayoutManager/>
           </div>
         </div>
-
-
-        {/* <div className={classes.console}>
-           // Flexlayout bottom panel gives weird layout so can't send the console there
-           // when the widget is closed and the python console must remain open somewhere for the app to sync
-           
-           {!this.props.pythonConsoleWidget ? <NetPyNEPythonConsole /> : null}
-        </div> */}
-      
-      
       </div>
     );
   }

webapp/components/general/FileBrowser.js

@@ -140,6 +140,7 @@ export default class FileBrowser extends React.Component {
       <Dialog
         open={this.props.open}
         onClose={() => this.props.onRequestClose()}
+        style={{ zIndex: 5000 }}
       >
         <DialogContent>
           <div style={{ marginBottom: '15px', color: 'white' }}>

webapp/components/general/NetPyNEIcons.js

@@ -8,7 +8,6 @@ import { isEqual } from '../../Utils';
 import WidgetFactory from './WidgetFactory';
 import TabsetIconFactory from './TabsetIconFactory'
 import defaultLayoutConfiguration from './layoutConf.json';
-import Icon from '@material-ui/core/Icon';
 
 import { withStyles } from '@material-ui/core/styles'
 import onAction from './OnLayoutAction';
@@ -239,7 +238,7 @@ class LayoutManager extends Component {
   }
 
   onRenderTab (node,renderValues) {
-    renderValues.leading = <Icon className={node.getConfig().icon}/>
+    console.log('pepe')
   }
   render () {
     const { classes, widgets } = this.props

webapp/components/layout/LayoutManager.js

@@ -11,46 +11,16 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import Typography from '@material-ui/core/Typography';
 
-import AdjustIcon from '@material-ui/icons/Adjust';
 import { WidgetStatus } from '../../constants';
 import {
-  HLS_WIDGETS, PYTHON_CONSOLE_WIDGET, 
+  HLS_WIDGETS, getPythonConsoleWidget, 
   MORPHOLOGY_WIDGET,PLOTS_WIDGETS
 } from '../../redux/reducers/flexlayout'
 
-import {
-  PopulationIcon, CellIcon, SynapseIcon, NetworkIcon, 
-  SourceIcon, TargetIcon, CogsIcon, SliderHIcon, CodeIcon
-} from '../general/NetPyNEIcons'
+import DrawerIcon from '../general/NetPyNEIcons'
 
-// Avoid defining properties with css || inline style
-const useIconStyles = makeStyles(({ palette }) => ({ icon: { color: props => props.selected ? palette.primary.main : palette.common.white } }))
 
-const DrawerIcon = ({ widgetId, selected }) => {
-  const classes = useIconStyles({ selected })
-  switch (widgetId) {
-  case 'popParams':
-    return <PopulationIcon fontSize="large" className={classes.icon}/>
-  case 'cellParams':
-    return <CellIcon fontSize="large" className={classes.icon}/>
-  case 'synMechParams':
-    return <SynapseIcon fontSize="large" className={classes.icon}/>
-  case 'connParams':
-    return <NetworkIcon fontSize="large" className={classes.icon}/>
-  case 'stimSourceParams':
-    return <SourceIcon fontSize="large" className={classes.icon}/>
-  case 'stimTargetParams':
-    return <TargetIcon fontSize="large" className={classes.icon}/>
-  case 'simConfig':
-    return <CogsIcon fontSize="large" className={classes.icon}/>
-  case 'analysis':
-    return <SliderHIcon fontSize="large" className={classes.icon}/>
-  case 'python':
-    return <CodeIcon fontSize="large" className={classes.icon}/>
-  default:
-    return <AdjustIcon fontSize="large" className={classes.icon}/>
-  }
-}
+// Avoid defining properties with css || inline style
 const drawerOpenWidth = 200;
 const drawerCloseWidth = 48;
 
@@ -101,7 +71,7 @@ export default ({ widgets, newWidget, editMode, activateWidget }) => {
   function createFocusWidget (widgetId) {
     if (!widgets[widgetId]) {
       // pick from the list of available widgets
-      let widget = ({ ...HLS_WIDGETS, python: PYTHON_CONSOLE_WIDGET })[widgetId]
+      let widget = ({ ...HLS_WIDGETS, pythonEdit: getPythonConsoleWidget(true) })[widgetId]
       if (!editMode) {
         widget = simulateModeWidget(widgetId)
       }
@@ -119,19 +89,19 @@ export default ({ widgets, newWidget, editMode, activateWidget }) => {
       return PLOTS_WIDGETS[widgetId]
     }
     // pick from the list of available widgets
-    return ({ D3Canvas: MORPHOLOGY_WIDGET, python: PYTHON_CONSOLE_WIDGET })[widgetId]
+    return ({ D3Canvas: MORPHOLOGY_WIDGET, pythonExplore: getPythonConsoleWidget(false) })[widgetId]
   }
 
 
   function getMenu () {
     if (editMode) {
       const array = [...Object.values(HLS_WIDGETS), 
-                     PYTHON_CONSOLE_WIDGET]
+                     getPythonConsoleWidget(true)]
       return array
     } else {
       const array = [MORPHOLOGY_WIDGET,
                      ...Object.values(PLOTS_WIDGETS),
-                     PYTHON_CONSOLE_WIDGET]
+                     getPythonConsoleWidget(false)]
 
       return array
     }

webapp/components/settings/Drawer.js

@@ -75,7 +75,6 @@ export default class ActionDialog extends React.Component {
 
       <Dialog
         fullWidth
-        style={{ zIndex: 3000 }}
         maxWidth={this.props.openErrorDialogBox ? 'md' : 'sm'}
         open={!this.state.hide || this.props.openErrorDialogBox}
         onClose={() => this.cancelDialog()}

webapp/components/topbar/dialogs/ActionDialog.js

@@ -236,7 +236,6 @@ class ImportExportHLS extends React.Component {
           <FormControl className={classes.selectField}>
             <InputLabel className={classes.selectFieldLabel}>Are custom mod files required for this model?</InputLabel>
             <Select
-              id="appBarImportRequiresMod"
               style={{ marginTop:0 }}
               value={this.state.loadMod === undefined ? '' : this.state.loadMod}
               onChange={event => this.setState({ loadMod: event.target.value })}

webapp/components/topbar/dialogs/ImportExportHLS.js

@@ -50,4 +50,38 @@ export const TOPBAR_CONSTANTS = {
   EXPLORE_EXISTING_NETWORK:'Explore Existing Network',
   BACK_TO_EDITION: 'Back to edition'
 
+}
+
+/*
+ * ------------------------------------------------------------------------------ //
+ * ------------------------------------------------------------------------------ //
+ */
+
+export const WIDGETS_IDS = {
+  POP_PARAMS: 'popParams',
+  CELL_PARAMS: 'celParams',
+  SYN_MECH_PARAMS: 'synMechParams',
+  CONN_PARAMS: 'connParams',
+  STIM_SOURCE_PARAMS: 'stimSourceParams',
+  STIM_TARGET_PARAMS: 'stimTargetParams',
+  SIM_CONFIG: 'simConfig',
+  ANALYSIS: "analysis",
+  MORPHOLOGY: 'D3Canvas',
+  CONNECTION_PLOT: 'connectionPlot',
+  D2_NET_PLOT: 'd2NetPlot',
+  SHAPE_PLOT: 'shapePlot',
+  TRACES_PLOT: 'tracesPlot',
+  RASTER_PLOT: 'rasterPlot',
+  SPIKE_PLOT: 'spikePlot',
+  SPIKE_STATS_PLOT: 'spikeStatsPlot',
+  RATE_PSD_PLOT: 'ratePSDPlot',
+  LFP_TIMESERIES_PLOT: 'LFPTimeSeriesPlot',
+  LFP_PSD_PLOT: 'LFPPSDPlot',
+  LFP_SPECTROGRAM_PLOT: 'LFPSpectrogramPlot',
+  LFP_LOCATION_PLOT: 'LFPLocationsPlot',
+  GRAGER_PLOT: 'grangerPlot',
+  RXD_CONCENTRATION_PLOT: 'rxdConcentrationPlot',
+  PYTHON_CONSOLE_EDIT: 'pythonEdit',
+  PYTHON_CONSOLE_EXPLORE: 'pythonExplore',
+
 }

webapp/constants.js

@@ -151,7 +151,6 @@
         padding: 0;
         font-weight: normal;
         color: #b9b9b9;
-        margin-left: @spacing;
     }
 
     .flexlayout__tab_button_trailing {