display viewport.

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

@@ -7,13 +7,13 @@ import { ButtonGroup, Button, StudyItem, ThumbnailList } from '@ohif/ui';
 const buttonClasses = 'text-white text-base border-none bg-black p-2 min-w-18';
 const activeButtonClasses = 'bg-primary-main';
 
-const getInitialActiveTab = (tabs) => {
+const getInitialActiveTab = tabs => {
   return tabs && tabs[0] && tabs[0].name;
 };
 
-const getTrackedSeries = (displaySets) => {
+const getTrackedSeries = displaySets => {
   let trackedSeries = 0;
-  displaySets.forEach((displaySet) => {
+  displaySets.forEach(displaySet => {
     if (displaySet.isTracked) {
       trackedSeries++;
     }
@@ -28,7 +28,7 @@ const StudyBrowser = ({ tabs, onClickStudy, onClickThumbnail }) => {
   const [thumbnailActive, setThumbnailActive] = useState(null);
 
   const getTabContent = () => {
-    const tabData = tabs.find((tab) => tab.name === tabActive);
+    const tabData = tabs.find(tab => tab.name === tabActive);
 
     if (!tabData || !tabData.studies || !Array.isArray(tabData.studies)) {
       return;
@@ -65,17 +65,16 @@ const StudyBrowser = ({ tabs, onClickStudy, onClickThumbnail }) => {
               <ThumbnailList
                 thumbnails={displaySets}
                 thumbnailActive={thumbnailActive}
-                onThumbnailClick={(thumbnailId) => {
-                    setThumbnailActive(
-                      thumbnailId === thumbnailActive ? null : thumbnailId
-                    )
+                onThumbnailClick={thumbnailId => {
+                  setThumbnailActive(
+                    thumbnailId === thumbnailActive ? null : thumbnailId
+                  );
 
-                    if (onClickThumbnail) {
-                      // TODO: what is thumbnailId? Should pass display set instead
-                      onClickThumbnail(thumbnailId);
-                    }
+                  if (onClickThumbnail) {
+                    // TODO: what is thumbnailId? Should pass display set instead
+                    onClickThumbnail(thumbnailId);
                   }
-                }
+                }}
               />
             )}
           </React.Fragment>
@@ -92,7 +91,7 @@ const StudyBrowser = ({ tabs, onClickStudy, onClickThumbnail }) => {
           color="inherit"
           className="border border-secondary-light rounded-md"
         >
-          {tabs.map((tab) => {
+          {tabs.map(tab => {
             const { name, label } = tab;
             const isActive = tabActive === name;
             return (
@@ -137,7 +136,7 @@ StudyBrowser.propTypes = {
           description: PropTypes.string,
           displaySets: PropTypes.arrayOf(
             PropTypes.shape({
-              displaySetInstanceUid: PropTypes.string.isRequired,
+              displaySetInstanceUID: PropTypes.string.isRequired,
               imageSrc: PropTypes.string,
               imageAltText: PropTypes.string,
               seriesDate: PropTypes.string,

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

@@ -27,7 +27,7 @@ import { StudyBrowser } from '@ohif/ui';
       modalities: 'CT,SR',
       displaySets: [
         {
-          displaySetInstanceUid: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
+          displaySetInstanceUID: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
           description: 'Multiple line image series description lorem sit',
           seriesNumber: 1,
           numInstances: 68,
@@ -36,7 +36,7 @@ import { StudyBrowser } from '@ohif/ui';
           isTracked: true,
         },
         {
-          displaySetInstanceUid: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
+          displaySetInstanceUID: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
           description: 'Multiple line image series description lorem sit',
           seriesNumber: 1,
           numInstances: 68,
@@ -44,14 +44,14 @@ import { StudyBrowser } from '@ohif/ui';
           viewportIdentificator: 'B',
         },
         {
-          displaySetInstanceUid: 'f69f648c-223e-dasdasdb7f-c4af-b8906641a66e',
+          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',
+          displaySetInstanceUID: 'f69f648c-223e-db7f-c4afas-b8906asd641a66e',
           description: 'Multiple line description lorem ipsum dolor sit amet',
           modality: 'SR',
           componentType: 'thumbnailNoImage',
@@ -67,7 +67,7 @@ import { StudyBrowser } from '@ohif/ui';
       modalities: 'CT',
       displaySets: [
         {
-          displaySetInstanceUid: 'f69f648c-223e-db7f-c4af-b8906641a66e',
+          displaySetInstanceUID: 'f69f648c-223e-db7f-c4af-b8906641a66e',
           description: 'Multiple line image series description lorem sit',
           seriesNumber: 1,
           numInstances: 68,

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

@@ -8,7 +8,7 @@ const ThumbnailList = ({ thumbnails, thumbnailActive, onThumbnailClick }) => {
     <div className="bg-black py-3">
       {thumbnails.map(
         ({
-          displaySetInstanceUid,
+          displaySetInstanceUID,
           description,
           seriesNumber,
           numInstances,
@@ -20,13 +20,13 @@ const ThumbnailList = ({ thumbnails, thumbnailActive, onThumbnailClick }) => {
           imageSrc,
           imageAltText,
         }) => {
-          const isActive = thumbnailActive === displaySetInstanceUid;
+          const isActive = thumbnailActive === displaySetInstanceUID;
 
           switch (componentType) {
             case 'thumbnail':
               return (
                 <Thumbnail
-                  key={displaySetInstanceUid}
+                  key={displaySetInstanceUID}
                   description={description}
                   seriesNumber={seriesNumber}
                   numInstances={numInstances}
@@ -34,23 +34,23 @@ const ThumbnailList = ({ thumbnails, thumbnailActive, onThumbnailClick }) => {
                   imageAltText={imageAltText}
                   viewportIdentificator={viewportIdentificator}
                   isActive={isActive}
-                  onClick={() => onThumbnailClick(displaySetInstanceUid)}
+                  onClick={() => onThumbnailClick(displaySetInstanceUID)}
                 />
               );
             case 'thumbnailNoImage':
               return (
                 <ThumbnailNoImage
-                  key={displaySetInstanceUid}
+                  key={displaySetInstanceUID}
                   modality={modality}
                   seriesDate={seriesDate}
                   description={description}
-                  onClick={() => onThumbnailClick(displaySetInstanceUid)}
+                  onClick={() => onThumbnailClick(displaySetInstanceUID)}
                 />
               );
             case 'thumbnailTracked':
               return (
                 <ThumbnailTracked
-                  key={displaySetInstanceUid}
+                  key={displaySetInstanceUID}
                   description={description}
                   seriesNumber={seriesNumber}
                   numInstances={numInstances}
@@ -59,7 +59,7 @@ const ThumbnailList = ({ thumbnails, thumbnailActive, onThumbnailClick }) => {
                   viewportIdentificator={viewportIdentificator}
                   isTracked={isTracked}
                   isActive={isActive}
-                  onClick={() => onThumbnailClick(displaySetInstanceUid)}
+                  onClick={() => onThumbnailClick(displaySetInstanceUID)}
                 />
               );
             default:
@@ -74,7 +74,7 @@ const ThumbnailList = ({ thumbnails, thumbnailActive, onThumbnailClick }) => {
 ThumbnailList.propTypes = {
   thumbnails: PropTypes.arrayOf(
     PropTypes.shape({
-      displaySetInstanceUid: PropTypes.string.isRequired,
+      displaySetInstanceUID: PropTypes.string.isRequired,
       imageSrc: PropTypes.string,
       imageAltText: PropTypes.string,
       seriesDate: PropTypes.string,

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

@@ -6,7 +6,7 @@ const studyWithSR = {
   modalities: 'CT,SR',
   displaySets: [
     {
-      displaySetInstanceUid: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
+      displaySetInstanceUID: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
       description: 'Multiple line image series description lorem sit',
       seriesNumber: 1,
       numInstances: 68,
@@ -15,7 +15,7 @@ const studyWithSR = {
       isTracked: true,
     },
     {
-      displaySetInstanceUid: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
+      displaySetInstanceUID: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
       description: 'Multiple line image series description lorem sit',
       seriesNumber: 1,
       numInstances: 68,
@@ -23,14 +23,14 @@ const studyWithSR = {
       viewportIdentificator: 'B',
     },
     {
-      displaySetInstanceUid: 'f69f648c-223e-dasdasdb7f-c4af-b8906641a66e',
+      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',
+      displaySetInstanceUID: 'f69f648c-223e-db7f-c4afas-b8906asd641a66e',
       description: 'Multiple line description lorem ipsum dolor sit amet',
       modality: 'SR',
       componentType: 'thumbnailNoImage',
@@ -47,7 +47,7 @@ const studySimple = {
   modalities: 'CT',
   displaySets: [
     {
-      displaySetInstanceUid: 'f69f648c-223e-db7f-c4af-b8906641a66e',
+      displaySetInstanceUID: 'f69f648c-223e-db7f-c4af-b8906641a66e',
       description: 'Multiple line image series description lorem sit',
       seriesNumber: 1,
       numInstances: 68,