fix: routerBasename setting (#4891)

platform/app/.webpack/webpack.pwa.js

@@ -153,6 +153,12 @@ module.exports = (env, argv) => {
       },
       proxy: {
         '/dicomweb': 'http://localhost:5000',
+        '/dicom-microscopy-viewer': {
+          target: 'http://localhost:3000',
+          pathRewrite: {
+            '^/dicom-microscopy-viewer': `/${PUBLIC_URL}/dicom-microscopy-viewer`,
+          },
+        },
       },
       static: [
         {

platform/app/.webpack/writePluginImportsFile.js

@@ -1,7 +1,6 @@
 const pluginConfig = require('../pluginConfig.json');
 const fs = require('fs');
 const os = require('os');
-const glob = require('glob');
 
 const autogenerationDisclaimer = `
 // THIS FILE IS AUTOGENERATED AS PART OF THE EXTENSION AND MODE PLUGIN PROCESS.
@@ -9,6 +8,12 @@ const autogenerationDisclaimer = `
 
 const extractName = val => (typeof val === 'string' ? val : val.packageName);
 
+const publicURL = process.env.PUBLIC_URL || '/';
+
+function isAbsolutePath(path) {
+  return path.startsWith('http') || path.startsWith('/');
+}
+
 function constructLines(input, categoryName) {
   let pluginCount = 0;
 
@@ -72,7 +77,7 @@ function getRuntimeLoadModesExtensions(modules) {
     if (module.importPath) {
       dynamicLoad.push(
         `  if( module==="${packageName}") {`,
-        `    const imported = await window.browserImportFunction('${module.importPath}');`,
+        `    const imported = await window.browserImportFunction('${isAbsolutePath(module.importPath) ? '' : publicURL}${module.importPath}');`,
         '    return ' +
           (module.globalName
             ? `window["${module.globalName}"];`

platform/app/public/config/aws.js

@@ -1,7 +1,7 @@
 /** @type {AppTypes.Config} */
 
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   extensions: [],
   modes: [],
   showStudyList: true,

platform/app/public/config/customization.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   extensions: [],
   modes: ['@ohif/mode-test'],
   showStudyList: true,

platform/app/public/config/default.js

@@ -2,7 +2,7 @@
 
 window.config = {
   name: 'config/default.js',
-  routerBasename: '/',
+  routerBasename: null,
   // whiteLabeling: {},
   extensions: [],
   modes: [],

platform/app/public/config/default_16bit.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   // whiteLabeling: {},
   extensions: [],
   modes: [],

platform/app/public/config/demo.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   modes: [],
   extensions: [],
   showStudyList: true,

platform/app/public/config/deprecated/docker_openresty-orthanc-keycloak.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   showStudyList: true,
   extensions: [],
   modes: [],

platform/app/public/config/deprecated/docker_openresty-orthanc.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   showStudyList: true,
   extensions: [],
   modes: [],

platform/app/public/config/dicomweb-server.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   extensions: [],
   modes: [],
   showStudyList: true,

platform/app/public/config/dicomweb_relative.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   extensions: [],
   modes: [],
   showStudyList: true,

platform/app/public/config/docker-nginx-dcm4chee.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   showStudyList: true,
   extensions: [],
   modes: [],

platform/app/public/config/docker-nginx-orthanc.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   showStudyList: true,
   extensions: [],
   modes: [],

platform/app/public/config/e2e.js

@@ -17,7 +17,7 @@ if (window.location.search === '?today') {
 
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   extensions: [],
   modes: ['@ohif/mode-test'],
   showStudyList: true,

platform/app/public/config/google.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   enableGoogleCloudAdapter: false,
   // below flag is for performance reasons, but it might not work for all servers
   showWarningMessageForCrossOrigin: true,

platform/app/public/config/idc.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   enableGoogleCloudAdapter: true,
   // below flag is for performance reasons, but it might not work for all servers
   showWarningMessageForCrossOrigin: true,

platform/app/public/config/kheops.js

@@ -2,7 +2,7 @@
 
 window.config = {
   name: 'config/kheops.js',
-  routerBasename: '/',
+  routerBasename: null,
   extensions: [],
   modes: ['@ohif/mode-test'],
   customizationService: {},

platform/app/public/config/local_dcm4chee.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   showStudyList: true,
   extensions: [],
   modes: [],

platform/app/public/config/local_orthanc.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   extensions: [],
   modes: [],
   showStudyList: true,

platform/app/public/config/local_static.js

@@ -1,6 +1,6 @@
 /** @type {AppTypes.Config} */
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   customizationService: ['@ohif/extension-default.customizationModule.helloPage'],
   extensions: [],
   modes: [],

platform/app/public/config/multiple.js

@@ -3,7 +3,7 @@ window.config = {
   // Activate the new HP mode....
   isNewHP: true,
 
-  routerBasename: '/',
+  routerBasename: null,
   customizationService: [
     '@ohif/extension-default.customizationModule.datasources',
     {

platform/app/public/config/netlify.js

@@ -1,7 +1,7 @@
 /** @type {AppTypes.Config} */
 
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   extensions: [],
   modes: [],
   showStudyList: true,

platform/app/public/config/public_dicomweb.js

@@ -1,5 +1,5 @@
 window.config = {
-  routerBasename: '/',
+  routerBasename: null,
   showStudyList: true,
   // below flag is for performance reasons, but it might not work for all servers
   showWarningMessageForCrossOrigin: true,

platform/app/src/App.tsx

@@ -53,7 +53,7 @@ function App({
      * Hosted at: https://ohif.org/where-i-host-the/viewer/
      * Value: `/where-i-host-the/viewer/`
      * */
-    routerBaseName: '/',
+    routerBasename: '/',
     /**
      *
      */

platform/app/src/index.js

@@ -17,15 +17,16 @@ import React from 'react';
  */
 import { modes as defaultModes, extensions as defaultExtensions } from './pluginImports';
 import loadDynamicConfig from './loadDynamicConfig';
+import { publicUrl } from './utils/publicUrl';
 export { history } from './utils/history';
 export { preserveQueryParameters, preserveQueryStrings } from './utils/preserveQueryParameters';
-export { publicUrl } from './utils/publicUrl';
 
 loadDynamicConfig(window.config).then(config_json => {
   // Reset Dynamic config if defined
   if (config_json !== null) {
     window.config = config_json;
   }
+  window.config.routerBasename ||= publicUrl;
 
   /**
    * Combine our appConfiguration with installed extensions and modes.

platform/app/src/routes/WorkList/WorkList.tsx

@@ -11,7 +11,7 @@ import filtersMeta from './filtersMeta.js';
 import { useAppConfig } from '@state';
 import { useDebounce, useSearchParams } from '@hooks';
 import { utils } from '@ohif/core';
-import publicUrl from '../../utils/publicUrl';
+import { routerBasename } from '../../utils/publicUrl';
 
 import {
   StudyListExpandedRow,
@@ -209,7 +209,7 @@ function WorkList({
       skipEmptyString: true,
     });
     navigate({
-      pathname: publicUrl,
+      pathname: '/',
       search: search ? `?${search}` : undefined,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -417,7 +417,7 @@ function WorkList({
                   <Link
                     className={isValidMode ? '' : 'cursor-not-allowed'}
                     key={i}
-                    to={`${publicUrl}${mode.routeName}${dataPath || ''}?${query.toString()}`}
+                    to={`${mode.routeName}${dataPath || ''}?${query.toString()}`}
                     onClick={event => {
                       // In case any event bubbles up for an invalid mode, prevent the navigation.
                       // For example, the event bubbles up when the icon embedded in the disabled button is clicked.

platform/app/src/routes/buildModeRoutes.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import ModeRoute from '@routes/Mode';
-import publicUrl from '../utils/publicUrl';
 
 /*
   Routes uniquely define an entry point to:
@@ -43,7 +42,7 @@ export default function buildModeRoutes({
   modes.forEach(mode => {
     // todo: for each route. add route to path.
     dataSourceNames.forEach(dataSourceName => {
-      const path = `${publicUrl}${mode.routeName}/${dataSourceName}`;
+      const path = `${mode.routeName}/${dataSourceName}`;
 
       // TODO move up.
       const children = () => (
@@ -66,7 +65,7 @@ export default function buildModeRoutes({
 
     // Add active DataSource route.
     // This is the DataSource route for the active data source defined in ExtensionManager.getActiveDataSource
-    const path = `${publicUrl}${mode.routeName}`;
+    const path = `${mode.routeName}`;
 
     // TODO move up.
     const children = () => (

platform/app/src/routes/index.tsx

@@ -11,7 +11,7 @@ import NotFound from './NotFound';
 import buildModeRoutes from './buildModeRoutes';
 import PrivateRoute from './PrivateRoute';
 import PropTypes from 'prop-types';
-import publicUrl from '../utils/publicUrl';
+import { routerBase, routerBasename } from '../utils/publicUrl';
 
 const NotFoundServer = ({
   message = 'Unable to query for studies at this time. Check your data source configuration or network connection',
@@ -55,23 +55,23 @@ NotFoundStudy.propTypes = {
 // TODO: Include "routes" debug route if dev build
 const bakedInRoutes = [
   {
-    path: `${publicUrl}notfoundserver`,
+    path: `/notfoundserver`,
     children: NotFoundServer,
   },
   {
-    path: `${publicUrl}notfoundstudy`,
+    path: `/notfoundstudy`,
     children: NotFoundStudy,
   },
   {
-    path: `${publicUrl}debug`,
+    path: `/debug`,
     children: Debug,
   },
   {
-    path: `${publicUrl}local`,
+    path: `/local`,
     children: Local.bind(null, { modePath: '' }), // navigate to the worklist
   },
   {
-    path: `${publicUrl}localbasic`,
+    path: `/localbasic`,
     children: Local.bind(null, { modePath: 'viewer/dicomlocal' }),
   },
 ];
@@ -86,7 +86,6 @@ const createRoutes = ({
   servicesManager,
   commandsManager,
   hotkeysManager,
-  routerBasename,
   showStudyList,
 }: withAppTypes) => {
   const routes =
@@ -101,8 +100,15 @@ const createRoutes = ({
 
   const { customizationService } = servicesManager.services;
 
+  const path =
+    routerBasename.length > 1 && routerBasename.endsWith('/')
+      ? routerBasename.substring(0, routerBasename.length - 1)
+      : routerBasename;
+
+  console.log('Registering worklist route', routerBasename, path);
+
   const WorkListRoute = {
-    path: publicUrl,
+    path: '/',
     children: DataSourceWrapper,
     private: true,
     props: { children: WorkList, servicesManager, extensionManager },
@@ -113,7 +119,6 @@ const createRoutes = ({
   const allRoutes = [
     ...routes,
     ...(showStudyList ? [WorkListRoute] : []),
-    ...(publicUrl !== '/' && showStudyList ? [{ ...WorkListRoute, path: publicUrl }] : []),
     ...(customRoutes?.routes || []),
     ...bakedInRoutes,
     customRoutes?.notFoundRoute || notFoundRoute,

platform/app/src/utils/preserveQueryParameters.ts

@@ -5,7 +5,7 @@ function preserve(query, current, key) {
   }
 }
 
-export const preserveKeys = ['configUrl', 'multimonitor', 'screenNumber'];
+export const preserveKeys = ['configUrl', 'multimonitor', 'screenNumber', 'hangingProtocolId'];
 
 export function preserveQueryParameters(
   query,

platform/app/src/utils/publicUrl.ts

@@ -1,4 +1,6 @@
 const publicUrl = (window as any).PUBLIC_URL || '/';
+const routerBasename = (window as any).config?.routerBasename || publicUrl;
+
+export { publicUrl, routerBasename };
 
 export default publicUrl;
-export { publicUrl };