Remove connected components roped in from a rebase
This commit is contained in:
dannyrb
parent
fab7334696
commit
ae107f4d3b
@ -1,57 +0,0 @@
|
|||||||
import OHIF from '@ohif/core';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { StudyBrowser } from '@ohif/ui';
|
|
||||||
import cloneDeep from 'lodash.clonedeep';
|
|
||||||
import findDisplaySetByUID from './findDisplaySetByUID';
|
|
||||||
|
|
||||||
const { setActiveViewportSpecificData } = OHIF.redux.actions;
|
|
||||||
|
|
||||||
// TODO
|
|
||||||
// - Determine in which display set is active from Redux (activeViewportIndex and layout viewportData)
|
|
||||||
// - Pass in errors and stack loading progress from Redux
|
|
||||||
const mapStateToProps = (state, ownProps) => {
|
|
||||||
// If we know that the stack loading progress details have changed,
|
|
||||||
// we can try to update the component state so that the thumbnail
|
|
||||||
// progress bar is updated
|
|
||||||
const stackLoadingProgressMap = state.loading.progress;
|
|
||||||
const studiesWithLoadingData = cloneDeep(ownProps.studies);
|
|
||||||
|
|
||||||
studiesWithLoadingData.forEach(study => {
|
|
||||||
study.thumbnails.forEach(data => {
|
|
||||||
const { displaySetInstanceUID } = data;
|
|
||||||
const stackId = `StackProgress:${displaySetInstanceUID}`;
|
|
||||||
const stackProgressData = stackLoadingProgressMap[stackId];
|
|
||||||
|
|
||||||
let stackPercentComplete = 0;
|
|
||||||
if (stackProgressData) {
|
|
||||||
stackPercentComplete = stackProgressData.percentComplete;
|
|
||||||
}
|
|
||||||
|
|
||||||
data.stackPercentComplete = stackPercentComplete;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
studies: studiesWithLoadingData,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch, ownProps) => {
|
|
||||||
return {
|
|
||||||
onThumbnailClick: displaySetInstanceUID => {
|
|
||||||
const displaySet = findDisplaySetByUID(
|
|
||||||
ownProps.studyMetadata,
|
|
||||||
displaySetInstanceUID
|
|
||||||
);
|
|
||||||
|
|
||||||
dispatch(setActiveViewportSpecificData(displaySet));
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const ConnectedStudyBrowser = connect(
|
|
||||||
mapStateToProps,
|
|
||||||
mapDispatchToProps
|
|
||||||
)(StudyBrowser);
|
|
||||||
|
|
||||||
export default ConnectedStudyBrowser;
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
import OHIF from '@ohif/core';
|
|
||||||
import ViewerMain from './ViewerMain';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
|
|
||||||
const {
|
|
||||||
setViewportSpecificData,
|
|
||||||
clearViewportSpecificData,
|
|
||||||
} = OHIF.redux.actions;
|
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
|
||||||
const { activeViewportIndex, layout, viewportSpecificData } = state.viewports;
|
|
||||||
|
|
||||||
return {
|
|
||||||
activeViewportIndex,
|
|
||||||
layout,
|
|
||||||
viewportSpecificData,
|
|
||||||
viewports: state.viewports,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => {
|
|
||||||
return {
|
|
||||||
setViewportSpecificData: (viewportIndex, data) => {
|
|
||||||
dispatch(setViewportSpecificData(viewportIndex, data));
|
|
||||||
},
|
|
||||||
clearViewportSpecificData: () => {
|
|
||||||
dispatch(clearViewportSpecificData());
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const ConnectedViewerMain = connect(
|
|
||||||
mapStateToProps,
|
|
||||||
mapDispatchToProps
|
|
||||||
)(ViewerMain);
|
|
||||||
|
|
||||||
export default ConnectedViewerMain;
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import { connect } from 'react-redux';
|
|
||||||
import ViewerRetrieveStudyData from './ViewerRetrieveStudyData.js';
|
|
||||||
import OHIF from '@ohif/core';
|
|
||||||
|
|
||||||
const { clearViewportSpecificData } = OHIF.redux.actions;
|
|
||||||
const isActive = a => a.active === true;
|
|
||||||
|
|
||||||
const mapStateToProps = (state, ownProps) => {
|
|
||||||
const activeServer = state.servers.servers.find(isActive);
|
|
||||||
|
|
||||||
return {
|
|
||||||
server: ownProps.server || activeServer,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
const mapDispatchToProps = dispatch => {
|
|
||||||
return {
|
|
||||||
clearViewportSpecificData: () => {
|
|
||||||
dispatch(clearViewportSpecificData());
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const ConnectedViewerRetrieveStudyData = connect(
|
|
||||||
mapStateToProps,
|
|
||||||
mapDispatchToProps
|
|
||||||
)(ViewerRetrieveStudyData);
|
|
||||||
|
|
||||||
export default ConnectedViewerRetrieveStudyData;
|
|
||||||
@ -1,114 +0,0 @@
|
|||||||
import { ContextMenu } from '@ohif/ui';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import { commandsManager } from './../App.jsx';
|
|
||||||
|
|
||||||
const toolTypes = [
|
|
||||||
'Angle',
|
|
||||||
'Bidirectional',
|
|
||||||
'Length',
|
|
||||||
'FreehandMouse',
|
|
||||||
'EllipticalRoi',
|
|
||||||
'CircleRoi',
|
|
||||||
'RectangleRoi',
|
|
||||||
];
|
|
||||||
|
|
||||||
const ToolContextMenu = ({
|
|
||||||
onSetLabel,
|
|
||||||
onSetDescription,
|
|
||||||
isTouchEvent,
|
|
||||||
eventData,
|
|
||||||
onClose,
|
|
||||||
onDelete,
|
|
||||||
}) => {
|
|
||||||
const defaultDropdownItems = [
|
|
||||||
{
|
|
||||||
label: 'Delete measurement',
|
|
||||||
actionType: 'Delete',
|
|
||||||
action: ({ nearbyToolData, eventData }) =>
|
|
||||||
onDelete(nearbyToolData, eventData),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Relabel',
|
|
||||||
actionType: 'setLabel',
|
|
||||||
action: ({ nearbyToolData, eventData }) => {
|
|
||||||
const { tool: measurementData } = nearbyToolData;
|
|
||||||
onSetLabel(eventData, measurementData);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
actionType: 'setDescription',
|
|
||||||
action: ({ nearbyToolData, eventData }) => {
|
|
||||||
const { tool: measurementData } = nearbyToolData;
|
|
||||||
onSetDescription(eventData, measurementData);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const getDropdownItems = (eventData, isTouchEvent = false) => {
|
|
||||||
const nearbyToolData = commandsManager.runCommand('getNearbyToolData', {
|
|
||||||
element: eventData.element,
|
|
||||||
canvasCoordinates: eventData.currentPoints.canvas,
|
|
||||||
availableToolTypes: toolTypes,
|
|
||||||
});
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Annotate tools for touch events already have a press handle to edit it,
|
|
||||||
* has a better UX for deleting it.
|
|
||||||
*/
|
|
||||||
if (
|
|
||||||
isTouchEvent &&
|
|
||||||
nearbyToolData &&
|
|
||||||
nearbyToolData.toolType === 'arrowAnnotate'
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let dropdownItems = [];
|
|
||||||
if (nearbyToolData) {
|
|
||||||
defaultDropdownItems.forEach(item => {
|
|
||||||
item.params = { eventData, nearbyToolData };
|
|
||||||
|
|
||||||
if (item.actionType === 'setDescription') {
|
|
||||||
item.label = `${
|
|
||||||
nearbyToolData.tool.description ? 'Edit' : 'Add'
|
|
||||||
} Description`;
|
|
||||||
}
|
|
||||||
|
|
||||||
dropdownItems.push(item);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return dropdownItems;
|
|
||||||
};
|
|
||||||
|
|
||||||
const onClickHandler = ({ action, params }) => {
|
|
||||||
action(params);
|
|
||||||
if (onClose) {
|
|
||||||
onClose();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const dropdownItems = getDropdownItems(eventData, isTouchEvent);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="ToolContextMenu">
|
|
||||||
<ContextMenu items={dropdownItems} onClick={onClickHandler} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
ToolContextMenu.propTypes = {
|
|
||||||
isTouchEvent: PropTypes.bool.isRequired,
|
|
||||||
eventData: PropTypes.object,
|
|
||||||
onClose: PropTypes.func,
|
|
||||||
onSetDescription: PropTypes.func,
|
|
||||||
onSetLabel: PropTypes.func,
|
|
||||||
onDelete: PropTypes.func,
|
|
||||||
};
|
|
||||||
|
|
||||||
ToolContextMenu.defaultProps = {
|
|
||||||
isTouchEvent: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ToolContextMenu;
|
|
||||||
@ -1,386 +0,0 @@
|
|||||||
import React, { Component } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { withTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
import { MODULE_TYPES } from '@ohif/core';
|
|
||||||
import {
|
|
||||||
ExpandableToolMenu,
|
|
||||||
RoundedButtonGroup,
|
|
||||||
ToolbarButton,
|
|
||||||
withModal,
|
|
||||||
withDialog,
|
|
||||||
} from '@ohif/ui';
|
|
||||||
|
|
||||||
import './ToolbarRow.css';
|
|
||||||
import { commandsManager, extensionManager } from './../App.jsx';
|
|
||||||
|
|
||||||
import ConnectedCineDialog from './ConnectedCineDialog';
|
|
||||||
import ConnectedLayoutButton from './ConnectedLayoutButton';
|
|
||||||
import { withAppContext } from '../context/AppContext';
|
|
||||||
|
|
||||||
class ToolbarRow extends Component {
|
|
||||||
// TODO: Simplify these? isOpen can be computed if we say "any" value for selected,
|
|
||||||
// closed if selected is null/undefined
|
|
||||||
static propTypes = {
|
|
||||||
isLeftSidePanelOpen: PropTypes.bool.isRequired,
|
|
||||||
isRightSidePanelOpen: PropTypes.bool.isRequired,
|
|
||||||
selectedLeftSidePanel: PropTypes.string.isRequired,
|
|
||||||
selectedRightSidePanel: PropTypes.string.isRequired,
|
|
||||||
handleSidePanelChange: PropTypes.func.isRequired,
|
|
||||||
activeContexts: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
||||||
studies: PropTypes.array,
|
|
||||||
t: PropTypes.func.isRequired,
|
|
||||||
// NOTE: withDialog, withModal HOCs
|
|
||||||
dialog: PropTypes.any,
|
|
||||||
modal: PropTypes.any,
|
|
||||||
};
|
|
||||||
|
|
||||||
static defaultProps = {
|
|
||||||
studies: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
const toolbarButtonDefinitions = _getVisibleToolbarButtons.call(this);
|
|
||||||
// TODO:
|
|
||||||
// If it's a tool that can be active... Mark it as active?
|
|
||||||
// - Tools that are on/off?
|
|
||||||
// - Tools that can be bound to multiple buttons?
|
|
||||||
|
|
||||||
// Normal ToolbarButtons...
|
|
||||||
// Just how high do we need to hoist this state?
|
|
||||||
// Why ToolbarRow instead of just Toolbar? Do we have any others?
|
|
||||||
this.state = {
|
|
||||||
toolbarButtons: toolbarButtonDefinitions,
|
|
||||||
activeButtons: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
this.seriesPerStudyCount = [];
|
|
||||||
|
|
||||||
this._handleBuiltIn = _handleBuiltIn.bind(this);
|
|
||||||
|
|
||||||
this.updateButtonGroups();
|
|
||||||
}
|
|
||||||
|
|
||||||
updateButtonGroups() {
|
|
||||||
const panelModules = extensionManager.modules[MODULE_TYPES.PANEL];
|
|
||||||
|
|
||||||
this.buttonGroups = {
|
|
||||||
left: [],
|
|
||||||
right: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
// ~ FIND MENU OPTIONS
|
|
||||||
panelModules.forEach(panelExtension => {
|
|
||||||
const panelModule = panelExtension.module;
|
|
||||||
const defaultContexts = Array.from(panelModule.defaultContext);
|
|
||||||
|
|
||||||
panelModule.menuOptions.forEach(menuOption => {
|
|
||||||
const contexts = Array.from(menuOption.context || defaultContexts);
|
|
||||||
const hasActiveContext = this.props.activeContexts.some(actx =>
|
|
||||||
contexts.includes(actx)
|
|
||||||
);
|
|
||||||
|
|
||||||
// It's a bit beefy to pass studies; probably only need to be reactive on `studyInstanceUIDs` and activeViewport?
|
|
||||||
// Note: This does not cleanly handle `studies` prop updating with panel open
|
|
||||||
const isDisabled =
|
|
||||||
typeof menuOption.isDisabled === 'function' &&
|
|
||||||
menuOption.isDisabled(this.props.studies);
|
|
||||||
|
|
||||||
if (hasActiveContext && !isDisabled) {
|
|
||||||
const menuOptionEntry = {
|
|
||||||
value: menuOption.target,
|
|
||||||
icon: menuOption.icon,
|
|
||||||
bottomLabel: menuOption.label,
|
|
||||||
};
|
|
||||||
const from = menuOption.from || 'right';
|
|
||||||
|
|
||||||
this.buttonGroups[from].push(menuOptionEntry);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// TODO: This should come from extensions, instead of being baked in
|
|
||||||
this.buttonGroups.left.unshift({
|
|
||||||
value: 'studies',
|
|
||||||
icon: 'th-large',
|
|
||||||
bottomLabel: this.props.t('Series'),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
|
||||||
const activeContextsChanged =
|
|
||||||
prevProps.activeContexts !== this.props.activeContexts;
|
|
||||||
|
|
||||||
const prevStudies = prevProps.studies;
|
|
||||||
const studies = this.props.studies;
|
|
||||||
const seriesPerStudyCount = this.seriesPerStudyCount;
|
|
||||||
|
|
||||||
let studiesUpdated = false;
|
|
||||||
|
|
||||||
if (prevStudies.length !== studies.length) {
|
|
||||||
studiesUpdated = true;
|
|
||||||
} else {
|
|
||||||
for (let i = 0; i < studies.length; i++) {
|
|
||||||
if (studies[i].series.length !== seriesPerStudyCount[i]) {
|
|
||||||
seriesPerStudyCount[i] = studies[i].series.length;
|
|
||||||
|
|
||||||
studiesUpdated = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (studiesUpdated) {
|
|
||||||
this.updateButtonGroups();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (activeContextsChanged) {
|
|
||||||
this.setState(
|
|
||||||
{
|
|
||||||
toolbarButtons: _getVisibleToolbarButtons.call(this),
|
|
||||||
},
|
|
||||||
this.closeCineDialogIfNotApplicable
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
closeCineDialogIfNotApplicable = () => {
|
|
||||||
const { dialog } = this.props;
|
|
||||||
let { dialogId, activeButtons, toolbarButtons } = this.state;
|
|
||||||
if (dialogId) {
|
|
||||||
const cineButtonPresent = toolbarButtons.find(
|
|
||||||
button => button.options && button.options.behavior === 'CINE'
|
|
||||||
);
|
|
||||||
if (!cineButtonPresent) {
|
|
||||||
dialog.dismiss({ id: dialogId });
|
|
||||||
activeButtons = activeButtons.filter(
|
|
||||||
button => button.options && button.options.behavior !== 'CINE'
|
|
||||||
);
|
|
||||||
this.setState({ dialogId: null, activeButtons });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const buttonComponents = _getButtonComponents.call(
|
|
||||||
this,
|
|
||||||
this.state.toolbarButtons,
|
|
||||||
this.state.activeButtons
|
|
||||||
);
|
|
||||||
|
|
||||||
const onPress = (side, value) => {
|
|
||||||
this.props.handleSidePanelChange(side, value);
|
|
||||||
};
|
|
||||||
const onPressLeft = onPress.bind(this, 'left');
|
|
||||||
const onPressRight = onPress.bind(this, 'right');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="ToolbarRow">
|
|
||||||
<div className="pull-left m-t-1 p-y-1" style={{ padding: '10px' }}>
|
|
||||||
<RoundedButtonGroup
|
|
||||||
options={this.buttonGroups.left}
|
|
||||||
value={this.props.selectedLeftSidePanel || ''}
|
|
||||||
onValueChanged={onPressLeft}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{buttonComponents}
|
|
||||||
<ConnectedLayoutButton />
|
|
||||||
<div
|
|
||||||
className="pull-right m-t-1 rm-x-1"
|
|
||||||
style={{ marginLeft: 'auto' }}
|
|
||||||
>
|
|
||||||
{this.buttonGroups.right.length && (
|
|
||||||
<RoundedButtonGroup
|
|
||||||
options={this.buttonGroups.right}
|
|
||||||
value={this.props.selectedRightSidePanel || ''}
|
|
||||||
onValueChanged={onPressRight}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _getCustomButtonComponent(button, activeButtons) {
|
|
||||||
const CustomComponent = button.CustomComponent;
|
|
||||||
const isValidComponent = typeof CustomComponent === 'function';
|
|
||||||
|
|
||||||
// Check if its a valid customComponent. Later on an CustomToolbarComponent interface could be implemented.
|
|
||||||
if (isValidComponent) {
|
|
||||||
const parentContext = this;
|
|
||||||
const activeButtonsIds = activeButtons.map(button => button.id);
|
|
||||||
const isActive = activeButtonsIds.includes(button.id);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<CustomComponent
|
|
||||||
parentContext={parentContext}
|
|
||||||
toolbarClickCallback={_handleToolbarButtonClick.bind(this)}
|
|
||||||
button={button}
|
|
||||||
key={button.id}
|
|
||||||
activeButtons={activeButtonsIds}
|
|
||||||
isActive={isActive}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function _getExpandableButtonComponent(button, activeButtons) {
|
|
||||||
// Iterate over button definitions and update `onClick` behavior
|
|
||||||
let activeCommand;
|
|
||||||
const childButtons = button.buttons.map(childButton => {
|
|
||||||
childButton.onClick = _handleToolbarButtonClick.bind(this, childButton);
|
|
||||||
|
|
||||||
if (activeButtons.map(button => button.id).indexOf(childButton.id) > -1) {
|
|
||||||
activeCommand = childButton.id;
|
|
||||||
}
|
|
||||||
|
|
||||||
return childButton;
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ExpandableToolMenu
|
|
||||||
key={button.id}
|
|
||||||
label={button.label}
|
|
||||||
icon={button.icon}
|
|
||||||
buttons={childButtons}
|
|
||||||
activeCommand={activeCommand}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _getDefaultButtonComponent(button, activeButtons) {
|
|
||||||
return (
|
|
||||||
<ToolbarButton
|
|
||||||
key={button.id}
|
|
||||||
label={button.label}
|
|
||||||
icon={button.icon}
|
|
||||||
onClick={_handleToolbarButtonClick.bind(this, button)}
|
|
||||||
isActive={activeButtons.map(button => button.id).includes(button.id)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* Determine which extension buttons should be showing, if they're
|
|
||||||
* active, and what their onClick behavior should be.
|
|
||||||
*/
|
|
||||||
function _getButtonComponents(toolbarButtons, activeButtons) {
|
|
||||||
const _this = this;
|
|
||||||
return toolbarButtons.map(button => {
|
|
||||||
const hasCustomComponent = button.CustomComponent;
|
|
||||||
const hasNestedButtonDefinitions = button.buttons && button.buttons.length;
|
|
||||||
|
|
||||||
if (hasCustomComponent) {
|
|
||||||
return _getCustomButtonComponent.call(_this, button, activeButtons);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (hasNestedButtonDefinitions) {
|
|
||||||
return _getExpandableButtonComponent.call(_this, button, activeButtons);
|
|
||||||
}
|
|
||||||
|
|
||||||
return _getDefaultButtonComponent.call(_this, button, activeButtons);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* TODO: DEPRECATE
|
|
||||||
* This is used exclusively in `extensions/cornerstone/src`
|
|
||||||
* We have better ways with new UI Services to trigger "builtin" behaviors
|
|
||||||
*
|
|
||||||
* A handy way for us to handle different button types. IE. firing commands for
|
|
||||||
* buttons, or initiation built in behavior.
|
|
||||||
*
|
|
||||||
* @param {*} button
|
|
||||||
* @param {*} evt
|
|
||||||
* @param {*} props
|
|
||||||
*/
|
|
||||||
function _handleToolbarButtonClick(button, evt, props) {
|
|
||||||
const { activeButtons } = this.state;
|
|
||||||
|
|
||||||
if (button.commandName) {
|
|
||||||
const options = Object.assign({ evt }, button.commandOptions);
|
|
||||||
commandsManager.runCommand(button.commandName, options);
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: Use Types ENUM
|
|
||||||
// TODO: We can update this to be a `getter` on the extension to query
|
|
||||||
// For the active tools after we apply our updates?
|
|
||||||
if (button.type === 'setToolActive') {
|
|
||||||
const toggables = activeButtons.filter(
|
|
||||||
({ options }) => options && !options.togglable
|
|
||||||
);
|
|
||||||
this.setState({ activeButtons: [...toggables, button] });
|
|
||||||
} else if (button.type === 'builtIn') {
|
|
||||||
this._handleBuiltIn(button);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
function _getVisibleToolbarButtons() {
|
|
||||||
const toolbarModules = extensionManager.modules[MODULE_TYPES.TOOLBAR];
|
|
||||||
const toolbarButtonDefinitions = [];
|
|
||||||
|
|
||||||
toolbarModules.forEach(extension => {
|
|
||||||
const { definitions, defaultContext } = extension.module;
|
|
||||||
definitions.forEach(definition => {
|
|
||||||
const context = definition.context || defaultContext;
|
|
||||||
|
|
||||||
if (this.props.activeContexts.includes(context)) {
|
|
||||||
toolbarButtonDefinitions.push(definition);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return toolbarButtonDefinitions;
|
|
||||||
}
|
|
||||||
|
|
||||||
function _handleBuiltIn(button) {
|
|
||||||
/* TODO: Keep cine button active until its unselected. */
|
|
||||||
const { dialog, t } = this.props;
|
|
||||||
const { dialogId } = this.state;
|
|
||||||
const { id, options } = button;
|
|
||||||
|
|
||||||
if (options.behavior === 'CINE') {
|
|
||||||
if (dialogId) {
|
|
||||||
dialog.dismiss({ id: dialogId });
|
|
||||||
this.setState(state => ({
|
|
||||||
dialogId: null,
|
|
||||||
activeButtons: [
|
|
||||||
...state.activeButtons.filter(button => button.id !== id),
|
|
||||||
],
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
const spacing = 20;
|
|
||||||
const { x, y } = document
|
|
||||||
.querySelector(`.ViewerMain`)
|
|
||||||
.getBoundingClientRect();
|
|
||||||
const newDialogId = dialog.create({
|
|
||||||
content: ConnectedCineDialog,
|
|
||||||
defaultPosition: {
|
|
||||||
x: x + spacing || 0,
|
|
||||||
y: y + spacing || 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
this.setState(state => ({
|
|
||||||
dialogId: newDialogId,
|
|
||||||
activeButtons: [...state.activeButtons, button],
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.behavior === 'DOWNLOAD_SCREEN_SHOT') {
|
|
||||||
commandsManager.runCommand('showDownloadViewportModal', {
|
|
||||||
title: t('Download High Quality Image'),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default withTranslation(['Common', 'ViewportDownloadForm'])(
|
|
||||||
withModal(withDialog(withAppContext(ToolbarRow)))
|
|
||||||
);
|
|
||||||
@ -1,400 +0,0 @@
|
|||||||
import React, { Component } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
|
|
||||||
import { MODULE_TYPES } from '@ohif/core';
|
|
||||||
import OHIF, { DICOMSR } from '@ohif/core';
|
|
||||||
import { withDialog } from '@ohif/ui';
|
|
||||||
import moment from 'moment';
|
|
||||||
import ConnectedHeader from './ConnectedHeader.js';
|
|
||||||
import ToolbarRow from './ToolbarRow.js';
|
|
||||||
import ConnectedStudyBrowser from './ConnectedStudyBrowser.js';
|
|
||||||
import ConnectedViewerMain from './ConnectedViewerMain.js';
|
|
||||||
import SidePanel from './../components/SidePanel.js';
|
|
||||||
import { extensionManager } from './../App.jsx';
|
|
||||||
|
|
||||||
// Contexts
|
|
||||||
import WhiteLabelingContext from '../context/WhiteLabelingContext.js';
|
|
||||||
import UserManagerContext from '../context/UserManagerContext';
|
|
||||||
import AppContext from '../context/AppContext';
|
|
||||||
|
|
||||||
import './Viewer.css';
|
|
||||||
|
|
||||||
class Viewer extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
studies: PropTypes.arrayOf(
|
|
||||||
PropTypes.shape({
|
|
||||||
StudyInstanceUID: PropTypes.string.isRequired,
|
|
||||||
StudyDate: PropTypes.string,
|
|
||||||
displaySets: PropTypes.arrayOf(
|
|
||||||
PropTypes.shape({
|
|
||||||
displaySetInstanceUID: PropTypes.string.isRequired,
|
|
||||||
SeriesDescription: PropTypes.string,
|
|
||||||
SeriesNumber: PropTypes.number,
|
|
||||||
InstanceNumber: PropTypes.number,
|
|
||||||
numImageFrames: PropTypes.number,
|
|
||||||
Modality: PropTypes.string.isRequired,
|
|
||||||
images: PropTypes.arrayOf(
|
|
||||||
PropTypes.shape({
|
|
||||||
getImageId: PropTypes.func.isRequired,
|
|
||||||
})
|
|
||||||
),
|
|
||||||
})
|
|
||||||
),
|
|
||||||
})
|
|
||||||
),
|
|
||||||
studyInstanceUIDs: PropTypes.array,
|
|
||||||
activeServer: PropTypes.shape({
|
|
||||||
type: PropTypes.string,
|
|
||||||
wadoRoot: PropTypes.string,
|
|
||||||
}),
|
|
||||||
onTimepointsUpdated: PropTypes.func,
|
|
||||||
onMeasurementsUpdated: PropTypes.func,
|
|
||||||
// window.store.getState().viewports.viewportSpecificData
|
|
||||||
viewports: PropTypes.object.isRequired,
|
|
||||||
// window.store.getState().viewports.activeViewportIndex
|
|
||||||
activeViewportIndex: PropTypes.number.isRequired,
|
|
||||||
isStudyLoaded: PropTypes.bool,
|
|
||||||
dialog: PropTypes.object,
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
const { activeServer } = this.props;
|
|
||||||
const server = Object.assign({}, activeServer);
|
|
||||||
|
|
||||||
OHIF.measurements.MeasurementApi.setConfiguration({
|
|
||||||
dataExchange: {
|
|
||||||
retrieve: DICOMSR.retrieveMeasurements,
|
|
||||||
store: DICOMSR.storeMeasurements,
|
|
||||||
},
|
|
||||||
server,
|
|
||||||
});
|
|
||||||
|
|
||||||
OHIF.measurements.TimepointApi.setConfiguration({
|
|
||||||
dataExchange: {
|
|
||||||
retrieve: this.retrieveTimepoints,
|
|
||||||
store: this.storeTimepoints,
|
|
||||||
remove: this.removeTimepoint,
|
|
||||||
update: this.updateTimepoint,
|
|
||||||
disassociate: this.disassociateStudy,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
state = {
|
|
||||||
isLeftSidePanelOpen: true,
|
|
||||||
isRightSidePanelOpen: false,
|
|
||||||
selectedRightSidePanel: '',
|
|
||||||
selectedLeftSidePanel: 'studies', // TODO: Don't hardcode this
|
|
||||||
thumbnails: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (this.props.dialog) {
|
|
||||||
this.props.dialog.dismissAll();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
retrieveTimepoints = filter => {
|
|
||||||
OHIF.log.info('retrieveTimepoints');
|
|
||||||
|
|
||||||
// Get the earliest and latest study date
|
|
||||||
let earliestDate = new Date().toISOString();
|
|
||||||
let latestDate = new Date().toISOString();
|
|
||||||
if (this.props.studies) {
|
|
||||||
latestDate = new Date('1000-01-01').toISOString();
|
|
||||||
this.props.studies.forEach(study => {
|
|
||||||
const StudyDate = moment(study.StudyDate, 'YYYYMMDD').toISOString();
|
|
||||||
if (StudyDate < earliestDate) {
|
|
||||||
earliestDate = StudyDate;
|
|
||||||
}
|
|
||||||
if (StudyDate > latestDate) {
|
|
||||||
latestDate = StudyDate;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Return a generic timepoint
|
|
||||||
return Promise.resolve([
|
|
||||||
{
|
|
||||||
timepointType: 'baseline',
|
|
||||||
timepointId: 'TimepointId',
|
|
||||||
studyInstanceUIDs: this.props.studyInstanceUIDs,
|
|
||||||
PatientID: filter.PatientID,
|
|
||||||
earliestDate,
|
|
||||||
latestDate,
|
|
||||||
isLocked: false,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
|
|
||||||
storeTimepoints = timepointData => {
|
|
||||||
OHIF.log.info('storeTimepoints');
|
|
||||||
return Promise.resolve();
|
|
||||||
};
|
|
||||||
|
|
||||||
updateTimepoint = (timepointData, query) => {
|
|
||||||
OHIF.log.info('updateTimepoint');
|
|
||||||
return Promise.resolve();
|
|
||||||
};
|
|
||||||
|
|
||||||
removeTimepoint = timepointId => {
|
|
||||||
OHIF.log.info('removeTimepoint');
|
|
||||||
return Promise.resolve();
|
|
||||||
};
|
|
||||||
|
|
||||||
disassociateStudy = (timepointIds, StudyInstanceUID) => {
|
|
||||||
OHIF.log.info('disassociateStudy');
|
|
||||||
return Promise.resolve();
|
|
||||||
};
|
|
||||||
|
|
||||||
onTimepointsUpdated = timepoints => {
|
|
||||||
if (this.props.onTimepointsUpdated) {
|
|
||||||
this.props.onTimepointsUpdated(timepoints);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onMeasurementsUpdated = measurements => {
|
|
||||||
if (this.props.onMeasurementsUpdated) {
|
|
||||||
this.props.onMeasurementsUpdated(measurements);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const { studies, isStudyLoaded } = this.props;
|
|
||||||
const { TimepointApi, MeasurementApi } = OHIF.measurements;
|
|
||||||
const currentTimepointId = 'TimepointId';
|
|
||||||
|
|
||||||
const timepointApi = new TimepointApi(currentTimepointId, {
|
|
||||||
onTimepointsUpdated: this.onTimepointsUpdated,
|
|
||||||
});
|
|
||||||
|
|
||||||
const measurementApi = new MeasurementApi(timepointApi, {
|
|
||||||
onMeasurementsUpdated: this.onMeasurementsUpdated,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.currentTimepointId = currentTimepointId;
|
|
||||||
this.timepointApi = timepointApi;
|
|
||||||
this.measurementApi = measurementApi;
|
|
||||||
|
|
||||||
if (studies) {
|
|
||||||
const PatientID = studies[0] && studies[0].PatientID;
|
|
||||||
|
|
||||||
timepointApi.retrieveTimepoints({ PatientID });
|
|
||||||
if (isStudyLoaded) {
|
|
||||||
this.measurementApi.retrieveMeasurements(PatientID, [
|
|
||||||
currentTimepointId,
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
this.setState({
|
|
||||||
thumbnails: _mapStudiesToThumbnails(studies),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
|
||||||
const { studies, isStudyLoaded } = this.props;
|
|
||||||
if (studies !== prevProps.studies) {
|
|
||||||
this.setState({
|
|
||||||
thumbnails: _mapStudiesToThumbnails(studies),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (isStudyLoaded && isStudyLoaded !== prevProps.isStudyLoaded) {
|
|
||||||
const PatientID = studies[0] && studies[0].PatientID;
|
|
||||||
const { currentTimepointId } = this;
|
|
||||||
|
|
||||||
this.timepointApi.retrieveTimepoints({ PatientID });
|
|
||||||
this.measurementApi.retrieveMeasurements(PatientID, [currentTimepointId]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
let VisiblePanelLeft, VisiblePanelRight;
|
|
||||||
const panelExtensions = extensionManager.modules[MODULE_TYPES.PANEL];
|
|
||||||
|
|
||||||
panelExtensions.forEach(panelExt => {
|
|
||||||
panelExt.module.components.forEach(comp => {
|
|
||||||
if (comp.id === this.state.selectedRightSidePanel) {
|
|
||||||
VisiblePanelRight = comp.component;
|
|
||||||
} else if (comp.id === this.state.selectedLeftSidePanel) {
|
|
||||||
VisiblePanelLeft = comp.component;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* HEADER */}
|
|
||||||
<WhiteLabelingContext.Consumer>
|
|
||||||
{whiteLabeling => (
|
|
||||||
<UserManagerContext.Consumer>
|
|
||||||
{userManager => (
|
|
||||||
<AppContext.Consumer>
|
|
||||||
{appContext => (
|
|
||||||
<ConnectedHeader
|
|
||||||
linkText={
|
|
||||||
appContext.appConfig.showStudyList
|
|
||||||
? 'Study List'
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
linkPath={
|
|
||||||
appContext.appConfig.showStudyList ? '/' : undefined
|
|
||||||
}
|
|
||||||
userManager={userManager}
|
|
||||||
>
|
|
||||||
{whiteLabeling &&
|
|
||||||
whiteLabeling.createLogoComponentFn &&
|
|
||||||
whiteLabeling.createLogoComponentFn(React)}
|
|
||||||
</ConnectedHeader>
|
|
||||||
)}
|
|
||||||
</AppContext.Consumer>
|
|
||||||
)}
|
|
||||||
</UserManagerContext.Consumer>
|
|
||||||
)}
|
|
||||||
</WhiteLabelingContext.Consumer>
|
|
||||||
|
|
||||||
{/* TOOLBAR */}
|
|
||||||
<ToolbarRow
|
|
||||||
isLeftSidePanelOpen={this.state.isLeftSidePanelOpen}
|
|
||||||
isRightSidePanelOpen={this.state.isRightSidePanelOpen}
|
|
||||||
selectedLeftSidePanel={
|
|
||||||
this.state.isLeftSidePanelOpen
|
|
||||||
? this.state.selectedLeftSidePanel
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
selectedRightSidePanel={
|
|
||||||
this.state.isRightSidePanelOpen
|
|
||||||
? this.state.selectedRightSidePanel
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
handleSidePanelChange={(side, selectedPanel) => {
|
|
||||||
const sideClicked = side && side[0].toUpperCase() + side.slice(1);
|
|
||||||
const openKey = `is${sideClicked}SidePanelOpen`;
|
|
||||||
const selectedKey = `selected${sideClicked}SidePanel`;
|
|
||||||
const updatedState = Object.assign({}, this.state);
|
|
||||||
|
|
||||||
const isOpen = updatedState[openKey];
|
|
||||||
const prevSelectedPanel = updatedState[selectedKey];
|
|
||||||
// RoundedButtonGroup returns `null` if selected button is clicked
|
|
||||||
const isSameSelectedPanel =
|
|
||||||
prevSelectedPanel === selectedPanel || selectedPanel === null;
|
|
||||||
|
|
||||||
updatedState[selectedKey] = selectedPanel || prevSelectedPanel;
|
|
||||||
|
|
||||||
const isClosedOrShouldClose = !isOpen || isSameSelectedPanel;
|
|
||||||
if (isClosedOrShouldClose) {
|
|
||||||
updatedState[openKey] = !updatedState[openKey];
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState(updatedState);
|
|
||||||
}}
|
|
||||||
studies={this.props.studies}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/*<ConnectedStudyLoadingMonitor studies={this.props.studies} />*/}
|
|
||||||
{/*<StudyPrefetcher studies={this.props.studies} />*/}
|
|
||||||
|
|
||||||
{/* VIEWPORTS + SIDEPANELS */}
|
|
||||||
<div className="FlexboxLayout">
|
|
||||||
{/* LEFT */}
|
|
||||||
<SidePanel from="left" isOpen={this.state.isLeftSidePanelOpen}>
|
|
||||||
{VisiblePanelLeft ? (
|
|
||||||
<VisiblePanelLeft
|
|
||||||
viewports={this.props.viewports}
|
|
||||||
studies={this.props.studies}
|
|
||||||
activeIndex={this.props.activeViewportIndex}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<ConnectedStudyBrowser
|
|
||||||
studies={this.state.thumbnails}
|
|
||||||
studyMetadata={this.props.studies}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</SidePanel>
|
|
||||||
|
|
||||||
{/* MAIN */}
|
|
||||||
<div className={classNames('main-content')}>
|
|
||||||
<ConnectedViewerMain
|
|
||||||
studies={this.props.studies}
|
|
||||||
isStudyLoaded={this.props.isStudyLoaded}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* RIGHT */}
|
|
||||||
<SidePanel from="right" isOpen={this.state.isRightSidePanelOpen}>
|
|
||||||
{VisiblePanelRight && (
|
|
||||||
<VisiblePanelRight
|
|
||||||
isOpen={this.state.isRightSidePanelOpen}
|
|
||||||
viewports={this.props.viewports}
|
|
||||||
studies={this.props.studies}
|
|
||||||
activeIndex={this.props.activeViewportIndex}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</SidePanel>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default withDialog(Viewer);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* What types are these? Why do we have "mapping" dropped in here instead of in
|
|
||||||
* a mapping layer?
|
|
||||||
*
|
|
||||||
* TODO[react]:
|
|
||||||
* - Add sorting of display sets
|
|
||||||
* - Add showStackLoadingProgressBar option
|
|
||||||
*
|
|
||||||
* @param {Study[]} studies
|
|
||||||
* @param {DisplaySet[]} studies[].displaySets
|
|
||||||
*/
|
|
||||||
const _mapStudiesToThumbnails = function(studies) {
|
|
||||||
return studies.map(study => {
|
|
||||||
const { StudyInstanceUID } = study;
|
|
||||||
|
|
||||||
const thumbnails = study.displaySets.map(displaySet => {
|
|
||||||
const {
|
|
||||||
displaySetInstanceUID,
|
|
||||||
SeriesDescription,
|
|
||||||
SeriesNumber,
|
|
||||||
InstanceNumber,
|
|
||||||
numImageFrames,
|
|
||||||
} = displaySet;
|
|
||||||
|
|
||||||
let imageId;
|
|
||||||
let altImageText;
|
|
||||||
|
|
||||||
if (displaySet.Modality && displaySet.Modality === 'SEG') {
|
|
||||||
// TODO: We want to replace this with a thumbnail showing
|
|
||||||
// the segmentation map on the image, but this is easier
|
|
||||||
// and better than what we have right now.
|
|
||||||
altImageText = 'SEG';
|
|
||||||
} else if (displaySet.images && displaySet.images.length) {
|
|
||||||
const imageIndex = Math.floor(displaySet.images.length / 2);
|
|
||||||
|
|
||||||
imageId = displaySet.images[imageIndex].getImageId();
|
|
||||||
} else {
|
|
||||||
altImageText = displaySet.Modality ? displaySet.Modality : 'UN';
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
imageId,
|
|
||||||
altImageText,
|
|
||||||
displaySetInstanceUID,
|
|
||||||
SeriesDescription,
|
|
||||||
SeriesNumber,
|
|
||||||
InstanceNumber,
|
|
||||||
numImageFrames,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
StudyInstanceUID,
|
|
||||||
thumbnails,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@ -1,151 +0,0 @@
|
|||||||
import React, { Component } from 'react';
|
|
||||||
import { metadata, utils } from '@ohif/core';
|
|
||||||
|
|
||||||
import ConnectedViewer from './ConnectedViewer.js';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { extensionManager } from './../App.jsx';
|
|
||||||
import Dropzone from 'react-dropzone';
|
|
||||||
import filesToStudies from '../lib/filesToStudies';
|
|
||||||
import './ViewerLocalFileData.css';
|
|
||||||
import { withTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
const { OHIFStudyMetadata } = metadata;
|
|
||||||
const { studyMetadataManager } = utils;
|
|
||||||
|
|
||||||
const dropZoneLinkDialog = (onDrop, i18n, dir) => {
|
|
||||||
return (
|
|
||||||
<Dropzone onDrop={onDrop} noDrag>
|
|
||||||
{({ getRootProps, getInputProps }) => (
|
|
||||||
<span {...getRootProps()} className="link-dialog">
|
|
||||||
{dir ? (
|
|
||||||
<span>
|
|
||||||
{i18n('Load folders')}
|
|
||||||
<input
|
|
||||||
{...getInputProps()}
|
|
||||||
webkitdirectory="true"
|
|
||||||
mozdirectory="true"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span>
|
|
||||||
{i18n('Load files')}
|
|
||||||
<input {...getInputProps()} />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</Dropzone>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const linksDialogMessage = (onDrop, i18n) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{i18n('Or click to ')}
|
|
||||||
{dropZoneLinkDialog(onDrop, i18n)}
|
|
||||||
{i18n(' or ')}
|
|
||||||
{dropZoneLinkDialog(onDrop, i18n, true)}
|
|
||||||
{i18n(' from dialog')}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
class ViewerLocalFileData extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
studies: PropTypes.array,
|
|
||||||
};
|
|
||||||
|
|
||||||
state = {
|
|
||||||
studies: null,
|
|
||||||
loading: false,
|
|
||||||
error: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
updateStudies = studies => {
|
|
||||||
// Render the viewer when the data is ready
|
|
||||||
studyMetadataManager.purge();
|
|
||||||
|
|
||||||
// Map studies to new format, update metadata manager?
|
|
||||||
const updatedStudies = studies.map(study => {
|
|
||||||
const studyMetadata = new OHIFStudyMetadata(
|
|
||||||
study,
|
|
||||||
study.StudyInstanceUID
|
|
||||||
);
|
|
||||||
const sopClassHandlerModules =
|
|
||||||
extensionManager.modules['sopClassHandlerModule'];
|
|
||||||
|
|
||||||
study.displaySets =
|
|
||||||
study.displaySets ||
|
|
||||||
studyMetadata.createDisplaySets(sopClassHandlerModules);
|
|
||||||
studyMetadata.setDisplaySets(study.displaySets);
|
|
||||||
|
|
||||||
studyMetadata.forEachDisplaySet(displayset => {
|
|
||||||
displayset.localFile = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
studyMetadataManager.add(studyMetadata);
|
|
||||||
|
|
||||||
return study;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
studies: updatedStudies,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const onDrop = async acceptedFiles => {
|
|
||||||
this.setState({ loading: true });
|
|
||||||
|
|
||||||
const studies = await filesToStudies(acceptedFiles);
|
|
||||||
const updatedStudies = this.updateStudies(studies);
|
|
||||||
|
|
||||||
if (!updatedStudies) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({ studies: updatedStudies, loading: false });
|
|
||||||
};
|
|
||||||
|
|
||||||
if (this.state.error) {
|
|
||||||
return <div>Error: {JSON.stringify(this.state.error)}</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dropzone onDrop={onDrop} noClick>
|
|
||||||
{({ getRootProps, getInputProps }) => (
|
|
||||||
<div {...getRootProps()} style={{ width: '100%', height: '100%' }}>
|
|
||||||
{this.state.studies ? (
|
|
||||||
<ConnectedViewer
|
|
||||||
studies={this.state.studies}
|
|
||||||
studyInstanceUIDs={
|
|
||||||
this.state.studies &&
|
|
||||||
this.state.studies.map(a => a.StudyInstanceUID)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className={'drag-drop-instructions'}>
|
|
||||||
<div className={'drag-drop-contents'}>
|
|
||||||
{this.state.loading ? (
|
|
||||||
<h3>{this.props.t('Loading...')}</h3>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<h3>
|
|
||||||
{this.props.t(
|
|
||||||
'Drag and Drop DICOM files here to load them in the Viewer'
|
|
||||||
)}
|
|
||||||
</h3>
|
|
||||||
<h4>{linksDialogMessage(onDrop, this.props.t)}</h4>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Dropzone>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default withTranslation('Common')(ViewerLocalFileData);
|
|
||||||
@ -1,193 +0,0 @@
|
|||||||
import './ViewerMain.css';
|
|
||||||
|
|
||||||
import { Component } from 'react';
|
|
||||||
import { ConnectedViewportGrid } from './../components/ViewportGrid/index.js';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import memoize from 'lodash/memoize';
|
|
||||||
import _values from 'lodash/values';
|
|
||||||
|
|
||||||
var values = memoize(_values);
|
|
||||||
|
|
||||||
class ViewerMain extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
activeViewportIndex: PropTypes.number.isRequired,
|
|
||||||
studies: PropTypes.array,
|
|
||||||
viewportSpecificData: PropTypes.object.isRequired,
|
|
||||||
layout: PropTypes.object.isRequired,
|
|
||||||
setViewportSpecificData: PropTypes.func.isRequired,
|
|
||||||
clearViewportSpecificData: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
displaySets: [],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
getDisplaySets(studies) {
|
|
||||||
const displaySets = [];
|
|
||||||
studies.forEach(study => {
|
|
||||||
study.displaySets.forEach(dSet => {
|
|
||||||
if (!dSet.plugin) {
|
|
||||||
dSet.plugin = 'cornerstone';
|
|
||||||
}
|
|
||||||
displaySets.push(dSet);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return displaySets;
|
|
||||||
}
|
|
||||||
|
|
||||||
findDisplaySet(studies, StudyInstanceUID, displaySetInstanceUID) {
|
|
||||||
const study = studies.find(study => {
|
|
||||||
return study.StudyInstanceUID === StudyInstanceUID;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!study) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
return study.displaySets.find(displaySet => {
|
|
||||||
return displaySet.displaySetInstanceUID === displaySetInstanceUID;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
// Add beforeUnload event handler to check for unsaved changes
|
|
||||||
//window.addEventListener('beforeunload', unloadHandlers.beforeUnload);
|
|
||||||
|
|
||||||
// Get all the display sets for the viewer studies
|
|
||||||
if (this.props.studies) {
|
|
||||||
const displaySets = this.getDisplaySets(this.props.studies);
|
|
||||||
this.setState({ displaySets }, this.fillEmptyViewportPanes);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
|
||||||
const prevViewportAmount = prevProps.layout.viewports.length;
|
|
||||||
const viewportAmount = this.props.layout.viewports.length;
|
|
||||||
const isVtk = this.props.layout.viewports.some(vp => !!vp.vtk);
|
|
||||||
|
|
||||||
if (
|
|
||||||
this.props.studies !== prevProps.studies ||
|
|
||||||
(viewportAmount !== prevViewportAmount && !isVtk)
|
|
||||||
) {
|
|
||||||
const displaySets = this.getDisplaySets(this.props.studies);
|
|
||||||
this.setState({ displaySets }, this.fillEmptyViewportPanes);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fillEmptyViewportPanes = () => {
|
|
||||||
// TODO: Here is the entry point for filling viewports on load.
|
|
||||||
const dirtyViewportPanes = [];
|
|
||||||
const { layout, viewportSpecificData } = this.props;
|
|
||||||
const { displaySets } = this.state;
|
|
||||||
|
|
||||||
if (!displaySets || !displaySets.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 0; i < layout.viewports.length; i++) {
|
|
||||||
const viewportPane = viewportSpecificData[i];
|
|
||||||
const isNonEmptyViewport =
|
|
||||||
viewportPane &&
|
|
||||||
viewportPane.StudyInstanceUID &&
|
|
||||||
viewportPane.displaySetInstanceUID;
|
|
||||||
|
|
||||||
if (isNonEmptyViewport) {
|
|
||||||
dirtyViewportPanes.push({
|
|
||||||
StudyInstanceUID: viewportPane.StudyInstanceUID,
|
|
||||||
displaySetInstanceUID: viewportPane.displaySetInstanceUID,
|
|
||||||
});
|
|
||||||
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const foundDisplaySet =
|
|
||||||
displaySets.find(
|
|
||||||
ds =>
|
|
||||||
!dirtyViewportPanes.some(
|
|
||||||
v => v.displaySetInstanceUID === ds.displaySetInstanceUID
|
|
||||||
)
|
|
||||||
) || displaySets[displaySets.length - 1];
|
|
||||||
|
|
||||||
dirtyViewportPanes.push(foundDisplaySet);
|
|
||||||
}
|
|
||||||
|
|
||||||
dirtyViewportPanes.forEach((vp, i) => {
|
|
||||||
if (vp && vp.StudyInstanceUID) {
|
|
||||||
this.setViewportData({
|
|
||||||
viewportIndex: i,
|
|
||||||
StudyInstanceUID: vp.StudyInstanceUID,
|
|
||||||
displaySetInstanceUID: vp.displaySetInstanceUID,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
setViewportData = ({
|
|
||||||
viewportIndex,
|
|
||||||
StudyInstanceUID,
|
|
||||||
displaySetInstanceUID,
|
|
||||||
}) => {
|
|
||||||
const displaySet = this.findDisplaySet(
|
|
||||||
this.props.studies,
|
|
||||||
StudyInstanceUID,
|
|
||||||
displaySetInstanceUID
|
|
||||||
);
|
|
||||||
|
|
||||||
this.props.setViewportSpecificData(viewportIndex, displaySet);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { viewportSpecificData } = this.props;
|
|
||||||
const viewportData = values(viewportSpecificData);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="ViewerMain">
|
|
||||||
{this.state.displaySets.length && (
|
|
||||||
<ConnectedViewportGrid
|
|
||||||
isStudyLoaded={this.props.isStudyLoaded}
|
|
||||||
studies={this.props.studies}
|
|
||||||
viewportData={viewportData}
|
|
||||||
setViewportData={this.setViewportData}
|
|
||||||
>
|
|
||||||
{/* Children to add to each viewport that support children */}
|
|
||||||
</ConnectedViewportGrid>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
// Clear the entire viewport specific data
|
|
||||||
const { viewportSpecificData } = this.props;
|
|
||||||
Object.keys(viewportSpecificData).forEach(viewportIndex => {
|
|
||||||
this.props.clearViewportSpecificData(viewportIndex);
|
|
||||||
});
|
|
||||||
|
|
||||||
// TODO: These don't have to be viewer specific?
|
|
||||||
// Could qualify for other routes?
|
|
||||||
// hotkeys.destroy();
|
|
||||||
|
|
||||||
// Remove beforeUnload event handler...
|
|
||||||
//window.removeEventListener('beforeunload', unloadHandlers.beforeUnload);
|
|
||||||
// Destroy the synchronizer used to update reference lines
|
|
||||||
//OHIF.viewer.updateImageSynchronizer.destroy();
|
|
||||||
// TODO: Instruct all plugins to clean up themselves
|
|
||||||
//
|
|
||||||
// Clear references to all stacks in the StackManager
|
|
||||||
//StackManager.clearStacks();
|
|
||||||
// @TypeSafeStudies
|
|
||||||
// Clears OHIF.viewer.Studies collection
|
|
||||||
//OHIF.viewer.Studies.removeAll();
|
|
||||||
// @TypeSafeStudies
|
|
||||||
// Clears OHIF.viewer.StudyMetadataList collection
|
|
||||||
//OHIF.viewer.StudyMetadataList.removeAll();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ViewerMain;
|
|
||||||
@ -1,375 +0,0 @@
|
|||||||
import React, { useState, useEffect, useContext } from 'react';
|
|
||||||
import { metadata, studies, utils, log } from '@ohif/core';
|
|
||||||
import usePrevious from '../customHooks/usePrevious';
|
|
||||||
|
|
||||||
import ConnectedViewer from './ConnectedViewer.js';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { extensionManager } from './../App.jsx';
|
|
||||||
import { useSnackbarContext } from '@ohif/ui';
|
|
||||||
|
|
||||||
const { OHIFStudyMetadata, OHIFSeriesMetadata } = metadata;
|
|
||||||
const { retrieveStudiesMetadata, deleteStudyMetadataPromise } = studies;
|
|
||||||
const { studyMetadataManager, makeCancelable } = utils;
|
|
||||||
|
|
||||||
// Contexts
|
|
||||||
import AppContext from '../context/AppContext';
|
|
||||||
|
|
||||||
const _promoteToFront = (list, value, searchMethod) => {
|
|
||||||
let response = [...list];
|
|
||||||
let promoted = false;
|
|
||||||
const index = response.findIndex(searchMethod.bind(undefined, value));
|
|
||||||
|
|
||||||
if (index > 0) {
|
|
||||||
const first = response.splice(index, 1);
|
|
||||||
response = [...first, ...response];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (index >= 0) {
|
|
||||||
promoted = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
promoted,
|
|
||||||
data: response,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Promote series to front if find found equivalent on filters object
|
|
||||||
* @param {Object} study - study reference to promote series against
|
|
||||||
* @param {Object} [filters] - Object containing filters to be applied
|
|
||||||
* @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
|
|
||||||
* @param {boolean} isFilterStrategy - if filtering by query param strategy ON
|
|
||||||
*/
|
|
||||||
const _promoteList = (study, studyMetadata, filters, isFilterStrategy) => {
|
|
||||||
let promoted = false;
|
|
||||||
// Promote only if no filter should be applied
|
|
||||||
if (!isFilterStrategy) {
|
|
||||||
_sortStudyDisplaySet(study, studyMetadata);
|
|
||||||
promoted = _promoteStudyDisplaySet(study, studyMetadata, filters);
|
|
||||||
}
|
|
||||||
|
|
||||||
return promoted;
|
|
||||||
};
|
|
||||||
|
|
||||||
const _promoteStudyDisplaySet = (study, studyMetadata, filters) => {
|
|
||||||
let promoted = false;
|
|
||||||
const queryParamsLength = Object.keys(filters).length;
|
|
||||||
const shouldPromoteToFront = queryParamsLength > 0;
|
|
||||||
|
|
||||||
if (shouldPromoteToFront) {
|
|
||||||
const { seriesInstanceUID } = filters;
|
|
||||||
|
|
||||||
const _seriesLookup = (valueToCompare, displaySet) => {
|
|
||||||
return displaySet.SeriesInstanceUID === valueToCompare;
|
|
||||||
};
|
|
||||||
const promotedResponse = _promoteToFront(
|
|
||||||
studyMetadata.getDisplaySets(),
|
|
||||||
seriesInstanceUID,
|
|
||||||
_seriesLookup
|
|
||||||
);
|
|
||||||
|
|
||||||
study.displaySets = promotedResponse.data;
|
|
||||||
promoted = promotedResponse.promoted;
|
|
||||||
}
|
|
||||||
|
|
||||||
return promoted;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Method to identify if query param (from url) was applied to given list
|
|
||||||
* @param {Object} study - study reference to promote series against
|
|
||||||
* @param {Object} [filters] - Object containing filters to be applied
|
|
||||||
* @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
|
|
||||||
* @param {boolean} isFilterStrategy - if filtering by query param strategy ON
|
|
||||||
*/
|
|
||||||
const _isQueryParamApplied = (study, filters = {}, isFilterStrategy) => {
|
|
||||||
const { seriesInstanceUID } = filters;
|
|
||||||
let applied = true;
|
|
||||||
// skip in case no filter or no toast manager
|
|
||||||
if (!seriesInstanceUID) {
|
|
||||||
return applied;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { series = [], displaySets = [] } = study;
|
|
||||||
const firstSeries = isFilterStrategy ? series[0] : displaySets[0];
|
|
||||||
|
|
||||||
if (!firstSeries || firstSeries.SeriesInstanceUID !== seriesInstanceUID) {
|
|
||||||
applied = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return applied;
|
|
||||||
};
|
|
||||||
const _showUserMessage = (queryParamApplied, message, dialog = {}) => {
|
|
||||||
if (queryParamApplied) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { show: showUserMessage = () => {} } = dialog;
|
|
||||||
showUserMessage({
|
|
||||||
message,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const _addSeriesToStudy = (studyMetadata, series) => {
|
|
||||||
const sopClassHandlerModules =
|
|
||||||
extensionManager.modules['sopClassHandlerModule'];
|
|
||||||
const study = studyMetadata.getData();
|
|
||||||
const seriesMetadata = new OHIFSeriesMetadata(series, study);
|
|
||||||
const existingSeries = studyMetadata.getSeriesByUID(series.SeriesInstanceUID);
|
|
||||||
if (existingSeries) {
|
|
||||||
studyMetadata.updateSeries(series.SeriesInstanceUID, seriesMetadata);
|
|
||||||
} else {
|
|
||||||
studyMetadata.addSeries(seriesMetadata);
|
|
||||||
}
|
|
||||||
|
|
||||||
studyMetadata.createAndAddDisplaySetsForSeries(
|
|
||||||
sopClassHandlerModules,
|
|
||||||
seriesMetadata
|
|
||||||
);
|
|
||||||
study.displaySets = studyMetadata.getDisplaySets();
|
|
||||||
_updateStudyMetadataManager(study, studyMetadata);
|
|
||||||
};
|
|
||||||
|
|
||||||
const _updateStudyMetadataManager = (study, studyMetadata) => {
|
|
||||||
const { StudyInstanceUID } = study;
|
|
||||||
|
|
||||||
if (!studyMetadataManager.get(StudyInstanceUID)) {
|
|
||||||
studyMetadataManager.add(studyMetadata);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const _updateStudyDisplaySets = (study, studyMetadata) => {
|
|
||||||
const sopClassHandlerModules =
|
|
||||||
extensionManager.modules['sopClassHandlerModule'];
|
|
||||||
|
|
||||||
if (!study.displaySets) {
|
|
||||||
study.displaySets = studyMetadata.createDisplaySets(sopClassHandlerModules);
|
|
||||||
}
|
|
||||||
|
|
||||||
studyMetadata.setDisplaySets(study.displaySets);
|
|
||||||
};
|
|
||||||
|
|
||||||
const _sortStudyDisplaySet = (study, studyMetadata) => {
|
|
||||||
studyMetadata.sortDisplaySets(study.displaySets);
|
|
||||||
};
|
|
||||||
|
|
||||||
function ViewerRetrieveStudyData({
|
|
||||||
server,
|
|
||||||
studyInstanceUIDs,
|
|
||||||
seriesInstanceUIDs,
|
|
||||||
clearViewportSpecificData,
|
|
||||||
}) {
|
|
||||||
// hooks
|
|
||||||
const [error, setError] = useState(false);
|
|
||||||
const [studies, setStudies] = useState([]);
|
|
||||||
const [isStudyLoaded, setIsStudyLoaded] = useState(false);
|
|
||||||
const snackbarContext = useSnackbarContext();
|
|
||||||
const { appConfig = {} } = useContext(AppContext);
|
|
||||||
const {
|
|
||||||
filterQueryParam: isFilterStrategy = false,
|
|
||||||
maxConcurrentMetadataRequests,
|
|
||||||
} = appConfig;
|
|
||||||
|
|
||||||
let cancelableSeriesPromises;
|
|
||||||
let cancelableStudiesPromises;
|
|
||||||
/**
|
|
||||||
* Callback method when study is totally loaded
|
|
||||||
* @param {object} study study loaded
|
|
||||||
* @param {object} studyMetadata studyMetadata for given study
|
|
||||||
* @param {Object} [filters] - Object containing filters to be applied
|
|
||||||
* @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
|
|
||||||
*/
|
|
||||||
const studyDidLoad = (study, studyMetadata, filters) => {
|
|
||||||
// User message
|
|
||||||
const promoted = _promoteList(
|
|
||||||
study,
|
|
||||||
studyMetadata,
|
|
||||||
filters,
|
|
||||||
isFilterStrategy
|
|
||||||
);
|
|
||||||
|
|
||||||
// Clear viewport to allow new promoted one to be displayed
|
|
||||||
if (promoted) {
|
|
||||||
clearViewportSpecificData(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
const isQueryParamApplied = _isQueryParamApplied(
|
|
||||||
study,
|
|
||||||
filters,
|
|
||||||
isFilterStrategy
|
|
||||||
);
|
|
||||||
// Show message in case not promoted neither filtered but should to
|
|
||||||
_showUserMessage(
|
|
||||||
isQueryParamApplied,
|
|
||||||
'Query parameters were not applied. Using original series list for given study.',
|
|
||||||
snackbarContext
|
|
||||||
);
|
|
||||||
|
|
||||||
setStudies([...studies, study]);
|
|
||||||
setIsStudyLoaded(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Method to process studies. It will update displaySet, studyMetadata, load remaining series, ...
|
|
||||||
* @param {Array} studiesData Array of studies retrieved from server
|
|
||||||
* @param {Object} [filters] - Object containing filters to be applied
|
|
||||||
* @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
|
|
||||||
*/
|
|
||||||
const processStudies = (studiesData, filters) => {
|
|
||||||
if (Array.isArray(studiesData) && studiesData.length > 0) {
|
|
||||||
// Map studies to new format, update metadata manager?
|
|
||||||
const studies = studiesData.map(study => {
|
|
||||||
const studyMetadata = new OHIFStudyMetadata(
|
|
||||||
study,
|
|
||||||
study.StudyInstanceUID
|
|
||||||
);
|
|
||||||
|
|
||||||
_updateStudyDisplaySets(study, studyMetadata);
|
|
||||||
_updateStudyMetadataManager(study, studyMetadata);
|
|
||||||
|
|
||||||
// Attempt to load remaning series if any
|
|
||||||
cancelableSeriesPromises[study.StudyInstanceUID] = makeCancelable(
|
|
||||||
loadRemainingSeries(studyMetadata)
|
|
||||||
)
|
|
||||||
.then(result => {
|
|
||||||
if (result && !result.isCanceled) {
|
|
||||||
studyDidLoad(study, studyMetadata, filters);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
if (error && !error.isCanceled) {
|
|
||||||
setError(true);
|
|
||||||
log.error(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return study;
|
|
||||||
});
|
|
||||||
|
|
||||||
setStudies(studies);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const forceRerender = () => setStudies(studies => [...studies]);
|
|
||||||
|
|
||||||
const loadRemainingSeries = async studyMetadata => {
|
|
||||||
const { seriesLoader } = studyMetadata.getData();
|
|
||||||
if (!seriesLoader) return;
|
|
||||||
|
|
||||||
const loadNextSeries = async () => {
|
|
||||||
if (!seriesLoader.hasNext()) return;
|
|
||||||
const series = await seriesLoader.next();
|
|
||||||
_addSeriesToStudy(studyMetadata, series);
|
|
||||||
forceRerender();
|
|
||||||
return loadNextSeries();
|
|
||||||
};
|
|
||||||
|
|
||||||
const concurrentRequestsAllowed =
|
|
||||||
maxConcurrentMetadataRequests || studyMetadata.getSeriesCount();
|
|
||||||
const promises = Array(concurrentRequestsAllowed)
|
|
||||||
.fill(null)
|
|
||||||
.map(loadNextSeries);
|
|
||||||
|
|
||||||
return await Promise.all(promises);
|
|
||||||
};
|
|
||||||
|
|
||||||
const loadStudies = async () => {
|
|
||||||
try {
|
|
||||||
const filters = {};
|
|
||||||
// Use the first, discard others
|
|
||||||
const seriesInstanceUID = seriesInstanceUIDs && seriesInstanceUIDs[0];
|
|
||||||
|
|
||||||
const retrieveParams = [server, studyInstanceUIDs];
|
|
||||||
|
|
||||||
if (seriesInstanceUID) {
|
|
||||||
filters.seriesInstanceUID = seriesInstanceUID;
|
|
||||||
// Query param filtering controlled by appConfig property
|
|
||||||
if (isFilterStrategy) {
|
|
||||||
retrieveParams.push(filters);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
cancelableStudiesPromises[studyInstanceUIDs] = makeCancelable(
|
|
||||||
retrieveStudiesMetadata(...retrieveParams)
|
|
||||||
)
|
|
||||||
.then(result => {
|
|
||||||
if (result && !result.isCanceled) {
|
|
||||||
processStudies(result, filters);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
if (error && !error.isCanceled) {
|
|
||||||
setError(true);
|
|
||||||
log.error(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
if (error) {
|
|
||||||
setError(true);
|
|
||||||
log.error(error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const purgeCancellablePromises = () => {
|
|
||||||
for (let studyInstanceUIDs in cancelableStudiesPromises) {
|
|
||||||
if ('cancel' in cancelableStudiesPromises[studyInstanceUIDs]) {
|
|
||||||
cancelableStudiesPromises[studyInstanceUIDs].cancel();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let studyInstanceUIDs in cancelableSeriesPromises) {
|
|
||||||
if ('cancel' in cancelableSeriesPromises[studyInstanceUIDs]) {
|
|
||||||
cancelableSeriesPromises[studyInstanceUIDs].cancel();
|
|
||||||
deleteStudyMetadataPromise(studyInstanceUIDs);
|
|
||||||
studyMetadataManager.remove(studyInstanceUIDs);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const prevStudyInstanceUIDs = usePrevious(studyInstanceUIDs);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const hasStudyInstanceUIDsChanged = !(
|
|
||||||
prevStudyInstanceUIDs &&
|
|
||||||
prevStudyInstanceUIDs.every(e => studyInstanceUIDs.includes(e))
|
|
||||||
);
|
|
||||||
|
|
||||||
if (hasStudyInstanceUIDsChanged) {
|
|
||||||
studyMetadataManager.purge();
|
|
||||||
purgeCancellablePromises();
|
|
||||||
}
|
|
||||||
}, [studyInstanceUIDs]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
cancelableSeriesPromises = {};
|
|
||||||
cancelableStudiesPromises = {};
|
|
||||||
loadStudies();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
purgeCancellablePromises();
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return <div>Error: {JSON.stringify(error)}</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ConnectedViewer
|
|
||||||
studies={studies}
|
|
||||||
isStudyLoaded={isStudyLoaded}
|
|
||||||
studyInstanceUIDs={studyInstanceUIDs}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
ViewerRetrieveStudyData.propTypes = {
|
|
||||||
studyInstanceUIDs: PropTypes.array.isRequired,
|
|
||||||
seriesInstanceUIDs: PropTypes.array,
|
|
||||||
server: PropTypes.object,
|
|
||||||
clearViewportSpecificData: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ViewerRetrieveStudyData;
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/**
|
|
||||||
* Finds displaySet by UID across all displaySets inside studyMetadata
|
|
||||||
* @param {Array} studyMetadata
|
|
||||||
* @param {string} displaySetInstanceUID
|
|
||||||
*/
|
|
||||||
export default function findDisplaySetByUID(
|
|
||||||
studyMetadata,
|
|
||||||
displaySetInstanceUID
|
|
||||||
) {
|
|
||||||
if (!Array.isArray(studyMetadata)) return null;
|
|
||||||
|
|
||||||
const allDisplaySets = studyMetadata.reduce((all, current) => {
|
|
||||||
let currentDisplaySet = [];
|
|
||||||
if (current && Array.isArray(current.displaySets)) {
|
|
||||||
currentDisplaySet = current.displaySets;
|
|
||||||
}
|
|
||||||
return all.concat(currentDisplaySet);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const bySetInstanceUID = ds =>
|
|
||||||
ds.displaySetInstanceUID === displaySetInstanceUID;
|
|
||||||
|
|
||||||
const displaySet = allDisplaySets.find(bySetInstanceUID);
|
|
||||||
return displaySet || null;
|
|
||||||
}
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
import findDisplaySetByUID from './findDisplaySetByUID';
|
|
||||||
|
|
||||||
describe('findDisplaySetByUID', () => {
|
|
||||||
test('returns null when studyMetadata isnt an array', () => {
|
|
||||||
const result = findDisplaySetByUID(undefined, 'hello');
|
|
||||||
expect(result).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('returns null when no match found', () => {
|
|
||||||
const result = findDisplaySetByUID([], 'no-match');
|
|
||||||
expect(result).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('it handles missing displaySet arrays', () => {
|
|
||||||
const expected = '9388-2291-a8fe';
|
|
||||||
const studyMetadata = [
|
|
||||||
{ displaySets: null },
|
|
||||||
{
|
|
||||||
displaySets: [{ displaySetInstanceUID: expected }],
|
|
||||||
},
|
|
||||||
null,
|
|
||||||
7,
|
|
||||||
];
|
|
||||||
const result = findDisplaySetByUID(studyMetadata, expected);
|
|
||||||
expect(result.displaySetInstanceUID).toBe(expected);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('returns correct displaySet by UID', () => {
|
|
||||||
const expected = '1234-5678';
|
|
||||||
const studyMetadata = [
|
|
||||||
{ displaySets: [{ displaySetInstanceUID: '0011-2239' }] },
|
|
||||||
{
|
|
||||||
displaySets: [
|
|
||||||
{ displaySetInstanceUID: '0392-2211' },
|
|
||||||
{ displaySetInstanceUID: expected },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{ displaySets: [{ displaySetInstanceUID: '3384-9933' }] },
|
|
||||||
];
|
|
||||||
const result = findDisplaySetByUID(studyMetadata, expected);
|
|
||||||
expect(result.displaySetInstanceUID).toBe(expected);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue
Block a user