Update MUI version on MCC (#123)

* Update MUI version on MCC

Author: bbimber

mcc/package-lock.json

@@ -11,18 +11,19 @@
     "test": "cross-env NODE_ENV=test jest"
   },
   "dependencies": {
-    "@labkey/api": "^1.23.0",
-    "@labkey/components": "~2.217.0",
-    "chart.js": "^3.7.0",
-    "react-chartjs-2": "^4.3.1",
+    "@labkey/api": "^1.24.0",
+    "chart.js": "^4.4.0",
+    "react-chartjs-2": "^5.2.0",
     "uuid": "^9.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-loader": "^4.13.0",
-    "react-tooltip": "^4.2.21",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/styles": "^4.11.5",
-    "@mui/x-data-grid": "^4.0.2",
+    "react-tooltip": "^5.21.1",
+    "@mui/material": "^5.0.0",
+    "@mui/styles": "^5.14.7",
+    "@mui/x-data-grid": "^6.0.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "tsv": "^0.2.0"
   },
   "devDependencies": {

mcc/package.json

@@ -27,9 +27,9 @@ import {
     DialogActions,
     DialogContent,
     DialogContentText,
-    DialogTitle, TextareaAutosize,
-    TextField
-} from '@material-ui/core';
+    DialogTitle,
+    TextareaAutosize
+} from '@mui/material';
 
 import {
     animalWellfarePlaceholder,

mcc/src/client/AnimalRequest/animal-request.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { ErrorBoundary } from '@labkey/components';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 import '../tailwind.css';
 
-import { AnimalRequest } from './animal-request'
+import { AnimalRequest } from './animal-request';
+import { ErrorBoundary } from '../components/ErrorBoundary';
 
 // Need to wait for container element to be available in labkey wrapper before render
 window.addEventListener('DOMContentLoaded', (event) => {

mcc/src/client/AnimalRequest/app.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import ReactTooltip from 'react-tooltip';
+import { Tooltip as ReactToolTip } from 'react-tooltip';
 
 export default function Tooltip(props) {
     return (
         <>
-            <svg data-tip={props.text} data-for={props.id} xmlns="http://www.w3.org/2000/svg" className="tw-h-6 tw-w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" tabIndex={-1}>
+            <svg data-tooltip-html={props.text} data-tooltip-id={props.id} xmlns="http://www.w3.org/2000/svg" className="tw-h-6 tw-w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" tabIndex={-1}>
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
 
-            <ReactTooltip className="tw-w-96" id={props.id} effect='solid' multiline={true}/>
+            <ReactToolTip className="tw-w-96" style={{maxWidth: 350}} id={props.id} />
         </>
     )
 }

mcc/src/client/AnimalRequest/components/tooltip.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { ActionURL, Filter, getServerContext, Query } from '@labkey/api';
 import './../Dashboard/dashboard.css';
 import ScatterChart from './ScatterChart';
-import { ErrorBoundary } from '@labkey/components';
-import { Box, Tab, Tabs } from '@material-ui/core';
+import { Box, Tab, Tabs } from '@mui/material';
 import KinshipTable from './KinshipTable';
+import { ErrorBoundary } from '../components/ErrorBoundary';
 
 
 function GenomeBrowser(props: {jbrowseId: any}) {

mcc/src/client/GeneticsPlot/GeneticsPlot.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { DataGrid, GridColumns, GridToolbar } from '@mui/x-data-grid';
+import { DataGrid, GridColDef, GridPaginationModel, GridToolbar } from '@mui/x-data-grid';
 
 export default function KinshipTable(props: {data: any}) {
     const { data } = props;
-    const [pageSize, setPageSize] = React.useState<number>(25);
+    const [pageModel, setPageModel] = React.useState<GridPaginationModel>({page: 0, pageSize: 25});
 
-    const columns: GridColumns = [
+    const columns: GridColDef[] = [
         { field: 'Id', headerName: 'Animal 1', width: 150, type: "string", headerAlign: 'left' },
         { field: 'Id2', headerName: 'Animal 2', width: 150, type: "string", headerAlign: 'left' },
         { field: 'kinship', headerName: 'Kinship', width: 125, type: "number", headerAlign: 'right' },
@@ -17,10 +17,12 @@ export default function KinshipTable(props: {data: any}) {
             autoHeight={true}
             columns={columns}
             rows={data}
-            components={{ Toolbar: GridToolbar }}
-            rowsPerPageOptions={[10,25,50,100]}
-            pageSize={pageSize}
-            onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
+            slots={{
+                toolbar: GridToolbar
+            }}
+            pageSizeOptions={[10,25,50,100]}
+            paginationModel={pageModel}
+            onPaginationModelChange={(model) => setPageModel(model)}
         />
     );
 }

mcc/src/client/GeneticsPlot/KinshipTable.tsx

@@ -1,18 +1,22 @@
 import React, { useEffect, useState } from 'react';
 import { ActionURL, Filter, Query } from '@labkey/api';
-import {
-    Box,
-    Button,
-    makeStyles,
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableRow,
-    TextField
-} from '@material-ui/core';
+import { Box, Button, Table, TableBody, TableCell, TableHead, TableRow, TextField } from '@mui/material';
 import { AnimalRequestModel } from '../../components/RequestUtils';
 import SavingOverlay from '../../AnimalRequest/saving-overlay';
+import { styled } from '@mui/styles';
+
+const StyledTableHead = styled(TableCell)(({ theme }) => ({
+    fontWeight: "bold",
+    padding: 5,
+    paddingTop: 0
+}))
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+    border: 1,
+    borderColor: "black",
+    borderStyle: "solid",
+    padding: 5
+}))
 
 export default function FinalReviewForm(props: {requestData: AnimalRequestModel}) {
     const { requestData } = props
@@ -22,20 +26,6 @@ export default function FinalReviewForm(props: {requestData: AnimalRequestModel}
     const [ hasSubmitted, setHasSubmitted ] = useState(false)
     const [ pendingStatus, setPendingStatus ] = useState<string>(null)
 
-    const styles = makeStyles({
-        tableHead: {
-            fontWeight: "bold",
-            padding: 5,
-            paddingTop: 0
-        },
-        tableCell: {
-            border: 1,
-            borderColor: "black",
-            borderStyle: "solid",
-            padding: 5
-        }
-    })()
-
     useEffect(() => {
         Query.selectRows({
             schemaName: "mcc",
@@ -145,18 +135,18 @@ export default function FinalReviewForm(props: {requestData: AnimalRequestModel}
         <Table style={{display: "inline-block", padding: 5}}>
             <TableHead>
                 <TableRow key={"header"}>
-                    <TableCell className={styles.tableHead}>Reviewer</TableCell>
-                    <TableCell className={styles.tableHead}>Review</TableCell>
-                    <TableCell className={styles.tableHead}>Comments</TableCell>
+                    <StyledTableHead>Reviewer</StyledTableHead>
+                    <StyledTableHead>Review</StyledTableHead>
+                    <StyledTableHead>Comments</StyledTableHead>
                 </TableRow>
             </TableHead>
             <TableBody>
                 {reviewData.map((row, idx) => {
                     return(
                         <TableRow key={"review-" + row.reviewerid} style = { idx % 2 ? { background : "#fdffe0" }:{ background : "white" }}>
-                            <TableCell className={styles.tableCell}>{row['reviewerid/displayName']}</TableCell>
-                            <TableCell className={styles.tableCell}>{row.review}</TableCell>
-                            <TableCell className={styles.tableCell}>{row.comments}</TableCell>
+                            <StyledTableCell>{row['reviewerid/displayName']}</StyledTableCell>
+                            <StyledTableCell>{row.review}</StyledTableCell>
+                            <StyledTableCell>{row.comments}</StyledTableCell>
                         </TableRow>
                     )
                 })}

mcc/src/client/RequestReview/components/FinalReviewForm.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { ActionURL, Filter, Query } from '@labkey/api';
-import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@material-ui/core';
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@mui/material';
 import { AnimalRequestModel } from '../../components/RequestUtils';
 import SavingOverlay from '../../AnimalRequest/saving-overlay';
 

mcc/src/client/RequestReview/components/InternalReviewForm.tsx

@@ -1,6 +1,6 @@
 import { ActionURL, Filter, getServerContext, Query } from '@labkey/api';
 import React, { useEffect, useState } from 'react';
-import { Box, Button, MenuItem, Select, Table, TableBody, TableCell, TableRow, TextField } from '@material-ui/core';
+import { Box, Button, MenuItem, Select, Table, TableBody, TableCell, TableRow, TextField } from '@mui/material';
 import SavingOverlay from '../../AnimalRequest/saving-overlay';
 
 export default function RabReviewForm(props: {requestId: string}) {