Skip to content

Commit

Permalink
Upgrades to MUI 5 and React 17.
Browse files Browse the repository at this point in the history 
Also updates Cytoscape to the latest version (3.30.1)
-- #303
  • Loading branch information
@chrtannus
chrtannus committed Jul 29, 2024
1 parent 305fbe0 commit b2a9336
Show file tree
Hide file tree
Showing 36 changed files with 17,501 additions and 2,447 deletions.
19,036 changes: 16,995 additions & 2,041 deletions package-lock.json
View file

Large diffs are not rendered by default.

16 changes: 10 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,11 @@
},
"dependencies": {
"@aws-sdk/client-s3": "^3.332.0",
"@material-ui/core": "^4.12.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@mui/icons-material": "^5.16.4",
"@mui/lab": "^5.0.0-alpha.172",
"@mui/material": "^5.16.4",
"@mui/styled-engine-sc": "^6.0.0-alpha.18",
"@mui/styles": "^5.16.4",
"@react-hook/resize-observer": "^1.2.6",
"@sentry/browser": "^7.107.0",
"@sentry/integrations": "7.107.0",
Expand All @@ -52,8 +54,9 @@
"canvg": "4.0.1",
"chroma-js": "^2.4.2",
"classnames": "^2.2.6",
"clsx": "^2.1.1",
"cookie-parser": "^1.4.5",
"cytoscape": "^3.25.0",
"cytoscape": "^3.30.1",
"cytoscape-automove": "^1.10.3",
"cytoscape-bubblesets": "^3.2.0",
"cytoscape-fcose": "^2.2.0",
Expand All @@ -75,13 +78,14 @@
"mousetrap": "^1.6.5",
"node-fetch": "^2.6.7",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react": "^17.0.2",
"react-archer": "^4.3.0",
"react-dom": "^16.13.1",
"react-dom": "^17.0.2",
"react-horizontal-stacked-bar-chart": "^8.15.2",
"react-query": "^3.39.2",
"react-router-dom": "^5.3.3",
"react-virtuoso": "^3.1.1",
"styled-components": "^6.1.12",
"uuid": "^3.4.0",
"uuid-mongodb": "^2.5.1",
"winston": "^3.2.1",
Expand Down
14 changes: 7 additions & 7 deletions src/client/components/home/about.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import makeStyles from '@mui/styles/makeStyles';

import { linkoutProps } from '../defaults';
import Citation from './citation';

import { Container, Link, Typography } from '@material-ui/core';
import { Container, Link, Typography } from '@mui/material';

import { AppLogoIcon } from '../svg-icons';

Expand All @@ -14,7 +14,7 @@ const useStyles = makeStyles(theme => ({
width: 128,
height: 'auto',
marginBottom: theme.spacing(4),
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
width: 96,
marginBottom: theme.spacing(2),
},
Expand All @@ -23,7 +23,7 @@ const useStyles = makeStyles(theme => ({
fontSize: '1.85rem',
fontWeight: 'bold',
marginBottom: theme.spacing(2),
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
fontSize: '1.5rem',
},
},
Expand All @@ -32,7 +32,7 @@ const useStyles = makeStyles(theme => ({
paddingRight: 0,
marginTop: theme.spacing(6),
marginBottom: theme.spacing(6),
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
},
Expand All @@ -42,14 +42,14 @@ const useStyles = makeStyles(theme => ({
paddingRight: 0,
marginTop: theme.spacing(12),
marginBottom: 0,
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
marginTop: theme.spacing(6),
},
},
description: {
marginBottom: theme.spacing(4),
textAlign: 'left',
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
marginBottom: theme.spacing(2),
fontSize: 'unset',
},
Expand Down
10 changes: 5 additions & 5 deletions src/client/components/home/citation.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import makeStyles from '@mui/styles/makeStyles';

import { linkoutProps } from '../defaults';

import { Container, Grid, Link, Typography } from '@material-ui/core';
import FormatQuoteIcon from '@material-ui/icons/FormatQuote';
import { Container, Grid, Link, Typography } from '@mui/material';
import FormatQuoteIcon from '@mui/icons-material/FormatQuote';


const useStyles = makeStyles((theme) => ({
Expand All @@ -18,7 +18,7 @@ const useStyles = makeStyles((theme) => ({
backgroundColor: theme.palette.background.accent,
border: `1px solid ${theme.palette.text.accent}`,
borderRadius: 16,
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
padding: theme.spacing(0.5, 1, 1, 4),
maxWidth: '90%',
},
Expand All @@ -30,7 +30,7 @@ const useStyles = makeStyles((theme) => ({
marginLeft: theme.spacing(-5),
width: 30,
height: 30,
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
marginLeft: theme.spacing(-3.5),
},
},
Expand Down
12 changes: 6 additions & 6 deletions src/client/components/home/column-selector.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { Grid, Link, Typography } from '@material-ui/core';
import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@material-ui/core';
import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
import makeStyles from '@mui/styles/makeStyles';
import { Grid, Link, Typography } from '@mui/material';
import { FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@mui/material';
import { ToggleButton, ToggleButtonGroup } from '@mui/material';
import { ExperimentGroupIcon, ControlGroupIcon } from '../svg-icons';
import BlockIcon from '@material-ui/icons/Block';
import BlockIcon from '@mui/icons-material/Block';


const useStyles = makeStyles((theme) => ({
Expand Down Expand Up @@ -43,7 +43,7 @@ const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1, 0, 1, 0),
minWidth: 375,
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
minWidth: 0,
width: '100%',
},
Expand Down
37 changes: 19 additions & 18 deletions src/client/components/home/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import _ from 'lodash';
import classNames from 'classnames';
import uuid from 'uuid';

import { makeStyles, useTheme } from '@material-ui/core/styles';
import { useTheme } from '@mui/material/styles';

import makeStyles from '@mui/styles/makeStyles';

import { RecentNetworksController } from '../recent-networks-controller';
import { UploadController, RNA_SEQ, PRE_RANKED } from './upload-controller';
Expand All @@ -20,10 +22,10 @@ import { DebugMenu } from './debug-menu';
import StartDialog from './start-dialog';
import LinkOut from './link-out';

import { Container, Grid } from '@material-ui/core';
import { Button, Typography, Link } from '@material-ui/core';
import { Container, Grid } from '@mui/material';
import { Button, Typography, Link } from '@mui/material';

import NavigateNextIcon from '@material-ui/icons/NavigateNext';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';


export const STEP = {
Expand Down Expand Up @@ -113,13 +115,13 @@ const useContentStyles = makeStyles(theme => ({
marginBottom: theme.spacing(2),
padding: theme.spacing(0, 4, 0, 4),
textAlign: 'left',
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
marginTop: 0,
marginBottom: 0,
paddingTop: theme.spacing(1),
paddingBottom: theme.spacing(1),
},
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
padding: theme.spacing(2),
},
},
Expand All @@ -130,11 +132,11 @@ const useContentStyles = makeStyles(theme => ({
fontWeight: 800,
fontSize: 'clamp(1.5rem, 0.75rem + 2.5vw, 2.5rem)',
marginTop: theme.spacing(2),
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
marginTop: theme.spacing(1),
textAlign: 'center',
},
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
marginTop: 0,
},
},
Expand All @@ -143,7 +145,7 @@ const useContentStyles = makeStyles(theme => ({
color: theme.palette.text.secondary,
marginTop: theme.spacing(5),
marginBottom: theme.spacing(5),
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
fontSize: 'unset',
textAlign: 'center',
marginTop: theme.spacing(2.5),
Expand All @@ -152,15 +154,15 @@ const useContentStyles = makeStyles(theme => ({
},
heroSection: {
width: '100%',
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
textAlign: 'center',
alignItems: 'center',
},
},
section: {
width: '100%',
padding: theme.spacing(10, 0, 10, 0),
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
padding: theme.spacing(6, 0, 6, 0),
},
},
Expand All @@ -174,15 +176,15 @@ const useContentStyles = makeStyles(theme => ({
fontSize: '1.85rem',
fontWeight: 'bold',
marginBottom: theme.spacing(2),
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
fontSize: '1.5rem',
},
},
sectionDescription: {
maxWidth: 768,
marginBottom: theme.spacing(6),
color: theme.palette.text.secondary,
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
fontSize: 'unset',
},
},
Expand Down Expand Up @@ -408,7 +410,6 @@ export function Content({ recentNetworksController }) {
direction={mobile || tablet ? 'column' : 'row'}
justifyContent="center"
alignItems="center"
spacing={2}
>
<Grid item xs={mobile || tablet ? 12 : 6}>
<Grid container direction="column" justifyContent="center" alignItems="center">
Expand Down Expand Up @@ -503,10 +504,10 @@ const useFigureStyles = makeStyles(theme => ({
border: `4px solid ${theme.palette.divider}`,
borderRadius: 8,
boxShadow: '0 20px 25px -5px rgb(0, 0, 0, 0.1), 0 8px 10px -36px rgb(0, 0, 0, 0.1)',
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
marginBottom: theme.spacing(4),
},
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
maxWidth: '80%',
maxHeight: 300,
},
Expand All @@ -516,7 +517,7 @@ const useFigureStyles = makeStyles(theme => ({
function Figure() {
const classes = useFigureStyles();
const theme = useTheme();
const img = theme?.palette?.type === 'dark' ? 'hero-figure-dark.png' : 'hero-figure-light.png';
const img = theme?.palette?.mode === 'dark' ? 'hero-figure-dark.png' : 'hero-figure-light.png';

return <img src={`/images/${img}`} alt="figure" className={classes.figure} />;
}
Expand All @@ -526,7 +527,7 @@ function Figure() {
const useLogoBarStyles = makeStyles(theme => ({
root: {
marginTop: theme.spacing(12),
[theme.breakpoints.down('xs')]: {
[theme.breakpoints.down('sm')]: {
marginTop: theme.spacing(4),
},
},
Expand Down
2 changes: 1 addition & 1 deletion src/client/components/home/debug-menu.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useReducer, useEffect } from 'react';
import { Dialog, DialogActions, DialogContent, DialogTitle, Button } from '@material-ui/core';
import { Dialog, DialogActions, DialogContent, DialogTitle, Button } from '@mui/material';
import Mousetrap from 'mousetrap';
import PropTypes from 'prop-types';

Expand Down
8 changes: 4 additions & 4 deletions src/client/components/home/faq.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';

import { makeStyles } from '@material-ui/core/styles';
import makeStyles from '@mui/styles/makeStyles';

import LinkOut from './link-out';
import { Typography } from '@material-ui/core';
import { Typography } from '@mui/material';


const ulStyle = { marginTop: '0.5rem' };
Expand Down Expand Up @@ -157,7 +157,7 @@ const useStyles = makeStyles((theme) => ({
maxWidth: 'none',
margin: 0,
padding: 0,
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
gridTemplateColumns: 'repeat(1, minmax(0, 1fr))',
gap: 0,
},
Expand All @@ -169,7 +169,7 @@ const useStyles = makeStyles((theme) => ({
entry: {
marginTop: theme.spacing(4),
marginBottom: theme.spacing(4),
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
marginBottom: 0,
},
},
Expand Down
8 changes: 4 additions & 4 deletions src/client/components/home/footer.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';

import { makeStyles } from '@material-ui/core/styles';
import makeStyles from '@mui/styles/makeStyles';

import { Container, Grid, Divider, Toolbar } from '@material-ui/core';
import { Container, Grid, Divider, Toolbar } from '@mui/material';



Expand All @@ -16,14 +16,14 @@ const useStyles = makeStyles(theme => ({
color: theme.palette.text.secondary,
},
copyright: {
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
textAlign: 'center',
marginBottom: theme.spacing(8),
},
},
logoBar: {
paddingLeft: theme.spacing(15),
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
paddingLeft: 0,
},
},
Expand Down
Loading

0 comments on commit b2a9336

Please sign in to comment.