working docs v2 before versioning

2021-06-15 19:11:09 -04:00
1 parent 4971937171
commit ae18a92ee5
@@ -0,0 +1,4 @@
+{
+  "label": "Deployment",
+  "position": 8
+}
@@ -1,4 +0,0 @@
-<div style="text-align: center;">
-  <img src="/assets/img/embedded-viewer-diagram.png" alt="Embedded Viewer Diagram" style="margin: 0 auto;" />
-  <div><i>embedded viewer diagram</i></div>
-</div>
@@ -1,4 +0,0 @@
-<div style="text-align: center;">
-  <img src="/assets/img/nginx-image-archive.png" alt="request flow example" style="margin: 0 auto;" />
-  <div><i>simplified request flow diagram</i></div>
-</div>
@@ -1,4 +0,0 @@
-<div style="text-align: center;">
-  <img src="/assets/img/user-access-control-request-flow.png" alt="request flow example" style="margin: 0 auto;" />
-  <div><i>simplified request flow diagram</i></div>
-</div>
@@ -1,3 +1,7 @@
+---
+sidebar_position: 1
+sidebar_label: Overview
+---
 # Deployment

 The OHIF Viewer can be embedded in other web applications via it's [packaged
@@ -7,7 +11,6 @@ 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 configuring and deploying web
@@ -26,7 +29,8 @@ include tags.
 - Read more about it here: [Embedded Viewer](./recipes/embedded-viewer.md)
 - And check out our [live demo on CodeSandbox][code-sandbox]

-{% include "./_embedded-viewer-diagram.md" %}
+![embeddedViewer](../assets/img/embedded-viewer-diagram.png)
+

 ### Stand-alone Viewer

@@ -144,7 +148,7 @@ The returned JSON object must contain a single root object with a 'studies' arra


 *Sample JSON format:*
