#62 add style lines to network list in control panel

Muhaddatha · Muhaddatha · commit 7eff4e927ac7 · 2022-04-06T02:02:23.000-04:00
diff --git a/webapp/components/general/ControlPanelTreeItem.js b/webapp/components/general/ControlPanelTreeItem.js
@@ -25,10 +25,14 @@ import {
 import { changeInstanceColor } from '../../redux/actions/general';
 
 const useStyles = makeStyles((theme) => ({
+  root: {
+    '& .MuiTreeItem-label': {
+      paddingLeft: '0px !important',
+    },
+  },
   networkItem: {
-    paddingTop: '0px',
-    paddingBottom: '0px',
-    paddingLeft: '8px',
+    paddingTop: '2px',
+    paddingBottom: '2px',
     paddingRight: '8px',
     borderRadius: radius,
     '&:hover': {
@@ -81,15 +85,6 @@ const useStyles = makeStyles((theme) => ({
       fill: '#ffffff',
     },
   },
-  treeItemCurveIcon: {
-    position: 'relative',
-  },
-  treeItemLineWithRadiusIcon: {
-    position: 'relative',
-    right: '1.85rem',
-    bottom: '1rem',
-    height: '35%',
-  },
 }));
 
 const ControlPanelTreeItem = (props) => {
@@ -202,10 +197,6 @@ const ControlPanelTreeItem = (props) => {
 
           <Grid item xs={4}>
             <Typography onClick={() => onNodeSelect(nodeId)}>
-              <span>
-                <TreeItemCurveIcon className={classes.treeItemCurveIcon} />
-                <TreeItemLineWithRadiusIcon className={classes.treeItemLineWithRadiusIcon} />
-              </span>
               {label}
             </Typography>
           </Grid>
@@ -215,7 +206,7 @@ const ControlPanelTreeItem = (props) => {
               ? (
                 <>
                   <IconButton onClick={(event) => changeVisibility(event, nodeId)}>
-                    { visibility ? <Visibility /> : <VisibilityOff /> }
+                    { visibility ? <Visibility style={{ marginRight: '0.5rem' }} /> : <VisibilityOff style={{ marginRight: '0.5rem' }} /> }
                   </IconButton>
                   <IconButton onClick={() => setShowColorPicker(true)}>
                     <ColorLensIcon className={showColorPicker ? classes.activeColorPicker : ''} />
@@ -228,7 +219,7 @@ const ControlPanelTreeItem = (props) => {
                 ? (
                   <Box
                     className={classes.colorPickerBox}
-                    onMouseLeave={() => setShowColorPicker(false)}
+                    onMouseLeave={() => setTimeout(setShowColorPicker(false), 1000)}
                   >
                     <TriangleIcon className={classes.triangleIcon} />
                     <ChromePicker
diff --git a/webapp/components/general/ExperimentControlPanel.js b/webapp/components/general/ExperimentControlPanel.js
@@ -10,11 +10,55 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import ControlPanelTreeItem from './ControlPanelTreeItem';
 import { experimentLabelColor } from '../../theme';
-import { TreeItemExpandIcon } from './NetPyNEIcons';
-
 import { MODEL_STATE } from '../../constants';
 
 const useStyles = makeStyles(() => ({
+  root: {
+    '& ul': {
+      position: 'relative',
+      '&::before': {
+        content: '""',
+        height: 'calc(100% - 0.85rem)',
+        width: '0.0625rem',
+        position: 'absolute',
+        left: '-0.65rem',
+        borderRadius: '3.125rem',
+        top: '0rem',
+        backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'1\' height=\'8\' viewBox=\'0 0 1 8\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M0 0H1V8H0V0Z\' fill=\'%23ffffff\'/%3E%3C/svg%3E")',
+        backgroundRepeat: 'repeat',
+      },
+      '& .MuiTreeItem-root': {
+        position: 'relative',
+        '&::before': {
+          content: '""',
+          height: '0.875rem',
+          width: '1.4375rem',
+          backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'12\' height=\'6\' viewBox=\'0 0 12 6\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6 6C2.68629 6 0 3.31371 0 0H1C1 2.80391 3.19609 5 6 5V6Z\' fill=\'%23ffffff\'/%3E%3Cpath d=\'M6 5H11.5C11.7761 5 12 5.22386 12 5.5C12 5.77614 11.7761 6 11.5 6H6V5Z\' fill=\'%23ffffff\'/%3E%3C/svg%3E")',
+          position: 'absolute',
+          top: '0.75rem',
+          backgroundRepeat: 'no-repeat',
+          left: '-0.65rem',
+        },
+        '&::after': {
+          content: '""',
+          height: '0.0625rem',
+          borderRadius: '3.125rem',
+          width: '0.5rem',
+          backgroundColor: '#ffffff',
+          position: 'absolute',
+          left: '0',
+          top: '1.0625rem',
+          display: 'none',
+        },
+        '&:hover': {
+          background: 'transparent',
+        },
+        '&:focus > .MuiTreeItem-content': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+  },
   header: {
     '& .MuiTypography-root': {
       color: experimentLabelColor,
@@ -102,7 +146,7 @@ const ExperimentControlPanel = (props) => {
                   <TextField label="Filter results" variant="outlined" fullWidth onChange={(e) => setFilter(e.target.value)} />
                   <Box className={classes.header} display="flex" justifyContent="space-between" mt={1}>
                     <Typography>Name</Typography>
-                    <Typography>Type(s)</Typography>
+                    <Typography style={{ marginLeft: '3rem' }}>Type(s)</Typography>
                     <Typography>Controls</Typography>
                   </Box>
                   <TreeView
@@ -111,7 +155,14 @@ const ExperimentControlPanel = (props) => {
                     defaultCollapseIcon={<ExpandMoreIcon />}
                     defaultExpandIcon={<ChevronRightIcon />}
                   >
-                    <TreeItem nodeId="network" label="network_netpyne" expandIcon={<TreeItemExpandIcon />}>
+                    <TreeItem
+                      className={classes.root}
+                      nodeId="network"
+                      label="network_netpyne"
+                      defaultCollapseIcon={false}
+                      defaultExpandIcon={false}
+                      defaultEndIcon={false}
+                    >
                       {filter === ''
                         ? getTreeItemsFromData(window.Instances.network.getChildren())
                         : getFlatFilteredList(window.Instances.network.getChildren())}
diff --git a/webapp/components/general/NetPyNEIcons.js b/webapp/components/general/NetPyNEIcons.js
@@ -36,7 +36,7 @@ export function ArrowRightIcon (props) {
 
 export function RandomColorLensIcon (props) {
   return (
-    <SvgIcon viewBox="0 0 15 15" {...props}>
+    <SvgIcon viewBox="0 0 15 12" {...props}>
       <path d="M8.9375 5.71875C9.14583 5.90625 9.38542 6 9.65625 6C9.92708 6 10.1562 5.90625 10.3438 5.71875C10.5521 5.53125 10.6562 5.29167 10.6562 5C10.6562 4.70833 10.5521 4.46875 10.3438 4.28125C10.1562 4.09375 9.92708 4 9.65625 4C9.38542 4 9.14583 4.09375 8.9375 4.28125C8.75 4.46875 8.65625 4.70833 8.65625 5C8.65625 5.29167 8.75 5.53125 8.9375 5.71875ZM6.9375 3.0625C7.14583 3.25 7.38542 3.34375 7.65625 3.34375C7.92708 3.34375 8.15625 3.25 8.34375 3.0625C8.55208 2.85417 8.65625 2.61458 8.65625 2.34375C8.65625 2.07292 8.55208 1.84375 8.34375 1.65625C8.15625 1.44792 7.92708 1.34375 7.65625 1.34375C7.38542 1.34375 7.14583 1.44792 6.9375 1.65625C6.75 1.84375 6.65625 2.07292 6.65625 2.34375C6.65625 2.61458 6.75 2.85417 6.9375 3.0625ZM3.625 3.0625C3.83333 3.25 4.07292 3.34375 4.34375 3.34375C4.61458 3.34375 4.84375 3.25 5.03125 3.0625C5.23958 2.85417 5.34375 2.61458 5.34375 2.34375C5.34375 2.07292 5.23958 1.84375 5.03125 1.65625C4.84375 1.44792 4.61458 1.34375 4.34375 1.34375C4.07292 1.34375 3.83333 1.44792 3.625 1.65625C3.4375 1.84375 3.34375 2.07292 3.34375 2.34375C3.34375 2.61458 3.4375 2.85417 3.625 3.0625ZM1.625 5.71875C1.83333 5.90625 2.07292 6 2.34375 6C2.61458 6 2.84375 5.90625 3.03125 5.71875C3.23958 5.53125 3.34375 5.29167 3.34375 5C3.34375 4.70833 3.23958 4.46875 3.03125 4.28125C2.84375 4.09375 2.61458 4 2.34375 4C2.07292 4 1.83333 4.09375 1.625 4.28125C1.4375 4.46875 1.34375 4.70833 1.34375 5C1.34375 5.29167 1.4375 5.53125 1.625 5.71875ZM6 0C7.64583 0 9.05208 0.520833 10.2188 1.5625C11.4062 2.60417 12 3.86458 12 5.34375C12 6.26042 11.6667 7.04167 11 7.6875C10.3542 8.33333 10 7 9 7H7C6.44772 7 6 7.44774 6 8.00002C6 8.41559 6 8.81964 6 9V9.5C6 9.77614 6.22386 10 6.5 10C6.77614 10 7 10.2238 7 10.5C7 10.6929 7 10.8926 7 11C7 11.2917 6.90625 11.5312 6.71875 11.7188C6.53125 11.9062 6.29167 12 6 12C4.33333 12 2.91667 11.4167 1.75 10.25C0.583333 9.08333 0 7.66667 0 6C0 4.33333 0.583333 2.91667 1.75 1.75C2.91667 0.583333 4.33333 0 6 0Z" fill="#989898" />
       <path fillRule="evenodd" clipRule="evenodd" d="M12.8536 6.64648L14.7071 8.50004L12.8536 10.3536L12.1464 9.64648L12.7864 9.00658C12.3982 9.03159 12.1736 9.12507 12.0106 9.23134C11.8485 9.33706 11.7367 9.45476 11.5795 9.62029C11.5143 9.68897 11.4413 9.76588 11.3536 9.85359L10.6464 9.14648C10.691 9.10196 10.7389 9.05128 10.7904 8.9969C10.9713 8.80587 11.1953 8.5692 11.4644 8.39373C11.809 8.16894 12.2266 8.03063 12.7974 8.00455L12.1464 7.35359L12.8536 6.64648ZM8.39688 9.3444C8.07442 9.11407 7.6904 9.00004 7 9.00004V8.00004C7.8096 8.00004 8.42558 8.136 8.97812 8.53067C9.50045 8.90377 9.92094 9.48007 10.416 10.2227C10.9209 10.9801 11.2505 11.4038 11.6031 11.6557C11.8911 11.8614 12.2283 11.9744 12.789 11.9961L12.1464 11.3536L12.8536 10.6465L14.7071 12.5L12.8536 14.3536L12.1464 13.6465L12.796 12.997C12.0853 12.9748 11.527 12.8302 11.0219 12.4694C10.4995 12.0963 10.0791 11.52 9.58397 10.7774C9.07906 10.02 8.74955 9.59631 8.39688 9.3444ZM8.53563 12.6063C8.15142 12.8569 7.6767 13 7 13V12C7.5233 12 7.79858 11.8932 7.98937 11.7687C8.15146 11.663 8.26325 11.5453 8.42046 11.3798C8.48569 11.3111 8.55874 11.2342 8.64645 11.1465L9.35355 11.8536C9.30903 11.8981 9.26105 11.9488 9.20957 12.0032C9.02873 12.1942 8.80469 12.4309 8.53563 12.6063Z" fill="#989898" />
     </SvgIcon>
@@ -45,7 +45,7 @@ export function RandomColorLensIcon (props) {
 
 export function ColorLensIcon (props) {
   return (
-    <SvgIcon viewBox="0 0 15 15" {...props}>
+    <SvgIcon viewBox="0 0 15 12" {...props}>
       <path d="M8.9375 5.71875C9.14583 5.90625 9.38542 6 9.65625 6C9.92708 6 10.1562 5.90625 10.3438 5.71875C10.5521 5.53125 10.6562 5.29167 10.6562 5C10.6562 4.70833 10.5521 4.46875 10.3438 4.28125C10.1562 4.09375 9.92708 4 9.65625 4C9.38542 4 9.14583 4.09375 8.9375 4.28125C8.75 4.46875 8.65625 4.70833 8.65625 5C8.65625 5.29167 8.75 5.53125 8.9375 5.71875ZM6.9375 3.0625C7.14583 3.25 7.38542 3.34375 7.65625 3.34375C7.92708 3.34375 8.15625 3.25 8.34375 3.0625C8.55208 2.85417 8.65625 2.61458 8.65625 2.34375C8.65625 2.07292 8.55208 1.84375 8.34375 1.65625C8.15625 1.44792 7.92708 1.34375 7.65625 1.34375C7.38542 1.34375 7.14583 1.44792 6.9375 1.65625C6.75 1.84375 6.65625 2.07292 6.65625 2.34375C6.65625 2.61458 6.75 2.85417 6.9375 3.0625ZM3.625 3.0625C3.83333 3.25 4.07292 3.34375 4.34375 3.34375C4.61458 3.34375 4.84375 3.25 5.03125 3.0625C5.23958 2.85417 5.34375 2.61458 5.34375 2.34375C5.34375 2.07292 5.23958 1.84375 5.03125 1.65625C4.84375 1.44792 4.61458 1.34375 4.34375 1.34375C4.07292 1.34375 3.83333 1.44792 3.625 1.65625C3.4375 1.84375 3.34375 2.07292 3.34375 2.34375C3.34375 2.61458 3.4375 2.85417 3.625 3.0625ZM1.625 5.71875C1.83333 5.90625 2.07292 6 2.34375 6C2.61458 6 2.84375 5.90625 3.03125 5.71875C3.23958 5.53125 3.34375 5.29167 3.34375 5C3.34375 4.70833 3.23958 4.46875 3.03125 4.28125C2.84375 4.09375 2.61458 4 2.34375 4C2.07292 4 1.83333 4.09375 1.625 4.28125C1.4375 4.46875 1.34375 4.70833 1.34375 5C1.34375 5.29167 1.4375 5.53125 1.625 5.71875ZM6 0C7.64583 0 9.05208 0.520833 10.2188 1.5625C11.4062 2.60417 12 3.86458 12 5.34375C12 6.26042 11.6667 7.04167 11 7.6875C10.3542 8.33333 9.57292 8.65625 8.65625 8.65625H7.5C7.20833 8.65625 6.96875 8.76042 6.78125 8.96875C6.59375 9.15625 6.5 9.38542 6.5 9.65625C6.5 9.88542 6.58333 10.1042 6.75 10.3125C6.91667 10.5208 7 10.75 7 11C7 11.2917 6.90625 11.5312 6.71875 11.7188C6.53125 11.9062 6.29167 12 6 12C4.33333 12 2.91667 11.4167 1.75 10.25C0.583333 9.08333 0 7.66667 0 6C0 4.33333 0.583333 2.91667 1.75 1.75C2.91667 0.583333 4.33333 0 6 0Z" fill="#989898" />
     </SvgIcon>
   );
