#102 FIxes with new material ui

MetaCell · Mar 4, 2020 · 267c205 · 267c205
1 parent 28f5214
commit 267c205
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 54 deletions.
diff --git a/components/definition/cellRules/NetPyNECellRule.js b/components/definition/cellRules/NetPyNECellRule.js
@@ -79,7 +79,7 @@ export default class NetPyNECellRule extends React.Component {
         id={name + "MenuItem"}
         key={name}
         insetChildren={true}
-        checked={selected.indexOf(name) > -1}
+        checked={selected && selected.indexOf(name) > -1}
         value={name}
       >{name}</MenuItem>
     ));

diff --git a/components/definition/plots/NetPyNEInclude.js b/components/definition/plots/NetPyNEInclude.js
@@ -3,7 +3,6 @@ import Menu from '@material-ui/core/Menu';
 import Divider from '@material-ui/core/Divider';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
-import Popover from '@material-ui/core/Popover/Popover';
 import Utils from '../../../Utils';
 import NetPyNEField from '../../general/NetPyNEField';
 
@@ -219,9 +218,7 @@ export default class NetPyNEInclude extends Component {
     >
       {name}
     </MenuItem>);
-    return <Menu>
-      {mainMenus}
-    </Menu>
+    return mainMenus;
   }
 
   variableMenus = (name, size) => {
@@ -245,18 +242,18 @@ export default class NetPyNEInclude extends Component {
         onMouseEnter={e => this.handleSecondPopoverOpen(name, true, e.preventDefault(), e.currentTarget)}
       >
         {name}
-      </MenuItem>))
-      <Popover
+      </MenuItem>
+      <Menu
         style={{ height: size < 6 ? 48 * size : 240, width:170 }}
         key={name + "Popover"}
         useLayerForClickAway={false}
-        open={this.state.secondPopoverOpen ? this.state.secondPopoverOpen[name] : false}
+        open={Boolean(this.state.anchorEl2)}
         anchorEl={this.state.anchorEl2}
         anchorOrigin={{ "horizontal":"right", "vertical":"top" }}
         transformOrigin={{ "horizontal":"left", "vertical":"top" }}
       >
         {menuItems}
-      </Popover>
+      </Menu>
     </div>
   }
 
