feat(app): modal headers and fix storybook (#3460)

This commit is contained in:
Alireza 2023-06-07 15:54:08 -04:00 committed by GitHub
commit 1d38fe30a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
102 changed files with 4548 additions and 4608 deletions

View File

@ -17,16 +17,19 @@ provided by the <a href="https://ohif.org/">Open Health Imaging Foundation (OHIF
<div align="center"> <div align="center">
📰 <a href="https://ohif.org/news/"><strong>Join OHIF Newsletter</strong></a> 📰 📰 <a href="https://ohif.org/news/"><strong>Join OHIF Newsletter</strong></a> 📰
</div> </div>
<div align="center">
📰 <a href="https://ohif.org/news/"><strong>Join OHIF Newsletter</strong></a> 📰
</div>
<hr /> <hr />
[![NPM version][npm-version-image]][npm-url] [![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-url]
[![Pulls][docker-pulls-img]][docker-image-url]
[![MIT License][license-image]][license-url] [![MIT License][license-image]][license-url]
[![This project is using Percy.io for visual regression testing.][percy-image]](percy-url) [![This project is using Percy.io for visual regression testing.][percy-image]](percy-url)
<!-- [![NPM downloads][npm-downloads-image]][npm-url] -->
<!-- [![Pulls][docker-pulls-img]][docker-image-url] -->
<!-- [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FOHIF%2FViewers.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FOHIF%2FViewers?ref=badge_shield) --> <!-- [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FOHIF%2FViewers.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FOHIF%2FViewers?ref=badge_shield) -->
<!-- [![Netlify Status][netlify-image]][netlify-url] --> <!-- [![Netlify Status][netlify-image]][netlify-url] -->
@ -35,6 +38,8 @@ provided by the <a href="https://ohif.org/">Open Health Imaging Foundation (OHIF
<!-- [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors) --> <!-- [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors) -->
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
![Alt text](platform/docs/docs/assets/img/OHIF-Viewer.jpg)
## About ## About
The OHIF Medical Imaging Viewer is for viewing medical images. It can retrieve The OHIF Medical Imaging Viewer is for viewing medical images. It can retrieve
@ -95,6 +100,37 @@ questions; please read our
## Developing ## Developing
### Branches
#### `master` branch - The latest dev (beta) release
- `master` - The latest dev release
This is typically where the latest development happens. Code that is in the master branch has passed code reviews and automated tests, but it may not be deemed ready for production. This branch usually contains the most recent changes and features being worked on by the development team. It's often the starting point for creating feature branches (where new features are developed) and hotfix branches (for urgent fixes).
Each package is tagged with beta version numbers, and published to npm such as `@ohif/ui@3.6.0-beta.1`
### `release` branch - The latest stable release
This branch represents the latest stable version of the project that is considered ready for production. The code in this branch should be fully tested and vetted for release. Once the code in the master branch reaches a state where it's stable and ready to be released to users,
we do a comprehensive code review and QA testing. Once the code is approved,
we merge it into the release branch and tag a new release.
Each package is tagged with version numbers, and published to npm such as `@ohif/ui@3.5.0`
Note: `master` is always ahead of `release` branch. We publish both docker builds for beta and stable releases.
Here is a schematic representation of our development workflow:
![Alt text](platform/docs/docs/assets/img/github-readme-branches.png)
### Requirements ### Requirements
- [Yarn 1.17.3+](https://yarnpkg.com/en/docs/install) - [Yarn 1.17.3+](https://yarnpkg.com/en/docs/install)
@ -261,7 +297,7 @@ MIT © [OHIF](https://github.com/OHIF)
[npm-downloads-image]: https://img.shields.io/npm/dm/@ohif/app.svg?style=flat-square [npm-downloads-image]: https://img.shields.io/npm/dm/@ohif/app.svg?style=flat-square
[npm-version-image]: https://img.shields.io/npm/v/@ohif/app.svg?style=flat-square [npm-version-image]: https://img.shields.io/npm/v/@ohif/app.svg?style=flat-square
[docker-pulls-img]: https://img.shields.io/docker/pulls/ohif/viewer.svg?style=flat-square [docker-pulls-img]: https://img.shields.io/docker/pulls/ohif/viewer.svg?style=flat-square
[docker-image-url]: https://hub.docker.com/r/ohif/viewer [docker-image-url]: https://hub.docker.com/r/ohif/app
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square [license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square
[license-url]: LICENSE [license-url]: LICENSE
[percy-image]: https://percy.io/static/images/percy-badge.svg [percy-image]: https://percy.io/static/images/percy-badge.svg

View File

@ -1 +1 @@
16afa740b60b31037100444ef9311b80ffea2f67 3d8cc9801a8a0b2add8f2b57b5a8498d9f0522c4

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/extension-cornerstone-dicom-rt", "name": "@ohif/extension-cornerstone-dicom-rt",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "DICOM RT read workflow", "description": "DICOM RT read workflow",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",
@ -31,44 +31,19 @@
"start": "yarn run dev" "start": "yarn run dev"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/extension-cornerstone": "3.5.0", "@ohif/extension-cornerstone": "3.6.0-beta.3",
"@ohif/extension-default": "3.5.0", "@ohif/extension-default": "3.6.0-beta.3",
"@ohif/i18n": "3.5.0", "@ohif/i18n": "3.6.0-beta.3",
"prop-types": "^15.6.2", "prop-types": "^15.6.2",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-i18next": "^10.11.0", "react-i18next": "^10.11.0",
"react-router": "^6.3.0", "react-router": "^6.3.0",
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0"
"webpack": "^5.50.0",
"webpack-merge": "^5.7.3"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13", "@babel/runtime": "^7.20.13",
"react-color": "^2.19.3" "react-color": "^2.19.3"
},
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/plugin-proposal-class-properties": "^7.5.0",
"@babel/plugin-proposal-object-rest-spread": "^7.5.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-arrow-functions": "^7.2.0",
"@babel/plugin-transform-regenerator": "^7.16.7",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/preset-env": "^7.5.0",
"@babel/preset-react": "^7.16.7",
"babel-eslint": "^8.0.3",
"babel-loader": "^8.0.0-beta.4",
"babel-plugin-inline-react-svg": "^2.0.1",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^10.2.0",
"cross-env": "^7.0.3",
"dotenv": "^14.1.0",
"eslint": "^5.0.1",
"eslint-loader": "^2.0.0",
"webpack": "^5.50.0",
"webpack-cli": "^4.7.2",
"webpack-merge": "^5.7.3"
} }
} }

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/extension-cornerstone-dicom-seg", "name": "@ohif/extension-cornerstone-dicom-seg",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "DICOM SEG read workflow", "description": "DICOM SEG read workflow",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",
@ -31,44 +31,19 @@
"start": "yarn run dev" "start": "yarn run dev"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/extension-cornerstone": "3.5.0", "@ohif/extension-cornerstone": "3.6.0-beta.3",
"@ohif/extension-default": "3.5.0", "@ohif/extension-default": "3.6.0-beta.3",
"@ohif/i18n": "3.5.0", "@ohif/i18n": "3.6.0-beta.3",
"prop-types": "^15.6.2", "prop-types": "^15.6.2",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-i18next": "^12.2.2", "react-i18next": "^12.2.2",
"react-router": "^6.8.1", "react-router": "^6.8.1",
"react-router-dom": "^6.8.1", "react-router-dom": "^6.8.1"
"webpack": "^5.50.0",
"webpack-merge": "^5.7.3"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13", "@babel/runtime": "^7.20.13",
"react-color": "^2.19.3" "react-color": "^2.19.3"
},
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/plugin-proposal-class-properties": "^7.5.0",
"@babel/plugin-proposal-object-rest-spread": "^7.5.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-arrow-functions": "^7.2.0",
"@babel/plugin-transform-regenerator": "^7.16.7",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/preset-env": "^7.5.0",
"@babel/preset-react": "^7.16.7",
"babel-eslint": "^8.0.3",
"babel-loader": "^8.0.0-beta.4",
"babel-plugin-inline-react-svg": "^2.0.1",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"cross-env": "^7.0.3",
"dotenv": "^14.1.0",
"eslint": "^5.0.1",
"eslint-loader": "^2.0.0",
"webpack": "^5.50.0",
"webpack-cli": "^4.7.2",
"webpack-merge": "^5.7.3"
} }
} }

View File

