Skip to content

Commit

Permalink
Wrote awesome sample highlighting code.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ewels
ewels committed Aug 27, 2015
1 parent de025b8 commit 98942f9
Show file tree
Hide file tree
Showing 4 changed files with 186 additions and 46 deletions.
5 changes: 5 additions & 0 deletions multiqc/fastq_screen/__init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,11 @@ def fqscreen_plot (self, parsed_data):
groupPadding: 0.02, \n\
stacking: "normal" }} \n\
}}, \n\
credits: {{ \n\
enabled: true, \n\
text: "Created with MultiQC", \n\
href: "https://github.com/ewels/MultiQC" \n\
}}, \n\
series: fq_screen_data \n\
}}); \n\
}}); \n\
Expand Down
116 changes: 78 additions & 38 deletions templates/default/assets/css/default_multiqc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,40 +12,6 @@ code {
color: #666;
}

.hc-plot {
height: 500px;
width: 100%;
}
.hc-plot-wrapper{
width: 100%;
height: 500px;
position: relative;
border: 1px solid #ededed;
margin-top: 15px;
}
.hc-plot-handle {
position: absolute;
bottom:0;
width: 100%;
height: 10px;
background-color: #dedede;
cursor:ns-resize;
padding: 2px 0;
}
.hc-plot-handle span {
display:block;
height: 2px;
width: 40px;
margin: 1px auto;
background-color: #aaa;
}
.hc-plot-handle:hover {
background-color: #cdcdcd;
}
.hc-plot-handle:hover span {
background-color: #999;
}

/* Page Template */
@media only screen and (min-width: 900px){
.mainpage { margin-left: 270px; }
Expand All @@ -55,6 +21,7 @@ code {
width: 250px;
border-right: 1px solid #ccc;
overflow: auto;
padding-bottom: 30px;
}
}
.mainpage {
Expand All @@ -80,12 +47,12 @@ code {
color: #999;
padding: 10px;
}
.side-nav ul {
.side-nav ul.mqc-nav, .side-nav ul.mqc-nav ul {
margin:0;
padding:0;
list-style-type: none;
}
.side-nav > ul {
.side-nav ul.mqc-nav {
border-bottom: 1px solid #ccc;
}
.side-nav a {
Expand All @@ -96,11 +63,11 @@ code {
.side-nav a:hover, .side-nav a:active, .side-nav a:focus {
background-color: #dedede;
}
.side-nav > ul > li > a{
.side-nav ul.mqc-nav > li > a{
padding: 10px;
border-top: 1px solid #ccc;
}
.side-nav > ul > li > ul > li > a {
.side-nav ul.mqc-nav > li > ul > li > a {
padding: 5px 10px 5px 15px;
border-top: 1px solid #dedede;
font-size: 0.9em;
Expand Down Expand Up @@ -140,3 +107,76 @@ h1:before, h2:before, h3:before, h4:before {
height: 20px;
visibility: hidden;
}

/* Fancy sample highlighting in the side nav */
input.form-control[type=color]{
padding: 0 2px;
width: 30px;
}

#hc_col_filters {
margin: 10px 0;
padding: 0;
list-style-type:none;
font-size: 0.9em;
cursor: pointer;
}
#hc_col_filters li {
padding: 5px 10px;
}
#hc_col_filters li .close {
margin-top: -3px;
}
#hc_col_filters li:hover {
background-color: #dedede;
}
.hc_cols {
padding:10px;
}
.hc_cols small {
color: #999;
font-style:italic;
}
@media only screen and (max-width: 900px){
.hc_cols .form-control {
display: inline-block;
}
#hc_colour_filter { width: auto; }
#hc_colour_filter_color { padding: 5px 2px; }
}


/* Draggable height bar for HighCharts Plots */
.hc-plot {
height: 500px;
width: 100%;
}
.hc-plot-wrapper{
width: 100%;
height: 500px;
position: relative;
border: 1px solid #ededed;
margin-top: 15px;
}
.hc-plot-handle {
position: absolute;
bottom:0;
width: 100%;
height: 10px;
background-color: #dedede;
cursor:ns-resize;
padding: 2px 0;
}
.hc-plot-handle span {
display:block;
height: 2px;
width: 40px;
margin: 1px auto;
background-color: #aaa;
}
.hc-plot-handle:hover {
background-color: #cdcdcd;
}
.hc-plot-handle:hover span {
background-color: #999;
}
95 changes: 90 additions & 5 deletions templates/default/assets/js/multiqc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,35 @@ $(function () {
}
});
});

// Update colours of matching samples
var hc_colours = chroma.brewer.Set1;
var hc_colours_idx = 0;
$('#hc_color_form').submit(function(e){
e.preventDefault();
var f_text = $('#hc_colour_filter').val().trim();
var f_col = $('#hc_colour_filter_color').val().trim();
var error = false;
if(f_text.length == 0){ f_text = '[ all ]'; }
$('#hc_col_filters li .f_text').each(function(){
if($(this).text() == f_text){
alert('Error - highlight text "'+f_text+'" already exists');
error = true;
}
});
if(!error){
$('#hc_col_filters').append('<li style="color:'+f_col+';"><span class="f_text">'+f_text+'</span><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></li>');
apply_hc_highlights();
$('#hc_colour_filter').val('');
hc_colours_idx += 1;
if(hc_colours_idx >= hc_colours.length){ hc_colours_idx = 0; }
$('#hc_colour_filter_color').val(hc_colours[hc_colours_idx]);
}
});
$('#hc_col_filters').on('click', 'li', function(){
$(this).remove();
apply_hc_highlights();
});


})
Expand All @@ -179,6 +208,7 @@ function plot_xy_line_graph(div, data, config){
if (config['yDecimals'] === undefined){ config['yDecimals'] = true; }
highcharts_plot_options[div] = {
chart: {
renderTo: div.replace('#',''),
type: 'line',
zoomType: 'x'
},
Expand Down Expand Up @@ -226,7 +256,9 @@ function plot_xy_line_graph(div, data, config){
borderWidth: 0
},
credits: {
enabled: false
enabled: true,
text: 'Created with MultiQC',
href: 'https://github.com/ewels/MultiQC'
},
tooltip: {
headerFormat: '',
Expand All @@ -235,7 +267,7 @@ function plot_xy_line_graph(div, data, config){
},
series: data
}
highcharts_plots[div] = $(div).highcharts(highcharts_plot_options[div]);
highcharts_plots[div] = new Highcharts.Chart(highcharts_plot_options[div]);
}

// Stacked Bar Graph
Expand All @@ -244,6 +276,7 @@ function plot_stacked_bar_graph(div, cats, data, config){
if (config['yDecimals'] === undefined){ config['yDecimals'] = true; }
highcharts_plot_options[div] = {
chart: {
renderTo: div.replace('#',''),
type: 'bar',
},
title: {
Expand Down Expand Up @@ -272,8 +305,10 @@ function plot_stacked_bar_graph(div, cats, data, config){
}
},
credits: {
enabled: false
},
enabled: true,
text: 'Created with MultiQC',
href: 'https://github.com/ewels/MultiQC'
},
legend: {
enabled: config['use_legend']
},
Expand All @@ -296,7 +331,7 @@ function plot_stacked_bar_graph(div, cats, data, config){
},
series: data
}
highcharts_plots[div] = $(div).highcharts(highcharts_plot_options[div]);
highcharts_plots[div] = new Highcharts.Chart(highcharts_plot_options[div]);
}


