#692 Introduce knetscore filtering to geneview

Rothamsted · Jul 24, 2023 · 6847d8b · 6847d8b
1 parent da76985
commit 6847d8b
Show file tree

Hide file tree

Showing 5 changed files with 391 additions and 17 deletions.
diff --git a/client-base/src/main/webapp/WEB-INF/tags/layout/page.tag b/client-base/src/main/webapp/WEB-INF/tags/layout/page.tag
@@ -26,6 +26,9 @@
         <!-- KnetMiner button css -->
         <link rel="stylesheet" type="text/css" href="html/css/button.css"/>
 
+        <!-- genes distance css -->
+        <link rel="stylesheet" type="text/css" href="html/css/genes-distance.css"/>
+
          <!-- KnetMiner common style.css -->
         <link rel="stylesheet" type="text/css" href="html/css/style.css"/>
 
@@ -120,6 +123,9 @@
         <!-- species selector file -->
         <script type="text/javascript" src="html/javascript/species-selector.js"></script>
 
+        <!-- species selector file -->
+        <script type="text/javascript" src="html/javascript/genes-distance.js"></script>
+
         <!-- multi species file -->
         <script type="text/javascript" src="html/javascript/knet-widget.js"></script>
 

diff --git a/client-base/src/main/webapp/html/css/genes-distance.css b/client-base/src/main/webapp/html/css/genes-distance.css
@@ -0,0 +1,159 @@
+.legend-actions-container{
+    display: flex;
+    width: auto;
+    align-items: center;
+    position: relative;
+}
+
+.legends-filter-button{
+    font-size: .75rem;
+    cursor: pointer;
+}
+
+.legends-reset-button{
+    margin-left: .5rem;
+}
+
+.distance-unit {
+    display: flex;
+    align-items: center;
+}
+
+.distance-unit button{
+    margin: 0 .5rem ;
+}
+.distance-buttons{
+    justify-content: flex-end;
+    margin-top: 1rem;
+}   
+
+.unit{
+    margin-left: 1.7rem;
+    border-radius: 6px;
+    border: none;
+    background-color: var(--green);
+}
+
+.filter-button{
+    float: right;
+    clear: right;
+    padding: 0.5rem 1.9rem;
+    background: var(--green);
+    border: none;
+    color: var(--white)
+}
+
+.no-border{
+    background: var(--white);
+    border: 1px solid var(--green);
+    color: var(--green);
+}
+
+.score-range{
+    position: absolute;
+    width: 67%;
+    outline: none;
+    appearance:none;
+    --webkit-appearance:none;
+    cursor: pointer;
+    height: .25rem;
+    border-radius: 0.75rem;
+    background:none;
+    top: 0.3pc;
+    left: 7pc;
+    pointer-events: none;
+}
+
+
+.range-slider{
+    height: 0.25rem;
+    width: 67%;
+    position: absolute;
+    background-color: #BDC5CE;
+    top: 0.41pc;
+    left: 7.12pc;
+    border-radius: 0.75rem;
+}
+
+
+.range-selected {
+    height: 100%;
+    position: absolute;
+    border-radius: 5px;
+    right: 0%;
+    left: 0%;
+    background-color: var(--green);
+  }
+
+.score-range::-webkit-slider-thumb{
+    appearance: none;
+    background: var(--white);
+    border: 2px solid var(--green);
+    height: 1.5rem;
+    width: 1.5rem;
+    border-radius: 100%;
+    pointer-events: auto;
+}
+
+.knetscore-container{
+    display: flex;
+    flex-direction:column;
+    position: relative;
+}
+
+.score-container{
+    position: relative;
+}
+
+.score-value-container{
+    display: flex;
+    justify-content:space-between;
+    align-items: center;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+    margin-left: .5rem;
+
+}
+
+.score-value-container input {
+    width: 20%;
+    border: none;
+    outline: none;
+    text-align: right;
+    color: #BDC5CE;
+
+}
+
+#minValue{
+    text-align: left;
+}
+
+.score-value-container input::-webkit-progress-inner-element,
+input[type="number"]::-webkit-outer-spin-button 
+{
+    opacity: 1;
+}
+
+
+.filter-button{
+    margin-top: 1rem;
+}
+
+.knetscore-title-container{
+    display: flex;
+    align-items: center;
+    justify-content:space-evenly;
+}
+
+.score-range-container{
+    position: relative;
+    display: inline-flex;
+    margin-top: 1.5rem;
+
+}
+
+.score-class span{
+    font-size: 1.2rem;
+    font-weight: 500;
+}
+
diff --git a/client-base/src/main/webapp/html/css/style.css b/client-base/src/main/webapp/html/css/style.css
@@ -19,8 +19,7 @@
     --progress-bar-width: 30px;
     --progress-bar-height: 30px;
     --font-size: 2rem;