@ -24,7 +24,7 @@ function callInputDialog(uiDialogService, label, callback) {
showOverlay: true, showOverlay: true,
content: Dialog, content: Dialog,
contentProps: { contentProps: {
title: 'Enter Segment Label', title: 'Segment',
value: { label }, value: { label },
noCloseButton: true, noCloseButton: true,
onClose: () => uiDialogService.dismiss({ id: dialogId }), onClose: () => uiDialogService.dismiss({ id: dialogId }),
@ -35,24 +35,23 @@ function callInputDialog(uiDialogService, label, callback) {
onSubmit: onSubmitHandler, onSubmit: onSubmitHandler,
body: ({ value, setValue }) => { body: ({ value, setValue }) => {
return ( return (
<div className="p-4 bg-primary-dark"> <Input
<Input label="Enter the segment label"
autoFocus labelClassName="text-white text-[14px] leading-[1.2]"
className="mt-2 bg-black border-primary-main" autoFocus
type="text" className="bg-black border-primary-main"
containerClassName="mr-2" type="text"
value={value.label} value={value.label}
onChange={event => { onChange={event => {
event.persist(); event.persist();
setValue(value => ({ ...value, label: event.target.value })); setValue(value => ({ ...value, label: event.target.value }));
}} }}
onKeyPress={event => { onKeyPress={event => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
onSubmitHandler({ value, action: { id: 'save' } }); onSubmitHandler({ value, action: { id: 'save' } });
} }
}} }}
/> />
</div>
); );
}, },
}, },

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/extension-cornerstone-dicom-sr", "name": "@ohif/extension-cornerstone-dicom-sr",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "OHIF extension for an SR Cornerstone Viewport", "description": "OHIF extension for an SR Cornerstone Viewport",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",
@ -32,10 +32,10 @@
"test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests" "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/extension-cornerstone": "3.5.0", "@ohif/extension-cornerstone": "3.6.0-beta.3",
"@ohif/extension-measurement-tracking": "3.5.0", "@ohif/extension-measurement-tracking": "3.6.0-beta.3",
"@ohif/ui": "3.5.0", "@ohif/ui": "3.6.0-beta.3",
"dcmjs": "^0.29.5", "dcmjs": "^0.29.5",
"dicom-parser": "^1.8.9", "dicom-parser": "^1.8.9",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/extension-cornerstone", "name": "@ohif/extension-cornerstone",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "OHIF extension for Cornerstone", "description": "OHIF extension for Cornerstone",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",
@ -37,8 +37,8 @@
"@cornerstonejs/codec-openjpeg": "^1.2.2", "@cornerstonejs/codec-openjpeg": "^1.2.2",
"@cornerstonejs/codec-openjph": "^2.4.2", "@cornerstonejs/codec-openjph": "^2.4.2",
"@cornerstonejs/dicom-image-loader": "^0.6.8", "@cornerstonejs/dicom-image-loader": "^0.6.8",
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/ui": "3.5.0", "@ohif/ui": "3.6.0-beta.3",
"dcmjs": "^0.29.6", "dcmjs": "^0.29.6",
"dicom-parser": "^1.8.21", "dicom-parser": "^1.8.21",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",

View File

@ -97,7 +97,7 @@ const DicomUploadProgressItem = memo(
)} )}
<div className="flex cursor-pointer ml-auto"> <div className="flex cursor-pointer ml-auto">
<Icon <Icon
className="w-6 h-6 self-center text-primary-active" className="self-center text-primary-active"
name="close" name="close"
onClick={cancelUpload} onClick={cancelUpload}
/> />

View File

