From f465b867aae076f0d1d4276f321ea2a590bad9f5 Mon Sep 17 00:00:00 2001
From: Simon Brugman <sfbbrugman@gmail.com>
Date: Fri, 8 Jul 2022 08:10:21 +0200
Subject: [PATCH 1/3] fix: prevent plot name collision that stops rendering

---
 .../templates/assets/js/custom-script.js      |  2 +-
 popmon/visualization/templates/card.html      | 22 +++++++++----------
 popmon/visualization/templates/core.html      |  5 +++++
 popmon/visualization/templates/section.html   |  5 ++---
 4 files changed, 19 insertions(+), 15 deletions(-)

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..cd9b0661 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 }}-{{ 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..8d763383 100644
--- a/popmon/visualization/templates/section.html
+++ b/popmon/visualization/templates/section.html
@@ -24,14 +24,13 @@ <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 }}-{{ 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() -%}
+            {%- for ref, plots in feature.plots.items() -%}
               {%- set count = (plots|length + 1)*(loop.index - 1) -%}
               <h3> {{ feature.titles.get(ref, ref) }} </h3>
               <div class="section-description">{{ feature.descriptions[ref] }}</div>

From 8a538202cedca9e71a3d5f13563ff03318772046 Mon Sep 17 00:00:00 2001
From: Simon Brugman <sfbbrugman@gmail.com>
Date: Fri, 8 Jul 2022 08:17:35 +0200
Subject: [PATCH 2/3] docs(profiles): fraction of true description

---
 popmon/analysis/profiling/profiles.py | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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
 

From 0907c7f77dd81c247060220baa1e34fb77326d78 Mon Sep 17 00:00:00 2001
From: Patil <pradyot.patil@ing.com>
Date: Fri, 8 Jul 2022 12:22:02 +0530
Subject: [PATCH 3/3] fix: plot layout

---
 popmon/visualization/templates/card.html    | 2 +-
 popmon/visualization/templates/section.html | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/popmon/visualization/templates/card.html b/popmon/visualization/templates/card.html
index cd9b0661..0fbb6e00 100644
--- a/popmon/visualization/templates/card.html
+++ b/popmon/visualization/templates/card.html
@@ -18,7 +18,7 @@ <h4 class="card-title">{{metric.name | fmt_metric}}</h4>
             <script>
             rendered["{{ card_id }}"] = false;
             render_func["{{ card_id }}"] = (function(){
-                var layout = deepCopy(layouts["{{ section_index }}-{{ metric.type }}"]);
+                var layout = deepCopy(layouts["{{ section_index }}{{ curr }}-{{ metric.type }}"]);
                 {%- if metric.shapes | length -%}
                     layout["shapes"] = {{ metric.shapes | json_plot}};
                 {%- endif -%}
diff --git a/popmon/visualization/templates/section.html b/popmon/visualization/templates/section.html
index 8d763383..7587a0a0 100644
--- a/popmon/visualization/templates/section.html
+++ b/popmon/visualization/templates/section.html
@@ -25,18 +25,16 @@ <h2>{{ section_title }}</h2>
         <script> 
           {%- set curr = loop.index  -%}
         {%- for plot_type, layout in feature.plot_type_layouts.items() -%}
-            layouts["{{ section_index }}-{{ 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) -%}
               <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 -%}
@@ -46,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 -%}