othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

OHIF-198 - Jump to thumbnail when a new displaySet is added (#1834)

Browse Source 
* Viewport letter only in multi-viewport layout.

* If SliceThickness not available print N/A

* Create displaySet in local session on SR generation.

* Jump to thumbnail when a new displaySet is added with the madeInClient property.

* Check if scrollIntoView exists.
This commit is contained in:
James Petts 2020-06-30 16:27:35 +01:00 committed by GitHub
parent eb8f3a63f2
commit 2c11609c55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 113 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
extensions/default/src/Panels/PanelStudyBrowser.jsx
View File

@ -28,6 +28,8 @@ function PanelStudyBrowser({
const [displaySets, setDisplaySets] = useState([]);
const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
console.log(DisplaySetService);
// ~~ studyDisplayList
useEffect(() => {
// Fetch all studies for the patient in each primary study
@ -98,8 +100,9 @@ function PanelStudyBrowser({
// 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 } = data;
displaySetsAdded.forEach(async dSet => {
const newImageSrcEntry = {};
const displaySet = DisplaySetService.getDisplaySetByUID(
dSet.displaySetInstanceUID

5
extensions/dicom-sr/src/getSopClassHandlerModule.js
View File

@ -103,10 +103,11 @@ function _getDisplaySetsFromSeries(
// Subscribe to new displaySets as the source may come in after.
DisplaySetService.subscribe(
DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
newDisplaySets => {
data => {
const { displaySetsAdded } = data;
// If there are still some measurements that have not yet been loaded into cornerstone,
// See if we can load them onto any of the new displaySets.
newDisplaySets.forEach(newDisplaySet => {
displaySetsAdded.forEach(newDisplaySet => {
_checkIfCanAddMeasurementsToDisplaySet(
displaySet,
newDisplaySet,

6
extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js
View File

@ -117,7 +117,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
DICOMSR.downloadReport(trackedMeasurements, dataSource);
};
const createReport = () => {
const createReport = async () => {
const measurements = MeasurementService.getMeasurements();
const trackedMeasurements = measurements.filter(
m =>
@ -134,7 +134,9 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
trackedMeasurements,
dataSource,
naturalizedReport => {
DisplaySetService.makeDisplaySets([naturalizedReport]);
DisplaySetService.makeDisplaySets([naturalizedReport], {
madeInClient: true,
});
}
);
};

83
extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx
View File

@ -34,6 +34,7 @@ function PanelStudyBrowserTracking({
const [studyDisplayList, setStudyDisplayList] = useState([]);
const [displaySets, setDisplaySets] = useState([]);
const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
const [jumpToDisplaySet, setJumpToDisplaySet] = useState(null);
// TODO: Should this be somewhere else? Feels more like a mode "lifecycle" setup/destroy?
useEffect(() => {
@ -136,18 +137,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 => {
@ -214,6 +223,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}
@ -401,3 +455,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,
};
}
}
}
}
}

13
platform/core/src/services/DisplaySetService/DisplaySetService.js
View File

@ -52,7 +52,7 @@ export default class DisplaySetService {
displaySet => displaySet.displaySetInstanceUID === displaySetInstanceUid
);
makeDisplaySets = (input, batch = false) => {
makeDisplaySets = (input, { batch = false, madeInClient = false } = {}) => {
if (!input || !input.length) {
throw new Error('No instances were provided.');
}
@ -78,11 +78,20 @@ export default class DisplaySetService {
displaySetsAdded = displaySets;
}
const options = {};
if (madeInClient) {
options.madeInClient = true;
}
// TODO: This is tricky. How do we know we're not resetting to the same/existing DSs?
// TODO: This is likely run anytime we touch DicomMetadataStore. How do we prevent uneccessary broadcasts?
if (displaySetsAdded && displaySetsAdded.length) {
this._broadcastEvent(EVENTS.DISPLAY_SETS_ADDED, displaySetsAdded);
this._broadcastEvent(EVENTS.DISPLAY_SETS_CHANGED, this.activeDisplaySets);
this._broadcastEvent(EVENTS.DISPLAY_SETS_ADDED, {
displaySetsAdded,
options,
});
}
};

2
platform/ui/src/components/Thumbnail/Thumbnail.jsx
View File

@ -9,6 +9,7 @@ import { Icon } from '@ohif/ui';
*
*/
const Thumbnail = ({
displaySetInstanceUID,
className,
imageSrc,
imageAltText,
@ -36,6 +37,7 @@ const Thumbnail = ({
className,
'flex flex-col flex-1 px-3 mb-8 cursor-pointer outline-none'
)}
id={`thumbnail-${displaySetInstanceUID}`}
onClick={onClick}
onKeyDown={onClick}
role="button"

3
platform/ui/src/components/ThumbnailList/ThumbnailList.jsx
View File

@ -33,6 +33,7 @@ const ThumbnailList = ({
return (
<Thumbnail
key={displaySetInstanceUID}
displaySetInstanceUID={displaySetInstanceUID}
dragData={dragData}
description={description}
seriesNumber={seriesNumber}
@ -48,6 +49,7 @@ const ThumbnailList = ({
return (
<ThumbnailTracked
key={displaySetInstanceUID}
displaySetInstanceUID={displaySetInstanceUID}
dragData={dragData}
description={description}
seriesNumber={seriesNumber}
@ -65,6 +67,7 @@ const ThumbnailList = ({
return (
<ThumbnailNoImage
key={displaySetInstanceUID}
displaySetInstanceUID={displaySetInstanceUID}
dragData={dragData}
modality={modality}
seriesDate={seriesDate}

5
platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.jsx
View File

@ -1,10 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useDrag } from 'react-dnd';
import { Icon } from '@ohif/ui';
const ThumbnailNoImage = ({
displaySetInstanceUID,
description,
seriesDate,
modality,
@ -21,7 +23,8 @@ const ThumbnailNoImage = ({
return (
<div
ref={drag}
className="flex flex-row flex-1 px-4 py-3 cursor-pointer"
className={'flex flex-row flex-1 px-4 py-3 cursor-pointer'}
id={`thumbnail-${displaySetInstanceUID}`}
onClick={onClick}
onKeyDown={onClick}
role="button"

2
platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
View File

@ -5,6 +5,7 @@ import classnames from 'classnames';
import { Icon, Thumbnail, Tooltip } from '@ohif/ui';
const ThumbnailTracked = ({
displaySetInstanceUID,
className,
imageSrc,
imageAltText,
@ -26,6 +27,7 @@ const ThumbnailTracked = ({
'flex flex-row flex-1 px-3 py-2 cursor-pointer outline-none',
className
)}
id={`thumbnail-${displaySetInstanceUID}`}
>
<div className="flex flex-col items-center flex-2">
<div