Skip to content

Commit 32f94cf

Browse files
andytsou19andytsou19
committed
saving changes for the performance tab
Co-authored-by: Viet Nguyen <[email protected] >
1 parent 001b1a3 commit 32f94cf

File tree

3 files changed

+139
-37
lines changed

3 files changed

+139
-37
lines changed

‎src/app/components/PerformanceVisx.tsx

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import BarGraphComparison from './BarGraphComparison';
1818
import { useStoreContext } from '../store';
1919
// import snapshots from './snapshots';
2020
import snapshots from './snapshots';
21+
import { render } from 'react-dom';
2122

2223
const exclude = ['childExpirationTime', 'staticContext', '_debugSource', 'actualDuration', 'actualStartTime', 'treeBaseDuration', '_debugID', '_debugIsCurrentlyTiming', 'selfBaseDuration', 'expirationTime', 'effectTag', 'alternate', '_owner', '_store', 'get key', 'ref', '_self', '_source', 'firstBaseUpdate', 'updateQueue', 'lastBaseUpdate', 'shared', 'responders', 'pending', 'lanes', 'childLanes', 'effects', 'memoizedState', 'pendingProps', 'lastEffect', 'firstEffect', 'tag', 'baseState', 'baseQueue', 'dependencies', 'Consumer', 'context', '_currentRenderer', '_currentRenderer2', 'mode', 'flags', 'nextEffect', 'sibling', 'create', 'deps', 'next', 'destroy', 'parentSub', 'child', 'key', 'return', 'children', '$$typeof', '_threadCount', '_calculateChangedBits', '_currentValue', '_currentValue2', 'Provider', '_context', 'stateNode', 'elementType', 'type'];
2324

@@ -39,10 +40,6 @@ interface BarStackProps {
3940
hierarchy: any;
4041
}
4142