-```JSON
+```json
 {
    "studies": [
      {
@@ -0,0 +1,4 @@
+{
+  "label": "Recipes",
+  "position": 2
+}
@@ -1,3 +1,6 @@
+---
+sidebar_position: 2
+---
 # Build for Production

 > If you've already followed the
@@ -33,7 +36,7 @@ _From .zip:_
 Open your terminal, and navigate to the directory containing the source files.
 Next run these commands:

-```js
+```bash
 // If you haven't already, enable yarn workspaces
 yarn config set workspaces-experimental true

@@ -100,7 +103,7 @@ A quick way to test your build output locally is to spin up a small webserver.
 You can do this by running the following commands in the `dist/` output
 directory:

-```js
+```bash
 // Install http-server as a globally available package
 yarn global add http-server

@@ -1,3 +1,6 @@
+---
+sidebar_position: 1
+---
 # Embedded Viewer

 The quickest and easiest way to get the OHIF Viewer up and running is to embed
@@ -127,7 +130,7 @@ globally defined styles/scripts.
 > react-dom and react conflicts. What can we do?

 If you are installing OHIF viewer inside another react app, you may use `installViewer` as follows:
-```
+```jsx
 import { installViewer } from '@ohif/viewer'

 const ohifViewerConfig = window.config // or set it here
@@ -0,0 +1,75 @@
+---
+sidebar_position: 6
+---
+
+# Google Cloud Healthcare
+
+> The [Google Cloud Healthcare API](https://cloud.google.com/healthcare/) is a
+> powerful option for storing medical imaging data in the cloud.
+
+An alternative to deploying your own PACS is to use a software-as-a-service
+provider such as Google Cloud. The Cloud Healthcare API promises to be a
+scalable, secure, cost effective image storage solution for those willing to
+store their data in the cloud. It offers an
+[almost-entirely complete DICOMWeb API](https://cloud.google.com/healthcare/docs/dicom)
+which requires tokens generated via the
+[OAuth 2.0 Sign In flow](https://developers.google.com/identity/sign-in/web/sign-in).
+Images can even be transcoded on the fly if this is desired.
+
+## Setup a Google Cloud Healthcare Project
+
+- Create a Google Cloud account
+- Create a project in Google Cloud
+- Enable the [Cloud Healthcare API](https://cloud.google.com/healthcare/) for
+  your project.
+  - (Optional): Create a Dataset and Data Store for storing your DICOM data
+- Enable the
+  [Cloud Resource Manager API](https://cloud.google.com/resource-manager/) for
+  your project.
+  - _Note:_ If you are having trouble finding the APIs, use the search box at
+    the top of the Cloud console.
+- Go to APIs & Services > Credentials to create an OAuth Consent screen and fill
+  in your application details.
+  - Under Scopes for Google APIs, click "manually paste scopes".
+  - Add the following scopes:
+    - `https://www.googleapis.com/auth/cloudplatformprojects.readonly`
+    - `https://www.googleapis.com/auth/cloud-healthcare`
+- Go to APIs & Services > Credentials to create a new set of credentials:
+
+  - Choose the "Web Application" type
+  - Set up an
+    [OAuth 2.0 Client ID](https://support.google.com/cloud/answer/6158849?hl=en)
+  - Add your domain (e.g. `http://localhost:3000`) to Authorized JavaScript
+    origins.
+  - Add your domain, plus `callback` (e.g. `http://localhost:3000/callback`) to
+    Authorized Redirect URIs.
+  - Save your Client ID for later.
+
+- (Optional): Enable Public Datasets that are being hosted by Google:
+  https://cloud.google.com/healthcare/docs/resources/public-datasets/
+
+## Run the viewer with your OAuth Client ID
+
+1. Open the `config/google.js` file and change `YOURCLIENTID` to your Client ID
+   value.
+1. Run the OHIF Viewer using the config/google.js configuration file
+
+```bash
+cd OHIFViewer
+yarn install
+APP_CONFIG=config/google.js yarn run dev
+```
+
+## Running via Docker
+
+The OHIF Viewer Docker container can be connected to Google Cloud Healthcare by
+providing a Client ID at runtime. This is a very simple method to get up and
+running.
+
+1. Install Docker (https://www.docker.com/)
+1. Run the Docker container, providing a Client ID as an environment variable.
+   Client IDs look like `xyz.apps.googleusercontent.com`.
+
+```bash
+docker run --env CLIENT_ID=$CLIENT_ID --publish 5000:80 ohif/viewer:latest
+```
@@ -1,3 +1,6 @@
+---
+sidebar_position: 4
+---
 # Nginx + Image Archive

 > DISCLAIMER! We make no claims or guarantees of this approach's security. If in
@@ -58,7 +61,9 @@ CORS][understanding-cors]

 This setup allows us to create a setup similar to the one pictured below:

-{% include "./../_nginx-image-archive-diagram.md" %}
+<!-- {% include "./../_nginx-image-archive-diagram.md" %} -->
+![nginX](../../assets/img/nginx-image-archive.png)
+

 - All web requests are routed through `nginx` on our `OpenResty` image
 - `/pacs` is a reverse proxy for `orthanc`'s `DICOM Web` endpoints
@@ -1,3 +1,7 @@
+---
+sidebar_position: 3
+sidebar_label: Assets
+---
 # Deploy Static Assets

 > WARNING! All of these solutions stand-up a publicly accessible web viewer. Do
@@ -25,9 +29,16 @@ _Easy_

 _Advanced_

- [AWS S3 + Cloudfront](#aws-s3--cloudfront)
- [GCP + Cloudflare](#gcp--cloudflare)
- [Azure](#azure)
+- [Deploy Static Assets](#deploy-static-assets)
+  - [Drag-n-drop](#drag-n-drop)
+    - [Netlify: Drop](#netlify-drop)
+  - [Easy](#easy)
+    - [Surge.sh](#surgesh)
+    - [GitHub Pages](#github-pages)
+  - [Advanced](#advanced)
+    - [AWS S3 + Cloudfront](#aws-s3--cloudfront)
+    - [GCP + Cloudflare](#gcp--cloudflare)
+    - [Azure](#azure)

 ## Drag-n-drop

@@ -1,3 +1,6 @@
+---
+sidebar_position: 5
+---
 # User Account Control

 > DISCLAIMER! We make no claims or guarantees of this approach's security. If in
@@ -32,7 +35,9 @@ applications and services with little to no code. We improve upon our

 This setup allows us to create a setup similar to the one pictured below:

-{% include "./../_user-account-control-flow-diagram.md" %}
+![userControlFlow](../../assets/img/user-access-control-request-flow.png)
+
+

 - All web requests are routed through `nginx` on our `OpenResty` image
 - `/pacs` is a reverse proxy for `orthanc`'s `DICOM Web` endpoints