fix: prevent plot name collision that stops rendering (#238)

Co-authored-by: Patil <pradyot.patil@ing.com>
ing-bank · Jul 8, 2022 · 32c7ef4 · 32c7ef4
1 parent e813534
commit 32c7ef4
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 19 deletions.
diff --git a/popmon/analysis/profiling/profiles.py b/popmon/analysis/profiling/profiles.py
@@ -159,7 +159,12 @@ def profile_distinct(bin_labels, bin_counts):
     return len(np.unique(bin_labels[bin_counts > 0]))
 
 
-@Profiles.register(key="fraction_of_true", description="", dim=1, htype="cat")
+@Profiles.register(
+    key="fraction_of_true",
+    description="Compute fraction of 'true' (as in boolean) labels",
+    dim=1,
+    htype="cat",
+)
 def profile_fraction_of_true(bin_labels, bin_counts):
     """Compute fraction of 'true' labels
 

diff --git a/popmon/visualization/templates/assets/js/custom-script.js b/popmon/visualization/templates/assets/js/custom-script.js
@@ -71,7 +71,7 @@ $("#toggleDescriptions").change(function() {
     }
 });
 
-var plotly_config = {scrollZoom: true, displaylogo: false, modeBarButtonsToRemove: ['lasso2d']} ;
+var plotly_config = {scrollZoom: true, displaylogo: false, modeBarButtonsToRemove: ['lasso2d']};
 
 
 const deepCopy = (inObject) => {

diff --git a/popmon/visualization/templates/card.html b/popmon/visualization/templates/card.html
@@ -14,29 +14,29 @@ <h4 class="card-title">{{metric.name | fmt_metric}}</h4>
         {%- if metric.type in ['traffic_light', 'alert'] -%}
             {{ metric.plot }}
         {%- else -%}
-            <div class="skeleton-loader" id="{% if feature%}{{ feature.name }}-{%endif%}{{ metric.name }}-loading"></div>
+            <div class="skeleton-loader" id="{{ card_id }}-loading"></div>
             <script>
-            var feature{{ section_index }}{{ curr }}{{ plt }}_rendered = false ;
-            function render_{{ section_index }}{{ curr }}{{ plt }}(){
-                var layout = deepCopy(feature{{ section_index }}{{ curr }}_layout["{{ metric.type }}"]);
+            rendered["{{ card_id }}"] = false;
+            render_func["{{ card_id }}"] = (function(){
+                var layout = deepCopy(layouts["{{ section_index }}{{ curr }}-{{ metric.type }}"]);
                 {%- if metric.shapes | length -%}
-                    layout["shapes"] = {{ metric.shapes | json_plot}} ;
+                    layout["shapes"] = {{ metric.shapes | json_plot}};
                 {%- endif -%}
                 {%- if metric.yaxis_range | length -%}
-                    layout["yaxis"]["range"] = {{ metric.yaxis_range | json_plot }} ;
+                    layout["yaxis"]["range"] = {{ metric.yaxis_range | json_plot }};
                 {%- endif -%}
-                Plotly.newPlot(document.getElementById("{{ card_id }}"), {{ metric.plot | json_plot }}, layout, plotly_config).then(function() { document.getElementById("{{ card_id }}-loading").remove(); feature{{ section_index }}{{ curr }}{{ plt }}_rendered = true ;});
-            }
+                Plotly.newPlot(document.getElementById("{{ card_id }}"), {{ metric.plot | json_plot }}, layout, plotly_config).then(function() { document.getElementById("{{ card_id }}-loading").remove(); rendered["{{ card_id }}"] = true;});
+            });
 
             var io = new IntersectionObserver(function(entries) {
                 var entry = entries[0];
-                if(entry.isIntersecting === true && feature{{ section_index }}{{ curr }}{{ plt }}_rendered === false){
+                if(entry.isIntersecting === true && rendered["{{ card_id }}"] === false){
                     if(document.readyState === "complete"){
-                        render_{{ section_index }}{{ curr }}{{ plt }}();
+                        render_func["{{ card_id }}"]();
                         io.unobserve(entry.target);
                     }else{
                         document.addEventListener('DOMContentLoaded', function() {
-                            render_{{ section_index }}{{ curr }}{{ plt }}();
+                            render_func["{{ card_id }}"]();
                             io.unobserve(entry.target);
                         });
                     }

diff --git a/popmon/visualization/templates/core.html b/popmon/visualization/templates/core.html
@@ -24,6 +24,11 @@
 </head>
 <body id="page-top">
     {%- include 'modal-popup.html' -%}
+    <script>
+    var rendered = {};
+    var layouts = {};
+    var render_func = {};
+    </script>
     {%- include 'header.html' -%}
     {{ sections }}
     {%- include 'footer.html' -%}

diff --git a/popmon/visualization/templates/section.html b/popmon/visualization/templates/section.html
@@ -24,20 +24,17 @@ <h2>{{ section_title }}</h2>
       {%- for feature in features -%}
         <script> 
           {%- set curr = loop.index  -%}
-          var feature{{ section_index }}{{ curr }}_layout = {};
         {%- for plot_type, layout in feature.plot_type_layouts.items() -%}
-            feature{{ section_index }}{{ curr }}_layout["{{ plot_type }}"] = {{ layout | json_plot }};
+            layouts["{{ section_index }}{{ curr }}-{{ plot_type }}"] = {{ layout | json_plot }};
         {%- endfor -%}
         </script>
         <div class="section_feature" data-section-feature="{{ feature.name }}">
           {%- if feature.plots is mapping -%}
-            {%- for ref,plots in feature.plots.items() -%}
-              {%- set count = (plots|length + 1)*(loop.index - 1) -%}
+            {%- for ref, plots in feature.plots.items() -%}
               <h3> {{ feature.titles.get(ref, ref) }} </h3>
               <div class="section-description">{{ feature.descriptions[ref] }}</div>
               <div class="row">
               {%- for metric in plots -%}
-                {%- set plt = count + loop.index  -%}
                 {%- with metric=metric -%}
                   {%- include 'card.html' -%}
                 {%- endwith -%}
@@ -47,7 +44,6 @@ <h3> {{ feature.titles.get(ref, ref) }} </h3>
           {%- else -%}
             <div class="row">
             {%- for metric in feature.plots -%}
-              {%- set plt = loop.index  -%}
               {%- with metric=metric -%}
                 {%- include 'card.html' -%}
               {%- endwith -%}
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,7 +71,7 @@ $("#toggleDescriptions").change(function() { @@
         }
     });
-    var plotly_config = {scrollZoom: true, displaylogo: false, modeBarButtonsToRemove: ['lasso2d']} ;
+    var plotly_config = {scrollZoom: true, displaylogo: false, modeBarButtonsToRemove: ['lasso2d']};
     const deepCopy = (inObject) => {
@@ Expand Down @@