Compare commits
15
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
84144bc3ef | ||
|
|
5cbdd0c616 | ||
|
|
fc015326c7 | ||
|
|
01860b6094 | ||
|
|
cfdf827ff0 | ||
|
|
ceb6837153 | ||
|
|
b01b0108b0 | ||
|
|
d6862e7418 | ||
|
|
beb7083e55 | ||
|
|
412fe4e23f | ||
|
|
659649e10b | ||
|
|
f431b277dd | ||
|
|
2bc361cdca | ||
|
|
c6f306c0de | ||
|
|
c0ea27f6b3 |
No files matched your search
+95
-40
@@ -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:
|
||||
|
||||
@@ -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;
|
||||
};
|
||||
@@ -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`.
|
||||
|
||||

|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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
@@ -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",
|
||||
|
||||
@@ -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,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",
|
||||
|
||||
@@ -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];
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
@@ -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();
|
||||
|
||||
|
||||
@@ -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) {}
|
||||
};
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -15,6 +15,7 @@ describe('Top level exports', () => {
|
||||
'updateMetaDataManager',
|
||||
'DICOMTagDescriptions',
|
||||
'DicomLoaderService',
|
||||
'urlUtil'
|
||||
].sort();
|
||||
|
||||
const exports = Object.keys(utils.default).sort();
|
||||
|
||||
@@ -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 };
|
||||
@@ -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,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,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,
|
||||
|
||||
File renamed without changes.
File renamed without changes.
@@ -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';
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
};
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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}>
|
||||
|
||||
+11
-7
@@ -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>
|
||||
);
|
||||
}
|
||||
-13
@@ -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)}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
@@ -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,
|
||||
}),
|
||||
}),
|
||||
};
|
||||
|
||||
@@ -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 };
|
||||
@@ -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);
|
||||
|
||||
Reference in new issue
Block a user