@ -117,7 +117,7 @@ class SegmentationService extends PubSubService {
* -- opacity: the opacity of the segment * -- opacity: the opacity of the segment
* -- visibility: the visibility of the segment (boolean) * -- visibility: the visibility of the segment (boolean)
* -- isLocked: whether the segment is locked for editing * -- isLocked: whether the segment is locked for editing
* -- active: whether the segment is currently the active segment to be edited * -- active: whether the segment is currently the active segment to be edited or not
*/ */
public addSegment( public addSegment(
segmentationId: string, segmentationId: string,

View File

@ -27,8 +27,8 @@ function callInputDialog(
: data.label : data.label
: ''; : '';
const { const {
dialogTitle = 'Enter your annotation', dialogTitle = 'Annotation',
inputLabel = '', inputLabel = 'Enter your annotation',
validateFunc = value => true, validateFunc = value => true,
} = dialogConfig; } = dialogConfig;
@ -66,27 +66,24 @@ function callInputDialog(
onSubmit: onSubmitHandler, onSubmit: onSubmitHandler,
body: ({ value, setValue }) => { body: ({ value, setValue }) => {
return ( return (
<div className="p-4 bg-primary-dark"> <Input
<Input autoFocus
autoFocus className="bg-black border-primary-main"
className="mt-2 bg-black border-primary-main" type="text"
type="text" id="annotation"
id="annotation" label={inputLabel}
containerClassName="mr-2" labelClassName="text-white text-[14px] leading-[1.2]"
label={inputLabel} value={value.label}
labelClassName="text-primary-light" onChange={event => {
value={value.label} event.persist();
onChange={event => { setValue(value => ({ ...value, label: event.target.value }));
event.persist(); }}
setValue(value => ({ ...value, label: event.target.value })); onKeyPress={event => {
}} if (event.key === 'Enter') {
onKeyPress={event => { onSubmitHandler({ value, action: { id: 'save' } });
if (event.key === 'Enter') { }
onSubmitHandler({ value, action: { id: 'save' } }); }}
} />
}}
/>
</div>
); );
}, },
}, },

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/extension-default", "name": "@ohif/extension-default",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "Common/default features and functionality for basic image viewing", "description": "Common/default features and functionality for basic image viewing",
"author": "OHIF Core Team", "author": "OHIF Core Team",
"license": "MIT", "license": "MIT",
@ -30,8 +30,8 @@
"start": "yarn run dev" "start": "yarn run dev"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/i18n": "3.5.0", "@ohif/i18n": "3.6.0-beta.3",
"dcmjs": "^0.29.5", "dcmjs": "^0.29.5",
"dicomweb-client": "^0.10.2", "dicomweb-client": "^0.10.2",
"prop-types": "^15.6.2", "prop-types": "^15.6.2",

View File

@ -160,7 +160,7 @@ export default function PanelMeasurementTable({
showOverlay: true, showOverlay: true,
content: Dialog, content: Dialog,
contentProps: { contentProps: {
title: 'Enter your annotation', title: 'Annotation',
noCloseButton: true, noCloseButton: true,
value: { label: measurement.label || '' }, value: { label: measurement.label || '' },
body: ({ value, setValue }) => { body: ({ value, setValue }) => {
@ -175,18 +175,17 @@ export default function PanelMeasurementTable({
} }
}; };
return ( return (
<div className="p-4 bg-primary-dark"> <Input
<Input label="Enter your annotation"
autoFocus labelClassName="text-white text-[14px] leading-[1.2]"
id="annotation" autoFocus
className="mt-2 bg-black border-primary-main" id="annotation"
type="text" className="bg-black border-primary-main"
containerClassName="mr-2" type="text"
value={value.label} value={value.label}
onChange={onChangeHandler} onChange={onChangeHandler}
onKeyPress={onKeyPressHandler} onKeyPress={onKeyPressHandler}
/> />
</div>
); );
}, },
actions: [ actions: [

View File

@ -11,7 +11,7 @@ export default function createReportDialogPrompt(
uiDialogService, uiDialogService,
{ extensionManager } { extensionManager }
) { ) {
return new Promise(function (resolve, reject) { return new Promise(function(resolve, reject) {
let dialogId = undefined; let dialogId = undefined;
const _handleClose = () => { const _handleClose = () => {
@ -73,7 +73,7 @@ export default function createReportDialogPrompt(
useLastPosition: false, useLastPosition: false,
showOverlay: true, showOverlay: true,
contentProps: { contentProps: {
title: 'Provide a name for your report', title: 'Create Report',
value: { value: {
label: '', label: '',
dataSourceName: extensionManager.activeDataSource, dataSourceName: extensionManager.activeDataSource,
@ -102,38 +102,34 @@ export default function createReportDialogPrompt(
}; };
return ( return (
<> <>
<div className="p-4 bg-primary-dark"> {dataSourcesOpts.length > 1 && (
{dataSourcesOpts.length > 1 && ( <Select
<Select closeMenuOnSelect={true}
closeMenuOnSelect={true} className="mr-2 bg-black border-primary-main"
className="mr-2 bg-black border-primary-main" options={dataSourcesOpts}
options={dataSourcesOpts} placeholder={
placeholder={ dataSourcesOpts.find(
dataSourcesOpts.find( option => option.value === value.dataSourceName
option => option.value === value.dataSourceName ).placeHolder
).placeHolder }
} value={value.dataSourceName}
value={value.dataSourceName} onChange={evt => {
onChange={evt => { setValue(v => ({ ...v, dataSourceName: evt.value }));
setValue(v => ({ ...v, dataSourceName: evt.value })); }}
}} isClearable={false}
isClearable={false}
/>
)}
</div>
<div className="p-4 bg-primary-dark">
<Input
autoFocus
className="mt-2 bg-black border-primary-main"
type="text"
placeholder="Enter Report Name"
containerClassName="mr-2"
value={value.label}
onChange={onChangeHandler}
onKeyPress={onKeyPressHandler}
required
/> />
</div> )}
<Input
autoFocus
label="Enter the report name"
labelClassName="text-white text-[14px] leading-[1.2]"
className="bg-black border-primary-main"
type="text"
value={value.label}
onChange={onChangeHandler}
onKeyPress={onKeyPressHandler}
required
/>
</> </>
); );
}, },

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/extension-dicom-microscopy", "name": "@ohif/extension-dicom-microscopy",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "OHIF extension for DICOM microscopy", "description": "OHIF extension for DICOM microscopy",
"author": "Bill Wallace, md-prog", "author": "Bill Wallace, md-prog",
"license": "MIT", "license": "MIT",
@ -28,18 +28,16 @@
"start": "yarn run dev" "start": "yarn run dev"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/extension-default": "3.5.0", "@ohif/extension-default": "3.6.0-beta.3",
"@ohif/i18n": "3.5.0", "@ohif/i18n": "3.6.0-beta.3",
"@ohif/ui": "3.5.0", "@ohif/ui": "3.6.0-beta.3",
"prop-types": "^15.6.2", "prop-types": "^15.6.2",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-i18next": "^10.11.0", "react-i18next": "^10.11.0",
"react-router": "^6.8.1", "react-router": "^6.8.1",
"react-router-dom": "^6.8.1", "react-router-dom": "^6.8.1"
"webpack": "^5.50.0",
"webpack-merge": "^5.7.3"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13", "@babel/runtime": "^7.20.13",
@ -49,31 +47,5 @@
"colormap": "^2.3", "colormap": "^2.3",
"dicom-microscopy-viewer": "^0.44.0", "dicom-microscopy-viewer": "^0.44.0",
"dicomicc": "^0.1" "dicomicc": "^0.1"
},
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-proposal-object-rest-spread": "^7.17.3",
"@babel/plugin-proposal-private-methods": "^7.18.6",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-arrow-functions": "^7.16.7",
"@babel/plugin-transform-regenerator": "^7.16.7",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/plugin-transform-typescript": "^7.13.0",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.13.0",
"babel-eslint": "^8.0.3",
"babel-loader": "^8.0.0-beta.4",
"babel-plugin-inline-react-svg": "^2.0.1",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^10.2.0",
"cross-env": "^7.0.3",
"dotenv": "^14.1.0",
"eslint": "^5.0.1",
"eslint-loader": "^2.0.0",
"webpack": "^5.50.0",
"webpack-cli": "^4.7.2",
"webpack-merge": "^5.7.3"
} }
} }

View File

@ -31,7 +31,6 @@ export default function getCommandsModule({
callInputDialog({ callInputDialog({
uiDialogService, uiDialogService,
title: 'Enter your annotation',
defaultValue: '', defaultValue: '',
callback: (value: string, action: string) => { callback: (value: string, action: string) => {
switch (action) { switch (action) {

View File

@ -12,7 +12,7 @@ import { Input, Dialog } from '@ohif/ui';
*/ */
export default function callInputDialog({ export default function callInputDialog({
uiDialogService, uiDialogService,
title = 'Enter your annotation', title = 'Annotation',
defaultValue = '', defaultValue = '',
callback = (value: string, action: string) => {} callback = (value: string, action: string) => {}
}) { }) {
@ -49,24 +49,23 @@ export default function callInputDialog({
onSubmit: onSubmitHandler, onSubmit: onSubmitHandler,
body: ({ value, setValue }) => { body: ({ value, setValue }) => {
return ( return (
<div className="p-4 bg-primary-dark"> <Input
<Input label="Enter your annotation"
autoFocus labelClassName="text-white text-[14px] leading-[1.2]"
className="mt-2 bg-black border-primary-main" autoFocus
type="text" className="bg-black border-primary-main"
containerClassName="mr-2" type="text"
value={value.defaultValue} value={value.defaultValue}
onChange={event => { onChange={event => {
event.persist(); event.persist();
setValue(value => ({ ...value, value: event.target.value })); setValue(value => ({ ...value, value: event.target.value }));
}} }}
onKeyPress={event => { onKeyPress={event => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
onSubmitHandler({ value, action: { id: 'save' } }); onSubmitHandler({ value, action: { id: 'save' } });
} }
}} }}
/> />
</div>
); );
}, },
}, },

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/extension-dicom-pdf", "name": "@ohif/extension-dicom-pdf",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "OHIF extension for PDF display", "description": "OHIF extension for PDF display",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",
@ -28,8 +28,8 @@
"test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests" "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/ui": "3.5.0", "@ohif/ui": "3.6.0-beta.3",
"dcmjs": "^0.29.5", "dcmjs": "^0.29.5",
"dicom-parser": "^1.8.9", "dicom-parser": "^1.8.9",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/extension-dicom-video", "name": "@ohif/extension-dicom-video",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "OHIF extension for video display", "description": "OHIF extension for video display",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",
@ -28,8 +28,8 @@
"test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests" "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/ui": "3.5.0", "@ohif/ui": "3.6.0-beta.3",
"dcmjs": "^0.29.5", "dcmjs": "^0.29.5",
"dicom-parser": "^1.8.9", "dicom-parser": "^1.8.9",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/extension-measurement-tracking", "name": "@ohif/extension-measurement-tracking",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "Tracking features and functionality for basic image viewing", "description": "Tracking features and functionality for basic image viewing",
"author": "OHIF Core Team", "author": "OHIF Core Team",
"license": "MIT", "license": "MIT",
@ -32,9 +32,9 @@
"peerDependencies": { "peerDependencies": {
"@cornerstonejs/core": "^1.1.0", "@cornerstonejs/core": "^1.1.0",
"@cornerstonejs/tools": "^1.1.0", "@cornerstonejs/tools": "^1.1.0",
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/extension-cornerstone-dicom-sr": "3.5.0", "@ohif/extension-cornerstone-dicom-sr": "3.6.0-beta.3",
"@ohif/ui": "3.5.0", "@ohif/ui": "3.6.0-beta.3",
"classnames": "^2.3.2", "classnames": "^2.3.2",
"dcmjs": "^0.29.5", "dcmjs": "^0.29.5",
"lodash.debounce": "^4.17.21", "lodash.debounce": "^4.17.21",
@ -46,7 +46,7 @@
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13", "@babel/runtime": "^7.20.13",
"@ohif/ui": "3.5.0", "@ohif/ui": "3.6.0-beta.3",
"@xstate/react": "^0.8.1", "@xstate/react": "^0.8.1",
"xstate": "^4.10.0" "xstate": "^4.10.0"
} }

View File

@ -38,7 +38,7 @@ export default function createReportDialogPrompt(uiDialogService) {
useLastPosition: false, useLastPosition: false,
showOverlay: true, showOverlay: true,
contentProps: { contentProps: {
title: 'Provide a name for your report', title: 'Create Report',
value: { label: '' }, value: { label: '' },
noCloseButton: true, noCloseButton: true,
onClose: _handleClose, onClose: _handleClose,
@ -60,12 +60,13 @@ export default function createReportDialogPrompt(uiDialogService) {
} }
}; };
return ( return (
<div className="p-4 bg-primary-dark"> <div className="">
<Input <Input
label="Enter the report name"
labelClassName="text-white grow leading-[1.2] text-[14px]"
autoFocus autoFocus
className="mt-2 bg-black border-primary-main" className="bg-black border-primary-main grow"
type="text" type="text"
containerClassName="mr-2"
value={value.label} value={value.label}
onChange={onChangeHandler} onChange={onChangeHandler}
onKeyPress={onKeyPressHandler} onKeyPress={onKeyPressHandler}

View File

@ -188,7 +188,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
showOverlay: true, showOverlay: true,
content: Dialog, content: Dialog,
contentProps: { contentProps: {
title: 'Enter your annotation', title: 'Annotation',
noCloseButton: true, noCloseButton: true,
value: { label: measurement.label || '' }, value: { label: measurement.label || '' },
body: ({ value, setValue }) => { body: ({ value, setValue }) => {
@ -203,18 +203,17 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
} }
}; };
return ( return (
<div className="p-4 bg-primary-dark"> <Input
<Input label="Enter your annotation"
autoFocus labelClassName="text-white grow text-[14px] leading-[1.2]"
id="annotation" autoFocus
className="mt-2 bg-black border-primary-main" id="annotation"
type="text" className="bg-black border-primary-main"
containerClassName="mr-2" type="text"
value={value.label} value={value.label}
onChange={onChangeHandler} onChange={onChangeHandler}
onKeyPress={onKeyPressHandler} onKeyPress={onKeyPressHandler}
/> />
</div>
); );
}, },
actions: [ actions: [

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/extension-test", "name": "@ohif/extension-test",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "OHIF extension used inside e2e testing", "description": "OHIF extension used inside e2e testing",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",
@ -28,8 +28,8 @@
"test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests" "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/ui": "3.5.0", "@ohif/ui": "3.6.0-beta.3",
"dcmjs": "0.29.4", "dcmjs": "0.29.4",
"dicom-parser": "^1.8.9", "dicom-parser": "^1.8.9",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/extension-tmtv", "name": "@ohif/extension-tmtv",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "OHIF extension for Total Metabolic Tumor Volume", "description": "OHIF extension for Total Metabolic Tumor Volume",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",
@ -28,8 +28,8 @@
"test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests" "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/ui": "3.5.0", "@ohif/ui": "3.6.0-beta.3",
"dcmjs": "^0.29.5", "dcmjs": "^0.29.5",
"dicom-parser": "^1.8.9", "dicom-parser": "^1.8.9",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",

View File

@ -1,5 +1,5 @@
{ {
"version": "3.5.0", "version": "3.6.0-beta.3",
"packages": ["extensions/*", "platform/*", "modes/*"], "packages": ["extensions/*", "platform/*", "modes/*"],
"npmClient": "yarn", "npmClient": "yarn",
"useWorkspaces": true "useWorkspaces": true

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/mode-basic-dev-mode", "name": "@ohif/mode-basic-dev-mode",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "Basic OHIF Viewer Using Cornerstone", "description": "Basic OHIF Viewer Using Cornerstone",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",
@ -29,12 +29,12 @@
"test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests" "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/extension-cornerstone": "3.5.0", "@ohif/extension-cornerstone": "3.6.0-beta.3",
"@ohif/extension-cornerstone-dicom-sr": "3.5.0", "@ohif/extension-cornerstone-dicom-sr": "3.6.0-beta.3",
"@ohif/extension-default": "3.5.0", "@ohif/extension-default": "3.6.0-beta.3",
"@ohif/extension-dicom-pdf": "3.5.0", "@ohif/extension-dicom-pdf": "3.6.0-beta.3",
"@ohif/extension-dicom-video": "3.5.0" "@ohif/extension-dicom-video": "3.6.0-beta.3"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13" "@babel/runtime": "^7.20.13"

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/mode-test", "name": "@ohif/mode-test",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "Basic mode for testing", "description": "Basic mode for testing",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",
@ -32,14 +32,14 @@
"test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests" "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/extension-cornerstone": "3.5.0", "@ohif/extension-cornerstone": "3.6.0-beta.3",
"@ohif/extension-cornerstone-dicom-sr": "3.5.0", "@ohif/extension-cornerstone-dicom-sr": "3.6.0-beta.3",
"@ohif/extension-default": "3.5.0", "@ohif/extension-default": "3.6.0-beta.3",
"@ohif/extension-dicom-pdf": "3.5.0", "@ohif/extension-dicom-pdf": "3.6.0-beta.3",
"@ohif/extension-dicom-video": "3.5.0", "@ohif/extension-dicom-video": "3.6.0-beta.3",
"@ohif/extension-measurement-tracking": "3.5.0", "@ohif/extension-measurement-tracking": "3.6.0-beta.3",
"@ohif/extension-test": "3.5.0" "@ohif/extension-test": "3.6.0-beta.3"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13" "@babel/runtime": "^7.20.13"

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/mode-longitudinal", "name": "@ohif/mode-longitudinal",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "Longitudinal Workflow", "description": "Longitudinal Workflow",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",
@ -32,15 +32,15 @@
"test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests" "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/extension-cornerstone": "3.5.0", "@ohif/extension-cornerstone": "3.6.0-beta.3",
"@ohif/extension-cornerstone-dicom-rt": "3.5.0", "@ohif/extension-cornerstone-dicom-rt": "3.6.0-beta.3",
"@ohif/extension-cornerstone-dicom-seg": "3.5.0", "@ohif/extension-cornerstone-dicom-seg": "3.6.0-beta.3",
"@ohif/extension-cornerstone-dicom-sr": "3.5.0", "@ohif/extension-cornerstone-dicom-sr": "3.6.0-beta.3",
"@ohif/extension-default": "3.5.0", "@ohif/extension-default": "3.6.0-beta.3",
"@ohif/extension-dicom-pdf": "3.5.0", "@ohif/extension-dicom-pdf": "3.6.0-beta.3",
"@ohif/extension-dicom-video": "3.5.0", "@ohif/extension-dicom-video": "3.6.0-beta.3",
"@ohif/extension-measurement-tracking": "3.5.0" "@ohif/extension-measurement-tracking": "3.6.0-beta.3"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13" "@babel/runtime": "^7.20.13"

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/mode-microscopy", "name": "@ohif/mode-microscopy",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "OHIF mode for DICOM microscopy", "description": "OHIF mode for DICOM microscopy",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",
@ -33,36 +33,10 @@
"test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests" "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/extension-dicom-microscopy": "3.5.0" "@ohif/extension-dicom-microscopy": "3.6.0-beta.3"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13" "@babel/runtime": "^7.20.13"
},
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-proposal-object-rest-spread": "^7.17.3",
"@babel/plugin-proposal-private-methods": "^7.18.6",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-arrow-functions": "^7.16.7",
"@babel/plugin-transform-regenerator": "^7.16.7",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/plugin-transform-typescript": "^7.13.0",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.13.0",
"babel-eslint": "^8.0.3",
"babel-loader": "^8.0.0-beta.4",
"babel-plugin-inline-react-svg": "^2.0.1",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^10.2.0",
"cross-env": "^7.0.3",
"dotenv": "^14.1.0",
"eslint": "^5.0.1",
"eslint-loader": "^2.0.0",
"webpack": "^5.50.0",
"webpack-cli": "^4.7.2",
"webpack-merge": "^5.7.3"
} }
} }

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/mode-tmtv", "name": "@ohif/mode-tmtv",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "Total Metabolic Tumor Volume Workflow", "description": "Total Metabolic Tumor Volume Workflow",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",
@ -32,13 +32,13 @@
"test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests" "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
}, },
"peerDependencies": { "peerDependencies": {
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/extension-cornerstone": "3.5.0", "@ohif/extension-cornerstone": "3.6.0-beta.3",
"@ohif/extension-cornerstone-dicom-sr": "3.5.0", "@ohif/extension-cornerstone-dicom-sr": "3.6.0-beta.3",
"@ohif/extension-default": "3.5.0", "@ohif/extension-default": "3.6.0-beta.3",
"@ohif/extension-dicom-pdf": "3.5.0", "@ohif/extension-dicom-pdf": "3.6.0-beta.3",
"@ohif/extension-dicom-video": "3.5.0", "@ohif/extension-dicom-video": "3.6.0-beta.3",
"@ohif/extension-measurement-tracking": "3.5.0" "@ohif/extension-measurement-tracking": "3.6.0-beta.3"
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13" "@babel/runtime": "^7.20.13"

View File

@ -151,6 +151,7 @@
"resolutions": { "resolutions": {
"@cornerstonejs/core": "^1.1.0", "@cornerstonejs/core": "^1.1.0",
"**/@babel/runtime": "^7.20.13", "**/@babel/runtime": "^7.20.13",
"commander": "8.3.0",
"nth-check": "^2.1.1", "nth-check": "^2.1.1",
"trim-newlines": "^5.0.0", "trim-newlines": "^5.0.0",
"glob-parent": "^6.0.2", "glob-parent": "^6.0.2",

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/app", "name": "@ohif/app",
"version": "3.5.0", "version": "3.6.0-beta.3",
"productVersion": "3.4.0", "productVersion": "3.4.0",
"description": "OHIF Viewer", "description": "OHIF Viewer",
"author": "OHIF Contributors", "author": "OHIF Contributors",
@ -52,22 +52,22 @@
"@cornerstonejs/codec-openjpeg": "^1.2.2", "@cornerstonejs/codec-openjpeg": "^1.2.2",
"@cornerstonejs/codec-openjph": "^2.4.2", "@cornerstonejs/codec-openjph": "^2.4.2",
"@cornerstonejs/dicom-image-loader": "^0.6.8", "@cornerstonejs/dicom-image-loader": "^0.6.8",
"@ohif/core": "3.5.0", "@ohif/core": "3.6.0-beta.3",
"@ohif/extension-cornerstone": "3.5.0", "@ohif/extension-cornerstone": "3.6.0-beta.3",
"@ohif/extension-cornerstone-dicom-rt": "3.5.0", "@ohif/extension-cornerstone-dicom-rt": "3.6.0-beta.3",
"@ohif/extension-cornerstone-dicom-seg": "3.5.0", "@ohif/extension-cornerstone-dicom-seg": "3.6.0-beta.3",
"@ohif/extension-cornerstone-dicom-sr": "3.5.0", "@ohif/extension-cornerstone-dicom-sr": "3.6.0-beta.3",
"@ohif/extension-default": "3.5.0", "@ohif/extension-default": "3.6.0-beta.3",
"@ohif/extension-dicom-microscopy": "3.5.0", "@ohif/extension-dicom-microscopy": "3.6.0-beta.3",
"@ohif/extension-dicom-pdf": "3.5.0", "@ohif/extension-dicom-pdf": "3.6.0-beta.3",
"@ohif/extension-dicom-video": "3.5.0", "@ohif/extension-dicom-video": "3.6.0-beta.3",
"@ohif/extension-test": "3.5.0", "@ohif/extension-test": "3.6.0-beta.3",
"@ohif/i18n": "3.5.0", "@ohif/i18n": "3.6.0-beta.3",
"@ohif/mode-basic-dev-mode": "3.5.0", "@ohif/mode-basic-dev-mode": "3.6.0-beta.3",
"@ohif/mode-longitudinal": "3.5.0", "@ohif/mode-longitudinal": "3.6.0-beta.3",
"@ohif/mode-microscopy": "3.5.0", "@ohif/mode-microscopy": "3.6.0-beta.3",
"@ohif/mode-test": "3.5.0", "@ohif/mode-test": "3.6.0-beta.3",
"@ohif/ui": "3.5.0", "@ohif/ui": "3.6.0-beta.3",
"@types/react": "^17.0.38", "@types/react": "^17.0.38",
"classnames": "^2.3.2", "classnames": "^2.3.2",
"core-js": "^3.16.1", "core-js": "^3.16.1",

View File

@ -33,7 +33,7 @@ window.config = {
supportsWildcard: true, supportsWildcard: true,
dicomUploadEnabled: true, dicomUploadEnabled: true,
bulkDataURI: { bulkDataURI: {
enabled: false, enabled: true,
}, },
}, },
}, },

View File

@ -1,3 +1,9 @@
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for (let registration of registrations) {
registration.unregister();
}
});
// https://developers.google.com/web/tools/workbox/modules/workbox-window // https://developers.google.com/web/tools/workbox/modules/workbox-window
// All major browsers that support service worker also support native JavaScript // All major browsers that support service worker also support native JavaScript
// modules, so it's perfectly fine to serve this code to any browsers // modules, so it's perfectly fine to serve this code to any browsers
@ -5,7 +11,7 @@
// //
//import { Workbox } from './workbox-window.prod.mjs'; //import { Workbox } from './workbox-window.prod.mjs';
// proper initialization // proper initialization
if( 'function' === typeof importScripts) { if ('function' === typeof importScripts) {
importScripts( importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-window.prod.mjs' 'https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-window.prod.mjs'
); );
@ -55,5 +61,4 @@ if( 'function' === typeof importScripts) {
wb.register(); wb.register();
} }
} }

View File

@ -1,3 +1,9 @@
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for (let registration of registrations) {
registration.unregister();
}
});
// https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug // https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug
importScripts( importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/5.0.0-beta.1/workbox-sw.js' 'https://storage.googleapis.com/workbox-cdn/releases/5.0.0-beta.1/workbox-sw.js'

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/cli", "name": "@ohif/cli",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "A CLI to bootstrap new OHIF extension or mode", "description": "A CLI to bootstrap new OHIF extension or mode",
"type": "module", "type": "module",
"main": "src/index.js", "main": "src/index.js",
@ -21,7 +21,6 @@
"@babel/core": "^7.21.4", "@babel/core": "^7.21.4",
"axios": "^0.26.1", "axios": "^0.26.1",
"chalk": "^5.0.0", "chalk": "^5.0.0",
"commander": "^8.3.0",
"execa": "^6.0.0", "execa": "^6.0.0",
"gitignore": "^0.7.0", "gitignore": "^0.7.0",
"inquirer": "^8.2.0", "inquirer": "^8.2.0",

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/core", "name": "@ohif/core",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "Generic business logic for web-based medical imaging applications", "description": "Generic business logic for web-based medical imaging applications",
"author": "OHIF Core Team", "author": "OHIF Core Team",
"license": "MIT", "license": "MIT",
@ -36,7 +36,7 @@
"@cornerstonejs/codec-openjpeg": "^1.2.2", "@cornerstonejs/codec-openjpeg": "^1.2.2",
"@cornerstonejs/codec-openjph": "^2.4.2", "@cornerstonejs/codec-openjph": "^2.4.2",
"@cornerstonejs/dicom-image-loader": "^0.6.8", "@cornerstonejs/dicom-image-loader": "^0.6.8",
"@ohif/ui": "3.5.0", "@ohif/ui": "3.6.0-beta.3",
"cornerstone-math": "0.1.9", "cornerstone-math": "0.1.9",
"dicom-parser": "^1.8.21" "dicom-parser": "^1.8.21"
}, },

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

View File

@ -43,3 +43,11 @@ The Dockerfile and entry point use the `${PORT}` environment variable as the por
```sh ```sh
docker run -d -e PORT=8080 -p 3000:8080/tcp --name ohif-viewer-container ohif-viewer-image docker run -d -e PORT=8080 -p 3000:8080/tcp --name ohif-viewer-container ohif-viewer-image
``` ```
### Configuring the OHIF config file
The OHIF [config file](../configuration/configurationFiles.md) to use can be specified by mounting it as a volume for the Docker container using the `-v` flag. If the OHIF config file is on the local file system then it can be specified as below. Note that depending on the version of Docker, an absolute path to the config file might be required.
```sh
docker run -d -p 3000:80/tcp -v /path/to/config/file.js:/usr/share/nginx/html/app-config.js --name ohif-viewer-container ohif-viewer-image
```

View File

@ -40,6 +40,31 @@ aren't as concerned with syncing updates, then follow these steps:
## Developing ## Developing
### Branches
#### `master` branch - The latest dev (beta) release
- `master` - The latest dev release
This is typically where the latest development happens. Code that is in the master branch has passed code reviews and automated tests, but it may not be deemed ready for production. This branch usually contains the most recent changes and features being worked on by the development team. It's often the starting point for creating feature branches (where new features are developed) and hotfix branches (for urgent fixes).
Each package is tagged with beta version numbers, and published to npm such as `@ohif/ui@3.6.0-beta.1`
### `release` branch - The latest stable release
This branch represents the latest stable version of the project that is considered ready for production. The code in this branch should be fully tested and vetted for release. Once the code in the master branch reaches a state where it's stable and ready to be released to users,
we do a comprehensive code review and QA testing. Once the code is approved,
we merge it into the release branch and tag a new release.
Each package is tagged with version numbers, and published to npm such as `@ohif/ui@3.5.0`
Note: `master` is always ahead of `release` branch. We publish both docker builds for beta and stable releases.
Here is a schematic representation of our development workflow:
![Alt text](../../docs/assets/img/github-readme-branches.png)
### Requirements ### Requirements
- [Node.js & NPM](https://nodejs.org/en/) - [Node.js & NPM](https://nodejs.org/en/)

View File

@ -235,9 +235,6 @@ module.exports = {
current: { current: {
label: 'Latest', label: 'Latest',
}, },
'2.0': {
label: 'Version 2.0 - Master branch',
},
}, },
}, },
theme: { theme: {

View File

@ -1,6 +1,6 @@
{ {
"name": "ohif-docs", "name": "ohif-docs",
"version": "3.5.0", "version": "3.6.0-beta.3",
"private": true, "private": true,
"workspaces": { "workspaces": {
"nohoist": [ "nohoist": [

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/i18n", "name": "@ohif/i18n",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "Internationalization library for The OHIF Viewer", "description": "Internationalization library for The OHIF Viewer",
"author": "OHIF", "author": "OHIF",
"license": "MIT", "license": "MIT",

View File

@ -1,6 +1,6 @@
{ {
"name": "@ohif/ui", "name": "@ohif/ui",
"version": "3.5.0", "version": "3.6.0-beta.3",
"description": "A set of React components for Medical Imaging Viewers", "description": "A set of React components for Medical Imaging Viewers",
"author": "OHIF Contributors", "author": "OHIF Contributors",
"license": "MIT", "license": "MIT",

View File

@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
<g fill="currentColor" fill-rule="evenodd">
<g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M.188.187L8.813 8.812M8.813.187L.188 8.812" transform="translate(5 5)"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 332 B

View File

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M12 1.05 10.95 0 6 4.95 1.05 0 0 1.05 4.95 6 0 10.95 1.05 12 6 7.05 10.95 12 12 10.95 7.05 6z" fill="currentColor" fill-rule="evenodd"/>
</svg>

After

Width:  |  Height:  |  Size: 241 B

View File

@ -1,8 +1,10 @@
import React from 'react'; import React from 'react';
import { Typography, Icon } from '../';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import detect from 'browser-detect'; import detect from 'browser-detect';
import Typography from '../Typography';
import Icon from '../Icon';
const Link = ({ href, children, showIcon = false }) => { const Link = ({ href, children, showIcon = false }) => {
return ( return (
<a href={href} target="_blank" rel="noopener noreferrer"> <a href={href} target="_blank" rel="noopener noreferrer">
@ -49,7 +51,11 @@ const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
const renderRowTitle = title => ( const renderRowTitle = title => (
<div className="pb-3 mb-3 border-b-2 border-black"> <div className="pb-3 mb-3 border-b-2 border-black">
<Typography variant="h6" className="text-primary-light"> <Typography
variant="inherit"
color="primaryLight"
className="text-[16px] font-semibold !leading-[1.2]"
>
{title} {title}
</Typography> </Typography>
</div> </div>
@ -83,6 +89,11 @@ const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
value="https://github.com/OHIF/Viewers/" value="https://github.com/OHIF/Viewers/"
link="https://github.com/OHIF/Viewers/" link="https://github.com/OHIF/Viewers/"
/> />
<Row
title="Data Citation"
value="https://github.com/OHIF/Viewers/blob/master/DATACITATION.md"
link="https://github.com/OHIF/Viewers/blob/master/DATACITATION.md"
/>
{/* <Row {/* <Row
title="Last Master Commits" title="Last Master Commits"
value="https://github.com/OHIF/Viewers/" value="https://github.com/OHIF/Viewers/"

View File

@ -1,7 +1,10 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import debounce from 'lodash.debounce'; import debounce from 'lodash.debounce';
import { Icon, Tooltip, InputRange } from '../';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
import InputRange from '../InputRange';
import './CinePlayer.css'; import './CinePlayer.css';
import classNames from 'classnames'; import classNames from 'classnames';

View File

@ -2,17 +2,19 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Typography } from '..'; import Typography from '../Typography';
const Body = ({ text, className }) => { const Body = ({ text, className }) => {
const theme = 'bg-primary-dark'; const theme = 'bg-primary-dark';
return ( return (
<div className={classNames('relative flex-auto', theme, className)}> <div className={classNames('relative flex-auto', theme, className)}>
<div className="p-6"> <Typography
<Typography variant="body" className="my-4 leading-relaxed"> variant="inherit"
{text} color="initial"
</Typography> className="text-[14px] !leading-[1.2]"
</div> >
{text}
</Typography>
</div> </div>
); );
}; };

View File

@ -22,12 +22,13 @@ const Dialog = ({
}) => { }) => {
const [value, setValue] = useState(defaultValue); const [value, setValue] = useState(defaultValue);
const theme = 'bg-secondary-light'; const theme = 'bg-primary-dark';
const flex = 'flex flex-col'; const flex = 'flex flex-col';
const border = 'border-0 rounded-lg drop-shadow-lg'; const border = 'border-0 rounded';
const outline = 'outline-none focus:outline-none'; const outline = 'outline-none focus:outline-none';
const position = 'relative'; const position = 'relative';
const width = 'w-full'; const width = 'w-full';
const padding = 'px-[20px] pb-[20px] pt-[13px]';
useEffect(() => { useEffect(() => {
if (onShow) { if (onShow) {
@ -36,7 +37,17 @@ const Dialog = ({
}, [onShow]); }, [onShow]);
return ( return (
<div className={classNames(theme, flex, border, outline, position, width)}> <div
className={classNames(
theme,
flex,
border,
outline,
position,
width,
padding
)}
>
<HeaderComponent <HeaderComponent
title={title} title={title}
noCloseButton={noCloseButton} noCloseButton={noCloseButton}

View File

@ -2,16 +2,14 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Button } from '..'; import Button from '../Button';
const Footer = ({ actions, className, onSubmit, value }) => { const Footer = ({ actions, className, onSubmit, value }) => {
const flex = 'flex items-center justify-end'; const flex = 'flex items-center justify-end';
const border = 'border-t-2 border-solid border-black rounded-b'; const padding = 'pt-[20px]';
const spacing = 'p-6';
const theme = 'bg-primary-dark';
return ( return (
<div className={classNames(flex, border, spacing, theme, className)}> <div className={classNames(flex, padding, className)}>
{actions.map((action, index) => { {actions.map((action, index) => {
const isFirst = index === 0; const isFirst = index === 0;
const isPrimary = action.type === 'primary'; const isPrimary = action.type === 'primary';

View File

@ -2,7 +2,8 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Typography, Icon } from '..'; import Typography from '../Typography';
import Icon from '../Icon';
const CloseButton = ({ onClick }) => { const CloseButton = ({ onClick }) => {
return ( return (
@ -10,7 +11,7 @@ const CloseButton = ({ onClick }) => {
data-cy="close-button" data-cy="close-button"
onClick={onClick} onClick={onClick}
name="close" name="close"
className="cursor-pointer text-primary-active w-6 h-6" className="cursor-pointer text-primary-active"
/> />
); );
}; };
@ -20,14 +21,13 @@ CloseButton.propTypes = {
}; };
const Header = ({ title, noCloseButton, onClose }) => { const Header = ({ title, noCloseButton, onClose }) => {
const theme = 'bg-secondary-main'; const theme = 'bg-primary-dark';
const flex = 'flex items-center justify-between'; const flex = 'flex items-center justify-between';
const border = 'border-b-2 border-solid border-black rounded-t'; const padding = 'pb-[20px]';
const spacing = 'p-4';
return ( return (
<div className={classNames(theme, flex, border, spacing)}> <div className={classNames(theme, flex, padding)}>
<Typography variant="h6" color="primaryActive"> <Typography variant="h6" color="primaryLight" className="!leading-[1.2]">
{title} {title}
</Typography> </Typography>
{!noCloseButton && <CloseButton onClick={onClose} />} {!noCloseButton && <CloseButton onClick={onClose} />}

View File

@ -2,7 +2,8 @@ import React, { useEffect, useCallback, useState, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Icon, Typography } from '../'; import Icon from '../Icon';
import Typography from '../Typography';
const Dropdown = ({ id, children, showDropdownIcon, list, titleClassName }) => { const Dropdown = ({ id, children, showDropdownIcon, list, titleClassName }) => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);

View File

@ -1,7 +1,9 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Icon, Typography } from '../';
import Icon from '../Icon';
import Typography from '../Typography';
// TODO: Add loading spinner to OHIF + use it here. // TODO: Add loading spinner to OHIF + use it here.
const EmptyStudies = ({ className }) => { const EmptyStudies = ({ className }) => {

View File

@ -1,8 +1,10 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'; import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
import { Icon, IconButton } from '@ohif/ui';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Modal from '../Modal'; import Modal from '../Modal';
import Icon from '../Icon';
import IconButton from '../IconButton';
const isProduction = process.env.NODE_ENV === 'production'; const isProduction = process.env.NODE_ENV === 'production';

View File

@ -2,7 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { IconButton, Icon } from '../'; import IconButton from '../IconButton';
import Icon from '../Icon';
import './ExpandableToolbarButton.css'; import './ExpandableToolbarButton.css';

View File

@ -2,7 +2,12 @@ import React, { ReactNode } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import classNames from 'classnames'; import classNames from 'classnames';
import { NavBar, Svg, Icon, IconButton, Dropdown } from '../';
import NavBar from '../NavBar';
import Svg from '../Svg';
import Icon from '../Icon';
import IconButton from '../IconButton';
import Dropdown from '../Dropdown';
function Header({ function Header({
children, children,

View File

@ -1,9 +1,11 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import { HotkeyField, Typography } from '../';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import HotkeyField from '../HotkeyField';
import Typography from '../Typography';
/* TODO: Move these configs and utils to core? */ /* TODO: Move these configs and utils to core? */
import { MODIFIER_KEYS } from './hotkeysConfig'; import { MODIFIER_KEYS } from './hotkeysConfig';
import { validate, splitHotkeyDefinitionsAndCreateTuples } from './utils'; import { validate, splitHotkeyDefinitionsAndCreateTuples } from './utils';

View File

@ -8,7 +8,7 @@ import arrowRightSmall from './../../assets/icons/arrow-right-small.svg';
import calendar from './../../assets/icons/calendar.svg'; import calendar from './../../assets/icons/calendar.svg';
import cancel from './../../assets/icons/cancel.svg'; import cancel from './../../assets/icons/cancel.svg';
import clipboard from './../../assets/icons/clipboard.svg'; import clipboard from './../../assets/icons/clipboard.svg';
import close from './../../assets/icons/close.svg'; import close from './../../assets/icons/closeIcon.svg';
import dottedCircle from './../../assets/icons/dotted-circle.svg'; import dottedCircle from './../../assets/icons/dotted-circle.svg';
import circledCheckmark from './../../assets/icons/circled-checkmark.svg'; import circledCheckmark from './../../assets/icons/circled-checkmark.svg';
import chevronDown from './../../assets/icons/chevron-down.svg'; import chevronDown from './../../assets/icons/chevron-down.svg';

View File

@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { DateRange, InputLabelWrapper } from '../'; import DateRange from '../DateRange';
import InputLabelWrapper from '../InputLabelWrapper';
const InputDateRange = ({ const InputDateRange = ({
id, id,
@ -14,7 +15,7 @@ const InputDateRange = ({
}) => { }) => {
const { startDate, endDate } = value; const { startDate, endDate } = value;
const onClickHandler = (event) => { const onClickHandler = event => {
event.preventDefault(); event.preventDefault();
onLabelClick(event); onLabelClick(event);
}; };
@ -38,11 +39,11 @@ const InputDateRange = ({
); );
}; };
const noop = () => { }; const noop = () => {};
InputDateRange.defaultProps = { InputDateRange.defaultProps = {
value: {}, value: {},
onLabelClick: noop onLabelClick: noop,
}; };
InputDateRange.propTypes = { InputDateRange.propTypes = {

View File

@ -1,14 +1,12 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import getGridWidthClass from '../../utils/getGridWidthClass' import getGridWidthClass from '../../utils/getGridWidthClass';
import { import InputText from '../InputText';
InputText, import InputDateRange from '../InputDateRange';
InputDateRange, import InputMultiSelect from '../InputMultiSelect';
InputMultiSelect, import InputLabelWrapper from '../InputLabelWrapper';
InputLabelWrapper,
} from '../';
const InputGroup = ({ const InputGroup = ({
inputMeta, inputMeta,

View File

@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Icon } from '../'; import Icon from '../Icon';
const baseLabelClassName = const baseLabelClassName =
'flex flex-col flex-1 text-white text-lg pl-1 select-none'; 'flex flex-col flex-1 text-white text-lg pl-1 select-none';
const spanClassName = 'flex flex-row items-center cursor-pointer focus:outline-none'; const spanClassName =
'flex flex-row items-center cursor-pointer focus:outline-none';
const sortIconMap = { const sortIconMap = {
descending: 'sorting-active-up', descending: 'sorting-active-up',
ascending: 'sorting-active-down', ascending: 'sorting-active-down',
@ -22,7 +23,7 @@ const InputLabelWrapper = ({
className, className,
children, children,
}) => { }) => {
const { t } = useTranslation("StudyList") const { t } = useTranslation('StudyList');
const onClickHandler = e => { const onClickHandler = e => {
if (!isSortable) { if (!isSortable) {

View File

@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Select, InputLabelWrapper } from '../'; import Select from '../Select';
import InputLabelWrapper from '../InputLabelWrapper';
const InputMultiSelect = ({ const InputMultiSelect = ({
id, id,

View File

@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Input, InputLabelWrapper } from '../'; import Input from '../Input';
import InputLabelWrapper from '../InputLabelWrapper';
const InputText = ({ const InputText = ({
id, id,
@ -36,7 +37,7 @@ const InputText = ({
InputText.defaultProps = { InputText.defaultProps = {
value: '', value: '',
isSortable: false, isSortable: false,
onLabelClick: () => { }, onLabelClick: () => {},
sortDirection: 'none', sortDirection: 'none',
}; };

View File

@ -1,7 +1,9 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import debounce from 'lodash.debounce'; import debounce from 'lodash.debounce';
import { IconButton, Icon } from '../';
import IconButton from '../IconButton';
import Icon from '../Icon';
import './LegacyCinePlayerCustomInputRange.css'; import './LegacyCinePlayerCustomInputRange.css';
@ -62,7 +64,7 @@ const LegacyCinePlayer = ({
className="mr-3 border rounded-full text-primary-active border-primary-active" className="mr-3 border rounded-full text-primary-active border-primary-active"
onClick={onClose} onClick={onClose}
> >
<Icon name="close" width="15px" height="15px" /> <Icon name="close" />
</IconButton> </IconButton>
</div> </div>
); );

View File

@ -1,9 +1,11 @@
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Icon, Tooltip } from '../';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
const classes = { const classes = {
infoHeader: 'text-base text-primary-light', infoHeader: 'text-base text-primary-light',
infoText: 'text-base text-white max-w-24 truncate', infoText: 'text-base text-white max-w-24 truncate',

View File

@ -1,10 +1,14 @@
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Icon, ButtonGroup, Button, LegacyCinePlayer } from '../';
import useOnClickOutside from '../../utils/useOnClickOutside'; import useOnClickOutside from '../../utils/useOnClickOutside';
import LegacyPatientInfo from '../LegacyPatientInfo';
import { StringNumber } from '../../types'; import { StringNumber } from '../../types';
import LegacyPatientInfo from '../LegacyPatientInfo';
import Icon from '../Icon';
import ButtonGroup from '../ButtonGroup';
import Button from '../Button';
import LegacyCinePlayer from '../LegacyCinePlayer';
const LegacyViewportActionBar = ({ const LegacyViewportActionBar = ({
studyData, studyData,
showNavArrows, showNavArrows,
@ -75,7 +79,7 @@ const LegacyViewportActionBar = ({
<div className="flex flex-1 grow mt-2 min-w-48"> <div className="flex flex-1 grow mt-2 min-w-48">
<div className="flex items-center"> <div className="flex items-center">
<span className="mr-2 text-white text-large">{label}</span> <span className="mr-2 text-white text-large">{label}</span>
{showStatus && getStatusComponent()} {showStatus && getStatusComponent && getStatusComponent()}
</div> </div>
<div className="flex flex-col justify-start ml-4"> <div className="flex flex-col justify-start ml-4">
<div className="flex"> <div className="flex">

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { Icon } from '@ohif/ui';
import Icon from '../Icon';
import ProgressLoadingBar from '../ProgressLoadingBar'; import ProgressLoadingBar from '../ProgressLoadingBar';
/** /**

View File

@ -1,7 +1,8 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Icon } from '../';
import Icon from '../Icon';
const MeasurementItem = ({ const MeasurementItem = ({
uid, uid,

View File

@ -34,6 +34,13 @@ MeasurementTable is a component that renders the MeasurementTables.
name="Overview" name="Overview"
args={{ args={{
title: 'Measurements', title: 'Measurements',
servicesManager: {
services: {
customizationService: {
getCustomization: (title, data) => data.content,
}
},
},
}} }}
> >
{MeasurementTableTemplate.bind({})} {MeasurementTableTemplate.bind({})}
@ -62,6 +69,13 @@ With data
isActive: false, isActive: false,
}, },
], ],
servicesManager: {
services: {
customizationService: {
getCustomization: (title, data) => data,
}
},
},
}} }}
> >
{MeasurementTableTemplate.bind({})} {MeasurementTableTemplate.bind({})}

View File

@ -1,12 +1,13 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ReactModal from 'react-modal'; import ReactModal from 'react-modal';
import { useModal } from '../../contextProviders';
import Icon from '../Icon';
import Typography from '../Typography';
import './Modal.css'; import './Modal.css';
import { Typography, Icon } from '../';
import { useModal } from '../../contextProviders';
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
ReactModal.setAppElement(document.getElementById('root')); ReactModal.setAppElement(document.getElementById('root'));
} }
@ -29,10 +30,11 @@ const Modal = ({
const renderHeader = () => { const renderHeader = () => {
return ( return (
title && ( title && (
<header className="flex items-center p-4 border-b-2 border-black bg-secondary-dark rounded-tl rounded-tr"> <header className="flex items-center px-[20px] py-[13px] bg-primary-dark rounded-tl rounded-tr">
<Typography <Typography
variant="h4" variant="h6"
className="flex grow text-primary-light font-light" color="primaryLight"
className="flex grow !leading-[1.2]"
data-cy="modal-header" data-cy="modal-header"
> >
{title} {title}
@ -41,7 +43,7 @@ const Modal = ({
<Icon <Icon
onClick={onClose} onClick={onClose}
name="close" name="close"
className="cursor-pointer text-primary-active w-6 h-6" className="cursor-pointer text-primary-active"
/> />
)} )}
</header> </header>
@ -60,7 +62,7 @@ const Modal = ({
shouldCloseOnOverlayClick={shouldCloseOnOverlayClick} shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
> >
{renderHeader()} {renderHeader()}
<section className="ohif-scrollbar modal-content overflow-y-auto px-4 py-6 rounded-bl rounded-br bg-primary-dark"> <section className="ohif-scrollbar modal-content overflow-y-auto px-[20px] pt-2 pb-[20px] rounded-bl rounded-br bg-primary-dark">
{children} {children}
</section> </section>
</ReactModal> </ReactModal>

View File

@ -1,7 +1,9 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Button, Icon } from '../';
import Button from '../Button';
import Icon from '../Icon';
const Notification = ({ const Notification = ({
id, id,

View File

@ -1,9 +1,11 @@
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Icon, Tooltip } from '../';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
const classes = { const classes = {
infoHeader: 'text-base text-primary-light', infoHeader: 'text-base text-primary-light',
infoText: 'text-base text-white max-w-24 truncate', infoText: 'text-base text-white max-w-24 truncate',

View File

@ -1,7 +1,11 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Icon, InputRange, CheckBox, InputNumber } from '../';
import classNames from 'classnames'; import classNames from 'classnames';
import Icon from '../Icon';
import InputRange from '../InputRange';
import CheckBox from '../CheckBox';
import InputNumber from '../InputNumber';
const ActiveSegmentationConfig = ({ const ActiveSegmentationConfig = ({
config, config,
setRenderOutline, setRenderOutline,

View File

@ -1,7 +1,8 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Icon } from '@ohif/ui';
import Icon from '../Icon';
const SegmentItem = ({ const SegmentItem = ({
segmentIndex, segmentIndex,
@ -66,7 +67,7 @@ const SegmentItem = ({
{isSegmentIndexHovering && showSegmentDelete ? ( {isSegmentIndexHovering && showSegmentDelete ? (
<Icon <Icon
name="close" name="close"
className={classnames('w-5 h-5 pr-2')} className={classnames('pr-0.5')}
onClick={e => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
onDelete(segmentationId, segmentIndex); onDelete(segmentationId, segmentIndex);

View File

@ -1,7 +1,8 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Icon } from '../';
import Icon from '../Icon';
const SegmentationItem = ({ const SegmentationItem = ({
id, id,
@ -55,7 +56,7 @@ const SegmentationItem = ({
<Icon <Icon
name="close" name="close"
className={classnames( className={classnames(
'w-5 transition duration-500 text-center hover:opacity-80', 'w-[10px] transition duration-500 text-center hover:opacity-80',
{ {
'bg-primary-light text-black': isActive, 'bg-primary-light text-black': isActive,
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive, 'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,

View File

@ -1,8 +1,9 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Icon } from '../';
import SegmentationItem from './SegmentationItem'; import SegmentationItem from './SegmentationItem';
import Icon from '../Icon';
const SegmentationTable = ({ const SegmentationTable = ({
title, title,
segmentations, segmentations,

View File

@ -2,7 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import ReactSelect, { components } from 'react-select'; import ReactSelect, { components } from 'react-select';
import { Icon } from '@ohif/ui';
import Icon from '../Icon';
import './Select.css'; import './Select.css';

View File

@ -13,7 +13,10 @@ import { Swiper, SwiperSlide } from 'swiper/react';
import { PanelService, ServicesManager, Types } from '@ohif/core'; import { PanelService, ServicesManager, Types } from '@ohif/core';
import { Button, Icon, IconButton, Tooltip } from '../'; import Button from '../Button';
import Icon from '../Icon';
import IconButton from '../IconButton';
import Tooltip from '../Tooltip';
import 'swiper/css'; import 'swiper/css';
import 'swiper/css/navigation'; import 'swiper/css/navigation';
@ -75,7 +78,7 @@ const SidePanel = ({
activeTabIndex: activeTabIndexProp, activeTabIndex: activeTabIndexProp,
tabs, tabs,
}) => { }) => {
const panelService: PanelService = servicesManager.services.panelService; const panelService: PanelService = servicesManager?.services?.panelService;
const { t } = useTranslation('SidePanel'); const { t } = useTranslation('SidePanel');
@ -128,23 +131,25 @@ const SidePanel = ({
); );
useEffect(() => { useEffect(() => {
const activatePanelSubscription = panelService.subscribe( if (panelService) {
panelService.EVENTS.ACTIVATE_PANEL, const activatePanelSubscription = panelService.subscribe(
(activatePanelEvent: Types.ActivatePanelEvent) => { panelService.EVENTS.ACTIVATE_PANEL,
if (!hasBeenOpened || activatePanelEvent.forceActive) { (activatePanelEvent: Types.ActivatePanelEvent) => {
const tabIndex = tabs.findIndex( if (!hasBeenOpened || activatePanelEvent.forceActive) {
tab => tab.id === activatePanelEvent.panelId const tabIndex = tabs.findIndex(
); tab => tab.id === activatePanelEvent.panelId
if (tabIndex !== -1) { );
updateActiveTabIndex(tabIndex); if (tabIndex !== -1) {
updateActiveTabIndex(tabIndex);
}
} }
} }
} );
);
return () => { return () => {
activatePanelSubscription.unsubscribe(); activatePanelSubscription.unsubscribe();
}; };
}
}, [tabs, hasBeenOpened, panelService, updateActiveTabIndex]); }, [tabs, hasBeenOpened, panelService, updateActiveTabIndex]);
const getCloseStateComponent = () => { const getCloseStateComponent = () => {

View File

@ -32,6 +32,16 @@ SidePanel is a component that renders the SidePanels.
args={{ args={{
side: 'left', side: 'left',
defaultComponentOpen: 'Example', defaultComponentOpen: 'Example',
tabs: [
{
id: 'tab1',
name: 'tab1',
label: 'Tab 1',
iconName: 'group-layers',
iconLabel: 'group-layers',
content: () => <div class="text-primary-light p-3">Hello</div>,
}
],
childComponents: [ childComponents: [
{ {
iconName: 'home', iconName: 'home',

View File

@ -56,7 +56,7 @@ const SnackbarItem = ({ options, onClose }) => {
onClick={handleClose} onClick={handleClose}
className="w-5 h-5 rounded-full flex items-center justify-center self-start ml-auto relative left-[3px] top-[-3px] text-[#0944b3]" className="w-5 h-5 rounded-full flex items-center justify-center self-start ml-auto relative left-[3px] top-[-3px] text-[#0944b3]"
> >
<Icon name="close" className="w-5 h-5 text-black" /> <Icon name="close" className="text-black" />
</div> </div>
</div> </div>
</div> </div>

View File

@ -4,7 +4,10 @@ import classNames from 'classnames';
import OutsideClickHandler from 'react-outside-click-handler'; import OutsideClickHandler from 'react-outside-click-handler';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Icon, Tooltip, ListMenu, ToolbarButton } from '../'; import Icon from '../Icon';
import Tooltip from '../Tooltip';
import ListMenu from '../ListMenu';
import ToolbarButton from '../ToolbarButton';
const baseClasses = { const baseClasses = {
Button: Button:
@ -92,7 +95,7 @@ const SplitButton = ({
}) => { }) => {
const { t } = useTranslation('Buttons'); const { t } = useTranslation('Buttons');
const { toolbarService } = servicesManager.services; const { toolbarService } = servicesManager?.services || {};
const { primaryToolId, toggles } = bState; const { primaryToolId, toggles } = bState;
/* Bubbles up individual item clicks */ /* Bubbles up individual item clicks */
@ -146,7 +149,7 @@ const SplitButton = ({
(isPrimaryToggle && toggles[state.primary.id] === true); (isPrimaryToggle && toggles[state.primary.id] === true);
const PrimaryButtonComponent = const PrimaryButtonComponent =
toolbarService.getButtonComponentForUIType(state.primary.uiType) ?? toolbarService?.getButtonComponentForUIType(state.primary.uiType) ??
ToolbarButton; ToolbarButton;
const primaryButtonClassName = classes.Primary({ const primaryButtonClassName = classes.Primary({

View File

@ -2,7 +2,10 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { ButtonGroup, Button, StudyItem, ThumbnailList } from '../'; import StudyItem from '../StudyItem';
import ButtonGroup from '../ButtonGroup';
import Button from '../Button';
import ThumbnailList from '../ThumbnailList';
import { StringNumber } from '../../types'; import { StringNumber } from '../../types';
const getTrackedSeries = displaySets => { const getTrackedSeries = displaySets => {
@ -171,7 +174,7 @@ StudyBrowser.propTypes = {
), ),
}; };
const noop = () => { }; const noop = () => {};
StudyBrowser.defaultProps = { StudyBrowser.defaultProps = {
onClickTab: noop, onClickTab: noop,

View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Icon } from '../'; import Icon from '../Icon';
const baseClasses = const baseClasses =
'first:border-0 border-t border-secondary-light cursor-pointer select-none outline-none'; 'first:border-0 border-t border-secondary-light cursor-pointer select-none outline-none';

View File

@ -2,7 +2,11 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Table, TableHead, TableBody, TableRow, TableCell } from '../'; import Table from '../Table';
import TableHead from '../TableHead';
import TableBody from '../TableBody';
import TableRow from '../TableRow';
import TableCell from '../TableCell';
const StudyListExpandedRow = ({ const StudyListExpandedRow = ({
seriesTableColumns, seriesTableColumns,
@ -11,7 +15,6 @@ const StudyListExpandedRow = ({
}) => { }) => {
const { t } = useTranslation('StudyList'); const { t } = useTranslation('StudyList');
return ( return (
<div className="w-full bg-black py-4 pl-12 pr-2"> <div className="w-full bg-black py-4 pl-12 pr-2">
<div className="block">{children}</div> <div className="block">{children}</div>

View File

@ -2,7 +2,10 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Button, Icon, Typography, InputGroup } from '../'; import Button from '../Button';
import Icon from '../Icon';
import Typography from '../Typography';
import InputGroup from '../InputGroup';
const StudyListFilter = ({ const StudyListFilter = ({
filtersMeta, filtersMeta,

View File

@ -1,8 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Button, ButtonGroup, Typography, Select } from '../';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Button from '../Button';
import ButtonGroup from '../ButtonGroup';
import Typography from '../Typography';
import Select from '../Select';
const StudyListPagination = ({ const StudyListPagination = ({
onChangePage, onChangePage,
currentPage, currentPage,

View File

@ -1,9 +1,10 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Icon } from '../';
import getGridWidthClass from '../../utils/getGridWidthClass'; import getGridWidthClass from '../../utils/getGridWidthClass';
import Icon from '../Icon';
const StudyListTableRow = props => { const StudyListTableRow = props => {
const { tableData } = props; const { tableData } = props;
const { row, expandedContent, onClickRow, isExpanded } = tableData; const { row, expandedContent, onClickRow, isExpanded } = tableData;

View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { useDrag } from 'react-dnd'; import { useDrag } from 'react-dnd';
import { Icon } from '../'; import Icon from '../Icon';
import { StringNumber } from '../../types'; import { StringNumber } from '../../types';
/** /**

View File

@ -1,7 +1,9 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '../'; import Thumbnail from '../Thumbnail';
import ThumbnailNoImage from '../ThumbnailNoImage';
import ThumbnailTracked from '../ThumbnailTracked';
import * as Types from '../../types'; import * as Types from '../../types';
const ThumbnailList = ({ const ThumbnailList = ({

View File

@ -2,7 +2,9 @@ import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useDrag } from 'react-dnd'; import { useDrag } from 'react-dnd';
import { Icon, Tooltip, Typography } from '../'; import Icon from '../Icon';
import Tooltip from '../Tooltip';
import Typography from '../Typography';
const ThumbnailNoImage = ({ const ThumbnailNoImage = ({
displaySetInstanceUID, displaySetInstanceUID,

View File

@ -2,7 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Icon, Thumbnail, Tooltip } from '../'; import Icon from '../Icon';
import Thumbnail from '../Thumbnail';
import Tooltip from '../Tooltip';
import { StringNumber } from '../../types'; import { StringNumber } from '../../types';
const ThumbnailTracked = ({ const ThumbnailTracked = ({

View File

@ -2,7 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { IconButton, Icon, Tooltip } from '../'; import IconButton from '../IconButton';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
const ToolbarButton = ({ const ToolbarButton = ({
type = 'tool', type = 'tool',

View File

@ -1,7 +1,8 @@
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Icon } from '../';
import Icon from '../Icon';
const DELAY_TO_SHOW = 1000; const DELAY_TO_SHOW = 1000;
const DELAY_TO_HIDE = 10; // it needs at least a little delay to prevent tooltip to suddenly hide const DELAY_TO_HIDE = 10; // it needs at least a little delay to prevent tooltip to suddenly hide

View File

@ -46,6 +46,7 @@ const classes = {
inherit: 'text-inherit', inherit: 'text-inherit',
primary: 'text-primary-main', primary: 'text-primary-main',
primaryActive: 'text-primary-active', primaryActive: 'text-primary-active',
primaryLight: 'text-primary-light',
secondary: 'text-common-light', secondary: 'text-common-light',
error: 'text-red-600', error: 'text-red-600',
}, },
@ -133,7 +134,7 @@ Typography.propTypes = {
'primaryActive', 'primaryActive',
'secondary', 'secondary',
'error', 'error',
'primaryActive', 'primaryLight',
]), ]),
className: PropTypes.string, className: PropTypes.string,
children: PropTypes.node, children: PropTypes.node,

View File

@ -1,8 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Select, Typography, Button, HotkeysPreferences } from '../';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Select from '../Select';
import Typography from '../Typography';
import Button from '../Button';
import HotkeysPreferences from '../HotkeysPreferences';
const UserPreferences = ({ const UserPreferences = ({
availableLanguages, availableLanguages,
defaultLanguage, defaultLanguage,
@ -63,8 +67,9 @@ const UserPreferences = ({
<> <>
<div className="border-b-2 border-black mb-2"> <div className="border-b-2 border-black mb-2">
<Typography <Typography
variant="h5" variant="inherit"
className="flex grow text-primary-light font-light pb-2" color="primaryLight"
className="flex text-[16px] font-semibold pb-2 !leading-[1.2]"
> >
{title} {title}
</Typography> </Typography>
@ -74,7 +79,7 @@ const UserPreferences = ({
); );
return ( return (
<div className="p-2"> <>
<Section title={t('General')}> <Section title={t('General')}>
<div className="flex flex-row justify-center items-center w-72"> <div className="flex flex-row justify-center items-center w-72">
<Typography variant="subtitle" className="mr-5 text-right h-full"> <Typography variant="subtitle" className="mr-5 text-right h-full">
@ -122,7 +127,7 @@ const UserPreferences = ({
</Button> </Button>
</div> </div>
</div> </div>
</div> </>
); );
}; };

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { LegacyViewportActionBar, Notification } from '../'; import LegacyViewportActionBar from '../LegacyViewportActionBar';
import Notification from '../Notification';
const Viewport = ({ const Viewport = ({
viewportId, viewportId,

View File

@ -7,10 +7,11 @@ import React, {
useRef, useRef,
useState, useState,
} from 'react'; } from 'react';
import { Icon } from '..';
import { useResizeObserver } from '../../hooks'; import { useResizeObserver } from '../../hooks';
import useOnClickOutside from '../../utils/useOnClickOutside'; import useOnClickOutside from '../../utils/useOnClickOutside';
import PatientInfo from '../PatientInfo'; import PatientInfo from '../PatientInfo';
import Icon from '../Icon';
export type ViewportActionBarProps = { export type ViewportActionBarProps = {
studyData: any; studyData: any;

View File

@ -7,16 +7,14 @@ import React, {
} from 'react'; } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { import Typography from '../Typography';
Typography, import Input from '../Input';
Input, import Tooltip from '../Tooltip';
Tooltip, import IconButton from '../IconButton';
IconButton, import Icon from '../Icon';
Icon, import Select from '../Select';
Select, import InputLabelWrapper from '../InputLabelWrapper';
InputLabelWrapper, import Button from '../Button';
Button,
} from '../';
const FILE_TYPE_OPTIONS = [ const FILE_TYPE_OPTIONS = [
{ {

View File

@ -219,7 +219,7 @@ const DialogProvider = ({ children, service }) => {
isDragging && 'dragging', isDragging && 'dragging',
isDraggable && 'draggable' isDraggable && 'draggable'
)} )}
style={{ zIndex: '999', position: 'absolute' }} style={{ zIndex: '999', position: 'absolute', width: '350px' }}
onClick={() => _bringToFront(id)} onClick={() => _bringToFront(id)}
> >
<DialogContent {...dialog} {...contentProps} /> <DialogContent {...dialog} {...contentProps} />

View File

@ -1,4 +1,4 @@
{ {
"version": "3.5.0", "version": "3.6.0-beta.3",
"commit": "16afa740b60b31037100444ef9311b80ffea2f67" "commit": "3d8cc9801a8a0b2add8f2b57b5a8498d9f0522c4"
} }

Some files were not shown because too many files have changed in this diff Show More