-    --default-range: calc(5/10 * 100%); 
-    --default-distance: calc(5/10 * 100%)
+    --placeholder-color:#BDC5CE; 
 
 }
 
@@ -2647,7 +2646,10 @@ a {
 
 .filter-popup{
     padding: .5rem;
+}
 
+.filter-form{
+    position: relative;
 }
 
 .filter-overlay{
@@ -2666,9 +2668,10 @@ a {
 }
 
 #filter-popup{
+    width: 364px;
     border: .5px solid var(--green);
-    top:1.5pc;
-    right:2.6pc;
+    top: 1.3pc;
+    right:0.6pc;
     padding:1rem; 
 }
 
@@ -2803,6 +2806,7 @@ background-color:#EEF0F3;
 color: #C0C0C0;
 }
 
+
 .show-flex{
     display: flex;
 }
@@ -2822,11 +2826,3 @@ color: #C0C0C0;
 }
 
 
-.legends-filter-button{
-    font-size: 1rem;
-    cursor: pointer;
-}
-
-
-
-
diff --git a/client-base/src/main/webapp/html/javascript/gene-table.js b/client-base/src/main/webapp/html/javascript/gene-table.js
@@ -11,11 +11,12 @@ function createGenesTable ( tableData, keyword )
 		const firstPageEnd = genesTableScroller.getPageEnd ()
 
 
+
 		// Gene View: interactive summary legend for evidence types.
 		var interactiveSummaryLegend = getInteractiveSummaryLegend(tableData);
-
+		
 		table += '<form name="checkbox_form"><div class="gene_header_container">';
-		table += '' + interactiveSummaryLegend + '<div id="revertGeneView" class="legends-reset-button" title= "Revert all filtering changes"><i class="fas fa-undo  unhover" ></i></div></div>';
+		table += '' + interactiveSummaryLegend + '<div class="legend-actions-container"><div id="revertGeneView" class="legends-reset-button" title= "Revert all filtering changes"><i class="fas fa-undo  unhover"  ></i></div></div></div>';
 		table += '</div>';
 		table += '<br>';
 		// dynamic Evidence Summary to be displayed above Gene View table
@@ -28,8 +29,8 @@ function createGenesTable ( tableData, keyword )
 		table += '<th width="60">Chr</th>';
 		table += '<th width="70">Nt start</th>';
 
-		table += '<th width="330">Evidence</th>';
-		table += '<th width="150"> KnetScore <span id="knetScore" class="hint hint-small"> <i class="fas fa-info-circle"></i></span> </th>';
+		table += '<th width="330"> Evidence</th>';
+		table += '<th id="knetscore-container" width="150"><div class="knetscore-title-container"> <div class="filter-overlay" onclick="geneDistance.closeFilter()"></div><i onclick="geneDistance.showFilter()" class="legends-filter-button fas fa-filter"></i> <span>KnetScore</span> <span id="knetScore" class="hint hint-small"><i class="fas fa-info-circle"></i></span> </div></th>';
 		table += '<th width="70">Select</th>';
 		table += '</tr>';
 		table += '</thead>';
@@ -65,8 +66,11 @@ function createGenesTable ( tableData, keyword )
 			)
 			tableSorterOpts.headers = disabledHeaders
 		}
-			
+
 		$("#tablesorter").tablesorter( tableSorterOpts );
+		geneDistance.appendFilterToUi(); 
+		geneDistance.detectScoreRange(tableData); 
+
 
 	} // if (tableData.length > 0 )