POC: bring viv-dicomweb-test work into SLIM and add basic bulk annotations support

craco.config.js

@@ -58,6 +58,20 @@ module.exports = {
       config.experiments = {
         asyncWebAssembly: true
       }
+
+      /* Viv / Deck.gl / Luma ship modern JS; transpile for CRA 5 / webpack 5. */
+      config.module.rules.push({
+        test: /\.m?js$/,
+        include: /node_modules[\\/](@deck\.gl|@luma\.gl|@math\.gl|@probe\.gl|@hms-dbmi[\\/]viv)[\\/]/,
+        use: {
+          loader: require.resolve('babel-loader'),
+          options: {
+            presets: [require.resolve('babel-preset-react-app/dependencies')],
+            cacheDirectory: true
+          }
+        }
+      })
+
       return config
     }
   },

package.json

@@ -37,12 +37,26 @@
     ]
   },
   "dependencies": {
+    "@deck.gl/core": "9.1.15",
+    "@deck.gl/extensions": "9.1.15",
+    "@deck.gl/geo-layers": "9.1.15",
+    "@deck.gl/layers": "9.1.15",
+    "@deck.gl/mesh-layers": "9.1.15",
+    "@deck.gl/react": "9.1.15",
+    "@deck.gl/widgets": "9.1.15",
+    "@vivjs/layers": "^0.20.0",
+    "@vivjs/loaders": "^0.20.0",
+    "@luma.gl/constants": "~9.1.10",
+    "@luma.gl/core": "~9.1.10",
+    "@luma.gl/engine": "~9.1.10",
+    "@luma.gl/shadertools": "~9.1.10",
+    "@luma.gl/webgl": "~9.1.10",
     "antd": "^4.22.8",
     "classnames": "^2.2.6",
     "dcmjs": "^0.35.0",
     "detect-browser": "^5.2.1",
+    "dicomweb-client": "^0.11.2",
     "dicom-microscopy-viewer": "^0.48.22",
-    "dicomweb-client": "0.10.3",
     "oidc-client": "^1.11.5",
     "ol": "^10.7.0",
     "react": "^18.2.0",

src/App.tsx

@@ -8,6 +8,7 @@
   Navigate,
   Route,
   Routes,
+  useLocation,
   useParams,
 } from 'react-router-dom'
 
@@ -47,6 +48,8 @@
   config: AppConfig
 }): JSX.Element {
   const { studyInstanceUID } = useParams()
+  const location = useLocation()
+  const isVivRoute = location.pathname.startsWith('/viv/')
 
   if (studyInstanceUID === undefined) {
     return <Navigate to="/" replace />
@@ -64,6 +67,8 @@
         app={app}
         enableAnnotationTools={enableAnnotationTools}
         studyInstanceUID={studyInstanceUID}
+        isVivRoute={isVivRoute}
+        vivSettings={config.vivSettings}
       />
     </ValidationProvider>
   )
@@ -462,6 +467,52 @@
     this.signIn()
   }
 
