redesign sequence page (expression plots via macro)

planet/templates/expression_profile.html

@@ -50,15 +50,10 @@ <h2>{{t.name}}</h2>
 {% block extrajs %}
     <script src="{{ url_for('static', filename='js/Chart.min.js') }}"></script>
 	<script>
-			$.getJSON( "{{ url_for('expression_profile.expression_profile_plot_json', profile_id=profile.id) }}", function( data ) {
-				var ctx = document.getElementById("chart-area").getContext("2d");
-				var myChart = new Chart(ctx, data);
-			});
-			{% for t in tissues %}
-			$.getJSON( "{{ url_for('expression_profile.expression_profile_plot_tissue_json', profile_id=profile.id, condition_tissue_id=t.id) }}", function( data ) {
-				var ctx = document.getElementById("chart-area-{{t.id}}").getContext("2d");
-				var myChart = new Chart(ctx, data);
-			});
-			{% endfor %}
+	{% import "macros/chartjs.html" as chartjs %}
+    {{ chartjs.expression_profile("chart-area", url_for('expression_profile.expression_profile_plot_json', profile_id=profile.id)) }}
+    {% 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)) }}
+    {% endfor %}
 	</script>
 {% endblock %}

planet/templates/macros/chartjs.html

@@ -0,0 +1,20 @@
+{% macro expression_profile(target, url) -%}
+$( document ).ready(function() {
+    $.getJSON( "{{ url}}", function( data ) {
+        var ctx = document.getElementById("{{ target }}").getContext("2d");
+        data['options']['responsive'] = true;
+        data['options']['maintainAspectRatio'] = false;
+        data['options']['tooltips'] = {
+            enabled: true,
+            mode: 'single',
+            callbacks: {
+                label: function(tooltipItems, data) {
+                    return tooltipItems.yLabel.toFixed(2);
+                }
+            }
+        }
+        console.log(data);
+        var myChart = new Chart(ctx, data);
+    });
+});
+{%- endmacro %}

planet/templates/modals/expression_profile.html

@@ -14,11 +14,7 @@ <h4 class="modal-title" id="myModalLabel">Expression profile for: <strong>{{ pro
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 </div>
 <script>
-        $( document ).ready(function() {
-            $.getJSON( "{{ url_for('expression_profile.expression_profile_plot_json', profile_id=profile.id) }}", function( data ) {
-                var ctx = document.getElementById("profile-chart").getContext("2d");
-                var myChart = new Chart(ctx, data);
-            });
-        });
+{% import "macros/chartjs.html" as chartjs %}
+{{ chartjs.expression_profile("profile-chart", url_for('expression_profile.expression_profile_plot_json', profile_id=profile.id)) }}
 </script>
 {% endif %}

planet/templates/sequence.html

@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block container %}
-{% import 'macros/cluster_actions.html' as ca %}
+{% import "macros/cluster_actions.html" as ca %}
 <div class="top-pad">
 
     {% if sequence %}
@@ -344,17 +344,12 @@ <h3>Sequence details</h3>
     $(".parent_term").toggle();
 });
 })
+
+{% import "macros/chartjs.html" as chartjs %}
 {% if expression_profiles|count > 0 %}
         {% for profile in expression_profiles %}
             {% if loop.first %}
-                Chart.defaults.global.responsive = true;
-                Chart.defaults.global.maintainAspectRatio = false;
-                $( document ).ready(function() {
-                    $.getJSON( "{{ url_for('expression_profile.expression_profile_plot_json', profile_id=profile.id) }}", function( data ) {
-                        var ctx = document.getElementById("expression-profile").getContext("2d");
-                        var myChart = new Chart(ctx, data);
-                    });
-                });
+                {{ chartjs.expression_profile("expression-profile", url_for('expression_profile.expression_profile_plot_json', profile_id=profile.id)) }}
             {% endif %}
         {% endfor %}
 {% endif %}