Skip to content

Commit fc241e1

Browse files
camillobrunicamillobruni
authored
Auto-add tags to in-depth.html (#279)
Use the benchmark definitions from JetStreamDriver.js to add tags to each workload title. - Add tags - Add links to run workload matching a tag - Add links to run a single workload - Improve in-depth.html css a bit to use less spacing around headers and the first definition
1 parent 00e5d5b commit fc241e1

File tree

2 files changed

+127
-25
lines changed

2 files changed

+127
-25
lines changed

‎in-depth.html‎

Lines changed: 81 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,11 @@
2727

2828
<head>
2929
<meta charset="utf-8" />
30-
3130
<title>JetStream 3 In-Depth Analysis</title>
32-
3331
<link rel="stylesheet" href="resources/JetStream.css">
34-
3532
</head>
3633

37-
<body class="overflow-scroll">
34+
<body class="in-depth overflow-scroll">
3835
<h1 class="logo">
3936
<div id="jetstreams">
4037
<a href="index.html" class="logo-image">JetStream 3</a>
@@ -142,9 +139,18 @@ <h3>
142139
</h3>
143140

144141
<p>
142+
<<<<<<< HEAD
143+
The <span style="color: var(--text-color-very-subtle);">greyed-out workloads</span> are not run by default but can be manually enabled on the command-line or via
144+
the <code>?test=</code> URL parameter.
145+
You can also click on the workload name to run that one individually, or on tags to run all workloads with a certain tag.
146+
||||||| 6588e89
147+
The <span style="color: var(--text-color-very-subtle);">greyed-out workloads</span> are not run by default but can be manually enabled on the command-line or via
148+
the <i>testList</i> URL parameter.
149+
=======
145150
The <span style="color: var(--text-color-very-subtle);">greyed-out workloads</span> are not run by
146151
default but can be manually enabled on the command-line or via
147152
the <i>testList</i> URL parameter.
153+
>>>>>>> main
148154
</p>
149155

150156
<dl id="workload-details">
@@ -243,9 +249,9 @@ <h3>
243249
href="https://v8.github.io/web-tooling-benchmark/">Web Tooling Benchmark</a>,.
244250
Source code: <a href="web-tooling-benchmark/src/babylon.mjs">babylon.mjs</a>
245251
</dd>
246-
<dt id="babylonjs-scene-es5" class="non-default">babylonjs-scene-es5</dt>
252+
<dt id="babylonjs-scene-es5">babylonjs-scene-es5</dt>
247253
<dt id="babylonjs-scene-es6">babylonjs-scene-es6</dt>
248-
<dt id="babylonjs-startup-es5" class="non-default">babylonjs-startup-es5</dt>
254+
<dt id="babylonjs-startup-es5">babylonjs-startup-es5</dt>
249255
<dt id="babylonjs-startup-es6">babylonjs-startup-es6</dt>
250256
<dd>
251257
These benchmarks test the <a href="https://www.babylonjs.com/">Babylon.js</a> 3D engine.
@@ -265,14 +271,14 @@ <h3>
265271
This benchmark was previously published in <a href="https://browserbench.org/ARES-6/">ARES-6</a>.
266272
Source code: <a href="ARES-6/Basic">Basic</a>
267273
</dd>
268-
<dt id="bigint-bigdenary" class="non-default">bigint-bigdenary</dt>
274+
<dt id="bigint-bigdenary">bigint-bigdenary</dt>
269275
<dd>
270276
<a href="https://github.com/uzyn/bigdenary">BigDenary</a>, an arbitrary-precision
271277
decimal arithmetic, implemented in JavaScript by U-Zyn Chua.
272278
Tests arithmetic operations on BigInt.
273279
Source code: <a href="bigint/bigdenary-bundle.js">bigdenary-bundle.js</a>
274280
</dd>
275-
<dt id="bigint-noble-bls12-381" class="non-default">bigint-noble-bls12-381</dt>
281+
<dt id="bigint-noble-bls12-381">bigint-noble-bls12-381</dt>
276282
<dd>
277283
<a href="https://hackmd.io/@benjaminion/bls12-381">BLS12-381</a>, pairing-friendly
278284
Barreto-Lynn-Scott elliptic curve construction,
@@ -288,15 +294,15 @@ <h3>
288294
by Paul Miller. Tests typed arrays and arithmetic operations on BigInt.
289295
Source code: <a href="bigint/noble-ed25519-bundle.js">noble-ed25519-bundle.js</a>
290296
</dd>
291-
<dt id="bigint-noble-secp256k1" class="non-default">bigint-noble-secp256k1</dt>
297+
<dt id="bigint-noble-secp256k1">bigint-noble-secp256k1</dt>
292298
<dd>
293299
<a href="https://www.secg.org/sec2-v2.pdf">secp256k1</a>, an elliptic curve that could
294300
be used for asymmetric encryption, ECDH key agreement protocol and signature schemes,
295301
<a href="https://github.com/paulmillr/noble-secp256k1">implemented in JavaScript</a>
296302
by Paul Miller. Tests typed arrays and arithmetic operations on BigInt.
297303
Source code: <a href="bigint/noble-secp256k1-bundle.js">noble-secp256k1-bundle.js</a>
298304
</dd>
299-
<dt id="bigint-paillier" class="non-default">bigint-paillier</dt>
305+
<dt id="bigint-paillier">bigint-paillier</dt>
300306
<dd>
301307
<a href="https://en.wikipedia.org/wiki/Paillier_cryptosystem">Paillier cryptosystem</a>,
302308
a probabilistic asymmetric algorithm for public key cryptography,
@@ -341,7 +347,7 @@ <h3>
341347
A similar version of this benchmark was previously published in Octane version 2.
342348
Source code: <a href="Octane/crypto.js">crypto.js</a>
343349
</dd>
344-
<dt id="Dart-flute-complex-wasm" class="non-default">Dart-flute-complex-wasm</dt>
350+
<dt id="Dart-flute-complex-wasm">Dart-flute-complex-wasm</dt>
345351
<dt id="Dart-flute-todomvc-wasm">Dart-flute-todomvc-wasm</dt>
346352
<dd>
347353
Two Dart benchmark programs compiled to WasmGC that are using a simplified version of the Flutter UI
@@ -457,7 +463,7 @@ <h3>
457463
Source code: <a href="Octane/gbemu-part1.js">gbemu-part1.js</a>, <a
458464
href="Octane/gbemu-part2.js">gbemu-part2.js</a>
459465
</dd>
460-
<dt id="gcc-loops-wasm" class="non-default">gcc-loops-wasm</dt>
466+
<dt id="gcc-loops-wasm">gcc-loops-wasm</dt>
461467
<dd>
462468
Example loops used to tune the GCC and LLVM vectorizers, compiled to WebAssembly with
463469
<a href="https://emscripten.org">Emscripten</a>. The original C++ version of this benchmark was
@@ -473,15 +479,15 @@ <h3>
473479
of this benchmark was originally published as part of the WebKit test suite.
474480
Source code: <a href="simple/hash-map.js">hash-map.js</a>
475481
</dd>
476-
<dt id="HashSet-wasm" class="non-default">HashSet-wasm</dt>
482+
<dt id="HashSet-wasm">HashSet-wasm</dt>
477483
<dd>
478484
A WebAssembly benchmark replaying a set of hash table operations performed in WebKit when loading
479485
a web page. This benchmark was compiled from C++ to WebAssembly using <a
480486
href="https://emscripten.org">Emscripten</a>.
481487
Source code: <a href="wasm/HashSet/HashSet.cpp">HashSet.cpp</a>, <a
482488
href="wasm/HashSet/benchmark.js">HashSet.js</a>
483489
</dd>
484-
<dt id="intl" class="non-default">intl</dt>
490+
<dt id="intl">intl</dt>
485491
<dd>
486492
This benchmark tests the performance of the <a
487493
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl">Intl
@@ -545,7 +551,7 @@ <h3>
545551
generators.
546552
Source code: <a href="generators/lazy-collections.js">lazy-collections.js</a>
547553
</dd>
548-
<dt id="lebab-wtb" class="non-default">lebab-wtb</dt>
554+
<dt id="lebab-wtb">lebab-wtb</dt>
549555
<dd>
550556
<a href="https://github.com/lebab/lebab">Lebab</a> transpiles ES5 code into ES6/ES7.
551557
This benchmark runs Lebab on test JavaScript programs.
@@ -625,6 +631,13 @@ <h3>
625631
Source code: <a href="web-tooling-benchmark/src/postcss.mjs">postcss.mjs</a>
626632
</dd>
627633
<dt id="prettier-wtb">prettier-wtb</dt>
634+
<<<<<<< HEAD
635+
<dd>TODO</dd>
636+
<dt id="prismjs-startup-es5">prismjs-startup-es5</dt>
637+
||||||| 6588e89
638+
<dd>TODO</dd>
639+
<dt id="prismjs-startup-es5" class="non-default">prismjs-startup-es5</dt>
640+
=======
628641
<dd>
629642
This benchmark runs the <a href="https://prettier.io/">Prettier</a> code formatter on various
630643
JavaScript
@@ -634,6 +647,7 @@ <h3>
634647
Source code: <a href="web-tooling-benchmark/src/prettier.mjs">prettier.mjs</a>
635648
</dd>
636649
<dt id="prismjs-startup-es5" class="non-default">prismjs-startup-es5</dt>
650+
>>>>>>> main
637651
<dt id="prismjs-startup-es6">prismjs-startup-es6</dt>
638652
<dd>
639653
These benchmarks measure the performance of the <a href="https://prismjs.com/">PrismJS</a> syntax
@@ -657,7 +671,7 @@ <h3>
657671
Tests get / set Proxy traps, as well as various Array methods.
658672
Source code: <a href="proxy/vue-benchmark.js">vue-benchmark.js</a>
659673
</dd>
660-
<dt id="quicksort-wasm" class="non-default">quicksort-wasm</dt>
674+
<dt id="quicksort-wasm">quicksort-wasm</dt>
661675
<dd>
662676
Quicksort benchmark, compiled to WebAssembly with <a href="https://emscripten.org">Emscripten</a>.
663677
The original C version of this benchmark was previously published in the LLVM test suite.
@@ -884,8 +898,8 @@ <h3>
884898
order of existing files.
885899
Source code: <a href="generators/sync-file-system.js">sync-file-system.js</a>
886900
</dd>
887-
<dt id="tfjs-wasm" class="non-default">tfjs-wasm</dt>
888-
<dt id="tfjs-wasm-simd" class="non-default">tfjs-wasm-simd</dt>
901+
<dt id="tfjs-wasm">tfjs-wasm</dt>
902+
<dt id="tfjs-wasm-simd">tfjs-wasm-simd</dt>
889903
<dd>
890904
Tests <a href="https://github.com/tensorflow/tfjs">Tensorflow.js</a> pre-trained machine learning
891905
models supported by <a
@@ -907,7 +921,7 @@ <h3>
907921
Source code: in the <a href="threejs/">threejs/</a> directory.
908922
</dd>
909923
<dt id="transformersjs-bert-wasm">transformersjs-bert-wasm</dt>
910-
<dt id="transformersjs-whisper-wasm" class="non-default">transformersjs-whisper-wasm</dt>
924+
<dt id="transformersjs-whisper-wasm">transformersjs-whisper-wasm</dt>
911925
<dd>
912926
Two machine learning tasks using the <a
913927
href="https://huggingface.co/docs/transformers.js/en/index">Transformers.js</a> library, which
@@ -938,13 +952,21 @@ <h3>
938952
A similar version of this benchmark was previously published in Octane version 2.
939953
Source code: <a href="Octane/typescript.js">typescript.js</a>
940954
</dd>
955+
<<<<<<< HEAD
956+
<dt id="typescript-octane">typescript-octane</dt>
957+
<dd>TODO</dd>
958+
||||||| 6588e89
959+
<dt id="typescript-octane" class="non-default">typescript-octane</dt>
960+
<dd>TODO</dd>
961+
=======
941962
<dt id="typescript-octane" class="non-default">typescript-octane</dt>
942963
<dd>
943964
The original <a href="https://developers.google.com/octane/">Octane</a> version of the TypeScript
944965
benchmark. It measures the time it takes the TypeScript compiler to compile a large input file,
945966
stressing the performance of a large-scale JavaScript application with complex data structures.
946967
Source code: <a href="Octane/typescript.js">typescript.js</a>
947968
</dd>
969+
>>>>>>> main
948970
<dt id="UniPoker">UniPoker</dt>
949971
<dd>
950972
UniPoker is a 5 card stud poker simulation using the Unicode playing card code points,
@@ -987,8 +1009,45 @@ <h3>
9871009

9881010
<p><a href="index.html" class="button">&larr; Return to Tests</a></p>
9891011
</article>
990-
9911012
</main>
992-
</body>
9931013

994-
</html>
1014+
<script>
1015+
const isInBrowser = true;
1016+
</script>
1017+
<script src="utils/params.js"></script>
1018+
<script src="JetStreamDriver.js"></script>
1019+
<script>
1020+
(function () {
1021+
for (const benchmark of BENCHMARKS) {
1022+
let dt = document.getElementById(benchmark.name);
1023+
if (!dt) {
1024+
continue;
1025+
}
1026+
1027+
if (benchmark.tags.has("disabled")) {
1028+
dt.classList.add("non-default");
1029+
}
1030+
1031+
const nameLink = document.createElement("a");
1032+
nameLink.href = `index.html?test=${benchmark.name}`;
1033+
nameLink.className = "workload-link";
1034+
nameLink.textContent = dt.textContent;
1035+
dt.textContent = "";
1036+
dt.appendChild(nameLink);
1037+
1038+
const tags = Array.from(benchmark.tags).sort();
1039+
for (const tag of tags) {
1040+
if (tag === "all" || tag === "default") {
1041+
continue;
1042+
}
1043+
const link = document.createElement("a");
1044+
link.href = `index.html?tags=${tag}`;
1045+
link.textContent = tag;
1046+
link.className = "tag-link";
1047+
dt.appendChild(link);
1048+
}
1049+
}
1050+
})();
1051+
</script>
1052+
</body>
1053+
</html>

‎resources/JetStream.css‎

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -265,24 +265,67 @@ h6 {
265265
color: var(--text-color-tertiary);
266266
}
267267

268+
.in-depth h2,
269+
.in-depth h3,
270+
.in-depth dl {
271+
margin: 0;
272+
}
273+
274+
dl > dt:first-child {
275+
margin-top: 0;
276+
}
277+
268278
dt {
269-
margin-top: 10px;
279+
margin-top: 0.5rem;
270280
font-weight: bold;
271281
text-align: left;
272282
color: var(--text-color-secondary);
283+
line-height: 2rem;
284+
display: flex;
285+
align-items: center;
286+
flex-wrap: wrap;
287+
}
288+
289+
dt > a.workload-link {
290+
color: inherit;
291+
text-decoration: none;
292+
}
293+
294+
dt > a.workload-link:hover {
295+
color: var(--color-primary);
296+
}
297+
298+
.tag-link {
299+
display: inline-block;
300+
background-color: var(--color-secondary);
301+
color: var(--text-color-secondary) !important;
302+
padding: 0px 4px;
303+
margin-left: 6px;
304+
border-radius: 3px;
305+
font-size: 1.2rem;
306+
line-height: 1.8rem;
307+
font-weight: normal;
308+
text-decoration: none;
309+
}
310+
.tag-link::before {
311+
content: "#";
312+
}
313+
314+
.tag-link:hover {
315+
background-color: var(--color-primary);
273316
}
274317

275318
dt.non-default {
276319
color: var(--text-color-very-subtle);
277320
}
278321

279-
dt.non-default:after {
322+
dt.non-default > *:first-child:after {
280323
content: " (not run by default)";
281324
}
282325

283326
dd {
284327
text-align: left;
285-
padding: 10px 20px;
328+
padding: 0.5rem 0rem 1.5rem 2rem;
286329
margin: 0;
287330
color: var(--text-color-secondary);
288331
}

0 commit comments

Comments
 (0)