Merge pull request #21 from transmart/sascha-developments

SH-169 + eye candy and some UX improvements
transmart · Apr 28, 2016 · 149cffa · 149cffa
2 parents 7e3a949 + 129edae
commit 149cffa
Show file tree

Hide file tree

Showing 16 changed files with 223 additions and 89 deletions.
diff --git a/grails-app/views/layouts/_boxplot.gsp b/grails-app/views/layouts/_boxplot.gsp
@@ -5,9 +5,9 @@
 
     <tab-container>
 
-        <workflow-tab tab-name="Fetch Data">
+        <workflow-tab tab-name="Fetch Data" disabled="fetch.disabled">
             <concept-box style="display: inline-block;"
-                         concept-group="conceptBoxes.datapoints"
+                         concept-group="fetch.conceptBoxes.datapoints"
                          type="LD-numerical"
                          min="1"
                          max="1"
@@ -17,7 +17,7 @@
             %{--Nice idea but somehow lost it's initial purpose because cross-study support is gone.
                 Maybe implement later--}%
             %{--<concept-box style="display: inline-block;"--}%
-                         %{--concept-group="conceptBoxes.subsets"--}%
+                         %{--concept-group="fetch.conceptBoxes.subsets"--}%
                          %{--type="LD-categorical"--}%
                          %{--min="0"--}%
                          %{--max="-1"--}%
@@ -26,22 +26,24 @@
             %{--</concept-box>--}%
             <br/>
             <br/>
-            <fetch-button concept-map="conceptBoxes" show-summary-stats="false" disabled="false"></fetch-button>
+            <fetch-button concept-map="fetch.conceptBoxes"
+                          loaded="fetch.loaded"
+                          running="fetch.running">
+            </fetch-button>
         </workflow-tab>
 
-        <workflow-tab tab-name="Run Analysis">
+        <workflow-tab tab-name="Run Analysis" disabled="runAnalysis.disabled">
             <br/>
             <br/>
             <run-button button-name="Create Plot"
-                        store-results-in="scriptResults"
+                        store-results-in="runAnalysis.scriptResults"
                         script-to-run="run"
-                        arguments-to-use="params"
-                        serialized="false"
-                        disabled="false">
+                        arguments-to-use="runAnalysis.params"
+                        running="runAnalysis.running">
             </run-button>
             <br/>
             <br/>
-            <boxplot data="scriptResults" width="1000" height="500"></boxplot>
+            <boxplot data="runAnalysis.scriptResults" width="1000" height="500"></boxplot>
         </workflow-tab>
 
     </tab-container>

diff --git a/grails-app/views/layouts/_correlation.gsp b/grails-app/views/layouts/_correlation.gsp
@@ -5,17 +5,17 @@
 
         <tab-container>
 
-            <workflow-tab tab-name="Fetch Data">
+            <workflow-tab tab-name="Fetch Data" disabled="fetch.disabled">
                 <concept-box style="display: inline-block"
-                             concept-group="conceptBoxes.datapoints"
+                             concept-group="fetch.conceptBoxes.datapoints"
                              type="LD-numerical"
                              min="2"
                              max="2"
                              label="Numerical Variables"
                              tooltip="Select two numerical variables from the tree to compare them.">
                 </concept-box>
                 <concept-box style="display: inline-block;"
-                             concept-group="conceptBoxes.annotations"
+                             concept-group="fetch.conceptBoxes.annotations"
                              type="LD-categorical"
                              min="0"
                              max="-1"
@@ -24,31 +24,38 @@
                 </concept-box>
                 <br/>
                 <br/>
-                <fetch-button concept-map="conceptBoxes"
-                              show-summary-stats="false"
-                                disabled="false">
+                <fetch-button concept-map="fetch.conceptBoxes"
+                              loaded="fetch.loaded"
+                              running="fetch.running">
                 </fetch-button>
             </workflow-tab>
 
