Skip to content

Commit bb906f1

Browse files
committed
working on the performance tab
1 parent 39e2055 commit bb906f1

File tree

5 files changed

+85
-17
lines changed

5 files changed

+85
-17
lines changed

src/app/components/LinkControls.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { List } from '@material-ui/core';
22
import React from 'react';
3+
import snapshots from './snapshots';
34
// Font size of the Controls label and Dropdowns
45
const controlStyles = {
56
fontSize: '12px',
@@ -34,6 +35,7 @@ const nodeList = [];
3435

3536
const collectNodes = (node) => {
3637
// console.log("This is the root node", node);
38+
// console.log('this is nodelist', nodeList)
3739
nodeList.splice(0, nodeList.length); { /* We used the .splice method here to ensure that nodeList did not accumulate with page refreshes */ }
3840
nodeList.push(node);
3941
for (let i = 0; i < nodeList.length; i++) {
@@ -60,7 +62,7 @@ export default function LinkControls({
6062
setSelectedNode,
6163
snapShots,
6264
}: Props) {
63-
65+
// console.log('this is line 64', snapShots)
6466
collectNodes(snapShots);
6567

6668
return (

src/app/components/PerformanceVisx.tsx

Lines changed: 69 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import RenderingFrequency from './RenderingFrequency';
1313
import BarGraph from './BarGraph';
1414
import BarGraphComparison from './BarGraphComparison';
1515
import { useStoreContext } from '../store';
16+
// import snapshots from './snapshots';
17+
import { Component } from 'react';
1618

1719
/* NOTES
1820
Issue - Not fully compatible with recoil apps. Reference the recoil-todo-test.
@@ -32,8 +34,63 @@ interface BarStackProps {
3234
hierarchy: any;
3335
}
3436

37+
38+
39+
// function getComponentsArr(componentName, snapshots, node) {
40+
// //Input: Name of component and all snapshots
41+
// //Output: One array of each individual snapshot
42+
43+
// //NOTE:
44+
// //Every snapshot is an object with a children array with a snapshot that also has a children array etc
45+
// //Children arrays more than one signify siblings
46+
47+
// }
48+
// // snapshots.map(rootNode => {
49+
// // // rootNode.name
50+
// // let currNode = rootNode
51+
// // while (currNode) {
52+
// // if (currNode.name === componentName) {
53+
// // return currNode.componentData.props
54+
// // } else {
55+
// // currNode = currNode.children[0]
56+
// // currNode = currNode.children[1]
57+
// // }
58+
// // }
59+
// // })
60+
61+
const collectNodes = (snaps, componentName) => {
62+
const componentsResult = [];
63+
// console.log("This is the snapshots", snaps);
64+
// componentsResult.splice(0, componentsResult.length); { /* We used the .splice method here to ensure that nodeList did not accumulate with page refreshes */ }
65+
// componentsResult.push(snaps);
66+
67+
for (let x = 0; x < snaps.length; x++) {
68+
const snapshotList = []
69+
snapshotList.push(snaps[x]);
70+
71+
for (let i = 0; i < snapshotList.length; i++) {
72+
73+
const cur = snapshotList[i];
74+
if (cur.name === componentName) {
75+
componentsResult.push(cur.componentData.props);
76+
break;
77+
}
78+
if (cur.children && cur.children.length > 0) {
79+
for (let child of cur.children) {
80+
snapshotList.push(child);
81+
}
82+
}
83+
}
84+
}
85+
//console.log('componentsResult looks like: ', componentsResult);
86+
return componentsResult;
87+
}
88+
89+
90+
91+
3592
/* DATA HANDLING HELPER FUNCTIONS */
36-
const traverse = (snapshot, data, currTotalRender = 0) => {
93+
const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
3794
if (!snapshot.children[0]) return;
3895

3996
// loop through snapshots
@@ -56,24 +113,26 @@ const traverse = (snapshot, data, currTotalRender = 0) => {
56113
renderFrequency: 0,
57114
totalRenderTime: 0,
58115
rtid: '',
116+
props: {},
59117
};
60118
if (child.state !== 'stateless') data.componentData[componentName].stateType = 'stateful';
61119
}
62120
// increment render frequencies
63121
if (renderTime > 0) {
64-
console.log('what is the child', child);
65-
console.log('por que?', data.componentData[componentName]);
122+
// console.log('what is the child', child);
123+
// console.log('por que?', data.componentData[componentName]);
66124
data.componentData[componentName].renderFrequency++;
67125
} else {
68-
console.log('what is the child', child);
69-
console.log('we dont increment here', data.componentData[componentName], 'and the child', child);
126+
// console.log('what is the child', child);
127+
// console.log('we dont increment here', data.componentData[componentName], 'and the child', child);
70128
}
71129

72130
// add to total render time
73131
data.componentData[componentName].totalRenderTime += renderTime;
74132
// Get rtid for the hovering feature
75133
data.componentData[componentName].rtid = child.rtid;
76-
traverse(snapshot.children[idx], data, currTotalRender);
134+
data.componentData[componentName].props = collectNodes(snapshots, child.name);
135+
traverse(snapshot.children[idx], data, snapshots, currTotalRender);
77136
});
78137
// reassigns total render time to max render time
79138
data.maxTotalRender = Math.max(currTotalRender, data.maxTotalRender);
@@ -116,7 +175,7 @@ const getPerfMetrics = (snapshots, snapshotsIds): {} => {
116175
console.log('show me all of the snapshots', snapshots);
117176
snapshots.forEach((snapshot, i) => {
118177
perfData.barStack.push({ snapshotId: snapshotsIds[i] });
119-
traverse(snapshot, perfData);
178+
traverse(snapshot, perfData, snapshots);
120179
});
121180
return perfData;
122181
};
@@ -154,6 +213,9 @@ const PerformanceVisx = (props: BarStackProps) => {
154213
};
155214

156215
const renderComponentDetailsView = () => {
216+
console.log('show me snapshots', snapshots)
217+
console.log('what is heirarchy', hierarchy);
218+
console.log('this is the info for rendering frequency', data.componentData);
157219
if (hierarchy) {
158220
return <RenderingFrequency data={data.componentData} />;
159221
}

src/app/reducers/mainReducer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ export default (state, action) => produce(state, draft => {
265265
}
266266
case types.NEW_SNAPSHOTS: {
267267
const { payload } = action;
268-
// console.log("in NEW_SANPSHOTS", payload);
268+
console.log("in NEW_SANPSHOTS", payload);
269269
Object.keys(tabs).forEach(tab => {
270270
if (!payload[tab]) {
271271
delete tabs[tab];

src/backend/linkFiber.ts

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,11 @@ function traverseHooks(memoizedState: any): HookStates {
212212
let atomsSelectors = {};
213213
let atomsComponents = {};
214214
const exclude = ['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'];
215-
function convertFunctionToString(newObj, oldObj) {
215+
216+
// This recursive function is used to grab the state of children components
217+
// and push them into the parent componenent
218+
// react elements throw errors on client side of application - convert react/functions into string
219+
function convertDataToString(newObj, oldObj) {
216220
const newPropData = oldObj || {};
217221
// const newPropData = Array.isArray(obj) === true ? {} : [];
218222
for (const key in newObj) {
@@ -224,7 +228,7 @@ function convertFunctionToString(newObj, oldObj) {
224228
return newPropData;
225229
} else if (typeof newObj[key] === 'object' && exclude.includes(key) !== true) {
226230
// console.log('in the recursive call', key, newObj[key], key);
227-
newPropData[key] = convertFunctionToString(newObj[key], null);
231+
newPropData[key] = convertDataToString(newObj[key], null);
228232
} else if (exclude.includes(key) !== true) {
229233
// console.log('there should be no objects here', key, typeof newObj[key], newObj[key]);
230234
newPropData[key] = newObj[key];
@@ -259,14 +263,13 @@ function createTree(
259263
selfBaseDuration,
260264
treeBaseDuration,
261265
} = currentFiber;
262-
// new feature adds props/state into the component
263-
// console.log('CurrentFiber & tag: ', tag, currentFiber);
264266

267+
// check to see if we can get the information we were looking for
265268
if (tag === 5) {
266269
try {
267270
if (memoizedProps.children[0]._owner.memoizedProps !== undefined) {
268271
const propsData = memoizedProps.children[0]._owner.memoizedProps;
269-
const newPropData = convertFunctionToString(propsData, tree.componentData.props ? tree.componentData.props : null);
272+
const newPropData = convertDataToString(propsData, tree.componentData.props ? tree.componentData.props : null);
270273
tree.componentData = {
271274
...tree.componentData,
272275
props: newPropData
@@ -338,10 +341,10 @@ function createTree(
338341
props?: any,
339342
} = {};
340343
let componentFound = false;
344+
345+
// check to see if the parent component has any state/props
341346
if (memoizedProps) {
342-
// console.log('memoized props with the tag name', tag, memoizedProps, convertFunctionToString(memoizedProps, null));
343-
// console.log('looking at memoizedProps ', memoizedProps);
344-
componentData.props = convertFunctionToString(memoizedProps, null);
347+
componentData.props = convertDataToString(memoizedProps, null);
345348
}
346349

347350
// Check if node is a stateful class component

src/backend/types/backendTypes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export interface ComponentData {
3535
actualStartTime?: number;
3636
selfBaseDuration?: number;
3737
treeBaseDuration?: number;
38+
props?: any,
3839
}
3940

4041
export interface HookStateItem {

0 commit comments

Comments
 (0)