From c0df3342330281bb7b48a76b60153df6c5f90257 Mon Sep 17 00:00:00 2001 From: Erik Ziegler Date: Thu, 15 Jul 2021 09:54:01 +0200 Subject: [PATCH] Docs reorganization --- platform/docs/docs/README.md | 2 +- .../docs/docs/configuration/_category_.json | 4 + .../configuration.md | 17 +- .../data-sources.md} | 50 +++-- .../{configuring => configuration}/index.md | 38 +--- .../docs/docs/configuring/_category_.json | 4 - platform/docs/docs/deployment/_category_.json | 2 +- .../docs/deployment/build-for-production.md | 22 +- platform/docs/docs/deployment/index.md | 193 ++++++++++-------- .../docs/docs/development/_category_.json | 2 +- .../docs/{ => development}/architecture.md | 189 +++++++++-------- .../docs/development/continous-integration.md | 12 +- .../docs/docs/development/contributing.md | 21 +- .../docs/docs/development/getting-started.md | 5 +- .../docs/{ => development}/our-process.md | 22 +- platform/docs/docs/development/testing.md | 30 +-- .../docs/extensions/lifecycle/_category_.json | 4 - .../extensions/lifecycle/on-mode-enter.md | 33 --- .../docs/extensions/lifecycle/on-mode-exit.md | 21 -- platform/docs/docs/{faq/index.md => faq.md} | 9 +- platform/docs/docs/faq/_category_.json | 4 - platform/docs/docs/help.md | 5 +- platform/docs/docs/migration.md-todo | 7 + platform/docs/docs/platform/_category_.json | 4 + .../docs/{faq => platform}/browser-support.md | 0 .../component-library}/Colors.mdx | 4 +- .../component-library/_category_.json | 4 + .../components/AboutModal.mdx | 0 .../component-library/components/Button.mdx | 2 +- .../components/ButtonGroup.mdx | 2 +- .../components/CinePlayer.mdx | 4 +- .../components/ContextMenu.mdx | 2 +- .../components/DateRange.mdx | 2 +- .../component-library/components/Dropdown.mdx | 2 +- .../components/EmptyStudies.mdx | 2 +- .../components/ErrorBoundary.mdx | 2 +- .../components/ExpandableToolbarButton.mdx | 2 +- .../component-library/components/Input.mdx | 2 +- .../components/InputDateRange.mdx | 2 +- .../components/InputGroup.mdx | 2 +- .../components/InputMultiSelect.mdx | 2 +- .../components/InputText.mdx | 2 +- .../component-library/components/Label.mdx | 2 +- .../component-library/components/ListMenu.mdx | 2 +- .../components/MeasurementTable.mdx | 2 +- .../component-library/components/NavBar.mdx | 2 +- .../components/Notification.mdx | 2 +- .../components/SegmentationTable.mdx | 2 +- .../component-library/components/Select.mdx | 2 +- .../components/SidePanel.mdx | 0 .../components/SplitButton.mdx | 2 +- .../components/StudyBrowser.mdx | 2 +- .../components/StudyItem.mdx | 0 .../components/StudyListFilter.mdx | 2 +- .../components/StudyListPagination.mdx | 2 +- .../components/StudyListTable.mdx | 2 +- .../component-library/components/Table.mdx | 3 +- .../components/Thumbnail.mdx.todo | 0 .../components/ThumbnailNoImage.mdx.todo | 0 .../components/ThumbnailTracked.mdx.todo | 2 +- .../components/ToolbarButton.mdx | 2 +- .../component-library/components/Tooltip.mdx | 2 +- .../components/TooltipClipboard.mdx | 2 +- .../components/Typography.mdx | 2 +- .../component-library/components/Viewport.mdx | 2 +- .../components/ViewportActionBar.mdx | 2 +- .../components/ViewportGrid.mdx | 2 +- .../components/ViewportPane.mdx.todo | 2 +- .../components/WindowLevelMenuItem.mdx | 2 +- .../components/_category_.json | 4 + .../component-library/components/icon.mdx | 2 +- .../context-providers/ModalProvider.mdx | 0 .../ViewportDialogProvider.mdx | 0 .../ViewportDialogProvider.mdx.todo | 0 .../context-providers/_category_.json | 4 + .../component-library}/getting-started.mdx | 10 +- .../views/StudyList.mdx.todo | 0 .../component-library/views/Viewer.mdx.todo | 0 .../environment-variables.md | 0 .../{ => platform}/extensions/_category_.json | 0 .../{ => platform}/extensions/extension.md | 0 .../docs/{ => platform}/extensions/index.md | 157 +++++++------- .../extensions/lifecycle.md} | 70 ++++++- .../extensions/modules/_category_.json | 0 .../extensions/modules/commands.md | 0 .../extensions/modules/contextModule.md | 0 .../extensions/modules/data-source.md | 45 ++-- .../extensions/modules/hpModule.md | 0 .../extensions/modules/layout-template.md | 0 .../extensions/modules/panel.md | 46 ++--- .../extensions/modules/sop-class-handler.md | 0 .../extensions/modules/toolbar.md | 109 +++++----- .../extensions/modules/viewport.md | 32 ++- .../internationalization.md | 0 .../{ => platform}/managers/_category_.json | 0 .../docs/{ => platform}/managers/commands.md | 0 .../docs/{ => platform}/managers/extension.md | 0 .../docs/{ => platform}/managers/hotkeys.md | 0 .../docs/{ => platform}/managers/index.md | 0 .../docs/{ => platform}/managers/service.md | 0 .../docs/{ => platform}/modes/_category_.json | 0 .../docs/docs/{ => platform}/modes/index.md | 6 +- .../modes/lifecycle.md} | 47 +++-- .../docs/docs/{ => platform}/modes/routes.md | 0 .../docs/{ => platform}/modes/validity.md | 0 .../docs/{faq => platform}/pwa-vs-packaged.md | 0 .../{faq => platform}/scope-of-project.md | 0 .../{ => platform}/services/_category_.json | 0 .../services/data/DicomMetadataStore.md | 0 .../services/data/DisplaySetService.md | 0 .../services/data/HangingProtocolService.md | 0 .../services/data/MeasurementService.md | 99 ++++----- .../services/data/ToolbarService.md | 110 +++++----- .../services/data/_category_.json | 0 .../{ => platform}/services/data/index.md | 30 ++- .../docs/{ => platform}/services/index.md | 0 .../docs/{ => platform}/services/pubsub.md | 0 .../services/ui/ViewportGridService.md | 0 .../services/ui/_category_.json | 0 .../docs/{ => platform}/services/ui/index.md | 98 +++++---- .../services/ui/ui-dialog-service.md | 0 .../services/ui/ui-modal-service.md | 0 .../services/ui/ui-notification-service.md | 0 .../services/ui/ui-viewport-dialog-service.md | 0 .../docs/{viewer => platform}/themeing.md | 0 platform/docs/docs/user-guide/_category_.json | 4 + .../docs/{userManuals => user-guide}/index.md | 51 +++-- .../viewer/Language.md | 0 .../viewer/_category_.json | 0 .../viewer/hotkeys.md | 0 .../viewer/index.md | 0 .../viewer/measurement-panel.md | 0 .../viewer/measurement-tracking.md | 0 .../viewer/study-panel.md | 0 .../viewer/toolbar.md | 0 .../viewer/viewport.md | 0 .../docs/docs/userManuals/_category_.json | 4 - platform/docs/docs/viewer/_category_.json | 4 - platform/docs/docusaurus.config.js | 5 +- platform/docs/pluginOHIFWebpackConfig.js | 4 +- platform/docs/tailwind.config.js | 1 + .../versioned_docs/version-1.0/faq/general.md | 2 +- .../docs/versioned_docs/version-2.0/README.md | 5 +- .../extensions/lifecycle/pre-registration.md | 3 +- .../versioned_docs/version-2.0/faq/index.md | 6 +- .../version-2.0/viewer/configuration.md | 5 +- .../Icon/{getIcon.jsx => getIcon.js} | 0 .../LayoutSelector/LayoutSelector.jsx | 2 +- .../ViewportDownloadForm.jsx | 2 +- .../components/ViewportGrid/ViewportGrid.jsx | 2 +- .../components/ViewportPane/ViewportPane.jsx | 2 +- platform/viewer/README.md | 2 +- 152 files changed, 872 insertions(+), 886 deletions(-) create mode 100644 platform/docs/docs/configuration/_category_.json rename platform/docs/docs/{viewer => configuration}/configuration.md (83%) rename platform/docs/docs/{configuring/data-source.md => configuration/data-sources.md} (86%) rename platform/docs/docs/{configuring => configuration}/index.md (93%) delete mode 100644 platform/docs/docs/configuring/_category_.json rename platform/docs/docs/{ => development}/architecture.md (52%) rename platform/docs/docs/{ => development}/our-process.md (91%) delete mode 100644 platform/docs/docs/extensions/lifecycle/_category_.json delete mode 100644 platform/docs/docs/extensions/lifecycle/on-mode-enter.md delete mode 100644 platform/docs/docs/extensions/lifecycle/on-mode-exit.md rename platform/docs/docs/{faq/index.md => faq.md} (92%) delete mode 100644 platform/docs/docs/faq/_category_.json create mode 100644 platform/docs/docs/migration.md-todo create mode 100644 platform/docs/docs/platform/_category_.json rename platform/docs/docs/{faq => platform}/browser-support.md (100%) rename platform/docs/docs/{component-library/pages => platform/component-library}/Colors.mdx (97%) create mode 100644 platform/docs/docs/platform/component-library/_category_.json rename platform/docs/docs/{ => platform}/component-library/components/AboutModal.mdx (100%) rename platform/docs/docs/{ => platform}/component-library/components/Button.mdx (98%) rename platform/docs/docs/{ => platform}/component-library/components/ButtonGroup.mdx (96%) rename platform/docs/docs/{ => platform}/component-library/components/CinePlayer.mdx (82%) rename platform/docs/docs/{ => platform}/component-library/components/ContextMenu.mdx (89%) rename platform/docs/docs/{ => platform}/component-library/components/DateRange.mdx (89%) rename platform/docs/docs/{ => platform}/component-library/components/Dropdown.mdx (93%) rename platform/docs/docs/{ => platform}/component-library/components/EmptyStudies.mdx (82%) rename platform/docs/docs/{ => platform}/component-library/components/ErrorBoundary.mdx (92%) rename platform/docs/docs/{ => platform}/component-library/components/ExpandableToolbarButton.mdx (95%) rename platform/docs/docs/{ => platform}/component-library/components/Input.mdx (86%) rename platform/docs/docs/{ => platform}/component-library/components/InputDateRange.mdx (88%) rename platform/docs/docs/{ => platform}/component-library/components/InputGroup.mdx (95%) rename platform/docs/docs/{ => platform}/component-library/components/InputMultiSelect.mdx (91%) rename platform/docs/docs/{ => platform}/component-library/components/InputText.mdx (87%) rename platform/docs/docs/{ => platform}/component-library/components/Label.mdx (79%) rename platform/docs/docs/{ => platform}/component-library/components/ListMenu.mdx (95%) rename platform/docs/docs/{ => platform}/component-library/components/MeasurementTable.mdx (92%) rename platform/docs/docs/{ => platform}/component-library/components/NavBar.mdx (81%) rename platform/docs/docs/{ => platform}/component-library/components/Notification.mdx (92%) rename platform/docs/docs/{ => platform}/component-library/components/SegmentationTable.mdx (86%) rename platform/docs/docs/{ => platform}/component-library/components/Select.mdx (92%) rename platform/docs/docs/{ => platform}/component-library/components/SidePanel.mdx (100%) rename platform/docs/docs/{ => platform}/component-library/components/SplitButton.mdx (95%) rename platform/docs/docs/{ => platform}/component-library/components/StudyBrowser.mdx (96%) rename platform/docs/docs/{ => platform}/component-library/components/StudyItem.mdx (100%) rename platform/docs/docs/{ => platform}/component-library/components/StudyListFilter.mdx (96%) rename platform/docs/docs/{ => platform}/component-library/components/StudyListPagination.mdx (90%) rename platform/docs/docs/{ => platform}/component-library/components/StudyListTable.mdx (94%) rename platform/docs/docs/{ => platform}/component-library/components/Table.mdx (94%) rename platform/docs/docs/{ => platform}/component-library/components/Thumbnail.mdx.todo (100%) rename platform/docs/docs/{ => platform}/component-library/components/ThumbnailNoImage.mdx.todo (100%) rename platform/docs/docs/{ => platform}/component-library/components/ThumbnailTracked.mdx.todo (89%) rename platform/docs/docs/{ => platform}/component-library/components/ToolbarButton.mdx (90%) rename platform/docs/docs/{ => platform}/component-library/components/Tooltip.mdx (89%) rename platform/docs/docs/{ => platform}/component-library/components/TooltipClipboard.mdx (84%) rename platform/docs/docs/{ => platform}/component-library/components/Typography.mdx (94%) rename platform/docs/docs/{ => platform}/component-library/components/Viewport.mdx (92%) rename platform/docs/docs/{ => platform}/component-library/components/ViewportActionBar.mdx (97%) rename platform/docs/docs/{ => platform}/component-library/components/ViewportGrid.mdx (89%) rename platform/docs/docs/{ => platform}/component-library/components/ViewportPane.mdx.todo (88%) rename platform/docs/docs/{ => platform}/component-library/components/WindowLevelMenuItem.mdx (87%) create mode 100644 platform/docs/docs/platform/component-library/components/_category_.json rename platform/docs/docs/{ => platform}/component-library/components/icon.mdx (92%) rename platform/docs/docs/{ => platform}/component-library/context-providers/ModalProvider.mdx (100%) rename platform/docs/docs/{ => platform}/component-library/context-providers/ViewportDialogProvider.mdx (100%) rename platform/docs/docs/{ => platform}/component-library/context-providers/ViewportDialogProvider.mdx.todo (100%) create mode 100644 platform/docs/docs/platform/component-library/context-providers/_category_.json rename platform/docs/docs/{component-library/pages => platform/component-library}/getting-started.mdx (90%) rename platform/docs/docs/{ => platform}/component-library/views/StudyList.mdx.todo (100%) rename platform/docs/docs/{ => platform}/component-library/views/Viewer.mdx.todo (100%) rename platform/docs/docs/{viewer => platform}/environment-variables.md (100%) rename platform/docs/docs/{ => platform}/extensions/_category_.json (100%) rename platform/docs/docs/{ => platform}/extensions/extension.md (100%) rename platform/docs/docs/{ => platform}/extensions/index.md (70%) rename platform/docs/docs/{extensions/lifecycle/pre-registration.md => platform/extensions/lifecycle.md} (52%) rename platform/docs/docs/{ => platform}/extensions/modules/_category_.json (100%) rename platform/docs/docs/{ => platform}/extensions/modules/commands.md (100%) rename platform/docs/docs/{ => platform}/extensions/modules/contextModule.md (100%) rename platform/docs/docs/{ => platform}/extensions/modules/data-source.md (61%) rename platform/docs/docs/{ => platform}/extensions/modules/hpModule.md (100%) rename platform/docs/docs/{ => platform}/extensions/modules/layout-template.md (100%) rename platform/docs/docs/{ => platform}/extensions/modules/panel.md (70%) rename platform/docs/docs/{ => platform}/extensions/modules/sop-class-handler.md (100%) rename platform/docs/docs/{ => platform}/extensions/modules/toolbar.md (81%) rename platform/docs/docs/{ => platform}/extensions/modules/viewport.md (80%) rename platform/docs/docs/{viewer => platform}/internationalization.md (100%) rename platform/docs/docs/{ => platform}/managers/_category_.json (100%) rename platform/docs/docs/{ => platform}/managers/commands.md (100%) rename platform/docs/docs/{ => platform}/managers/extension.md (100%) rename platform/docs/docs/{ => platform}/managers/hotkeys.md (100%) rename platform/docs/docs/{ => platform}/managers/index.md (100%) rename platform/docs/docs/{ => platform}/managers/service.md (100%) rename platform/docs/docs/{ => platform}/modes/_category_.json (100%) rename platform/docs/docs/{ => platform}/modes/index.md (98%) rename platform/docs/docs/{modes/lifeCycle.md => platform/modes/lifecycle.md} (59%) rename platform/docs/docs/{ => platform}/modes/routes.md (100%) rename platform/docs/docs/{ => platform}/modes/validity.md (100%) rename platform/docs/docs/{faq => platform}/pwa-vs-packaged.md (100%) rename platform/docs/docs/{faq => platform}/scope-of-project.md (100%) rename platform/docs/docs/{ => platform}/services/_category_.json (100%) rename platform/docs/docs/{ => platform}/services/data/DicomMetadataStore.md (100%) rename platform/docs/docs/{ => platform}/services/data/DisplaySetService.md (100%) rename platform/docs/docs/{ => platform}/services/data/HangingProtocolService.md (100%) rename platform/docs/docs/{ => platform}/services/data/MeasurementService.md (59%) rename platform/docs/docs/{ => platform}/services/data/ToolbarService.md (82%) rename platform/docs/docs/{ => platform}/services/data/_category_.json (100%) rename platform/docs/docs/{ => platform}/services/data/index.md (66%) rename platform/docs/docs/{ => platform}/services/index.md (100%) rename platform/docs/docs/{ => platform}/services/pubsub.md (100%) rename platform/docs/docs/{ => platform}/services/ui/ViewportGridService.md (100%) rename platform/docs/docs/{ => platform}/services/ui/_category_.json (100%) rename platform/docs/docs/{ => platform}/services/ui/index.md (83%) rename platform/docs/docs/{ => platform}/services/ui/ui-dialog-service.md (100%) rename platform/docs/docs/{ => platform}/services/ui/ui-modal-service.md (100%) rename platform/docs/docs/{ => platform}/services/ui/ui-notification-service.md (100%) rename platform/docs/docs/{ => platform}/services/ui/ui-viewport-dialog-service.md (100%) rename platform/docs/docs/{viewer => platform}/themeing.md (100%) create mode 100644 platform/docs/docs/user-guide/_category_.json rename platform/docs/docs/{userManuals => user-guide}/index.md (63%) rename platform/docs/docs/{userManuals => user-guide}/viewer/Language.md (100%) rename platform/docs/docs/{userManuals => user-guide}/viewer/_category_.json (100%) rename platform/docs/docs/{userManuals => user-guide}/viewer/hotkeys.md (100%) rename platform/docs/docs/{userManuals => user-guide}/viewer/index.md (100%) rename platform/docs/docs/{userManuals => user-guide}/viewer/measurement-panel.md (100%) rename platform/docs/docs/{userManuals => user-guide}/viewer/measurement-tracking.md (100%) rename platform/docs/docs/{userManuals => user-guide}/viewer/study-panel.md (100%) rename platform/docs/docs/{userManuals => user-guide}/viewer/toolbar.md (100%) rename platform/docs/docs/{userManuals => user-guide}/viewer/viewport.md (100%) delete mode 100644 platform/docs/docs/userManuals/_category_.json delete mode 100644 platform/docs/docs/viewer/_category_.json rename platform/ui/src/components/Icon/{getIcon.jsx => getIcon.js} (100%) diff --git a/platform/docs/docs/README.md b/platform/docs/docs/README.md index 47043a157..1a9818074 100644 --- a/platform/docs/docs/README.md +++ b/platform/docs/docs/README.md @@ -179,7 +179,7 @@ Check out these helpful links: --> -[ohif-org]: http://www.ohif.org +[ohif-org]: https://www.ohif.org [ohif-demo]: http://viewer.ohif.org/ [dicom-web]: https://en.wikipedia.org/wiki/DICOMweb [gh-issues]: https://github.com/OHIF/Viewers/issues diff --git a/platform/docs/docs/configuration/_category_.json b/platform/docs/docs/configuration/_category_.json new file mode 100644 index 000000000..0aea1748d --- /dev/null +++ b/platform/docs/docs/configuration/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Configuration", + "position": 4 +} diff --git a/platform/docs/docs/viewer/configuration.md b/platform/docs/docs/configuration/configuration.md similarity index 83% rename from platform/docs/docs/viewer/configuration.md rename to platform/docs/docs/configuration/configuration.md index 578965133..46bf1b824 100644 --- a/platform/docs/docs/viewer/configuration.md +++ b/platform/docs/docs/configuration/configuration.md @@ -1,21 +1,20 @@ --- -sidebar_position: 1 -sidebar_label: Config +sidebar_position: 3 +sidebar_label: Configuration --- + # Viewer: Configuration -The OHIF Viewing Platform strives to be highly configurable and extensible. This +The OHIF Viewer Platform strives to be highly configurable and extensible. This makes it easier for our community members to keep their "secret sauce" private, -and incentives contributions back to the platform. The `@ohif/viewer` project -of the platform is the lynchpin that combines everything to create our -application. - +and incentives contributions back to the platform. The `@ohif/viewer` project of +the platform is the lynchpin that combines everything to create our application. We maintain a number of common viewer application configurations at [`/platform/viewer/public/configs`][config-dir]. -You can take a look at how to use different configs in the [Environment Variables](../configuring/index.md#environment-variables) - +You can take a look at how to use different configs in the +[Environment Variables](../platform/environment-variables) ```js title="/platform/viewer/public/configs" window.config = { diff --git a/platform/docs/docs/configuring/data-source.md b/platform/docs/docs/configuration/data-sources.md similarity index 86% rename from platform/docs/docs/configuring/data-source.md rename to platform/docs/docs/configuration/data-sources.md index c15ed232d..cd0e8d6ae 100644 --- a/platform/docs/docs/configuring/data-source.md +++ b/platform/docs/docs/configuration/data-sources.md @@ -1,13 +1,12 @@ --- sidebar_position: 2 -sidebar_label: Data Source +sidebar_label: Data Sources --- -# Data Source +# Data Sources ## Set up a local DICOM server - ATTENTION! Already have a remote or local server? Skip to the [configuration section](#configuration-learn-more) below. @@ -37,11 +36,10 @@ in command prompt or terminal_ > the ip docker-machine ip throws. This is the value [`WebPack`][webpack-proxy] > uses to proxy requests - - ## Open Source DICOM Image Archives -There are a lot of options available to you to use as a local DICOM server. Here are some of the more popular ones: +There are a lot of options available to you to use as a local DICOM server. Here +are some of the more popular ones: | Archive | Installation | | --------------------------------------------- | ---------------------------------- | @@ -53,11 +51,8 @@ There are a lot of options available to you to use as a local DICOM server. Here _Feel free to make a Pull Request if you want to add to this list._ - Below, we will focus on `DCM4CHEE` and `Orthanc` usage: - - ### Running Orthanc _Start Orthanc:_ @@ -105,8 +100,8 @@ yarn run dev:orthanc > [Essentials Configuration](./index.md) guide. Let's take a look at what's going on under the hood here. `yarn run dev:orthanc` -is running the `dev:orthanc` script in our project's `package.json` (inside `platform/viewer`). That script -is: +is running the `dev:orthanc` script in our project's `package.json` (inside +`platform/viewer`). That script is: ```js cross-env NODE_ENV=development PROXY_TARGET=/dicom-web PROXY_DOMAIN=http://localhost:8042 APP_CONFIG=config/docker_nginx-orthanc.js webpack-dev-server --config .webpack/webpack.pwa.js -w @@ -161,35 +156,36 @@ window.config = { To learn more about how you can configure the OHIF Viewer, check out our [Configuration Guide](./index.md). - - ### Running DCM4CHEE -dcm4che is a collection of open source applications for healthcare enterprise written in Java programming language -which implements DICOM standard. dcm4chee (extra 'e' at the end) is dcm4che project -for an Image Manager/Image Archive which provides storage, retrieval and other functionalities. -You can read more about dcm4chee in their website [here](https://www.dcm4che.org/) +dcm4che is a collection of open source applications for healthcare enterprise +written in Java programming language which implements DICOM standard. dcm4chee +(extra 'e' at the end) is dcm4che project for an Image Manager/Image Archive +which provides storage, retrieval and other functionalities. You can read more +about dcm4chee in their website [here](https://www.dcm4che.org/) -DCM4chee installation is out of scope for these tutorials and can be found [here](https://github.com/dcm4che/dcm4chee-arc-light/wiki/Run-minimum-set-of-archive-services-on-a-single-host) - -An overview of steps for running OHIF Viewer using a local DCM4CHEE is shown below: +DCM4chee installation is out of scope for these tutorials and can be found +[here](https://github.com/dcm4che/dcm4chee-arc-light/wiki/Run-minimum-set-of-archive-services-on-a-single-host) +An overview of steps for running OHIF Viewer using a local DCM4CHEE is shown +below:
- - - [dcm4chee]: https://github.com/dcm4che/dcm4chee-arc-light -[dcm4chee-docker]: https://github.com/dcm4che/dcm4chee-arc-light/wiki/Running-on-Docker +[dcm4chee-docker]: + https://github.com/dcm4che/dcm4chee-arc-light/wiki/Running-on-Docker [orthanc]: https://www.orthanc-server.com/ [orthanc-docker]: http://book.orthanc-server.com/users/docker.html [dicomcloud]: https://github.com/DICOMcloud/DICOMcloud [dicomcloud-install]: https://github.com/DICOMcloud/DICOMcloud#running-the-code [osirix]: http://www.osirix-viewer.com/ [horos]: https://www.horosproject.org/ -[default-config]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/public/config/default.js -[html-templates]: https://github.com/OHIF/Viewers/tree/master/platform/viewer/public/html-templates -[config-files]: https://github.com/OHIF/Viewers/tree/master/platform/viewer/public/config +[default-config]: + https://github.com/OHIF/Viewers/blob/master/platform/viewer/public/config/default.js +[html-templates]: + https://github.com/OHIF/Viewers/tree/master/platform/viewer/public/html-templates +[config-files]: + https://github.com/OHIF/Viewers/tree/master/platform/viewer/public/config diff --git a/platform/docs/docs/configuring/index.md b/platform/docs/docs/configuration/index.md similarity index 93% rename from platform/docs/docs/configuring/index.md rename to platform/docs/docs/configuration/index.md index 4d0068b1b..18c3a98f0 100644 --- a/platform/docs/docs/configuring/index.md +++ b/platform/docs/docs/configuration/index.md @@ -15,7 +15,6 @@ nice folks over at [dcmjs.org][dcmjs-org]. While convenient for getting started, the time may come when you want to develop using your own data either locally or remotely. - ## Configuration Files The configuration for our viewer is in the `platform/viewer/public/config` @@ -26,7 +25,6 @@ and registered extension's features, are configured using this file. The simplest way is to update the existing default config: - ```js title="platform/viewer/public/config/default.js" window.config = { routerBasename: '/', @@ -55,24 +53,18 @@ window.config = { ], defaultDataSourceName: 'dicomweb', }; - ``` - -> As you can see a new change in `OHIF-v3` is the addition of `dataSources`. -> You can build your own datasource and map it to the internal data structure of OHIF’s > metadata and enjoy using other peoples developed mode on your own data! -> -> You can read more about data sources at [Data Source section in Modes](../modes/index.md) +> As you can see a new change in `OHIF-v3` is the addition of `dataSources`. You +> can build your own datasource and map it to the internal data structure of +> OHIF’s > metadata and enjoy using other peoples developed mode on your own +> data! > +> You can read more about data sources at +> [Data Source section in Modes](../modes/index.md) - - - - - - -The configuration can also be written as a JS Function in case you need to inject dependencies like external services: - +The configuration can also be written as a JS Function in case you need to +inject dependencies like external services: ```js window.config = ({ servicesManager } = {}) => { @@ -135,12 +127,6 @@ alternative data source (or even specify different default hotkeys). | `PROXY_TARGET` | When developing, proxy requests that match this pattern to `PROXY_DOMAIN` | `undefined` | | `PROXY_DOMAIN` | When developing, proxy requests from `PROXY_TARGET` to `PROXY_DOMAIN` | `undefined` | - - - - - - You can also create a new config file and specify its path relative to the build output's root by setting the `APP_CONFIG` environment variable. You can set the value of this environment variable a few different ways: @@ -157,8 +143,6 @@ value of this environment variable a few different ways: After updating the configuration, `yarn run build` to generate updated build output. - - @@ -166,17 +150,17 @@ output. [dcmjs-org]: https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado [dicom-web]: https://en.wikipedia.org/wiki/DICOMweb -[storescu]: http://support.dcmtk.org/docs/storescu.html +[storescu]: https://support.dcmtk.org/docs/storescu.html [webpack-proxy]: https://webpack.js.org/configuration/dev-server/#devserverproxy [orthanc-docker-compose]: https://github.com/OHIF/Viewers/tree/master/.docker/Nginx-Orthanc [dcm4chee]: https://github.com/dcm4che/dcm4chee-arc-light [dcm4chee-docker]: https://github.com/dcm4che/dcm4chee-arc-light/wiki/Running-on-Docker [orthanc]: https://www.orthanc-server.com/ -[orthanc-docker]: http://book.orthanc-server.com/users/docker.html +[orthanc-docker]: https://book.orthanc-server.com/users/docker.html [dicomcloud]: https://github.com/DICOMcloud/DICOMcloud [dicomcloud-install]: https://github.com/DICOMcloud/DICOMcloud#running-the-code -[osirix]: http://www.osirix-viewer.com/ +[osirix]: https://www.osirix-viewer.com/ [horos]: https://www.horosproject.org/ [default-config]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/public/config/default.js [html-templates]: https://github.com/OHIF/Viewers/tree/master/platform/viewer/public/html-templates diff --git a/platform/docs/docs/configuring/_category_.json b/platform/docs/docs/configuring/_category_.json deleted file mode 100644 index 1bfe6f8f8..000000000 --- a/platform/docs/docs/configuring/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Configuring", - "position": 5 -} diff --git a/platform/docs/docs/deployment/_category_.json b/platform/docs/docs/deployment/_category_.json index 3585022c8..534be1dfb 100644 --- a/platform/docs/docs/deployment/_category_.json +++ b/platform/docs/docs/deployment/_category_.json @@ -1,4 +1,4 @@ { "label": "Deployment", - "position": 13 + "position": 3 } diff --git a/platform/docs/docs/deployment/build-for-production.md b/platform/docs/docs/deployment/build-for-production.md index 1365d8177..2ef2014e0 100644 --- a/platform/docs/docs/deployment/build-for-production.md +++ b/platform/docs/docs/deployment/build-for-production.md @@ -4,7 +4,6 @@ sidebar_position: 2 # Build for Production - ### Build Machine Requirements - [Node.js & NPM](https://nodejs.org/en/download/) @@ -25,7 +24,7 @@ More on: _[`git clone`](https://git-scm.com/docs/git-clone), _From .zip:_ -[OHIF/Viewers: react.zip](https://github.com/OHIF/Viewers/archive/master.zip) +[OHIF/Viewers: master.zip](https://github.com/OHIF/Viewers/archive/master.zip) ### Restore Dependencies & Build @@ -33,18 +32,18 @@ Open your terminal, and navigate to the directory containing the source files. Next run these commands: ```bash -// If you haven't already, enable yarn workspaces +# If you haven't already, enable yarn workspaces yarn config set workspaces-experimental true -// Restore dependencies +# Restore dependencies yarn install -// Build source code for production +# Build source code for production yarn run build ``` If everything worked as expected, you should have a new `dist/` directory in the -project's folder. It should roughly resemble the following: +`platform/viewer/dist` folder. It should roughly resemble the following: ```bash title="platform/viewer/dist/" ├── app-config.js @@ -99,17 +98,16 @@ You can do this by running the following commands in the `dist/` output directory: ```bash -// Install http-server as a globally available package +# Install http-server as a globally available package yarn global add http-server -// Change the directory to the platform/viewer +# Change the directory to the platform/viewer -// Serve the files in our current directory -// Accessible at: `http://localhost:8080` +# Serve the files in our current directory +# Accessible at: `http://localhost:8080` npx http-server ./dist ``` -
@@ -125,8 +123,6 @@ web application. For a starting point, check out this repository's own use of: - [Netlify][netlify]: [netlify.toml][netlify.toml] | [build-deploy-preview.sh][build-deploy-preview.sh] - - [circleci]: https://circleci.com/gh/OHIF/Viewers [circleci-config]: https://github.com/OHIF/Viewers/blob/master/.circleci/config.yml diff --git a/platform/docs/docs/deployment/index.md b/platform/docs/docs/deployment/index.md index 997a4f51f..3d8b6b891 100644 --- a/platform/docs/docs/deployment/index.md +++ b/platform/docs/docs/deployment/index.md @@ -2,6 +2,7 @@ sidebar_position: 1 sidebar_label: Overview --- + # Deployment The OHIF Viewer can be embedded in other web applications via it's [packaged @@ -21,9 +22,11 @@ applications. If you find yourself a little lost, please don't hesitate to ## Deployment Scenarios ### Embedded Viewer (deprecated) -`OHIF-v3` has deprecated deploying the viewer as an embedded viewer the number of underlying -libraries that run web workers are increasing for OHIF. An example of these libraries is -OHIF's 3D rendering functionality that is provided by `vtk-js`. + +`OHIF-v3` has deprecated deploying the viewer as an embedded viewer the number +of underlying libraries that run web workers are increasing for OHIF. An example +of these libraries is OHIF's 3D rendering functionality that is provided by +`vtk-js`. ### Stand-alone Viewer @@ -32,7 +35,8 @@ benefits, but comes at the cost of time and complexity. Some benefits include: _Today:_ -- Leverage [extensions](/extensions/index.md) and [modes](/modes/index.md) to drop-in powerful new features +- Leverage [extensions](../platform/extensions/index.md) and + [modes](../platform/modes/index.md) to drop-in powerful new features - Add routes and customize the viewer's workflow - Finer control over styling and whitelabeling @@ -93,14 +97,14 @@ support it yet, but it is gaining wider adoption. If you have an existing archive and intend to host the OHIF Viewer at the same domain name as your archive, then connecting the two is as simple as following the steps layed out in our -[Configuration Essentials Guide](./../configuring/index.md). +[Configuration Essentials Guide](./../configuration/index.md). #### What if I don't have an imaging archive? We provide some guidance on configuring a local image archive in our -[Data Source Essentials](./../configuring/index.md#set-up-a-local-DICOM-server) guide. Hosting an -archive remotely is a little trickier. You can check out some of our -[advanced recipes](#recipes) for modeled setups that may work for you. +[Data Source Essentials](./../configuration/index.md#set-up-a-local-DICOM-server) +guide. Hosting an archive remotely is a little trickier. You can check out some +of our [advanced recipes](#recipes) for modeled setups that may work for you. #### What if I intend to host the OHIF Viewer at a different domain? @@ -124,91 +128,108 @@ appropriate headers. You can find an example of this setup in our #### What if my archive doesn't support DicomWeb? -It's possible to supply all Study data via JSON format, in the event you do not have a DicomWeb endpoint. -You can host all of the relevant files on any web accessible server (Amazon S3, Azure Blob Storage, Local file server etc.) +It's possible to supply all Study data via JSON format, in the event you do not +have a DicomWeb endpoint. You can host all of the relevant files on any web +accessible server (Amazon S3, Azure Blob Storage, Local file server etc.) -This JSON is supplied via the '?url=' query parameter. -It should reference an endpoint that returns **application/json** formatted text. +This JSON is supplied via the '?url=' query parameter. It should reference an +endpoint that returns **application/json** formatted text. -If you do not have an API, you can simply return a text file containing the JSON from any web server. +If you do not have an API, you can simply return a text file containing the JSON +from any web server. +You tell the OHIF viewer to use JSON by using the `dicomjson` datasource and +appending `'?url='` query to your mode's route: -You tell the OHIF viewer to use JSON by using the `dicomjson` datasource and appending `'?url='` query to your mode's route: +e.g. +`https://my-test-ohif-server/myMode/dicomjson?url=https://my-json-server/study-uid.json` -eg. `https://my-test-ohif-server/myMode/dicomjson?url=https://my-json-server/study-uid.json` +The returned JSON object must contain a single root object with a 'studies' +array. +You can read more about using different data sources for mode's routes +[here](../platform/modes/routes.md#route-path) -The returned JSON object must contain a single root object with a 'studies' array. +_Sample JSON format:_ -You can read more about using different data sources for mode's routes [here](../modes/routes.md#route-path) - -*Sample JSON format:* ```json { - "studies": [ - { - "StudyInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.78", - "StudyDescription": "BRAIN SELLA", - "StudyDate": "20010108", - "StudyTime": "120022", - "PatientName": "MISTER^MR", - "PatientId": "832040", - "series": [ - { - "SeriesDescription": "SAG T-1", - "SeriesInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.121", - "SeriesNumber": 2, - "SeriesDate": "20010108", - "SeriesTime": "120318", - "Modality": "MR", - "instances": [ - { - "metadata": { - "Columns": 512, - "Rows": 512, - "InstanceNumber": 3, - "AcquisitionNumber": 0, - "PhotometricInterpretation": "MONOCHROME2", - "BitsAllocated": 16, - "BitsStored": 16, - "PixelRepresentation": 1, - "SamplesPerPixel": 1, - "PixelSpacing": [0.390625, 0.390625], - "HighBit": 15, - "ImageOrientationPatient": [0,1,0,0,0,-1], - "ImagePositionPatient": [11.600000,-92.500000, 98.099998], - "FrameOfReferenceUID": "1.2.840.113619.2.5.1762583153.223134.978956938.470", - "ImageType": ["ORIGINAL","PRIMARY","OTHER"], - "Modality": "MR", - "SOPInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.124", - "SeriesInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.121", - "StudyInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.78" - }, - "url": "dicomweb://s3.amazonaws.com/lury/MRStudy/1.2.840.113619.2.5.1762583153.215519.978957063.124.dcm" - } - ] - } - ] - } - ] + "studies": [ + { + "StudyInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.78", + "StudyDescription": "BRAIN SELLA", + "StudyDate": "20010108", + "StudyTime": "120022", + "PatientName": "MISTER^MR", + "PatientId": "832040", + "series": [ + { + "SeriesDescription": "SAG T-1", + "SeriesInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.121", + "SeriesNumber": 2, + "SeriesDate": "20010108", + "SeriesTime": "120318", + "Modality": "MR", + "instances": [ + { + "metadata": { + "Columns": 512, + "Rows": 512, + "InstanceNumber": 3, + "AcquisitionNumber": 0, + "PhotometricInterpretation": "MONOCHROME2", + "BitsAllocated": 16, + "BitsStored": 16, + "PixelRepresentation": 1, + "SamplesPerPixel": 1, + "PixelSpacing": [0.390625, 0.390625], + "HighBit": 15, + "ImageOrientationPatient": [0, 1, 0, 0, 0, -1], + "ImagePositionPatient": [11.6, -92.5, 98.099998], + "FrameOfReferenceUID": "1.2.840.113619.2.5.1762583153.223134.978956938.470", + "ImageType": ["ORIGINAL", "PRIMARY", "OTHER"], + "Modality": "MR", + "SOPInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.124", + "SeriesInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.121", + "StudyInstanceUID": "1.2.840.113619.2.5.1762583153.215519.978957063.78" + }, + "url": "dicomweb://s3.amazonaws.com/lury/MRStudy/1.2.840.113619.2.5.1762583153.215519.978957063.124.dcm" + } + ] + } + ] + } + ] } ``` -More info on this JSON format can be found here [Issue #1500](https://github.com/OHIF/Viewers/issues/1500) +More info on this JSON format can be found here +[Issue #1500](https://github.com/OHIF/Viewers/issues/1500) **Implementation Notes:** -1. For each instance url (dicom object) in the returned JSON, you must prefix the `url` with `dicomjson:` in order for the cornerstone image loader to retrieve it correctly. - eg. `https://image-server/my-image.dcm` ---> `dicomjson:https://image-server/my-image.dcm` -2. The JSON format above is compatible with >= v3.7.8 of the application in `V2` version. Older versions of the viewer used a different JSON format. As of 20/04/20 the public [https://viewer.ohif.org/] is a pre 3.0 version that does not support this format yet. -3. The JSON format is case-sensitive. Please ensure you have matched casing with the naturalised Dicom format referenced in [Issue #1500](https://github.com/OHIF/Viewers/issues/1500). -*CORS Issues (Cross-Origin Resource Sharing)* +1. For each instance url (dicom object) in the returned JSON, you must prefix + the `url` with `dicomjson:` in order for the cornerstone image loader to + retrieve it correctly. eg. `https://image-server/my-image.dcm` ---> + `dicomjson:https://image-server/my-image.dcm` +2. The JSON format above is compatible with >= v3.7.8 of the application in `V2` + version. Older versions of the viewer used a different JSON format. As of + 20/04/20 the public [https://viewer.ohif.org/] is a pre 3.0 version that does + not support this format yet. +3. The JSON format is case-sensitive. Please ensure you have matched casing with + the naturalised Dicom format referenced in + [Issue #1500](https://github.com/OHIF/Viewers/issues/1500). -If you host a JSON API or Images on a different domain from the the app itself, you will likely have CORS issues. This will also happen when testing from Localhost and reaching out to remote servers. -Even if the domain is the same, different ports, subdomains or protocols (https vs http) will also cause CORS errors. -You will to need add a configuration on each server hosting these assets to allow your App server origin. +_CORS Issues (Cross-Origin Resource Sharing)_ + +If you host a JSON API or Images on a different domain from the the app itself, +you will likely have CORS issues. This will also happen when testing from +Localhost and reaching out to remote servers. Even if the domain is the same, +different ports, subdomains or protocols (https vs http) will also cause CORS +errors. You will to need add a configuration on each server hosting these assets +to allow your App server origin. For example: @@ -218,17 +239,26 @@ Your JSON API is hosted on `https://my-json-api.aws.com` And your images are stored on Amazon S3 at `https://my-s3-bucket.aws.com` -When you first start your application, browsing to `https://my-ohif-server.com/myMode/dicomjson?url=https://my-json-api.aws.com/api/my-json-study-info.json`, you will likely get a CORS error in the browser console as it tries to connect to `https://my-json-api.aws.com`. +When you first start your application, browsing to +`https://my-ohif-server.com/myMode/dicomjson?url=https://my-json-api.aws.com/api/my-json-study-info.json`, +you will likely get a CORS error in the browser console as it tries to connect +to `https://my-json-api.aws.com`. -Adding a setting on the JSON server to allow the CORS origin = `https://my-ohif-server.com` should solve this. +Adding a setting on the JSON server to allow the CORS origin = +`https://my-ohif-server.com` should solve this. -Next, you will likely get a similar CORS error, as the browser tries to go to `https://my-s3-bucket.aws.com`. -You will need to go to the S3 bucket configuration, and add a CORS setting to allow origin = `https://my-ohif-server.com`. - -Essentially, whenever the application connects to a remote resource, you will need to add the applications url to the allowed CORS Origins on that resource. Adding an origin similar to https://localhost:3000 will also allow for local testing. +Next, you will likely get a similar CORS error, as the browser tries to go to +`https://my-s3-bucket.aws.com`. You will need to go to the S3 bucket +configuration, and add a CORS setting to allow origin = +`https://my-ohif-server.com`. +Essentially, whenever the application connects to a remote resource, you will +need to add the applications url to the allowed CORS Origins on that resource. +Adding an origin similar to https://localhost:3000 will also allow for local +testing. ### Securing Your Data + Coming soon diff --git a/platform/docs/docs/development/continous-integration.md b/platform/docs/docs/development/continous-integration.md index 0158afb72..d1e79a673 100644 --- a/platform/docs/docs/development/continous-integration.md +++ b/platform/docs/docs/development/continous-integration.md @@ -1,7 +1,8 @@ --- -sidebar_position: 3 +sidebar_position: 6 sidebar_label: Continous Integration --- + # Continous Integration (CI) This repository uses `CircleCI` and `Netlify` for continous integration. @@ -29,7 +30,6 @@ The PR_CHECKS workflow (Pull Request Checks) runs our automated unit and end-to-end tests for every code check-in. These tests must all pass before code can be merged to our `master` branch. - ![PR_CHECKS](../assets/img/WORKFLOW_PR_CHECKS.png) ### Workflow: PR_OPTIONAL_DOCKER_PUBLISH @@ -38,8 +38,6 @@ The PR_OPTIONAL_DOCKER_PUBLISH workflow allows for "manual approval" to publish the pull request as a tagged docker image. This is helpful when changes need to be tested with the Google Adapter before merging to `master`. - - ![PR_Workflow](../assets/img/WORKFLOW_PR_OPTIONAL_DOCKER_PUBLISH.png) > NOTE: This workflow will fail unless it's for a branch on our `upstream` @@ -53,10 +51,8 @@ It uses the Netlify CLI to deploy assets created as part of the repository's PWA Build process (`yarn run build`). The workflow allows for "Manual Approval" to promote the build to `STAGING` and `PRODUCTION` environments. - ![WORKFLOW_DEPLOY](../assets/img/WORKFLOW_DEPLOY.png) - | Environment | Description | URL | | ----------- | ---------------------------------------------------------------------------------- | --------------------------------------------- | | Development | Always reflects latest changes on `master` branch. | [Netlify][netlify-dev] / [OHIF][ohif-dev] | @@ -76,12 +72,8 @@ GitHub hosts the `gh-pages` branch with GitHub Pages. - Extension Packages: https://github.com/ohif/viewers/#extensions - Documentation: https://docs.ohif.org/ - - ![WORKFLOW_RELEASE](../assets/img/WORKFLOW_RELEASE.png) - - diff --git a/platform/docs/docs/development/contributing.md b/platform/docs/docs/development/contributing.md index 0332c71f7..a0c2cc7bf 100644 --- a/platform/docs/docs/development/contributing.md +++ b/platform/docs/docs/development/contributing.md @@ -1,7 +1,8 @@ --- -sidebar_position: 2 +sidebar_position: 3 sidebar_label: Contributing --- + # Contributing ## How can I help? @@ -12,7 +13,7 @@ should be implemented, please don't hesitate to create a new issue. At a minimum, you may want to read the following documentation: - [Getting Started](/development/getting-started.md) -- [Architecture](../architecture.md) +- [Architecture](./architecture.md) Pull requests that are: @@ -49,9 +50,8 @@ On your local file system: - [`yarn link`](https://yarnpkg.com/en/docs/cli/link) - `yarn run dev` - -- Open a new terminal/shell -- Navigate to `ohif/viewers` (the root of ohif project) +* Open a new terminal/shell +* Navigate to `ohif/viewers` (the root of ohif project) - `yarn install` - [`yarn link cornerstone-tools`](https://yarnpkg.com/en/docs/cli/link) - `yarn run dev` @@ -59,12 +59,8 @@ On your local file system: As you make changed to `cornerstone-tools`, and it's output is rebuilt, you should see the following behavior: - - ![tools](..//assets/img/cornerstone-tools-link.gif) - - If you wish to stop using your local package, run the following commands in the `ohif/viewers` repository root: @@ -101,9 +97,10 @@ there are a lot of factors that can influence the behavior of our development server and bundler. If you encounter issues not addressed here, please don't hesitate to reach out on GitHub. -Sometimes you might encounter a situation where the linking doesn't work as expected. -This might happen when there are multiple linked packages with the same name. -You can [remove][unlink] the linked packages inside yarn and try again. +Sometimes you might encounter a situation where the linking doesn't work as +expected. This might happen when there are multiple linked packages with the +same name. You can [remove][unlink] the linked packages inside yarn and try +again. ## Any guidance on submitting changes? diff --git a/platform/docs/docs/development/getting-started.md b/platform/docs/docs/development/getting-started.md index 9066216e0..fc902776a 100644 --- a/platform/docs/docs/development/getting-started.md +++ b/platform/docs/docs/development/getting-started.md @@ -2,6 +2,7 @@ sidebar_position: 1 sidebar_label: Getting Started --- + # Getting Started ## Setup @@ -74,12 +75,10 @@ You should see the following output: ### 🎉 Celebrate 🎉 -
- ### Building for Production > More comprehensive guides for building and publishing can be found in our @@ -97,7 +96,7 @@ yarn run build:package - If you receive a _"No Studies Found"_ message and do not see your studies, try changing the Study Date filters to a wider range. -- If you see a 'Loading' message which never resolves, check your browser +- If you see a 'Loading' message which never resolves, check your browser's JavaScript console inside the Developer Tools to identify any errors. - - ## Extension Skeleton An extension is a plain JavaScript object that has an `id` property, and one or @@ -68,11 +69,11 @@ export default { ``` ## OHIF-Maintained Extensions + A small number of powerful extensions for popular use cases are maintained by OHIF. They're co-located in the [`OHIF/Viewers`][viewers-repo] repository, in the top level [`extensions/`][ext-source] directory. - @@ -137,49 +138,47 @@ the top level [`extensions/`][ext-source] directory. ## Registering an Extension -Extensions are building blocks that need to be registered. There are two different ways to register and configure extensions: At +Extensions are building blocks that need to be registered. There are two +different ways to register and configure extensions: At [runtime](#registering-at-runtime) and at -[build time](#registering-at-build-time). -You can leverage one or both strategies. Which one(s) you choose depend on your -application's requirements. - -Each [module](#modules) defined by the extension -becomes available to the modes via the `ExtensionManager` by requesting it via -its id. [Read more about Extension Manager](#extension-manager) - +[build time](#registering-at-build-time). You can leverage one or both +strategies. Which one(s) you choose depend on your application's requirements. +Each [module](#modules) defined by the extension becomes available to the modes +via the `ExtensionManager` by requesting it via its id. +[Read more about Extension Manager](#extension-manager) ### Registering at Runtime -The `@ohif/viewer` uses a [configuration file](../viewer/configuration.md) at +The `@ohif/viewer` uses a [configuration file](../../configuration/index.md) at startup. The schema for that file includes an `extensions` key that supports an array of extensions to register. ```js -import MyFirstExtension from '@ohif/extension-first' -import MySecondExtension from '@ohif/extension-second' +import MyFirstExtension from '@ohif/extension-first'; +import MySecondExtension from '@ohif/extension-second'; -const extensionConfig = {/* extension configuration */} +const extensionConfig = { + /* extension configuration */ +}; const config = { routerBasename: '/', - extensions: [ - MyFirstExtension, - [ - MySecondExtension, - extensionConfig - ], + extensions: [MyFirstExtension, [MySecondExtension, extensionConfig]], + modes: [ + /* modes */ ], - modes: [/* modes */], showStudyList: true, - dataSources: [ /* data source config */] -} + dataSources: [ + /* data source config */ + ], +}; ``` Then, behind the scene, the runtime-added extensions will get merged with the -default app extensions (note: default app extensions include: `OHIFDefaultExtension`, - `OHIFCornerstoneExtension`, `OHIFDICOMSRExtension`, - `OHIFMeasurementTrackingExtension`) +default app extensions (note: default app extensions include: +`OHIFDefaultExtension`, `OHIFCornerstoneExtension`, `OHIFDICOMSRExtension`, +`OHIFMeasurementTrackingExtension`) ### Registering at Build Time @@ -194,56 +193,59 @@ them at "build time" to leverage advantages afforded to us by modern tooling: You can update the list of bundled extensions by: 1. Having your `@ohif/viewer` project depend on the extension -2. Importing and adding it to the list of extensions in the - entrypoint: +2. Importing and adding it to the list of extensions in the entrypoint: - ```js title="/platform/src/index.js" - import OHIFDefaultExtension from '@ohif/extension-default'; - import OHIFCornerstoneExtension from '@ohif/extension-cornerstone'; - import OHIFMeasurementTrackingExtension from '@ohif/extension-measurement-tracking'; - import OHIFDICOMSRExtension from '@ohif/extension-dicom-sr'; - import MyFirstExtension from '@ohif/extension-first' +```js title="/platform/src/index.js" +import OHIFDefaultExtension from '@ohif/extension-default'; +import OHIFCornerstoneExtension from '@ohif/extension-cornerstone'; +import OHIFMeasurementTrackingExtension from '@ohif/extension-measurement-tracking'; +import OHIFDICOMSRExtension from '@ohif/extension-dicom-sr'; +import MyFirstExtension from '@ohif/extension-first'; - /** Combine our appConfiguration and "baked-in" extensions */ - const appProps = { - config: window ? window.config : {}, - defaultExtensions: [ - OHIFDefaultExtension, - OHIFCornerstoneExtension, - OHIFMeasurementTrackingExtension, - OHIFDICOMSRExtension, - MyFirstExtension - ], - }; - ``` +/** Combine our appConfiguration and "baked-in" extensions */ +const appProps = { + config: window ? window.config : {}, + defaultExtensions: [ + OHIFDefaultExtension, + OHIFCornerstoneExtension, + OHIFMeasurementTrackingExtension, + OHIFDICOMSRExtension, + MyFirstExtension, + ], +}; +``` ## Lifecycle Hooks Currently, there are three lifecycle hook for extensions: - -[`preRegistration`](./lifecycle/pre-registration.md) -This hook is called once on initialization of the entire viewer application, used to initialize the extensions state, and consume user defined extension configuration. If an extension defines the [`preRegistration`](./lifecycle/pre-registration.md) +[`preRegistration`](./lifecycle/#preRegistration) This hook is called once on +initialization of the entire viewer application, used to initialize the +extensions state, and consume user defined extension configuration. If an +extension defines the [`preRegistration`](./lifecycle/#preRegistration) lifecycle hook, it is called before any modules are registered in the `ExtensionManager`. It's most commonly used to wire up extensions to [services](./../services/index.md) and [commands](./modules/commands.md), and to bootstrap 3rd party libraries. +[`onModeEnter`](./lifecycle#onModeEnter): This hook is called whenever a new +mode is entered, or a mode’s data or datasource is switched. This hook can be +used to initialize data. -[`onModeEnter`](./lifecycle/on-mode-enter.md): This hook is called whenever a new mode is entered, or a mode’s data or datasource is switched. This hook can be used to initialize data. - -[`onModeExit`](./lifecycle/on-mode-exit.md): Similarly to onModeEnter, this hook is called when navigating away from a mode, or before a mode’s data or datasource is changed. This can be used to clean up data (e.g. remove annotations that do not need to be persisted) - - +[`onModeExit`](./lifecycle#onModeExit): Similarly to onModeEnter, this hook is +called when navigating away from a mode, or before a mode’s data or datasource +is changed. This can be used to clean up data (e.g. remove annotations that do +not need to be persisted) ## Modules -Modules are the meat of extensions, the `blocks` that we have been talking about a lot. -They provide "definitions", components, and filtering/mapping logic that are then made available to modes and services. + +Modules are the meat of extensions, the `blocks` that we have been talking about +a lot. They provide "definitions", components, and filtering/mapping logic that +are then made available to modes and services. Each module type has a special purpose, and is consumed by our viewer differently. -
@@ -329,12 +331,9 @@ differently.
- -Tbl. Module types with abridged descriptions and examples. Each module links to a dedicated documentation page. - - - - +Tbl. Module types +with abridged descriptions and examples. Each module links to a dedicated +documentation page. ### Contexts @@ -353,12 +352,6 @@ module that supports this behavior can add a command with the same name, scoped to the appropriate context. When the `command` is fired, the "active contexts" are used to determine the appropriate implementation of the rotate behavior. - - - - - - diff --git a/platform/docs/docs/extensions/lifecycle/pre-registration.md b/platform/docs/docs/platform/extensions/lifecycle.md similarity index 52% rename from platform/docs/docs/extensions/lifecycle/pre-registration.md rename to platform/docs/docs/platform/extensions/lifecycle.md index c4336a06a..87c77800d 100644 --- a/platform/docs/docs/extensions/lifecycle/pre-registration.md +++ b/platform/docs/docs/platform/extensions/lifecycle.md @@ -1,8 +1,19 @@ --- -sidebar_position: 1 -sidebar_label: Pre Registration +sidebar_position: 3 +sidebar_label: Lifecycle Hooks --- -# Lifecylce Hook: preRegistration + +# Extensions: Lifecycle Hooks + +## Overview + +Extensions can implement specific lifecycle methods. + +- preRegistration +- onModeEnter +- onModeExit + +## preRegistration If an extension defines the `preRegistration` lifecycle hook, it is called before any modules are registered in the `ExtensionManager`. This hook can be @@ -18,8 +29,8 @@ The `preRegistration` hook receives an object containing the `configuration` that was provided with the extension at time of registration. Example `preRegistration` implementation that register a new service and make it -available in the app. We will talk more in details for creating a new service for -`OHIF-v3`. +available in the app. We will talk more in details for creating a new service +for `OHIF-v3`. ```js // new service inside new extension @@ -66,3 +77,52 @@ export default { }, }; ``` + +## onModeEnter + +If an extension defines the `onModeEnter` lifecycle hook, it is called when a +new mode is enters, or a mode's data or datasource is switched. + +For instance, in DICOM structured report extension (`dicom-sr`), we are using +`onModeEnter` to re-create the displaySets after a new mode is entered. + +_Example `onModeEnter` hook implementation_ + +```js +export default { + id: 'org.ohif.dicom-sr', + + onModeEnter({ servicesManager }) { + const { DisplaySetService } = servicesManager.services; + const displaySetCache = DisplaySetService.getDisplaySetCache(); + + const srDisplaySets = displaySetCache.filter( + ds => ds.SOPClassHandlerId === SOPClassHandlerId + ); + + srDisplaySets.forEach(ds => { + // New mode route, allow SRs to be hydrated again + ds.isHydrated = false; + }); + }, +}; +``` + +## onModeExit + +If an extension defines the `onModeExit` lifecycle hook, it is called when +navigating away from a mode. This hook can be used to clean up data tasks such +as unregistering services, removing annotations that do not need to be +persisted. + +_Example `onModeExit` hook implementation_ + +```js +export default { + id: 'myExampleExtension', + + onModeExit({ servicesManager, commandsManager }) { + myCacheService.purge(); + }, +}; +``` diff --git a/platform/docs/docs/extensions/modules/_category_.json b/platform/docs/docs/platform/extensions/modules/_category_.json similarity index 100% rename from platform/docs/docs/extensions/modules/_category_.json rename to platform/docs/docs/platform/extensions/modules/_category_.json diff --git a/platform/docs/docs/extensions/modules/commands.md b/platform/docs/docs/platform/extensions/modules/commands.md similarity index 100% rename from platform/docs/docs/extensions/modules/commands.md rename to platform/docs/docs/platform/extensions/modules/commands.md diff --git a/platform/docs/docs/extensions/modules/contextModule.md b/platform/docs/docs/platform/extensions/modules/contextModule.md similarity index 100% rename from platform/docs/docs/extensions/modules/contextModule.md rename to platform/docs/docs/platform/extensions/modules/contextModule.md diff --git a/platform/docs/docs/extensions/modules/data-source.md b/platform/docs/docs/platform/extensions/modules/data-source.md similarity index 61% rename from platform/docs/docs/extensions/modules/data-source.md rename to platform/docs/docs/platform/extensions/modules/data-source.md index 72a121542..e98f7d8ea 100644 --- a/platform/docs/docs/extensions/modules/data-source.md +++ b/platform/docs/docs/platform/extensions/modules/data-source.md @@ -2,17 +2,27 @@ sidebar_position: 3 sidebar_label: Data Source --- + # Module: Data Source - ## Overview -The internal data structure of OHIF’s metadata follows naturalized DICOM JSON, A format pioneered by `dcmjs`. In short DICOM metadata headers with DICOM Keywords instead of tags and sequences as arrays, for easy development and clear code. -We have built a standard for fetching and mapping data into OHIF’s native format, which we call DataSources, and have provided one implementation of this standard. +The internal data structure of OHIF’s metadata follows naturalized DICOM JSON, A +format pioneered by `dcmjs`. In short DICOM metadata headers with DICOM Keywords +instead of tags and sequences as arrays, for easy development and clear code. -You can make another datasource implementation which communicates to your backend and maps to OHIF’s native format, then use any existing mode on your platform. Your data doesn’t even need to be DICOM if you can map some proprietary data to the correct format. +We have built a standard for fetching and mapping data into OHIF’s native +format, which we call DataSources, and have provided one implementation of this +standard. -The DataSource is also a place to add easy helper methods that platform-specific extensions can call in order to interact with the backend, meaning proprietary data interactions can be wrapped in extensions. +You can make another datasource implementation which communicates to your +backend and maps to OHIF’s native format, then use any existing mode on your +platform. Your data doesn’t even need to be DICOM if you can map some +proprietary data to the correct format. + +The DataSource is also a place to add easy helper methods that platform-specific +extensions can call in order to interact with the backend, meaning proprietary +data interactions can be wrapped in extensions. ```js const getDataSourcesModule = () => [ @@ -26,16 +36,13 @@ const getDataSourcesModule = () => [ ]; ``` - - - -Default extension provides two main data sources that are commonly used: `dicomweb` and `dicomjson` +Default extension provides two main data sources that are commonly used: +`dicomweb` and `dicomjson` ```js import { createDicomWebApi } from './DicomWebDataSource/index.js'; import { createDicomJSONApi } from './DicomJSONDataSource/index.js'; - function getDataSourcesModule() { return [ { @@ -52,13 +59,14 @@ function getDataSourcesModule() { } ``` - ## Custom DataSource -You can add your custom datasource by creating the implementation using `IWebApiDataSource.create` from `@ohif/core`. This factory function creates a new "Web API" data source that fetches data over HTTP. - -You need to make sure, you implement the following functions for the data source. +You can add your custom datasource by creating the implementation using +`IWebApiDataSource.create` from `@ohif/core`. This factory function creates a +new "Web API" data source that fetches data over HTTP. +You need to make sure, you implement the following functions for the data +source. ```js title="platform/core/src/DataSources/IWebApiDataSource.js" function create({ @@ -79,8 +87,9 @@ function create({ You can take a look at `dicomweb` data source implementation to get an idea `extensions/default/src/DicomWebDataSource/index.js` - - ## DicomMetadataStore -In `OHIF-v3` we have a central location for the metadata of studies and they are located -in `DicomMetadataStore`. Your custom datasource can communicate with `DicomMetadataStore` to store, and fetch Study/Series/Instance metadata. We will learn more about `DicomMetadataStore` in services. + +In `OHIF-v3` we have a central location for the metadata of studies and they are +located in `DicomMetadataStore`. Your custom datasource can communicate with +`DicomMetadataStore` to store, and fetch Study/Series/Instance metadata. We will +learn more about `DicomMetadataStore` in services. diff --git a/platform/docs/docs/extensions/modules/hpModule.md b/platform/docs/docs/platform/extensions/modules/hpModule.md similarity index 100% rename from platform/docs/docs/extensions/modules/hpModule.md rename to platform/docs/docs/platform/extensions/modules/hpModule.md diff --git a/platform/docs/docs/extensions/modules/layout-template.md b/platform/docs/docs/platform/extensions/modules/layout-template.md similarity index 100% rename from platform/docs/docs/extensions/modules/layout-template.md rename to platform/docs/docs/platform/extensions/modules/layout-template.md diff --git a/platform/docs/docs/extensions/modules/panel.md b/platform/docs/docs/platform/extensions/modules/panel.md similarity index 70% rename from platform/docs/docs/extensions/modules/panel.md rename to platform/docs/docs/platform/extensions/modules/panel.md index edc747a6c..a1282c2c0 100644 --- a/platform/docs/docs/extensions/modules/panel.md +++ b/platform/docs/docs/platform/extensions/modules/panel.md @@ -2,22 +2,21 @@ sidebar_position: 6 sidebar_label: Panel --- + # Module: Panel ## Overview -The default LayoutTemplate has panels on the left and right sides, however one could make a template with panels at the top or bottom and make extensions with panels intended for such slots. +The default LayoutTemplate has panels on the left and right sides, however one +could make a template with panels at the top or bottom and make extensions with +panels intended for such slots. An extension can register a Panel Module by defining a `getPanelModule` method. The panel module provides the ability to define `menuOptions` and `components` that can be used by the consuming application. `components` are React Components that can be displayed in the consuming application's "Panel" Component. - - -![panel-module-v3](../../assets/img/panel-module-v3.png) - - +![panel-module-v3](../../../assets/img/panel-module-v3.png) The `menuOptions`'s `target` key, points to a registered `components`'s `id`. A `defaultContext` is applied to all `menuOption`s; however, each `menuOption` can @@ -29,7 +28,6 @@ associated `ServicesManager` and `CommandsManager`. ```jsx import PanelMeasurementTable from './PanelMeasurementTable.js'; - function getPanelModule({ commandsManager, extensionManager, @@ -57,35 +55,33 @@ function getPanelModule({ } ``` - - - ## Consuming Panels Inside Modes -As explained earlier, extensions make the functionalities and components available and -`modes` utilize them to build an app. So, as seen above, we are not actually defining -which side the panel should be opened. Our extension is providing the component with -its. -New: You can easily add multiple panels to the left/right side of the viewer using the mode -configuration. As seen below, the `leftPanels` and `rightPanels` accept an `Array` of -the `IDs`. +As explained earlier, extensions make the functionalities and components +available and `modes` utilize them to build an app. So, as seen above, we are +not actually defining which side the panel should be opened. Our extension is +providing the component with its. + +New: You can easily add multiple panels to the left/right side of the viewer +using the mode configuration. As seen below, the `leftPanels` and `rightPanels` +accept an `Array` of the `IDs`. ```js export default function mode({ modeConfiguration }) { return { - id: "viewer", + id: 'viewer', routes: [ { - path: "longitudinal", + path: 'longitudinal', layoutTemplate: ({ location, servicesManager }) => { return { id, props: { leftPanels: [ - "org.ohif.measurement-tracking.panelModule.seriesList", + 'org.ohif.measurement-tracking.panelModule.seriesList', ], rightPanels: [ - "org.ohif.measurement-tracking.panelModule.trackedMeasurements", + 'org.ohif.measurement-tracking.panelModule.trackedMeasurements', ], viewports, }, @@ -94,10 +90,10 @@ export default function mode({ modeConfiguration }) { }, ], extensions: [ - "org.ohif.default", - "org.ohif.cornerstone", - "org.ohif.measurement-tracking", - "org.ohif.dicom-sr", + 'org.ohif.default', + 'org.ohif.cornerstone', + 'org.ohif.measurement-tracking', + 'org.ohif.dicom-sr', ], }; } diff --git a/platform/docs/docs/extensions/modules/sop-class-handler.md b/platform/docs/docs/platform/extensions/modules/sop-class-handler.md similarity index 100% rename from platform/docs/docs/extensions/modules/sop-class-handler.md rename to platform/docs/docs/platform/extensions/modules/sop-class-handler.md diff --git a/platform/docs/docs/extensions/modules/toolbar.md b/platform/docs/docs/platform/extensions/modules/toolbar.md similarity index 81% rename from platform/docs/docs/extensions/modules/toolbar.md rename to platform/docs/docs/platform/extensions/modules/toolbar.md index c834b26cc..ed0e1061c 100644 --- a/platform/docs/docs/extensions/modules/toolbar.md +++ b/platform/docs/docs/platform/extensions/modules/toolbar.md @@ -2,24 +2,22 @@ sidebar_position: 1 sidebar_label: Toolbar --- + # Module: Toolbar An extension can register a Toolbar Module by defining a `getToolbarModule` -method. `OHIF-v3`'s `default` extension (`"ohif.org.default"`) provides 5 main toolbar button types: - - - -![toolbarModule](../../assets/img/toolbarModule.png) - +method. `OHIF-v3`'s `default` extension (`"ohif.org.default"`) provides 5 main +toolbar button types: +![toolbarModule](../../../assets/img/toolbarModule.png) ## Example Toolbar Module -The Toolbar Module should return an array of `objects`. There are currently a few different variations of definitions, -each one is detailed further down. + +The Toolbar Module should return an array of `objects`. There are currently a +few different variations of definitions, each one is detailed further down. ```js export default function getToolbarModule({ commandsManager, servicesManager }) { - return [ { name: 'ohif.divider', @@ -45,17 +43,17 @@ export default function getToolbarModule({ commandsManager, servicesManager }) { name: 'ohif.layoutSelector', defaultComponent: ToolbarLayoutSelector, clickHandler: (evt, clickedBtn, btnSectionName) => {}, - } - ] + }, + ]; } ``` - ## Toolbar buttons consumed in modes -Below we can see a simplified version of the `longitudinal` mode that shows how -a mode can add buttons to the toolbar by calling `ToolBarService.addButtons(toolbarButtons)`. -`toolbarButtons` is an array of `toolDefinitions` which we will learn next. +Below we can see a simplified version of the `longitudinal` mode that shows how +a mode can add buttons to the toolbar by calling +`ToolBarService.addButtons(toolbarButtons)`. `toolbarButtons` is an array of +`toolDefinitions` which we will learn next. ```js export default function mode({ modeConfiguration }) { @@ -73,7 +71,9 @@ export default function mode({ modeConfiguration }) { { path: 'longitudinal', layoutTemplate: ({ location, servicesManager }) => { - return {/* */}; + return { + /* */ + }; }, }, ], @@ -85,17 +85,13 @@ export default function mode({ modeConfiguration }) { ], }; } - ``` - - - ## Button Definitions The simplest toolbarButtons definition has the following properties: -![toolbarModule-zoom](../../assets/img/toolbarModule-zoom.png) +![toolbarModule-zoom](../../../assets/img/toolbarModule-zoom.png) ```js { @@ -110,40 +106,36 @@ The simplest toolbarButtons definition has the following properties: }, ``` - - -| property | description | values | -| ---------------- | ----------------------------------------------------------------- | ----------------------------------------- | -| `id` | Unique string identifier for the definition | \* | -| `label` | User/display friendly to show in UI | \* | -| `icon` | A string name for an icon supported by the consuming application. | \* | -| `type` | Used to determine the button's behaviour | "tool", "toggle", "action" | +| property | description | values | +| ---------------- | ----------------------------------------------------------------- | ------------------------------------------- | +| `id` | Unique string identifier for the definition | \* | +| `label` | User/display friendly to show in UI | \* | +| `icon` | A string name for an icon supported by the consuming application. | \* | +| `type` | Used to determine the button's behaviour | "tool", "toggle", "action" | | `commandName` | (optional) The command to run when the button is used. | Any command registered by a `CommandModule` | -| `commandOptions` | (optional) Options to pass the target `commandName` | \* | - +| `commandOptions` | (optional) Options to pass the target `commandName` | \* | There are three main types of toolbar buttons: -- `tool`: buttons that enable a tool by running the `setToolActive` command with the `commandOptions` +- `tool`: buttons that enable a tool by running the `setToolActive` command with + the `commandOptions` - `toggle`: buttons that acts as a toggle: e.g., linking viewports -- `action`: buttons that executes an action: e.g., capture button to save screenshot - - - - - +- `action`: buttons that executes an action: e.g., capture button to save + screenshot ## Nested Buttons -You can use the `ohif.splitButton` type to build a button with extra tools in the dropdown. + +You can use the `ohif.splitButton` type to build a button with extra tools in +the dropdown. - First you need to give your `primary` tool definition to the split button - the `secondary` properties can be a simple arrow down (`chevron-down` icon) - For adding the extra tools add them to the `items` list. -You can see below how `longitudinal` mode is using the available toolbarModule to create -`MeasurementTools` nested button +You can see below how `longitudinal` mode is using the available toolbarModule +to create `MeasurementTools` nested button -![toolbarModule-nested-buttons](../../assets/img/toolbarModule-nested-buttons.png) +![toolbarModule-nested-buttons](../../../assets/img/toolbarModule-nested-buttons.png) ```js title="modes/longitudinal/src/toolbarButtons.js" { @@ -203,19 +195,18 @@ You can see below how `longitudinal` mode is using the available toolbarModule t } ``` - -
- - ## Layout Template -Layout selector button and logic is also provided by the OHIF-v3 `default` extension. -To use it, you can just add the following definition to the list of `toolDefinitions` -![toolbarModule-layout](../../assets/img/toolbarModule-layout.png) +Layout selector button and logic is also provided by the OHIF-v3 `default` +extension. To use it, you can just add the following definition to the list of +`toolDefinitions` + +![toolbarModule-layout](../../../assets/img/toolbarModule-layout.png) + ```js { id: 'Layout', @@ -228,30 +219,28 @@ To use it, you can just add the following definition to the list of `toolDefinit ## Custom Button -You can also create your own extension, and add your new custom tool appearance (e.g., split horizantlly instead of vertically for split tool). -Simply add `getToolbarModule` to your extension, and pass your tool react component to its -`defaultComponent` property in the returned object. -You can use `@ohif/ui` components such as `IconButton, Icon, Tooltip, ToolbarButton` to -build your own component. +You can also create your own extension, and add your new custom tool appearance +(e.g., split horizantlly instead of vertically for split tool). Simply add +`getToolbarModule` to your extension, and pass your tool react component to its +`defaultComponent` property in the returned object. You can use `@ohif/ui` +components such as `IconButton, Icon, Tooltip, ToolbarButton` to build your own +component. ```js -import myToolComponent from './myToolComponent' - +import myToolComponent from './myToolComponent'; export default function getToolbarModule({ commandsManager, servicesManager }) { - return [ { name: 'new-tool-type', defaultComponent: myToolComponent, clickHandler: () => {}, }, - ] + ]; } ``` - - ## Custom tool + **I want to create a new tool** diff --git a/platform/docs/docs/extensions/modules/viewport.md b/platform/docs/docs/platform/extensions/modules/viewport.md similarity index 80% rename from platform/docs/docs/extensions/modules/viewport.md rename to platform/docs/docs/platform/extensions/modules/viewport.md index 415c0cff1..a4a2460ef 100644 --- a/platform/docs/docs/extensions/modules/viewport.md +++ b/platform/docs/docs/platform/extensions/modules/viewport.md @@ -2,10 +2,13 @@ sidebar_position: 5 sidebar_label: Viewport --- + # Module: Viewport ## Overview -Viewports consume a displaySet and display/allow the user to interact with data. An extension can register a Viewport Module by defining a `getViewportModule` + +Viewports consume a displaySet and display/allow the user to interact with data. +An extension can register a Viewport Module by defining a `getViewportModule` method that returns a React component. Currently, we use viewport components to add support for: @@ -16,10 +19,9 @@ add support for: - Whole Slide Microscopy Viewing (whole slide ext.) - etc. - - -The general pattern is that a mode can define which `Viewport` to use for which specific -`SOPClassHandlerUID`, so if you want to fork just a single Viewport component for a specialized mode, this is possible. +The general pattern is that a mode can define which `Viewport` to use for which +specific `SOPClassHandlerUID`, so if you want to fork just a single Viewport +component for a specialized mode, this is possible. ```jsx // displaySet, viewportIndex, dataSource @@ -39,13 +41,10 @@ const getViewportModule = () => { }; ``` - ## Example Viewport Component -A simplified version of the tracked CornerstoneViewport is shown below, which creates -a cornerstone viewport and and action bar on top of it. - - +A simplified version of the tracked CornerstoneViewport is shown below, which +creates a cornerstone viewport and and action bar on top of it. ```jsx function TrackedCornerstoneViewport({ @@ -60,15 +59,15 @@ function TrackedCornerstoneViewport({ const renderViewport = () => { const { component: Component } = extensionManager.getModuleEntry( 'org.ohif.cornerstone.viewportModule.cornerstone' - ) + ); return ( - ) - } + ); + }; return ( <> @@ -77,13 +76,12 @@ function TrackedCornerstoneViewport({ {renderViewport()} - ) + ); } - ``` +![viewportModule](../../../assets/img/viewportModule.png) -![viewportModule](../../assets/img/viewportModule.png) ### `@ohif/viewer` Viewport components are managed by the `ViewportGrid` Component. Which Viewport @@ -93,6 +91,6 @@ component is used depends on: - The Layout Configuration - Registered SopClassHandlers +![viewportModule-layout](../../../assets/img/viewportModule-layout.png) -![viewportModule-layout](../../assets/img/viewportModule-layout.png)
An example of three cornerstone Viewports
diff --git a/platform/docs/docs/viewer/internationalization.md b/platform/docs/docs/platform/internationalization.md similarity index 100% rename from platform/docs/docs/viewer/internationalization.md rename to platform/docs/docs/platform/internationalization.md diff --git a/platform/docs/docs/managers/_category_.json b/platform/docs/docs/platform/managers/_category_.json similarity index 100% rename from platform/docs/docs/managers/_category_.json rename to platform/docs/docs/platform/managers/_category_.json diff --git a/platform/docs/docs/managers/commands.md b/platform/docs/docs/platform/managers/commands.md similarity index 100% rename from platform/docs/docs/managers/commands.md rename to platform/docs/docs/platform/managers/commands.md diff --git a/platform/docs/docs/managers/extension.md b/platform/docs/docs/platform/managers/extension.md similarity index 100% rename from platform/docs/docs/managers/extension.md rename to platform/docs/docs/platform/managers/extension.md diff --git a/platform/docs/docs/managers/hotkeys.md b/platform/docs/docs/platform/managers/hotkeys.md similarity index 100% rename from platform/docs/docs/managers/hotkeys.md rename to platform/docs/docs/platform/managers/hotkeys.md diff --git a/platform/docs/docs/managers/index.md b/platform/docs/docs/platform/managers/index.md similarity index 100% rename from platform/docs/docs/managers/index.md rename to platform/docs/docs/platform/managers/index.md diff --git a/platform/docs/docs/managers/service.md b/platform/docs/docs/platform/managers/service.md similarity index 100% rename from platform/docs/docs/managers/service.md rename to platform/docs/docs/platform/managers/service.md diff --git a/platform/docs/docs/modes/_category_.json b/platform/docs/docs/platform/modes/_category_.json similarity index 100% rename from platform/docs/docs/modes/_category_.json rename to platform/docs/docs/platform/modes/_category_.json diff --git a/platform/docs/docs/modes/index.md b/platform/docs/docs/platform/modes/index.md similarity index 98% rename from platform/docs/docs/modes/index.md rename to platform/docs/docs/platform/modes/index.md index 6fc00097b..28a3e710b 100644 --- a/platform/docs/docs/modes/index.md +++ b/platform/docs/docs/platform/modes/index.md @@ -20,7 +20,7 @@ via url parameters. OHIF-v3 architecture can be seen in the following: -![mode-archs](../assets/img/mode-archs.png) +![mode-archs](../../assets/img/mode-archs.png) > Note: Templates are now a part of “extensions” Routes are configured by modes > and/or app @@ -43,7 +43,7 @@ A mode configuration has a `route` name which is dynamically transformed into a viewer route on initialization of the application. Modes that are available to a study will appear in the study list. -![user-study-summary](../assets/img/user-study-summary.png) +![user-study-summary](../../assets/img/user-study-summary.png) The mode configuration specifies which `extensions` the mode requires, which `LayoutTemplate` to use, and what props to pass to the template. For the default @@ -435,7 +435,7 @@ export default function mode() { window.longitudinalMode = mode({}); ``` -and inside `@ohif/viwer` we have: +and inside `@ohif/viewer` we have: ```js title="platform/viewer/src/appInit.js" if (!appConfig.modes.length) { diff --git a/platform/docs/docs/modes/lifeCycle.md b/platform/docs/docs/platform/modes/lifecycle.md similarity index 59% rename from platform/docs/docs/modes/lifeCycle.md rename to platform/docs/docs/platform/modes/lifecycle.md index 8d7606102..a888990f6 100644 --- a/platform/docs/docs/modes/lifeCycle.md +++ b/platform/docs/docs/platform/modes/lifecycle.md @@ -1,20 +1,26 @@ --- sidebar_position: 2 -sidebar_label: Life Cycle +sidebar_label: Lifecycle Hooks --- -# Mode: LifeCycle +# Modes: Lifecycle Hooks ## Overview -Currently there are two hooks that are called for modes. + +Currently there are two hooks that are called for modes: + +- onModeEnter +- onModeExit ## onModeEnter -This hook gets run after the defined route has been entered by the mode. -This hook can be used to initialize the data, services and appearance of the viewer upon the first render. -For instance, in `longitudinal` mode we are using this hook to initialize the `ToolBarService` and -set the window level/width tool to be active and add buttons to the toolbar. +This hook gets run after the defined route has been entered by the mode. This +hook can be used to initialize the data, services and appearance of the viewer +upon the first render. +For instance, in `longitudinal` mode we are using this hook to initialize the +`ToolBarService` and set the window level/width tool to be active and add +buttons to the toolbar. ```js export default function mode() { @@ -22,19 +28,19 @@ export default function mode() { id: '', displayName: '', onModeEnter: ({ servicesManager, extensionManager }) => { - const { ToolBarService } = servicesManager.services + const { ToolBarService } = servicesManager.services; const interaction = { groupId: 'primary', itemId: 'Wwwc', interactionType: 'tool', commandOptions: undefined, - } + }; - ToolBarService.recordInteraction(interaction) + ToolBarService.recordInteraction(interaction); - ToolBarService.init(extensionManager) - ToolBarService.addButtons(toolbarButtons) + ToolBarService.init(extensionManager); + ToolBarService.addButtons(toolbarButtons); ToolBarService.createButtonSection('primary', [ 'MeasurementTools', 'Zoom', @@ -43,22 +49,23 @@ export default function mode() { 'Capture', 'Layout', 'MoreTools', - ]) + ]); }, /* ... */ - } + }; } ``` ## onModeExit -This hook is called when the viewer navigate away from the route in the url. This is the place -for cleaning up data, and services by unsubscribing to the events. +This hook is called when the viewer navigate away from the route in the url. +This is the place for cleaning up data, and services by unsubscribing to the +events. -For instance, it can be used to reset the `ToolbarService` which reset the toggled buttons. - +For instance, it can be used to reset the `ToolbarService` which reset the +toggled buttons. ```js export default function mode() { @@ -66,13 +73,13 @@ export default function mode() { id: '', displayName: '', onModeExit: ({ servicesManager, extensionManager }) => { - // Turn of the toggled states on exit + // Turn of the toggled states on exit const { ToolBarService } = servicesManager.services; ToolBarService.reset(); }, /* ... */ - } + }; } ``` diff --git a/platform/docs/docs/modes/routes.md b/platform/docs/docs/platform/modes/routes.md similarity index 100% rename from platform/docs/docs/modes/routes.md rename to platform/docs/docs/platform/modes/routes.md diff --git a/platform/docs/docs/modes/validity.md b/platform/docs/docs/platform/modes/validity.md similarity index 100% rename from platform/docs/docs/modes/validity.md rename to platform/docs/docs/platform/modes/validity.md diff --git a/platform/docs/docs/faq/pwa-vs-packaged.md b/platform/docs/docs/platform/pwa-vs-packaged.md similarity index 100% rename from platform/docs/docs/faq/pwa-vs-packaged.md rename to platform/docs/docs/platform/pwa-vs-packaged.md diff --git a/platform/docs/docs/faq/scope-of-project.md b/platform/docs/docs/platform/scope-of-project.md similarity index 100% rename from platform/docs/docs/faq/scope-of-project.md rename to platform/docs/docs/platform/scope-of-project.md diff --git a/platform/docs/docs/services/_category_.json b/platform/docs/docs/platform/services/_category_.json similarity index 100% rename from platform/docs/docs/services/_category_.json rename to platform/docs/docs/platform/services/_category_.json diff --git a/platform/docs/docs/services/data/DicomMetadataStore.md b/platform/docs/docs/platform/services/data/DicomMetadataStore.md similarity index 100% rename from platform/docs/docs/services/data/DicomMetadataStore.md rename to platform/docs/docs/platform/services/data/DicomMetadataStore.md diff --git a/platform/docs/docs/services/data/DisplaySetService.md b/platform/docs/docs/platform/services/data/DisplaySetService.md similarity index 100% rename from platform/docs/docs/services/data/DisplaySetService.md rename to platform/docs/docs/platform/services/data/DisplaySetService.md diff --git a/platform/docs/docs/services/data/HangingProtocolService.md b/platform/docs/docs/platform/services/data/HangingProtocolService.md similarity index 100% rename from platform/docs/docs/services/data/HangingProtocolService.md rename to platform/docs/docs/platform/services/data/HangingProtocolService.md diff --git a/platform/docs/docs/services/data/MeasurementService.md b/platform/docs/docs/platform/services/data/MeasurementService.md similarity index 59% rename from platform/docs/docs/services/data/MeasurementService.md rename to platform/docs/docs/platform/services/data/MeasurementService.md index b669c273c..74605bce1 100644 --- a/platform/docs/docs/services/data/MeasurementService.md +++ b/platform/docs/docs/platform/services/data/MeasurementService.md @@ -2,27 +2,26 @@ sidebar_position: 6 sidebar_label: Measurement Service --- + # Measurement Service - ## Overview -`MeasurementService` handles the internal measurement representation inside `OHIF` platform. -Developers can add their custom `sources` with `mappers` to enable adding measurements inside OHIF. -Currently, we are maintaining `CornerstoneTools` annotations and corresponding mappers can be found -inside the `cornerstone` extension. However, `MeasurementService` can be configured to work with any -custom tools given that its `mappers` is added to the `MeasurementService`. -We can see the overall architecture of the `MeasurementService` below: +`MeasurementService` handles the internal measurement representation inside +`OHIF` platform. Developers can add their custom `sources` with `mappers` to +enable adding measurements inside OHIF. Currently, we are maintaining +`CornerstoneTools` annotations and corresponding mappers can be found inside the +`cornerstone` extension. However, `MeasurementService` can be configured to work +with any custom tools given that its `mappers` is added to the +`MeasurementService`. We can see the overall architecture of the +`MeasurementService` below: - -![services-measurements](../../assets/img/services-measurements.png) - +![services-measurements](../../../assets/img/services-measurements.png) ## Events + There are seven events that get publish in `MeasurementService`: - - | Event | Description | | --------------------- | ------------------------------------------------------ | | MEASUREMENT_UPDATED | Fires when a measurement is updated | @@ -32,52 +31,58 @@ There are seven events that get publish in `MeasurementService`: | MEASUREMENTS_CLEARED | Fires when all measurements are deleted | | JUMP_TO_MEASUREMENT | Fires when a measurement is requested to be jump to | - - ## API - `getMeasurements`: returns array of measurements -- `getMeasurement(id)`: returns the corresponding measurement based on the provided Id. +- `getMeasurement(id)`: returns the corresponding measurement based on the + provided Id. -- `remove(id, source)`: removes a measurement and broadcasts the `MEASUREMENT_REMOVED` event. +- `remove(id, source)`: removes a measurement and broadcasts the + `MEASUREMENT_REMOVED` event. -- `clearMeasurements`: removes all measurements and broadcasts `MEASUREMENTS_CLEARED` event. +- `clearMeasurements`: removes all measurements and broadcasts + `MEASUREMENTS_CLEARED` event. -- `createSource(name, version)`: creates a new measurement source, generates a uid and adds it to the `sources` property of the service. +- `createSource(name, version)`: creates a new measurement source, generates a + uid and adds it to the `sources` property of the service. -- `addMapping(source, definition, matchingCriteria, toSourceSchema, toMeasurementSchema)`: adds a new measurement matching criteria along with mapping functions. - We will learn more about [source/mappers below](#source--mappers) +- `addMapping(source, definition, matchingCriteria, toSourceSchema, toMeasurementSchema)`: + adds a new measurement matching criteria along with mapping functions. We will + learn more about [source/mappers below](#source--mappers) - `update`: updates the measurement details and fires `MEASUREMENT_UPDATED` -- `addRawMeasurement(source,definition,data,toMeasurementSchema,dataSource = {}` : adds a raw measurement into a source so that it may be - converted to/from annotation in the same way. E.g. import serialized data - of the same form as the measurement source. Fires `MEASUREMENT_UPDATED` or `MEASUREMENT_ADDED`. - Note that, `MeasurementService` handles finding the correct mapper upon new measurements; however, `addRawMeasurement` provides more flexibility. - You can take a look into its usage in `dicom-sr` extension. - - - `source`: The measurement source instance. - - `definition`: The source definition you want to add the measurement to. - - `data`: The data you wish to add to the source. - - `toMeasurementSchema`: A function to get the `data` into the same shape as the source definition. - -- `jumpToMeasurement(viewportIndex, id)`: calls the listeners who have subscribed to `JUMP_TO_MEASUREMENT`. - +- `addRawMeasurement(source,definition,data,toMeasurementSchema,dataSource = {}` + : adds a raw measurement into a source so that it may be converted to/from + annotation in the same way. E.g. import serialized data of the same form as + the measurement source. Fires `MEASUREMENT_UPDATED` or `MEASUREMENT_ADDED`. + Note that, `MeasurementService` handles finding the correct mapper upon new + measurements; however, `addRawMeasurement` provides more flexibility. You can + take a look into its usage in `dicom-sr` extension. + - `source`: The measurement source instance. + - `definition`: The source definition you want to add the measurement to. + - `data`: The data you wish to add to the source. + - `toMeasurementSchema`: A function to get the `data` into the same shape as + the source definition. +- `jumpToMeasurement(viewportIndex, id)`: calls the listeners who have + subscribed to `JUMP_TO_MEASUREMENT`. ## Source / Mappers -To create a custom measurement source and relevant mappers for each tool, you can take a look -at the `init.js` inside the `cornerstone` extension. In which we are registering our -`CornerstoneTools-v4` measurement source to MeasurementService. Let's take a peek at the -*simplified* implementation together. To achieve this, for each tool, we need to -provide three mappers: -- `matchingCriteria`: criteria used for finding the correct mapper for the drawn tool. +To create a custom measurement source and relevant mappers for each tool, you +can take a look at the `init.js` inside the `cornerstone` extension. In which we +are registering our `CornerstoneTools-v4` measurement source to +MeasurementService. Let's take a peek at the _simplified_ implementation +together. To achieve this, for each tool, we need to provide three mappers: + +- `matchingCriteria`: criteria used for finding the correct mapper for the drawn + tool. - `toAnnotation`: tbd -- `toMeasurement`: a function that converts the tool data to OHIF internal representation of measurement data. - +- `toMeasurement`: a function that converts the tool data to OHIF internal + representation of measurement data. ```js title="extensions/cornerstone/src/utils/measurementServiceMappings/Length.js" function toMeasurement( @@ -85,7 +90,7 @@ function toMeasurement( DisplaySetService, getValueTypeFromToolType ) { - const { element, measurementData } = csToolsAnnotation + const { element, measurementData } = csToolsAnnotation; /** ... **/ @@ -94,12 +99,12 @@ function toMeasurement( FrameOfReferenceUID, SeriesInstanceUID, StudyInstanceUID, - } = getSOPInstanceAttributes(element) + } = getSOPInstanceAttributes(element); const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID( SOPInstanceUID, SeriesInstanceUID - ) + ); /** ... **/ return { @@ -115,7 +120,7 @@ function toMeasurement( length: measurementData.length, type: getValueTypeFromToolType(tool), points: getPointsFromHandles(measurementData.handles), - } + }; } ////////////////////////////////////////// @@ -131,7 +136,7 @@ const Length = { points: 2, }, ], -} +}; const _initMeasurementService = (MeasurementService, DisplaySetService) => { /** ... **/ @@ -153,6 +158,4 @@ const _initMeasurementService = (MeasurementService, DisplaySetService) => { /** Other tools **/ return csToolsVer4MeasurementSource; }; - - ``` diff --git a/platform/docs/docs/services/data/ToolbarService.md b/platform/docs/docs/platform/services/data/ToolbarService.md similarity index 82% rename from platform/docs/docs/services/data/ToolbarService.md rename to platform/docs/docs/platform/services/data/ToolbarService.md index 3271ef797..e9ab5a945 100644 --- a/platform/docs/docs/services/data/ToolbarService.md +++ b/platform/docs/docs/platform/services/data/ToolbarService.md @@ -2,15 +2,13 @@ sidebar_position: 5 sidebar_label: Toolbar Service --- + # Toolbar Service - ## Overview -`ToolbarService` handles the toolbar section buttons, and what happens when a button is clicked by -the user. - - +`ToolbarService` handles the toolbar section buttons, and what happens when a +button is clicked by the user.
@@ -18,40 +16,40 @@ the user. ## Events - | Event | Description | | ----------------------- | ---------------------------------------------------------------------- | | TOOL_BAR_MODIFIED | Fires when a button is added/removed to the toolbar | | TOOL_BAR_STATE_MODIFIED | Fires when an interaction happens and ToolbarService state is modified | - - - ## API -- `recordInteraction(interaction)`: executes the provided interaction which is an object providing the following properties to the ToolbarService: +- `recordInteraction(interaction)`: executes the provided interaction which is + an object providing the following properties to the ToolbarService: - - `interactionType`: can be `tool`, `toggle` and `action`. We will discuss more each type below. + - `interactionType`: can be `tool`, `toggle` and `action`. We will discuss + more each type below. - `itemId`: tool name - - `groupId`: the Id for the tool button group; e.g., `Wwwc` which holds presets. + - `groupId`: the Id for the tool button group; e.g., `Wwwc` which holds + presets. - `commandName`: if tool has a command attached to run - `commandOptions`: arguments for the command. -- `reset`: reset the state of the toolbarService, set the primary tool to be `Wwwc` and unsubscribe tools that have registered their functions. +- `reset`: reset the state of the toolbarService, set the primary tool to be + `Wwwc` and unsubscribe tools that have registered their functions. -- `addButtons`: add the button definition to the service. [See below for button definition](#button-definitions). +- `addButtons`: add the button definition to the service. + [See below for button definition](#button-definitions). -- `setButtons`: sets the buttons defined in the service. It overrides all the previous buttons +- `setButtons`: sets the buttons defined in the service. It overrides all the + previous buttons - `getActiveTools`: returns the active tool + all the toggled-on tools - - ## State -ToolbarService has an internal state that gets updated per tool interaction and tracks the -active toolId, state of the buttons that have toggled state, and the group buttons and which tool -in each group is active. +ToolbarService has an internal state that gets updated per tool interaction and +tracks the active toolId, state of the buttons that have toggled state, and the +group buttons and which tool in each group is active. ```js state = { @@ -62,20 +60,20 @@ state = { groups: { /* track most recent click per group...*/ }, -} +}; ``` - - ## Interaction type -There are three main types that a tool can have which is defined in the interaction object. + +There are three main types that a tool can have which is defined in the +interaction object. - `tool`: setting a tool to be active; e.g., measurement tools - `toggle`: toggling state of a tool; e.g., viewport link (sync) -- `action`: performs a registered action outside of the ToolbarService; e.g., capture - -A *simplified* implementation of the ToolbarService is: +- `action`: performs a registered action outside of the ToolbarService; e.g., + capture +A _simplified_ implementation of the ToolbarService is: ```js export default class ToolBarService { @@ -84,24 +82,24 @@ export default class ToolBarService { /** ... **/ switch (interactionType) { case 'action': { - break + break; } case 'tool': { - this.state.primaryToolId = itemId + this.state.primaryToolId = itemId; - commandsManager.runCommand('setToolActive', interaction.commandOptions) - break + commandsManager.runCommand('setToolActive', interaction.commandOptions); + break; } case 'toggle': { this.state.toggles[itemId] = this.state.toggles[itemId] === undefined ? true - : !this.state.toggles[itemId] - interaction.commandOptions.toggledState = this.state.toggles[itemId] - break + : !this.state.toggles[itemId]; + interaction.commandOptions.toggledState = this.state.toggles[itemId]; + break; } default: - throw new Error(`Invalid interaction type: ${interactionType}`) + throw new Error(`Invalid interaction type: ${interactionType}`); } /** ... **/ } @@ -109,13 +107,11 @@ export default class ToolBarService { } ``` - - ## Button Definitions The simplest toolbarButtons definition has the following properties: -![toolbarModule-zoom](../../assets/img/toolbarModule-zoom.png) +![toolbarModule-zoom](../../../assets/img/toolbarModule-zoom.png) ```js { @@ -130,40 +126,36 @@ The simplest toolbarButtons definition has the following properties: }, ``` - - -| property | description | values | -| ---------------- | ----------------------------------------------------------------- | ----------------------------------------- | -| `id` | Unique string identifier for the definition | \* | -| `label` | User/display friendly to show in UI | \* | -| `icon` | A string name for an icon supported by the consuming application. | \* | -| `type` | Used to determine the button's behaviour | "tool", "toggle", "action" | +| property | description | values | +| ---------------- | ----------------------------------------------------------------- | ------------------------------------------- | +| `id` | Unique string identifier for the definition | \* | +| `label` | User/display friendly to show in UI | \* | +| `icon` | A string name for an icon supported by the consuming application. | \* | +| `type` | Used to determine the button's behaviour | "tool", "toggle", "action" | | `commandName` | (optional) The command to run when the button is used. | Any command registered by a `CommandModule` | -| `commandOptions` | (optional) Options to pass the target `commandName` | \* | - +| `commandOptions` | (optional) Options to pass the target `commandName` | \* | There are three main types of toolbar buttons: -- `tool`: buttons that enable a tool by running the `setToolActive` command with the `commandOptions` +- `tool`: buttons that enable a tool by running the `setToolActive` command with + the `commandOptions` - `toggle`: buttons that acts as a toggle: e.g., linking viewports -- `action`: buttons that executes an action: e.g., capture button to save screenshot - - - - - +- `action`: buttons that executes an action: e.g., capture button to save + screenshot ## Nested Buttons -You can use the `ohif.splitButton` type to build a button with extra tools in the dropdown. + +You can use the `ohif.splitButton` type to build a button with extra tools in +the dropdown. - First you need to give your `primary` tool definition to the split button - the `secondary` properties can be a simple arrow down (`chevron-down` icon) - For adding the extra tools add them to the `items` list. -You can see below how `longitudinal` mode is using the available toolbarModule to create -`MeasurementTools` nested button +You can see below how `longitudinal` mode is using the available toolbarModule +to create `MeasurementTools` nested button -![toolbarModule-nested-buttons](../../assets/img/toolbarModule-nested-buttons.png) +![toolbarModule-nested-buttons](../../../assets/img/toolbarModule-nested-buttons.png) ```js title="modes/longitudinal/src/toolbarButtons.js" { diff --git a/platform/docs/docs/services/data/_category_.json b/platform/docs/docs/platform/services/data/_category_.json similarity index 100% rename from platform/docs/docs/services/data/_category_.json rename to platform/docs/docs/platform/services/data/_category_.json diff --git a/platform/docs/docs/services/data/index.md b/platform/docs/docs/platform/services/data/index.md similarity index 66% rename from platform/docs/docs/services/data/index.md rename to platform/docs/docs/platform/services/data/index.md index 37704fea5..69a88c453 100644 --- a/platform/docs/docs/services/data/index.md +++ b/platform/docs/docs/platform/services/data/index.md @@ -2,16 +2,15 @@ sidebar_position: 1 sidebar_label: Overview --- + # Overview +Data services are the first category of services which deal with handling non-ui +related state Each services have their own internal state which they handle. - -Data services are the first category of services which deal with handling non-ui related state -Each services have their own internal state which they handle. - - -> We have replaced the *redux* store. Instead we have introduced various services and a pub/sub pattern to subscribe and run, which makes the `OHIF-v3` architecture nice and clean. - +> We have replaced the _redux_ store. Instead we have introduced various +> services and a pub/sub pattern to subscribe and run, which makes the `OHIF-v3` +> architecture nice and clean. We maintain the following non-ui Services: @@ -21,19 +20,17 @@ We maintain the following non-ui Services: - [Toolbar Service](../data/ToolbarService.md) - [Measurement Service](../data/MeasurementService.md) - - - ## Service Architecture -![services-data](../../assets/img/services-data.png) +![services-data](../../../assets/img/services-data.png) +> We have explained services and how to create a custom service in the +> [`ServiceManager`](../../managers/service.md) section of the docs -> We have explained services and how to create a custom service in the [`ServiceManager`](../../managers/service.md) section of the docs - -To recap: The simplest service return a new object that has a `name` property, and `Create` method which instantiate the service class. The "Factory -Function" that creates the service is provided with the implementation (this is -slightly different for UI Services). +To recap: The simplest service return a new object that has a `name` property, +and `Create` method which instantiate the service class. The "Factory Function" +that creates the service is provided with the implementation (this is slightly +different for UI Services). ```js // extensions/customExtension/src/services/backEndService/index.js @@ -53,5 +50,4 @@ A service, once created, can be registered with the `ServicesManager` to make it accessible to extensions. Similarly, the application code can access named services from the `ServicesManager`. - [Read more of how to design a new custom service and register it](../../managers/service.md) diff --git a/platform/docs/docs/services/index.md b/platform/docs/docs/platform/services/index.md similarity index 100% rename from platform/docs/docs/services/index.md rename to platform/docs/docs/platform/services/index.md diff --git a/platform/docs/docs/services/pubsub.md b/platform/docs/docs/platform/services/pubsub.md similarity index 100% rename from platform/docs/docs/services/pubsub.md rename to platform/docs/docs/platform/services/pubsub.md diff --git a/platform/docs/docs/services/ui/ViewportGridService.md b/platform/docs/docs/platform/services/ui/ViewportGridService.md similarity index 100% rename from platform/docs/docs/services/ui/ViewportGridService.md rename to platform/docs/docs/platform/services/ui/ViewportGridService.md diff --git a/platform/docs/docs/services/ui/_category_.json b/platform/docs/docs/platform/services/ui/_category_.json similarity index 100% rename from platform/docs/docs/services/ui/_category_.json rename to platform/docs/docs/platform/services/ui/_category_.json diff --git a/platform/docs/docs/services/ui/index.md b/platform/docs/docs/platform/services/ui/index.md similarity index 83% rename from platform/docs/docs/services/ui/index.md rename to platform/docs/docs/platform/services/ui/index.md index 868c28b88..63ffea903 100644 --- a/platform/docs/docs/services/ui/index.md +++ b/platform/docs/docs/platform/services/ui/index.md @@ -2,11 +2,9 @@ sidebar_position: 1 sidebar_label: Overview --- + # Overview - - - - - A typical web application will have components and state for common UI like modals, notifications, dialogs, etc. A UI service makes it possible to leverage these components from an extension. @@ -29,8 +25,6 @@ We maintain the following UI Services: - Cine Service - [Viewport Grid Service](ViewportGridService.md) - - -![UIService](../../assets/img/ui-services.png) - +![UIService](../../../assets/img/ui-services.png) - ## Providers for UI services + **There are several context providers that wraps the application routes. This -makes the context values exposed in the app, and service's `setImplementation` can get run to override the implementation of the service.** +makes the context values exposed in the app, and service's `setImplementation` +can get run to override the implementation of the service.** ```js title="platform/viewer/src/App.jsx" function App({ config, defaultExtensions }) { @@ -84,7 +78,7 @@ function App({ config, defaultExtensions }) { /**...**/ - ) + ); } ``` @@ -98,35 +92,36 @@ const publicAPI = { hide: _hide, show: _show, setServiceImplementation, -} +}; function setServiceImplementation({ hide: hideImplementation, show: showImplementation, }) { /** ... **/ - serviceImplementation._hide = hideImplementation - serviceImplementation._show = showImplementation + serviceImplementation._hide = hideImplementation; + serviceImplementation._show = showImplementation; /** ... **/ } export default { name: 'UIModalService', create: ({ configuration = {} }) => { - return publicAPI + return publicAPI; }, -} +}; ``` -`UIModalService` implementation can be set (override) in its context provider. For instance in `ModalProvider` we have: +`UIModalService` implementation can be set (override) in its context provider. +For instance in `ModalProvider` we have: ```js title="platform/ui/src/contextProviders/ModalProvider.jsx" -import { Modal } from '@ohif/ui' +import { Modal } from '@ohif/ui'; -const ModalContext = createContext(null) -const { Provider } = ModalContext +const ModalContext = createContext(null); +const { Provider } = ModalContext; -export const useModal = () => useContext(ModalContext) +export const useModal = () => useContext(ModalContext); const ModalProvider = ({ children, modal: Modal, service }) => { const DEFAULT_OPTIONS = { @@ -137,20 +132,21 @@ const ModalProvider = ({ children, modal: Modal, service }) => { closeButton: true, title: null, customClassName: '', - } + }; - const show = useCallback( - (props) => setOptions({ ...options, ...props }), - [options] - ) + const show = useCallback(props => setOptions({ ...options, ...props }), [ + options, + ]); - const hide = useCallback(() => setOptions(DEFAULT_OPTIONS), [DEFAULT_OPTIONS]) + const hide = useCallback(() => setOptions(DEFAULT_OPTIONS), [ + DEFAULT_OPTIONS, + ]); useEffect(() => { if (service) { - service.setServiceImplementation({ hide, show }) + service.setServiceImplementation({ hide, show }); } - }, [hide, service, show]) + }, [hide, service, show]); const { content: ModalContent, @@ -160,7 +156,7 @@ const ModalProvider = ({ children, modal: Modal, service }) => { customClassName, shouldCloseOnEsc, closeButton, - } = options + } = options; return ( @@ -178,21 +174,23 @@ const ModalProvider = ({ children, modal: Modal, service }) => { )} {children} - ) -} + ); +}; -export default ModalProvider +export default ModalProvider; -export const ModalConsumer = ModalContext.Consumer +export const ModalConsumer = ModalContext.Consumer; ``` -Therefore, anywhere in the app that we have access to react context we can use it by calling the `useModal` from `@ohif/ui`. As a matter of fact, we are utilizing the modal for the preference window which shows the hotkeys after clicking on the gear button on the right side of the header. +Therefore, anywhere in the app that we have access to react context we can use +it by calling the `useModal` from `@ohif/ui`. As a matter of fact, we are +utilizing the modal for the preference window which shows the hotkeys after +clicking on the gear button on the right side of the header. A `simplified` code for our worklist is: - ```js title="platform/viewer/src/routes/WorkList/WorkList.jsx" -import { useModal, Header } from '@ohif/ui' +import { useModal, Header } from '@ohif/ui'; function WorkList({ history, @@ -202,7 +200,7 @@ function WorkList({ dataSource, hotkeysManager, }) { - const { show, hide } = useModal() + const { show, hide } = useModal(); /** ... **/ @@ -220,23 +218,24 @@ function WorkList({ title: t('UserPreferencesModal:User Preferences'), content: UserPreferences, contentProps: { - hotkeyDefaults: - hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults), + hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions( + hotkeyDefaults + ), hotkeyDefinitions, onCancel: hide, currentLanguage: currentLanguage(), availableLanguages, defaultLanguage, - onSubmit: (state) => { - i18n.changeLanguage(state.language.value) - hotkeysManager.setHotkeys(state.hotkeyDefinitions) - hide() + onSubmit: state => { + i18n.changeLanguage(state.language.value); + hotkeysManager.setHotkeys(state.hotkeyDefinitions); + hide(); }, onReset: () => hotkeysManager.restoreDefaultBindings(), }, }), }, - ] + ]; /** ... **/ return (
@@ -244,12 +243,10 @@ function WorkList({
/** ... **/
- ) + ); } ``` - - - ![user-studyist-modespecific](../assets/img/user-studyist-modespecific.png) -The previous screenshot shows a study containing PET and CT images and both Basic Viewer and PET/CT Mode are available. - +The previous screenshot shows a study containing PET and CT images and both +Basic Viewer and PET/CT Mode are available. ## View Study -The `Basic Viewer` mode is available for all studies by default. Click on the mode button to launch the viewer. + +The `Basic Viewer` mode is available for all studies by default. Click on the +mode button to launch the viewer. ![user-open-viewer](../assets/img/user-open-viewer.png) diff --git a/platform/docs/docs/userManuals/viewer/Language.md b/platform/docs/docs/user-guide/viewer/Language.md similarity index 100% rename from platform/docs/docs/userManuals/viewer/Language.md rename to platform/docs/docs/user-guide/viewer/Language.md diff --git a/platform/docs/docs/userManuals/viewer/_category_.json b/platform/docs/docs/user-guide/viewer/_category_.json similarity index 100% rename from platform/docs/docs/userManuals/viewer/_category_.json rename to platform/docs/docs/user-guide/viewer/_category_.json diff --git a/platform/docs/docs/userManuals/viewer/hotkeys.md b/platform/docs/docs/user-guide/viewer/hotkeys.md similarity index 100% rename from platform/docs/docs/userManuals/viewer/hotkeys.md rename to platform/docs/docs/user-guide/viewer/hotkeys.md diff --git a/platform/docs/docs/userManuals/viewer/index.md b/platform/docs/docs/user-guide/viewer/index.md similarity index 100% rename from platform/docs/docs/userManuals/viewer/index.md rename to platform/docs/docs/user-guide/viewer/index.md diff --git a/platform/docs/docs/userManuals/viewer/measurement-panel.md b/platform/docs/docs/user-guide/viewer/measurement-panel.md similarity index 100% rename from platform/docs/docs/userManuals/viewer/measurement-panel.md rename to platform/docs/docs/user-guide/viewer/measurement-panel.md diff --git a/platform/docs/docs/userManuals/viewer/measurement-tracking.md b/platform/docs/docs/user-guide/viewer/measurement-tracking.md similarity index 100% rename from platform/docs/docs/userManuals/viewer/measurement-tracking.md rename to platform/docs/docs/user-guide/viewer/measurement-tracking.md diff --git a/platform/docs/docs/userManuals/viewer/study-panel.md b/platform/docs/docs/user-guide/viewer/study-panel.md similarity index 100% rename from platform/docs/docs/userManuals/viewer/study-panel.md rename to platform/docs/docs/user-guide/viewer/study-panel.md diff --git a/platform/docs/docs/userManuals/viewer/toolbar.md b/platform/docs/docs/user-guide/viewer/toolbar.md similarity index 100% rename from platform/docs/docs/userManuals/viewer/toolbar.md rename to platform/docs/docs/user-guide/viewer/toolbar.md diff --git a/platform/docs/docs/userManuals/viewer/viewport.md b/platform/docs/docs/user-guide/viewer/viewport.md similarity index 100% rename from platform/docs/docs/userManuals/viewer/viewport.md rename to platform/docs/docs/user-guide/viewer/viewport.md diff --git a/platform/docs/docs/userManuals/_category_.json b/platform/docs/docs/userManuals/_category_.json deleted file mode 100644 index ef8e9dca2..000000000 --- a/platform/docs/docs/userManuals/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "User Guides", - "position": 3 -} diff --git a/platform/docs/docs/viewer/_category_.json b/platform/docs/docs/viewer/_category_.json deleted file mode 100644 index ddb1ecfb7..000000000 --- a/platform/docs/docs/viewer/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Viewer", - "position": 8 -} diff --git a/platform/docs/docusaurus.config.js b/platform/docs/docusaurus.config.js index d88394b17..cbc79e3ef 100644 --- a/platform/docs/docusaurus.config.js +++ b/platform/docs/docusaurus.config.js @@ -337,8 +337,7 @@ const isI18nStaging = process.env.I18N_STAGING === 'true'; position: 'right', dropdownItemsAfter: [ { - to: - 'next/viewer/internationalization#contributing-with-new-languages', + to: 'next/viewer/internationalization', label: 'Help Us Translate', }, ], @@ -355,7 +354,7 @@ const isI18nStaging = process.env.I18N_STAGING === 'true'; style: 'dark', links: [ { - title: 'Open Health Imaging Foundation', + title: ' ', items: [ { html: ` diff --git a/platform/docs/pluginOHIFWebpackConfig.js b/platform/docs/pluginOHIFWebpackConfig.js index ef8138917..e1ec7ae4c 100644 --- a/platform/docs/pluginOHIFWebpackConfig.js +++ b/platform/docs/pluginOHIFWebpackConfig.js @@ -21,7 +21,7 @@ module.exports = function(context, options) { }, }; }, - configurePostCss(postcssOptions) { + /*configurePostCss(postcssOptions) { postcssOptions.plugins.push( require('postcss-import'), require('tailwindcss'), @@ -33,6 +33,6 @@ module.exports = function(context, options) { }) ); return postcssOptions; - }, + },*/ }; }; diff --git a/platform/docs/tailwind.config.js b/platform/docs/tailwind.config.js index 77dd9325e..6c4d20d6a 100644 --- a/platform/docs/tailwind.config.js +++ b/platform/docs/tailwind.config.js @@ -2,6 +2,7 @@ module.exports = { prefix: '', important: false, separator: ':', + purge: false, //purge: ['./docs/**/*.jsx', './docs/**/*.mdx'], theme: { screens: { diff --git a/platform/docs/versioned_docs/version-1.0/faq/general.md b/platform/docs/versioned_docs/version-1.0/faq/general.md index 129a01abc..4ce911fd6 100644 --- a/platform/docs/versioned_docs/version-1.0/faq/general.md +++ b/platform/docs/versioned_docs/version-1.0/faq/general.md @@ -41,7 +41,7 @@ to communicate this to the community. If your requested feature is on the roadmap, then it will most likely be built at some point. If it is not, you are welcome to build it yourself and [contribute it](../contributing.md). If you have resources and would like to fund the development of a feature, please -[contact us](http://www.ohif.org). +[contact us](https://www.ohif.org). ### Who should I contact about Academic Collaborations? diff --git a/platform/docs/versioned_docs/version-2.0/README.md b/platform/docs/versioned_docs/version-2.0/README.md index 9cb513ec2..14e4553fa 100644 --- a/platform/docs/versioned_docs/version-2.0/README.md +++ b/platform/docs/versioned_docs/version-2.0/README.md @@ -4,7 +4,6 @@ slug: / sidebar_position: 1 --- -
@@ -34,7 +32,6 @@ sidebar_position: 1 --> - > ATTENTION! You are looking at the docs for the `React` version of the OHIF > Viewer. If you're looking for the `Meteor` version's documentation (now > deprecated), select it's version from the dropdown box in the top right corner @@ -71,7 +68,7 @@ Check out these helpful links: --> -[ohif-org]: http://www.ohif.org +[ohif-org]: https://www.ohif.org [dicom-web]: https://en.wikipedia.org/wiki/DICOMweb [gh-issues]: https://github.com/OHIF/Viewers/issues diff --git a/platform/docs/versioned_docs/version-2.0/extensions/lifecycle/pre-registration.md b/platform/docs/versioned_docs/version-2.0/extensions/lifecycle/pre-registration.md index cf2016779..72e2881e6 100644 --- a/platform/docs/versioned_docs/version-2.0/extensions/lifecycle/pre-registration.md +++ b/platform/docs/versioned_docs/version-2.0/extensions/lifecycle/pre-registration.md @@ -2,7 +2,8 @@ sidebar_position: 1 sidebar_label: Pre Registration --- -# Lifecylce Hook: preRegistration + +# Lifecycle Hook: preRegistration If an extension defines the `preRegistration` lifecycle hook, it is called before any modules are registered in the `ExtensionManager`. This hook can be diff --git a/platform/docs/versioned_docs/version-2.0/faq/index.md b/platform/docs/versioned_docs/version-2.0/faq/index.md index c75a50028..d08f4fe7f 100644 --- a/platform/docs/versioned_docs/version-2.0/faq/index.md +++ b/platform/docs/versioned_docs/version-2.0/faq/index.md @@ -1,9 +1,7 @@ --- sidebar_position: 1 sidebar_label: Overview - ---- -# Frequently Asked Questions +---# Frequently Asked Questions ## Index @@ -26,7 +24,7 @@ to communicate this to the community. If your requested feature is on the roadmap, then it will most likely be built at some point. If it is not, you are welcome to build it yourself and [contribute it](development/contributing.md). If you have resources and would like to fund the development of a feature, -please [contact us](http://www.ohif.org) or work with community members that +please [contact us](https://www.ohif.org) or work with community members that offer [consulting services][commercial-support]. ### Who should I contact about Academic Collaborations? diff --git a/platform/docs/versioned_docs/version-2.0/viewer/configuration.md b/platform/docs/versioned_docs/version-2.0/viewer/configuration.md index ce8a9b0c7..443e9c477 100644 --- a/platform/docs/versioned_docs/version-2.0/viewer/configuration.md +++ b/platform/docs/versioned_docs/version-2.0/viewer/configuration.md @@ -2,16 +2,15 @@ sidebar_position: 1 sidebar_label: Configuration --- + # Viewer: Configuration -The OHIF Viewing Platform strives to be highly configurable and extensible. This +The OHIF Viewer Platform strives to be highly configurable and extensible. This makes it easier for our community members to keep their "secret sauce" private, and incentivises contributions back to the platform. The `@ohif/viewer` project of the platform is the lynchpin that combines everything to create our application. - - We maintain a number of common viewer application configurations at [`/platform/viewer/public/configs`][config-dir]. How these values are passed to the viewer depend on how it's deployed, but the two most common paths diff --git a/platform/ui/src/components/Icon/getIcon.jsx b/platform/ui/src/components/Icon/getIcon.js similarity index 100% rename from platform/ui/src/components/Icon/getIcon.jsx rename to platform/ui/src/components/Icon/getIcon.js diff --git a/platform/ui/src/components/LayoutSelector/LayoutSelector.jsx b/platform/ui/src/components/LayoutSelector/LayoutSelector.jsx index 39815e452..54bb233d6 100644 --- a/platform/ui/src/components/LayoutSelector/LayoutSelector.jsx +++ b/platform/ui/src/components/LayoutSelector/LayoutSelector.jsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -export function LayoutSelector({ onSelection }) { +function LayoutSelector({ onSelection }) { const [hoveredIndex, setHoveredIndex] = useState(); const hoverX = hoveredIndex % 3; const hoverY = Math.floor(hoveredIndex / 3); diff --git a/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.jsx b/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.jsx index 670712f60..fdc185436 100644 --- a/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.jsx +++ b/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.jsx @@ -34,7 +34,7 @@ const FILE_TYPE_OPTIONS = [ const DEFAULT_FILENAME = 'image'; const REFRESH_VIEWPORT_TIMEOUT = 1000; -export const ViewportDownloadForm = ({ +const ViewportDownloadForm = ({ activeViewport, onClose, updateViewportPreview, diff --git a/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx b/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx index 75778bd71..b638846d7 100644 --- a/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx +++ b/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -export function ViewportGrid({ numRows, numCols, children }) { +function ViewportGrid({ numRows, numCols, children }) { const rowSize = 100 / numRows; const colSize = 100 / numCols; diff --git a/platform/ui/src/components/ViewportPane/ViewportPane.jsx b/platform/ui/src/components/ViewportPane/ViewportPane.jsx index 06cd474c5..dfeaf00ee 100644 --- a/platform/ui/src/components/ViewportPane/ViewportPane.jsx +++ b/platform/ui/src/components/ViewportPane/ViewportPane.jsx @@ -6,7 +6,7 @@ import { useDrop } from 'react-dnd'; // NOTE: If we found a way to make `useDrop` conditional, // Or we provided a HOC of this component, we could provide // this UI without the DragAndDropContext dependency. -export function ViewportPane({ +function ViewportPane({ children, className, isActive, diff --git a/platform/viewer/README.md b/platform/viewer/README.md index e47a9f9ab..b182470c1 100644 --- a/platform/viewer/README.md +++ b/platform/viewer/README.md @@ -2,7 +2,7 @@

@ohif/viewer

-

@ohif/viewer is a zero-footprint medical image viewer provided by the Open Health Imaging Foundation (OHIF). It is a configurable and extensible progressive web application with out-of-the-box support for image archives which support DICOMweb.

+

@ohif/viewer is a zero-footprint medical image viewer provided by the Open Health Imaging Foundation (OHIF). It is a configurable and extensible progressive web application with out-of-the-box support for image archives which support DICOMweb.