-            <workflow-tab tab-name="Run Analysis">
-                <select ng-model="params.method">
-                    <option value="pearson">Pearson (Default)</option>
-                    <option value="kendall">Kendall</option>
-                    <option value="spearman">Spearman</option>
-                </select>
-
+            <workflow-tab tab-name="Run Analysis" disabled="runAnalysis.disabled">
+                <div class="heim-input-field sr-input-area">
+                    <h2>Correlation computation method:</h2>
+                    <fieldset class="heim-radiogroup">
+                        <label>
+                            <input type="radio" ng-model="runAnalysis.params.method" name="sortingSelect" value="pearson" checked> Pearson
+                        </label>
+                        <label>
+                            <input type="radio" ng-model="runAnalysis.params.method" name="sortingSelect" value="kendall"> Kendall
+                        </label>
+                        <label>
+                            <input type="radio" ng-model="runAnalysis.params.method" name="sortingSelect" value="spearman"> Spearman
+                        </label>
+                    </fieldset>
+                </div>
                 <br/>
                 <br/>
                 <run-button button-name="Create Plot"
-                            store-results-in="scriptResults"
+                            store-results-in="runAnalysis.scriptResults"
                             script-to-run="run"
-                            arguments-to-use="params"
-                            serialized="false"
-                            disabled="false">
+                            arguments-to-use="runAnalysis.params"
+                            running="runAnalysis.running">
                 </run-button>
                 <br/>
                 <br/>
-                <correlation-plot data="scriptResults" width="1500" height="1500"></correlation-plot>
+                <correlation-plot data="runAnalysis.scriptResults" width="1500" height="1500"></correlation-plot>
             </workflow-tab>
 
         </tab-container>

diff --git a/grails-app/views/layouts/_heatmap.gsp b/grails-app/views/layouts/_heatmap.gsp
@@ -87,6 +87,26 @@
                 </fieldset>
             </div>
 
+            <div class="heim-input-field sr-input-area">
+                <h2>I have read and accept the <a href=http://www.lifemapsc.com/genecards-suite-terms-of-use/ target="_blank">
+                    GeneCards TOU</a>
+                </h2>
+                <fieldset class="heim-radiogroup">
+                    <label>
+                        <input type="radio"
+                               ng-model="runAnalysis.params.geneCardsAllowed"
+                               name="geneCardsAllowedSelect"
+                               ng-value="true"> yes (use GeneCards)
+                    </label>
+                    <label>
+                        <input type="radio"
+                               ng-model="runAnalysis.params.geneCardsAllowed"
+                               name="geneCardsAllowedSelect"
+                               ng-value="false" checked> no (use EMBL EBI)
+                    </label>
+                </fieldset>
+            </div>
+
             %{--Type of sorting to apply--}%
             <div class="heim-input-field  sr-input-area">
                 <sorting-criteria criteria="runAnalysis.params.ranking"

