Update material UI library v4 to v6

package.json

@@ -57,10 +57,12 @@
   "dependencies": {
     "@babel/plugin-proposal-decorators": "^7.19.0",
     "@craco/craco": "^7.1.0",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.61",
-    "@material-ui/styles": "^4.11.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.4",
+    "@mui/lab": "^6.0.0-beta.27",
+    "@mui/material": "^6.4.4",
+    "@mui/styles": "^6.4.4",
     "@sentry/electron": "^4.0.2",
     "classnames": "^2.3.2",
     "clean-stack": "3.0.1",

src/app/AlignmentCard.js

@@ -1,38 +1,35 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
-import IconButton from '@material-ui/core/IconButton';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
+import { makeStyles, withStyles } from '@mui/styles';
+import IconButton from '@mui/material/IconButton';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import classNames from 'classnames';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Chip from '@material-ui/core/Chip';
-import Switch from '@material-ui/core/Switch';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import InputLabel from '@material-ui/core/InputLabel';
-import Select from '@material-ui/core/Select';
-import Tooltip from '@material-ui/core/Tooltip';
-import Card from '@material-ui/core/Card';
-import CardHeader from '@material-ui/core/CardHeader';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
+import Chip from '@mui/material/Chip';
+import Switch from '@mui/material/Switch';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Tooltip from '@mui/material/Tooltip';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
 import OptionSelect from './components/OptionSelect';
 import OptionTextField from './components/OptionTextField';
-import CardActions from '@material-ui/core/CardActions';
-import LoadingButton from './components/LoadingButton';
-import Box from '@material-ui/core/Box';
+import CardActions from '@mui/material/CardActions';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 
 const InputSwitch = withStyles((theme) => ({
   switchBase: {
     color: theme.palette.input.secondaryText,
-    '&$checked': {
+    '&.Mui-checked': {
       color: theme.palette.input.dark,
     },
-    '&$checked + $track': {
+    '&.Mui-checked + .Mui-track': {
       backgroundColor: theme.palette.input.dark,
     },
   },
@@ -149,19 +146,17 @@ function _ModelTestButton({ alignment }) {
     return null;
   }
   return (
-    <LoadingButton
-      variant="contained"
-      color="default"
+    <Button
       style={{ marginLeft: 10 }}
-      classes={{
-        root: classes.primaryButton,
-      }}
+      className={classes.primaryButton}
+      variant="contained"
       loading={alignment.modeltestLoading}
+      loadingPosition="end"
       onClick={alignment.runModelTest}
       disabled={alignment.modeltestDisabled}
     >
       Run ModelTest
-    </LoadingButton>
+    </Button>
   );
 }
 _ModelTestButton.propTypes = {
@@ -279,7 +274,7 @@ function AlignmentCard({ className, alignment }) {
               aria-label="remove-alignment"
               title="Remove alignment"
             >
-              <IconButton onClick={alignment.remove}>
+              <IconButton onClick={alignment.remove} size="large">
                 <DeleteForeverIcon />
               </IconButton>
             </Tooltip>
@@ -288,7 +283,7 @@ function AlignmentCard({ className, alignment }) {
               aria-owns={anchorEl ? 'alignment-menu' : undefined}
               aria-haspopup="true"
               onClick={handleMenuClick}
-            >
+              size="large">
               <MoreVertIcon />
             </IconButton>
 
@@ -394,7 +389,7 @@ function FinalAlignmentCard({ className, alignment }) {
               aria-owns={anchorEl ? 'alignment-menu' : undefined}
               aria-haspopup="true"
               onClick={handleMenuClick}
-            >
+              size="large">
               <MoreVertIcon />
             </IconButton>
 

src/app/App.js

@@ -2,21 +2,22 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import clsx from 'clsx';
 import SplitPane from 'react-split-pane';
-import { makeStyles } from '@material-ui/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import IconButton from '@material-ui/core/IconButton';
-import Chip from '@material-ui/core/Chip';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import IconAdd from '@material-ui/icons/Add';
-import DeleteIcon from '@material-ui/icons/DeleteForever';
-import Box from '@material-ui/core/Box';
-import Snackbar from '@material-ui/core/Snackbar';
-import { Typography } from '@material-ui/core';
-import Modal from '@material-ui/core/Modal';
+import { makeStyles } from '@mui/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import IconButton from '@mui/material/IconButton';
+import Chip from '@mui/material/Chip';
+import CircularProgress from '@mui/material/CircularProgress';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import IconAdd from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/DeleteForever';
+import Box from '@mui/material/Box';
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import { Typography } from '@mui/material';
+import Modal from '@mui/material/Modal';
 
 import Model from './Model';
 import Input from './Input';
@@ -27,7 +28,6 @@ import store from './store';
 import PartitionEditor from './PartitionEditor';
 import CitationModal from './CitationModal';
 
-import SnackbarMessage from './components/SnackbarMessage';
 import ErrorBoundary from './components/ErrorBoundary';
 import ErrorDialog from './components/ErrorDialog';
 import ModifiedDialog from './components/ModifiedDialog';
@@ -185,7 +185,6 @@ const useStyles = makeStyles(theme => ({
     },
   },
   Modal: {
-    top: `50%`,
     margin: 'auto',
     display: 'flex',
     alignItems: 'center',
@@ -240,11 +239,13 @@ const App = () => {
         open={run.showModifiedSnack}
         onClose={run.clearShowModified}
       >
-        <SnackbarMessage
+        <Alert
           onClose={run.clearShowModified}
-          variant={'info'}
-          message={message}
-        />
+          severity="info"
+          sx={{ width: '100%' }}
+        >
+          {message}
+        </Alert>
       </Snackbar>
     );
   }
@@ -260,11 +261,13 @@ const App = () => {
         open={store.showAppSnack}
         onClose={store.clearAppSnack}
       >
-        <SnackbarMessage
+        <Alert
           onClose={store.clearAppSnack}
-          variant={'info'}
-          message={message}
-        />
+          severity="info"
+          sx={{ width: '100%' }}
+        >
+          {message}
+        </Alert>
       </Snackbar>
     );
   }
@@ -284,7 +287,7 @@ const App = () => {
               {TabItems}
             </Tabs>
             <Toolbar variant="dense" className={classes.Toolbar}>
-              <IconButton onClick={store.addRun}>
+              <IconButton onClick={store.addRun} size="large">
                 <IconAdd />
               </IconButton>
             </Toolbar>
@@ -369,7 +372,7 @@ const App = () => {
                 className={`${classes.verticalHeading} ${classes.consoleHeading}`}
               >
                 Console
-                {(run.stdout === '' && run.stderr === '') ? null : (
+                {run.stdout === '' && run.stderr === '' ? null : (
                   <DeleteIcon
                     onClick={run.clearConsole}
                     className={classes.deleteIcon}
@@ -421,15 +424,17 @@ const App = () => {
             autoHideDuration={6000}
             onClose={run.clearFinished}
           >
-            <SnackbarMessage
+            <Alert
               onClose={run.clearFinished}
-              variant={run.exitCode === 0 ? 'success' : 'info'}
-              message={
+              severity={run.exitCode === 0 ? 'success' : 'info'}
+              sx={{ width: '100%' }}
+            >
+              {
                 run.exitCode === 0
                   ? 'Calculation finished!'
                   : `Calculation cancelled!`
               }
-            />
+            </Alert>
           </Snackbar>
           {fileModifiedSnack(run)}
           {appSnack(store)}

src/app/AstralTreeCard.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
-import IconButton from '@material-ui/core/IconButton';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
+import { makeStyles } from '@mui/styles';
+import IconButton from '@mui/material/IconButton';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import classNames from 'classnames';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Chip from '@material-ui/core/Chip';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import Tooltip from '@material-ui/core/Tooltip';
-import Card from '@material-ui/core/Card';
-import CardHeader from '@material-ui/core/CardHeader';
-import CardContent from '@material-ui/core/CardContent';
-import CardActions from '@material-ui/core/CardActions';
-import Box from '@material-ui/core/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Chip from '@mui/material/Chip';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Tooltip from '@mui/material/Tooltip';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Box from '@mui/material/Box';
 
 // const useStyles = makeStyles(theme => ({
 const useStyles = makeStyles((theme) => {
@@ -92,7 +92,7 @@ function AstralTreeCard({ className, astralTree }) {
         action={
           <div>
             <Tooltip aria-label="remove-astralTree" title="Remove input trees">
-              <IconButton onClick={astralTree.remove}>
+              <IconButton onClick={astralTree.remove} size="large">
                 <DeleteForeverIcon />
               </IconButton>
             </Tooltip>
@@ -101,7 +101,7 @@ function AstralTreeCard({ className, astralTree }) {
               aria-owns={anchorEl ? 'astralTree-menu' : undefined}
               aria-haspopup="true"
               onClick={handleMenuClick}
-            >
+              size="large">
               <MoreVertIcon />
             </IconButton>
 

src/app/CitationModal.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import CardActions from '@material-ui/core/CardActions';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import { makeStyles } from '@mui/styles';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
 import CodeHighlight from './components/CodeHighlight';
 
@@ -77,6 +77,7 @@ function CitationModal({ citation }) {
           <Button
             aria-label="Copy to clipboard"
             variant="contained"
+            color="secondary"
             onClick={citation.copyToClipboard}
             style={{ marginRight: 10 }}
           >

src/app/Console.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
 
 

src/app/Input.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/styles';
-import Button from '@material-ui/core/Button';
+import { makeStyles } from '@mui/styles';
+import Button from '@mui/material/Button';
 import AlignmentCard, { FinalAlignmentCard } from './AlignmentCard';
 import AstralTreeCard from './AstralTreeCard';
 import PartitionFileCard from './PartitionFileCard';
-import Box from '@material-ui/core/Box';
+import Box from '@mui/material/Box';
 import TreeCard from './TreeCard';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import Dropzone from 'react-dropzone';
 
 const useStyles = makeStyles(theme => ({