Skip to content

Commit c55e5a1

Browse files
kevinfeykevinfey
committed
working with hien
1 parent cd46d27 commit c55e5a1

File tree

3 files changed

+173
-81
lines changed

3 files changed

+173
-81
lines changed

‎src/app/components/PerfView.tsx

Lines changed: 137 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -23,27 +23,45 @@ import * as d3 from 'd3';
2323
// import { schemeSet1 as colorScheme } from 'd3';
2424

2525
interface PerfViewProps {
26-
snapshots:any[];
27-
viewIndex:number;
26+
snapshots: any[];
27+
viewIndex: number;
2828
width: number;
2929
height: number;
3030
setNoRenderData: any;
3131
}
3232

33-
const PerfView = (props:PerfViewProps) => {
34-
const { snapshots, viewIndex, width, height, setNoRenderData } = props;
33+
const PerfView = (props: PerfViewProps) => {
34+
const { viewIndex, width, height, setNoRenderData } = props;
35+
let { snapshots } = props;
3536
const adjustedSize = Math.min(width, height);
3637
const svgRef = useRef(null);
3738

39+
//NEEDS REWRITE FOR RECOIL
40+
// snapshots.forEach((snapshot) => snapshot.children[0].children.shift());
41+
// console.log('SNAPSHOTS -------------------------->', snapshots);
3842
// Figure out which snapshot index to use
3943
let indexToDisplay: number | null = null;
4044
if (viewIndex < 0) indexToDisplay = snapshots.length - 1;
4145
else indexToDisplay = viewIndex;
4246

47+
console.log('SNAPSHOTS IN PERF VIEW', snapshots);
48+
console.log('VIEW INDEX', indexToDisplay);
49+
4350
// Set up color scaling function
44-
const colorScale = d3.scaleOrdinal()
51+
const colorScale = d3
52+
.scaleOrdinal()
4553
.domain([0, 8])
46-
.range(['#4a91c7', '#5b9bce', '#6ba6d5', '#7bb0dc', '#8abbe3', '#99c6ea', '#a8d0f1', '#b7dbf8', '#c6e6ff']);
54+
.range([
55+
'#4a91c7',
56+
'#5b9bce',
57+
'#6ba6d5',
58+
'#7bb0dc',
59+
'#8abbe3',
60+
'#99c6ea',
61+
'#a8d0f1',
62+
'#b7dbf8',
63+
'#c6e6ff',
64+
]);
4765

4866
// Alternate color scaling function
4967
// const colorScale = d3.scaleLinear()
@@ -52,17 +70,21 @@ const PerfView = (props:PerfViewProps) => {
5270
// .interpolate(d3.interpolateHcl);
5371

5472
// Set up circle-packing layout function
55-
const packFunc = useCallback((data:object) => {
56-
return d3.pack()
57-
.size([adjustedSize, adjustedSize])
58-
.padding(3)(d3.hierarchy(data)
59-
.sum((d:{componentData?:{actualDuration?:number}}) => {
60-
return d.componentData.actualDuration || 0;
61-
})
62-
.sort((a:{value:number}, b:{value:number}) => {
63-
return b.value - a.value;
64-
}));
65-
}, [adjustedSize]);
73+
const packFunc = useCallback(
74+
(data: object) => {
75+
return d3.pack().size([adjustedSize, adjustedSize]).padding(3)(
76+
d3
77+
.hierarchy(data)
78+
.sum((d: { componentData?: { actualDuration?: number } }) => {
79+
return d.componentData.actualDuration || 0;
80+
})
81+
.sort((a: { value: number }, b: { value: number }) => {
82+
return b.value - a.value;
83+
})
84+
);
85+
},
86+
[adjustedSize]
87+
);
6688

6789
function handleNoRenderData(isNoRenderData) {
6890
setNoRenderData(isNoRenderData);
@@ -88,87 +110,142 @@ const PerfView = (props:PerfViewProps) => {
88110
let view;
89111

90112
// Set up viewBox dimensions and onClick for parent svg
91-
const svg = d3.select(svgRef.current)
92-
.attr('viewBox', `-${adjustedSize / 2} -${adjustedSize / 2} ${width} ${height}`)
113+
const svg = d3
114+
.select(svgRef.current)
115+
.attr(
116+
'viewBox',
117+
`-${adjustedSize / 2} -${adjustedSize / 2} ${width} ${height}`
118+
)
93119
.on('click', () => zoomToNode(packedRoot));
94120

95121
// Connect circles below root to data
96-
const node = svg.append('g')
122+
const node = svg
123+
.append('g')
97124
.selectAll('circle')
98125
.data(packedRoot.descendants().slice(1))
99-
.enter().append('circle')
100-
.attr('fill', (d:{children:[]; depth:number}) => (d.children ? colorScale(d.depth) : 'white'))
101-
.attr('pointer-events', (d?:{children:[]}) => (!d.children ? 'none' : null))
102-
.on('mouseover', function () { d3.select(this).attr('stroke', '#000'); })
103-
.on('mouseout', function () { d3.select(this).attr('stroke', null); })
104-
.on('click', (d:{ x: number; y: number; r: number; }) => curFocus !== d && (zoomToNode(d), d3.event.stopPropagation()));
126+
.enter()
127+
.append('circle')
128+
.attr('fill', (d: { children: []; depth: number }) =>
129+
d.children ? colorScale(d.depth) : 'white'
130+
)
131+
.attr('pointer-events', (d?: { children: [] }) =>
132+
!d.children ? 'none' : null
133+
)
134+
.on('mouseover', function () {
135+
d3.select(this).attr('stroke', '#000');
136+
})
137+
.on('mouseout', function () {
138+
d3.select(this).attr('stroke', null);
139+
})
140+
.on(
141+
'click',
142+
(d: { x: number; y: number; r: number }) =>
143+
curFocus !== d && (zoomToNode(d), d3.event.stopPropagation())
144+
);
105145

106146
// Generate text labels. Set (only) root to visible initially
107-
const label = svg.append('g')
108-
.attr('class', 'perf-chart-labels')
147+
const label = svg
148+
.append('g')
149+
.attr('class', 'perf-chart-labels')
109150
.selectAll('text')
110151
.data(packedRoot.descendants())
111-
.enter().append('text')
112-
.style('fill-opacity', (d:{parent:object}) => (d.parent === packedRoot ? 1 : 0))
113-
.style('display', (d:{parent?:object}) => (d.parent === packedRoot ? 'inline' : 'none'))
114-
.text((d:{data:{name:string, componentData?:{actualDuration:any}}}) => {
152+
.enter()
153+
.append('text')
154+
.style('fill-opacity', (d: { parent: object }) =>
155+
d.parent === packedRoot ? 1 : 0
156+
)
157+
.style('display', (d: { parent?: object }) =>
158+
d.parent === packedRoot ? 'inline' : 'none'
159+
)
160+
.text(
161+
(d: {
162+
data: { name: string; componentData?: { actualDuration: any } };
163+
}) => {
115164
if (!d.data.componentData.actualDuration) handleNoRenderData(true);
116165
else handleNoRenderData(false);
117-
return `${d.data.name}: ${Number.parseFloat(d.data.componentData.actualDuration || 0).toFixed(2)}ms`;
118-
});
166+
return `${d.data.name}: ${Number.parseFloat(
167+
d.data.componentData.actualDuration || 0
168+
).toFixed(2)}ms`;
169+
}
170+
);
119171

120172
// Remove any unused nodes
121173
label.exit().remove();
122174
node.exit().remove();
123175

124176
// Zoom size of nodes and labels to focus view on root node
125-
if ((!Number.isNaN(packedRoot.x))
126-
&& (!Number.isNaN(packedRoot.y))
127-
&& (!Number.isNaN(packedRoot.r))) {
177+
if (
178+
!Number.isNaN(packedRoot.x) &&
179+
!Number.isNaN(packedRoot.y) &&
180+
!Number.isNaN(packedRoot.r)
181+
) {
128182
zoomViewArea([packedRoot.x, packedRoot.y, packedRoot.r * 2]);
129183
}
130184

131185
// Zoom/relocated nodes and labels based on dimensions given [x, y, r]
132186
function zoomViewArea(newXYR) {
133187
const k = width / newXYR[2];
134188
view = newXYR;
135-
label.attr('transform', d => `translate(${(d.x - newXYR[0]) * k},${(d.y - newXYR[1]) * k})`);
136-
node.attr('transform', d => `translate(${(d.x - newXYR[0]) * k},${(d.y - newXYR[1]) * k})`);
137-
node.attr('r', d => d.r * k);
189+
label.attr(
190+
'transform',
191+
(d) => `translate(${(d.x - newXYR[0]) * k},${(d.y - newXYR[1]) * k})`
192+
);
193+
node.attr(
194+
'transform',
195+
(d) => `translate(${(d.x - newXYR[0]) * k},${(d.y - newXYR[1]) * k})`
196+
);
197+
node.attr('r', (d) => d.r * k);
138198
}
139199

140200
// Transition visibility of labels
141-
function zoomToNode(newFocus:{x:number; y:number; r:number}) {
142-
const transition = svg.transition()
143-
.duration(d3.event.altKey ? 7500 : 750)
144-
.tween('zoom', (d:object) => {
145-
const i = d3.interpolateZoom(view, [newFocus.x, newFocus.y, newFocus.r * 2]);
146-
return t => zoomViewArea(i(t));
147-
});
201+
function zoomToNode(newFocus: { x: number; y: number; r: number }) {
202+
const transition = svg
203+
.transition()
204+
.duration(d3.event.altKey ? 7500 : 750)
205+
.tween('zoom', (d: object) => {
206+
const i = d3.interpolateZoom(view, [
207+
newFocus.x,
208+
newFocus.y,
209+
newFocus.r * 2,
210+
]);
211+
return (t) => zoomViewArea(i(t));
212+
});
148213

149214
// Grab all nodes that were previously displayed, or who's parent is the new target newFocus
150215
// Transition their labels to visible or not
151-
label.filter(function (d:{parent:object}) {
152-
return d.parent === newFocus || this.style.display === 'inline';
153-
})
154-
.transition(transition)
155-
.style('fill-opacity', (d:{parent:object}) => (d.parent === newFocus ? 1 : 0))
156-
.on('start', function (d:{parent:object}) {
157-
if (d.parent === newFocus) this.style.display = 'inline';
158-
})
159-
.on('end', function (d:{parent:object}) {
160-
if (d.parent !== newFocus) this.style.display = 'none';
161-
});
216+
label
217+
.filter(function (d: { parent: object }) {
218+
return d.parent === newFocus || this.style.display === 'inline';
219+
})
220+
.transition(transition)
221+
.style('fill-opacity', (d: { parent: object }) =>
222+
d.parent === newFocus ? 1 : 0
223+
)
224+
.on('start', function (d: { parent: object }) {
225+
if (d.parent === newFocus) this.style.display = 'inline';
226+
})
227+
.on('end', function (d: { parent: object }) {
228+
if (d.parent !== newFocus) this.style.display = 'none';
229+
});
162230

163231
curFocus = newFocus;
164232
}
165-
}, [colorScale, packFunc, width, height, indexToDisplay, snapshots, adjustedSize, handleNoRenderData]);
233+
}, [
234+
colorScale,
235+
packFunc,
236+
width,
237+
height,
238+
indexToDisplay,
239+
snapshots,
240+
adjustedSize,
241+
handleNoRenderData,
242+
]);
166243

167244
return (
168245
<div className="perf-d3-container">
169246
<svg className="perf-d3-svg" ref={svgRef} />
170247
</div>
171-
);
248+
);
172249
};
173250

174251
export default PerfView;

‎src/app/components/StateRoute.tsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,12 @@ const StateRoute = (props: StateRouteProps) => {
6767
}
6868
return <div className="noState">{NO_STATE_MSG}</div>;
6969
};
70-
70+
console.log('NORENDER DATA', noRenderData);
7171
let perfChart;
72-
if (!noRenderData) {
72+
if (true) {
73+
console.log('ViewINDex', viewIndex);
74+
console.log('snapshots', snapshots);
75+
console.log('setnorenderdata', setNoRenderData);
7376
perfChart = (
7477
<PerfView
7578
viewIndex={viewIndex}
@@ -79,14 +82,15 @@ const StateRoute = (props: StateRouteProps) => {
7982
height={1000}
8083
/>
8184
);
82-
} else {
83-
perfChart = (
84-
<div className="no-data-message">
85-
Application must be running in development mode in order to view
86-
performance data
87-
</div>
88-
);
8985
}
86+
// else {
87+
// perfChart = (
88+
// <div className="no-data-message">
89+
// Application must be running in development mode in order to view
90+
// performance data
91+
// </div>
92+
// );
93+
// }
9094

9195
const renderPerfView = () => <ErrorHandler>{perfChart}</ErrorHandler>;
9296

0 commit comments

Comments
 (0)