Skip to content

Commit 29d39b7

Browse files
bmicharebmichare
committed
compare actions dropdown populated, able to render component details by removing broken code, general cleanup in mainReducer
1 parent 41c3ea0 commit 29d39b7

File tree

4 files changed

+99
-71
lines changed

4 files changed

+99
-71
lines changed

‎src/app/components/BarGraphComparison.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -237,11 +237,11 @@ const BarGraphComparison = props => {
237237
}
238238
const seriesList = comparison.map(elem => elem.data.barStack);
239239
const actionsList = seriesList.flat();
240-
const testList = actionsList.map(elem => elem.name);
240+
const testList = actionsList.map(elem => elem.name);
241241

242242
const finalList = [];
243243
for (let i = 0; i < testList.length; i++) {
244-
if (testList[i] !== "") finalList.push(testList[i]);
244+
if (testList[i] !== "" && !finalList.includes(testList[i])) finalList.push(testList[i]);
245245
}
246246
console.log('Final List', finalList)
247247
// )
@@ -295,15 +295,15 @@ const BarGraphComparison = props => {
295295
onClose={picHandleClose}
296296
onOpen={picHandleOpen}
297297
value={snapshots} //snapshots
298-
onChange={picHandleChange}
298+
// onChange={picHandleChange}
299299
>
300300
{!comparison[snapshots] ? (
301301
<MenuItem>No snapshots available</MenuItem>
302302
) : (
303-
// finalList.map((elem, index) => (
304-
// <MenuItem value={index}>{elem}</MenuItem>
305-
<MenuItem value="test">Testing</MenuItem>
306-
)
303+
finalList.map((elem, index) => (
304+
<MenuItem value={index}>{elem}</MenuItem>
305+
// <MenuItem value="test">{}</MenuItem>
306+
)))
307307
}
308308
</Select>
309309
</FormControl>

‎src/app/components/PerformanceVisx.tsx

