feat(MUIv5): Upgrade SDS and MUI

frontend/package.json

@@ -12,14 +12,15 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@loadable/component": "^5.15.0",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "latest",
+    "@mui/icons-material": "^5.10.14",
+    "@mui/lab": "^5.0.0-alpha.108",
+    "@mui/material": "^5.10.14",
+    "@mui/styles": "^5.10.14",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@vgrid/sass-inline-svg": "^1.0.1",
     "client-zip": "^2.2.2",
     "clipboard-copy": "^4.0.1",
-    "czifui": "^5.0.0",
+    "czifui": "^12.0.1",
     "d3-scale-chromatic": "^3.0.0",
     "downloadjs": "^1.4.7",
     "echarts": "^5.2.2",

frontend/src/common/theme.ts

@@ -1,4 +1,4 @@
-import { createTheme } from "@material-ui/core/styles";
+import createTheme from "@mui/material/styles/createTheme";
 import { defaultAppTheme, makeThemeOptions } from "czifui";
 
 const { fontWeights } = defaultAppTheme;
@@ -186,3 +186,5 @@ themeOptions.colors.info = infoColors;
 const appTheme = makeThemeOptions(themeOptions);
 
 export const theme = createTheme(appTheme);
+
+export const OFF_WHITE = "#f8f8f8";

frontend/src/components/Header/components/AuthButtons/index.tsx

