Add error message on microscopy viewport errors

extensions/dicom-microscopy/src/DicomMicroscopyViewport.js

@@ -62,11 +62,24 @@ class DicomMicroscopyViewport extends Component {
         );
         const microscopyViewer = api.VLWholeSlideMicroscopyImageViewer;
 
-        this.viewer = new microscopyViewer({
-          client: dicomWebClient,
-          metadata,
-          retrieveRendered: false,
-        });
+        try {
+          this.viewer = new microscopyViewer({
+            client: dicomWebClient,
+            metadata,
+            retrieveRendered: false,
+          });
+        } catch (error) {
+          console.error('[Microscopy Viewer] Failed to load:', error);
+          const { UINotificationService } = this.props.servicesManager.services;
+          if (UINotificationService) {
+            UINotificationService.show({
+              title: 'Microscopy Viewport',
+              message:
+                'Failed to load viewport. Please check that you have hardware acceleration enabled.',
+              type: 'error',
+            });
+          }
+        }
 
         this.viewer.render({ container });
       });
@@ -92,8 +105,8 @@ class DicomMicroscopyViewport extends Component {
         {this.state.error ? (
           <h2>{JSON.stringify(this.state.error)}</h2>
         ) : (
-            <div style={style} ref={this.container} />
-          )}
+          <div style={style} ref={this.container} />
+        )}
       </div>
     );
   }

extensions/dicom-microscopy/src/index.js

@@ -6,14 +6,6 @@ const Component = React.lazy(() => {
   return import('./DicomMicroscopyViewport');
 });
 
-const DicomMicroscopyViewport = props => {
-  return (
-    <React.Suspense fallback={<div>Loading...</div>}>
-      <Component {...props} />
-    </React.Suspense>
-  );
-};
-
 export default {
   /**
    * Only required property. Should be a unique value across all extensions.
@@ -21,8 +13,14 @@ export default {
   id: 'microscopy',
   version,
 
-  getViewportModule() {
-    return DicomMicroscopyViewport;
+  getViewportModule({ servicesManager }) {
+    return props => {
+      return (
+        <React.Suspense fallback={<div>Loading...</div>}>
+          <Component {...props} servicesManager={servicesManager} />
+        </React.Suspense>
+      );
+    };
   },
   getSopClassHandlerModule() {
     return DicomMicroscopySopClassHandler;