Stop using children

extensions/default/src/ViewerLayout/index.jsx

@@ -28,12 +28,11 @@ function ViewerLayout({
   rightPanels,
   viewports,
   children,
+  ViewportGridComp
 }) {
   const [displaySets, setDisplaySets] = useState({});
 
-  const ViewportGrid = React.Children.only(children);
-  debugger;
-
+  //const ViewportGrid = React.Children.only(children);
 
   /**
    * Set body classes (tailwindcss) that don't allow vertical
@@ -109,10 +108,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
+            <ViewportGridComp
               servicesManager={servicesManager}
               viewportComponents={viewportComponents}
-            />*/}
+            />
             {/*
               viewportContents={[
                 <Viewport

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>*/}