diff --git a/.webpack/webpack.commonjs.js b/.webpack/webpack.commonjs.js index e531b18de..2649da48c 100644 --- a/.webpack/webpack.commonjs.js +++ b/.webpack/webpack.commonjs.js @@ -1,3 +1,4 @@ +const merge = require('webpack-merge'); const webpackBase = require('./webpack.base.js'); const cssToJavaScriptRule = require('./rules/cssToJavaScript.js'); const stylusToJavaScriptRule = require('./rules/stylusToJavaScript.js'); diff --git a/docs/latest/advanced/architecture.md b/docs/latest/advanced/architecture.md index 20d992390..2c5288f93 100644 --- a/docs/latest/advanced/architecture.md +++ b/docs/latest/advanced/architecture.md @@ -12,28 +12,48 @@ architected, and the role each of it's dependent libraries plays. ## Overview -The [`OHIF/Viewers`][viewers-project] project contains the source code for the -OHIF Medical Imaging Viewer. It is effectively a React [progressive web -app][pwa] (PWA) that combines the business logic housed in -[`OHIF/ohif-core`][core] and the components in our React Component library -[`OHIF/react-viewerbase`][component-library]. It provides customization for -common use cases through [configuration][configuration] and for adding -functionality via [extensions][extensions]. +The [OHIF Medical Image Viewing Platform][viewers-project] is maintained as a +[`monorepo`][monorepo]. This means that this repository, instead of containing a +single project, contains many projects. If you explore our project structure, +you'll see the following: + +```bash +. +├── extensions +│ ├── _example # Skeleton of example extension +│ ├── cornerstone # 2D images w/ Cornerstone.js +│ ├── dicom-html # Structured Reports as HTML in viewport +│ ├── dicom-microscopy # Whole slide microscopy viewing +│ ├── dicom-pdf # View DICOM wrapped PDFs in viewport +│ └── vtk # MPR and Volume support w/ VTK.js +│ +├── platform +│ ├── core # Business Logic +│ ├── i18n # Internationalization Support +│ ├── ui # React component library +│ └── viewer # Connects platform and extension projects +│ +├── ... # misc. shared configuration +├── lerna.json # MonoRepo (Lerna) settings +├── package.json # Shared devDependencies and commands +└── README.md +``` + +Continue reading to see how these libraries work together to create the OHIF +Viewer. ### Business Logic -Our goal is to maintain the majority of our business logic in -[`OHIF/ohif-core`](https://github.com/OHIF/ohif-core). `ohif-core` offers -pre-packaged solutions for features common to Web-based medical imaging viewers. -For example: +The [`@ohif/core`][core-github] project offers pre-packaged solutions for +features common to Web-based medical imaging viewers. For example: - Hotkeys -- DICOM Web +- DICOM Web requests - Hanging Protocols - Managing a study's measurements - Managing a study's DICOM metadata - A flexible pattern for extensions -- [And many others](https://github.com/OHIF/ohif-core/blob/master/src/index.js#L49-L69) +- And many others It does this while remaining decoupled from any particular view library or rendering logic. While we use it to power our React Viewer, it can be used with @@ -41,20 +61,42 @@ Vue, React, Vanilla JS, or any number of other frameworks. ### React Component Library -[`OHIF/react-viewerbase`](https://github.com/OHIF/react-viewerbase) is a React -Component library that contains the reusable components that power the OHIF -Viewer. It allows us to build, compose, and test components in isolation; easing -the development process by reducing the need to stand-up a local PACS with test -case data. +[`@ohif/ui`][ui-github] is a React Component library that contains the reusable +components that power the OHIF Viewer. It allows us to build, compose, and test +components in isolation; easing the development process by reducing the need to +stand-up a local PACS with test case data. + +Extension authors can also use these same components when building their +extension's UI; allowing for a consistent look and feel with the rest of the +application. [Check out our component library!](https://react.ohif.org/) -### Misc. Extensions +### Internationalization (i18n) -Want to add custom logic or UI Components to the OHIF Viewer, but don't want to -maintain a fork? We expose common integration points via -[extensions](./extensions.md) to make that possible. For a list of extensions -maintained by OHIF, +... + +### The Viewer + +... + +### Extensions & Configuration + +While OHIF maintains several high value and commonly requested features in its +own extensions, there are many instances where one may wish to further extend +the viewer. Some common use cases include: + +- Adding AI/ML tools and insights +- Custom workflows for guided diagnosis +- Collecting specific annotations for training data or reports +- Authentication and granular permissions +- Teleconsultation workflow, image comments, and tracking +- Adding surgical templating tools and reports +- and many others + +We expose common integration points via [extensions](./extensions.md) to make +this possible. The viewer and many of our own extensions also offer +[configuration][configuration]. For a list of extensions maintained by OHIF, [check out this helpful table](./extensions.html#ohif-maintained-extensions). If you find yourself thinking "I wish the Viewer could do X", and you can't @@ -67,15 +109,14 @@ looking for ways to improve our extensibility ^\_^ This diagram is a conceptual illustration of how the Viewer is architected. -1. (optional) `extensions` can be registered with `ohif-core`'s extension +1. (optional) `extensions` can be registered with `@ohif/core`'s extension manager -2. `ohif-core` provides bussiness logic and a way for `viewer` to access +2. `@ohif/core` provides bussiness logic and a way for `@ohif/viewer` to access registered extensions -3. The `viewer` composes and provides data to components from our component - library (`react-viewerbase`) -4. The `viewer` can be built and served as a stand-alone PWA, or as an - embeddable package - ([`ohif-viewer`](https://www.npmjs.com/package/ohif-viewer)) +3. The `@ohif/viewer` composes and provides data to components from our + component library (`@ohif/ui`) +4. The `@ohif/viewer` can be built and served as a stand-alone PWA, or as an + embeddable package ([`@ohif/viewer`][viewer-npm]) ![Architecture Diagram](../assets/img/architecture-diagram.png) @@ -83,17 +124,17 @@ This diagram is a conceptual illustration of how the Viewer is architected. ## Common Questions -> When should I use the packaged source `ohif-viewer` versus building a PWA from -> the source? +> When should I use the packaged source `@ohif/viewer` versus building a PWA +> from the source? ... > Can I create my own Viewer using Vue.js or Angular.js? You can, but you will not be able to leverage as much of the existing code and -components. `ohif-core` could still be used for business logic, and to provide a -model for extensions. `react-viewerbase` would then become a guide for the -components you would need to recreate. +components. `@ohif/core` could still be used for business logic, and to provide +a model for extensions. `@ohif/ui` would then become a guide for the components +you would need to recreate. [viewers-project]: https://github.com/OHIF/Viewers +[viewer-npm]: https://www.npmjs.com/package/@ohif/viewer [pwa]: https://developers.google.com/web/progressive-web-apps/ -[core]: https://github.com/OHIF/ohif-core -[component-library]: https://github.com/OHIF/react-viewerbase [configuration]: ../essentials/configuration.md -[extensions]: ./extensions.m +[extensions]: ./extensions.md +[core-github]: https://github.com/OHIF/viewers/platform/core +[ui-github]: https://github.com/OHIF/Viewers/platform/ui diff --git a/docs/latest/deployment/index.md b/docs/latest/deployment/index.md index 4df90267f..9682740ef 100644 --- a/docs/latest/deployment/index.md +++ b/docs/latest/deployment/index.md @@ -1,11 +1,11 @@ # Deployment The OHIF Viewer can be embedded in other web applications via it's [packaged -script source][ohif-viewer-npm], or served up as a stand-alone PWA ([progressive -web application][pwa-url]) by building and hosting a collection of static -assets. In either case, you will need to configure your instance of the Viewer -so that it can connect to your data source (the database or PACS that provides -the data your Viewer will display). +script source][viewer-npm], or served up as a stand-alone PWA ([progressive web +application][pwa-url]) by building and hosting a collection of static assets. In +either case, you will need to configure your instance of the Viewer so that it +can connect to your data source (the database or PACS that provides the data +your Viewer will display). ## Overview @@ -196,8 +196,7 @@ Please feel free to suggest or contribute your own recipes. --> - -[ohif-viewer-npm]: https://www.npmjs.com/package/ohif-viewer +[viewer-npm]: https://www.npmjs.com/package/@ohif/viewer [pwa-url]: https://developers.google.com/web/progressive-web-apps/ [static-assets-url]: https://www.maxcdn.com/one/visual-glossary/static-content/ [app-store]: https://medium.freecodecamp.org/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b diff --git a/docs/latest/deployment/recipes/embedded-viewer.md b/docs/latest/deployment/recipes/embedded-viewer.md index 04ae1fe04..384c22b78 100644 --- a/docs/latest/deployment/recipes/embedded-viewer.md +++ b/docs/latest/deployment/recipes/embedded-viewer.md @@ -12,13 +12,8 @@ include tags. Here's how it works:
    -
  1. The WADO Image Loader Codecs and Web Worker source code - should be accessible from your server's root
  2. Create a JS Object to hold the OHIF Viewer's configuration. Here are some example values that would allow the viewer to hit our public PACS:
@@ -74,7 +67,7 @@ window.config = { ```js -// Made available by the `ohif-viewer` script included in step 1 +// Made available by the `@ohif/viewer` script included in step 1 var Viewer = window.OHIFStandaloneViewer.App; var app = React.createElement(Viewer, window.config, null); @@ -89,16 +82,20 @@ First, check out this fully functional [CodeSandbox][code-sandbox] example. If you're still having trouble, feel free to search or GitHub issues. Can't find anything related your problem? Create a new one. -> When I include bootstrap, other styles on my page no longer work correctly. -> What can I do? +> My application's styles are impacting the OHIF Viewer's look and feel. What +> can I do? -When we include `bootsrap` (and the other dependencies), they are added -globally. This has the potential of causing conflicts with other scripts and -styles on the page. To prevent this, `embed` the viewer in a new/empty web page. -Have that working? Good. Now `embed` that new page using an +When you include stylesheets and scripts, they are added globally. This has the +potential of causing conflicts with other scripts and styles on the page. To +prevent this, `embed` the viewer in a new/empty web page. Have that working? +Good. Now `embed` that new page using an [`