Upgrade MUI to V5 and fix a bunch of bad code

README.md

@@ -35,8 +35,8 @@ We restrict who can access this application through Utah's CAS server, using duo
 
 1. `cd` to the frontend folder
 1. Configure your .env file with the correct parameters based on the the .env.default
-1. Run `npm install`
-1. Run `npm run start`
+1. Run `yarn install`
+1. Run `yarn start`
 
 
 ## Deployment docs
@@ -56,7 +56,8 @@ ln -s ../cpt_codes_cleaned.csv backend/api/cpt_codes_cleaned.csv
 
 # Start/restart the frontend
 cd frontend
-/usr/bin/scl enable rh-nodejs10 -- npm run build
+/usr/bin/scl enable rh-nodejs10 -- yarn
+/usr/bin/scl enable rh-nodejs10 -- yarn build
 sudo /usr/bin/rsync -av /uufs/chpc.utah.edu/common/HIPAA/IRB_00124248/deployed-app/bloodvis/frontend/build/* /var/www/html
 sudo /usr/bin/chown -R apache. /var/www/html
 sudo systemctl restart httpd24-httpd

frontend/package.json

@@ -3,28 +3,27 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@date-io/date-fns": "^1.3.13",
-        "@material-ui/core": "^4.12.2",
-        "@material-ui/icons": "^4.11.2",
-        "@material-ui/lab": "^4.0.0-alpha.60",
-        "@material-ui/pickers": "^3.3.10",
+        "@emotion/react": "^11.10.0",
+        "@emotion/styled": "^11.10.0",
+        "@mui/icons-material": "^5.8.4",
+        "@mui/material": "^5.9.3",
+        "@mui/x-date-pickers": "^5.0.0-beta.3",
         "@types/d3": "^7.0.0",
         "@types/jest": "26.0.23",
         "@types/jquery": "^3.5.5",
         "@types/react": "^17.0.11",
         "@types/react-dom": "17.0.8",
         "@types/react-grid-layout": "^1.1.1",
         "@types/react-native": "^0.64.10",
-        "@types/styled-components": "^5.1.10",
         "@visdesignlab/trrack": "^2.0.0-alpha.10",
-        "@welldone-software/why-did-you-render": "^6.2.0",
+        "add": "^2.0.6",
         "axios": "^0.21.2",
         "d3": "^7.0.0",
-        "date-fns": "^2.23.0",
+        "date-fns": "^2.29.1",
         "jquery": "^3.6.0",
-        "material-ui-nested-menu-item": "^1.0.2",
         "mobx": "^6.3.2",
         "mobx-react": "^7.2.0",
+        "mui-nested-menu": "^2.1.2",
         "node-sass": "^7.0.0",
         "pdfast": "^0.2.0",
         "react": "^17.0.2",
@@ -33,8 +32,7 @@
         "react-google-charts": "^4.0.0",
         "react-grid-layout": "^1.2.5",
         "react-idle-timer": "^4.6.4",
-        "react-scripts": "^4.0.3",
-        "styled-components": "^5.3.0",
+        "react-scripts": "^5.0.1",
         "typescript": "^4.3.4",
         "use-deep-compare-effect": "^1.6.1"
     },

frontend/src/App.tsx

@@ -13,6 +13,8 @@ import { SurgeryUrgencyArray } from "./Presets/DataDict";
 import './App.css';
 import { checkIfCriteriaMet } from "./HelperFunctions/CaseListProducer";
 import useDeepCompareEffect from "use-deep-compare-effect";
+import BrowserWarning from "./Components/Modals/BrowserWarning";
+import DataRetrieval from "./Components/Modals/DataRetrieval";
 
 export const DataContext = createContext<SingleCasePoint[]>([]);
 
@@ -22,6 +24,8 @@ const App: FC = () => {
     const [hemoData, setHemoData] = useState<SingleCasePoint[]>([]);
     const [outputFilteredData, setOutputFilteredDAta] = useState<SingleCasePoint[]>([]);
 
+    const [dataLoading, setDataLoading] = useState(true);
+    const [dataLoadingFailed, setDataLoadingFailed] = useState(false);
 
     useEffect(() => {
         if (process.env.REACT_APP_REQUIRE_LOGIN !== "true" || (store.configStore.isLoggedIn && hemoData.length === 0)) {
@@ -160,15 +164,20 @@ const App: FC = () => {
 
                 cacheData = cacheData.filter((d: any) => d);
                 setHemoData(cacheData);
-                store.configStore.dataLoading = false;
+                setDataLoading(false);
             }).catch((error) => {
-                store.configStore.dataLoadingFailed = true;
-                store.configStore.dataLoading = false;
+                setDataLoadingFailed(true);
+                setDataLoading(false);
             });
     }
 
     return <DataContext.Provider value={outputFilteredData}>
         <Dashboard />
+        {(process.env.REACT_APP_REQUIRE_LOGIN === "true") ?
+            <>
+                <BrowserWarning />
+                <DataRetrieval dataLoading={dataLoading} dataLoadingFailed={dataLoadingFailed} />
+            </> : <></>}
     </DataContext.Provider>;
 };
 

frontend/src/Components/Charts/ChartAccessories/AnnotationForm.tsx

@@ -1,46 +1,46 @@
-import { TextField } from "@material-ui/core";
+import { TextField } from "@mui/material";
 import { observer } from "mobx-react";
 import { FC, useState, useContext } from "react";
 import Store from "../../../Interfaces/Store";
 import { useEffect } from "react";
 
 
 type Props = {
-    annotationText: string;
-    chartI: string;
+  annotationText: string;
+  chartI: string;
 };
 
 const AnnotationForm: FC<Props> = ({ annotationText, chartI }: Props) => {
-    const [formInput, setFormInput] = useState(annotationText);
-    const store = useContext(Store);
-
-
-    useEffect(() => {
-        setFormInput(annotationText);
-    }, [annotationText]);
-
-    return (<div>
-        <TextField
-            style={{ width: "100%" }}
-            id="outlined-multiline-static"
-            label="Notes"
-            multiline
-            size="small"
-            value={formInput}
-            variant="outlined"
-            onBlur={() => {
-                if (formInput !== annotationText) {
-                    store.chartStore.changeNotation(chartI, formInput);
-                    store.configStore.openSnackBar = true;
-                    store.configStore.snackBarMessage = "Note Saved Locally.";
-                    store.configStore.snackBarIsError = false;
-                }
-            }}
-            onChange={(e) => { setFormInput(e.target.value); }}
-        />
-
-    </div>
-    );
+  const [formInput, setFormInput] = useState(annotationText);
+  const store = useContext(Store);
+
+
+  useEffect(() => {
+    setFormInput(annotationText);
+  }, [annotationText]);
+
+  return (<div>
+    <TextField
+      style={{ width: "100%" }}
+      id="outlined-multiline-static"
+      label="Notes"
+      multiline
+      size="small"
+      value={formInput}
+      variant="outlined"
+      onBlur={() => {
+        if (formInput !== annotationText) {
+          store.chartStore.changeNotation(chartI, formInput);
+          store.configStore.openSnackBar = true;
+          store.configStore.snackBarMessage = "Note Saved Locally.";
+          store.configStore.snackBarIsError = false;
+        }
+      }}
+      onChange={(e) => { setFormInput(e.target.value); }}
+    />
+
+  </div>
+  );
 };
 
 export default observer(AnnotationForm);

frontend/src/Components/Charts/ChartAccessories/ChartConfigMenu.tsx

@@ -1,11 +1,10 @@
 import { useContext, useState } from "react";
 import { FC } from "react";
-
 import Store from "../../../Interfaces/Store";
 import { addOptions, OutcomeOptions, typeDiction } from "../../../Presets/DataDict";
-import SettingsIcon from '@material-ui/icons/Settings';
-import NestedMenuItem from "material-ui-nested-menu-item";
-import { IconButton, Menu, MenuItem } from "@material-ui/core";
+import SettingsIcon from '@mui/icons-material/Settings';
+import { NestedMenuItem } from "mui-nested-menu";
+import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
 import { observer } from "mobx-react";
 
 
@@ -54,17 +53,16 @@ const ChartConfigMenu: FC<Props> = ({ xAggregationOption, yValueOption, chartTyp
 
     return (
         <>
-            <IconButton size="small" onClick={handleClick}>
-                <SettingsIcon />
-            </IconButton>
+            <Tooltip title='Update chart attributes'>
+                <IconButton size="small" onClick={handleClick}>
+                    <SettingsIcon />
+                </IconButton>
+            </Tooltip>
             <Menu anchorEl={anchorEl} open={open}
-                onClose={handleClose}
-            >
+                onClose={handleClose}>
                 <NestedMenuItem
                     label="Change Aggregation"
-                    parentMenuOpen={open}
-                >
-
+                    parentMenuOpen={open}>
                     {addOptions[chartTypeIndexinArray][1].map((option) => (
                         <MenuItem key={option.key} onClick={() => { changeXAxis(option.key); }}>{option.text}</MenuItem>
                     ))}
@@ -77,15 +75,15 @@ const ChartConfigMenu: FC<Props> = ({ xAggregationOption, yValueOption, chartTyp
                         <MenuItem key={option.key} onClick={() => { changeYAxis(option.key); }}>{option.text}</MenuItem>
                     ))}
                     {chartTypeIndexinArray === 0 ? <MenuItem key={"NONE"} onClick={() => { changeYAxis(""); }}>None</MenuItem> : <></>}
-                </NestedMenuItem> : <></>}
+                </NestedMenuItem> : []}
                 {requireOutcome ? <NestedMenuItem
                     label="Change Outcome Comparison"
                     parentMenuOpen={open}
                 >
                     {OutcomeDropdownOptions.map((option) => (
                         <MenuItem key={option.key} onClick={() => { changeOutcome(option.key); }}>{option.text}</MenuItem>
                     ))}
-                </NestedMenuItem> : <></>}
+                </NestedMenuItem> : []}
             </Menu>
         </>);
 };

frontend/src/Components/Charts/ChartAccessories/ComparisonLegend.tsx

@@ -1,7 +1,7 @@
+import styled from "@emotion/styled";
 import { timeFormat } from "d3";
 import { observer } from "mobx-react";
 import { FC, useContext } from "react";
-import styled from "styled-components";
 import Store from "../../../Interfaces/Store";
 import { DifferentialSquareWidth, preop_color, postop_color, OffsetDict, largeFontSize, regularFontSize } from "../../../Presets/Constants";
 import { AcronymDictionary } from "../../../Presets/DataDict";

frontend/src/Components/Charts/ChartAccessories/ExtraPairButtons.tsx

@@ -1,7 +1,7 @@
-import { IconButton, Menu, MenuItem } from "@material-ui/core";
+import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
 import { useContext } from "react";
 import { FC, useState } from "react";
-import InsertChartIcon from '@material-ui/icons/InsertChart';
+import InsertChartIcon from '@mui/icons-material/InsertChart';
 import Store from "../../../Interfaces/Store";
 import { ExtraPairOptions } from "../../../Presets/DataDict";
 import { ExtraPairLimit } from "../../../Presets/Constants";
@@ -32,9 +32,11 @@ const ExtraPairButtons: FC<Props> = ({ extraPairLength, chartId, disbleButton }:
 
     return (
         <>
-            <IconButton color="primary" size="small" disabled={extraPairLength >= ExtraPairLimit || disbleButton} onClick={handleClick}>
-                <InsertChartIcon />
-            </IconButton>
+            <Tooltip title='Add additional attributes to the left of the chart'>
+                <IconButton color="primary" size="small" disabled={extraPairLength >= ExtraPairLimit || disbleButton} onClick={handleClick}>
+                    <InsertChartIcon />
+                </IconButton>
+            </Tooltip>
             <Menu anchorEl={anchorEl} open={open}
                 onClose={handleClose}
             >

frontend/src/Components/Charts/ChartAccessories/ExtraPairPlots/ExtraPairBar.tsx

@@ -1,9 +1,8 @@
 import { FC, useCallback } from "react";
-
 import { scaleLinear, max, format, scaleBand } from "d3";
 import { ExtraPairWidth } from "../../../../Presets/Constants";
 import { observer } from "mobx-react";
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from "@mui/material";
 
 
 interface OwnProps {
@@ -31,6 +30,7 @@ const ExtraPairBar: FC<Props> = ({ secondaryDataSet, dataSet, aggregationScaleDo
         }
         const valueScale = scaleLinear().domain([0, maxVal]).range([0, ExtraPairWidth.BarChart]);
         return valueScale;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dataSet]);
 
     return (