Skip to content

Commit bd5b4fa

Browse files
KyEBellKyEBell
committed
completing dev merge
2 parents 8ea2feb + 9a90d11 commit bd5b4fa

File tree

10 files changed

+240
-129
lines changed

10 files changed

+240
-129
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: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,19 @@ const initialState: InitialStateProps = {
2323
function App(): JSX.Element {
2424
return (
2525
<ThemeProvider theme={theme}>
26+
<<<<<<< HEAD
2627
<Router>
2728
<StoreContext.Provider value={useReducer(mainReducer, initialState)}>
2829
<MainContainer />
2930
</StoreContext.Provider>
3031
</Router>
32+
=======
33+
<Router> {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
34+
<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 */}
35+
<MainContainer />
36+
</StoreContext.Provider>
37+
</Router>
38+
>>>>>>> 9a90d115a61fdf20151152d53f44aecb67be6e1b
3139
</ThemeProvider>
3240
);
3341
}

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

Lines changed: 20 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -122,25 +122,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
122122
snapshotIdScale.rangeRound([0, xMax]);
123123
renderingScale.range([yMax, 0]);
124124

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-
// }));
142125

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

145127
const StyledFormControl = styled(FormControl)(({ theme }) => ({
146128
margin: theme.spacing(1),
@@ -152,9 +134,6 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
152134
minWidth: 80,
153135
fontSize: '.75rem',
154136
fontWeight: 200,
155-
border: '1px solid grey',
156-
borderRadius: 4,
157-
color: 'grey',
158137
height: 30,
159138
});
160139

@@ -206,22 +185,22 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
206185
return data.barStack;
207186
}
208187

209-
// const animateButton = (e: MouseEvent) => {
210-
// e.preventDefault();
211-
// const target = e.target as HTMLButtonElement;
212-
// if (target) {
213-
// target.classList.add('animate');
214-
// target.innerHTML = 'Deleted!';
215-
// setTimeout(() => {
216-
// target.innerHTML = 'Clear All Series';
217-
// target.classList.remove('animate');
218-
// }, 1000);
219-
// }
220-
// };
221-
// const classname = document.getElementsByClassName('delete-button');
222-
// for (let i = 0; i < classname.length; i += 1) {
223-
// classname[i].addEventListener('click', animateButton, false);
224-
// }
188+
const animateButton = (e: MouseEvent) => {
189+
e.preventDefault();
190+
const target = e.target as HTMLButtonElement;
191+
if (target) {
192+
target.classList.add('animate');
193+
target.innerHTML = 'Deleted!';
194+
setTimeout(() => {
195+
target.innerHTML = 'Clear All Series';
196+
target.classList.remove('animate');
197+
}, 1000);
198+
}
199+
};
200+
const classname = document.getElementsByClassName('delete-button');
201+
for (let i = 0; i < classname.length; i += 1) {
202+
classname[i].addEventListener('click', animateButton, false);
203+
}
225204
const seriesList: ActionObj[][] = comparison.map((action: Series) => action.data.barStack);
226205
const actionsList: ActionObj[] = seriesList.flat();
227206
const testList: string[] = actionsList.map((elem: ActionObj) => elem.name);
@@ -235,9 +214,8 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
235214
<div>
236215
<div className='series-options-container'>
237216
<div className='dropdown-and-delete-series-container'>
238-
<Button
239-
variant='contained'
240-
// type='button'
217+
<button
218+
type='button'
241219
className='delete-button'
242220
onClick={() => {
243221
setButtonLoad(true);
@@ -247,24 +225,14 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
247225
setButtonLoad(false);
248226
}, 1000);
249227
}}
250-
style={
251-
buttonLoad
252-
? { backgroundColor: theme.palette.primary.main }
253-
: { backgroundColor: '#f21861' }
254-
}
255228
>
256229
{buttonLoad ? 'Deleted' : 'Clear Series'}
257230
</Button>
258231
<h4 className='compare-series-box' style={{ padding: '0 1rem' }}>
259232
Compare Series:{' '}
260233
</h4>
261-
<StyledFormControl
262-
id='selectSeries'
263-
variant='outlined'
264-
sx={{ backgroundColor: 'secondary.main' }}
265-
>
234+
<StyledFormControl id='selectSeries' variant='outlined'>
266235
<StyledSelect
267-
style={{ color: 'white' }}
268236
labelId='simple-select-outlined-label'
269237
open={open}
270238
onClose={handleClose}
@@ -309,7 +277,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
309277
</div>
310278

