Skip to content

Commit 5161f65

Browse files
gpancieragpanciera
committed
perf view removing old elems correctly, but chartData update incorrect
1 parent 0bbd105 commit 5161f65

File tree

6 files changed

+107
-90
lines changed

6 files changed

+107
-90
lines changed

‎src/app/components/Action.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ const Action = props => {
88
const {
99
selected, last, index, sliderIndex, dispatch, displayName, componentName, state, viewIndex, handleOnkeyDown,
1010
} = props;
11-
console.log('last', last)
12-
console.log('index', index)
13-
console.log('viewIndex', viewIndex)
14-
console.log('selected', selected)
11+
// console.log('last', last)
12+
// console.log('index', index)
13+
// console.log('viewIndex', viewIndex)
14+
// console.log('selected', selected)
1515
selected
1616

1717
return (

‎src/app/components/PerfView.jsx

Lines changed: 86 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/* eslint-disable func-names */
2+
/* eslint-disable react/no-this-in-sfc */
3+
/* eslint-disable no-shadow */
4+
/* eslint-disable no-multi-spaces */
5+
/* eslint-disable newline-per-chained-call */
16
/* eslint-disable object-curly-newline */
27
/* eslint-disable object-property-newline */
38
/* eslint-disable class-methods-use-this */
@@ -7,116 +12,133 @@
712
/* eslint-disable react/destructuring-assignment */
813
/* eslint-disable react/prop-types */
914
/* eslint-disable no-console */
10-
import React, { useEffect, useRef } from 'react';
15+
16+
import React, { useEffect, useState, useRef } from 'react';
1117
import * as d3 from 'd3';
1218
import { addNewSnapshots } from '../actions/actions';
1319

14-
// const chartData = {
15-
// name: 'App',
16-
// children: [
17-
// { name: 'DisplayPanel', componentData: { actualDuration: 5000 } },
18-
// { name: 'AltDisplay', componentData: { actualDuration: 2000 } },
19-
// { name: 'MarketSContainer', componentData: { actualDuration: 4000 } },
20-
// { name: 'MainSlider', componentData: { actualDuration: 3000 } },
21-
// ],
22-
// };
23-
24-
const moveCompData = node => {
25-
if (node === null) return node;
26-
27-
if (node.componentData.actualDuration) {
28-
node.val = node.componentData.actualDuration;
29-
}
30-
else {
31-
node.val = 1;
32-
}
33-
if(node.children.length > 0) {
34-
node.children.forEach(elem => copyToProp(elem));
35-
}
36-
else {
37-
return;
38-
}
39-
};
20+
// const windowRef = useRef(null);
21+
// const winWidth = null;
22+
// const winHeight = null;
4023

41-
const PerfView = ({
42-
width = 200,
43-
height = 200,
44-
snapshots
45-
}) => {
46-
console.log('snapshots', snapshots);
47-
const chartData = snapshots[snapshots.length - 1].children[0];
48-
moveCompData(chartData);
49-
console.log('chartData', chartData);
24+
// useEffect(() => {
25+
// if (windowRef.current) {
26+
// winWidth = windowRef.current.offsetHeight;
27+
// winHeight = windowRef.current.offsetWidth;
28+
// console.log('** SETTING WINDOW SIZES: ', winWidth, winHeight);
29+
// }
30+
// }, [windowRef]);
5031

32+
const PerfView = ({ snapshots, viewIndex }) => {
33+
const [chartData, setChartData] = useState(snapshots[snapshots.length - 1]);
5134
const svgRef = useRef(null);
5235

53-
// returns color scale function
36+
// Todo: implement update functions...
37+
const [curZoom, setZoom] = useState(null);
38+
const [width, setWidth] = useState(600);
39+
const [height, setHeight] = useState(600);
40+
41+
// set up color scaling function
5442
const color = d3.scaleLinear()
55-
.domain([0, 5])
43+
.domain([0, 7])
5644
.range(['hsl(152,80%,80%)', 'hsl(228,30%,40%)'])
5745
.interpolate(d3.interpolateHcl);
5846

59-
// create a new circle packing layout function
47+
// set up circle-packing layout function
6048
const packFunc = data => d3.pack()
6149
.size([width, height])
6250
.padding(3)(d3.hierarchy(data)
6351
.sum(d => {
64-
console.log('in pack func. d=', d);
65-
return d.val;
52+
// console.log('in pack func. d=', d);
53+
return d.componentData.actualDuration;
6654
})
67-
.sort((a, b) => b.val - a.val));
55+
.sort((a, b) => {
56+
// console.log('in sort func. a&b=', a, b);
57+
return b.value - a.value;
58+
}));
6859

6960
console.log('packFunc', packFunc);
7061

7162
useEffect(() => {
63+
console.log('PerfView -> snapshots', snapshots);
64+
console.log('Current viewIndex: ', viewIndex);
65+
for (let i = 0; i < snapshots.length; i++) {
66+
console.log(`SNAPSHOT[${i}] App actualDuration:`, snapshots[i].children[0].componentData.actualDuration);
67+
}
68+
69+
// empty old tree
70+
while (svgRef.current.hasChildNodes()) {
71+
svgRef.current.removeChild(svgRef.current.lastChild);
72+
}
73+
74+
if (viewIndex < 0) {
75+
setChartData(snapshots[snapshots.length - 1]);
76+
console.log(`Using snapshots[${snapshots.length - 1}]`);
77+
} else {
78+
setChartData(snapshots[viewIndex]);
79+
console.log(`Using snapshots[${viewIndex}]`);
80+
}
81+
82+
console.log('PerfView -> chartData', chartData);
83+
84+
// generate tree with our data
7285
const packedRoot = packFunc(chartData);
73-
console.log('** PerfView -> packedRoot', packedRoot);
86+
// console.log('PerfView -> packedRoot', packedRoot);
87+
88+
// initial focus points at root of tree
7489
let focus = packedRoot;
7590
let view;
7691

92+
// set up viewBox dimensions and onClick for parent svg
7793
const svg = d3.select(svgRef.current)
94+
.attr('viewBox', `-${width / 2} -${height / 2} ${width} ${height}`)
7895
.on('click', () => zoom(packedRoot));
7996

97+
// connect circles below root to data
8098
const node = svg.append('g')
8199
.selectAll('circle')
82100
.data(packedRoot.descendants().slice(1))
83-
84-
.enter()
85-
.append('circle')
101+
.enter().append('circle')
86102
.attr('fill', d => (d.children ? color(d.depth) : 'white'))
87103
.attr('pointer-events', d => (!d.children ? 'none' : null))
88-
.on('mouseover', function () { d3.select(this).attr('stroke', '#000'); })
89-
.on('mouseout', function () { d3.select(this).attr('stroke', null); })
104+
.on('mouseover', () => d3.select(this).attr('stroke', '#000'))
105+
.on('mouseout', () => d3.select(this).attr('stroke', null))
90106
.on('click', d => focus !== d && (zoom(d), d3.event.stopPropagation()));
91107

92-
console.log('PerfView -> node', node);
108+
// console.log('PerfView -> node', node);
109+
// console.log('packedRoot.descendants()', packedRoot.descendants());
93110

111+
// generate text labels
94112
const label = svg.append('g')
95-
.style('font', '11px sans-serif')
96-
.attr('pointer-events', 'none')
97-
.attr('text-anchor', 'middle')
113+
.attr('class', 'perf-chart-labels')
98114
.selectAll('text')
99115
.data(packedRoot.descendants())
100-
.enter()
101-
.append('text')
116+
.enter().append('text')
102117
.style('fill-opacity', d => (d.parent === packedRoot ? 1 : 0))
103118
.style('display', d => (d.parent === packedRoot ? 'inline' : 'none'))
104-
.text(d => `${d.data.name}: ${Number.parseFloat(d.data.val).toFixed(2)}ms`);
119+
.text(d => {
120+
console.log('generating text label for d: ', d);
121+
return `${d.data.name}: ${Number.parseFloat(d.data.componentData.actualDuration).toFixed(2)}ms`;
122+
});
123+
124+
label.exit().remove();
125+
node.exit().remove();
105126

127+
// console.log('PerfView -> label', label);
128+
129+
// jump to default zoom state
106130
zoomTo([packedRoot.x, packedRoot.y, packedRoot.r * 2]);
107131

108132
function zoomTo(v) {
109133
const k = width / v[2];
110134
view = v;
111-
112135
label.attr('transform', d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
113136
node.attr('transform', d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
114137
node.attr('r', d => d.r * k);
115138
}
116139

117140
function zoom(d) {
118141
const focus0 = focus;
119-
120142
focus = d;
121143

122144
const transition = svg.transition()
@@ -127,16 +149,15 @@ const PerfView = ({
127149
});
128150

129151
label
130-
.filter(function (d) { return d.parent === focus || this.style.display === 'inline'; })
131-
.transition(transition)
132-
.style('fill-opacity', d => (d.parent === focus ? 1 : 0))
133-
.on('start', function (d) { if (d.parent === focus) this.style.display = 'inline'; })
134-
.on('end', function (d) { if (d.parent !== focus) this.style.display = 'none'; });
152+
.filter(function (d) { return d.parent === focus || this.style.display === 'inline'; })
153+
.transition(transition)
154+
.style('fill-opacity', d => (d.parent === focus ? 1 : 0))
155+
.on('start', function (d) { if (d.parent === focus) this.style.display = 'inline'; })
156+
.on('end', function (d) { if (d.parent !== focus) this.style.display = 'none'; });
135157
}
136-
}, [chartData]);
158+
}, [snapshots.length, height, width, viewIndex]);
137159

138-
return <svg viewBox="-250 -250 500 500" className="perfContainer" ref={svgRef} />;
160+
return <svg className="perfContainer" ref={svgRef} />;
139161
};
140162

141-
142163
export default PerfView;

‎src/app/components/StateRoute.jsx

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,8 @@ const StateRoute = ({
1414
snapshot,
1515
hierarchy,
1616
snapshots,
17+
viewIndex,
1718
}) => {
18-
const windowRef = useRef(null);
19-
const winWidth = null;
20-
const winHeight = null;
21-
22-
useEffect(() => {
23-
if (windowRef.current) {
24-
winWidth = windowRef.current.offsetHeight;
25-
winHeight = windowRef.current.offsetWidth;
26-
console.log('** SETTING WINDOW SIZES: ', winWidth, winHeight);
27-
}
28-
}, [windowRef]);
29-
3019
// 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
3120
const renderChart = () => {
3221
if (hierarchy) {
@@ -45,7 +34,7 @@ const StateRoute = ({
4534

4635
const renderPerfView = () => {
4736
if (hierarchy) {
48-
return <PerfView width={600} height={600} snapshots={snapshots} />; // ref={windowRef}
37+
return <PerfView viewIndex={viewIndex} snapshots={snapshots} />; // ref={windowRef}
4938
}
5039
return <div className="noState">{NO_STATE_MSG}</div>;
5140
};

‎src/app/containers/MainContainer.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ function MainContainer() {
8686
const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];
8787
// gabi :: cleannign hierarchy and snapshotView from stateless data
8888
const statelessCleanning = obj => {
89-
console.log('statelessCleanning = obj =>', obj);
89+
// console.log('statelessCleanning = obj =>', obj);
9090
const newObj = { ...obj };
9191
if (newObj.name === 'nameless') {
9292
delete newObj.name;
@@ -106,13 +106,13 @@ function MainContainer() {
106106
obj.children.forEach(element => {
107107
if (element.state !== 'stateless' || element.children.length > 0) {
108108
const clean = statelessCleanning(element);
109-
console.log('clean', clean)
109+
// console.log('clean', clean)
110110
newObj.children.push(clean);
111111
}
112112
});
113113
}
114114
}
115-
console.log('statelessCleanning = newObj =>', newObj);
115+
// console.log('statelessCleanning = newObj =>', newObj);
116116
return newObj;
117117
};
118118
const snapshotDisplay = statelessCleanning(snapshotView);
@@ -122,7 +122,7 @@ function MainContainer() {
122122
<HeadContainer />
123123
<div className="body-container">
124124
<ActionContainer />
125-
{snapshots.length ? <StateContainer snapshot={snapshotDisplay} hierarchy={hierarchyDisplay} snapshots={snapshots} /> : null}
125+
{snapshots.length ? <StateContainer viewIndex={viewIndex} snapshot={snapshotDisplay} hierarchy={hierarchyDisplay} snapshots={snapshots} /> : null}
126126
<TravelContainer snapshotsLength={snapshots.length} />
127127
<ButtonsContainer />
128128
</div>

‎src/app/containers/StateContainer.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import DiffRoute from '../components/DiffRoute';
1313
const StateContainer = ({
1414
snapshot,
1515
hierarchy,
16-
snapshots
16+
snapshots,
17+
viewIndex,
1718
}) => {
1819
const [Text, setText] = useState('State');
1920
return (
@@ -51,7 +52,7 @@ const StateContainer = ({
5152
path="/"
5253
render={() => {
5354
setText('State');
54-
return <StateRoute snapshot={snapshot} hierarchy={hierarchy} snapshots={snapshots}/>;
55+
return <StateRoute viewIndex={viewIndex} snapshot={snapshot} hierarchy={hierarchy} snapshots={snapshots}/>;
5556
}}
5657
/>
5758
</Switch>

‎src/app/styles/components/d3graph.css

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,15 @@ div.tooltip {
9797
display: block;
9898
margin: 0 -14px;
9999
background-color: hsl(152,80%,80%);
100-
border: 2px solid red;
100+
/* border: 2px solid red; */
101101
}
102102

103103
.d3divContainer {
104-
border: 1px solid blue;
104+
/* border: 1px solid blue; */
105105
}
106+
107+
.perf-chart-labels {
108+
font: 11px sans-serif;
109+
pointer-events: none;
110+
text-anchor: middle;
111+
};

0 commit comments

Comments
 (0)