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

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

Code

• 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

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

[netlify]

✅ Deploy Preview for ohif-platform-docs ready!

Name	Link
🔨 Latest commit	6ee404f
🔍 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]

✅ Deploy Preview for ohif-dev ready!

Name	Link
🔨 Latest commit	6ee404f
🔍 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 ?

[wayfarer3130]

Could we get an integration test that demonstrates this, and a comment in the routes md file so that it is explained how to add it? Otherwise I think it looks good generally.

[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 🤞