feat: Upgrade Ant to version 5

.babelrc

@@ -1,26 +1,13 @@
 {
-  "plugins": [
-    "@babel/plugin-proposal-class-properties",
-    "@babel/transform-runtime",
-    ["babel-plugin-import", {
-      "camel2DashComponentName": false,
-      "libraryDirectory": "",
-      "libraryName": "lodash"
-    }, "lodash"
+    "plugins": ["@babel/plugin-proposal-class-properties", "@babel/transform-runtime"],
+    "presets": [
+        "@babel/preset-react",
+        ["@babel/preset-env", { "modules": false }],
+        "@babel/preset-typescript"
     ],
-    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }, "ant"],
-    ["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib"}, "antd-mobile"]
-
-  ],
-  "presets": [
-    "@babel/preset-react",
-    ["@babel/preset-env", { "modules": false }],
-    "@babel/preset-typescript"
-  ],
-  "env": {
-    "commonjs": {
-      "presets": [["@babel/preset-env", { "modules": true }]]
+    "env": {
+        "commonjs": {
+            "presets": [["@babel/preset-env", { "modules": true }]]
+        }
     }
-  }
 }
-

.github/workflows/ci.yml

@@ -14,8 +14,8 @@ jobs:
             - name: Use Node.js
               uses: actions/setup-node@v3
               with:
-                  node-version: 16
+                  node-version: 20
             - run: npm ci
-            - run: npm test --if-present
             - run: npm run lint --if-present
             - run: npm run typeCheck --if-present
+            - run: npm test --if-present

package.json

