Skip to content

Commit 37f7106

Browse files
bmicharebmichare
committed
Able to name series, dropdown reflects named series, need to finalize conditional rendering of series name input box and barstack rendering
1 parent da04dc6 commit 37f7106

File tree

5 files changed

+130
-93
lines changed

5 files changed

+130
-93
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: 55 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
/* eslint-disable guard-for-in */
2-
//* eslint-disable no-restricted-syntax */
31
// @ts-nocheck
42
import React, { useState } from 'react';
3+
import FormControlLabel from '@material-ui/core/FormControlLabel';
4+
import { ParentSize } from '@visx/responsive';
55
import {
66
MemoryRouter as Router,
77
Route,
@@ -14,7 +14,7 @@ import BarGraph from './BarGraph';
1414
import BarGraphComparison from './BarGraphComparison';
1515
import { useStoreContext } from '../store';
1616
// import snapshots from './snapshots';
17-
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'];
17+
import { Component } from 'react';
1818
/* NOTES
1919
Issue - Not fully compatible with recoil apps. Reference the recoil-todo-test.
2020
Barstacks display inconsistently...however, almost always displays upon initial test app load or
@@ -23,95 +23,57 @@ However, cycling between updating state and then emptying sometimes fixes the st
2323
to note - all snapshots do render (check HTML doc) within the chrome extension but they do
2424
not display because height is not consistently passed to each bar. This side effect is only
2525
seen in recoil apps...
26-
*/
26+
*/
2727
// typescript for PROPS from StateRoute.tsx
2828
interface BarStackProps {
2929
width: number;
3030
height: number;
3131
snapshots: [];
3232
hierarchy: any;
3333
}
34-
const makePropsPretty = data => {
35-
const propsFormat = [];
36-
const nestedObj = [];
37-
if (typeof data !== 'object') {
38-
return <p>{data}</p>;
39-
}
40-
for (const key in data) {
41-
if (data[key] !== 'reactFiber' && typeof data[key] !== 'object' && exclude.includes(key) !== true) {
42-
propsFormat.push(<p className="stateprops">
43-
{`${key}: ${data[key]}`}
44-
</p>);
45-
} else if (data[key] !== 'reactFiber' && typeof data[key] === 'object' && exclude.includes(key) !== true) {
46-
const result = makePropsPretty(data[key]);
47-
nestedObj.push(result);
48-
}
49-
}
50-
if (nestedObj) {
51-
propsFormat.push(nestedObj);
52-
}
53-
return propsFormat;
54-
};
34+
// function getComponentsArr(componentName, snapshots, node) {
35+
// //Input: Name of component and all snapshots
36+
// //Output: One array of each individual snapshot
37+
// //NOTE:
38+
// //Every snapshot is an object with a children array with a snapshot that also has a children array etc
39+
// //Children arrays more than one signify siblings
40+
// }
41+
// // snapshots.map(rootNode => {
42+
// // // rootNode.name
43+
// // let currNode = rootNode
44+
// // while (currNode) {
45+
// // if (currNode.name === componentName) {
46+
// // return currNode.componentData.props
47+
// // } else {
48+
// // currNode = currNode.children[0]
49+
// // currNode = currNode.children[1]
50+
// // }
51+
// // }
52+
// // })
5553
const collectNodes = (snaps, componentName) => {
5654
const componentsResult = [];
57-
const renderResult = [];
58-
let trackChanges = 0;
59-
let newChange = true;
55+
// console.log("This is the snapshots", snaps);
56+
// componentsResult.splice(0, componentsResult.length); { /* We used the .splice method here to ensure that nodeList did not accumulate with page refreshes */ }
57+
// componentsResult.push(snaps);
6058
for (let x = 0; x < snaps.length; x++) {
61-
const snapshotList = [];
59+
const snapshotList = []
6260
snapshotList.push(snaps[x]);
6361
for (let i = 0; i < snapshotList.length; i++) {
6462
const cur = snapshotList[i];
6563
if (cur.name === componentName) {
66-
const renderTime = Number(
67-
Number.parseFloat(cur.componentData.actualDuration).toPrecision(5),
68-
);
69-
if (renderTime === 0) {
70-
break;
71-
} else {
72-
renderResult.push(renderTime);
73-
}
74-
// compare the last pushed component Data from the array to the current one to see if there are differences
75-
if (x !== 0 && componentsResult.length !== 0) {
76-
// needs to be stringified because values are hard to determine if true or false if in they're seen as objects
77-
if (JSON.stringify(Object.values(componentsResult[newChange ? componentsResult.length - 1 : trackChanges])[0]) !== JSON.stringify(cur.componentData.props)) {
78-
newChange = true;
79-
// const props = { [`snapshot${x}`]: { rendertime: formatRenderTime(cur.componentData.actualDuration), ...cur.componentData.props } };
80-
const props = { [`snapshot${x}`]: { ...cur.componentData.props } };
81-
componentsResult.push(props);
82-
} else {
83-
newChange = false;
84-
trackChanges = componentsResult.length - 1;
85-
const props = { [`snapshot${x}`]: { state: 'Same state as prior snapshot' } };
86-
componentsResult.push(props);
87-
}
88-
} else {
89-
// const props = { [`snapshot${x}`]: { ...cur.componentData.props}};
90-
// props[`snapshot${x}`].rendertime = formatRenderTime(cur.componentData.actualDuration);
91-
const props = { [`snapshot${x}`]: { ...cur.componentData.props } };
92-
componentsResult.push(props);
93-
}
64+
componentsResult.push(cur.componentData.props);
9465
break;
9566
}
9667
if (cur.children && cur.children.length > 0) {
97-
for (const child of cur.children) {
68+
for (let child of cur.children) {
9869
snapshotList.push(child);
9970
}
10071
}
10172
}
10273
}
103-
const finalResults = componentsResult.map((e, index) => {
104-
const name = Object.keys(e)[0];
105-
e[name].rendertime = renderResult[index];
106-
return e;
107-
});
108-
for (let i = 0; i < finalResults.length; i++) {
109-
for (const componentSnapshot in finalResults[i]) {
110-
finalResults[i][componentSnapshot] = makePropsPretty(finalResults[i][componentSnapshot]).reverse();
111-
}
112-
}
113-
return finalResults;
114-
};
74+
//console.log('componentsResult looks like: ', componentsResult);
75+
return componentsResult;
76+
}
11577
/* DATA HANDLING HELPER FUNCTIONS */
11678
const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
11779
if (!snapshot.children[0]) return;
@@ -133,21 +95,24 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
13395
renderFrequency: 0,
13496
totalRenderTime: 0,
13597
rtid: '',
136-
information: {},
98+
props: {},
13799
};
138100
if (child.state !== 'stateless') data.componentData[componentName].stateType = 'stateful';
139101
}
140102
// increment render frequencies
141103
if (renderTime > 0) {
104+
// console.log('what is the child', child);
105+
// console.log('por que?', data.componentData[componentName]);
142106
data.componentData[componentName].renderFrequency++;
107+
} else {
108+
// console.log('what is the child', child);
109+
// console.log('we dont increment here', data.componentData[componentName], 'and the child', child);
143110
}
144-
// else {
145-
// }
146111
// add to total render time
147112
data.componentData[componentName].totalRenderTime += renderTime;
148113
// Get rtid for the hovering feature
149114
data.componentData[componentName].rtid = child.rtid;
150-
data.componentData[componentName].information = collectNodes(snapshots, child.name);
115+
data.componentData[componentName].props = collectNodes(snapshots, child.name);
151116
traverse(snapshot.children[idx], data, snapshots, currTotalRender);
152117
});
153118
// reassigns total render time to max render time
@@ -156,13 +121,18 @@ const traverse = (snapshot, data, snapshots, currTotalRender = 0) => {
156121
};
157122
// Retrieve snapshot series data from Chrome's local storage.
158123
const allStorage = () => {
159-
const values = [];
160-
const keys = Object.keys(localStorage);
161-
let i = keys.length;
162-
while (i--) {
163-
const series = localStorage.getItem(keys[i]);
164-
values.push(JSON.parse(series));
165-
}
124+
// const values = [];
125+
// const keys = Object.keys(localStorage);
126+
let values = localStorage.getItem('project')
127+
// values === null ? values = [] : values = JSON.parse(values) ;
128+
values = values === null ? [] : JSON.parse(values);
129+
// let i = keys.length;
130+
// console.log('allstorage keys', keys);
131+
// while (i--) {
132+
// const series = localStorage.getItem(keys[i]);
133+
// values.push(JSON.parse(series));
134+
// }
135+
console.log('allstorage values', values);
166136
return values;
167137
};
168138
// Gets snapshot Ids for the regular bar graph view.
@@ -182,6 +152,7 @@ const getPerfMetrics = (snapshots, snapshotsIds): {} => {
182152
componentData: {},
183153
maxTotalRender: 0,
184154
};
155+
console.log('show me all of the snapshots', snapshots);
185156
snapshots.forEach((snapshot, i) => {
186157
perfData.barStack.push({ snapshotId: snapshotsIds[i] });
187158
traverse(snapshot, perfData, snapshots);
@@ -218,6 +189,9 @@ const PerformanceVisx = (props: BarStackProps) => {
218189
}
219190
};
220191
const renderComponentDetailsView = () => {
192+
console.log('show me snapshots', snapshots)
193+
console.log('what is heirarchy', hierarchy);
194+
console.log('this is the info for rendering frequency', data.componentData);
221195
if (hierarchy) {
222196
return <RenderingFrequency data={data.componentData} />;
223197
}

‎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)