Commit 869a782a authored by Penom Nom's avatar Penom Nom
Browse files

- convert in dataTable the table in fastqc template

- add a dialog to view all graphs of the dataTable in fastqc template
parent b2e18e0f
......@@ -16,7 +16,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*}
<div id="img_dialog" title=""></div>
<div id="table_dialog" title=""></div>
<input type="hidden" id="analyse_name" value="{$analyse.name}"/>
<input type="hidden" id="DataTables_length_menu" value="{$llang.DataTables_length_menu}" />
<input type="hidden" id="DataTables_zero_records" value="{$llang.DataTables_zero_records}" />
<input type="hidden" id="DataTables_info" value="{$llang.DataTables_info}" />
<input type="hidden" id="DataTables_info_empty" value="{$llang.DataTables_info_empty}" />
<input type="hidden" id="DataTables_info_filtered" value="{$llang.DataTables_info_filtered}" />
<input type="hidden" id="DataTables_search" value="{$llang.DataTables_search}" />
<input type="hidden" id="DataTables_pagination_first" value="{$llang.DataTables_pagination_first}" />
<input type="hidden" id="DataTables_pagination_last" value="{$llang.DataTables_pagination_last}" />
<input type="hidden" id="DataTables_pagination_next" value="{$llang.DataTables_pagination_next}" />
<input type="hidden" id="DataTables_pagination_previous" value="{$llang.DataTables_pagination_previous}" />
{block name=description}
<div class="analysis">
......
......@@ -22,46 +22,58 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
{block name=results}
<h3> {$llang.FastqcAnalyse_stat_title} </h3>
<div class="underline"> </div>
<table class="tx-nG6-pi1-listrow">
<tr>
{if $analyse_results|@count > 1 }
<th rowspan="2">{$llang.Analyse_sample} ({$analyse_results|@count})</th>
{/if}
<th colspan="4" >{$llang.FastqcAnalyse_per_position}</th>
<th colspan="7" >{$llang.FastqcAnalyse_per_sequences}</th>
</tr>
<tr>
<th>{$llang.FastqcAnalyse_quality}</th>
<th>{$llang.FastqcAnalyse_gc}</th>
<th>{$llang.FastqcAnalyse_ns}</th>
<th>{$llang.FastqcAnalyse_content}</th>
<th>{$llang.FastqcAnalyse_nb_seq}</th>
<th>{$llang.FastqcAnalyse_quality}</th>
<th>{$llang.FastqcAnalyse_gc}</th>
<th>{$llang.FastqcAnalyse_length}</th>
<th>{$llang.FastqcAnalyse_duplication}</th>
<th>{$llang.FastqcAnalyse_kmers}</th>
<th>{$llang.FastqcAnalyse_overrepresented}</th>
</tr>
<table class="analyze_table" id="fastqc_resume">
<thead>
<tr>
{if $analyse_results|@count > 1 }
<th rowspan="2">{$llang.Analyse_sample} ({$analyse_results|@count})</th>
{/if}
<th colspan="4" >{$llang.FastqcAnalyse_per_position}</th>
<th colspan="7" >{$llang.FastqcAnalyse_per_sequences}</th>
</tr>
<tr>
<th>{$llang.FastqcAnalyse_quality}</th>
<th>{$llang.FastqcAnalyse_gc}</th>
<th>{$llang.FastqcAnalyse_ns}</th>
<th>{$llang.FastqcAnalyse_content}</th>
<th>{$llang.FastqcAnalyse_nb_seq}</th>
<th>{$llang.FastqcAnalyse_quality}</th>
<th>{$llang.FastqcAnalyse_gc}</th>
<th>{$llang.FastqcAnalyse_length}</th>
<th>{$llang.FastqcAnalyse_duplication}</th>
<th>{$llang.FastqcAnalyse_kmers}</th>
<th>{$llang.FastqcAnalyse_overrepresented}</th>
</tr>
</thead>
{assign var="analyse_results_sorted" value=$analyse_results|@ksort}
{foreach from=$analyse_results_sorted key=sample item=sample_results}
<tr>
{if $analyse_results|@count > 1 }
<td>{$sample|get_description:$descriptions}</td>
{/if}
<td><a class="imglink" href="{$sample_results["pbqpng"].img}"> {$sample_results["pbqpng"].result} </a></td>
<td><a class="imglink" href="{$sample_results["pbgcpng"].img}"> {$sample_results["pbgcpng"].result} </a></td>
<td><a class="imglink" href="{$sample_results["pbnspng"].img}"> {$sample_results["pbnspng"].result} </a></td>
<td><a class="imglink" href="{$sample_results["pbspng"].img}"> {$sample_results["pbspng"].result} </a></td>
<td>{$sample_results["default"].nbseq|number_format:0:' ':' '}</td>
<td><a class="imglink" href="{$sample_results["psqpng"].img}"> {$sample_results["psqpng"].result} </a></td>
<td>{$sample_results["psgcpng"].value}(<a class="imglink" href="{$sample_results["psgcpng"].img}">{$sample_results["psgcpng"].result}</a>)</td>
<td>{$sample_results["sldpng"].value}(<a class="imglink" href="{$sample_results["sldpng"].img}">{$sample_results["sldpng"].result}</a>)</td>
<td><a class="imglink" href="{$sample_results["dlpng"].img}"> {$sample_results["dlpng"].result} </a></td>
<td><a class="imglink" href="{$sample_results["kppng"].img}"> {$sample_results["kppng"].result} </a></td>
<td>{$sample_results["default"].seqoverrepresentation}</td>
</tr>
{/foreach}
<tbody>
{foreach from=$analyse_results_sorted key=sample item=sample_results}
<tr>
{if $analyse_results|@count > 1 }
<td class="sample_name">{$sample|get_description:$descriptions}</td>
{/if}
<td><a class="imglink" href="{$sample_results["pbqpng"].img}"> {$sample_results["pbqpng"].result} </a></td>
<td><a class="imglink" href="{$sample_results["pbgcpng"].img}"> {$sample_results["pbgcpng"].result} </a></td>
<td><a class="imglink" href="{$sample_results["pbnspng"].img}"> {$sample_results["pbnspng"].result} </a></td>
<td><a class="imglink" href="{$sample_results["pbspng"].img}"> {$sample_results["pbspng"].result} </a></td>
<td>{$sample_results["default"].nbseq|number_format:0:' ':' '}</td>
<td><a class="imglink" href="{$sample_results["psqpng"].img}"> {$sample_results["psqpng"].result} </a></td>
<td>{$sample_results["psgcpng"].value}(<a class="imglink" href="{$sample_results["psgcpng"].img}">{$sample_results["psgcpng"].result}</a>)</td>
<td>{$sample_results["sldpng"].value}(<a class="imglink" href="{$sample_results["sldpng"].img}">{$sample_results["sldpng"].result}</a>)</td>
<td><a class="imglink" href="{$sample_results["dlpng"].img}"> {$sample_results["dlpng"].result} </a></td>
<td><a class="imglink" href="{$sample_results["kppng"].img}"> {$sample_results["kppng"].result} </a></td>
<td>{$sample_results["default"].seqoverrepresentation}</td>
</tr>
{/foreach}
</tbody>
<tfoot>
<tr>
<th align="left" colspan="{if $analyse_results|@count > 1 }13{else}11{/if}">
<button id="img_extract" type="button" class="btn pill-l"><span><span>{$llang.Analyse_img_export_btn}</span></span></button>
</th>
</tr>
</tfoot>
</table>
<div class="tx-nG6-pi1-help">
......
......@@ -83,6 +83,7 @@ class tx_nG6_pi1 extends tslib_pibase {
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/unitip.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/jquery.datePicker.min.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/jquery.jeditable.min.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/tx_nG6_table.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/unitip.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/jquery.venny.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/jquery.dataTables.css"/>
......@@ -90,7 +91,8 @@ class tx_nG6_pi1 extends tslib_pibase {
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/tx_nG6.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/jquery.ui.core.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/jquery.ui.theme.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/jquery.ui.dialog.css"/>';
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/jquery.ui.dialog.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/jquery.ui.resizable.css"/>';
// If the user is authorized to access the specified project/run, display the page
if (tx_nG6_db::user_is_authorized($GLOBALS['TSFE']->fe_user->user['usergroup'], $this->piVars['project_id'], $this->piVars['run_id'])) {
......
......@@ -124,6 +124,8 @@
<label index="Analyse_params">Parameters used</label>
<label index="Analyse_nb_contigs">Number of contigs</label>
<label index="Analyse_img_export_btn">view images</label>
<label index="ReadStatAnalyse_read_title">Reads Statistics</label>
<label index="ReadStatAnalyse_nb_reads">Number of reads</label>
<label index="ReadStatAnalyse_mean_std">Dev. from mean of number of reads</label>
......@@ -511,6 +513,8 @@
<label index="Analyse_params">Paramètres utilisés</label>
<label index="Analyse_nb_contigs">Nombre de contigs</label>
<label index="Analyse_img_export_btn">voir les images</label>
<label index="ReadStatAnalyse_read_title">Statistiques sur les lectures</label>
<label index="ReadStatAnalyse_nb_reads">Nombre de lectures</label>
<label index="ReadStatAnalyse_mean_std">Ecart à la moyenne du nbre de lectures</label>
......
/*
* jQuery UI Resizable 1.8.18
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Resizable#theming
*/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
\ No newline at end of file
......@@ -41,6 +41,20 @@ $(function () {
}
});
$("#table_dialog").dialog({
autoOpen: false,
height: 800,
width: 1000,
bgiframe: true,
resizable: true,
position: "top",
modal: true,
overlay: {
backgroundColor: "#000",
opacity: 0.5
}
});
$(".file-display").each(function(i){
$(this).attr("id", "file_display_"+i);
var id = "file_display_"+i;
......
......@@ -185,6 +185,126 @@ $(function () {
}
});
/**
* Return the value to aoColumns option of dataTable.
*
* @param JQuery Object table : The table.
*/
var get_sort_behaviour = function(table) {
var columns_behaviour ;
switch (table.attr('id')) {
case 'fastqc_resume' :
// If table contains sample name (12 columns)
if( table.find("tbody tr td.sample_name").size() > 0 ) {
columns_behaviour = [
null,
null,
null,
null,
null,
{ "sType": "formatted-num" },
null,
{ "sType": "formatted-num" },
{ "sType": "formatted-num" },
null,
null,
null] ;
}
// If table contains sample name (11 columns)
else {
columns_behaviour = [
null,
null,
null,
null,
{ "sType": "formatted-num" },
null,
{ "sType": "formatted-num" },
{ "sType": "formatted-num" },
null,
null,
null] ;
}
break;
}
return( columns_behaviour );
} ;
/* Analyze_table */
$('table.analyze_table').dataTable({
"aoColumns": get_sort_behaviour($('table.analyze_table')),
"oLanguage": {
"sLengthMenu": $("#DataTables_length_menu").val(),
"sZeroRecords": $("#DataTables_zero_records").val(),
"sInfo": $("#DataTables_info").val(),
"sInfoEmpty": $("#DataTables_info_empty").val(),
"sInfoFiltered": $("#DataTables_info_filtered").val(),
"sSearch": $("#DataTables_search").val(),
"oPaginate": {
"sFirst": $("#DataTables_pagination_first").val(),
"sLast": $("#DataTables_pagination_last").val(),
"sNext": $("#DataTables_pagination_next").val(),
"sPrevious": $("#DataTables_pagination_previous").val()
}
},
"sScrollX": "100%",
"sPaginationType": "full_numbers",
"iDisplayLength": $('table.analyze_table tbody tr').size(),
"bJQueryUI": true
});
/* Opens a window that contains all the images available in the table */
$("#img_extract").click(function() {
var html_table = document.createElement('table') ;
html_table.setAttribute('class', 'tx-nG6-pi1-listrow');
// Add the nodes of rows to html_table
var table_header = $('table.analyze_table').get()[0].getElementsByTagName('thead')[0].cloneNode(true) ;
var tr_header = table_header.getElementsByTagName('tr') ;
for( var i=0 ; i < tr_header.length ; i++ ) {
// Remove icons of sort
var span_nodes = tr_header[i].getElementsByTagName('span') ;
for( var j=0 ; j < span_nodes.length ; j++ ) {
span_nodes[j].parentNode.removeChild(span_nodes[j]);
j-- ;
}
// Remove dataTable class
var th_nodes = tr_header[i].getElementsByTagName('th') ;
for( var j=0 ; j < th_nodes.length ; j++ ) {
th_nodes[j].className = '';
}
// Add the row
html_table.appendChild(tr_header[i].cloneNode(true)) ;
}
var table_body = $('table.analyze_table').get()[1].getElementsByTagName('tbody')[0].cloneNode(true) ;
var tr_body = table_body.getElementsByTagName('tr') ;
for( var i=0 ; i < tr_body.length ; i++ ) {
// Remove dataTable class
var td_nodes = tr_body[i].getElementsByTagName('td') ;
for( var j=0 ; j < td_nodes.length ; j++ ) {
td_nodes[j].className = '';
}
tr_body[i].className = '';
html_table.appendChild(tr_body[i].cloneNode(true)) ;
}
// Create an tx_nG6_HTMLtable
var ng6_tab = new tx_nG6_HTMLtable( html_table ) ;
// Delete columns without images
ng6_tab.filter('<a[^>]+class="[^"]*imglink') ;
// Replace markup of link in markup of image
ng6_tab.replace('<a[^>]+class="[^"]*imglink[^"]*"[^>]+href="(fileadmin\/data\/analyze\/[^"]+)', '<img width=400 height=340 src="', '">' ) ;
// Display images table
$("#table_dialog").html('') ;
$("#table_dialog").dialog("option", "title", "nG6 - images view");
$("#table_dialog").append(ng6_tab.getModel()).dialog("open");
}) ;
/* Project table init */
var projectTable = null ;
......
/***************************************************************
* Copyright notice
*
* (c) 2009 PF genomique de Toulouse <>
* All rights reserved
*
* This script is part of the TYPO3 project. The TYPO3 project is
* free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* The GNU General Public License can be found at
* http://www.gnu.org/copyleft/gpl.html.
*
* This script is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* This copyright notice MUST APPEAR in all copies of the script!
***************************************************************/
/**
* Plugin 'nG6' for the 'nG6' extension.
*
* @author PF genomique de Toulouse <>
*/
function tx_nG6_HTMLtable( HTML_model )
{
/**
* HTML Table.
* @type HTMLTableCellElement
*/
var model = HTML_model ;
/**
* Number of rows and columns. The merging cells are as much individuals cells.
* @type Array(2)
*/
var dimensions ;
/**
* Location of the virtual cells. Example : the second column of a <td> with colspan.
* @type Array(n,n)
*/
var virtualOccupation ;
/**
* Separator of columns in CSV.
* @type Char
*/
var csv_separator = ';' ;
/**
* Removes the columns listed in the table. Column numbers reflect colspan.
* @param columns_list Array(n) - List of number of columns to remove.
*/
this.deleteColumns = function( columns_list ) {
// Retrieve rows
var rows = model.getElementsByTagName('tr') ;
// For each rows
for( var row_number = 0 ; row_number < rows.length ; row_number++ )
{
col_number = 0 ;
// Retrieve columns
var columns = rows[row_number].getElementsByTagName('td') ;
if( columns.length == 0 )
{
columns = rows[row_number].getElementsByTagName('th') ;
}
var td_number = 0 ;
// For each columns
for( var col_number = 0 ; col_number < dimensions[1] ; col_number++ )
{
// If this is not a virtual cell
if( !virtualOccupation[row_number][col_number] )
{
// Retrieve the number of virtualy occupied columns by current cell
var colspan_value = columns[td_number].getAttribute("colspan") ;
if( colspan_value != null )
{
for( var i = 0 ; i < colspan_value ; i++ )
{
if( in_array((col_number + i), columns_list) )
{
var old_colspan = columns[td_number].getAttribute("colspan") ;
// If the cell was removed
if( (old_colspan - 1) == 0 )
{
columns[td_number].removeAttribute("colspan") ;
}
// Otherwise (colspan >= 1)
else
{
columns[td_number].setAttribute("colspan", (old_colspan - 1)) ;
}
}
// If after the elimination of colspan, there are not column
if( columns[td_number].getAttribute("colspan") == null )
{
// Remove cell
var delete_node = columns[td_number] ;
rows[row_number].removeChild(delete_node) ;
td_number-- ;
}
}
}
// The cell does not contain colspan
else
{
// If the column is in the columns to remove
if( in_array(col_number, columns_list) )
{
// Remove cell
var delete_node = columns[td_number] ;
rows[row_number].removeChild(delete_node) ;
td_number-- ;
}
}
td_number++ ;
}
}
}
//Update dimensions and virtualOccupation
processTableDim() ;
processVirtualOccupation() ;
}
/**
* Remove any columns whose value matches the pattern.
* @param pattern String - valid pattern.
* @param filter_first Boolean - the first column should it be filtered ?
*/
this.filter = function( pattern, filter_first ) {
var pattern_regexp = new RegExp( pattern ) ;
var conserv_col = new Array() ;
// By default it keeps the first column
if( filter_first == null || !filter_first )
{
conserv_col["c0"] = true ;
}
// List the columns to keep
var rows = model.getElementsByTagName('tr') ;
for( var row_number = 0 ; row_number < rows.length ; row_number++ )
{
col_number = 0 ;
// Retrieve columns
var columns = rows[row_number].getElementsByTagName('td') ;
// It is only interested in values (skip titles)
if( columns.length != 0 )
{
var td_number = 0 ;
// For each columns
for( var col_number = 0 ; col_number < dimensions[1] ; col_number++ )
{
// If this is not a virtual cell
if( !virtualOccupation[row_number][col_number] )
{
// If cell contain the pattern
if( pattern_regexp.test(columns[td_number].innerHTML) )
{
// Keep the column
conserv_col["c"+col_number] = true ;
}
td_number++ ;
}
}
}
}
// List the columns to remove
var elim_columns = new Array() ;
for(var col = 0 ; col < dimensions[1] ; col++)
{
// If the column does not exist in the list of column to maintain
if( conserv_col["c"+col] === undefined )
{
elim_columns.push(col) ;
}
}
// Remove the columns
this.deleteColumns(elim_columns) ;
}
/**
* Return the HTML table.
* @return HTMLTableCellElement - The HTML table.
*/
this.getModel = function() {
return model ;
}
/**
* Set/Update the attribute dimensions.
*/
var processTableDim = function() {
var row_number = 0 ;
var col_number = 0 ;
// Retrieve all table's rows
var rows = model.getElementsByTagName('tr') ;
// For each row in the table
for( var tr_number = 0 ; tr_number < rows.length ; tr_number++ )
{
var nb_col_on_row = 0 ;
// Add one to the row number
row_number++ ;
// Retrieve columns
var columns = rows[tr_number].getElementsByTagName('td') ;
if( columns.length == 0 )
{
columns = rows[tr_number].getElementsByTagName('th') ;
}
// For each column
for( var td_number = 0 ; td_number < columns.length ; td_number++ )
{
var colspan_value = columns[td_number].getAttribute("colspan") ;
// If the value is on more than one column
if( colspan_value == null )
{
nb_col_on_row += 1 ;
}
// Otherwise
else
{
nb_col_on_row += parseInt(colspan_value) ;
}
}
// Keep only the maximum number of column in the table
if( col_number < nb_col_on_row )
{
col_number = nb_col_on_row ;
}
}
// Update the attribute dimensions
dimensions = new Array(2) ;
dimensions[0] = row_number ;
dimensions[1] = col_number ;
}
/**
* Set/Update the attribute virtualOccupation.
*/
var processVirtualOccupation = function() {
virtualOccupation = new Array( dimensions[0] ) ;
// Init the virtualOccupation matrice