@@ -88,9 +88,9 @@
     },
     "dependencies": {
         "@aics/browsing-context-messaging": "~1.1",
-        "@aics/web-3d-viewer": "^2.7.4",
+        "@aics/web-3d-viewer": "^2.9.0",
         "@ant-design/icons": "^4.2.2",
-        "antd": "^3.26.20",
+        "antd": "^5.17.4",
         "axios": "^0.21.1",
         "classnames": "^2.2.5",
         "core-js": "^2.5.5",

src/components/AffixedNav/index.tsx

@@ -1,4 +1,5 @@
-import { Anchor, Icon } from "antd";
+import { Anchor } from "antd";
+import { DotChartOutlined, PictureOutlined, SyncOutlined } from "@ant-design/icons";
 import React from "react";
 const { Link } = Anchor;
 
@@ -12,7 +13,7 @@ const AffixedNav: React.SFC = () => {
                 href="#main-plot"
                 title={
                     <React.Fragment>
-                        <Icon type="dot-chart" />
+                        <DotChartOutlined />
                         <span> Plot </span>
                     </React.Fragment>
                 }
@@ -21,7 +22,7 @@ const AffixedNav: React.SFC = () => {
                 href="#gallery"
                 title={
                     <React.Fragment>
-                        <Icon type="picture" />
+                        <PictureOutlined />
                         <span> Gallery </span>
                     </React.Fragment>
                 }
@@ -30,7 +31,7 @@ const AffixedNav: React.SFC = () => {
                 href="#three-d-viewer"
                 title={
                     <React.Fragment>
-                        <Icon type="sync" />
+                        <SyncOutlined />
                         <span> 3D viewer </span>
                     </React.Fragment>
                 }

src/components/AppHeader/index.tsx

@@ -1,3 +1,4 @@
+import { Row } from "antd";
 import * as React from "react";
 
 import { AicsLogo } from "../Icons";
@@ -14,15 +15,19 @@ class AppHeader extends React.Component<AppHeaderProps> {
 
         return (
             <div className={styles.pageHeader}>
-                <div>
-                    <a href="https://allencell.org" title="Allen Cell Explorer">
+                <Row align={"middle"}>
+                    <a
+                        href="https://allencell.org"
+                        title="Allen Institute for Cell Science"
+                        style={{ height: "41px" }}
+                    >
                         {AicsLogo}
                     </a>
                     <span className={styles.verticalBar}>|</span>
                     <a href="/" className={styles.cfeHome}>
                         Cell Feature Explorer
                     </a>
-                </div>
+                </Row>
                 <div className={styles.viewerTitle}>{selectedDataset}</div>
                 <div className={styles.buttons}></div>
             </div>

src/components/AxisDropDown/index.tsx

@@ -1,5 +1,5 @@
 import { Select, Tooltip } from "antd";
-import { SelectValue } from "antd/es/select";
+import { SelectProps, SelectValue } from "antd/es/select";
 import React from "react";
 import { ActionCreator } from "react-redux";
 
@@ -16,8 +16,6 @@ interface AxisDropDownProps {
     tooltip: string;
 }
 
-const Option = Select.Option;
-
 export default class AxisDropDown extends React.Component<AxisDropDownProps> {
     constructor(props: AxisDropDownProps) {
         super(props);
@@ -32,18 +30,28 @@ export default class AxisDropDown extends React.Component<AxisDropDownProps> {
 
     public render() {
         const { axisId, value, options, tooltip } = this.props;
+
+        const selectOptions: SelectProps["options"] = options.map((option) => {
+            return {
+                label: `${option.displayName} ${option.unit ? `(${option.unit})` : ""}`,
+                key: option.key,
+                value: option.key,
+                tooltip: option.tooltip,
+            };
+        });
+
+        const selectedOptionLabel = selectOptions
+            .find((option) => option.key === value)
+            ?.label?.toString();
+
         return (
             <div className={styles[axisId]}>
                 <Tooltip title={tooltip}>
-                    <Select onChange={this.handleChange} value={value}>
-                        {options.map((option) => {
-                            return (
-                                <Option value={option.key} key={option.key}>
-                                    {option.displayName} {option.unit ? `(${option.unit})` : ""}
-                                </Option>
-                            );
-                        })}
-                    </Select>
+                    <Select
+                        onChange={this.handleChange}
+                        value={selectedOptionLabel || value}
+                        options={selectOptions}
+                    ></Select>
                 </Tooltip>
             </div>
         );

src/components/CellViewer/index.tsx

@@ -1,8 +1,7 @@
 import { ImageViewerApp } from "@aics/web-3d-viewer";
 import React from "react";
-// Need to import this stylesheet for the Drawer component used by the viewer
-// TODO: Fix viewer so this is unnecessary?
-import "antd/lib/drawer/style/index.less";
+
+import styles from "./style.css";
 
 import { VolumeViewerProps } from "../../containers/Cfe/selectors";
 
@@ -19,20 +18,19 @@ const CellViewer: React.FunctionComponent<VolumeViewerProps> = (props) => {
     }
 
     return (
-        <div style={CONTAINER_STYLE}>
+        <div className={styles.cellViewerContainer} style={CONTAINER_STYLE}>
             <ImageViewerApp
                 cellId={props.cellId}
-                baseUrl={props.baseUrl}
-                cellPath={props.cellPath}
-                fovDownloadHref={props.fovDownloadHref}
-                cellDownloadHref={props.cellDownloadHref}
-                fovPath={props.fovPath}
+                imageUrl={props.baseUrl + props.cellPath}
+                parentImageDownloadHref={props.fovDownloadHref}
+                imageDownloadHref={props.cellDownloadHref}
+                parentImageUrl={props.baseUrl + props.fovPath}
                 viewerChannelSettings={props.viewerChannelSettings}
                 transform={props.transform}
                 onControlPanelToggle={props.onControlPanelToggle}
                 metadata={props.metadata}
                 appHeight="100%"
-                canvasMargin="0 120px 0 0"
+                canvasMargin="0 0 0 0"
             />
         </div>
     );

src/components/CellViewer/style.css

@@ -0,0 +1,37 @@
+/* Style overrides to fix alignment caused by an Ant version + font mismatch.
+ * TODO: Remove this when Ant version is upgraded?
+*/
+
+.cell-viewer-container {
+    /* Align header items; fix a bug where the entire div would show pointer-interactive
+     * when only the icon (span) was clickable.
+    */
+    & :global(.ant-collapse-header) {
+        align-items: center !important;
+        cursor: auto !important;
+
+        & :global(.ant-collapse-arrow) > span {
+            cursor: pointer !important;
+        }
+
+        & :global(.ant-collapse-extra) {
+            width: 45% !important;
+        }
+    }
+
+    /* Remove outlines on channel settings toggles  */
+    & :global(.channel-visibility-controls) > :global(.ant-btn-icon-only) {
+        border-color: transparent !important;
+    }
+
+    /* Fix missing bottom drawer */
+    & :global(.ant-drawer.ant-drawer-bottom) {
+        height: 100% !important;
+        position: relative !important;
+    }
+
+    /* Fix icons in toolbar not being centered */
+    & :global(.viewer-toolbar-group) > button:global(.ant-btn-icon-only) {
+        padding: 0 !important;
+    }
+}

src/components/ColorBySwitcher/index.tsx

@@ -14,7 +14,7 @@ interface ColorBySwitcherProps {
 
 const ColorBySwitcher: React.SFC<ColorBySwitcherProps> = (props) => {
     return props.includeCol ? (
-        <Row className={styles.colorByRow} type="flex" align="middle">
+        <Row className={styles.colorByRow} align="middle">
             <Col span={props.includeCol}>
                 <label className={styles.label}>Color by:</label>
                 <Switch
@@ -28,7 +28,7 @@ const ColorBySwitcher: React.SFC<ColorBySwitcherProps> = (props) => {
             {props.children}
         </Row>
     ) : (
-        <Row className={styles.colorByRow} type="flex" align="middle">
+        <Row className={styles.colorByRow} align="middle">
             <label className={styles.label}>{props.label}</label>
             <Switch
                 className={styles.colorBySwitch}

src/components/DatasetCard/index.tsx

@@ -66,14 +66,14 @@ const DatasetCard: React.FunctionComponent<DatasetCardProps> = ({
             />
             {/* Spacer div to push `Descriptions` to the bottom of the card */}
             <div className={styles.spacer}/>
-            <Descriptions column={1} size="small">
-                {userData.totalCells && <Descriptions.Item label="Number of Cells">
+            <Descriptions column={1} size="small" colon={false}>
+                {userData.totalCells && <Descriptions.Item label="Number of Cells:">
                     {userData.totalCells.toLocaleString("en")}
                 </Descriptions.Item>}
-                {userData.totalFOVs && <Descriptions.Item label="Number of FOVs">
+                {userData.totalFOVs && <Descriptions.Item label="Number of FOVs:">
                     {userData.totalFOVs.toLocaleString("en")}
                 </Descriptions.Item>}
-                {userData.totalTaggedStructures && <Descriptions.Item label="Number of tagged structures">
+                {userData.totalTaggedStructures && <Descriptions.Item label="Number of tagged structures:">
                     {userData.totalTaggedStructures}
                 </Descriptions.Item>}
             </Descriptions>