fix(Browser history): fixed NPE when navigating a study via browser history and history navigation is now available via the navigateHistory command (#3337)

* fix(Browser history):
- fixed an NPE when navigating to a different study via the URL
- exposed browser history navigation via a command

* Added documentation for the navigateHistory command.
Moved the history object from UI to viewer.

platform/docs/docs/platform/modes/routes.md

@@ -313,3 +313,34 @@ function modeFactory() {
   };
 }
 ```
+
+> How can I navigate to (or show) a different study via the browser history/URL?
+
+There is a command that does this: `navigateHistory`. It takes an object
+argument with the `NavigateHistory` type:
+
+```
+export type NavigateHistory = {
+  to: string; // the URL to navigate to
+  options?: {
+    replace?: boolean; // replace or add/push to history?
+  };
+};
+```
+
+For instance one could bind a hot key to this command to show a specific study
+like this...
+
+```
+  {
+    commandName: 'navigateHistory',
+    commandOptions: {
+      to:
+        '/viewer?StudyInstanceUIDs=1.2.3',
+    },
+    context: 'DEFAULT',
+    label: 'Nav Study',
+    keys: ['n'],
+    isEditable: true,
+  },
+```

platform/viewer/src/index.js

@@ -5,6 +5,8 @@ import 'regenerator-runtime/runtime';
 import App from './App';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { history } from './utils/history';
+
 /**
  * EXTENSIONS AND MODES
  * =================
@@ -34,3 +36,5 @@ loadDynamicImports().then(() => {
     ReactDOM.render(app, document.getElementById('root'));
   });
 });
+
+export { history };

platform/viewer/src/routes/Mode/Mode.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { useParams, useLocation } from 'react-router';
+import { useParams, useLocation, useNavigate } from 'react-router';
 import PropTypes from 'prop-types';
 // TODO: DicomMetadataStore should be injected?
 import { DicomMetadataStore, ServicesManager, utils } from '@ohif/core';
@@ -8,6 +8,7 @@ import { useQuery, useSearchParams } from '@hooks';
 import ViewportGrid from '@components/ViewportGrid';
 import Compose from './Compose';
 import getStudies from './studiesList';
+import { history } from '../../utils/history';
 
 const { getSplitParam } = utils;
 
@@ -105,6 +106,9 @@ export default function ModeRoute({
   const locationRef = useRef(null);
   const isMounted = useRef(false);
 
+  // Expose the react router dom navigation.
+  history.navigate = useNavigate();
+
   if (location !== locationRef.current) {
     layoutTemplateData.current = null;
     locationRef.current = location;

platform/viewer/src/utils/history.ts

@@ -0,0 +1,9 @@
+import { NavigateFunction } from 'react-router';
+
+type History = {
+  navigate: NavigateFunction;
+};
+
+export const history: History = {
+  navigate: null,
+};