Expand Down Expand Up @@ -374,3 +409,53 @@ function highlight_fade_text(obj){
});
}, 500);
}

// Apply the Highlight highlights to highcharts plots
function apply_hc_highlights(){
// First - reset colours on all plots
$.each(Object.keys(highcharts_plots), function(i, id){
var p = highcharts_plots[id];
if(p.options.chart.type == 'line'){
$.each(p.series, function(j, s){
var col = highcharts_plot_options[id]['series'][j]['color'];
if (col != undefined){
s.color = col;
s.graph.attr({ stroke: col });
$.each(s.data, function(i, point) { point.pointAttr.hover.fill = col; });
}
});
} else if(p.options.chart.type == 'bar'){
$(id+' .highcharts-axis-labels text').css('fill', '#606060');
}
});
$('#general_stats_table tbody th').css('color', '#333');

// Loop through each filter
$('#hc_col_filters li .f_text').each(function(){
var f_text = $(this).text();
var f_col = $(this).css('color');
if(f_text == '[ all ]'){ f_text = ''; }
// Loop through each plot
$.each(Object.keys(highcharts_plots), function(i, id){
var p = highcharts_plots[id];
if(p.options.chart.type == 'line'){
$.each(p.series, function(j, s){
if(highcharts_plot_options[id]['series'][j]['color'] === undefined){
highcharts_plot_options[id]['series'][j]['color'] = s.color;
}
if(s.name.indexOf(f_text) > -1){
s.color = f_col;
s.graph.attr({ stroke: f_col });
$.each(s.data, function(i, point) { point.pointAttr.hover.fill = f_col; });
}
});
} else if(p.options.chart.type == 'bar'){
$(id+' .highcharts-axis-labels text:contains('+f_text+')').css('fill', f_col);
}
});
$('#general_stats_table tbody th:contains('+f_text+')').css('color', f_col);
});
$.each(Object.keys(highcharts_plots), function(i, id){
highcharts_plots[id].redraw();
});
}
16 changes: 13 additions & 3 deletions templates/default/multiqc_report.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@

<div class="side-nav">
<h1><a href="#"><img src="assets/img/MultiQC_logo.png" title="MultiQC"></a></h1>
<ul>
<ul class="mqc-nav">
{% if report['general_stats']['headers']|length > 0 %}
<li><a href="#general_stats">General Stats</a></li>
{% endif -%}
Expand All @@ -44,14 +44,24 @@ <h1><a href="#"><img src="assets/img/MultiQC_logo.png" title="MultiQC"></a></h1>
</li>
{% endfor %}
</ul>
<div class="hc_cols">
<h5>Highlight samples:</h5>
<form class="form-inline" id="hc_color_form">
<input id="hc_colour_filter" placeholder="Custom Pattern" class="form-control input-sm">
<input id="hc_colour_filter_color" type="color" value="#e41a1c" class="form-control input-sm">
<button type="submit" id="hc_colour_filter_update" class="btn btn-default btn-sm">+</button>
</form>
<ul id="hc_col_filters"></ul>
<small>Click highlight to remove.</small>
</div>
</div>

<div class="mainpage">

<h1 id="page_title"><img src="assets/img/MultiQC_logo.png" title="MultiQC"></h1>
<h1 id="page_title"><a href="https://github.com/ewels/MultiQC" target="_blank"><img src="assets/img/MultiQC_logo.png" title="MultiQC"></a></h1>
{{ '<h2>'+report['title']+'</h2>' if report['title'] != None }}
<p class="lead">A modular tool to aggregate results from bioinformatics analyses across many samples into a single report.</p>
<p>Report generated on {{ report['creation_date'] }} based on <code>{{ report['analysis_dir'] }}</code></p>
<p>Report generated on {{ report['creation_date'] }} based on data in <code>{{ report['analysis_dir'] }}</code></p>
<p>Report location: <code>{{ report['output_dir'] }}/multiqc_report.html</code></p>

{% if report['general_stats']['headers']|length > 0 %}
Expand Down

0 comments on commit 98942f9

Please sign in to comment.