diff --git a/.babelrc b/.babelrc index 8ba54ff81..f94e2d8a1 100644 --- a/.babelrc +++ b/.babelrc @@ -12,6 +12,7 @@ ], "plugins": [ "@babel/plugin-proposal-class-properties", + "@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-regenerator", "@babel/plugin-transform-runtime" ] diff --git a/.circleci/config.yml b/.circleci/config.yml index 7a949aa47..6bd6848a5 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -37,7 +37,7 @@ jobs: key: yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }} # Build & Test - - run: yarn build + - run: yarn build:package:ci # https://www.viget.com/articles/using-junit-on-circleci-2-0-with-jest-and-eslint/ - run: name: 'JavaScript Test Suite' diff --git a/.env.development b/.env.development new file mode 100644 index 000000000..062b97107 --- /dev/null +++ b/.env.development @@ -0,0 +1,14 @@ +## +# DEVELOPMENT: Default +# +# We're using this to set variables for our local development. +# Please feel free to delete or modify this file for your own setup. +# Be careful not to commit anything sensitive to source control. +# + +PUBLIC_URL=/ + +# +# Most vars require REACT_APP_* naming +# +REACT_APP_CONFIG=config/default.js diff --git a/.env.production b/.env.production new file mode 100644 index 000000000..464ee6dc5 --- /dev/null +++ b/.env.production @@ -0,0 +1,14 @@ +## +# PRODUCTION: Netlify +# +# We're using this to set variables for our Netlify deploy. +# Please feel free to delete or modify this file for your own production +# environment. Be careful not to commit anything sensitive to source control. +# + +PUBLIC_URL=/demo + +# +# Most vars require REACT_APP_* naming +# +REACT_APP_CONFIG=config/netlify.js diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 3c534e0f7..1f1409c5d 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -2,6 +2,7 @@ "recommendations": [ "esbenp.prettier-vscode", "sysoev.language-stylus", - "dbaeumer.vscode-eslint" + "dbaeumer.vscode-eslint", + "mikestead.dotenv" ] } diff --git a/docs/latest/I-want-to/script-tag.md b/docs/latest/I-want-to/script-tag.md deleted file mode 100644 index 0f152fef8..000000000 --- a/docs/latest/I-want-to/script-tag.md +++ /dev/null @@ -1,9 +0,0 @@ -# Embed the viewer using a script tag - - - -## Important notes: - -- You must correctly specify `rootUrl` **and** the HTML `` tag. -- If your application runs in a subdirectory (e.g. /viewer/), this must be specified in `routerBasename` -- Currently, the WADO Image Loader Codecs and Web Worker source code must also be server at the ROOT URL diff --git a/docs/latest/SUMMARY.md b/docs/latest/SUMMARY.md index 9dc674294..54581e9e8 100644 --- a/docs/latest/SUMMARY.md +++ b/docs/latest/SUMMARY.md @@ -3,12 +3,13 @@ - Essentials - [Getting Started](essentials/getting-started.md) - [Configuration](essentials/configuration.md) + - [Themeing](essentials/themeing.md) - [Troubleshooting](essentials/troubleshooting.md) -- [Architecture](architecture/index.md) - - Overview -- Deployment +- [Architecture](essentials/architecture.md) +- [Deployment](essentials/deployment.md) --- + - [Advanced](advanced/index.md) - [Architecture](advanced/architecture.md) - [Overview](advanced/architecture.md#overview) @@ -17,23 +18,34 @@ - [Extensions](advanced/architecture.md#misc-extensions) - [Diagram](advanced/architecture.md#diagram) - [Common Questions](advanced/architecture.md#common-questions) +- [Data](advanced/data.md) + - [Hierarchy](advanced/data.md#hierarchy) + - [Display Sets](advanced/data.md#display-sets) + - [Measurements & Annotations](advanced/data.md#measurements-and-annotations) - [Extensions](advanced/extensions.md) - [Overview](advanced/extensions.md#overview) - [Modules](advanced/extensions.md#modules) - [Registering](advanced/extensions.md#registering-extensions) - [OHIF Maintained](advanced/extensions.md#ohif-maintained-extensions) +- [Custom Tools](advanced/custom-tools.md) -- Connecting to Image Archives - - [DICOM Web](connecting-to-image-archives/dicomweb.md) +--- ----- -- I Want To - - [Embed the viewer using a script tag](I-want-to/script-tag.md) +- [Deployment](deployment/index.md) + - [Embedded](deployment/index.md#embedded-viewer) + - [Stand-alone](deployment/index.md#stand-alone-viewer) + - [Data]() +- Recipes + - [Embedding the Viewer](deployment/recipes/embedded-viewer.md)) + - [PWA: Static]() + - [PWA: Docker]() + - [PWA: Nginx + Orthanc]() + - [PWA: Nginx + dcm4chee]() + - [PWA: Nginx + DICOMCloud]() + - [PWA: User Access Control]() +--- ----- -- FAQ - - [General](faq/general.md) - ----- - [Contributing](contributing.md) +- [FAQ](frequently-asked-questions.md) +- [Help](help.md) diff --git a/docs/latest/data/tool-management.md b/docs/latest/advanced/custom-tools.md similarity index 100% rename from docs/latest/data/tool-management.md rename to docs/latest/advanced/custom-tools.md diff --git a/docs/latest/advanced/data.md b/docs/latest/advanced/data.md new file mode 100644 index 000000000..0279df004 --- /dev/null +++ b/docs/latest/advanced/data.md @@ -0,0 +1,9 @@ +# Data + +## Hierarchy + +Studies, Series, Instances, Frames + +## Display Sets + +## Measurements and Annotation diff --git a/docs/latest/assets/img/embedded-viewer-diagram.png b/docs/latest/assets/img/embedded-viewer-diagram.png new file mode 100644 index 000000000..426cb7ab8 Binary files /dev/null and b/docs/latest/assets/img/embedded-viewer-diagram.png differ diff --git a/docs/latest/connecting-to-image-archives/dicomweb.md b/docs/latest/connecting-to-image-archives/dicomweb.md deleted file mode 100644 index 065f5b40f..000000000 --- a/docs/latest/connecting-to-image-archives/dicomweb.md +++ /dev/null @@ -1,6 +0,0 @@ -# Connecting to Image Archives - -# DICOM Web - -[DICOMWeb](https://en.wikipedia.org/wiki/DICOMweb) refers to RESTful DICOM Services and is a recently standardized set of guidelines for exchanging medical images and imaging metadata over the internet. Not all archives fully support it yet, but it is gaining wider adoption. - diff --git a/docs/latest/contributing.md b/docs/latest/contributing.md index 02509c0f4..122a310ac 100644 --- a/docs/latest/contributing.md +++ b/docs/latest/contributing.md @@ -1,32 +1,58 @@ # Contributing -### I would like to contribute code - how do I do this? +## I would like to contribute code - how do I do this? Fork the repository, make your change and submit a pull request. -### Any guidance on submitting changes? +## Any guidance on submitting changes? -While we do appreciate code contributions, triaging and integrating contributed code changes can be very time consuming. Please consider the following tips when working on your pull requests: +While we do appreciate code contributions, triaging and integrating contributed +code changes can be very time consuming. Please consider the following tips when +working on your pull requests: -- Functionality is appropriate for the repository. Consider posting on the forum if you are not sure. -- Code quality is acceptable. We don't have coding standards defined, but make sure it passes ESLint and looks like the rest of the code in the repository. -- Quality of design is acceptable. This is a bit subjective so you should consider posting on the forum for specific guidance. -- The scope of the pull request is not too large. Please consider separate pull requests for each feature as big pull requests are very time consuming to understand. +- Functionality is appropriate for the repository. Consider posting on the forum + if you are not sure. +- Code quality is acceptable. We don't have coding standards defined, but make + sure it passes ESLint and looks like the rest of the code in the repository. +- Quality of design is acceptable. This is a bit subjective so you should + consider posting on the forum for specific guidance. +- The scope of the pull request is not too large. Please consider separate pull + requests for each feature as big pull requests are very time consuming to + understand. -We will provide feedback on your pull requests as soon as possible. Following the tips above will help ensure your changes are reviewed. +We will provide feedback on your pull requests as soon as possible. Following +the tips above will help ensure your changes are reviewed. -### Testing contribution pull requests +## Testing contribution pull requests -OHIF uses [netlify](netlify.com) so that pull requests are autogenerated and available for testing. +OHIF uses [netlify](netlify.com) so that pull requests are autogenerated and +available for testing. -For example, [this url](https://deploy-preview-237--ohif.netlify.com/viewer/?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/sampleDICOM.json) allows you to test [pull request 237, the request that created this FAQ entry,](https://github.com/OHIF/Viewers/pull/237) using data pulled from Amazon S3. +For example, [this url][example-url] allows you to test [pull request 237, the +request that created this FAQ entry,][pr-237] using data pulled from Amazon S3. + +Replacing the number 237 in the link below with your pull request number should +let you test it as well and you can use this link for discussions on github +without requiring reviewers to download and build your branch. -Replacing the number 237 in the link below with your pull request number should let you test it as well and you can use this link for discussions on github without requiring reviewers to download and build your branch. ``` https://deploy-preview-237--ohif.netlify.com/viewer/?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/sampleDICOM.json ``` -If you have made a documentation change, a link like this will let you preview the gitbook generated by the pull request: +If you have made a documentation change, a link like this will let you preview +the gitbook generated by the pull request: + ``` https://deploy-preview-237--ohif.netlify.com/contributing.html ``` + + + + + +[example-url]: https://deploy-preview-237--ohif.netlify.com/viewer/?url=https://s3.eu-central-1.amazonaws.com/ohif-viewer/sampleDICOM.json +[pr-237]: https://github.com/OHIF/Viewers/pull/237 + + diff --git a/docs/latest/data/data-hierarchy.md b/docs/latest/data/data-hierarchy.md deleted file mode 100644 index ceaee45b9..000000000 --- a/docs/latest/data/data-hierarchy.md +++ /dev/null @@ -1,5 +0,0 @@ -# Data Hierarchy - -## Studies, Series, Instances, Frames - -## Display Sets diff --git a/docs/latest/data/image-viewport.md b/docs/latest/data/image-viewport.md deleted file mode 100644 index 9d480566c..000000000 --- a/docs/latest/data/image-viewport.md +++ /dev/null @@ -1,5 +0,0 @@ -# Image Viewport - -### Main Viewport Component - -The [imageViewerViewport](https://github.com/OHIF/Viewers/tree/master/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport) component diff --git a/docs/latest/data/measurements-and-annotations.md b/docs/latest/data/measurements-and-annotations.md deleted file mode 100644 index 574f11845..000000000 --- a/docs/latest/data/measurements-and-annotations.md +++ /dev/null @@ -1 +0,0 @@ -# Measurements and Annotations diff --git a/docs/latest/deployment/_embedded-viewer-diagram.md b/docs/latest/deployment/_embedded-viewer-diagram.md new file mode 100644 index 000000000..6af9e0a30 --- /dev/null +++ b/docs/latest/deployment/_embedded-viewer-diagram.md @@ -0,0 +1,4 @@ +
+ Embedded Viewer Diagram +
embedded viewer diagram
+
diff --git a/docs/latest/deployment/building-for-production.md b/docs/latest/deployment/building-for-production.md deleted file mode 100644 index 2f12e0fe7..000000000 --- a/docs/latest/deployment/building-for-production.md +++ /dev/null @@ -1,5 +0,0 @@ -# Deployment - -There are a few possible approaches for deploying the application: - -- diff --git a/docs/latest/deployment/index.md b/docs/latest/deployment/index.md new file mode 100644 index 000000000..e6fa67155 --- /dev/null +++ b/docs/latest/deployment/index.md @@ -0,0 +1,119 @@ +# 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). + +## Overview + +Our goal is to make deployment as simple and painless as possible; however, +there is an inherent amount of complexity in customizing, optimizing, and +deploying web applications. If you find yourself a little lost, please don't +hesitate to [reach out for help](/help.md) + +## Deployment Scenarios + +### Embedded Viewer + +The quickest and easiest way to get the OHIF Viewer up and running is to embed +it into an existing web application. It allows us to forego a "build step", and +add a powerful medical imaging viewer to an existing web page using only a few +include tags. + +- Read more about it here: [Embedded Viewer](./recipes/embedded-viewer.md) +- And check out our + [live demo on CodeSandbox](https://codesandbox.io/s/lrjoo3znxm) + +{% include "./_embedded-viewer-diagram.md" %} + +### Stand-alone Viewer + +Deploying the OHIF Viewer as a stand-alone web application provides many +benefits, but comes at the cost of time and complexity. Some benefits include: + +_Today:_ + +- Leverage [extensions](/advanced/extensions.md) to drop-in powerful new + features +- Add routes and customize the viewer's workflow +- Finer control over styling and whitelabeling + +_In the future:_ + +- The ability to package the viewer for [App Store distribution][app-store] +- Leverage `service-workers` for offline support and speed benefits from caching + +#### Hosted Static Assets + +_blocking:_ Generate files from `npm script` that we can host. IE. production +ready build output + +- AWS S3 + Cloudfront +- GCP + Cloudflare +- Azure +- Netlify (can use private repo) +- Github pages + +Note: Include SSL instructions. + +... + +#### Docker + +- Why Docker? + - Ship your environment + - "It works on my machine" + +_Ship Archive w/ Client:_ todo + +... + +## Data + +The OHIF Viewer is able to connect to any data source that implements the [DICOM +Web Standard][dicom-web-standard]. [DICOM Web][dicom-web] refers to RESTful +DICOM Services -- a recently standardized set of guidelines for exchanging +medical images and imaging metadata over the internet. Not all archives fully +support it yet, but it is gaining wider adoption. + +### Configure Connection + +... + +### What if I don't have an imaging archive? + +... + +#### Making sure your archive is accessible + +- CORS +- Proxy (dangers) +- Note: PACS not meant to be directly accesible from Web + +#### Securing your data + +- Reach out to experts +- Recipes + +### What if my archive doesn't support DICOM Web? + +- Mapping layer +- GraphQL? + + + + + +[ohif-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 +[dicom-web-standard]: https://www.dicomstandard.org/dicomweb/ +[dicom-web]: https://en.wikipedia.org/wiki/DICOMweb + + diff --git a/docs/latest/deployment/recipes/embedded-viewer.md b/docs/latest/deployment/recipes/embedded-viewer.md new file mode 100644 index 000000000..3e7427f5c --- /dev/null +++ b/docs/latest/deployment/recipes/embedded-viewer.md @@ -0,0 +1,109 @@ +# Embedded Viewer + +The quickest and easiest way to get the OHIF Viewer up and running is to embed +it into an existing web application. It allows us to forego a "build step", and +add a powerful medical imaging viewer to an existing web page using only a few +include tags. Here's how it works: + +{% include "./../_embedded-viewer-diagram.md" %} + +1. Create a new web page or template that includes the following external + dependencies: + + + +
    +
  1. the HTML base tag
    2. +
  2. The WADO Image Loader Codecs and Web Worker source code + should be accessible from your server's root
    3. +
  3. 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:
    4. +
+ +```js +var props = { + // Directory your application runs in (e.g. /viewer/) + routerBasename: '/', + rootUrl: 'https://lrjoo3znxm.codesandbox.io', + servers: { + dicomWeb: [ + { + name: 'DCM4CHEE', + wadoUriRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado', + qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs', + wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs', + qidoSupportsIncludeField: true, + imageRendering: 'wadors', + thumbnailRendering: 'wadors', + requestOptions: { + requestFromBrowser: true, + }, + }, + ], + }, +} +``` + +
  1. + Render the viewer in the web page's target div +
+ +```js +// Made available by the `ohif-viewer` script included in step 1 +var Viewer = window.OHIFStandaloneViewer.App +var app = React.createElement(Viewer, props, null) + +ReactDOM.render(app, document.getElementById('ohif-viewer-target')) +``` + +#### Tips & Tricks + +> I'm having trouble getting this to work. Where can I go for help? + +First, check out this fully functional +[CodeSandbox](https://codesandbox.io/s/lrjoo3znxm) 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? + +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 +[`