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

map is not reactive

Browse Source
This commit is contained in:
dannyrb 2020-05-21 20:51:48 -04:00
parent f87d18936e
commit 23a94251fc
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,11 @@
import React, { useState, useEffect, useCallback } from 'react'; import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
//
import { StudyBrowser, useImageViewer } from '@ohif/ui'; import { StudyBrowser, useImageViewer } from '@ohif/ui';
import { DicomMetadataStore } from '@ohif/core';
// This has to import from somewhere else...
/**
*
* @param {*} param0
*/
function PanelStudyBrowser({ function PanelStudyBrowser({
DisplaySetService, DisplaySetService,
getImageSrc, getImageSrc,
@ -12,12 +13,14 @@ function PanelStudyBrowser({
requestDisplaySetCreationForStudy, requestDisplaySetCreationForStudy,
dataSource, 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 // Tabs --> Studies --> DisplaySets --> Thumbnails
const [{ StudyInstanceUIDs }, dispatch] = useImageViewer(); const [{ StudyInstanceUIDs }, dispatch] = useImageViewer();
const [activeTabName, setActiveTabName] = useState('primary'); const [activeTabName, setActiveTabName] = useState('primary');
const [studyDisplayList, setStudyDisplayList] = useState([]); const [studyDisplayList, setStudyDisplayList] = useState([]);
const [displaySets, setDisplaySets] = useState([]); const [displaySets, setDisplaySets] = useState([]);
const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState(new Map()); const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({});
// ~~ studyDisplayList // ~~ studyDisplayList
useEffect(() => { useEffect(() => {
@ -63,15 +66,17 @@ function PanelStudyBrowser({
console.warn('~~ handleDisplaySetsAdded'); console.warn('~~ handleDisplaySetsAdded');
// First, launch requests for a thumbnail for the new display sets // First, launch requests for a thumbnail for the new display sets
newDisplaySets.forEach(async dset => { newDisplaySets.forEach(async dset => {
const newImageSrcEntry = {};
const imageIds = dataSource.getImageIdsForDisplaySet(dset); const imageIds = dataSource.getImageIdsForDisplaySet(dset);
const imageId = imageIds[Math.floor(imageIds.length / 2)]; const imageId = imageIds[Math.floor(imageIds.length / 2)];
// When the image arrives, render it and store the result in the thumbnailImgSrcMap // 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( setThumbnailImageSrcMap(prevState => {
thumbnailImageSrcMap.set(dset.displaySetInstanceUID, imageSrc) return {...prevState, ...newImageSrcEntry}
); });
}); });
} }
@ -87,8 +92,6 @@ function PanelStudyBrowser({
DisplaySetService.subscribe( DisplaySetService.subscribe(
DisplaySetService.EVENTS.DISPLAY_SETS_CHANGED, DisplaySetService.EVENTS.DISPLAY_SETS_CHANGED,
changedDisplaySets => { changedDisplaySets => {
console.warn('DisplaySetService.EVENTS.DISPLAY_SETS_CHANGED', changedDisplaySets);
const mappedDisplaySets = _mapDisplaySets( const mappedDisplaySets = _mapDisplaySets(
changedDisplaySets, changedDisplaySets,
thumbnailImageSrcMap thumbnailImageSrcMap
@ -165,9 +168,8 @@ function _mapDataSourceStudies(studies) {
} }
function _mapDisplaySets(displaySets, thumbnailImageSrcMap) { function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
console.warn('~~ setLocalDisplaySetsState');
return displaySets.map(ds => { return displaySets.map(ds => {
const imageSrc = thumbnailImageSrcMap.get(ds.displaySetInstanceUID); const imageSrc = thumbnailImageSrcMap[ds.displaySetInstanceUID];
return { return {
displaySetInstanceUID: ds.displaySetInstanceUID, displaySetInstanceUID: ds.displaySetInstanceUID,
description: ds.SeriesDescription, description: ds.SeriesDescription,