Skip to content

Commit d5b8aad

Browse files
kevinfeykevinfey
committed
color coding for long load times
1 parent a946a2f commit d5b8aad

File tree

2 files changed

+144
-71
lines changed

2 files changed

+144
-71
lines changed

‎src/app/components/Chart.tsx

Lines changed: 142 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
1-
/* eslint-disable @typescript-eslint/no-explicit-any */
2-
/* eslint-disable max-len */
3-
/* eslint-disable @typescript-eslint/ban-types */
4-
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
5-
/* eslint-disable eqeqeq */
6-
/* eslint-disable react/prop-types */
7-
/* eslint-disable no-mixed-operators */
8-
/* eslint-disable prefer-template */
9-
/* eslint-disable no-return-assign */
10-
/* eslint-disable prefer-arrow-callback */
11-
/* eslint-disable func-names */
12-
/* eslint-disable no-underscore-dangle */
13-
/* eslint-disable no-param-reassign */
14-
/* eslint-disable no-use-before-define */
15-
/* eslint-disable react/no-string-refs */
16-
171
import React, { Component } from 'react';
182
import * as d3 from 'd3';
193

204
/**
215
* @var colors: Colors array for the diffrerent node branches, each color is for a different branch
226
*/
23-
const colors = ['#95B6B7', '#475485', '#519331', '#AA5039', '#8B2F5F', '#C5B738', '#858DFF', '#FF8D02', '#FFCD51', '#ACDAE6', '#FC997E', '#CF93AD', '#AA3939', '#AA6C39', '#226666', '#2C4870'];
7+
const colors = [
8+
'#95B6B7',
9+
'#475485',
10+
'#519331',
11+
'#AA5039',
12+
'#8B2F5F',
13+
'#C5B738',
14+
'#858DFF',
15+
'#FF8D02',
16+
'#FFCD51',
17+
'#ACDAE6',
18+
'#FC997E',
19+
'#CF93AD',
20+
'#AA3939',
21+
'#AA6C39',
22+
'#226666',
23+
'#2C4870',
24+
];
2425

