fix: render report summary charts after the table-of-contents rebuild (#15195)

stevewallone · claude · web-flow · commit e67e8facc936 · 2026-07-22T21:25:57.000-06:00
In every *_pdf_report.html template the Executive-Summary charts render from a jQuery ready handler, while the table-of-contents builder runs on window.onload and reassigns #contents.innerHTML. The chart containers live inside #contents, so whenever the charts paint before the TOC rebuild, the innerHTML round-trip re-parses the subtree and silently discards the painted canvases (Chart.js instances in the new UI, Flot canvases in the classic UI), leaving blank chart boxes with no console error. The two orderings race each other: on a warm local cache the async ready callback can land after onload and the charts survive, but with realistic network latency the charts paint first and are destroyed. The symptom was reported as far back as #2294 and #3253 (2020, Flot era) and never fixed - both were auto-closed by the stale bot. Wrap the chart rendering in renderReportCharts() in all seven report templates (engagement, product, product type, test, endpoint, finding, product endpoint) in both template trees (dojo/templates and dojo/templates_classic) and invoke it after the TOC builder has finished (or on a ready handler when the TOC is disabled), so the charts are always created into the final DOM. In five of the seven templates (product, test, endpoint, finding, product endpoint) the window.onload TOC builder was also missing the {% if include_table_of_contents %} guard the other templates have, so it ran even with the table of contents disabled. Because the #contents wrapper is itself rendered only when the TOC is enabled, the ungated handler dereferences a null #contents on its first line and throws an uncaught TypeError before it can rewrite anything (the finding template null-checks #contents and stays silent) - so the charts survive in that configuration, but every such report logs a console error. Those five now carry the same guard as their siblings, so the handler is not emitted when the TOC is off. In the test template the chart code was split between a ready handler and top-level script code; both pieces are consolidated into renderReportCharts() preserving their order, and its call sites stay inside {% if include_executive_summary %} because the function definition is only rendered with the executive summary. Add a regression assertion to the Selenium report tests that the summary charts end up painted when executive summary and table of contents are enabled together (factored into a helper and applied to the product type, product, engagement, test, and product-endpoint report tests). The check is chart-library agnostic (painted canvas pixels), so it holds on both the Chart.js and classic Flot report pages. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
diff --git a/dojo/templates/dojo/endpoint_pdf_report.html b/dojo/templates/dojo/endpoint_pdf_report.html
@@ -285,7 +285,7 @@ <h6>Notes</h6>
     <script src="{{ host }}{% static "chartjs-adapter-moment/dist/chartjs-adapter-moment.js" %}"></script>
     <script src="{{ host }}{% static "dojo/js/metrics.js" %}"></script>
     <script type="text/javascript">
-        $(function () {
+        function renderReportCharts() {
             var data = {};
             var data_1 = [];
             var ticks = [];
@@ -346,8 +346,9 @@ <h6>Notes</h6>
                 [4, info],
             ];
             open_findings(d1, d2, d3, d4, d5, ticks);
-        });
+        }
 
+        {% if include_table_of_contents%}
         window.onload = function () {
             var toc = "";
             var level = 3;
@@ -417,7 +418,18 @@ <h6>Notes</h6>
             }
 
             document.getElementById("toc").innerHTML += toc;
+
+            // Render the summary charts AFTER the table-of-contents builder has
+            // rewritten #contents.innerHTML. Rendering earlier (on
+            // DOMContentLoaded) means this reassignment re-parses the subtree and
+            // discards the already-painted Chart.js canvases, leaving blank charts.
+            renderReportCharts();
         };
+        {% else %}
+        $(function () {
+            renderReportCharts();
+        });
+        {% endif %}
 
     </script>
 {% endblock %}
diff --git a/dojo/templates/dojo/engagement_pdf_report.html b/dojo/templates/dojo/engagement_pdf_report.html
@@ -420,7 +420,7 @@ <h6>Notes</h6>
     <script src="{{ host }}{% static "chartjs-adapter-moment/dist/chartjs-adapter-moment.js" %}"></script>
     <script src="{{ host }}{% static "dojo/js/metrics.js" %}"></script>
     <script type="text/javascript">
