{t('AboutModal:OHIF Viewer - About')}
+ );
+ show({
+ title: t('AboutModal:OHIF Viewer - About'),
+ content: modalComponent,
+ });
+ }, [show, t]);
+
+ // TODO: IT SHOULD BE REFACTORED WHEN THE MODAL CONTENT IS DEFINED
+ const showPreferencesModal = useCallback(() => {
+ const modalComponent = () => (
+ {t('UserPreferencesModal:User Preferences')}
+ );
+ show({
+ title: t('UserPreferencesModal:User Preferences'),
+ content: modalComponent,
+ });
+ }, [show, t]);
return (
{children}
- FOR INVESTIGATIONAL USE ONLY
+ {t('Header:INVESTIGATIONAL USE ONLY')}
- {}}
+
-
-
-
+
+
+
+
+
{
+ setOpen(false);
+ onClick();
+ }}
+ >
+ {!!icon && {title}
+
+ );
+ }, []);
+
+ DropdownItem.defaultProps = {
+ icon: '',
+ };
+
+ DropdownItem.propTypes = {
+ title: PropTypes.string.isRequired,
+ icon: PropTypes.string,
+ onClick: PropTypes.func.isRequired,
+ };
+
+ const renderTitleElement = () => {
+ return (
+
+ {children}
+ {showDropdownIcon && (
+
+ );
+ };
+
+ const toggleList = () => {
+ setOpen(s => !s);
+ };
+
+ const handleClick = e => {
+ if (element.current && !element.current.contains(e.target)) {
+ setOpen(false);
+ }
+ };
+
+ const renderList = () => {
+ return (
+
+ {list.map((item, idx) => (
+
+ );
+ };
+
+ useEffect(() => {
+ document.addEventListener('click', handleClick);
+
+ if (!open) {
+ document.removeEventListener('click', handleClick);
+ }
+ }, [open]);
+
+ return (
+
+
+ );
+};
+
+Dropdown.defaultProps = {
+ showDropdownIcon: true,
+};
+
+Dropdown.propTypes = {
+ children: PropTypes.node.isRequired,
+ showDropdownIcon: PropTypes.bool,
+ /** Items to render in the select's drop down */
+ list: PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.string.isRequired,
+ icon: PropTypes.string,
+ onClick: PropTypes.func.isRequired,
+ })
+ ).isRequired,
+};
+
+export default Dropdown;
diff --git a/platform/ui/src/components/Dropdown/Dropdown.mdx b/platform/ui/src/components/Dropdown/Dropdown.mdx
new file mode 100644
index 000000000..dc4b02555
--- /dev/null
+++ b/platform/ui/src/components/Dropdown/Dropdown.mdx
@@ -0,0 +1,68 @@
+---
+name: Dropdown
+menu: General
+route: components/dropdown
+---
+
+import { Playground, Props } from 'docz';
+import { Dropdown, IconButton, Icon } from '@ohif/ui';
+
+# Dropdown
+
+This component is used when there are more than a few options to choose from. By
+hovering or clicking on the trigger, a dropdown menu will appear, which allows
+you to choose an option and execute the relevant action.
+
+## Import
+
+```javascript
+import { Dropdown } from '@ohif/ui';
+```
+
+
+ {renderTitleElement()}
+
+
+ {renderList()}
+
+
+
+
+
+
+
+
+ );
+ }}
+{title}
+{renderHeader()}
+ {
- const newSelection = !selectedOptions.length ? selectedOptions : selectedOptions.reduce(
- (acc, curr) => acc.concat([curr.value]),
- []
- );
+ const newSelection = !selectedOptions.length
+ ? selectedOptions
+ : selectedOptions.reduce((acc, curr) => acc.concat([curr.value]), []);
onChange(newSelection, action);
}}
>
diff --git a/platform/ui/src/components/StudyListFilter/StudyListFilter.jsx b/platform/ui/src/components/StudyListFilter/StudyListFilter.jsx
index 2d409a555..0d06bb2e3 100644
--- a/platform/ui/src/components/StudyListFilter/StudyListFilter.jsx
+++ b/platform/ui/src/components/StudyListFilter/StudyListFilter.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { Button, Icon, Typography, InputGroup } from '@ohif/ui';
+import { Button, Icon, Typography, InputGroup, useModal } from '@ohif/ui';
const StudyListFilter = ({
filtersMeta,
@@ -20,6 +20,16 @@ const StudyListFilter = ({
});
};
const isSortingEnable = numOfStudies > 0 && numOfStudies <= 100;
+ const { show } = useModal();
+
+ const showLearnMoreContent = () => {
+ const modalContent = () =>
@@ -38,6 +48,7 @@ const StudyListFilter = ({
color="inherit"
className="text-primary-active"
startIcon={
-
- }
- >
- Search Instructions
;
+
+ show({
+ content: modalContent,
+ title: 'Learn More',
+ });
+ };
return (
-
-
-
- Series is
+
+
-
+
+
+
+ Series is
tracked and
can be viewed
in the measurement panel +
in the measurement panel +
@@ -131,19 +136,18 @@ const ViewportActionBar = ({
)}
- {showPatientInfo && (
-
-
- )}
+
+
diff --git a/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.jsx b/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.jsx
new file mode 100644
index 000000000..06c682502
--- /dev/null
+++ b/platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.jsx
@@ -0,0 +1,432 @@
+import React, {
+ useCallback,
+ useEffect,
+ useState,
+ createRef,
+ useRef,
+} from 'react';
+
+import classnames from 'classnames';
+
+import {
+ Typography,
+ Input,
+ Tooltip,
+ IconButton,
+ Icon,
+ Select,
+ InputLabelWrapper,
+ Button,
+} from '@ohif/ui';
+
+const FILE_TYPE_OPTIONS = [
+ {
+ value: 'jpg',
+ label: 'jpg',
+ },
+ {
+ value: 'png',
+ label: 'png',
+ },
+];
+
+const DEFAULT_FILENAME = 'image';
+const REFRESH_VIEWPORT_TIMEOUT = 1000;
+
+const ViewportDownloadForm = ({
+ activeViewport,
+ onClose,
+ updateViewportPreview,
+ enableViewport,
+ disableViewport,
+ toggleAnnotations,
+ loadImage,
+ downloadBlob,
+ defaultSize,
+ minimumSize,
+ maximumSize,
+ canvasClass,
+}) => {
+ const [filename, setFilename] = useState(DEFAULT_FILENAME);
+ const [fileType, setFileType] = useState(['jpg']);
+
+ const [dimensions, setDimensions] = useState({
+ width: defaultSize,
+ height: defaultSize,
+ });
+
+ const [showAnnotations, setShowAnnotations] = useState(true);
+
+ const [keepAspect, setKeepAspect] = useState(true);
+ const [aspectMultiplier, setAspectMultiplier] = useState({
+ width: 1,
+ height: 1,
+ });
+
+ const [viewportElement, setViewportElement] = useState();
+ const [viewportElementDimensions, setViewportElementDimensions] = useState({
+ width: defaultSize,
+ height: defaultSize,
+ });
+
+ const [downloadCanvas, setDownloadCanvas] = useState({
+ ref: createRef(),
+ width: defaultSize,
+ height: defaultSize,
+ });
+
+ const [viewportPreview, setViewportPreview] = useState({
+ src: null,
+ width: defaultSize,
+ height: defaultSize,
+ });
+
+ const [error, setError] = useState({
+ width: false,
+ height: false,
+ filename: false,
+ });
+
+ const hasError = Object.values(error).includes(true);
+
+ const refreshViewport = useRef(null);
+
+ const onKeepAspectToggle = () => {
+ const { width, height } = dimensions;
+ const aspectMultiplier = { ...aspectMultiplier };
+ if (!keepAspect) {
+ const base = Math.min(width, height);
+ aspectMultiplier.width = width / base;
+ aspectMultiplier.height = height / base;
+ setAspectMultiplier(aspectMultiplier);
+ }
+
+ setKeepAspect(!keepAspect);
+ };
+
+ const downloadImage = () => {
+ downloadBlob(
+ filename || DEFAULT_FILENAME,
+ fileType,
+ viewportElement,
+ downloadCanvas.ref.current
+ );
+ };
+
+ /**
+ * @param {object} value - Input value
+ * @param {string} dimension - "height" | "width"
+ */
+ const onDimensionsChange = (value, dimension) => {
+ const oppositeDimension = dimension === 'height' ? 'width' : 'height';
+ const sanitizedTargetValue = value.replace(/\D/, '');
+ const isEmpty = sanitizedTargetValue === '';
+ const newDimensions = { ...dimensions };
+ const updatedDimension = isEmpty
+ ? ''
+ : Math.min(sanitizedTargetValue, maximumSize);
+
+ if (updatedDimension === dimensions[dimension]) {
+ return;
+ }
+
+ newDimensions[dimension] = updatedDimension;
+
+ if (keepAspect && newDimensions[oppositeDimension] !== '') {
+ newDimensions[oppositeDimension] = Math.round(
+ newDimensions[dimension] * aspectMultiplier[oppositeDimension]
+ );
+ }
+
+ // In current code, keepAspect is always `true`
+ // And we always start w/ a square width/height
+ setDimensions(newDimensions);
+
+ // Only update if value is non-empty
+ if (!isEmpty) {
+ setViewportElementDimensions(newDimensions);
+ setDownloadCanvas(state => ({
+ ...state,
+ ...newDimensions,
+ }));
+ }
+ };
+
+ const error_messages = {
+ width: 'The minimum valid width is 100px.',
+ height: 'The minimum valid height is 100px.',
+ filename: 'The file name cannot be empty.',
+ };
+
+ const renderErrorHandler = errorType => {
+ if (!error[errorType]) {
+ return null;
+ }
+
+ return (
+
+ {error_messages[errorType]}
+
+ );
+ };
+
+ const validSize = useCallback(
+ value => (value >= minimumSize ? value : minimumSize),
+ [minimumSize]
+ );
+
+ const loadAndUpdateViewports = useCallback(async () => {
+ const { width: scaledWidth, height: scaledHeight } = await loadImage(
+ activeViewport,
+ viewportElement,
+ dimensions.width,
+ dimensions.height
+ );
+
+ toggleAnnotations(showAnnotations, viewportElement);
+
+ const scaledDimensions = {
+ height: validSize(scaledHeight),
+ width: validSize(scaledWidth),
+ };
+
+ setViewportElementDimensions(scaledDimensions);
+ setDownloadCanvas(state => ({
+ ...state,
+ ...scaledDimensions,
+ }));
+
+ const {
+ dataUrl,
+ width: viewportElementWidth,
+ height: viewportElementHeight,
+ } = await updateViewportPreview(
+ viewportElement,
+ downloadCanvas.ref.current,
+ fileType
+ );
+
+ setViewportPreview(state => ({
+ ...state,
+ src: dataUrl,
+ width: validSize(viewportElementWidth),
+ height: validSize(viewportElementHeight),
+ }));
+ }, [
+ loadImage,
+ activeViewport,
+ viewportElement,
+ dimensions.width,
+ dimensions.height,
+ toggleAnnotations,
+ showAnnotations,
+ validSize,
+ updateViewportPreview,
+ downloadCanvas.ref,
+ fileType,
+ ]);
+
+ useEffect(() => {
+ enableViewport(viewportElement);
+
+ return () => {
+ disableViewport(viewportElement);
+ };
+ }, [disableViewport, enableViewport, viewportElement]);
+
+ useEffect(() => {
+ if (refreshViewport.current !== null) {
+ clearTimeout(refreshViewport.current);
+ }
+
+ refreshViewport.current = setTimeout(() => {
+ refreshViewport.current = null;
+ loadAndUpdateViewports();
+ }, REFRESH_VIEWPORT_TIMEOUT);
+ }, [
+ activeViewport,
+ viewportElement,
+ showAnnotations,
+ dimensions,
+ loadImage,
+ toggleAnnotations,
+ updateViewportPreview,
+ fileType,
+ downloadCanvas.ref,
+ minimumSize,
+ maximumSize,
+ loadAndUpdateViewports,
+ ]);
+
+ useEffect(() => {
+ const { width, height } = dimensions;
+ const hasError = {
+ width: width < minimumSize,
+ height: height < minimumSize,
+ filename: !filename,
+ };
+
+ setError({ ...hasError });
+ }, [dimensions, filename, minimumSize]);
+
+ return (
+
-
-
-
-
-
-
-
- {appRoutes}
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ {appRoutes}
+
+
+
+
+
+
+
+
);
}
diff --git a/platform/viewer/src/components/PreferencesDropdown/PreferencesDropdown.jsx b/platform/viewer/src/components/PreferencesDropdown/PreferencesDropdown.jsx
new file mode 100644
index 000000000..791905819
--- /dev/null
+++ b/platform/viewer/src/components/PreferencesDropdown/PreferencesDropdown.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Dropdown, IconButton, Icon, useModal } from '@ohif/ui';
+
+const PreferencesDropdown = () => {
+ const { show } = useModal();
+
+ const showAboutModal = () => {
+ const modalComponent = () =>
+
+
+ {}}
+ >
+
+
+ );
+};
+
+export default PreferencesDropdown;
diff --git a/platform/viewer/src/components/PreferencesDropdown/index.js b/platform/viewer/src/components/PreferencesDropdown/index.js
new file mode 100644
index 000000000..edf8641a2
--- /dev/null
+++ b/platform/viewer/src/components/PreferencesDropdown/index.js
@@ -0,0 +1 @@
+export { default } from './PreferencesDropdown';
diff --git a/platform/viewer/src/components/ViewportGrid.jsx b/platform/viewer/src/components/ViewportGrid.jsx
index c9300381f..f82fc5f18 100644
--- a/platform/viewer/src/components/ViewportGrid.jsx
+++ b/platform/viewer/src/components/ViewportGrid.jsx
@@ -1,10 +1,12 @@
/**
* CSS Grid Reference: http://grid.malven.co/
*/
-import React from 'react';
+import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
import EmptyViewport from './EmptyViewport';
+import { classes } from '@ohif/core';
+const { ImageSet } = classes;
function ViewerViewportGrid(props) {
const { servicesManager, viewportComponents, dataSource } = props;
@@ -20,6 +22,29 @@ function ViewerViewportGrid(props) {
// TODO -> Need some way of selecting which displaySets hit the viewports.
const { DisplaySetService } = servicesManager.services;
+ useEffect(() => {
+ const { unsubscribe } = DisplaySetService.subscribe(
+ DisplaySetService.EVENTS.DISPLAY_SETS_CHANGED,
+ displaySets => {
+ displaySets.sort((a, b) => {
+ const isImageSet = x => x instanceof ImageSet;
+ return (isImageSet(a) === isImageSet(b)) ? 0 : isImageSet(a) ? -1 : 1;
+ });
+ dispatch({
+ type: 'SET_DISPLAYSET_FOR_VIEWPORT',
+ payload: {
+ viewportIndex: 0,
+ displaySetInstanceUID: displaySets[0].displaySetInstanceUID,
+ },
+ });
+ },
+ );
+
+ return () => {
+ unsubscribe();
+ };
+ }, []);
+
// TODO -> Make a HangingProtocolService
const HangingProtocolService = displaySets => {
let displaySetInstanceUID;
diff --git a/platform/viewer/src/routes/DataSourceWrapper.jsx b/platform/viewer/src/routes/DataSourceWrapper.jsx
index d0a0711e3..158594128 100644
--- a/platform/viewer/src/routes/DataSourceWrapper.jsx
+++ b/platform/viewer/src/routes/DataSourceWrapper.jsx
@@ -46,14 +46,17 @@ function DataSourceWrapper(props) {
// studies.processResults -->
- {data && (
-
+ {}}
- >
-
-
-
+
+
+ Please specify the dimensions, filename, and desired type for the output
+ image.
+
+
+
+ );
+};
+
+export default ViewportDownloadForm;
diff --git a/platform/ui/src/components/ViewportDownloadForm/index.js b/platform/ui/src/components/ViewportDownloadForm/index.js
new file mode 100644
index 000000000..d630f3a19
--- /dev/null
+++ b/platform/ui/src/components/ViewportDownloadForm/index.js
@@ -0,0 +1 @@
+export { default } from './ViewportDownloadForm';
diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js
index 04b5270cc..deb140bbb 100644
--- a/platform/ui/src/components/index.js
+++ b/platform/ui/src/components/index.js
@@ -2,6 +2,7 @@ import Button from './Button';
import ButtonGroup from './ButtonGroup';
import DateRange from './DateRange';
import Dialog from './Dialog';
+import Dropdown from './Dropdown';
import EmptyStudies from './EmptyStudies';
import Icon from './Icon';
import IconButton from './IconButton';
@@ -45,6 +46,7 @@ import Tooltip from './Tooltip';
import Typography from './Typography';
import Viewport from './Viewport';
import ViewportActionBar from './ViewportActionBar';
+import ViewportDownloadForm from './ViewportDownloadForm';
import ViewportGrid from './ViewportGrid';
import ViewportPane from './ViewportPane';
@@ -53,6 +55,7 @@ export {
ButtonGroup,
DateRange,
Dialog,
+ Dropdown,
EmptyStudies,
ExpandableToolbarButton,
ListMenu,
@@ -97,6 +100,7 @@ export {
Typography,
Viewport,
ViewportActionBar,
+ ViewportDownloadForm,
ViewportGrid,
ViewportPane,
};
diff --git a/platform/ui/src/contextProviders/ModalComponent.jsx b/platform/ui/src/contextProviders/ModalComponent.jsx
index b3b6602a7..cf7965812 100644
--- a/platform/ui/src/contextProviders/ModalComponent.jsx
+++ b/platform/ui/src/contextProviders/ModalComponent.jsx
@@ -16,7 +16,7 @@ const ModalComponent = ({
ModalComponent.defaultProps = {
content: null,
contentProps: null,
- shouldCloseOnEsc: false,
+ shouldCloseOnEsc: true,
isOpen: true,
closeButton: true,
title: null,
diff --git a/platform/ui/src/contextProviders/ModalProvider.jsx b/platform/ui/src/contextProviders/ModalProvider.jsx
index e8d65635d..ff9224bca 100644
--- a/platform/ui/src/contextProviders/ModalProvider.jsx
+++ b/platform/ui/src/contextProviders/ModalProvider.jsx
@@ -19,7 +19,7 @@ export const useModal = () => useContext(ModalContext);
* @typedef {Object} ModalProps
* @property {ReactElement|HTMLElement} [content=null] Modal content.
* @property {Object} [contentProps=null] Modal content props.
- * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
+ * @property {boolean} [shouldCloseOnEsc=true] Modal is dismissible via the esc key.
* @property {boolean} [isOpen=true] Make the Modal visible or hidden.
* @property {boolean} [closeButton=true] Should the modal body render the close button.
* @property {string} [title=null] Should the modal render the title independently of the body content.
@@ -30,7 +30,7 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
const DEFAULT_OPTIONS = {
content: null,
contentProps: null,
- shouldCloseOnEsc: false,
+ shouldCloseOnEsc: true,
isOpen: true,
closeButton: true,
title: null,
diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js
index 5cdbcdf50..3e32e4955 100644
--- a/platform/ui/tailwind.config.js
+++ b/platform/ui/tailwind.config.js
@@ -10,6 +10,7 @@ module.exports = {
xl: '1280px',
},
colors: {
+ overlay: 'rgba(0, 0, 0, 0.8)',
transparent: 'transparent',
black: '#000',
white: '#fff',
@@ -17,10 +18,10 @@ module.exports = {
inherit: 'inherit',
indigo: {
- dark: '#0b1a42'
+ dark: '#0b1a42',
},
aqua: {
- pale: '#7bb2ce'
+ pale: '#7bb2ce',
},
primary: {
diff --git a/platform/viewer/src/App.jsx b/platform/viewer/src/App.jsx
index 01f1e3a3d..5ab382d4f 100644
--- a/platform/viewer/src/App.jsx
+++ b/platform/viewer/src/App.jsx
@@ -1,12 +1,13 @@
// External
import React from 'react';
import PropTypes from 'prop-types';
+import i18n from '@ohif/i18n';
+import { I18nextProvider } from 'react-i18next';
import { BrowserRouter, HashRouter } from 'react-router-dom';
import {
DialogProvider,
Modal,
ModalProvider,
- Notification,
SnackbarProvider,
ThemeWrapper,
ViewportDialogProvider,
@@ -59,21 +60,23 @@ function App({ config, defaultExtensions }) {
return (
+
+
+
+ setFilename(value)}
+ label="File Name"
+ />
+ {renderErrorHandler('filename')}
+
+
+
+
+
+
+
+
+
+
+ onDimensionsChange(value, 'width')}
+ data-cy="image-width"
+ />
+ {renderErrorHandler('width')}
+
+
+ onDimensionsChange(value, 'height')}
+ data-cy="image-height"
+ />
+ {renderErrorHandler('height')}
+
+
+
+
+
+
+
+
+
+
+ {}}
+ >
+
+
+
+
+
+
+
+
+ setViewportElement(ref)}
+ >
+
+
+
+ {viewportPreview.src ? (
+
+ Image preview
+ 
+
+ ) : (
+
+ Loading Image Preview...
+
+ )}
+
+
+
+
+ About modal
;
+ show({
+ content: modalComponent,
+ title: 'About',
+ });
+ };
+
+ const showPreferencesModal = () => {
+ const modalComponent = () => Preferences modal
;
+ show({
+ content: modalComponent,
+ title: 'Preferences',
+ });
+ };
+
+ return (
+
-
)}