Feat/multi route modes

[vlasn]

Context

The documentation mentions support for multi-route/multi-layout modes being planned in the future. Given that we'd like to start using this functionality, we'd be happy to contribute it.

Changes & Results

Updated ModeRoute (platform/app/src/routes/Mode/Mode.tsx) to accept an optional modeRoutePath prop

• If not passed, the route falls back to previous behaviour (rendering the first route of a given mode)
• if passed, ModeRoute tries to render a route object with the matching path parameter from mode.routes
• If a matching route is not present for some reason, the component throws an error

Updated buildModeRoutes logic (platform/app/src/routes/buildModeRoutes.tsx)

In addition to generating & registering /{mode.routeName} and /{mode.routeName}/{dataSourceID} paths, we generate & register for each route in a mode

• a /{mode.routeName}/{mode.route[n].path} route
• for each Data Source, a /{mode.routeName}/{mode.route[n].path}/{dataSourceID} path

Given that we still register the /{mode.routeName} and /{mode.routeName}/{dataSourceID} paths, the router retains previous functionality.

Testing

• Check out this PR
• Install the bundled basic-dev-mode or temporarily add the following to the longitudinal mode's (modes/longitudinal/src/index.ts) routes:

{
  path: 'panelless',
  /*init: ({ servicesManager, extensionManager }) => {
    //defaultViewerRouteInit
  },*/
  layoutTemplate: () => {
    return {
      id: 'some-other-id',
      props: {
        leftPanels: [],
        rightPanels: [],
        rightPanelClosed: true,
        leftPanelClosed: true,
        viewports: [
          {
            namespace: tracked.viewport,
            displaySetsToDisplay: [ohif.sopClassHandler],
          },
        ],
      },
    };
  },
},

• yarn dev
• Open one of the default demo cases, eg. http://localhost:3000/viewer?StudyInstanceUIDs=2.16.840.1.114362.1.11972228.22789312658.616067305.306.2

⚠️ The following steps are written assuming you chose to modify the longitudinal mode. Please modify URL-s as appropriate in case you installed the basic dev mode instead.

• Confirm the default mode route still works on the bare /viewer?... URL
• Confirm the default dataset-specific route (/viewer/dicomweb?....) still works
• Confirm the explicit longitudinal route (/viewer/longitudinal?....) works
• Confirm the newly added route (viewer/panelless?...) works and renders without any side panels
• Confirm the newly added route works with the explicit datasource suffix (viewer/panelless/dicomweb?...)

Checklist

PR

• feat(ModeRoute): add support for rendering an explicit route

• feat(buildModeRoutes): generate an explicit route mapping for each route in a mode

• [x] My Pull Request title is descriptive, accurate and follows the semantic-release format and guidelines.

Code

• [x] My code has been well-documented (function documentation, inline comments, etc.)

Public Documentation Updates

• [ ] The documentation page has been updated as necessary for any public API additions or removals.

Tested Environment

• [x] OS: MacOS 14.0
• [x] Node version: v18.14.2
• [x] Browser: Chrome 126.0.6478.185

[netlify[bot]]

✅ Deploy Preview for ohif-platform-docs ready!

Name	Link
🔨 Latest commit	6ee404f1fd6925cc59f353354ecff4cc96a6771e
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-platform-docs/deploys/66a7873c4b26980008aee86f
😎 Deploy Preview	https://deploy-preview-4318--ohif-platform-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for ohif-dev ready!

Name	Link
🔨 Latest commit	6ee404f1fd6925cc59f353354ecff4cc96a6771e
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-dev/deploys/66a7873c929c6600085b0f12
😎 Deploy Preview	https://deploy-preview-4318--ohif-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[vlasn]

Should mode.route.layoutTemplate({...}) return an unique layout ID? Does any other viewer logic rely on these being unique & should these be enforced?

[salimkanoun]

Hi there, this is a nice addition, any chance to get it merged ?

[vlasn]

Hi, thank you for the feedback! Just to keep you in the loop, I will circle back to making the suggested changes, just not sure we have the time & bandwidth before RSNA 🤞