Mercurial > repos > fgiacomoni > golm_ws_lib_search

view golm_out.tmpl @ 0:e3d43b8c987b draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Init repository with last tool-bank-golm-lib_search master version
author fgiacomoni
date Mon, 05 Dec 2016 08:32:04 -0500
parents
children
line wrap: on
line source

<!DOCTYPE html><html><head><meta charset='UTF-8'><link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css'><link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'><link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css'><link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.css'/><link rel='stylesheet' href='https://code.getmdl.io/1.1.3/material.light_green-orange.min.css' /><link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <style type='text/css' class='init'>
.card-wide.mdl-card{width:900px;height:550px}.card-wide>.mdl-card__menu{color:#fff}.list-icon{width:800px}#table_id_wrapper{overflow-x:auto;margin-left:20px;margin-right:20px;padding-top:20px}.toolbar{float:left}.dt-buttons{padding-right:10px;margin-bottom:20px}table.dataTable thead th, table.dataTable thead td{border-bottom:1px solid #A7A7A7}div.dt-button-collection{width:140px;margin-top:7px;padding:6px 6px 3px 6px;border:1px solid rgba(0,0,0,0.4);background-color:rgba(171, 171, 171, 0.8);border-radius:10px;box-shadow:0px 0px 100px rgba(255, 255, 255, 0.3)}div.dt-button-collection a.dt-button.active:not(.disabled){box-shadow:inset 1px 1px 6px rgba(102,102,102,0.69)}.buttons-copy,.buttons-print,.buttons-collection{height:40px;margin-right:10px;padding-right:0px;padding-left:0px;margin-left:10px}.mdl-button--accent.mdl-button--accent.mdl-button--raised,.mdl-button--accent.mdl-button--accent.mdl-button--fab{background-color:#E3E3E3}.mdl-button{height:40px;line-height:40px}.mdl-button:hover{transform:translateY(-3px);box-shadow:0px 6px 15px #c1c1c1}a{color:rgb(0,0,0)}.ripple{overflow:hidden;position:relative;box-sizing:border-box;transform:translate3d(0,0,0)}.ripple-effect{position:absolute;border-radius:50%;background-color:rgba(255,255,255,0.5);user-select:none;pointer-events:none;padding:0;margin:0;opacity:0.6;transform:translate3d(-50%,-50%,0)}.mdl-shadow--3dp{box-shadow:0 25px 150px rgba(0,0,0,.33),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12)}.mdl-tooltip.is-active{animation:pulse 1000ms cubic-bezier(0,0,.2,1)forwards;z-index:1000}.mdl-tooltip{border-radius:20px;line-height:18px}.mdl-list__item{line-height:1.25 }.mdl-list__item-icon{font-size:35px}#large_card{height:850px}#dist_table th,td{padding:15px;text-align:left}.mdl-card__supporting-text{color:rgba(0,0,0,.87);font-size:16px;line-height:22px;text-align:justify}.dataTables_wrapper .dataTables_length{float:left;padding-top:11px;padding-left:30px}table.display tbody tr:hover td{background-color:#B9DBD5 !important}.selected{background-color:#96ADA6 !important }.buttons-colvis{padding-left:15px;padding-right:15px}select{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
</style> <script type='text/javascript' language='javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js'></script> <script type='text/javascript' language='javascript' src='https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js'></script> <script type='text/javascript' language='javascript' src='https://code.jquery.com/jquery-1.12.3.min.js'></script> <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/buttons/1.2.0/js/buttons.colVis.min.js'></script> <script type='text/javascript' language='javascript' src='https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js'></script> <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js'></script> <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js'></script> <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js'></script> <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/buttons/1.1.2/js/buttons.print.min.js'></script> <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js'></script> <script type='text/javascript' src='https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.js'></script> <script defer src='https://code.getmdl.io/1.1.3/material.min.js'></script> <script type='text/javascript' class='init'>
$(document).ready(function(){var table=$('#table_id').DataTable({'order':[0,'asc'],'orderClasses':false,'dom':'B<"toolbar">frtilp','buttons':[{extend:'copyHtml5',exportOptions:{columns:[0,':visible']},text:'<i class="material-icons" style="height:25px">content_copy</i>',titleAttr:'Copy'},{extend:'print',text:'<i class="material-icons" style="height:25px ;">print</i>',titleAttr:'Print',exportOptions:{columns:':visible'}},{extend:'collection',text:'<i class="material-icons" style="height:25px">file_download</i>',titleAttr:'Export',buttons:[{extend:'excelHtml5',exportOptions:{columns:':visible'}},'csvHtml5']},{text:'SHOW MORE',extend:'colvis',postfixButtons:['colvisRestore']}],'columnDefs':[{'targets':[10],'visible':false,},{'targets':[11],'visible':false},{'targets':[12],'visible':false}],'scrollY':'50vh','responsive':true,'pagingType':'full_numbers','scrollCollapse':true,'lengthMenu':[[<TMPL_VAR NAME=DEFAULT_ENTRIES>,15,20,25,50,-1],[<TMPL_VAR NAME=DEFAULT_ENTRIES>,15,20,25,50,'All']],initComplete:function(){this.api().columns().every(function(){var column=this;var select=$('<select><option value="">Search</option></select>').appendTo($(column.footer()).empty()).on('change',function(){var val=$.fn.dataTable.util.escapeRegex($(this).val());column.search(val?'^'+val+'$':'',true,false).draw();});column.data().unique().sort().each(function(d,j){select.append('<option value="'+d+'">'+d+'</option>')});});}});$('div.toolbar').html("<button class='mdl-button mdl-js-button mdl-button--raised ripple mdl-button--accent' data-ripple-color='#b3b3b3' id='delete'>Delete selected rows</button>");$('#table_id tbody').on('click','tr',function(){$(this).toggleClass('selected');});$('#delete').click(function(){table.rows('.selected').remove().draw();});$('.buttons-copy, .buttons-print, .buttons-collection, .buttons-colvis, .buttons-columnVisibility').each(function(){$(this).removeClass('dt-button').addClass('mdl-button mdl-js-button mdl-button--raised ripple mdl-button--accent');$(this).attr("data-ripple-color","#b3b3b3");})
$('.buttons-print').each(function(){$(this).attr("id","mytooltip1");})
$('.buttons-copy').each(function(){$(this).attr("id","mytooltip2");})
$('.buttons-collection').each(function(){$(this).attr("id","mytooltip3");})
for(var i=0;i<12;i++){$($($("table.display.stripe.dataTable")[2]).find("th")[i]).css('width',$($($("table.display.stripe.dataTable")[0]).find("th")[i]).css('width'));}});$(document).on('click','.ripple',function(e){var $rippleElement=$('<span class="ripple-effect" />'),$buttonElement=$(this),btnOffset=$buttonElement.offset(),xPos=e.pageX-btnOffset.left,yPos=e.pageY-btnOffset.top,size=parseInt(Math.min($buttonElement.height(),$buttonElement.width())*0.5),animateSize=parseInt(Math.max($buttonElement.width(),$buttonElement.height())*Math.PI);$rippleElement.css({top:yPos,left:xPos,width:size,height:size,backgroundColor:$buttonElement.data("ripple-color")}).appendTo($buttonElement).animate({width:animateSize,height:animateSize,opacity:0},700,function(){$(this).remove();});});
</script><title>Golm Search Results</title></head><body><div class='mdl-layout mdl-js-layout mdl-layout--fixed-header'> <header class='mdl-layout__header'><div class='mdl-layout__header-row'> <span class='mdl-layout-title'><h3><b>Visualization of Golm Database Results</b></h3></span></div><div class='mdl-layout__tab-bar mdl-js-ripple-effect'> <a href='#fixed-tab-1' class='mdl-layout__tab is-active'><b>Table</b></a> <a href='#fixed-tab-2' class='mdl-layout__tab'><b>Help</b></a></div> </header> <main class='mdl-layout__content'> <section class='mdl-layout__tab-panel is-active' id='fixed-tab-1'><div class='page-content'><table id='table_id' class='display stripe' cellspacing='0' width='100%' ><thead><tr><th colspan='1'></th><th colspan='2' style='text-align:center'>NAMES</th><th colspan='2' style='text-align:center'>RETENTION INFOS</th><th colspan='5' style='text-align:center'>DISTANCE SCORES</th><th colspan='3' style='text-align:center'>IDs</th></tr><tr><th style='text-align:center;border-left: 1px solid #A7A7A7;'>N° Spectres</th><th style='text-align:center;border-left: 1px solid #A7A7A7;'>Spectrum</th><th style='text-align:center;border-right: 1px solid #A7A7A7;'>Analyte</th><th style='text-align:center'>Retention Index</th><th style='text-align:center;border-right: 1px solid #A7A7A7;'>RI Discrepancy</th><th style='text-align:center'>Dot product</th><th style='text-align:center'>Euclidean</th><th style='text-align:center'>Jaccard</th><th style='text-align:center'>Hamming</th><th style='text-align:center;border-right: 1px solid #A7A7A7;'>s12 Gower-Legendre</th><th style='text-align:center'>Spectrum id</th><th style='text-align:center'>Metabolite id</th><th style='text-align:center;border-right: 1px solid #A7A7A7;'>Analyte id</th></tr></thead><tfoot><tr><th style='text-align:center'>N° Spectre</th><th style='text-align:center'>Spectrum</th><th style='text-align:center'>Analyte</th><th style='text-align:center'>Retention Index</th><th style='text-align:center'>RI Discrepancy</th><th style='text-align:center'>Dot product</th><th style='text-align:center'>Euclidean</th><th style='text-align:center'>Jaccard</th><th style='text-align:center'>Hamming</th><th style='text-align:center'>s12 Gower-Legendre</th><th style='text-align:center'>Spectrum id</th><th style='text-align:center'>Metabolite id</th><th style='text-align:center'>Analyte id</th></tr></tfoot><tbody> <TMPL_LOOP NAME=GROUPS><tr><td><TMPL_VAR NAME=ID></td><td><a href='<TMPL_VAR NAME=SPECTRUM_REF>' target='_blank'><TMPL_VAR NAME=SPECTRUM_NAME></a></td><td><a href='<TMPL_VAR NAME=ANALYTE_REF>' target='_blank'><TMPL_VAR NAME=ANALYTE_NAME></a></td><td><TMPL_VAR NAME=RI></td><td><TMPL_VAR NAME=RI_DISCREPANCY></td><td><TMPL_VAR NAME=DOT_PRODUCT_DISTANCE></td><td><TMPL_VAR NAME=EUCLIDEAN_DISTANCE></td><td><TMPL_VAR NAME=JACCARD_DISTANCE></td><td><TMPL_VAR NAME=HAMMING_DISTANCE></td><td><TMPL_VAR NAME=S12_GOWER_LEGENDRE_DISTANCE></td><td><TMPL_VAR NAME=SPECTRUM_ID></td><td><a href='<TMPL_VAR NAME=METABOLITE_REF>' target='_blank'><TMPL_VAR NAME=METABOLITE_ID></a></td><td><TMPL_VAR NAME=ANALYTE_ID></td></tr> </TMPL_LOOP></tbody></table></div><div class='mdl-tooltip mdl-tooltip--bottom' for='mytooltip1'> print</div><div class='mdl-tooltip mdl-tooltip--bottom' for='mytooltip2'> copy</div><div class='mdl-tooltip mdl-tooltip--bottom' for='mytooltip3'> export</div> </section> <section class='mdl-layout__tab-panel' id='fixed-tab-2'><div class='page-content'><center> </br></br><div class='card-wide mdl-card mdl-shadow--3dp'> <figure class='mdl-card__media' style='background-color: white'> <img src='http://m.hiapphere.com/data/icon/201506/HiAppHere_com_com.javiersantos.materialid.png' style='height: 60px; width: 60px;'> </figure><div class='mdl-card__title'><h1 class='mdl-card__title-text'>What can the table do ?</h1></div><div class='mdl-card__supporting-text'><ul class='list-icon mdl-list'><li class='mdl-list__item'> <span class='mdl-list__item-primary-content'> <i class='material-icons mdl-list__item-icon'>filter_list</i> By default, the spectra numbers (N° Spectra) are ordered by ascending values. You can manage your data ordering as you wish. You can even order data according to multiple columns: SHIFT + LEFT CLICK on column headers. This will order by the first column clicked, then the second, etc. You can sort data specifically by clicking on any entry in boxes under each columns. </span></li><li class='mdl-list__item'> <span class='mdl-list__item-primary-content'> <i class='material-icons mdl-list__item-icon'>delete_sweep</i> You can delete multiple entries that are selected: Select wanted entries and click on the button DELETE SELECTED ROWS. </span></li><li class='mdl-list__item'> <span class='mdl-list__item-primary-content'> <i class='material-icons mdl-list__item-icon'>remove_red_eye</i> You have the possibility to toggle columns by clicking on SHOW MORE. </span></li><li class='mdl-list__item'> <span class='mdl-list__item-primary-content'> <i class='material-icons mdl-list__item-icon'>save</i> You can print, copy, or export to excel and csv the table on its actual state, with the three buttons right above the table. </span></li></ul></div></div> </br><div id="large_card" class='card-wide mdl-card mdl-shadow--3dp'> <figure class='mdl-card__media' style='background-color: white'> <img src='http://image005.flaticon.com/1/svg/125/125279.svg' style='height: 60px; width: 60px;'> </figure><div class='mdl-card__title'><h1 class='mdl-card__title-text'>Distances scores</h1></div><div class='mdl-card__supporting-text'><table id="dist_table" style="color: rgba(0,0,0,.87);"><tr><td style="padding-right:10px;><b style="white-space: nowrap;"><b>S12Gower-Legendre Distance</b></td><td> The distance measure S12GowLeg = sqrt(1 - s12) is derived from the S12 coefficient of Gower & Legendre defined as s12 = a / sqrt((a + b)(a + c)), with "a" representing the number of positions at which both spectra are in "on-state" and "b" respectively "c" representing the number of positions at which only the query spectrum or the hit spectrum are in "on-state".</td></tr><tr><td style="padding-right:10px;"><b style="white-space: nowrap;">Hamming Distance</b></td><td> In information theory, the Hamming distance between two strings of equal length is the number of positions for which the corresponding symbols are different. Put another way, it measures the minimum number of substitutions required to change one into the other, or the number of errors that transformed one string into the other.</td></tr><tr><td style="padding-right:10px;"><b style="white-space: nowrap;">Jaccard Distance</b></td><td>Number of matches (a mass with appropriate intensity in both spectra) divided by the sum of matches and mismatches (a mass where only one of both spectra has a intensity). The jaccard distance is a binary distance.</td></tr><tr><td style="padding-right:10px;"><b style="white-space: nowrap;padding-right:60px;">Dotproduct Distance</b></td><td>The Dotproduct distance is summing the multiplied intensities over all matching peaks within both spectra. Here, to satisfy the conditions of a metric I) non-negativity, II) identity of indiscernibles, III) symmetry and IV) subadditivity / triangle inequality, we use 1-Dotproduct. Both spectra are normalised prior to the spectral vector norm in that way, that the absolute value of the squared intensities is equal to 1.</td></tr><tr><td style="padding-right:10px;"><b style="white-space: nowrap;padding-right:60px;">Euclidean Distance</b></td><td>The Euclid is the square root of the sum of the squared differences over all matching peaks.</td></tr></table></div></div></div> </br></br></center> </section> </main></div></body></html>