42-
const formatRenderTime = time => {
43-
time = time.toFixed(3);
44-
return `${time} ms `;
45-
};
4643
// function getComponentsArr(componentName, snapshots, node) {
4744
// //Input: Name of component and all snapshots
4845
// //Output: One array of each individual snapshot
@@ -69,7 +66,7 @@ const makePropsPretty = data => {
6966
const nestedObj = [];
7067
// console.log('show me the data we are getting', data);
7168
if (typeof data !== 'object') {
72-
return data;
69+
return <p>{data}</p>;
7370
}
7471
for (const key in data) {
7572
if (data[key] !== 'reactFiber' && typeof data[key] !== 'object' && exclude.includes(key) !== true) {
@@ -98,23 +95,31 @@ const collectNodes = (snaps, componentName) => {
9895
for (let i = 0; i < snapshotList.length; i++) {
9996
const cur = snapshotList[i];
10097
if (cur.name === componentName) {
98+
const renderTime = Number(
99+
Number.parseFloat(cur.componentData.actualDuration).toPrecision(5),
100+
);
101+
if (renderTime === 0) {
102+
break;
103+
}
104+
console.log('show me the render time', renderTime);
101105
// compare the last pushed component Data from the array to the current one to see if there are differences
102106
if (x !== 0 && componentsResult.length !== 0) {
103107
// needs to be stringified because values are hard to determine if true or false if in they're seen as objects
104108
if (JSON.stringify(Object.values(componentsResult[newChange ? componentsResult.length - 1 : trackChanges])[0]) !== JSON.stringify(cur.componentData.props)) {
105109
newChange = true;
106-
const props = { [`snapshot${x}`]: { ...cur.componentData.props, rendertime: formatRenderTime(cur.componentData.actualDuration) } };
107-
//props[`snapshot${x}`].rendertime = formatRenderTime(cur.componentData.actualDuration);
110+
// const props = { [`snapshot${x}`]: { rendertime: formatRenderTime(cur.componentData.actualDuration), ...cur.componentData.props } };
111+
const props = { [`snapshot${x}`]: { ...cur.componentData.props } };
108112
componentsResult.push(props);
109113
} else {
110114
newChange = false;
111115
trackChanges = componentsResult.length - 1;
112-
const props = { [`snapshot${x}`]: 'Same state as prior snapshot', rendertime: formatRenderTime(cur.componentData.actualDuration) };
116+
const props = { [`snapshot${x}`]: 'Same state as prior snapshot' };
113117
componentsResult.push(props);
114118
}
115119
} else {
116-
const props = { [`snapshot${x}`]: { ...cur.componentData.props}};
117-
props[`snapshot${x}`].rendertime = formatRenderTime(cur.componentData.actualDuration);
120+
// const props = { [`snapshot${x}`]: { ...cur.componentData.props}};
121+
// props[`snapshot${x}`].rendertime = formatRenderTime(cur.componentData.actualDuration);
122+
const props = { [`snapshot${x}`]: { ...cur.componentData.props } };
118123
componentsResult.push(props);
119124
}
120125
break;
@@ -132,7 +137,7 @@ const collectNodes = (snaps, componentName) => {
132137
componentsResult[i][componentSnapshot] = makePropsPretty(componentsResult[i][componentSnapshot]);
133138
}
134139
}
135-
console.log('we should be seeing react components with information', componentsResult);
140+
// console.log('we should be seeing react components with information', componentsResult);
136141
return componentsResult;
137142
};
138143

@@ -179,6 +184,12 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
179184
// Get rtid for the hovering feature
180185
data.componentData[componentName].rtid = child.rtid;
181186
data.componentData[componentName].information = collectNodes(snapshots, child.name).flat(Infinity);
187+
if(renderTime !== 0) {
188+
// eslint-disable-next-line react/jsx-one-expression-per-line
189+
data.componentData[componentName].information.rendertime = <p>Render Time:{' '}{renderTime}{' '}</p>;
190+
}
191+
// (
192+
// );
182193
// console.log('what is the result', data.componentData[componentName].information);
183194
traverse(snapshot.children[idx], data, snapshots, currTotalRender);
184195
});

‎src/app/components/RenderingFrequency.tsx

Lines changed: 70 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
1-
import React from 'react';
1+
/* eslint-disable jsx-a11y/click-events-have-key-events */
2+
/* eslint-disable jsx-a11y/no-static-element-interactions */
3+
/* eslint-disable react/prop-types */
4+
import React, { useState } from 'react';
25
import { onHover, onHoverExit } from '../actions/actions';
36
import { useStoreContext } from '../store';
47

5-
const RenderingFrequency = (props) => {
8+
const RenderingFrequency = props => {
69
const perfData = props.data;
710
return (
811
<div>
9-
{Object.keys(perfData).map((componentName) => {
12+
{Object.keys(perfData).map(componentName => {
1013
const currentComponent = perfData[componentName];
1114
return (
1215
<ComponentCard
1316
componentName={componentName}
1417
stateType={currentComponent.stateType}
1518
averageRenderTime={(
16-
currentComponent.totalRenderTime /
17-
currentComponent.renderFrequency
19+
currentComponent.totalRenderTime
20+
/ currentComponent.renderFrequency
1821
).toFixed(3)}
1922
renderFrequency={currentComponent.renderFrequency}
2023
rtid={currentComponent.rtid}
@@ -26,7 +29,7 @@ const RenderingFrequency = (props) => {
2629
);
2730
};
2831

29-
const ComponentCard = (props) => {
32+
const ComponentCard = props => {
3033
const {
3134
componentName,
3235
stateType,
@@ -36,6 +39,7 @@ const ComponentCard = (props) => {
3639
information,
3740
} = props;
3841
const [{ tabs, currentTab }, dispatch] = useStoreContext();
42+
const [expand, setExpand] = useState(false);
3943

4044
// const onMouseMove = () => {
4145
// console.log(rtid);
@@ -45,28 +49,71 @@ const ComponentCard = (props) => {
4549
// console.log(rtid);
4650
// dispatch(onHoverExit(rtid));
4751
// };
48-
console.log('this is the information', information)
4952

50-
// render time for each component from each snapshot
51-
// differences in state change that happened prior;
53+
54+
// render time for each component from each snapshot
55+
// differences in state change that happened prior;
56+
const dataComponentArray = [];
57+
for (let i = 0; i < information.length; i++) {
58+
dataComponentArray.push(<DataComponent header={Object.keys(information[i])} paragraphs={Object.values(information[i])} />);
59+
}
5260

5361
return (
54-
<div
55-
// onMouseLeave={onMouseLeave}
56-
// onMouseMove={onMouseMove}
57-
className="StyledGridElement"
58-
>
59-
<div className="RenderLeft">
60-
<h3>{componentName} </h3>
61-
<h4>{stateType}</h4>
62-
<h4>average time: {averageRenderTime} ms</h4>
62+
<div className="borderStyling">
63+
<div
64+
className={expand ? 'ExpandStyledGridElement' : 'StyledGridElement'}
65+
>
66+
<div className="RenderLeft">
67+
<h3>
68+
{componentName}
69+
{' '}
70+
</h3>
71+
<h4>{stateType}</h4>
72+
<h4>
73+
average time:
74+
{' '}
75+
{averageRenderTime}
76+
{' '}
77+
ms
78+
</h4>
79+
</div>
80+
<div
81+
onClick={() => {
82+
if (expand === true) {
83+
setExpand(false);
84+
} else {
85+
setExpand(true);
86+
}
87+
}}
88+
className="RenderRight"
89+
>
90+
<p>{renderFrequency}</p>
91+
</div>
6392
</div>
64-
<div onClick={() => console.log('this is triggering')} className="RenderRight">
65-
<p>{renderFrequency}</p>
93+
<div className="DataComponent">
94+
{expand === true ? dataComponentArray : null}
6695
</div>
67-
{/* <div>
68-
<p>{information}</p>
69-
</div> */}
96+
97+
</div>
98+
);
99+
};
100+
101+
const DataComponent = props => {
102+
const {
103+
header,
104+
paragraphs,
105+
} = props;
106+
// const [{ tabs, currentTab }, dispatch] = useStoreContext();
107+
return (
108+
<div>
109+
<h4>
110+
{' '}
111+
{header}
112+
</h4>
113+
<p>
114+
{' '}
115+
{paragraphs}
116+
</p>
70117
</div>
71118
);
72119
};

‎src/app/styles/components/_renderingFrequency.scss

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
.borderStyling{
2+
border-radius: 5px;
3+
border: 1px solid rgba(184, 196, 194, 0.25);
4+
box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
5+
width: 40vh;
6+
}
7+
.DataComponent{
8+
display: flex;
9+
flex-direction: row;
10+
width: 40vh
11+
}
112
.StyledGridElement {
213
display: flex;
314
align-items: center;
@@ -8,9 +19,7 @@
819
height: 5vh;
920
margin: 20px 10px;
1021
font-family: 'Roboto', sans-serif;
11-
border-radius: 5px;
12-
border: 1px solid rgba(184, 196, 194, 0.25);
13-
box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
22+
1423

1524
h3 {
1625
color: $text-color;
@@ -36,6 +45,41 @@
3645
line-height: 18px;
3746
}
3847
}
48+
.ExpandStyledGridElement {
49+
display: flex;
50+
align-items: center;
51+
justify-content: space-between;
52+
background: #242529;
53+
padding: 20px;
54+
width: 80vh;
55+
margin: 20px 10px;
56+
font-family: 'Roboto', sans-serif;
57+
58+
59+
h3 {
60+
color: $text-color;
61+
margin-bottom: 5px;
62+
margin-top: 5px;
63+
text-transform: uppercase;
64+
font-size: 14px;
65+
font-weight: 500;
66+
}
67+
68+
h4 {
69+
color: $text-color;
70+
margin-bottom: 5px;
71+
margin-top: 5px;
72+
font-weight: 300;
73+
}
74+
75+
p {
76+
color: white;
77+
line-height: 20px;
78+
text-align: center;
79+
font-size: 18px;
80+
line-height: 18px;
81+
}
82+
}
3983
.RenderRight {
4084
border-radius: 5px;
4185
background: $blue-color-gradient;

0 commit comments

Comments
 (0)