Upgrade to React version 18 (#114)

* Upgrade dependencies to use React version 18 * Enable annotation tools for demo
ImagingDataCommons · Jun 22, 2022 · 25bbe77 · 25bbe77
1 parent 0964147
commit 25bbe77
Show file tree

Hide file tree

Showing 22 changed files with 2,625 additions and 2,515 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "slim",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "homepage": "https://github.com/herrmannlab/slim",
   "private": true,
   "scripts": {
@@ -30,38 +30,37 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
+    "@babel/preset-react": "^7.17.12",
+    "@babel/preset-typescript": "^7.17.12",
     "@craco/craco": "^6.4.0",
-    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^7.1.2",
-    "@types/classnames": "^2.2.11",
-    "@types/jest": "^26.0.15",
+    "@types/jest": "^28.1.3",
     "@types/node": "^14.14.9",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
     "@types/react-router-dom": "^5.3.3",
     "@types/retry": "^0.12.1",
     "@types/uuid": "^8.3.0",
-    "antd": "^4.20.5",
+    "antd": "^4.21.3",
     "classnames": "^2.2.6",
     "copy-webpack-plugin": "^10.2.4",
     "craco-less": "^2.0.0",
     "dcmjs": "^0.19.1",
     "detect-browser": "^5.2.1",
-    "dicom-microscopy-viewer": "^0.38.0",
+    "dicom-microscopy-viewer": "^0.38.1",
     "dicomweb-client": "^0.8.4",
     "gh-pages": "^3.2.3",
     "oidc-client": "^1.11.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^3.11.0",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.2.0",
     "retry": "^0.13.1",
-    "ts-standard": "^10.0.0",
-    "typescript": "^4.2.0"
+    "ts-standard": "^11.0.0",
+    "typescript": "^4.7.4"
   }
 }
diff --git a/public/config/demo.js b/public/config/demo.js
@@ -8,7 +8,7 @@ window.config = {
     }
   ],
   preload: true,
-  disableAnnotationTools: true,
+  disableAnnotationTools: false,
   annotations: [
     {
       finding: { value: '85756007', schemeDesignator: 'SCT', meaning: 'Tissue' }

diff --git a/src/App.dark.less b/src/App.dark.less
@@ -16,6 +16,10 @@
   overflow-y: auto;
 }
 
+.ant-menu-item {
+  height: 100%;
+}
+
 .ant-menu-submenu-title {
   font-size: 'medium';
 }

diff --git a/src/App.light.less b/src/App.light.less
@@ -16,6 +16,10 @@
   overflow-y: auto;
 }
 
+.ant-menu-item {
+  height: 100%;
+}
+
 .ant-menu-submenu-title {
   font-size: 'medium';
 }

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import {
   BrowserRouter,
-  Redirect,
+  Navigate,
   Route,
-  Switch
+  Routes,
+  useParams
 } from 'react-router-dom'
 import { Layout, message } from 'antd'
 import { FaSpinner } from 'react-icons/fa'
@@ -20,6 +21,34 @@ import { User, AuthManager } from './auth'
 import OidcManager from './auth/OidcManager'
 import DicomWebManager from './DicomWebManager'
 
