Updated UI for coverage selection

NBISweden · Jun 25, 2018 · c7cc4c9 · c7cc4c9
1 parent 93f8a00
commit c7cc4c9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/frontend/src/js/controller.browserController.js b/frontend/src/js/controller.browserController.js
@@ -8,6 +8,7 @@
         localThis.activeSuggestion = -1;
         localThis.orderByField = "variantId";
         localThis.reverseSort = false;
+
         localThis.coverage = {};
         localThis.coverage.region = {"start":null,
                                      "stop":null,
@@ -16,10 +17,13 @@
                                     };
         localThis.coverage.zoom = "overview";
         localThis.coverage.function = "mean";
+        localThis.coverage.coverageMetric = "mean";
+        localThis.coverage.overValue = 50;
         localThis.coverage.includeUTR = true;
         localThis.coverage.data = [];
         localThis.coverage.update = 0;
         localThis.variants = [];
+        localThis.updatedOverValue = updatedOverValue;
 
         localThis.item = null;
         localThis.itemType = null;
@@ -185,5 +189,8 @@
             localThis.orderByField = field;
         }
 
+        function updatedOverValue() {
+            localThis.coverage.coverageMetric = "over";
+        }
     }]);
 })();
diff --git a/frontend/src/js/directive.coverage.js b/frontend/src/js/directive.coverage.js
@@ -41,6 +41,14 @@
                 });
 
                 scope.$watch("ctrl.coverage", function(newValue) {
+                    // Update the coverage function
+                    if ( newValue.coverageMetric == "over" ) {
+                        newValue.function = newValue.overValue;
+                    }
+                    else {
+                        newValue.function = newValue.coverageMetric;
+                    }
+
                     // set zoom level
                     var width = element[0].parentElement.clientWidth;
                     if (newValue.zoom == "detail") {

diff --git a/frontend/templates/ng-templates/browser-coverage-plot.jj2 b/frontend/templates/ng-templates/browser-coverage-plot.jj2
@@ -27,17 +27,19 @@
         <label>Coverage metrics:</label>
         <span>
             <label>
-                <input type="radio" ng-model="ctrl.coverage.function" value="mean">
+                <input type="radio" ng-model="ctrl.coverage.coverageMetric" value="mean">
                 Mean
             </label>
             <label>
-                <input type="radio" ng-model="ctrl.coverage.function" value="median">
+                <input type="radio" ng-model="ctrl.coverage.coverageMetric" value="median">
                 Median
             </label>
             <label>
+                <input type="radio" ng-model="ctrl.coverage.coverageMetric" value="over">
                 Individuals over
-                <select ng-model="ctrl.coverage.function" ng-selected="ctrl.coverage.function"
-                        ng-options="cov for cov in [1,5,10,15,20,25,30,50,100]">
+                <select ng-model="ctrl.coverage.overValue" ng-selected="ctrl.coverage.overValue"
+                        ng-options="cov for cov in [1,5,10,15,20,25,30,50,100]"
+                        ng-change="ctrl.updatedOverValue()">
                         {{ cov }}
                 </select> X coverage
             </label>