OHIF-79: Study Browser side panel (#1614)

* Initial code changes for StudyBrowser

* StudyItem component basic strucure

* Adding new icon

* Updates to get StudyItem working

* Small fix on side panel open header

* Adding new icons

* Thumbnail List

* ThumbnailSR WIP

* Thumanil WIP

* Export new components into ohif/ui

* Updates on style

* Update ThumbnailSR style

* Margin updates

* MAke it scrollable

* Make it scrollable

* Style updates

* Fixing tooltip

* Tunning the mock data and testing scenarios

* Update mock data

* make all studies collapsed

* small fix on tooltip

* Removing empty mdx files

* Updating viewer docz page

* Style updates

* Update button font-size

* Fix: Make cancel button only visible on hover

* Fixing callouts

* Fix eslint

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

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+
+import { ButtonGroup, Button, StudyItem, ThumbnailList } from '@ohif/ui';
+
+import { studyWithSR, studySimple } from './mockData';
+const studyGroupTypes = ['Primary', 'Recent', 'All'];
+const studyGroup = {
+  Primary: [studySimple],
+  Recent: [studyWithSR, studySimple],
+  All: [studySimple, studyWithSR],
+};
+
+const buttonClasses = 'text-white text-base border-none bg-black';
+const activeButtonClasses = 'bg-primary-main';
+
+const StudyBrowser = () => {
+  const [studyGroupSelected, setStudyGroupSelected] = useState('Recent');
+  const [studyActive, setStudyActive] = useState(null);
+
+  return (
+    <React.Fragment>
+      <div className="flex flex-row items-center justify-center border-b-2 w-100 h-16 border-secondary-light p-4 bg-primary-dark">
+        <ButtonGroup
+          variant="outlined"
+          color="inherit"
+          className="border border-secondary-light rounded-md"
+        >
+          {studyGroupTypes.map((studyGroup) => {
+            const isActive = studyGroupSelected === studyGroup;
+            return (
+              <Button
+                key={studyGroup}
+                className={classnames(
+                  buttonClasses,
+                  isActive && activeButtonClasses
+                )}
+                size="small"
+                onClick={() => {
+                  setStudyGroupSelected(studyGroup);
+                  setStudyActive(null);
+                }}
+              >
+                {studyGroup}
+              </Button>
+            );
+          })}
+        </ButtonGroup>
+      </div>
+      <div className="flex flex-col flex-1 overflow-auto invisible-scrollbar">
+        {studyGroup[studyGroupSelected].map(
+          ({
+            studyInstanceUid,
+            studyDate,
+            studyDescription,
+            instances,
+            modalities,
+            trackedSeries,
+            thumbnails,
+          }) => {
+            const isActive = studyActive === studyInstanceUid;
+            return (
+              <React.Fragment key={studyInstanceUid}>
+                <StudyItem
+                  studyDate={studyDate}
+                  studyDescription={studyDescription}
+                  instances={instances}
+                  modalities={modalities}
+                  trackedSeries={trackedSeries}
+                  isActive={isActive}
+                  onClick={() => {
+                    setStudyActive(isActive ? null : studyInstanceUid);
+                  }}
+                />
+                {isActive && thumbnails && (
+                  <ThumbnailList thumbnails={thumbnails} />
+                )}
+              </React.Fragment>
+            );
+          }
+        )}
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default StudyBrowser;

platform/ui/src/components/StudyBrowser/StudyBrowser.mdx

@@ -0,0 +1,26 @@
+---
+name: StudyBrowser
+menu: General
+route: components/studyBrowser
+---
+
+import { Playground, Props } from 'docz';
+import { StudyBrowser } from '@ohif/ui';
+
+# StudyBrowser
+
+## Import
+
+```javascript
+import { StudyBrowser } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <StudyBrowser />
+</Playground>
+
+## Properties
+
+<Props of={StudyBrowser} />

platform/ui/src/components/StudyBrowser/index.js

@@ -0,0 +1,2 @@
+import StudyBrowser from './StudyBrowser';
+export default StudyBrowser;

platform/ui/src/components/StudyBrowser/mockData.js

@@ -0,0 +1,56 @@
+const studyWithSR = {
+  studyInstanceUid: '1',
+  studyDate: '07-Sept-2010',
+  studyDescription: 'CHEST/ABD/PELVIS W/CONTRAST',
+  instances: 902,
+  modalities: 'CT,SR',
+  trackedSeries: 1,
+  thumbnails: [
+    {
+      displaySetInstanceUid: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
+      seriesDescription: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      instanceNumber: 68,
+      viewportIdentificator: 'A',
+      isTracked: true,
+    },
+    {
+      displaySetInstanceUid: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
+      seriesDescription: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      instanceNumber: 68,
+      viewportIdentificator: 'B',
+    },
+    {
+      displaySetInstanceUid: 'f69f648c-223e-dasdasdb7f-c4af-b8906641a66e',
+      seriesDescription: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      instanceNumber: 68,
+    },
+    {
+      displaySetInstanceUid: 'f69f648c-223e-db7f-c4afas-b8906asd641a66e',
+      seriesDescription: 'Multiple line description lorem ipsum dolor sit amet',
+      modality: 'SR',
+      seriesDate: '07-Sept-2010',
+    },
+  ],
+};
+
+const studySimple = {
+  studyInstanceUid: '2',
+  studyDate: '07-Sept-2010',
+  studyDescription: 'CHEST/ABD/PELVIS W/CONTRAST',
+  instances: 902,
+  modalities: 'CT',
+  trackedSeries: 0,
+  thumbnails: [
+    {
+      displaySetInstanceUid: 'f69f648c-223e-db7f-c4af-b8906641a66e',
+      seriesDescription: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      instanceNumber: 68,
+    },
+  ],
+};
+
+export { studyWithSR, studySimple };