Still broken, but app runs

extensions/cornerstone/src/OHIFCornerstoneViewport.js

@@ -78,7 +78,6 @@ class OHIFCornerstoneViewport extends Component {
   }
 
   getViewportData = async displaySet => {
-    debugger;
     let viewportData;
 
     const { dataSource } = this.props;

extensions/default/src/Panels/PanelStudyBrowser.jsx

@@ -7,63 +7,106 @@ import { dicomMetadataStore } from '@ohif/core';
 function PanelStudyBrowser({ servicesManager, getImageSrc, getStudiesByPatientId, dataSource }) {
   console.warn('StudyBrowserPanel rerender');
   const [activeTabName, setActiveTabName] = useState('primary');
-  const [studyData, setStudyData] = useState([]);
+
+  const { DisplaySetService } = servicesManager.services;
+
+  const _createInitialState = (displaySets) => {
+    // If no study data exists yet (i.e. this is initial load):
+    // - Use the current DisplaySetService state to create the initial StudyData
+    // - Launch a QIDO request for related studies
+    const currentDisplaySets = DisplaySetService.activeDisplaySets;
+    if (!currentDisplaySets || !currentDisplaySets.length) {
+      return;
+    }
+
+    const mappedStudiesFromInstances = _getMappedStudiesFromDisplaySets(
+      currentDisplaySets
+    );
+
+    setStudyData(mappedStudiesFromInstances);
+
+    const displaySet = displaySets[0];
+    const study = dicomMetadataStore.getStudy(
+      displaySet.StudyInstanceUID
+    );
+    const instance = study.series[0].instances[0];
+    const PatientID = instance.PatientID;
+    getStudiesByPatientId(PatientID).then(studiesForPatient => {
+      const mappedStudiesFromDataSource = _mapDataSourceStudies(
+        studiesForPatient
+      );
+      const merged = _mergeStudyDataAndDataSourceStudies(
+        studyData,
+        mappedStudiesFromDataSource,
+      );
+
+      setStudyData(merged);
+    });
+  }
+
+  // In case display sets were added before the component was created,
+  // initialize the state from the current state of the DisplaySetService
+  const currentDisplaySets = DisplaySetService.activeDisplaySets;
+  const mappedStudiesFromInstances = _getMappedStudiesFromDisplaySets(
+    currentDisplaySets
+  );
+  const [studyData, setStudyData] = useState(mappedStudiesFromInstances);
+
+  if (!studyData.length) {
+    _createInitialState(currentDisplaySets);
+  }
+
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState(new Map());
   const updateThumbnailMap = (k, v) => {
     setThumbnailImageSrcMap(thumbnailImageSrcMap.set(k, v));
   };
 
-  const { DisplaySetService } = servicesManager.services;
+  const handleDisplaySetsAdded = displaySets => {
-  const handleDisplaySetSubscription = useCallback(displaySets => {
+    // On initial load
-    if (!displaySets) {
+    // 1. DisplaySets are added for the primary studies, which are used to create
-      return;
+    //    the initial 'StudyData' to be displayed in the browser
-    }
+    // 2. Requests for thumbnails are made for each display set, which
+    //    resolve asynchronously and update thumbnailImageSrcMap
+    // 3. QIDO-RS call is made to retrieve StudyData for related studies, which
+    //    resolves later and is merged into StudyData
+    //
+    // Later, if another study is loaded
+    // 1. Display sets are added again, triggering requests for thumbnails
+    // 2. StudyData is updated from any new information provided by the series-level requests
 
-    if (getImageSrc) {
+    // First, launch requests for a thumbnail for the new display sets
-      Object.keys(displaySets).forEach(StudyInstanceUid => {
+    displaySets.forEach(dset => {
-        const dSets = displaySets[StudyInstanceUid];
-        dSets.forEach(async (dset) => {
       const uid = dset.displaySetInstanceUID;
       const imageIds = dataSource.getImageIdsForDisplaySet(dset);
       const imageId = imageIds[Math.floor(imageIds.length / 2)];
-          const imageSrc = await getImageSrc(imageId);
 
-          updateThumbnailMap(uid, imageSrc);
+      // When the image arrives, render it and store the result in the thumbnailImgSrcMap
+      getImageSrc(imageId).then(imageSrc => updateThumbnailMap(uid, imageSrc));
     });
-      })
-    }
 
-    // TODO: This isn't really the 'first'
+    // Does any studyData already exist?
-    const firstStudyInstanceUID = Object.keys(displaySets)[0];
+    if (studyData.length) {
-    const firstStudy = dicomMetadataStore.getStudy(
+      // If it does, map the new display set data and merge it into the local state
-      firstStudyInstanceUID
+      // for display
-    );
-    const firstInstance = firstStudy.series[0].instances[0];
-    const PatientID = firstInstance.PatientID;
-    //
-    async function getData() {
-      const studiesForPatient = await getStudiesByPatientId(PatientID);
-      const mappedStudiesFromDataSource = _mapDataSourceStudies(
-        studiesForPatient
-      );
       const mappedStudiesFromInstances = _getMappedStudiesFromDisplaySets(
         displaySets
       );
-      const ourFinalFormIGuess = _mergeDataSourceAndInstanceStudies(
+
-        mappedStudiesFromDataSource,
+      const merged = _mergeStudyDataAndInstanceStudies(
-        mappedStudiesFromInstances
+        studyData,
+        mappedStudiesFromInstances,
       );
 
-      setStudyData(ourFinalFormIGuess);
+      setStudyData(merged);
+    } else {
+      _createInitialState(displaySets)
     }
-
+  };
-    getData();
-  });
 
   useEffect(() => {
     const { unsubscribe } = DisplaySetService.subscribe(
-      DisplaySetService.EVENTS.DISPLAY_SET_ADDED,
+      DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
-      handleDisplaySetSubscription
+      handleDisplaySetsAdded
     );
 
     return unsubscribe;
@@ -175,13 +218,14 @@ function _mapDataSourceStudies(studies) {
  * Iterates over displaysets and creates mapped studies from
  * instance metadata.
  *
- * @param {*} displaySetsPerStudy
+ * @param {*} displaySets
  */
-function _getMappedStudiesFromDisplaySets(displaySetsPerStudy) {
+function _getMappedStudiesFromDisplaySets(displaySets) {
-  const studiesFromInstanceData = {};
+  if (!displaySets) {
+    return [];
+  }
 
-  Object.keys(displaySetsPerStudy).forEach(StudyInstanceUID => {
+  const studiesFromInstanceData = {};
-    const displaySets = displaySetsPerStudy[StudyInstanceUID];
 
   displaySets.forEach(ds => {
     const displaySet = {
@@ -207,39 +251,37 @@ function _getMappedStudiesFromDisplaySets(displaySetsPerStudy) {
     const modalitiesSet = mappedStudy.modalitiesSet;
     mappedStudy.modalities = Array.from(modalitiesSet).join(', ');
   });
-  })
 
-  return studiesFromInstanceData;
+  return Object.values(studiesFromInstanceData);
 }
 
-function _mergeDataSourceAndInstanceStudies(mappedQidoStudies, mappedInstanceStudies) {
+function _mergeStudyDataAndDataSourceStudies(studyData, mappedQidoStudies) {
-  const allStudies = mappedQidoStudies.map(qidoStudy => {
+  return mappedQidoStudies.map(qidoStudy => {
-    const studyFromInstances =
+    const { StudyInstanceUID } = qidoStudy;
-      mappedInstanceStudies[qidoStudy.StudyInstanceUID];
+    const existing = studyData.find(a => a.studyInstanceUid === StudyInstanceUID) || {};
 
-    if (!studyFromInstances) {
+    return Object.assign({
-      return {
+      displaySets: []
-        studyInstanceUid: qidoStudy.StudyInstanceUID,
+    }, existing, {
+      studyInstanceUid: StudyInstanceUID,
       date: qidoStudy.StudyDate,
       description: qidoStudy.StudyDescription,
       modalities: qidoStudy.ModalitiesInStudy,
       numInstances: qidoStudy.NumInstances,
-        displaySets: [],
+    });
-      };
+  });
 }
 
-    return {
+function _mergeStudyDataAndInstanceStudies(studyData, mappedInstanceStudies) {
-      studyInstanceUid: qidoStudy.StudyInstanceUID,
+  return studyData.map(study => {
-      date: qidoStudy.StudyDate || studyFromInstances.date,
+    const studyFromInstances =
-      description: qidoStudy.StudyDescription || studyFromInstances.description,
+      mappedInstanceStudies.find(a => a.StudyInstanceUID === study.studyInstanceUid);
-      modalities: studyFromInstances.modalities || qidoStudy.ModalitiesInStudy,
-      numInstances: qidoStudy.NumInstances || studyFromInstances.numInstances,
-      seriesNumber: studyFromInstances.seriesNumber,
-      displaySets: studyFromInstances.displaySets,
-    };
-  });
 
-  return allStudies;
+    return Object.assign({}, study, {
+      displaySets: studyFromInstances.displaySets,
+      modalities: studyFromInstances.modalities
+    })
+  });
 }
 
 function _mapStudyFromInstance(StudyInstanceUID) {

platform/core/src/services/DisplaySetService/DisplaySetService.js

@@ -1,7 +1,7 @@
 import pubSubServiceInterface from '../pubSubServiceInterface';
 
 const EVENTS = {
-  DISPLAY_SETS_ADDED: 'event::displaySetService:displaySetAdded',
+  DISPLAY_SETS_ADDED: 'event::displaySetService:displaySetsAdded',
 };
 
 const displaySetCache = [];
@@ -81,11 +81,8 @@ export default class DisplaySetService {
     }
 
     // If array of instances => One instance.
-
     let displaySetsAdded = [];
 
-    debugger;
-
     if (batch) {
       input.forEach(instances => {
         const displaySets = this.makeDisplaySetForInstances(instances);
@@ -99,12 +96,12 @@ export default class DisplaySetService {
     }
 
     // If array of array of instances
-
+    if (displaySetsAdded && displaySetsAdded.length) {
       this._broadcastChange(EVENTS.DISPLAY_SETS_ADDED, displaySetsAdded);
+    }
   };
 
   makeDisplaySetForInstances(instances) {
-    debugger;
     const instance = instances[0];
 
     const existingDisplaySets =

platform/ui/src/components/MeasurementTable/MeasurementTable.jsx

@@ -61,7 +61,6 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
                       right: 4,
                       transform: isActive ? '' : 'translateX(100%)',
                     }}
-                    e
                     onClick={(e) => {
                       // stopPropagation needed to avoid disable the current active item
                       e.stopPropagation();

platform/viewer/src/components/ViewportGrid.jsx

@@ -20,7 +20,7 @@ function ViewerViewportGrid(props) {
 
   // TODO -> Make a HangingProtocolService
   const HangingProtocolService = displaySets => {
-    const displaySetInstanceUID = displaySets[Object.keys(displaySets)[0]][0].displaySetInstanceUID;
+    const displaySetInstanceUID = displaySets[0].displaySetInstanceUID;
 
     return {
       numRows: 1,
@@ -40,7 +40,7 @@ function ViewerViewportGrid(props) {
 
   useEffect(() => {
     const { unsubscribe } = DisplaySetService.subscribe(
-      DisplaySetService.EVENTS.DISPLAY_SET_ADDED,
+      DisplaySetService.EVENTS.DISPLAY_SETS_ADDED,
       handleDisplaySetSubscription
     );