+function ParametrizedCaseViewer ({ client, user, app, config }: {
+  client: DicomWebManager
+  user?: User
+  app: {
+    name: string
+    version: string
+    uid: string
+    organization?: string
+  }
+  config: AppConfig
+}): JSX.Element {
+  const { studyInstanceUID } = useParams()
+
+  const enableAnnotationTools = !(config.disableAnnotationTools ?? false)
+  const preload = config.preload ?? false
+  return (
+    <CaseViewer
+      client={client}
+      user={user}
+      annotations={config.annotations}
+      preload={preload}
+      app={app}
+      enableAnnotationTools={enableAnnotationTools}
+      studyInstanceUID={studyInstanceUID}
+    />
+  )
+}
+
 interface AppProps {
   name: string
   homepage: string
@@ -198,9 +227,6 @@ class App extends React.Component<AppProps, AppState> {
     const enableWorklist = !(
       this.props.config.disableWorklist ?? false
     )
-    const enableAnnotationTools = !(
-      this.props.config.disableAnnotationTools ?? false
-    )
     const enableServerSelection = (
       this.props.config.enableServerSelection ?? false
     )
@@ -237,7 +263,7 @@ class App extends React.Component<AppProps, AppState> {
     if (this.state.redirectTo !== undefined) {
       return (
         <BrowserRouter basename={this.props.config.path}>
-          <Redirect push to={this.state.redirectTo} />
+          <Navigate to={this.state.redirectTo} replace />
         </BrowserRouter>
       )
     } else if (this.state.isLoading) {
@@ -268,10 +294,10 @@ class App extends React.Component<AppProps, AppState> {
     } else {
       return (
         <BrowserRouter basename={this.props.config.path}>
-          <Switch>
+          <Routes>
             <Route
-              path='/studies/:StudyInstanceUID'
-              render={(routeProps) => (
+              path='/studies/:studyInstanceUID/*'
+              element={
                 <Layout style={layoutStyle}>
                   <Header
                     app={appInfo}
@@ -282,48 +308,51 @@ class App extends React.Component<AppProps, AppState> {
                     showServerSelectionButton={enableServerSelection}
                   />
                   <Layout.Content style={layoutContentStyle}>
-                    <CaseViewer
+                    <ParametrizedCaseViewer
                       client={this.state.client}
                       user={this.state.user}
-                      annotations={this.props.config.annotations}
-                      preload={this.props.config.preload}
+                      config={this.props.config}
                       app={appInfo}
-                      enableAnnotationTools={enableAnnotationTools}
-                      studyInstanceUID={routeProps.match.params.StudyInstanceUID}
                     />
                   </Layout.Content>
                 </Layout>
-              )}
+              }
+            />
+            <Route
+              path='/logout'
+              element={
+                <Layout style={layoutStyle}>
+                  <Header
+                    app={appInfo}
+                    user={this.state.user}
+                    showWorklistButton={false}
+                    onServerSelection={this.handleServerSelection}
+                    onUserLogout={isLogoutPossible ? onLogout : undefined}
+                    showServerSelectionButton={enableServerSelection}
+                  />
+                  Logged out
+                </Layout>
+              }
+            />
+            <Route
+              path='/'
+              element={
+                <Layout style={layoutStyle}>
+                  <Header
+                    app={appInfo}
+                    user={this.state.user}
+                    showWorklistButton={false}
+                    onServerSelection={this.handleServerSelection}
+                    onUserLogout={isLogoutPossible ? onLogout : undefined}
+                    showServerSelectionButton={enableServerSelection}
+                  />
+                  <Layout.Content style={layoutContentStyle}>
+                    {worklist}
+                  </Layout.Content>
+                </Layout>
+              }
             />
-            <Route exact path='/logout'>
-              <Layout style={layoutStyle}>
-                <Header
-                  app={appInfo}
-                  user={this.state.user}
-                  showWorklistButton={false}
-                  onServerSelection={this.handleServerSelection}
-                  onUserLogout={isLogoutPossible ? onLogout : undefined}
-                  showServerSelectionButton={enableServerSelection}
-                />
-                Logged out
-              </Layout>
-            </Route>
-            <Route exact path='/'>
-              <Layout style={layoutStyle}>
-                <Header
-                  app={appInfo}
-                  user={this.state.user}
-                  showWorklistButton={false}
-                  onServerSelection={this.handleServerSelection}
-                  onUserLogout={isLogoutPossible ? onLogout : undefined}
-                  showServerSelectionButton={enableServerSelection}
-                />
-                <Layout.Content style={layoutContentStyle}>
-                  {worklist}
-                </Layout.Content>
-              </Layout>
-            </Route>
-          </Switch>
+          </Routes>
         </BrowserRouter>
       )
     }

diff --git a/src/components/AnnotationGroupList.tsx b/src/components/AnnotationGroupList.tsx
@@ -7,7 +7,7 @@ import AnnotationGroupItem from './AnnotationGroupItem'
 
 interface AnnotationGroupListProps {
   annotationGroups: dmv.annotation.AnnotationGroup[]
-  visibleAnnotationGroupUIDs: string[]
+  visibleAnnotationGroupUIDs: Set<string>
   metadata: {
     [annotationGroupUID: string]: dmv.metadata.MicroscopyBulkSimpleAnnotations
   }
@@ -41,7 +41,7 @@ class AnnotationGroupList extends React.Component<AnnotationGroupListProps, {}>
           key={annotationGroup.uid}
           annotationGroup={annotationGroup}
           metadata={this.props.metadata[uid]}
-          isVisible={this.props.visibleAnnotationGroupUIDs.includes(uid)}
+          isVisible={this.props.visibleAnnotationGroupUIDs.has(uid)}
           defaultStyle={this.props.defaultAnnotationGroupStyles[uid]}
           onVisibilityChange={this.props.onAnnotationGroupVisibilityChange}
           onStyleChange={this.props.onAnnotationGroupStyleChange}

diff --git a/src/components/AnnotationList.tsx b/src/components/AnnotationList.tsx
@@ -7,8 +7,8 @@ import AnnotationItem from './AnnotationItem'
 
 interface AnnotationListProps {
   rois: dmv.roi.ROI[]
-  selectedRoiUIDs: string[]
-  visibleRoiUIDs: string[]
+  selectedRoiUIDs: Set<string>
+  visibleRoiUIDs: Set<string>
   onVisibilityChange: ({ roiUID, isVisible }: {
     roiUID: string
     isVisible: boolean
@@ -49,7 +49,7 @@ class AnnotationList extends React.Component<AnnotationListProps, {}> {
         key={roi.uid}
         roi={roi}
         index={index}
-        isVisible={this.props.visibleRoiUIDs.includes(roi.uid)}
+        isVisible={this.props.visibleRoiUIDs.has(roi.uid)}
         onVisibilityChange={this.props.onVisibilityChange}
       />
     ))
@@ -60,13 +60,13 @@ class AnnotationList extends React.Component<AnnotationListProps, {}> {
           <Switch
             size='small'
             onChange={this.handleVisibilityChange}
-            checked={this.props.visibleRoiUIDs.length > 0}
+            checked={this.props.visibleRoiUIDs.size > 0}
             checkedChildren={<FaEye />}
             unCheckedChildren={<FaEyeSlash />}
           />
         </div>
         <Menu
-          selectedKeys={this.props.selectedRoiUIDs}
+          selectedKeys={[...this.props.selectedRoiUIDs.values()]}
           onSelect={this.handleMenuItemSelection}
           onClick={this.handleMenuItemSelection}
         >