Updating mockData

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

@@ -1,23 +1,60 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 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 p-2 min-w-18';
 const activeButtonClasses = 'bg-primary-main';
 
-const StudyBrowser = () => {
+const getInitialActiveTab = (tabs) => {
-  const [studyGroupSelected, setStudyGroupSelected] = useState('Recent');
+  return tabs && tabs[0] && tabs[0].name;
+};
+
+const StudyBrowser = ({ tabs }) => {
+  const [tabActive, setTabActive] = useState(getInitialActiveTab(tabs));
   const [studyActive, setStudyActive] = useState(null);
 
+  const getTabContent = () => {
+    const tabData = tabs.find((tab) => tab.name === tabActive);
+
+    if (!tabData || !tabData.studies || !Array.isArray(tabData.studies)) {
+      return;
+    }
+
+    return tabData.studies.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>
+        );
+      }
+    );
+  };
+
   return (
     <React.Fragment>
       <div className="flex flex-row items-center justify-center border-b w-100 h-16 border-secondary-light p-4 bg-primary-dark">
@@ -26,62 +63,69 @@ const StudyBrowser = () => {
           color="inherit"
           className="border border-secondary-light rounded-md"
         >
-          {studyGroupTypes.map((studyGroup) => {
+          {tabs.map((tab) => {
-            const isActive = studyGroupSelected === studyGroup;
+            const { name, label } = tab;
+            const isActive = tabActive === name;
             return (
               <Button
-                key={studyGroup}
+                key={name}
                 className={classnames(
                   buttonClasses,
                   isActive && activeButtonClasses
                 )}
                 size="initial"
                 onClick={() => {
-                  setStudyGroupSelected(studyGroup);
+                  setTabActive(name);
                   setStudyActive(null);
                 }}
               >
-                {studyGroup}
+                {label}
               </Button>
             );
           })}
         </ButtonGroup>
       </div>
       <div className="flex flex-col flex-1 overflow-auto invisible-scrollbar">
-        {studyGroup[studyGroupSelected].map(
+        {getTabContent()}
-          ({
-            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>
   );
 };
 
+StudyBrowser.propTypes = {
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      studies: PropTypes.arrayOf(
+        PropTypes.shape({
+          studyInstanceUid: PropTypes.string.isRequired,
+          date: PropTypes.string,
+          numInstances: PropTypes.number,
+          modality: PropTypes.string,
+          description: PropTypes.string,
+          displaySets: PropTypes.arrayOf(
+            PropTypes.shape({
+              displaySetInstanceUid: PropTypes.string.isRequired,
+              imageSrc: PropTypes.string,
+              imageAltText: PropTypes.string,
+              seriesDate: PropTypes.string,
+              seriesNumber: PropTypes.number,
+              numInstances: PropTypes.number,
+              description: PropTypes.string,
+              componentType: PropTypes.oneOf([
+                'thumbnail',
+                'thumbnailTracked',
+                'thumbnailNoImage',
+              ]).isRequired,
+              isTracked: PropTypes.bool,
+              viewportIdentificator: PropTypes.string,
+            })
+          ),
+        })
+      ).isRequired,
+    })
+  ),
+};
+
 export default StudyBrowser;

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

@@ -1,56 +0,0 @@
-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 };

platform/ui/src/components/Thumbnail/Thumbnail.jsx

@@ -8,9 +8,9 @@ const Thumbnail = ({
   className,
   imageSrc,
   imageAltText,
-  seriesDescription,
+  description,
   seriesNumber,
-  instanceNumber,
+  numInstances,
   isActive,
   onClick,
 }) => {
@@ -45,10 +45,10 @@ const Thumbnail = ({
           {seriesNumber}
         </div>
         <div className="flex flex-row items-center flex-1">
-          <Icon name="group-layers" className="w-3 mr-2" /> {instanceNumber}
+          <Icon name="group-layers" className="w-3 mr-2" /> {numInstances}
         </div>
       </div>
-      <div className="text-white text-base">{seriesDescription}</div>
+      <div className="text-white text-base">{description}</div>
     </div>
   );
 };
@@ -57,9 +57,9 @@ Thumbnail.propTypes = {
   className: PropTypes.string,
   imageSrc: PropTypes.string,
   imageAltText: PropTypes.string,
-  seriesDescription: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
   seriesNumber: PropTypes.number.isRequired,
-  instanceNumber: PropTypes.number.isRequired,
+  numInstances: PropTypes.number.isRequired,
   isActive: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
 };

platform/ui/src/components/Thumbnail/Thumbnail.mdx

@@ -25,11 +25,11 @@ import { Thumbnail } from '@ohif/ui';
     <div className="w-56">
       <Thumbnail
         imageAltText="DisplaySet thumbnail image"
-        seriesDescription="Multiple line image series description lorem sit"
+        description="Multiple line image series description lorem sit"
         seriesNumber={4}
-        instanceNumber={902}
+        numInstances={902}
-        isActive={false}
         onClick={() => alert('Thumbnail was clicked!')}
+        isActive={false}
       />
     </div>
   </div>

platform/ui/src/components/ThumbnailList/ThumbnailList.jsx

@@ -1,56 +1,61 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Thumbnail, ThumbnailSR } from '@ohif/ui';
+import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '@ohif/ui';
 
 const ThumbnailList = ({ thumbnails }) => {
-  const [thumbnailActive, setThumbnailActive] = useState(null);
-
   return (
     <div className="bg-black py-3">
       {thumbnails.map(
         ({
           displaySetInstanceUid,
-          seriesDescription,
+          description,
           seriesNumber,
-          instanceNumber,
+          numInstances,
           modality,
+          componentType,
           seriesDate,
           viewportIdentificator,
           isTracked,
+          isActive,
         }) => {
-          const isSR = modality && modality.toLowerCase() === 'sr';
+          switch (componentType) {
-          const isActive = thumbnailActive === displaySetInstanceUid;
+            case 'thumbnail':
-
+              return (
-          if (isSR) {
+                <Thumbnail
-            return (
+                  key={displaySetInstanceUid}
-              <ThumbnailSR
+                  description={description}
-                key={displaySetInstanceUid}
+                  seriesNumber={seriesNumber}
-                modality={modality}
+                  numInstances={numInstances}
-                seriesDate={seriesDate}
+                  isActive={isActive}
-                seriesDescription={seriesDescription}
+                  onClick={() => {}}
-                onClick={() => {}}
+                />
-              />
+              );
-            );
+            case 'thumbnailNoImage':
-          } else {
+              return (
-            return (
+                <ThumbnailNoImage
-              <Thumbnail
+                  key={displaySetInstanceUid}
-                key={displaySetInstanceUid}
+                  modality={modality}
-                seriesDescription={seriesDescription}
+                  seriesDate={seriesDate}
-                seriesNumber={seriesNumber}
+                  description={description}
-                instanceNumber={instanceNumber}
+                  onClick={() => {}}
-                viewportIdentificator={viewportIdentificator}
+                />
-                isTracked={isTracked}
+              );
-                isActive={isActive}
+            case 'thumbnailTracked':
-                onClick={() => {
+              return (
-                  setThumbnailActive(
+                <ThumbnailTracked
-                    thumbnailActive === displaySetInstanceUid
+                  key={displaySetInstanceUid}
-                      ? null
+                  description={description}
-                      : displaySetInstanceUid
+                  seriesNumber={seriesNumber}
-                  );
+                  numInstances={numInstances}
-                }}
+                  viewportIdentificator={viewportIdentificator}
-              />
+                  isTracked={isTracked}
-            );
+                  isActive={isActive}
+                  onClick={() => {}}
+                />
+              );
+            default:
+              return <></>;
           }
         }
       )}
@@ -61,12 +66,21 @@ const ThumbnailList = ({ thumbnails }) => {
 ThumbnailList.propTypes = {
   thumbnails: PropTypes.arrayOf(
     PropTypes.shape({
-      displaySetInstanceUid: PropTypes.string,
+      displaySetInstanceUid: PropTypes.string.isRequired,
-      seriesDescription: PropTypes.string,
+      imageSrc: PropTypes.string,
-      seriesNumber: PropTypes.number,
+      imageAltText: PropTypes.string,
-      instanceNumber: PropTypes.number,
-      modality: PropTypes.string,
       seriesDate: PropTypes.string,
+      seriesNumber: PropTypes.number,
+      numInstances: PropTypes.number,
+      description: PropTypes.string,
+      componentType: PropTypes.oneOf([
+        'thumbnail',
+        'thumbnailTracked',
+        'thumbnailNoImage',
+      ]).isRequired,
+      viewportIdentificator: PropTypes.string,
+      isTracked: PropTypes.bool,
+      isActive: PropTypes.bool,
     })
   ),
 };

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx

@@ -8,13 +8,13 @@ const ThumbnailTracked = ({
   className,
   imageSrc,
   imageAltText,
-  seriesDescription,
+  description,
   seriesNumber,
-  instanceNumber,
+  numInstances,
-  isActive,
   onClick,
   viewportIdentificator,
   isTracked,
+  isActive,
 }) => {
   const trackedIcon = isTracked ? 'circled-checkmark' : 'dotted-circle';
 
@@ -85,9 +85,9 @@ const ThumbnailTracked = ({
       <Thumbnail
         imageSrc={imageSrc}
         imageAltText={imageAltText}
-        seriesDescription={seriesDescription}
+        description={description}
         seriesNumber={seriesNumber}
-        instanceNumber={instanceNumber}
+        numInstances={numInstances}
         isActive={isActive}
         onClick={onClick}
       />
@@ -99,13 +99,13 @@ ThumbnailTracked.propTypes = {
   className: PropTypes.string,
   imageSrc: PropTypes.string,
   imageAltText: PropTypes.string,
-  seriesDescription: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
   seriesNumber: PropTypes.number.isRequired,
-  instanceNumber: PropTypes.number.isRequired,
+  numInstances: PropTypes.number.isRequired,
-  isActive: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
-  isTracked: PropTypes.bool,
   viewportIdentificator: PropTypes.string,
+  isTracked: PropTypes.bool,
+  isActive: PropTypes.bool.isRequired,
 };
 
 export default ThumbnailTracked;

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx

@@ -22,13 +22,13 @@ import { ThumbnailTracked } from '@ohif/ui';
     <div className="w-64">
       <ThumbnailTracked
         imageAltText="DisplaySet thumbnail image"
-        seriesDescription="Multiple line image series description lorem sit"
+        description="Multiple line image series description lorem sit"
         seriesNumber={4}
-        instanceNumber={902}
+        numInstances={902}
-        isActive={false}
         onClick={() => alert('Thumbnail was clicked!')}
-        isTracked={true}
         viewportIdentificator="A"
+        isTracked={true}
+        isActive={false}
       />
     </div>
   </div>

platform/ui/src/views/Viewer/Viewer.mdx

@@ -24,6 +24,8 @@ import {
 import Header from './components/Header';
 import ViewportToolbar from './components/ViewportToolBar';
 
+import { tabs } from './studyBrowserMockData';
+
 # Viewer
 
 <Playground>
@@ -60,7 +62,7 @@ import ViewportToolbar from './components/ViewportToolBar';
             componentLabel="Studies"
             defaultIsOpen={true}
           >
-            <StudyBrowser />
+            <StudyBrowser tabs={tabs} />
           </SidePanel>
           <div className="flex flex-col flex-1 h-100">
             <div className="flex flex-2 w-100 border-b border-transparent h-12">

platform/ui/src/views/Viewer/studyBrowserMockData.js

@@ -0,0 +1,77 @@
+const studyWithSR = {
+  studyInstanceUid: '1',
+  date: '07-Sept-2010',
+  description: 'CHEST/ABD/PELVIS W/CONTRAST',
+  numInstances: 902,
+  modalities: 'CT,SR',
+  thumbnails: [
+    {
+      displaySetInstanceUid: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
+      description: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      numInstances: 68,
+      componentType: 'thumbnailTracked',
+      viewportIdentificator: 'A',
+      isTracked: true,
+    },
+    {
+      displaySetInstanceUid: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
+      description: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      numInstances: 68,
+      componentType: 'thumbnailTracked',
+      viewportIdentificator: 'B',
+    },
+    {
+      displaySetInstanceUid: 'f69f648c-223e-dasdasdb7f-c4af-b8906641a66e',
+      description: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      numInstances: 68,
+      componentType: 'thumbnailTracked',
+    },
+    {
+      displaySetInstanceUid: 'f69f648c-223e-db7f-c4afas-b8906asd641a66e',
+      description: 'Multiple line description lorem ipsum dolor sit amet',
+      modality: 'SR',
+      componentType: 'thumbnailNoImage',
+      seriesDate: '07-Sept-2010',
+    },
+  ],
+};
+
+const studySimple = {
+  studyInstanceUid: '2',
+  date: '07-Sept-2010',
+  description: 'CHEST/ABD/PELVIS W/CONTRAST',
+  numInstances: 902,
+  modalities: 'CT',
+  displaySets: [
+    {
+      displaySetInstanceUid: 'f69f648c-223e-db7f-c4af-b8906641a66e',
+      description: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      numInstances: 68,
+      componentType: 'thumbnailTracked',
+    },
+  ],
+};
+
+const tabs = [
+  {
+    name: 'primary',
+    label: 'Primary',
+    studies: [studySimple],
+  },
+  {
+    name: 'recent',
+    label: 'Recent',
+    studies: [studyWithSR, studySimple],
+  },
+  {
+    name: 'all',
+    label: 'All',
+    studies: [studySimple, studyWithSR],
+  },
+];
+
+export { tabs };