othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
README.md
View File

@ -17,16 +17,19 @@ provided by the <a href="https://ohif.org/">Open Health Imaging Foundation (OHIF
<div align="center">
📰 <a href="https://ohif.org/news/"><strong>Join OHIF Newsletter</strong></a> 📰
</div>
<div align="center">
📰 <a href="https://ohif.org/news/"><strong>Join OHIF Newsletter</strong></a> 📰
</div>
<hr />
[![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]
[![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) -->
<!-- [![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) -->
<!-- prettier-ignore-end -->
![Alt text](platform/docs/docs/assets/img/OHIF-Viewer.jpg)
## About
The OHIF Medical Imaging Viewer is for viewing medical images. It can retrieve
@ -95,6 +100,37 @@ questions; please read our
## 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
- [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-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-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-url]: LICENSE
[percy-image]: https://percy.io/static/images/percy-badge.svg

2
commit.txt
View File

@ -1 +1 @@
16afa740b60b31037100444ef9311b80ffea2f67
3d8cc9801a8a0b2add8f2b57b5a8498d9f0522c4

37
extensions/cornerstone-dicom-rt/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@ohif/extension-cornerstone-dicom-rt",
"version": "3.5.0",
"version": "3.6.0-beta.3",
"description": "DICOM RT read workflow",
"author": "OHIF",
"license": "MIT",
@ -31,44 +31,19 @@
"start": "yarn run dev"
},
"peerDependencies": {
"@ohif/core": "3.5.0",
"@ohif/extension-cornerstone": "3.5.0",
"@ohif/extension-default": "3.5.0",
"@ohif/i18n": "3.5.0",
"@ohif/core": "3.6.0-beta.3",
"@ohif/extension-cornerstone": "3.6.0-beta.3",
"@ohif/extension-default": "3.6.0-beta.3",
"@ohif/i18n": "3.6.0-beta.3",
"prop-types": "^15.6.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^10.11.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"webpack": "^5.50.0",
"webpack-merge": "^5.7.3"
"react-router-dom": "^6.3.0"
},
"dependencies": {
"@babel/runtime": "^7.20.13",
"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"
}
}

37
extensions/cornerstone-dicom-seg/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@ohif/extension-cornerstone-dicom-seg",
"version": "3.5.0",
"version": "3.6.0-beta.3",
"description": "DICOM SEG read workflow",
"author": "OHIF",
"license": "MIT",
@ -31,44 +31,19 @@
"start": "yarn run dev"
},
"peerDependencies": {
"@ohif/core": "3.5.0",
"@ohif/extension-cornerstone": "3.5.0",
"@ohif/extension-default": "3.5.0",
"@ohif/i18n": "3.5.0",
"@ohif/core": "3.6.0-beta.3",
"@ohif/extension-cornerstone": "3.6.0-beta.3",
"@ohif/extension-default": "3.6.0-beta.3",
"@ohif/i18n": "3.6.0-beta.3",
"prop-types": "^15.6.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^12.2.2",
"react-router": "^6.8.1",
"react-router-dom": "^6.8.1",
"webpack": "^5.50.0",
"webpack-merge": "^5.7.3"
"react-router-dom": "^6.8.1"
},
"dependencies": {
"@babel/runtime": "^7.20.13",
"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"
}
}

37
extensions/cornerstone-dicom-seg/src/panels/callInputDialog.tsx
View File

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

10
extensions/cornerstone-dicom-sr/package.json
View File

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

6
extensions/cornerstone/package.json
View File

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

2
extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx
View File

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

2
extensions/cornerstone/src/services/SegmentationService/SegmentationService.ts
View File

