fix: remove docz + node version fix on docker (#2743)
* fix: docz uses too outdated packages and current documentation hasnt being updated oftenly. removing it * fix: node docker version to prevent node req "^12.13.0 || ^14.15.0 || >=16" issue
This commit is contained in:
ladeirarodolfo
GitHub
parent
383a0ef167
commit
7164d1a654
@ -27,7 +27,7 @@ executors:
|
|||||||
- image: 'cypress/browsers:node14.15.0-chrome86-ff82'
|
- image: 'cypress/browsers:node14.15.0-chrome86-ff82'
|
||||||
defaults: &defaults
|
defaults: &defaults
|
||||||
docker:
|
docker:
|
||||||
- image: cimg/node:14.18
|
- image: cimg/node:14.19
|
||||||
environment:
|
environment:
|
||||||
TERM: xterm # Enable colors in term
|
TERM: xterm # Enable colors in term
|
||||||
QUICK_BUILD: true
|
QUICK_BUILD: true
|
||||||
@ -347,9 +347,8 @@ workflows:
|
|||||||
store_artifacts: true
|
store_artifacts: true
|
||||||
working_directory: platform/viewer
|
working_directory: platform/viewer
|
||||||
build:
|
build:
|
||||||
git submodule update --init &&
|
git submodule update --init && npx cross-env QUICK_BUILD=true
|
||||||
npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js
|
APP_CONFIG=config/e2e.js yarn run build
|
||||||
yarn run build
|
|
||||||
start: yarn run test:e2e:serve
|
start: yarn run test:e2e:serve
|
||||||
spec: 'cypress/integration/common/**/*,cypress/integration/pwa/**/*'
|
spec: 'cypress/integration/common/**/*,cypress/integration/pwa/**/*'
|
||||||
wait-on: 'http://localhost:3000'
|
wait-on: 'http://localhost:3000'
|
||||||
@ -376,9 +375,8 @@ workflows:
|
|||||||
store_artifacts: true
|
store_artifacts: true
|
||||||
working_directory: platform/viewer
|
working_directory: platform/viewer
|
||||||
build:
|
build:
|
||||||
git submodule update --init &&
|
git submodule update --init && npx cross-env QUICK_BUILD=true
|
||||||
npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js
|
APP_CONFIG=config/e2e.js yarn run build:package
|
||||||
yarn run build:package
|
|
||||||
start: yarn run test:e2e:serve
|
start: yarn run test:e2e:serve
|
||||||
spec: 'cypress/integration/common/**/*,cypress/integration/script-tag/**/*'
|
spec: 'cypress/integration/common/**/*,cypress/integration/script-tag/**/*'
|
||||||
wait-on: 'http://localhost:3000'
|
wait-on: 'http://localhost:3000'
|
||||||
@ -410,9 +408,8 @@ workflows:
|
|||||||
store_artifacts: false
|
store_artifacts: false
|
||||||
working_directory: platform/viewer
|
working_directory: platform/viewer
|
||||||
build:
|
build:
|
||||||
git submodule update --init &&
|
git submodule update --init && npx cross-env QUICK_BUILD=true
|
||||||
npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js
|
APP_CONFIG=config/e2e.js yarn run build
|
||||||
yarn run build
|
|
||||||
# start server --> verify running --> percy + chrome + cypress
|
# start server --> verify running --> percy + chrome + cypress
|
||||||
command: yarn run test:e2e:dist
|
command: yarn run test:e2e:dist
|
||||||
cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
|
cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
|
||||||
@ -490,9 +487,8 @@ workflows:
|
|||||||
store_artifacts: false
|
store_artifacts: false
|
||||||
working_directory: platform/viewer
|
working_directory: platform/viewer
|
||||||
build:
|
build:
|
||||||
git submodule update --init &&
|
git submodule update --init && npx cross-env QUICK_BUILD=true
|
||||||
npx cross-env QUICK_BUILD=true APP_CONFIG=config/e2e.js
|
APP_CONFIG=config/e2e.js yarn run build
|
||||||
yarn run build
|
|
||||||
# start server --> verify running --> percy + chrome + cypress
|
# start server --> verify running --> percy + chrome + cypress
|
||||||
command: yarn run test:e2e:dist
|
command: yarn run test:e2e:dist
|
||||||
cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
|
cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
|
||||||
|
|||||||
2
.gitignore
vendored
2
.gitignore
vendored
@ -8,7 +8,6 @@ docs/_book
|
|||||||
src/version.js
|
src/version.js
|
||||||
junit.xml
|
junit.xml
|
||||||
coverage/
|
coverage/
|
||||||
.docz/
|
|
||||||
*.js.map
|
*.js.map
|
||||||
.yarn
|
.yarn
|
||||||
platform/docs/.docusaurus
|
platform/docs/.docusaurus
|
||||||
@ -38,4 +37,3 @@ screenshots/
|
|||||||
|
|
||||||
# Locize settings
|
# Locize settings
|
||||||
.locize
|
.locize
|
||||||
|
|
||||||
|
|||||||
@ -22,16 +22,6 @@ mv platform/viewer/dist/* .netlify/www/pwa -v
|
|||||||
# Build && Move script output
|
# Build && Move script output
|
||||||
# yarn run build:package
|
# yarn run build:package
|
||||||
|
|
||||||
# Build && Move Docz Output
|
|
||||||
# Using local yarn install to prevent Gatsby from needing to access
|
|
||||||
# node_modules above the platform/ui folder
|
|
||||||
cd platform/ui
|
|
||||||
yarn install
|
|
||||||
yarn run build
|
|
||||||
cd ../..
|
|
||||||
mkdir -p ./.netlify/www/ui
|
|
||||||
mv platform/ui/.docz/dist/* .netlify/www/ui -v
|
|
||||||
|
|
||||||
# Cache all of the node_module dependencies in
|
# Cache all of the node_module dependencies in
|
||||||
# extensions, modules, and platform packages
|
# extensions, modules, and platform packages
|
||||||
yarn run lerna:cache
|
yarn run lerna:cache
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
|
|
||||||
# Stage 1: Build the application
|
# Stage 1: Build the application
|
||||||
# docker build -t ohif/viewer:latest .
|
# docker build -t ohif/viewer:latest .
|
||||||
FROM node:15.13.0-slim as builder
|
FROM node:14-slim as builder
|
||||||
|
|
||||||
RUN mkdir /usr/src/app
|
RUN mkdir /usr/src/app
|
||||||
WORKDIR /usr/src/app
|
WORKDIR /usr/src/app
|
||||||
@ -42,7 +42,7 @@ COPY yarn.lock /usr/src/app/yarn.lock
|
|||||||
RUN apt-get update && apt-get install -y python make g++
|
RUN apt-get update && apt-get install -y python make g++
|
||||||
# Run the install before copying the rest of the files
|
# Run the install before copying the rest of the files
|
||||||
RUN yarn config set workspaces-experimental true
|
RUN yarn config set workspaces-experimental true
|
||||||
RUN yarn install
|
RUN yarn install --verbose
|
||||||
|
|
||||||
ENV PATH /usr/src/app/node_modules/.bin:$PATH
|
ENV PATH /usr/src/app/node_modules/.bin:$PATH
|
||||||
ENV QUICK_BUILD true
|
ENV QUICK_BUILD true
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
####
|
####
|
||||||
##
|
##
|
||||||
## We need to pin WebPack's version for docz to work. See this issue:
|
|
||||||
## https://github.com/pedronauck/docz/issues/704#issuecomment-480295032
|
|
||||||
##
|
|
||||||
## react-scripts checks that dependency versions match before running
|
## react-scripts checks that dependency versions match before running
|
||||||
## Our top level webpack version causes the preflight check to fail
|
## Our top level webpack version causes the preflight check to fail
|
||||||
## This prevents that check
|
## This prevents that check
|
||||||
|
|||||||
@ -1,75 +0,0 @@
|
|||||||
/**
|
|
||||||
* Docz Configuration File:
|
|
||||||
* https://www.docz.site/docs/project-configuration
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { css } from "docz-plugin-css";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
dest: "example/build",
|
|
||||||
public: "/public",
|
|
||||||
wrapper: "src/__docs__/wrapper",
|
|
||||||
indexHtml: "src/__docs__/index.html",
|
|
||||||
// Limited support for importing `.styl` files
|
|
||||||
codeSandbox: false,
|
|
||||||
// https://github.com/pedronauck/docz/pull/849/files
|
|
||||||
// Because we re-export using `index.js` files
|
|
||||||
notUseSpecifiers: true,
|
|
||||||
menu: [
|
|
||||||
"Introduction",
|
|
||||||
"Getting Started",
|
|
||||||
{ name: "Elements", menu: ["Form / Select"] },
|
|
||||||
{
|
|
||||||
name: "Components",
|
|
||||||
menu: [
|
|
||||||
"CINE Dialog",
|
|
||||||
"Layout Button",
|
|
||||||
"Measurement Table",
|
|
||||||
"Overlay Trigger",
|
|
||||||
"Quick Switch",
|
|
||||||
"Rounded Button Group",
|
|
||||||
"Select Tree",
|
|
||||||
"Simple Dialog",
|
|
||||||
"Study Browser",
|
|
||||||
"Study List",
|
|
||||||
"Table List",
|
|
||||||
"Toolbar Section",
|
|
||||||
"About Modal",
|
|
||||||
"User Preferences Modal"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"Styling & Theming",
|
|
||||||
"Translating",
|
|
||||||
"Compatibility"
|
|
||||||
],
|
|
||||||
// Rollup Aliases?
|
|
||||||
// https://github.com/pedronauck/docz/issues/373
|
|
||||||
plugins: [
|
|
||||||
// CSS
|
|
||||||
css(),
|
|
||||||
// Stylus
|
|
||||||
css({
|
|
||||||
preprocessor: "stylus",
|
|
||||||
cssmodules: false
|
|
||||||
})
|
|
||||||
],
|
|
||||||
// `docz` uses file-loader to pull in SVGs. This kills our icons before
|
|
||||||
// They can be picked up by our `babel-plugin-inline-react-svg` dependency
|
|
||||||
// You can see where it's configured here:
|
|
||||||
// https://github.com/pedronauck/docz/blob/f72624d0aa5231dab17e1770e8d36be920f590a2/core/docz-core/src/bundler/loaders.ts#L135-L144
|
|
||||||
// How we delete our rule:
|
|
||||||
// https://github.com/neutrinojs/webpack-chain/issues/48
|
|
||||||
onCreateWebpackChain: config => {
|
|
||||||
config.module.rules.delete("svg");
|
|
||||||
},
|
|
||||||
modifyBabelRc: babelrc => {
|
|
||||||
const newBabelRc = {
|
|
||||||
...babelrc,
|
|
||||||
plugins: [
|
|
||||||
...babelrc.plugins,
|
|
||||||
require.resolve("babel-plugin-inline-react-svg")
|
|
||||||
]
|
|
||||||
};
|
|
||||||
return newBabelRc;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
const path = require('path');
|
|
||||||
// ~~ Plugins
|
|
||||||
const PnpWebpackPlugin = require(`pnp-webpack-plugin`); // Required until Webpack@5
|
|
||||||
|
|
||||||
exports.onCreateWebpackConfig = args => {
|
|
||||||
args.actions.setWebpackConfig({
|
|
||||||
node: { fs: 'empty' },
|
|
||||||
resolve: {
|
|
||||||
plugins: [PnpWebpackPlugin],
|
|
||||||
// Note the '..' in the path because docz gatsby project lives in the '.docz' directory
|
|
||||||
modules: [
|
|
||||||
// platform/ui
|
|
||||||
path.resolve(__dirname, '../node_modules'),
|
|
||||||
// .docz
|
|
||||||
'node_modules',
|
|
||||||
],
|
|
||||||
// resolve: {
|
|
||||||
// symlinks: true,
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
resolveLoader: {
|
|
||||||
plugins: [PnpWebpackPlugin.moduleLoader(module)],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@ -20,9 +20,8 @@
|
|||||||
"README.md"
|
"README.md"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "docz dev",
|
"dev": "echo \"No dev script yet\" && exit 0",
|
||||||
"dev:ui": "yarn run dev",
|
"dev:ui": "yarn run dev",
|
||||||
"docs": "docz build",
|
|
||||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||||
"build:package": "yarn run build",
|
"build:package": "yarn run build",
|
||||||
"prepublishOnly": "yarn run build",
|
"prepublishOnly": "yarn run build",
|
||||||
@ -64,10 +63,6 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@mdx-js/tag": "^0.20.3",
|
"@mdx-js/tag": "^0.20.3",
|
||||||
"autoprefixer": "^9.6.0",
|
"autoprefixer": "^9.6.0",
|
||||||
"docz": "1.2.0",
|
|
||||||
"docz-core": "1.2.0",
|
|
||||||
"docz-plugin-css": "0.11.0",
|
|
||||||
"docz-theme-default": "1.2.0",
|
|
||||||
"lodash.clonedeep": "^4.5.0",
|
"lodash.clonedeep": "^4.5.0",
|
||||||
"react-powerplug": "1.0.0"
|
"react-powerplug": "1.0.0"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,17 +0,0 @@
|
|||||||
import React, { Fragment } from 'react';
|
|
||||||
import { Link } from 'docz';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
const NameSpace = ({ name }) => (
|
|
||||||
<Fragment>
|
|
||||||
The namespace used on this component was: <pre>{name}</pre> Check the{' '}
|
|
||||||
<Link to="/translating#how-to-translate-components">translation docs</Link>{' '}
|
|
||||||
to see how to override it.
|
|
||||||
</Fragment>
|
|
||||||
);
|
|
||||||
|
|
||||||
NameSpace.propTypes = {
|
|
||||||
name: PropTypes.string.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default NameSpace;
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
@ -1,15 +0,0 @@
|
|||||||
---
|
|
||||||
name: Compatibility
|
|
||||||
route: /compatibility
|
|
||||||
---
|
|
||||||
|
|
||||||
# Compatibility
|
|
||||||
|
|
||||||
## Browser Support
|
|
||||||
|
|
||||||
`@ohif/ui` relies on
|
|
||||||
[browsers supported by Styled Components](https://www.styled-components.com/docs/faqs#which-browsers-are-supported)
|
|
||||||
or browsers supported by emotion.
|
|
||||||
|
|
||||||
Supported Browsers: IE11, IE 9+ (with Map + Set polyfills), Chrome, Firefox (and
|
|
||||||
derivatives), Edge, and Safari.
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
---
|
|
||||||
name: Docs Settings
|
|
||||||
route: /docs-settings
|
|
||||||
---
|
|
||||||
|
|
||||||
import LanguageSwitcher from '../components/languageSwitcher';
|
|
||||||
|
|
||||||
# Components Language
|
|
||||||
|
|
||||||
You can change the language of the components displayed in this documentation by
|
|
||||||
choosing an option in the selector below:
|
|
||||||
|
|
||||||
<LanguageSwitcher />
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
---
|
|
||||||
name: Getting Started
|
|
||||||
route: /getting-started
|
|
||||||
---
|
|
||||||
|
|
||||||
# Getting Started
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
> This component library is pre- v1.0. All realeases until a v1.0 have the
|
|
||||||
> possibility of introducing breaking changes. Please depend on an "exact"
|
|
||||||
> version in your projects to prevent issues caused by loose versioning.
|
|
||||||
|
|
||||||
Install `@ohif/ui` from npm:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
// with npm
|
|
||||||
npm i @ohif/ui --save-exact
|
|
||||||
|
|
||||||
// with yarn
|
|
||||||
yarn add @ohif/ui --exact
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
There is some setup required for `@ohif/ui`. We are working to eliminate these
|
|
||||||
requirements with the goal of providing ready to use components.
|
|
||||||
|
|
||||||
### External Dependencies
|
|
||||||
|
|
||||||
We have tried to keep the number of external dependencies limited to make setup
|
|
||||||
as easy as possible. You will, however, need to include either the default font
|
|
||||||
or the font you set for your theme:
|
|
||||||
|
|
||||||
```js
|
|
||||||
// Google Fonts, Roboto
|
|
||||||
'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap';
|
|
||||||
```
|
|
||||||
|
|
||||||
`@ohif/ui` also looks for theme CSS variabled defined on `:root`. You can find a
|
|
||||||
list of variables [on the theming page](/styling-and-theming)
|
|
||||||
|
|
||||||
### Import & Use
|
|
||||||
|
|
||||||
You can use components in your React app:
|
|
||||||
|
|
||||||
```js
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import { LayoutButton } from '@ohif/ui';
|
|
||||||
|
|
||||||
class Example extends Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
selectedCell: {
|
|
||||||
className: 'hover',
|
|
||||||
col: 1,
|
|
||||||
row: 1,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<LayoutButton
|
|
||||||
selectedCell={this.state.selectedCell}
|
|
||||||
onChange={cell => this.setState({ selectedCell: cell })}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
> NOTE: It is heavily recommended that you use a CSS reset or normalize. As well
|
|
||||||
> as the following style: `* { Box-sizing: Border-box }`
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="{{ lang }}">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="description" content="{{ description }}">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
||||||
|
|
||||||
<title>{{ title }}</title>
|
|
||||||
|
|
||||||
<!-- Latest compiled and minified CSS -->
|
|
||||||
<link rel="stylesheet" href="/public/docz.css">
|
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* "Tide" theme */
|
|
||||||
/* TODO:
|
|
||||||
- Convert the other themes to CSS Variables
|
|
||||||
- Allow user to set default CSS theme in JS config
|
|
||||||
- Export the themes as identical JS objects
|
|
||||||
- For theme switcher, update root-level CSS properties via JS (https://medium.com/@_bengarrison/accessing-and-modifying-css-variables-with-javascript-2ccb735bbff0)
|
|
||||||
*/
|
|
||||||
:root {
|
|
||||||
/* Interface UI Colors */
|
|
||||||
--default-color: #9CCEF9;
|
|
||||||
--hover-color: #ffffff;
|
|
||||||
--active-color: #20A5D6;
|
|
||||||
--ui-border-color: #44626F;
|
|
||||||
--ui-border-color-dark: #3C5D80;
|
|
||||||
--ui-border-color-active: #00a4d9;
|
|
||||||
--primary-background-color: #000000;
|
|
||||||
--box-background-color: #3E5975;
|
|
||||||
|
|
||||||
--text-primary-color: #ffffff;
|
|
||||||
--text-secondary-color: #91B9CD;
|
|
||||||
--input-background-color: #2c363f;
|
|
||||||
--input-placeholder-color: #d3d3d3;
|
|
||||||
|
|
||||||
--table-hover-color: #2c363f;
|
|
||||||
--table-text-primary-color: #ffffff;
|
|
||||||
--table-text-secondary-color: #91b9cd;
|
|
||||||
|
|
||||||
--large-numbers-color: #6FBDE2;
|
|
||||||
|
|
||||||
--state-error: #FFCCCC;
|
|
||||||
--state-error-border: #FFCCCC;
|
|
||||||
--state-error-text: #FFCCCC;
|
|
||||||
|
|
||||||
/* Common palette */
|
|
||||||
--ui-yellow: #E29E4A;
|
|
||||||
--ui-sky-blue: #6FBDE2;
|
|
||||||
/* State palette */
|
|
||||||
--ui-state-error: #FFCCCC;
|
|
||||||
--ui-state-error-border: #993333;
|
|
||||||
--ui-state-error-text: #661111;
|
|
||||||
--ui-gray-lighter: #436270;
|
|
||||||
--ui-gray-light: #516873;
|
|
||||||
--ui-gray: #263340;
|
|
||||||
--ui-gray-dark: #16202B;
|
|
||||||
--ui-gray-darker: #151A1F;
|
|
||||||
--ui-gray-darkest: #14202A;
|
|
||||||
|
|
||||||
--calendar-day-color: #d3d3d3;
|
|
||||||
--calendar-day-border-color: #d3d3d3;
|
|
||||||
--calendar-day-active-hover-background-color: #516873;
|
|
||||||
--calendar-main-color: #263340;
|
|
||||||
--viewport-border-thickness: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Roboto', sans-serif !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
{{ head }}
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="root" />
|
|
||||||
{{ footer }}
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
---
|
|
||||||
name: Introduction
|
|
||||||
route: /
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz';
|
|
||||||
import { State } from 'react-powerplug';
|
|
||||||
import { TableList, TableListItem } from './../index.js';
|
|
||||||
|
|
||||||
# Introduction
|
|
||||||
|
|
||||||
**@ohif/ui is a collection of components and utilities** that power OHIF's
|
|
||||||
[zero-footprint DICOM viewer](https://github.com/OHIF/Viewers)
|
|
||||||
([demo][demo-url]). We maintain them as a separate component library to:
|
|
||||||
|
|
||||||
- Decouple presentation from business logic
|
|
||||||
- Test and develop components in isolation
|
|
||||||
- Provide well documented, reusable components
|
|
||||||
- Aid rapid application development for context specific viewers
|
|
||||||
|
|
||||||
## Quick Example
|
|
||||||
|
|
||||||
> This component library is pre- v1.0. All realeases until a v1.0 have the
|
|
||||||
> possibility of introducing breaking changes. Please depend on an "exact"
|
|
||||||
> version in your projects to prevent issues caused by loose versioning.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// Add '@ohif/ui' as a dependency
|
|
||||||
yarn add @ohif/ui
|
|
||||||
|
|
||||||
// Import and use components
|
|
||||||
import { TableList } from '@ohif/ui'
|
|
||||||
```
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{
|
|
||||||
selectedIndex: null,
|
|
||||||
listItems: [
|
|
||||||
{ label: 'Brain Left' },
|
|
||||||
{ label: 'Brain Right' },
|
|
||||||
{ label: 'Heart Left' },
|
|
||||||
{ label: 'Heart Right' },
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<TableList headerTitle="Example Table List Header">
|
|
||||||
{state.listItems.map((item, index) => {
|
|
||||||
return (
|
|
||||||
<TableListItem
|
|
||||||
key={`item_${index}`}
|
|
||||||
itemClass={state.selectedIndex === index ? 'selected' : ''}
|
|
||||||
itemIndex={index}
|
|
||||||
onItemClick={() => alert('item clicked')}
|
|
||||||
>
|
|
||||||
<label>{item.label}</label>
|
|
||||||
</TableListItem>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</TableList>
|
|
||||||
)}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## FAQ
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Links
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!-- prettier-ignore-start -->
|
|
||||||
[demo-url]: https://docs.ohif.org/demo/
|
|
||||||
<!-- prettier-ignore-end -->
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
---
|
|
||||||
name: Styling & Theming
|
|
||||||
route: /styling-and-theming
|
|
||||||
---
|
|
||||||
|
|
||||||
# Styling & Theming
|
|
||||||
|
|
||||||
```css
|
|
||||||
:root {
|
|
||||||
/* Interface UI Colors */
|
|
||||||
--default-color: #9ccef9;
|
|
||||||
--hover-color: #ffffff;
|
|
||||||
--active-color: #20a5d6;
|
|
||||||
--ui-border-color: #44626f;
|
|
||||||
--ui-border-color-dark: #3c5d80;
|
|
||||||
--ui-border-color-active: #00a4d9;
|
|
||||||
--primary-background-color: #000000;
|
|
||||||
--box-background-color: #3e5975;
|
|
||||||
|
|
||||||
--text-primary-color: #ffffff;
|
|
||||||
--text-secondary-color: #91b9cd;
|
|
||||||
--input-background-color: #2c363f;
|
|
||||||
--input-placeholder-color: #d3d3d3;
|
|
||||||
|
|
||||||
--table-hover-color: #2c363f;
|
|
||||||
--table-text-primary-color: #ffffff;
|
|
||||||
--table-text-secondary-color: #91b9cd;
|
|
||||||
|
|
||||||
--large-numbers-color: #6fbde2;
|
|
||||||
|
|
||||||
--state-error: #ffcccc;
|
|
||||||
--state-error-border: #ffcccc;
|
|
||||||
--state-error-text: #ffcccc;
|
|
||||||
|
|
||||||
/* Common palette */
|
|
||||||
--ui-yellow: #e29e4a;
|
|
||||||
--ui-sky-blue: #6fbde2;
|
|
||||||
|
|
||||||
/* State palette */
|
|
||||||
--ui-state-error: #ffcccc;
|
|
||||||
--ui-state-error-border: #993333;
|
|
||||||
--ui-state-error-text: #661111;
|
|
||||||
--ui-gray-lighter: #436270;
|
|
||||||
--ui-gray-light: #516873;
|
|
||||||
--ui-gray: #263340;
|
|
||||||
--ui-gray-dark: #16202b;
|
|
||||||
--ui-gray-darker: #151a1f;
|
|
||||||
--ui-gray-darkest: #14202a;
|
|
||||||
|
|
||||||
--calendar-day-color: #d3d3d3;
|
|
||||||
--calendar-day-border-color: #d3d3d3;
|
|
||||||
--calendar-day-active-hover-background-color: #516873;
|
|
||||||
--calendar-main-color: #263340;
|
|
||||||
--viewport-border-thickness: 1px;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
---
|
|
||||||
name: Translating
|
|
||||||
route: /translating
|
|
||||||
---
|
|
||||||
|
|
||||||
# Translating
|
|
||||||
|
|
||||||
**React Viewerbase** supports internationalization using
|
|
||||||
[i18next](https://www.i18next.com/) through the npm package
|
|
||||||
[@ohif/i18n](https://www.npmjs.com/package/@ohif/i18n), where is the main
|
|
||||||
instance of i18n containing several languages and tools.
|
|
||||||
|
|
||||||
## How to translate components
|
|
||||||
|
|
||||||
All you need is to use the internal custom superset of
|
|
||||||
[withTranslation HOC](https://react.i18next.com/latest/withtranslation-hoc),
|
|
||||||
available at `src/utils/LanguageProvider.js`
|
|
||||||
|
|
||||||
e.g.:
|
|
||||||
|
|
||||||
```js
|
|
||||||
import React from 'react';
|
|
||||||
import { withTranslation } from '../utils/LanguageProvider.js';
|
|
||||||
|
|
||||||
function MyComponent({ t }) {
|
|
||||||
return <p>{t('my translated text')}</p>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default withTranslation('MyNameSpace')(MyComponent);
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Namespaces
|
|
||||||
|
|
||||||
For further information about namespaces and how they work, please visit
|
|
||||||
[OHIF Namespaces docs](https://docs.ohif.org/viewer/internationalization.html#namespaces).
|
|
||||||
|
|
||||||
### How to get right the Namespace of a `@ohif/ui` component?
|
|
||||||
|
|
||||||
Check the component's page in this site, the Namespace information should be on
|
|
||||||
the bottom line.
|
|
||||||
|
|
||||||
Also, a nameSpace is defined when exporting a component, this information can be
|
|
||||||
found on exports trough the code, in case of missing in docs.
|
|
||||||
|
|
||||||
E.g.
|
|
||||||
|
|
||||||
```
|
|
||||||
export default withTranslation('TheNamespaceYouAreLookingFor')(TheComponentYouWantToUse);
|
|
||||||
```
|
|
||||||
|
|
||||||
### How to use another Namespace inside the current Namespace?
|
|
||||||
|
|
||||||
i18next provides a parsing feature able to get translations strings from any
|
|
||||||
Namespace, like this following example getting data from `InnerSpace` Namespace:
|
|
||||||
|
|
||||||
```
|
|
||||||
$t(InnerSpace:Reset)
|
|
||||||
export default withTranslation('OuterSpace')(TheComponent);
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## I18next Provider
|
|
||||||
|
|
||||||
**@ohif/ui** pass down the `t` function trough the custom
|
|
||||||
[withTranslation HOC](https://github.com/OHIF/Viewers/blob/master/platform/ui/src/utils/LanguageProvider.js).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Extending and Overriding languages
|
|
||||||
|
|
||||||
[How to Extend languages with @ohif/i18n](https://docs.ohif.org/viewer/internationalization.html#extending-languages-in-ohifi18n)
|
|
||||||
|
|
||||||
## Changing the language
|
|
||||||
|
|
||||||
The language choosing method is the same implemented in
|
|
||||||
[OHIF Viewers](https://docs.ohif.org/viewer/internationalization.html#changing-the-language)
|
|
||||||
|
|
||||||
> You can also change the language of the components displayed in this
|
|
||||||
> documentation by choosing an option in the
|
|
||||||
> [Docs Settings](https://react.ohif.org/docs-settings) section.
|
|
||||||
|
|
||||||
## Debugging translations
|
|
||||||
|
|
||||||
[How to Debug @ohif/i18n](https://docs.ohif.org/viewer/internationalization.html#debugging-translations)
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import LanguageSwitcher from '../components/languageSwitcher';
|
|
||||||
|
|
||||||
import './wrapper.styl';
|
|
||||||
|
|
||||||
const Wrapper = ({ children }) => (
|
|
||||||
<React.Fragment>
|
|
||||||
<div className="sidebarLanguageSwitcher">
|
|
||||||
<strong>Display components in:</strong>
|
|
||||||
<LanguageSwitcher />
|
|
||||||
</div>
|
|
||||||
{children}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
|
|
||||||
Wrapper.propTypes = {
|
|
||||||
children: PropTypes.node.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Wrapper;
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
[class*="Sidebar__Menus"]
|
|
||||||
@media (min-width: 1120px)
|
|
||||||
margin-top: 80px
|
|
||||||
|
|
||||||
.sidebarLanguageSwitcher
|
|
||||||
position: fixed
|
|
||||||
top: 155px
|
|
||||||
left 0
|
|
||||||
z-index: 1049
|
|
||||||
padding: 0 24px 20px
|
|
||||||
border-bottom: 1px dotted #CED4DE
|
|
||||||
background: #F5F6F7
|
|
||||||
transition: all 200ms ease
|
|
||||||
@media (max-width: 1119px)
|
|
||||||
left -100%
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
---
|
|
||||||
name: Checkbox
|
|
||||||
menu: Elements
|
|
||||||
route: /components/checkbox
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { Checkbox } from './../index'
|
|
||||||
import NameSpace from '../../../__docs__/NameSpace'
|
|
||||||
|
|
||||||
# Checkbox
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{
|
|
||||||
checked : false,
|
|
||||||
label : 'Sample check'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<React.Fragment>
|
|
||||||
<div>
|
|
||||||
<pre>{JSON.stringify(state, null, 2)}</pre>
|
|
||||||
</div>
|
|
||||||
<div style={{ maxWidth: '300px', margin: '0 auto' }}>
|
|
||||||
<Checkbox {...state} />
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={Checkbox} />
|
|
||||||
|
|
||||||
## Translation Namespace
|
|
||||||
|
|
||||||
<NameSpace name="Checkbox" />
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
---
|
|
||||||
name: CINE Dialog
|
|
||||||
menu: Components
|
|
||||||
route: /components/cine-dialog
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { CineDialog } from './../index'
|
|
||||||
import NameSpace from '../../../__docs__/NameSpace'
|
|
||||||
|
|
||||||
# CINE Dialog
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{
|
|
||||||
isPlaying: false,
|
|
||||||
cineFrameRate: 24,
|
|
||||||
isLoopEnabled: true,
|
|
||||||
lastChange: '',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<React.Fragment>
|
|
||||||
<div>
|
|
||||||
<pre>{JSON.stringify(state, null, 2)}</pre>
|
|
||||||
</div>
|
|
||||||
<div style={{ maxWidth: '300px', margin: '0 auto' }}>
|
|
||||||
<CineDialog
|
|
||||||
{...state}
|
|
||||||
onClickSkipToStart={() =>
|
|
||||||
setState({ lastChange: 'Clicked SkipToStart' })
|
|
||||||
}
|
|
||||||
onClickSkipToEnd={() =>
|
|
||||||
setState({ lastChange: 'Clicked SkipToEnd' })
|
|
||||||
}
|
|
||||||
onClickNextButton={() => setState({ lastChange: 'Clicked Next' })}
|
|
||||||
onClickBackButton={() => setState({ lastChange: 'Clicked Back' })}
|
|
||||||
onLoopChanged={value => setState({ isLoopEnabled: value })}
|
|
||||||
onFrameRateChanged={value => setState({ cineFrameRate: value })}
|
|
||||||
onPlayPauseChanged={() => setState({ isPlaying: !state.isPlaying })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={CineDialog} />
|
|
||||||
|
|
||||||
## Translation Namespace
|
|
||||||
|
|
||||||
<NameSpace name="CineDialog" />
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
---
|
|
||||||
name: About Modal
|
|
||||||
menu: Components
|
|
||||||
route: /components/about-modal
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { AboutContent } from './../index.js'
|
|
||||||
|
|
||||||
# About Modal
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State initial={{
|
|
||||||
isOpen: false
|
|
||||||
}}>
|
|
||||||
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<React.Fragment>
|
|
||||||
<button
|
|
||||||
className="btn btn-primary"
|
|
||||||
type="button"
|
|
||||||
onClick={ () => setState({ isOpen: true }) }
|
|
||||||
>
|
|
||||||
Open about modal
|
|
||||||
</button>
|
|
||||||
<AboutContent
|
|
||||||
{...state}
|
|
||||||
onCancel={() => setState({ isOpen: false })}
|
|
||||||
/>
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
|
|
||||||
</State>
|
|
||||||
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={AboutContent} />
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
---
|
|
||||||
name: Viewport Download Form
|
|
||||||
menu: Components
|
|
||||||
route: /components/viewport-download-form
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { ViewportDownloadForm } from './../index'
|
|
||||||
import NameSpace from '../../../__docs__/NameSpace'
|
|
||||||
|
|
||||||
# Viewport Download Form
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<React.Fragment>
|
|
||||||
<div>
|
|
||||||
<pre>{JSON.stringify(state, null, 2)}</pre>
|
|
||||||
</div>
|
|
||||||
<div style={{ maxWidth: '400px', margin: '0 auto' }}>
|
|
||||||
<ViewportDownloadForm />
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={ViewportDownloadForm} />
|
|
||||||
|
|
||||||
## Translation Namespace
|
|
||||||
|
|
||||||
<NameSpace name="ViewportDownloadForm" />
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
.LayoutExample {
|
|
||||||
background-color: var(--primary-background-color);
|
|
||||||
width: 160px;
|
|
||||||
height: 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.GridLayout td {
|
|
||||||
padding: 5px;
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
---
|
|
||||||
name: Layout Button
|
|
||||||
menu: Components
|
|
||||||
route: /components/layout-button
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { LayoutButton } from './../index.js'
|
|
||||||
import './layoutButton.css'
|
|
||||||
import NameSpace from '../../../__docs__/NameSpace'
|
|
||||||
|
|
||||||
# Layout Button
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State initial={{
|
|
||||||
selectedCell: {
|
|
||||||
className: 'hover',
|
|
||||||
col: 1,
|
|
||||||
row: 1
|
|
||||||
},
|
|
||||||
}}>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<React.Fragment>
|
|
||||||
{/* STATE */}
|
|
||||||
<div><pre>{JSON.stringify(state, null, 2) }</pre></div>
|
|
||||||
|
|
||||||
{/* COMPONENT */}
|
|
||||||
<div className="LayoutExample">
|
|
||||||
<LayoutButton
|
|
||||||
{...state}
|
|
||||||
onChange={cell => setState({ selectedCell: cell })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
</State>
|
|
||||||
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={LayoutButton} />
|
|
||||||
|
|
||||||
## Translation Namespace
|
|
||||||
|
|
||||||
<NameSpace name="Buttons" />
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
---
|
|
||||||
name: Measurement Table
|
|
||||||
menu: Components
|
|
||||||
route: /components/measurement-table
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { MeasurementTable } from './../index.js'
|
|
||||||
import NameSpace from '../../../__docs__/NameSpace'
|
|
||||||
//
|
|
||||||
import measurements from './measurements.js'
|
|
||||||
import timepoints from './timepoints.js'
|
|
||||||
import warnings from './warnings.js'
|
|
||||||
|
|
||||||
# Measurement Table
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{
|
|
||||||
// Spelling error: overwallWarnings
|
|
||||||
overwallWarnings: warnings,
|
|
||||||
timepoints,
|
|
||||||
measurementCollection: measurements,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<div style={{ height: '340px' }}>
|
|
||||||
<MeasurementTable
|
|
||||||
{...state}
|
|
||||||
onItemClick={() => alert('onItemClick')}
|
|
||||||
onRelabelClick={() => alert('onRelabelClick')}
|
|
||||||
onDeleteClick={() => alert('onDeleteClick')}
|
|
||||||
onEditDescriptionClick={() => alert('onEditDescriptionClick')}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={MeasurementTable} />
|
|
||||||
|
|
||||||
## Translation Namespace
|
|
||||||
|
|
||||||
<NameSpace name="MeasurementTable" />
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
export default [
|
|
||||||
{
|
|
||||||
maxMeasurements: 5,
|
|
||||||
groupName: 'Targets',
|
|
||||||
measurements: [
|
|
||||||
{
|
|
||||||
measurementId: '123',
|
|
||||||
measurementNumber: '123',
|
|
||||||
itemNumber: 1,
|
|
||||||
label: 'Chest Wall Posterior',
|
|
||||||
hasWarnings: true,
|
|
||||||
warningTitle: 'Criteria nonconformities',
|
|
||||||
isSplitLesion: false,
|
|
||||||
warningList: [
|
|
||||||
'All measurements should have a location',
|
|
||||||
'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
|
|
||||||
],
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
displayText: '25.7 x 12.9',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
displayText: '24.7 x 11.5',
|
|
||||||
},
|
|
||||||
{},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
measurementId: '124',
|
|
||||||
measurementNumber: '124',
|
|
||||||
itemNumber: 2,
|
|
||||||
label: 'Bone Extremity',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
displayText: '24.7 x 11.1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
displayText: '21.2 x 10.9',
|
|
||||||
},
|
|
||||||
{},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
maxMeasurements: 3,
|
|
||||||
groupName: 'NonTargets',
|
|
||||||
measurements: [
|
|
||||||
{
|
|
||||||
measurementId: '125',
|
|
||||||
measurementNumber: '125',
|
|
||||||
itemNumber: 1,
|
|
||||||
label: 'Chest Wall Single Site',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
displayText: 'MD',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
displayText: 'NM',
|
|
||||||
},
|
|
||||||
{},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
measurementId: '126',
|
|
||||||
measurementNumber: '126',
|
|
||||||
itemNumber: 2,
|
|
||||||
label: 'Extremity Multiple Sites',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
displayText: 'CR',
|
|
||||||
},
|
|
||||||
{},
|
|
||||||
{},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
measurementId: '127',
|
|
||||||
measurementNumber: '127',
|
|
||||||
label: 'Extremity Site',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
displayText: 'CR',
|
|
||||||
},
|
|
||||||
{},
|
|
||||||
{
|
|
||||||
displayText: 'NM',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
export default [
|
|
||||||
{
|
|
||||||
label: 'Follow-up 2',
|
|
||||||
date: '20-Dec-18',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Follow-up 1',
|
|
||||||
date: '15-Jun-18',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Baseline',
|
|
||||||
date: '10-Apr-18',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export default {
|
|
||||||
warningList: [
|
|
||||||
'All measurements should have a location',
|
|
||||||
'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
|
|
||||||
],
|
|
||||||
};
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
---
|
|
||||||
name: OHIFModal
|
|
||||||
menu: Components
|
|
||||||
route: /components/ohif-modal
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { OHIFModal } from './../index'
|
|
||||||
import NameSpace from '../../../__docs__/NameSpace'
|
|
||||||
|
|
||||||
# OHIF Modal
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<React.Fragment>
|
|
||||||
<div>
|
|
||||||
<pre>{JSON.stringify(state, null, 2)}</pre>
|
|
||||||
</div>
|
|
||||||
<div style={{ maxWidth: '400px', margin: '0 auto' }}>
|
|
||||||
<OHIFModal />
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={OHIFModal} />
|
|
||||||
|
|
||||||
## Translation Namespace
|
|
||||||
|
|
||||||
<NameSpace name="OHIFModal" />
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
---
|
|
||||||
name: Overlay Trigger
|
|
||||||
menu: Components
|
|
||||||
route: /components/overlay-trigger
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { Tooltip } from './../../tooltip'
|
|
||||||
import { OverlayTrigger } from './../index.js'
|
|
||||||
|
|
||||||
# Overlay Trigger
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
### On Hover
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
|
|
||||||
<div style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between'
|
|
||||||
}}>
|
|
||||||
{
|
|
||||||
['right', 'left', 'bottom', 'top'].map((placement) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment key={`example-${placement}`}>
|
|
||||||
<OverlayTrigger
|
|
||||||
key={`example-${placement}`}
|
|
||||||
placement={placement}
|
|
||||||
overlay={
|
|
||||||
<Tooltip
|
|
||||||
placement={placement}
|
|
||||||
className='in'
|
|
||||||
id={`tooltip-${placement}`}
|
|
||||||
>
|
|
||||||
Here I am!
|
|
||||||
</Tooltip>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<button> Tooltip on {placement}</button>
|
|
||||||
</OverlayTrigger>
|
|
||||||
</React.Fragment>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
### On Click
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{['right', 'left', 'bottom', 'top'].map(placement => {
|
|
||||||
return (
|
|
||||||
<OverlayTrigger
|
|
||||||
key={`example-${placement}`}
|
|
||||||
placement={placement}
|
|
||||||
trigger="click"
|
|
||||||
overlay={
|
|
||||||
<Tooltip
|
|
||||||
placement={placement}
|
|
||||||
className="in"
|
|
||||||
id={`tooltip-${placement}`}
|
|
||||||
>
|
|
||||||
Here I am!
|
|
||||||
</Tooltip>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<button> Tooltip on {placement}</button>
|
|
||||||
</OverlayTrigger>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={OverlayTrigger} />
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
---
|
|
||||||
name: Quick Switch
|
|
||||||
menu: Components
|
|
||||||
route: /components/quick-switch
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { QuickSwitch } from './../index.js'
|
|
||||||
//
|
|
||||||
import studies from './studies.js'
|
|
||||||
|
|
||||||
# Quick Switch
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State initial={{
|
|
||||||
studyListData: studies,
|
|
||||||
}}>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<QuickSwitch
|
|
||||||
studyListData={state.studyListData}
|
|
||||||
// If this is always activeStudy's thumbnails,
|
|
||||||
// Why do we need to specify this?
|
|
||||||
seriesData={
|
|
||||||
state.studyListData.find((study) => {
|
|
||||||
return !!study.active;
|
|
||||||
}).thumbnails}
|
|
||||||
onSeriesSelected={(selectedSeries) => {
|
|
||||||
const { studyListData } = state;
|
|
||||||
const selectedId = selectedSeries.displaySetInstanceUID;
|
|
||||||
|
|
||||||
studyListData.forEach(study => {
|
|
||||||
study.thumbnails.forEach(series => {
|
|
||||||
series.active = series.displaySetInstanceUID === selectedId;
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
setState({ studyListData });
|
|
||||||
}}
|
|
||||||
onStudySelected={(selectedStudy) => {
|
|
||||||
const { studyListData } = state;
|
|
||||||
const selectedId = selectedStudy.StudyInstanceUID;
|
|
||||||
|
|
||||||
studyListData.forEach(study => {
|
|
||||||
study.active = study.StudyInstanceUID === selectedId;
|
|
||||||
});
|
|
||||||
|
|
||||||
setState({ studyListData });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
</State>
|
|
||||||
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={QuickSwitch} />
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
export default [
|
|
||||||
{
|
|
||||||
StudyInstanceUID: '10001',
|
|
||||||
StudyDescription: 'Anti-PD-1',
|
|
||||||
modalities: 'CT',
|
|
||||||
StudyDate: '18-nov-2018',
|
|
||||||
active: false,
|
|
||||||
thumbnails: [
|
|
||||||
{
|
|
||||||
imageSrc:
|
|
||||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_Lung.jpg',
|
|
||||||
SeriesDescription: 'Anti-PD-1_Lung',
|
|
||||||
SeriesNumber: '2',
|
|
||||||
numImageFrames: 512,
|
|
||||||
displaySetInstanceUID: '10001-1',
|
|
||||||
stackPercentComplete: 30,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc:
|
|
||||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_MELANOMA.jpg',
|
|
||||||
SeriesDescription: 'Anti-PD-1_MELANOMA',
|
|
||||||
SeriesNumber: '2',
|
|
||||||
InstanceNumber: '1',
|
|
||||||
numImageFrames: 256,
|
|
||||||
displaySetInstanceUID: '10001-2',
|
|
||||||
stackPercentComplete: 70,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
StudyInstanceUID: '10002',
|
|
||||||
StudyDescription: 'CPTAC',
|
|
||||||
modalities: 'CT',
|
|
||||||
StudyDate: '16-aug-2017',
|
|
||||||
active: true,
|
|
||||||
thumbnails: [
|
|
||||||
{
|
|
||||||
imageSrc:
|
|
||||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-GBM.jpg',
|
|
||||||
SeriesDescription: 'CPTAC-GBM',
|
|
||||||
active: true,
|
|
||||||
SeriesNumber: '2',
|
|
||||||
numImageFrames: 512,
|
|
||||||
displaySetInstanceUID: '10002-1',
|
|
||||||
stackPercentComplete: 100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc:
|
|
||||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-CM.jpg',
|
|
||||||
SeriesDescription: 'CPTAC-CM',
|
|
||||||
SeriesNumber: '2',
|
|
||||||
InstanceNumber: '1',
|
|
||||||
displaySetInstanceUID: '10002-2',
|
|
||||||
numImageFrames: 256,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc:
|
|
||||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-HNSCC.jpg',
|
|
||||||
SeriesDescription: 'CPTAC-HNSCC',
|
|
||||||
SeriesNumber: '2',
|
|
||||||
InstanceNumber: '1',
|
|
||||||
displaySetInstanceUID: '10002-3',
|
|
||||||
numImageFrames: 256,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc:
|
|
||||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-LSCC.jpg',
|
|
||||||
SeriesDescription: 'CPTAC-LSCC',
|
|
||||||
SeriesNumber: '2',
|
|
||||||
InstanceNumber: '1',
|
|
||||||
displaySetInstanceUID: '10002-4',
|
|
||||||
numImageFrames: 256,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
---
|
|
||||||
name: Radio Button List
|
|
||||||
menu: Elements
|
|
||||||
route: /components/radio-button-list
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { RadioButtonList } from './../index'
|
|
||||||
import NameSpace from '../../../__docs__/NameSpace'
|
|
||||||
|
|
||||||
#Radio Button List
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{
|
|
||||||
description : [
|
|
||||||
{
|
|
||||||
'label' : 'Button 1',
|
|
||||||
'id' : 'button1',
|
|
||||||
'checked' : false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'label' : 'Button 2',
|
|
||||||
'id' : 'button2',
|
|
||||||
'checked' : false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'label' : 'Button 3',
|
|
||||||
'id' : 'button3',
|
|
||||||
'checked' : true,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<React.Fragment>
|
|
||||||
<div>
|
|
||||||
<pre>{JSON.stringify(state, null, 2)}</pre>
|
|
||||||
</div>
|
|
||||||
<div style={{ maxWidth: '300px', margin: '0 auto' }}>
|
|
||||||
<RadioButtonList description={[
|
|
||||||
{
|
|
||||||
'label' : 'Button 1',
|
|
||||||
'id' : 'button1',
|
|
||||||
'checked' : false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'label' : 'Button 2',
|
|
||||||
'id' : 'button2',
|
|
||||||
'checked' : false,
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'label' : 'Button 3',
|
|
||||||
'id' : 'coolButton3',
|
|
||||||
'checked' : true,
|
|
||||||
}
|
|
||||||
]}/>
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={RadioButtonList} />
|
|
||||||
|
|
||||||
## Translation Namespace
|
|
||||||
|
|
||||||
<NameSpace name="RadioButtonList" />
|
|
||||||
@ -1,51 +0,0 @@
|
|||||||
---
|
|
||||||
name: Rounded Button Group
|
|
||||||
menu: Components
|
|
||||||
route: /components/rounded-button-group
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz';
|
|
||||||
import { State } from 'react-powerplug';
|
|
||||||
import { RoundedButtonGroup } from './../index.js';
|
|
||||||
|
|
||||||
# Rounded Button Group
|
|
||||||
|
|
||||||
A basic styled toggle switch
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{
|
|
||||||
value: null,
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
value: 'studies',
|
|
||||||
icon: 'th',
|
|
||||||
bottomLabel: 'Series',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'measurements',
|
|
||||||
icon: 'th-list',
|
|
||||||
bottomLabel: 'Measurements',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<React.Fragment>
|
|
||||||
<div>
|
|
||||||
<pre>value: {JSON.stringify(state.value, null, 2)}</pre>
|
|
||||||
</div>
|
|
||||||
<RoundedButtonGroup
|
|
||||||
{...state}
|
|
||||||
onValueChanged={value => setState({ value })}
|
|
||||||
/>
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={RoundedButtonGroup} />
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
---
|
|
||||||
name: Select Tree
|
|
||||||
menu: Components
|
|
||||||
route: /components/select-tree
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { SelectTree } from './../index.js'
|
|
||||||
|
|
||||||
import selectTreeItems from './selectTreeItems.js'
|
|
||||||
|
|
||||||
# SelectTree
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State initial={{
|
|
||||||
items: selectTreeItems,
|
|
||||||
}}>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<React.Fragment>
|
|
||||||
<pre style={{ maxHeight: '135px', overflowX: 'auto' }}>
|
|
||||||
{JSON.stringify(state.items, null, 2)}
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<SelectTree
|
|
||||||
items={state.items}
|
|
||||||
onSelected={(event, item) => setState({ itemLabelSelected: item.label }) }
|
|
||||||
selectTreeFirstTitle="Select Tree Example Header"
|
|
||||||
autoFocus={false}
|
|
||||||
/>
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
|
|
||||||
</State>
|
|
||||||
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={SelectTree} />
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
export default [
|
|
||||||
{
|
|
||||||
label: 'A',
|
|
||||||
value: 'A',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Abdominal Wall',
|
|
||||||
value: 'AbdominalWall',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Adrenal Left',
|
|
||||||
value: 'AdrenalLeft',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'B',
|
|
||||||
value: 'B',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Brain',
|
|
||||||
value: 'Brain',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Breast',
|
|
||||||
value: 'Breast',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
---
|
|
||||||
name: Simple Dialog
|
|
||||||
menu: Components
|
|
||||||
route: /components/simple-dialog
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { SimpleDialog } from './../index.js'
|
|
||||||
|
|
||||||
# Simple Dialog
|
|
||||||
|
|
||||||
Its similar to a modal but we can pass its style as props and manipulate it as
|
|
||||||
we want. Initially used to display tool data changes in our Viewport.
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State initial={{
|
|
||||||
isDialogOpen: false,
|
|
||||||
inputValue: '',
|
|
||||||
selectValue: '',
|
|
||||||
dialogStyle: {
|
|
||||||
top: '50px',
|
|
||||||
left: '100px',
|
|
||||||
position: 'absolute'
|
|
||||||
}
|
|
||||||
}}>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<React.Fragment>
|
|
||||||
<div><pre>{JSON.stringify(state, null, 2) }</pre></div>
|
|
||||||
|
|
||||||
{/* Toggle Dialog */}
|
|
||||||
<button onClick={() => setState({ isDialogOpen: !state.isDialogOpen})}>
|
|
||||||
{state.isDialogOpen ? 'Close Dialog' : 'Open Dialog'}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<SimpleDialog
|
|
||||||
isOpen={state.isDialogOpen}
|
|
||||||
headerTitle='Example Dialog Header'
|
|
||||||
onClose={() => setState({ isDialogOpen: false })}
|
|
||||||
onConfirm={() => setState({
|
|
||||||
isDialogOpen: false,
|
|
||||||
// If you don't want to update external state until complete,
|
|
||||||
// This is where you could grab current field values and update parent
|
|
||||||
// With setState
|
|
||||||
//
|
|
||||||
// inputValue: this.input.value,
|
|
||||||
// selectValue: this.select.value
|
|
||||||
})}
|
|
||||||
componentStyle={state.dialogStyle}
|
|
||||||
onValueChanged={(value) => setState({value}) }
|
|
||||||
>
|
|
||||||
<label htmlFor='input' className='simpleDialogLabelFor'>Input Example</label>
|
|
||||||
<input
|
|
||||||
id='input'
|
|
||||||
type='text'
|
|
||||||
className='simpleDialogInput'
|
|
||||||
autoComplete='off'
|
|
||||||
onChange={(e) => setState({inputValue: e.target.value})}
|
|
||||||
/>
|
|
||||||
<label htmlFor='select' className='simpleDialogLabelFor'>SelectExample</label>
|
|
||||||
<select
|
|
||||||
name='select'
|
|
||||||
id='select'
|
|
||||||
className='simpleDialogSelect'
|
|
||||||
onChange={(e) => setState({selectValue: e.target.value})}
|
|
||||||
>
|
|
||||||
<option value='Option1'>Option1</option>
|
|
||||||
<option value='Option2'>Option2</option>
|
|
||||||
<option value='Option3'>Option3</option>
|
|
||||||
<option value='Option4'>Option4</option>
|
|
||||||
</select>
|
|
||||||
</SimpleDialog>
|
|
||||||
</React.Fragment>
|
|
||||||
)}
|
|
||||||
</State>
|
|
||||||
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={SimpleDialog} />
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
.ExampleDropTarget {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
min-height: 100px;
|
|
||||||
|
|
||||||
border: 2px dashed black;
|
|
||||||
padding: 20px;
|
|
||||||
transition: 0.2s all ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ExampleDropTarget h4,
|
|
||||||
.ExampleDropTarger p {
|
|
||||||
text-align: center;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ExampleDropTarget.can-drop {
|
|
||||||
border: 2px dashed #20a5d6;
|
|
||||||
background-color: #fafafa;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ExampleDropTarget.hovered {
|
|
||||||
border: 2px dashed #20a5d6;
|
|
||||||
background-color: black;
|
|
||||||
color: #91b9cd;
|
|
||||||
cursor: copy;
|
|
||||||
}
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
import React, { Component } from 'react';
|
|
||||||
import { DropTarget } from 'react-dnd';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import './ExampleDropTarget.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) {
|
|
||||||
// Note: For this example we use setState, but in
|
|
||||||
// OHIF we will update the redux store instead
|
|
||||||
const item = monitor.getItem();
|
|
||||||
|
|
||||||
component.setState({
|
|
||||||
item: {
|
|
||||||
id: item.id,
|
|
||||||
SeriesDescription: item.SeriesDescription,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
return { id: 'ExampleDropTarget' };
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
// TODO: Find out why we can't move this into the Example app instead.
|
|
||||||
// It looks like the context isn't properly shared.
|
|
||||||
class CustomDropTarget extends Component {
|
|
||||||
static className = 'ExampleDropTarget';
|
|
||||||
|
|
||||||
state = {
|
|
||||||
item: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
static defaultProps = {
|
|
||||||
isOver: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
static propTypes = {
|
|
||||||
connectDropTarget: PropTypes.func.isRequired,
|
|
||||||
canDrop: PropTypes.bool.isRequired,
|
|
||||||
isOver: PropTypes.bool.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { canDrop, isOver, connectDropTarget } = this.props;
|
|
||||||
const isActive = canDrop && isOver;
|
|
||||||
|
|
||||||
let className = ExampleDropTarget.className;
|
|
||||||
|
|
||||||
if (isActive) {
|
|
||||||
className += ' hovered';
|
|
||||||
} else if (canDrop) {
|
|
||||||
className += ' can-drop';
|
|
||||||
}
|
|
||||||
|
|
||||||
return connectDropTarget(
|
|
||||||
<div className={className}>
|
|
||||||
<h4>
|
|
||||||
{isActive
|
|
||||||
? 'Release to drop'
|
|
||||||
: 'Drag / Drop something from the Study Browser here'}
|
|
||||||
</h4>
|
|
||||||
<p className="study-drop-results">
|
|
||||||
{this.state.item && JSON.stringify(this.state.item)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const collect = (connect, monitor) => ({
|
|
||||||
connectDropTarget: connect.dropTarget(),
|
|
||||||
isOver: monitor.isOver(),
|
|
||||||
canDrop: monitor.canDrop(),
|
|
||||||
});
|
|
||||||
|
|
||||||
const ExampleDropTarget = DropTarget(Types.THUMBNAIL, divTarget, collect)(
|
|
||||||
CustomDropTarget
|
|
||||||
);
|
|
||||||
|
|
||||||
export { ExampleDropTarget };
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
export const studies = [
|
|
||||||
{
|
|
||||||
thumbnails: [
|
|
||||||
{
|
|
||||||
imageSrc:
|
|
||||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_Lung.jpg',
|
|
||||||
SeriesDescription: 'Anti-PD-1_Lung',
|
|
||||||
active: true,
|
|
||||||
SeriesNumber: '2',
|
|
||||||
numImageFrames: 512,
|
|
||||||
stackPercentComplete: 30,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc:
|
|
||||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/Anti-PD-1_MELANOMA.jpg',
|
|
||||||
SeriesDescription: 'Anti-PD-1_MELANOMA',
|
|
||||||
SeriesNumber: '2',
|
|
||||||
InstanceNumber: '1',
|
|
||||||
numImageFrames: 256,
|
|
||||||
stackPercentComplete: 70,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
altImageText: 'SR',
|
|
||||||
SeriesDescription: 'Imaging Measurement Report',
|
|
||||||
SeriesNumber: '3',
|
|
||||||
stackPercentComplete: 100,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
thumbnails: [
|
|
||||||
{
|
|
||||||
imageSrc:
|
|
||||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-GBM.jpg',
|
|
||||||
SeriesDescription: 'CPTAC-GBM',
|
|
||||||
active: true,
|
|
||||||
SeriesNumber: '2',
|
|
||||||
numImageFrames: 512,
|
|
||||||
stackPercentComplete: 100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc:
|
|
||||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-CM.jpg',
|
|
||||||
SeriesDescription: 'CPTAC-CM',
|
|
||||||
SeriesNumber: '2',
|
|
||||||
InstanceNumber: '1',
|
|
||||||
numImageFrames: 256,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc:
|
|
||||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-HNSCC.jpg',
|
|
||||||
SeriesDescription: 'CPTAC-HNSCC',
|
|
||||||
SeriesNumber: '2',
|
|
||||||
InstanceNumber: '1',
|
|
||||||
numImageFrames: 256,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc:
|
|
||||||
'https://raw.githubusercontent.com/crowds-cure/cancer/master/public/screenshots/CPTAC-LSCC.jpg',
|
|
||||||
SeriesDescription: 'CPTAC-LSCC',
|
|
||||||
SeriesNumber: '2',
|
|
||||||
InstanceNumber: '1',
|
|
||||||
numImageFrames: 256,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export function onThumbnailClick() {
|
|
||||||
console.warn('onThumbnailClick');
|
|
||||||
}
|
|
||||||
|
|
||||||
export function onThumbnailDoubleClick() {
|
|
||||||
console.warn('onThumbnailDoubleClick');
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
---
|
|
||||||
name: Study Browser
|
|
||||||
menu: Components
|
|
||||||
route: /components/study-browser
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { WrappedStudyBrowser } from './wrappedStudyBrowser.js'
|
|
||||||
import { StudyBrowser } from './../index.js'
|
|
||||||
|
|
||||||
# Study Browser
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<WrappedStudyBrowser />
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={StudyBrowser} />
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
import React, { Component } from 'react';
|
|
||||||
import { DragDropContext } from 'react-dnd';
|
|
||||||
import TouchBackend from 'react-dnd-touch-backend';
|
|
||||||
|
|
||||||
//
|
|
||||||
import {
|
|
||||||
studies,
|
|
||||||
onThumbnailClick,
|
|
||||||
onThumbnailDoubleClick,
|
|
||||||
} from './exampleStudies.js';
|
|
||||||
import ExampleDropTarget from './ExampleDropTarget.js';
|
|
||||||
import { StudyBrowser } from './../index.js';
|
|
||||||
|
|
||||||
class StudyBrowserContainer extends Component {
|
|
||||||
render() {
|
|
||||||
//const viewportData = [null, null, null, null];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<ExampleDropTarget />
|
|
||||||
<StudyBrowser
|
|
||||||
studies={studies}
|
|
||||||
onThumbnailClick={onThumbnailClick}
|
|
||||||
onThumbnailDoubleClick={onThumbnailDoubleClick}
|
|
||||||
/>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Note:
|
|
||||||
// Normally, the top level APP component is wrapped with the DragDropContext
|
|
||||||
// We wrap this component to create a simple/local example.
|
|
||||||
const WrappedStudyBrowser = DragDropContext(
|
|
||||||
TouchBackend({ enableMouseEvents: true }),
|
|
||||||
null,
|
|
||||||
true
|
|
||||||
)(StudyBrowserContainer);
|
|
||||||
|
|
||||||
// http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context
|
|
||||||
export { WrappedStudyBrowser };
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
import moment from 'moment';
|
|
||||||
|
|
||||||
export default function(searchData) {
|
|
||||||
this.setState({ searchData });
|
|
||||||
|
|
||||||
const filter = (key, searchData, study) => {
|
|
||||||
if (key === 'studyDateFrom' && searchData[key] && study['StudyDate']) {
|
|
||||||
const StudyDate = moment(study['StudyDate'], 'YYYYMMDD');
|
|
||||||
return StudyDate.isBetween(
|
|
||||||
searchData['studyDateFrom'],
|
|
||||||
searchData['studyDateTo'],
|
|
||||||
'days',
|
|
||||||
'[]'
|
|
||||||
);
|
|
||||||
} else if (searchData[key] && !study[key].includes(searchData[key])) {
|
|
||||||
return false;
|
|
||||||
} else {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const { field, order } = searchData.sortData;
|
|
||||||
|
|
||||||
// just a example of local filtering
|
|
||||||
let filteredStudies = this.defaultStudies
|
|
||||||
.filter(function(study) {
|
|
||||||
const all = [
|
|
||||||
'PatientName',
|
|
||||||
'PatientID',
|
|
||||||
'AccessionNumber',
|
|
||||||
'modalities',
|
|
||||||
'StudyDescription',
|
|
||||||
'studyDateFrom',
|
|
||||||
].every(key => {
|
|
||||||
return filter(key, searchData, study);
|
|
||||||
});
|
|
||||||
|
|
||||||
return all;
|
|
||||||
})
|
|
||||||
.sort(function(a, b) {
|
|
||||||
if (order === 'desc') {
|
|
||||||
if (a[field] < b[field]) {
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
if (a[field] > b[field]) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
} else {
|
|
||||||
if (a[field] > b[field]) {
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
if (a[field] < b[field]) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// User can notice the loading icon
|
|
||||||
return new Promise(resolve => {
|
|
||||||
setTimeout(() => {
|
|
||||||
const first = searchData.currentPage * searchData.rowsPerPage;
|
|
||||||
let last =
|
|
||||||
searchData.currentPage * searchData.rowsPerPage +
|
|
||||||
searchData.rowsPerPage;
|
|
||||||
last = last >= filteredStudies.length ? filteredStudies.length : last;
|
|
||||||
this.setState({ studies: filteredStudies.slice(first, last) });
|
|
||||||
resolve();
|
|
||||||
}, 500);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
import moment from 'moment';
|
|
||||||
|
|
||||||
const studies = [
|
|
||||||
{
|
|
||||||
StudyInstanceUID: '11111.111111.111111.11111',
|
|
||||||
PatientName: 'John Doe',
|
|
||||||
PatientID: '1',
|
|
||||||
AccessionNumber: '1234567',
|
|
||||||
StudyDate: '19930201',
|
|
||||||
modalities: 'MR',
|
|
||||||
StudyDescription: 'BRAIN',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
StudyInstanceUID: '2222.222222.22222.22222',
|
|
||||||
PatientName: 'José Silva',
|
|
||||||
PatientID: '2',
|
|
||||||
AccessionNumber: '7654321',
|
|
||||||
StudyDate: moment().format('YYYYMMDD'),
|
|
||||||
modalities: 'CT',
|
|
||||||
StudyDescription: 'PET CT STANDARD',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
StudyInstanceUID: '3333.333333.33333.33333',
|
|
||||||
PatientName: 'Antônio Jefferson',
|
|
||||||
PatientID: '3',
|
|
||||||
AccessionNumber: '732311',
|
|
||||||
StudyDate: moment()
|
|
||||||
.subtract(14, 'days')
|
|
||||||
.format('YYYYMMDD'),
|
|
||||||
modalities: 'US',
|
|
||||||
StudyDescription: '0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
StudyInstanceUID: '444444.44444.44444.4444',
|
|
||||||
PatientName: 'Antonio da Silva',
|
|
||||||
PatientID: '4',
|
|
||||||
AccessionNumber: '732311',
|
|
||||||
StudyDate: moment()
|
|
||||||
.subtract(1, 'months')
|
|
||||||
.format('YYYYMMDD'),
|
|
||||||
modalities: 'US',
|
|
||||||
StudyDescription: '0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
StudyInstanceUID: '55555.55555.55555.55555',
|
|
||||||
PatientName: 'Bezerra Souza',
|
|
||||||
PatientID: '5',
|
|
||||||
AccessionNumber: '5134543',
|
|
||||||
StudyDate: moment()
|
|
||||||
.subtract(6, 'days')
|
|
||||||
.format('YYYYMMDD'),
|
|
||||||
modalities: 'US',
|
|
||||||
StudyDescription: '0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
StudyInstanceUID: '66666.66666.66666.6666',
|
|
||||||
PatientName: 'Geraldo Roger',
|
|
||||||
PatientID: '6',
|
|
||||||
AccessionNumber: '5315135',
|
|
||||||
StudyDate: moment()
|
|
||||||
.subtract(7, 'days')
|
|
||||||
.format('YYYYMMDD'),
|
|
||||||
modalities: 'US',
|
|
||||||
StudyDescription: 'US',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
StudyInstanceUID: '77777.77777.77777.77777',
|
|
||||||
PatientName: '',
|
|
||||||
PatientID: '7',
|
|
||||||
AccessionNumber: '5315136',
|
|
||||||
StudyDate: moment()
|
|
||||||
.subtract(5, 'days')
|
|
||||||
.format('YYYYMMDD'),
|
|
||||||
modalities: 'US',
|
|
||||||
StudyDescription: 'US',
|
|
||||||
},
|
|
||||||
].sort(function(a, b) {
|
|
||||||
if (a.PatientName < b.PatientName) {
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
if (a.PatientName > b.PatientName) {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
export default studies;
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
---
|
|
||||||
name: Study List
|
|
||||||
menu: Components
|
|
||||||
route: /components/study-list
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { StudyList } from './../index.js'
|
|
||||||
// Data
|
|
||||||
import defaultStudies from './studies.js'
|
|
||||||
import onSearch from './onSearch.js'
|
|
||||||
import moment from 'moment'
|
|
||||||
|
|
||||||
# Study List
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State initial={{
|
|
||||||
searchData: {},
|
|
||||||
studies: defaultStudies.filter(study => {
|
|
||||||
const StudyDate = moment(study['StudyDate'], 'YYYYMMDD');
|
|
||||||
const startDate = moment().subtract(5, 'days');
|
|
||||||
const endDate = moment();
|
|
||||||
|
|
||||||
return StudyDate.isBetween(startDate, endDate, 'days', '[]');
|
|
||||||
}).slice(0, 5)
|
|
||||||
}}>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<div className="row" style={{ backgroundColor: '#000', height: '600px' }}>
|
|
||||||
<div className="col-xs-12" style={{ padding: 0 }}>
|
|
||||||
<StudyList
|
|
||||||
studies={state.studies}
|
|
||||||
pageOptions={[1, 2, 3, 5, 10, 15, 20, 25, 50, 100]}
|
|
||||||
studyListFunctionsEnabled={true}
|
|
||||||
onImport={(e) => alert('Import study mock ' + e)}
|
|
||||||
onSelectItem={(StudyInstanceUID) => { alert(StudyInstanceUID + ' has selected! Now you can open your study.'); }}
|
|
||||||
rowsPerPage={5}
|
|
||||||
defaultSort={{ field: 'PatientName', order: 'desc', }}
|
|
||||||
studyListDateFilterNumDays={7}
|
|
||||||
onSearch={onSearch.bind({ setState, defaultStudies })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</State>
|
|
||||||
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={StudyList} />
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
---
|
|
||||||
name: Tab Components
|
|
||||||
menu: Components
|
|
||||||
route: /components/tab-components
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { TabComponents } from './../index.js'
|
|
||||||
|
|
||||||
// Data
|
|
||||||
import tabs from './tabs.js'
|
|
||||||
|
|
||||||
# Tab Components
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<TabComponents
|
|
||||||
tabs={tabs}
|
|
||||||
customProps={}
|
|
||||||
/>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={TabComponents} />
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
export default tabs = [
|
|
||||||
{
|
|
||||||
name: 'tabName1',
|
|
||||||
Component: () => {
|
|
||||||
return <div>tab 1 Content</div>;
|
|
||||||
},
|
|
||||||
customProps: {},
|
|
||||||
hidden: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'tabName2',
|
|
||||||
Component: () => {
|
|
||||||
return <div>tab 2 Content</div>;
|
|
||||||
},
|
|
||||||
customProps: {},
|
|
||||||
hidden: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'tabName3',
|
|
||||||
Component: () => {
|
|
||||||
return <div>tab 3 Content</div>;
|
|
||||||
},
|
|
||||||
customProps: {},
|
|
||||||
hidden: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
---
|
|
||||||
name: Table List
|
|
||||||
menu: Components
|
|
||||||
route: /components/table-list
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { State } from 'react-powerplug'
|
|
||||||
import { TableList, TableListItem } from './../index.js'
|
|
||||||
|
|
||||||
# Table List
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State initial={{
|
|
||||||
selectedIndex: null,
|
|
||||||
listItems: [
|
|
||||||
{ label: 'Brain Left' },
|
|
||||||
{ label: 'Brain Right' },
|
|
||||||
{ label: 'Heart Left' },
|
|
||||||
{ label: 'Heart Right' }
|
|
||||||
]
|
|
||||||
}}>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<TableList headerTitle='Example Table List Header'>
|
|
||||||
{state.listItems.map( (item, index) => {
|
|
||||||
return (
|
|
||||||
<TableListItem
|
|
||||||
key={`item_${index}`}
|
|
||||||
itemClass={state.selectedIndex === index ? 'selected' : ''}
|
|
||||||
itemIndex={index}
|
|
||||||
onItemClick={() => alert('item clicked')}
|
|
||||||
>
|
|
||||||
<label>{item.label}</label>
|
|
||||||
</TableListItem>
|
|
||||||
)}
|
|
||||||
)}
|
|
||||||
</TableList>
|
|
||||||
)}
|
|
||||||
|
|
||||||
</State>
|
|
||||||
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={TableList} />
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
export default [
|
|
||||||
{
|
|
||||||
id: 'Pan',
|
|
||||||
label: 'Pan',
|
|
||||||
icon: 'arrows',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Zoom',
|
|
||||||
icon: 'search',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Bidirectional',
|
|
||||||
icon: 'measure-target',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Stack Scroll',
|
|
||||||
icon: 'bars',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Reset',
|
|
||||||
icon: 'reset',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Manual',
|
|
||||||
icon: 'level',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'More',
|
|
||||||
icon: 'ellipse-circle',
|
|
||||||
buttons: [
|
|
||||||
{
|
|
||||||
label: 'Reset 2',
|
|
||||||
icon: 'reset',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Manual 2',
|
|
||||||
icon: 'adjust',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
---
|
|
||||||
name: Toolbar Section
|
|
||||||
menu: Components
|
|
||||||
route: /components/toolbar-section
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz';
|
|
||||||
import { State } from 'react-powerplug';
|
|
||||||
import { ToolbarSection } from './../index.js';
|
|
||||||
import exampleButtons from './exampleButtons.js';
|
|
||||||
import NameSpace from '../../../__docs__/NameSpace';
|
|
||||||
|
|
||||||
# ToolbarSection
|
|
||||||
|
|
||||||
A basic row of buttons for a toolbar. Active command is `WwwcTool`
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{
|
|
||||||
buttons: exampleButtons,
|
|
||||||
activeButtons: ['Pan'],
|
|
||||||
setToolActive: () => {
|
|
||||||
alert('pressed');
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => <ToolbarSection {...state} />}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={ToolbarSection} />
|
|
||||||
|
|
||||||
## Translation Namespace
|
|
||||||
|
|
||||||
<NameSpace name="Buttons" />
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
---
|
|
||||||
name: Tooltip
|
|
||||||
menu: Components
|
|
||||||
route: /components/tooltip
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz'
|
|
||||||
import { Tooltip } from './../index.js'
|
|
||||||
|
|
||||||
# Tooltip
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<Tooltip />
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={Tooltip} />
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
---
|
|
||||||
name: Icon
|
|
||||||
menu: Elements
|
|
||||||
route: /elements/icon
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz';
|
|
||||||
import { State } from 'react-powerplug';
|
|
||||||
import { Icon, ICONS } from './../index.js';
|
|
||||||
|
|
||||||
# Icon
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
color: 'white',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Object.keys(ICONS)
|
|
||||||
.sort()
|
|
||||||
.map((name, i) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment key={i}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
flexBasis: '150px',
|
|
||||||
margin: '2px',
|
|
||||||
backgroundColor: 'rgb(11, 95, 255)',
|
|
||||||
borderRadius: '4px',
|
|
||||||
padding: '8px',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon name={name} />
|
|
||||||
<div style={{ fontSize: '12px', wordWrap: 'break-word' }}>
|
|
||||||
{name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
The `<Icon />` component inherits the color of its parent, and sizing is based
|
|
||||||
on its parent's `font-size`. Each icon has an `aria-labelledby` to assist screen
|
|
||||||
readers.
|
|
||||||
|
|
||||||
We use `airbnb`'s [`babel-plugin-inline-react-svg`][airbnb] to automate
|
|
||||||
optimizing SVG files with [SVGO][svgo] and to create animatable React SVG
|
|
||||||
components that can be requested asynchronously. You can configure SVGO's
|
|
||||||
plugins [by following the advice laid out here][svgo-configure]
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={Icon} />
|
|
||||||
|
|
||||||
The `Icon` component takes a single prop of `name`, which indicates which Icon
|
|
||||||
should be displayed. Again, the icon responds to contextual text/font styles.
|
|
||||||
|
|
||||||
## Attribution
|
|
||||||
|
|
||||||
A large number of these icons are from [Font Awesome 5's free set.][fa-license]
|
|
||||||
Some attribution is likely required, depending on your usage. Sometimes as
|
|
||||||
little as a comment included side-by-side with the accompanying SVG icon.
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Links
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!-- prettier-ignore-start -->
|
|
||||||
[fa-license]: https://fontawesome.com/license
|
|
||||||
[airbnb]: https://github.com/airbnb/babel-plugin-inline-react-svg
|
|
||||||
[svgo]: https://github.com/svg/svgo/
|
|
||||||
[svgo-configure]: https://github.com/airbnb/babel-plugin-inline-react-svg/issues/9#issuecomment-310178317)
|
|
||||||
<!-- prettier-ignore-end -->
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
---
|
|
||||||
name: Svg
|
|
||||||
menu: Elements
|
|
||||||
route: /elements/svg
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz';
|
|
||||||
import { State } from 'react-powerplug';
|
|
||||||
import { Svg, SVGS } from './../index.js';
|
|
||||||
|
|
||||||
# Svg
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
color: 'white',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Object.keys(SVGS)
|
|
||||||
.sort()
|
|
||||||
.map((name, i) => {
|
|
||||||
return (
|
|
||||||
<React.Fragment key={i}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
flexBasis: '25%',
|
|
||||||
minWidth: '100px',
|
|
||||||
margin: '16px',
|
|
||||||
backgroundColor: 'rgb(11, 95, 255)',
|
|
||||||
borderRadius: '8px',
|
|
||||||
padding: '16px',
|
|
||||||
alignItems: 'center',
|
|
||||||
fontSize: '33px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Svg name={name} />
|
|
||||||
<div style={{ fontSize: '12px', wordWrap: 'break-word' }}>
|
|
||||||
{name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={Svg} />
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
---
|
|
||||||
name: Form / Dropdown Menu
|
|
||||||
menu: Elements
|
|
||||||
route: /elements/form-ddMenu
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz';
|
|
||||||
import { State } from 'react-powerplug';
|
|
||||||
import { DropdownMenu } from './../index.js';
|
|
||||||
|
|
||||||
# Select
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{
|
|
||||||
title: 'Test Title',
|
|
||||||
align: 'left',
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
title: 'Edit',
|
|
||||||
icon: {
|
|
||||||
name: 'edit',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Retry',
|
|
||||||
icon: {
|
|
||||||
name: 'reset',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => <DropdownMenu {...state} />}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={DropdownMenu} />
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
---
|
|
||||||
name: Form / Label
|
|
||||||
menu: Elements
|
|
||||||
route: /elements/form-label
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz';
|
|
||||||
import { State } from 'react-powerplug';
|
|
||||||
import { Label } from './../index.js';
|
|
||||||
|
|
||||||
# Label
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{
|
|
||||||
text: 'This is a label',
|
|
||||||
for: '',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<div className="label-example">
|
|
||||||
<Label {...state} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={Label} />
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
---
|
|
||||||
name: Form / Range
|
|
||||||
menu: Elements
|
|
||||||
route: /elements/form-range
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz';
|
|
||||||
import { State } from 'react-powerplug';
|
|
||||||
import { Range } from './../index.js';
|
|
||||||
|
|
||||||
# Range
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{
|
|
||||||
value: 50,
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => (
|
|
||||||
<div className="range-example">
|
|
||||||
<Range {...state} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={Range} />
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
---
|
|
||||||
name: Form / Select
|
|
||||||
menu: Elements
|
|
||||||
route: /elements/form-select
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz';
|
|
||||||
import { State } from 'react-powerplug';
|
|
||||||
import { Select } from './../index.js';
|
|
||||||
|
|
||||||
# Select
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
key: 'Option1',
|
|
||||||
value: '1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'Option2',
|
|
||||||
value: '2'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
value:'2'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
|
|
||||||
{({ state, setState }) => <Select {...state} />}
|
|
||||||
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={Select} />
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
---
|
|
||||||
name: Form / Text Area
|
|
||||||
menu: Elements
|
|
||||||
route: /elements/form-textArea
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz';
|
|
||||||
import { State } from 'react-powerplug';
|
|
||||||
import { TextArea } from './../index.js';
|
|
||||||
|
|
||||||
# Text Area
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{
|
|
||||||
value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
|
||||||
rows: 10,
|
|
||||||
cols: 50,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => <TextArea {...state} />}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={TextArea} />
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
---
|
|
||||||
name: Form / Text Input
|
|
||||||
menu: Elements
|
|
||||||
route: /elements/form-textInput
|
|
||||||
---
|
|
||||||
|
|
||||||
import { Playground, Props } from 'docz';
|
|
||||||
import { State } from 'react-powerplug';
|
|
||||||
import { TextInput } from './../index.js';
|
|
||||||
|
|
||||||
# Text Input
|
|
||||||
|
|
||||||
## Basic usage
|
|
||||||
|
|
||||||
<Playground>
|
|
||||||
<State
|
|
||||||
initial={{
|
|
||||||
value: 'test',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ state, setState }) => <TextInput {...state} />}
|
|
||||||
</State>
|
|
||||||
</Playground>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
<Props of={TextInput} />
|
|
||||||
@ -5,8 +5,6 @@ const merge = require('webpack-merge');
|
|||||||
const webpack = require('webpack');
|
const webpack = require('webpack');
|
||||||
const webpackBase = require('./../../../.webpack/webpack.base.js');
|
const webpackBase = require('./../../../.webpack/webpack.base.js');
|
||||||
// ~~ Plugins
|
// ~~ Plugins
|
||||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
|
|
||||||
.BundleAnalyzerPlugin;
|
|
||||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||||
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
|
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
|
||||||
@ -26,15 +24,14 @@ const PROXY_TARGET = process.env.PROXY_TARGET;
|
|||||||
const PROXY_DOMAIN = process.env.PROXY_DOMAIN;
|
const PROXY_DOMAIN = process.env.PROXY_DOMAIN;
|
||||||
const ENTRY_TARGET = process.env.ENTRY_TARGET || `${SRC_DIR}/index.js`;
|
const ENTRY_TARGET = process.env.ENTRY_TARGET || `${SRC_DIR}/index.js`;
|
||||||
|
|
||||||
|
|
||||||
const setHeaders = (res, path) => {
|
const setHeaders = (res, path) => {
|
||||||
res.setHeader('Content-Type', 'text/plain')
|
res.setHeader('Content-Type', 'text/plain');
|
||||||
if (path.indexOf('.gz') !== -1) {
|
if (path.indexOf('.gz') !== -1) {
|
||||||
res.setHeader('Content-Encoding', 'gzip')
|
res.setHeader('Content-Encoding', 'gzip');
|
||||||
} else if (path.indexOf('.br') !== -1) {
|
} else if (path.indexOf('.br') !== -1) {
|
||||||
res.setHeader('Content-Encoding', 'br')
|
res.setHeader('Content-Encoding', 'br');
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
module.exports = (env, argv) => {
|
module.exports = (env, argv) => {
|
||||||
const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR });
|
const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR });
|
||||||
@ -147,12 +144,12 @@ module.exports = (env, argv) => {
|
|||||||
client: {
|
client: {
|
||||||
overlay: { errors: true, warnings: false },
|
overlay: { errors: true, warnings: false },
|
||||||
},
|
},
|
||||||
'static': [
|
static: [
|
||||||
{
|
{
|
||||||
directory: path.join(require('os').homedir(), 'dicomweb'),
|
directory: path.join(require('os').homedir(), 'dicomweb'),
|
||||||
staticOptions: {
|
staticOptions: {
|
||||||
extensions: ['gz', 'br'],
|
extensions: ['gz', 'br'],
|
||||||
index: "index.json.gz",
|
index: 'index.json.gz',
|
||||||
redirect: true,
|
redirect: true,
|
||||||
setHeaders,
|
setHeaders,
|
||||||
},
|
},
|
||||||
@ -162,7 +159,7 @@ module.exports = (env, argv) => {
|
|||||||
directory: '../../testdata',
|
directory: '../../testdata',
|
||||||
staticOptions: {
|
staticOptions: {
|
||||||
extensions: ['gz', 'br'],
|
extensions: ['gz', 'br'],
|
||||||
index: "index.json.gz",
|
index: 'index.json.gz',
|
||||||
redirect: true,
|
redirect: true,
|
||||||
setHeaders,
|
setHeaders,
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user