display viewport.

extensions/cornerstone/src/OHIFCornerstoneViewport.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-
-import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport';
+import CornerstoneViewport from 'react-cornerstone-viewport';
+//import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport';
 import OHIF from '@ohif/core';
 import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
@@ -18,9 +18,9 @@ class OHIFCornerstoneViewport extends Component {
   };
 
   static propTypes = {
-    studies: PropTypes.object,
     displaySet: PropTypes.object,
     viewportIndex: PropTypes.number,
+    dataSource: PropTypes.object,
     children: PropTypes.node,
     customProps: PropTypes.object,
   };
@@ -39,98 +39,57 @@ class OHIFCornerstoneViewport extends Component {
   /**
    * Obtain the CornerstoneTools Stack for the specified display set.
    *
-   * @param {Object[]} studies
-   * @param {String} StudyInstanceUID
-   * @param {String} displaySetInstanceUID
-   * @param {String} [SOPInstanceUID]
-   * @param {Number} [frameIndex=1]
+   * @param {Object} displaySet
+   * @param {Object} dataSource
    * @return {Object} CornerstoneTools Stack
    */
-  static getCornerstoneStack(
-    studies,
-    StudyInstanceUID,
-    displaySetInstanceUID,
-    SOPInstanceUID,
-    frameIndex = 0
-  ) {
-    if (!studies || !studies.length) {
-      throw new Error('Studies not provided.');
-    }
-
-    if (!StudyInstanceUID) {
-      throw new Error('StudyInstanceUID not provided.');
-    }
-
-    if (!displaySetInstanceUID) {
-      throw new Error('StudyInstanceUID not provided.');
-    }
-
-    // Create shortcut to displaySet
-    const study = studies.find(
-      study => study.StudyInstanceUID === StudyInstanceUID
-    );
-
-    if (!study) {
-      throw new Error('Study not found.');
-    }
-
-    const displaySet = study.displaySets.find(set => {
-      return set.displaySetInstanceUID === displaySetInstanceUID;
-    });
-
-    if (!displaySet) {
-      throw new Error('Display Set not found.');
-    }
+  static getCornerstoneStack(displaySet, dataSource) {
+    const { frameIndex } = displaySet;
 
     // Get stack from Stack Manager
-    const storedStack = StackManager.findOrCreateStack(study, displaySet);
+    const storedStack = StackManager.findOrCreateStack(displaySet, dataSource);
 
     // Clone the stack here so we don't mutate it
     const stack = Object.assign({}, storedStack);
+
     stack.currentImageIdIndex = frameIndex;
 
-    if (SOPInstanceUID) {
-      const index = stack.imageIds.findIndex(imageId => {
-        const imageIdSOPInstanceUID = cornerstone.metaData.get(
-          'SOPInstanceUID',
-          imageId
-        );
+    // TODO -> Do we ever use this like this?
+    // if (SOPInstanceUID) {
+    //   const index = stack.imageIds.findIndex(imageId => {
+    //     const imageIdSOPInstanceUID = cornerstone.metaData.get(
+    //       'SOPInstanceUID',
+    //       imageId
+    //     );
 
-        return imageIdSOPInstanceUID === SOPInstanceUID;
-      });
+    //     return imageIdSOPInstanceUID === SOPInstanceUID;
+    //   });
 
-      if (index > -1) {
-        stack.currentImageIdIndex = index;
-      } else {
-        console.warn(
-          'SOPInstanceUID provided was not found in specified DisplaySet'
-        );
-      }
-    }
+    //   if (index > -1) {
+    //     stack.currentImageIdIndex = index;
+    //   } else {
+    //     console.warn(
+    //       'SOPInstanceUID provided was not found in specified DisplaySet'
+    //     );
+    //   }
+    // }
 
     return stack;
   }
 
-  getViewportData = async (
-    studies,
-    StudyInstanceUID,
-    displaySetInstanceUID,
-    SOPInstanceUID,
-    frameIndex
-  ) => {
+  getViewportData = async displaySet => {
     let viewportData;
 
+    const { dataSource } = this.props;
+
     const stack = OHIFCornerstoneViewport.getCornerstoneStack(
-      studies,
-      StudyInstanceUID,
-      displaySetInstanceUID,
-      SOPInstanceUID,
-      frameIndex
+      displaySet,
+      dataSource
     );
 
     viewportData = {
-      StudyInstanceUID,
-      displaySetInstanceUID,
+      StudyInstanceUID: displaySet.StudyInstanceUID,
+      displaySetInstanceUID: displaySet.displaySetInstanceUID,
       stack,
     };
 
@@ -138,32 +97,24 @@ class OHIFCornerstoneViewport extends Component {
   };
 
   setStateFromProps() {
-    const { studies, displaySet } = this.props.viewportData;
+    const { displaySet } = this.props;
     const {
       StudyInstanceUID,
       displaySetInstanceUID,
-      sopClassUIDs,
-      SOPInstanceUID,
-      frameIndex,
+      sopClassUids,
     } = displaySet;
 
     if (!StudyInstanceUID || !displaySetInstanceUID) {
       return;
     }
 
-    if (sopClassUIDs && sopClassUIDs.length > 1) {
+    if (sopClassUids && sopClassUids.length > 1) {
       console.warn(
         'More than one SOPClassUID in the same series is not yet supported.'
       );
     }
 
-    this.getViewportData(
-      studies,
-      StudyInstanceUID,
-      displaySetInstanceUID,
-      SOPInstanceUID,
-      frameIndex
-    ).then(viewportData => {
+    this.getViewportData(displaySet).then(viewportData => {
       this.setState({
         viewportData,
       });
@@ -175,8 +126,8 @@ class OHIFCornerstoneViewport extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { displaySet } = this.props.viewportData;
-    const prevDisplaySet = prevProps.viewportData.displaySet;
+    const { displaySet } = this.props;
+    const prevDisplaySet = prevProps.displaySet;
 
     if (
       displaySet.displaySetInstanceUID !==
@@ -232,9 +183,11 @@ class OHIFCornerstoneViewport extends Component {
       700
     );
 
+    // TODO -> We may still want a wrapped component to define all the measurement api stuff.
+
     return (
       <>
-        <ConnectedCornerstoneViewport
+        {/* <ConnectedCornerstoneViewport
           viewportIndex={viewportIndex}
           imageIds={imageIds}
           imageIdIndex={currentImageIdIndex}
@@ -246,6 +199,16 @@ class OHIFCornerstoneViewport extends Component {
           // onElementEnabled={() => {}}
           // setViewportActive{() => {}}
           {...this.props.customProps}
+        /> */}
+        <CornerstoneViewport
+          viewportIndex={viewportIndex}
+          imageIds={imageIds}
+          imageIdIndex={currentImageIdIndex}
+          onNewImage={debouncedNewImageHandler}
+          isActive={true} // todo
+          isStackPrefetchEnabled={true} // todo
+          isPlaying={false}
+          frameRate={24}
         />
         {childrenWithProps}
       </>

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,