Skip to content

Commit

Permalink
toggle pan/zoom in graph in sequence page
Browse files Browse the repository at this point in the history
  • Loading branch information
@proost
proost committed Dec 6, 2017
1 parent cf2487e commit 71204b9
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 4 deletions.
108 changes: 106 additions & 2 deletions conekt/templates/macros/chartjs.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% macro expression_profile(target, url) -%}
{% macro expression_profile(target, url, enable_zoom=none, enable_pan=none ) -%}
$( document ).ready(function() {
$.getJSON( "{{ url}}", function( data ) {
var ctx = document.getElementById("{{ target }}").getContext("2d");
Expand Down Expand Up @@ -36,11 +36,63 @@
}
}
var myChart = new Chart(ctx, data);

{% 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 %}

{% macro expression_profile_loader(target, url, loader_id) -%}
{% macro expression_profile_loader(target, url, loader_id, enable_zoom=none, enable_pan=none) -%}
$( document ).ready(function() {
$("#{{ loader_id }}").html(get_loader_svg('{{loader_id}}_leafy'));
init_planet_loader('{{loader_id}}_leafy');
Expand Down Expand Up @@ -83,6 +135,58 @@
$("#{{ 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
6 changes: 4 additions & 2 deletions conekt/templates/sequence.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,9 @@ <h3 class="banner-blue" id="expression_profile">Expression Profile</h3>
<span class="warning-message"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <strong>Attention:</strong> This gene has <strong><abbr title="Click to show help" href="{{ url_for('help.help_topic', topic='lowabundance') }}" data-target="#helpModal">low abundance</abbr></strong>.</span>
<br /><br />
{% endif %}
<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 style="height:550px; max-height:550px; margin-top:30px">
<canvas id="expression-profile" class="center-block" height="550"/>
</div>
Expand Down Expand Up @@ -367,7 +370,6 @@ <h3 class="banner-blue" id="annotation">Functional Annotation</h3>
<script src="{{ url_for('static', filename='js/hammer.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/chartjs-plugin-zoom.min.js') }}"></script>
<script>

$(function () {
$("#go_table").stupidtable();
$("#predicted_go_table").stupidtable();
Expand Down Expand Up @@ -421,7 +423,7 @@ <h3 class="banner-blue" id="annotation">Functional Annotation</h3>
{% if expression_profiles|count > 0 %}
{% for profile in expression_profiles %}
{% if loop.first %}
{{ chartjs.expression_profile("expression-profile", url_for('expression_profile.expression_profile_plot_json', profile_id=profile.id)) }}
{{ chartjs.expression_profile("expression-profile", url_for('expression_profile.expression_profile_plot_json', profile_id=profile.id), enable_zoom="enable_zoom", enable_pan="enable_pan") }}
{% endif %}
{% endfor %}
{% endif %}
Expand Down

0 comments on commit 71204b9

Please sign in to comment.