25-
const filter = (data:any[]) => {
26+
const filterHooks = (data: any[]) => {
2627
if (data[0].children && data[0].state === 'stateless') {
27-
return filter(data[0].children);
28+
return filterHooks(data[0].children);
2829
}
2930
return JSON.stringify(data[0].state);
3031
};
3132

33+
//const filterRecoil = (data: any[]) => {};
34+
3235
interface ChartProps {
3336
hierarchy: Record<string, unknown>;
3437
}
@@ -38,15 +41,18 @@ class Chart extends Component {
3841
/**
3942
* @method maked3Tree :Creates a new D3 Tree
4043
*/
41-
constructor(props:ChartProps) {
44+
constructor(props: ChartProps) {
4245
super(props);
46+
// what React.createRef() is doing.
4347
this.chartRef = React.createRef();
4448
this.maked3Tree = this.maked3Tree.bind(this);
4549
this.removed3Tree = this.removed3Tree.bind(this);
50+
this.isRecoil = false;
4651
}
4752

4853
componentDidMount() {
4954
const { hierarchy } = this.props;
55+
console.log('HIERARCHYYYYY', hierarchy);
5056
root = JSON.parse(JSON.stringify(hierarchy));
5157
this.maked3Tree();
5258
}
@@ -78,12 +84,14 @@ class Chart extends Component {
7884
// };
7985
const width = 600; // - margin.right - margin.left;
8086
const height = 600; // 700 - margin.top - margin.bottom;
81-
const chartContainer = d3.select(this.chartRef.current)
87+
const chartContainer = d3
88+
.select(this.chartRef.current)
8289
.append('svg') // chartContainer is now pointing to svg
8390
.attr('width', width)
8491
.attr('height', height);
8592

86-
const g = chartContainer.append('g')
93+
const g = chartContainer
94+
.append('g')
8795
// this is changing where the graph is located physically
8896
.attr('transform', `translate(${width / 2 + 4}, ${height / 2 + 2})`);
8997

@@ -96,12 +104,15 @@ class Chart extends Component {
96104
// (our object titled dataset), which must be an object representing the root node
97105
const hierarchy = d3.hierarchy(root);
98106

99-
const tree = d3.tree()
107+
const tree = d3
108+
.tree()
100109
// this assigns width of tree to be 2pi
101110
// .size([2 * Math.PI, radius / 1.3])
102111
.nodeSize([width / 10, height / 10])
103112
// .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
104-
.separation(function (a:{parent:object}, b:{parent:object}) { return (a.parent == b.parent ? 2 : 2); });
113+
.separation(function (a: { parent: object }, b: { parent: object }) {
114+
return a.parent == b.parent ? 2 : 2;
115+
});
105116

106117
const d3root = tree(hierarchy);
107118

@@ -114,16 +125,30 @@ class Chart extends Component {
114125
.enter()
115126
.append('path')
116127
.attr('class', 'link')
117-
.attr('d', d3.linkRadial()
118-
.angle((d:{x:number}) => d.x)
119-
.radius((d:{y:number}) => d.y));
128+
.attr(
129+
'd',
130+
d3
131+
.linkRadial()
132+
.angle((d: { x: number }) => d.x)
133+
.radius((d: { y: number }) => d.y)
134+
);
120135

121-
const node = g.selectAll('.node')
136+
const node = g
137+
.selectAll('.node')
122138
// root.descendants gets an array of of all nodes
123139
.data(d3root.descendants())
124140
.enter()
125141
.append('g')
126-
.style('fill', function (d:{data:{branch:number}}) {
142+
.style('fill', function (d) {
143+
let loadTime =
144+
d.data.stateSnapshot.children[0].componentData.actualDuration;
145+
146+
if (loadTime !== undefined) {
147+
if (loadTime > 16) {
148+
return '#ff0000';
149+
}
150+
}
151+
127152
if (d.data.branch < colors.length) {
128153
return colors[d.data.branch];
129154
}
@@ -139,74 +164,120 @@ class Chart extends Component {
139164
// .attr('class', function (d) {
140165
// return 'node' + (d.children ? ' node--internal' : ' node--leaf');
141166
// })
142-
.attr('transform', function (d:{x:number, y:number}) {
167+
// .style('fill', function (d) {
168+
169+
// if (loadTime!== undefined ){
170+
171+
// if (loadTime > 16){
172+
// return '#ff0000'
173+
// }
174+
// }
175+
176+
// })
177+
.attr('transform', function (d: { x: number; y: number }) {
143178
return 'translate(' + reinfeldTidierAlgo(d.x, d.y) + ')';
144179
});
145180

146-
node.append('circle')
181+
node
182+
.append('circle')
147183
.attr('r', 15)
148-
.on('mouseover', function (d:any) {
149-
d3.select(this)
150-
.transition(100)
151-
.duration(20)
152-
.attr('r', 25);
153-
154-
tooltipDiv.transition()
155-
.duration(50)
156-
.style('opacity', 0.9);
157-
158-
tooltipDiv.html(filter(d.data.stateSnapshot.children), this)
159-
.style('left', (d3.event.pageX - 90) + 'px')
160-
.style('top', (d3.event.pageY - 65) + 'px');
184+
.on('mouseover', function (d: any) {
185+
d3.select(this).transition(100).duration(20).attr('r', 25);
186+
187+
tooltipDiv.transition().duration(50).style('opacity', 0.9);
188+
189+
if (d.data.stateSnapshot.children[0].name === 'RecoilRoot') {
190+
console.log('enter');
191+
this.isRecoil = true;
192+
}
193+
console.log('isRecoil', this.isRecoil);
194+
195+
console.log('d.data', d.data);
196+
console.log('d.data.stateSnapshot', d.data.stateSnapshot);
197+
console.log(
198+
'd.data.stateSnapshot.children',
199+
d.data.stateSnapshot.children
200+
);
201+
if (!this.isRecoil) {
202+
tooltipDiv
203+
.html(filterHooks(d.data.stateSnapshot.children), this)
204+
.style('left', d3.event.pageX - 90 + 'px')
205+
.style('top', d3.event.pageY - 65 + 'px');
206+
} else {
207+
tooltipDiv
208+
.html(
209+
'Load Time : ' +
210+
JSON.stringify(
211+
d.data.stateSnapshot.children[0].componentData.actualDuration
212+
).substring(0, 5) +
213+
' ms',
214+
this
215+
)
216+
.style('left', d3.event.pageX - 90 + 'px')
217+
.style('top', d3.event.pageY - 65 + 'px');
218+
}
161219
})
162220
// eslint-disable-next-line no-unused-vars
163221
// eslint-disable-next-line @typescript-eslint/no-unused-vars
164-
.on('mouseout', function (d:any) {
165-
d3.select(this)
166-
.transition()
167-
.duration(300)
168-
.attr('r', 15);
169-
170-
tooltipDiv.transition()
171-
.duration(400)
172-
.style('opacity', 0);
222+
.on('mouseout', function (d: any) {
223+
d3.select(this).transition().duration(300).attr('r', 15);
224+
225+
tooltipDiv.transition().duration(400).style('opacity', 0);
173226
});
174227
node
175228
.append('text')
176229
// adjusts the y coordinates for the node text
177230
.attr('dy', '0.5em')
178-
.attr('x', function (d:{x:number; children?:[]}) {
231+
.attr('x', function (d: { x: number; children?: [] }) {
179232
// this positions how far the text is from leaf nodes (ones without children)
180233
// negative number before the colon moves the text of rightside nodes,
181234
// positive number moves the text for the leftside nodes
182235
return d.x < Math.PI === !d.children ? 0 : 0;
183236
})
184237
.attr('text-anchor', 'middle')
185238
// this arranges the angle of the text
186-
.attr('transform', function (d:{x:number, y:number}) { return 'rotate(' + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 1 / Math.PI + ')'; })
187-
.text(function (d:{data:{name:number, branch:number}}) {
239+
.attr('transform', function (d: { x: number; y: number }) {
240+
return (
241+
'rotate(' +
242+
((d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 1) /
243+
Math.PI +
244+
')'
245+
);
246+
})
247+
.text(function (d: { data: { name: number; branch: number } }) {
188248
// display the name of the specific patch
189249
return `${d.data.name}.${d.data.branch}`;
190250
});
191251

192252
// allows svg to be dragged around
193-
node.call(d3.drag()
194-
.on('start', dragstarted)
195-
.on('drag', dragged)
196-
.on('end', dragended));
253+
node.call(
254+
d3
255+
.drag()
256+
.on('start', dragstarted)
257+
.on('drag', dragged)
258+
.on('end', dragended)
259+
);
197260

198-
chartContainer.call(d3.zoom()
199-
.extent([[0, 0], [width, height]])
200-
.scaleExtent([0, 8]) // scaleExtent([minimum scale factor, maximum scale factor])
201-
.on('zoom', zoomed));
261+
chartContainer.call(
262+
d3
263+
.zoom()
264+
.extent([
265+
[0, 0],
266+
[width, height],
267+
])
268+
.scaleExtent([0, 8]) // scaleExtent([minimum scale factor, maximum scale factor])
269+
.on('zoom', zoomed)
270+
);
202271

203272
function dragstarted() {
204273
d3.select(this).raise();
205274
g.attr('cursor', 'grabbing');
206275
}
207276

208-
function dragged(d:{x:number, y:number}) {
209-
d3.select(this).attr('dx', d.x = d3.event.x).attr('dy', d.y = d3.event.y);
277+
function dragged(d: { x: number; y: number }) {
278+
d3.select(this)
279+
.attr('dx', (d.x = d3.event.x))
280+
.attr('dy', (d.y = d3.event.y));
210281
}
211282

212283
function dragended() {
@@ -218,12 +289,14 @@ class Chart extends Component {
218289
}
219290

220291
// define the div for the tooltip
221-
const tooltipDiv = d3.select('body').append('div')
292+
const tooltipDiv = d3
293+
.select('body')
294+
.append('div')
222295
.attr('class', 'tooltip')
223296
.style('opacity', 0);
224297

225-
function reinfeldTidierAlgo(x:number, y:number) {
226-
return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
298+
function reinfeldTidierAlgo(x: number, y: number) {
299+
return [(y = +y) * Math.cos((x -= Math.PI / 2)), y * Math.sin(x)];
227300
}
228301
}
229302

‎src/app/components/Map.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
55
/* eslint-disable @typescript-eslint/ban-types */
66

7-
import React, { useRef, useState, useEffect } from 'react';
7+
import React, { useState, useEffect } from 'react';
88
import * as d3 from 'd3';
99

1010
const Map = (props) => {
@@ -93,7 +93,7 @@ const Map = (props) => {
9393
// for each node that got created, append a circle element
9494
node
9595
.append('circle')
96-
.attr('fill', (d: any) => (d.children ? '#3214db' : '#c300ff'))
96+
.attr('fill', (d: any) => (d.children ? '#95B6B7' : '#46edf2'))
9797
.attr('r', 50);
9898

9999
// for each node that got created, append a text element that displays the name of the node

0 commit comments

Comments
 (0)