chore(build): try to build demo and docs (#3434)

This commit is contained in:
Alireza authored and GitHub committed 2023-06-06 13:34:26 -04:00
1 parent 869b8ced05
commit 828690cd3b
329 files changed
+1896 -1010

No files matched your search

+6 -3
View File
@@ -23,15 +23,18 @@ Key features:
components available in a reusable component library built with React.js and
Tailwind CSS
![OHIF Viewer Screenshot](./assets/img/OHIF-Viewer.png)
![OHIF Viewer Screenshot](./assets/img/OHIF-Viewer.jpg)
<div className="text--center">
<div className="button-group">
<a className='button button--primary' href="https://v3-demo.ohif.org/">Try the demo</a>
<a className='button button--primary' href="https://ohif.org/news/">Subscribe to our newsletter</a>
<a className='button button--primary' href="./release-notes">Release Notes</a>
</div>
</div>
## Where to next?
The Open Health Imaging Foundation intends to provide an imaging viewer
@@ -91,7 +94,7 @@ MIT © [OHIF](https://github.com/OHIF)
<!-- prettier-ignore-start -->
[ohif-org]: https://www.ohif.org
[ohif-demo]: http://v3-demo.ohif.org/
[ohif-demo]: http://viewer.ohif.org/
[dicom-web]: https://en.wikipedia.org/wiki/DICOMweb
[gh-issues]: https://github.com/OHIF/Viewers/issues
<!-- prettier-ignore-end -->
Binary file not shown.

After

Width:  |  Height:  |  Size: 376 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 495 KiB

@@ -17,7 +17,7 @@ remotely.
## Configuration Files
The configuration for our viewer is in the `<root>platform/viewer/public/config`
The configuration for our viewer is in the `<root>platform/app/public/config`
directory. Our build process knows which configuration file to use based on the
`APP_CONFIG` environment variable. By default, its value is
[`config/default.js`][default-config]. The majority of the viewer's features,
@@ -25,7 +25,7 @@ and registered extension's features, are configured using this file.
The simplest way is to update the existing default config:
```js title="platform/viewer/public/config/default.js"
```js title="platform/app/public/config/default.js"
window.config = {
routerBasename: '/',
extensions: [],
@@ -194,7 +194,7 @@ output.
[dicomcloud-install]: https://github.com/DICOMcloud/DICOMcloud#running-the-code
[osirix]: https://www.osirix-viewer.com/
[horos]: https://www.horosproject.org/
[default-config]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/public/config/default.js
[html-templates]: https://github.com/OHIF/Viewers/tree/master/platform/viewer/public/html-templates
[config-files]: https://github.com/OHIF/Viewers/tree/master/platform/viewer/public/config
[default-config]: https://github.com/OHIF/Viewers/blob/master/platform/app/public/config/default.js
[html-templates]: https://github.com/OHIF/Viewers/tree/master/platform/app/public/html-templates
[config-files]: https://github.com/OHIF/Viewers/tree/master/platform/app/public/config
<!-- prettier-ignore-end -->
@@ -10,7 +10,7 @@ server as well as a list of study and series instance UIDs along with metadata.
An example would look like
`https://v3-demo.ohif.org/viewer/dicomjson?url=https://ohif-dicom-json-example.s3.amazonaws.com/LIDC-IDRI-0001.json`
`https://viewer.ohif.org/viewer/dicomjson?url=https://ohif-dicom-json-example.s3.amazonaws.com/LIDC-IDRI-0001.json`
As you can see the url to the location of the JSON file is passed in the query
after the `dicomjson` string, which is
@@ -12,7 +12,7 @@ datasource and delegates subsequent requests for metadata and images to that.
Usage is similar to that of the [DICOM JSON](./dicom-json.md) datasource and
might look like
`https://v3-demo.ohif.org/viewer/dicomwebproxy?url=https://ohif-dicom-json-example.s3.amazonaws.com/dicomweb.json`
`https://viewer.ohif.org/viewer/dicomwebproxy?url=https://ohif-dicom-json-example.s3.amazonaws.com/dicomweb.json`
The url to the location of the JSON file is passed in the query
after the `dicomwebproxy` string, which is
@@ -32,7 +32,7 @@ _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_DOMAIN_
> parameter in _platform/viewer/package.json_ to http://192.168.99.100:8042 or
> parameter in _platform/app/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
@@ -101,7 +101,7 @@ yarn run dev:orthanc
Let's take a look at what's going on under the hood here. `yarn run dev:orthanc`
is running the `dev:orthanc` script in our project's `package.json` (inside
`platform/viewer`). That script is:
`platform/app`). That script is:
```js
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
@@ -120,7 +120,7 @@ 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
`<project-root>/platform/viewer/public/config/default.js`. Here is what that
`<project-root>/platform/app/public/config/default.js`. Here is what that
configuration looks like:
```js
@@ -225,8 +225,8 @@ below:
[osirix]: http://www.osirix-viewer.com/
[horos]: https://www.horosproject.org/
[default-config]:
https://github.com/OHIF/Viewers/blob/master/platform/viewer/public/config/default.js
https://github.com/OHIF/Viewers/blob/master/platform/app/public/config/default.js
[html-templates]:
https://github.com/OHIF/Viewers/tree/master/platform/viewer/public/html-templates
https://github.com/OHIF/Viewers/tree/master/platform/app/public/html-templates
[config-files]:
https://github.com/OHIF/Viewers/tree/master/platform/viewer/public/config
https://github.com/OHIF/Viewers/tree/master/platform/app/public/config
@@ -27,11 +27,11 @@ cd /dicomweb
npx http-server -p 5000 --cors -g
```
There is then a dev environment in the platform/viewer directory which can be
There is then a dev environment in the platform/app directory which can be
run against those files, like this:
```
cd platform/viewer
cd platform/app
yarn dev:static
```
@@ -43,9 +43,9 @@ yarn run build
```
If everything worked as expected, you should have a new `dist/` directory in the
`platform/viewer/dist` folder. It should roughly resemble the following:
`platform/app/dist` folder. It should roughly resemble the following:
```bash title="<root>platform/viewer/dist/"
```bash title="<root>platform/app/dist/"
├── app-config.js
├── app.bundle.js
├── app.css
@@ -62,7 +62,7 @@ how to configure the project for your own imaging archive below.
### Configuration
The configuration for our viewer is in the `<root>platform/viewer/public/config`
The configuration for our viewer is in the `<root>platform/app/public/config`
directory. Our build process knows which configuration file to use based on the
`APP_CONFIG` environment variable. By default, its value is
[`config/default.js`][default-config]. The majority of the viewer's features,
@@ -101,7 +101,7 @@ directory:
# Install http-server as a globally available package
yarn global add http-server
# Change the directory to the platform/viewer
# Change the directory to the platform/app
# Serve the files in our current directory
# Accessible at: `http://localhost:8080`
-3
View File
@@ -6,9 +6,6 @@ sidebar_position: 4
The OHIF source code provides a Dockerfile to create and run a Docker image that containerizes an [nginx](https://www.nginx.com/) web server serving the OHIF Viewer.
:::info Good to Know
The OHIF Viewer Docker image for the `v3-stable` branch is not yet published. The available image in [Docker Hub](https://hub.docker.com/r/ohif/viewer) is based on the `master` branch.
:::
## Prequisites
The machine on which to build and run the Docker container must have:
+1 -1
View File
@@ -322,7 +322,7 @@ Please feel free to suggest or contribute your own recipes.
-->
<!-- prettier-ignore-start -->
[viewer-npm]: https://www.npmjs.com/package/@ohif/viewer
[viewer-npm]: https://www.npmjs.com/package/@ohif/app
[pwa-url]: https://developers.google.com/web/progressive-web-apps/
[static-assets-url]: https://www.maxcdn.com/one/visual-glossary/static-content/
[app-store]: https://medium.freecodecamp.org/i-built-a-pwa-and-published-it-in-3-app-stores-heres-what-i-learned-7cb3f56daf9b
@@ -267,7 +267,7 @@ members put together:
[orthanc-docs]: http://book.orthanc-server.com/users/configuration.html#configuration
[lua-resty-openidc-docs]: https://github.com/zmartzone/lua-resty-openidc
<!-- SRC -->
[dockerfile]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/.recipes/OpenResty-Orthanc/dockerfile
[config-nginx]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/.recipes/OpenResty-Orthanc/config/nginx.conf
[config-orthanc]: https://github.com/OHIF/Viewers/blob/master/platform/viewer/.recipes/OpenResty-Orthanc/config/orthanc.json
[dockerfile]: https://github.com/OHIF/Viewers/blob/master/platform/app/.recipes/OpenResty-Orthanc/dockerfile
[config-nginx]: https://github.com/OHIF/Viewers/blob/master/platform/app/.recipes/OpenResty-Orthanc/config/nginx.conf
[config-orthanc]: https://github.com/OHIF/Viewers/blob/master/platform/app/.recipes/OpenResty-Orthanc/config/orthanc.json
<!-- prettier-ignore-end -->
@@ -50,7 +50,7 @@ you'll see the following:
OHIF v3 is composed of the following components, described in detail in further
sections:
- `@ohif/viewer`: The core framework that controls extension registration, mode
- `@ohif/app`: The core framework that controls extension registration, mode
composition and routing.
- `@ohif/core`: A library of useful and reusable medical imaging functionality
for the web.
@@ -58,7 +58,7 @@ sections:
with.
- `Extensions`: A set of building blocks for building applications. The OHIF org
maintains a few core libraries.
- `Modes`: Configuration objects that tell @ohif/viewer how to compose
- `Modes`: Configuration objects that tell @ohif/app how to compose
extensions to build applications on different routes of the platform.
## Extensions
@@ -110,7 +110,7 @@ certain workflows.
To summarize the difference between extensions and modes in `OHIF-v3` and
extensions in `OHIF-v2`
> - `Modes` are configuration objects that tell _@ohif/viewer_ how to compose
> - `Modes` are configuration objects that tell _@ohif/app_ how to compose
> extensions to build applications on different routes of the platform.
> - In v2 extensions are “plugins” that add functionality to a core viewer.
> - In v3 extensions are building blocks that a mode uses to build an entire
@@ -120,7 +120,7 @@ extensions in `OHIF-v2`
## Platform
### `@ohif/viewer`
### `@ohif/app`
This library is the core library which consumes modes and extensions and builds
an application. Extensions can be passed in as app configuration and will be
@@ -195,7 +195,7 @@ new mode as well.
<!-- prettier-ignore-start -->
[monorepo]: https://github.com/OHIF/Viewers/issues/768
[viewers-project]: https://github.com/OHIF/Viewers
[viewer-npm]: https://www.npmjs.com/package/@ohif/viewer
[viewer-npm]: https://www.npmjs.com/package/@ohif/app
[pwa]: https://developers.google.com/web/progressive-web-apps/
[configuration]: ../configuration/index.md
[extensions]: ../platform/extensions/index.md
@@ -24,10 +24,6 @@ up-to-date with the upstream (original) repository. This is called a "Triangular
Workflow" and is common for Open Source projects. The GitHub blog has a [good
graphic that illustrates this setup][triangular-workflow].
### `v3-stable` branch
Currently the stable branch for OHIF-v3 is `v3-stable`. Once the v3-stable branch has
feature parity with the master branch, `v3-stable` will be pushed to the master branch.
You can read more about the roadmap timeline [here](https://ohif.org/roadmap).
### Private
@@ -57,9 +53,6 @@ Navigate to the root of the project's directory in your terminal and run the
following commands:
```bash
# Switch to the v3 branch
git switch v3-stable
# Restore dependencies
yarn install
@@ -70,10 +63,10 @@ yarn run dev
You should see the following output:
```bash
@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
@ohif/app: i 「wds」: Project is running at http://localhost:3000/
@ohif/app: i 「wds」: webpack output is served from /
@ohif/app: i 「wds」: Content not from webpack is served from D:\code\ohif\Viewers\platform\viewer
@ohif/app: i 「wds」: 404s will fallback to /index.html
# And a list of all generated files
```
@@ -111,6 +104,6 @@ yarn run build
[add-remote-repo]: https://help.github.com/en/articles/fork-a-repo#step-3-configure-git-to-sync-your-fork-with-the-original-spoon-knife-repository
[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/tree/v3-stable
[ohif-viewers-repo]: https://github.com/OHIF/Viewers/
[ohif-viewers]: https://github.com/OHIF/Viewers
<!-- prettier-ignore-end -->
+2 -2
View File
@@ -286,7 +286,7 @@ To make all the above commands work, we have created a new file called `PluginCo
information needed to run the commands. You **don't need to (and should not)**
edit/update/modify this file as it is automatically generated by the CLI. You
can take a look at what this file contains by going to
`platform/viewer/PluginConfig.json` in your project's root directory. In short,
`platform/app/PluginConfig.json` in your project's root directory. In short,
this file tracks and stores all the extensions/modes and the their version that
are currently being used by the viewer.
@@ -305,4 +305,4 @@ export NPM_TOKEN=<your readonly token>
The ohif-cli will add the path to the external dependencies to the webpack config,
so that you can install them in your project and use them in your custom
extensions and modes. To achieve this ohif-cli will update the webpack.pwa.js
file in the platform/viewer directory.
file in the platform/app directory.
@@ -4,7 +4,7 @@ sidebar_position: 2
# Browser Support
The browsers that we support are specified in the `.browserlistrc` file located
in the `platform/viewer` project. While we leverage the latest language features
in the `platform/app` project. While we leverage the latest language features
when writing code, we rely on `babel` to _transpile_ our code so that it can run
in the browsers that we support.
@@ -152,24 +152,24 @@ the top level [`extensions/`][ext-source] directory.
`pluginConfig.json`, by default we register all extensions in the repo.
```js title=platform/viewer/pluginConfig.json
```js title=platform/app/pluginConfig.json
// Simplified version of the `pluginConfig.json` file
{
"extensions": [
{
"packageName": "@ohif/extension-cornerstone",
"version": "3.0.0"
"version": "3.4.0"
},
{
"packageName": "@ohif/extension-measurement-tracking",
"version": "3.0.0"
"version": "3.4.0"
},
// ...
],
"modes": [
{
"packageName": "@ohif/mode-longitudinal",
"version": "0.0.1"
"version": "3.4.0"
}
]
}
@@ -319,7 +319,7 @@ documentation page.</span>
### Contexts
The `@ohif/viewer` tracks "active contexts" that extensions can use to scope
The `@ohif/app` tracks "active contexts" that extensions can use to scope
their functionality. Some example contexts being:
- Route: `ROUTE:VIEWER`, `ROUTE:STUDY_LIST`
@@ -105,7 +105,7 @@ of the instances to the display set.
You can find another example for this mapping between raw metadata and displaySet for
`DICOM-SR` extension.
## `@ohif/viewer` usage
## `@ohif/app` usage
We use the `sopClassHandlerModule`s in `DisplaySetService` where we
transform instances from the raw metadata format to a OHIF displaySet format.
@@ -88,7 +88,7 @@ function TrackedCornerstoneViewport({
```
### `@ohif/viewer`
### `@ohif/app`
Viewport components are managed by the `ViewportGrid` Component. Which Viewport
component is used depends on:
@@ -74,7 +74,7 @@ These methods are used internally to help determine which commands are currently
valid, and how to provide them with any state they may need at the time they are
called.
```js title="platform/viewer/src/appInit.js"
```js title="platform/app/src/appInit.js"
const commandsManagerConfig = {
getAppState: () => {},
/** Used by commands to determine active context */
@@ -49,7 +49,7 @@ export default class ServicesManager {
By default, `OHIF-v3` registers the following services in the `appInit`.
```js title="platform/viewer/src/appInit.js"
```js title="platform/app/src/appInit.js"
servicesManager.registerServices([
CustomizationService,
UINotificationService,
+3 -3
View File
@@ -368,20 +368,20 @@ Similar to extension registration, `viewer` will look inside the `pluginConfig.j
find the `modes` to register.
```js title=platform/viewer/pluginConfig.json
```js title=platform/app/pluginConfig.json
// Simplified version of the `pluginConfig.json` file
{
"extensions": [
{
"packageName": "@ohif/extension-cornerstone",
"version": "3.0.0"
"version": "3.4.0"
},
// ...
],
"modes": [
{
"packageName": "@ohif/mode-longitudinal",
"version": "0.0.1"
"version": "3.4.0"
}
]
}
+1 -1
View File
@@ -13,7 +13,7 @@ important part of the mode configuration.
## Route
`@ohif/viewer` **compose** extensions to build applications on different routes
`@ohif/app` **compose** extensions to build applications on different routes
for the platform.
Below, you can see a simplified version of the `longitudinal` mode and the
@@ -320,7 +320,7 @@ A few custom attributes are included under @ohif/extension-test, these are namel
*maxNumImageFrames
*numberOfDisplaySets
To use these included custom attributes, the extension will need to be enabled under platform/viewer/pluginConfig.json:
To use these included custom attributes, the extension will need to be enabled under platform/app/pluginConfig.json:
```javascript
{
@@ -328,7 +328,7 @@ To use these included custom attributes, the extension will need to be enabled u
...
{
"packageName": "@ohif/extension-test",
"version": "0.0.1"
"version": "3.4.0"
},
...
]
@@ -8,7 +8,7 @@ sidebar_label: Segmentation Service
## Overview
Using Segmentation Service you can create, edit and delete segmentation data, and
change appearance of the segmentation including color, opacity, and visibility.
change appearance of the segmentation including color, opacity and visibility.
Segmentations in OHIF are based on the Segmentations in Cornerstone3D. You can
read more about it in the [Cornerstone Segmentation](https://www.cornerstonejs.org/docs/concepts/cornerstone-tools/segmentation/). OHIF currently only supports
@@ -77,7 +77,7 @@ observer.
Below, we can see `simplified` `Mode.jsx` and the corresponding `useEffect`
where the unsubscription functions are executed upon destruction.
```js title="platform/viewer/src/routes/Mode/Mode.jsx"
```js title="platform/app/src/routes/Mode/Mode.jsx"
export default function ModeRoute(/**..**/) {
/**...**/
useEffect(() => {
@@ -332,7 +332,7 @@ customizationService: [
Below is the full example configuration of the customizable viewport overlay and the screenshot of the result overlay.
```javascript
// this is one of the configuration files in `platform/viewer/public/config/*.js`
// this is one of the configuration files in `platform/app/public/config/*.js`
window.config = {
// ...
@@ -58,7 +58,7 @@ The `ServicesManager` is:
makes the context values exposed in the app, and service's `setImplementation`
can get run to override the implementation of the service.**
```js title="platform/viewer/src/App.jsx"
```js title="platform/app/src/App.jsx"
function App({ config, defaultExtensions }) {
/**...**/
/**...**/
@@ -189,7 +189,7 @@ clicking on the gear button on the right side of the header.
A `simplified` code for our worklist is:
```js title="platform/viewer/src/routes/WorkList/WorkList.jsx"
```js title="platform/app/src/routes/WorkList/WorkList.jsx"
import { useModal, Header } from '@ohif/ui';
function WorkList({
+7 -7
View File
@@ -57,7 +57,7 @@ module.exports = {
projectName: 'OHIF',
baseUrl,
baseUrlIssueBanner: true,
url: 'https://v3-docs.ohif.org',
url: 'https://docs.ohif.org',
i18n: {
defaultLocale: 'en',
locales: isDeployPreview
@@ -218,7 +218,7 @@ module.exports = {
// We want users to submit doc updates to the upstream/next version!
// Otherwise we risk losing the update on the next release.
return `https://github.com/OHIF/Viewers/edit/v3-stable/platform/docs/docs/${docPath}`;
return `https://github.com/OHIF/Viewers/edit/master/platform/docs/docs/${docPath}`;
},
showLastUpdateAuthor: true,
showLastUpdateTime: true,
@@ -233,7 +233,7 @@ module.exports = {
// : undefined,
versions: {
current: {
label: 'Version 3.3 - Segmentation Support 🚧',
label: 'Latest',
},
'2.0': {
label: 'Version 2.0 - Master branch',
@@ -290,13 +290,13 @@ module.exports = {
{
to: 'https://ohif.org/get-started',
label: 'Get Started',
target: '_self',
target: '_blank',
position: 'left',
},
{
to: 'https://ohif.org/examples',
label: 'Examples',
target: '_self',
target: '_blank',
position: 'left',
},
{
@@ -309,7 +309,7 @@ module.exports = {
{
to: 'https://ohif.org/community',
label: 'Community',
target: '_self',
target: '_blank',
position: 'left',
},
{
@@ -429,7 +429,7 @@ module.exports = {
logo: {
alt: 'OHIF ',
src: 'img/netlify-color-accent.svg',
href: 'https://v3-demo.ohif.org/',
href: 'https://viewer.ohif.org/',
},
copyright: `OHIF is open source software released under the MIT license.`,
},
@@ -88,9 +88,6 @@ You should see the following output:
```bash
# Build static assets to host a PWA
yarn run build
# Build packaged output (script-tag use)
yarn run build:package
```
## Troubleshooting
@@ -27,7 +27,7 @@ Key features:
<div className="text--center">
<div className="button-group">
<a className='button button--primary' href="https://v3-demo.ohif.org/">Try the demo</a>
<a className='button button--primary' href="https://viewer.ohif.org/">Try the demo</a>
<a className='button button--primary' href="./release-notes">Release Notes</a>
</div>
</div>
@@ -91,7 +91,7 @@ MIT © [OHIF](https://github.com/OHIF)
<!-- prettier-ignore-start -->
[ohif-org]: https://www.ohif.org
[ohif-demo]: http://v3-demo.ohif.org/
[ohif-demo]: http://viewer.ohif.org/
[dicom-web]: https://en.wikipedia.org/wiki/DICOMweb
[gh-issues]: https://github.com/OHIF/Viewers/issues
<!-- prettier-ignore-end -->
@@ -10,7 +10,7 @@ server as well as a list of study and series instance UIDs along with metadata.
An example would look like
`https://v3-demo.ohif.org/viewer/dicomjson?url=https://ohif-dicom-json-example.s3.amazonaws.com/LIDC-IDRI-0001.json`
`https://viewer.ohif.org/viewer/dicomjson?url=https://ohif-dicom-json-example.s3.amazonaws.com/LIDC-IDRI-0001.json`
As you can see the url to the location of the JSON file is passed in the query
after the `dicomjson` string, which is
+1 -3
View File
@@ -1,6 +1,4 @@
{
"Version 3.2 - Cornerstone3D VolumeAPI": "https://deploy-preview-3009--ohif-platform-docs.netlify.app/",
"Version 3.1 - Cornerstone3D Basics": "https://62e92bf05fc5050008aa1300--ohif-platform-docs.netlify.app/",
"Version 3.0 - Cornerstone Legacy": "https://deploy-preview-2791--ohif-platform-docs.netlify.app/",
"Version 2.0": "https://deploy-preview-2791--ohif-platform-docs.netlify.app/1.0/",
"Version 1.0": "https://deploy-preview-2791--ohif-platform-docs.netlify.app/1.0/"
}