Show options for JS engines (#165)

- Hide V8 and SM by default

Author: jasonwilliams

src/components/benchmarks/index.tsx

@@ -25,34 +25,51 @@ ChartJS.register(
   Tooltip,
   Legend,
   Colors,
-  BarElement,
+  BarElement
 );
 
-export function BenchmarkGraphs() {
+interface BenchmarkGraphsProps {
+  selectedEngines: string[];
+}
+
+const ChartOptions = {
+  plugins: {
+    colors: {
+      forceOverride: true,
+    },
+  },
+};
+
+export const BenchmarkGraphs: React.FC<BenchmarkGraphsProps> = ({
+  selectedEngines,
+}) => {
+  // Control the state of which engines are displayed using a Set
+
   const [data, setData] = React.useState([]);
   const colorMode = useColorMode();
   ChartJS.defaults.color = colorMode.colorMode === "light" ? "#666" : "white";
 
   React.useEffect(() => {
     Promise.all([
-      buildChartFromBenchmark("Crypto"),
-      buildChartFromBenchmark("DeltaBlue"),
-      buildChartFromBenchmark("EarleyBoyer"),
-      buildChartFromBenchmark("NavierStokes"),
-      buildChartFromBenchmark("RayTrace"),
-      buildChartFromBenchmark("RegExp"),
-      buildChartFromBenchmark("Richards"),
-      buildChartFromBenchmark("Splay"),
-      buildChartFromBenchmark("score"),
+      buildChartFromBenchmark("Crypto", selectedEngines),
+      buildChartFromBenchmark("DeltaBlue", selectedEngines),
+      buildChartFromBenchmark("EarleyBoyer", selectedEngines),
+      buildChartFromBenchmark("NavierStokes", selectedEngines),
+      buildChartFromBenchmark("RayTrace", selectedEngines),
+      buildChartFromBenchmark("RegExp", selectedEngines),
+      buildChartFromBenchmark("Richards", selectedEngines),
+      buildChartFromBenchmark("Splay", selectedEngines),
+      buildChartFromBenchmark("score", selectedEngines),
     ]).then((charts) => setData(charts));
-  }, [colorMode.colorMode]);
+  }, [selectedEngines]);
 
   return data && data.map((chart) => chart);
-}
+};
 
-const buildChartFromBenchmark = async (name: string) => {
+const buildChartFromBenchmark = async (name: string, engines: string[]) => {
   const data = await fetchData(
     `https://raw.githubusercontent.com/boa-dev/data/main/bench/results/${name}.json`,
+    engines
   );
 
   const barData = getBarChartData(data);
@@ -64,50 +81,33 @@ const buildChartFromBenchmark = async (name: string) => {
       </div>
       <div className={styles["cards-wrap"]}>
         <div className={`card ${styles["benchmark-card"]}`}>
-          <Line data={data}></Line>
+          <Line data={data} options={ChartOptions}></Line>
         </div>
         <div className={`card ${styles["benchmark-card"]}`}>
-          <Bar data={barData}></Bar>
+          <Bar data={barData} options={ChartOptions}></Bar>
         </div>
       </div>
     </div>
   );
 };
 
-const fetchData = async (url: string) => {
+const fetchData = async (url: string, engines: string[]) => {
   const response = await fetch(url);
   const data = await response.json();
+  // Add the dataset if the engine is enabled
   return {
     labels: data.labels.map((epoch: number) =>
-      new Date(epoch).toLocaleDateString(),
+      new Date(epoch).toLocaleDateString()
     ),
-    datasets: [
-      {
-        label: "boa",
-        data: data.results["boa"],
-        fill: false,
-      },
-      {
-        label: "v8-jitless",
-        data: data.results["v8-jitless"],
-        fill: false,
-      },
-      {
-        label: "libjs",
-        data: data.results["libjs"],
-        fill: false,
-      },
-      {
-        label: "duktape",
-        data: data.results["duktape"],
-        fill: false,
-      },
-      {
-        label: "quickjs",
-        data: data.results["quickjs"],
-        fill: false,
-      },
-    ],
+    datasets: Object.keys(data.results)
+      .filter((engine) => engines.includes(engine))
+      .map((engine) => {
+        return {
+          label: engine,
+          data: data.results[engine],
+          fill: false,
+        };
+      }),
   };
 };
 

src/pages/benchmarks/index.tsx

@@ -2,9 +2,34 @@ import Link from "@docusaurus/Link";
 import { BenchmarkGraphs } from "@site/src/components/benchmarks";
 import Heading from "@theme/Heading";
 import Layout from "@theme/Layout";
+import { useState } from "react";
 import styles from "./styles.module.css";
 
+const engines = [
+  "boa",
+  "v8-jitless",
+  "sm-jitless",
+  "libjs",
+  "duktape",
+  "quickjs",
+];
+
 export default function Benchmarks() {
+  const [selectedEngines, setSelectedEngines] = useState<string[]>([
+    "boa",
+    "libjs",
+    "duktape",
+    "quickjs",
+  ]);
+
+  const handleCheckboxChange = (engine: string) => {
+    if (selectedEngines.includes(engine)) {
+      setSelectedEngines(selectedEngines.filter((e) => e !== engine));
+    } else {
+      setSelectedEngines([...selectedEngines, engine]);
+    }
+  };
+
   return (
     <Layout title="Benchmarks" description="Boa Benchmarks Page">
       <div className={styles.container}>
@@ -19,7 +44,22 @@ export default function Benchmarks() {
           actions.
         </p>
         <p>The higher the score the better.</p>
-        <BenchmarkGraphs />
+        <div className={styles.benchmarkControls}>
+          {engines.map((engine) => (
+            <div key={engine} className={styles.benchmarkLabelWrap}>
+              <label>
+                <input
+                  type="checkbox"
+                  value={engine}
+                  checked={selectedEngines.includes(engine)}
+                  onChange={() => handleCheckboxChange(engine)}
+                />
+                {engine}
+              </label>
+            </div>
+          ))}
+        </div>
+        <BenchmarkGraphs selectedEngines={selectedEngines} />
       </div>
     </Layout>
   );

src/pages/benchmarks/styles.module.css

@@ -2,3 +2,12 @@
   width: 90vw;
   align-self: center;
 }
+
+.benchmarkControls {
+  display: flex;
+  margin-bottom: 1rem;
+}
+
+.benchmarkLabelWrap {
+  margin-right: 1rem;
+}