311279
<svg ref={containerRef} width={width} height={height}>
312-
{}
280+
{ }
313281
<rect x={0} y={0} width={width} height={height} fill={background} rx={14} />
314282
<Grid
315283
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

@@ -142,19 +131,8 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
142131
setSeries(false);
143132
};
144133

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

‎src/app/components/theme.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { createTheme } from '@mui/material/styles';
2+
const theme = createTheme({
3+
palette: {
4+
primary: {
5+
main: '#8Fb5f9',
6+
},
7+
secondary: {
8+
main: '#BF6DD2',
9+
},
10+
},
11+
components: {
12+
// Name of the component
13+
14+
MuiButton: {
15+
styleOverrides: {
16+
// Name of the slot
17+
root: {
18+
// Some CSS
19+
fontSize: '0.8rem',
20+
letterSpacing: '0.1rem',
21+
lineHeight: '0.8rem',
22+
},
23+
},
24+
},
25+
// MuiSelect: {
26+
// styleOverrides: {
27+
// root: {
28+
// main: '#556cd4',
29+
// },
30+
// },
31+
// },
32+
},
33+
});
34+
35+
export default theme;

‎src/app/containers/ButtonsContainer.tsx

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ function importHandler(dispatch: (a: unknown) => void): void {
4747
// accepts data from user
4848
const fileUpload = document.createElement('input');
4949
// file is a type attribute on the input element, allows users to select a file
50+
console.log('fileUpload element:', fileUpload)
5051
fileUpload.setAttribute('type', 'file');
5152

5253
// onChange is when value of HTML element is changed
@@ -56,26 +57,39 @@ function importHandler(dispatch: (a: unknown) => void): void {
5657
// reads contents of local files in async
5758
// can use file or blob objects
5859
const reader = new FileReader();
60+
console.log('on change triggered')
61+
//console.log('reader :', reader);
62+
63+
const eventFiles = e.target as HTMLInputElement;
64+
// console.log('e.target:', e.target)
65+
// console.log('event files:', eventFiles.files[0]);
66+
67+
if (eventFiles) {
68+
reader.readAsText(eventFiles.files[0]);
69+
}
70+
5971
reader.onload = () => {
6072
// once the local file has been loaded, result property on FileReader object returns the file's contents
6173
// then take contents and convert to a string
74+
console.log('on load triggered:')
6275
const test = reader.result.toString();
6376
// dispatch sends the result of calling importSnapshots on the json parsed data from the file contents from the new FileReader object
6477
// importSnapshots defined in actions/actions.ts/line 71, it returns an action object with a type and payload, payload is newSnaps parameter
6578
// dispatch function is being called with that action object which gets sent to the reducer in reducers/mainReducer.js/line 203
6679
// this updates the current tab
6780
return dispatch(importSnapshots(JSON.parse(test)));
6881
};
69-
const eventFiles = e.target as HTMLInputElement;
70-
if (eventFiles?.hasOwnProperty('files')) {
71-
// const eventFiles = target as HTMLInputElement;
72-
if (eventFiles) {
73-
reader.readAsText(eventFiles.files[0]);
74-
}
75-
}
82+
// const eventFiles = e.target as HTMLInputElement;
83+
// if (eventFiles?.hasOwnProperty('files')) {
84+
// // const eventFiles = target as HTMLInputElement;
85+
// if (eventFiles) {
86+
// reader.readAsText(eventFiles.files[0]);
87+
// }
88+
// }
7689
};
7790

7891
fileUpload.click();
92+
//console.log('dispatch importSnapshots successful')
7993
}
8094

8195
function ButtonsContainer(): JSX.Element {
@@ -85,13 +99,15 @@ function ButtonsContainer(): JSX.Element {
8599
mode: { paused },
86100
} = tabs[currentTab];
87101

102+
console.log('----state after any change----', tabs[currentTab])
103+
88104
return (
89105
<div className='buttons-container'>
90106
<button className='pause-button' type='button' onClick={() => dispatch(toggleMode('paused'))}>
91107
{paused ? <FontAwesomeIcon icon={faLock} /> : <FontAwesomeIcon icon={faUnlock} />}
92108
{paused ? 'Locked' : 'Unlocked'}
93109
</button>
94-
<button className='export-button' type='button' onClick={() => exportHandler(snapshots)}>
110+
<button className='export-button' type='button' onClick={() => exportHandler(tabs[currentTab])}>
95111
<FontAwesomeIcon icon={faDownload} />
96112
Download
97113
</button>

0 commit comments

Comments
 (0)