TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Autoformat

Browse Source
This commit is contained in:
dannyrb 2019-04-25 15:31:01 -04:00
parent 357ad6af3c
commit 0d43c4cc81
3 changed files with 50 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README-react.md
View File

@ -12,13 +12,16 @@ To user another DICOMWeb endpoint, adapt index.js
## To include in your projects ## To include in your projects
Please refer to the example in the example directory. To set the DICOMWeb endpoint and do other customization, adapt index.html. Please refer to the example in the example directory. To set the DICOMWeb
endpoint and do other customization, adapt index.html.
### Build
### Build
1. `yarn install` 1. `yarn install`
1. `yarn build` 1. `yarn build`
### Run the example ### Run the example
1. `cd example` 1. `cd example`
1. `yarn install` 1. `yarn install`
1. `yarn start` 1. `yarn start`
@ -26,4 +29,4 @@ Please refer to the example in the example directory. To set the DICOMWeb endpoi
## License ## License
MIT © [OHIF](https://github.com/OHIF) MIT © [OHIF](https://github.com/OHIF)

47
README.md
View File

@ -28,16 +28,30 @@
## Why? ## Why?
Building a web based medical imaging viewer from scratch is time intensive, hard to get right, and expensive. Instead of re-inventing the wheel, you can use the OHIF Viewer as a rock solid platform to build on top of. The Viewer is a [React][react-url] [Progressive Web Application][pwa-url] that can be embedded in existing applications via it's [packaged source (ohif-viewer)][ohif-viewer-url] or hosted stand-alone. The Viewer exposes [configuration][configuration-url] and [extensions][extensions-url] to support workflow customization and advanced functionality at common integration points. Building a web based medical imaging viewer from scratch is time intensive, hard
to get right, and expensive. Instead of re-inventing the wheel, you can use the
If you're interested in using the OHIF Viewer, but you're not sure it supports your use case [check out our docs](https://deploy-preview-398--ohif.netlify.com/). Still not sure, or you would like to propose new features? Don't hesitate to [create an issue](https://github.com/OHIF/Viewers/issues) or open a pull request ^_^ OHIF Viewer as a rock solid platform to build on top of. The Viewer is a
[React][react-url] [Progressive Web Application][pwa-url] that can be embedded
in existing applications via it's [packaged source
(ohif-viewer)][ohif-viewer-url] or hosted stand-alone. The Viewer exposes
[configuration][configuration-url] and [extensions][extensions-url] to support
workflow customization and advanced functionality at common integration points.
If you're interested in using the OHIF Viewer, but you're not sure it supports
your use case
[check out our docs](https://deploy-preview-398--ohif.netlify.com/). Still not
sure, or you would like to propose new features? Don't hesitate to
[create an issue](https://github.com/OHIF/Viewers/issues) or open a pull request
^\_^
## Getting Started ## Getting Started
This readme is specific to testing and developing locally. If you're more interested in production deployment strategies, [you can check out our documentation on publishing](https://deploy-preview-398--ohif.netlify.com/). This readme is specific to testing and developing locally. If you're more
interested in production deployment strategies,
[you can check out our documentation on publishing](https://deploy-preview-398--ohif.netlify.com/).
Want to play around before you dig in? [Check out our LIVE Demo](https://viewer.ohif.org/) Want to play around before you dig in?
[Check out our LIVE Demo](https://viewer.ohif.org/)
### Setup ### Setup
@ -50,10 +64,12 @@ _Steps:_
1. Fork this repository 1. Fork this repository
2. Clone your forked repository (your `origin`) 2. Clone your forked repository (your `origin`)
- `git clone git@github.com:YOUR_GITHUB_USERNAME/Viewers.git`
3. Add `OHIF/Viewers` as a `remote` repository (the `upstream`)
- `git remote add upstream git@github.com:OHIF/Viewers.git`
- `git clone git@github.com:YOUR_GITHUB_USERNAME/Viewers.git`
3. Add `OHIF/Viewers` as a `remote` repository (the `upstream`)
- `git remote add upstream git@github.com:OHIF/Viewers.git`
### Developing Locally ### Developing Locally
@ -68,16 +84,23 @@ yarn install
yarn start yarn start
``` ```
For more advanced local development scenarios, like using your own locally hosted PACS and test data, [check out our Essential: Getting Started](https://deploy-preview-398--ohif.netlify.com/essentials/getting-started.html) guide. For more advanced local development scenarios, like using your own locally
hosted PACS and test data,
[check out our Essential: Getting Started](https://deploy-preview-398--ohif.netlify.com/essentials/getting-started.html)
guide.
### Contributing ### Contributing
> Large portions of the Viewer's functionality are maintained in other repositories. To get a better understanding of the Viewer's architecture and "where things live", read [our docs on the Viewer's architecture](https://deploy-preview-398--ohif.netlify.com/advanced/architecture.html#diagram) > Large portions of the Viewer's functionality are maintained in other
> repositories. To get a better understanding of the Viewer's architecture and
> "where things live", read
> [our docs on the Viewer's architecture](https://deploy-preview-398--ohif.netlify.com/advanced/architecture.html#diagram)
It is notoriously difficult to setup multiple dependent repositories for It is notoriously difficult to setup multiple dependent repositories for
end-to-end testing and development. That's why we recommend writing and running end-to-end testing and development. That's why we recommend writing and running
unit tests when adding and modifying features. This allows us to program in isolation without a complex setup, and has the added benefit of producing well-tested business logic. unit tests when adding and modifying features. This allows us to program in
isolation without a complex setup, and has the added benefit of producing
well-tested business logic.
1. Clone this repository 1. Clone this repository
2. Navigate to the project directory, and `yarn install` 2. Navigate to the project directory, and `yarn install`

14
docs/latest/advanced/extensions.md
View File

@ -17,7 +17,7 @@ class myCustomExtension {
* is used to help determine which component is used */ * is used to help determine which component is used */
getViewportModule: () => reactViewportComponent; getViewportModule: () => reactViewportComponent;
/** React component that adds buttons/behavior to the viewer Toolbar */ /** React component that adds buttons/behavior to the viewer Toolbar */
getToolbarModule: () => reactToolbarComponent; getToolbarModule: () => reactToolbarComponent;
/** Provides a whitelist of SOPClassUIDs the viewport is capable of rendering. /** Provides a whitelist of SOPClassUIDs the viewport is capable of rendering.
@ -59,6 +59,7 @@ Viewport components are managed by the `LayoutManager`. Which Viewport component
- The SopClassUID for visible/selected datasets - The SopClassUID for visible/selected datasets
![Cornerstone Viewport](../assets/img/extensions-viewport.png) ![Cornerstone Viewport](../assets/img/extensions-viewport.png)
<center><i>An example of three Viewports</i></center> <center><i>An example of three Viewports</i></center>
For a complete example implementation, [check out the OHIFCornerstoneViewport](https://github.com/OHIF/Viewers/blob/react/extensions/ohif-cornerstone-extension/src/OHIFCornerstoneViewport.js). For a complete example implementation, [check out the OHIFCornerstoneViewport](https://github.com/OHIF/Viewers/blob/react/extensions/ohif-cornerstone-extension/src/OHIFCornerstoneViewport.js).
@ -68,6 +69,7 @@ For a complete example implementation, [check out the OHIFCornerstoneViewport](h
An extension can register a Toolbar Module by providing a `getToolbarModule()` method that returns a React Component. The component does not receive any props. If you want to modify or react to state, you will need to connect to the redux store. An extension can register a Toolbar Module by providing a `getToolbarModule()` method that returns a React Component. The component does not receive any props. If you want to modify or react to state, you will need to connect to the redux store.
![Toolbar Extension](../assets/img/extensions-toolbar.gif) ![Toolbar Extension](../assets/img/extensions-toolbar.gif)
<center><i>A toolbar extension example</i></center> <center><i>A toolbar extension example</i></center>
Toolbar components are rendered in the `ToolbarRow` component. Toolbar components are rendered in the `ToolbarRow` component.
@ -91,13 +93,13 @@ In a future version, we will likely expose a way to provide the extensions you w
_app.js_ _app.js_
```js ```js
import { createStore, combineReducers } from 'redux'; import { createStore, combineReducers } from "redux";
import OHIF from 'ohif-core'; import OHIF from "ohif-core";
import OHIFCornerstoneExtension from 'ohif-cornerstone-extension'; import OHIFCornerstoneExtension from "ohif-cornerstone-extension";
const combined = combineReducers(OHIF.redux.reducers); const combined = combineReducers(OHIF.redux.reducers);
const store = createStore(combined); const store = createStore(combined);
const extensions = [ new OHIFCornerstoneExtension() ]; const extensions = [new OHIFCornerstoneExtension()];
// Dispatches the `addPlugin` action to the store // Dispatches the `addPlugin` action to the store
// Adding extension modules to `state.plugins.availablePlugins` // Adding extension modules to `state.plugins.availablePlugins`
@ -106,6 +108,6 @@ ExtensionManager.registerExtensions(store, extensions);
## OHIF Maintained Extensions ## OHIF Maintained Extensions
A small number of powerful extensions for popular use cases are maintained by OHIF. They're co-located in the [`OHIF/Viewers`](https://github.com/OHIF/Viewers/tree/react/) repository, in the top level [`extensions/`](https://github.com/OHIF/Viewers/tree/react/extensions) directory. A small number of powerful extensions for popular use cases are maintained by OHIF. They're co-located in the [`OHIF/Viewers`](https://github.com/OHIF/Viewers/tree/react/) repository, in the top level [`extensions/`](https://github.com/OHIF/Viewers/tree/react/extensions) directory.
{% include "./_maintained-extensions-table.md" %} {% include "./_maintained-extensions-table.md" %}