109 lines
2.7 KiB
JavaScript
109 lines
2.7 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import ConnectedStudyBrowser from './ConnectedStudyBrowser.js';
|
|
import ConnectedViewerMain from './ConnectedViewerMain.js';
|
|
import ConnectedMeasurementTable from './ConnectedMeasurementTable';
|
|
import './FlexboxLayout.css';
|
|
|
|
class FlexboxLayout extends Component {
|
|
static propTypes = {
|
|
studies: PropTypes.array.isRequired,
|
|
leftSidebarOpen: PropTypes.bool.isRequired,
|
|
rightSidebarOpen: PropTypes.bool.isRequired,
|
|
};
|
|
|
|
state = {
|
|
studiesForBrowser: [],
|
|
};
|
|
|
|
componentDidMount() {
|
|
const studiesForBrowser = this.getStudiesForBrowser();
|
|
|
|
this.setState({
|
|
studiesForBrowser,
|
|
});
|
|
}
|
|
|
|
getStudiesForBrowser = () => {
|
|
const { studies } = this.props;
|
|
|
|
// TODO[react]:
|
|
// - Add sorting of display sets
|
|
// - Add useMiddleSeriesInstanceAsThumbnail
|
|
// - Add showStackLoadingProgressBar option
|
|
return studies.map(study => {
|
|
const { studyInstanceUid } = study;
|
|
|
|
const thumbnails = study.displaySets.map(displaySet => {
|
|
const {
|
|
displaySetInstanceUid,
|
|
seriesDescription,
|
|
seriesNumber,
|
|
instanceNumber,
|
|
numImageFrames,
|
|
} = displaySet;
|
|
|
|
let imageId;
|
|
|
|
if (displaySet.images && displaySet.images.length) {
|
|
imageId = displaySet.images[0].getImageId();
|
|
}
|
|
|
|
return {
|
|
imageId,
|
|
displaySetInstanceUid,
|
|
seriesDescription,
|
|
seriesNumber,
|
|
instanceNumber,
|
|
numImageFrames,
|
|
};
|
|
});
|
|
|
|
return {
|
|
studyInstanceUid,
|
|
thumbnails,
|
|
};
|
|
});
|
|
};
|
|
|
|
render() {
|
|
let mainContentClassName = 'main-content';
|
|
if (this.props.leftSidebarOpen) {
|
|
mainContentClassName += ' sidebar-left-open';
|
|
}
|
|
|
|
if (this.props.rightSidebarOpen) {
|
|
mainContentClassName += ' sidebar-right-open';
|
|
}
|
|
|
|
// TODO[react]: Make ConnectedMeasurementTable extension with state.timepointManager
|
|
return (
|
|
<div className="FlexboxLayout">
|
|
<div
|
|
className={
|
|
this.props.leftSidebarOpen
|
|
? 'sidebar-menu sidebar-left sidebar-open'
|
|
: 'sidebar-menu sidebar-left'
|
|
}
|
|
>
|
|
<ConnectedStudyBrowser studies={this.state.studiesForBrowser} />
|
|
</div>
|
|
<div className={mainContentClassName}>
|
|
<ConnectedViewerMain studies={this.props.studies} />
|
|
</div>
|
|
<div
|
|
className={
|
|
this.props.rightSidebarOpen
|
|
? 'sidebar-menu sidebar-right sidebar-open'
|
|
: 'sidebar-menu sidebar-right'
|
|
}
|
|
>
|
|
<ConnectedMeasurementTable />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default FlexboxLayout;
|