diff --git a/extensions/default/src/Panels/PanelStudyBrowser.jsx b/extensions/default/src/Panels/PanelStudyBrowser.jsx index a3784859f..ea705cabc 100644 --- a/extensions/default/src/Panels/PanelStudyBrowser.jsx +++ b/extensions/default/src/Panels/PanelStudyBrowser.jsx @@ -18,6 +18,7 @@ function PanelStudyBrowser({ // Tabs --> Studies --> DisplaySets --> Thumbnails const [{ StudyInstanceUIDs }, dispatch] = useImageViewer(); const [activeTabName, setActiveTabName] = useState('primary'); + const [expandedStudyInstanceUIDs, setExpandedStudyInstanceUIDs] = useState([]); const [studyDisplayList, setStudyDisplayList] = useState([]); const [displaySets, setDisplaySets] = useState([]); const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState({}); @@ -130,16 +131,28 @@ function PanelStudyBrowser({ displaySets ); - // TODO: Should "expand" appropriate study (already handled by component?) // TODO: Should not fire this on "close" function _handleStudyClick(StudyInstanceUID) { - requestDisplaySetCreationForStudy(DisplaySetService, StudyInstanceUID); + const shouldCollapseStudy = expandedStudyInstanceUIDs.includes( + StudyInstanceUID + ); + const updatedExpandedStudyInstanceUIDs = shouldCollapseStudy + // eslint-disable-next-line prettier/prettier + ? [...expandedStudyInstanceUIDs.filter(stdyUid => stdyUid !== StudyInstanceUID)] + : [...expandedStudyInstanceUIDs, StudyInstanceUID]; + + setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs); + + if (!shouldCollapseStudy) { + requestDisplaySetCreationForStudy(DisplaySetService, StudyInstanceUID); + } } return ( { setActiveTabName(clickedTabName); diff --git a/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx b/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx index 3752dee75..8478cf3dc 100644 --- a/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx +++ b/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx @@ -21,11 +21,11 @@ const getTrackedSeries = displaySets => { const StudyBrowser = ({ tabs, activeTabName, + expandedStudyInstanceUIDs, onClickTab, onClickStudy, onClickThumbnail, }) => { - const [studyActive, setStudyActive] = useState(null); const [thumbnailActive, setThumbnailActive] = useState(null); const getTabContent = () => { @@ -44,7 +44,7 @@ const StudyBrowser = ({ modalities, displaySets, }) => { - const isActive = studyActive === studyInstanceUid; + const isExpanded = expandedStudyInstanceUIDs.includes(studyInstanceUid); return ( { - setStudyActive(isActive ? null : studyInstanceUid); - - if (onClickStudy) { - onClickStudy(studyInstanceUid); - } + onClickStudy(studyInstanceUid); }} /> - {isActive && displaySets && ( + {isExpanded && displaySets && (