wip on react transition 10

Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.js

@@ -185,8 +185,7 @@ class CornerstoneViewport extends Component {
               viewport={
                         this.state.viewport
                     }
-            /> </div > <div className="viewportInstructions" >
-      Please drag a stack here to view images. </div> {
+            /> </div > {
                 this.displayScrollbar && (<ImageScrollbar
                   onInputCallback={
                         this.imageSliderOnInputCallback

Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.styl

@@ -18,7 +18,7 @@
   overflow: hidden
 
 .viewportInstructions
-  display: none
+  display: block
   font-size: 13px
   theme('color', '$textSecondaryColor')
   line-height: 18px

Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js

@@ -76,6 +76,10 @@ class GridLayout extends Component {
 
         const viewports = viewportData.map((data, index) => {
             const className = `viewportContainer ${this.getClass(index)} ${this.getActiveClass(index)}`;
+            
+            // TODO[react]: Not sure why I needed to do this. Looks like
+            // empty viewports aren't provided with a viewportIndex normally?
+            data.viewportIndex = index;
 
             const styles = {
                 height: `${height}%`,
@@ -91,16 +95,28 @@ class GridLayout extends Component {
                 </div>
             );
 
+            let contents;            
+            if (!data.studyInstanceUid || !data.displaySetInstanceUid) {
+                contents = (
+                    <div className="CornerstoneViewport">
+                        <div className="viewportInstructions">
+                        Please drag a stack here to view images.
+                        </div>
+                    </div>
+                );
+            } else if (data.plugin === 'cornerstone') {
+                contents = cornerstoneViewport(data);
+            } else {
+                contents = pluginViewport(data);
+            }
+
             return (
                 <div key={index} className={className} style={styles}>
-                {data.plugin === 'cornerstone' ?
-                    cornerstoneViewport(data) :
-                    pluginViewport(data)
-                }
-                {/*{>seriesQuickSwitch (clone this viewport=viewport viewportIndex=@index)}*/}
-            </div>
-            )
-        })
+                    {contents}
+                    {/*{>seriesQuickSwitch (clone this viewport=viewport viewportIndex=@index)}*/}
+                </div>
+            );
+        });
 
         const layoutClass = `layout-${rows}-${columns}`;
 

StandaloneViewer/.gitignore

@@ -1,4 +1,4 @@
 myOutputFolder/
 node_modules
-client/sha.js
-client/version.js
+StandaloneViewer/client/sha.js
+StandaloneViewer/client/version.js