OHIF-208 (#1842)
* Set measurement as active * Add basic dialog component * Update styles and prop types * Jump to image * Update dialog * Format date * Update summary to use primary modalities * delete empty studySummary page * add missing PropTypes import * fix for accidental sync'd viewports * CR Updates * CR Update avoid cache of measurements * Use get measurement * Add comment to edit function * Remove request and merge modalities from series * Update dependency: react-cornerstone-viewport@2.3.9 react-cornerstone-viewport * @ohif/extension-cornerstone: 2.3.8 → 2.3.9 * @ohif/extension-dicom-sr: 2.3.8 → 2.3.9 * Update extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js Co-authored-by: Danny Brown <danny.ri.brown@gmail.com> * Add debugs * remove console.debug * Update frameindex to imageindex * Use new rcv debounced function * Fix hovering * Update dialog text * Dismiss dialogs on esc * Update dependency: react-cornerstone-viewport@3.0.0 react-cornerstone-viewport * @ohif/extension-cornerstone: 2.3.9 → 3.0.0 * @ohif/extension-dicom-sr: 2.3.9 → 3.0.0 * OHIF-237 * remove console.debug * Remove dead code brought in from rebase * EmptyViewport should not display a message * Remove more dead code from rebase * fix variable naming * remove unused hook * bump yarn lock * formatting * Add arrow dialog * Filter based on trackedSeries Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>
This commit is contained in:
Igor OctavianoandDanny Brown authored and GitHub committed
1 parent
ae05de18af
commit
a156eadcb7
34 files changed
+603
-758
No files matched your search
@@ -39,7 +39,9 @@ const parseDicomStructuredReport = (part10SRArrayBuffer, displaySets) => {
|
||||
const { _study: study, _series: series } = instanceMetadata;
|
||||
const { StudyInstanceUID, PatientID } = study;
|
||||
const { SeriesInstanceUID } = series;
|
||||
/* TODO: Update frameIndex to imageIndex for measurements */
|
||||
const { sopInstanceUid, frameIndex } = measurement;
|
||||
|
||||
const imagePath = getImagePath(
|
||||
StudyInstanceUID,
|
||||
SeriesInstanceUID,
|
||||
|
||||
@@ -282,6 +282,27 @@ class MeasurementService {
|
||||
}
|
||||
}
|
||||
|
||||
update(id, measurement) {
|
||||
if (this.measurements[id]) {
|
||||
const updatedMeasurement = {
|
||||
...measurement,
|
||||
modifiedTimestamp: Math.floor(Date.now() / 1000)
|
||||
};
|
||||
|
||||
log.info(`Updating measurement...`, updatedMeasurement);
|
||||
|
||||
this.measurements[id] = updatedMeasurement;
|
||||
|
||||
this._broadcastChange(
|
||||
this.EVENTS.MEASUREMENT_UPDATED,
|
||||
measurement.source,
|
||||
updatedMeasurement
|
||||
);
|
||||
|
||||
return updatedMeasurement.id;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a raw measurement into a source so that it may be
|
||||
* Converted to/from annotation in the same way. E.g. import serialized data
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Typography } from '..';
|
||||
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Body.propTypes = {
|
||||
text: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Body;
|
||||
@@ -1,12 +1,83 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const Dialog = ({ children }) => {
|
||||
return <div className="absolute top-0 left-0">{children}</div>;
|
||||
import Footer from './Footer';
|
||||
import Body from './Body';
|
||||
import Header from './Header';
|
||||
|
||||
const Dialog = ({
|
||||
title,
|
||||
text,
|
||||
onClose,
|
||||
noCloseButton,
|
||||
actions,
|
||||
onSubmit,
|
||||
header: HeaderComponent,
|
||||
body: BodyComponent,
|
||||
footer: FooterComponent,
|
||||
value: defaultValue
|
||||
}) => {
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
|
||||
const theme = 'bg-secondary-light';
|
||||
const flex = 'flex flex-col';
|
||||
const border = 'border-0 rounded-lg shadow-lg';
|
||||
const outline = 'outline-none focus:outline-none';
|
||||
const position = 'relative';
|
||||
const width = 'w-full';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(theme, flex, border, outline, position, width)}
|
||||
>
|
||||
<HeaderComponent
|
||||
title={title}
|
||||
noCloseButton={noCloseButton}
|
||||
onClose={onClose}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
/>
|
||||
<BodyComponent
|
||||
text={text}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
/>
|
||||
<FooterComponent
|
||||
actions={actions}
|
||||
onSubmit={onSubmit}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Dialog.propTypes = {
|
||||
children: PropTypes.node,
|
||||
title: PropTypes.string,
|
||||
text: PropTypes.string,
|
||||
onClose: PropTypes.func,
|
||||
noCloseButton: PropTypes.bool,
|
||||
header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
||||
body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
||||
footer: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
||||
onSubmit: PropTypes.func.isRequired,
|
||||
value: PropTypes.object,
|
||||
actions: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
text: PropTypes.string.isRequired,
|
||||
value: PropTypes.any,
|
||||
type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
|
||||
})
|
||||
).isRequired,
|
||||
};
|
||||
|
||||
Dialog.defaultProps = {
|
||||
header: Header,
|
||||
footer: Footer,
|
||||
body: Body,
|
||||
value: {}
|
||||
};
|
||||
|
||||
export default Dialog;
|
||||
@@ -0,0 +1,57 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Button } from '..';
|
||||
|
||||
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';
|
||||
|
||||
return (
|
||||
<div className={classNames(flex, border, spacing, theme, className)}>
|
||||
{actions.map((action, index) => {
|
||||
const isFirst = index === 0;
|
||||
const isPrimary = action.type === 'primary';
|
||||
|
||||
const onClickHandler = event => onSubmit({ action, value, event });
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
className={classNames({ 'ml-2': !isFirst })}
|
||||
color={isPrimary ? 'primary' : undefined}
|
||||
onClick={onClickHandler}
|
||||
style={{ transition: 'all .15s ease', height: 34 }}
|
||||
>
|
||||
{action.text}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const noop = () => { };
|
||||
|
||||
Footer.propTypes = {
|
||||
className: PropTypes.string,
|
||||
onSubmit: PropTypes.func.isRequired,
|
||||
actions: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
text: PropTypes.string.isRequired,
|
||||
value: PropTypes.any,
|
||||
type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
|
||||
})
|
||||
).isRequired,
|
||||
};
|
||||
|
||||
Footer.defaultProps = {
|
||||
onSubmit: noop,
|
||||
actions: []
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Typography, Icon } from '..';
|
||||
|
||||
const CloseButton = ({ onClick }) => {
|
||||
const theme = 'bg-transparent fill-primary-active';
|
||||
const outline = 'outline-none focus:outline-none';
|
||||
const flex = 'flex h-full';
|
||||
|
||||
return (
|
||||
<button className={classNames(flex, theme, 'border-0')} onClick={onClick}>
|
||||
<Icon name="close" className={classNames(theme, outline, 'h-3 w-3')} />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
CloseButton.propTypes = {
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
const Header = ({ title, noCloseButton, onClose }) => {
|
||||
const theme = 'bg-secondary-main';
|
||||
const flex = 'flex items-center justify-between';
|
||||
const border = 'border-b-2 border-solid border-black rounded-t';
|
||||
const spacing = 'p-4';
|
||||
|
||||
return (
|
||||
<div className={classNames(theme, flex, border, spacing)}>
|
||||
<Typography variant="h6" className="text-primary-active">
|
||||
{title}
|
||||
</Typography>
|
||||
{!noCloseButton && <CloseButton onClick={onClose} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Header.propTypes = {
|
||||
className: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
noCloseButton: PropTypes.bool,
|
||||
onClose: PropTypes.func,
|
||||
};
|
||||
|
||||
Header.defaultProps = {
|
||||
noCloseButton: false
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -21,6 +21,8 @@ const Input = ({
|
||||
value,
|
||||
onChange,
|
||||
onFocus,
|
||||
autoFocus,
|
||||
onKeyPress,
|
||||
...otherProps
|
||||
}) => {
|
||||
return (
|
||||
@@ -32,10 +34,12 @@ const Input = ({
|
||||
baseInputClasses,
|
||||
transparentClasses[transparent]
|
||||
)}
|
||||
autoFocus
|
||||
type={type}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
onFocus={onFocus}
|
||||
onKeyPress={onKeyPress}
|
||||
{...otherProps}
|
||||
/>
|
||||
</div>
|
||||
@@ -52,6 +56,8 @@ Input.propTypes = {
|
||||
value: PropTypes.any,
|
||||
onChange: PropTypes.func,
|
||||
onFocus: PropTypes.func,
|
||||
autoFocus: PropTypes.bool,
|
||||
onKeyPress: PropTypes.func,
|
||||
};
|
||||
|
||||
export default Input;
|
||||
@@ -0,0 +1,87 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { Icon } from '@ohif/ui';
|
||||
|
||||
const MeasurementItem = ({ id, index, label, displayText, isActive, onClick, onEdit }) => {
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
|
||||
const onEditHandler = event => {
|
||||
event.stopPropagation();
|
||||
onEdit({ id, isActive, event });
|
||||
};
|
||||
|
||||
const onClickHandler = event => onClick({ id, isActive, event });
|
||||
|
||||
const onMouseEnter = () => setIsHovering(true);
|
||||
const onMouseLeave = () => setIsHovering(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames(
|
||||
'group flex cursor-pointer bg-black border outline-none border-transparent transition duration-300',
|
||||
{
|
||||
'rounded overflow-hidden border-primary-light': isActive,
|
||||
}
|
||||
)}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClickHandler}
|
||||
onKeyDown={onClickHandler}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
>
|
||||
<div
|
||||
className={classnames(
|
||||
'text-center w-6 py-1 text-base transition duration-300',
|
||||
{
|
||||
'bg-primary-light text-black': isActive,
|
||||
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{index}
|
||||
</div>
|
||||
<div className="px-2 py-1 flex flex-1 flex-col relative">
|
||||
<span className="text-base text-primary-light mb-1">
|
||||
{label}
|
||||
</span>
|
||||
{displayText.map(line => (
|
||||
<span key={line} className="pl-2 border-l border-primary-light text-base text-white">
|
||||
{line}
|
||||
</span>
|
||||
))}
|
||||
<Icon
|
||||
className={classnames(
|
||||
'text-white w-4 absolute cursor-pointer transition duration-300',
|
||||
{ 'invisible opacity-0 mr-2': !isActive && !isHovering },
|
||||
{ 'visible opacity-1': !isActive && isHovering }
|
||||
)}
|
||||
name="pencil"
|
||||
style={{
|
||||
top: 4,
|
||||
right: 4,
|
||||
transform: isActive || isHovering ? '' : 'translateX(100%)',
|
||||
}}
|
||||
onClick={onEditHandler}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
MeasurementItem.propTypes = {
|
||||
id: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]),
|
||||
index: PropTypes.number.isRequired,
|
||||
label: PropTypes.string,
|
||||
displayText: PropTypes.array.isRequired,
|
||||
isActive: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
onEdit: PropTypes.func
|
||||
};
|
||||
|
||||
MeasurementItem.defaultProps = {
|
||||
isActive: false,
|
||||
};
|
||||
|
||||
export default MeasurementItem;
|
||||
@@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { Icon } from '@ohif/ui';
|
||||
|
||||
import MeasurementItem from './MeasurementItem';
|
||||
|
||||
const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
|
||||
return (
|
||||
@@ -13,66 +14,18 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
|
||||
<span className="text-base font-bold text-white">{amount}</span>
|
||||
</div>
|
||||
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-112">
|
||||
{!!data.length &&
|
||||
data.map(measurementItem => {
|
||||
const { id, label, displayText, isActive } = measurementItem;
|
||||
return (
|
||||
<div
|
||||
key={id}
|
||||
className={classnames(
|
||||
'group flex cursor-default bg-black border border-transparent transition duration-300 ',
|
||||
{
|
||||
'rounded overflow-hidden border-primary-light': isActive,
|
||||
}
|
||||
)}
|
||||
onClick={() => onClick(measurementItem.id)}
|
||||
onKeyDown={() => onClick(measurementItem.id)}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
>
|
||||
<div
|
||||
className={classnames(
|
||||
'text-center w-6 py-1 text-base transition duration-300',
|
||||
{
|
||||
'bg-primary-light text-black': isActive,
|
||||
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{id}
|
||||
</div>
|
||||
<div className="px-2 py-1 flex flex-1 flex-col relative">
|
||||
<span className="text-base text-primary-light mb-1">
|
||||
{label}
|
||||
</span>
|
||||
{displayText.map(line => (
|
||||
<span className="pl-2 border-l border-primary-light text-base text-white">
|
||||
{line}
|
||||
</span>
|
||||
))}
|
||||
<Icon
|
||||
className={classnames(
|
||||
'text-white w-4 absolute cursor-pointer transition duration-300',
|
||||
{
|
||||
'invisible opacity-0 mr-2': !isActive,
|
||||
}
|
||||
)}
|
||||
name="pencil"
|
||||
style={{
|
||||
top: 4,
|
||||
right: 4,
|
||||
transform: isActive ? '' : 'translateX(100%)',
|
||||
}}
|
||||
onClick={e => {
|
||||
// stopPropagation needed to avoid disable the current active item
|
||||
e.stopPropagation();
|
||||
onEdit(id);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{data.length && data.map((measurementItem, index) => (
|
||||
<MeasurementItem
|
||||
key={measurementItem.id}
|
||||
id={measurementItem.id}
|
||||
index={index + 1}
|
||||
label={measurementItem.label}
|
||||
isActive={measurementItem.isActive}
|
||||
displayText={measurementItem.displayText}
|
||||
onClick={onClick}
|
||||
onEdit={onEdit}
|
||||
/>
|
||||
))}
|
||||
{!data.length && (
|
||||
<div
|
||||
className={classnames(
|
||||
@@ -99,8 +52,8 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
|
||||
MeasurementTable.defaultProps = {
|
||||
amount: null,
|
||||
data: [],
|
||||
onClick: () => {},
|
||||
onEdit: () => {},
|
||||
onClick: () => { },
|
||||
onEdit: () => { },
|
||||
};
|
||||
|
||||
MeasurementTable.propTypes = {
|
||||
|
||||
Whitespace-only changes.
@@ -4,6 +4,7 @@ import React, {
|
||||
useContext,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef
|
||||
} from 'react';
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
@@ -251,12 +252,18 @@ const DialogProvider = ({ children, service }) => {
|
||||
});
|
||||
};
|
||||
|
||||
const onKeyDownHandler = event => {
|
||||
if (event.key === "Escape") {
|
||||
dismissAll();
|
||||
}
|
||||
};
|
||||
|
||||
const validCallback = callback => callback && typeof callback === 'function';
|
||||
|
||||
return (
|
||||
<DialogContext.Provider value={{ create, dismiss, dismissAll, isEmpty }}>
|
||||
{!isEmpty() &&
|
||||
<div className='w-full h-full absolute'>
|
||||
<div className='w-full h-full absolute' onKeyDown={onKeyDownHandler}>
|
||||
{renderDialogs()}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -27,10 +27,10 @@ export function ViewportGridProvider({ children, service }) {
|
||||
return { ...state, ...{ activeViewportIndex: action.payload } };
|
||||
}
|
||||
case 'SET_DISPLAYSET_FOR_VIEWPORT': {
|
||||
const { viewportIndex, displaySetInstanceUID } = action.payload;
|
||||
const { viewportIndex, displaySetInstanceUID, imageIndex } = action.payload;
|
||||
const viewports = state.viewports.slice();
|
||||
|
||||
viewports[viewportIndex] = { displaySetInstanceUID };
|
||||
viewports[viewportIndex] = { displaySetInstanceUID, imageIndex };
|
||||
|
||||
return { ...state, ...{ viewports } };
|
||||
}
|
||||
@@ -69,12 +69,13 @@ export function ViewportGridProvider({ children, service }) {
|
||||
[dispatch]
|
||||
);
|
||||
const setDisplaysetForViewport = useCallback(
|
||||
({ viewportIndex, displaySetInstanceUID }) =>
|
||||
({ viewportIndex, displaySetInstanceUID, imageIndex }) =>
|
||||
dispatch({
|
||||
type: 'SET_DISPLAYSET_FOR_VIEWPORT',
|
||||
payload: {
|
||||
viewportIndex,
|
||||
displaySetInstanceUID,
|
||||
imageIndex
|
||||
},
|
||||
}),
|
||||
[dispatch]
|
||||
|
||||
@@ -1,140 +0,0 @@
|
||||
import { redux } from '@ohif/core';
|
||||
import store from './../../store';
|
||||
|
||||
const commandsModule = ({ commandsManager }) => {
|
||||
const { setViewportActive, setActiveViewportSpecificData } = redux.actions;
|
||||
|
||||
const actions = {
|
||||
updateActiveViewport: ({ viewports, direction }) => {
|
||||
const { viewportSpecificData, activeViewportIndex } = viewports;
|
||||
const maxIndex = Object.keys(viewportSpecificData).length - 1;
|
||||
|
||||
let newIndex = activeViewportIndex + direction;
|
||||
newIndex = newIndex > maxIndex ? 0 : newIndex;
|
||||
newIndex = newIndex < 0 ? maxIndex : newIndex;
|
||||
|
||||
store.dispatch(setViewportActive(newIndex));
|
||||
},
|
||||
setWindowLevelPreset: ({ viewports, preset }) => {
|
||||
const state = store.getState();
|
||||
const { preferences = {} } = state;
|
||||
const { window, level } =
|
||||
preferences.windowLevelData && preferences.windowLevelData[preset];
|
||||
|
||||
if (window && level) {
|
||||
commandsManager.runCommand('setWindowLevel', {
|
||||
viewports,
|
||||
window,
|
||||
level,
|
||||
});
|
||||
}
|
||||
},
|
||||
updateViewportDisplaySet: ({ viewports, direction }) => {
|
||||
const viewportSpecificData = { ...viewports.viewportSpecificData };
|
||||
const activeViewport =
|
||||
viewportSpecificData[viewports.activeViewportIndex];
|
||||
const studyMetadata = utils.studyMetadataManager.get(
|
||||
activeViewport.StudyInstanceUID
|
||||
);
|
||||
|
||||
if (!studyMetadata) {
|
||||
return;
|
||||
}
|
||||
|
||||
const allDisplaySets = studyMetadata.getDisplaySets();
|
||||
const currentDisplaySetIndex = allDisplaySets.findIndex(
|
||||
displaySet =>
|
||||
displaySet.displaySetInstanceUID ===
|
||||
activeViewport.displaySetInstanceUID
|
||||
);
|
||||
if (currentDisplaySetIndex < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newDisplaySetIndex = currentDisplaySetIndex + direction;
|
||||
const newDisplaySetData = allDisplaySets[newDisplaySetIndex];
|
||||
if (!newDisplaySetData) {
|
||||
return;
|
||||
}
|
||||
|
||||
store.dispatch(setActiveViewportSpecificData(newDisplaySetData));
|
||||
},
|
||||
};
|
||||
|
||||
const definitions = {
|
||||
// Next/Previous active viewport
|
||||
incrementActiveViewport: {
|
||||
commandFn: actions.updateActiveViewport,
|
||||
storeContexts: ['viewports'],
|
||||
options: { direction: 1 },
|
||||
},
|
||||
decrementActiveViewport: {
|
||||
commandFn: actions.updateActiveViewport,
|
||||
storeContexts: ['viewports'],
|
||||
options: { direction: -1 },
|
||||
},
|
||||
// Window level Presets
|
||||
windowLevelPreset1: {
|
||||
commandFn: actions.setWindowLevelPreset,
|
||||
storeContexts: ['viewports'],
|
||||
options: { preset: 1 },
|
||||
},
|
||||
windowLevelPreset2: {
|
||||
commandFn: actions.setWindowLevelPreset,
|
||||
storeContexts: ['viewports'],
|
||||
options: { preset: 2 },
|
||||
},
|
||||
windowLevelPreset3: {
|
||||
commandFn: actions.setWindowLevelPreset,
|
||||
storeContexts: ['viewports'],
|
||||
options: { preset: 3 },
|
||||
},
|
||||
windowLevelPreset4: {
|
||||
commandFn: actions.setWindowLevelPreset,
|
||||
storeContexts: ['viewports'],
|
||||
options: { preset: 4 },
|
||||
},
|
||||
windowLevelPreset5: {
|
||||
commandFn: actions.setWindowLevelPreset,
|
||||
storeContexts: ['viewports'],
|
||||
options: { preset: 5 },
|
||||
},
|
||||
windowLevelPreset6: {
|
||||
commandFn: actions.setWindowLevelPreset,
|
||||
storeContexts: ['viewports'],
|
||||
options: { preset: 6 },
|
||||
},
|
||||
windowLevelPreset7: {
|
||||
commandFn: actions.setWindowLevelPreset,
|
||||
storeContexts: ['viewports'],
|
||||
options: { preset: 7 },
|
||||
},
|
||||
windowLevelPreset8: {
|
||||
commandFn: actions.setWindowLevelPreset,
|
||||
storeContexts: ['viewports'],
|
||||
options: { preset: 8 },
|
||||
},
|
||||
windowLevelPreset9: {
|
||||
commandFn: actions.setWindowLevelPreset,
|
||||
storeContexts: ['viewports'],
|
||||
options: { preset: 9 },
|
||||
},
|
||||
nextViewportDisplaySet: {
|
||||
commandFn: actions.updateViewportDisplaySet,
|
||||
storeContexts: ['viewports'],
|
||||
options: { direction: 1 },
|
||||
},
|
||||
previousViewportDisplaySet: {
|
||||
commandFn: actions.updateViewportDisplaySet,
|
||||
storeContexts: ['viewports'],
|
||||
options: { direction: -1 },
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
definitions,
|
||||
defaultContext: 'VIEWER',
|
||||
};
|
||||
};
|
||||
|
||||
export default commandsModule;
|
||||
@@ -1,118 +0,0 @@
|
||||
import { measurements, utils } from '@ohif/core';
|
||||
|
||||
const { MeasurementApi } = measurements;
|
||||
const { studyMetadataManager } = utils;
|
||||
|
||||
// TODO: Move this function to OHIF itself so we can use it on the OHIF measurment table (when it is finished)
|
||||
|
||||
/**
|
||||
* Activates a set of measurements
|
||||
*
|
||||
* @param measurementData
|
||||
* @param viewportsState
|
||||
* @param timepointManagerState
|
||||
* @param options
|
||||
*/
|
||||
export default function jumpToRowItem(
|
||||
measurementData,
|
||||
viewportsState,
|
||||
timepointManagerState,
|
||||
options = { invertViewportTimepointsOrder: false, childToolKey: null }
|
||||
) {
|
||||
const numViewports = viewportsState.layout.viewports.length;
|
||||
const numTimepoints = timepointManagerState.timepoints.length;
|
||||
const { measurements, timepoints } = timepointManagerState;
|
||||
const numViewportsToUpdate = Math.min(numTimepoints, numViewports);
|
||||
const { toolType, measurementNumber } = measurementData;
|
||||
|
||||
if (options.invertViewportTimepointsOrder) {
|
||||
timepoints.reverse();
|
||||
}
|
||||
|
||||
const measurementsForToolGroup = measurements[toolType];
|
||||
|
||||
// Retrieve the measurements data
|
||||
const measurementsToJumpTo = [];
|
||||
for (let i = 0; i < numViewportsToUpdate; i++) {
|
||||
const { timepointId } = timepoints[i];
|
||||
|
||||
const dataAtThisTimepoint = measurementsForToolGroup.find(entry => {
|
||||
return (
|
||||
entry.timepointId === timepointId &&
|
||||
entry.measurementNumber === measurementNumber
|
||||
);
|
||||
});
|
||||
|
||||
if (!dataAtThisTimepoint) {
|
||||
measurementsToJumpTo.push(null);
|
||||
continue;
|
||||
}
|
||||
|
||||
let measurement = dataAtThisTimepoint;
|
||||
|
||||
const { tool } = MeasurementApi.getToolConfiguration(toolType);
|
||||
if (options.childToolKey) {
|
||||
measurement = dataAtThisTimepoint[options.childToolKey];
|
||||
} else if (Array.isArray(tool.childTools)) {
|
||||
const key = tool.childTools.find(key => !!dataAtThisTimepoint[key]);
|
||||
measurement = dataAtThisTimepoint[key];
|
||||
}
|
||||
|
||||
measurementsToJumpTo.push(measurement);
|
||||
}
|
||||
|
||||
// TODO: Add a single viewports state action which allows
|
||||
// - viewportData to be set
|
||||
// - layout to be set
|
||||
// - activeViewport to be set
|
||||
|
||||
// Needs to update viewports.viewportData state to set image set data
|
||||
|
||||
const displaySetContainsSopInstance = (displaySet, SOPInstanceUID) => {
|
||||
if (!displaySet.images || !displaySet.images.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
return displaySet.images.find(
|
||||
image => image.getSOPInstanceUID() === SOPInstanceUID
|
||||
);
|
||||
};
|
||||
|
||||
const viewportSpecificData = [];
|
||||
measurementsToJumpTo.forEach((data, viewportIndex) => {
|
||||
// Skip if there is no measurement to jump
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
|
||||
const study = studyMetadataManager.get(data.StudyInstanceUID);
|
||||
if (!study) {
|
||||
throw new Error('Study not found.');
|
||||
}
|
||||
|
||||
const displaySet = study.findDisplaySet(displaySet => {
|
||||
return displaySetContainsSopInstance(displaySet, data.SOPInstanceUID);
|
||||
});
|
||||
|
||||
if (!displaySet) {
|
||||
throw new Error('Display set not found.');
|
||||
}
|
||||
|
||||
displaySet.SOPInstanceUID = data.SOPInstanceUID;
|
||||
if (data.frameIndex) {
|
||||
displaySet.frameIndex = data.frameIndex;
|
||||
}
|
||||
|
||||
viewportIndex =
|
||||
(viewportIndex + viewportsState.activeViewportIndex) % numViewports;
|
||||
viewportSpecificData.push({
|
||||
viewportIndex,
|
||||
displaySet,
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
viewportSpecificData,
|
||||
layout: [], // TODO: if we need to change layout, we should return this here
|
||||
};
|
||||
}
|
||||
@@ -1,11 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
function EmptyViewport() {
|
||||
return (
|
||||
<div>
|
||||
<p>Please drag a stack here to view images.</p>
|
||||
</div>
|
||||
);
|
||||
return <div></div>;
|
||||
}
|
||||
|
||||
export default EmptyViewport;
|
||||
@@ -1,142 +0,0 @@
|
||||
/* Viewer Route */
|
||||
.entry-header {
|
||||
padding: 10px 15px;
|
||||
height: var(--top-bar-height);
|
||||
}
|
||||
|
||||
.header-left-box {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-brand {
|
||||
text-decoration: none;
|
||||
height: 30px;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Home Page */
|
||||
.entry-header.header-big {
|
||||
background: rgba(21, 25, 30, 0.7);
|
||||
padding: 35px var(--study-list-padding);
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.entry-header.header-big .header-brand {
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.entry-header.header-big .header-logo-image {
|
||||
margin-right: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.entry-header.header-big .header-logo-text {
|
||||
width: 474px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/** OTHER STYLES **/
|
||||
|
||||
.dd-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-viewerLink {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header-logo-image {
|
||||
fill: transparent;
|
||||
height: 100%;
|
||||
margin: 0 8px 0 0;
|
||||
width: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
color: var(--text-secondary-color);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.header-btn:hover {
|
||||
color: var(--hover-color);
|
||||
}
|
||||
|
||||
.header-btn:active {
|
||||
color: var(--active-color);
|
||||
}
|
||||
|
||||
.header-studyListLinkSection {
|
||||
border-left: var(--ui-border-thickness) solid var(--ui-border-color);
|
||||
margin: 3px 0 0 10px;
|
||||
padding: 0 0 0 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header-menu {
|
||||
color: var(--text-primary-color);
|
||||
float: right;
|
||||
padding: 4px 0;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-decoration: none;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.entry-header.header-big .header-menu {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.header-menu .research-use {
|
||||
float: left;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #91b9cd;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.notification-bar {
|
||||
display: none;
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
background-color: #91b9cd;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.entry-header,
|
||||
.entry-header.header-big {
|
||||
padding: 30px 15px 10px 15px;
|
||||
}
|
||||
.entry-header.header-big .header-logo-image {
|
||||
margin: 0 10px 0 0;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.entry-header.header-big .header-logo-text {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
/* Toggle Notification Bar */
|
||||
.notification-bar {
|
||||
display: block;
|
||||
}
|
||||
.header-menu .research-use {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link, withRouter } from 'react-router-dom';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { Dropdown, AboutContent, withModal } from '@ohif/ui';
|
||||
//
|
||||
import { UserPreferences } from './../UserPreferences';
|
||||
import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
|
||||
import './Header.css';
|
||||
|
||||
function Header(props) {
|
||||
const {
|
||||
t,
|
||||
user,
|
||||
userManager,
|
||||
modal: { show },
|
||||
useLargeLogo,
|
||||
linkPath,
|
||||
linkText,
|
||||
location,
|
||||
children,
|
||||
} = props;
|
||||
|
||||
const [options, setOptions] = useState([]);
|
||||
const hasLink = linkText && linkPath;
|
||||
|
||||
useEffect(() => {
|
||||
const optionsValue = [
|
||||
{
|
||||
title: t('About'),
|
||||
icon: { name: 'info' },
|
||||
onClick: () =>
|
||||
show({
|
||||
content: AboutContent,
|
||||
title: t('OHIF Viewer - About'),
|
||||
}),
|
||||
},
|
||||
{
|
||||
title: t('Preferences'),
|
||||
icon: {
|
||||
name: 'user',
|
||||
},
|
||||
onClick: () =>
|
||||
show({
|
||||
content: UserPreferences,
|
||||
title: t('User Preferences'),
|
||||
}),
|
||||
},
|
||||
];
|
||||
|
||||
if (user && userManager) {
|
||||
optionsValue.push({
|
||||
title: t('Logout'),
|
||||
icon: { name: 'power-off' },
|
||||
onClick: () => userManager.signoutRedirect(),
|
||||
});
|
||||
}
|
||||
|
||||
setOptions(optionsValue);
|
||||
}, [setOptions, show, t, user, userManager]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
|
||||
<div
|
||||
className={classNames('entry-header', { 'header-big': useLargeLogo })}
|
||||
>
|
||||
<div className="header-left-box">
|
||||
{location && location.studyLink && (
|
||||
<Link
|
||||
to={location.studyLink}
|
||||
className="header-btn header-viewerLink"
|
||||
>
|
||||
{t('Back to Viewer')}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{children}
|
||||
|
||||
{hasLink && (
|
||||
<Link
|
||||
className="header-btn header-studyListLinkSection"
|
||||
to={{
|
||||
pathname: linkPath,
|
||||
state: { studyLink: location.pathname },
|
||||
}}
|
||||
>
|
||||
{t(linkText)}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="header-menu">
|
||||
<span className="research-use">{t('INVESTIGATIONAL USE ONLY')}</span>
|
||||
<Dropdown title={t('Options')} list={options} align="right" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Header.propTypes = {
|
||||
// Study list, /
|
||||
linkText: PropTypes.string,
|
||||
linkPath: PropTypes.string,
|
||||
useLargeLogo: PropTypes.bool,
|
||||
//
|
||||
location: PropTypes.object.isRequired,
|
||||
children: PropTypes.node,
|
||||
t: PropTypes.func.isRequired,
|
||||
userManager: PropTypes.object,
|
||||
user: PropTypes.object,
|
||||
modal: PropTypes.object,
|
||||
};
|
||||
|
||||
Header.defaultProps = {
|
||||
useLargeLogo: false,
|
||||
children: OHIFLogo(),
|
||||
};
|
||||
|
||||
export default withTranslation(['Header', 'AboutModal'])(
|
||||
withRouter(withModal(Header))
|
||||
);
|
||||
@@ -1,48 +0,0 @@
|
||||
.FlexboxLayout {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-flow: row nowrap;
|
||||
align-items: stretch;
|
||||
height: calc(100% - var(--toolbar-height) - var(--top-bar-height));
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidepanel {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
transition: var(--sidepanel-transition);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.from-left {
|
||||
border-right: var(--ui-border-thickness) solid var(--ui-border-color);
|
||||
margin-left: calc(var(--left-sidepanel-menu-width) * -1);
|
||||
max-width: var(--left-sidepanel-menu-width);
|
||||
}
|
||||
|
||||
.from-right {
|
||||
border-left: var(--ui-border-thickness) solid var(--ui-border-color);
|
||||
margin-right: calc(var(--right-sidepanel-menu-width) * -1);
|
||||
max-width: var(--right-sidepanel-menu-width);
|
||||
}
|
||||
|
||||
.sidepanel.is-open {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: var(--sidepanel-transition);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
/* Account for "Investigational Use" banner height */
|
||||
.FlexboxLayout {
|
||||
height: calc(100% - var(--toolbar-height) - var(--top-bar-height) - 16px);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
/**
|
||||
* hook that builds on useLocation to parse
|
||||
* the query string for you.
|
||||
*
|
||||
* @name useQuery
|
||||
*/
|
||||
export default function () {
|
||||
return new URLSearchParams(useLocation().search);
|
||||
}
|
||||
Reference in new issue
Block a user