Improve study browser

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,