From 3498037163e5e9d356191e48d5ecde1ba3d57210 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Wed, 4 Sep 2019 21:54:29 -0400 Subject: [PATCH 1/6] docs(readme): npm links and package descriptions --- README.md | 35 ++++++++++++++++++++++------------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 3d4fa0d50..94904f52e 100644 --- a/README.md +++ b/README.md @@ -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 From f38605f04c34217b9965af8855d70ab7975dc8d3 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Wed, 4 Sep 2019 22:08:03 -0400 Subject: [PATCH 2/6] docs(readme): More approachable section title --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 94904f52e..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 From 7c5b182130665da4f331fd2350391487aa7a95a7 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Wed, 4 Sep 2019 22:08:52 -0400 Subject: [PATCH 3/6] docs(about): Deploy preview --> Live Demo --- docs/latest/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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: From d1289540bdf10e1f89eb52745bb81505e5110d94 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Wed, 4 Sep 2019 22:22:55 -0400 Subject: [PATCH 4/6] docs(getting-started): build commands, repo links, next steps --- docs/latest/essentials/getting-started.md | 30 +++++++++++------------ 1 file changed, 15 insertions(+), 15 deletions(-) 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 From 080183c712f5ed7c5b04fc72231212706b8ad551 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Thu, 5 Sep 2019 07:11:35 -0400 Subject: [PATCH 5/6] docs(installation): build commands, no more roll-up, webpack and PWAs --- docs/latest/essentials/installation.md | 52 ++++++++++++++++---------- 1 file changed, 33 insertions(+), 19 deletions(-) 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 `