From 71204b91016e0ce7dc66b43df85a2d011d31d4ce Mon Sep 17 00:00:00 2001
From: sepro <sebastian.proost@gmail.com>
Date: Wed, 6 Dec 2017 16:08:39 +0100
Subject: [PATCH] toggle pan/zoom in graph in sequence page

---
 conekt/templates/macros/chartjs.html | 108 ++++++++++++++++++++++++++-
 conekt/templates/sequence.html       |   6 +-
 2 files changed, 110 insertions(+), 4 deletions(-)

diff --git a/conekt/templates/macros/chartjs.html b/conekt/templates/macros/chartjs.html
index 2226e91..268d421 100644
--- a/conekt/templates/macros/chartjs.html
+++ b/conekt/templates/macros/chartjs.html
@@ -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");
@@ -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');
@@ -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 %}
diff --git a/conekt/templates/sequence.html b/conekt/templates/sequence.html
index caf0d4a..daa3968 100644
--- a/conekt/templates/sequence.html
+++ b/conekt/templates/sequence.html
@@ -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>
@@ -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();
@@ -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 %}