From 5acb30d7f0f467b27e8b6f5aed7ea43f463dc050 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Fri, 10 May 2019 09:51:41 -0400 Subject: [PATCH] Auto-format --- docs/latest/advanced/architecture.md | 73 ++++++++++++++++++++-------- 1 file changed, 54 insertions(+), 19 deletions(-) diff --git a/docs/latest/advanced/architecture.md b/docs/latest/advanced/architecture.md index e91372c4b..0d7e6007d 100644 --- a/docs/latest/advanced/architecture.md +++ b/docs/latest/advanced/architecture.md @@ -1,17 +1,35 @@ # Architecture -Looking to extend your instance of the OHIF Viewer? Want learn how to reuse _a portion_ of the Viewer in your own application? Or maybe you want to get involved and draft or suggest a new feature? Regardless, you're in the right place! +Looking to extend your instance of the OHIF Viewer? Want learn how to reuse _a +portion_ of the Viewer in your own application? Or maybe you want to get +involved and draft or suggest a new feature? Regardless, you're in the right +place! -The OHIF Viewer aims to be decoupled, configurable, and extensible; while this allows our code to be used in more ways, it also increases complexity. Below, we aim to demistify that complexity by providing insight into how our Viewer is architected, and the role each of it's dependent libraries plays. +The OHIF Viewer aims to be decoupled, configurable, and extensible; while this +allows our code to be used in more ways, it also increases complexity. Below, we +aim to demistify that complexity by providing insight into how our Viewer is +architected, and the role each of it's dependent libraries plays. ## Overview -The [`OHIF/Viewers`](https://github.com/OHIF/Viewers/tree/react) repository contains the source code for the OHIF Medical Imaging Viewer. It is effectively a React [progressive web app](https://developers.google.com/web/progressive-web-apps/) (PWA) that combines the business logic housed in [`OHIF/ohif-core`](https://github.com/OHIF/ohif-core) and the components in our React Component library [`OHIF/react-viewerbase`](https://github.com/OHIF/react-viewerbase). It provides customization for common use cases through [configuration](../essentials/configuration.md) and for adding functionality via [extensions](./extensions.md). - +The [`OHIF/Viewers`](https://github.com/OHIF/Viewers/tree/react) repository +contains the source code for the OHIF Medical Imaging Viewer. It is effectively +a React +[progressive web app](https://developers.google.com/web/progressive-web-apps/) +(PWA) that combines the business logic housed in +[`OHIF/ohif-core`](https://github.com/OHIF/ohif-core) and the components in our +React Component library +[`OHIF/react-viewerbase`](https://github.com/OHIF/react-viewerbase). It provides +customization for common use cases through +[configuration](../essentials/configuration.md) and for adding functionality via +[extensions](./extensions.md). ### 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: +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: - Hotkeys - DICOM Web @@ -22,33 +40,46 @@ Our goal is to maintain the majority of our business logic in [`OHIF/ohif-core`] - [And many others](https://github.com/OHIF/ohif-core/blob/master/src/index.js#L49-L69) 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 Vue, React, Vanilla JS, or any number of other frameworks. - +rendering logic. While we use it to power our React Viewer, it can be used with +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/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. [Check out our component library!](https://react.ohif.org/) - ### Misc. Extensions -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, [check out this helpful table](./extensions.html#ohif-maintained-extensions). +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, +[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 accomplish it with an extension today, create a GitHub issue! We're actively looking for ways to improve our extensibility ^_^ +If you find yourself thinking "I wish the Viewer could do X", and you can't +accomplish it with an extension today, create a GitHub issue! We're actively +looking for ways to improve our extensibility ^\_^ [Click here to read more about extensions!](./extensions.md) ### Diagram -This diagram is a conceptual illustration of how the Viewer is architected. +This diagram is a conceptual illustration of how the Viewer is architected. -0. (optional) `extensions` can be registered with `ohif-core`'s extension manager -1. `ohif-core` provides bussiness logic and a way for `viewer` to access registered extensions -2. The `viewer` composes and provides data to components from our component library (`react-viewerbase`) -3. 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)) +0. (optional) `extensions` can be registered with `ohif-core`'s extension + manager +1. `ohif-core` provides bussiness logic and a way for `viewer` to access + registered extensions +1. The `viewer` composes and provides data to components from our component + library (`react-viewerbase`) +1. 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)) ![Architecture Diagram](../assets/img/architecture-diagram.png) @@ -56,10 +87,14 @@ 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. \ No newline at end of file +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.