Update antd to v4

package.json

@@ -89,8 +89,8 @@
     "dependencies": {
         "@aics/browsing-context-messaging": "~1.1",
         "@aics/web-3d-viewer": "^2.0.0",
-        "@ant-design/icons": "^4.2.2",
-        "antd": "^3.26.20",
+        "@ant-design/icons": "^4.7.0",
+        "antd": "^4.18.5",
         "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/BackToPlot/index.tsx

@@ -1,4 +1,5 @@
-import { BackTop, Icon } from "antd";
+import { BackTop } from "antd";
+import { CaretUpFilled } from "@ant-design/icons";
 import React from "react";
 
 import styles from "./style.css";
@@ -7,7 +8,7 @@ const BackToPlot: React.SFC = () => {
     return (
         <BackTop visibilityHeight={10} className={styles.container}>
             <div className={styles.backTopInner}>
-                <Icon type="caret-up" />
+                <CaretUpFilled />
                 <br /> To Plot
             </div>
         </BackTop>

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/DownloadDropDownMenu/index.tsx

@@ -1,6 +1,7 @@
-import { Button, Dropdown, Icon, Menu } from "antd";
+import { Button, Dropdown, Menu } from "antd";
+import { DownloadOutlined, CheckOutlined } from "@ant-design/icons";
 import { CheckboxChangeEvent } from "antd/es/checkbox";
-import { ClickParam } from "antd/es/menu";
+import { MenuInfo } from 'rc-menu/lib/interface'
 import { includes, uniq } from "lodash";
 import React, { MouseEvent } from "react";
 
@@ -73,7 +74,7 @@ export default class DownloadDropDownMenu extends React.Component<
         }
     }
 
-    public saveDownloadUrl(clickedLink: ClickParam) {
+    public saveDownloadUrl(clickedLink: MenuInfo) {
         const { downloadConfig } = this.props;
         const { alreadyDownloaded } = this.state;
         const thisAlreadyDownloaded = alreadyDownloaded[downloadConfig.key];
@@ -116,9 +117,9 @@ export default class DownloadDropDownMenu extends React.Component<
                 {downloadUrls.map((url, index) => (
                     <Menu.Item key={index} onClick={this.saveDownloadUrl}>
                         {includes(alreadyDownloaded, index.toString()) ? (
-                            <Icon type="check" />
+                            <CheckOutlined />
                         ) : (
-                            <Icon type="download" />
+                            <DownloadOutlined />
                         )}
                         <a href={url}> data chunk {index + 1} </a>
                     </Menu.Item>
@@ -139,7 +140,7 @@ export default class DownloadDropDownMenu extends React.Component<
                         id={id}
                         onClick={this.onDownload}
                     >
-                        <Icon type="download" />
+                        <DownloadOutlined />
                     </Button>
                 </Dropdown>
             </div>

src/components/GalleryCard/index.tsx

@@ -1,4 +1,5 @@
-import { Avatar, Button, Card, Dropdown, Icon, List, Menu } from "antd";
+import { Avatar, Button, Card, Dropdown, List, Menu } from "antd";
+import { DownloadOutlined, CloseOutlined } from "@ant-design/icons";
 import React from "react";
 
 import { DeselectPointAction, SelectCellIn3DAction } from "../../state/selection/types";
@@ -33,14 +34,14 @@ const GalleryCard: React.SFC<GalleryCardProps> = (props) => {
             {props.downloadHref && (
                 <Menu.Item key="1">
                     <a href={props.downloadHref}>
-                        <Icon type="download" /> Segmented cell
+                        <DownloadOutlined /> Segmented cell
                     </a>
                 </Menu.Item>
             )}
             {props.downloadFullField && (
                 <Menu.Item key="2">
                     <a href={props.downloadFullField}>
-                        <Icon type="download" /> Full field image
+                        <DownloadOutlined /> Full field image
                     </a>
                 </Menu.Item>
             )}
@@ -56,10 +57,10 @@ const GalleryCard: React.SFC<GalleryCardProps> = (props) => {
             3D
         </Button>,
         <Dropdown key={`${props.cellID}-download`} overlay={menu} trigger={["click"]}>
-            <Button icon="download" />
+            <Button icon={<DownloadOutlined/>} />
         </Dropdown>,
         <Button onClick={deselectPoint} key={`${props.cellID}-close`}>
-            <Icon type="close" />
+            <CloseOutlined />
         </Button>,
     ];
 

src/components/LandingPage/index.tsx

@@ -35,7 +35,7 @@ const LandingPage = ({ handleSelectDataset, megasets }: LandingPageProps) => (
         <Layout>
             <Content className={styles.content}>
                 <h2 className={styles.subtitle}>Load a dataset</h2>
-                <Row type="flex" justify="space-around" className={styles.section}>
+                <Row justify="space-around" className={styles.section}>
                     {renderCards(megasets, handleSelectDataset)}
                     <Col className={styles.caption}>
                         The Cell Feature Explorer is an online tool to access our complete database

src/containers/ThumbnailGallery/index.tsx

@@ -1,4 +1,5 @@
-import { Button, Col, Form, Icon, Input, List, Popconfirm, Radio, Row } from "antd";
+import { Button, Col, Form, Input, List, Popconfirm, Radio, Row } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
 import { RadioChangeEvent } from "antd/es/radio";
 import { includes, map } from "lodash";
 import * as React from "react";
@@ -208,7 +209,6 @@ class ThumbnailGallery extends React.Component<ThumbnailGalleryProps, ThumbnailG
             <Row
                 id="gallery"
                 className={styles.container}
-                type="flex"
                 gutter={32}
                 justify="space-between"
             >
@@ -222,7 +222,7 @@ class ThumbnailGallery extends React.Component<ThumbnailGalleryProps, ThumbnailG
                                 okText="Yes"
                                 cancelText="No"
                             >
-                                <Button icon="close" type="primary">
+                                <Button icon={<CloseOutlined/>} type="primary">
                                     Clear All
                                 </Button>
                             </Popconfirm>
@@ -242,8 +242,7 @@ class ThumbnailGallery extends React.Component<ThumbnailGalleryProps, ThumbnailG
                 <Col className={styles.albumSideBar}>
                     <div className={styles.sideBarHeader}>
                         <h2>Gallery</h2>
-                        <Icon
-                            type="close"
+                        <CloseOutlined
                             style={{ fontSize: "2em" }}
                             onClick={this.closeGallery}
                         />