-        $(function () {
+        function renderReportCharts() {
             var data = {};
             var data_1 = [];
             var ticks = [];
@@ -497,7 +497,7 @@ <h6>Notes</h6>
                 opened_per_month_2(critical, high, medium, low);
             {% endif %}
 
-        });
+        }
 
         {% if include_table_of_contents%}
         window.onload = function () {
@@ -569,7 +569,17 @@ <h6>Notes</h6>
             }
 
             document.getElementById("toc").innerHTML += toc;
+
+            // Render the summary charts AFTER the table-of-contents builder has
+            // rewritten #contents.innerHTML. Rendering earlier (on
+            // DOMContentLoaded) means this reassignment re-parses the subtree and
+            // discards the already-painted Chart.js canvases, leaving blank charts.
+            renderReportCharts();
         };
+        {% else %}
+        $(function () {
+            renderReportCharts();
+        });
         {% endif %}
     </script>
 {% endblock %}
diff --git a/dojo/templates/dojo/finding_pdf_report.html b/dojo/templates/dojo/finding_pdf_report.html
@@ -270,7 +270,7 @@ <h6>Notes</h6>
     <script src="{{ host }}{% static "chartjs-adapter-moment/dist/chartjs-adapter-moment.js" %}"></script>
     <script src="{{ host }}{% static "dojo/js/metrics.js" %}"></script>
     <script type="text/javascript">
-        $(function () {
+        function renderReportCharts() {
             var data = {};
             var data_1 = [];
             var ticks = [];
@@ -331,8 +331,9 @@ <h6>Notes</h6>
                 [4, info],
             ];
             open_findings(d1, d2, d3, d4, d5, ticks);
-        });
+        }
 
+        {% if include_table_of_contents%}
         window.onload = function () {
             var toc = "";
             var level = 3;
@@ -406,7 +407,18 @@ <h6>Notes</h6>
             if (document.getElementById("toc") != null) {
                 document.getElementById("toc").innerHTML += toc;
             }
+
+            // Render the summary charts AFTER the table-of-contents builder has
+            // rewritten #contents.innerHTML. Rendering earlier (on
+            // DOMContentLoaded) means this reassignment re-parses the subtree and
+            // discards the already-painted Chart.js canvases, leaving blank charts.
+            renderReportCharts();
         };
+        {% else %}
+        $(function () {
+            renderReportCharts();
+        });
+        {% endif %}
 
     </script>
 {% endblock %}
diff --git a/dojo/templates/dojo/product_endpoint_pdf_report.html b/dojo/templates/dojo/product_endpoint_pdf_report.html
@@ -338,7 +338,7 @@ <h6>Notes</h6>
         <script src="{% static "dojo/js/metrics.js" %}"></script>
     {% endblock metrics %}
     <script type="text/javascript">
-        $(function () {
+        function renderReportCharts() {
             var critical = 0;
             var high = 0;
             var medium = 0;
@@ -471,8 +471,9 @@ <h6>Notes</h6>
                 i++;
             });
             finding_age(data_1, ticks);
-        });
+        }
 
+        {% if include_table_of_contents%}
         window.onload = function () {
             var toc = "";
             var level = 3;
@@ -542,6 +543,17 @@ <h6>Notes</h6>
             }
 
             document.getElementById("toc").innerHTML += toc;
+
+            // Render the summary charts AFTER the table-of-contents builder has
+            // rewritten #contents.innerHTML. Rendering earlier (on
+            // DOMContentLoaded) means this reassignment re-parses the subtree and
+            // discards the already-painted Chart.js canvases, leaving blank charts.
+            renderReportCharts();
         };
+        {% else %}
+        $(function () {
+            renderReportCharts();
+        });
+        {% endif %}
     </script>
 {% endblock %}
diff --git a/dojo/templates/dojo/product_pdf_report.html b/dojo/templates/dojo/product_pdf_report.html
@@ -391,7 +391,7 @@ <h6>Notes</h6>
     <script src="{{ host }}{% static "chartjs-adapter-moment/dist/chartjs-adapter-moment.js" %}"></script>
     <script src="{{ host }}{% static "dojo/js/metrics.js" %}"></script>
     <script type="text/javascript">
-        $(function () {
+        function renderReportCharts() {
             var critical = 0;
             var high = 0;
             var medium = 0;
@@ -488,8 +488,9 @@ <h6>Notes</h6>
                 i++;
             });
             finding_age(data_1, ticks);
-        });
+        }
 
