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

craco.config.js

@@ -97,6 +97,19 @@ module.exports = {
         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|@vivjs)[\\/]/,
+        use: {
+          loader: require.resolve('babel-loader'),
+          options: {
+            presets: [require.resolve('babel-preset-react-app/dependencies')],
+            cacheDirectory: true
+          }
+        }
+      })
+
       if (linkedDmv) {
         config.watchOptions = {
           ...config.watchOptions,

package.json

@@ -37,6 +37,20 @@
     ]
   },
   "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",

src/App.tsx

@@ -7,6 +7,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>
   )
@@ -464,6 +469,51 @@
     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: React.CSSProperties,
+    layoutContentStyle: React.CSSProperties,
+  ): JSX.Element {
+    return (
+      <SettingsProvider>
+        <AppShell enableMemoryMonitoring={enableMemoryMonitoring}>
+          <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>
+          </Layout>
+        </AppShell>
+      </SettingsProvider>
+    )
+  }
+
   render(): React.ReactNode {
     const appInfo = {
       name: this.props.name,
@@ -521,16 +571,20 @@
       display: 'flex',
       flexDirection: 'column',
     }
+    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}>
           <AppShell enableMemoryMonitoring={false}>
             <Layout style={layoutStyle}>
               <Header
@@ -561,7 +615,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="/"
@@ -587,61 +641,55 @@
             />
             <Route
               path="/studies/:studyInstanceUID/*"
-              element={
-                <SettingsProvider>
-                  <AppShell enableMemoryMonitoring={enableMemoryMonitoring}>
-                    <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>
-                    </Layout>
-                  </AppShell>
-                </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>
-                  <AppShell enableMemoryMonitoring={enableMemoryMonitoring}>
-                    <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>
-                    </Layout>
-                  </AppShell>
-                </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

@@ -79,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
@@ -109,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

@@ -290,6 +290,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)
+  }
+
   /**
    * Store new instances in the first writable configured store. Picking the
    * first writable (rather than always store[0]) keeps backwards compatibility