Skip to content

Commit

Permalink
Minor changes to genes table filtering.
Browse files Browse the repository at this point in the history
  • Loading branch information
@lawal-olaotan
lawal-olaotan committed Oct 22, 2023
1 parent 4d83934 commit fbcc7d7
Showing 1 changed file with 102 additions and 97 deletions.
199 changes: 102 additions & 97 deletions client-base/src/main/webapp/html/javascript/genes-table-filtering.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

// Knetscore Filter Element
let KnetScoreFilter = {
let knetScoreFilter = {

// Function detects min and max knetscore values from genetable data
detectRange (tableData){
Expand All @@ -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);

Expand All @@ -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));
Expand All @@ -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));
Expand All @@ -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') {
Expand All @@ -84,6 +86,7 @@ let KnetScoreFilter = {

// TODO: This should be updated to match the Evidence Distance styling.
renderUi(){

const popup = $(`
<div data-id="knetscore" onclick="toggleFilterIcons(this)" class="knetscore-view-overlay"></div>
<div class='knetscore-view'>
Expand All @@ -99,8 +102,8 @@ let KnetScoreFilter = {
</div>
<div class='slider-container'>
<input oninput='KnetScoreFilter.handleLeftThumb(this)' data-direction='left' class='score-range' id='score-min' type='range' step='0.01'/>
<input data-direction='right' oninput='KnetScoreFilter.handleRightThumb(this)' class='score-range' id='score-max' type='range' step='0.01'/>
<input oninput='knetScoreFilter.handleLeftThumb(this)' data-direction='left' class='score-range' id='score-min' type='range' step='0.01'/>
<input data-direction='right' oninput='knetScoreFilter.handleRightThumb(this)' class='score-range' id='score-max' type='range' step='0.01'/>
</div>
</div>
Expand Down Expand Up @@ -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){
Expand All @@ -144,8 +147,12 @@ let graphDistanceFilter = {
})
}
}

let selectElement = `<select id="select-distance" style="margin:0px;">`

createSelectElement()
},
//Creates a select element to match distance limit
createSelectElement(){
let selectElement = `<select id="select-distance" style="margin:0px;">`

for(let index = 0; index <= this.maxNumber; index++){
selectElement += `<option value='${index + 1}' ${index === this.maxNumber ? 'selected': ''}>${index + 1}</option>`
Expand All @@ -168,107 +175,105 @@ let graphDistanceFilter = {
</div>`;

$("#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);
}
}

0 comments on commit fbcc7d7

Please sign in to comment.