diff --git a/test/unit/javascript/fetchButtonDirectiveTests.js b/test/unit/javascript/fetchButtonDirectiveTests.js
@@ -70,7 +70,7 @@ describe('fetchButton', function() {
     });
 
     it('should show another text after data is loaded if showSummaryStats is enabled', function() {
-        _prepareScope(1, true, {foo: ['concept']});
+        _prepareScope(1, true, {foo: {concepts: ['concept'], valid: true}});
         try { // we just want to see if the progress message is there
             _clickButton('resolve()');
         } catch (e) {}
@@ -82,7 +82,7 @@ describe('fetchButton', function() {
     });
 
     it('should have the correct scope when successful without showSummaryStats', function() {
-        _prepareScope(2, false, {foo: ['concept']});
+        _prepareScope(2, false, {foo: {concepts: ['concept'], valid: true}});
         _clickButton('resolve()');
         expect(element.find('span').text()).toBe('Task complete! Go to the "Preprocess" or "Run Analysis" tab to continue.');
         expect(element.isolateScope().running).toBe(false);
@@ -92,7 +92,7 @@ describe('fetchButton', function() {
     });
 
     it('should have the correct scope when successful with showSummaryStats', function() {
-        _prepareScope(1, true, {foo: ['concept']});
+        _prepareScope(1, true, {foo: {concepts: ['concept'], valid: true}});
         _clickButton('resolve()', 'resolve({result: {allSamples: 1337, subsets: null}})');
         expect(element.find('span').text()).toBe('Task complete! Go to the "Preprocess" or "Run Analysis" tab to continue.');
         expect(element.isolateScope().running).toBe(false);
@@ -102,14 +102,21 @@ describe('fetchButton', function() {
     });
 
     it('should show error due to missing cohorts', function() {
-        _prepareScope(0, false, {foo: ['concept']});
+        _prepareScope(0, false, {foo: {concepts: ['concept'], valid: true}});
         _clickButton();
         expect(element.find('span').text()).toBe('Error: No cohorts selected!');
     });
 
     it('should show error due to missing concepts', function() {
-        _prepareScope(1, false, {});
+        _prepareScope(1, false, {foo: {concepts: [], valid: true}});
         _clickButton();
         expect(element.find('span').text()).toBe('Error: No concepts selected!');
     });
+
+    it('should show error due to invalid concepts', function() {
+        _prepareScope(1, false, {foo: {concepts: [], valid: false}});
+        _clickButton();
+        expect(element.find('span').text()).toBe('Error: Your data do not match the requirements! All fields must be green.');
+    });
 });
+
diff --git a/test/unit/javascript/smartRUtilsServiceTests.js b/test/unit/javascript/smartRUtilsServiceTests.js
@@ -15,7 +15,11 @@ describe('smartRUtils', function() {
     });
 
     it('has working conceptBoxMapToConceptKeys()', function() {
-        var params = {a: ['c1', 'c2'], 'foo bar __-!*()123 abc': ['c3'], b: [], c: ['12--_- c31/??/*&^/foobar']};
+        var params = {a: {concepts: ['c1', 'c2'], valid: true}, 
+            'foo bar __-!*()123 abc': {concepts: ['c3'], valid: true},
+            b: {concepts: [], valid: true},
+            c: {concepts: ['12--_- c31/??/*&^/foobar'], valid: true}
+        };
         var expected = {a_n0: 'c1', a_n1: 'c2', 'foo bar __-!*()123 abc_n0': 'c3', c_n0: '12--_- c31/??/*&^/foobar'};
         var result = smartRUtils.conceptBoxMapToConceptKeys(params);
         expect(result).toEqual(expected);

diff --git a/web-app/HeimScripts/heatmap/run.R b/web-app/HeimScripts/heatmap/run.R
@@ -14,7 +14,7 @@ source(limmaUtils)
 SUBSET1REGEX <- "_s1$"  # Regex identifying columns of subset 1.
 markerTableJson <- "markerSelectionTable.json" # Name of the json file with limma outputs
 
-main <- function(max_rows = 100, sorting = "nodes", ranking = "coef") {
+main <- function(max_rows = 100, sorting = "nodes", ranking = "coef", geneCardsAllowed = FALSE) {
     max_rows <- as.numeric(max_rows)
     verifyInput(max_rows, sorting)
     df <- parseInput()

diff --git a/web-app/css/heatmap.css b/web-app/css/heatmap.css
@@ -66,6 +66,12 @@
 
 .uid {
     font-size: 12pt;
+    cursor: pointer;
+}
+
+.uid:hover {
+    fill: blue;
+    text-decoration: underline;
 }
 
 .selectText {

diff --git a/web-app/js/smartR/_angular/controllers/boxplot.js b/web-app/js/smartR/_angular/controllers/boxplot.js
@@ -9,12 +9,37 @@ window.smartRApp.controller('BoxplotController', [
 
         commonWorkflowService.initializeWorkflow('boxplot', $scope);
 
-        // model
-        $scope.conceptBoxes = {
-            datapoints: []
+        $scope.fetch = {
+            running: false,
+            disabled: false,
+            loaded: false,
+            conceptBoxes: {
+                datapoints: {concepts: [], valid: false}
+            }
         };
-        $scope.scriptResults = {};
-        $scope.params = {};
-    }]);
 
+        $scope.runAnalysis = {
+            running: false,
+            disabled: true,
+            scriptResults: {},
+            params: {}
+        };
+
+        $scope.$watchGroup(['fetch.running', 'runAnalysis.running'],
+            function(newValues) {
+                var fetchRunning = newValues[0],
+                    runAnalysisRunning = newValues[1];
+
+                // clear old results
+                if (fetchRunning) {
+                    $scope.runAnalysis.scriptResults = {};
+                }
+
+                // disable tabs when certain criteria are not met
+                $scope.fetch.disabled = runAnalysisRunning;
+                $scope.runAnalysis.disabled = fetchRunning || !$scope.fetch.loaded;
+            }
+        );
+
+    }]);
 
diff --git a/web-app/js/smartR/_angular/controllers/correlation.js b/web-app/js/smartR/_angular/controllers/correlation.js
@@ -1,16 +1,47 @@
+//# sourceURL=correlation.js
+
+'use strict';
 
 window.smartRApp.controller('CorrelationController',
     ['$scope', 'smartRUtils', 'commonWorkflowService', function($scope, smartRUtils, commonWorkflowService) {
 
         commonWorkflowService.initializeWorkflow('correlation', $scope);
 
-        // model
-        $scope.conceptBoxes = {
-            datapoints: [],
-            annotations: []
+        $scope.fetch = {
+            valid: false,
+            disabled: false,
+            running: false,
+            loaded: false,
+            conceptBoxes: {
+                datapoints: {concepts: [], valid: false},
+                annotations: {concepts: [], valid: true}
+            }
         };
-        $scope.scriptResults = {};
-        $scope.params = {
-            method: 'pearson'
+
+        $scope.runAnalysis = {
+            disabled: true,
+            running: false,
+            scriptResults: {},
+            params: {
+                method: 'pearson'
+            }
         };
+
+        $scope.$watchGroup(['fetch.running', 'runAnalysis.running'],
+            function(newValues) {
+                var fetchRunning = newValues[0],
+                    runAnalysisRunning = newValues[1];
+
+                // clear old results
+                if (fetchRunning) {
+                    $scope.runAnalysis.scriptResults = {};
+                }
+
+                // disable tabs when certain criteria are not met
+                $scope.fetch.disabled = runAnalysisRunning;
+                $scope.runAnalysis.disabled = fetchRunning || !$scope.fetch.loaded;
+            }
+        );
+
     }]);
+
diff --git a/web-app/js/smartR/_angular/controllers/heatmap.js b/web-app/js/smartR/_angular/controllers/heatmap.js
@@ -17,9 +17,9 @@ window.smartRApp.controller('HeatmapController', [
             running: false,
             loaded: false,
             conceptBoxes: {
-                highDimensional: [],
-                numerical: [],
-                categorical: []
+                highDimensional: {concepts: [], valid: false},
+                numerical: {concepts: [], valid: true},
+                categorical: {concepts: [], valid: true}
             },
             selectedBiomarkers: [],
             scriptResults: {}
@@ -46,7 +46,8 @@ window.smartRApp.controller('HeatmapController', [
             params: {
                 max_row: 100,
                 sorting: 'nodes',
-                ranking: 'coef'
+                ranking: 'coef',
+                geneCardsAllowed: false,
             },
             download: {
                 disabled: true

diff --git a/web-app/js/smartR/_angular/directives/capturePlotButton.js b/web-app/js/smartR/_angular/directives/capturePlotButton.js
@@ -1,5 +1,7 @@
 //# sourceURL=capturePlotButton.js
 
+'use strict';
+
 window.smartRApp.directive('capturePlotButton', [function() {
 
     // aux for downloadSVG
@@ -35,10 +37,10 @@ window.smartRApp.directive('capturePlotButton', [function() {
                 var effectiveStyle = computedStyle.getPropertyValue(property);
                 var defaultStyle = getDefaultsForElement(jqElem).getPropertyValue(property);
 
-                if (effectiveStyle != defaultStyle) {
+                if (effectiveStyle !== defaultStyle) {
                     jqElem.attr(property, effectiveStyle);
                 }
-            })
+            });
         });
 
         scratchSvg.remove();
@@ -88,7 +90,7 @@ window.smartRApp.directive('capturePlotButton', [function() {
             scope.capture = function() {
                 var svgElement = jQuery('svg.visualization')[0];
                 downloadSVG(svgElement, scope.filename);
-            }
+            };
 
         }
     };