All new changes for december deployment

.prettierrc

@@ -1,4 +1,5 @@
 {
   "tabWidth": 4,
-  "useTabs": true
+  "useTabs": true,
+  "printWidth": 120
 }

package.json

@@ -30,13 +30,16 @@
     "react": "^17.0.2",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^17.0.2",
+    "react-player": "^2.16.0",
     "react-redux": "^7.2.3",
     "react-router-dom": "^5.2.0",
+    "react-simple-maps": "^3.0.0",
     "react-vega": "^7.4.2",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "rsuite": "^5.15.0",
     "sync-fetch": "^0.5.2",
+    "us-atlas": "^3.0.1",
     "vega": "^5.19.1",
     "vega-lite": "^4.17.0"
   },

src/containers/BMP/Filters.jsx

@@ -68,11 +68,9 @@ const useStyle = makeStyles((theme) => ({
 const Filters = () => {
 	const classes = useStyle();
 
-	const { dispatchFilterUpdate, filters, config } =
-		React.useContext(BMPContext);
+	const { dispatchFilterUpdate, filters, config } = React.useContext(BMPContext);
 
-	const [areParametersExpanded, updateExpandParameters] =
-		React.useState(true);
+	const [areParametersExpanded, updateExpandParameters] = React.useState(true);
 
 	const { years, boundaryType, selectedBoundaries } = filters;
 
@@ -94,15 +92,8 @@ const Filters = () => {
 					>
 						Clear Parameters
 					</Button>
-					<Button
-						className={classes.outlinedButton}
-						onClick={handleParameterExpandClick}
-					>
-						{areParametersExpanded ? (
-							<UnfoldLessIcon />
-						) : (
-							<UnfoldMoreIcon />
-						)}
+					<Button className={classes.outlinedButton} onClick={handleParameterExpandClick}>
+						{areParametersExpanded ? <UnfoldLessIcon /> : <UnfoldMoreIcon />}
 					</Button>
 				</ButtonGroup>
 			</Box>
@@ -129,8 +120,7 @@ const Filters = () => {
 								<ToggleButton
 									classes={{
 										root: classes.boundaryToggleGroup,
-										selected:
-											classes.boundaryToggleGroupSelected,
+										selected: classes.boundaryToggleGroupSelected,
 									}}
 									key={name}
 									value={name}
@@ -145,15 +135,9 @@ const Filters = () => {
 							className={classes.boundarySelect}
 							size="small"
 							disableCloseOnSelect
-							options={config[boundaryType].map(
-								(attrs) =>
-									attrs[BOUNDARIES[boundaryType].idKey],
-							)}
+							options={config[boundaryType].map((attrs) => attrs[BOUNDARIES[boundaryType].idKey])}
 							filterOptions={(options: string[]) =>
-								options.filter(
-									(option) =>
-										!selectedBoundaries.includes(option),
-								)
+								options.filter((option) => !selectedBoundaries.includes(option))
 							}
 							value={[]}
 							renderInput={(params) => (
@@ -167,10 +151,7 @@ const Filters = () => {
 							onChange={(e, selectedOptions) => {
 								dispatchFilterUpdate({
 									type: "selectedBoundaries",
-									value: [
-										...selectedBoundaries,
-										selectedOptions,
-									],
+									value: [...selectedBoundaries, selectedOptions],
 								});
 							}}
 						/>
@@ -187,20 +168,14 @@ const Filters = () => {
 						onDelete={() => {
 							dispatchFilterUpdate({
 								type: "selectedBoundaries",
-								value: selectedBoundaries.filter(
-									(b) => b !== boundary,
-								),
+								value: selectedBoundaries.filter((b) => b !== boundary),
 							});
 						}}
 					/>
 				))
 			) : (
-				<Typography
-					className={classes.filtersSummary}
-					variant="overline"
-				>
-					Results are aggregated across all{" "}
-					{BOUNDARIES[boundaryType].label}s.
+				<Typography className={classes.filtersSummary} variant="overline">
+					Results are aggregated across all {BOUNDARIES[boundaryType].label}s.
 				</Typography>
 			)}
 
@@ -216,20 +191,14 @@ const Filters = () => {
 							value={years}
 							min={YEAR_RANGE[0]}
 							max={YEAR_RANGE[1]}
-							onChange={(e, value) =>
-								dispatchFilterUpdate({ type: "years", value })
-							}
+							onChange={(e, value) => dispatchFilterUpdate({ type: "years", value })}
 							valueLabelDisplay="auto"
 						/>
 					</Container>
 				</>
 			) : (
 				<>
-					<Typography
-						className={classes.filtersSummary}
-						variant="overline"
-						gutterBottom
-					>
+					<Typography className={classes.filtersSummary} variant="overline" gutterBottom>
 						({years[0]} - {years[1]})
 					</Typography>
 					<br />

src/containers/BMP/Header.jsx

@@ -41,63 +41,38 @@ const Header = () => {
 				<Typography variant="h6" noWrap>
 					Best Management Practices
 				</Typography>
-				<Typography
-					variant="button"
-					component={Button}
-					color="inherit"
-					onClick={() => updateHelpOpen(true)}
-				>
+				<Typography variant="button" component={Button} color="inherit" onClick={() => updateHelpOpen(true)}>
 					About BMP
 				</Typography>
 				<Dialog open={isHelpOpen}>
-					<DialogTitle
-						disableTypography
-						onClose={() => updateHelpOpen(false)}
-					>
+					<DialogTitle disableTypography onClose={() => updateHelpOpen(false)}>
 						<Typography variant="h6">About BMP</Typography>
-						<IconButton
-							className={classes.closeButton}
-							onClick={() => updateHelpOpen(false)}
-						>
+						<IconButton className={classes.closeButton} onClick={() => updateHelpOpen(false)}>
 							<CloseIcon />
 						</IconButton>
 					</DialogTitle>
 					<DialogContent dividers>
 						<Typography variant="body1" gutterBottom>
-							Lorem ipsum dolor sit amet, consectetur adipiscing
-							elit. Aliquam nunc lacus, venenatis ac fringilla
-							non, ultricies condimentum risus. Curabitur ante
-							arcu, porttitor non erat ut, blandit commodo orci.
-							Aliquam ullamcorper consequat erat, quis semper diam
-							maximus sed. Vestibulum id nulla at justo sagittis
-							sagittis. Suspendisse at convallis lectus, dapibus
-							porta mi. Aliquam a diam vulputate, gravida tortor
-							nec, bibendum lacus. Curabitur augue libero, tempor
-							sit amet finibus at, sollicitudin in magna. Maecenas
-							urna quam, venenatis vitae ligula eleifend,
-							elementum hendrerit eros. Nulla sagittis auctor
-							enim. Praesent nec quam blandit, euismod ante a,
-							sollicitudin risus. Donec auctor augue ut efficitur
-							elementum.
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nunc lacus, venenatis ac
+							fringilla non, ultricies condimentum risus. Curabitur ante arcu, porttitor non erat ut,
+							blandit commodo orci. Aliquam ullamcorper consequat erat, quis semper diam maximus sed.
+							Vestibulum id nulla at justo sagittis sagittis. Suspendisse at convallis lectus, dapibus
+							porta mi. Aliquam a diam vulputate, gravida tortor nec, bibendum lacus. Curabitur augue
+							libero, tempor sit amet finibus at, sollicitudin in magna. Maecenas urna quam, venenatis
+							vitae ligula eleifend, elementum hendrerit eros. Nulla sagittis auctor enim. Praesent nec
+							quam blandit, euismod ante a, sollicitudin risus. Donec auctor augue ut efficitur elementum.
 						</Typography>
 
 						<Typography variant="body1" gutterBottom>
-							Aenean tincidunt metus et nisi sagittis egestas.
-							Pellentesque habitant morbi tristique senectus et
-							netus et malesuada fames ac turpis egestas. Morbi
-							porttitor erat at felis pulvinar tempor. Etiam
-							commodo ipsum justo, tincidunt iaculis velit mollis
-							ac. Vestibulum augue arcu, varius in sapien a,
-							pretium semper lacus. Donec semper, nibh at gravida
-							tincidunt, nisl urna euismod orci, vel cursus lectus
-							leo ac turpis. Quisque venenatis sed mi vel
-							ultrices. Proin non neque hendrerit, posuere sem ac,
-							hendrerit odio. Sed porta, odio eget gravida
-							fringilla, tortor nulla mattis eros, vitae venenatis
-							nibh metus eget metus. Nam ante tortor, cursus eu
-							nunc ut, tincidunt malesuada odio. Etiam at lacinia
-							dolor. Ut turpis metus, congue id arcu non, pharetra
-							ultrices arcu.
+							Aenean tincidunt metus et nisi sagittis egestas. Pellentesque habitant morbi tristique
+							senectus et netus et malesuada fames ac turpis egestas. Morbi porttitor erat at felis
+							pulvinar tempor. Etiam commodo ipsum justo, tincidunt iaculis velit mollis ac. Vestibulum
+							augue arcu, varius in sapien a, pretium semper lacus. Donec semper, nibh at gravida
+							tincidunt, nisl urna euismod orci, vel cursus lectus leo ac turpis. Quisque venenatis sed mi
+							vel ultrices. Proin non neque hendrerit, posuere sem ac, hendrerit odio. Sed porta, odio
+							eget gravida fringilla, tortor nulla mattis eros, vitae venenatis nibh metus eget metus. Nam
+							ante tortor, cursus eu nunc ut, tincidunt malesuada odio. Etiam at lacinia dolor. Ut turpis
+							metus, congue id arcu non, pharetra ultrices arcu.
 						</Typography>
 					</DialogContent>
 				</Dialog>

src/containers/BMP/Results/Pdf.jsx

@@ -55,9 +55,7 @@ const Pdf = ({ handleClose, dispatch }: Props) => {
 
 	const { filters, results, updateResults } = React.useContext(BMPContext);
 
-	const [selectedCategories, updateSelectedCategories] = React.useState<
-		Map<string, boolean>,
-	>(new Map());
+	const [selectedCategories, updateSelectedCategories] = React.useState<Map<string, boolean>>(new Map());
 
 	const outputContainer = React.useRef();
 	const outputContainerRect = useElementRect(outputContainer);
@@ -118,11 +116,7 @@ const Pdf = ({ handleClose, dispatch }: Props) => {
 		<Dialog fullScreen open onClose={handleClose}>
 			<AppBar className={classes.appBar}>
 				<Toolbar>
-					<IconButton
-						edge="start"
-						color="inherit"
-						onClick={handleClose}
-					>
+					<IconButton edge="start" color="inherit" onClick={handleClose}>
 						<CloseIcon />
 					</IconButton>
 					<Typography variant="h6" className={classes.title}>
@@ -132,11 +126,7 @@ const Pdf = ({ handleClose, dispatch }: Props) => {
 						color="inherit"
 						variant="outlined"
 						startIcon={<PdfIcon />}
-						disabled={
-							Array.from(selectedCategories.values()).every(
-								(v) => !v,
-							) || !outputContainer.current
-						}
+						disabled={Array.from(selectedCategories.values()).every((v) => !v) || !outputContainer.current}
 						onClick={() => {
 							if (outputContainer.current) {
 								htmlToPdf(outputContainer.current, {
@@ -151,9 +141,8 @@ const Pdf = ({ handleClose, dispatch }: Props) => {
 			</AppBar>
 
 			<Alert style={{ margin: 20 }} severity="warning">
-				The recommended browsers are Firefox and Chrome. There might be
-				issues with the generated PDF in other browsers such as Safari
-				and IE.
+				The recommended browsers are Firefox and Chrome. There might be issues with the generated PDF in other
+				browsers such as Safari and IE.
 			</Alert>
 
 			<Grid container className={classes.contentContainer}>
@@ -173,26 +162,15 @@ const Pdf = ({ handleClose, dispatch }: Props) => {
 									button
 									onClick={() =>
 										updateSelectedCategories(
-											new Map([
-												...selectedCategories,
-												[
-													label,
-													!selectedCategories.get(
-														label,
-													),
-												],
-											]),
+											new Map([...selectedCategories, [label, !selectedCategories.get(label)]]),
 										)
 									}
 								>
 									<ListItemIcon>
 										<Checkbox
 											edge="start"
 											disableRipple
-											checked={
-												selectedCategories.get(label) ||
-												false
-											}
+											checked={selectedCategories.get(label) || false}
 										/>
 									</ListItemIcon>
 									<ListItemText>{label}</ListItemText>
@@ -202,9 +180,7 @@ const Pdf = ({ handleClose, dispatch }: Props) => {
 					</List>
 				</Grid>
 				<Grid ref={outputContainer} item xs={8}>
-					{entries(RESULTS).map((resultProps) =>
-						renderResult(resultProps),
-					)}
+					{entries(RESULTS).map((resultProps) => renderResult(resultProps))}
 				</Grid>
 			</Grid>
 			<div ref={plotTooltipRef} className={classes.plotTooltip} />

src/containers/BMP/Results/ProgramsAreaTreated.jsx

@@ -105,16 +105,12 @@ const ProgramsAreaTreated = (props: Props) => {
 	const programsSet = new Set();
 	const tableData = {};
 	props.data.forEach((d) => {
-		const boundaryId: string = filters.selectedBoundaries.length
-			? (d[filters.boundaryType]: any)
-			: "Total";
+		const boundaryId: string = filters.selectedBoundaries.length ? (d[filters.boundaryType]: any) : "Total";
 
 		programsSet.add(d.program);
 
 		if (tableData[boundaryId]) {
-			tableData[boundaryId][d.program] =
-				(tableData[boundaryId][d.program] || 0) +
-				(d["area_treated-sum"] || 0);
+			tableData[boundaryId][d.program] = (tableData[boundaryId][d.program] || 0) + (d["area_treated-sum"] || 0);
 		} else {
 			tableData[boundaryId] = {
 				[d.program]: d["area_treated-sum"] || 0,
@@ -126,11 +122,9 @@ const ProgramsAreaTreated = (props: Props) => {
 	return (
 		<>
 			<Typography variant="body1" paragraph>
-				Distribution of the number of acres treated by conservation
-				practices across selected area by year. Conservation practices
-				are distinguished by funding source. Please see this document
-				for more information about assumptions made to estimate acres
-				treated:&nbsp;
+				Distribution of the number of acres treated by conservation practices across selected area by year.
+				Conservation practices are distinguished by funding source. Please see this document for more
+				information about assumptions made to estimate acres treated:&nbsp;
 				<a
 					href="http://draindrop.cropsci.illinois.edu/wp-content/uploads/2019/09/Data_Norms.pdf"
 					target="_blank"
@@ -172,25 +166,16 @@ const ProgramsAreaTreated = (props: Props) => {
 						</TableRow>
 					</TableHead>
 					<TableBody>
-						{entries(tableData).map(
-							([boundary, boundaryPrograms]) => (
-								<TableRow key={boundary}>
-									<TableCell>{boundary}</TableCell>
-									{programs.map((program: string) => (
-										<TableCell key={program} align="center">
-											{boundaryPrograms[program]
-												? precision(
-														boundaryPrograms[
-															program
-														] || 0,
-														0,
-													)
-												: "-"}
-										</TableCell>
-									))}
-								</TableRow>
-							),
-						)}
+						{entries(tableData).map(([boundary, boundaryPrograms]) => (
+							<TableRow key={boundary}>
+								<TableCell>{boundary}</TableCell>
+								{programs.map((program: string) => (
+									<TableCell key={program} align="center">
+										{boundaryPrograms[program] ? precision(boundaryPrograms[program] || 0, 0) : "-"}
+									</TableCell>
+								))}
+							</TableRow>
+						))}
 					</TableBody>
 				</Table>
 			</TableContainer>