#483 start network item list styling

Author: Muhaddatha

webapp/components/general/ControlPanelTreeItem.js

@@ -15,13 +15,19 @@ import {
   bgLight,
   radius,
 } from '../../theme';
-import { RandomColorLensIcon, ColorLensIcon, TriangleIcon } from './NetPyNEIcons';
+import {
+  RandomColorLensIcon,
+  ColorLensIcon,
+  TriangleIcon,
+  TreeItemCurveIcon,
+  TreeItemLineWithRadiusIcon,
+} from './NetPyNEIcons';
 import { changeInstanceColor } from '../../redux/actions/general';
 
 const useStyles = makeStyles((theme) => ({
   networkItem: {
-    paddingTop: '2px',
-    paddingBottom: '2px',
+    paddingTop: '0px',
+    paddingBottom: '0px',
     paddingLeft: '8px',
     paddingRight: '8px',
     borderRadius: radius,
@@ -41,8 +47,9 @@ const useStyles = makeStyles((theme) => ({
   },
   colorPickerBox: {
     position: 'absolute',
-    top: '1.25rem',
+    top: '1.2rem',
     right: '2.5rem',
+    height: '3rem',
   },
   triangleIcon: {
     marginBottom: '-7px',
@@ -74,6 +81,15 @@ const useStyles = makeStyles((theme) => ({
       fill: '#ffffff',
     },
   },
+  treeItemCurveIcon: {
+    position: 'relative',
+  },
+  treeItemLineWithRadiusIcon: {
+    position: 'relative',
+    right: '1.85rem',
+    bottom: '1rem',
+    height: '35%',
+  },
 }));
 
 const ControlPanelTreeItem = (props) => {
@@ -183,7 +199,16 @@ const ControlPanelTreeItem = (props) => {
           flexDirection="row"
           justifyContent="space-between"
         >
-          <Grid item xs={4}><Typography onClick={() => onNodeSelect(nodeId)}>{label}</Typography></Grid>
+
+          <Grid item xs={4}>
+            <Typography onClick={() => onNodeSelect(nodeId)}>
+              <span>
+                <TreeItemCurveIcon className={classes.treeItemCurveIcon} />
+                <TreeItemLineWithRadiusIcon className={classes.treeItemLineWithRadiusIcon} />
+              </span>
+              {label}
+            </Typography>
+          </Grid>
           <Grid item xs={4} justifyContent="center"><Typography>{type}</Typography></Grid>
           <Grid item xs={4} justifyContent="flex-end" className={classes.controls}>
             {isHoveredOver
@@ -219,7 +244,7 @@ const ControlPanelTreeItem = (props) => {
               : null}
           </Grid>
         </Grid>
-        )}
+      )}
     >
       {children}
     </TreeItem>

webapp/components/general/ExperimentControlPanel.js

@@ -10,6 +10,7 @@ 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';
 
@@ -110,7 +111,7 @@ const ExperimentControlPanel = (props) => {
                     defaultCollapseIcon={<ExpandMoreIcon />}
                     defaultExpandIcon={<ChevronRightIcon />}
                   >
-                    <TreeItem nodeId="network" label="network_netpyne">
+                    <TreeItem nodeId="network" label="network_netpyne" expandIcon={<TreeItemExpandIcon />}>
                       {filter === ''
                         ? getTreeItemsFromData(window.Instances.network.getChildren())
                         : getFlatFilteredList(window.Instances.network.getChildren())}

webapp/components/general/NetPyNEIcons.js

@@ -58,3 +58,28 @@ export function TriangleIcon (props) {
     </SvgIcon>
   );
 }
+
+export function TreeItemExpandIcon (props) {
+  return (
+    <SvgIcon viewBox="0 0 4 8" {...props}>
+      <path d="M0.666504 7.33332L3.99984 3.99999L0.666504 0.666656V7.33332Z" fill="#989898" />
+    </SvgIcon>
+  );
+}
+
+export function TreeItemCurveIcon (props) {
+  return (
+    <SvgIcon viewBox="0 0 12 6" {...props}>
+      <path d="M6 6C2.68629 6 0 3.31371 0 0H1C1 2.80391 3.19609 5 6 5V6Z" fill="#ffffff" />
+      <path d="M6 5H11.5C11.7761 5 12 5.22386 12 5.5C12 5.77614 11.7761 6 11.5 6H6V5Z" fill="#ffffff" />
+    </SvgIcon>
+  );
+}
+
+export function TreeItemLineWithRadiusIcon (props) {
+  return (
+    <SvgIcon viewBox="0 0 6 6" {...props}>
+      <path d="M0 0H1V8H0V0Z" fill="#ffffff" />
+    </SvgIcon>
+  );
+}