Skip to content

Commit d5f3d1e

Browse files
authored
Merge pull request #19 from oslabs-beta/feature/garrett
Feature/garrett
2 parents e6125c2 + 95ed895 commit d5f3d1e

File tree

15 files changed

+458
-751
lines changed

15 files changed

+458
-751
lines changed

src/app/components/Buttons/Tutorial.tsx

Lines changed: 1 addition & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,8 @@ import { Component } from 'react';
77
import 'intro.js/introjs.css';
88
import { TutorialProps, TutorialState, StepsObj } from '../../FrontendTypes';
99
import { Button } from '@mui/material';
10-
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
1110
const { Steps } = require('intro.js-react'); //Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly. The package 'intro.js-react' is small React wrapper around Intro.js. The wrapper provides support for both steps and hints. https://introjs.com/docs/
1211
import { setCurrentTabInApp, tutorialSaveSeriesToggle } from '../../slices/mainSlice';
13-
import { useDispatch, useSelector } from 'react-redux';
1412
import { HelpCircle } from 'lucide-react';
1513

1614
/*
@@ -105,7 +103,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
105103
},
106104
{
107105
title: 'Toggle Record Button',
108-
element: '#recordBtn',
106+
element: '.record-button-container',
109107
intro:
110108
'<ul><li>Toggle record button to pause state changes on target application</li></ul>',
111109
position: 'right',
@@ -195,31 +193,6 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
195193
'<ul><li>Here we can analyze the render times of our app</li> <li>This is the current series of state changes within our app</li> <li>Mouse over the bargraph elements for details on each specific component</li></ul>',
196194
position: 'top',
197195
},
198-
{
199-
title: 'Saving Series & Actions',
200-
element: '#seriesname',
201-
intro: '<ul><li>We can now give our series a name or leave it at the default</li></ul>',
202-
position: 'top',
203-
},
204-
{
205-
title: 'Saving Series & Actions',
206-
element: '.actionname',
207-
intro:
208-
'<ul><li>If we wish to save a specific action to compare later, give it a name here</li></ul>',
209-
position: 'top',
210-
},
211-
212-
{
213-
title: 'Comparison Tab',
214-
element: '#router-link-performance-comparison',
215-
intro: "<ul><li>Now let's head over to the comparison tab</li></ul>",
216-
position: 'top',
217-
},
218-
{
219-
title: 'Comparing Series',
220-
intro: '<ul><li>Here we can select a saved series or action to compare</li></ul>',
221-
position: 'top',
222-
},
223196
];
224197
break;
225198
case 'webmetrics':

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

Lines changed: 75 additions & 133 deletions
Large diffs are not rendered by default.
Lines changed: 68 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,76 @@
1-
/* eslint-disable jsx-a11y/label-has-associated-control */
21
import React from 'react';
3-
import { LinkControlProps, ControlStyles, DropDownStyle, Node } from '../../../FrontendTypes';
4-
// Font size of the Controls label and Dropdowns
5-
const controlStyles: ControlStyles = {
6-
//fontSize: '16px',
7-
padding: '10px',
8-
};
9-
10-
const dropDownStyle: DropDownStyle = {
11-
margin: '0.1em',
12-
//fontSize: '16px',
13-
fontFamily: 'Roboto, sans-serif',
14-
borderRadius: '4px',
15-
borderStyle: 'solid',
16-
borderWidth: '1px',
17-
backgroundColor: '#d9d9d9',
18-
color: '#161617',
19-
padding: '2px',
20-
};
212

