Skip to content

Commit bfba638

Browse files
jrosengrantjrosengrant
committed
merging with origin/dependencies
2 parents 90473fa + 60365d8 commit bfba638

File tree

9 files changed

+92
-131
lines changed

9 files changed

+92
-131
lines changed

‎src/app/components/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { MemoryRouter as Router } from 'react-router-dom';
2+
import { MemoryRouter as Router } from 'react-router-dom';
33
import MainContainer from '../containers/MainContainer';
44
import { ThemeProvider } from '@mui/material/styles';
55
import theme from './theme';

‎src/app/components/DiffRoute.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,17 @@
1111
// const DiffRoute = (props: DiffRouteProps): JSX.Element => (
1212
// <Router>
1313
// <div className='navbar'>
14-
// <NavLink className='router-link' activeClassName='is-active' exact to='/'>
14+
// <NavLink className='router-link' activeClassName='is-active' to='/'>
1515
// Tree
1616
// </NavLink>
1717
// <NavLink className='router-link' activeClassName='is-active' to='/diffRaw'>
1818
// Raw
1919
// </NavLink>
2020
// </div>
21-
// <Switch>
22-
// <Route path='/diffRaw' render={() => <Diff snapshot={props.snapshot} show />} />
23-
// <Route path='/' render={() => <Diff snapshot={props.snapshot} show={false} />} />
24-
// </Switch>
21+
// <Routes>
22+
// <Route path='/diffRaw' element={() => <Diff snapshot={props.snapshot} show />} />
23+
// <Route path='/' element={() => <Diff snapshot={props.snapshot} show={false} />} />
24+
// </Routes>
2525
// </Router>
2626
// );
2727

‎src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import JSONTree from 'react-json-tree';
2+
import { JSONTree } from 'react-json-tree';
33

