From c25f3e599fc9df4d8df8fc6fb587749cb0c1016b Mon Sep 17 00:00:00 2001
From: Simon Brugman <sfbbrugman@gmail.com>
Date: Fri, 8 Jul 2022 08:10:21 +0200
Subject: [PATCH] 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..b07799ba 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_key }}-{{ 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..33def712 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_key }}-{{ 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>