Added documentation for the navigateHistory command.

Moved the history object from UI to viewer.

extensions/default/src/commandsModule.ts

@@ -12,7 +12,7 @@ import findViewportsByPosition, {
 
 import { ContextMenuProps } from './CustomizeableContextMenu/types';
 import { NavigateHistory } from './types/commandModuleTypes';
-import { history } from '@ohif/ui';
+import { history } from '@ohif/viewer';
 
 const { subscribeToNextViewportGridChange } = utils;
 
@@ -483,7 +483,22 @@ const commandsModule = ({
     },
 
     /**
-     * Exposes the browser history navigation used by OHIF.
+     * Exposes the browser history navigation used by OHIF. This command can be used to either replace or
+     * push a new entry into the browser history. For example, the following will replace the current
+     * browser history entry with the specified relative URL which changes the study displayed to the
+     * study with study instance UID 1.2.3. Note that as a result of using `options.replace = true`, the
+     * page prior to invoking this command cannot be returned to via the browser back button.
+     *
+     * navigateHistory({
+     *   to: 'viewer?StudyInstanceUIDs=1.2.3',
+     *   options: { replace: true },
+     * });
+     *
+     * @param historyArgs - arguments for the history function;
+     *                      the `to` property is the URL;
+     *                      the `options.replace` is a boolean indicating if the current browser history entry
+     *                      should be replaced or a new entry pushed onto the history (stack); the default value
+     *                      for `replace` is false
      */
     navigateHistory(historyArgs: NavigateHistory) {
       history.navigate(historyArgs.to, historyArgs.options);

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/ui/package.json

@@ -42,7 +42,6 @@
     "react-error-boundary": "^3.1.3",
     "react-modal": "3.11.2",
     "react-outside-click-handler": "^1.3.0",
-    "react-router-dom": "^6.8.1",
     "react-select": "3.0.8",
     "react-with-direction": "^1.3.1",
     "swiper": "^8.4.2"

platform/ui/src/index.js

@@ -112,4 +112,3 @@ export { getIcon, ICONS, addIcon } from './components/Icon/getIcon';
 export { BackgroundColor } from './pages/Colors/BackgroundColor';
 export { ModalComponent } from './contextProviders/ModalComponent';
 export { Types };
-export { history } from './utils/history';

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

@@ -3,11 +3,12 @@ import { useParams, useLocation, useNavigate } from 'react-router';
 import PropTypes from 'prop-types';
 // TODO: DicomMetadataStore should be injected?
 import { DicomMetadataStore, ServicesManager, utils } from '@ohif/core';
-import { DragAndDropProvider, ImageViewerProvider, history } from '@ohif/ui';
+import { DragAndDropProvider, ImageViewerProvider } from '@ohif/ui';
 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;