22-
// use BFS to put all the nodes under snapShots(which is the tree node) into an array
23-
const nodeList: Node[] = [];
24-
25-
const collectNodes = (node: Node): void => {
26-
nodeList.splice(0, nodeList.length);
27-
/* We used the .splice method here to ensure that nodeList
28-
did not accumulate with page refreshes */
29-
nodeList.push(node);
30-
for (let i = 0; i < nodeList.length; i += 1) {
31-
const cur = nodeList[i];
32-
if (cur.children?.length > 0) {
33-
cur.children.forEach((child) => nodeList.push(child));
3+
const LinkControls = ({
4+
linkType,
5+
stepPercent,
6+
setOrientation,
7+
setLinkType,
8+
setStepPercent,
9+
setSelectedNode,
10+
snapShots,
11+
}) => {
12+
const collectNodes = (node) => {
13+
const nodeList = [];
14+
nodeList.push(node);
15+
for (let i = 0; i < nodeList.length; i += 1) {
16+
const cur = nodeList[i];
17+
if (cur.children?.length > 0) {
18+
cur.children.forEach((child) => nodeList.push(child));
19+
}
3420
}
35-
}
36-
};
21+
return nodeList;
22+
};
3723

38-
export default function LinkControls({
39-
linkType, // from linkType local state (initially 'vertical') in 'ComponentMap'
40-
stepPercent, // from stepPercent local state (initially '0.5') in 'ComponentMap'
41-
setOrientation, // from the orientation local state in 'ComponentMap'
42-
setLinkType, // from the linkType local state in 'ComponentMap'
43-
setStepPercent, // from the stepPercent local state in 'ComponentMap'
44-
setSelectedNode, // from the selectedNode local state in 'ComponentMap'
45-
snapShots,
46-
}: LinkControlProps): JSX.Element {
47-
collectNodes(snapShots);
24+
const nodeList = collectNodes(snapShots);
4825

4926
return (
50-
<div className='comp-map-options' style={controlStyles}>
51-
{' '}
52-
{/* This is a non-breaking space - Prevents an automatic line break at this position */}
53-
&nbsp;&nbsp;
54-
<label>Orientation:</label>{' '}
55-
{/* Toggle record button to pause state changes on target application */}
56-
{/* Controls for the Orientation selection */}
57-
&nbsp;
58-
<select
59-
onClick={(e) => e.stopPropagation()}
60-
onChange={(e) => setOrientation(e.target.value)}
61-
style={dropDownStyle}
62-
>
63-
<option value='vertical'>Vertical</option>
64-
<option value='horizontal'>Horizontal</option>
65-
</select>
66-
&nbsp;&nbsp;
67-
<label>Link:</label> {/* Controls for the link selections. */}
68-
&nbsp;
69-
<select
70-
onClick={(e) => e.stopPropagation()}
71-
onChange={(e) => setLinkType(e.target.value)}
72-
style={dropDownStyle}
73-
>
74-
<option value='step'>Step</option>
75-
<option value='diagonal'>Diagonal</option>
76-
<option value='line'>Line</option>
77-
</select>
78-
<label> Select:</label> {/* Controls for the select selections. */}
79-
&nbsp;
80-
<select
81-
id='selectInput'
82-
name='nodeOptions'
83-
onChange={(e) => setSelectedNode(e.target.value)}
84-
style={dropDownStyle}
85-
>
86-
{nodeList.map(
87-
(node) =>
88-
node.children.length > 0 && (
27+
<div className='link-controls'>
28+
<div className='control-group'>
29+
<label className='control-label'>Orientation:</label>
30+
<select
31+
onClick={(e) => e.stopPropagation()}
32+
onChange={(e) => setOrientation(e.target.value)}
33+
className='control-select'
34+
>
35+
<option value='vertical'>Vertical</option>
36+
<option value='horizontal'>Horizontal</option>
37+
</select>
38+
</div>
39+
40+
<div className='control-group'>
41+
<label className='control-label'>Link:</label>
42+
<select
43+
onClick={(e) => e.stopPropagation()}
44+
onChange={(e) => setLinkType(e.target.value)}
45+
className='control-select'
46+
>
47+
<option value='step'>Step</option>
48+
<option value='diagonal'>Diagonal</option>
49+
<option value='line'>Line</option>
50+
</select>
51+
</div>
52+
53+
<div className='control-group'>
54+
<label className='control-label'>Select:</label>
55+
<select
56+
id='selectInput'
57+
name='nodeOptions'
58+
onChange={(e) => setSelectedNode(e.target.value)}
59+
className='control-select'
60+
>
61+
{nodeList.map((node) =>
62+
node.children.length > 0 ? (
8963
<option key={node.name} value={node.name}>
9064
{node.name}
9165
</option>
92-
),
93-
)}
94-
</select>
95-
{/* This is the slider control for the step option */}
66+
) : null,
67+
)}
68+
</select>
69+
</div>
70+
9671
{linkType === 'step' && (
97-
<>
98-
&nbsp;&nbsp;
99-
<label>Step:</label>
100-
&nbsp;
72+
<div className='control-group'>
73+
<label className='control-label'>Step:</label>
10174
<input
10275
onClick={(e) => e.stopPropagation()}
10376
type='range'
@@ -107,9 +80,12 @@ export default function LinkControls({
10780
onChange={(e) => setStepPercent(Number(e.target.value))}
10881
value={stepPercent}
10982
disabled={linkType !== 'step'}
83+
className='control-range'
11084
/>
111-
</>
85+
</div>
11286
)}
11387
</div>
11488
);
115-
}
89+
};
90+
91+
export default LinkControls;

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

Lines changed: 46 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,65 @@
11
import React from 'react';
22
import { JSONTree } from 'react-json-tree';
33

4-
const colors = {
5-
scheme: 'paraiso',
6-
author: 'jan t. sott',
7-
base00: '#2f1e2e',
8-
base01: '#41323f',
9-
base02: '#4f424c',
10-
base03: '#776e71',
11-
base04: '#8d8687',
12-
base05: '#a39e9b',
13-
base06: '#b9b6b0',
14-
base07: '#e7e9db',
15-
base08: '#ef6155',
16-
base09: '#824508',
17-
base0A: '#fec418',
18-
base0B: '#48b685',
19-
base0C: '#5bc4bf',
20-
base0D: '#06b6ef',
21-
base0E: '#815ba4',
22-
base0F: '#e96ba8',
23-
};
4+
const ToolTipDataDisplay = ({ data }) => {
5+
if (!data) return null;
246

25-
const ToolTipDataDisplay = ({ containerName, dataObj }) => {
26-
// If there's no data to display, don't render anything
27-
if (
28-
!dataObj ||
29-
(Array.isArray(dataObj) && dataObj.length === 0) ||
30-
Object.keys(dataObj).length === 0
31-
) {
32-
return null;
33-
}
7+
const jsonTheme = {
8+
scheme: 'custom',
9+
base00: 'transparent',
10+
base0B: '#1f2937', // dark navy for strings
11+
base0D: '#60a5fa', // Blue for keys
12+
base09: '#f59e0b', // Orange for numbers
13+
base0C: '#EF4444', // red for nulls
14+
};
3415

3516
const formatReducerData = (reducerStates) => {
36-
// Transform the array of reducers into an object with hook names as keys
3717
return reducerStates.reduce((acc, reducer) => {
38-
acc[reducer.hookName || 'Reducer'] = {
39-
state: reducer.state,
40-
};
18+
acc[reducer.hookName || 'Reducer'] = reducer.state;
4119
return acc;
4220
}, {});
4321
};
4422

45-
const printableObject = {};
46-
47-
if (containerName === 'Reducers') {
48-
if (!dataObj || dataObj.length === 0) {
23+
const renderSection = (title, content, isReducer = false) => {
24+
if (
25+
!content ||
26+
(Array.isArray(content) && content.length === 0) ||
27+
Object.keys(content).length === 0
28+
) {
4929
return null;
5030
}
51-
printableObject[containerName] = formatReducerData(dataObj);
52-
} else {
53-
// Handle normal state/props
54-
const data = {};
55-
for (const key in dataObj) {
56-
if (typeof dataObj[key] === 'string') {
57-
try {
58-
data[key] = JSON.parse(dataObj[key]);
59-
} catch {
60-
data[key] = dataObj[key];
61-
}
62-
} else {
63-
data[key] = dataObj[key];
64-
}
31+
32+
if (isReducer) {
33+
const formattedData = formatReducerData(content);
34+
return (
35+
<div className='tooltip-section'>
36+
{Object.entries(formattedData).map(([hookName, state]) => (
37+
<div key={hookName}>
38+
<div className='tooltip-section-title'>{hookName}</div>
39+
<div className='tooltip-data'>
40+
<JSONTree data={state} theme={jsonTheme} hideRoot shouldExpandNode={() => true} />
41+
</div>
42+
</div>
43+
))}
44+
</div>
45+
);
6546
}
66-
printableObject[containerName] = data;
67-
}
47+
48+
return (
49+
<div className='tooltip-section'>
50+
<div className='tooltip-section-title'>{title}</div>
51+
<div className='tooltip-data'>
52+
<JSONTree data={content} theme={jsonTheme} hideRoot shouldExpandNode={() => true} />
53+
</div>
54+
</div>
55+
);
56+
};
6857

6958
return (
70-
<div className='tooltipData' key={`${containerName}-data-container`}>
71-
<JSONTree
72-
data={printableObject}
73-
theme={{ extend: colors, tree: () => ({ className: `tooltipData-JSONTree` }) }}
74-
shouldExpandNodeInitially={() => true}
75-
hideRoot={true}
76-
/>
59+
<div className='tooltip-container'>
60+
{renderSection('Props', data.componentData.props)}
61+
{renderSection('State', data.componentData.state || data.componentData.hooksState)}
62+
{renderSection(null, data.componentData.reducerStates, true)}
7763
</div>
7864
);
7965
};

src/app/components/StateRoute/StateRoute.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const StateRoute = (props: StateRouteProps) => {
7676
</NavLink>
7777
<NavLink
7878
className={(navData) =>
79-
navData.isActive ? 'is-active router-link map-tab' : 'router-link map-tab'
79+
navData.isActive ? 'is-active router-link performance' : 'router-link performance-tab'
8080
}
8181
to='/performance'
8282
>

src/app/components/TimeTravel/VerticalSlider.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ function VerticalSlider(props: MainSliderProps): JSX.Element {
5454
return (
5555
<Slider
5656
className='travel-slider'
57-
color='#0af548'
5857
vertical='true'
5958
reverse='true'
6059
height='100%'

0 commit comments

Comments
 (0)