Begin switching study browser use react-viewerbase

OHIFViewer/client/components/viewer/viewer.html

@@ -1,13 +1,19 @@
 <template name="viewer">
     {{#if and Template.subscriptionsReady}}
+        <div class="viewerDialogs-react">
+            {{> React component=CineDialog}}
+        </div>
         <div class="viewerDialogs">
-            {{>cineDialog}}
             {{>layoutChooser}}
             {{>annotationDialogs}}
         </div>
         <div id="viewer">
-            {{>toolbarSection (clone this state=state)}}
-            {{>flexboxLayout (clone this state=state)}}
+            <div>
+                {{>toolbarSection (clone this state=state)}}
+            </div>
+            <div>
+            {{> React component=FlexboxLayout studies=this.studies}}
+            </div>
         </div>
     {{else}}
         {{>loadingText}}

OHIFViewer/client/components/viewer/viewer.js

@@ -6,6 +6,9 @@ import { Tracker } from 'meteor/tracker';
 import { OHIF } from 'meteor/ohif:core';
 import { MeasurementTable } from 'meteor/ohif:measurement-table';
 
+import { CineDialog } from 'react-viewerbase';
+import FlexboxLayout from '../flexboxLayout/flexboxLayout.js';
+
 import 'meteor/ohif:cornerstone';
 import 'meteor/ohif:viewerbase';
 import 'meteor/ohif:metadata';
@@ -180,5 +183,13 @@ Template.viewer.onDestroyed(function() {
 Template.viewer.helpers({
     state() {
         return Template.instance().state;
+    },
+
+    CineDialog() {
+        return CineDialog
+    },
+
+    FlexboxLayout() {
+        return FlexboxLayout
     }
 });