Skip to content

Commit 5ceb3c1

Browse files
bmicharebmichare
committed
Fixed performance visx merge conflicts
2 parents 55a6e9e + 37f7106 commit 5ceb3c1

File tree

5 files changed

+127
-104
lines changed

5 files changed

+127
-104
lines changed

‎src/app/actions/actions.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
22
import * as types from '../constants/actionTypes';
33

4-
export const save = (tabsObj) => ({
4+
export const save = (newSeries, newSeriesName) => ({
55
type: types.SAVE,
6-
payload: tabsObj,
6+
payload: { newSeries, newSeriesName },
77
});
88
export const deleteSeries = () => ({
99
type: types.DELETE_SERIES,

‎src/app/components/BarGraph.tsx

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-nocheck
2-
import React, { useEffect } from 'react';
2+
import React, { useEffect, useRef } from 'react';
33
import { BarStack } from '@visx/shape';
44
import { SeriesPoint } from '@visx/shape/lib/types';
55
import { Group } from '@visx/group';
@@ -109,12 +109,11 @@ const BarGraph = props => {
109109
title: tabs[currentTab].title,
110110
data,
111111
};
112-
113112
// use this to animate the save series button. It
114113
useEffect(() => {
115114
const saveButtons = document.getElementsByClassName('save-series-button');
116115
for (let i = 0; i < saveButtons.length; i++) {
117-
if (tabs[currentTab].seriesSavedStatus) {
116+
if (tabs[currentTab].seriesSavedStatus === 'saved') {
118117
saveButtons[i].classList.add('animate');
119118
saveButtons[i].innerHTML = 'Saved!';
120119
} else {
@@ -123,12 +122,34 @@ const BarGraph = props => {
123122
}
124123
}
125124
});
125+
126+
// const test = 0;
127+
128+
// let textbox;
129+
// function textboxCreator() {
130+
// if (test === 0) {
131+
// textbox = <input type="text" className="seriesname" placeholder="Series Name" />
132+
// }
133+
// test++;
134+
// }
135+
136+
// const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" className="seriesname" placeholder="Series Name" /> : null
137+
126138
return (
127139
<div className="bargraph-position">
140+
<input type="text" id ="seriesname" placeholder="Series Name" />
128141
<button
142+
type="button"
129143
className="save-series-button"
130144
onClick={e => {
131-
dispatch(save(toStorage));
145+
// textboxCreator();
146+
const seriesName = document.getElementById('seriesname').value;
147+
console.log("seriesName", seriesName)
148+
// render text box if not already rendered
149+
// grab text from textbox
150+
// dispatch save tostorage if text is being passed in
151+
// if not do nothing
152+
dispatch(save(toStorage, seriesName));
132153
}}
133154
>
134155
Save Series

‎src/app/components/BarGraphComparison.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,8 @@ const BarGraphComparison = props => {
7979
const [maxRender, setMaxRender] = React.useState(data.maxTotalRender);
8080

8181
function titleFilter(comparisonArray) {
82+
// const comparisonArrayModded = comparisonArray[0];
83+
console.log('titleFilter', comparisonArray);
8284
return comparisonArray.filter(
8385
elem => elem.title.split('-')[1] === tabs[currentTab].title.split('-')[1],
8486
);
@@ -119,6 +121,9 @@ const BarGraphComparison = props => {
119121
// with the render time of the current tab.
120122
// The max render time will determine the Y-axis's highest number.
121123
const calculateMaxTotalRender = series => {
124+
console.log(comparison)
125+
console.log(series)
126+
// let currentMax = 5
122127
const currentSeriesBarStacks = !comparison[series]
123128
? []
124129
: comparison[series].data.barStack;
@@ -206,6 +211,9 @@ const BarGraphComparison = props => {
206211
elem.currentTab = 'comparison';
207212
});
208213
// comparison[series].data.barStack.currentTab = currentTab;
214+
console.log(comparison)
215+
console.log(series)
216+
console.log(comparison[series].data.barStack)
209217
return comparison[series].data.barStack;
210218
}
211219
function setXpointsCurrentTab() {
@@ -256,8 +264,11 @@ const BarGraphComparison = props => {
256264
{!comparison[series] ? (
257265
<MenuItem>No series available</MenuItem>
258266
) : (
259-
titleFilter(comparison).map((tabElem, index) => (
260-
<MenuItem value={index}>{`Series ${index + 1}`}</MenuItem>
267+
// titleFilter(comparison).map((tabElem, index) => (
268+
// <MenuItem value={index}>{`Series ${index + 1}`}</MenuItem>
269+
// ))
270+
comparison.map((tabElem, index) => (
271+
<MenuItem value={index}>{tabElem.name}</MenuItem>
261272
))
262273
)}
263274
</Select>

‎src/app/components/PerformanceVisx.tsx

Lines changed: 52 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* eslint-disable guard-for-in */
2-
/* eslint-disable no-restricted-syntax */
31
// @ts-nocheck
42
import React, { useState } from 'react';
53
import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -18,10 +16,7 @@ import BarGraph from './BarGraph';
1816
import BarGraphComparison from './BarGraphComparison';
1917
import { useStoreContext } from '../store';
2018
// import snapshots from './snapshots';
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-
19+
import { Component } from 'react';
2520
/* NOTES
2621
Issue - Not fully compatible with recoil apps. Reference the recoil-todo-test.
2722
Barstacks display inconsistently...however, almost always displays upon initial test app load or
@@ -31,99 +26,56 @@ to note - all snapshots do render (check HTML doc) within the chrome extension b
3126
not display because height is not consistently passed to each bar. This side effect is only
3227
seen in recoil apps...
3328
*/
34-
3529
// typescript for PROPS from StateRoute.tsx
3630
interface BarStackProps {
3731
width: number;
3832
height: number;
3933
snapshots: [];
4034
hierarchy: any;
4135
}
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-
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+
// // })
6555
const collectNodes = (snaps, componentName) => {
6656
const componentsResult = [];
67-
const renderResult = [];
68-
let trackChanges = 0;
69-
let newChange = true;
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);
7060
for (let x = 0; x < snaps.length; x++) {
71-
const snapshotList = [];
61+
const snapshotList = []
7262
snapshotList.push(snaps[x]);
7363
for (let i = 0; i < snapshotList.length; i++) {
7464
const cur = snapshotList[i];
7565
if (cur.name === componentName) {
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-
}
66+
componentsResult.push(cur.componentData.props);
10467
break;
10568
}
10669
if (cur.children && cur.children.length > 0) {
107-
for (const child of cur.children) {
70+
for (let child of cur.children) {
10871
snapshotList.push(child);
10972
}
11073
}
11174
}
11275
}
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-
76+
//console.log('componentsResult looks like: ', componentsResult);
77+
return componentsResult;
78+
}
12779
/* DATA HANDLING HELPER FUNCTIONS */
12880
const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
12981
if (!snapshot.children[0]) return;
@@ -148,23 +100,24 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
148100
renderFrequency: 0,
149101
totalRenderTime: 0,
150102
rtid: '',
151-
information: {},
103+
props: {},
152104
};
153105
if (child.state !== 'stateless') data.componentData[componentName].stateType = 'stateful';
154106
}
155107
// increment render frequencies
156108
if (renderTime > 0) {
109+
// console.log('what is the child', child);
110+
// console.log('por que?', data.componentData[componentName]);
157111
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);
158115
}
159-
// else {
160-
161-
// }
162-
163116
// add to total render time
164117
data.componentData[componentName].totalRenderTime += renderTime;
165118
// Get rtid for the hovering feature
166119
data.componentData[componentName].rtid = child.rtid;
167-
data.componentData[componentName].information = collectNodes(snapshots, child.name);
120+
data.componentData[componentName].props = collectNodes(snapshots, child.name);
168121
traverse(snapshot.children[idx], data, snapshots, currTotalRender);
169122
});
170123
// reassigns total render time to max render time
@@ -174,15 +127,18 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
174127

175128
// Retrieve snapshot series data from Chrome's local storage.
176129
const allStorage = () => {
177-
const values = [];
178-
const keys = Object.keys(localStorage);
179-
let i = keys.length;
180-
181-
182-
while (i--) {
183-
const series = localStorage.getItem(keys[i]);
184-
values.push(JSON.parse(series));
185-
}
130+
// const values = [];
131+
// const keys = Object.keys(localStorage);
132+
let values = localStorage.getItem('project')
133+
// values === null ? values = [] : values = JSON.parse(values) ;
134+
values = values === null ? [] : JSON.parse(values);
135+
// let i = keys.length;
136+
// console.log('allstorage keys', keys);
137+
// while (i--) {
138+
// const series = localStorage.getItem(keys[i]);
139+
// values.push(JSON.parse(series));
140+
// }
141+
console.log('allstorage values', values);
186142
return values;
187143
};
188144

@@ -204,6 +160,7 @@ const getPerfMetrics = (snapshots, snapshotsIds): {} => {
204160
componentData: {},
205161
maxTotalRender: 0,
206162
};
163+
console.log('show me all of the snapshots', snapshots);
207164
snapshots.forEach((snapshot, i) => {
208165
perfData.barStack.push({ snapshotId: snapshotsIds[i] });
209166
traverse(snapshot, perfData, snapshots);
@@ -244,6 +201,9 @@ const PerformanceVisx = (props: BarStackProps) => {
244201
};
245202

246203
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);
247207
if (hierarchy) {
248208
return <RenderingFrequency data={data.componentData} />;
249209
}

‎src/app/reducers/mainReducer.js

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { produce } from 'immer';
2-
import _ from 'lodash';
2+
import _, { values } from 'lodash';
33
import * as types from '../constants/actionTypes.ts';
44

55
export default (state, action) => produce(state, draft => {
@@ -37,9 +37,40 @@ export default (state, action) => produce(state, draft => {
3737
switch (action.type) {
3838
// Save case will store the series user wants to save to the chrome local storage
3939
case types.SAVE: {
40-
const data = JSON.stringify(action.payload);
41-
localStorage.setItem(`${action.payload.currentTab}`, data);
42-
tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: true };
40+
// console.log('reducer reached')
41+
console.log(tabs[currentTab].seriesSavedStatus)
42+
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
49+
if (!tabs[currentTab].seriesSavedStatus) {
50+
console.log('false case reacHED')
51+
tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: 'inputBoxOpen' };
52+
break;
53+
}
54+
if (tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' || tabs[currentTab].seriesSavedStatus === 'noSeriesNameError') {
55+
console.log('main case reached')
56+
if (!newSeriesName) {
57+
console.log('failed name check:', newSeriesName)
58+
tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: 'noSeriesNameError' };
59+
break;
60+
}
61+
console.log('post seriesNameCheck')
62+
let seriesArray = localStorage.getItem('project');
63+
// seriesArray = seriesArray === null ? [] : JSON.parse(seriesArray);
64+
if (seriesArray === null) seriesArray = [];
65+
else seriesArray = JSON.parse(seriesArray);
66+
newSeries.name = newSeriesName;
67+
seriesArray.push(newSeries);
68+
console.log('before setItem:', newSeries);
69+
localStorage.setItem('project', JSON.stringify(seriesArray));
70+
console.log('save reducer:', localStorage);
71+
tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: 'saved' };
72+
break;
73+
}
4374
break;
4475
}
4576
// Delete case will delete ALL stored series in chrome local storage. To see chrome storage related data

0 commit comments

Comments
 (0)