Skip to content

Commit 21a6992

Browse files
EivindDelFierroEivindDelFierro
authored
Merge pull request #19 from oslabs-beta/additionalMui
Additional mui
2 parents 433cea3 + b8af96d commit 21a6992

File tree

10 files changed

+118
-88
lines changed

10 files changed

+118
-88
lines changed

‎src/app/components/App.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,13 @@ const initialState: InitialStateProps = { // we initialize what our initialState
2424
function App(): JSX.Element {
2525
return (
2626
<ThemeProvider theme={theme}>
27-
<Router> {/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
28-
<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 */}
29-
<MainContainer />
30-
</StoreContext.Provider>
31-
</Router>
27+
<Router>
28+
{/* 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)}>
30+
{/* 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 */}
31+
<MainContainer />
32+
</StoreContext.Provider>
33+
</Router>
3234
</ThemeProvider>
3335
);
3436
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
6363
});
6464

6565
const keys = Object.keys(data.componentData);
66+
const getSnapshotId = (d: snapshot) => d.snapshotId; // data accessor (used to generate scales) and formatter (add units for on hover box). d comes from data.barstack post filtered data
6667

6768
const getSnapshotId = (d: snapshot) => d.snapshotId; // data accessor (used to generate scales) and formatter (add units for on hover box). d comes from data.barstack post filtered data
6869
const formatSnapshotId = (id) => `Snapshot ID: ${id}`; // returns snapshot id when invoked in tooltip section
@@ -207,6 +208,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
207208
height={bar.height === 0 ? null : bar.height}
208209
width={bar.width}
209210
fill={bar.color}
211+
210212
/* TIP TOOL EVENT HANDLERS */
211213
onMouseLeave={() => { // Hides tool tip once cursor moves off the current rect.
212214
dispatch(
@@ -281,6 +283,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
281283
</Text>
282284
)}
283285
</svg>
286+
284287
{/* FOR HOVER OVER DISPLAY */}
285288
{tooltipOpen && tooltipData && ( // Ths conditional statement displays a different tooltip configuration depending on if we are trying do display a specific snapshot through options menu or all snapshots together in bargraph
286289
<TooltipInPortal

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

Lines changed: 56 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import Select from '@mui/material/Select';
1515
import MenuItem from '@mui/material/MenuItem';
1616
import FormControl from '@mui/material/FormControl';
1717
import { useTheme } from '@mui/material/styles';
18-
import { Button } from '@mui/material';
18+
import { Button, InputLabel } from '@mui/material';
1919
import { onHover, onHoverExit, deleteSeries, setCurrentTabInApp } from '../../../actions/actions';
2020
import { useStoreContext } from '../../../store';
2121
import { snapshot, TooltipData, Margin, BarGraphComparisonProps, ActionObj, Series } from '../../../FrontendTypes';
@@ -116,8 +116,8 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
116116

117117
const duplicate = schemeTableau10.slice();
118118
const colorScale = scaleOrdinal<string, string>({
119-
domain: keys,
120-
range: duplicate,
119+
domain: keys, // the domain array will assign each key a different color to make rectangle boxes
120+
range: duplicate, // and use range to set the color scheme each bar
121121
});
122122

123123
// setting max dimensions and scale ranges
@@ -131,17 +131,22 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
131131
minWidth: 160,
132132
height: 30,
133133
}));
134-
135-
const StyledSelect = styled(Select)({ // applies the object to customize the style of the 'Select' component
136-
minWidth: 80,
134+
{
135+
/* StyledSelect to use for MUI select components to maintain consistent styling for all select components*/
136+
}
137+
const StyledSelect = styled(Select)({
138+
// applies the object to customize the style of the 'Select' component
139+
minWidth: 160,
137140
fontSize: '1.2rem',
138141
fontWeight: 200,
139142
height: 30,
140143
border: '1px solid #da262c',
141144
});
142145

143146
const handleSeriesChange = (event: Event) => {
144-
if (!event) return;
147+
if (!event) {
148+
return;
149+
}
145150
const target = event.target as HTMLInputElement;
146151
if (target) {
147152
setSeries(target.value);
@@ -201,7 +206,7 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
201206
<div>
202207
<div className='series-options-container'>
203208
<div className='dropdown-and-delete-series-container'>
204-
209+
{/*'Clear Series' MUI button that clears any saved series*/}
205210
<Button
206211
variant='contained'
207212
sx={{ p: 2, color: 'white' }}
@@ -214,26 +219,32 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
214219
setButtonLoad(false);
215220
}, 1000);
216221
}}
217-
style={ buttonLoad ? { backgroundColor: theme.palette.primary.main }
218-
: { backgroundColor: theme.palette.secondary.main }
219-
}>
222+
style={
223+
buttonLoad
224+
? { backgroundColor: '#62d6fb' }
225+
: { backgroundColor: '#ff6569', color: 'black' }
226+
}
227+
>
220228
{buttonLoad ? 'Deleted' : 'Clear Series'}
221229
</Button>
222-
223-
<h4 className='compare-series-box' style={{ padding: '0 1rem' }}>
224-
Compare Series:{' '}
225-
</h4>
226-
<StyledFormControl
227-
id='selectSeries'
228-
variant='outlined'
229-
label='compares series'
230+
{/* Mui 'Compare Series Dropdown Starts here */}
231+
<StyledFormControl // MUI styled 'FormControl' component
232+
variant='filled'
230233
>
231-
<StyledSelect
234+
<InputLabel
235+
id='simple-select-outlined-label'
236+
sx={{ fontSize: '1.2rem' }}
237+
style={{ color: 'white' }}
238+
>
239+
Compare Series
240+
</InputLabel>
241+
<StyledSelect // MUI styled 'select' component
232242
labelId='simple-select-outlined-label'
243+
id='simple-select-outlined-label'
233244
open={open}
234245
onClose={handleClose}
235246
onOpen={handleOpen}
236-
value={series}
247+
value={series} // added 8/3/2023
237248
onChange={handleSeriesChange}
238249
>
239250
{!comparison.length ? (
@@ -247,29 +258,44 @@ const BarGraphComparison = (props: BarGraphComparisonProps): JSX.Element => {
247258
)}
248259
</StyledSelect>
249260
</StyledFormControl>
250-
<h4 style={{ padding: '0 1rem' }}>Compare Actions </h4>
251-
<StyledFormControl variant='outlined'>
252-
<StyledSelect
261+
{/* Mui 'Compare Series Dropdown ENDS here */}
262+
263+
{/*==============================================================================================================================*/}
264+
{/*commented the below portion out, as bargraphComparisonActions.tsx is not currently functional, can re implement later on */}
265+
{/*==============================================================================================================================*/}
266+
267+
{/* { <h4 style={{ padding: '0 1rem' }}>Compare Actions </h4>
268+
<StyledFormControl variant='filled'>
269+
{' '}
270+
{/* MUI styled 'FormControl' component */}
271+
{/* <InputLabel
272+
id='snapshot-select-label'
273+
sx={{ fontSize: '1.2rem' }}
253274
style={{ color: 'white' }}
254-
labelId='snapshot-select'
255-
id='snapshot-select'
275+
>
276+
Compare Actions
277+
</InputLabel>
278+
<StyledSelect // MUI styled 'Select' component
279+
labelId='snapshot-select-label'
280+
id='snapshot-select-label'
256281
open={picOpen}
257282
onClose={picHandleClose}
258283
onOpen={picHandleOpen}
259-
value='' // snapshots
284+
value={action} // snapshots
260285
onChange={handleActionChange}
261286
>
262287
{!comparison[snapshots] ? (
263288
<MenuItem>No snapshots available</MenuItem>
264289
) : (
265-
finalList.map((elem) => (
266-
<MenuItem value={elem}>{elem}</MenuItem>
267-
))
290+
finalList.map((elem) => <MenuItem value={elem}>{elem}</MenuItem>)
268291
)}
269292
</StyledSelect>
270293
</StyledFormControl>
294+
*/}
271295
</div>
272296
</div>
297+
{/*==============================================================================================================================*/}
298+
{/*==============================================================================================================================*/}
273299

274300
<svg ref={containerRef} width={width} height={height}>
275301
<rect x={0} y={0} width={width} height={height} fill={background} rx={14} />

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

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,7 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
5353
const [setOpen] = React.useState(false); // creates a local state setOpen and sets it to false (why is there no setter function? Also this is never used in this file... 08/03/2023)
5454
const [setPicOpen] = React.useState(false); // creates a local state setPicOpen and sets it to false (why is there no setter function? Also this is never used in this file... 08/03/2023)
5555

56-
const [buttonLoad, setButtonLoad] = useState(false);
57-
const theme = useTheme(); // MUI hook that allows access to theme variables inside your functional React components
58-
59-
60-
useEffect(() => {
56+
useEffect(() => { // send dispatch only on initial page load
6157
dispatch(setCurrentTabInApp('performance-comparison')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'performance-comparison' to facilitate render.
6258
}, []);
6359

@@ -82,13 +78,10 @@ const BarGraphComparisonActions = (props: BarGraphComparisonAction) => {
8278
componentName !== 'seriesName' &&
8379
componentName !== 'snapshotId',
8480
);
85-
// data accessor (used to generate scales) and formatter (add units for on hover box)
86-
const getSeriesName = (action: ActionObj): string => action.seriesName;
87-
88-
// create visualization SCALES with cleaned data.
89-
// the domain array/xAxisPoints elements will place the bars along the x-axis
90-
const seriesNameScale = scaleBand<string>({
91-
domain: data.map(getSeriesName),
81+
82+
const getSeriesName = (action: ActionObj): string => action.seriesName; // data accessor (used to generate scales) and formatter (add units for on hover box)
83+
const seriesNameScale = scaleBand<string>({ // create visualization SCALES with cleaned data.
84+
domain: data.map(getSeriesName), // the domain array/xAxisPoints elements will place the bars along the x-axis
9285
padding: 0.2,
9386
});
9487

‎src/app/containers/ActionContainer.tsx

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +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';
9+
import { Button, Switch } from '@mui/material';
1210

1311
/*
1412
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.
@@ -24,7 +22,6 @@ const resetSlider = () => {
2422
}
2523
};
2624

27-
2825
function ActionContainer(props): JSX.Element {
2926
const [{ tabs, currentTab, port }, dispatch] = useStoreContext(); // we destructure the returned context object from the invocation of the useStoreContext function. Properties not found on the initialState object (dispatch) are from the useReducer function invocation in the App component
3027
const { currLocation, hierarchy, sliderIndex, viewIndex } = tabs[currentTab]; // we destructure the currentTab object
@@ -75,7 +72,7 @@ function ActionContainer(props): JSX.Element {
7572
hierarchyArr.push(newObj); // we push our record object into 'hiearchyArr' defined on line 35
7673
}
7774

78-
if (obj.children) { // if argument has a 'children' array, we iterate through it and run 'displayArray' on each element
75+
if (obj.children) { // if argument has a 'children' array, we iterate through it and run 'displayArray' on each element
7976
obj.children.forEach((element): void => {
8077
displayArray(element);
8178
});
@@ -99,17 +96,15 @@ function ActionContainer(props): JSX.Element {
9996
currIndex++;
10097
if (currIndex > hierarchyArr.length - 1) return;
10198
dispatch(changeView(currIndex));
102-
}
103-
104-
else if (e.key === 'Enter') { // enter key pressed
99+
} else if (e.key === 'Enter') { // enter key pressed
105100
e.stopPropagation(); // prevents further propagation of the current event in the capturing and bubbling phases
106101
e.preventDefault(); // needed or will trigger onClick right after
107102
dispatch(changeSlider(currIndex));
108103
}
109104
}
110105

111-
// Sort hierarchyArr by index property of each object. This will be useful later when we render the components: components will be displayed in index/chronological order
112-
hierarchyArr.sort((a:Obj, b:Obj):number => a.index - b.index);
106+
// Sort hierarchyArr by index property of each object. This will be useful when later when we build our components so that our components will be displayed in index/chronological order
107+
hierarchyArr.sort((a: Obj, b: Obj): number => a.index - b.index);
113108

114109
// we create a map of components that are constructed from "hierarchyArr's" elements/snapshots
115110
actionsArr = hierarchyArr.map(
@@ -165,11 +160,12 @@ function ActionContainer(props): JSX.Element {
165160
};
166161

167162
const routes: {} = {}; // Logic to create the route description components begin
168-
169-
for (let i = 0; i < actionsArr.length; i += 1) { // iterate through our actionsArr
163+
164+
for (let i = 0; i < actionsArr.length; i += 1) {
165+
// iterate through our actionsArr
170166
if (!routes.hasOwnProperty(actionsArr[i].props.routePath)) {
171-
routes[actionsArr[i].props.routePath] = [actionsArr[i]]; // if 'routes' doesn't have a property key that is the same as the current component at index[i] routePath we create an array with the first element being the component at index [i].
172-
} else {
167+
routes[actionsArr[i].props.routePath] = [actionsArr[i]]; // if 'routes' doesn't have a property key that is the same as the current component at index[i] routePath we create an array with the first element being the component at index [i].
168+
} else {
173169
routes[actionsArr[i].props.routePath].push(actionsArr[i]); // If it does exist, we push the component at index [i] to the apporpriate routes[routePath]
174170
}
175171
}
@@ -188,27 +184,25 @@ function ActionContainer(props): JSX.Element {
188184
</div>
189185
<a type='button' id='recordBtn' onClick={toggleRecord}>
190186
<i />
191-
{recordingActions ? (
192-
<FontAwesomeIcon className='fa-regular' icon={faToggleOn} />
193-
) : (
194-
<FontAwesomeIcon className='fa-regular' icon={faToggleOff} />
195-
)}
187+
{recordingActions ? <Switch defaultChecked /> : <Switch />}
196188
</a>
197189
</div>
198190
{actionView ? (
199191
<div className='action-button-wrapper'>
200192
<SwitchAppDropdown />
201193
<div className='action-component exclude'>
202-
<button
194+
<Button
195+
variant='contained'
203196
className='empty-button'
197+
style={{ backgroundColor: '#ff6569' }}
204198
onClick={() => {
205199
dispatch(emptySnapshots()); // set slider back to zero, visually
206200
resetSlider();
207201
}}
208202
type='button'
209203
>
210204
Clear
211-
</button>
205+
</Button>
212206
</div>
213207
{/* Rendering of route description components */}
214208
{Object.keys(routes).map((route, i) => (

‎src/app/containers/ButtonsContainer.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ function ButtonsContainer(): JSX.Element {
5555
type='button'
5656
onClick={() => dispatch(toggleMode('paused'))}
5757
>
58-
{paused ? <LockIcon sx={{pr: 1}}/> : <LockOpenIcon sx={{pr: 1}}/>}
58+
{paused ? <LockIcon sx={{ pr: 1 }} /> : <LockOpenIcon sx={{ pr: 1 }} />}
5959
{paused ? 'Locked' : 'Unlocked'}
6060
</Button>
6161
<Button
@@ -64,11 +64,11 @@ function ButtonsContainer(): JSX.Element {
6464
type='button'
6565
onClick={() => exportHandler(tabs[currentTab])}
6666
>
67-
<FileDownloadIcon sx={{pr: 1}}/>
67+
<FileDownloadIcon sx={{ pr: 1 }} />
6868
Download
6969
</Button>
7070
<Button variant='outlined' className='import-button' onClick={() => importHandler(dispatch)}>
71-
<FileUploadIcon sx={{pr: 1}}/>
71+
<FileUploadIcon sx={{ pr: 1 }} />
7272
Upload
7373
</Button>
7474
{/* The component below renders a button for the tutorial walkthrough of Reactime */}

‎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+
}

0 commit comments

Comments
 (0)