From 32c7ef47cac005dfbc83dcffd7b28e0df90ccfb6 Mon Sep 17 00:00:00 2001
From: Simon Brugman <sbrugman@users.noreply.github.com>
Date: Fri, 8 Jul 2022 10:28:23 +0200
Subject: [PATCH] fix: prevent plot name collision that stops rendering (#238)

Co-authored-by: Patil <pradyot.patil@ing.com>
---
 popmon/analysis/profiling/profiles.py         |  7 +++++-
 .../templates/assets/js/custom-script.js      |  2 +-
 popmon/visualization/templates/card.html      | 22 +++++++++----------
 popmon/visualization/templates/core.html      |  5 +++++
 popmon/visualization/templates/section.html   |  8 ++-----
 5 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/popmon/analysis/profiling/profiles.py b/popmon/analysis/profiling/profiles.py
index fa660f52..2f9970e8 100644
--- 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
index 28afc936..873aa688 100644
--- 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
index 27e0a4d4..0fbb6e00 100644
--- 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
index 6843aecc..a068abe0 100644
--- 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
index 0ed8662f..7587a0a0 100644
--- 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 -%}