Skip to content

Commit d2bce44

Browse files
MuhaddathaMuhaddatha
committed
#417 add color picker to tree item in control panel
1 parent c4e5d79 commit d2bce44

4 files changed

Lines changed: 102 additions & 22 deletions

File tree

‎webapp/components/general/ControlPanelTreeItem.js‎

Lines changed: 56 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,48 @@ import IconButton from '@material-ui/core/IconButton';
66
import TreeItem from '@material-ui/lab/TreeItem';
77
import Visibility from '@material-ui/icons/Visibility';
88
import ColorLens from '@material-ui/icons/ColorLens';
9+
import { ChromePicker } from 'react-color';
10+
import { bgInputs } from '../../theme';
911

10-
const useStyles = makeStyles(() => ({
12+
const useStyles = makeStyles((theme) => ({
1113
networkItem: {
12-
'&:hover': {
13-
'& .MuiSvgIcon-root': {
14-
display: 'block',
14+
paddingTop: '2px',
15+
paddingBottom: '2px',
16+
},
17+
controls: {
18+
'& .MuiIconButton-root': {
19+
padding: 0,
20+
marginLeft: '0.5rem',
21+
color: bgInputs,
22+
'&:hover': {
23+
color: 'white',
1524
},
1625
},
1726
},
27+
colorPicker: {
28+
position: 'absolute',
29+
zIndex: 1000,
30+
right: 0,
31+
},
1832
}));
1933

2034
const ControlPanelTreeItem = (props) => {
2135
const classes = useStyles();
36+
const [showColorPicker, setShowColorPicker] = React.useState(false);
37+
const [isHoveredOver, setIsHoveredOver] = React.useState(false);
38+
const [color, setColor] = React.useState('#ff0000');
39+
40+
const handleColorSelection = (color) => {
41+
setColor(color.hex);
42+
console.log('color changed', color.hex);
43+
};
44+
2245
const {
2346
label,
2447
type,
2548
nodeId,
2649
onNodeSelect,
2750
onVisibilityClick,
28-
onColorClick,
2951
children,
3052
...other
3153
} = props;
@@ -34,16 +56,38 @@ const ControlPanelTreeItem = (props) => {
3456
<TreeItem
3557
nodeId={nodeId}
3658
label={(
37-
<Box className={classes.networkItem} display="flex" flexDirection="row" justifyContent="space-between">
38-
<Typography>{label}</Typography>
59+
<Box
60+
className={classes.networkItem}
61+
onMouseEnter={() => setIsHoveredOver(true)}
62+
onMouseLeave={() => setIsHoveredOver(false)}
63+
display="flex"
64+
flexDirection="row"
65+
justifyContent="space-between"
66+
>
67+
<Typography onClick={(event) => onNodeSelect(event, nodeId)}>{label}</Typography>
3968
<Typography>{type}</Typography>
40-
<Box display="none">
41-
<IconButton onClick={(event) => onVisibilityClick(event, nodeId)}><Visibility /></IconButton>
42-
<IconButton onClick={(event) => onColorClick(event, nodeId)}><ColorLens /></IconButton>
43-
</Box>
69+
{
70+
isHoveredOver
71+
? (
72+
<Box className={classes.controls}>
73+
<IconButton onClick={(event) => onVisibilityClick(event, nodeId)}><Visibility /></IconButton>
74+
<IconButton onClick={() => setShowColorPicker(!showColorPicker)}><ColorLens /></IconButton>
75+
{
76+
showColorPicker
77+
? (
78+
<ChromePicker
79+
className={classes.colorPicker}
80+
color={color}
81+
onChangeComplete={handleColorSelection}
82+
/>
83+
) : null
84+
}
85+
</Box>
86+
)
87+
: null
88+
}
4489
</Box>
4590
)}
46-
onClick={(event) => onNodeSelect(event, nodeId)}
4791
>
4892
{children}
4993
</TreeItem>

‎webapp/components/general/ExperimentControlPanel.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,20 +21,15 @@ const ExperimentControlPanel = (props) => {
2121
console.log(`Visibility of node with id of ${nodeId} clicked.`);
2222
};
2323

24-
const onColorClick = (event, nodeId) => {
25-
console.log(`Color of node with id of ${nodeId} clicked`);
26-
};
27-
2824
const getTreeItemsFromData = (treeItems) => treeItems.map((treeItemData) => {
2925
let children;
3026
if (treeItemData.getChildren() && treeItemData.getChildren().length > 0) {
3127
children = getTreeItemsFromData(treeItemData.getChildren());
3228
}
3329

34-
console.log('inside getTreeItemsFromData');
35-
3630
return (
3731
<ControlPanelTreeItem
32+
key={treeItemData.id}
3833
nodeId={treeItemData.id}
3934
label={treeItemData.getPath()}
4035
type={treeItemData.id}
@@ -53,9 +48,9 @@ const ExperimentControlPanel = (props) => {
5348
? (
5449
window.Instances
5550
? (
56-
<Box display="flex" flexDirection="column">
51+
<Box display="flex" flexDirection="column" p={1}>
5752
<TextField label="Filter results" variant="outlined" fullWidth onChange={(e) => setFilter(e.target.value)} />
58-
<Box display="flex" justifyContent="space-between">
53+
<Box display="flex" justifyContent="space-between" mt={1}>
5954
<Typography>Name</Typography>
6055
<Typography>Type(s)</Typography>
6156
</Box>

‎webapp/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"less-vars-to-js": "^1.3.0",
3333
"prop-types": "^15.7.2",
3434
"react": "^17.0.1",
35+
"react-color": "^2.19.3",
3536
"react-dom": "^16.4.0",
3637
"react-json-view": "^1.21.3",
3738
"react-redux": "^7.2.0",

‎webapp/yarn.lock‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1057,6 +1057,11 @@
10571057
resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
10581058
integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
10591059

1060+
"@icons/material@^0.2.4":
1061+
version "0.2.4"
1062+
resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
1063+
integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
1064+
10601065
"@material-ui/core@4.11.4":
10611066
version "4.11.4"
10621067
resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.4.tgz#4fb9fe5dec5dcf780b687e3a40cff78b2b9640a4"
@@ -5152,6 +5157,11 @@ locate-path@^5.0.0:
51525157
dependencies:
51535158
p-locate "^4.1.0"
51545159

5160+
lodash-es@^4.17.15:
5161+
version "4.17.21"
5162+
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
5163+
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
5164+
51555165
lodash.curry@^4.0.1:
51565166
version "4.1.1"
51575167
resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
@@ -5187,7 +5197,7 @@ lodash.truncate@^4.4.2:
51875197
resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
51885198
integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
51895199

5190-
lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5:
5200+
lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5:
51915201
version "4.17.21"
51925202
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
51935203
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5285,6 +5295,11 @@ marked@^0.3.17:
52855295
resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.19.tgz#5d47f709c4c9fc3c216b6d46127280f40b39d790"
52865296
integrity sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==
52875297

5298+
material-colors@^1.2.1:
5299+
version "1.2.6"
5300+
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
5301+
integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
5302+
52885303
md5.js@^1.3.4:
52895304
version "1.3.5"
52905305
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -6171,7 +6186,7 @@ promise@^7.1.1:
61716186
dependencies:
61726187
asap "~2.0.3"
61736188

6174-
prop-types@^15.5.9, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
6189+
prop-types@^15.5.10, prop-types@^15.5.9, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
61756190
version "15.8.1"
61766191
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
61776192
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -6335,6 +6350,19 @@ react-base16-styling@^0.6.0:
63356350
lodash.flow "^3.3.0"
63366351
pure-color "^1.2.0"
63376352

6353+
react-color@^2.19.3:
6354+
version "2.19.3"
6355+
resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
6356+
integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
6357+
dependencies:
6358+
"@icons/material" "^0.2.4"
6359+
lodash "^4.17.15"
6360+
lodash-es "^4.17.15"
6361+
material-colors "^1.2.1"
6362+
prop-types "^15.5.10"
6363+
reactcss "^1.2.0"
6364+
tinycolor2 "^1.4.1"
6365+
63386366
react-display-name@^0.2.0, react-display-name@^0.2.5:
63396367
version "0.2.5"
63406368
resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.5.tgz#304c7cbfb59ee40389d436e1a822c17fe27936c6"
@@ -6492,6 +6520,13 @@ react@^17.0.1:
64926520
loose-envify "^1.1.0"
64936521
object-assign "^4.1.1"
64946522

6523+
reactcss@^1.2.0:
6524+
version "1.2.3"
6525+
resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
6526+
integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
6527+
dependencies:
6528+
lodash "^4.0.1"
6529+
64956530
"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
64966531
version "2.3.7"
64976532
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -7462,6 +7497,11 @@ tiny-warning@^1.0.2:
74627497
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
74637498
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
74647499

7500+
tinycolor2@^1.4.1:
7501+
version "1.4.2"
7502+
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
7503+
integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
7504+
74657505
to-arraybuffer@^1.0.0:
74667506
version "1.0.1"
74677507
resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"

0 commit comments

Comments
 (0)