Skip to content

Latest commit

 

History

History
405 lines (392 loc) · 15.4 KB

pathways-filters.md

File metadata and controls

405 lines (392 loc) · 15.4 KB
Raw
layout
table-page
Organism
    {% for org in site.organisms %}
  • {{ org.latin }}
    • {% endfor %}
Community
    {% for com in site.communities %}
  • {{ com.community-tag }}
    • {% endfor %}
{% assign type-group = site.annotations | group_by: "type" | reverse %} {% for type in type-group %}
{{ type.name }}
    {% for annot in type.items %}
  • {{ annot.value }}
    • {% endfor %}
{% endfor %}



{% for pw in site.pathways %} {% assign pw-type-group = pw.annotations | group_by: "type" %} {% for type in type-group %} {% assign pw-items = "" %} {% for pw-type in pw-type-group %} {% if pw-type.name == type.name %} {% assign pw-items = pw-type.items | map: "value" | join: ", " %} {% endif %} {% endfor %} {% endfor %} {% endfor %}
Organism
 Communities
 Pathway Terms
 Disease Terms
 Cell Types
 wpid title url firstorg
{{ pw.organisms | join: ", "}} {{ pw.communities | join: ", "}}
{{ pw-items }}
{{ pw.wpid }} {{ pw.title }} {{ pw.url }} {{ pw.organisms.first }}
<script> // TABLE FILTER // Declare one-time variables var btnMore = $("#cardsMore"); btnMore.hide(); var table = document.getElementById("myTable"); var tr = table.getElementsByTagName("tr"); var cardDiv = document.getElementById('pwcards'); var listDiv = document.getElementById('pwlist'); var fils = { 'org':0, 'com':1, 'pwo':2, 'dio':3, 'cto':4 }; function filterTable() { // Declare variables var activeFils, emptyFils, input, filSplit, td, i, j, txtValue, cardVars; activeFils = []; emptyFils = []; cardVars = {}; cardVarsMore = []; cardDiv.innerHTML = ""; listDiv.innerHTML = ""; j = 0; btnMore.hide(); // Define empty and active filter sets Object.keys(fils).forEach(key => { input = document.getElementById(key).value; if (input.length > 0){ activeFils.push(key); } else { emptyFils.push(key); } }); // Loop through all table rows //TODO: sort table alphabetically by pathway title for (var i = 0; i < tr.length; i++) { // Loop through column filters if(activeFils.length == 0) { // Hide all if nothing selected tr[i].style.display = "none"; } else if (emptyFils.length > 0) { // Show all rows if an column filter is empty tr[i].style.display = ""; } // Loop through active column filters activeFils.forEach(key => { input = document.getElementById(key); filSplit = input.value.toUpperCase().split(","); td = tr[i].getElementsByTagName("td")[fils[key]]; if (td) { txtValue = td.textContent || td.innerText; tvSplit = txtValue.toUpperCase().trim().split(","); // console.log(tvSplit); // console.log(filSplit); if (filSplit.filter(value => tvSplit.includes(value)).length > 0 //filter.indexOf(txtValue.toUpperCase()) !== -1 && tr[i].style.display != "none") { // Show those that match the filter and aren't already hidden tr[i].style.display = ""; } else { // Hide those that don't match the filter tr[i].style.display = "none"; } } }); if (tr[i].style.display == "" && i > 0){ j++; cardVars = {}; cardVars["wpid"] = tr[i].cells[5].innerText; cardVars["title"] = tr[i].cells[6].innerText; cardVars["url"] = tr[i].cells[7].innerText; cardVars["org"] = tr[i].cells[8].innerText; addList(cardVars); if(j <= 40){ addCard(cardVars); //display "show more" button and store cards at i > 40 } else { btnMore.show(); cardVarsMore.push(cardVars); } } // console.log(tr[i]); } // console.log(cardVarsMore); } // Listen for organism checkboxes var orgList = [] var interests = document.querySelectorAll("[name=organisms"); for (var index = 0; index < interests.length; index++) { interests[index].addEventListener("change", function(evt){ var checkbox = evt.target; //console.log(checkbox.value + " changed to " + checkbox.checked); orgList = $("input:checkbox[name=organisms]:checked").map(function(){return $(this).val()}).get(); document.getElementById('org').value = orgList; filterTable(); }); } // Listen for community checkboxes var comList = [] var interests = document.querySelectorAll("[name=communities"); for (var index = 0; index < interests.length; index++) { interests[index].addEventListener("change", function(evt){ var checkbox = evt.target; //console.log(checkbox.value + " changed to " + checkbox.checked); comList = $("input:checkbox[name=communities]:checked").map(function(){return $(this).val()}).get(); document.getElementById('com').value = comList; filterTable(); }); } // Listen for Pathway Ontology checkboxes var pwoList = [] var interests = document.querySelectorAll("[name=pathway_ontology"); for (var index = 0; index < interests.length; index++) { interests[index].addEventListener("change", function(evt){ var checkbox = evt.target; //console.log(checkbox.value + " changed to " + checkbox.checked); pwoList = $("input:checkbox[name=pathway_ontology]:checked").map(function(){return $(this).val()}).get(); document.getElementById('pwo').value = pwoList; filterTable(); }); } // Listen for Disease checkboxes var dioList = [] var interests = document.querySelectorAll("[name=disease"); for (var index = 0; index < interests.length; index++) { interests[index].addEventListener("change", function(evt){ var checkbox = evt.target; //console.log(checkbox.value + " changed to " + checkbox.checked); dioList = $("input:checkbox[name=disease]:checked").map(function(){return $(this).val()}).get(); document.getElementById('dio').value = dioList; filterTable(); }); } // Listen for Pathway Ontology checkboxes var ctoList = [] var interests = document.querySelectorAll("[name=cell_type"); for (var index = 0; index < interests.length; index++) { interests[index].addEventListener("change", function(evt){ var checkbox = evt.target; //console.log(checkbox.value + " changed to " + checkbox.checked); ctoList = $("input:checkbox[name=cell_type]:checked").map(function(){return $(this).val()}).get(); document.getElementById('cto').value = ctoList; filterTable(); }); } // URL PARAMETERS var orgList, comList, pwoList, dioList, ctoList; var url_string = window.location.href; var url = new URL(url_string); if (url.searchParams.toString().length > 0){ orgList = url.searchParams.get("org"); comList = url.searchParams.get("com"); pwoList = url.searchParams.get("pwo"); dioList = url.searchParams.get("dio"); ctoList = url.searchParams.get("cto"); } else { // Check org:human by default if no other parameters orgList = "Homo sapiens"; comList = null; pwoList = null; dioList = null; ctoList = null; } //console.log(orgList); // CHECKBOXES var event = document.createEvent("HTMLEvents"); event.initEvent('change', false, true); if(null != orgList){ document.getElementById("organisms").classList.add('show'); document.getElementById("organisms").classList.remove('hide'); orgList.split(",").forEach(key => { var checkbox = document.querySelectorAll(`input[type='checkbox'][name='organisms'][value=${CSS.escape(key)}]`)[0]; checkbox.checked = true; checkbox.dispatchEvent(event); }); } else { document.getElementById("organisms").classList.add('hide'); document.getElementById("organisms").classList.remove('show'); } if(null != comList){ document.getElementById("communities").classList.add('show'); document.getElementById("communities").classList.remove('hide'); comList.split(",").forEach(key => { var checkbox = document.querySelectorAll(`input[type='checkbox'][name='communities'][value=${CSS.escape(key)}]`)[0]; checkbox.checked = true; checkbox.dispatchEvent(event); }); } else { document.getElementById("communities").classList.add('hide'); document.getElementById("communities").classList.remove('show'); } if(null != pwoList){ document.getElementById("pathway_ontology").classList.add('show'); document.getElementById("pathway_ontology").classList.remove('hide'); pwoList.split(",").forEach(key => { var checkbox = document.querySelectorAll(`input[type='checkbox'][name='pathway_ontology'][value=${CSS.escape(key)}]`)[0]; checkbox.checked = true; checkbox.dispatchEvent(event); }); } else { document.getElementById("pathway_ontology").classList.add('hide'); document.getElementById("pathway_ontology").classList.remove('show'); } if(null != dioList){ document.getElementById("disease").classList.add('show'); document.getElementById("disease").classList.remove('hide'); dioList.split(",").forEach(key => { var checkbox = document.querySelectorAll(`input[type='checkbox'][name='disease'][value=${CSS.escape(key)}]`)[0]; checkbox.checked = true; checkbox.dispatchEvent(event); }); } else { document.getElementById("disease").classList.add('hide'); document.getElementById("disease").classList.remove('show'); } if(null != ctoList){ document.getElementById("cell_type").classList.add('show'); document.getElementById("cell_type").classList.remove('hide'); ctoList.split(",").forEach(key => { var checkbox = document.querySelectorAll(`input[type='checkbox'][name='cell_type'][value=${CSS.escape(key)}]`)[0]; checkbox.checked = true; checkbox.dispatchEvent(event); }); } else { document.getElementById("cell_type").classList.add('hide'); document.getElementById("cell_type").classList.remove('show'); } // function to add cards function addCard(c){ cardDiv.innerHTML += ''; } // function to item to list function addList(c){ listDiv.innerHTML += '
  • '+c["title"]+' ('+c["org"]+')
    • '; } btnMore.click(function (e) { e.preventDefault(); btnMore.hide(); console.log("Show more!"); var k=0; Object.values(cardVarsMore).forEach(val => { if(k <= 80){ // show 80 at a time addCard(val); cardVarsMore.shift(); } else { btnMore.show(); } k++; }); }); </script>