Skip to content

Commit b7d5553

Browse files
morahgeistEivindDelFierroyididiaketemabrok3turtl3
committed
merged from Dev with new MUI
Co-authored-by: EivindDelFierro <[email protected]> Co-authored-by: yididiaketema <[email protected]> Co-authored-by: Sean Kelly <[email protected]>
2 parents b7d2f8a + 9a90d11 commit b7d5553

File tree

9 files changed

+211
-118
lines changed

9 files changed

+211
-118
lines changed

‎demo-app/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"webpack-dev-server": "^4.7.2"
2828
},
2929
"dependencies": {
30+
"@mui/styled-engine-sc": "^5.12.0",
3031
"express": "^4.17.2",
3132
"react": "^18.1.0",
3233
"react-dom": "^18.1.0",

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,4 +217,4 @@
217217
"web-vitals": "^1.1.0",
218218
"yarn": "^1.22.19"
219219
}
220-
}
220+
}

‎src/app/components/App.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import mainReducer from '../reducers/mainReducer.js';
66
import { InitialStateProps } from '../FrontendTypes';
77
import { ThemeProvider } from '@mui/material/styles';
88
import theme from './theme';
9+
import { ThemeProvider } from '@mui/material/styles';
10+
import theme from './theme';
911
// currentTab is the current active tab within Google Chrome.
1012
// This is used to decide what tab Reactime should be monitoring. This can be "locked"
1113
// currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc).
@@ -23,11 +25,11 @@ const initialState: InitialStateProps = {
2325
function App(): JSX.Element {
2426
return (
2527
<ThemeProvider theme={theme}>
26-
<Router>
27-
<StoreContext.Provider value={useReducer(mainReducer, initialState)}>
28-
<MainContainer />
29-
</StoreContext.Provider>
30-
</Router>
28+
<Router> {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
29+
<StoreContext.Provider value={useReducer(mainReducer, initialState)}> {/* we wrap our MainContainer with the provider so that we will be able to use the store context. We create our store by using useReducer and passing it into the value property */}
30+
<MainContainer />
31+
</StoreContext.Provider>
32+
</Router>
3133
</ThemeProvider>
3234
);
3335
}

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

Lines changed: 28 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
/// <reference lib="dom" />
33
/* eslint-disable no-param-reassign */
44
import React, { useEffect, useState } from 'react';
5+
import React, { useEffect, useState } from 'react';
56
import { BarStack } from '@visx/shape';
67
import { Group } from '@visx/group';
78
import { Grid } from '@visx/grid';
@@ -16,6 +17,12 @@ import MenuItem from '@mui/material/MenuItem';
1617
import FormControl from '@mui/material/FormControl';
1718
import { useTheme } from '@mui/material/styles';
1819
import { Button } from '@mui/material';
20+
import { styled } from '@mui/system';
21+
import Select from '@mui/material/Select';
22+
import MenuItem from '@mui/material/MenuItem';
23+
import FormControl from '@mui/material/FormControl';
24+
import { useTheme } from '@mui/material/styles';
25+
import { Button } from '@mui/material';
1926
import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
2027
import { useStoreContext } from '../../../store';
2128
import {
@@ -56,6 +63,13 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
5663
//tracking whether or not the clear series button is clicked
5764
const [buttonLoad, setButtonLoad] = useState(false);
5865

66+
const theme = useTheme();
67+
const [snapshots] = useState(0);
68+
const [open, setOpen] = useState(false);
69+
const [picOpen, setPicOpen] = useState(false);
70+
//tracking whether or not the clear series button is clicked
71+
const [buttonLoad, setButtonLoad] = useState(false);
72+
5973
const theme = useTheme();
6074
useEffect(() => {
6175
dispatch(setCurrentTabInApp('performance-comparison'));
@@ -122,25 +136,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
122136
snapshotIdScale.rangeRound([0, xMax]);
123137
renderingScale.range([yMax, 0]);
124138

125-
// useStyles will change the styling on save series dropdown feature
126-
// const useStyles = makeStyles((theme) => ({
127-
// formControl: {
128-
// margin: theme.spacing(1),
129-
// minWidth: 80,
130-
// height: 30,
131-
// },
132-
// select: {
133-
// minWidth: 80,
134-
// fontSize: '.75rem',
135-
// fontWeight: 200,
136-
// border: '1px solid grey',
137-
// borderRadius: 4,
138-
// color: 'grey',
139-
// height: 30,
140-
// },
141-
// }));
142139

143-
// const classes = useStyles();
144140

145141
const StyledFormControl = styled(FormControl)(({ theme }) => ({
146142
margin: theme.spacing(1),
@@ -203,22 +199,6 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
203199
return data.barStack;
204200
}
205201

206-
// const animateButton = (e: MouseEvent) => {
207-
// e.preventDefault();
208-
// const target = e.target as HTMLButtonElement;
209-
// if (target) {
210-
// target.classList.add('animate');
211-
// target.innerHTML = 'Deleted!';
212-
// setTimeout(() => {
213-
// target.innerHTML = 'Clear All Series';
214-
// target.classList.remove('animate');
215-
// }, 1000);
216-
// }
217-
// };
218-
// const classname = document.getElementsByClassName('delete-button');
219-
// for (let i = 0; i < classname.length; i += 1) {
220-
// classname[i].addEventListener('click', animateButton, false);
221-
// }
222202
const seriesList: ActionObj[][] = comparison.map((action: Series) => action.data.barStack);
223203
const actionsList: ActionObj[] = seriesList.flat();
224204
const testList: string[] = actionsList.map((elem: ActionObj) => elem.name);
@@ -232,18 +212,27 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
232212
<div>
233213
<div className='series-options-container'>
234214
<div className='dropdown-and-delete-series-container'>
215+
<Button
216+
variant='contained'
217+
sx={{ p: 2, color: 'white' }}
218+
// type='button'
235219
<Button
236220
variant='contained'
237221
sx={{ p: 2, color: 'white' }}
238222
// type='button'
239223
className='delete-button'
240224
onClick={() => {
225+
setButtonLoad(true);
241226
setButtonLoad(true);
242227
dispatch(deleteSeries());
243228

244229
setTimeout(() => {
245230
setButtonLoad(false);
246231
}, 1000);
232+
233+
setTimeout(() => {
234+
setButtonLoad(false);
235+
}, 1000);
247236
}}
248237
style={
249238
buttonLoad
@@ -252,17 +241,19 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
252241
}
253242
>
254243
{buttonLoad ? 'Deleted' : 'Clear Series'}
244+
</Button>
245+
{buttonLoad ? 'Deleted' : 'Clear Series'}
255246
</Button>
256247
<h4 className='compare-series-box' style={{ padding: '0 1rem' }}>
257248
Compare Series:{' '}
258249
</h4>
259250
<StyledFormControl
260251
id='selectSeries'
261252
variant='outlined'
262-
sx={{ backgroundColor: theme.palette.primary.main }}
253+
label='compares series'
254+
// sx={{ backgroundColor: theme.palette.primary.main }}
263255
>
264256
<StyledSelect
265-
style={{ color: 'red' }}
266257
labelId='simple-select-outlined-label'
267258
open={open}
268259
onClose={handleClose}
@@ -307,7 +298,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
307298
</div>
308299

309300
<svg ref={containerRef} width={width} height={height}>
310-
{}
301+
{ }
311302
<rect x={0} y={0} width={width} height={height} fill={background} rx={14} />
312303
<Grid
313304
top={margin.top}

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

Lines changed: 30 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-nocheck
2-
import React, { useEffect } from 'react';
2+
import React, { useEffect, useState } from 'react';
33
import { BarStack } from '@visx/shape';
44
import { Group } from '@visx/group';
55
import { Grid } from '@visx/grid';
@@ -9,6 +9,13 @@ import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
99
import { Text } from '@visx/text';
1010
import { schemeSet3 } from 'd3-scale-chromatic';
1111

12+
import { styled } from '@mui/system';
13+
import Select from '@mui/material/Select';
14+
import MenuItem from '@mui/material/MenuItem';
15+
import FormControl from '@mui/material/FormControl';
16+
import { useTheme } from '@mui/material/styles';
17+
import { Button } from '@mui/material';
18+
1219
import { deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
1320
import { useStoreContext } from '../../../store';
1421
import { TooltipData, Margin, BarGraphComparisonAction, ActionObj } from '../../../FrontendTypes';
@@ -38,6 +45,11 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
3845
const [snapshots] = React.useState(0);
3946
const [setOpen] = React.useState(false);
4047
const [setPicOpen] = React.useState(false);
48+
49+
const [buttonLoad, setButtonLoad] = useState(false);
50+
const theme = useTheme();
51+
52+
4153
useEffect(() => {
4254
dispatch(setCurrentTabInApp('performance-comparison'));
4355
}, []);
@@ -93,26 +105,6 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
93105
seriesNameScale.rangeRound([0, xMax]);
94106
renderingScale.range([yMax, 0]);
95107

96-
// useStyles will change the styling on save series dropdown feature
97-
// const useStyles = makeStyles((theme) => ({
98-
// formControl: {
99-
// margin: theme.spacing(1),
100-
// minWidth: 80,
101-
// height: 30,
102-
// },
103-
// select: {
104-
// minWidth: 80,
105-
// fontSize: '.75rem',
106-
// fontWeight: '200',
107-
// border: '1px solid grey',
108-
// borderRadius: 4,
109-
// color: 'grey',
110-
// height: 30,
111-
// },
112-
// }));
113-
114-
// const classes = useStyles();
115-
116108
const StyledFormControl = styled(FormControl)(({ theme }) => ({
117109
margin: theme.spacing(1),
118110
minWidth: 80,
@@ -123,9 +115,6 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
123115
minWidth: 80,
124116
fontSize: '.75rem',
125117
fontWeight: 200,
126-
border: '1px solid grey',
127-
borderRadius: 4,
128-
color: 'grey',
129118
height: 30,
130119
});
131120

@@ -141,19 +130,8 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
141130
setSeries(false);
142131
};
143132

144-
const animateButton = function (e) {
145-
e.preventDefault();
146-
e.target.classList.add('animate');
147-
e.target.innerHTML = 'Deleted!';
148-
setTimeout(() => {
149-
e.target.innerHTML = 'Clear All Series';
150-
e.target.classList.remove('animate');
151-
}, 1000);
152-
};
153-
const classname = document.getElementsByClassName('delete-button');
154-
for (let i = 0; i < classname.length; i += 1) {
155-
classname[i].addEventListener('click', animateButton, false);
156-
}
133+
134+
157135
const seriesList = comparison.map((elem) => elem.data.barStack);
158136
const actionsList = seriesList.flat();
159137
const testList = actionsList.map((elem) => elem.name);
@@ -167,16 +145,28 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
167145
<div>
168146
<div className='series-options-container'>
169147
<div className='dropdown-and-delete-series-container'>
170-
<button
148+
<Button
149+
variant='contained'
150+
sx={{ p: 2, color: 'white' }}
171151
className='delete-button'
172152
onClick={() => {
153+
setButtonLoad(true);
173154
setAction(false);
174155
setSeries(true);
175156
dispatch(deleteSeries());
157+
158+
setTimeout(() => {
159+
setButtonLoad(false);
160+
}, 1000);
176161
}}
162+
style={
163+
buttonLoad
164+
? { backgroundColor: theme.palette.primary.main }
165+
: { backgroundColor: theme.palette.secondary.main }
166+
}
177167
>
178-
Clear All Series
179-
</button>
168+
{buttonLoad ? 'Deleted' : 'Clear Series'}
169+
</Button>
180170
<h4 style={{ padding: '0 1rem' }}>Compare Series: </h4>
181171
<StyledFormControl variant='outlined'>
182172
<StyledSelect

‎src/app/containers/ButtonsContainer.tsx

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ function importHandler(dispatch: (a: unknown) => void): void {
5353
// accepts data from user
5454
const fileUpload = document.createElement('input');
5555
// file is a type attribute on the input element, allows users to select a file
56+
console.log('fileUpload element:', fileUpload)
5657
fileUpload.setAttribute('type', 'file');
5758

5859
// onChange is when value of HTML element is changed
@@ -62,26 +63,39 @@ function importHandler(dispatch: (a: unknown) => void): void {
6263
// reads contents of local files in async
6364
// can use file or blob objects
6465
const reader = new FileReader();
66+
console.log('on change triggered')
67+
//console.log('reader :', reader);
68+
69+
const eventFiles = e.target as HTMLInputElement;
70+
// console.log('e.target:', e.target)
71+
// console.log('event files:', eventFiles.files[0]);
72+
73+
if (eventFiles) {
74+
reader.readAsText(eventFiles.files[0]);
75+
}
76+
6577
reader.onload = () => {
6678
// once the local file has been loaded, result property on FileReader object returns the file's contents
6779
// then take contents and convert to a string
80+
console.log('on load triggered:')
6881
const test = reader.result.toString();
6982
// dispatch sends the result of calling importSnapshots on the json parsed data from the file contents from the new FileReader object
7083
// importSnapshots defined in actions/actions.ts/line 71, it returns an action object with a type and payload, payload is newSnaps parameter
7184
// dispatch function is being called with that action object which gets sent to the reducer in reducers/mainReducer.js/line 203
7285
// this updates the current tab
7386
return dispatch(importSnapshots(JSON.parse(test)));
7487
};
75-
const eventFiles = e.target as HTMLInputElement;
76-
if (eventFiles?.hasOwnProperty('files')) {
77-
// const eventFiles = target as HTMLInputElement;
78-
if (eventFiles) {
79-
reader.readAsText(eventFiles.files[0]);
80-
}
81-
}
88+
// const eventFiles = e.target as HTMLInputElement;
89+
// if (eventFiles?.hasOwnProperty('files')) {
90+
// // const eventFiles = target as HTMLInputElement;
91+
// if (eventFiles) {
92+
// reader.readAsText(eventFiles.files[0]);
93+
// }
94+
// }
8295
};
8396

8497
fileUpload.click();
98+
//console.log('dispatch importSnapshots successful')
8599
}
86100

87101
function ButtonsContainer(): JSX.Element {
@@ -91,6 +105,8 @@ function ButtonsContainer(): JSX.Element {
91105
mode: { paused },
92106
} = tabs[currentTab];
93107

108+
console.log('----state after any change----', tabs[currentTab])
109+
94110
return (
95111
<div className='buttons-container'>
96112
<Button

‎src/app/containers/MainContainer.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,13 @@ function MainContainer(): JSX.Element {
5454

5555
// listen for a message containing snapshots from the /extension/build/background.js service worker
5656
currentPort.onMessage.addListener(
57-
(message: { // parameter message is an object with following type script properties
57+
// parameter message is an object with following type script properties
58+
(message: {
5859
action: string;
5960
payload: Record<string, unknown>;
6061
sourceTab: number
6162
}) => {
62-
const { action, payload, sourceTab } = message; // we destructure message into action, payload, sourceTab
63+
const { action, payload, sourceTab } = message;
6364
let maxTab: number;
6465

6566
if (!sourceTab) { // if the sourceTab doesn't exist or is 0

0 commit comments

Comments
 (0)