Skip to content

Commit e75c7d7

Browse files
KyEBellKyEBell
committed
pre-merge additional Mui
1 parent 2b692ac commit e75c7d7

File tree

9 files changed

+134
-163
lines changed

9 files changed

+134
-163
lines changed

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

Lines changed: 85 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -122,26 +122,6 @@ 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-
// }));
142-
143-
// const classes = useStyles();
144-
145125
const StyledFormControl = styled(FormControl)(({ theme }) => ({
146126
margin: theme.spacing(1),
147127
minWidth: 160,
@@ -150,9 +130,10 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
150130

151131
const StyledSelect = styled(Select)({
152132
minWidth: 160,
153-
fontSize: '.75rem',
133+
fontSize: '1.2rem',
154134
fontWeight: 200,
155135
height: 30,
136+
border: '1px solid #da262c',
156137
});
157138

158139
const handleSeriesChange = (event: Event) => {
@@ -203,22 +184,6 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
203184
return data.barStack;
204185
}
205186

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-
// }
222187
const seriesList: ActionObj[][] = comparison.map((action: Series) => action.data.barStack);
223188
const actionsList: ActionObj[] = seriesList.flat();
224189
const testList: string[] = actionsList.map((elem: ActionObj) => elem.name);
@@ -231,84 +196,93 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
231196
return (
232197
<div>
233198
<div className='series-options-container'>
234-
{/* <div className='dropdown-and-delete-series-container'> */}
235-
<Button
236-
variant='contained'
237-
sx={{ p: 2, color: 'white' }}
238-
// type='button'
239-
className='delete-button'
240-
onClick={() => {
241-
setButtonLoad(true);
242-
dispatch(deleteSeries());
199+
<div className='dropdown-and-delete-series-container'>
200+
<Button
201+
variant='contained'
202+
sx={{ p: 2, color: 'white' }}
203+
// type='button'
204+
className='delete-button'
205+
onClick={() => {
206+
setButtonLoad(true);
207+
dispatch(deleteSeries());
243208

244-
setTimeout(() => {
245-
setButtonLoad(false);
246-
}, 1000);
247-
}}
248-
style={
249-
buttonLoad
250-
? { backgroundColor: theme.palette.secondary.main }
251-
: { backgroundColor: theme.palette.primary.main }
252-
}
253-
>
254-
{buttonLoad ? 'Deleted' : 'Clear Series'}
255-
</Button>
256-
{/* <h4 className='compare-series-box' style={{ padding: '0 1rem' }}>
209+
setTimeout(() => {
210+
setButtonLoad(false);
211+
}, 1000);
212+
}}
213+
style={
214+
buttonLoad
215+
? { backgroundColor: '#62d6fb' }
216+
: { backgroundColor: '#ff6569', color: 'black' }
217+
}
218+
>
219+
{buttonLoad ? 'Deleted' : 'Clear Series'}
220+
</Button>
221+
{/* <h4 className='compare-series-box' style={{ padding: '0 1rem' }}>
257222
Compare Series:{' '}
258223
</h4> */}
259-
<StyledFormControl
260-
sx={{ m: 1, minwidth: 160 }}
261-
size='medium'
262-
id='selectSeries'
263-
variant='outlined'
264-
label='compares series'
265-
// sx={{ backgroundColor: theme.palette.primary.main }}
266-
>
267-
<InputLabel id='selectSeries'>Compare Series</InputLabel>
268-
<StyledSelect
269-
// labelId='simple-select-outlined-label'
270-
// id='simple-select-outlined'
271-
open={open}
272-
onClose={handleClose}
273-
onOpen={handleOpen}
274-
value={series}
275-
onChange={handleSeriesChange}
276-
>
277-
{!comparison.length ? (
278-
<MenuItem>No series available</MenuItem>
279-
) : (
280-
comparison.map((tabElem, index) => (
281-
<MenuItem key={`MenuItem${tabElem.name}`} value={index}>
282-
{tabElem.name}
283-
</MenuItem>
284-
))
285-
)}
286-
</StyledSelect>
287-
</StyledFormControl>
288-
{/* <h4 style={{ padding: '0 1rem' }}>Compare Actions </h4> */}
289-
<StyledFormControl variant='outlined'>
290-
<InputLabel>Compare Actions</InputLabel>
291-
<StyledSelect
292-
style={{ color: 'white' }}
293-
labelId='snapshot-select'
294-
id='snapshot-select'
295-
open={picOpen}
296-
onClose={picHandleClose}
297-
onOpen={picHandleOpen}
298-
value='' // snapshots
299-
onChange={handleActionChange}
224+
<StyledFormControl
225+
variant='filled'
226+
// style={{ color: 'white' }}
227+
// size='medium'
228+
// id='selectSeries'
229+
// variant='outlined'
230+
// label='compares series'
231+
// sx={{ backgroundColor: theme.palette.primary.main }}
300232
>
301-
{!comparison[snapshots] ? (
302-
<MenuItem>No snapshots available</MenuItem>
303-
) : (
304-
finalList.map((elem) => (
305-
<MenuItem value={elem}>{elem}</MenuItem>
306-
// <MenuItem value="test">{}</MenuItem>
307-
))
308-
)}
309-
</StyledSelect>
310-
</StyledFormControl>
311-
{/* </div> */}
233+
<InputLabel
234+
id='simple-select-outlined-label'
235+
sx={{ fontSize: '1.2rem' }}
236+
style={{ color: 'white' }}
237+
>
238+
Compare Series
239+
</InputLabel>
240+
<StyledSelect
241+
labelId='simple-select-outlined-label'
242+
id='simple-select-outlined-label'
243+
open={open}
244+
onClose={handleClose}
245+
onOpen={handleOpen}
246+
value={series}
247+
onChange={handleSeriesChange}
248+
>
249+
{!comparison.length ? (
250+
<MenuItem>No series available</MenuItem>
251+
) : (
252+
comparison.map((tabElem, index) => (
253+
<MenuItem key={`MenuItem${tabElem.name}`} value={index}>
254+
{tabElem.name}
255+
</MenuItem>
256+
))
257+
)}
258+
</StyledSelect>
259+
</StyledFormControl>
260+
{/* <h4 style={{ padding: '0 1rem' }}>Compare Actions </h4> */}
261+
<StyledFormControl variant='filled'>
262+
<InputLabel
263+
id='snapshot-select-label'
264+
sx={{ fontSize: '1.2rem' }}
265+
style={{ color: 'white' }}
266+
>
267+
Compare Actions
268+
</InputLabel>
269+
<StyledSelect
270+
labelId='snapshot-select-label'
271+
id='snapshot-select-label'
272+
open={picOpen}
273+
onClose={picHandleClose}
274+
onOpen={picHandleOpen}
275+
value={} // snapshots
276+
onChange={handleActionChange}
277+
>
278+
{!comparison[snapshots] ? (
279+
<MenuItem>No snapshots available</MenuItem>
280+
) : (
281+
finalList.map((elem) => <MenuItem value={elem}>{elem}</MenuItem>)
282+
)}
283+
</StyledSelect>
284+
</StyledFormControl>
285+
</div>
312286
</div>
313287

314288
<svg ref={containerRef} width={width} height={height}>

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
88
import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
99
import { Text } from '@visx/text';
1010
import { schemeSet3 } from 'd3-scale-chromatic';
11-
11+
import Select from '@mui/material/Select';
12+
import MenuItem from '@mui/material/MenuItem';
13+
import FormControl from '@mui/material/FormControl';
14+
import { useTheme } from '@mui/material/styles';
15+
import { styled } from '@mui/system';
16+
import { useTheme } from '@mui/material/styles';
1217
import { deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
1318
import { useStoreContext } from '../../../store';
1419
import { TooltipData, Margin, BarGraphComparisonAction, ActionObj } from '../../../FrontendTypes';
@@ -34,10 +39,20 @@ const tooltipStyles = {
3439

3540
const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
3641
const [dispatch] = useStoreContext();
37-
const { width, height, data, comparison, setSeries, series, setAction, action } = props;
42+
const {
43+
width, // from stateRoute container
44+
height, // from stateRoute container
45+
data, // returned value from invoking getActions() in 'PerformanceVisx' which is an array of objects
46+
comparison, // returned value from invoking 'allStorage()' in 'PerformanceVisx' which is an array of objects
47+
setSeries, // setter function to update the state located in 'PerfomanceVisx'
48+
series, // boolean from state set in 'PerformanceVisx'
49+
setAction, // setter function to update the state located in 'PerfomanceVisx'
50+
action // boolean from state set in 'PerformanceVisx'
51+
} = props;
3852
const [snapshots] = React.useState(0);
3953
const [setOpen] = React.useState(false);
4054
const [setPicOpen] = React.useState(false);
55+
const theme = useTheme();
4156
useEffect(() => {
4257
dispatch(setCurrentTabInApp('performance-comparison'));
4358
}, []);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
203203
return (
204204
<BarGraphComparisonActions
205205
comparison={allStorage()}
206-
data={getActions()}
206+
data={data} // getActions()
207207
width={width}
208208
height={height}
209209
setSeries={setSeries}

‎src/app/containers/ActionContainer.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
/* eslint-disable max-len */
22
import React, { useEffect, useState } from 'react';
3-
4-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5-
import { faToggleOff, faToggleOn } from '@fortawesome/free-solid-svg-icons';
63
import Action from '../components/Action';
74
import SwitchAppDropdown from '../components/SwitchApp';
85
import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
96
import { useStoreContext } from '../store';
107
import RouteDescription from '../components/RouteDescription';
118
import { Obj } from '../FrontendTypes';
12-
import { Button } from '@mui/material';
9+
import { Button, Switch } from '@mui/material';
1310

1411
/*
1512
This file renders the 'ActionContainer'. The action container is the leftmost column in the application. It includes the button that shrinks and expands the action container, a dropdown to select the active site, a clear button, the current selected Route, and a list of selectable snapshots with timestamps.
@@ -193,11 +190,7 @@ function ActionContainer(props): JSX.Element {
193190
</div>
194191
<a type='button' id='recordBtn' onClick={toggleRecord}>
195192
<i />
196-
{recordingActions ? (
197-
<FontAwesomeIcon className='fa-regular' icon={faToggleOn} />
198-
) : (
199-
<FontAwesomeIcon className='fa-regular' icon={faToggleOff} />
200-
)}
193+
{recordingActions ? <Switch defaultChecked /> : <Switch />}
201194
</a>
202195
</div>
203196
{actionView ? (
@@ -207,6 +200,7 @@ function ActionContainer(props): JSX.Element {
207200
<Button
208201
variant='contained'
209202
className='empty-button'
203+
style={{ backgroundColor: '#ff6569' }}
210204
onClick={() => {
211205
dispatch(emptySnapshots());
212206
// set slider back to zero, visually

‎src/app/containers/ButtonsContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ function ButtonsContainer(): JSX.Element {
105105
variant='outlined'
106106
className='export-button'
107107
type='button'
108-
onClick={() => exportHandler(snapshots)}
108+
onClick={() => exportHandler(tabs[currentTab])}
109109
>
110110
<FileDownloadIcon />
111111
Download

‎src/app/styles/base/_base.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,4 @@ body {
4040
.saveSeriesContainer {
4141
padding-bottom: 15px;
4242
padding-top: 10px;
43-
}
43+
}

‎src/app/styles/components/_buttons.scss

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -41,37 +41,13 @@
4141
font: 300 16px 'Roboto', sans-serif;
4242
font-size: $button-text-size;
4343
width: 120px;
44-
// background: $red-color-gradient;
4544
height: 30px;
4645

4746
&.animate {
4847
background-color: rgb(41, 164, 41);
4948
}
5049
}
5150

52-
.empty-button {
53-
padding: 3px;
54-
outline: transparent;
55-
color: black;
56-
display: flex;
57-
justify-content: center;
58-
align-items: center;
59-
border-style: solid;
60-
border-color: transparent;
61-
border-radius: 3px;
62-
cursor: pointer;
63-
line-height: 1.5em;
64-
font: 500 16px 'Roboto', sans-serif;
65-
// font-size: $button-text-size; increase the font size and contrast for readability
66-
width: 120px;
67-
background: #62d6fb;
68-
}
69-
70-
.empty-button:hover {
71-
color: black;
72-
box-shadow: $box-shadow-red;
73-
}
74-
7551
.state-dropdown {
7652
width: 240px;
7753
margin-left: 20px;
@@ -288,9 +264,9 @@
288264
}
289265

290266
.series-options-container {
291-
display: flex;
292-
justify-content: space-evenly;
293-
align-items: center;
267+
// display: flex;
268+
// justify-content: space-evenly;
269+
// align-items: center;
294270
margin: 0 1rem;
295271
}
296272

@@ -301,7 +277,8 @@
301277
.dropdown-and-delete-series-container {
302278
display: flex;
303279
align-items: center;
304-
justify-content: center;
280+
justify-content: space-around;
281+
margin: 16px 0 24px 0;
305282
}
306283

307284
.close-button-container {

0 commit comments

Comments
 (0)