Compare commits

...
Author SHA1 Message Date
ohif-bot 84144bc3ef chore(release): publish [skip ci]
- @ohif/extension-vtk@0.52.8
 - @ohif/core@1.3.2
 - @ohif/viewer@1.6.3
2019-10-14 11:15:08 +00:00
Erik Ziegler 5cbdd0c616 ci: Skip copying URL to clipboard on headless CI servers (#1043) 2019-10-14 13:08:59 +02:00
Chris McGee fc015326c7 fix: Return display sets in StudyMetadata._createDisplaySetsForSeries (#1042) 2019-10-13 20:53:01 -04:00
ohif-bot 01860b6094 chore(release): publish [skip ci]
- @ohif/extension-vtk@0.52.7
 - @ohif/core@1.3.1
 - @ohif/ui@0.53.4
 - @ohif/viewer@1.6.2
2019-10-11 18:56:39 +00:00
Danny Brown cfdf827ff0 ci: fix broken build (#1033) 2019-10-11 14:50:12 -04:00
Danny Brown ceb6837153 ci: speed up script tag e2e tests (#1032)
* show package bundle progress

* Ability to run "quick builds" for faster feedback on status checks (e2e)

* ci: speed up PR checks

* specify quick build value
2019-10-11 14:26:24 -04:00
Danny Brown b01b0108b0 refactor: layout manager to viewer (#1026)
* docs: formatting

* Prefer numRows and numColumns to percentage width/height for layout

* fix: LayoutManager --> ViewportGrid (get out of UI component library)

* docs: remove outdated docs

* Don't expose ExampleDropTarget

* Revert thumnail entry drag source removal

* Update screaming tests

* fix drag-n-drop

* fix vtk mpr2d CC: @jamesapetts

* remove setSingleLayoutData

* remove vtk qualifier
2019-10-11 12:03:59 -04:00
Erik Ziegler d6862e7418 ci: Set cache key to only use yarn.lock checksum (#1031)
* ci: Set cache key to only use yarn.lock checksum

* Use increasingly general pattern for restoring the cache

* Avoid running script tag e2e tests twice

* Performance improvements for CI

* Valid YAML

* Valid YAML?

* Valid YAML!!!!

* Update Node image, update yarn version

* circle

* serve
2019-10-11 11:40:21 -04:00
ohif-bot beb7083e55 chore(release): publish [skip ci]
- @ohif/viewer@1.6.1
2019-10-11 13:13:57 +00:00
Erik Ziegler 412fe4e23f fix: Switch token storage back to localStorage because in-memory was annoying for end users (#1030) 2019-10-11 14:53:49 +02:00
ohif-bot 659649e10b chore(release): publish [skip ci]
- @ohif/extension-vtk@0.52.6
 - @ohif/core@1.3.0
 - @ohif/viewer@1.6.0
2019-10-11 09:32:51 +00:00
Erik Ziegler f431b277dd ci: Disable docker layer caching because CircleCI doesn't let open source plans use it (#1028) 2019-10-11 11:14:54 +02:00
ladeirarodolfo 2bc361cdca feat: 🎸 Improve usability of Google Cloud adapter, including direct routes to studies (#989) 2019-10-11 09:59:38 +02:00
Erik Ziegler c6f306c0de Revert "ci: Disable docker layer caching because CircleCI doesn't let open source plans use it"
This reverts commit c0ea27f6b3.
2019-10-11 08:52:07 +02:00
Erik Ziegler c0ea27f6b3 ci: Disable docker layer caching because CircleCI doesn't let open source plans use it 2019-10-11 08:45:02 +02:00
66 changed files with 1133 additions and 865 deletions

No files matched your search

+95 -40
View File
@@ -17,46 +17,107 @@ orbs:
defaults: &defaults
docker:
- image: circleci/node:10.16.0
- image: circleci/node:12.9.1
environment:
TERM: xterm # Enable colors in term
working_directory: ~/repo
jobs:
CHECKOUT:
UNIT_TESTS:
<<: *defaults
steps:
# Update yarn
- run: yarn -v
#- run: rm -rf ~/.yarn && npm i -g yarn && yarn -v
# Enable yarn workspaces
- run: yarn config set workspaces-experimental true
# Checkout code and ALL Git Tags
- checkout:
post:
- git fetch --all
- restore_cache:
name: Restore Yarn and Cypress Package Cache
keys:
# when lock file changes, use increasingly general patterns to restore cache
- yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
- yarn-packages-v1-{{ .Branch }}-
- yarn-packages-v1-
- yarn-packages-{{ checksum "yarn.lock" }}
- yarn-packages-
- run:
name: Install Dependencies
command: yarn install --frozen-lockfile
- save_cache:
name: Save Yarn Package Cache
paths:
- ~/.cache ## Cache yarn and Cypress
key: yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
# Persist :+1:
- persist_to_workspace:
root: ~/repo
paths: .
key: yarn-packages-{{ checksum "yarn.lock" }}
UNIT_TESTS:
# RUN TESTS
- run:
name: 'JavaScript Test Suite'
command: yarn run test:unit:ci
# PLATFORM/VIEWER
- run:
name: 'VIEWER: Combine report output'
command: |
viewerCov="/home/circleci/repo/platform/viewer/coverage"
touch "${viewerCov}/reports"
cat "${viewerCov}/clover.xml" >> "${viewerCov}/reports"
echo "\<<\<<\<< EOF" >> "${viewerCov}/reports"
cat "${viewerCov}/lcov.info" >>"${viewerCov}/reports"
echo "\<<\<<\<< EOF" >> "${viewerCov}/reports"
- codecov/upload:
file: '/home/circleci/repo/platform/viewer/coverage/reports'
flags: 'viewer'
# PLATFORM/CORE
- run:
name: 'CORE: Combine report output'
command: |
coreCov="/home/circleci/repo/platform/core/coverage"
touch "${coreCov}/reports"
cat "${coreCov}/clover.xml" >> "${coreCov}/reports"
echo "\<<\<<\<< EOF" >> "${coreCov}/reports"
cat "${coreCov}/lcov.info" >> "${coreCov}/reports"
echo "\<<\<<\<< EOF" >> "${coreCov}/reports"
- codecov/upload:
file: '/home/circleci/repo/platform/core/coverage/reports'
flags: 'core'
UNIT_TESTS_PERSIST_WORKSPACE:
<<: *defaults
steps:
- attach_workspace:
at: ~/repo
# Update yarn
#- run: rm -rf ~/.yarn && npm i -g yarn && yarn -v
# Enable yarn workspaces
- run: yarn config set workspaces-experimental true
# Checkout code and ALL Git Tags
- checkout:
post:
- git fetch --all
- restore_cache:
name: Restore Yarn and Cypress Package Cache
keys:
# when lock file changes, use increasingly general patterns to restore cache
- yarn-packages-{{ checksum "yarn.lock" }}
- yarn-packages-
- run:
name: Install Dependencies
command: yarn install --frozen-lockfile
- save_cache:
name: Save Yarn Package Cache
paths:
- ~/.cache ## Cache yarn and Cypress
key: yarn-packages-{{ checksum "yarn.lock" }}
# RUN TESTS
- run:
@@ -92,7 +153,7 @@ jobs:
flags: 'core'
# Persist :+1:
- persist_to_workspace:
- persist_to_workspace: &persist_to_workspace
root: ~/repo
paths: .
@@ -142,8 +203,8 @@ jobs:
steps:
- attach_workspace:
at: ~/repo
# - setup_remote_docker:
# docker_layer_caching: true
- setup_remote_docker:
docker_layer_caching: false
- run:
name: Build and push Docker image
command: |
@@ -198,8 +259,8 @@ jobs:
steps:
- attach_workspace:
at: ~/repo
# - setup_remote_docker:
# docker_layer_caching: true
- setup_remote_docker:
docker_layer_caching: false
- run:
name: Deploy latest version to viewer.ohif.org
command: |
@@ -217,16 +278,13 @@ workflows:
# PULL REQUESTS
PR_CHECKS:
jobs:
- CHECKOUT:
- UNIT_TESTS:
filters:
branches:
ignore:
- master
- feature/*
- hotfix/*
- UNIT_TESTS:
requires:
- CHECKOUT
# E2E: PWA
- cypress/run:
name: 'E2E: PWA'
@@ -236,10 +294,10 @@ workflows:
yarn: true
store_artifacts: false
working_directory: platform/viewer
build: yarn run build:e2e
start: yarn run test:e2e:dist
build: npx cross-env QUICK_BUILD=true yarn run build
start: yarn run test:e2e:serve
wait-on: 'http://localhost:3000'
cache-key: 'yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}'
cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
no-workspace: true # Don't persist workspace
post-steps:
- store_artifacts:
@@ -255,10 +313,10 @@ workflows:
yarn: true
store_artifacts: false
working_directory: platform/viewer
build: yarn run build:package
start: yarn run test:e2e:dist
build: npx cross-env QUICK_BUILD=true yarn run build:package
start: yarn run test:e2e:serve
wait-on: 'http://localhost:3000'
cache-key: 'yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}'
cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
no-workspace: true # Don't persist workspace
post-steps:
- store_artifacts:
@@ -269,13 +327,10 @@ workflows:
# MERGE TO MASTER
RELEASE:
jobs:
- CHECKOUT:
- UNIT_TESTS_PERSIST_WORKSPACE:
filters:
branches:
only: master
- UNIT_TESTS:
requires:
- CHECKOUT
# E2E: PWA + Persist
- cypress/run:
name: 'E2E: PWA'
@@ -286,10 +341,10 @@ workflows:
record: true
store_artifacts: true
working_directory: platform/viewer
build: yarn run build:e2e
start: yarn run test:e2e:dist
build: npx cross-env QUICK_BUILD=true yarn run build
start: yarn run test:e2e:serve
wait-on: 'http://localhost:3000'
cache-key: 'yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}'
cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
no-workspace: true # Don't persist workspace
post-steps:
- store_artifacts:
@@ -297,7 +352,7 @@ workflows:
- store_test_results:
path: cypress/results
requires:
- UNIT_TESTS
- UNIT_TESTS_PERSIST_WORKSPACE
# E2E: script-tag
- cypress/run:
name: 'E2E: Script Tag'
@@ -307,10 +362,10 @@ workflows:
yarn: true
store_artifacts: false
working_directory: platform/viewer
build: yarn run build:package
start: yarn run test:e2e:dist
build: npx cross-env QUICK_BUILD=true yarn run build:package
start: yarn run test:e2e:serve
wait-on: 'http://localhost:3000'
cache-key: 'yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}'
cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
no-workspace: true # Don't persist workspace
post-steps:
- store_artifacts:
@@ -318,7 +373,7 @@ workflows:
- store_test_results:
path: cypress/results
requires:
- UNIT_TESTS
- UNIT_TESTS_PERSIST_WORKSPACE
# Update NPM
- NPM_PUBLISH:
requires:
+46 -4
View File
@@ -1,23 +1,46 @@
const path = require('path');
const webpack = require('webpack');
// ~~ RULES
const loadShadersRule = require('./rules/loadShaders.js');
const loadWebWorkersRule = require('./rules/loadWebWorkers.js');
const transpileJavaScriptRule = require('./rules/transpileJavaScript.js');
// ~~ PLUGINS
const TerserJSPlugin = require('terser-webpack-plugin');
// ~~ ENV VARS
const NODE_ENV = process.env.NODE_ENV;
const QUICK_BUILD = process.env.QUICK_BUILD;
module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
if (!process.env.NODE_ENV) {
throw new Error('process.env.NODE_ENV not set');
}
const mode =
process.env.NODE_ENV === 'production' ? 'production' : 'development';
const mode = NODE_ENV === 'production' ? 'production' : 'development';
const isProdBuild = NODE_ENV === 'production';
const isQuickBuild = QUICK_BUILD === 'true';
return {
mode,
const config = {
mode: isProdBuild ? 'production' : 'development',
devtool: isProdBuild ? 'source-map' : 'cheap-module-eval-source-map',
entry: {
app: `${SRC_DIR}/index.js`,
},
optimization: {
minimize: isProdBuild,
sideEffects: true,
},
context: SRC_DIR,
stats: {
colors: true,
hash: true,
timings: true,
assets: true,
chunks: false,
chunkModules: false,
modules: false,
children: false,
warnings: true,
},
module: {
rules: [
transpileJavaScriptRule(mode),
@@ -53,4 +76,23 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
fs: 'empty',
},
};
if (isProdBuild) {
config.optimization.minimizer = [
new TerserJSPlugin({
// Supports:
// source-map and inline-source-map
sourceMap: isProdBuild && !isQuickBuild,
parallel: true,
terserOptions: {},
}),
];
}
if (isQuickBuild) {
config.optimization.minimize = false;
config.devtool = false;
}
return config;
};
+13 -6
View File
@@ -140,8 +140,8 @@ children: PropTypes.node,
customProps: PropTypes.object
```
Viewport components are managed by the `LayoutManager`. Which Viewport component
is used depends on:
Viewport components are managed by the `ViewportGrid` Component. Which Viewport
component is used depends on:
- The Layout Configuration
- Registered SopClassHandlers
@@ -159,8 +159,8 @@ For a complete example implementation,
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.
The given toolbar must determine its set of elements and the context of them. The set of elements will be listed on toolbar `definitions`.
store. The given toolbar must determine its set of elements and the context of
them. The set of elements will be listed on toolbar `definitions`.
![Toolbar Extension](../assets/img/extensions-toolbar.gif)
@@ -173,7 +173,11 @@ For a complete example implementation,
##### Toolbar Custom Component
Toolbar elements can define its own custom react component to be consumed when rendering it. So far, it accepts `Functional` and `Class` Components. For that, you just need to expose your `CustomToolbarComponent` as the value of key `CustomComponent`. In case the property `CustomComponent` is not present, a default toolbar component will be used to render it. See bellow
Toolbar elements can define its own custom react component to be consumed when
rendering it. So far, it accepts `Functional` and `Class` Components. For that,
you just need to expose your `CustomToolbarComponent` as the value of key
`CustomComponent`. In case the property `CustomComponent` is not present, a
default toolbar component will be used to render it. See bellow
```js
definitions: [
@@ -188,8 +192,11 @@ definitions: [
]
```
`CustomComponent` components will receive the following props:
- parentContext: parent context. (In most of the cases it will be a ToolbarRow instance)
- parentContext: parent context. (In most of the cases it will be a ToolbarRow
instance)
- toolbarClickCallback: callback method when clicking on toolbar
- button: its own definition object
- key: react key prop
+24
View File
@@ -3,6 +3,30 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.52.8](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.7...@ohif/extension-vtk@0.52.8) (2019-10-14)
**Note:** Version bump only for package @ohif/extension-vtk
## [0.52.7](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.6...@ohif/extension-vtk@0.52.7) (2019-10-11)
**Note:** Version bump only for package @ohif/extension-vtk
## [0.52.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.5...@ohif/extension-vtk@0.52.6) (2019-10-11)
**Note:** Version bump only for package @ohif/extension-vtk
## [0.52.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.4...@ohif/extension-vtk@0.52.5) (2019-10-10)
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@ohif/extension-vtk",
"version": "0.52.5",
"version": "0.52.8",
"description": "OHIF extension for VTK.js",
"author": "OHIF",
"license": "MIT",
@@ -51,8 +51,8 @@
"react-vtkjs-viewport": "^0.1.6"
},
"devDependencies": {
"@ohif/core": "^1.2.0",
"@ohif/ui": "^0.53.3",
"@ohif/core": "^1.3.2",
"@ohif/ui": "^0.53.4",
"cornerstone-tools": "^4.0.9",
"cornerstone-wado-image-loader": "^3.0.0",
"dcmjs": "^0.6.1",
+9 -1
View File
@@ -66,7 +66,13 @@ function getCrosshairCallbackForIndex(index) {
}
async function _getActiveViewportVTKApi(viewports) {
const { layout, viewportSpecificData, activeViewportIndex } = viewports;
const {
numRows,
numColumns,
layout,
viewportSpecificData,
activeViewportIndex,
} = viewports;
const currentData = layout.viewports[activeViewportIndex];
if (currentData && currentData.plugin === 'vtk') {
@@ -84,6 +90,8 @@ async function _getActiveViewportVTKApi(viewports) {
api = await setViewportToVTK(
displaySet,
activeViewportIndex,
numRows,
numColumns,
layout,
viewportSpecificData
);
+16 -33
View File
@@ -1,60 +1,43 @@
import setLayoutAndViewportData from './setLayoutAndViewportData.js';
import setSingleLayoutData from './setSingleLayoutData.js';
export default function setMPRLayout(displaySet) {
return new Promise((resolve, reject) => {
let viewports = [];
const rows = 1;
const columns = 3;
const numViewports = rows * columns;
const viewports = [];
const numRows = 1;
const numColumns = 3;
const numViewports = numRows * numColumns;
const viewportSpecificData = {};
for (let i = 0; i < numViewports; i++) {
viewports.push({
height: `${100 / rows}%`,
width: `${100 / columns}%`,
});
for (let i = 0; i < numViewports; i++) {
viewports.push({});
viewportSpecificData[i] = displaySet;
viewportSpecificData[i].plugin = 'vtk';
}
const layout = {
viewports,
};
const viewportIndices = [0, 1, 2];
let updatedViewports = layout.viewports;
const apis = [];
viewportIndices.forEach(viewportIndex => {
apis[viewportIndex] = null;
/*const currentData = layout.viewports[viewportIndex];
if (currentData && currentData.plugin === 'vtk') {
reject(new Error('Should not have reached this point??'));
}*/
const data = {
viewports.forEach((viewport, index) => {
apis[index] = null;
viewports[index] = Object.assign({}, viewports[index], {
// plugin: 'vtk',
vtk: {
mode: 'mpr', // TODO: not used
afterCreation: api => {
apis[viewportIndex] = api;
apis[index] = api;
if (apis.every(a => !!a)) {
resolve(apis);
}
},
},
};
updatedViewports = setSingleLayoutData(
updatedViewports,
viewportIndex,
data
);
});
});
setLayoutAndViewportData(
{ viewports: updatedViewports },
{
numRows,
numColumns,
viewports,
},
viewportSpecificData
);
});
@@ -1,12 +0,0 @@
export default function setSingleLayoutData(
originalArray,
viewportIndex,
data
) {
const viewports = originalArray.slice();
const layoutData = Object.assign({}, viewports[viewportIndex], data);
viewports[viewportIndex] = layoutData;
return viewports;
}
+11 -10
View File
@@ -1,9 +1,10 @@
import setLayoutAndViewportData from './setLayoutAndViewportData.js';
import setSingleLayoutData from './setSingleLayoutData.js';
export default function setViewportToVTK(
displaySet,
viewportIndex,
numRows,
numColumns,
layout,
viewportSpecificData
) {
@@ -13,7 +14,9 @@ export default function setViewportToVTK(
reject(new Error('Should not have reached this point??'));
}*/
const data = {
const viewports = layout.viewports.slice();
viewports[viewportIndex] = Object.assign({}, viewports[viewportIndex], {
// plugin: 'vtk',
vtk: {
mode: 'mpr', // TODO: not used
@@ -21,18 +24,16 @@ export default function setViewportToVTK(
resolve(api);
},
},
};
const updatedViewports = setSingleLayoutData(
layout.viewports,
viewportIndex,
data
);
});
const updatedViewportData = viewportSpecificData;
setLayoutAndViewportData(
{ viewports: updatedViewports },
{
numRows,
numColumns,
viewports,
},
updatedViewportData
);
});
+1 -1
View File
@@ -13,7 +13,6 @@
"scripts": {
"cm": "npx git-cz",
"build": "lerna run build:viewer --stream",
"build:e2e": "lerna run build:viewer:e2e --stream",
"build:ci": "lerna run build:viewer:ci --stream",
"build:demo": "lerna run build:viewer:demo --stream",
"build:package": "lerna run build:viewer:package --stream",
@@ -28,6 +27,7 @@
"test:unit:ci": "lerna run test:unit:ci --parallel --stream",
"test:e2e": "lerna run test:e2e --stream",
"test:e2e:dist": "lerna run test:e2e:dist --stream",
"test:e2e:serve": "lerna run test:e2e:serve --stream",
"see-changed": "lerna changed",
"docs:publish": "chmod +x ./build-and-publish-docs.sh && ./build-and-publish-docs.sh",
"release": "yarn run lerna:version && yarn run lerna:publish",
+30
View File
@@ -3,6 +3,36 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [1.3.2](https://github.com/OHIF/Viewers/compare/@ohif/core@1.3.1...@ohif/core@1.3.2) (2019-10-14)
### Bug Fixes
* Return display sets in StudyMetadata._createDisplaySetsForSeries ([#1042](https://github.com/OHIF/Viewers/issues/1042)) ([fc01532](https://github.com/OHIF/Viewers/commit/fc01532))
## [1.3.1](https://github.com/OHIF/Viewers/compare/@ohif/core@1.3.0...@ohif/core@1.3.1) (2019-10-11)
**Note:** Version bump only for package @ohif/core
# [1.3.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.2.0...@ohif/core@1.3.0) (2019-10-11)
### Features
* 🎸 Improve usability of Google Cloud adapter, including direct routes to studies ([#989](https://github.com/OHIF/Viewers/issues/989)) ([2bc361c](https://github.com/OHIF/Viewers/commit/2bc361c))
# [1.2.0](https://github.com/OHIF/Viewers/compare/@ohif/core@1.1.0...@ohif/core@1.2.0) (2019-10-09)
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@ohif/core",
"version": "1.2.0",
"version": "1.3.2",
"description": "Generic business logic for web-based medical imaging applications",
"author": "OHIF Core Team",
"license": "MIT",
-167
View File
@@ -1,167 +0,0 @@
# Table of contents
In this document, some important objects are described. In the files there are comments that can help better undestand their methods and properties.
- [ResizeViewportManager object](#the-resize-viewport-manager-object)
- [ImageSet object](#the-image-set-object)
- [Layout Manager](#the-layout-manager-object)
- [Type Safe Collections](#the-type-safe-collections)
# The Resize Viewport Manager object
This object has multiple functions to manage window resize event. It relocates Dialogs, resizes viewport elements and scrollbars and some other UI components such as Study and Series Quick Switch, when available.
## Usage
It's only necessary to bind **handleResize** function to the window resize event as follows. The **ohif:viewerbase** package needs to be imported by the referring code as well.
```javascript
import { Viewerbase } from 'meteor/ohif:viewerbase';
const ResizeViewportManager = new Viewerbase.ResizeViewportManager();
window.addEventListener('resize', ResizeViewportManager.getResizeHandler());
```
An example os its usage can be found in **ohif-viewerbase/client/components/viewer/viewerMain/viewerMain.js**.
# The Image Set object
An object that represents a list of images that are associated by any arbitrary criteria being thus content agnostic. Besides the main attributes (**images** and **uid**) it allows additional attributes to be appended to it (currently indiscriminately, but this should be changed).
## Usage
ImageSet constructor requires an array of SOP instances like in the example below. It's necessary to import **ohif:viewerbase**.
```javascript
import { Viewerbase } from 'meteor/ohif:viewerbase';
const imageSet = new Viewerbase.ImageSet(sopInstances);
imageSet.setAttributes({
displaySetInstanceUid: imageSet.uid,
seriesInstanceUid: seriesData.seriesInstanceUid,
seriesNumber: seriesData.seriesNumber,
seriesDescription: seriesData.seriesDescription,
numImageFrames: instances.length,
frameRate: instance.getRawValue('x00181063'),
modality: seriesData.modality,
isMultiFrame: isMultiFrame(instance)
});
// Sort instances by InstanceNumber (0020,0013)
imageSet.sortBy((a, b) => {
return (parseInt(a.getRawValue('x00200013', 0)) || 0) - (parseInt(b.getRawValue('x00200013', 0)) || 0);
});
```
Each SOP instance in this example is an instance of **OHIFInstanceMetadata** object, which is a specialization of **InstanceMetadata**. To read more about the **Metadata API** click [here](metadata/).
# The Layout Manager object
Objects of this class are responsible for creating, organizing and maintaining (manage) viewport rendering. It creates a grid, positioning viewports accordingly to it's configuration keeping all viewports data (in **viewportData** property) for easy access from other components. It support many layout configurations and some of them were fully tested: 1x1, 1x2, 1x3, 2x1, 2x2, 2x3, 3x1, 3x2, 3x3. Other configurations may work as well.
Finally it provides some useful functions to move through viewports and zoom it.
## Usage
In order to use _LayoutManager_ the **ohif:viewerbase** package needs to be imported by the referring code and instantiated as follows. An example os its usage is in **ohif-viewerbase/client/components/viewer/viewerMain/viewerMain.js**.
```javascript
import { Viewerbase } from 'meteor/ohif:viewerbase';
// Get an array of studies object. This function needs to be implemented, it does not exist.
const studies = getArrayOfStudiesObjects();
const parentElement = document.getElementById('layoutManagerTarget');
const LayoutManager = new Viewerbase.LayoutManager(parentElement, studies);
```
The default configuration is 1x1, and to change it just set **layoutProps** and call **updateViewports** to update the layout as follows.
```javascript
import { Viewerbase } from 'meteor/ohif:viewerbase';
// Get an array of studies object. This function needs to be implemented, it does not exist.
const studies = getArrayOfStudiesObjects();
const parentElement = document.getElementById('layoutManagerTarget');
const LayoutManager = new LayoutManager(parentElement, studies);
// Set the layout proprerties to 2x2 layout
LayoutManager.layoutProps = {
rows: 2,
columns: 2
};
// It will render four viewports: two in each row.
LayoutManager.updateViewports();
```
The layoutManagerTarget element will have a new class **layout-2-2** (to allow further styling) and it's inner content will a new div#imageViewerViewports that has four inner elements like the following (some elements and attributes were removed for example purpose):
```html
<div class="viewportContainer active" style="height:50%; width:50%;">
<div class="removable">
<div class="imageViewerViewport">
<canvas></canvas>
</div>
<div class="imageViewerViewportOverlay"></div>
<div class="imageViewerLoadingIndicator"></div>
<div class="imageViewerErrorLoadingIndicator"></div>
<div class="viewportOrientationMarkers"></div>
</div>
</div>
```
Each of this _div.viewportContainer_ will have some classes to help CSS specific styling accordingly to the element's position in the grid: **top**, **middle** and **bottom**. This classes are added by **viewer/components/gridLayout/** component in ohif-viewerbase package.
# The Type Safe Collections
With the introduction of the new _Study Metadata API_ in which study metadata is represented by class hierarchies (using prototype-based inheritance), the usage of standard _Minimongo_ collections as a central client-side storage for this data became no longer an option. Standard _Mongo_ and _Minimongo_ collections internally _flatten_ data (in other words, data gets serialized) before storage hence no functions or prototype chains are preserved. In that scenario, when an object is restored (fetched), what is returned is actually a flattened copy of the original object with no functions or prototype (it's no longer an instance of it's original class). As an attempt to overcome this limitation a new type of collection was intruduced: the *TypeSafeCollection*.
The `TypeSafeCollection` is a simple list-like collection which tries to implement an API _similar_ but not compatible with _Mongo_'s API. It supports basic features like search by attribute map and ID, retrieval by index, sorting of result sets, insertion, removal and reactive operations but, unlike _Mongo_'s API, it (still) lacks support to advanced functionality like complex search criterea or flexible sorting options.
## Implementation
The `TypeSafeCollection` is implemented on top of the _JavaScript_ `Array` object. Each element inserted in the collection is appended to the end of its internal array as a _key-value pair (KVP)_ object where the _key_ is a unique randomly generated ID string and the _value_ is the element itself. Once the object has been successfully stored, the generated ID (its ID) is returned to the client code and can later be used to access that specific element. At this point, an important difference to the _Minimongo_ API can be highlighted: a _TypeSafeCollection_ instance will never make any changes to the stored element (e.g., no "\_id" property will ever be assigned to the original object). Another relevant feature that is supported by this design decision is that _not only objects_ can be stored in this collections, but literally _anything_.
Inside the codebase, the _value_ attribute of each _KVP_ entry in the collection is refered to as _the **payload** of the entry_ since it's what really matters to the user. Hence, this term will also be used here to refer to the _value that has been stored in the collection_. That being said, we can approach another important feature of these collections: A single _payload_ cannot be stored more than once in a given collection. When an attempt of inserting a _payload_ which is already present in the collection is detected, the insert operation will fail and `null` will be returned. In that regard, the collection behaves like `Set` object not permitting a payload to be stored more than once. Strict equality is used when comparing payloads, thus cloned objects are not considered the same. This feature adds an additional garantee that a given study/series/instance will not be listed more than once (it was designed as a replacement for central study collections which were always checked for duplicates).
Please refer to the codebase for the full `TypeSafeCollection` API.
## Usage
In order to use the `TypeSafeCollection` class, the **ohif:viewerbase** package needs to be imported by the referring code and instantiated as follows:
```javascript
import { Viewerbase } from 'meteor/ohif:viewerbase'; // i.e., Viewerbase.TypeSafeCollection
OR
import 'meteor/ohif:viewerbase'; // i.e., OHIF.viewerbase.TypeSafeCollection
// The later is preferred when the client code already makes use of the "OHIF" namespace making the second
// "import" a garantee that the ".viewerbase" namespace has been properly loaded.
```
A few usage examples:
```javascript
const Users = new OHIF.viewerbase.TypeSafeCollection();
[[ ... ]]
// Insert a User object...
let userId = Users.insert({
data: {
firstName: 'John',
lastName: 'Doe',
age: 45
},
getFullName() {
return `${this.data.firstName} ${this.data.lastName}`;
},
getAge() {
return this.data.age;
}
});
[[ ... ]]
let theUserWeJustStored = Users.findById(userId); // ;-)
[[ ... ]]
// Retrieve a single user with "Doe" as `lastName`...
let myUser = Users.findBy({ 'data.lastName': 'Doe' });
// Or all users with "Doe" as `lastName`, sorted by `firstName` in ascending
// order and using the `age` attribute to break ties in descending order...
let myUsers = Users.findAllBy({ 'data.lastName': 'Doe' }, {
sort: [ [ 'data.firstName', 'asc' ], [ 'data.age', 'desc' ] ]
});
```
@@ -121,7 +121,7 @@ export class StudyMetadata extends Metadata {
if (displaySet) {
displaySet.sopClassModule = true;
displaySets.push(displaySet);
return;
return displaySets;
}
}
@@ -504,12 +504,12 @@ export default class ProtocolEngine {
/**
* Sets the current layout
*
* @param rows
* @param columns
* @param {number} numRows
* @param {number} numColumns
*/
setLayout(rows, columns) {
if (rows < 1 && columns < 1) {
log.error(`Invalid layout ${rows} x ${columns}`);
setLayout(numRows, numColumns) {
if (numRows < 1 && numColumns < 1) {
log.error(`Invalid layout ${numRows} x ${numColumns}`);
return;
}
@@ -519,16 +519,13 @@ export default class ProtocolEngine {
}
let viewports = [];
const numViewports = rows * columns;
const numViewports = numRows * numColumns;
for (let i = 0; i < numViewports; i++) {
viewports.push({
height: `${100 / rows}%`,
width: `${100 / columns}%`,
});
viewports.push({});
}
this.options.setLayout({ viewports });
this.options.setLayout({ numRows, numColumns, viewports });
}
/**
@@ -634,14 +631,10 @@ export default class ProtocolEngine {
//console.log('renderedCallback for ' + element.id);
customSettings.forEach(customSetting => {
log.trace(
`ProtocolEngine::currentViewportData.renderedCallback Applying custom setting: ${
customSetting.id
}`
`ProtocolEngine::currentViewportData.renderedCallback Applying custom setting: ${customSetting.id}`
);
log.trace(
`ProtocolEngine::currentViewportData.renderedCallback with value: ${
customSetting.value
}`
`ProtocolEngine::currentViewportData.renderedCallback with value: ${customSetting.value}`
);
const setting = CustomViewportSettings[customSetting.id];
+27 -8
View File
@@ -26,9 +26,34 @@ export const setViewportActive = viewportIndex => ({
viewportIndex,
});
export const setLayout = layout => ({
/**
* @param {object} layout
* @param {number} layout.numRows
* @param {number} layout.numColumns
* @param {array} layout.viewports
*/
export const setLayout = ({ numRows, numColumns, viewports }) => ({
type: SET_VIEWPORT_LAYOUT,
layout,
numRows,
numColumns,
viewports,
});
/**
* @param {object} layout
* @param {number} layout.numRows
* @param {number} layout.numColumns
* @param {array} layout.viewports
*/
export const setViewportLayoutAndData = (
{ numRows, numColumns, viewports },
viewportSpecificData
) => ({
type: SET_VIEWPORT_LAYOUT_AND_DATA,
numRows,
numColumns,
viewports,
viewportSpecificData,
});
export const clearViewportSpecificData = viewportIndex => ({
@@ -87,12 +112,6 @@ export const setServers = servers => ({
servers,
});
export const setViewportLayoutAndData = (layout, viewportSpecificData) => ({
type: SET_VIEWPORT_LAYOUT_AND_DATA,
layout,
viewportSpecificData,
});
const actions = {
// VIEWPORT
setViewportActive,
+11 -10
View File
@@ -94,19 +94,20 @@ describe('actions', () => {
});
it('should create an action to set the viewport layout', () => {
const layout = {
viewports: [
{
height: '100%',
width: '100%',
},
],
};
const numRows = 1;
const numColumns = 2;
const viewports = [{ plugin: 'vtk' }, { plugin: 'vtk' }];
const expectedAction = {
type: types.SET_VIEWPORT_LAYOUT,
layout,
numRows,
numColumns,
viewports,
};
expect(actions.setLayout(layout)).toEqual(expectedAction);
expect(actions.setLayout({ numRows, numColumns, viewports })).toEqual(
expectedAction
);
});
});
});
+2
View File
@@ -1,11 +1,13 @@
import actions from './actions.js';
import reducers from './reducers';
import localStorage from './localStorage.js';
import sessionStorage from './sessionStorage.js';
const redux = {
reducers,
actions,
localStorage,
sessionStorage,
};
export default redux;
+1 -1
View File
@@ -2,7 +2,7 @@ import redux from './index.js';
describe('redux exports', () => {
test('have not changed', () => {
const expectedExports = ['actions', 'reducers', 'localStorage'].sort();
const expectedExports = ['actions', 'reducers', 'localStorage', 'sessionStorage'].sort();
const exports = Object.keys(redux).sort();
+4 -2
View File
@@ -1,6 +1,8 @@
const LocalStorageApi = window.localStorage;
const localStorageKey = 'state';
export const loadState = () => {
try {
const serializedState = window.localStorage.getItem('state');
const serializedState = LocalStorageApi.getItem(localStorageKey);
if (!serializedState) {
return undefined;
}
@@ -14,7 +16,7 @@ export const loadState = () => {
export const saveState = state => {
try {
const serializedState = JSON.stringify(state);
localStorage.setItem('state', serializedState);
LocalStorageApi.setItem(localStorageKey, serializedState);
} catch (e) {}
};
+23 -9
View File
@@ -12,13 +12,13 @@ import cloneDeep from 'lodash.clonedeep';
import merge from 'lodash.merge';
const defaultState = {
numRows: 1,
numColumns: 1,
activeViewportIndex: 0,
layout: {
viewports: [
{
// plugin: 'cornerstone',
height: '100%',
width: '100%',
},
],
},
@@ -38,17 +38,31 @@ const viewports = (state = defaultState, action) => {
let viewportSpecificData;
let useActiveViewport = false;
switch (action.type) {
case SET_VIEWPORT_LAYOUT_AND_DATA:
return Object.assign({}, state, {
viewportSpecificData: action.viewportSpecificData,
layout: action.layout,
});
case SET_VIEWPORT_ACTIVE:
return Object.assign({}, state, {
activeViewportIndex: action.viewportIndex,
});
case SET_VIEWPORT_LAYOUT:
return Object.assign({}, state, { layout: action.layout });
case SET_VIEWPORT_LAYOUT: {
const { numRows, numColumns, viewports } = action;
const layout = {
viewports: [...viewports],
};
return Object.assign({}, state, { numRows, numColumns, layout });
}
case SET_VIEWPORT_LAYOUT_AND_DATA: {
const { numRows, numColumns, viewports, viewportSpecificData } = action;
const layout = {
viewports: [...viewports],
};
return Object.assign({}, state, {
numRows,
numColumns,
layout,
viewportSpecificData: cloneDeep(viewportSpecificData),
});
}
case SET_VIEWPORT: {
const layout = cloneDeep(state.layout);
const hasPlugin = action.data && action.data.plugin;
@@ -6,13 +6,10 @@ describe('viewports reducer', () => {
it('should return the initial state', () => {
expect(reducer(undefined, {})).toEqual({
activeViewportIndex: 0,
numRows: 1,
numColumns: 1,
layout: {
viewports: [
{
height: '100%',
width: '100%',
},
],
viewports: [{}],
},
viewportSpecificData: {},
});
@@ -34,23 +31,25 @@ describe('viewports reducer', () => {
it('should handle SET_VIEWPORT_LAYOUT', () => {
const setViewportLayoutAction = {
type: types.SET_VIEWPORT_LAYOUT,
layout: {
viewports: [
{
height: '100%',
width: '50%',
},
{
height: '100%',
width: '50%',
},
],
},
numRows: 1,
numColumns: 2,
viewports: [
{
plugin: 'cornerstone',
},
{
plugin: 'vtk',
},
],
};
const updatedState = reducer({}, setViewportLayoutAction);
expect(updatedState.layout).toEqual(setViewportLayoutAction.layout);
expect(updatedState.numRows).toEqual(setViewportLayoutAction.numRows);
expect(updatedState.numColumns).toEqual(setViewportLayoutAction.numColumns);
expect(updatedState.layout.viewports).toEqual(
setViewportLayoutAction.viewports
);
});
// If there were previous keys, this would have
+28
View File
@@ -0,0 +1,28 @@
const SessionStorageApi = window.sessionStorage;
const sessionStorageKey = 'state';
export const loadState = () => {
try {
const serializedState = SessionStorageApi.getItem(sessionStorageKey);
if (!serializedState) {
return undefined;
}
return JSON.parse(serializedState);
} catch (e) {
return undefined;
}
};
export const saveState = state => {
try {
const serializedState = JSON.stringify(state);
SessionStorageApi.setItem(sessionStorageKey, serializedState);
} catch (e) {}
};
const sessionStorage = {
saveState,
loadState,
};
export default sessionStorage;
+3
View File
@@ -9,6 +9,7 @@ import studyMetadataManager from './studyMetadataManager';
import updateMetaDataManager from './updateMetaDataManager.js';
import writeScript from './writeScript.js';
import DicomLoaderService from './dicomLoaderService.js';
import * as urlUtil from './urlUtil';
const utils = {
guid,
@@ -23,6 +24,7 @@ const utils = {
updateMetaDataManager,
DICOMTagDescriptions,
DicomLoaderService,
urlUtil,
};
export {
@@ -38,6 +40,7 @@ export {
updateMetaDataManager,
DICOMTagDescriptions,
DicomLoaderService,
urlUtil,
};
export default utils;
+1
View File
@@ -15,6 +15,7 @@ describe('Top level exports', () => {
'updateMetaDataManager',
'DICOMTagDescriptions',
'DicomLoaderService',
'urlUtil'
].sort();
const exports = Object.keys(utils.default).sort();
+67
View File
@@ -0,0 +1,67 @@
import lib from 'query-string';
const PARAM_SEPARATOR = ';';
const PARAM_PATTERN_IDENTIFIER = ':';
function toLowerCaseFirstLetter(word) {
return word[0].toLowerCase() + word.slice(1);
}
const getFilters = (location = {}) => {
const { search } = location;
if (!search) {
return;
}
const searchParameters = parse(search);
const filters = {};
Object.entries(searchParameters).forEach(([key, value]) => {
filters[toLowerCaseFirstLetter(key)] = value;
});
return filters;
};
const decode = (strToDecode = '') => {
try {
const decoded = window.atob(strToDecode);
return decoded;
} catch (e) {
return strToDecode;
}
};
const parse = toParse => {
if (toParse) {
return lib.parse(toParse);
}
return {};
};
const parseParam = paramStr => {
const _paramDecoded = decode(paramStr);
if (_paramDecoded && typeof _paramDecoded === 'string') {
return _paramDecoded.split(PARAM_SEPARATOR);
}
};
const replaceParam = (path = '', paramKey, paramValue) => {
const paramPattern = `${PARAM_PATTERN_IDENTIFIER}${paramKey}`;
if (paramValue) {
return path.replace(paramPattern, paramValue);
}
return path;
};
const queryString = {
getQueryFilters: getFilters,
};
const paramString = {
parseParam: parseParam,
replaceParam: replaceParam,
};
export { parse, queryString, paramString };
+8
View File
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.53.4](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.53.3...@ohif/ui@0.53.4) (2019-10-11)
**Note:** Version bump only for package @ohif/ui
## [0.53.3](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.53.2...@ohif/ui@0.53.3) (2019-10-10)
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@ohif/ui",
"version": "0.53.3",
"version": "0.53.4",
"description": "A set of React components for Medical Imaging Viewers",
"author": "OHIF Contributors",
"license": "MIT",
@@ -1,162 +0,0 @@
import './LayoutManager.css';
import React, { Component } from 'react';
import LayoutPanelDropTarget from './LayoutPanelDropTarget.js';
import PropTypes from 'prop-types';
function defaultViewportPlugin(props) {
return <div>{JSON.stringify(props)}</div>;
}
function EmptyViewport() {
return (
<div className="EmptyViewport">
<p>Please drag a stack here to view images.</p>
</div>
);
}
export class LayoutManager extends Component {
static className = 'LayoutManager';
static defaultProps = {
viewportData: [],
layout: {
viewports: [
{
top: 0,
left: 0,
height: '100%',
width: '100%',
},
],
},
activeViewportIndex: 0,
supportsDragAndDrop: true,
availablePlugins: {
defaultViewportPlugin,
},
defaultPlugin: 'defaultViewportPlugin',
};
static propTypes = {
viewportData: PropTypes.array.isRequired,
supportsDragAndDrop: PropTypes.bool.isRequired,
activeViewportIndex: PropTypes.number.isRequired,
layout: PropTypes.object.isRequired,
availablePlugins: PropTypes.object.isRequired,
setViewportData: PropTypes.func,
studies: PropTypes.array,
children: PropTypes.node,
};
onDrop = ({ viewportIndex, item }) => {
if (this.props.setViewportData) {
this.props.setViewportData({ viewportIndex, item });
}
};
getPluginComponent = plugin => {
const pluginComponent = this.props.availablePlugins[
plugin || this.props.defaultPlugin
];
if (!pluginComponent) {
throw new Error(
`No Viewport Plugin available for plugin ${plugin}. Available plugins: ${JSON.stringify(
this.props.availablePlugins
)}`
);
}
return pluginComponent;
};
getChildComponent(plugin, data, viewportIndex, children) {
if (data.displaySet) {
const PluginComponent = this.getPluginComponent(plugin);
return (
<PluginComponent
viewportData={data}
viewportIndex={viewportIndex}
children={[children]}
/>
);
}
return <EmptyViewport />;
}
getContent(childComponent, supportsDragAndDrop, viewportIndex) {
if (supportsDragAndDrop) {
return (
<LayoutPanelDropTarget
onDrop={this.onDrop}
viewportIndex={viewportIndex}
>
{childComponent}
</LayoutPanelDropTarget>
);
}
return <div className="LayoutPanel">{childComponent}</div>;
}
render() {
if (!this.props.viewportData.length) {
return '';
}
const { supportsDragAndDrop, studies, viewportData } = this.props;
const viewports = this.props.layout.viewports;
const viewportElements = viewports.map((layout, viewportIndex) => {
const displaySet = viewportData[viewportIndex];
const data = {
displaySet,
studies,
};
// Use whichever plugin is currently in use in the panel
// unless nothing is specified. If nothing is specified
// and the display set has a plugin specified, use that.
//
// TODO: Change this logic to:
// - Plugins define how capable they are of displaying a SopClass
// - When updating a panel, ensure that the currently enabled plugin
// in the viewport is capable of rendering this display set. If not
// then use the most capable available plugin
let plugin = layout.plugin;
if (!layout.plugin && displaySet && displaySet.plugin) {
plugin = displaySet.plugin;
}
const childComponent = this.getChildComponent(
plugin,
data,
viewportIndex,
this.props.children
);
const content = this.getContent(
childComponent,
supportsDragAndDrop,
viewportIndex
);
let className = 'viewport-container';
if (this.props.activeViewportIndex === viewportIndex) {
className += ' active';
}
return (
<div key={viewportIndex} className={className} style={{ ...layout }}>
{content}
</div>
);
});
return <div className={LayoutManager.className}>{viewportElements}</div>;
}
}
export default LayoutManager;
@@ -1,12 +0,0 @@
.LayoutPanelDropTarget {
width: 100%;
height: 100%;
opacity: 1;
transition: 0.3s all ease;
}
.LayoutPanelDropTarget.hovered {
opacity: 0.5;
cursor: copy;
}
@@ -1,74 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { DropTarget } from 'react-dnd';
import './LayoutPanelDropTarget.css';
// Drag sources and drop targets only interact
// if they have the same string type.
const Types = {
THUMBNAIL: 'thumbnail',
};
const divTarget = {
drop(props, monitor, component) {
const item = monitor.getItem();
if (props.onDrop) {
props.onDrop({
viewportIndex: props.viewportIndex,
item,
});
}
return {
id: `LayoutPanelDropTarget-${props.viewportIndex}`,
viewportIndex: props.viewportIndex,
item,
};
},
};
// TODO: Find out why we can't move this into the Example app instead.
// It looks like the context isn't properly shared.
class LayoutPanelDropTarget extends Component {
static className = 'LayoutPanelDropTarget';
static defaultProps = {
isOver: false,
canDrop: false,
};
static propTypes = {
connectDropTarget: PropTypes.func.isRequired,
canDrop: PropTypes.bool.isRequired,
isOver: PropTypes.bool.isRequired,
viewportComponent: PropTypes.object,
};
render() {
const { canDrop, isOver, connectDropTarget } = this.props;
const isActive = canDrop && isOver;
let className = LayoutPanelDropTarget.className;
if (isActive) {
className += ' hovered';
} else if (canDrop) {
className += ' can-drop';
}
return connectDropTarget(
<div className={className}>{this.props.children}</div>
);
}
}
const collect = (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
canDrop: monitor.canDrop(),
isOver: monitor.isOver(),
});
export default DropTarget(Types.THUMBNAIL, divTarget, collect)(
LayoutPanelDropTarget
);
+1 -6
View File
@@ -1,8 +1,4 @@
import {
ExampleDropTarget,
StudyBrowser,
ThumbnailEntry,
} from './studyBrowser';
import { StudyBrowser, ThumbnailEntry } from './studyBrowser';
import { LayoutButton, LayoutChooser } from './layoutButton';
import { MeasurementTable, MeasurementTableItem } from './measurementTable';
import { Overlay, OverlayTrigger } from './overlayTrigger';
@@ -26,7 +22,6 @@ import { Tooltip } from './tooltip';
export {
Checkbox,
CineDialog,
ExampleDropTarget,
LayoutButton,
LayoutChooser,
MeasurementTable,
@@ -8,7 +8,8 @@ import {
onThumbnailClick,
onThumbnailDoubleClick,
} from './exampleStudies.js';
import { ExampleDropTarget, StudyBrowser } from './../index.js';
import ExampleDropTarget from './ExampleDropTarget.js';
import { StudyBrowser } from './../index.js';
class StudyBrowserContainer extends Component {
render() {
@@ -1,3 +1,2 @@
export { ExampleDropTarget } from './ExampleDropTarget.js';
export { StudyBrowser } from './StudyBrowser.js';
export { ThumbnailEntry } from './ThumbnailEntry.js';
-6
View File
@@ -1,7 +1,6 @@
import {
Checkbox,
CineDialog,
ExampleDropTarget,
LayoutButton,
LayoutChooser,
MeasurementTable,
@@ -28,8 +27,6 @@ import { ICONS, Icon } from './elements';
// Alias this for now as not all dependents are using strict versioning
import { DropdownMenu as Dropdown, Range, Select } from './elements/form';
import ExpandableToolMenu from './viewer/ExpandableToolMenu.js';
import LayoutManager from './LayoutChooser/LayoutManager.js';
import LayoutPanelDropTarget from './LayoutChooser/LayoutPanelDropTarget.js';
import PlayClipButton from './viewer/PlayClipButton.js';
import { ScrollableArea } from './ScrollableArea/ScrollableArea.js';
import Toolbar from './viewer/Toolbar.js';
@@ -43,12 +40,9 @@ export {
CineDialog,
Dropdown,
ExpandableToolMenu,
ExampleDropTarget,
Icon,
LayoutButton,
LayoutChooser,
LayoutManager,
LayoutPanelDropTarget,
MeasurementTable,
MeasurementTableItem,
Overlay,
+8 -21
View File
@@ -1,8 +1,9 @@
// ~~ WebPack
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
//
// ~~ Plugins
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const fontsToJavaScriptRule = require('./rules/fontsToJavaScript.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -12,31 +13,14 @@ const DIST_DIR = path.join(__dirname, '../dist');
const PUBLIC_DIR = path.join(__dirname, '../public');
// ~~ Env Vars
const HTML_TEMPLATE = process.env.HTML_TEMPLATE || 'script-tag.html';
const PUBLIC_URL = process.env.PUBLIC_URL || '/';
module.exports = (env, argv) => {
const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
return merge(commonConfig, {
const mergedConfig = merge(commonConfig, {
entry: {
app: `${SRC_DIR}/index-umd.js`,
},
devtool: 'source-map',
stats: {
colors: true,
hash: true,
timings: true,
assets: true,
chunks: false,
chunkModules: false,
modules: false,
children: false,
warnings: true,
},
optimization: {
minimize: true,
sideEffects: true,
},
output: {
path: DIST_DIR,
library: 'OHIFViewer',
@@ -50,14 +34,17 @@ module.exports = (env, argv) => {
// Clean output.path
new CleanWebpackPlugin(),
// Generate "index.html" w/ correct includes/imports
// NOTE: We use this for E2E Tests
new HtmlWebpackPlugin({
inject: false,
template: `${PUBLIC_DIR}/html-templates/${HTML_TEMPLATE}`,
filename: 'index.html',
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
maxChunks: 1,
}),
],
});
return mergedConfig;
};
-27
View File
@@ -25,36 +25,18 @@ const PUBLIC_URL = process.env.PUBLIC_URL || '/';
const APP_CONFIG = process.env.APP_CONFIG || 'config/default.js';
const PROXY_TARGET = process.env.PROXY_TARGET;
const PROXY_DOMAIN = process.env.PROXY_DOMAIN;
const SKIP_MINIMIZE = process.env.SKIP_MINIMIZE;
module.exports = (env, argv) => {
const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR });
const isProdBuild = process.env.NODE_ENV === 'production';
const hasProxy = PROXY_TARGET && PROXY_DOMAIN;
const skipMinimize = SKIP_MINIMIZE === 'true';
const mergedConfig = merge(baseConfig, {
devtool: isProdBuild ? 'source-map' : 'cheap-module-eval-source-map',
output: {
path: DIST_DIR,
filename: isProdBuild ? '[name].bundle.[chunkhash].js' : '[name].js',
publicPath: PUBLIC_URL, // Used by HtmlWebPackPlugin for asset prefix
},
stats: {
colors: true,
hash: true,
timings: true,
assets: true,
chunks: false,
chunkModules: false,
modules: false,
children: false,
warnings: true,
},
optimization: {
minimize: isProdBuild && !skipMinimize,
sideEffects: true,
},
module: {
rules: [...extractStyleChunksRule(isProdBuild)],
},
@@ -131,15 +113,6 @@ module.exports = (env, argv) => {
if (!isProdBuild) {
mergedConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
} else {
mergedConfig.optimization.minimizer = [
new TerserJSPlugin({
sourceMap: true,
parallel: true,
}),
// No bueno
// new OptimizeCSSAssetsPlugin({}),
];
}
return mergedConfig;
+38
View File
@@ -3,6 +3,44 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [1.6.3](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.6.2...@ohif/viewer@1.6.3) (2019-10-14)
**Note:** Version bump only for package @ohif/viewer
## [1.6.2](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.6.1...@ohif/viewer@1.6.2) (2019-10-11)
**Note:** Version bump only for package @ohif/viewer
## [1.6.1](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.6.0...@ohif/viewer@1.6.1) (2019-10-11)
### Bug Fixes
* Switch token storage back to localStorage because in-memory was annoying for end users ([#1030](https://github.com/OHIF/Viewers/issues/1030)) ([412fe4e](https://github.com/OHIF/Viewers/commit/412fe4e))
# [1.6.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.5.4...@ohif/viewer@1.6.0) (2019-10-11)
### Features
* 🎸 Improve usability of Google Cloud adapter, including direct routes to studies ([#989](https://github.com/OHIF/Viewers/issues/989)) ([2bc361c](https://github.com/OHIF/Viewers/commit/2bc361c))
## [1.5.4](https://github.com/OHIF/Viewers/compare/@ohif/viewer@1.5.3...@ohif/viewer@1.5.4) (2019-10-10)
**Note:** Version bump only for package @ohif/viewer
+8 -9
View File
@@ -1,6 +1,6 @@
{
"name": "@ohif/viewer",
"version": "1.5.4",
"version": "1.6.3",
"description": "OHIF Viewer",
"author": "OHIF Contributors",
"license": "MIT",
@@ -17,11 +17,10 @@
},
"proxy": "http://localhost:8042",
"scripts": {
"build:package": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.commonjs.js",
"build:package": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.commonjs.js --progress",
"build:viewer": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js --progress",
"build:viewer:e2e": "cross-env NODE_ENV=development node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js --progress",
"build:viewer:ci": "cross-env NODE_ENV=production PUBLIC_URL=/pwa/ APP_CONFIG=config/netlify.js SKIP_MINIMIZE=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js",
"build:viewer:demo": "cross-env NODE_ENV=production APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html SKIP_MINIMIZE=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --progress --config .webpack/webpack.pwa.js",
"build:viewer:ci": "cross-env NODE_ENV=production PUBLIC_URL=/pwa/ APP_CONFIG=config/netlify.js QUICK_BUILD=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js",
"build:viewer:demo": "cross-env NODE_ENV=production APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html QUICK_BUILD=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --progress --config .webpack/webpack.pwa.js",
"build:viewer:package": "yarn run build:package",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config .webpack/webpack.pwa.js --watch",
"dev:orthanc": "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 --watch",
@@ -30,7 +29,7 @@
"test:e2e": "cypress open",
"test:e2e:ci": "cypress run",
"test:e2e:dist": "start-server-and-test test:e2e:serve http://localhost:3000 test:e2e:ci",
"test:e2e:serve": "serve -l 3000 -s dist",
"test:e2e:serve": "serve -n -l 3000 -s dist",
"test:unit": "jest --watchAll",
"test:unit:ci": "jest --ci --runInBand --collectCoverage",
"prepublishOnly": "yarn run build:package",
@@ -46,14 +45,14 @@
},
"dependencies": {
"@babel/runtime": "^7.5.5",
"@ohif/core": "^1.2.0",
"@ohif/core": "^1.3.2",
"@ohif/extension-cornerstone": "^2.0.0",
"@ohif/extension-dicom-html": "^1.0.0",
"@ohif/extension-dicom-microscopy": "^0.50.6",
"@ohif/extension-dicom-pdf": "^1.0.0",
"@ohif/extension-vtk": "^0.52.5",
"@ohif/extension-vtk": "^0.52.8",
"@ohif/i18n": "^0.50.5",
"@ohif/ui": "^0.53.3",
"@ohif/ui": "^0.53.4",
"@tanem/react-nprogress": "^1.1.25",
"classnames": "^2.2.6",
"core-js": "^3.2.1",
+10 -66
View File
@@ -8,44 +8,18 @@ import { connect } from 'react-redux';
import { ViewerbaseDragDropContext } from '@ohif/ui';
import { SignoutCallbackComponent } from 'redux-oidc';
import asyncComponent from './components/AsyncComponent.js';
import * as RoutesUtil from './routes/routesUtil';
import NotFound from './routes/NotFound.js';
import { Bar, Container } from './components/LoadingBar/';
import './OHIFStandaloneViewer.css';
import './variables.css';
import './theme-tide.css';
// Contexts
import AppContext from './context/AppContext';
// Dynamic Import Routes (CodeSplitting)
const IHEInvokeImageDisplay = asyncComponent(() =>
import(
/* webpackChunkName: "IHEInvokeImageDisplay" */ './routes/IHEInvokeImageDisplay.js'
)
);
const ViewerRouting = asyncComponent(() =>
import(/* webpackChunkName: "ViewerRouting" */ './routes/ViewerRouting.js')
);
const StudyListRouting = asyncComponent(() =>
import(
/* webpackChunkName: "StudyListRouting" */ './studylist/StudyListRouting.js'
)
);
const StandaloneRouting = asyncComponent(() =>
import(
/* webpackChunkName: "StandaloneRouting" */ './routes/StandaloneRouting.js'
)
);
const CallbackPage = asyncComponent(() =>
import(/* webpackChunkName: "CallbackPage" */ './routes/CallbackPage.js')
);
const ViewerLocalFileData = asyncComponent(() =>
import(
/* webpackChunkName: "ViewerLocalFileData" */ './connectedComponents/ViewerLocalFileData.js'
)
);
const reload = () => window.location.reload();
class OHIFStandaloneViewer extends Component {
static contextType = AppContext;
@@ -86,7 +60,11 @@ class OHIFStandaloneViewer extends Component {
return (
<Switch>
<Route exact path="/silent-refresh.html" onEnter={reload} />
<Route
exact
path="/silent-refresh.html"
onEnter={RoutesUtil.reload}
/>
<Route
exact
path="/logout-redirect"
@@ -128,41 +106,7 @@ class OHIFStandaloneViewer extends Component {
*
* See http://reactcommunity.org/react-transition-group/with-react-router/
*/
const routes = [
{
path: '/local',
Component: ViewerLocalFileData,
},
{
path: '/viewer',
Component: StandaloneRouting,
},
{
path: '/viewer/:studyInstanceUids',
Component: ViewerRouting,
},
{
path: '/study/:studyInstanceUids/series/:seriesInstanceUids',
Component: ViewerRouting,
},
{
path: '/IHEInvokeImageDisplay',
Component: IHEInvokeImageDisplay,
},
];
const showStudyList =
appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
if (showStudyList) {
routes.push({
path: '/studylist',
Component: StudyListRouting,
});
routes.push({
path: '/',
Component: StudyListRouting,
});
}
const routes = RoutesUtil.getRoutes(appConfig);
const currentPath = this.props.location.pathname;
const noMatchingRoutes = !routes.find(r =>
@@ -184,8 +128,8 @@ class OHIFStandaloneViewer extends Component {
</Container>
)}
</NProgress>
<Route exact path="/silent-refresh.html" onEnter={reload} />
<Route exact path="/logout-redirect.html" onEnter={reload} />
<Route exact path="/silent-refresh.html" onEnter={RoutesUtil.reload} />
<Route exact path="/logout-redirect.html" onEnter={RoutesUtil.reload} />
{!noMatchingRoutes &&
routes.map(({ path, Component }) => (
<Route key={path} exact path={path}>
@@ -1,7 +1,7 @@
import { LayoutManager } from '@ohif/ui';
import ViewportGrid from './ViewportGrid.js';
import { MODULE_TYPES } from '@ohif/core';
import { connect } from 'react-redux';
import { extensionManager } from './../App.js';
import { extensionManager } from './../../App.js';
const mapStateToProps = state => {
const availableViewportModules = {};
@@ -18,9 +18,13 @@ const mapStateToProps = state => {
defaultPlugin = viewportModules[0].extensionId;
}
const { numRows, numColumns, layout, activeViewportIndex } = state.viewports;
return {
layout: state.viewports.layout,
activeViewportIndex: state.viewports.activeViewportIndex,
numRows,
numColumns,
layout,
activeViewportIndex,
// TODO: rename `availableViewportModules`
availablePlugins: availableViewportModules,
// TODO: rename `defaultViewportModule`
@@ -28,9 +32,9 @@ const mapStateToProps = state => {
};
};
const ConnectedLayoutManager = connect(
const ConnectedViewportGrid = connect(
mapStateToProps,
null
)(LayoutManager);
)(ViewportGrid);
export default ConnectedLayoutManager;
export default ConnectedViewportGrid;
@@ -0,0 +1,10 @@
/**
*
*
* @export
* @param {*} props
* @returns
*/
export default function DefaultViewport(props) {
return <div>{JSON.stringify(props)}</div>;
}
@@ -0,0 +1,7 @@
.empty-viewport {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: var(--text-secondary-color);
}
@@ -0,0 +1,12 @@
/**
*
*
* @returns
*/
function EmptyViewport() {
return (
<div className="empty-viewport">
<p>Please drag a stack here to view images.</p>
</div>
);
}
@@ -7,16 +7,3 @@
.viewport-container.active {
border: var(--viewport-border-thickness) solid var(--active-color);
}
.EmptyViewport {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: var(--text-secondary-color);
}
.LayoutPanel {
width: 100%;
height: 100%;
}
@@ -0,0 +1,168 @@
import './ViewportGrid.css';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
//
import ViewportPane from './ViewportPane.js';
import DefaultViewport from './DefaultViewport.js';
import EmptyViewport from './EmptyViewport.js';
const ViewportGrid = function(props) {
const {
activeViewportIndex,
availablePlugins,
defaultPlugin: defaultPluginName,
layout,
numRows,
numColumns,
setViewportData,
studies,
viewportData,
children,
} = props;
const rowSize = 100 / numRows;
const colSize = 100 / numColumns;
// http://grid.malven.co/
if (!viewportData || !viewportData.length) {
return null;
}
const ViewportPanes = layout.viewports.map((layout, viewportIndex) => {
const displaySet = viewportData[viewportIndex];
const data = {
displaySet,
studies,
};
// Use whichever plugin is currently in use in the panel
// unless nothing is specified. If nothing is specified
// and the display set has a plugin specified, use that.
//
// TODO: Change this logic to:
// - Plugins define how capable they are of displaying a SopClass
// - When updating a panel, ensure that the currently enabled plugin
// in the viewport is capable of rendering this display set. If not
// then use the most capable available plugin
const pluginName =
!layout.plugin && displaySet && displaySet.plugin
? displaySet.plugin
: layout.plugin;
const ViewportComponent = _getViewportComponent(
data, // Why do we pass this as `ViewportData`, when that's not really what it is?
viewportIndex,
children,
availablePlugins,
pluginName,
defaultPluginName
);
return (
<ViewportPane
onDrop={({
viewportIndex,
studyInstanceUid,
displaySetInstanceUid,
}) => {
setViewportData({
viewportIndex,
studyInstanceUid,
displaySetInstanceUid,
});
}}
viewportIndex={viewportIndex} // Needed by `setViewportData`
className={classNames('viewport-container', {
active: activeViewportIndex === viewportIndex,
})}
key={viewportIndex}
>
{ViewportComponent}
</ViewportPane>
);
});
return (
<div
style={{
display: 'grid',
gridTemplateRows: `repeat(${numRows}, ${rowSize}%)`,
gridTemplateColumns: `repeat(${numColumns}, ${colSize}%)`,
height: '100%',
width: '100%',
}}
>
{ViewportPanes}
</div>
);
};
ViewportGrid.propTypes = {
viewportData: PropTypes.array.isRequired,
supportsDragAndDrop: PropTypes.bool.isRequired,
activeViewportIndex: PropTypes.number.isRequired,
layout: PropTypes.object.isRequired,
availablePlugins: PropTypes.object.isRequired,
setViewportData: PropTypes.func.isRequired,
studies: PropTypes.array,
children: PropTypes.node,
};
ViewportGrid.defaultProps = {
viewportData: [],
numRows: 1,
numColumns: 1,
layout: {
viewports: [{}],
},
activeViewportIndex: 0,
supportsDragAndDrop: true,
availablePlugins: {
DefaultViewport,
},
defaultPlugin: 'defaultViewportPlugin',
};
/**
*
*
* @param {*} plugin
* @param {*} viewportData
* @param {*} viewportIndex
* @param {*} children
* @returns
*/
function _getViewportComponent(
viewportData,
viewportIndex,
children,
availablePlugins,
pluginName,
defaultPluginName
) {
if (viewportData.displaySet) {
pluginName = pluginName || defaultPluginName;
const ViewportComponent = availablePlugins[pluginName];
if (!ViewportComponent) {
throw new Error(
`No Viewport Component available for name ${pluginName}.
Available plugins: ${JSON.stringify(availablePlugins)}`
);
}
return (
<ViewportComponent
viewportData={viewportData}
viewportIndex={viewportIndex}
children={[children]}
/>
);
}
return <EmptyViewport />;
}
export default ViewportGrid;
@@ -0,0 +1,10 @@
.viewport-drop-target {
opacity: 1;
position: relative; /* Locks in Scrollbar */
transition: 0.3s all ease;
}
.viewport-drop-target.hovered {
opacity: 0.5;
cursor: copy;
}
@@ -0,0 +1,51 @@
import React from 'react';
import { useDrop } from 'react-dnd';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import './ViewportPane.css';
const ViewportPane = function(props) {
const { children, onDrop, viewportIndex, className: propClassName } = props;
const [{ hovered, highlighted }, drop] = useDrop({
accept: 'thumbnail',
drop: (droppedItem, monitor) => {
const canDrop = monitor.canDrop();
const isOver = monitor.isOver();
if (canDrop && isOver && onDrop) {
const { studyInstanceUid, displaySetInstanceUid } = droppedItem;
onDrop({ viewportIndex, studyInstanceUid, displaySetInstanceUid });
}
},
// Monitor, and collect props.
// Returned as values by `useDrop`
collect: monitor => ({
highlighted: monitor.canDrop(),
hovered: monitor.isOver(),
}),
});
return (
<div
className={classNames(
'viewport-drop-target',
{ hovered: hovered },
{ highlighted: highlighted },
propClassName
)}
ref={drop}
>
{children}
</div>
);
};
ViewportPane.propTypes = {
children: PropTypes.node.isRequired,
viewportIndex: PropTypes.number.isRequired,
onDrop: PropTypes.func.isRequired,
className: PropTypes.string,
};
export default ViewportPane;
@@ -0,0 +1,5 @@
import ConnectedViewportGrid from './ConnectedViewportGrid.js';
import ViewportGrid from './ViewportGrid.js';
export default ViewportGrid;
export { ConnectedViewportGrid, ViewportGrid };
@@ -7,7 +7,7 @@ const { setLayout, setViewportActive } = OHIF.redux.actions;
const mapStateToProps = state => {
return {
currentLayout: state.viewports.layout,
activeViewportIndex: state.viewports.activeViewportIndex
activeViewportIndex: state.viewports.activeViewportIndex,
};
};
@@ -15,10 +15,11 @@ const mapDispatchToProps = dispatch => {
return {
// TODO: Change if layout switched becomes more complex
onChange: (selectedCell, currentLayout, activeViewportIndex) => {
let viewports = [];
const rows = selectedCell.row + 1;
const columns = selectedCell.col + 1;
const numViewports = rows * columns;
const viewports = [];
const numRows = selectedCell.row + 1;
const numColumns = selectedCell.col + 1;
const numViewports = numRows * numColumns;
for (let i = 0; i < numViewports; i++) {
// Hacky way to allow users to exit MPR "mode"
const viewport = currentLayout.viewports[i];
@@ -28,16 +29,16 @@ const mapDispatchToProps = dispatch => {
}
viewports.push({
height: `${100 / rows}%`,
width: `${100 / columns}%`,
plugin,
});
}
const layout = {
numRows,
numColumns,
viewports,
};
const maxActiveIndex = rows * columns - 1;
const maxActiveIndex = numViewports - 1;
if (activeViewportIndex > maxActiveIndex) {
dispatch(setViewportActive(0));
}
@@ -52,9 +53,10 @@ const mergeProps = (propsFromState, propsFromDispatch) => {
const { currentLayout, activeViewportIndex } = propsFromState;
return {
onChange: selectedCell => onChangeFromDispatch(selectedCell, currentLayout, activeViewportIndex)
onChange: selectedCell =>
onChangeFromDispatch(selectedCell, currentLayout, activeViewportIndex),
};
}
};
const ConnectedLayoutButton = connect(
mapStateToProps,
@@ -1,9 +1,9 @@
import OHIF from "@ohif/core";
import PluginSwitch from "./PluginSwitch.js";
import { commandsManager } from "./../App.js";
import { connect } from "react-redux";
// import OHIF from '@ohif/core';
import PluginSwitch from './PluginSwitch.js';
import { commandsManager } from './../App.js';
import { connect } from 'react-redux';
const { setLayout } = OHIF.redux.actions;
// const { setLayout } = OHIF.redux.actions;
const mapStateToProps = state => {
const { activeViewportIndex, layout, viewportSpecificData } = state.viewports;
@@ -11,17 +11,17 @@ const mapStateToProps = state => {
return {
activeViewportIndex,
viewportSpecificData,
layout
layout,
};
};
const mapDispatchToProps = dispatch => {
return {
setLayout: data => {
dispatch(setLayout(data));
}
};
};
// const mapDispatchToProps = dispatch => {
// return {
// setLayout: data => {
// dispatch(setLayout(data));
// }
// };
// };
/*function setSingleLayoutData(originalArray, viewportIndex, data) {
const viewports = originalArray.slice();
@@ -39,19 +39,17 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
// TODO: Do not display certain options if the current display set
// cannot be displayed using these view types
const mpr = () => {
commandsManager.runCommand("mpr2d");
}
;
commandsManager.runCommand('mpr2d');
};
return {
mpr
mpr,
};
};
const ConnectedPluginSwitch = connect(
mapStateToProps,
mapDispatchToProps,
null, // mapDispatchToProps
mergeProps
)(PluginSwitch);
export default ConnectedPluginSwitch;
export default ConnectedPluginSwitch;
@@ -13,9 +13,7 @@ class PluginSwitch extends Component {
render() {
return (
<div className="PluginSwitch">
<ToolbarButton label = "2D MPR"
icon = "cube"
onClick = {this.props.mpr} />
<ToolbarButton label="2D MPR" icon="cube" onClick={this.props.mpr} />
</div>
);
}
@@ -1,7 +1,7 @@
import './ViewerMain.css';
import { Component } from 'react';
import ConnectedLayoutManager from './ConnectedLayoutManager.js';
import { ConnectedViewportGrid } from './../components/ViewportGrid/index.js';
import ConnectedToolContextMenu from './ConnectedToolContextMenu.js';
import PropTypes from 'prop-types';
import React from 'react';
@@ -124,11 +124,15 @@ class ViewerMain extends Component {
return viewportData;
};
setViewportData = ({ viewportIndex, item }) => {
setViewportData = ({
viewportIndex,
studyInstanceUid,
displaySetInstanceUid,
}) => {
const displaySet = this.findDisplaySet(
this.props.studies,
item.studyInstanceUid,
item.displaySetInstanceUid
studyInstanceUid,
displaySetInstanceUid
);
this.props.setViewportSpecificData(viewportIndex, displaySet);
@@ -138,14 +142,14 @@ class ViewerMain extends Component {
return (
<div className="ViewerMain">
{this.state.displaySets.length && (
<ConnectedLayoutManager
<ConnectedViewportGrid
studies={this.props.studies}
viewportData={this.getViewportData()}
setViewportData={this.setViewportData}
>
{/* Children to add to each viewport that support children */}
<ConnectedToolContextMenu />
</ConnectedLayoutManager>
</ConnectedViewportGrid>
)}
</div>
);
@@ -0,0 +1,77 @@
import React, { useContext } from 'react';
import GoogleCloudApi from '../googleCloud/api/GoogleCloudApi';
import * as GoogleCloudUtilServers from '../googleCloud/utils/getServers';
import { useSelector, useDispatch } from 'react-redux';
// Contexts
import AppContext from '../context/AppContext';
const getActiveServer = servers => {
const isActive = a => a.active === true;
return servers && servers.servers && servers.servers.find(isActive);
};
const getServers = (appConfig, project, location, dataset, dicomStore) => {
let servers = [];
if (appConfig.enableGoogleCloudAdapter) {
const pathUrl = GoogleCloudApi.getUrlBaseDicomWeb(
project,
location,
dataset,
dicomStore
);
const data = {
project,
location,
dataset,
dicomStore,
wadoUriRoot: pathUrl,
qidoRoot: pathUrl,
wadoRoot: pathUrl,
};
servers = GoogleCloudUtilServers.getServers(data, dicomStore);
}
return servers;
};
const updateServer = (
appConfig,
dispatch,
project,
location,
dataset,
dicomStore
) => {
const servers = getServers(appConfig, project, location, dataset, dicomStore);
if (servers && servers.length) {
const action = {
type: 'SET_SERVERS',
servers,
};
dispatch(action);
}
};
export default function useServer({
project,
location,
dataset,
dicomStore,
} = {}) {
// Hooks
const servers = useSelector(state => state && state.servers);
const dispatch = useDispatch();
const { appConfig = {} } = useContext(AppContext);
const server = getActiveServer(servers);
if (!server) {
updateServer(appConfig, dispatch, project, location, dataset, dicomStore);
} else {
return server;
}
}
@@ -4,6 +4,7 @@ import Modal from 'react-bootstrap-modal';
import DatasetSelector from './DatasetSelector';
import './googleCloud.css';
import { withTranslation } from 'react-i18next';
import * as GoogleCloudUtilServers from './utils/getServers';
class DicomStorePickerModal extends Component {
static propTypes = {
@@ -19,21 +20,7 @@ class DicomStorePickerModal extends Component {
};
handleEvent = data => {
const servers = [
{
name: data.dicomStore,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
qidoSupportsIncludeField: false,
type: 'dicomWeb',
qidoRoot: data.qidoRoot,
wadoRoot: data.wadoRoot,
wadoUriRoot: data.wadoUriRoot,
active: true,
supportsFuzzyMatching: false,
},
];
const servers = GoogleCloudUtilServers.getServers(data, data.dicomstore);
this.props.setServers(servers);
};
@@ -22,6 +22,13 @@ class GoogleCloudApi {
return this.urlBase + `/projects`;
}
getUrlBaseDicomWeb(project, location, dataset, dicomStore) {
return (
this.urlBase +
`/projects/${project}/locations/${location}/datasets/${dataset}/dicomStores/${dicomStore}/dicomWeb`
);
}
async doRequest(urlStr, config = {}, params = {}) {
const url = new URL(urlStr);
let data = null;
@@ -0,0 +1,32 @@
const getServers = (data, name) => {
const {
wadoUriRoot,
qidoRoot,
wadoRoot,
dataset = '',
dicomStore = '',
location = '',
project = '',
} = data;
return [
{
name: name,
dataset,
dicomStore,
location,
project,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
type: 'dicomWeb',
active: true,
wadoUriRoot,
qidoRoot,
wadoRoot,
supportsFuzzyMatching: false,
qidoSupportsIncludeField: false,
},
];
};
export { getServers };
@@ -1,29 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import queryString from 'query-string';
import ConnectedViewerRetrieveStudyData from '../connectedComponents/ConnectedViewerRetrieveStudyData.js';
function decodeStudyUids(studyUids) {
const decodedData = window.atob(studyUids);
return decodedData.split(';');
}
function getQueryParameters(location) {
if (location) {
return queryString.parse(location.search);
}
return {};
}
import OHIF from '@ohif/core';
const { urlUtil: UrlUtil } = OHIF.utils;
function IHEInvokeImageDisplay({ location }) {
const {
// patientID,
requestType,
studyUID,
} = getQueryParameters(location);
} = UrlUtil.parse(location.search);
switch (requestType) {
case 'STUDY':
@@ -36,7 +23,7 @@ function IHEInvokeImageDisplay({ location }) {
case 'STUDYBASE64':
return (
<ConnectedViewerRetrieveStudyData
studyInstanceUids={decodeStudyUids(studyUID)}
studyInstanceUids={UrlUtil.paramString.parseParam(studyUID)}
/>
);
+40 -15
View File
@@ -1,26 +1,47 @@
import React from 'react';
import PropTypes from 'prop-types';
import ConnectedViewerRetrieveStudyData from '../connectedComponents/ConnectedViewerRetrieveStudyData';
import useServer from '../customHooks/useServer';
import OHIF from '@ohif/core';
const { urlUtil: UrlUtil } = OHIF.utils;
function ViewerRouting({ match }) {
const { studyInstanceUids, seriesInstanceUids } = match.params;
/**
* Get array of seriesUIDs from param or from queryString
* @param {*} seriesInstanceUIDs
* @param {*} location
*/
const getSeriesInstanceUIDs = (seriesInstanceUIDs, routeLocation) => {
const queryFilters = UrlUtil.queryString.getQueryFilters(routeLocation);
const querySeriesUIDs = queryFilters && queryFilters['SeriesInstanceUID'];
const _seriesInstanceUIDs = seriesInstanceUIDs || querySeriesUIDs;
let studyUIDs;
let seriesUIDs;
return UrlUtil.paramString.parseParam(_seriesInstanceUIDs);
};
if (studyInstanceUids && !seriesInstanceUids) {
studyUIDs = studyInstanceUids.split(';');
} else if (studyInstanceUids && seriesInstanceUids) {
studyUIDs = [studyInstanceUids];
seriesUIDs = match.params.seriesInstanceUids.split(';');
function ViewerRouting({ match: routeMatch, location: routeLocation }) {
const {
project,
location,
dataset,
dicomStore,
studyInstanceUids,
seriesInstanceUids,
} = routeMatch.params;
const server = useServer({ project, location, dataset, dicomStore });
const studyUIDs = UrlUtil.paramString.parseParam(studyInstanceUids);
const seriesUIDs = getSeriesInstanceUIDs(seriesInstanceUids, routeLocation);
if (server && studyUIDs) {
return (
<ConnectedViewerRetrieveStudyData
studyInstanceUids={studyUIDs}
seriesInstanceUids={seriesUIDs}
/>
);
}
return (
<ConnectedViewerRetrieveStudyData
studyInstanceUids={studyUIDs}
seriesInstanceUids={seriesUIDs}
/>
);
return null;
}
ViewerRouting.propTypes = {
@@ -28,6 +49,10 @@ ViewerRouting.propTypes = {
params: PropTypes.shape({
studyInstanceUids: PropTypes.string.isRequired,
seriesInstanceUids: PropTypes.string,
dataset: PropTypes.string,
dicomStore: PropTypes.string,
location: PropTypes.string,
project: PropTypes.string,
}),
}),
};
+114
View File
@@ -0,0 +1,114 @@
import asyncComponent from '../components/AsyncComponent.js';
import OHIF from '@ohif/core';
const { urlUtil: UrlUtil } = OHIF.utils;
// Dynamic Import Routes (CodeSplitting)
const IHEInvokeImageDisplay = asyncComponent(() =>
import(
/* webpackChunkName: "IHEInvokeImageDisplay" */ './IHEInvokeImageDisplay.js'
)
);
const ViewerRouting = asyncComponent(() =>
import(/* webpackChunkName: "ViewerRouting" */ './ViewerRouting.js')
);
const StudyListRouting = asyncComponent(() =>
import(
/* webpackChunkName: "StudyListRouting" */ '../studylist/StudyListRouting.js'
)
);
const StandaloneRouting = asyncComponent(() =>
import(/* webpackChunkName: "StandaloneRouting" */ './StandaloneRouting.js')
);
const ViewerLocalFileData = asyncComponent(() =>
import(
/* webpackChunkName: "ViewerLocalFileData" */ '../connectedComponents/ViewerLocalFileData.js'
)
);
const reload = () => window.location.reload();
const ROUTES_DEF = {
default: {
viewer: {
path: '/viewer/:studyInstanceUids',
component: ViewerRouting,
},
standaloneViewer: {
path: '/viewer',
component: StandaloneRouting,
},
list: {
path: ['/studylist', '/'],
component: StudyListRouting,
condition: appConfig => {
return appConfig.showStudyList !== undefined
? appConfig.showStudyList
: true;
},
},
local: {
path: '/local',
component: ViewerLocalFileData,
},
IHEInvokeImageDisplay: {
path: '/IHEInvokeImageDisplay',
},
},
gcloud: {
viewer: {
path:
'/projects/:project/locations/:location/datasets/:dataset/dicomStores/:dicomStore/study/:studyInstanceUids',
component: ViewerRouting,
condition: appConfig => {
return !!appConfig.enableGoogleCloudAdapter;
},
},
},
};
const getRoutes = appConfig => {
const routes = [];
for (let keyConfig in ROUTES_DEF) {
const routesConfig = ROUTES_DEF[keyConfig];
for (let routeKey in routesConfig) {
const route = routesConfig[routeKey];
const validRoute =
typeof route.condition === 'function'
? route.condition(appConfig)
: true;
if (validRoute) {
routes.push({
path: route.path,
Component: route.component,
});
}
}
}
return routes;
};
const parseViewerPath = (appConfig = {}, server = {}, params) => {
let viewerPath = ROUTES_DEF.default.viewer.path;
if (appConfig.enableGoogleCloudAdapter) {
viewerPath = ROUTES_DEF.gcloud.viewer.path;
}
const _paramsCopy = Object.assign({}, server, params);
for (let key in _paramsCopy) {
viewerPath = UrlUtil.paramString.replaceParam(
viewerPath,
key,
_paramsCopy[key]
);
}
return viewerPath;
};
export { getRoutes, parseViewerPath, reload };
+10 -2
View File
@@ -13,7 +13,7 @@ import thunkMiddleware from 'redux-thunk';
// Combine our @ohif/core, ui, and oidc reducers
// Set init data, using values found in localStorage
const { reducers, localStorage } = redux;
const { reducers, localStorage, sessionStorage } = redux;
const middleware = [thunkMiddleware];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
@@ -21,9 +21,14 @@ reducers.ui = layoutReducers;
reducers.oidc = oidcReducer;
const rootReducer = combineReducers(reducers);
const preloadedState = {
...localStorage.loadState(),
...sessionStorage.loadState(),
};
const store = createStore(
rootReducer,
localStorage.loadState(), // preloadedState
preloadedState,
composeEnhancers(applyMiddleware(...middleware))
);
@@ -33,6 +38,9 @@ store.subscribe(() => {
localStorage.saveState({
preferences: store.getState().preferences,
});
sessionStorage.saveState({
servers: store.getState().servers,
});
});
export default store;
@@ -1,33 +1,18 @@
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import queryString from 'query-string';
import ConnectedStudyList from './ConnectedStudyList';
import OHIF from '@ohif/core';
const { urlUtil: UrlUtil } = OHIF.utils;
// Contexts
import AppContext from '../context/AppContext';
// TODO: Move to @ohif/ui
function toLowerCaseFirstLetter(word) {
return word[0].toLowerCase() + word.slice(1);
}
function getFilters({ search }) {
const searchParameters = queryString.parse(search);
const filters = {};
Object.entries(searchParameters).forEach(([key, value]) => {
filters[toLowerCaseFirstLetter(key)] = value;
});
return filters;
}
function StudyListRouting({ location }) {
const { appConfig = {} } = useContext(AppContext);
const filters = location ? getFilters(location) : undefined;
const filters = UrlUtil.queryString.getQueryFilters(location);
let studyListFunctionsEnabled = false;
if (appConfig.studyListFunctionsEnabled) {
@@ -6,6 +6,7 @@ import { withRouter } from 'react-router-dom';
import { withTranslation } from 'react-i18next';
import { StudyList } from '@ohif/ui';
import ConnectedHeader from '../connectedComponents/ConnectedHeader.js';
import * as RoutesUtil from '../routes/routesUtil';
import moment from 'moment';
import ConnectedDicomFilesUploader from '../googleCloud/ConnectedDicomFilesUploader';
import ConnectedDicomStorePicker from '../googleCloud/ConnectedDicomStorePicker';
@@ -175,7 +176,12 @@ class StudyListWithData extends Component {
};
onSelectItem = studyInstanceUID => {
this.props.history.push(`/viewer/${studyInstanceUID}`);
const { appConfig = {} } = this.context;
const { server } = this.props;
const viewerPath = RoutesUtil.parseViewerPath(appConfig, server, {
studyInstanceUids: studyInstanceUID,
});
this.props.history.push(viewerPath);
};
onSearch = searchData => {
@@ -1,6 +1,5 @@
// https://github.com/maxmantz/redux-oidc/blob/master/docs/API.md
import { loadUser, createUserManager } from 'redux-oidc';
import { WebStorageStateStore, InMemoryWebStorage } from 'oidc-client';
/**
* Creates a userManager from oidcSettings;
@@ -21,17 +20,12 @@ export default function(store, oidcSettings) {
return;
}
// Do not store tokens in localStorage or sessionStorage
// https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/HTML5_Security_Cheat_Sheet.md#local-storage
const userStore = new WebStorageStateStore({ store: new InMemoryWebStorage() });
const settings = {
...oidcSettings,
automaticSilentRenew: true,
revokeAccessTokenOnSignout: true,
filterProtocolClaims: true,
loadUserInfo: true,
userStore,
};
const userManager = createUserManager(settings);