feat(ui): move to React 18 and base for using shadcn/ui (#4174)

Co-authored-by: IbrahimCSAE <ibrahim.mdev@gmail.com>

extensions/dicom-microscopy/babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
   env: {
     test: {
       presets: [

extensions/dicom-microscopy/package.json

@@ -35,8 +35,8 @@
     "@ohif/i18n": "3.9.0-beta.21",
     "@ohif/ui": "3.9.0-beta.21",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-i18next": "^10.11.0",
     "react-router": "^6.8.1",
     "react-router-dom": "^6.8.1"

extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
-import ReactResizeDetector from 'react-resize-detector';
 import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
 import { LoadingIndicatorProgress } from '@ohif/ui';
 
 import './DicomMicroscopyViewport.css';
@@ -23,18 +21,12 @@ class DicomMicroscopyViewport extends Component {
 
   container = React.createRef();
   overlayElement = React.createRef();
-  debouncedResize: () => any;
 
   constructor(props: any) {
     super(props);
 
     const { microscopyService } = this.props.servicesManager.services;
     this.microscopyService = microscopyService;
-    this.debouncedResize = debounce(() => {
-      if (this.viewer) {
-        this.viewer.resize();
-      }
-    }, 100);
   }
 
   static propTypes = {
@@ -54,6 +46,7 @@ class DicomMicroscopyViewport extends Component {
     servicesManager: PropTypes.object,
     extensionManager: PropTypes.object,
     commandsManager: PropTypes.object,
+    resizeRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
   };
 
   /**
@@ -298,13 +291,16 @@ class DicomMicroscopyViewport extends Component {
             </div>
           </div>
         </div>
-        {ReactResizeDetector && (
-          <ReactResizeDetector handleWidth handleHeight onResize={this.onWindowResize} />
-        )}
         {this.state.error ? (
           <h2>{JSON.stringify(this.state.error)}</h2>
         ) : (
-          <div style={style} ref={this.container} />
+          <div
+            style={style}
+            ref={(ref: any) => {
+              this.container.current = ref;
+              this.props.resizeRef.current = ref;
+            }}
+          />
         )}
         {this.state.isLoaded ? null : (
           <LoadingIndicatorProgress className={'h-full w-full bg-black'} />
@@ -312,10 +308,6 @@ class DicomMicroscopyViewport extends Component {
       </div>
     );
   }
-
-  onWindowResize = () => {
-    this.debouncedResize();
-  };
 }
 
 export default DicomMicroscopyViewport;

extensions/dicom-microscopy/src/index.tsx

@@ -8,6 +8,8 @@ import { useViewportGrid } from '@ohif/ui';
 import getDicomMicroscopySopClassHandler from './DicomMicroscopySopClassHandler';
 import getDicomMicroscopySRSopClassHandler from './DicomMicroscopySRSopClassHandler';
 import MicroscopyService from './services/MicroscopyService';
+import { useResizeDetector } from 'react-resize-detector';
+import debounce from 'lodash.debounce';
 
 const Component = React.lazy(() => {
   return import('./DicomMicroscopyViewport');
@@ -59,14 +61,25 @@ const extension: Types.Extensions.Extension = {
       const [viewportGrid, viewportGridService] = useViewportGrid();
       const { activeViewportId } = viewportGrid;
 
-      // a unique identifier based on the contents of displaySets.
-      // since we changed our rendering pipeline and if there is no
-      // element size change nor viewportId change we won't re-render
-      // we need a way to force re-rendering when displaySets change.
       const displaySetsKey = useMemo(() => {
         return props.displaySets.map(ds => ds.displaySetInstanceUID).join('-');
       }, [props.displaySets]);
 
+      const onResize = debounce(() => {
+        const { microscopyService } = servicesManager.services;
+        const managedViewer = microscopyService.getAllManagedViewers();
+
+        if (managedViewer && managedViewer.length > 0) {
+          managedViewer[0].viewer.resize();
+        }
+      }, 100);
+
+      const { ref: resizeRef } = useResizeDetector({
+        onResize,
+        handleHeight: true,
+        handleWidth: true,
+      });
+
       return (
         <MicroscopyViewport
           key={displaySetsKey}
@@ -78,6 +91,7 @@ const extension: Types.Extensions.Extension = {
             viewportGridService.setActiveViewportId(viewportId);
           }}
           viewportData={viewportOptions}
+          resizeRef={resizeRef}
           {...props}
         />
       );

extensions/dicom-microscopy/src/services/MicroscopyService.ts

@@ -628,6 +628,15 @@ export default class MicroscopyService extends PubSubService {
   setROIStyle(uid, styleOptions) {
     this.managedViewers.forEach(mv => mv.setROIStyle(uid, styleOptions));
   }
+
+  /**
+   * Get all managed viewers
+   *
+   * @returns {Array} managedViewers
+   */
+  getAllManagedViewers() {
+    return Array.from(this.managedViewers);
+  }
 }
 
 export { EVENTS };