Improve study browser

platform/core/src/dicomMetadataStore.js

@@ -47,7 +47,9 @@ const _model = {
 };
 
 function _getStudy(StudyInstanceUID) {
-  return _model.studies.find(StudyInstanceUID);
+  return _model.studies.find(
+    aStudy => aStudy.StudyInstanceUID === StudyInstanceUID
+  );
 }
 
 function _getSeries(StudyInstanceUID, SeriesInstanceUID) {
@@ -90,6 +92,27 @@ const dicomMetadataStore = {
 
     study.addSeries(instances);
   },
+  addStudy(study) {
+    const { StudyInstanceUID } = study;
+
+    let existingStudy = _model.studies.find(
+      study => study.StudyInstanceUID === StudyInstanceUID
+    );
+
+    if (!existingStudy) {
+      const newStudy = new StudyMetadata(StudyInstanceUID);
+
+      newStudy.PatientID = study.PatientID;
+      newStudy.PatientName = study.PatientName;
+      newStudy.StudyDate = study.StudyDate;
+      newStudy.ModalitiesInStudy = study.ModalitiesInStudy;
+      newStudy.StudyDescription = study.StudyDescription;
+      newStudy.AccessionNumber = study.AccessionNumber;
+      newStudy.NumInstances = study.NumInstances; // todo: Correct naming?
+
+      _model.studies.push(newStudy);
+    }
+  },
   getStudy: _getStudy,
   getSeries: _getSeries,
   getInstance: _getInstance,

platform/ui/src/components/StudyBrowser/StudyBrowser.jsx

@@ -22,7 +22,7 @@ const getTrackedSeries = displaySets => {
   return trackedSeries;
 };
 
-const StudyBrowser = ({ tabs }) => {
+const StudyBrowser = ({ tabs, onClickStudy, onClickThumbnail }) => {
   const [tabActive, setTabActive] = useState(getInitialActiveTab(tabs));
   const [studyActive, setStudyActive] = useState(null);
 
@@ -54,10 +54,27 @@ const StudyBrowser = ({ tabs }) => {
               isActive={isActive}
               onClick={() => {
                 setStudyActive(isActive ? null : studyInstanceUid);
+
+                if (onClickStudy) {
+                  onClickStudy(studyInstanceUid);
+                }
               }}
             />
-            {isActive && thumbnails && (
-              <ThumbnailList thumbnails={thumbnails} />
+            {isActive && displaySets && (
+              <ThumbnailList
+                thumbnails={displaySets}
+                thumbnailActive={thumbnailActive}
+                onThumbnailClick={thumbnailId => {
+                  setThumbnailActive(
+                    thumbnailId === thumbnailActive ? null : thumbnailId
+                  );
+
+                  if (onClickThumbnail) {
+                    // TODO: what is thumbnailId? Should pass display set instead
+                    onClickThumbnail(thumbnailId);
+                  }
+                }}
+              />
             )}
           </React.Fragment>
         );
@@ -103,6 +120,8 @@ const StudyBrowser = ({ tabs }) => {
 };
 
 StudyBrowser.propTypes = {
+  onClickStudy: PropTypes.func,
+  onClickThumbnail: PropTypes.func,
   tabs: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,