chore: Upgrade MUI and SDS - SCE-3 SCE-2 (#1075)

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-28c98d87
+        tag: sha-de849f4b
       replicaCount: 1
       env:
         # env vars common to all deployment stages

client/package.json

@@ -57,15 +57,16 @@
     "@blueprintjs/core": "^5.11.0",
     "@blueprintjs/icons": "^5.11.0",
     "@blueprintjs/select": "^5.2.2",
-    "@emotion/css": "^11.9.0",
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@czi-sds/components": "^20.7.0",
+    "@emotion/css": "^11.13.0",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/base": "^5.0.0-beta.40",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/material": "^5.16.7",
     "abort-controller": "^3.0.0",
     "core-js": "^3.6.5",
-    "czifui": "^6.6.0",
     "d3": "^4.10.0",
     "d3-scale-chromatic": "^1.5.0",
     "flatbuffers": "^1.11.0",

client/src/common/style.ts

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+import { Button } from "@czi-sds/components";
+
+export const InfoButton = styled(Button)`
+  padding: 0;
+  width: 18px;
+  min-width: 18px;
+  &:hover {
+    background-color: transparent;
+  }
+`;
+
+export const InfoButtonWrapper = styled.div`
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+`;

client/src/components/BottomBanner/index.tsx

@@ -26,45 +26,45 @@ const mapDispatchToProps = (dispatch: AppDispatch) => ({
   dispatch,
 });
 
-const BottomBanner = memo(
-  ({
-    surveyLink,
-    showBottomBanner,
-    dispatch,
-  }: BottomBannerProps): JSX.Element | null => {
-    const setBottomBannerLastClosedTime = () => {
-      dispatch({
-        type: "update bottom banner last closed time",
-        time: Date.now(),
-      });
-    };
+function BannerContent({ surveyLink }: { surveyLink: string }): JSX.Element {
+  return (
+    <span>
+      {BOTTOM_BANNER_SURVEY_TEXT}
+      <StyledLink href={surveyLink} target="_blank" rel="noopener">
+        {BOTTOM_BANNER_SURVEY_LINK_TEXT}
+      </StyledLink>
+    </span>
+  );
+}
+
+function BottomBanner({
+  surveyLink,
+  showBottomBanner,
+  dispatch,
+}: BottomBannerProps): JSX.Element | null {
+  const setBottomBannerLastClosedTime = () => {
+    dispatch({
+      type: "update bottom banner last closed time",
+      time: Date.now(),
+    });
+  };
 
-    if (!showBottomBanner) return null;
+  if (!showBottomBanner) return null;
 
-    return (
-      <>
-        <StyledBottomBannerWrapper
-          id={BOTTOM_BANNER_ID}
-          data-testid={BOTTOM_BANNER_ID}
-        >
-          <StyledBanner
-            dismissible
-            sdsType="primary"
-            onClose={setBottomBannerLastClosedTime}
-            // @ts-expect-error -- czifui Banner component types text prop as a string but the prop works with JSX as well
-            text={
-              <span>
-                {BOTTOM_BANNER_SURVEY_TEXT}
-                <StyledLink href={surveyLink} target="_blank" rel="noopener">
-                  {BOTTOM_BANNER_SURVEY_LINK_TEXT}
-                </StyledLink>
-              </span>
-            }
-          />
-        </StyledBottomBannerWrapper>
-      </>
-    );
-  }
-);
+  return (
+    <StyledBottomBannerWrapper
+      id={BOTTOM_BANNER_ID}
+      data-testid={BOTTOM_BANNER_ID}
+    >
+      <StyledBanner
+        dismissible
+        sdsType="primary"
+        onClose={setBottomBannerLastClosedTime}
+      >
+        <BannerContent surveyLink={surveyLink} />
+      </StyledBanner>
+    </StyledBottomBannerWrapper>
+  );
+}
 
-export default connect(mapStateToProps, mapDispatchToProps)(BottomBanner);
+export default connect(mapStateToProps, mapDispatchToProps)(memo(BottomBanner));

client/src/components/BottomBanner/style.ts

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { Banner, Icon } from "czifui";
+import { Banner, Icon } from "@czi-sds/components";
 import { beta100, beta400, gray500 } from "../theme";
 
 export const SKINNY_MODE_BREAKPOINT_WIDTH = 960;

client/src/components/NavBar/components/NavDivider/style.ts

@@ -1,8 +1,6 @@
-import { Divider } from "@material-ui/core";
-import { CommonThemeProps, getColors } from "czifui";
+import { Divider } from "@mui/material";
 import styled from "@emotion/styled";
-
-const gray500 = (props: CommonThemeProps) => getColors(props)?.gray[500];
+import { gray500 } from "../../../theme";
 
 export const NavDivider = styled(Divider)`
   background-color: ${gray500};

client/src/components/NavBar/style.ts

@@ -1,7 +1,7 @@
 import { Classes } from "@blueprintjs/core";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
-import { Chip, CommonThemeProps, fontCapsXxxs } from "czifui";
+import { Tag, CommonThemeProps, fontCapsXxxs } from "@czi-sds/components";
 import { PT_TEXT_COLOR } from "./theme";
 import { HEADER_HEIGHT_PX } from "../../globals";
 import {
@@ -105,7 +105,7 @@ export const NavItemContainer = styled.span`
   gap: ${spacesL}px;
 `;
 
-export const BetaChip = styled(Chip)`
+export const BetaChip = styled(Tag)`
   background: #7a41ce;
   color: white;
   margin-left: 4px;

client/src/components/app.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Helmet from "react-helmet";
 import { connect } from "react-redux";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
-import { StylesProvider, ThemeProvider } from "@material-ui/core/styles";
+import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
 import { theme } from "./theme";
 import BottomBanner from "./BottomBanner";
 
@@ -78,7 +78,7 @@ class App extends React.Component<StateProps & { dispatch: AppDispatch }> {
     } = this.props;
     return (
       <Container>
-        <StylesProvider injectFirst>
+        <StyledEngineProvider injectFirst>
           <EmotionThemeProvider theme={theme}>
             <ThemeProvider theme={theme}>
               <Helmet title="CELL&times;GENE | Explorer" />
@@ -134,7 +134,7 @@ class App extends React.Component<StateProps & { dispatch: AppDispatch }> {
             </ThemeProvider>
           </EmotionThemeProvider>
           <DiffexNotice triggerOpen={differentialExpressionLoading} />
-        </StylesProvider>
+        </StyledEngineProvider>
       </Container>
     );
   }

client/src/components/categorical/value/index.tsx

@@ -1,9 +1,7 @@
 import { connect } from "react-redux";
 import React from "react";
 import * as d3 from "d3";
-import { Icon as InfoCircle, IconButton } from "czifui";
-
-import { AnchorButton, Classes } from "@blueprintjs/core";
+import { Classes } from "@blueprintjs/core";
 import * as globals from "../../../globals";
 // @ts-expect-error ts-migrate(2307) FIXME: Cannot find module '../categorical.css' or its cor... Remove this comment to see the full error message
 import styles from "../categorical.css";
@@ -23,6 +21,7 @@ import { isDataframeDictEncodedColumn } from "../../../util/dataframe/types";
 import { CategorySummary } from "../../../util/stateManager/controlsHelpers";
 import { ColorTable } from "../../../util/stateManager/colorHelpers";
 import { ActiveTab } from "../../../common/types/entities";
+import { InfoButton, InfoButtonWrapper } from "../../../common/style";
 
 const STACKED_BAR_HEIGHT = 11;
 const STACKED_BAR_WIDTH = 100;
@@ -124,13 +123,13 @@ class CategoryValue extends React.Component<Props, InternalStateProps> {
     }
   }
 
-  labelNameError = (name: any) => {
+  labelNameError = (name: string) => {
     const { metadataField, schema } = this.props;
     if (name === this.currentLabelAsString()) return false;
     return isLabelErroneous(name, metadataField, schema);
   };
 
-  instruction = (label: any) =>
+  instruction = (label: string) =>
     labelPrompt(this.labelNameError(label), "New, unique label", ":");
 
   activateEditLabelMode = () => {
@@ -646,26 +645,16 @@ class CategoryValue extends React.Component<Props, InternalStateProps> {
               </span>
             </Truncate>
             {isCellInfo && (
-              <div style={{ display: "inline-block", marginLeft: "0" }}>
-                <AnchorButton
-                  small
-                  minimal
-                  intent="none"
+              <InfoButtonWrapper>
+                <InfoButton
                   data-testid={`get-info-${metadataField}-${displayString}`}
                   onClick={() => this.handleDisplayCellTypeInfo(displayString)}
-                  style={{ minHeight: "18px", minWidth: "18px", padding: 0 }}
-                >
-                  <IconButton disabled={false} sdsSize="small">
-                    <div style={{ filter: "grayscale(100%)" }}>
-                      <InfoCircle
-                        sdsIcon="infoCircle"
-                        sdsSize="s"
-                        sdsType="iconButton"
-                      />
-                    </div>
-                  </IconButton>
-                </AnchorButton>
-              </div>
+                  sdsType="tertiary"
+                  sdsStyle="icon"
+                  icon="InfoCircle"
+                  sdsSize="small"
+                />
+              </InfoButtonWrapper>
             )}
           </div>
           <span style={{ flexShrink: 0 }}>

client/src/components/diffexNotice/style.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
-import Snackbar from "@material-ui/core/Snackbar";
-import { Alert } from "@material-ui/lab";
+import Snackbar from "@mui/material/Snackbar";
+import { Alert } from "@mui/lab";
 
 export const StyledSnackbar = styled(Snackbar)`
   width: 423px;

client/src/components/embedding/components/Opacities/components/Opacity/index.tsx

@@ -1,7 +1,5 @@
-import React, { ChangeEvent } from "react";
-import { InputSlider } from "czifui";
-import { SliderProps } from "@material-ui/core";
-
+import React from "react";
+import { InputSlider } from "@czi-sds/components";
 import { kebabCase } from "lodash";
 import {
   HeaderWrapper,
@@ -31,7 +29,7 @@ interface Props {
   name: string;
   value: number;
   handleChange: (
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    event: Event | React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
     value: number | number[]
   ) => void;
 }
@@ -73,7 +71,7 @@ export default function Opacity({ name, value, handleChange }: Props) {
         step={10}
         min={0}
         max={100}
-        onChange={handleChange as SliderProps["onChange"]}
+        onChange={handleChange}
       />
     </>
   );

client/src/components/embedding/components/Opacities/components/Opacity/style.ts

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { InputText } from "czifui";
+import { InputText } from "@czi-sds/components";
 import {
   fontWeightBold,
   spacesM,
@@ -40,6 +40,7 @@ export const StyledInputText = styled(InputText)`
   /* Firefox remove up/down arrow */
   input[type="number"] {
     -moz-appearance: textfield;
+    appearance: textfield;
   }
 
   input {

client/src/components/embedding/components/Opacities/index.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from "react";
+import React from "react";
 
 import { connect } from "react-redux";
 import { Section, Wrapper } from "./style";
@@ -27,7 +27,7 @@ function Opacities({ imageOpacity, dotOpacity, dispatch }: Props) {
   );
 
   function handleImageOpacityChange(
-    _: ChangeEvent<unknown>,
+    _: Event | React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
     value: number | number[]
   ) {
     dispatch({
@@ -37,7 +37,7 @@ function Opacities({ imageOpacity, dotOpacity, dispatch }: Props) {
   }
 
   function handleDotOpacityChange(
-    _: ChangeEvent<unknown>,
+    _: Event | React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
     value: number | number[]
   ) {
     dispatch({