display viewport.

extensions/default/src/DicomWebDataSource/index.js

@@ -130,9 +130,9 @@ function createDicomWebApi(dicomWebConfig) {
         },
       },
     },
-    getImageIdsForDisplaySet(displaySetInstanceUid) {
+    getImageIdsForDisplaySet(displaySetInstanceUID) {
       const displaySet = displaySetManager.getDisplaySetByUID(
-        displaySetInstanceUid
+        displaySetInstanceUID
       );
 
       const images = displaySet.images;

extensions/default/src/ViewerLayout/index.jsx

@@ -1,8 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { SidePanel, Toolbar } from '@ohif/ui';
 //
 import Header from './Header.jsx';
+import { displaySetManager } from '@ohif/core';
 
 function ViewerLayout({
   // From Extension Module Params
@@ -11,7 +12,8 @@ function ViewerLayout({
   leftPanels,
   rightPanels,
   toolBarLayout,
-  displaySetInstanceUids,
+  viewports,
+  displaySetInstanceUIDs,
   ViewportGrid,
 }) {
   /**
@@ -28,6 +30,17 @@ function ViewerLayout({
     };
   }, []);
 
+  // TODO -> Need some way of selecting which displaySets hit the viewports.
+  const [viewportData, setViewportData] = useState([]);
+
+  console.log(displaySetInstanceUIDs);
+
+  useEffect(() => {
+    setViewportData([
+      displaySetManager.getDisplaySetByUID(displaySetInstanceUIDs[0]),
+    ]);
+  }, [displaySetInstanceUIDs]);
+
   const getPanelData = id => {
     const entry = extensionManager.getModuleEntry(id);
     // TODO, not sure why sidepanel content has to be JSX, and not a children prop?
@@ -42,11 +55,22 @@ function ViewerLayout({
     };
   };
 
+  const getViewportComponentData = viewportComponent => {
+    const entry = extensionManager.getModuleEntry(viewportComponent.namespace);
+
+    return {
+      component: entry.component,
+      displaySetsToDisplay: viewportComponent.displaySetsToDisplay,
+    };
+  };
+
   const leftPanelComponents = leftPanels.map(getPanelData);
   const rightPanelComponents = rightPanels.map(getPanelData);
 
-  console.warn(displaySetInstanceUids);
-  console.warn(toolBarLayout);
+  const viewportComponents = viewports.map(getViewportComponentData);
+
+  console.log(displaySetInstanceUIDs);
+  console.log(toolBarLayout);
 
   const [primaryToolBarLayout, secondaryToolBarLayout] = toolBarLayout;
 
@@ -72,7 +96,10 @@ function ViewerLayout({
             <Toolbar type="secondary" tools={secondaryToolBarLayout.tools} />
           </div>
           <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">
-            <ViewportGrid />
+            <ViewportGrid
+              viewportData={viewportData}
+              viewportComponents={viewportComponents}
+            />
             {/*
               viewportContents={[
                 <Viewport
@@ -152,7 +179,7 @@ ViewerLayout.propTypes = {
       moreTools: PropTypes.array,
     })
   ).isRequired,
-  displaySetInstanceUids: PropTypes.any.isRequired,
+  displaySetInstanceUIDs: PropTypes.any.isRequired,
   leftPanels: PropTypes.array,
   rightPanels: PropTypes.array,
   /** Responsible for rendering our grid of viewports; provided by consuming application */

extensions/default/src/getPanelModule.js

@@ -40,7 +40,7 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
   const seriesTracking = {}; //useSeriesTracking();
 
   useEffect(() => {
-    if (!viewModel.displaySetInstanceUids.length) {
+    if (!viewModel.displaySetInstanceUIDs.length) {
       return;
     }
 
@@ -57,7 +57,7 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
 
     const { cornerstone, cornerstoneTools } = command.commandFn();
 
-    viewModel.displaySetInstanceUids.forEach(uid => {
+    viewModel.displaySetInstanceUIDs.forEach(uid => {
       const imageIds = dataSource.getImageIdsForDisplaySet(uid);
       const imageId = imageIds[Math.floor(imageIds.length / 2)];
 
@@ -68,7 +68,7 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
       });
     });
 
-    const displaySets = viewModel.displaySetInstanceUids.map(
+    const displaySets = viewModel.displaySetInstanceUIDs.map(
       displaySetManager.getDisplaySetByUID
     );
 
@@ -98,7 +98,7 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
       const studiesFromInstanceData = {};
       displaySets.forEach(ds => {
         const displaySet = {
-          displaySetInstanceUid: ds.displaySetInstanceUid,
+          displaySetInstanceUID: ds.displaySetInstanceUID,
           description: ds.SeriesDescription,
           seriesNumber: ds.SeriesNumber,
           modality: ds.Modality,
@@ -107,7 +107,7 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
         };
 
         const displaySetViewportData = viewportData.find(
-          a => a.displaySetInstanceUid === ds.displaySetInstanceUid
+          a => a.displaySetInstanceUID === ds.displaySetInstanceUID
         );
 
         if (displaySetViewportData) {
@@ -192,11 +192,11 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
     });
 
     return () => (isSubscribed = false);
-  }, [viewModel.displaySetInstanceUids]);
+  }, [viewModel.displaySetInstanceUIDs]);
 
   studyData.forEach(study => {
     study.displaySets.forEach(ds => {
-      ds.imageSrc = thumbnailImageSrcMap.get(ds.displaySetInstanceUid);
+      ds.imageSrc = thumbnailImageSrcMap.get(ds.displaySetInstanceUID);
     });
   });
 

extensions/default/src/getSopClassHandlerModule.js

@@ -15,7 +15,7 @@ const makeDisplaySet = instances => {
 
   // set appropriate attributes to image set...
   imageSet.setAttributes({
-    displaySetInstanceUid: imageSet.uid, // create a local alias for the imageSet UID
+    displaySetInstanceUID: imageSet.uid, // create a local alias for the imageSet UID
     SeriesDate: instance.SeriesDate,
     SeriesTime: instance.SeriesTime,
     SeriesInstanceUID: instance.SeriesInstanceUID,