#692 Transforms Radio inputs to tab buttons

Rothamsted · Aug 5, 2023 · 1347272 · 1347272
1 parent 9bd0dbf
commit 1347272
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 17 deletions.
diff --git a/client-base/src/main/webapp/html/css/genes-distance.css b/client-base/src/main/webapp/html/css/genes-distance.css
@@ -192,4 +192,14 @@ input[type="number"]::-webkit-outer-spin-button
 
 .distance{
     margin: 0 0.5rem;
+}
+
+.active-tabs{
+    border-bottom: 1.5px solid black;
+}
+
+.filter-tabs{
+    padding: .5rem 0;
+    margin:  0 .75rem;
+    cursor: pointer;
 }
diff --git a/client-base/src/main/webapp/html/css/style.css b/client-base/src/main/webapp/html/css/style.css
@@ -786,7 +786,6 @@ span.hint-big:hover {
 
 .exampleQuery {
     cursor: pointer;
-    margin-bottom:6px;
 }
 
 .exampleQuery::before{
@@ -2833,6 +2832,4 @@ color: #C0C0C0;
 #distance-view span {
     color:var(--green);
     margin-right:.5rem
-}
-
-
+}
diff --git a/client-base/src/main/webapp/html/javascript/gene-table.js b/client-base/src/main/webapp/html/javascript/gene-table.js
@@ -13,10 +13,10 @@ function createGenesTable ( tableData, keyword )
 		var interactiveSummaryLegend = getInteractiveSummaryLegend(tableData);
 		var geneDistanceFilter = graphDistanceFilterHtml()
 
-		table += '<form name="checkbox_form"><div class="filter-tab"> <h5>Filters:</h5>';
-		table +=  '<div class="filter-container"><div class="evidence"><input onchange="changeFilterView(this)" id="concepts" name="filters" value="concepts" type="radio"/checked><label for="concepts">Concepts</label></div>';
-		table += '<div class="distance"><input onchange="changeFilterView(this)" type="radio" name="filters" id="distance" value="distance"/><label for="distance">Evidence Distance</label></div>';
-		table += '<div class="knetscore"><input onchange="changeFilterView(this)" name="filters" id="knetscore" value="knetscore" type="radio"/><label for="knetscore">KnetScore</label></div></div></div>'
+		table += '<form name="checkbox_form"><div class="filter-tab">';
+		table +=  '<div class="filter-container"><div class="filter-tabs active-tabs" onclick="changeFilterView(this)" id="concepts" name="filters" value="concepts" type="radio"> <i class="fas fa-dna"></i> Concepts</div>';
+		table += '<div class="filter-tabs" onclick="changeFilterView(this)" type="radio" name="filters" id="distance" value="distance"> <i class="fab fa-megaport"></i> Evidence Distance</div>';
+		table += '<div class="filter-tabs" onclick="changeFilterView(this)" name="filters" id="knetscore" value="knetscore" type="radio"> <i class="fas fa-exchange-alt"></i> </i> KnetScore </div></div></div>'
 		table += '<div class="divider"></div><div class="gene_header_container">';
 		table += '<div id="filters">'+ geneDistanceFilter + interactiveSummaryLegend + '</div><div id="revertGeneView" class="legends-reset-button" title= "Revert all filtering changes"><i class="fas fa-undo  unhover"></i></div></div>';
 		table += '</div>';
@@ -37,7 +37,6 @@ function createGenesTable ( tableData, keyword )
 		table += '</tr>';
 		table += '</thead>';
 		table += '<tbody id="geneTableBody" class="scrollTable">';
-
 		table += '</tbody>';
 		table += '</table>';
 		table += '<div id="filterMessage" class="showFilter"> Your filter is returning no results. Try increasing the amount of genes visible (bottom left).</div></div>';
@@ -50,11 +49,9 @@ function createGenesTable ( tableData, keyword )
 		table += '<div class="gene-footer-flex"><div  id="candidate-count" class="selected-genes-count"><span style="color:#51CE7B; font-size: 14px;">No genes selected</span></div>';
 
 		table += '<button id="new_generateMultiGeneNetworkButton" class="non-active btn knet_button" title="Display the network in KnetMaps"> Create Network </button></div></div>';
-
 		$('#resultsTable').html(table);
 		createGeneTableBody ( tableData );
-
-
+
 		var tableSorterOpts = {}
 
 		// Sort if enabled. See Notes in init-utils.js
@@ -444,9 +441,6 @@ function createGeneTableBody ( tableData, doAppend = false )
 				evidenceTd += '</div>';
 				evidenceTd += '</div> <span style="margin-right:.5rem">' + thisTypeEvidences.length + '</span></div>';
 				}
-
-
-
 			}
 			// for evidenceType, typeEvidencesSummary
 
@@ -581,8 +575,11 @@ function openAccessionNetworkView(event,genesAccessions){
  */
  function changeFilterView(element){
 
-	const selected = $(element).val(); 
+
+	const selected = $(element).attr('value'); 
 	$('.view').removeClass('active')
+	$('.filter-tabs').removeClass('active-tabs')
 
+	$(element).addClass('active-tabs'); 
 	$(`#${selected}-view`).addClass('active');
  }
diff --git a/client-base/src/main/webapp/html/javascript/genes-distance.js b/client-base/src/main/webapp/html/javascript/genes-distance.js
@@ -192,7 +192,8 @@ const geneTableFilterMgr = function() {
                 for(let concept in concepts ){
 
                     let evidence = concepts[concept].conceptEvidences;
-                    evidence = evidence.filter( item => item.graphDistance > distance)
+
+                    evidence = evidence.filter( item => item.graphDistance <= distance)
 
                     if(!evidence.length){
                         const newObject = Object.assign({},concepts)