Skip to content

Commit 7f25337

Browse files
jrosengrantjrosengrant
committed
modularized the webmetrics in the StateRoute. added and commented out script injection in contentScript. About to fix the React Router errors
1 parent 5903b2c commit 7f25337

File tree

8 files changed

+378
-305
lines changed

8 files changed

+378
-305
lines changed

‎src/app/components/Diff.tsx

Lines changed: 92 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,107 @@
1-
// import React from 'react';
2-
// import { diff, formatters } from 'jsondiffpatch';
3-
// import ReactHtmlParser from 'react-html-parser';
4-
// import { CurrentTab, DiffProps, MainState, RootState, StatelessCleaning } from '../FrontendTypes';
5-
// import { useSelector } from 'react-redux';
1+
import React from 'react';
2+
import { diff } from 'jsondiffpatch';
3+
const jsondiffpatch = require('jsondiffpatch')
4+
import ReactHtmlParser from 'html-react-parser';
5+
import { CurrentTab, DiffProps, MainState, RootState, StatelessCleaning } from '../FrontendTypes';
6+
import { useSelector } from 'react-redux';
67

7-
// /**
8-
// * Displays tree showing two specific versions of tree:
9-
// * one with specific state changes, the other the whole tree
10-
// * @param props props from maincontainer
11-
// * @returns a diff tree or a string stating no state changes have happened
12-
// */
8+
/**
9+
* Displays tree showing two specific versions of tree:
10+
* one with specific state changes, the other the whole tree
11+
* @param props props from maincontainer
12+
* @returns a diff tree or a string stating no state changes have happened
13+
*/
1314

