This modifies the WPT page to show information about subtests

This is a companion of servo/internal-wpt-dashboard#56

Co-authored-by: Mukilan Thiyagarajan <[email protected]>
Signed-off-by: Manuel Rego Casasnovas <[email protected]>

Author: mrego

assets/js/load-chart.js

@@ -38,7 +38,8 @@ function parseDateString (date) {
 function toolTip (date, wpt_sha, servo_version, score, engine) {
     return `
         <b>${formatDate(date)}</b></br>
-        Score: <b>${score / 10}</b></br>
+        Score: <b>${Math.floor(1000 * score.total_score / score.total_tests) / 10}%</b></br>
+        Subtests: <b>${Math.floor(1000 * score.total_subtests_passed / score.total_subtests) / 10}%</b></br>
         WPT: ${wpt_sha}</br>
         Servo (${engine}): ${servo_version}
     `
@@ -129,7 +130,9 @@ function setupChart () {
         table.addColumn('date', 'runOn')
 
         options.series.push({ color: dark_mode ? '#CC9933' : '#3366CC' })
-        table.addColumn('number', 'Servo')
+        table.addColumn('number', 'Score')
+        table.addColumn({ type: 'string', role: 'tooltip', p: { html: true } })
+        table.addColumn('number', 'Subtests')
         table.addColumn({ type: 'string', role: 'tooltip', p: { html: true } })
 
         for (const scores_for_run of all_scores.scores) {
@@ -141,37 +144,16 @@ function setupChart () {
             }
             const row = [
                 date,
-                area_score / 1000,
+                area_score.total_score / area_score.total_tests,
+                toolTip(date, wpt_sha, browser_version, area_score, 'Servo'),
+                area_score.total_subtests_passed / area_score.total_subtests,
                 toolTip(date, wpt_sha, browser_version, area_score, 'Servo')
             ]
             table.addRow(row)
         }
         chart.draw(table, options)
     }
 
-    function removeChildren (parent) {
-        while (parent.firstChild) {
-            parent.removeChild(parent.firstChild)
-        }
-        return parent
-    }
-
-    function update_table (scores) {
-        const score_table = document.getElementById('score-table-body')
-        removeChildren(score_table)
-
-        for (const [idx, area] of scores.area_keys.entries()) {
-            const recent_score = scores.scores[scores.scores.length - 1]
-            score_table.insertAdjacentHTML(
-                'beforeend',
-                `<tr class="${idx % 2 ? 'odd' : 'even'}">
-                    <td>${scores.focus_areas[area]}</td>
-                    <td class="score">${String(recent_score[idx + AREA_SCORE_OFFSET] / 10).padEnd(4, '.0')}%</td>
-                </tr>`
-            )
-        }
-    }
-
     fetchData
         .then(resp => resp.json())
         .then(scores => {
@@ -213,7 +195,6 @@ function setupChart () {
             }
             area_dropdown.value = scores.area_keys[0]
             period_dropdown.value = Object.keys(periodRanges)[4]
-            update_table(scores)
             update_chart()
         })
 }

assets/js/load-table.js

@@ -0,0 +1,36 @@
+const fetchData = fetch('https://wpt.servo.org/scores-last-run.json')
+
+const AREA_SCORE_OFFSET = 3
+
+function removeChildren (parent) {
+    while (parent.firstChild) {
+        parent.removeChild(parent.firstChild)
+    }
+    return parent
+}
+
+function update_table (scores) {
+    const score_table = document.getElementById('score-table-body')
+    removeChildren(score_table)
+
+    for (const [idx, area] of scores.area_keys.entries()) {
+        const area_score = scores.scores_last_run[idx + AREA_SCORE_OFFSET]
+        const score = Math.floor(1000 * area_score.total_score / area_score.total_tests) / 10
+        const subtests = Math.floor(1000 * area_score.total_subtests_passed / area_score.total_subtests) / 10
+        score_table.insertAdjacentHTML(
+            'beforeend',
+            `<tr class="${idx % 2 ? 'odd' : 'even'}">
+                <td>${scores.focus_areas[area]}</td>
+                <td class="score">${String(score).padEnd(4, '.0')}%</td>
+                <td class="score">(${area_score.total_subtests_passed}/${area_score.total_subtests}) ${String(subtests).padEnd(4, '.0')}%</td>
+            </tr>`
+        )
+    }
+}
+
+fetchData
+  .then(resp => resp.json())
+  .then(scores => {
+    update_table(scores)
+  })
+

wpt.md

@@ -28,12 +28,16 @@ title: WPT Pass Rates
       padding: 5px 10px;
   }
 
+  #score-table th {
+      text-align: right;
+  }
   #score-table th:nth-child(1) {
       text-align: left;
   }
 
   #score-table-body .score {
       text-align: right;
+      font-family: "Fira Mono", monospace;
   }
 
   #score-explanation {
@@ -81,18 +85,16 @@ The chart below tracks our pass rates in several *focus areas* of the [Web Platf
     </div>
     <div id="servo-chart"></div>
     <table id="score-table">
-        <thead id="score-table-header"><tr><th>Test Suite</th><th>Score</th></tr></thead>
+        <thead id="score-table-header"><tr><th>Test Suite</th><th>Score</th><th>Subtests</th></tr></thead>
         <tbody id="score-table-body"></tbody>
     </table>
     <p 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.
+        The results are calculated as percentages of total <b>enabled</b> tests within the suite that pass.<br>
+        <b>Scores</b> are computed as follows: 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.<br>
+        <b>Subtests</b> are calculated by giving equal weight to both top-level tests and subtests.
     </p>
 </div>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-<script type="text/javascript" src="{{ '/js/load-chart.js' | url }}"></script>
+<script type="text/javascript" src="{{ '/js/load-table.js' | url }}"></script>
+<script type="module" src="{{ '/js/load-chart.js' | url }}"></script>