<\/title>\r\n <link rel=\"stylesheet\" href=\"\/\/code.jquery.com\/ui\/1.13.2\/themes\/base\/jquery-ui.css\">\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n<script src=\"https:\/\/code.jquery.com\/jquery-migrate-1.4.1.min.js\"><\/script>\r\n <script src=\"https:\/\/code.jquery.com\/ui\/1.13.2\/jquery-ui.js\"><\/script>\r\n\r\n\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/css\/bootstrap.min.css\" integrity=\"sha384-TX8t27EcRE3e\/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2\" crossorigin=\"anonymous\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ\/JpcUGGOn+Y7RsweNrtN\/tE3MoK7ZeZDyx\" crossorigin=\"anonymous\"><\/script>\r\n\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.datatables.net\/v\/dt\/dt-1.13.1\/datatables.min.css\"\/>\r\n \r\n<script type=\"text\/javascript\" src=\"https:\/\/cdn.datatables.net\/v\/dt\/dt-1.13.1\/datatables.min.js\"><\/script>\r\n\r\n\r\n\r\n<script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/vis-network\/standalone\/umd\/vis-network.min.js\"><\/script>\r\n\r\n<style>\r\n body{\r\n font-family: Arial, sans-serif;\r\n \r\n }\r\n .site-content{\r\n height: auto;\r\n }\r\n .search-py{\r\n background-color:white;\r\n width: 100%;\r\n font-size: 20px;\r\n border-radius: 10px;\r\n float:left;\r\n margin-top:2%;\r\n clear:left;\r\n }\r\n #selectdata2{\r\n font-size:22px;\r\n }\r\n #selectdata{\r\n margin-left:25%;\r\n }\r\n #selectdata select {\r\n width:30%;\r\n }\r\n\r\n .column{\r\n background-color:white;\r\n width: 100%;\r\n border-radius: 10px;\r\n \/*box-shadow: 5px 10px #f1f1f1;*\/\r\n } \r\n\r\n.search-box {\r\n margin:5%;\r\n margin-left:10%;\r\n width: 80%;\r\n position: relative;\r\n display:inline-block;\r\n font-size: 22px;\r\n padding-bottom: 0px;\r\n }\r\n .search-box input[type=\"text\"]{\r\n height: 60px;\r\n padding: 5px 10px;\r\n border: 1px solid #CCCCCC;\r\n font-size: 22px;\r\n max-height: 100px;\r\n }\r\n .search-box input[type=\"number\"]{\r\n height: 60px;\r\n padding: 5px 10px;\r\n border: 1px solid #CCCCCC;\r\n font-size: 22px;\r\n max-height: 100px;\r\n }\r\n .search-box select , #selectdata select{\r\n height: 60px;\r\n padding: 5px 10px;\r\n border: 1px solid #CCCCCC;\r\n font-size: 22px;\r\n max-height: 100px;\r\n }\r\n .result{\r\n z-index: 999;\r\n top: 100%;\r\n left: 0;\r\n overflow: auto;\r\n opacity: 1;\r\n }\r\n .search-box input[type=\"text\"], .result{\r\n width: 100%;\r\n box-sizing: border-box;\r\n max-height: 115px;\r\n opacity: 1;\r\n }\r\n .result p{\r\n margin: 0;\r\n padding: 2px 10px;\r\n border: 1px solid #CCCCCC;\r\n border-top: none;\r\n cursor: pointer;\r\n max-height: 100px;\r\n }\r\n .result p:hover{\r\n background: #f2f2f2;\r\n max-height: 100px;\r\n }\r\n #search-options{\r\n border:1px solid black;\r\n \r\n }\r\n\r\n\r\n#filter{\r\n float: left;\r\n width: 30%;\r\n margin:5%;\r\n}\r\n\r\nspan{\r\n font-size:22px;\r\n}\r\n#enrichment{ \r\n float:right; \r\n background-color: #4CAF50; \r\n border: none;\r\n color: white;\r\n text-align: center;\r\n text-decoration: none;\r\n font-size: 16px;\r\n }\r\n\r\ninput[type=\"radio\"]{\r\n height: 20px; \r\n width: 15px;\r\n}\r\n\r\n #custom-handle {\r\n width: 2em;\r\n height: 1.6em;\r\n top: 50%;\r\n margin-top: -.8em;\r\n text-align: center;\r\n background:blue;\r\n color:white;\r\n }\r\n \r\n .tickmark{\r\n display:inline-block;\r\n margin-top:1em;\r\n height:10px;\r\nposition:absolute;\r\n }\r\n\r\n\r\n#selectdata h3{\r\n display:inline;\r\n}\r\n#secondpart{\r\n margin-top:2%;\r\n font-size:14px;\r\n background-color:white;\r\n min-height:600px;\r\n}\r\n\r\n\r\n#containernetwork{\r\n height:600px;\r\n width:60%;\r\n float:right;\r\n}\r\n#mynetwork{\r\nheight:400px;\r\nwidth:auto; \r\n}\r\n#leyenda{\r\n height:100px; \r\n width:50px;\r\n}\r\n\r\n .form-control:focus {\r\n border-color: #0000FF;\r\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102,205,170, 0.6);\r\n}\r\n\r\n\r\n #divtable , #divtable2{\r\n background-color:white; \r\n border-radius: 10px;\r\nfont-size:22px;\r\nwidth:auto; \r\n margin-top:2%;\r\n }\r\n \r\n #selectdata h2{\r\n display:inline; \r\n text-align:center; \r\n font-size:2em;\r\n\r\n\r\n }\r\n #divtable h2 , #divtable2 h2 , #divtable3 h2 , h3{\r\n display:inline; \r\n }\r\n \r\n#divtable .dataTables_wrapper,\r\n#divtable2 .dataTables_wrapper ,\r\n#divtable3 .dataTables_wrapper{\r\n width: 80%;\r\n margin: 2%;\r\n margin-left: 10%;\r\n margin-right: 10%;\r\n font-size:22px;\r\n}\r\nh1 {\r\n font-size:2em;\r\n}\r\n\r\n .helpresult{\r\n z-index: 999;\r\n top: 100%;\r\n left: 10%;\r\n overflow: auto;\r\n opacity: 1;\r\n }\r\n #divtable p , #divtable2 p , #divtable3 p {\r\n color: black !important ;\r\n }\r\n .helpresult p , .helpresult h2 , #enrichp{\r\n font-size:0.9vw;\r\n margin: 0;\r\n margin-left:2%;\r\n font-style:italic;\r\n max-height: 100px;\r\n }\r\n \r\n .dataTables_length, .dataTables_length select\r\n { \r\n font-size: 1.5em;\r\n \r\n }\r\n .popover{\r\n font-size: 2em;\r\n\r\n }\r\n .search-py h1 { font-size:3em; }\r\n .search-py h3{ font-size:1.5em; }\r\n \r\n #gifbt {\r\n position: absolute;\r\n left: 45%;\r\n top: 87%;\r\n width: 5%;\r\n height: 5%;\r\n }\r\n caption {\r\n text-align:center;\r\n font-style:italic;\r\n caption-side:top;\r\n }\r\n \r\n .btn-primary {\r\n width:10%;\r\n font-size:16px;\r\n margin-left:50%;\r\n }\r\n \r\n#modaldesc {\r\n position: absolute;\r\n left: 50%;\r\n top: 90%;\r\n transform: translate(-50%, -50%);\r\n}\r\n\r\n.btn-secondary{\r\n width:20%;\r\n font-size:16px;\r\n margin-left:10%;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"column\">\r\n <div class=\"search-box\">\r\n Search by: <img id=\"datahelpsearch\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/>\r\n <div class=\"helpresult\" id=\"helpsearch\"><\/div>\r\n <select id=\"search-options\" name=\"search\">\r\n <option value=\"fdrug\">Food-drug gene expression similarity<\/option>\r\n <option value=\"fgene\">Food-gene gene expression similarity<\/option>\r\n <option value=\"dfood\">Drug-food gene expression similarity<\/option>\r\n <\/select>\r\n \r\n <div>\r\n Compound <img id=\"datahelp1\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/>\r\n <div class=\"helpresult\" id=\"help1\"><\/div>\r\n <input type=\"text\" id=\"key\" class=\"key form-control\" placeholder='Resveratrol'>\r\n <div class=\"result\" id=\"result\"><\/div>\r\n Sample Origin <img id=\"datahelpsample\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/>\r\n <div class=\"helpresult\" id=\"helpsample\"><\/div>\r\n <input type=\"text\" id=\"origen\" class=\"key form-control\" placeholder=''>\r\n <div class=\"result\" id=\"result2\"><\/div>\r\n \r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<div id=\"divtable\">\r\n\r\n\r\n <table id=\"table\" class=\"hover\" style=\"width:100%\">\r\n <caption> Click in the row of interest to get more information <\/caption>\r\n <\/table>\r\n<\/div>\r\n\r\n<div id='divtable2'>\r\n <button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#modaldesc\">\r\nDownload\r\n<\/button>\r\n <table id=\"table2\" class=\"stripe\" style=\"width:100%\"><\/table>\r\n<\/div>\r\n\r\n\r\n \r\n<div id='secondpart'>\r\n <div id='filter'>\r\n <h1>Food-Drugs similarity network <\/h1>\r\n <div id=\"selectdata2\"><h3>Number of nodes to display<\/h3> <img id=\"datahelpnodes\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/> <\/div>\r\n <div class=\"helpresult\" id=\"helpnodes\"><\/div>\r\n <input type=\"number\" id=\"edges\" name=\"edges\" value=10\r\n min=\"1\">\r\n \r\n<h3>Similarity score cutoff<\/h3> <img id=\"datahelptau\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/> \r\n <div class=\"helpresult\" id=\"helptau\"><\/div> \r\n <script>\r\n jQuery(document).ready(function($) {\r\n var handle = $( \"#custom-handle\" );\r\n $( \"#slider\" ).slider({\r\n create: function() {\r\n $( \"#slider\" ).slider( \"value\", 90 );\r\n handle.text( $( this ).slider( \"value\" ) );\r\n \r\n },\r\n\r\n \r\n });\r\n \r\n for (var i = 0; i <= 10 ; i++) {\r\n $('<span class=\"tickmark\" id=\"tickmark'+i+'\"><\/span>').css('left', (10 * i) + '%').appendTo($('#slider'));\r\n $('#tickmark'+i).text((10*i));\r\n }\r\n \r\n } );\r\n <\/script>\r\n\r\n \r\n<div id=\"slider\">\r\n <div id=\"custom-handle\" class=\"ui-slider-handle\"><\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"containernetwork\">\r\n<div id=\"leyenda\"><\/div>\r\n<div id=\"mynetwork\"><\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n <div class=\"search-py\">\r\n <img decoding=\"async\" id=\"gifbt\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2a\/Loading_Key.gif\" width=\"250\" \/>\r\n <h1 style=\"text-align:center;\">Drug mechanisms enrichment analysis <\/h1>\r\n <div id=\"selectdata\">\r\n <h3>Select Database<\/h3> <img id=\"datahelpenrich\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/> \r\n <div class=\"helpresult\" id=\"helpenrich\"><\/div>\r\n \r\n <p id='enrichp'>Click on the box to display the differents pathways options<\/p>\r\n\r\n<select id=\"selecten\">\r\n<option value=\"drugbank\">Drugbank<\/option>\r\n\r\n<option value=\"CMAP\">CMAP<\/option>\r\n<option value=\"MESH\">MeSH<\/option>\r\n<option value=\"Kegg_phytochemicals\">Kegg phytochemicals<\/option>\r\n<\/select>\r\n<input type=\"radio\" id=\"none\" name=\"py\" value=\"none\" checked>\r\nNone\r\n<br>\r\n<input type=\"radio\" id=\"BH\" name=\"py\" value=\"BH\">\r\nBenjamini-Hochberg\r\n<br>\r\n<input type=\"radio\" id=\"bonferroni\" name=\"py\" value=\"bonferroni\">\r\nBonferroni\r\n\r\n<button id=\"enrichment\" class=\"button\" >Run enrichment analysis<\/button>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"modal fade\" id=\"modaldesc\" role=\"dialog\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <span aria-hidden=\"true\">×<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <button type=\"button\" id='copy' class=\"btn btn-secondary\">copy\r\n <img id=\"datahelpcopy\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/> \r\n <\/button>\r\n <button type=\"button\" id='tsv' class=\"btn btn-secondary\">TSV<\/button>\r\n <button type=\"button\" id='csv' class=\"btn btn-secondary\">CSV<\/button>\r\n \r\n <div class=\"helpresult\" id=\"helpcopy\"><\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\r\n\/\/ Define variables and set hide values \u200b\u200bfor css\r\n $('.search-py').hide();\r\n\r\n $(\"#secondpart\").hide();\r\n $(\"#gifbt\").hide();\r\n $(\"#divtable\").hide();\r\n $(\"#divtable2\").hide();\r\n $(\"#data3\").hide();\r\n $(\"#headertable2\").hide();\r\n $(\".descarga\").hide();\r\n $(\"#numerosearch\").hide();\r\n var arraynom = [\"accession\" ,\"node_id\",\"treatment\",\"time_point\",\"concentration\", \"origin_name\"];\r\n var arraynom2 = [\"node_id\" ,\"cmap_node_id\",\"tau\",\"compound\",\"cell_line\"];\r\nvar verdadero=false;\r\nvar idloaddata2 =1;\r\nvar idmax;\r\nvar dataenrichment;\r\nvar idmax2;\r\nvar longi2;\r\nvar nregis=5;\r\nvar nregis2=10;\r\nvar datanew = {};\r\nvar datanew2 = {};\r\nvar datos={};\r\nvar datos2={};\r\nvar type=2;\r\nvar botonvalor =\"fdrug\";\r\nvar valortrue=false;\r\nvar provisional=1;\r\nvar orden=\"\";\r\nvar pagesession=0;\r\nvar pagecarousel=0;\r\nvar datacharge=true;\r\nvar datacharge2=true;\r\nvar datacharge3=true;\r\n\r\nvar idtau;\r\nvar table2;\r\n\r\n\r\n\/\/ JQUERY \r\njQuery(document).ready(function($) {\r\n \r\n \/\/Keyup event to fill the div which will show the autocomplete suggestions\r\n $('.key').on('keyup input', function() { \r\n \/\/We get the value and the id of the input.\r\nvar key = $(this).val();\r\norden = $(this).attr(\"id\");\r\n\/\/We check that the value is not null or empty\r\nif(key != ''){\r\n \/\/We make a request to ajax that redirects us to another script where the Mysql query will be executed and will return the first 5 records similar to what is being searched for\r\n jQuery.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:key, type:1,provisional:provisional,orden:orden},\r\n dataType: 'json',\r\n success:function(response){\r\n \/\/Here in this if we check which of the two inputs is the one being written\r\n \/\/We get the length of the response and add one by one the response in the div\r\n if (orden==\"key\") {\r\n var len = response.length;\r\n $(\"#result\").empty();\r\n for( var i = 0; i<len; i++){\r\n var name = response[i]['name'];\r\n $(\"#result\").append(\"<p>\"+name+\"<\/p>\");\r\n } \r\n }else {\r\n var len = response.length;\r\n $(\"#result2\").empty();\r\n for( var i = 0; i<len; i++){\r\n var name = response[i]['name'];\r\n $(\"#result2\").append(\"<p>\"+name+\"<\/p>\");\r\n }\r\n }\r\n }, error: function(XMLHttpRequest, textStatus, errorThrown) { \r\n alert(\"Status: \" + textStatus); alert(\"Error: \" + errorThrown); \r\n } \r\n });\r\n}\r\n \/\/If the answer is empty, the result is cleaned\r\nelse {\r\n $(\".result\").empty();\r\n}\r\n})\r\n\r\n\r\n\r\n\r\n\/\/CLICK event on any of the input options\r\n$(document).on(\"click\", \".result p\", function(){\r\n \/\/Check what input is clicked and call the function\r\n if (orden==\"key\") {\r\n $('#result').empty(); \r\n $('#'+orden).val($(this).text());\r\n mostrartablas();\r\n }else{\r\n $('#result2').empty(); \r\n $('#'+orden).val($(this).text());\r\n \/\/Check the value of the first input to call the function\r\n if ($('#key').val()!=null) {\r\n mostrartablas();\r\n }\r\n }\r\n });\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/\/Help events, when the event is activated the text is shown to indicate the instructions and when it ends everything is hidden\r\n$(document).on(\"mouseenter\", \".help\", function(){\r\n$(\".helpresult\").empty();\r\nvar idhelp = $(this).attr(\"id\");\r\nif (idhelp==\"datahelp1\") {\r\n $(\"#help1\").append(\"<p>Type the term of interest. If FooDrugs database doesn't have experiments with the query term a \u201cNo Results Found\u201d message will appear.<\/p>\");\r\n \r\n} else if (idhelp==\"datahelpsample\") {\r\n $(\"#helpsample\").append(\"<p>Allow you to filter by cell line or sample type. If FooDrugs database doesn't have cell lines or sample types with the query term a \u201cNo Results Found\u201d message will appear.<\/p>\");\r\n\r\n} else if (idhelp==\"datahelpsearch\") {\r\n $(\"#helpsearch\").append(\"<p>Food-drug gene expression similarity: The search is done by food term and load information for food-drug gene expression similarity from FooDrugs database<\/p> <br>\");\r\n $(\"#helpsearch\").append(\"<p>Food-gene perturbagen similarity: The search is done by food term and load information for food-gene perturbagens (gene knock down or overexpression experiments from The Connectivity Map) (PMID 29195078) from FooDrugs database<\/p> <br>\");\r\n $(\"#helpsearch\").append(\"<p>Drug-food gene expression similarity: The search is done by drug term and load information for food-drug from FooDrugs database<\/p>\");\r\n\r\n}\r\nelse if (idhelp==\"datahelpentries\") {\r\n $(\"#helpentries\").append(\"<p>Allow you to filter the number of studies to display<\/p>\");\r\n \r\n} \r\nelse if (idhelp==\"datahelpfilter\") {\r\n $(\"#helpfilter\").append(\"<p>Allow you to filter with free text on the table by any field<\/p>\");\r\n \r\n} else if (idhelp==\"datahelpentries2\") {\r\n $(\"#helpentries2\").append(\"<p>Allow you to filter the number of studies to display<\/p>\");\r\n \r\n} \r\nelse if (idhelp==\"datahelpfilter2\") {\r\n $(\"#helpfilter2\").append(\"<p>Allow you to filter with free text on the table by any field<\/p>\");\r\n \r\n}else if (idhelp==\"datahelpentries3\") {\r\n $(\"#helpentries3\").append(\"<p>Allow you to filter the number of studies to display<\/p>\");\r\n \r\n} \r\nelse if (idhelp==\"datahelpfilter3\") {\r\n $(\"#helpfilter3\").append(\"<p>Allow you to filter with free text on the table by any field<\/p>\");\r\n \r\n}\r\nelse if(idhelp==\"datahelpenrich\"){\r\n $(\"#helpenrich\").append(\"<p>Allow to perform enrichment analysis with the drug terms selected by the similarity score (tau) for different databases<\/p>\");\r\n\r\n}else if (idhelp==\"datahelpnodes\") {\r\n $(\"#helpnodes\").append(\"<p>Allow you to select the number of nodes displayed in the network<\/p>\");\r\n \r\n} else if (idhelp==\"datahelptau\") {\r\n $(\"#helptau\").append(\"<p>Allow to filter results by absolute tau score in the table and the network.<\/p>\");\r\n $(\"#helptau\").append(\"<p>Tau score represents the similarity (positive) or dissimilarity (negative) relationship between food and drug gene profiles. Tau score ranges from -100 to 100. A score of 90 means that 10% of the reference perturbations had an enrichment score as high as the query (Subramanian et al. 2017).<\/p>\");\r\n\r\n}else if (idhelp==\"datahelpcopy\"){\r\n $(\"#helpcopy\").append(\"<p>Allow to copy the information on the clipboard<\/p>\");\r\n\r\n}\r\n});\r\n\r\n$(document).on(\"mouseleave\", \".help\", function(){\r\n$(\".helpresult\").empty();\r\n });\r\n\r\n\r\n\r\n\r\n\/\/Parameter change event of the food\/gen\/drug option select\r\n $(\"#search-options\").on(\"change\", function(){\r\n var select = $(\"#search-options\");\r\n botonvalor=select.val();\r\n if (botonvalor==\"fdrug\") {\r\n provisional=1;\r\n type=2;\r\n }else if (botonvalor==\"fgene\") {\r\n type=2;\r\n provisional=2;\r\n }else if (botonvalor==\"dfood\") {\r\n provisional=3;\r\n type=3;\r\n }\r\n\/\/Empty all the previous tables and reset the page\r\n $(\"#divtable\").hide();\r\n $(\".key\").val('');\r\n $(\"#divtable2\").hide();\r\n $(\"#secondpart\").hide();\r\n $('.search-py').hide();\r\n\r\n\r\n });\r\n \r\n\/\/Tau value change event\r\n $(\"#slider\").slider({\r\n \/\/ Execute a function when the user moves the slider handle\r\n slide: function(event, ui) {\r\n var handle = $( \"#custom-handle\" );\r\n handle.text( ui.value );\r\n\/\/We get tau value\r\n console.log(ui.value);\r\n\/\/We send the data of the selected node to make the change when changing the tau if there is no selected node it will not be executed\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:idtau, type:5,tau:ui.value,a:provisional},\r\n dataType: 'json',\r\n success:function(response){\r\n\/\/ Reset the parameters of the table\r\n datos2=response;\r\n load_data2();\r\n nodo();\r\n\/\/The user's view is redirected to where the table is located\r\n elemento = document.getElementById(\"prueba\");\r\n elemento.scrollIntoView();\r\n }});\r\n }\r\n });\r\n\r\n\r\n\r\n\r\n\r\n\/\/table click event \r\n$(document).on('click', '#table tbody tr', function() { \r\n tau=90;\r\n$(\".highlight\").css({'background-color': \"transparent\" });\r\n $( '.highlight' ).removeClass( \"highlight\" );\r\n $(this).css(\"background-color\",\"#CDCDCD\");\r\n var row = table.row( this ).data()\r\n $( this ).addClass( \"highlight\" );\r\n idtau = row[5];\r\n\r\n\/\/Request to ajax\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:row[5], type:5,tau:tau,a:provisional},\r\n dataType: 'json',\r\n success:function(response){\r\n\/\/Configuration of parameters for the new table\r\n datos2={};\r\n datos2=response;\r\n nodo();\r\n load_data2();\r\n }});\r\n }); \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/\/Community button click event\r\n $(document).on('click', '#comm', function() {\r\n \/\/if 'valuetrue' is equal to true the data will be taken and by means of a post request they will be sent to the ajaxsql file\r\n \/\/to which the type and the node_id will be passed, the true value determines if the table search is performed or not\r\n \r\n var nodeid = datos2[0]['node_id'];\r\n $.post('https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/ajaxsql.php', {search:nodeid, type:6}).done(function(data){\r\n data = JSON.parse(data);\r\n load_data3(data);\r\n });\r\n \r\n });\r\n\r\n\r\n\r\n\r\n\/\/Click event Enrichment \r\n $(document).on('click', '#enrichment', function() {\r\n\/\/ First check that the second table has been executed\r\n \/\/ After that, the values for the enrichment \u200b\u200bare obtained and the data of the node which has been enriched is saved\r\n $('#retroceder').show();\r\n $('#avanzar').hide();\r\n verdadero=true;\r\n var optenr = $('input:radio[name=py]:checked').val();\r\n var typeenr = $(\"#selecten\").val();\r\n var taucut = $(\"#custom-handle\").text();\r\n console.log(taucut);\r\n \/\/Loading image\r\n $(\"#gifbt\").show();\r\n var url=\"\";\r\n \r\n\/\/A post request is sent to another script when the data is back a form is executed that takes us to the other page after that the loading image is hidden\r\n $.post('https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/enrichment\/enrichcmap.php', {data:datos2,type:typeenr,opt:optenr}).done(function(data){\r\n var url = 'http:\/\/imdeafoodcompubio.com\/index.php\/enrichment-analysis\/' ;\r\n var form = $('<form action=\"' + url + '\" method=\"post\" target=\"_blank\">' +\r\n '<input type=\"text\" name=\"formulario\" id=\"formulario\" value=\"'+data+'\"\/>' +\r\n '<input type=\"text\" name=\"pvalue\" id=\"pvalue\" value=\"'+optenr+'\"\/>' +\r\n '<input type=\"text\" name=\"database\" id=\"database\" value=\"'+typeenr+'\"\/>' +\r\n '<input type=\"text\" name=\"taucut\" id=\"taucut\" value=\"'+taucut+'\"\/>' +\r\n '<\/form>');\r\n form.hide();\r\n $('body').append(form);\r\n form.submit(); \r\n $(\"#gifbt\").hide();\r\n });\r\n }); \r\n\r\n\r\n\/\/Event change number of nodes\r\n$(document).on('keyup', '#edges', function() {\r\n if (datos2['0']!=null){\r\n nodo();\r\n }\r\n});\r\n\r\n\r\n\/\/ Download Event \r\n$(document).on('click', '.btn-secondary', function() {\r\n\r\n\/\/Get the page where you are and what type of download it is\r\n var subid= $(this).attr(\"id\");\r\n \r\n\/\/Copy with the obtained data, with this it is added to an input and the copy command is executed later the input is deleted\r\n \/\/ With this is on the clipboard\r\n if (subid == \"copy\" ) {\r\n dataacopiar=[];\r\n copy=\"\";\r\n for (let i = 0; i < datos2.length || i < 10 ; i++) {\r\n dataacopiar[i]={};\r\n copy=copy+'\/n'\r\n for (var dato in datos2[i]){\r\n copy=copy+datos2[i][dato];\r\n\r\n}\r\n}\r\n $('<input id=\"textcopy\">').val(copy).appendTo('body').select(); \r\n document.execCommand('copy'); \r\n var el = document.getElementById('textcopy');\r\n el.remove();\r\n }\r\n \/\/TSV OR CSV the file is sent to descargararchivo.php and the associative array is sent\r\n else {\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/descargararchivo.php',\r\n type: 'post',\r\n data: {key:subid,data:datos2,name:\"tableCMAP\"},\r\n dataType: 'json',\r\n success:function(response){\r\n\/\/Get the name of the file which is on the response and create an element <a> and add the attribute\r\n \/\/'download' and indicate where the file is located and order the element to be clicked\r\n \/\/and start the download\r\n fileName=response;\r\n fileUrl=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/desc\/\"+fileName;\r\n var a = document.createElement(\"a\");\r\n a.href = fileUrl;\r\n a.setAttribute(\"download\", fileName);\r\n a.click();\r\n }\r\n });\r\n\r\n }\r\n\r\n});\r\n\r\n\r\n\r\n\/\/Function mostrartablas \r\nfunction mostrartablas(){\r\n\/\/Get the value of the two inputs\r\n var key = $('#key').val();\r\n var key2 = $(\"#origen\").val();\r\n \/\/Ajax request\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:key,search2:key2, type:type},\r\n dataType: 'json',\r\n success:function(response){\r\n\/\/Get the values \u200b\u200bfrom the ajax response and set, check and display the various parameters\/variables\r\n\r\n let pages = 0;\r\n datos['a']=response;\r\n datanew=response;\r\n datos['type']=type;\r\n var len = response.length;\r\n if ((response[0]['compound'] != undefined && response[0]['treatment'] == undefined) || (response[0]['treatment'] != undefined && response[0]['compound'] == undefined) ) {\r\nvar datatable = [];\r\n for (let index = 0; index < response.length; index++) {\r\n datatable[index]=[];\r\nfor (var value in response[index]){ \r\n datatable[index].push(response[index][value]);\r\n}\r\n}\r\nif(datacharge==true){\r\n datacharge=false;\r\n}else {\r\n table.destroy();\r\n}\r\n table = $('#table').DataTable({\r\n \r\n\r\n data: datatable,\r\n columns: [\r\n { title: \"<span tabindex='0' data-toggle='popover' data-content='GEO study identifier click on the word to go to the original information source'> Accession <img src='http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png' width='15' \/> <\/span>\" ,\r\n \"render\": function (data, type, row) {\r\n return '<a href=\"https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GSE' + data + '\" target=\"no_blank\">' + data + '<\/a>';\r\n }\r\n },\r\n { title: \"Treatment\" },\r\n { title: \"Time Point\" },\r\n { title: \"Concentration\" },\r\n { title: \"Cell line\/Sample type\" },\r\n \r\n ],\r\n language: {\r\n \"lengthMenu\": '<h2> Show entries <\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpentries\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpentries\"><\/div> _MENU_' ,\r\n \"search\": ' <h2> Filter Records<\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpfilter\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpfilter\"><\/div> _INPUT_' \r\n },\r\n });\r\n \r\n $('[data-toggle=\"popover\"]').popover({\r\n 'trigger': 'hover',\r\n});\r\n $(\"#divtable\").show();\r\n }\r\n } ,error: function(XMLHttpRequest, textStatus, errorThrown) { \r\n alert(\"Status: \" + textStatus); alert(\"Error: \" + errorThrown); \r\n } \r\n });\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/\/Function load_data2 is used to load the information to the tables shown on the page a is equal to the current page\r\nfunction load_data2(){\r\n\/\/Depends on the 'idloaddata2' a different table is created for each type with different fields and information\r\n \r\nvar datatable2 = [];\r\n for (let index = 0; index < datos2.length; index++) {\r\n datatable2[index]=[];\r\nfor (var value in datos2[index]){ \r\n datatable2[index].push(datos2[index][value]);\r\n}\r\n}\r\nif(datacharge2==true){\r\n datacharge2=false;\r\n}else {\r\n table2.destroy();\r\n}\r\n\r\nif(idloaddata2+=1){\r\n table2 = $('#table2').DataTable({\r\n data: datatable2,\r\n order: [[2, 'desc']],\r\n columns: [\r\n { title: \"Compound\"},\r\n { title: \"Cell Line\" },\r\n { title: \"<span tabindex='0' data-toggle='popover' data-content='Allow to filter results by absolute tau score in the table and the networkTau score represents the similarity (positive) or dissimilarity (negative) relationship between food and drug gene profiles. Tau score ranges from -100 to 100. A score of 90 means that 10% of the reference perturbations had an enrichment score as high as the query (Subramanian et al. 2017).'> Similarity score <img src='http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png' width='15' \/> <\/span>\" },\r\n\r\n ],\r\n language: {\r\n \"lengthMenu\": '<h2> Show entries <\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpentries2\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpentries2\"><\/div> _MENU_' ,\r\n \"search\": ' <h2> Filter Records<\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpfilter2\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpfilter2\"><\/div> _INPUT_' \r\n },\r\n });\r\n }else{\r\n table2 = $('#table2').DataTable({\r\n data: datatable2,\r\n columns: [\r\n { title: \"Treatment\"},\r\n { title: \"Concentration\" },\r\n { title: \"Time Point\" },\r\n { title: \"Origin Name\" },\r\n { title: \"CMAP Node ID\" },\r\n { title: \"Drug Node ID\" },\r\n { title: \"TAU\" },\r\n\r\n ],\r\n });\r\n \r\n } \r\n $('[data-toggle=\"popover\"]').popover({\r\n 'trigger': 'hover',\r\n});\r\n $(\"#divtable2\").show();\r\n $('#secondpart').show();\r\n $('.search-py').show();\r\n \r\n }\r\n\/\/Function load_data 3 the datacomm is passed, which is an array with the information that we are going to show\r\n function load_data3(datacomm){\r\nvar datatable3 = [];\r\n for (let index = 0; index < datacomm.length; index++) {\r\n datatable3[index]=[];\r\nfor (var value in datacomm[index]){ \r\n datatable3[index].push(datacomm[index][value]);\r\n}\r\n}\r\nif(datacharge3==true){\r\n datacharge3=false;\r\n}else {\r\n table3.destroy();\r\n}\r\n\r\n\r\n table3 = $('#table3').DataTable({\r\n data: datatable3,\r\n columns: [\r\n { title: \"Accession\"},\r\n { title: \"Treatment\t\" },\r\n { title: \"Concentration\" },\r\n { title: \"Time Point\" },\r\n ],\r\n });\r\n\r\n }\r\n\r\n\/\/Function nodo used to display a graph\r\nfunction nodo(){ \r\n\/\/The div that contains the network is cleaned\r\n$(\"#mynetwork\").empty();\r\n\/\/The network is started by creating the first node in green color\r\n var nodes = new vis.DataSet([\r\n {id: 0 ,color:\"green\"}\r\n ]);\r\n\/\/Get the number of edges requested by the user\r\n var nedges=$(\"#edges\").val();\r\n if (nedges>datos2.length) {\r\n nedges=datos2.length;\r\n }\r\n\r\n var edges = new vis.DataSet();\r\n\/\/Depending on the provisional it shows some data or others\r\n \/\/Negative tau will be purple and positive tau will be orange\r\n if(provisional==1){\r\n for (let i = 0; i < nedges; i++) {\r\n var nodocompoundcell=datos2[i]['compound']+\":\"+datos2[i]['cell_line']\r\n\r\n if (datos2[i]['tau']<0) {\r\n nodes.add([ \r\n {id: i+1, label: nodocompoundcell,color:\"rgb(221,160,221)\"},\r\n ]);\r\n\r\n edges.add([\r\n {from: 0, to: i+1,color:\"purple\"},\r\n ]);\r\n }else {\r\n nodes.add([ \r\n {id: i+1, label: nodocompoundcell,color:\"orange\"},\r\n ]);\r\n \r\n edges.add([\r\n {from: 0, to: i+1,color:\"orange\"},\r\n ]);\r\n }\r\n\r\n \r\n }\r\n }else if(provisional==2){\r\n for (let i = 0; i < nedges; i++) {\r\n var nodocompoundcell=datos2[i]['compound']+\":\"+datos2[i]['cell_line']\r\n\r\n if (datos2[i]['tau']<0) {\r\n nodes.add([ \r\n {id: i+1, label: nodocompoundcell,color:\"rgb(221,160,221)\"},\r\n ]);\r\n\r\n edges.add([\r\n {from: 0, to: i+1,color:\"purple\"},\r\n ]);\r\n }else {\r\n nodes.add([ \r\n {id: i+1, label: nodocompoundcell,color:\"orange\"},\r\n ]);\r\n \r\n edges.add([\r\n {from: 0, to: i+1,color:\"orange\"},\r\n ]);\r\n }\r\n\r\n \r\n }\r\n }\r\n else {\r\n for (let i = 0; i < nedges; i++) {\r\n var nodocompoundcell=datos2[i]['treatment']+\":\"+datos2[i]['concentration']+\":\"+datos2[i]['time_point']+\":\"+datos2[i]['origin_name']\r\n\r\n if (datos2[i]['tau']<0) {\r\n nodes.add([ \r\n {id: i+1, label: nodocompoundcell,color:\"rgb(221,160,221)\",group:\"tau-\"},\r\n ]);\r\n\r\n edges.add([\r\n {from: 0, to: i+1,color:\"purple\"},\r\n ]);\r\n }else {\r\n nodes.add([ \r\n {id: i+1, label: nodocompoundcell,color:\"orange\",group: \"tau+\"},\r\n ]);\r\n \r\n edges.add([\r\n {from: 0, to: i+1,color:\"orange\"},\r\n ]);\r\n }\r\n\r\n \r\n }\r\n }\r\n\r\n\r\nvar container = document.getElementById(\"mynetwork\");\r\n \/\/ provide the data in the vis format\r\n var data = {\r\n nodes: nodes,\r\n edges: edges\r\n };\r\nvar options = {\r\n layout: {\r\n improvedLayout:false,\r\n },\r\n\r\n}\r\n\r\n\r\n \/\/ initialize your network!\r\n var network = new vis.Network(container, data, options);\r\n\r\n\r\n\/\/Map key\r\n var leyenda = document.getElementById(\"leyenda\");\r\nvar x = -leyenda.offsetWidth\/2;\r\nvar step = 70;\r\n nodes.add({\r\n id: 1000000000,\r\n x: x,\r\n y: -300,\r\n shape: \"square\",\r\n color:\"rgb(221,160,221)\",\r\n label: \"TAU < 0 \",\r\n group: \"tau-\",\r\n value: 1,\r\n fixed: true,\r\n physics: false,\r\n });\r\n nodes.add({\r\n id: 1000000001,\r\n x: x,\r\n y: -300 + step,\r\n shape: \"square\",\r\n color:\"orange\",\r\n label: \"TAU > 0 \",\r\n group: \"tau+\",\r\n value: 1,\r\n fixed: true,\r\n physics: false,\r\n });\r\n\r\nnetwork.on( 'click', function(properties) {\r\n var ids = properties.nodes;\r\n var clickedNodes = nodes.get(ids);\r\n const parts = clickedNodes[0]['label'].split(\":\");\r\n\r\n $('.dataTables_filter input').val(parts[0]);\r\n table2.search( parts[0] ).draw();\r\n $(\".dataTables_filter input\").trigger(\"focus\");\r\n\/* var valor=-1;\r\n for (let index = 0; index < datanew.length; index++) {\r\n if(datanew[index]['drug']==clickedNodes[0]['label'] || datanew[index]['food']==clickedNodes[0]['label']){\r\n valor=index;\r\n }\r\n}\r\n $('#content1'+valor).click();*\/\r\n});\r\n \r\n \r\n}\r\n\r\n\r\n\r\n\r\n\r\n});\r\n <\/script>\r\n\r\n\r\n<\/body>\r\n<\/html>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-140","page","type-page","status-publish","hentry","no-thumb"],"_links":{"self":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":32,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages\/140\/revisions"}],"predecessor-version":[{"id":675,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages\/140\/revisions\/675"}],"wp:attachment":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/media?parent=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":140,"date":"2021-04-13T12:12:13","date_gmt":"2021-04-13T12:12:13","guid":{"rendered":"http:\/\/imdeafoodcompubio.com\/?page_id=140"},"modified":"2023-08-02T07:10:45","modified_gmt":"2023-08-02T07:10:45","slug":"food-cmap","status":"publish","type":"page","link":"https:\/\/imdeafoodcompubio.com\/index.php\/food-cmap\/","title":{"rendered":"Food-CMAP"},"content":{"rendered":"\r\n\r\n\r\n\r\n\r\n\r\n<\/title>\r\n <link rel=\"stylesheet\" href=\"\/\/code.jquery.com\/ui\/1.13.2\/themes\/base\/jquery-ui.css\">\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n<script src=\"https:\/\/code.jquery.com\/jquery-migrate-1.4.1.min.js\"><\/script>\r\n <script src=\"https:\/\/code.jquery.com\/ui\/1.13.2\/jquery-ui.js\"><\/script>\r\n\r\n\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/css\/bootstrap.min.css\" integrity=\"sha384-TX8t27EcRE3e\/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2\" crossorigin=\"anonymous\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ\/JpcUGGOn+Y7RsweNrtN\/tE3MoK7ZeZDyx\" crossorigin=\"anonymous\"><\/script>\r\n\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.datatables.net\/v\/dt\/dt-1.13.1\/datatables.min.css\"\/>\r\n \r\n<script type=\"text\/javascript\" src=\"https:\/\/cdn.datatables.net\/v\/dt\/dt-1.13.1\/datatables.min.js\"><\/script>\r\n\r\n\r\n\r\n<script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/vis-network\/standalone\/umd\/vis-network.min.js\"><\/script>\r\n\r\n<style>\r\n body{\r\n font-family: Arial, sans-serif;\r\n \r\n }\r\n .site-content{\r\n height: auto;\r\n }\r\n .search-py{\r\n background-color:white;\r\n width: 100%;\r\n font-size: 20px;\r\n border-radius: 10px;\r\n float:left;\r\n margin-top:2%;\r\n clear:left;\r\n }\r\n #selectdata2{\r\n font-size:22px;\r\n }\r\n #selectdata{\r\n margin-left:25%;\r\n }\r\n #selectdata select {\r\n width:30%;\r\n }\r\n\r\n .column{\r\n background-color:white;\r\n width: 100%;\r\n border-radius: 10px;\r\n \/*box-shadow: 5px 10px #f1f1f1;*\/\r\n } \r\n\r\n.search-box {\r\n margin:5%;\r\n margin-left:10%;\r\n width: 80%;\r\n position: relative;\r\n display:inline-block;\r\n font-size: 22px;\r\n padding-bottom: 0px;\r\n }\r\n .search-box input[type=\"text\"]{\r\n height: 60px;\r\n padding: 5px 10px;\r\n border: 1px solid #CCCCCC;\r\n font-size: 22px;\r\n max-height: 100px;\r\n }\r\n .search-box input[type=\"number\"]{\r\n height: 60px;\r\n padding: 5px 10px;\r\n border: 1px solid #CCCCCC;\r\n font-size: 22px;\r\n max-height: 100px;\r\n }\r\n .search-box select , #selectdata select{\r\n height: 60px;\r\n padding: 5px 10px;\r\n border: 1px solid #CCCCCC;\r\n font-size: 22px;\r\n max-height: 100px;\r\n }\r\n .result{\r\n z-index: 999;\r\n top: 100%;\r\n left: 0;\r\n overflow: auto;\r\n opacity: 1;\r\n }\r\n .search-box input[type=\"text\"], .result{\r\n width: 100%;\r\n box-sizing: border-box;\r\n max-height: 115px;\r\n opacity: 1;\r\n }\r\n .result p{\r\n margin: 0;\r\n padding: 2px 10px;\r\n border: 1px solid #CCCCCC;\r\n border-top: none;\r\n cursor: pointer;\r\n max-height: 100px;\r\n }\r\n .result p:hover{\r\n background: #f2f2f2;\r\n max-height: 100px;\r\n }\r\n #search-options{\r\n border:1px solid black;\r\n \r\n }\r\n\r\n\r\n#filter{\r\n float: left;\r\n width: 30%;\r\n margin:5%;\r\n}\r\n\r\nspan{\r\n font-size:22px;\r\n}\r\n#enrichment{ \r\n float:right; \r\n background-color: #4CAF50; \r\n border: none;\r\n color: white;\r\n text-align: center;\r\n text-decoration: none;\r\n font-size: 16px;\r\n }\r\n\r\ninput[type=\"radio\"]{\r\n height: 20px; \r\n width: 15px;\r\n}\r\n\r\n #custom-handle {\r\n width: 2em;\r\n height: 1.6em;\r\n top: 50%;\r\n margin-top: -.8em;\r\n text-align: center;\r\n background:blue;\r\n color:white;\r\n }\r\n \r\n .tickmark{\r\n display:inline-block;\r\n margin-top:1em;\r\n height:10px;\r\nposition:absolute;\r\n }\r\n\r\n\r\n#selectdata h3{\r\n display:inline;\r\n}\r\n#secondpart{\r\n margin-top:2%;\r\n font-size:14px;\r\n background-color:white;\r\n min-height:600px;\r\n}\r\n\r\n\r\n#containernetwork{\r\n height:600px;\r\n width:60%;\r\n float:right;\r\n}\r\n#mynetwork{\r\nheight:400px;\r\nwidth:auto; \r\n}\r\n#leyenda{\r\n height:100px; \r\n width:50px;\r\n}\r\n\r\n .form-control:focus {\r\n border-color: #0000FF;\r\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102,205,170, 0.6);\r\n}\r\n\r\n\r\n #divtable , #divtable2{\r\n background-color:white; \r\n border-radius: 10px;\r\nfont-size:22px;\r\nwidth:auto; \r\n margin-top:2%;\r\n }\r\n \r\n #selectdata h2{\r\n display:inline; \r\n text-align:center; \r\n font-size:2em;\r\n\r\n\r\n }\r\n #divtable h2 , #divtable2 h2 , #divtable3 h2 , h3{\r\n display:inline; \r\n }\r\n \r\n#divtable .dataTables_wrapper,\r\n#divtable2 .dataTables_wrapper ,\r\n#divtable3 .dataTables_wrapper{\r\n width: 80%;\r\n margin: 2%;\r\n margin-left: 10%;\r\n margin-right: 10%;\r\n font-size:22px;\r\n}\r\nh1 {\r\n font-size:2em;\r\n}\r\n\r\n .helpresult{\r\n z-index: 999;\r\n top: 100%;\r\n left: 10%;\r\n overflow: auto;\r\n opacity: 1;\r\n }\r\n #divtable p , #divtable2 p , #divtable3 p {\r\n color: black !important ;\r\n }\r\n .helpresult p , .helpresult h2 , #enrichp{\r\n font-size:0.9vw;\r\n margin: 0;\r\n margin-left:2%;\r\n font-style:italic;\r\n max-height: 100px;\r\n }\r\n \r\n .dataTables_length, .dataTables_length select\r\n { \r\n font-size: 1.5em;\r\n \r\n }\r\n .popover{\r\n font-size: 2em;\r\n\r\n }\r\n .search-py h1 { font-size:3em; }\r\n .search-py h3{ font-size:1.5em; }\r\n \r\n #gifbt {\r\n position: absolute;\r\n left: 45%;\r\n top: 87%;\r\n width: 5%;\r\n height: 5%;\r\n }\r\n caption {\r\n text-align:center;\r\n font-style:italic;\r\n caption-side:top;\r\n }\r\n \r\n .btn-primary {\r\n width:10%;\r\n font-size:16px;\r\n margin-left:50%;\r\n }\r\n \r\n#modaldesc {\r\n position: absolute;\r\n left: 50%;\r\n top: 90%;\r\n transform: translate(-50%, -50%);\r\n}\r\n\r\n.btn-secondary{\r\n width:20%;\r\n font-size:16px;\r\n margin-left:10%;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"column\">\r\n <div class=\"search-box\">\r\n Search by: <img id=\"datahelpsearch\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/>\r\n <div class=\"helpresult\" id=\"helpsearch\"><\/div>\r\n <select id=\"search-options\" name=\"search\">\r\n <option value=\"fdrug\">Food-drug gene expression similarity<\/option>\r\n <option value=\"fgene\">Food-gene gene expression similarity<\/option>\r\n <option value=\"dfood\">Drug-food gene expression similarity<\/option>\r\n <\/select>\r\n \r\n <div>\r\n Compound <img id=\"datahelp1\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/>\r\n <div class=\"helpresult\" id=\"help1\"><\/div>\r\n <input type=\"text\" id=\"key\" class=\"key form-control\" placeholder='Resveratrol'>\r\n <div class=\"result\" id=\"result\"><\/div>\r\n Sample Origin <img id=\"datahelpsample\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/>\r\n <div class=\"helpresult\" id=\"helpsample\"><\/div>\r\n <input type=\"text\" id=\"origen\" class=\"key form-control\" placeholder=''>\r\n <div class=\"result\" id=\"result2\"><\/div>\r\n \r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<div id=\"divtable\">\r\n\r\n\r\n <table id=\"table\" class=\"hover\" style=\"width:100%\">\r\n <caption> Click in the row of interest to get more information <\/caption>\r\n <\/table>\r\n<\/div>\r\n\r\n<div id='divtable2'>\r\n <button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#modaldesc\">\r\nDownload\r\n<\/button>\r\n <table id=\"table2\" class=\"stripe\" style=\"width:100%\"><\/table>\r\n<\/div>\r\n\r\n\r\n \r\n<div id='secondpart'>\r\n <div id='filter'>\r\n <h1>Food-Drugs similarity network <\/h1>\r\n <div id=\"selectdata2\"><h3>Number of nodes to display<\/h3> <img id=\"datahelpnodes\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/> <\/div>\r\n <div class=\"helpresult\" id=\"helpnodes\"><\/div>\r\n <input type=\"number\" id=\"edges\" name=\"edges\" value=10\r\n min=\"1\">\r\n \r\n<h3>Similarity score cutoff<\/h3> <img id=\"datahelptau\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/> \r\n <div class=\"helpresult\" id=\"helptau\"><\/div> \r\n <script>\r\n jQuery(document).ready(function($) {\r\n var handle = $( \"#custom-handle\" );\r\n $( \"#slider\" ).slider({\r\n create: function() {\r\n $( \"#slider\" ).slider( \"value\", 90 );\r\n handle.text( $( this ).slider( \"value\" ) );\r\n \r\n },\r\n\r\n \r\n });\r\n \r\n for (var i = 0; i <= 10 ; i++) {\r\n $('<span class=\"tickmark\" id=\"tickmark'+i+'\"><\/span>').css('left', (10 * i) + '%').appendTo($('#slider'));\r\n $('#tickmark'+i).text((10*i));\r\n }\r\n \r\n } );\r\n <\/script>\r\n\r\n \r\n<div id=\"slider\">\r\n <div id=\"custom-handle\" class=\"ui-slider-handle\"><\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"containernetwork\">\r\n<div id=\"leyenda\"><\/div>\r\n<div id=\"mynetwork\"><\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n <div class=\"search-py\">\r\n <img decoding=\"async\" id=\"gifbt\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2a\/Loading_Key.gif\" width=\"250\" \/>\r\n <h1 style=\"text-align:center;\">Drug mechanisms enrichment analysis <\/h1>\r\n <div id=\"selectdata\">\r\n <h3>Select Database<\/h3> <img id=\"datahelpenrich\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/> \r\n <div class=\"helpresult\" id=\"helpenrich\"><\/div>\r\n \r\n <p id='enrichp'>Click on the box to display the differents pathways options<\/p>\r\n\r\n<select id=\"selecten\">\r\n<option value=\"drugbank\">Drugbank<\/option>\r\n\r\n<option value=\"CMAP\">CMAP<\/option>\r\n<option value=\"MESH\">MeSH<\/option>\r\n<option value=\"Kegg_phytochemicals\">Kegg phytochemicals<\/option>\r\n<\/select>\r\n<input type=\"radio\" id=\"none\" name=\"py\" value=\"none\" checked>\r\nNone\r\n<br>\r\n<input type=\"radio\" id=\"BH\" name=\"py\" value=\"BH\">\r\nBenjamini-Hochberg\r\n<br>\r\n<input type=\"radio\" id=\"bonferroni\" name=\"py\" value=\"bonferroni\">\r\nBonferroni\r\n\r\n<button id=\"enrichment\" class=\"button\" >Run enrichment analysis<\/button>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"modal fade\" id=\"modaldesc\" role=\"dialog\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <span aria-hidden=\"true\">×<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <button type=\"button\" id='copy' class=\"btn btn-secondary\">copy\r\n <img id=\"datahelpcopy\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/> \r\n <\/button>\r\n <button type=\"button\" id='tsv' class=\"btn btn-secondary\">TSV<\/button>\r\n <button type=\"button\" id='csv' class=\"btn btn-secondary\">CSV<\/button>\r\n \r\n <div class=\"helpresult\" id=\"helpcopy\"><\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\r\n\/\/ Define variables and set hide values \u200b\u200bfor css\r\n $('.search-py').hide();\r\n\r\n $(\"#secondpart\").hide();\r\n $(\"#gifbt\").hide();\r\n $(\"#divtable\").hide();\r\n $(\"#divtable2\").hide();\r\n $(\"#data3\").hide();\r\n $(\"#headertable2\").hide();\r\n $(\".descarga\").hide();\r\n $(\"#numerosearch\").hide();\r\n var arraynom = [\"accession\" ,\"node_id\",\"treatment\",\"time_point\",\"concentration\", \"origin_name\"];\r\n var arraynom2 = [\"node_id\" ,\"cmap_node_id\",\"tau\",\"compound\",\"cell_line\"];\r\nvar verdadero=false;\r\nvar idloaddata2 =1;\r\nvar idmax;\r\nvar dataenrichment;\r\nvar idmax2;\r\nvar longi2;\r\nvar nregis=5;\r\nvar nregis2=10;\r\nvar datanew = {};\r\nvar datanew2 = {};\r\nvar datos={};\r\nvar datos2={};\r\nvar type=2;\r\nvar botonvalor =\"fdrug\";\r\nvar valortrue=false;\r\nvar provisional=1;\r\nvar orden=\"\";\r\nvar pagesession=0;\r\nvar pagecarousel=0;\r\nvar datacharge=true;\r\nvar datacharge2=true;\r\nvar datacharge3=true;\r\n\r\nvar idtau;\r\nvar table2;\r\n\r\n\r\n\/\/ JQUERY \r\njQuery(document).ready(function($) {\r\n \r\n \/\/Keyup event to fill the div which will show the autocomplete suggestions\r\n $('.key').on('keyup input', function() { \r\n \/\/We get the value and the id of the input.\r\nvar key = $(this).val();\r\norden = $(this).attr(\"id\");\r\n\/\/We check that the value is not null or empty\r\nif(key != ''){\r\n \/\/We make a request to ajax that redirects us to another script where the Mysql query will be executed and will return the first 5 records similar to what is being searched for\r\n jQuery.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:key, type:1,provisional:provisional,orden:orden},\r\n dataType: 'json',\r\n success:function(response){\r\n \/\/Here in this if we check which of the two inputs is the one being written\r\n \/\/We get the length of the response and add one by one the response in the div\r\n if (orden==\"key\") {\r\n var len = response.length;\r\n $(\"#result\").empty();\r\n for( var i = 0; i<len; i++){\r\n var name = response[i]['name'];\r\n $(\"#result\").append(\"<p>\"+name+\"<\/p>\");\r\n } \r\n }else {\r\n var len = response.length;\r\n $(\"#result2\").empty();\r\n for( var i = 0; i<len; i++){\r\n var name = response[i]['name'];\r\n $(\"#result2\").append(\"<p>\"+name+\"<\/p>\");\r\n }\r\n }\r\n }, error: function(XMLHttpRequest, textStatus, errorThrown) { \r\n alert(\"Status: \" + textStatus); alert(\"Error: \" + errorThrown); \r\n } \r\n });\r\n}\r\n \/\/If the answer is empty, the result is cleaned\r\nelse {\r\n $(\".result\").empty();\r\n}\r\n})\r\n\r\n\r\n\r\n\r\n\/\/CLICK event on any of the input options\r\n$(document).on(\"click\", \".result p\", function(){\r\n \/\/Check what input is clicked and call the function\r\n if (orden==\"key\") {\r\n $('#result').empty(); \r\n $('#'+orden).val($(this).text());\r\n mostrartablas();\r\n }else{\r\n $('#result2').empty(); \r\n $('#'+orden).val($(this).text());\r\n \/\/Check the value of the first input to call the function\r\n if ($('#key').val()!=null) {\r\n mostrartablas();\r\n }\r\n }\r\n });\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/\/Help events, when the event is activated the text is shown to indicate the instructions and when it ends everything is hidden\r\n$(document).on(\"mouseenter\", \".help\", function(){\r\n$(\".helpresult\").empty();\r\nvar idhelp = $(this).attr(\"id\");\r\nif (idhelp==\"datahelp1\") {\r\n $(\"#help1\").append(\"<p>Type the term of interest. If FooDrugs database doesn't have experiments with the query term a \u201cNo Results Found\u201d message will appear.<\/p>\");\r\n \r\n} else if (idhelp==\"datahelpsample\") {\r\n $(\"#helpsample\").append(\"<p>Allow you to filter by cell line or sample type. If FooDrugs database doesn't have cell lines or sample types with the query term a \u201cNo Results Found\u201d message will appear.<\/p>\");\r\n\r\n} else if (idhelp==\"datahelpsearch\") {\r\n $(\"#helpsearch\").append(\"<p>Food-drug gene expression similarity: The search is done by food term and load information for food-drug gene expression similarity from FooDrugs database<\/p> <br>\");\r\n $(\"#helpsearch\").append(\"<p>Food-gene perturbagen similarity: The search is done by food term and load information for food-gene perturbagens (gene knock down or overexpression experiments from The Connectivity Map) (PMID 29195078) from FooDrugs database<\/p> <br>\");\r\n $(\"#helpsearch\").append(\"<p>Drug-food gene expression similarity: The search is done by drug term and load information for food-drug from FooDrugs database<\/p>\");\r\n\r\n}\r\nelse if (idhelp==\"datahelpentries\") {\r\n $(\"#helpentries\").append(\"<p>Allow you to filter the number of studies to display<\/p>\");\r\n \r\n} \r\nelse if (idhelp==\"datahelpfilter\") {\r\n $(\"#helpfilter\").append(\"<p>Allow you to filter with free text on the table by any field<\/p>\");\r\n \r\n} else if (idhelp==\"datahelpentries2\") {\r\n $(\"#helpentries2\").append(\"<p>Allow you to filter the number of studies to display<\/p>\");\r\n \r\n} \r\nelse if (idhelp==\"datahelpfilter2\") {\r\n $(\"#helpfilter2\").append(\"<p>Allow you to filter with free text on the table by any field<\/p>\");\r\n \r\n}else if (idhelp==\"datahelpentries3\") {\r\n $(\"#helpentries3\").append(\"<p>Allow you to filter the number of studies to display<\/p>\");\r\n \r\n} \r\nelse if (idhelp==\"datahelpfilter3\") {\r\n $(\"#helpfilter3\").append(\"<p>Allow you to filter with free text on the table by any field<\/p>\");\r\n \r\n}\r\nelse if(idhelp==\"datahelpenrich\"){\r\n $(\"#helpenrich\").append(\"<p>Allow to perform enrichment analysis with the drug terms selected by the similarity score (tau) for different databases<\/p>\");\r\n\r\n}else if (idhelp==\"datahelpnodes\") {\r\n $(\"#helpnodes\").append(\"<p>Allow you to select the number of nodes displayed in the network<\/p>\");\r\n \r\n} else if (idhelp==\"datahelptau\") {\r\n $(\"#helptau\").append(\"<p>Allow to filter results by absolute tau score in the table and the network.<\/p>\");\r\n $(\"#helptau\").append(\"<p>Tau score represents the similarity (positive) or dissimilarity (negative) relationship between food and drug gene profiles. Tau score ranges from -100 to 100. A score of 90 means that 10% of the reference perturbations had an enrichment score as high as the query (Subramanian et al. 2017).<\/p>\");\r\n\r\n}else if (idhelp==\"datahelpcopy\"){\r\n $(\"#helpcopy\").append(\"<p>Allow to copy the information on the clipboard<\/p>\");\r\n\r\n}\r\n});\r\n\r\n$(document).on(\"mouseleave\", \".help\", function(){\r\n$(\".helpresult\").empty();\r\n });\r\n\r\n\r\n\r\n\r\n\/\/Parameter change event of the food\/gen\/drug option select\r\n $(\"#search-options\").on(\"change\", function(){\r\n var select = $(\"#search-options\");\r\n botonvalor=select.val();\r\n if (botonvalor==\"fdrug\") {\r\n provisional=1;\r\n type=2;\r\n }else if (botonvalor==\"fgene\") {\r\n type=2;\r\n provisional=2;\r\n }else if (botonvalor==\"dfood\") {\r\n provisional=3;\r\n type=3;\r\n }\r\n\/\/Empty all the previous tables and reset the page\r\n $(\"#divtable\").hide();\r\n $(\".key\").val('');\r\n $(\"#divtable2\").hide();\r\n $(\"#secondpart\").hide();\r\n $('.search-py').hide();\r\n\r\n\r\n });\r\n \r\n\/\/Tau value change event\r\n $(\"#slider\").slider({\r\n \/\/ Execute a function when the user moves the slider handle\r\n slide: function(event, ui) {\r\n var handle = $( \"#custom-handle\" );\r\n handle.text( ui.value );\r\n\/\/We get tau value\r\n console.log(ui.value);\r\n\/\/We send the data of the selected node to make the change when changing the tau if there is no selected node it will not be executed\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:idtau, type:5,tau:ui.value,a:provisional},\r\n dataType: 'json',\r\n success:function(response){\r\n\/\/ Reset the parameters of the table\r\n datos2=response;\r\n load_data2();\r\n nodo();\r\n\/\/The user's view is redirected to where the table is located\r\n elemento = document.getElementById(\"prueba\");\r\n elemento.scrollIntoView();\r\n }});\r\n }\r\n });\r\n\r\n\r\n\r\n\r\n\r\n\/\/table click event \r\n$(document).on('click', '#table tbody tr', function() { \r\n tau=90;\r\n$(\".highlight\").css({'background-color': \"transparent\" });\r\n $( '.highlight' ).removeClass( \"highlight\" );\r\n $(this).css(\"background-color\",\"#CDCDCD\");\r\n var row = table.row( this ).data()\r\n $( this ).addClass( \"highlight\" );\r\n idtau = row[5];\r\n\r\n\/\/Request to ajax\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:row[5], type:5,tau:tau,a:provisional},\r\n dataType: 'json',\r\n success:function(response){\r\n\/\/Configuration of parameters for the new table\r\n datos2={};\r\n datos2=response;\r\n nodo();\r\n load_data2();\r\n }});\r\n }); \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/\/Community button click event\r\n $(document).on('click', '#comm', function() {\r\n \/\/if 'valuetrue' is equal to true the data will be taken and by means of a post request they will be sent to the ajaxsql file\r\n \/\/to which the type and the node_id will be passed, the true value determines if the table search is performed or not\r\n \r\n var nodeid = datos2[0]['node_id'];\r\n $.post('https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/ajaxsql.php', {search:nodeid, type:6}).done(function(data){\r\n data = JSON.parse(data);\r\n load_data3(data);\r\n });\r\n \r\n });\r\n\r\n\r\n\r\n\r\n\/\/Click event Enrichment \r\n $(document).on('click', '#enrichment', function() {\r\n\/\/ First check that the second table has been executed\r\n \/\/ After that, the values for the enrichment \u200b\u200bare obtained and the data of the node which has been enriched is saved\r\n $('#retroceder').show();\r\n $('#avanzar').hide();\r\n verdadero=true;\r\n var optenr = $('input:radio[name=py]:checked').val();\r\n var typeenr = $(\"#selecten\").val();\r\n var taucut = $(\"#custom-handle\").text();\r\n console.log(taucut);\r\n \/\/Loading image\r\n $(\"#gifbt\").show();\r\n var url=\"\";\r\n \r\n\/\/A post request is sent to another script when the data is back a form is executed that takes us to the other page after that the loading image is hidden\r\n $.post('https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/enrichment\/enrichcmap.php', {data:datos2,type:typeenr,opt:optenr}).done(function(data){\r\n var url = 'http:\/\/imdeafoodcompubio.com\/index.php\/enrichment-analysis\/' ;\r\n var form = $('<form action=\"' + url + '\" method=\"post\" target=\"_blank\">' +\r\n '<input type=\"text\" name=\"formulario\" id=\"formulario\" value=\"'+data+'\"\/>' +\r\n '<input type=\"text\" name=\"pvalue\" id=\"pvalue\" value=\"'+optenr+'\"\/>' +\r\n '<input type=\"text\" name=\"database\" id=\"database\" value=\"'+typeenr+'\"\/>' +\r\n '<input type=\"text\" name=\"taucut\" id=\"taucut\" value=\"'+taucut+'\"\/>' +\r\n '<\/form>');\r\n form.hide();\r\n $('body').append(form);\r\n form.submit(); \r\n $(\"#gifbt\").hide();\r\n });\r\n }); \r\n\r\n\r\n\/\/Event change number of nodes\r\n$(document).on('keyup', '#edges', function() {\r\n if (datos2['0']!=null){\r\n nodo();\r\n }\r\n});\r\n\r\n\r\n\/\/ Download Event \r\n$(document).on('click', '.btn-secondary', function() {\r\n\r\n\/\/Get the page where you are and what type of download it is\r\n var subid= $(this).attr(\"id\");\r\n \r\n\/\/Copy with the obtained data, with this it is added to an input and the copy command is executed later the input is deleted\r\n \/\/ With this is on the clipboard\r\n if (subid == \"copy\" ) {\r\n dataacopiar=[];\r\n copy=\"\";\r\n for (let i = 0; i < datos2.length || i < 10 ; i++) {\r\n dataacopiar[i]={};\r\n copy=copy+'\/n'\r\n for (var dato in datos2[i]){\r\n copy=copy+datos2[i][dato];\r\n\r\n}\r\n}\r\n $('<input id=\"textcopy\">').val(copy).appendTo('body').select(); \r\n document.execCommand('copy'); \r\n var el = document.getElementById('textcopy');\r\n el.remove();\r\n }\r\n \/\/TSV OR CSV the file is sent to descargararchivo.php and the associative array is sent\r\n else {\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/descargararchivo.php',\r\n type: 'post',\r\n data: {key:subid,data:datos2,name:\"tableCMAP\"},\r\n dataType: 'json',\r\n success:function(response){\r\n\/\/Get the name of the file which is on the response and create an element <a> and add the attribute\r\n \/\/'download' and indicate where the file is located and order the element to be clicked\r\n \/\/and start the download\r\n fileName=response;\r\n fileUrl=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/desc\/\"+fileName;\r\n var a = document.createElement(\"a\");\r\n a.href = fileUrl;\r\n a.setAttribute(\"download\", fileName);\r\n a.click();\r\n }\r\n });\r\n\r\n }\r\n\r\n});\r\n\r\n\r\n\r\n\/\/Function mostrartablas \r\nfunction mostrartablas(){\r\n\/\/Get the value of the two inputs\r\n var key = $('#key').val();\r\n var key2 = $(\"#origen\").val();\r\n \/\/Ajax request\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:key,search2:key2, type:type},\r\n dataType: 'json',\r\n success:function(response){\r\n\/\/Get the values \u200b\u200bfrom the ajax response and set, check and display the various parameters\/variables\r\n\r\n let pages = 0;\r\n datos['a']=response;\r\n datanew=response;\r\n datos['type']=type;\r\n var len = response.length;\r\n if ((response[0]['compound'] != undefined && response[0]['treatment'] == undefined) || (response[0]['treatment'] != undefined && response[0]['compound'] == undefined) ) {\r\nvar datatable = [];\r\n for (let index = 0; index < response.length; index++) {\r\n datatable[index]=[];\r\nfor (var value in response[index]){ \r\n datatable[index].push(response[index][value]);\r\n}\r\n}\r\nif(datacharge==true){\r\n datacharge=false;\r\n}else {\r\n table.destroy();\r\n}\r\n table = $('#table').DataTable({\r\n \r\n\r\n data: datatable,\r\n columns: [\r\n { title: \"<span tabindex='0' data-toggle='popover' data-content='GEO study identifier click on the word to go to the original information source'> Accession <img src='http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png' width='15' \/> <\/span>\" ,\r\n \"render\": function (data, type, row) {\r\n return '<a href=\"https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GSE' + data + '\" target=\"no_blank\">' + data + '<\/a>';\r\n }\r\n },\r\n { title: \"Treatment\" },\r\n { title: \"Time Point\" },\r\n { title: \"Concentration\" },\r\n { title: \"Cell line\/Sample type\" },\r\n \r\n ],\r\n language: {\r\n \"lengthMenu\": '<h2> Show entries <\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpentries\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpentries\"><\/div> _MENU_' ,\r\n \"search\": ' <h2> Filter Records<\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpfilter\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpfilter\"><\/div> _INPUT_' \r\n },\r\n });\r\n \r\n $('[data-toggle=\"popover\"]').popover({\r\n 'trigger': 'hover',\r\n});\r\n $(\"#divtable\").show();\r\n }\r\n } ,error: function(XMLHttpRequest, textStatus, errorThrown) { \r\n alert(\"Status: \" + textStatus); alert(\"Error: \" + errorThrown); \r\n } \r\n });\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/\/Function load_data2 is used to load the information to the tables shown on the page a is equal to the current page\r\nfunction load_data2(){\r\n\/\/Depends on the 'idloaddata2' a different table is created for each type with different fields and information\r\n \r\nvar datatable2 = [];\r\n for (let index = 0; index < datos2.length; index++) {\r\n datatable2[index]=[];\r\nfor (var value in datos2[index]){ \r\n datatable2[index].push(datos2[index][value]);\r\n}\r\n}\r\nif(datacharge2==true){\r\n datacharge2=false;\r\n}else {\r\n table2.destroy();\r\n}\r\n\r\nif(idloaddata2+=1){\r\n table2 = $('#table2').DataTable({\r\n data: datatable2,\r\n order: [[2, 'desc']],\r\n columns: [\r\n { title: \"Compound\"},\r\n { title: \"Cell Line\" },\r\n { title: \"<span tabindex='0' data-toggle='popover' data-content='Allow to filter results by absolute tau score in the table and the networkTau score represents the similarity (positive) or dissimilarity (negative) relationship between food and drug gene profiles. Tau score ranges from -100 to 100. A score of 90 means that 10% of the reference perturbations had an enrichment score as high as the query (Subramanian et al. 2017).'> Similarity score <img src='http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png' width='15' \/> <\/span>\" },\r\n\r\n ],\r\n language: {\r\n \"lengthMenu\": '<h2> Show entries <\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpentries2\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpentries2\"><\/div> _MENU_' ,\r\n \"search\": ' <h2> Filter Records<\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpfilter2\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpfilter2\"><\/div> _INPUT_' \r\n },\r\n });\r\n }else{\r\n table2 = $('#table2').DataTable({\r\n data: datatable2,\r\n columns: [\r\n { title: \"Treatment\"},\r\n { title: \"Concentration\" },\r\n { title: \"Time Point\" },\r\n { title: \"Origin Name\" },\r\n { title: \"CMAP Node ID\" },\r\n { title: \"Drug Node ID\" },\r\n { title: \"TAU\" },\r\n\r\n ],\r\n });\r\n \r\n } \r\n $('[data-toggle=\"popover\"]').popover({\r\n 'trigger': 'hover',\r\n});\r\n $(\"#divtable2\").show();\r\n $('#secondpart').show();\r\n $('.search-py').show();\r\n \r\n }\r\n\/\/Function load_data 3 the datacomm is passed, which is an array with the information that we are going to show\r\n function load_data3(datacomm){\r\nvar datatable3 = [];\r\n for (let index = 0; index < datacomm.length; index++) {\r\n datatable3[index]=[];\r\nfor (var value in datacomm[index]){ \r\n datatable3[index].push(datacomm[index][value]);\r\n}\r\n}\r\nif(datacharge3==true){\r\n datacharge3=false;\r\n}else {\r\n table3.destroy();\r\n}\r\n\r\n\r\n table3 = $('#table3').DataTable({\r\n data: datatable3,\r\n columns: [\r\n { title: \"Accession\"},\r\n { title: \"Treatment\t\" },\r\n { title: \"Concentration\" },\r\n { title: \"Time Point\" },\r\n ],\r\n });\r\n\r\n }\r\n\r\n\/\/Function nodo used to display a graph\r\nfunction nodo(){ \r\n\/\/The div that contains the network is cleaned\r\n$(\"#mynetwork\").empty();\r\n\/\/The network is started by creating the first node in green color\r\n var nodes = new vis.DataSet([\r\n {id: 0 ,color:\"green\"}\r\n ]);\r\n\/\/Get the number of edges requested by the user\r\n var nedges=$(\"#edges\").val();\r\n if (nedges>datos2.length) {\r\n nedges=datos2.length;\r\n }\r\n\r\n var edges = new vis.DataSet();\r\n\/\/Depending on the provisional it shows some data or others\r\n \/\/Negative tau will be purple and positive tau will be orange\r\n if(provisional==1){\r\n for (let i = 0; i < nedges; i++) {\r\n var nodocompoundcell=datos2[i]['compound']+\":\"+datos2[i]['cell_line']\r\n\r\n if (datos2[i]['tau']<0) {\r\n nodes.add([ \r\n {id: i+1, label: nodocompoundcell,color:\"rgb(221,160,221)\"},\r\n ]);\r\n\r\n edges.add([\r\n {from: 0, to: i+1,color:\"purple\"},\r\n ]);\r\n }else {\r\n nodes.add([ \r\n {id: i+1, label: nodocompoundcell,color:\"orange\"},\r\n ]);\r\n \r\n edges.add([\r\n {from: 0, to: i+1,color:\"orange\"},\r\n ]);\r\n }\r\n\r\n \r\n }\r\n }else if(provisional==2){\r\n for (let i = 0; i < nedges; i++) {\r\n var nodocompoundcell=datos2[i]['compound']+\":\"+datos2[i]['cell_line']\r\n\r\n if (datos2[i]['tau']<0) {\r\n nodes.add([ \r\n {id: i+1, label: nodocompoundcell,color:\"rgb(221,160,221)\"},\r\n ]);\r\n\r\n edges.add([\r\n {from: 0, to: i+1,color:\"purple\"},\r\n ]);\r\n }else {\r\n nodes.add([ \r\n {id: i+1, label: nodocompoundcell,color:\"orange\"},\r\n ]);\r\n \r\n edges.add([\r\n {from: 0, to: i+1,color:\"orange\"},\r\n ]);\r\n }\r\n\r\n \r\n }\r\n }\r\n else {\r\n for (let i = 0; i < nedges; i++) {\r\n var nodocompoundcell=datos2[i]['treatment']+\":\"+datos2[i]['concentration']+\":\"+datos2[i]['time_point']+\":\"+datos2[i]['origin_name']\r\n\r\n if (datos2[i]['tau']<0) {\r\n nodes.add([ \r\n {id: i+1, label: nodocompoundcell,color:\"rgb(221,160,221)\",group:\"tau-\"},\r\n ]);\r\n\r\n edges.add([\r\n {from: 0, to: i+1,color:\"purple\"},\r\n ]);\r\n }else {\r\n nodes.add([ \r\n {id: i+1, label: nodocompoundcell,color:\"orange\",group: \"tau+\"},\r\n ]);\r\n \r\n edges.add([\r\n {from: 0, to: i+1,color:\"orange\"},\r\n ]);\r\n }\r\n\r\n \r\n }\r\n }\r\n\r\n\r\nvar container = document.getElementById(\"mynetwork\");\r\n \/\/ provide the data in the vis format\r\n var data = {\r\n nodes: nodes,\r\n edges: edges\r\n };\r\nvar options = {\r\n layout: {\r\n improvedLayout:false,\r\n },\r\n\r\n}\r\n\r\n\r\n \/\/ initialize your network!\r\n var network = new vis.Network(container, data, options);\r\n\r\n\r\n\/\/Map key\r\n var leyenda = document.getElementById(\"leyenda\");\r\nvar x = -leyenda.offsetWidth\/2;\r\nvar step = 70;\r\n nodes.add({\r\n id: 1000000000,\r\n x: x,\r\n y: -300,\r\n shape: \"square\",\r\n color:\"rgb(221,160,221)\",\r\n label: \"TAU < 0 \",\r\n group: \"tau-\",\r\n value: 1,\r\n fixed: true,\r\n physics: false,\r\n });\r\n nodes.add({\r\n id: 1000000001,\r\n x: x,\r\n y: -300 + step,\r\n shape: \"square\",\r\n color:\"orange\",\r\n label: \"TAU > 0 \",\r\n group: \"tau+\",\r\n value: 1,\r\n fixed: true,\r\n physics: false,\r\n });\r\n\r\nnetwork.on( 'click', function(properties) {\r\n var ids = properties.nodes;\r\n var clickedNodes = nodes.get(ids);\r\n const parts = clickedNodes[0]['label'].split(\":\");\r\n\r\n $('.dataTables_filter input').val(parts[0]);\r\n table2.search( parts[0] ).draw();\r\n $(\".dataTables_filter input\").trigger(\"focus\");\r\n\/* var valor=-1;\r\n for (let index = 0; index < datanew.length; index++) {\r\n if(datanew[index]['drug']==clickedNodes[0]['label'] || datanew[index]['food']==clickedNodes[0]['label']){\r\n valor=index;\r\n }\r\n}\r\n $('#content1'+valor).click();*\/\r\n});\r\n \r\n \r\n}\r\n\r\n\r\n\r\n\r\n\r\n});\r\n <\/script>\r\n\r\n\r\n<\/body>\r\n<\/html>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-140","page","type-page","status-publish","hentry","no-thumb"],"_links":{"self":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":32,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages\/140\/revisions"}],"predecessor-version":[{"id":675,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages\/140\/revisions\/675"}],"wp:attachment":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/media?parent=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}