Lines changed: 84 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* eslint-disable guard-for-in */
2+
/* eslint-disable no-restricted-syntax */
13
// @ts-nocheck
24
import React, { useState } from 'react';
35
import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -16,7 +18,10 @@ import BarGraph from './BarGraph';
1618
import BarGraphComparison from './BarGraphComparison';
1719
import { useStoreContext } from '../store';
1820
// import snapshots from './snapshots';
19-
import { Component } from 'react';
21+
import snapshots from './snapshots';
22+
23+
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'];
24+
2025
/* NOTES
2126
Issue - Not fully compatible with recoil apps. Reference the recoil-todo-test.
2227
Barstacks display inconsistently...however, almost always displays upon initial test app load or
@@ -26,56 +31,99 @@ to note - all snapshots do render (check HTML doc) within the chrome extension b
2631
not display because height is not consistently passed to each bar. This side effect is only
2732
seen in recoil apps...
2833
*/
34+
2935
// typescript for PROPS from StateRoute.tsx
3036
interface BarStackProps {
3137
width: number;
3238
height: number;
3339
snapshots: [];
3440
hierarchy: any;
3541
}
36-
// function getComponentsArr(componentName, snapshots, node) {
37-
// //Input: Name of component and all snapshots
38-
// //Output: One array of each individual snapshot
39-
// //NOTE:
40-
// //Every snapshot is an object with a children array with a snapshot that also has a children array etc
41-
// //Children arrays more than one signify siblings
42-
// }
43-
// // snapshots.map(rootNode => {
44-
// // // rootNode.name
45-
// // let currNode = rootNode
46-
// // while (currNode) {
47-
// // if (currNode.name === componentName) {
48-
// // return currNode.componentData.props
49-
// // } else {
50-
// // currNode = currNode.children[0]
51-
// // currNode = currNode.children[1]
52-
// // }
53-
// // }
54-
// // })
42+
43+
const makePropsPretty = data => {
44+
const propsFormat = [];
45+
const nestedObj = [];
46+
if (typeof data !== 'object') {
47+
return <p>{data}</p>;
48+
}
49+
for (const key in data) {
50+
if (data[key] !== 'reactFiber' && typeof data[key] !== 'object' && exclude.includes(key) !== true) {
51+
propsFormat.push(<p className="stateprops">
52+
{`${key}: ${data[key]}`}
53+
</p>);
54+
} else if (data[key] !== 'reactFiber' && typeof data[key] === 'object' && exclude.includes(key) !== true) {
55+
const result = makePropsPretty(data[key]);
56+
nestedObj.push(result);
57+
}
58+
}
59+
if (nestedObj) {
60+
propsFormat.push(nestedObj);
61+
}
62+
return propsFormat;
63+
};
64+
5565
const collectNodes = (snaps, componentName) => {
5666
const componentsResult = [];
57-
// console.log("This is the snapshots", snaps);
58-
// componentsResult.splice(0, componentsResult.length); { /* We used the .splice method here to ensure that nodeList did not accumulate with page refreshes */ }
59-
// componentsResult.push(snaps);
67+
const renderResult = [];
68+
let trackChanges = 0;
69+
let newChange = true;
6070
for (let x = 0; x < snaps.length; x++) {
61-
const snapshotList = []
71+
const snapshotList = [];
6272
snapshotList.push(snaps[x]);
6373
for (let i = 0; i < snapshotList.length; i++) {
6474
const cur = snapshotList[i];
6575
if (cur.name === componentName) {
66-
componentsResult.push(cur.componentData.props);
76+
const renderTime = Number(
77+
Number.parseFloat(cur.componentData.actualDuration).toPrecision(5),
78+
);
79+
if (renderTime === 0) {
80+
break;
81+
} else {
82+
renderResult.push(renderTime);
83+
}
84+
// compare the last pushed component Data from the array to the current one to see if there are differences
85+
if (x !== 0 && componentsResult.length !== 0) {
86+
// needs to be stringified because values are hard to determine if true or false if in they're seen as objects
87+
if (JSON.stringify(Object.values(componentsResult[newChange ? componentsResult.length - 1 : trackChanges])[0]) !== JSON.stringify(cur.componentData.props)) {
88+
newChange = true;
89+
// const props = { [`snapshot${x}`]: { rendertime: formatRenderTime(cur.componentData.actualDuration), ...cur.componentData.props } };
90+
const props = { [`snapshot${x}`]: { ...cur.componentData.props } };
91+
componentsResult.push(props);
92+
} else {
93+
newChange = false;
94+
trackChanges = componentsResult.length - 1;
95+
const props = { [`snapshot${x}`]: { state: 'Same state as prior snapshot' } };
96+
componentsResult.push(props);
97+
}
98+
} else {
99+
// const props = { [`snapshot${x}`]: { ...cur.componentData.props}};
100+
// props[`snapshot${x}`].rendertime = formatRenderTime(cur.componentData.actualDuration);
101+
const props = { [`snapshot${x}`]: { ...cur.componentData.props } };
102+
componentsResult.push(props);
103+
}
67104
break;
68105
}
69106
if (cur.children && cur.children.length > 0) {
70-
for (let child of cur.children) {
107+
for (const child of cur.children) {
71108
snapshotList.push(child);
72109
}
73110
}
74111
}
75112
}
76-
//console.log('componentsResult looks like: ', componentsResult);
77-
return componentsResult;
78-
}
113+
114+
const finalResults = componentsResult.map((e, index) => {
115+
const name = Object.keys(e)[0];
116+
e[name].rendertime = renderResult[index];
117+
return e;
118+
});
119+
// for (let i = 0; i < finalResults.length; i++) {
120+
// for (const componentSnapshot in finalResults[i]) {
121+
// finalResults[i][componentSnapshot] = makePropsPretty(finalResults[i][componentSnapshot]).reverse();
122+
// }
123+
// }
124+
return finalResults;
125+
};
126+
79127
/* DATA HANDLING HELPER FUNCTIONS */
80128
const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
81129
if (!snapshot.children[0]) return;
@@ -100,24 +148,23 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
100148
renderFrequency: 0,
101149
totalRenderTime: 0,
102150
rtid: '',
103-
props: {},
151+
information: {},
104152
};
105153
if (child.state !== 'stateless') data.componentData[componentName].stateType = 'stateful';
106154
}
107155
// increment render frequencies
108156
if (renderTime > 0) {
109-
// console.log('what is the child', child);
110-
// console.log('por que?', data.componentData[componentName]);
111157
data.componentData[componentName].renderFrequency++;
112-
} else {
113-
// console.log('what is the child', child);
114-
// console.log('we dont increment here', data.componentData[componentName], 'and the child', child);
115158
}
159+
// else {
160+
161+
// }
162+
116163
// add to total render time
117164
data.componentData[componentName].totalRenderTime += renderTime;
118165
// Get rtid for the hovering feature
119166
data.componentData[componentName].rtid = child.rtid;
120-
data.componentData[componentName].props = collectNodes(snapshots, child.name);
167+
data.componentData[componentName].information = collectNodes(snapshots, child.name);
121168
traverse(snapshot.children[idx], data, snapshots, currTotalRender);
122169
});
123170
// reassigns total render time to max render time
@@ -127,13 +174,10 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
127174