@@ -302,7 +299,7 @@ export default class NetPyNEInclude extends Component {
     if (clone['groups'].indexOf('allCells') > -1 && name != 'allNetStims') {
       clone['groups'].splice( clone['groups'].indexOf('allCells'), 1 );
     }
-    this.setState({ include: clone })
+    this.setState({ include: clone, anchorEl2: null })
   }
 
   IsSecondaryMenuChecked = (group, name, index) => {
@@ -336,7 +333,7 @@ export default class NetPyNEInclude extends Component {
           onClick={e => this.handleMainPopoverOpen(true, e.preventDefault(), e.currentTarget)} 
         />
       </NetPyNEField >
-      <Popover 
+      <Menu 
         open={this.state.mainPopoverOpen}
         anchorEl={this.state.anchorEl}
         onClose={e => this.handleMainPopoverOpen(false)}
@@ -348,7 +345,7 @@ export default class NetPyNEInclude extends Component {
         {this.variableMenus('gids', this.state.data ? this.state.data.gids : 0, true)}
         <Divider/>
         {this.otherMenus()}
-      </Popover>
+      </Menu>
     </div>
   }
 }
diff --git a/components/definition/plots/NetPyNENewPlot.js b/components/definition/plots/NetPyNENewPlot.js
@@ -20,57 +20,55 @@ export default class NetPyNENewPlot extends React.Component {
     this.setState({ anchorEl: event.currentTarget, });
   };
 
-
-  handleClick (event) {
-    this.props.onClose();
-    this.props.handleClick(event.target.value );
+  handleRequestClose = () => {
+    this.setState({ anchorEl: null, });
+  };
+
+  handleClick (value) {
+    this.handleRequestClose();
+    this.props.handleClick(value );
   }
 
   render () {
     return <div>
-      <FloatingActionButton size="small" style={{ margin: 10, float: 'left' }} onClick={this.handleButtonClick}>
+      <FloatingActionButton color="primary" size="small" style={{ margin: 10, float: 'left' }} onClick={this.handleButtonClick}>
         <ContentAdd />
       </FloatingActionButton>
-      <Popover
-        open={Boolean(this.state.anchorEl)}
-        anchorEl={this.state.anchorEl}
-        anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
-        transformOrigin={{ horizontal: 'left', vertical: 'top' }}
-        onClose={this.props.onClose}
-      >
-        <Menu onChange={this.handleClick} onClose={this.props.onClose} >
-          <MenuItem key={"plotTraces"} value={"plotTraces"} >
+
+      <Menu onClose={this.props.onClose} open={Boolean(this.state.anchorEl)}
+        anchorEl={this.state.anchorEl}>
+        <MenuItem key={"plotTraces"} value={"plotTraces"} onClick={e => this.handleClick("plotTraces")} >
         Traces Plot
-          </MenuItem>
-          <MenuItem key={"plotRaster"} value={"plotRaster"}>
+        </MenuItem>
+        <MenuItem key={"plotRaster"} value={"plotRaster"} onClick={e => this.handleClick("plotRaster")}>
         Raster Plot
-          </MenuItem>
-          <MenuItem key={"plotSpikeHist"} value={"plotSpikeHist"}>
+        </MenuItem>
+        <MenuItem key={"plotSpikeHist"} value={"plotSpikeHist"} onClick={e => this.handleClick("plotSpikeHist")}>
         Spike Histogram Plot
-          </MenuItem>
-          <MenuItem key={"plotSpikeStats"} value={"plotSpikeStats"}>
+        </MenuItem>
+        <MenuItem key={"plotSpikeStats"} value={"plotSpikeStats"} onClick={e => this.handleClick("plotSpikeStats")}>
         Spike Stats Plot
-          </MenuItem>
-          <MenuItem key={"plotRatePSD"} value={"plotRatePSD"}>
+        </MenuItem>
+        <MenuItem key={"plotRatePSD"} value={"plotRatePSD"} onClick={e => this.handleClick("plotRatePSD")}>
         PSD Rate Plot
-          </MenuItem>
-          <MenuItem key={"plotLFP"} value={"plotLFP"}>
+        </MenuItem>
+        <MenuItem key={"plotLFP"} value={"plotLFP"} onClick={e => this.handleClick("plotLFP")}>
         LFP Plot
-          </MenuItem>
-          <MenuItem key={"plotShape"} value={"plotShape"}>
+        </MenuItem>
+        <MenuItem key={"plotShape"} value={"plotShape"} onClick={e => this.handleClick("plotShape")}>
         3D Cell Shape Plot
-          </MenuItem>
-          <MenuItem key={"plot2Dnet"} value={"plot2Dnet"}>
+        </MenuItem>
+        <MenuItem key={"plot2Dnet"} value={"plot2Dnet"} onClick={e => this.handleClick("plot2Dnet")}>
         2D Network Plot
-          </MenuItem>
-          <MenuItem key={"plotConn"} value={"plotConn"}>
+        </MenuItem>
+        <MenuItem key={"plotConn"} value={"plotConn"} onClick={e => this.handleClick("plotConn")}>
         Network Connectivity Plot
-          </MenuItem>
-          <MenuItem key={"granger"} value={"granger"}>
+        </MenuItem>
+        <MenuItem key={"granger"} value={"granger"} onClick={e => this.handleClick("granger")}>
         Granger Causality Plot
-          </MenuItem>
-        </Menu>
-      </Popover>
+        </MenuItem>
+      </Menu>
+
     </div>
   }
 }
diff --git a/components/definition/plots/NetPyNEPlots.js b/components/definition/plots/NetPyNEPlots.js
@@ -120,8 +120,6 @@ export default class NetPyNEPlots extends React.Component {
           <div className="breadcrumb">
             <NetPyNENewPlot style={{ float: 'left', marginTop: "12px", marginLeft: "18px" }}
               handleClick={this.handleNewPlot} />
-              />
-
           </div>
           <div style={{ clear: "both" }}></div>
           {plots}

diff --git a/css/material.less b/css/material.less
@@ -29,11 +29,11 @@ div.MuiCollapse-container .MuiCollapse-wrapper,
 div.MuiExpansionPanelSummary-root {
   padding: @spacing;
 }
-.MuiExpansionPanel-root.Mui-expanded {
-  margin: 0;
+div.MuiExpansionPanel-root.Mui-expanded {
+  margin: 2px;
 }
-.MuiExpansionPanel-root{
-  margin-bottom: 2px;
+.MuiExpansionPanel-root {
+  margin: 2px;
 }
 
 .MuiInput-root {
@@ -74,9 +74,10 @@ div.MuiExpansionPanelSummary-root {
   text-transform: none;
 }
 
-.MuiInputLabel-root{
+label.MuiInputLabel-root, label.MuiFormLabel-root{
   font-weight: bold;
   color: rgba(0, 0, 0, 0.3);
+  padding: 4px
 }
 
 .MuiSelect-select{

diff --git a/css/netpyne.less b/css/netpyne.less
@@ -217,6 +217,7 @@ button.actionButton {
 
 .netpyneField {
   width: 100% !important;
+  margin: 10px 0;
   > div:first-of-type {
     width: 95%;
     > div {