44
/*
55
Code that show's the tooltip of our JSON tree

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@
33
// @ts-nocheck
44
import React, { useEffect } from 'react';
55
// formatting findDiff return data to show the changes with colors, aligns with actions.tsx
6-
import { diff, formatters } from 'jsondiffpatch';
6+
import { diff } from 'jsondiffpatch';
7+
const jsondiffpatch = require('jsondiffpatch');
8+
// import * as jsondiffpatch from 'jsondiffpatch';
9+
// import { diff } from 'jsondiffpatch';
10+
// import jsondiffpatch from 'jsondiffpatch/formatters';
11+
// const jsondiffpatch = require('jsondiffpatch');
712
import * as d3 from 'd3';
813
import { DefaultMargin } from '../../FrontendTypes';
914
import { useDispatch } from 'react-redux';
@@ -154,9 +159,8 @@ function History(props: Record<string, unknown>): JSX.Element {
154159
statelessCleaning(snapshots[index - 1]),
155160
statelessCleaning(snapshots[index]),
156161
);
157-
158162
const changedState = findStateChangeObj(delta); // determines if delta had any stateful changes
159-
const html = formatters.html.format(changedState[0]); // formats the difference into html string
163+
const html = jsondiffpatch.formatters(changedState[0]); // formats the difference into html string
160164
return html; // return html string
161165
}
162166

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
173173
<form className='routesForm' id='routes-formcontrol'>
174174
<label id='routes-dropdown'>Select Snapshot: </label>
175175
<select
176-
labelId='demo-simple-select-label'
176+
labelId='demo-simple-select-label' //come back maybe
177177
id='snapshot-select'
178178
onChange={(e) => setSnapshot(e.target.value)}
179179
>
@@ -235,7 +235,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
235235
// Cursor position in window updates position of the tool tip.
236236
dispatch(onHover(data.componentData[bar.key].rtid));
237237
if (tooltipTimeout) clearTimeout(tooltipTimeout);
238-
const top;
238+
let top;
239239
if (snapshot === 'All Snapshots') {
240240
top = event.clientY - margin.top - bar.height;
241241
} else {

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

Lines changed: 33 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -199,33 +199,6 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
199199
dispatch(setCurrentTabInApp('performance')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'performance' to facilitate render.
200200
}, [dispatch]);
201201

202-
const renderComparisonBargraph = () => {
203-
if (hierarchy && series !== false) {
204-
return (
205-
<BarGraphComparison
206-
comparison={allStorage()}
207-
data={data}
208-
width={width}
209-
height={height}
210-
setSeries={setSeries}
211-
series={series}
212-
setAction={setAction}
213-
/>
214-
);
215-
}
216-
return (
217-
<BarGraphComparisonActions
218-
comparison={allStorage()}
219-
data={getActions()}
220-
width={width}
221-
height={height}
222-
setSeries={setSeries}
223-
action={action}
224-
setAction={setAction}
225-
/>
226-
);
227-
};
228-
229202
const allRoutes = []; // create allRoutes variable to hold urls
230203
const filteredSnapshots = [];
231204

@@ -267,34 +240,6 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
267240
if (holdData) data.barStack = holdData; // assign holdData to data.barStack to be used later to create graph
268241
}
269242

270-
const renderBargraph = (): JSX.Element | null => {
271-
if (hierarchy) {
272-
return (
273-
<div>
274-
<BarGraph
275-
data={data}
276-
width={width}
277-
height={height}
278-
comparison={allStorage()}
279-
setRoute={setRoute}
280-
allRoutes={allRoutes}
281-
filteredSnapshots={filteredSnapshots}
282-
setSnapshot={setSnapshot}
283-
snapshot={snapshot}
284-
/>
285-
</div>
286-
);
287-
}
288-
return null;
289-
};
290-
291-
const renderComponentDetailsView = () => {
292-
if (hierarchy) {
293-
return <RenderingFrequency data={data.componentData} />;
294-
}
295-
return <div className='noState'>{NO_STATE_MSG}</div>;
296-
};
297-
298243
const renderForTutorial = () => {
299244
// This will redirect to the proper tabs during the tutorial
300245
// Updated redirect to Navigate v23 redirect no longer supported in react router dom after v6
@@ -304,7 +249,7 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
304249
};
305250

306251
return (
307-
<Router>
252+
<>
308253
<div className='performance-nav-bar-container'>
309254
<NavLink className='router-link-performance' end to='/'>
310255
Snapshots View
@@ -327,11 +272,39 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
327272
{renderForTutorial()}
328273

329274
<Routes>
330-
<Route exact path='/comparison' render={renderComparisonBargraph} />
331-
<Route exact path='/componentdetails' render={renderComponentDetailsView} />
332-
<Route exact path='/' render={renderBargraph} />
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 } />
333306
</Routes>
334-
</Router>
307+
</>
335308
);
336309
};
337310

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

Lines changed: 41 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,16 @@ const NO_STATE_MSG = 'No state change detected. Trigger an event to change state
2626
const StateRoute = (props: StateRouteProps) => {
2727
const {
2828
snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
29-
propsHierarchy: hierarchy, // from 'tabs[currentTab]' object in 'MainContainer'
29+
hierarchy: propsHierarchy, // from 'tabs[currentTab]' object in 'MainContainer'
3030
snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
31-
propsViewIndex: viewIndex, // from 'tabs[currentTab]' object in 'MainContainer'
31+
viewIndex: propsViewIndex, // from 'tabs[currentTab]' object in 'MainContainer'
3232
webMetrics, // from 'tabs[currentTab]' object in 'MainContainer'
3333
currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
3434
} = props;
3535

3636
const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
37-
const { tabsHierarchy: hierarchy, sliderIndex, tabsViewIndex: viewIndex } = tabs[currentTab];
38-
const hierarchy = propsHierarchy || tabsHierarchy; // JR: RETURN TO THIS: alias to deconstruct from props and tab with the same name, aliases were deleted above
37+
const { hierarchy: tabsHierarchy, sliderIndex, viewIndex: tabsViewIndex } = tabs[currentTab];
38+
const hierarchy = propsHierarchy || tabsHierarchy; //JR: RETURN TO THIS: alias to deconstruct from props and tab with the same name, aliases were deleted above
3939
const viewIndex = propsViewIndex || tabsViewIndex;
4040

4141
const renderComponentMap = () => {
@@ -57,29 +57,7 @@ const StateRoute = (props: StateRouteProps) => {
5757
return <div className='noState'>{NO_STATE_MSG}</div>; // otherwise, inform the user that there has been no state change in the target/hooked application.
5858
};
5959

60-
const renderHistory: JSX.Element = () => {
61-
if (hierarchy) {
62-
// if hierarchy was initialized/created render the history
63-
return (
64-
<ParentSize>
65-
{({ width, height }) => (
66-
<History
67-
width={width}
68-
height={height}
69-
hierarchy={hierarchy}
70-
// Commented out dispatch that was prop drilled as conversion to RTK might invalidate need for prop drilling to access dispatch
71-
// dispatch={dispatch}
72-
sliderIndex={sliderIndex}
73-
viewIndex={viewIndex}
74-
currLocation={currLocation}
75-
snapshots={snapshots}
76-
/>
77-
)}
78-
</ParentSize>
79-
);
80-
}
81-
return <div className='noState'>{NO_STATE_MSG}</div>; // otherwise, inform the user that there has been no state change in the target/hooked application.
82-
};
60+
8361

8462
const renderTree = () => {
8563
if (hierarchy) {
@@ -203,32 +181,10 @@ const StateRoute = (props: StateRouteProps) => {
203181
);
204182
};
205183

206-
const renderPerfView = () => {
207-
if (hierarchy) {
208-
// if hierarchy was initialized/created render the PerformanceVisx
209-
return (
210-
<ParentSize>
211-
{({ width, height }) => (
212-
<PerformanceVisx
213-
width={width}
214-
height={height}
215-
snapshots={snapshots}
216-
// note: is propdrilled within Performance Visx, but doesn't seem to be used
217-
changeSlider={changeSlider}
218-
changeView={changeView}
219-
hierarchy={hierarchy}
220-
/>
221-
)}
222-
</ParentSize>
223-
);
224-
}
225-
return <div className='noState'>{NO_STATE_MSG}</div>; // otherwise, inform the user that there has been no state change in the target/hooked application.
226-
};
227-
228184
return (
229-
<Router>
185+
<>
230186
<div className='navbar'>
231-
<NavLink className='router-link map-tab' end to='/'>
187+
<NavLink to='/' className='router-link map-tab' end>
232188
Map
233189
</NavLink>
234190
<NavLink className='router-link performance-tab' to='/performance'>
@@ -245,13 +201,41 @@ const StateRoute = (props: StateRouteProps) => {
245201
</NavLink>
246202
</div>
247203
<Routes>
248-
<Route exact path='/performance' render={renderPerfView} />
249-
<Route exact path='/history' render={renderHistory} />
250-
<Route exact path='/webMetrics' render={renderWebMetrics} />
251-
<Route exact path='/tree' render={renderTree} />
252-
<Route exact path='/' render={renderComponentMap} />
204+
<Route path='/performance' element={hierarchy ?
205+
<ParentSize>
206+
{({ width, height }) => (
207+
<PerformanceVisx
208+
width={width}
209+
height={height}
210+
snapshots={snapshots}
211+
// note: is propdrilled within Performance Visx, but doesn't seem to be used
212+
changeSlider={changeSlider}
213+
changeView={changeView}
214+
hierarchy={hierarchy}
215+
/>
216+
)}
217+
</ParentSize> : <div className='noState'>{NO_STATE_MSG}</div>} />
218+
<Route path='/history' element={ hierarchy ?
219+
<ParentSize>
220+
{({ width, height }) => (
221+
<History
222+
width={width}
223+
height={height}
224+
hierarchy={hierarchy}
225+
// Commented out dispatch that was prop drilled as conversion to RTK might invalidate need for prop drilling to access dispatch
226+
// dispatch={dispatch}
227+
sliderIndex={sliderIndex}
228+
viewIndex={viewIndex}
229+
currLocation={currLocation}
230+
snapshots={snapshots}
231+
/>
232+
)}
233+
</ParentSize> : <div className='noState'>{NO_STATE_MSG}</div>} />
234+
<Route path='/webMetrics' component={renderWebMetrics} />
235+
<Route path='/tree' component={renderTree} />
236+
<Route path='/' component={renderComponentMap} />
253237
</Routes>
254-
</Router>
238+
</>
255239
);
256240
};
257241

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect } from 'react';
2-
import JSONTree from 'react-json-tree'; // React JSON Viewer Component
2+
import { JSONTree } from 'react-json-tree'; // React JSON Viewer Component
33
import { setCurrentTabInApp } from '../../slices/mainSlice';
44
import { useDispatch } from 'react-redux';
55
import { TreeProps } from '../../FrontendTypes';

‎src/app/containers/StateContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
4848
/>
4949
{/* )}
5050
/>
51-
</Switch> */}
51+
</Routes> */}
5252
</div>
5353
// </Router>
5454
);

0 commit comments

Comments
 (0)