From d612cbeda27a18e4b3572f8e0635a5e6dc3de99c Mon Sep 17 00:00:00 2001
From: sepro <sebastian.proost@gmail.com>
Date: Wed, 6 Dec 2017 16:42:19 +0100
Subject: [PATCH] added toggle zoom/pan to profile page

---
 conekt/templates/expression_profile.html | 18 +++++---
 conekt/templates/macros/chartjs.html     | 55 +-----------------------
 2 files changed, 13 insertions(+), 60 deletions(-)

diff --git a/conekt/templates/expression_profile.html b/conekt/templates/expression_profile.html
index 81463cb..a4f029a 100644
--- a/conekt/templates/expression_profile.html
+++ b/conekt/templates/expression_profile.html
@@ -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>
@@ -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>
@@ -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 %}
\ No newline at end of file
diff --git a/conekt/templates/macros/chartjs.html b/conekt/templates/macros/chartjs.html
index 268d421..921dd69 100644
--- a/conekt/templates/macros/chartjs.html
+++ b/conekt/templates/macros/chartjs.html
@@ -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');
@@ -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 %}