Skip to content

Commit ae721ba

Browse files
jrosengrantjrosengrant
committed
-fixed Diffroutes and diff file to run on jsondiffpathc v5
-fixed navlinks for performance sub-tabs, diff route tabs, and statecontainer state/diff tabs so they stay highlighted on click -fixed formatting for performance tab component details
1 parent a20b4e4 commit ae721ba

File tree

6 files changed

+172
-136
lines changed

6 files changed

+172
-136
lines changed

‎src/app/components/DiffRoute/Diff.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { diff, formatters } from 'jsondiffpatch';
33
// const jsondiffpatch = require('jsondiffpatch');
4-
import ReactHtmlParser from 'html-react-parser';
4+
import Parse from 'html-react-parser';
55
import {
66
CurrentTab,
77
DiffProps,
@@ -91,11 +91,12 @@ function Diff(props: DiffProps): JSX.Element {
9191

9292
const delta = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
9393

94-
const html = formatters.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
94+
const html = formatters.html.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
95+
console.log(html);
9596

9697
if (show)
97-
formatters.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
98-
else formatters.hideUnchanged(); // hides unchanged values
98+
formatters.html.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
99+
else formatters.html.hideUnchanged(); // hides unchanged values
99100

100101
if (previous === undefined || delta === undefined) {
101102
// if there has been no state changes on the target/hooked application, previous and delta would be undefined.
@@ -107,7 +108,7 @@ function Diff(props: DiffProps): JSX.Element {
107108
</div>
108109
);
109110
}
110-
return <div>{ReactHtmlParser(html)}</div>; // ReactHTMLParser from 'react-html-parser' package converts the HTML string into a react component.
111+
return <div>{Parse(html)}</div>; // HTMLReactParser from 'html-react-parser' package converts the HTML string into a react component.
111112
}
112113

113114
export default Diff;

‎src/app/components/DiffRoute/DiffRoute.tsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,25 @@ import { DiffRouteProps } from '../../FrontendTypes';
1111
const DiffRoute = (props: DiffRouteProps): JSX.Element => (
1212
<div className='diff-container'>
1313
<div className='navbar'>
14-
<NavLink className='router-link' to='/diff'>
14+
<NavLink
15+
className={(navData) => (navData.isActive ? 'is-active router-link' : 'router-link')}
16+
to='/diff/tree'
17+
>
1518
Tree
1619
</NavLink>
17-
<NavLink className='router-link' to='/diff/diffRaw'>
20+
<NavLink
21+
className={(navData) => (navData.isActive ? 'is-active router-link' : 'router-link')}
22+
to='/diff/diffRaw'
23+
>
1824
Raw
1925
</NavLink>
2026
</div>
21-
<Routes>
22-
<Route path='/diff/diffRaw' element={<Diff snapshot={props.snapshot} show />} />
23-
<Route path='/diff' element={<Diff snapshot={props.snapshot} show={false} />} />
24-
</Routes>
27+
<div>
28+
<Routes>
29+
<Route path='/diffRaw' element={<Diff snapshot={props.snapshot} show />} />
30+
<Route path='/tree' element={<Diff snapshot={props.snapshot} show={false} />} />
31+
</Routes>
32+
</div>
2533
</div>
2634
);
2735

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -253,17 +253,30 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
253253
return (
254254
<>
255255
<div className='performance-nav-bar-container'>
256-
<NavLink className='router-link-performance' end to='/performance/'>
256+
<NavLink
257+
className={(navData) =>
258+
navData.isActive ? 'is-active router-link-performance' : 'router-link-performance'
259+
}
260+
end
261+
to='/performance/'
262+
>
257263
Snapshots View
258264
</NavLink>
259265
<NavLink
260-
className='router-link-performance'
266+
className={(navData) =>
267+
navData.isActive ? 'is-active router-link-performance' : 'router-link-performance'
268+
}
261269
id='router-link-performance-comparison'
262270
to='/performance/comparison'
263271
>
264272
Comparison View
265273
</NavLink>
266-
<NavLink className='router-link-performance' to='/performance/componentdetails'>
274+
<NavLink
275+
className={(navData) =>
276+
navData.isActive ? 'is-active router-link-performance' : 'router-link-performance'
277+
}
278+
to='/performance/componentdetails'
279+
>
267280
Component Details
268281
</NavLink>
269282
</div>

‎src/app/containers/StateContainer.tsx

Lines changed: 44 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -23,38 +23,53 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
2323
return (
2424
<div className='state-container'>
2525
<div className='main-navbar-container'>
26-
<div className='main-navbar-text' />
27-
<div className='main-navbar'>
28-
<NavLink className='main-router-link' to='/'>
29-
State
30-
</NavLink>
31-
<NavLink className='main-router-link' to='/diff'>
32-
Diff
33-
</NavLink>
34-
</div>
35-
</div>
36-
<Routes>
37-
<Route path='/diff/*' element={
26+
<div className='main-navbar-text' />
27+
<div className='main-navbar'>
28+
<NavLink
29+
className={(navData) =>
30+
navData.isActive ? 'is-active main-router-link' : 'main-router-link'
31+
}
32+
to='/'
33+
>
34+
State
35+
</NavLink>
36+
<NavLink
37+
className={(navData) =>
38+
navData.isActive ? 'is-active main-router-link' : 'main-router-link'
39+
}
40+
to='/diff'
41+
>
42+
Diff
43+
</NavLink>
44+
</div>
45+
</div>
46+
<Routes>
47+
<Route
48+
path='/diff/*'
49+
element={
3850
<div>
3951
<DiffRoute snapshot={snapshot} />
4052
{/* <Outlet/> */}
41-
</div>} />
42-
<Route
43-
path='/*'
44-
element={
45-
<div height="100%">
46-
<StateRoute
47-
webMetrics={webMetrics}
48-
viewIndex={viewIndex}
49-
snapshot={snapshot}
50-
hierarchy={hierarchy}
51-
snapshots={snapshots}
52-
currLocation={currLocation}
53-
/>
54-
{/* <Outlet/> */}
55-
</div>}
56-
/>
57-
</Routes>
53+
</div>
54+
}
55+
/>
56+
<Route
57+
path='/*'
58+
element={
59+
<div style={{ height: '100%' }}>
60+
<StateRoute
61+
webMetrics={webMetrics}
62+
viewIndex={viewIndex}
63+
snapshot={snapshot}
64+
hierarchy={hierarchy}
65+
snapshots={snapshots}
66+
currLocation={currLocation}
67+
/>
68+
{/* <Outlet/> */}
69+
</div>
70+
}
71+
/>
72+
</Routes>
5873
</div>
5974
);
6075
};

‎src/app/styles/components/_renderingFrequency.scss

Lines changed: 90 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,115 @@
11
.borderStyling {
2-
border-radius: 5px;
3-
border: 1px solid rgba(184, 196, 194, 0.25);
4-
box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
5-
width: 53vw;
2+
border-radius: 5px;
3+
border: 1px solid rgba(184, 196, 194, 0.25);
4+
box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
5+
width: 53vw;
66
}
77

88
.borderCheck {
9-
border: 1px solid rgba(184, 196, 194, 0.25);
10-
box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
11-
padding: 5px;
12-
width: 10vw;
13-
height: 25vw;
14-
overflow-y: scroll;
15-
overflow-wrap: break-word;
16-
overscroll-behavior: contain;
9+
border: 1px solid rgba(184, 196, 194, 0.25);
10+
box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
11+
padding: 5px;
12+
width: 10vw;
13+
height: 25vw;
14+
overflow-y: scroll;
15+
overflow-wrap: break-word;
16+
overscroll-behavior: contain;
1717
}
1818

1919
.DataComponent {
20-
padding-left: 30px;
21-
display: flex;
22-
flex-direction: row;
23-
flex-wrap: wrap;
24-
width: 50vw;
25-
height: 40vw;
26-
overflow-y: scroll;
27-
overflow-wrap: break-word;
28-
overscroll-behavior: contain;
20+
padding-left: 30px;
21+
display: flex;
22+
flex-direction: row;
23+
flex-wrap: wrap;
24+
width: 50vw;
25+
height: 40vw;
26+
overflow-y: scroll;
27+
overflow-wrap: break-word;
28+
overscroll-behavior: contain;
2929
}
3030

31-
3231
.StyledGridElement {
33-
display: flex;
34-
align-items: center;
35-
justify-content: space-between;
36-
background: #242529;
37-
padding: 20px;
38-
height: 5vh;
39-
margin: 20px 10px;
40-
font-family: 'Roboto', sans-serif;
32+
display: flex;
33+
align-items: center;
34+
justify-content: space-between;
35+
background: $background-color-strong;
36+
padding: 20px;
37+
height: 5vh;
38+
margin: 20px 10px;
39+
font-family: 'Roboto', sans-serif;
4140

42-
h3 {
43-
color: #FFFFFF;
44-
margin-bottom: 5px;
45-
margin-top: 5px;
46-
text-transform: uppercase;
47-
font-size: 16px;
48-
font-weight: 500;
49-
}
41+
h3 {
42+
color: $primary-color;
43+
margin-bottom: 5px;
44+
margin-top: 5px;
45+
text-transform: uppercase;
46+
font-size: 16px;
47+
font-weight: 500;
48+
}
5049

51-
h4 {
52-
color: #ff0001;
53-
margin-bottom: 5px;
54-
margin-top: 5px;
55-
font-weight: 300;
56-
}
50+
h4 {
51+
color: $primary-color-strong;
52+
margin-bottom: 5px;
53+
margin-top: 5px;
54+
font-weight: 300;
55+
}
5756

58-
p {
59-
color: #ff0001;
60-
line-height: 20px;
61-
text-align: center;
62-
font-size: 18px;
63-
line-height: 18px;
64-
}
57+
p {
58+
color: $primary-color-strong;
59+
line-height: 20px;
60+
text-align: center;
61+
font-size: 18px;
62+
line-height: 18px;
63+
}
6564
}
6665

6766
.ExpandStyledGridElement {
68-
display: flex;
69-
flex-direction: row;
70-
align-items: center;
71-
justify-content: space-between;
72-
background: #242529;
73-
padding: 20px;
74-
margin: 20px 10px;
75-
font-family: 'Roboto', sans-serif;
67+
display: flex;
68+
flex-direction: row;
69+
align-items: center;
70+
justify-content: space-between;
71+
background: #242529;
72+
padding: 20px;
73+
margin: 20px 10px;
74+
font-family: 'Roboto', sans-serif;
7675

77-
h3 {
78-
color: #ff0001;
79-
margin-bottom: 5px;
80-
margin-top: 5px;
81-
text-transform: uppercase;
82-
font-size: 16px;
83-
font-weight: 500;
84-
}
76+
h3 {
77+
color: #ff0001;
78+
margin-bottom: 5px;
79+
margin-top: 5px;
80+
text-transform: uppercase;
81+
font-size: 16px;
82+
font-weight: 500;
83+
}
8584

86-
h4 {
87-
color: #ff0001;
88-
margin-bottom: 5px;
89-
margin-top: 5px;
90-
font-weight: 300;
91-
}
85+
h4 {
86+
color: #ff0001;
87+
margin-bottom: 5px;
88+
margin-top: 5px;
89+
font-weight: 300;
90+
}
9291

93-
p {
94-
color: white;
95-
line-height: 20px;
96-
text-align: center;
97-
font-size: 18px;
98-
line-height: 18px;
99-
}
92+
p {
93+
color: white;
94+
line-height: 20px;
95+
text-align: center;
96+
font-size: 18px;
97+
line-height: 18px;
98+
}
10099
}
101100

102101
.RenderRight {
103-
cursor: pointer;
104-
padding-right: 5px;
105-
border-right: 5px;
106-
//background: $blue-color-gradient;
107-
width: 50px;
108-
padding: 0 0.5em;
109-
right: 10%;
110-
opacity: 70%;
111-
transition: 0.3s;
102+
cursor: pointer;
103+
padding-right: 5px;
104+
border-right: 5px;
105+
//background: $blue-color-gradient;
106+
width: 50px;
107+
padding: 0 0.5em;
108+
right: 10%;
109+
opacity: 70%;
110+
transition: 0.3s;
112111
}
113112

114113
.RenderRight:hover {
115-
opacity: 100%;
116-
}
114+
opacity: 100%;
115+
}

0 commit comments

Comments
 (0)