From fbcc7d70a5b77296d2e70e86ca68c2d717b4024d Mon Sep 17 00:00:00 2001 From: Olaotan Lawal Date: Sun, 22 Oct 2023 23:33:18 +0100 Subject: [PATCH] Minor changes to genes table filtering. --- .../html/javascript/genes-table-filtering.js | 199 +++++++++--------- 1 file changed, 102 insertions(+), 97 deletions(-) diff --git a/client-base/src/main/webapp/html/javascript/genes-table-filtering.js b/client-base/src/main/webapp/html/javascript/genes-table-filtering.js index 48dddf595..1a359548f 100644 --- a/client-base/src/main/webapp/html/javascript/genes-table-filtering.js +++ b/client-base/src/main/webapp/html/javascript/genes-table-filtering.js @@ -1,6 +1,6 @@ // Knetscore Filter Element -let KnetScoreFilter = { +let knetScoreFilter = { // Function detects min and max knetscore values from genetable data detectRange (tableData){ @@ -15,16 +15,17 @@ let KnetScoreFilter = { // uses Math min and max method to get min and max values from genetable score property. const minValue = Math.min(...scoreArry); - const maxValue = Math.max(...scoreArry); + const maxValue = Math.max(...scoreArry); + minScore = minValue maxScore = maxValue; // sets defaults values for min and max range inputs - this.setRangeInputValues(minValue, 'min') - this.setRangeInputValues(maxValue, 'max') + this.setRangevalue(minValue, 'min') + this.setRangevalue(maxValue, 'max') }, // Function set input values for range input type called in (detectScoreRange) - setRangeInputValues(value, rangeType){ + setRangevalue(value, rangeType){ $('#'+rangeType+'Value').val(value); @@ -38,14 +39,14 @@ let KnetScoreFilter = { // Gets the left range input value when an onchange event event is triggered. // Set style direction in percentage - handleLeftThumb(element){ - let inputValue = parseFloat($(element).val()); + handleLeftThumb(minElement){ + let inputValue = parseFloat($(minElement).val()); const rightValue = parseFloat($('#score-max').val()); // Check if left thumb is crossing the right thumb if(inputValue >= rightValue){ inputValue = rightValue - 0.01; - $(element).val(inputValue.toFixed(2)); + $(minElement).val(inputValue.toFixed(2)); } $('#minValue').val(inputValue.toFixed(2)); @@ -54,14 +55,14 @@ let KnetScoreFilter = { }, // Handles onchange event for the right thumb - handleRightThumb(element){ - let inputValue = parseFloat($(element).val()); + handleRightThumb(maxElement){ + let inputValue = parseFloat($(maxElement).val()); const leftValue = parseFloat($('#score-min').val()); // Check if right thumb is crossing the left thumb if(inputValue <= leftValue){ inputValue = leftValue + 0.01; - $(element).val(inputValue.toFixed(2)); + $(maxElement).val(inputValue.toFixed(2)); } $('#maxValue').val(inputValue.toFixed(2)); @@ -71,6 +72,7 @@ let KnetScoreFilter = { // Adds CSS style position and coverage percentage to range slider setScorePosition (inputValue, direction){ + const percentage = ((inputValue - minScore) / (maxScore - minScore)) * 100; if(direction === 'min') { @@ -84,6 +86,7 @@ let KnetScoreFilter = { // TODO: This should be updated to match the Evidence Distance styling. renderUi(){ + const popup = $(`
@@ -99,8 +102,8 @@ let KnetScoreFilter = {
- - + +
@@ -129,7 +132,7 @@ let KnetScoreFilter = { // Renders Ui and detects graph distance maximum number let graphDistanceFilter = { maxNumber:-Infinity, - // detects the max distance from tabledata and creates a select element to match distance limit + //Detects the max distance from tabledata detectRange(tableData){ for(let data of tableData){ @@ -144,8 +147,12 @@ let graphDistanceFilter = { }) } } - - let selectElement = `` for(let index = 0; index <= this.maxNumber; index++){ selectElement += `` @@ -168,107 +175,105 @@ let graphDistanceFilter = { `; $("#evidence-filter").append(ui) - }, - + } } // Handles genes distance and knetscore filters const geneTableFilterMgr = { - tableData:[], - // saves geneview table - setup(data){ - this.tableData = data; - let filters = [graphDistanceFilter,KnetScoreFilter] - - for(let filter of filters){ - filter.renderUi(); - filter.detectRange(data) - } - }, - // handles knetscore filtering - filterByDistanceAndScore: function(event, table) { - // Checks if any concept evidence is selected. - - // Sets Tabledata either from table parameter or state saved tableData. - let data = [...this.tableData] + tableData:[], + // Saves genetable data to tableData property and c + setup(data){ + this.tableData = data; + this.renderFiltersToUi() + }, + // Renders graphdistance and knetscore filters to UI. + renderFiltersToUi(){ + let filters = [graphDistanceFilter,knetScoreFilter] + for(let filter of filters){ + filter.renderUi(); + filter.detectRange(data) + } + }, + // Handles knetscore filtering + filterByDistanceAndScore(event = null) { - // Checks if evidence concepts are in active states to filter table data by selected concept + // Sets Tabledata either from table parameter or state saved tableData. + let data = [...this.tableData] - if(event){ - const element = event.target; - event.preventDefault(); - toggleFilterIcons(element); - conceptFilter.filtered = true - } - - - const distance = $('#select-distance option:selected').val(); - const scoreMin = Number($('#score-min').val()); - const scoreMax = Number($('#score-max').val()); - - let filteredData = []; + // Checks if evidence concepts are in active states to filter table data by selected concept + if(event){ + const element = event.target; + event.preventDefault(); + toggleFilterIcons(element); + conceptFilter.filtered = true + } + + + const distance = $('#select-distance option:selected').val(); + const scoreMin = Number($('#score-min').val()); + const scoreMax = Number($('#score-max').val()); + + let filteredData = []; + + + // Filter through data + for(let genes of data) { + // Deep clone the gene object to ensure we don't modify the original data + let geneClone = JSON.parse(JSON.stringify(genes)); - // Filter through data - for(let genes of data) { - // Deep clone the gene object to ensure we don't modify the original data - let geneClone = JSON.parse(JSON.stringify(genes)); + const score = Number(geneClone.score).toFixed(2); + + // Checks if the gene's score falls within the selected range (inclusive of the range boundaries) + const isScoreInRange = ((score >= scoreMin ) && (score <= scoreMax) ); + let concepts = geneClone.conceptEvidences; + + for(let concept in concepts) { + let evidence = concepts[concept].conceptEvidences; + evidence = evidence.filter(item => item.graphDistance <= distance); - const score = Number(geneClone.score).toFixed(2); - - // Checks if the gene's score falls within the selected range (inclusive of the range boundaries) - const isScoreInRange = ((score >= scoreMin ) && (score <= scoreMax) ); - let concepts = geneClone.conceptEvidences; - - for(let concept in concepts) { - let evidence = concepts[concept].conceptEvidences; - evidence = evidence.filter(item => item.graphDistance <= distance); - - if(!evidence.length){ - delete concepts[concept]; - } else { - concepts[concept].conceptEvidences = evidence; - } + if(!evidence.length){ + delete concepts[concept]; + } else { + concepts[concept].conceptEvidences = evidence; } + } - let keys = Object.keys( concepts) - const isConceptEmpty = keys.length; - - if(isConceptEmpty > 0 && isScoreInRange){ - - filteredData.push(geneClone); + let keys = Object.keys( concepts) + const isConceptEmpty = keys.length; - } + if(isConceptEmpty > 0 && isScoreInRange){ + filteredData.push(geneClone); } + } - geneTableFilterMgr.toggleTableState(filteredData.length); - - if(filteredData.length) { - geneTableFilterMgr.renderFilteredTable(filteredData); - } - - }, - renderFilteredTable(table){ - - const isConceptActive = $('.evidenceSummaryItem').hasClass("active-legend"); + geneTableFilterMgr.toggleTableState(filteredData.length); + + if(filteredData.length) { + geneTableFilterMgr.renderFilteredTable(filteredData); + }; + }, + renderFilteredTable(table){ + + const isConceptActive = $('.evidenceSummaryItem').hasClass("active-legend"); - genesTableScroller.setTableData (table); + genesTableScroller.setTableData (table); - if(isConceptActive){ - geneViewConceptFilter.filterbySelectedConcept(table); - }else{ - createGeneTableBody(table) - } - }, - toggleTableState(dataLength){ + if(isConceptActive){ + geneViewConceptFilter.filterbySelectedConcept(table); + }else{ + createGeneTableBody(table) + } + }, + toggleTableState(filteredTableLength){ - if(dataLength === 0)$('#filterMessage').text('Your filter is returning no results'); + if(!filteredTableLength)$('#filterMessage').text('Your filter is returning no results'); - $('#filterMessage').toggleClass('show-block',dataLength <= 0); - $('#geneTableBody').toggleClass('hide',dataLength <= 0); - } + $('#filterMessage').toggleClass('show-block',filteredTableLength <= 0); + $('#geneTableBody').toggleClass('hide',filteredTableLength <= 0); } +}