Merge branch 'feat/v2-main' of https://github.com/OHIF/Viewers into fix/OHIF-37-thumbnailDoubleClick

This commit is contained in:
Rodrigo Antinarelli committed 2020-06-30 17:59:57 -03:00
commit 4b8dcef956
48 files changed
+1156 -363

No files matched your search

@@ -5,9 +5,6 @@ import { DicomMetadataStore, DICOMSR } from '@ohif/core';
import { useDebounce } from '@hooks';
import ActionButtons from './ActionButtons';
import { useTrackedMeasurements } from '../../getContextModule';
import cornerstoneTools from 'cornerstone-tools';
import cornerstone from 'cornerstone-core';
import dcmjs from 'dcmjs';
const DISPLAY_STUDY_SUMMARY_INITIAL_VALUE = {
key: undefined, //
@@ -24,7 +21,12 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
measurementChangeTimestamp,
200
);
const { MeasurementService } = servicesManager.services;
const {
MeasurementService,
UINotificationService,
UIDialogService,
DisplaySetService,
} = servicesManager.services;
const [
trackedMeasurements,
sendTrackedMeasurementsEvent,
@@ -34,9 +36,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
DISPLAY_STUDY_SUMMARY_INITIAL_VALUE
);
const [displayMeasurements, setDisplayMeasurements] = useState([]);
// TODO: measurements subscribtion
// Initial?
useEffect(() => {
const measurements = MeasurementService.getMeasurements();
const filteredMeasurements = measurements.filter(
@@ -105,7 +105,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
const activeMeasurementItem = 0;
const onExportClick = () => {
const exportReport = () => {
const measurements = MeasurementService.getMeasurements();
const trackedMeasurements = measurements.filter(
m =>
@@ -117,21 +117,50 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
DICOMSR.downloadReport(trackedMeasurements, dataSource);
};
const onCreateReportClick = () => {
const measurements = MeasurementService.getMeasurements();
const trackedMeasurements = measurements.filter(
m =>
trackedStudy === m.referenceStudyUID &&
trackedSeries.includes(m.referenceSeriesUID)
);
const createReport = async () => {
const loadingDialogId = UIDialogService.create({
showOverlay: true,
isDraggable: false,
centralize: true,
// TODO: Create a loading indicator component + zeplin design?
content: () => <div className="text-primary-active">Loading...</div>,
});
try {
const measurements = MeasurementService.getMeasurements();
const trackedMeasurements = measurements.filter(
m =>
trackedStudy === m.referenceStudyUID &&
trackedSeries.includes(m.referenceSeriesUID)
);
const dataSources = extensionManager.getDataSources();
// TODO -> Eventually deal with multiple dataSources.
// Would need some way of saying which one is the "push" dataSource
const dataSource = dataSources[0];
const dataSources = extensionManager.getDataSources();
// TODO -> Eventually deal with multiple dataSources.
// Would need some way of saying which one is the "push" dataSource
const dataSource = dataSources[0];
DICOMSR.storeMeasurements(trackedMeasurements, dataSource);
const naturalizedReport = await DICOMSR.storeMeasurements(
trackedMeasurements,
dataSource
);
DisplaySetService.makeDisplaySets([naturalizedReport], {
madeInClient: true,
});
UINotificationService.show({
title: 'STOW SR',
message: 'Measurements saved successfully',
type: 'success',
});
} catch (error) {
UINotificationService.show({
title: 'STOW SR',
message: error.message || 'Failed to store measurements',
type: 'error',
});
} finally {
UIDialogService.dismiss({ id: loadingDialogId });
}
};
return (
@@ -154,15 +183,24 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
</div>
<div className="flex justify-center p-4">
<ActionButtons
onExportClick={onExportClick}
onCreateReportClick={onCreateReportClick}
onExportClick={exportReport}
onCreateReportClick={createReport}
/>
</div>
</>
);
}
PanelMeasurementTableTracking.propTypes = {};
PanelMeasurementTableTracking.propTypes = {
servicesManager: PropTypes.shape({
services: PropTypes.shape({
MeasurementService: PropTypes.shape({
getMeasurements: PropTypes.func.isRequired,
VALUE_TYPES: PropTypes.object.isRequired,
}).isRequired,
}).isRequired,
}).isRequired,
};
// TODO: This could be a MeasurementService mapper
function _mapMeasurementToDisplay(measurement, index, types) {
@@ -182,9 +220,6 @@ function _mapMeasurementToDisplay(measurement, index, types) {
);
const { PixelSpacing, SeriesNumber, InstanceNumber } = instance;
console.log('mapping....', measurement);
console.log(instance);
return {
id: index + 1,
label: '(empty)', // 'Label short description',
@@ -213,15 +248,7 @@ function _getDisplayText(
instanceNumber,
types
) {
// TODO: determination of shape influences text
// Length: 'xx.x unit (S:x, I:x)'
// Rectangle: 'xx.x x xx.x unit (S:x, I:x)',
// Ellipse?
// Bidirectional?
// Freehand?
const { type, points } = measurement;
const hasPixelSpacing =
pixelSpacing !== undefined &&
Array.isArray(pixelSpacing) &&
@@ -232,18 +259,16 @@ function _getDisplayText(
const unit = hasPixelSpacing ? 'mm' : 'px';
switch (type) {
case types.POLYLINE:
case types.POLYLINE: {
const { length } = measurement;
const roundedLength = _round(length, 1);
return [
`${roundedLength} ${unit} (S:${seriesNumber}, I:${instanceNumber})`,
];
case types.BIDIRECTIONAL:
}
case types.BIDIRECTIONAL: {
const { shortestDiameter, longestDiameter } = measurement;
const roundedShortestDiameter = _round(shortestDiameter, 1);
const roundedLongestDiameter = _round(longestDiameter, 1);
@@ -251,16 +276,19 @@ function _getDisplayText(
`l: ${roundedLongestDiameter} ${unit} (S:${seriesNumber}, I:${instanceNumber})`,
`s: ${roundedShortestDiameter} ${unit}`,
];
case types.ELLIPSE:
}
case types.ELLIPSE: {
const { area } = measurement;
const roundedArea = _round(area, 1);
return [
`${roundedArea} ${unit}2 (S:${seriesNumber}, I:${instanceNumber})`,
];
case types.POINT:
}
case types.POINT: {
const { text } = measurement;
return [`${text} (S:${seriesNumber}, I:${instanceNumber})`];
}
}
}
@@ -37,6 +37,7 @@ function PanelStudyBrowserTracking({
const [studyDisplayList, setStudyDisplayList] = useState([]);
const [displaySets, setDisplaySets] = useState([]);
const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
const [jumpToDisplaySet, setJumpToDisplaySet] = useState(null);
const onClickThumbnailHandler = displaySetInstanceUID => {
viewportGridService.setDisplaysetForViewport({
@@ -149,18 +150,26 @@ function PanelStudyBrowserTracking({
// DISPLAY_SETS_ADDED returns an array of DisplaySets that were added
const SubscriptionDisplaySetsAdded = DisplaySetService.subscribe(
DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
newDisplaySets => {
newDisplaySets.forEach(async dSet => {
data => {
const { displaySetsAdded, options } = data;
displaySetsAdded.forEach(async dSet => {
const displaySetInstanceUID = dSet.displaySetInstanceUID;
const newImageSrcEntry = {};
const displaySet = DisplaySetService.getDisplaySetByUID(
dSet.displaySetInstanceUID
displaySetInstanceUID
);
if (options.madeInClient) {
setJumpToDisplaySet(displaySetInstanceUID);
}
const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
const imageId = imageIds[Math.floor(imageIds.length / 2)];
// TODO: Is it okay that imageIds are not returned here for SR displaysets?
if (imageId) {
// When the image arrives, render it and store the result in the thumbnailImgSrcMap
newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(
newImageSrcEntry[displaySetInstanceUID] = await getImageSrc(
imageId
);
setThumbnailImageSrcMap(prevState => {
@@ -227,6 +236,51 @@ function PanelStudyBrowserTracking({
}
}
useEffect(() => {
if (jumpToDisplaySet) {
// Get element by displaySetInstanceUID
const displaySetInstanceUID = jumpToDisplaySet;
const element = document.getElementById(
`thumbnail-${displaySetInstanceUID}`
);
if (element && typeof element.scrollIntoView === 'function') {
// TODO: Any way to support IE here?
element.scrollIntoView({ behavior: 'smooth' });
setJumpToDisplaySet(null);
}
}
}, [jumpToDisplaySet, expandedStudyInstanceUIDs, activeTabName]);
useEffect(() => {
if (!jumpToDisplaySet) {
return;
}
const displaySetInstanceUID = jumpToDisplaySet;
// Set the activeTabName and expand the study
const thumbnailLocation = _findTabAndStudyOfDisplaySet(
displaySetInstanceUID,
tabs
);
if (!thumbnailLocation) {
console.warn('jumpToThumbnail: displaySet thumbnail not found.');
return;
}
const { tabName, StudyInstanceUID } = thumbnailLocation;
setActiveTabName(tabName);
const studyExpanded = expandedStudyInstanceUIDs.includes(StudyInstanceUID);
if (!studyExpanded) {
const updatedExpandedStudyInstanceUIDs = [
...expandedStudyInstanceUIDs,
StudyInstanceUID,
];
setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
}
}, [jumpToDisplaySet]);
return (
<StudyBrowser
tabs={tabs}
@@ -306,8 +360,11 @@ function _mapDisplaySets(
const firstViewportIndexWithMatchingDisplaySetUid = viewports.findIndex(
vp => vp.displaySetInstanceUID === ds.displaySetInstanceUID
);
const viewportIdentificator =
_viewportLabels[firstViewportIndexWithMatchingDisplaySetUid] || '';
viewports.length > 1
? _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid]
: '';
const array =
componentType === 'thumbnailTracked'
@@ -413,3 +470,24 @@ function _createStudyBrowserTabs(
return tabs;
}
function _findTabAndStudyOfDisplaySet(displaySetInstanceUID, tabs) {
for (let t = 0; t < tabs.length; t++) {
const { studies } = tabs[t];
for (let s = 0; s < studies.length; s++) {
const { displaySets } = studies[s];
for (let d = 0; d < displaySets.length; d++) {
const displaySet = displaySets[d];
if (displaySet.displaySetInstanceUID === displaySetInstanceUID) {
return {
tabName: tabs[t].name,
StudyInstanceUID: studies[s].studyInstanceUid,
};
}
}
}
}
}