Optimized HTML for performance and readability

Author: 7h3Rabbit

pug/index.pug

@@ -1,41 +1,67 @@
 - let pluginData = pageInfo.data['webperf-plugin-javascript'].run ? pageInfo.data['webperf-plugin-javascript'].run : pageInfo.data['webperf-plugin-javascript'].pageSummary
 
 if pluginData.knowledgeData && pluginData.knowledgeData.issues && pluginData.knowledgeData.issues.length > 0
-    h1 Grouped Issues
-    - let groupedIssues = {};
-    - pluginData.knowledgeData.issues.forEach(issue => {
-    -     let key = `${issue.rule}-${issue.category}-${issue.severity}`;
-    -     if (!groupedIssues[key]) {
-    -         groupedIssues[key] = { rule: issue.rule, category: issue.category, severity: issue.severity, count: 0 };
-    -     }
-    -     groupedIssues[key].count++;
-    - });
-    - const severityOrder = { critical: 4, error: 3, warning: 2, info: 1 };
-    - let sortedGroupedIssues = Object.values(groupedIssues).sort((a, b) => {
-    -     if (severityOrder[b.severity] !== severityOrder[a.severity]) {
-    -         return severityOrder[b.severity] - severityOrder[a.severity];
-    -     }
-    -     return b.count - a.count;
-    - });
-    table
-        thead
-            tr
-                th Rule
-                th Category
-                th Severity
-                th Count
-        tbody
-            each value in sortedGroupedIssues
+    - if (pluginData.knowledgeData.issues.length > 15)
+        h1 Grouped Issues
+        - let groupedIssues = {};
+        - pluginData.knowledgeData.issues.forEach(issue => {
+        -     let key = `${issue.rule}-${issue.category}-${issue.severity}`;
+        -     if (!groupedIssues[key]) {
+        -         groupedIssues[key] = { rule: issue.rule, category: issue.category, severity: issue.severity, count: 0 };
+        -     }
+        -     groupedIssues[key].count++;
+        - });
+        - const severityOrder = { critical: 4, error: 3, warning: 2, info: 1 };
+        - let sortedGroupedIssues = Object.values(groupedIssues).sort((a, b) => {
+        -     if (severityOrder[b.severity] !== severityOrder[a.severity]) {
+        -         return severityOrder[b.severity] - severityOrder[a.severity];
+        -     }
+        -     return b.count - a.count;
+        - });
+        table
+            thead
                 tr
-                    td
-                        a(href=`#rule-${value.rule}`)= value.rule
-                    td= value.category
-                    td= value.severity
-                    td= value.count
+                    th Rule
+                    th Category
+                    th Severity
+                    th Count
+            tbody
+                each value in sortedGroupedIssues
+                    tr
+                        td
+                            a(href=`#rule-${value.rule}`)= value.rule
+                        td= value.category
+                        td= value.severity
+                        td= value.count
 
-    // Add tables for each rule
-    each value in sortedGroupedIssues
-        h2(id=`rule-${value.rule}`)= `Rule: ${value.rule}`
+        // Add tables for each rule
+        each value in sortedGroupedIssues
+            h2(id=`rule-${value.rule}`)= `Rule: ${value.rule}`
+            p 
+                strong Category:
+                = value.category
+                br
+                strong Severity:
+                = value.severity
+            - if (pluginData.knowledgeData.issues.filter(issue => issue.rule === value.rule).length > 100)
+                p Note: Only the first 100 issues are displayed.
+            table
+                thead
+                    tr
+                        th URL
+                        th Text
+                        th Line
+                        th Column
+                tbody
+                    - let limitedIssues = pluginData.knowledgeData.issues.filter(issue => issue.rule === value.rule).slice(0, 100);
+                    each issue in limitedIssues
+                        tr
+                            td= issue.url
+                            td= issue.text
+                            td= issue.line
+                            td= issue.column
+    - else
+        h1 Issues
         table
             thead
                 tr
@@ -47,7 +73,7 @@ if pluginData.knowledgeData && pluginData.knowledgeData.issues && pluginData.kno
                     th Line
                     th Column
             tbody
-                each issue in pluginData.knowledgeData.issues.filter(issue => issue.rule === value.rule)
+                each issue in pluginData.knowledgeData.issues
                     tr
                         td= issue.url
                         td= issue.rule
@@ -56,3 +82,9 @@ if pluginData.knowledgeData && pluginData.knowledgeData.issues && pluginData.kno
                         td= issue.text
                         td= issue.line
                         td= issue.column
+else
+    p No issues found.
+
+//- h2 Debug: Plugin Data
+//- pre
+//-     code= JSON.stringify(pluginData, null, 3)