Upgrade to MUI v5, mobx-state-tree v5, mobx-react v6, mobx-react v7

[cmdcolin]

This is a draft PR to upgrade to using MUI v5. A large change, but generally is approaching working state

There is a small amount of back-compatibility for plugins that might use MUIv4 by using ReExports to export the @mui/material namespace into @material-ui/core, so plugins using v4 with @material-ui/core can still load (MSAView is an example of this and it still loads)

Some benefits

• Newer ecosystem won't go stale
• This PR would help us avoid pinning to webpack v5.70.0 (required by current usage of data-grid in UMD build of embedded components, see the "returntrue" syntax error [MUI-Datagrid] Uncaught ReferenceError: returntrue is not defined while using webpack mui/mui-x#4490), sort of related to ecosystem going stale

Some remaining todos

• storybook not loading currently AFAIK
• typescripting errors related to mui/styles conversion

Example link

https://jbrowse.org/code/jb2/mui5/?config=test_data%2Fvolvox%2Fconfig.json&session=share-V0DO6dUvkA&password=qsULt

[carolinebridge]

just briefly clicking around, mini controls are comically large

[garrettjstevens]

Looks like that error was fixed, but now I'm getting this one:

Button.js:104 Uncaught TypeError: Cannot read properties of undefined (reading 'dark')
    at ButtonRoot.ownerState.ownerState (Button.js:104:1)
    at transformedStyleArg (createStyled.js:191:1)
    at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
    at serializeStyles (emotion-serialize.browser.esm.js:264:1)
    at emotion-styled-base.browser.esm.js:131:1
    at emotion-element-cbed451f.browser.esm.js:36:1
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)

I'm not sure what that's from. If you want to check it out, that step doesn't need an Apollo server set up so you can start up the plugin by:

1. Starting up jbrowse-web on port 3000
2. Clone the Apollo3 repo and do:

yarn
cd packages/jbrowse-plugin-apollo/
yarn start

3. Go to http://localhost:3000/?config=http%3A%2F%2Flocalhost%3A9000%2Fjbrowse_config.json

[cmdcolin]

I changed up the "makeStyles adapter" so I think the apollo plugin will produce the proper styling now

The crash is also due to using color="default" on the Button component, if this is removed the crash is fixed. We could probably add a workaround in the ReExports to avoid the crash if needed, but might be easier to just fix in the plugin

[cmdcolin]

short note about color="default" https://mui.com/material-ui/migration/v5-component-changes/#%E2%9C%85-remove-default-color-prop

[garrettjstevens]

After removing the color="default" on the buttons and adding a DialogContentText re-export, I think everything in Apollo works with this branch.

[cmdcolin]

awesome 🥳 really glad to hear it works with apollo :)