Merge pull request #42 from mukilan/add-explanation-for-scores

mrego · web-flow · commit ab69e8bbb856 · 2024-12-13T10:23:07.000+01:00
Add explanation for scores
diff --git a/site/index.html b/site/index.html
@@ -58,6 +58,11 @@
             #score-table-body .score {
                 text-align: right;
             }
+
+            #score-explanation {
+                padding: 10px;
+                font-size: 1rem;
+            }
         </style>
     </head>
     <body>
@@ -103,11 +108,24 @@
             <div class="row hide-in-embed">
                 <table class="col-12" id="score-table">
                     <thead id="score-table-header">
+                        <tr>
+                            <th>Test Suite</th>
+                            <th>Score</th>
+                        </tr>
                     </thead>
                     <tbody id="score-table-body">
                     </tbody>
                 </table>
             </div>
+            <div class="row hide-in-embed" id="score-explanation">
+                Scores are calculated as percentages of total <b>enabled</b>
+                tests within the suite that pass. A passing test with no
+                subtests gets a score of 1 while a test with subtests gets a
+                score between 0 and 1 representing the fraction of passing
+                subtests within that test. This is different from the
+                percentages on wpt.fyi which is calculated by giving equal
+                weight to both top-level tests and subtests.
+            </div>
         </div>
     </body>
 </html>
diff --git a/site/load-chart.js b/site/load-chart.js
@@ -162,15 +162,6 @@ function setupChart () {
         const score_table = document.getElementById('score-table-body')
         removeChildren(score_table)
 
-        removeChildren(document.getElementById('score-table-header'))
-            .insertAdjacentHTML(
-                'beforeend',
-                `<tr>
-                    <th>Test Suite</th>
-                    <th>Servo</th>
-                </tr>`
-            )
-
         for (const [idx, area] of scores.area_keys.entries()) {
             const recent_score = scores.scores[scores.scores.length - 1]
             score_table.insertAdjacentHTML(
@@ -200,15 +191,13 @@ function setupChart () {
                 area_dropdown.appendChild(selector)
             }
 
-            function update () {
-                update_table(scores)
-                update_chart()
-            }
+            update_chart()
 
-            area_dropdown.onchange = update
-            period_dropdown.onchange = update
+            area_dropdown.onchange = update_chart
+            period_dropdown.onchange = update_chart
             area_dropdown.value = scores.area_keys[0]
             period_dropdown.value = Object.keys(periodRanges)[4]
-            update()
+            update_table(scores)
+            update_chart()
         })
 }