128175
// Retrieve snapshot series data from Chrome's local storage.
129176
const allStorage = () => {
130-
// const values = [];
131177
// const keys = Object.keys(localStorage);
132178
let values = localStorage.getItem('project')
133-
// values === null ? values = [] : values = JSON.parse(values) ;
134179
values = values === null ? [] : JSON.parse(values);
135180
// let i = keys.length;
136-
// console.log('allstorage keys', keys);
137181
// while (i--) {
138182
// const series = localStorage.getItem(keys[i]);
139183
// values.push(JSON.parse(series));
@@ -160,7 +204,6 @@ const getPerfMetrics = (snapshots, snapshotsIds): {} => {
160204
componentData: {},
161205
maxTotalRender: 0,
162206
};
163-
console.log('show me all of the snapshots', snapshots);
164207
snapshots.forEach((snapshot, i) => {
165208
perfData.barStack.push({ snapshotId: snapshotsIds[i] });
166209
traverse(snapshot, perfData, snapshots);
@@ -201,10 +244,8 @@ const PerformanceVisx = (props: BarStackProps) => {
201244
};
202245

203246
const renderComponentDetailsView = () => {
204-
console.log('show me snapshots', snapshots)
205-
console.log('what is heirarchy', hierarchy);
206-
console.log('this is the info for rendering frequency', data.componentData);
207247
if (hierarchy) {
248+
console.log(data.componentData)
208249
return <RenderingFrequency data={data.componentData} />;
209250
}
210251
return <div className="noState">{NO_STATE_MSG}</div>;

‎src/app/components/RenderingFrequency.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const ComponentCard = props => {
4747

4848
const dataComponentArray = [];
4949
for (let i = 0; i < information.length; i++) {
50-
dataComponentArray.push(<DataComponent header={Object.keys(information[i])} paragraphs={Object.values(information[i])} />);
50+
dataComponentArray.push(<DataComponent key={`DataComponent${i}`} header={Object.keys(information[i])} paragraphs={Object.values(information[i])} />);
5151
}
5252

5353
return (
@@ -102,8 +102,7 @@ const DataComponent = props => {
102102
{header}
103103
</h4>
104104
<p>
105-
106-
{paragraphs}
105+
{`renderTime: ${paragraphs[0].rendertime}`}
107106
</p>
108107
</div>
109108
);

‎src/app/reducers/mainReducer.js

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -34,40 +34,28 @@ export default (state, action) => produce(state, draft => {
3434
}
3535
}
3636
};
37+
3738
switch (action.type) {
38-
// Save case will store the series user wants to save to the chrome local storage
39+
// This saves the series user wants to save to chrome local storage
3940
case types.SAVE: {
40-
// console.log('reducer reached')
41-
console.log(tabs[currentTab].seriesSavedStatus)
4241
const { newSeries, newSeriesName } = action.payload;
43-
console.log('seriesName from reducer', newSeriesName)
44-
//Grab the seriesArray from localStorage if it exists (and it will be in stringified form if it exists)
45-
//If it exists, parse it
46-
//Grab newSeries from payload (already in JSON form) and push it to seriesArray
47-
//Stringify seriesArray
48-
//upload it to localstorage
4942
if (!tabs[currentTab].seriesSavedStatus) {
50-
console.log('false case reacHED')
5143
tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: 'inputBoxOpen' };
5244
break;
5345
}
46+
// Runs if series name input box is active.
47+
// Updates chrome local storage with the newly saved series. Console logging the seriesArray grabbed from local storage may be helpful.
5448
if (tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' || tabs[currentTab].seriesSavedStatus === 'noSeriesNameError') {
55-
console.log('main case reached')
5649
if (!newSeriesName) {
57-
console.log('failed name check:', newSeriesName)
5850
tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: 'noSeriesNameError' };
5951
break;
6052
}
61-
console.log('post seriesNameCheck')
6253
let seriesArray = localStorage.getItem('project');
63-
// seriesArray = seriesArray === null ? [] : JSON.parse(seriesArray);
64-
if (seriesArray === null) seriesArray = [];
65-
else seriesArray = JSON.parse(seriesArray);
54+
seriesArray = seriesArray === null ? [] : JSON.parse(seriesArray);
6655
newSeries.name = newSeriesName;
6756
seriesArray.push(newSeries);
68-
console.log('before setItem:', newSeries);
57+
console.log(seriesArray)
6958
localStorage.setItem('project', JSON.stringify(seriesArray));
70-
console.log('save reducer:', localStorage);
7159
tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: 'saved' };
7260
break;
7361
}

0 commit comments

Comments
 (0)