Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ae721ba

Browse files
-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
};
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)

AltStyle によって変換されたページ (->オリジナル) /