@@ -67,7 +67,6 @@ function LoggedInButtons({ name, email }: { name?: string; email?: string }) {
         keepMounted
         open={Boolean(anchorEl)}
         onClose={handleClose}
-        getContentAnchorEl={null}
       >
         {curatorAPIFeature && (
           <div>

frontend/src/components/Header/index.tsx

@@ -1,6 +1,6 @@
 import { AnchorButton } from "@blueprintjs/core";
 import styled from "@emotion/styled";
-import { Popper } from "@material-ui/core";
+import { Popper } from "@mui/material";
 import { DefaultMenuSelectOption, InputDropdown, MenuSelect } from "czifui";
 import Link from "next/link";
 import { useRouter } from "next/router";

frontend/src/components/common/Filter/components/FilterContent/components/FilterMenu/style.ts

@@ -1,6 +1,7 @@
 import { Classes, MenuItem } from "@blueprintjs/core";
 import styled from "@emotion/styled";
-import { Divider } from "@material-ui/core";
+import Divider from "@mui/material/Divider";
+import { CommonThemeProps } from "czifui";
 import { GRAY, PT_TEXT_COLOR } from "src/components/common/theme";
 import { scrollbar } from "../../../../common/style";
 
@@ -18,7 +19,7 @@ interface Props {
   menuWidth: number;
 }
 
-interface MenuListProps {
+interface MenuListProps extends CommonThemeProps {
   isMenuDivided?: boolean;
 }
 

frontend/src/components/common/Filter/components/FilterContent/components/FilterRange/index.tsx

@@ -1,5 +1,6 @@
-import { Mark, Slider } from "@material-ui/core";
-import React, { ChangeEvent, useState } from "react";
+import { Mark } from "@mui/base/SliderUnstyled";
+import Slider from "@mui/material/Slider";
+import React, { SyntheticEvent, useState } from "react";
 import {
   OnFilterFn,
   RangeCategoryView,
@@ -47,16 +48,14 @@ export default function FilterRange({
   const step = Math.floor((max - min) / STEP_SIZE);
 
   const onChangeSliderRange = (
-    // eslint-disable-next-line @typescript-eslint/ban-types -- {} as per Mui spec.
-    _changeEvent: ChangeEvent<{}>,
+    _changeEvent: Event,
     newRange: SliderRange
   ): void => {
     setRange(newRange);
   };
 
   const onCommittedSliderRange = (
-    // eslint-disable-next-line @typescript-eslint/ban-types -- {} as per Mui spec.
-    _changeEvent: ChangeEvent<{}>,
+    _changeEvent: SyntheticEvent | Event,
     committedRange: SliderRange
   ): void => {
     const [min, max] = committedRange as number[]; // Always expecting a min/max array here.

frontend/src/components/common/Filter/components/FilterContent/components/FilterRange/style.ts

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core";
+import makeStyles from "@mui/styles/makeStyles";
 import {
   GRAY,
   LIGHT_GRAY,

frontend/src/components/common/Filter/components/FilterContent/components/FilterViews/components/FilterView/style.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
-import { Divider } from "@material-ui/core";
-import { ListSubheader } from "czifui";
+import { Divider } from "@mui/material";
+import { CommonThemeProps, ListSubheader } from "czifui";
 import { scrollbar } from "src/components/common/Filter/common/style";
 import { GRAY } from "src/components/common/theme";
 
@@ -11,7 +11,7 @@ interface PanelProps {
   panelWidth: number;
 }
 
-interface ScrollProps {
+interface ScrollProps extends CommonThemeProps {
   maxHeight: number;
   scrollable?: boolean;
 }

frontend/src/components/common/Filter/components/FilterContent/components/FilterViews/components/FilterViewList/style.ts

@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { ListItemText } from "@material-ui/core";
-import { List, ListItem } from "czifui";
+import { ListItemText } from "@mui/material";
+import { List, ListItem, ListItemProps } from "czifui";
 import { GRAY } from "src/components/common/theme";
 
 interface Props {
@@ -12,7 +12,14 @@ export const ViewSublist = styled(List)`
   margin-left: 22px;
 `;
 
-const StyledListItem = styled(ListItem)`
+// (thuang): MUIv5 deprecated `button` prop, but not removed yet
+// We should add ListItemButton to SDS and use that instead
+// https://mui.com/material-ui/api/list-item/#props
+interface TempListItemProps extends ListItemProps {
+  button?: boolean;
+}
+
+const StyledListItem = styled(ListItem)<TempListItemProps>`
   /* TODO(cc) remove && after updating SDS version that has this commit https://github.com/chanzuckerberg/sci-components/pull/201 */
   && {
     letter-spacing: -0.1px;

frontend/src/components/common/Filter/components/FilterSearch/index.tsx

@@ -1,8 +1,7 @@
 import { IconNames } from "@blueprintjs/icons";
-import { SetSearchValueFn } from "src/components/common/Filter/components/FilterSearch/common/useFilterSearch";
-import { ClearIconButton, ViewSearch } from "./style";
-import { Icon } from "czifui";
 import { useRef } from "react";
+import { SetSearchValueFn } from "src/components/common/Filter/components/FilterSearch/common/useFilterSearch";
+import { ClearButtonIcon, ViewSearch } from "./style";
 
 interface Props {
   className?: string;
@@ -35,16 +34,12 @@ export default function FilterSearch({
       placeholder="Search"
       rightElement={
         searchValue ? (
-          <ClearIconButton
+          <ClearButtonIcon
             onClick={onClearSearch}
-            {...{
-              // TODO(cc) move this back to explicit prop={value} after upgrading SDS to enable type checking again
-              sdsSize: "small",
-            }}
+            sdsSize="small"
             sdsType="secondary"
-          >
-            <Icon sdsIcon="xMarkCircle" sdsSize="s" sdsType="iconButton" />
-          </ClearIconButton>
+            sdsIcon="xMarkCircle"
+          />
         ) : undefined
       }
       value={searchValue}

frontend/src/components/common/Filter/components/FilterSearch/style.ts

@@ -1,8 +1,8 @@
 import { Classes, InputGroup } from "@blueprintjs/core";
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import { ButtonIcon, getColors } from "czifui";
 import { GRAY, LIGHT_GRAY, PT_TEXT_COLOR } from "src/components/common/theme";
-import { getColors, IconButton } from "czifui";
-import { css } from "@emotion/react";
 
 export const ViewSearch = styled(InputGroup)`
   &.${Classes.INPUT_GROUP} {
@@ -37,7 +37,7 @@ export const ViewSearch = styled(InputGroup)`
   }
 `;
 
-export const ClearIconButton = styled(IconButton)`
+export const ClearButtonIcon = styled(ButtonIcon)`
   ${(props) => {
     const colors = getColors(props);
     const palette = props.theme.palette;

frontend/src/components/common/Grid/components/NTagCell/index.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@material-ui/core";
+import { Box } from "@mui/material";
 import React from "react";
 import { PLURALIZED_METADATA_LABEL } from "src/common/constants/metadata";
 import NTag from "src/components/common/Grid/components/NTag";

frontend/src/pages/_app.tsx

@@ -1,5 +1,5 @@
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
-import { StylesProvider, ThemeProvider } from "@material-ui/core/styles";
+import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
 import { NextPage } from "next";
 import { AppProps } from "next/app";
 import Script from "next/script";
@@ -53,7 +53,7 @@ function App({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <StylesProvider injectFirst>
+        <StyledEngineProvider>
           <EmotionThemeProvider theme={theme}>
             <ThemeProvider theme={theme}>
               <Layout>
@@ -62,7 +62,7 @@ function App({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
               <ReactQueryDevtools />
             </ThemeProvider>
           </EmotionThemeProvider>
-        </StylesProvider>
+        </StyledEngineProvider>
       </QueryClientProvider>
       <Script
         data-domain={configs.PLAUSIBLE_DATA_DOMAIN}

frontend/src/pages/docs/[...slug].tsx

@@ -16,6 +16,7 @@ import pathTool from "path";
 import { Fragment, memo, useState } from "react";
 import rehypeSlug from "rehype-slug";
 import { noop } from "src/common/constants/utils";
+import { OFF_WHITE } from "src/common/theme";
 import EmbeddedGoogleSlides from "src/components/EmbeddedGoogleSlides";
 import Layout from "src/components/Layout";
 import { StyledDocsLayout } from "src/components/Layout/style";
@@ -263,7 +264,7 @@ interface Props {
 }
 
 const StyledLeftNav = styled.div`
-  background-color: #f8f8f8;
+  background-color: ${OFF_WHITE};
   border-right: 1px solid #eaeaea;
   grid-area: leftsidebar;
   width: 100%;
@@ -278,7 +279,7 @@ const StyledLeftNav = styled.div`
 
   ::-webkit-scrollbar-thumb {
     background-clip: padding-box;
-    border-right: 4px #f8f8f8 solid;
+    border-right: 4px ${OFF_WHITE} solid;
     background-color: grey;
   }
 `;

frontend/src/views/WheresMyGene/components/Beta/index.tsx

@@ -10,6 +10,7 @@ export default function Beta({
     bottom: "10px",
     position: "absolute",
     right: "20px",
+    width: "360px",
     zIndex: "999",
   } as React.CSSProperties;
 

frontend/src/views/WheresMyGene/components/Beta/style.ts

@@ -1,8 +1,8 @@
 import styled from "@emotion/styled";
-import { getColors, Notification } from "czifui";
+import { CommonThemeProps, getColors, Notification } from "czifui";
 
 export const StyledNotification = styled(Notification)`
-  ${(props) => {
+  ${(props: CommonThemeProps) => {
     const colors = getColors(props);
 
     return `
@@ -24,7 +24,7 @@ export const StyledNotification = styled(Notification)`
 `;
 
 export const SubmitIssue = styled.a`
-  ${(props) => {
+  ${(props: CommonThemeProps) => {
     const colors = getColors(props);
 
     return `

frontend/src/views/WheresMyGene/components/CellInfoSideBar/index.tsx

@@ -1,4 +1,12 @@
-import { Button, Icon } from "czifui";
+import {
+  Button,
+  CellBasic,
+  CellHeader,
+  Icon,
+  Table,
+  TableHeader,
+  TableRow,
+} from "czifui";
 import React, { useCallback, useContext } from "react";
 import { useMarkerGenes } from "src/common/queries/wheresMyGene";
 import { BetaChip } from "src/components/Header/style";
@@ -7,7 +15,8 @@ import { addSelectedGenes } from "../../common/store/actions";
 import {
   ButtonContainer,
   CopyGenesButton,
-  StyledHTMLTable,
+  GeneCellHeader,
+  GeneHeaderWrapper,
   TissueName,
   TooltipButton,
 } from "./style";
@@ -77,10 +86,10 @@ function CellInfoSideBar({
           Add to Dot Plot
         </Button>
       </ButtonContainer>
-      <StyledHTMLTable condensed bordered={false}>
-        <thead>
-          <tr>
-            <td>
+      <Table>
+        <TableHeader>
+          <GeneCellHeader hideSortIcon>
+            <GeneHeaderWrapper>
               Gene{" "}
               <CopyGenesButton
                 onClick={handleCopyGenes}
@@ -91,21 +100,36 @@ function CellInfoSideBar({
               >
                 Copy
               </CopyGenesButton>
-            </td>
-            <td>P-value</td>
-            <td>Effect Size</td>
-          </tr>
-        </thead>
+            </GeneHeaderWrapper>
+          </GeneCellHeader>
+          <CellHeader hideSortIcon horizontalAlign="right">
+            P-value
+          </CellHeader>
+          <CellHeader hideSortIcon horizontalAlign="right">
+            Effect Size
+          </CellHeader>
+        </TableHeader>
         <tbody>
           {Object.entries(data.marker_genes).map((gene) => (
-            <tr key={gene[0]}>
-              <td>{gene[0]}</td>
-              <td>{gene[1].p_value.toPrecision(4)}</td>
-              <td>{gene[1].effect_size.toPrecision(4)}</td>
-            </tr>
+            <TableRow key={gene[0]}>
+              <CellBasic
+                shouldShowTooltipOnHover={false}
+                primaryText={gene[0]}
+              />
+              <CellBasic
+                shouldShowTooltipOnHover={false}
+                horizontalAlign="right"
+                primaryText={gene[1].p_value.toPrecision(4)}
+              />
+              <CellBasic
+                shouldShowTooltipOnHover={false}
+                horizontalAlign="right"
+                primaryText={gene[1].effect_size.toPrecision(4)}
+              />
+            </TableRow>
           ))}
         </tbody>
-      </StyledHTMLTable>
+      </Table>
     </div>
   );
 }