From aa170e9a89d1657fda6ae874949262dc13655dc9 Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Mon, 3 Dec 2018 23:56:29 +0100
Subject: [PATCH] wip on react transition 10

---
 .../CornerstoneViewport.js                    |  3 +-
 .../CornerstoneViewport.styl                  |  2 +-
 .../viewer/GridLayout/GridLayout.js           | 32 ++++++++++++++-----
 StandaloneViewer/.gitignore                   |  4 +--
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.js b/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.js
index dd592793f..27fe94c61 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.js
+++ b/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
diff --git a/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.styl b/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.styl
index 261365a59..d42dd76cf 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.styl
+++ b/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
diff --git a/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js b/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js
index 7a99f3018..93e3700c1 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js
+++ b/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}`;
 
diff --git a/StandaloneViewer/.gitignore b/StandaloneViewer/.gitignore
index a5b8b18b4..02359136c 100644
--- a/StandaloneViewer/.gitignore
+++ b/StandaloneViewer/.gitignore
@@ -1,4 +1,4 @@
 myOutputFolder/
 node_modules
-client/sha.js
-client/version.js
\ No newline at end of file
+StandaloneViewer/client/sha.js
+StandaloneViewer/client/version.js
\ No newline at end of file