From 8897ef44f7b35e5ae2f0c764dfc8ade965b1ac1f Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Sun, 10 Aug 2025 13:12:46 +0200
Subject: [PATCH 01/11] update

---
 JetStream.css      | 96 ++++++++++++++++++++++++++++++----------------
 JetStreamDriver.js | 60 ++++++++++++++++++++++++-----
 2 files changed, 112 insertions(+), 44 deletions(-)

diff --git a/JetStream.css b/JetStream.css
index c04d205f..152a65f8 100644
--- a/JetStream.css
+++ b/JetStream.css
@@ -19,10 +19,28 @@
  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
+ * ARISING IN ANY WAY OUT of THE USE of THIS SOFTWARE, EVEN IF ADVISED of
+ * THE POSSIBILITY of SUCH DAMAGE.
 */
 
+:root {
+    --accent-color-primary: #34AADC;
+    --accent-color-secondary: #86D9FF;
+    --text-color-inverse: white;
+    --text-color-primary: black;
+    --text-color-secondary: #555555;
+    --text-color-tertiary: #444444;
+    --text-color-subtle: #6c6c71;
+    --text-color-very-subtle: #8E8E93;
+    --heading-color: #2C98D1;
+    --link-hover-color: #0086BF;
+    --button-color-primary: rgb(52,170,220);
+    --error-text-color: #d24a59;
+    --benchmark-heading-color: rgb(183, 183, 183);
+    --benchmark-error-text-color: #ff8686;
+    --benchmark-done-result-color: #4A4A4A;
+}
+
 html {
     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
     font-size: 62.5%;
@@ -42,8 +60,8 @@ body {
 }
 
 ::selection {
-    background-color: #34AADC;
-    color: white;
+    background-color: var(--accent-color-primary);
+    color: var(--text-color-inverse);
 }
 
 main {
@@ -126,13 +144,13 @@ article, .summary {
 }
 
 h1 {
-    color: black;
+    color: var(--text-color-primary);
     text-align: center;
 }
 
 
 h2, h3, h4, h5, h6 {
-     color: #2C98D1;
+     color: var(--heading-color);
      text-align: left;
 }
 
@@ -143,7 +161,7 @@ h4, h5, h6 {
 
 p {
     text-align: left;
-    color: #555555;
+    color: var(--text-color-secondary);
     margin: 0 0 3rem 0;
 }
 
@@ -152,7 +170,7 @@ h5, h6 {
 }
 
 h6 {
-    color: #444444;
+    color: var(--text-color-tertiary);
 }
 
 dt {
@@ -169,12 +187,12 @@ dd {
 
 a:link,
 a:visited {
-    color: #34AADC;
+    color: var(--accent-color-primary);
 }
 
 a:hover,
 a:active {
-    color: #0086BF;
+    color: var(--link-hover-color);
 }
 
 #status {
@@ -187,10 +205,10 @@ a.button {
     font-weight: 500;
     text-decoration: none;
     font-size: 2rem;
-    background-color: rgb(52,170,220);
-    background-image: linear-gradient(180deg, rgba(134,217,255,1) -80%, rgba(52,170,220,1) 100%);
-    color: rgb(255,255,255);
-    border: 1px solid rgb(52,170,220);
+    background-color: var(--button-color-primary);
+    background-image: linear-gradient(180deg, rgba(134,217,255,1) -80%, rgb(52,170,220) 100%);
+    color: var(--text-color-inverse);
+    border: 1px solid var(--button-color-primary);
     border-radius: 2px;
     padding: 0.3rem 9rem 0.5rem;
     -webkit-touch-callout: none;
@@ -238,7 +256,7 @@ a.button {
 }
 
 .error h2, .error p {
-    color: #d24a59;
+    color: var(--error-text-color);
     margin-bottom: 0;
     text-align: center;
     font-weight: 500;
@@ -259,17 +277,22 @@ a.button {
 }
 
 #result-summary label {
-    color: #6c6c71;
+    color: var(--text-color-subtle);
 }
 
 #result-summary .score {
     font-weight: bold;
     font-size: 4rem;
     line-height: 1;
-    color: #34AADC;
+    color: var(--accent-color-primary);
     font-weight: 500;
 }
 
+#result-summary .plot {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 #result-summary .score .interval {
     display: block;
     font-weight: normal;
@@ -289,30 +312,30 @@ a.button {
     max-width: 20%;
     min-width: 200px;
     text-align: left;
-    color: #8E8E93;
+    color: var(--text-color-very-subtle);
     font-size: 1.6rem;
     margin: 0 1.6rem 3rem 0;
 
 }
 
-.benchmark h4, .benchmark .result, .benchmark label {
+.benchmark h4, .benchmark .result, .benchmark label, .benchmark .plot  {
     color: transparent;
     background: linear-gradient(160deg, rgba(249,249,249,1) 0%, rgba(238,238,238,1) 100%);
     border-radius: 3px;
 }
 
 .benchmark h3 {
-    color:  rgb(183, 183, 183);
+    color:  var(--benchmark-heading-color);
 }
 
-.benchmark-running h4, .benchmark-running .result, .benchmark-running label {
-    color: #86D9FF;
-    background-color: #86D9FF;
+.benchmark-running h4, .benchmark-running .result, .benchmark-running label,  .benchmark-running .plot {
+    color: var(--accent-color-secondary);
+    background-color: var(--accent-color-secondary);
     background-image: none;
 }
 
 
-.benchmark-done h3, .benchmark-done h4, .benchmark-done .result, .benchmark-done label {
+.benchmark-done h3, .benchmark-done h4, .benchmark-done .result, .benchmark-done label,  .benchmark-done .plot {
     background-color: transparent;
     background-image: none;
     -webkit-touch-callout: revert;
@@ -322,14 +345,14 @@ a.button {
     user-select: text;
 }
 
-.benchmark-error h4, .benchmark-error .result, .benchmark-error label {
-    color: #ff8686;
-    background-color: #ff8686;
+.benchmark-error h4, .benchmark-error .result, .benchmark-error label, .benchmark-error  .plot {
+    color: var(--benchmark-error-text-color);
+    background-color: var(--benchmark-error-text-color);
     background-image: none;
 }
 
 .benchmark-error h3 {
-    color: #ff8686;
+    color: var(--benchmark-error-text-color);
 }
 
 .benchmark h3 {
@@ -341,11 +364,11 @@ a.button {
 .benchmark-running h3 {
     background-color: transparent;
     background-image: none;
-    color: #34AADC;
+    color: var(--accent-color-primary);
 }
 
 .benchmark-done h3 {
-    color: #6c6c71;
+    color: var(--text-color-subtle);
 }
 
 .benchmark h3 a,
@@ -358,7 +381,7 @@ a.button {
 }
 
 .benchmark-done h3 a:hover {
-    color: #34AADC;
+    color: var(--accent-color-primary);
     text-decoration: underline;
 }
 
@@ -370,7 +393,7 @@ a.button {
 }
 
 .benchmark-done h4 {
-    color: #34AADC;
+    color: var(--accent-color-primary);
     background-color: none;
 }
 
@@ -388,7 +411,7 @@ a.button {
 }
 
 .benchmark-done .result {
-    color: #4A4A4A;
+    color: var(--benchmark-done-result-color);
 }
 
 .benchmark label {
@@ -396,10 +419,15 @@ a.button {
 }
 
 .benchmark-done label {
-    color: #8E8E93;
+    color: var(--text-color-very-subtle);
     font-weight: 400;
 }
 
+.plot circle {
+    fill: var(--accent-color-primary);
+    opacity: 0.8;
+}
+
 @keyframes fadein {
     from {
         opacity: 0;
diff --git a/JetStreamDriver.js b/JetStreamDriver.js
index 76cf9861..8656a24e 100644
--- a/JetStreamDriver.js
+++ b/JetStreamDriver.js
@@ -348,7 +348,9 @@ class Driver {
                 text +=
                     `<div class="benchmark" id="benchmark-${benchmark.name}">
                     <h3 class="benchmark-name"><a href="in-depth.html#${benchmark.name}">${benchmark.name}</a></h3>
-                    <h4 class="score" id="${overallScoreId}">___</h4><p>`;
+                    <h4 class="score" id="${overallScoreId}">___</h4>
+                    <svg class="plot" id="plot-${benchmark.name}"></svg>
+                    <p>`;
                 for (let i = 0; i < scoreIds.length; i++) {
                     const scoreId = scoreIds[i];
                     const label = description[i];
@@ -692,6 +694,7 @@ class Benchmark {
         this.isAsync = !!plan.isAsync;
         this.scripts = null;
         this.preloads = null;
+        this.results = [];
         this._state = BenchmarkState.READY;
     }
 
@@ -742,8 +745,8 @@ class Benchmark {
             top.currentResolve(results);`;
     }
 
-    processResults() {
-        throw new Error("Subclasses need to implement this");
+    processResults(results) {
+        this.results = results;
     }
 
     get score() {
@@ -1061,6 +1064,39 @@ class Benchmark {
 
         for (const [name, value] of scoreEntries)
             document.getElementById(this.scoreIdentifier(name)).innerHTML = uiFriendlyScore(value);
+
+        this.renderScatterplot();
+    }
+
+    renderScatterplot() {
+        const svg = document.getElementById(`plot-${this.name}`);
+        if (!svg || !this.results || this.results.length === 0)
+            return;
+
+        const scoreElement = document.getElementById(this.scoreIdentifier("Score"));
+        svg.style.width = scoreElement.offsetWidth + 'px';
+        svg.style.height = scoreElement.offsetHeight + 'px';
+
+        const width = scoreElement.offsetWidth;
+        const height = scoreElement.offsetHeight;
+        const padding = 5;
+
+        const maxResult = Math.max(...this.results);
+        const minResult = Math.min(...this.results);
+
+        const xRatio = (width - 2 * padding) / (this.results.length - 1 || 1);
+        const yRatio = (height - 2 * padding) / (maxResult - minResult || 1);
+
+        svg.innerHTML = '';
+
+        for (let i = 0; i < this.results.length; i++) {
+            const result = this.results[i];
+            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+            circle.setAttribute('cx', padding + i * xRatio);
+            circle.setAttribute('cy', height - padding - (result - minResult) * yRatio);
+            circle.setAttribute('r', 1.5);
+            svg.appendChild(circle);
+        }
     }
 
     updateConsoleAfterRun(scoreEntries) {
@@ -1102,13 +1138,15 @@ class DefaultBenchmark extends Benchmark {
     }
 
     processResults(results) {
-        function copyArray(a) {
-            const result = [];
-            for (let x of a)
-                result.push(x);
-            return result;
-        }
-        results = copyArray(results);
+        super.processResults(results);
+        // Create copy since we don't want to sort the original array.
+        function copyArray(a) {const result = [];   
+        for (let x of a)     
+            result.push(x);  
+        return result;       
+    }                        
+                             
+        results = copyArray(results.slice());
 
         this.firstIterationTime = results[0];
         this.firstIterationScore = toScore(results[0]);
@@ -1275,6 +1313,7 @@ class WSLBenchmark extends Benchmark {
     }
 
     processResults(results) {
+        super.processResults(results);
         this.stdlibTime = results[0];
         this.stdlibScore = toScore(results[0]);
         this.mainRunTime = results[1];
@@ -1332,6 +1371,7 @@ class WasmLegacyBenchmark extends Benchmark {
     }
 
     processResults(results) {
+        super.processResults(results);
         this.startupTime = results[0];
         this.startupScore= toScore(results[0]);
         this.runTime = results[1];

From d8708b2c22f97b02f0384cbeb86a2119c6eff9cf Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Sun, 10 Aug 2025 13:33:11 +0200
Subject: [PATCH 02/11] clenup

---
 JetStream.css      |  4 ++--
 JetStreamDriver.js | 30 ++++++++++++++----------------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/JetStream.css b/JetStream.css
index 152a65f8..d9bdea9d 100644
--- a/JetStream.css
+++ b/JetStream.css
@@ -288,7 +288,7 @@ a.button {
     font-weight: 500;
 }
 
-#result-summary .plot {
+.benchmaark .plot, .benchmark .plot svg {
     display: inline-block;
     vertical-align: middle;
 }
@@ -423,7 +423,7 @@ a.button {
     font-weight: 400;
 }
 
-.plot circle {
+.plot svg circle {
     fill: var(--accent-color-primary);
     opacity: 0.8;
 }
diff --git a/JetStreamDriver.js b/JetStreamDriver.js
index 8656a24e..1e8ca290 100644
--- a/JetStreamDriver.js
+++ b/JetStreamDriver.js
@@ -349,7 +349,7 @@ class Driver {
                     `<div class="benchmark" id="benchmark-${benchmark.name}">
                     <h3 class="benchmark-name"><a href="in-depth.html#${benchmark.name}">${benchmark.name}</a></h3>
                     <h4 class="score" id="${overallScoreId}">___</h4>
-                    <svg class="plot" id="plot-${benchmark.name}"></svg>
+                    <h4 class="plot" id="plot-${benchmark.name}">___</h4>
                     <p>`;
                 for (let i = 0; i < scoreIds.length; i++) {
                     const scoreId = scoreIds[i];
@@ -1065,38 +1065,36 @@ class Benchmark {
         for (const [name, value] of scoreEntries)
             document.getElementById(this.scoreIdentifier(name)).innerHTML = uiFriendlyScore(value);
 
-        this.renderScatterplot();
+        this.renderScatterPlot();
     }
 
-    renderScatterplot() {
-        const svg = document.getElementById(`plot-${this.name}`);
-        if (!svg || !this.results || this.results.length === 0)
+    renderScatterPlot() {
+        const plotContainer = document.getElementById(`plot-${this.name}`);
+        if (!plotContainer || !this.results || this.results.length === 0)
             return;
 
         const scoreElement = document.getElementById(this.scoreIdentifier("Score"));
-        svg.style.width = scoreElement.offsetWidth + 'px';
-        svg.style.height = scoreElement.offsetHeight + 'px';
-
         const width = scoreElement.offsetWidth;
         const height = scoreElement.offsetHeight;
-        const padding = 5;
+        plotContainer.style.width = `${width}px`;
+        plotContainer.style.height = `${height}px`;
 
+        const padding = 5;
         const maxResult = Math.max(...this.results);
         const minResult = Math.min(...this.results);
 
         const xRatio = (width - 2 * padding) / (this.results.length - 1 || 1);
         const yRatio = (height - 2 * padding) / (maxResult - minResult || 1);
 
-        svg.innerHTML = '';
-
+        let circlesSVG = "";
         for (let i = 0; i < this.results.length; i++) {
             const result = this.results[i];
-            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            circle.setAttribute('cx', padding + i * xRatio);
-            circle.setAttribute('cy', height - padding - (result - minResult) * yRatio);
-            circle.setAttribute('r', 1.5);
-            svg.appendChild(circle);
+            const cx = padding + i * xRatio;
+            const cy = height - padding - (result - minResult) * yRatio;
+            circlesSVG += `<circle cx="${cx}" cy="${cy}" r="1.5"></circle>`;
         }
+
+        plotContainer.innerHTML = `<svg>${circlesSVG}</svg>`;
     }
 
     updateConsoleAfterRun(scoreEntries) {

From 11144b28c2542df325a98ef2b08aea559166d568 Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Sun, 10 Aug 2025 13:35:12 +0200
Subject: [PATCH 03/11] cleanup

---
 JetStream.css | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/JetStream.css b/JetStream.css
index d9bdea9d..ee8485b3 100644
--- a/JetStream.css
+++ b/JetStream.css
@@ -24,8 +24,8 @@
 */
 
 :root {
-    --accent-color-primary: #34AADC;
-    --accent-color-secondary: #86D9FF;
+    --color-primary: #34AADC;
+    --color-secondary: #86D9FF;
     --text-color-inverse: white;
     --text-color-primary: black;
     --text-color-secondary: #555555;
@@ -60,7 +60,7 @@ body {
 }
 
 ::selection {
-    background-color: var(--accent-color-primary);
+    background-color: var(--color-primary);
     color: var(--text-color-inverse);
 }
 
@@ -187,7 +187,7 @@ dd {
 
 a:link,
 a:visited {
-    color: var(--accent-color-primary);
+    color: var(--color-primary);
 }
 
 a:hover,
@@ -284,7 +284,7 @@ a.button {
     font-weight: bold;
     font-size: 4rem;
     line-height: 1;
-    color: var(--accent-color-primary);
+    color: var(--color-primary);
     font-weight: 500;
 }
 
@@ -329,8 +329,8 @@ a.button {
 }
 
 .benchmark-running h4, .benchmark-running .result, .benchmark-running label,  .benchmark-running .plot {
-    color: var(--accent-color-secondary);
-    background-color: var(--accent-color-secondary);
+    color: var(--color-secondary);
+    background-color: var(--color-secondary);
     background-image: none;
 }
 
@@ -364,7 +364,7 @@ a.button {
 .benchmark-running h3 {
     background-color: transparent;
     background-image: none;
-    color: var(--accent-color-primary);
+    color: var(--color-primary);
 }
 
 .benchmark-done h3 {
@@ -381,7 +381,7 @@ a.button {
 }
 
 .benchmark-done h3 a:hover {
-    color: var(--accent-color-primary);
+    color: var(--color-primary);
     text-decoration: underline;
 }
 
@@ -393,7 +393,7 @@ a.button {
 }
 
 .benchmark-done h4 {
-    color: var(--accent-color-primary);
+    color: var(--color-primary);
     background-color: none;
 }
 
@@ -424,7 +424,7 @@ a.button {
 }
 
 .plot svg circle {
-    fill: var(--accent-color-primary);
+    fill: var(--color-primary);
     opacity: 0.8;
 }
 

From 5893855a78bef9b944f919e1ce38f49b86489620 Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Sun, 10 Aug 2025 13:47:24 +0200
Subject: [PATCH 04/11] cleanup

---
 JetStreamDriver.js | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/JetStreamDriver.js b/JetStreamDriver.js
index 1e8ca290..d07deb89 100644
--- a/JetStreamDriver.js
+++ b/JetStreamDriver.js
@@ -746,7 +746,8 @@ class Benchmark {
     }
 
     processResults(results) {
-        this.results = results;
+        this.results = Array.from(results);
+        return this.results;
     }
 
     get score() {
@@ -1136,15 +1137,7 @@ class DefaultBenchmark extends Benchmark {
     }
 
     processResults(results) {
-        super.processResults(results);
-        // Create copy since we don't want to sort the original array.
-        function copyArray(a) {const result = [];   
-        for (let x of a)     
-            result.push(x);  
-        return result;       
-    }                        
-                             
-        results = copyArray(results.slice());
+        results = super.processResults(results)
 
         this.firstIterationTime = results[0];
         this.firstIterationScore = toScore(results[0]);
@@ -1311,7 +1304,7 @@ class WSLBenchmark extends Benchmark {
     }
 
     processResults(results) {
-        super.processResults(results);
+        results = super.processResults(results);
         this.stdlibTime = results[0];
         this.stdlibScore = toScore(results[0]);
         this.mainRunTime = results[1];
@@ -1369,7 +1362,7 @@ class WasmLegacyBenchmark extends Benchmark {
     }
 
     processResults(results) {
-        super.processResults(results);
+        results = super.processResults(results);
         this.startupTime = results[0];
         this.startupScore= toScore(results[0]);
         this.runTime = results[1];

From 8f45cdd6a99f2ef0bb7153ae864bf017ee3dd929 Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Sun, 10 Aug 2025 17:22:59 +0200
Subject: [PATCH 05/11] fix result details printin

---
 JetStream.css      |  7 +++++++
 JetStreamDriver.js | 22 ++++++++++++++--------
 index.html         |  4 +++-
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/JetStream.css b/JetStream.css
index ee8485b3..d5282610 100644
--- a/JetStream.css
+++ b/JetStream.css
@@ -410,6 +410,13 @@ a.button {
     font-weight: bold;
 }
 
+#result-summary .benchmark {
+    text-align: center;
+    max-width: 100%;
+    margin: 0;
+    margin-left: 1.6rem;
+}
+
 .benchmark-done .result {
     color: var(--benchmark-done-result-color);
 }
diff --git a/JetStreamDriver.js b/JetStreamDriver.js
index d07deb89..76f19065 100644
--- a/JetStreamDriver.js
+++ b/JetStreamDriver.js
@@ -95,9 +95,16 @@ function displayCategoryScores() {
     if (!categoryScores)
         return;
 
+    let scoreDetails = `<div class="benchmark benchmark-done">`;
+    for (let [category, scores] of categoryScores) {
+        scoreDetails += `<span class="result">
+                <span>${uiFriendlyScore(geomeanScore(scores))}</span>
+                <label> ${category}</label>
+            </span>`;
+    }
+    scoreDetails += "</div>";
     let summaryElement = document.getElementById("result-summary");
-    for (let [category, scores] of categoryScores)
-        summaryElement.innerHTML += `<p> ${category}: ${uiFriendlyScore(geomeanScore(scores))}</p>`
+    summaryElement.innerHTML += scoreDetails;
 
     categoryScores = null;
 }
@@ -127,7 +134,6 @@ if (isInBrowser) {
         const key = keyboardEvent.key;
         if (key === "d" || key === "D") {
             showScoreDetails = true;
-
             displayCategoryScores();
         }
     };
@@ -237,10 +243,8 @@ class Driver {
 
     async start() {
         let statusElement = false;
-        let summaryElement = false;
         if (isInBrowser) {
             statusElement = document.getElementById("status");
-            summaryElement = document.getElementById("result-summary");
             statusElement.innerHTML = `<label>Running...</label>`;
         } else if (!dumpJSONResults)
             console.log("Starting JetStream3");
@@ -308,8 +312,10 @@ class Driver {
         assert(totalScore > 0, `Invalid total score: ${totalScore}`);
 
         if (isInBrowser) {
+            const summaryElement = document.getElementById("result-summary");
             summaryElement.classList.add("done");
-            summaryElement.innerHTML = `<div class="score">${uiFriendlyScore(totalScore)}</div><label>Score</label>`;
+            summaryElement.innerHTML = `<div class="score">${uiFriendlyScore(totalScore)}</div>
+                    <label>Score</label>`;
             summaryElement.onclick = displayCategoryScores;
             if (showScoreDetails)
                 displayCategoryScores();
@@ -318,7 +324,6 @@ class Driver {
             console.log("\n");
             for (let [category, scores] of categoryScores)
                 console.log(`${category}: ${uiFriendlyScore(geomeanScore(scores))}`);
-
             console.log("\nTotal Score: ", uiFriendlyScore(totalScore), "\n");
         }
 
@@ -1092,7 +1097,8 @@ class Benchmark {
             const result = this.results[i];
             const cx = padding + i * xRatio;
             const cy = height - padding - (result - minResult) * yRatio;
-            circlesSVG += `<circle cx="${cx}" cy="${cy}" r="1.5"></circle>`;
+            const title = `Iteration ${i + 1}: ${uiFriendlyDuration(result)}`;
+            circlesSVG += `<circle cx="${cx}" cy="${cy}" r="2"><title>${title}</title></circle>`;
         }
 
         plotContainer.innerHTML = `<svg>${circlesSVG}</svg>`;
diff --git a/index.html b/index.html
index 98992b58..5ad80f2b 100644
--- a/index.html
+++ b/index.html
@@ -79,7 +79,9 @@ <h1 class="logo">
     <p class="summary">JetStream 3 is a JavaScript and WebAssembly benchmark suite focused on the most advanced web applications. It rewards browsers that start up quickly, execute code quickly, and run smoothly. For more information, read the <a href="in-depth.html">in-depth analysis</a>. Bigger scores are better.</p>
     <p class="summary" id="mode-description"></p>
 
-    <div id="result-summary"></div>
+    <div id="result-summary">
+
+    </div>
     <div id="status" class="loading">Loading Benchmark...</div>
 
     <div id="results"></div>

From 4fac6a0b578bb4b3956634935b3dc2e387fbb1be Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Mon, 11 Aug 2025 09:52:26 +0200
Subject: [PATCH 06/11] cleanup

---
 JetStream.css      |  2 +-
 JetStreamDriver.js | 10 ++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/JetStream.css b/JetStream.css
index d5282610..b749c757 100644
--- a/JetStream.css
+++ b/JetStream.css
@@ -41,7 +41,7 @@
     --benchmark-done-result-color: #4A4A4A;
 }
 
-html {
+html,  svg text {
     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
     font-size: 62.5%;
     font-synthesis: none;
diff --git a/JetStreamDriver.js b/JetStreamDriver.js
index 76f19065..8312eee7 100644
--- a/JetStreamDriver.js
+++ b/JetStreamDriver.js
@@ -184,7 +184,7 @@ function updateUI() {
 function uiFriendlyNumber(num) {
     if (Number.isInteger(num))
         return num;
-    return num.toFixed(3);
+    return num.toFixed(2);
 }
 
 function uiFriendlyScore(num) {
@@ -1082,8 +1082,6 @@ class Benchmark {
         const scoreElement = document.getElementById(this.scoreIdentifier("Score"));
         const width = scoreElement.offsetWidth;
         const height = scoreElement.offsetHeight;
-        plotContainer.style.width = `${width}px`;
-        plotContainer.style.height = `${height}px`;
 
         const padding = 5;
         const maxResult = Math.max(...this.results);
@@ -1091,6 +1089,7 @@ class Benchmark {
 
         const xRatio = (width - 2 * padding) / (this.results.length - 1 || 1);
         const yRatio = (height - 2 * padding) / (maxResult - minResult || 1);
+        const radius = Math.max(1.5, Math.min(2.5, 10 - (this.iterations / 10)));
 
         let circlesSVG = "";
         for (let i = 0; i < this.results.length; i++) {
@@ -1098,10 +1097,9 @@ class Benchmark {
             const cx = padding + i * xRatio;
             const cy = height - padding - (result - minResult) * yRatio;
             const title = `Iteration ${i + 1}: ${uiFriendlyDuration(result)}`;
-            circlesSVG += `<circle cx="${cx}" cy="${cy}" r="2"><title>${title}</title></circle>`;
+            circlesSVG += `<circle cx="${cx}" cy="${cy}" r="${radius}"><title>${title}</title></circle>`;
         }
-
-        plotContainer.innerHTML = `<svg>${circlesSVG}</svg>`;
+        plotContainer.innerHTML = `<svg width="${width}px" height="${height}px">${circlesSVG}</svg>`;
     }
 
     updateConsoleAfterRun(scoreEntries) {

From d2b36a991e9b5ca5a4c2661ab38def82e565099b Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Mon, 11 Aug 2025 09:56:00 +0200
Subject: [PATCH 07/11] revert index.html changes

---
 index.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 5ad80f2b..98992b58 100644
--- a/index.html
+++ b/index.html
@@ -79,9 +79,7 @@ <h1 class="logo">
     <p class="summary">JetStream 3 is a JavaScript and WebAssembly benchmark suite focused on the most advanced web applications. It rewards browsers that start up quickly, execute code quickly, and run smoothly. For more information, read the <a href="in-depth.html">in-depth analysis</a>. Bigger scores are better.</p>
     <p class="summary" id="mode-description"></p>
 
-    <div id="result-summary">
-
-    </div>
+    <div id="result-summary"></div>
     <div id="status" class="loading">Loading Benchmark...</div>
 
     <div id="results"></div>

From 28ca102def8719616374c44b566a01fa3da90870 Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Mon, 11 Aug 2025 09:57:09 +0200
Subject: [PATCH 08/11] clean up CSS changes

---
 JetStream.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/JetStream.css b/JetStream.css
index b749c757..d15ed51e 100644
--- a/JetStream.css
+++ b/JetStream.css
@@ -4,10 +4,10 @@
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
+ * 1. Redistributions OF source code must retain the above copyright
+ *    notice, this list OF conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
+ *    notice, this list OF conditions and the following disclaimer in the
  *    documentation and/or other materials provided with the distribution.
  *
  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
@@ -19,8 +19,8 @@
  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT of THE USE of THIS SOFTWARE, EVEN IF ADVISED of
- * THE POSSIBILITY of SUCH DAMAGE.
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
 */
 
 :root {

From 53b7639c39cc0912382b7311467033cb772a7181 Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Mon, 11 Aug 2025 15:12:49 +0200
Subject: [PATCH 09/11] fix typos

---
 JetStream.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/JetStream.css b/JetStream.css
index d15ed51e..b8da695a 100644
--- a/JetStream.css
+++ b/JetStream.css
@@ -4,10 +4,10 @@
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
- * 1. Redistributions OF source code must retain the above copyright
- *    notice, this list OF conditions and the following disclaimer.
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list OF conditions and the following disclaimer in the
+ *    notice, this list of conditions and the following disclaimer in the
  *    documentation and/or other materials provided with the distribution.
  *
  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''

From 06eae8cf8dc521912b8c671f0baf16193f26e4f4 Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Mon, 11 Aug 2025 15:19:44 +0200
Subject: [PATCH 10/11] update placeholder text

---
 JetStreamDriver.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/JetStreamDriver.js b/JetStreamDriver.js
index 8312eee7..7bfa1e2a 100644
--- a/JetStreamDriver.js
+++ b/JetStreamDriver.js
@@ -99,7 +99,7 @@ function displayCategoryScores() {
     for (let [category, scores] of categoryScores) {
         scoreDetails += `<span class="result">
                 <span>${uiFriendlyScore(geomeanScore(scores))}</span>
-                <label> ${category}</label>
+                <label>${category}</label>
             </span>`;
     }
     scoreDetails += "</div>";
@@ -353,13 +353,13 @@ class Driver {
                 text +=
                     `<div class="benchmark" id="benchmark-${benchmark.name}">
                     <h3 class="benchmark-name"><a href="in-depth.html#${benchmark.name}">${benchmark.name}</a></h3>
-                    <h4 class="score" id="${overallScoreId}">___</h4>
-                    <h4 class="plot" id="plot-${benchmark.name}">___</h4>
+                    <h4 class="score" id="${overallScoreId}">&nbsp;</h4>
+                    <h4 class="plot" id="plot-${benchmark.name}">&nbsp;</h4>
                     <p>`;
                 for (let i = 0; i < scoreIds.length; i++) {
                     const scoreId = scoreIds[i];
                     const label = description[i];
-                    text += `<span class="result"><span id="${scoreId}">___</span><label>${label}</label></span>`
+                    text += `<span class="result"><span id="${scoreId}">&nbsp;</span><label>${label}</label></span>`
                 }
                 text += `</p></div>`;
             }

From e73431409135327f853ec7e0923d81745324560a Mon Sep 17 00:00:00 2001
From: Camillo Bruni <cbruni@chromium.org>
Date: Mon, 11 Aug 2025 15:49:00 +0200
Subject: [PATCH 11/11] fix CSS rules

---
 JetStream.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/JetStream.css b/JetStream.css
index b8da695a..7bd22dd3 100644
--- a/JetStream.css
+++ b/JetStream.css
@@ -288,7 +288,7 @@ a.button {
     font-weight: 500;
 }
 
-.benchmaark .plot, .benchmark .plot svg {
+.benchmark .plot svg {
     display: inline-block;
     vertical-align: middle;
 }