Merge branch 'feature/417' of https://github.com/MetaCell/netpyne-ui into feature/417_integrating_geppetto_actions

Author: ddelpiano

webapp/components/definition/cellRules/SelectCellTemplate.js

@@ -52,6 +52,7 @@ export default class NetPyNENewPlot extends React.Component {
               style={{
                 width: 40,
                 height: 40,
+                borderRadius: '50%',
               }}
               color={page == 'main' ? 'primary' : 'secondary'}
               onClick={(event) => handleButtonClick(event)}

webapp/components/definition/plots/NetPyNENewPlot.js

@@ -28,7 +28,7 @@ export default class NetPyNENewPlot extends React.Component {
     return (
       <div>
         <Tooltip title="Add new plot" placement="top">
-          <Fab size="small" color="primary" onClick={this.handleButtonClick}>
+          <Fab size="small" color="primary" onClick={this.handleButtonClick} style={{ borderRadius: '50%' }}>
             <ContentAdd style={{ color: 'white' }} />
           </Fab>
         </Tooltip>

webapp/components/definition/stimulationTargets/NetPyNEStimulationTargets.js

@@ -276,6 +276,7 @@ export default class NetPyNEStimulationTargets extends Component {
                     overflow: 'visible',
                     display: 'flex',
                     justifyContent: 'center',
+                    borderRadius: '50%',
                   }}
                 >
                   Target

webapp/components/general/ControlPanelTreeItem.js

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
 import IconButton from '@material-ui/core/IconButton';
 import TreeItem from '@material-ui/lab/TreeItem';
 import Visibility from '@material-ui/icons/Visibility';
 import ColorLens from '@material-ui/icons/ColorLens';
+import Shuffle from '@material-ui/icons/Shuffle';
 import { ChromePicker } from 'react-color';
 import { experimentLabelColor } from '../../theme';
 
@@ -44,6 +45,16 @@ const ControlPanelTreeItem = (props) => {
     event.stopPropagation();
   };
 
+  const generateRandomColor = () => {
+    const randomColor = {
+      r: parseFloat((Math.random() * 1.00).toFixed(2)),
+      g: parseFloat((Math.random() * 1.00).toFixed(2)),
+      b: parseFloat((Math.random() * 1.00).toFixed(2)),
+      a: 1,
+    };
+    setColor(randomColor);
+  };
+
   const {
     label,
     type,
@@ -57,6 +68,7 @@ const ControlPanelTreeItem = (props) => {
   return (
     <TreeItem
       nodeId={nodeId}
+      onLabelClick={(e) => { e.stopPropagation(); e.preventDefault(); }}
       label={(
         <Grid
           container
@@ -67,23 +79,28 @@ const ControlPanelTreeItem = (props) => {
           flexDirection="row"
           justifyContent="space-between"
         >
-          <Grid item xs={4}><Typography onClick={(event) => onNodeSelect(event, nodeId)}>{label}</Typography></Grid>
+          <Grid item xs={4}><Typography onClick={() => onNodeSelect(nodeId)}>{label}</Typography></Grid>
           <Grid item xs={4} justifyContent="center"><Typography>{type}</Typography></Grid>
           <Grid item xs={4} justifyContent="flex-end" className={classes.controls}>
             {isHoveredOver
               ? (
                 <>
 
                   <IconButton onClick={(event) => onVisibilityClick(event, nodeId)}><Visibility /></IconButton>
-                  <IconButton onClick={() => setShowColorPicker(!showColorPicker)}><ColorLens /></IconButton>
+                  <IconButton onClick={generateRandomColor}><Shuffle /></IconButton>
+                  <IconButton onClick={() => setShowColorPicker(true)}><ColorLens /></IconButton>
                   {
               showColorPicker
                 ? (
-                  <ChromePicker
-                    className={classes.colorPicker}
-                    color={color}
-                    onChangeComplete={(e, color) => handleColorSelection(e, color, nodeId)}
-                  />
+                  <Box
+                    onMouseLeave={() => setShowColorPicker(false)}
+                  >
+                    <ChromePicker
+                      className={classes.colorPicker}
+                      color={color}
+                      onChangeComplete={(color, event) => handleColorSelection(color, event, nodeId)}
+                    />
+                  </Box>
                 ) : null
             }
 

webapp/components/general/ExperimentControlPanel.js

@@ -24,7 +24,7 @@ const useStyles = makeStyles(() => ({
 const ExperimentControlPanel = (props) => {
   const classes = useStyles();
   const [filter, setFilter] = React.useState('');
-  const onNodeSelect = (event, nodeId) => {
+  const onNodeSelect = (nodeId) => {
     console.log(`Node with id ${nodeId} clicked`);
   };
 

webapp/components/general/NetPyNEAddNew.js

@@ -30,6 +30,7 @@ class NetPyNEAddNew extends React.Component {
           id={this.props.id}
           className={classes.root}
           onClick={this.handleClick}
+          style={{ borderRadius: '50%' }}
         >
           <ContentAdd className={classes.plus} />
         </Fab>

webapp/components/general/NetPyNEThumbnail.js

@@ -150,6 +150,7 @@ const getFabButton = (label, selected, others) => (
   <Fab
     className={`actionButton ${selected ? 'selectedActionButton' : ''}`}
     {...others}
+    style={{ borderRadius: '50%' }}
   >
     {label}
   </Fab>