Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
added toggle zoom/pan to profile page
  • Loading branch information
proost committed Dec 6, 2017
1 parent 71204b9 commit d612cbe
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 60 deletions.
18 changes: 12 additions & 6 deletions conekt/templates/expression_profile.html
Expand Up @@ -60,9 +60,12 @@ <h1>Expression profile for: <strong>{{ profile.probe }}</strong></h1>
<div class="panel panel-default">
<div class="panel-body">
<h2>All conditions</h2>
<div id="canvas-holder" class="center-block">
<canvas id="chart-area" class="center-block" width="800" height="600"/>
<div class="pull-right">
<a href="#" class="btn btn-default" id="enable_pan" data-toggle="tooltip" title="Toggle Pan"><i class="fa fa-arrows" aria-hidden="true"></i></a> <a href="#" class="btn btn-default" id="enable_zoom" data-toggle="tooltip" title="Toggle zoom"><i class="fa fa-search" aria-hidden="true"></i></a>
</div>
<div id="canvas-holder" class="center-block" style="height:600px; max-height:600px">
<canvas id="chart-area" class="center-block" width="800" height="600"/>
</div><br/>
<div>
<a href="{{ url_for('expression_profile.expression_profile_download_plot', profile_id=profile.id) }}" class="btn btn-primary pull-right" download="plot_{{profile.id}}.txt">Download</a>
</div>
Expand All @@ -79,9 +82,12 @@ <h2>{{t.name}}</h2>
{% endif %}
<p><span class="text-muted"><strong>Note:</strong> <abbr title="Click to show help" href="{{ url_for('help.help_topic', topic='spm') }}" data-target="#helpModal">SPM</abbr> calculations for this profile are done using
the <strong>maximum</strong> value.</span></p>
<div id="canvas-holder-{{ t.id }}" class="center-block">
<canvas id="chart-area-{{ t.id }}" class="center-block" width="800" height="600"/>
<div class="pull-right">
<a href="#" class="btn btn-default" id="enable_pan-{{ t.id }}" data-toggle="tooltip" title="Toggle Pan"><i class="fa fa-arrows" aria-hidden="true"></i></a> <a href="#" class="btn btn-default" id="enable_zoom-{{ t.id }}" data-toggle="tooltip" title="Toggle zoom"><i class="fa fa-search" aria-hidden="true"></i></a>
</div>
<div id="canvas-holder-{{ t.id }}" class="center-block" style="height:600px; max-height:600px">
<canvas id="chart-area-{{ t.id }}" class="center-block" width="800" height="600"/>
</div><br/>
<div>
<a href="{{ url_for('expression_profile.expression_profile_download_tissue_plot', profile_id=profile.id, condition_tissue_id=t.id) }}" class="btn btn-primary pull-right" download="plot_{{profile.id}}.txt">Download</a>
</div>
Expand All @@ -102,9 +108,9 @@ <h2>{{t.name}}</h2>
<script src="{{ url_for('static', filename='js/chartjs-plugin-zoom.min.js') }}"></script>
<script>
{% import "macros/chartjs.html" as chartjs %}
{{ chartjs.expression_profile("chart-area", url_for('expression_profile.expression_profile_plot_json', profile_id=profile.id)) }}
{{ chartjs.expression_profile("chart-area", url_for('expression_profile.expression_profile_plot_json', profile_id=profile.id), enable_zoom="enable_zoom", enable_pan="enable_pan") }}
{% for t in tissues %}
{{ chartjs.expression_profile("chart-area-" + t.id|string, url_for('expression_profile.expression_profile_plot_tissue_json', profile_id=profile.id, condition_tissue_id=t.id)) }}
{{ chartjs.expression_profile("chart-area-" + t.id|string, url_for('expression_profile.expression_profile_plot_tissue_json', profile_id=profile.id, condition_tissue_id=t.id), enable_zoom="enable_zoom-" + t.id|string, enable_pan="enable_pan-" + t.id|string) }}
{% endfor %}
</script>
{% endblock %}
55 changes: 1 addition & 54 deletions conekt/templates/macros/chartjs.html
Expand Up @@ -92,7 +92,7 @@
});
{%- endmacro %}

{% macro expression_profile_loader(target, url, loader_id, enable_zoom=none, enable_pan=none) -%}
{% macro expression_profile_loader(target, url, loader_id) -%}
$( document ).ready(function() {
$("#{{ loader_id }}").html(get_loader_svg('{{loader_id}}_leafy'));
init_planet_loader('{{loader_id}}_leafy');
Expand Down Expand Up @@ -134,59 +134,6 @@
var myChart = new Chart(ctx, data);
$("#{{ target }}").toggle();
$("#{{ loader_id }}").toggle();


{% if enable_zoom %}
if (myChart.options.zoom.enabled) {
$("#{{ enable_zoom }}").addClass("btn-success");
$("#{{ enable_zoom }}").removeClass("btn-danger");
$("#{{ enable_zoom }}").removeClass("btn-default");
} else {
$("#{{ enable_zoom }}").addClass("btn-danger");
$("#{{ enable_zoom }}").removeClass("btn-success");
$("#{{ enable_zoom }}").removeClass("btn-default");
}
$("#{{ enable_zoom }}").click( function(ev) {
ev.preventDefault();

myChart.options.zoom.enabled = ! myChart.options.zoom.enabled;
if (myChart.options.zoom.enabled) {
$(this).addClass("btn-success");
$(this).removeClass("btn-danger");
$(this).removeClass("btn-default");
} else {
$(this).addClass("btn-danger");
$(this).removeClass("btn-success");
$(this).removeClass("btn-default");
}
});
{% endif%}
{% if enable_pan %}
if (myChart.options.pan.enabled) {
$("#{{ enable_pan }}").addClass("btn-success");
$("#{{ enable_pan }}").removeClass("btn-danger");
$("#{{ enable_pan }}").removeClass("btn-default");
} else {
$("#{{ enable_pan }}").addClass("btn-danger");
$("#{{ enable_pan }}").removeClass("btn-success");
$("#{{ enable_pan }}").removeClass("btn-default");
}
$("#{{ enable_pan }}").click( function(ev) {
ev.preventDefault();

myChart.options.pan.enabled = ! myChart.options.pan.enabled;
if (myChart.options.pan.enabled) {
$(this).addClass("btn-success");
$(this).removeClass("btn-danger");
$(this).removeClass("btn-default");
} else {
$(this).addClass("btn-danger");
$(this).removeClass("btn-success");
$(this).removeClass("btn-default");
}

});
{% endif%}
});
});
{%- endmacro %}
Expand Down

0 comments on commit d612cbe

Please sign in to comment.