+        {% if include_table_of_contents%}
 		window.onload = function () {
             var toc = "";
             var level = 3;
@@ -559,6 +560,17 @@ <h6>Notes</h6>
             }
 
             document.getElementById("toc").innerHTML += toc;
+
+            // Render the summary charts AFTER the table-of-contents builder has
+            // rewritten #contents.innerHTML. Rendering earlier (on
+            // DOMContentLoaded) means this reassignment re-parses the subtree and
+            // discards the already-painted Chart.js canvases, leaving blank charts.
+            renderReportCharts();
         };
+        {% else %}
+        $(function () {
+            renderReportCharts();
+        });
+        {% endif %}
   </script>
 {% endblock %}
diff --git a/dojo/templates/dojo/product_type_pdf_report.html b/dojo/templates/dojo/product_type_pdf_report.html
@@ -320,7 +320,7 @@ <h6>Notes</h6>
     <script src="{{ host }}{% static "chartjs-adapter-moment/dist/chartjs-adapter-moment.js" %}"></script>
     <script src="{{ host }}{% static "dojo/js/metrics.js" %}"></script>
     <script type="text/javascript">
-        $(function () {
+        function renderReportCharts() {
             var critical = 0;
             var high = 0;
             var medium = 0;
@@ -375,7 +375,7 @@ <h6>Notes</h6>
                 {% endfor %}
                 opened_per_month_2(critical, high, medium, low);
             {% endif %}
-        });
+        }
 
         {% if include_table_of_contents%}
             window.onload = function () {
@@ -447,7 +447,17 @@ <h6>Notes</h6>
                 }
 
                 document.getElementById("toc").innerHTML += toc;
+
+                // Render the summary charts AFTER the table-of-contents builder has
+                // rewritten #contents.innerHTML. Rendering earlier (on
+                // DOMContentLoaded) means this reassignment re-parses the subtree and
+                // discards the already-painted Chart.js canvases, leaving blank charts.
+                renderReportCharts();
             };
+        {% else %}
+        $(function () {
+            renderReportCharts();
+        });
         {% endif %}
     </script>
 {% endblock %}
diff --git a/dojo/templates/dojo/test_pdf_report.html b/dojo/templates/dojo/test_pdf_report.html
@@ -434,7 +434,7 @@ <h6>Notes</h6>
     <script src="{{ host }}{% static "dojo/js/metrics.js" %}"></script>
     <script type="text/javascript">
         {% if include_executive_summary %}
-            $(function () {
+            function renderReportCharts() {
                 var critical = 0;
                 var high = 0;
                 var medium = 0;
@@ -474,7 +474,6 @@ <h6>Notes</h6>
                     [4, info],
                 ];
                 open_findings(d1, d2, d3, d4, d5, ticks);
-            });
 
             var data = {};
             var data_1 = []
@@ -510,8 +509,10 @@ <h6>Notes</h6>
             {% if endpoint_opened_per_month %}
                 opened_per_month_2(critical, high, medium, low);
             {%  endif %}
+            }
         {% endif %}
 
+        {% if include_table_of_contents%}
         window.onload = function () {
             var toc = "";
             var level = 3;
@@ -582,6 +583,21 @@ <h6>Notes</h6>
             }
 
             document.getElementById("toc").innerHTML += toc;
+
+            {% if include_executive_summary %}
+            // Render the summary charts AFTER the table-of-contents builder has
+            // rewritten #contents.innerHTML. Rendering earlier (on
+            // DOMContentLoaded) means this reassignment re-parses the subtree and
+            // discards the already-painted Chart.js canvases, leaving blank charts.
+            renderReportCharts();
+            {% endif %}
         };
+        {% else %}
+        {% if include_executive_summary %}
+        $(function () {
+            renderReportCharts();
+        });
+        {% endif %}
+        {% endif %}
     </script>
 {% endblock %}
diff --git a/dojo/templates_classic/dojo/endpoint_pdf_report.html b/dojo/templates_classic/dojo/endpoint_pdf_report.html
@@ -287,7 +287,7 @@ <h6>Notes</h6>
     <script src="{{ host }}{% static "flot/jquery.flot.stack.js" %}"></script>
     <script src="{{ host }}{% static "dojo/js/classic/metrics.js" %}"></script>
     <script type="text/javascript">
-        $(function () {
+        function renderReportCharts() {
             var data = {};
             var data_1 = [];
             var ticks = [];
@@ -348,8 +348,9 @@ <h6>Notes</h6>
                 [4, info],
             ];
             open_findings(d1, d2, d3, d4, d5, ticks);
-        });
+        }
 
