hoist state for expanded studies; allow multiple open

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 (
     <StudyBrowser
       tabs={tabs}
       activeTabName={activeTabName}
+      expandedStudyInstanceUIDs={expandedStudyInstanceUIDs}
       onClickStudy={_handleStudyClick}
       onClickTab={clickedTabName => {
         setActiveTabName(clickedTabName);

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 (
           <React.Fragment key={studyInstanceUid}>
             <StudyItem
@@ -53,16 +53,12 @@ const StudyBrowser = ({
               numInstances={numInstances}
               modalities={modalities}
               trackedSeries={getTrackedSeries(displaySets)}
-              isActive={isActive}
+              isActive={isExpanded}
               onClick={() => {
-                setStudyActive(isActive ? null : studyInstanceUid);
-
-                if (onClickStudy) {
-                  onClickStudy(studyInstanceUid);
-                }
+                onClickStudy(studyInstanceUid);
               }}
             />
-            {isActive && displaySets && (
+            {isExpanded && displaySets && (
               <ThumbnailList
                 thumbnails={displaySets}
                 thumbnailActive={thumbnailActive}
@@ -125,6 +121,7 @@ StudyBrowser.propTypes = {
   onClickStudy: PropTypes.func,
   onClickThumbnail: PropTypes.func,
   activeTabName: PropTypes.string.isRequired,
+  expandedStudyInstanceUIDs: PropTypes.arrayOf(PropTypes.string).isRequired,
   tabs: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,