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
@@ -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