+        {% if include_table_of_contents%}
         window.onload = function () {
             var toc = "";
             var level = 3;
@@ -419,7 +420,18 @@ <h6>Notes</h6>
             }
 
             document.getElementById("toc").innerHTML += toc;
+
+            // Render the summary charts AFTER the table-of-contents builder has
+            // rewritten #contents.innerHTML. Rendering earlier (on
+            // DOMContentLoaded) means this reassignment re-parses the subtree and
+            // discards the already-painted chart canvases, leaving blank charts.
+            renderReportCharts();
         };
+        {% else %}
+        $(function () {
+            renderReportCharts();
+        });
+        {% endif %}
 
     </script>
 {% endblock %}
diff --git a/dojo/templates_classic/dojo/engagement_pdf_report.html b/dojo/templates_classic/dojo/engagement_pdf_report.html
@@ -422,7 +422,7 @@ <h6>Notes</h6>
     <script src="{{ host }}{% static "flot/jquery.flot.stack.js" %}"></script>
     <script src="{{ host }}{% static "dojo/js/classic/metrics.js" %}"></script>
     <script type="text/javascript">
-        $(function () {
+        function renderReportCharts() {
             var data = {};
             var data_1 = [];
             var ticks = [];
@@ -499,7 +499,7 @@ <h6>Notes</h6>
                 opened_per_month_2(critical, high, medium, low);
             {% endif %}
 
-        });
+        }
 
         {% if include_table_of_contents%}
         window.onload = function () {
@@ -571,7 +571,17 @@ <h6>Notes</h6>
             }
 
             document.getElementById("toc").innerHTML += toc;
+
+            // Render the summary charts AFTER the table-of-contents builder has
+            // rewritten #contents.innerHTML. Rendering earlier (on
+            // DOMContentLoaded) means this reassignment re-parses the subtree and
+            // discards the already-painted chart canvases, leaving blank charts.
+            renderReportCharts();
         };
+        {% else %}
+        $(function () {
+            renderReportCharts();
+        });
         {% endif %}
     </script>
 {% endblock %}
diff --git a/dojo/templates_classic/dojo/finding_pdf_report.html b/dojo/templates_classic/dojo/finding_pdf_report.html
@@ -266,7 +266,7 @@ <h6>Notes</h6>
     <script src="{{ host }}{% static "flot/jquery.flot.stack.js" %}"></script>
     <script src="{{ host }}{% static "dojo/js/classic/metrics.js" %}"></script>
     <script type="text/javascript">
-        $(function () {
+        function renderReportCharts() {
             var data = {};
             var data_1 = [];
             var ticks = [];
@@ -327,8 +327,9 @@ <h6>Notes</h6>
                 [4, info],
             ];
             open_findings(d1, d2, d3, d4, d5, ticks);
-        });
+        }
 
+        {% if include_table_of_contents%}
         window.onload = function () {
             var toc = "";
             var level = 3;
@@ -402,7 +403,18 @@ <h6>Notes</h6>
             if (document.getElementById("toc") != null) {
                 document.getElementById("toc").innerHTML += toc;
             }
+
+            // Render the summary charts AFTER the table-of-contents builder has
+            // rewritten #contents.innerHTML. Rendering earlier (on
+            // DOMContentLoaded) means this reassignment re-parses the subtree and
+            // discards the already-painted chart canvases, leaving blank charts.
+            renderReportCharts();
         };
+        {% else %}
+        $(function () {
+            renderReportCharts();
+        });
+        {% endif %}
 
     </script>
 {% endblock %}
diff --git a/dojo/templates_classic/dojo/product_endpoint_pdf_report.html b/dojo/templates_classic/dojo/product_endpoint_pdf_report.html
diff --git a/dojo/templates_classic/dojo/product_pdf_report.html b/dojo/templates_classic/dojo/product_pdf_report.html
diff --git a/dojo/templates_classic/dojo/product_type_pdf_report.html b/dojo/templates_classic/dojo/product_type_pdf_report.html
diff --git a/dojo/templates_classic/dojo/test_pdf_report.html b/dojo/templates_classic/dojo/test_pdf_report.html
diff --git a/tests/report_builder_test.py b/tests/report_builder_test.py