14-
// function Diff(props: DiffProps): JSX.Element {
15-
// const {
16-
// snapshot, // snapshot from 'tabs[currentTab]' object in 'MainContainer'
17-
// show, // boolean that is dependent on the 'Route' path; true if 'Route' path === '/diffRaw'
18-
// } = props;
19-
// const { currentTab, tabs }: MainState = useSelector((state: RootState) => state.main);
20-
// const { snapshots, viewIndex, sliderIndex }: Partial<CurrentTab> = tabs[currentTab];
15+
function Diff(props: DiffProps): JSX.Element {
16+
const {
17+
snapshot, // snapshot from 'tabs[currentTab]' object in 'MainContainer'
18+
show, // boolean that is dependent on the 'Route' path; true if 'Route' path === '/diffRaw'
19+
} = props;
20+
const { currentTab, tabs }: MainState = useSelector((state: RootState) => state.main);
21+
const { snapshots, viewIndex, sliderIndex }: Partial<CurrentTab> = tabs[currentTab];
2122

22-
// let previous: unknown; // = (viewIndex !== -1) ? snapshots[viewIndex - 1] : previous = snapshots[sliderIndex - 1]
23+
let previous: unknown; // = (viewIndex !== -1) ? snapshots[viewIndex - 1] : previous = snapshots[sliderIndex - 1]
2324

24-
// if (viewIndex !== -1 && snapshots && viewIndex) {
25-
// // snapshots should not have any property < 0. A viewIndex of '-1' means that we had a snapshot index that occurred before the initial snapshot of the application state... which is impossible. '-1' therefore means reset to the last/most recent snapshot.
26-
// previous = snapshots[viewIndex - 1]; // set previous to the snapshot that is before the one we are currently viewing
27-
// } else if (snapshots && sliderIndex) {
28-
// previous = snapshots[sliderIndex - 1]; // if viewIndex was an impossible index, we will get our snapshots index using 'sliderIndex.' sliderIndex should have already been reset to the latest snapshot index. Previous is then set to the snapshot that occurred immediately before our most recent snapshot.
29-
// }
25+
if (viewIndex !== -1 && snapshots && viewIndex) {
26+
// snapshots should not have any property < 0. A viewIndex of '-1' means that we had a snapshot index that occurred before the initial snapshot of the application state... which is impossible. '-1' therefore means reset to the last/most recent snapshot.
27+
previous = snapshots[viewIndex - 1]; // set previous to the snapshot that is before the one we are currently viewing
28+
} else if (snapshots && sliderIndex) {
29+
previous = snapshots[sliderIndex - 1]; // if viewIndex was an impossible index, we will get our snapshots index using 'sliderIndex.' sliderIndex should have already been reset to the latest snapshot index. Previous is then set to the snapshot that occurred immediately before our most recent snapshot.
30+
}
3031

31-
// /*
32-
// State snapshot objects have the following structure:
33-
// {
34-
// children: array of objects
35-
// componentData: object
36-
// isExpanded: Boolean
37-
// name: string
38-
// route: object
39-
// state: string
40-
// }
32+
/*
33+
State snapshot objects have the following structure:
34+
{
35+
children: array of objects
36+
componentData: object
37+
isExpanded: Boolean
38+
name: string
39+
route: object
40+
state: string
41+
}
4142
42-
// // cleaning preview from stateless data
43-
// */
44-
// const statelessCleaning = (obj: StatelessCleaning) => {
45-
// const newObj = { ...obj }; // duplicate our input object into a new object
43+
// cleaning preview from stateless data
44+
*/
45+
const statelessCleaning = (obj: StatelessCleaning) => {
46+
const newObj = { ...obj }; // duplicate our input object into a new object
4647

47-
// if (newObj.name === 'nameless') {
48-
// // if our new object's name is nameless
49-
// delete newObj.name; // delete the name property
50-
// }
51-
// if (newObj.componentData) {
52-
// // if our new object has a componentData property
53-
// delete newObj.componentData; // delete the componentData property
54-
// }
55-
// if (newObj.state === 'stateless') {
56-
// // if if our new object's state is stateless
57-
// delete newObj.state; // delete the state property
58-
// }
48+
if (newObj.name === 'nameless') {
49+
// if our new object's name is nameless
50+
delete newObj.name; // delete the name property
51+
}
52+
if (newObj.componentData) {
53+
// if our new object has a componentData property
54+
delete newObj.componentData; // delete the componentData property
55+
}
56+
if (newObj.state === 'stateless') {
57+
// if if our new object's state is stateless
58+
delete newObj.state; // delete the state property
59+
}
5960

60-
// if (newObj.stateSnaphot) {
61-
// // if our new object has a stateSnaphot property
62-
// newObj.stateSnaphot = statelessCleaning(obj.stateSnaphot); // run statelessCleaning on the stateSnapshot
63-
// }
61+
if (newObj.stateSnaphot) {
62+
// if our new object has a stateSnaphot property
63+
newObj.stateSnaphot = statelessCleaning(obj.stateSnaphot); // run statelessCleaning on the stateSnapshot
64+
}
6465

65-
// if (newObj.children) {
66-
// // if our new object has a children property
67-
// newObj.children = [];
68-
// if (obj.children.length > 0) {
69-
// // and if our input object's children property is non-empty, go through each children object from our input object and determine, if the object being iterated on either has a stateless state or has a children array with a non-zero amount of objects. Objects that fulfill the above that need to be cleaned through statelessCleaning. Those that are cleaned through this process are then pushed to the new object's children array.
70-
// obj.children.forEach(
71-
// (element: { state?: Record<string, unknown> | string; children?: [] }) => {
72-
// if (element.state !== 'stateless' || element.children.length > 0) {
73-
// const clean = statelessCleaning(element);
74-
// newObj.children.push(clean);
75-
// }
76-
// },
77-
// );
78-
// }
79-
// }
80-
// return newObj; // return the cleaned state snapshot(s)
81-
// };
66+
if (newObj.children) {
67+
// if our new object has a children property
68+
newObj.children = [];
69+
if (obj.children.length > 0) {
70+
// and if our input object's children property is non-empty, go through each children object from our input object and determine, if the object being iterated on either has a stateless state or has a children array with a non-zero amount of objects. Objects that fulfill the above that need to be cleaned through statelessCleaning. Those that are cleaned through this process are then pushed to the new object's children array.
71+
obj.children.forEach(
72+
(element: { state?: Record<string, unknown> | string; children?: [] }) => {
73+
if (element.state !== 'stateless' || element.children.length > 0) {
74+
const clean = statelessCleaning(element);
75+
newObj.children.push(clean);
76+
}
77+
},
78+
);
79+
}
80+
}
81+
return newObj; // return the cleaned state snapshot(s)
82+
};
8283

83-
// const previousDisplay: StatelessCleaning = statelessCleaning(previous); // displays stateful data from the first snapshot that was taken before our current snapshot.
84+
const previousDisplay: StatelessCleaning = statelessCleaning(previous); // displays stateful data from the first snapshot that was taken before our current snapshot.
8485

85-
// const delta: StatelessCleaning = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
86+
const delta: StatelessCleaning = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
8687

87-
// const html: StatelessCleaning = formatters.html.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
88+
const html: StatelessCleaning = jsondiffpatch.formatters(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
8889

89-
// if (show)
90-
// formatters.html.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
91-
// else formatters.html.hideUnchanged(); // hides unchanged values
90+
if (show)
91+
jsondiffpatch.formatters.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
92+
else jsondiffpatch.formatters.hideUnchanged(); // hides unchanged values
9293

93-
// if (previous === undefined || delta === undefined) {
94-
// // if there has been no state changes on the target/hooked application, previous and delta would be undefined.
95-
// return (
96-
// <div className='no-data-message'>
97-
// {' '}
98-
// Make state changes and click on a Snapshot to see the difference between that snapshot and
99-
// the previous one.{' '}
100-
// </div>
101-
// );
102-
// }
103-
// return <div>{ReactHtmlParser(html)}</div>; // ReactHTMLParser from 'react-html-parser' package converts the HTML string into a react component.
104-
// }
94+
if (previous === undefined || delta === undefined) {
95+
// if there has been no state changes on the target/hooked application, previous and delta would be undefined.
96+
return (
97+
<div className='no-data-message'>
98+
{' '}
99+
Make state changes and click on a Snapshot to see the difference between that snapshot and
100+
the previous one.{' '}
101+
</div>
102+
);
103+
}
104+
return <div>{ReactHtmlParser(html)}</div>; // ReactHTMLParser from 'react-html-parser' package converts the HTML string into a react component.
105+
}
105106

106-
// export default Diff;
107+
export default Diff;

‎src/app/components/DiffRoute.tsx

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
// import React from 'react';
2-
// import { MemoryRouter as Router, Route, NavLink, Switch } from 'react-router-dom';
3-
// import Diff from './Diff';
4-
// import { DiffRouteProps } from '../FrontendTypes';
1+
import React from 'react';
2+
import { MemoryRouter as Router, Route, NavLink, Routes } from 'react-router-dom';
3+
import Diff from './Diff';
4+
import { DiffRouteProps } from '../FrontendTypes';
55

6-
// /*
7-
// Loads the appropriate DiffRoute view and renders the 'Tree' and 'Raw' navbar buttons after clicking on the 'Diff' button located near the top rightmost corner.
8-
// */
6+
/*
7+
Loads the appropriate DiffRoute view and renders the 'Tree' and 'Raw' navbar buttons after clicking on the 'Diff' button located near the top rightmost corner.
8+
*/
99

10-
// // 'DiffRoute' only passed in prop is 'snapshot' from 'tabs[currentTab]' object in 'MainContainer'
11-
// const DiffRoute = (props: DiffRouteProps): JSX.Element => (
12-
// <Router>
13-
// <div className='navbar'>
14-
// <NavLink className='router-link' activeClassName='is-active' to='/'>
15-
// Tree
16-
// </NavLink>
17-
// <NavLink className='router-link' activeClassName='is-active' to='/diffRaw'>
18-
// Raw
19-
// </NavLink>
20-
// </div>
21-
// <Routes>
22-
// <Route path='/diffRaw' element={() => <Diff snapshot={props.snapshot} show />} />
23-
// <Route path='/' element={() => <Diff snapshot={props.snapshot} show={false} />} />
24-
// </Routes>
25-
// </Router>
26-
// );
10+
// 'DiffRoute' only passed in prop is 'snapshot' from 'tabs[currentTab]' object in 'MainContainer'
11+
const DiffRoute = (props: DiffRouteProps): JSX.Element => (
12+
<div className='diff-container'>
13+
<div className='navbar'>
14+
<NavLink className='router-link' activeClassName='is-active' to='/'>
15+
Tree
16+
</NavLink>
17+
<NavLink className='router-link' activeClassName='is-active' to='/diffRaw'>
18+
Raw
19+
</NavLink>
20+
</div>
21+
<Routes>
22+
<Route path='/diffRaw' element={() => <Diff snapshot={props.snapshot} show />} />
23+
<Route path='/' element={() => <Diff snapshot={props.snapshot} show={false} />} />
24+
</Routes>
25+
</div>
26+
);
2727

28-
// export default DiffRoute;
28+
export default DiffRoute;

‎src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx

Lines changed: 58 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,7 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
251251
return (
252252
<>
253253
<div className='performance-nav-bar-container'>
254-
<NavLink className='router-link-performance' end to='/'>
254+
<NavLink className='router-link-performance' end to='/'>
255255
Snapshots View
256256
</NavLink>
257257
<NavLink
@@ -261,48 +261,70 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
261261
>
262262
Comparison View
263263
</NavLink>
264-
<NavLink
265-
className='router-link-performance'
266-
to='/componentdetails'
267-
>
264+
<NavLink className='router-link-performance' to='/componentdetails'>
268265
Component Details
269266
</NavLink>
270267
</div>
271268

272269
{renderForTutorial()}
273270

274271
<Routes>
275-
<Route path='/comparison' element={(hierarchy && series !== false) ? <BarGraphComparison
276-
comparison={allStorage()}
277-
data={data}
278-
width={width}
279-
height={height}
280-
setSeries={setSeries}
281-
series={series}
282-
setAction={setAction}
283-
/> : <BarGraphComparisonActions
284-
comparison={allStorage()}
285-
data={getActions()}
286-
width={width}
287-
height={height}
288-
setSeries={setSeries}
289-
action={action}
290-
setAction={setAction}
291-
/>} />
292-
<Route path='/componentdetails' element={hierarchy ? <RenderingFrequency data={data.componentData} /> : <div className='noState'>{NO_STATE_MSG}</div> } />
293-
<Route path='/' element={hierarchy ? <div>
294-
<BarGraph
295-
data={data}
296-
width={width}
297-
height={height}
298-
comparison={allStorage()}
299-
setRoute={setRoute}
300-
allRoutes={allRoutes}
301-
filteredSnapshots={filteredSnapshots}
302-
setSnapshot={setSnapshot}
303-
snapshot={snapshot}
304-
/>
305-
</div> : null } />
272+
<Route
273+
path='comparison'
274+
element={
275+
hierarchy && series !== false ? (
276+
<BarGraphComparison
277+
comparison={allStorage()}
278+
data={data}
279+
width={width}
280+
height={height}
281+
setSeries={setSeries}
282+
series={series}
283+
setAction={setAction}
284+
/>
285+
) : (
286+
<BarGraphComparisonActions
287+
comparison={allStorage()}
288+
data={getActions()}
289+
width={width}
290+
height={height}
291+
setSeries={setSeries}
292+
action={action}
293+
setAction={setAction}
294+
/>
295+
)
296+
}
297+
/>
298+
<Route
299+
path='componentdetails'
300+
element={
301+
hierarchy ? (
302+
<RenderingFrequency data={data.componentData} />
303+
) : (
304+
<div className='noState'>{NO_STATE_MSG}</div>
305+
)
306+
}
307+
/>
308+
<Route
309+
path='/'
310+
element={
311+
hierarchy ? (
312+
<div>
313+
<BarGraph
314+
data={data}
315+
width={width}
316+
height={height}
317+
comparison={allStorage()}
318+
setRoute={setRoute}
319+
allRoutes={allRoutes}
320+
filteredSnapshots={filteredSnapshots}
321+
setSnapshot={setSnapshot}
322+
snapshot={snapshot}
323+
/>
324+
</div>
325+
) : null
326+
}
327+
/>
306328
</Routes>
307329
</>
308330
);

0 commit comments

Comments
 (0)