diff --git a/extensions/default/src/Panels/PanelStudyBrowser.jsx b/extensions/default/src/Panels/PanelStudyBrowser.jsx index 09a71d8df..6990e667e 100644 --- a/extensions/default/src/Panels/PanelStudyBrowser.jsx +++ b/extensions/default/src/Panels/PanelStudyBrowser.jsx @@ -1,10 +1,11 @@ -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; -// import { StudyBrowser, useImageViewer } from '@ohif/ui'; -import { DicomMetadataStore } from '@ohif/core'; -// This has to import from somewhere else... +/** + * + * @param {*} param0 + */ function PanelStudyBrowser({ DisplaySetService, getImageSrc, @@ -12,12 +13,14 @@ function PanelStudyBrowser({ requestDisplaySetCreationForStudy, dataSource, }) { + // Normally you nest the components so the tree isn't so deep, and the data + // doesn't have to have such an intense shape. This works well enough for now. // Tabs --> Studies --> DisplaySets --> Thumbnails const [{ StudyInstanceUIDs }, dispatch] = useImageViewer(); const [activeTabName, setActiveTabName] = useState('primary'); const [studyDisplayList, setStudyDisplayList] = useState([]); const [displaySets, setDisplaySets] = useState([]); - const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState(new Map()); + const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({}); // ~~ studyDisplayList useEffect(() => { @@ -63,15 +66,17 @@ function PanelStudyBrowser({ console.warn('~~ handleDisplaySetsAdded'); // First, launch requests for a thumbnail for the new display sets newDisplaySets.forEach(async dset => { + const newImageSrcEntry = {}; const imageIds = dataSource.getImageIdsForDisplaySet(dset); const imageId = imageIds[Math.floor(imageIds.length / 2)]; // When the image arrives, render it and store the result in the thumbnailImgSrcMap - const imageSrc = await getImageSrc(imageId); + newImageSrcEntry[dset.displaySetInstanceUID] = await getImageSrc(imageId); + console.log(`setting thumbnail for ${imageId}`); - setThumbnailImageSrcMap( - thumbnailImageSrcMap.set(dset.displaySetInstanceUID, imageSrc) - ); + setThumbnailImageSrcMap(prevState => { + return {...prevState, ...newImageSrcEntry} + }); }); } @@ -87,8 +92,6 @@ function PanelStudyBrowser({ DisplaySetService.subscribe( DisplaySetService.EVENTS.DISPLAY_SETS_CHANGED, changedDisplaySets => { - console.warn('DisplaySetService.EVENTS.DISPLAY_SETS_CHANGED', changedDisplaySets); - const mappedDisplaySets = _mapDisplaySets( changedDisplaySets, thumbnailImageSrcMap @@ -165,9 +168,8 @@ function _mapDataSourceStudies(studies) { } function _mapDisplaySets(displaySets, thumbnailImageSrcMap) { - console.warn('~~ setLocalDisplaySetsState'); return displaySets.map(ds => { - const imageSrc = thumbnailImageSrcMap.get(ds.displaySetInstanceUID); + const imageSrc = thumbnailImageSrcMap[ds.displaySetInstanceUID]; return { displaySetInstanceUID: ds.displaySetInstanceUID, description: ds.SeriesDescription,