Stop using children

platform/viewer/src/components/ViewportGrid.jsx

@@ -1,13 +1,15 @@
 /**
  * CSS Grid Reference: http://grid.malven.co/
  */
-import React, { useState } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ViewportGrid, ViewportPane } from '@ohif/ui';
 // import DefaultViewport from './DefaultViewport.js';
 // import EmptyViewport from './EmptyViewport.js';
 
 function ViewerViewportGrid(props) {
+  debugger;
+
   const {
     activeViewportIndex,
     servicesManager,
@@ -15,8 +17,6 @@ function ViewerViewportGrid(props) {
     dataSource,
   } = props;
 
-  debugger;
-
   // TODO -> Need some way of selecting which displaySets hit the viewports.
   const { DisplaySetService } = servicesManager.services;
 
@@ -50,7 +50,11 @@ function ViewerViewportGrid(props) {
   }, []);
 
   // From ViewportGridService and/or ContextProvider
-  const [viewportGrid, setViewportGrid] = useState({});
+  const [viewportGrid, setViewportGrid] = useState({
+    numCols: 1,
+    numRows: 1,
+    viewports: []
+  });
 
   // viewportData --> displaySets
 

platform/viewer/src/routes/Mode/Mode.jsx

@@ -54,6 +54,7 @@ export default function ModeRoute({
     Compose({ components: contextModuleProviders, children });
 
   function ViewportGridWithDataSource(props) {
+    debugger;
     return ViewportGrid({ ...props, dataSource });
   }
 
@@ -88,9 +89,7 @@ export default function ModeRoute({
          *  Use it from there instead of passing as a prop here.
          */}
         <DragAndDropProvider>
-          <LayoutComponent {...layoutTemplateData.props}>
-            <div>test</div>
-          </LayoutComponent>
+          <LayoutComponent {...layoutTemplateData.props} ViewportGridComp={ViewportGridWithDataSource}/>
         </DragAndDropProvider>
       </CombinedContextProvider>
       {/*</ToolbarLayoutProvider>*/}