+  /** Shared layout for study viewer routes (classic and `/viv/...`). */
+  private renderCaseViewerShell(
+    appInfo: {
+      name: string
+      version: string
+      homepage: string
+      uid: string
+      organization?: string
+    },
+    enableWorklist: boolean,
+    enableServerSelection: boolean,
+    enableMemoryMonitoring: boolean,
+    isLogoutPossible: boolean,
+    onLogout: () => void,
+    layoutStyle: { height: string },
+    layoutContentStyle: { height: string },
+  ): JSX.Element {
+    return (
+      <SettingsProvider>
+        <Layout style={layoutStyle}>
+          <Header
+            app={appInfo}
+            user={this.state.user}
+            showWorklistButton={enableWorklist}
+            onServerSelection={this.handleServerSelection}
+            onUserLogout={isLogoutPossible ? onLogout : undefined}
+            showServerSelectionButton={enableServerSelection}
+            clients={this.state.clients}
+            defaultClients={this.state.defaultClients}
+          />
+          <Layout.Content style={layoutContentStyle}>
+            <ParametrizedCaseViewer
+              clients={this.state.clients}
+              user={this.state.user}
+              config={this.props.config}
+              app={appInfo}
+            />
+          </Layout.Content>
+          {enableMemoryMonitoring && (
+            <MemoryFooter enabled={enableMemoryMonitoring} />
+          )}
+        </Layout>
+      </SettingsProvider>
+    )
+  }
+
   render(): React.ReactNode {
     const appInfo = {
       name: this.props.name,
@@ -505,16 +556,20 @@
 
     const layoutStyle = { height: '100vh' }
     const layoutContentStyle = { height: '100%' }
+    const routerFuture = {
+      v7_startTransition: true,
+      v7_relativeSplatPath: true,
+    } as const
 
     if (this.state.redirectTo !== undefined) {
       return (
-        <BrowserRouter basename={this.props.config.path}>
+        <BrowserRouter basename={this.props.config.path} future={routerFuture}>
           <Navigate to={this.state.redirectTo} replace />
         </BrowserRouter>
       )
     } else if (this.state.isLoading) {
       return (
-        <BrowserRouter basename={this.props.config.path}>
+        <BrowserRouter basename={this.props.config.path} future={routerFuture}>
           <Layout style={layoutStyle}>
             <Header
               app={appInfo}
@@ -537,7 +592,7 @@
       return <InfoPage type="error" message={this.state.error.message} />
     } else {
       return (
-        <BrowserRouter basename={this.props.config.path}>
+        <BrowserRouter basename={this.props.config.path} future={routerFuture}>
           <Routes>
             <Route
               path="/"
@@ -564,63 +619,55 @@
             />
             <Route
               path="/studies/:studyInstanceUID/*"
-              element={
-                <SettingsProvider>
-                  <Layout style={layoutStyle}>
-                    <Header
-                      app={appInfo}
-                      user={this.state.user}
-                      showWorklistButton={enableWorklist}
-                      onServerSelection={this.handleServerSelection}
-                      onUserLogout={isLogoutPossible ? onLogout : undefined}
-                      showServerSelectionButton={enableServerSelection}
-                      clients={this.state.clients}
-                      defaultClients={this.state.defaultClients}
-                    />
-                    <Layout.Content style={layoutContentStyle}>
-                      <ParametrizedCaseViewer
-                        clients={this.state.clients}
-                        user={this.state.user}
-                        config={this.props.config}
-                        app={appInfo}
-                      />
-                    </Layout.Content>
-                    {enableMemoryMonitoring && (
-                      <MemoryFooter enabled={enableMemoryMonitoring} />
-                    )}
-                  </Layout>
-                </SettingsProvider>
-              }
+              element={this.renderCaseViewerShell(
+                appInfo,
+                enableWorklist,
+                enableServerSelection,
+                enableMemoryMonitoring,
+                isLogoutPossible,
+                onLogout,
+                layoutStyle,
+                layoutContentStyle,
+              )}
             />
             <Route
               path="/projects/:project/locations/:location/datasets/:dataset/dicomStores/:dicomStore/study/:studyInstanceUID/*"
-              element={
-                <SettingsProvider>
-                  <Layout style={layoutStyle}>
-                    <Header
-                      app={appInfo}
-                      user={this.state.user}
-                      showWorklistButton={enableWorklist}
-                      onServerSelection={this.handleServerSelection}
-                      onUserLogout={isLogoutPossible ? onLogout : undefined}
-                      showServerSelectionButton={enableServerSelection}
-                      clients={this.state.clients}
-                      defaultClients={this.state.defaultClients}
-                    />
-                    <Layout.Content style={layoutContentStyle}>
-                      <ParametrizedCaseViewer
-                        clients={this.state.clients}
-                        user={this.state.user}
-                        config={this.props.config}
-                        app={appInfo}
-                      />
-                    </Layout.Content>
-                    {enableMemoryMonitoring && (
-                      <MemoryFooter enabled={enableMemoryMonitoring} />
-                    )}
-                  </Layout>
-                </SettingsProvider>
-              }
+              element={this.renderCaseViewerShell(
+                appInfo,
+                enableWorklist,
+                enableServerSelection,
+                enableMemoryMonitoring,
+                isLogoutPossible,
+                onLogout,
+                layoutStyle,
+                layoutContentStyle,
+              )}
+            />
+            <Route
+              path="/viv/studies/:studyInstanceUID/*"
+              element={this.renderCaseViewerShell(
+                appInfo,
+                enableWorklist,
+                enableServerSelection,
+                enableMemoryMonitoring,
+                isLogoutPossible,
+                onLogout,
+                layoutStyle,
+                layoutContentStyle,
+              )}
+            />
+            <Route
+              path="/viv/projects/:project/locations/:location/datasets/:dataset/dicomStores/:dicomStore/study/:studyInstanceUID/*"
+              element={this.renderCaseViewerShell(
+                appInfo,
+                enableWorklist,
+                enableServerSelection,
+                enableMemoryMonitoring,
+                isLogoutPossible,
+                onLogout,
+                layoutStyle,
+                layoutContentStyle,
+              )}
             />
             <Route
               path="/logout"

src/AppConfig.d.ts

@@ -9,6 +9,8 @@ export type DicomWebManagerErrorHandler = (
 export interface DICOMwebClientRequestHookMetadata {
   url: string
   method: string
+  /** Combined request headers from dicomweb-client (needed to re-apply after retry open()). */
+  headers?: Record<string, string>
 }
 
 export interface RetryRequestSettings {
@@ -77,6 +79,23 @@ export interface OidcSettings {
   endSessionEndpoint?: string
 }
 
+export interface VivChannelSelection {
+  c: number
+  t?: number
+  z?: number
+}
+
+export interface VivSettings {
+  selections?: VivChannelSelection[]
+  channelsVisible?: boolean[]
+  contrastLimits?: Array<[number, number]>
+  colors?: Array<[number, number, number]>
+  initialViewState?: {
+    target: [number, number, number]
+    zoom?: number
+  }
+}
+
 export default interface AppConfig {
   /**
    * Currently, only one server is supported. However, support for multiple
@@ -107,4 +126,6 @@ export default interface AppConfig {
     enableInDevelopment?: boolean
   }
   enableMemoryMonitoring?: boolean
+  /** Optional display overrides for the Viv slide viewer at `/viv/...` routes (channels, contrast, etc.). */
+  vivSettings?: VivSettings
 }

src/DicomWebManager.ts

@@ -157,6 +157,20 @@ export default class DicomWebManager implements dwc.api.DICOMwebClient {
     return this.stores[0].client.headers
   }
 
+  /**
+   * Run a callback on the primary {@link dwc.api.DICOMwebClient} (the store used for reads).
+   * Used e.g. to append Viv tile {@link dwc.api.DICOMwebClientOptions.requestHooks} that must
+   * see the same XHR pipeline as {@link dmv.viewer.VolumeImageViewer}.
+   */
+  applyToPrimaryDicomwebClient(
+    fn: (client: dwc.api.DICOMwebClient) => void,
+  ): void {
+    if (this.stores.length === 0) {
+      return
+    }
+    fn(this.stores[0].client)
+  }
+
   storeInstances = async (
     options: dwc.api.StoreInstancesOptions,
   ): Promise<void> => {