Fixes for passing configuration / children into the cornerstone-extension

Packages-react/extensions/ohif-cornerstone-extension/src/ConnectedCornerstoneViewport.js

@@ -8,10 +8,10 @@ const { setViewportActive, setViewportSpecificData, clearViewportSpecificData }
 
 const mapStateToProps = (state, ownProps) => {
     const activeButton = state.tools.buttons.find(tool => tool.active === true);
-    let availableTools;
+    let dataFromStore;
 
-    if (state.extensions && state.extensions.cornerstone && state.extensions.cornerstone.availableTools) {
-      availableTools = state.extensions.cornerstone.availableTools;
+    if (state.extensions && state.extensions.cornerstone) {
+      dataFromStore = state.extensions.cornerstone;
     };
 
     // If this is the active viewport, enable prefetching.
@@ -23,7 +23,7 @@ const mapStateToProps = (state, ownProps) => {
         layout: state.viewports.layout,
         isActive,
         activeTool: activeButton && activeButton.command,
-        availableTools,
+        ...dataFromStore,
         enableStackPrefetch: isActive,
         //stack: viewportSpecificData.stack,
         cineToolData: viewportSpecificData.cine,

Packages-react/extensions/ohif-cornerstone-extension/src/OHIFCornerstoneViewport.js

@@ -168,6 +168,15 @@ class OHIFCornerstoneViewport extends Component {
   }
 
   render() {
+    const childrenWithProps = null;
+
+    // TODO: Does it make more sense to use Context?
+    if (this.props.children && this.props.children.length) {
+      this.props.children.map((child, index) => {
+        return React.cloneElement(child, { viewportIndex: this.props.viewportIndex, key: index})
+      });
+    }
+
     return (<>
       {this.state.viewportData && (
         <ConnectedCornerstoneViewport
@@ -175,7 +184,7 @@ class OHIFCornerstoneViewport extends Component {
           viewportIndex={this.props.viewportIndex}
         />
       )}
-      {this.props.children}
+      {childrenWithProps}
       </>
     );
   }