Skip to content

Commit 49a32e8

Browse files
gpancieragpanciera
committed
switching back to class
1 parent ad9a3ed commit 49a32e8

File tree

8 files changed

+689
-262
lines changed

8 files changed

+689
-262
lines changed

‎dev-reactime/linkFiber.js

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,16 @@ module.exports = (snap, mode) => {
5353
let fiberRoot = null;
5454
let astHooks;
5555
let concurrent = false; // flag to check if we are in concurrent mode
56+
const reactWorkTags = [
57+
'FunctionComponent',
58+
'ClassComponent',
59+
'IndeterminateComponent',
60+
'HostRoot', // Root of a host tree. Could be nested inside another node.
61+
'HostPortal', // A subtree. Could be an entry point to a different renderer.
62+
'HostComponent',
63+
'HostText',
64+
];
65+
5666

5767
function sendSnapshot() {
5868
// Don't send messages while jumping or while paused
@@ -141,7 +151,13 @@ module.exports = (snap, mode) => {
141151
if (curFiber.stateNode && curFiber.stateNode.state) {
142152
newChildNode = parentNode.appendChild(curFiber.stateNode);
143153
changeSetState(curFiber.stateNode);
144-
newChildNode.isStateful = true;
154+
155+
// newChildNode.isStateful = true;
156+
newChildNode.tagLabel = reactWorkTags[curFiber.tag];
157+
newChildNode.actualDuration = curFiber.actualDuration;
158+
// newChildNode.actualStartTime = curFiber.actualStartTime;
159+
// newChildNode.selfBaseDuration = curFiber.selfBaseDuration;
160+
// newChildNode.treeBaseDuration = curFiber.treeBaseDuration;
145161
}
146162

147163
// Recurse to sibling; siblings that have state should be added to our parentNode

‎dev-reactime/tree.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,13 @@ class Tree {
3838
|| child.component.traversed, true, child.component.constructor.name),
3939
);
4040

41+
// copy.isStateful = this.isStateful;
42+
copy.tagLabel = this.tagLabel;
43+
copy.actualDuration = this.actualDuration;
44+
// copy.actualStartTime = this.actualStartTime;
45+
// copy.selfBaseDuration = this.selfBaseDuration;
46+
// copy.treeBaseDuration = this.treeBaseDuration;
47+
4148
// copy children's children recursively
4249
this.children.forEach((child, i) => child.getCopy(copy.children[i]));
4350
return copy;

‎package-lock.json

Lines changed: 442 additions & 220 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
"sass-loader": "^7.2.0",
6565
"sinon-chrome": "^3.0.1",
6666
"style-loader": "^0.23.1",
67-
"webpack": "^4.39.1",
67+
"webpack": "^4.43.0",
6868
"webpack-chrome-extension-reloader": "^1.3.0",
6969
"webpack-cli": "^3.3.6"
7070
},

‎src/app/components/Chart.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ class Chart extends Component {
3232

3333
componentDidUpdate() {
3434
const { hierarchy } = this.props;
35-
// console.log('this is hierarchy on didUpdate chart', hierarchy)
35+
console.log('this is hierarchy on didUpdate chart', hierarchy)
3636
root = JSON.parse(JSON.stringify(hierarchy));
3737
this.maked3Tree();
3838
}
@@ -45,6 +45,7 @@ class Chart extends Component {
4545
}
4646

4747
maked3Tree() {
48+
4849
this.removed3Tree();
4950
const margin = {
5051
top: 0,
@@ -92,7 +93,7 @@ class Chart extends Component {
9293
.attr('class', 'link')
9394
.attr('d', d3.linkRadial()
9495
.angle(d => {
95-
console.log('d on line 92 chart', d)
96+
// console.log('d on line 92 chart', d)
9697
return d.x
9798
})
9899
.radius(d => d.y));

‎src/app/components/PerfView.jsx

Lines changed: 201 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,46 +4,84 @@
44
import React, { useEffect, useRef } from 'react';
55
import * as d3 from 'd3';
66

7-
const PerfView = props => {
8-
console.log('Rendering Tab - snapshot: ', props.snapshot);
7+
// let root = {};
8+
const chartData = {
9+
name: 'flare',
10+
children: [
11+
{
12+
name: 'analytics',
13+
children: [
14+
{
15+
name: 'cluster',
16+
children: [
17+
{ name: 'AgglomerativeCluster', size: 3938 },
18+
{ name: 'CommunityStructure', size: 3812 },
19+
{ name: 'MergeEdge', size: 743 },
20+
],
21+
},
22+
{
23+
name: 'graph',
24+
children: [
25+
{ name: 'BetweennessCentrality', size: 3534 },
26+
{ name: 'LinkDistance', size: 5731 },
27+
],
28+
},
29+
],
30+
},
31+
],
32+
};
33+
34+
const PerfView = ({ width, height }) => {
35+
console.log('Rendering Performance - chartData: ', chartData);
36+
37+
const d3gRef = useRef(null);
38+
// returns color scale function
39+
const color = d3.scaleLinear()
40+
.domain([0, 5])
41+
.range(['hsl(152,80%,80%)', 'hsl(228,30%,40%)'])
42+
.interpolate(d3.interpolateHcl);
43+
44+
// returns a function that formats numbers
45+
const numFormat = d3.format(',d');
46+
47+
const margin = {
48+
top: 0, right: 60, bottom: 200, left: 120,
49+
};
50+
51+
// create a new circle packing layout function
52+
const pack = data => d3.pack()
53+
.size([width, height])
54+
.padding(3)(d3.hierarchy(data)
55+
.sum(d => d.value)
56+
.sort((a, b) => b.value - a.value));
957

10-
const thisRef = useRef(null);
11-
1258
useEffect(() => {
59+
const hierarchy = d3.hierarchy(chartData);
60+
console.log('PerfView -> hierarchy', hierarchy);
61+
62+
const dataRoot = pack(hierarchy);
63+
console.log('PerfView -> dataRoot', dataRoot);
1364

14-
const dataMax = d3.max(props.data);
15-
16-
const yScale = d3.scaleLinear()
17-
.domain([0, dataMax])
18-
.range([0, props.size[1]]);
19-
20-
d3.select(thisRef.current)
21-
.selectAll('rect')
22-
.data(props.data)
23-
.enter()
24-
.append('rect');
25-
26-
d3.select(thisRef.current)
27-
.selectAll('rect')
28-
.data(props.data)
29-
.exit()
30-
.remove();
31-
32-
d3.select(thisRef.current)
33-
.selectAll('rect')
34-
.data(props.data)
35-
.style('fill', '#fe9922')
36-
.attr('x', (d, i) => i * 25)
37-
.attr('y', d => props.size[1] - yScale(d))
38-
.attr('height', d => yScale(d))
39-
.attr('width', 25);
40-
});
41-
42-
return (<svg ref={thisRef} width={500} height={500} />);
65+
const gElem = d3.select(d3gRef);
66+
67+
gElem.selectAll('circle')
68+
.data(dataRoot.descendants().slice(1))
69+
.enter().append('circle')
70+
.attr('fill', d => (d.children ? color(d.depth) : 'white'));
71+
}, [chartData]);
72+
73+
return (
74+
<svg width={width} height={height} className="d3Container">
75+
<g ref={d3gRef} transform={`translate(${50} ${50})`} />
76+
<rect width="100" height="100" x="50" y="20" />
77+
</svg>
78+
);
4379
};
4480

4581
export default PerfView;
4682

83+
/* eslint-disable indent */
84+
4785

4886
// const data = {
4987
// type,
@@ -58,3 +96,133 @@ export default PerfView;
5896
// selfBaseDuration,
5997
// treeBaseDuration
6098
// }
99+
100+
101+
// const dataMax = d3.max(props.data);
102+
103+
// const yScale = d3.scaleLinear()
104+
// .domain([0, dataMax])
105+
// .range([0, props.size[1]]);
106+
107+
// d3.select(thisRef.current)
108+
// .selectAll('rect')
109+
// .data(props.data)
110+
// .enter()
111+
// .append('rect');
112+
113+
// d3.select(thisRef.current)
114+
// .selectAll('rect')
115+
// .data(props.data)
116+
// .exit()
117+
// .remove();
118+
119+
// d3.select(thisRef.current)
120+
// .selectAll('rect')
121+
// .data(props.data)
122+
// .style('fill', '#fe9922')
123+
// .attr('x', (d, i) => i * 25)
124+
// .attr('y', d => props.size[1] - yScale(d))
125+
// .attr('height', d => yScale(d))
126+
// .attr('width', 25);
127+
128+
129+
// const PerfView = ({ width, height }) => {
130+
// const chartData = {
131+
// name: 'flare',
132+
// children: [
133+
// {
134+
// name: 'analytics',
135+
// children: [
136+
// {
137+
// name: 'cluster',
138+
// children: [
139+
// { name: 'AgglomerativeCluster', size: 3938 },
140+
// { name: 'CommunityStructure', size: 3812 },
141+
// { name: 'MergeEdge', size: 743 },
142+
// ],
143+
// },
144+
// {
145+
// name: 'graph',
146+
// children: [
147+
// { name: 'BetweennessCentrality', size: 3534 },
148+
// { name: 'LinkDistance', size: 5731 },
149+
// ],
150+
// },
151+
// ],
152+
// },
153+
// ],
154+
// };
155+
// console.log('Rendering Performance - chartData: ', chartData);
156+
157+
// const d3gRef = useRef(null);
158+
// // returns color scale function
159+
// const color = d3.scaleLinear()
160+
// .domain([0, 5])
161+
// .range(['hsl(152,80%,80%)', 'hsl(228,30%,40%)'])
162+
// .interpolate(d3.interpolateHcl);
163+
164+
// // returns a function that formats numbers
165+
// const numFormat = d3.format(',d');
166+
167+
// const margin = {
168+
// top: 0, right: 60, bottom: 200, left: 120,
169+
// };
170+
171+
// // create a new circle packing layout function
172+
// const pack = data => d3.pack()
173+
// .size([width, height])
174+
// .padding(3)(d3.hierarchy(data)
175+
// .sum(d => d.value)
176+
// .sort((a, b) => b.value - a.value));
177+
178+
// useEffect(() => {
179+
// const hierarchy = d3.hierarchy(chartData);
180+
// console.log('PerfView -> hierarchy', hierarchy);
181+
// // const dataRoot = pack(chartData);
182+
// const dataRoot = pack(hierarchy);
183+
// console.log('PerfView -> dataRoot', dataRoot);
184+
// // const focus = dataRoot;
185+
// // let view;
186+
187+
// // const svg = d3.create('svg')
188+
// // .attr('viewBox', `-${width / 2} -${height / 2} ${width} ${height}`)
189+
// // .style('display', 'block')
190+
// // .style('margin', '0 -14px')
191+
// // .style('background', color(0))
192+
// // .style('cursor', 'pointer');
193+
// // .on('click', () => zoom(dataRoot));
194+
195+
// const gElem = d3.select(d3gRef);
196+
// // const node = g.append('g')
197+
// const node = gElem.selectAll('circle')
198+
// .data(dataRoot.descendants().slice(1));
199+
// // .join('circle')
200+
// node.enter().append('circle')
201+
// .attr('fill', d => (d.children ? color(d.depth) : 'white'));
202+
// // .attr('pointer-events', d => (!d.children ? 'none' : null))
203+
// // .on('mouseover', function () { d3.select(this).attr('stroke', '#000'); })
204+
// // .on('mouseout', function () { d3.select(this).attr('stroke', null); })
205+
// // .on('click', d => focus !== d && (zoom(d), d3.event.stopPropagation()));
206+
207+
// // const label = g.append('g')
208+
// // .style('font', '10px sans-serif')
209+
// // .attr('pointer-events', 'none')
210+
// // .attr('text-anchor', 'middle')
211+
// // .selectAll('text')
212+
// // .data(dataRoot.descendants())
213+
// // // .join('text')
214+
// // .enter()
215+
// // .append('text')
216+
// // .style('fill-opacity', d => (d.parent === dataRoot ? 1 : 0))
217+
// // .style('display', d => (d.parent === dataRoot ? 'inline' : 'none'))
218+
// // .text(d => d.data.name);
219+
// }, [chartData]);
220+
221+
// // return (<svg ref={d3svgRef} width={width} height={height} />);
222+
// return (
223+
// <svg width={width} height={height} className="d3Container">
224+
// <g ref={d3gRef} transform={`translate(${50} ${50})`} />
225+
// <rect width="100" height="100" x="50" y="20" />
226+
// </svg>
227+
// );
228+
// };

‎src/app/components/StateRoute.jsx

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable object-curly-newline */
2-
import React from 'react';
2+
import React, { useRef, useEffect } from 'react';
33
import PropTypes from 'prop-types';
44
import { MemoryRouter as Router, Route, NavLink, Switch } from 'react-router-dom';
55

@@ -11,6 +11,17 @@ const NO_STATE_MSG = 'No state change detected. Trigger an event to change state
1111
// eslint-disable-next-line react/prop-types
1212

1313
const StateRoute = ({ snapshot, hierarchy }) => {
14+
// const windowRef = useRef(null);
15+
// const winWidth = null;
16+
// const winHeight = null;
17+
18+
// useEffect(() => {
19+
// if (windowRef.current) {
20+
// winWidth = windowRef.current.offsetHeight;
21+
// winHeight = windowRef.current.offsetWidth;
22+
// }
23+
// }, [windowRef]);
24+
1425
// gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was initialize involk render chart
1526
const renderChart = () => {
1627
if (hierarchy) {
@@ -28,14 +39,14 @@ const StateRoute = ({ snapshot, hierarchy }) => {
2839
};
2940

3041
const renderPerfView = () => {
31-
if (snapshot && hierarchy) {
32-
return <PerfView data={[5,10,1,3]} size={[500,500]} snapshot={snapshot} />;
42+
if (snapshot) {
43+
return <PerfView width={500} height={500} />;
3344
}
3445
return <div className="noState">{NO_STATE_MSG}</div>;
3546
};
3647

3748
return (
38-
<Router>
49+
<Router>
3950
<div className="navbar">
4051
<NavLink className="router-link" activeClassName="is-active" exact to="/">
4152
State

‎src/app/components/Tree.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import PropTypes from 'prop-types';
44

55

66
const getItemString = (type, data) => {
7+
// console.log("getItemString -> type", type)
8+
// console.log("getItemString -> data", data)
79
// check to make sure that we are on the tree node, not anything else
810
if (
9-
Object.keys(data).length === 3
11+
Object.keys(data).length >= 3
1012
&& typeof data.state === 'object'
1113
&& typeof data.name === 'string'
1214
&& Array.isArray(data.children)

0 commit comments

Comments
 (0)