diff --git a/platform/viewer/.recipes/Nginx-Orthanc/config/nginx.conf b/.docker/Nginx-Orthanc/config/nginx.conf similarity index 100% rename from platform/viewer/.recipes/Nginx-Orthanc/config/nginx.conf rename to .docker/Nginx-Orthanc/config/nginx.conf diff --git a/platform/viewer/.recipes/Nginx-Orthanc/config/orthanc.json b/.docker/Nginx-Orthanc/config/orthanc.json similarity index 100% rename from platform/viewer/.recipes/Nginx-Orthanc/config/orthanc.json rename to .docker/Nginx-Orthanc/config/orthanc.json diff --git a/platform/viewer/.recipes/Nginx-Orthanc/docker-compose.yml b/.docker/Nginx-Orthanc/docker-compose.yml similarity index 100% rename from platform/viewer/.recipes/Nginx-Orthanc/docker-compose.yml rename to .docker/Nginx-Orthanc/docker-compose.yml diff --git a/platform/viewer/.recipes/Nginx-Orthanc/volumes/orthanc-db/.gitignore b/.docker/Nginx-Orthanc/volumes/orthanc-db/.gitignore similarity index 100% rename from platform/viewer/.recipes/Nginx-Orthanc/volumes/orthanc-db/.gitignore rename to .docker/Nginx-Orthanc/volumes/orthanc-db/.gitignore diff --git a/README.md b/README.md index 3d4fa0d50..2d839159d 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors) -## What? +## About The OHIF Medical Imaging Viewer is for viewing medical images. It can retrieve and load images from most sources and formats; render sets in 2D, 3D, and @@ -215,12 +215,12 @@ more about it in our [Architecture Documentation][ohif-architecture]. These projects comprise the -| Name | Description | Links | -| ------------------------------- | ----------- | ----- | -| [@ohif/core][platform-core] | | NPM | -| [@ohif/i18n][platform-i18n] | | NPM | -| [@ohif/viewer][platform-viewer] | | NPM | -| [@ohif/ui][platform-ui] | | NPM | +| Name | Description | Links | +| ------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------- | +| [@ohif/core][platform-core] | Business logic and classes that model the data, services, and extensions that are framework agnostic | [NPM][core-npm] | +| [@ohif/i18n][platform-i18n] | Language files and small API for wrapping component/ui text for translations | [NPM][i18n-npm] | +| [@ohif/viewer][platform-viewer] | The OHIF Viewer. Where we consume and configure all platform library's and extensions | [NPM][viewer-npm] | +| [@ohif/ui][platform-ui] | Reusable React components we consume and compose to build our Viewer's UI | [NPM][ui-npm] | ### Extensions @@ -228,13 +228,13 @@ This is a list of Extensions maintained by the OHIF Core team. It's possible to customize and configure these extensions, and you can even create your own. You can [read more about extensions here][ohif-extensions]. -| Name | Description | Links | -| -------------------------------------------------------------- | ----------- | ----- | -| [@ohif/extension-cornestone][extension-cornerstone] | | NPM | -| [@ohif/extension-dicom-html][extension-dicom-html] | | NPM | -| [@ohif/extension-dicom-microscopy][extension-dicom-microscopy] | | NPM | -| [@ohif/extension-dicom-pdf][extension-dicom-pdf] | | NPM | -| [@ohif/extension-vtk][extension-vtk] | | NPM | +| Name | Description | Links | +| -------------------------------------------------------------- | ------------------------------------------------------- | ---------------------- | +| [@ohif/extension-cornestone][extension-cornerstone] | 2D image viewing, annotation, and segementation tools | [NPM][cornerstone-npm] | +| [@ohif/extension-dicom-html][extension-dicom-html] | Support for viewing DICOM SR as rendered HTML | [NPM][html-npm] | +| [@ohif/extension-dicom-microscopy][extension-dicom-microscopy] | Whole slide microscopy viewing | [NPM][microscopy-npm] | +| [@ohif/extension-dicom-pdf][extension-dicom-pdf] | View DICOM wrapped PDFs in a viewport | [NPM][pdf-npm] | +| [@ohif/extension-vtk][extension-vtk] | Volume rendering, reconstruction, and 3D visualizations | [NPM][vtk-npm] | ## Acknowledgments @@ -304,13 +304,22 @@ MIT © [OHIF](https://github.com/OHIF) [extensions-url]: https://docs.ohif.org/advanced/extensions.html [platform-core]: platform/core/README.md +[core-npm]: https://www.npmjs.com/package/@ohif/core [platform-i18n]: platform/i18n/README.md +[i18n-npm]: https://www.npmjs.com/package/@ohif/i18n [platform-ui]: platform/ui/README.md +[ui-npm]: https://www.npmjs.com/package/@ohif/ui [platform-viewer]: platform/viewer/README.md +[viewer-npm]: https://www.npmjs.com/package/@ohif/viewer [extension-cornerstone]: extensions/cornerstone/README.md +[cornerstone-npm]: https://www.npmjs.com/package/@ohif/extension-cornerstone [extension-dicom-html]: extensions/dicom-html/README.md +[html-npm]: https://www.npmjs.com/package/@ohif/extension-dicom-html [extension-dicom-microscopy]: extensions/dicom-microscopy/README.md +[microscopy-npm]: https://www.npmjs.com/package/@ohif/extension-dicom-microscopy [extension-dicom-pdf]: extensions/dicom-pdf/README.md +[pdf-npm]: https://www.npmjs.com/package/@ohif/extension-dicom-pdf [extension-vtk]: extensions/vtk/README.md +[vtk-npm]: https://www.npmjs.com/package/@ohif/extension-vtk diff --git a/docs/latest/README.md b/docs/latest/README.md index efdc87de7..ff886ccb8 100644 --- a/docs/latest/README.md +++ b/docs/latest/README.md @@ -1,7 +1,7 @@
- Looking for a Deploy Preview? - Deploy Preview for Viewer + Looking for a Live Demo? + Preview The OHIF Viewer
@@ -33,7 +33,7 @@ yourself unable to extend the viewer for your purposes, please reach out via our [GitHub issues][gh-issues]. We are actively seeking feedback on ways to improve our integration and extension points. -## Where to Next? +## Where to next? Check out these helpful links: diff --git a/docs/latest/essentials/data-source.md b/docs/latest/essentials/data-source.md index 2c1b68b2b..372a42525 100644 --- a/docs/latest/essentials/data-source.md +++ b/docs/latest/essentials/data-source.md @@ -35,10 +35,10 @@ For our purposes, we will be using `Orthanc`, but you can see a list of _Not sure if you have `docker` installed already? Try running `docker --version` in command prompt or terminal_ -> If you are using `Docker Toolbox` you need to change the _proxy_ parameter in -> _package.json_ to http://192.168.99.100:8042 or the ip docker-machine ip -> throws. This is the value [`react-scripts`][react-proxy] uses to proxy -> requests +> If you are using `Docker Toolbox` you need to change the _PROXY_DOMAIN_ +> parameter in _platform/viewer/package.json_ to http://192.168.99.100:8042 or +> the ip docker-machine ip throws. This is the value [`WebPack`][webpack-proxy] +> uses to proxy requests ### Running Orthanc @@ -51,8 +51,9 @@ yarn run orthanc:up _Upload your first Study:_ -1. Navigate to [Orthanc's web interface](http://localhost:8899) at - `http://localhost:8899` in a web browser. +1. Navigate to + [Orthanc's web interface](http://localhost:8042/app/explorer.html) at + `http://localhost:8042/app/explorer.html` in a web browser. 2. In the top right corner, click "Upload" 3. Click "Select files to upload..." and select one or more DICOM files 4. Click "Start the upload" @@ -60,17 +61,20 @@ _Upload your first Study:_ #### Orthanc: Learn More You can see the `docker-compose.yml` file this command runs at -[`/platform/viewer/.recipes/Nginx-Orthanc/`](https://github.com/OHIF/Viewers/tree/master/platform/viewer/.recipes/Nginx-Orthanc), -and more on Orthanc for Docker in [Orthanc's documentation][orthanc-docker]. +[`/.docker/Nginx-Orthanc/`][orthanc-docker-compose], and more on +Orthanc for Docker in [Orthanc's documentation][orthanc-docker]. ### Connecting to Orthanc Now that we have a local Orthanc instance up and running, we need to configure our web application to connect to it. Open a new terminal window, navigate to -this project's root directory, and run: +this repository's root directory, and run: ```bash -# If you haven't already, restore dependencies +# If you haven't already, enable yarn workspaces +yarn config set workspaces-experimental true + +# Restore dependencies yarn install # Run our dev command, but with the local orthanc config @@ -87,18 +91,24 @@ is running the `dev:orthanc` script in our project's `package.json`. That script is: ```js -cross-env PORT=5000 APP_CONFIG=config/docker_nginx-orthanc.js react-scripts start +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 ``` -- `cross-env` sets two environment variables - - PORT: 5000 +- `cross-env` sets three environment variables + - PROXY_TARGET: `/dicom-web` + - PROXY_DOMAIN: `http://localhost:8042` - APP_CONFIG: `config/docker_nginx-orthanc.js` -- `react-scripts` runs it's `start` script. This is [the de-facto - way][cra-start] to run a "Create React App" in development mode. +- `webpack-dev-server` runs using the `.webpack/webpack.pwa.js` configuration + file. It will watch for changes and update as we develop. + +`PROXY_TARGET` and `PROXY_DOMAIN` tell our development server to proxy requests +to `Orthanc`. This allows us to bypass CORS issues that normally occur when +requesting resources that live at a different domain. The `APP_CONFIG` value tells our app which file to load on to `window.config`. -By default, our app uses the file at `/public/config/default.js`. -Here is what that configuration looks like: +By default, our app uses the file at +`/platform/viewer/public/config/default.js`. Here is what that +configuration looks like: ```js window.config = { @@ -145,8 +155,8 @@ _Feel free to make a Pull Request if you want to add to this list._ [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 -[cra-start]: https://github.com/facebook/create-react-app#npm-start-or-yarn-start -[react-proxy]: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually +[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 diff --git a/docs/latest/essentials/getting-started.md b/docs/latest/essentials/getting-started.md index 6ade64f41..9c992d045 100644 --- a/docs/latest/essentials/getting-started.md +++ b/docs/latest/essentials/getting-started.md @@ -24,8 +24,7 @@ graphic that illustrates this setup][triangular-workflow]. Alternatively, if you intend to use the OHIF Viewer as a starting point, and you aren't as concerned with syncing updates, then follow these steps: -1. Navigate to the [OHIF/Viewers/tree/react][ohif-viewers-react-repo] repository - and branch +1. Navigate to the [OHIF/Viewers][ohif-viewers] repository 2. Click `Clone or download`, and then `Download ZIP` 3. Use the contents of the `.zip` file as a starting point for your viewer @@ -39,6 +38,8 @@ aren't as concerned with syncing updates, then follow these steps: - [Node.js & NPM](https://nodejs.org/en/) - [Yarn](https://yarnpkg.com/en/) +- Yarn workspaces should be enabled: + - `yarn config set workspaces-experimental true` ### Kick the tires @@ -50,21 +51,18 @@ following commands: yarn install # Start local development server -yarn start +yarn run dev ``` You should see the following output: ```bash -Compiled successfully! +@ohif/viewer: i ｢wds｣: Project is running at http://localhost:3000/ +@ohif/viewer: i ｢wds｣: webpack output is served from / +@ohif/viewer: i ｢wds｣: Content not from webpack is served from D:\code\ohif\Viewers\platform\viewer +@ohif/viewer: i ｢wds｣: 404s will fallback to /index.html -You can now view ohif-viewer in the browser. - - Local: http://localhost:3000/ - On Your Network: http://10.74.20.83:3000/ - -Note that the development build is not optimized. -To create a production build, use yarn build. +# And a list of all generated files ``` ### 🎉 Celebrate 🎉 @@ -81,15 +79,17 @@ To create a production build, use yarn build. ```bash # Build static assets to host a PWA -yarn run build:web +yarn run build -# Build packaged output +# Build packaged output (script-tag use) yarn run build:package ``` ## Next Steps -... +Take a look at the sidebar. Depending on how you intend to use The OHIF Viewer, +different topics may be more pertinent than others. At a minimum, reading "The +Essentials" and the deployment recipes should be a good starting point. ## Troubleshooting @@ -111,5 +111,5 @@ yarn run build:package [sync-changes]: https://help.github.com/en/articles/syncing-a-fork [triangular-workflow]: https://github.blog/2015-07-29-git-2-5-including-multiple-worktrees-and-triangular-workflows/#improved-support-for-triangular-workflows [ohif-viewers-repo]: https://github.com/OHIF/Viewers -[ohif-viewers-react-repo]: https://github.com/OHIF/Viewers/tree/react +[ohif-viewers]: https://github.com/OHIF/Viewers diff --git a/docs/latest/essentials/installation.md b/docs/latest/essentials/installation.md index 326b5f0d2..94807e931 100644 --- a/docs/latest/essentials/installation.md +++ b/docs/latest/essentials/installation.md @@ -5,38 +5,52 @@ processes: ```bash # Static Asset output: For deploying PWAs -yarn run build:web +yarn run build # Single `.js` script, for embedding viewer into existing apps yarn run build:package ``` -## create-react-app (PWA) +## Progressive Web Application (PWA) -> [create-react-app](https://github.com/facebook/create-react-app) provides -> pre-configured build process for developing front-end applications with -> [React](https://reactjs.org/). +> [Progressive Web Apps][pwa] are a new breed of web applications that meet the +> [following requirements][pwa-checklist]. Notably, targeting a PWA allows us +> provide a reliable, fast, and engaging experience across different devices and +> network conditions. -The ohif-viewer package can be run as a create-react-app application. This is -useful for development, debugging, or evolving the OHIF Viewer into your own -custom imaging application. +The OHIF Viewer is maintained as a [monorepo][monorepo]. We use WebPack to build +the many small static assets that comprise our application. Also generated is an +`index.html` that will serve as an entry point for loading configuration and the +application, as well as a `service-worker` that can intelligently cache files so +that subsequent requests are from the local file system instead of over the +network. You can read more about this particular strategy in our [Build for Production Deployment Guide](./../deployment/recipes/build-for-production.md) -## Rollup (Packaged Script) +## Commonjs Bundle (Packaged Script) -> [Rollup](https://rollupjs.org/guide/en) is a module bundler for JavaScript. It -> uses the new standardized format for code modules included in the ES6 revision -> of JavaScript. +The [@ohif/viewer][viewer-npm] package is built with WebPack to provide a React +component that can be dropped into a larger application. The `OHIFViewer` +component is the entire viewer, configurable via React `props`. This is useful +for including the OHIF Viewer in a larger web application, as the entire +application can be provided via a `