diff --git a/extensions/default/src/commandsModule.ts b/extensions/default/src/commandsModule.ts index e5f0ff582e..172f00921c 100644 --- a/extensions/default/src/commandsModule.ts +++ b/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); diff --git a/platform/docs/docs/platform/modes/routes.md b/platform/docs/docs/platform/modes/routes.md index 6e8647309d..36376a131f 100644 --- a/platform/docs/docs/platform/modes/routes.md +++ b/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, + }, +``` diff --git a/platform/ui/package.json b/platform/ui/package.json index 99b9fb55d0..68d73cd20c 100644 --- a/platform/ui/package.json +++ b/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" diff --git a/platform/ui/src/index.js b/platform/ui/src/index.js index 78cbf8d7e2..50842160dc 100644 --- a/platform/ui/src/index.js +++ b/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'; diff --git a/platform/viewer/src/index.js b/platform/viewer/src/index.js index 49f47fa79c..6cec78ad22 100644 --- a/platform/viewer/src/index.js +++ b/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 }; diff --git a/platform/viewer/src/routes/Mode/Mode.tsx b/platform/viewer/src/routes/Mode/Mode.tsx index 3b4099a9e5..7e7575bc0c 100644 --- a/platform/viewer/src/routes/Mode/Mode.tsx +++ b/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; diff --git a/platform/ui/src/utils/history.ts b/platform/viewer/src/utils/history.ts similarity index 100% rename from platform/ui/src/utils/history.ts rename to platform/viewer/src/utils/history.ts