Update repo with new features and fixes (#74)

Update repo with new features and fixes
AdrianBZG · May 20, 2019 · d4e5208 · d4e5208
2 parents 2d66d43 + e3aaf0d
commit d4e5208
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 17 deletions.
diff --git a/public/javascripts/common.min.js b/public/javascripts/common.min.js
@@ -120,6 +120,11 @@ function initializeStartupConfiguration() {
         $("#listManagerModal").modal("show");
     })
 
+    $("#viewConstraintsButton").click(function() {
+        initializeConstraintsList();
+        $("#constraintsModal").modal("show");
+    })
+
     // Handle the view manager buttons
     $("#viewManagerButton").click(function() {
         // Update the key manager structures
@@ -138,6 +143,27 @@ function initializeStartupConfiguration() {
     createSidebarEvents();
 }
 
+/**
+ * Method to initialize the constraint list from the IM table
+ */
+
+function initializeConstraintsList() {
+    var tableConstraints = window.imTable.query.constraints;
+    if(tableConstraints.length > 0) {
+        var listHtml = "";
+        for(var i = 0; i < tableConstraints.length; i++) {
+            if(tableConstraints[i].value) {
+                listHtml += "<li class='list-group-item'>" + tableConstraints[i].path + " " + tableConstraints[i].op + " " + tableConstraints[i].value + "</li>";
+            } else {
+                listHtml += "<li class='list-group-item'>" + tableConstraints[i].path + " " + tableConstraints[i].op + " " + tableConstraints[i].values + "</li>";
+            }
+        }
+        $('#constraintsModalList').html(listHtml);
+    } else {
+        $('#constraintsModalList').html("<center>You haven't added any constraint.</center>");
+    }
+}
+
 /**
  * Method to initialize the saved lists based on the API Keys
  */
@@ -424,10 +450,6 @@ function clearCustomFilters() {
     window.CustomFiltersAdded = false;
 }
 
-function foo(element) {
-    console.log($(element).val());
-}
-
 function addCustomFilters() {
     if (!window.CustomFiltersAdded) {
         // Read the JSON config file
@@ -539,7 +561,7 @@ function addCustomFilters() {
 
             if (filter.length > 0) {
                 $("#sidebarUl").append(
-                    '<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Expression" id="expressionFilterLi"><a class="nav-link" data-toggle="collapse" href="#expressionSearchCardBlock" aria-controls="expressionSearchCardBlock" style="color:black;"><i class="fa fa-fw fa-tasks"></i><span class="nav-link-text"></span>Expression</a><div class="card" style="width: 100%;"><div class="collapse card-block" id="expressionSearchCardBlock" style="overflow-y: auto; overflow-x:hidden;"><div class="ul list-group list-group-flush" id="expressionFilterList"></div><form-group class="ui-front"><div class="row" style="align: center;"><select class="form-control" id="expressionDatasetSelector" style="width: 100%; float:left; margin-left: 15px;"><option value="E-MTAB-62">Dataset: E-MTAB-62</option><option value="E-MTAB-513">Dataset: Illumina bodymap (E-MTAB-513)</option></select></div><div class="row" style="align: center;"><select class="form-control" id="expressionExpressionSelector" style="width: 100%; float:left; margin-left: 15px;"><option value="UP">Expression: UP</option><option value="DOWN">Expression: DOWN</option><option value="NONDE">Expression: NONDE</option></select></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionPvalueSearchInput" placeholder="P-value (Opt)" style="width: 100%; float:left; margin-left: 15px;"/><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionTstatisticSearchInput" placeholder="T-statistic (Opt)" style="width: 100%; float:left; margin-left: 30px;"/></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionTissueSearchInput" placeholder="Tissue (e.g. brain)" style="width: 100%; float:left; margin-left: 60px; display:none;"/></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionFPKMSearchInput" placeholder="FPKM value (e.g. 0.8)" style="width: 100%; float:left; margin-left: 30px; display:none;"/></div><button class="btn btn-success" type="button" style="width:100%;" id="expressionSearchButton">Go!</button><button class="btn btn-secondary" type="button" style="width:100%;" id="expressionResetButton">Reset</button></form-group></div></div></li>');
+                    '<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Expression" id="expressionFilterLi"><a class="nav-link" data-toggle="collapse" href="#expressionSearchCardBlock" aria-controls="expressionSearchCardBlock" style="color:black;"><i class="fa fa-fw fa-tasks"></i><span class="nav-link-text"></span>Expression</a><div class="card" style="width: 100%;"><div class="collapse card-block" id="expressionSearchCardBlock" style="overflow-y: auto; overflow-x:hidden;"><div class="ul list-group list-group-flush" id="expressionFilterList"></div><form-group class="ui-front"><div class="row" style="align: center;"><select class="form-control" id="expressionDatasetSelector" style="width: 100%;"><option value="E-MTAB-62">Dataset: E-MTAB-62</option><option value="E-MTAB-513">Dataset: Illumina bodymap (E-MTAB-513)</option></select></div><div class="row" style="align: center;"><select class="form-control" id="expressionExpressionSelector" style="width: 100%;"><option value="UP">Expression: UP</option><option value="DOWN">Expression: DOWN</option><option value="NONDE">Expression: NONDE</option></select></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionPvalueSearchInput" placeholder="P-value (Opt)" style="width: 100%; margin-left: 5px;"/></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionTstatisticSearchInput" placeholder="T-statistic (Opt)" style="width: 100%; margin-left: 5px;"/></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionTissueSearchInput" placeholder="Tissue (e.g. brain)" style="width: 100%; margin-left: 5px; display:none;"/></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionFPKMSearchInput" placeholder="FPKM value (e.g. 0.8)" style="width: 100%; margin-left: 5px; display:none;"/></div><button class="btn btn-success" type="button" style="width:100%;" id="expressionSearchButton">Go!</button><button class="btn btn-secondary" type="button" style="width:100%;" id="expressionResetButton">Reset</button></form-group></div></div></li>');
 
                 $('#expressionSearchButton').click(function() {
                     if (window.expressionFilter) clearExpressionFilterConstraint();
@@ -568,7 +590,7 @@ function addCustomFilters() {
                     var filterQueryDatasetName = filter[0].filterQuery[3];
                     filterQueryDatasetName.value = expressionDatasetSelector;
                     var filterQueryTissueName = filter[0].filterQuery[4];
-                    filterQueryTissueName.value = expressionDatasetSelector;
+                    filterQueryTissueName.value = expressionTissue;
 
                     if(expressionDatasetSelector == "E-MTAB-62") {
                         if (expressionPvalue) {
@@ -589,7 +611,7 @@ function addCustomFilters() {
                             window.expressionFilter.push(window.imTable.query.constraints[window.imTable.query.constraints.length - 1]);
                         }
                     } else if(expressionDatasetSelector == "E-MTAB-513") {
-                        expressionTissue
+                        filterQueryTissueName.value = expressionTissue;
                         filterQueryExpression.value = $('#expressionFPKMSearchInput').val();
 
                         // Tissue filter
@@ -1297,6 +1319,11 @@ function updatePieChart(result, pieChartID) {
                 $(obj).addClass("checked");
             }
         });
+    } else {
+        $('.checked').each(function(i, obj) {
+            $(obj).removeClass("checked");
+            $(obj).addClass("unchecked");
+        });
     }
 
     var plotTitle = "Number of results for " + sessionStorage.getItem('currentClassView') + " by organism";

diff --git a/public/mine_configs/mines_config.json b/public/mine_configs/mines_config.json
@@ -75,7 +75,7 @@
               },
               {
                 "path": "atlasExpression.expression",
-                "op": "==",
+                "op": ">=",
                 "value": "CCC",
                 "code": "Y"
               },
@@ -87,7 +87,7 @@
               },
               {
                 "path": "atlasExpression.condition",
-                "op": ">=",
+                "op": "==",
                 "value": "BBB",
                 "code": "X"
               }

diff --git a/public/stylesheets/data-browser-style-main.css b/public/stylesheets/data-browser-style-main.css
@@ -282,6 +282,10 @@ select, button {
   color: white;
 }
 
+input, select {
+  width: 100%;
+}
+
 .smaller {
   font-size: 0.7rem;
 }

diff --git a/src/js/common.js b/src/js/common.js
@@ -120,6 +120,11 @@ function initializeStartupConfiguration() {
         $("#listManagerModal").modal("show");
     })
 
+    $("#viewConstraintsButton").click(function() {
+        initializeConstraintsList();
+        $("#constraintsModal").modal("show");
+    })
+
     // Handle the view manager buttons
     $("#viewManagerButton").click(function() {
         // Update the key manager structures
@@ -138,6 +143,27 @@ function initializeStartupConfiguration() {
     createSidebarEvents();
 }
 
+/**
+ * Method to initialize the constraint list from the IM table
+ */
+
+function initializeConstraintsList() {
+    var tableConstraints = window.imTable.query.constraints;
+    if(tableConstraints.length > 0) {
+        var listHtml = "";
+        for(var i = 0; i < tableConstraints.length; i++) {
+            if(tableConstraints[i].value) {
+                listHtml += "<li class='list-group-item'>" + tableConstraints[i].path + " " + tableConstraints[i].op + " " + tableConstraints[i].value + "</li>";
+            } else {
+                listHtml += "<li class='list-group-item'>" + tableConstraints[i].path + " " + tableConstraints[i].op + " " + tableConstraints[i].values + "</li>";
+            }
+        }
+        $('#constraintsModalList').html(listHtml);
+    } else {
+        $('#constraintsModalList').html("<center>You haven't added any constraint.</center>");
+    }
+}
+
 /**
  * Method to initialize the saved lists based on the API Keys
  */
@@ -535,7 +561,7 @@ function addCustomFilters() {
 
             if (filter.length > 0) {
                 $("#sidebarUl").append(
-                    '<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Expression" id="expressionFilterLi"><a class="nav-link" data-toggle="collapse" href="#expressionSearchCardBlock" aria-controls="expressionSearchCardBlock" style="color:black;"><i class="fa fa-fw fa-tasks"></i><span class="nav-link-text"></span>Expression</a><div class="card" style="width: 100%;"><div class="collapse card-block" id="expressionSearchCardBlock" style="overflow-y: auto; overflow-x:hidden;"><div class="ul list-group list-group-flush" id="expressionFilterList"></div><form-group class="ui-front"><div class="row" style="align: center;"><select class="form-control" id="expressionDatasetSelector" style="width: 100%; float:left; margin-left: 15px;"><option value="E-MTAB-62">Dataset: E-MTAB-62</option><option value="E-MTAB-513">Dataset: Illumina bodymap (E-MTAB-513)</option></select></div><div class="row" style="align: center;"><select class="form-control" id="expressionExpressionSelector" style="width: 100%; float:left; margin-left: 15px;"><option value="UP">Expression: UP</option><option value="DOWN">Expression: DOWN</option><option value="NONDE">Expression: NONDE</option></select></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionPvalueSearchInput" placeholder="P-value (Opt)" style="width: 100%; float:left; margin-left: 15px;"/><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionTstatisticSearchInput" placeholder="T-statistic (Opt)" style="width: 100%; float:left; margin-left: 30px;"/></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionTissueSearchInput" placeholder="Tissue (e.g. brain)" style="width: 100%; float:left; margin-left: 60px; display:none;"/></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionFPKMSearchInput" placeholder="FPKM value (e.g. 0.8)" style="width: 100%; float:left; margin-left: 30px; display:none;"/></div><button class="btn btn-success" type="button" style="width:100%;" id="expressionSearchButton">Go!</button><button class="btn btn-secondary" type="button" style="width:100%;" id="expressionResetButton">Reset</button></form-group></div></div></li>');
+                    '<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Expression" id="expressionFilterLi"><a class="nav-link" data-toggle="collapse" href="#expressionSearchCardBlock" aria-controls="expressionSearchCardBlock" style="color:black;"><i class="fa fa-fw fa-tasks"></i><span class="nav-link-text"></span>Expression</a><div class="card" style="width: 100%;"><div class="collapse card-block" id="expressionSearchCardBlock" style="overflow-y: auto; overflow-x:hidden;"><div class="ul list-group list-group-flush" id="expressionFilterList"></div><form-group class="ui-front"><div class="row" style="align: center;"><select class="form-control" id="expressionDatasetSelector" style="width: 100%;"><option value="E-MTAB-62">Dataset: E-MTAB-62</option><option value="E-MTAB-513">Dataset: Illumina bodymap (E-MTAB-513)</option></select></div><div class="row" style="align: center;"><select class="form-control" id="expressionExpressionSelector" style="width: 100%;"><option value="UP">Expression: UP</option><option value="DOWN">Expression: DOWN</option><option value="NONDE">Expression: NONDE</option></select></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionPvalueSearchInput" placeholder="P-value (Opt)" style="width: 100%; margin-left: 5px;"/></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionTstatisticSearchInput" placeholder="T-statistic (Opt)" style="width: 100%; margin-left: 5px;"/></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionTissueSearchInput" placeholder="Tissue (e.g. brain)" style="width: 100%; margin-left: 5px; display:none;"/></div><div class="row" style="align: center;"><input class="form-control" type="text" id="expressionFPKMSearchInput" placeholder="FPKM value (e.g. 0.8)" style="width: 100%; margin-left: 5px; display:none;"/></div><button class="btn btn-success" type="button" style="width:100%;" id="expressionSearchButton">Go!</button><button class="btn btn-secondary" type="button" style="width:100%;" id="expressionResetButton">Reset</button></form-group></div></div></li>');
 
                 $('#expressionSearchButton').click(function() {
                     if (window.expressionFilter) clearExpressionFilterConstraint();
@@ -564,7 +590,7 @@ function addCustomFilters() {
                     var filterQueryDatasetName = filter[0].filterQuery[3];
                     filterQueryDatasetName.value = expressionDatasetSelector;
                     var filterQueryTissueName = filter[0].filterQuery[4];
-                    filterQueryTissueName.value = expressionDatasetSelector;
+                    filterQueryTissueName.value = expressionTissue;
 
                     if(expressionDatasetSelector == "E-MTAB-62") {
                         if (expressionPvalue) {
@@ -585,7 +611,7 @@ function addCustomFilters() {
                             window.expressionFilter.push(window.imTable.query.constraints[window.imTable.query.constraints.length - 1]);
                         }
                     } else if(expressionDatasetSelector == "E-MTAB-513") {
-                        expressionTissue
+                        filterQueryTissueName.value = expressionTissue;
                         filterQueryExpression.value = $('#expressionFPKMSearchInput').val();
 
                         // Tissue filter
@@ -1293,6 +1319,11 @@ function updatePieChart(result, pieChartID) {
                 $(obj).addClass("checked");
             }
         });
+    } else {
+        $('.checked').each(function(i, obj) {
+            $(obj).removeClass("checked");
+            $(obj).addClass("unchecked");
+        });
     }
 
     var plotTitle = "Number of results for " + sessionStorage.getItem('currentClassView') + " by organism";

diff --git a/src/mine_configs/mines_config.json b/src/mine_configs/mines_config.json
@@ -75,7 +75,7 @@
               },
               {
                 "path": "atlasExpression.expression",
-                "op": "==",
+                "op": ">=",
                 "value": "CCC",
                 "code": "Y"
               },
@@ -87,7 +87,7 @@
               },
               {
                 "path": "atlasExpression.condition",
-                "op": ">=",
+                "op": "==",
                 "value": "BBB",
                 "code": "X"
               }

diff --git a/src/scss/_global.scss b/src/scss/_global.scss
@@ -267,4 +267,8 @@ select, button {
   margin-right: 5px;
   background-color: #6c757d;
   color: white;
+}
+
+input, select {
+  width:100%;
 }
diff --git a/views/includes/navbar.pug b/views/includes/navbar.pug
@@ -4,16 +4,20 @@ nav#mainNav.navbar.navbar-expand-lg.navbar-light.bg-light.fixed-top
 		img(src="/img/intermine-logo.png" style="width: 24px; height: 25px;")
 	select#mineSelector.form-control(style="width: 180px; position: fixed; top: 10px; left: 75px;" data-toggle="tooltip" title="Select an InterMine")
 
-	div#headerButtons.col-md-10.text-center
+	div#headerButtons.col-md-6.text-center
 
-	button.btn.btn-primary(id="APIKeyIconBlock" style="position: fixed; top: 10px; right: 450px; background-color: transparent; border-color: transparent;")
+	button.btn.btn-primary(id="APIKeyIconBlock" style="position: fixed; top: 10px; right: 578px; background-color: transparent; border-color: transparent;")
 		i.fa.fa-user-times(id="APIKeyIconNotAdded", style="color: #000000;" data-toggle="tooltip" title="You haven't added an API key for this mine and some functionality may be unavailable.")
 		i.fa.fa-user(id="APIKeyIconAdded", style="color: #000000; display:none;" data-toggle="tooltip" title="You have added an API key for this mine.")
 
-	button.btn.btn-primary(id="resetAllButton" style="position: fixed; top: 10px; right: 354px; background-color: #868e96; border-color: #868e96;" data-toggle="tooltip" title="Reset all the filters")
+	button.btn.btn-primary(id="resetAllButton" style="position: fixed; top: 10px; right: 484px; background-color: #868e96; border-color: #868e96;" data-toggle="tooltip" title="Reset all the filters")
 		i.fa.fa-recycle(style="margin-right: 5px;")
 		span.nav-link-text
 		| Reset
+	button.btn.btn-primary(id="viewConstraintsButton" style="position: fixed; top: 10px; right: 352px; background-color: #2439d8; border-color: #2439d8;" data-toggle="tooltip" title="See the current constraints")
+		i.fa.fa-adjust(style="margin-right: 5px;")
+		span.nav-link-text
+		| Constraints
 	button.btn.btn-primary(id="viewManagerButton" style="position: fixed; top: 10px; right: 236px; background-color: #2439d8; border-color: #2439d8;" data-toggle="tooltip" title="Open the views manager")
 		i.fa.fa-eye(style="margin-right: 5px;")
 		span.nav-link-text
@@ -117,6 +121,25 @@ nav#mainNav.navbar.navbar-expand-lg.navbar-light.bg-light.fixed-top
 					button.btn(type='button' id="listManagerResetButton", disabled="true") Reset
 					button.btn.btn-danger(type='button' data-dismiss='modal') Close
 			.modal-body
+				| In this modal you can filter to see only the genes in a InterMine list. Please note that when filtering by a list, the current data constraints will be reset.
+				br
+				br
 				ul#savedLists.list-group
 					| Loading data...
+			.modal-footer
+
+//Constraints modal
+#constraintsModal.modal.fade(role='dialog')
+	.modal-dialog.modal-lg
+		.modal-content
+			.modal-header
+				h4.modal-title Constraints Viewer
+				#constraintsModalButtons
+					button.btn.btn-danger(type='button' data-dismiss='modal') Close
+			.modal-body
+				| In this modal you can, in a single view, see what constraints you have applied.
+				br
+				br
+				ul#constraintsModalList.list-group
+					| Loading...
 			.modal-footer