@ -117,7 +117,7 @@ class SegmentationService extends PubSubService {
* -- opacity: the opacity of the segment
* -- visibility: the visibility of the segment (boolean)
* -- 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(
segmentationId: string,

43
extensions/cornerstone/src/utils/callInputDialog.tsx
View File

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

6
extensions/default/package.json
View File

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

25
extensions/default/src/Panels/PanelMeasurementTable.tsx
View File

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

62
extensions/default/src/Panels/createReportDialogPrompt.tsx
View File

@ -11,7 +11,7 @@ export default function createReportDialogPrompt(
uiDialogService,
{ extensionManager }
) {
return new Promise(function (resolve, reject) {
return new Promise(function(resolve, reject) {
let dialogId = undefined;
const _handleClose = () => {
@ -73,7 +73,7 @@ export default function createReportDialogPrompt(
useLastPosition: false,
showOverlay: true,
contentProps: {
title: 'Provide a name for your report',
title: 'Create Report',
value: {
label: '',
dataSourceName: extensionManager.activeDataSource,
@ -102,38 +102,34 @@ export default function createReportDialogPrompt(
};
return (
<>
<div className="p-4 bg-primary-dark">
{dataSourcesOpts.length > 1 && (
<Select
closeMenuOnSelect={true}
className="mr-2 bg-black border-primary-main"
options={dataSourcesOpts}
placeholder={
dataSourcesOpts.find(
option => option.value === value.dataSourceName
).placeHolder
}
value={value.dataSourceName}
onChange={evt => {
setValue(v => ({ ...v, dataSourceName: evt.value }));
}}
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
{dataSourcesOpts.length > 1 && (
<Select
closeMenuOnSelect={true}
className="mr-2 bg-black border-primary-main"
options={dataSourcesOpts}
placeholder={
dataSourcesOpts.find(
option => option.value === value.dataSourceName
).placeHolder
}
value={value.dataSourceName}
onChange={evt => {
setValue(v => ({ ...v, dataSourceName: evt.value }));
}}
isClearable={false}
/>
</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
/>
</>
);
},

40
extensions/dicom-microscopy/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@ohif/extension-dicom-microscopy",
"version": "3.5.0",
"version": "3.6.0-beta.3",
"description": "OHIF extension for DICOM microscopy",
"author": "Bill Wallace, md-prog",
"license": "MIT",
@ -28,18 +28,16 @@
"start": "yarn run dev"
},
"peerDependencies": {
"@ohif/core": "3.5.0",
"@ohif/extension-default": "3.5.0",
"@ohif/i18n": "3.5.0",
"@ohif/ui": "3.5.0",
"@ohif/core": "3.6.0-beta.3",
"@ohif/extension-default": "3.6.0-beta.3",
"@ohif/i18n": "3.6.0-beta.3",
"@ohif/ui": "3.6.0-beta.3",
"prop-types": "^15.6.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^10.11.0",
"react-router": "^6.8.1",
"react-router-dom": "^6.8.1",
"webpack": "^5.50.0",
"webpack-merge": "^5.7.3"
"react-router-dom": "^6.8.1"
},
"dependencies": {
"@babel/runtime": "^7.20.13",
@ -49,31 +47,5 @@
"colormap": "^2.3",
"dicom-microscopy-viewer": "^0.44.0",
"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"
}
}

1
extensions/dicom-microscopy/src/getCommandsModule.ts
View File

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

39
extensions/dicom-microscopy/src/utils/callInputDialog.tsx
View File

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

6
extensions/dicom-pdf/package.json
View File

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

6
extensions/dicom-video/package.json
View File

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

10
extensions/measurement-tracking/package.json
View File

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

9
extensions/measurement-tracking/src/_shared/createReportDialogPrompt.tsx
View File

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

25
extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx
View File

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

6
extensions/test-extension/package.json
View File

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

6
extensions/tmtv/package.json
View File

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

2
lerna.json
View File

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

14
modes/basic-dev-mode/package.json
View File

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

18
modes/basic-test-mode/package.json
View File

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

20
modes/longitudinal/package.json
View File

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

32
modes/microscopy/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@ohif/mode-microscopy",
"version": "3.5.0",
"version": "3.6.0-beta.3",
"description": "OHIF mode for DICOM microscopy",
"author": "OHIF",
"license": "MIT",
@ -33,36 +33,10 @@
"test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
},
"peerDependencies": {
"@ohif/core": "3.5.0",
"@ohif/extension-dicom-microscopy": "3.5.0"
"@ohif/core": "3.6.0-beta.3",
"@ohif/extension-dicom-microscopy": "3.6.0-beta.3"
},
"dependencies": {
"@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"
}
}

16
modes/tmtv/package.json
View File

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

1
package.json
View File

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

34
platform/app/package.json
View File

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

2
platform/app/public/config/local_orthanc.js
View File

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

9
platform/app/public/init-service-worker.js
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
// All major browsers that support service worker also support native JavaScript
// modules, so it's perfectly fine to serve this code to any browsers
@ -5,7 +11,7 @@
//
//import { Workbox } from './workbox-window.prod.mjs';
// proper initialization
if( 'function' === typeof importScripts) {
if ('function' === typeof importScripts) {
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-window.prod.mjs'
);
@ -55,5 +61,4 @@ if( 'function' === typeof importScripts) {
wb.register();
}
}

6
platform/app/src/service-worker.js
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
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/5.0.0-beta.1/workbox-sw.js'

3
platform/cli/package.json
View File

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

4
platform/core/package.json
View File

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

BIN
platform/docs/docs/assets/img/github-readme-branches.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

8
platform/docs/docs/deployment/docker.md
View File

@ -43,3 +43,11 @@ The Dockerfile and entry point use the `${PORT}` environment variable as the por
```sh
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
```

25
platform/docs/docs/development/getting-started.md
View File

@ -40,6 +40,31 @@ aren't as concerned with syncing updates, then follow these steps:
## 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
- [Node.js & NPM](https://nodejs.org/en/)

3
platform/docs/docusaurus.config.js
View File

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

2
platform/docs/package.json
View File

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

2
platform/i18n/package.json
View File

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

2
platform/ui/package.json
View File

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

7
platform/ui/src/assets/icons/close.svg
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>
Side by Side

Before

Width:  |  Height:  |  Size: 332 B

3
platform/ui/src/assets/icons/closeIcon.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 241 B

15
platform/ui/src/components/AboutModal/AboutModal.tsx
View File

@ -1,8 +1,10 @@
import React from 'react';
import { Typography, Icon } from '../';
import PropTypes from 'prop-types';
import detect from 'browser-detect';
import Typography from '../Typography';
import Icon from '../Icon';
const Link = ({ href, children, showIcon = false }) => {
return (
<a href={href} target="_blank" rel="noopener noreferrer">
@ -49,7 +51,11 @@ const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
const renderRowTitle = title => (
<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}
</Typography>
</div>
@ -83,6 +89,11 @@ const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
value="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
title="Last Master Commits"
value="https://github.com/OHIF/Viewers/"

5
platform/ui/src/components/CinePlayer/CinePlayer.tsx
View File

@ -1,7 +1,10 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
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 classNames from 'classnames';

14
platform/ui/src/components/Dialog/Body.tsx
View File

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

17
platform/ui/src/components/Dialog/Dialog.tsx
View File

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

8
platform/ui/src/components/Dialog/Footer.tsx
View File

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

14
platform/ui/src/components/Dialog/Header.tsx
View File

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

3
platform/ui/src/components/Dropdown/Dropdown.tsx
View File

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

4
platform/ui/src/components/EmptyStudies/EmptyStudies.tsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
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.
const EmptyStudies = ({ className }) => {

4
platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx
View File

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

3
platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx
View File

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

7
platform/ui/src/components/Header/Header.tsx
View File

@ -2,7 +2,12 @@ import React, { ReactNode } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
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({
children,

4
platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx
View File

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

2
platform/ui/src/components/Icon/getIcon.js
View File

@ -8,7 +8,7 @@ import arrowRightSmall from './../../assets/icons/arrow-right-small.svg';
import calendar from './../../assets/icons/calendar.svg';
import cancel from './../../assets/icons/cancel.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 circledCheckmark from './../../assets/icons/circled-checkmark.svg';
import chevronDown from './../../assets/icons/chevron-down.svg';

9
platform/ui/src/components/InputDateRange/InputDateRange.tsx
View File

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

12
platform/ui/src/components/InputGroup/InputGroup.tsx
View File

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

7
platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx
View File

@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useTranslation } from 'react-i18next';
import { Icon } from '../';
import Icon from '../Icon';
const baseLabelClassName =
'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 = {
descending: 'sorting-active-up',
ascending: 'sorting-active-down',
@ -22,7 +23,7 @@ const InputLabelWrapper = ({
className,
children,
}) => {
const { t } = useTranslation("StudyList")
const { t } = useTranslation('StudyList');
const onClickHandler = e => {
if (!isSortable) {

3
platform/ui/src/components/InputMultiSelect/InputMultiSelect.tsx
View File

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

5
platform/ui/src/components/InputText/InputText.tsx
View File

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

6
platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx
View File

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

4
platform/ui/src/components/LegacyPatientInfo/LegacyPatientInfo.tsx
View File

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

10
platform/ui/src/components/LegacyViewportActionBar/LegacyViewportActionBar.tsx
View File

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

3
platform/ui/src/components/LoadingIndicatorProgress/LoadingIndicatorProgress.tsx
View File

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

3
platform/ui/src/components/MeasurementTable/MeasurementItem.tsx
View File

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

14
platform/ui/src/components/MeasurementTable/__stories__/measurementTable.stories.mdx
View File

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

18
platform/ui/src/components/Modal/Modal.tsx
View File

@ -1,12 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import ReactModal from 'react-modal';
import { useModal } from '../../contextProviders';
import Icon from '../Icon';
import Typography from '../Typography';
import './Modal.css';
import { Typography, Icon } from '../';
import { useModal } from '../../contextProviders';
if (typeof document !== 'undefined') {
ReactModal.setAppElement(document.getElementById('root'));
}
@ -29,10 +30,11 @@ const Modal = ({
const renderHeader = () => {
return (
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
variant="h4"
className="flex grow text-primary-light font-light"
variant="h6"
color="primaryLight"
className="flex grow !leading-[1.2]"
data-cy="modal-header"
>
{title}
@ -41,7 +43,7 @@ const Modal = ({
<Icon
onClick={onClose}
name="close"
className="cursor-pointer text-primary-active w-6 h-6"
className="cursor-pointer text-primary-active"
/>
)}
</header>
@ -60,7 +62,7 @@ const Modal = ({
shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
>
{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}
</section>
</ReactModal>

4
platform/ui/src/components/Notification/Notification.tsx
View File

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

4
platform/ui/src/components/PatientInfo/PatientInfo.tsx
View File

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

6
platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx
View File

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

5
platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx
View File

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

5
platform/ui/src/components/SegmentationTable/SegmentationItem.tsx
View File

@ -1,7 +1,8 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Icon } from '../';
import Icon from '../Icon';
const SegmentationItem = ({
id,
@ -55,7 +56,7 @@ const SegmentationItem = ({
<Icon
name="close"
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-dark text-primary-light group-hover:bg-secondary-main': !isActive,

3
platform/ui/src/components/SegmentationTable/SegmentationTable.tsx
View File

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

3
platform/ui/src/components/Select/Select.tsx
View File

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

37
platform/ui/src/components/SidePanel/SidePanel.tsx
View File

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

10
platform/ui/src/components/SidePanel/__stories__/sidePanel.stories.mdx
View File

@ -32,6 +32,16 @@ SidePanel is a component that renders the SidePanels.
args={{
side: 'left',
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: [
{
iconName: 'home',

2
platform/ui/src/components/Snackbar/SnackbarItem.tsx
View File

@ -56,7 +56,7 @@ const SnackbarItem = ({ options, onClose }) => {
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]"
>
<Icon name="close" className="w-5 h-5 text-black" />
<Icon name="close" className="text-black" />
</div>
</div>
</div>

9
platform/ui/src/components/SplitButton/SplitButton.tsx
View File

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

7
platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
View File

@ -2,7 +2,10 @@ import React from 'react';
import PropTypes from 'prop-types';
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';
const getTrackedSeries = displaySets => {
@ -171,7 +174,7 @@ StudyBrowser.propTypes = {
),
};
const noop = () => { };
const noop = () => {};
StudyBrowser.defaultProps = {
onClickTab: noop,

2
platform/ui/src/components/StudyItem/StudyItem.tsx
View File

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

7
platform/ui/src/components/StudyListExpandedRow/StudyListExpandedRow.tsx
View File

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

5
platform/ui/src/components/StudyListFilter/StudyListFilter.tsx
View File

@ -2,7 +2,10 @@ import React from 'react';
import PropTypes from 'prop-types';
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 = ({
filtersMeta,

6
platform/ui/src/components/StudyListPagination/StudyListPagination.tsx
View File

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

3
platform/ui/src/components/StudyListTable/StudyListTableRow.tsx
View File

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

2
platform/ui/src/components/Thumbnail/Thumbnail.tsx
View File

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

4
platform/ui/src/components/ThumbnailList/ThumbnailList.tsx
View File

@ -1,7 +1,9 @@
import React from 'react';
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';
const ThumbnailList = ({

4
platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.tsx
View File

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

4
platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx
View File

@ -2,7 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
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';
const ThumbnailTracked = ({

4
platform/ui/src/components/ToolbarButton/ToolbarButton.tsx
View File

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

3
platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx
View File

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

3
platform/ui/src/components/Typography/Typography.tsx
View File

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

15
platform/ui/src/components/UserPreferences/UserPreferences.tsx
View File

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

3
platform/ui/src/components/Viewport/Viewport.tsx
View File

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

3
platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx
View File

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

18
platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx
View File

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

2
platform/ui/src/contextProviders/DialogProvider.tsx
View File

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

4
version.json
View File

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

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