52 |
53 |
61 | {type === "node"
62 | ? "Node degree distribution"
63 | : "Edge Size Distribution"}
64 |
65 |
80 |
81 |
88 | handleBrush(points[0])}
99 | onSelectionCleared={handleClearSelect}
100 | />
101 | }
102 | >
103 | {
111 | if (filterVal.flat().includes(datum.x)) {
112 | return "#42a5f5";
113 | } else {
114 | return "grey";
115 | }
116 | },
117 | stroke: "white",
118 | strokeWidth: 1,
119 | },
120 | }}
121 | events={[
122 | {
123 | target: "data",
124 | eventHandlers: {
125 | onMouseDown: (e) => e.stopPropagation(),
126 | onClick: () => {
127 | return [
128 | {
129 | target: "data",
130 | mutation: (props) => {
131 | handleSelect(props.datum.x);
132 | },
133 | },
134 | ];
135 | },
136 | },
137 | },
138 | ]}
139 | />
140 |
150 |
161 |
162 |
163 |
34 |
35 |
36 |
37 |
38 |
39 | {palette ? (
40 |
41 |
handleClose()} />
42 | debouncedChangeColor(label, c)}
45 | />
46 |
47 | ) : null}
48 |
49 |
50 | );
51 | };
52 |
53 | export default ColorButton;
54 |
--------------------------------------------------------------------------------
/src/colorPalette.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | FormControl,
4 | MenuItem,
5 | Select,
6 | InputLabel,
7 | IconButton,
8 | Tooltip,
9 | } from "@material-ui/core";
10 | import ColorScale from "./colorScale";
11 | import { makeStyles } from "@material-ui/core/styles";
12 | import { range } from "d3-array";
13 | import {
14 | getScheme,
15 | rgbToHex,
16 | contPalettes,
17 | getCategoricalScheme,
18 | categoricalPalettes,
19 | } from "./functions.js";
20 | import { ChromePicker } from "react-color";
21 | import { Palette, PaletteOutlined } from "@material-ui/icons";
22 |
23 | const useStyles = makeStyles((theme) => ({
24 | formControl: {
25 | margin: theme.spacing(1),
26 | paddingLeft: "15px",
27 | },
28 | customSelect: {
29 | paddingRight: "5px",
30 | "& .MuiSelect-root": {
31 | minWidth: 50,
32 | },
33 | "& .MuiSelect-selectMenu": {
34 | overflow: "visible",
35 | },
36 | "& .MuiFormLabel-root": {
37 | fontSize: "15px",
38 | },
39 | },
40 | colorItem: {
41 | "& .MuiSelect-root": {
42 | width: 100,
43 | maxHeight: "16px",
44 | minHeight: "16px",
45 | },
46 | "& .MuiSelect-select": {
47 | paddingTop: "2px",
48 | },
49 | "& .MuiFormLabel-root": {
50 | width: 200,
51 | fontSize: "15px",
52 | },
53 | },
54 | menuItem: {
55 | paddingTop: "3px",
56 | paddingBottom: "3px",
57 | paddingLeft: "2px",
58 | paddingRight: "2px",
59 | whiteSpace: "normal",
60 | },
61 | }));
62 |
63 | const ColorPalette = ({
64 | type,
65 | data,
66 | metadata,
67 | defaultColors,
68 | currColors,
69 | onPaletteChange,
70 | currGroup,
71 | currPalette,
72 | onCurrDataChange,
73 | onAllColorChange,
74 | // colors,
75 | }) => {
76 | const colorsAreSame = new Set(Object.values(currColors)).size === 1;
77 |
78 | const columns =
79 | metadata !== undefined
80 | ? Object.keys(Object.values(metadata)[0]).concat("Id")
81 | : ["Id", "Degree"];
82 |
83 | const classes = useStyles();
84 | const [group, setGroup] = React.useState(currGroup);
85 |
86 | const createDataObj = (data, metadata) => {
87 | const obj = {};
88 | if (metadata !== undefined) {
89 | if (group === "Id") {
90 | Object.keys(metadata).map((d) => {
91 | obj[d] = d;
92 | });
93 | } else {
94 | Object.entries(metadata).map((d) => {
95 | obj[d[0]] = d[1][group];
96 | });
97 | }
98 | return obj;
99 | } else {
100 | if (group === "Id") {
101 | Object.keys(data).map((d) => {
102 | obj[d] = d;
103 | });
104 | return obj;
105 | } else {
106 | return data;
107 | }
108 | }
109 | };
110 | const dataObj = createDataObj(data, metadata);
111 | const isDiscrete = (dataObj) => {
112 | const values = Object.values(dataObj);
113 | if (typeof values[0] === "number") {
114 | return new Set(values).size === values.size;
115 | } else {
116 | return true;
117 | }
118 | };
119 | const myPalette = isDiscrete(dataObj) ? categoricalPalettes : contPalettes;
120 | const [palette, setPalette] = React.useState(currPalette);
121 | // console.log(palette);
122 |
123 | const [allPaletteOpen, setAllPaletteOpen] = React.useState(false);
124 |
125 | const handlePalette = (event) => {
126 | setPalette(event.target.value);
127 | if (event.target.value === "default") {
128 | onPaletteChange(type, defaultColors);
129 | } else {
130 | if (type === "node") {
131 | const nodeColorPalette = assignColors(group, event.target.value);
132 | onPaletteChange(type, nodeColorPalette);
133 | onCurrDataChange(group, event.target.value, type);
134 | } else {
135 | const edgeColorPalette = assignColors(group, event.target.value);
136 | onPaletteChange(type, edgeColorPalette);
137 | onCurrDataChange(group, event.target.value, type);
138 | }
139 | }
140 | };
141 |
142 | const handleClick = () => {
143 | setAllPaletteOpen(!allPaletteOpen);
144 | };
145 |
146 | const handleClose = () => {
147 | setAllPaletteOpen(false);
148 | };
149 | const [paletteColor, setPaletteColor] = React.useState(
150 | colorsAreSame ? Object.values(currColors)[0] : "#000000ff"
151 | );
152 |
153 | const handleGroup = (event) => {
154 | setGroup(event.target.value);
155 | setPalette("default");
156 | };
157 |
158 | const assignColors = (group, palette) => {
159 | const schemeObj = {};
160 | var colorObj = {};
161 | const values = Object.values(dataObj);
162 | const unique = Array.from(new Set(values)).sort();
163 |
164 | const bins = unique.length;
165 | if (!isDiscrete(dataObj)) {
166 | range(bins).map((x, i) => {
167 | schemeObj[unique[i]] = rgbToHex(getScheme(palette)((x + 1) / bins));
168 | });
169 |
170 | Object.entries(dataObj).map((d) => {
171 | colorObj[d[0]] = schemeObj[d[1]];
172 | });
173 | } else {
174 | const modifiedScheme = [];
175 | range(bins).map((x, i) => {
176 | let idx = x % getCategoricalScheme(palette).length;
177 | modifiedScheme.push(getCategoricalScheme(palette)[idx]);
178 | });
179 |
180 | if (getCategoricalScheme(palette).length > bins) {
181 | Object.entries(dataObj).map((d, i) => {
182 | let idx = unique.indexOf(d[1]);
183 | colorObj[d[0]] = modifiedScheme[idx];
184 | });
185 | } else {
186 | Object.entries(dataObj).map((d, i) => {
187 | colorObj[d[0]] = modifiedScheme[i];
188 | });
189 | }
190 | }
191 | return colorObj;
192 | };
193 |
194 | const getColorArray = (name) => {
195 | if (isDiscrete(dataObj)) {
196 | return getCategoricalScheme(name);
197 | } else {
198 | const colorScheme = getScheme(name);
199 | const k = [0.2, 0.4, 0.6, 0.8, 1];
200 | const result = k.map((x) => colorScheme(x));
201 | return result;
202 | }
203 | };
204 |
205 | const handleChangeColor = (color) => {
206 | const RGB = color.rgb;
207 | const rgbaStr =
208 | "rgba(" + RGB.r + ", " + RGB.g + ", " + RGB.b + ", " + RGB.a + ")";
209 | setPaletteColor(rgbToHex(rgbaStr));
210 | onAllColorChange(rgbToHex(rgbaStr), type);
211 | };
212 |
213 | return (
214 |
215 |
224 | {"Colors"}
225 |
226 |
227 |
230 | {"Change colors of all " + type + "s"}
231 |
232 | }
233 | >
234 |
235 | {colorsAreSame ? (
236 |
237 | ) : (
238 |
241 | )}
242 |
243 |
244 |
245 |
246 | {allPaletteOpen ? (
247 |
248 |
249 |
handleChangeColor(c)}
252 | />
253 |
254 | ) : null}
255 |
256 |
257 | Color by
258 |
265 |
266 |
267 |
268 | Color palette
269 |
279 |
280 |
281 |