Feature/benchmark visualizer

docusaurus.config.js

@@ -39,7 +39,7 @@ module.exports = {
                     customCss: require.resolve("./src/custom.scss"),
                 },
                 pages: {
-                    include: ["index.tsx", "play/index.tsx"],
+                    include: ["index.tsx", "play/index.tsx", "benchviz/index.tsx"],
                 },
             },
         ],

package.json

@@ -4,17 +4,20 @@
         "start": "docusaurus start",
         "build": "docusaurus build",
         "lint": "npm run lint:prettier",
-        "lint:prettier": "prettier --check ."
+        "lint:prettier": "prettier --check .",
+        "fix:prettier": "prettier --write ."
     },
     "prettier": {
         "printWidth": 120,
         "trailingComma": "all"
     },
     "dependencies": {
+        "@types/d3": "^5.7.2",
         "@types/lz-string": "^1.3.34",
         "@types/react": "^16.9.35",
         "@types/react-dom": "^16.9.8",
         "@types/react-json-tree": "^0.6.11",
+        "d3": "^5.16.0",
         "@types/webpack-env": "^1.15.2",
         "clsx": "^1.1.1",
         "fengari-web": "^0.1.4",

src/pages/benchviz/Benchmark.tsx

@@ -0,0 +1,127 @@
+import * as d3 from "d3";
+import React, { useEffect, useRef } from "react";
+import * as zlib from "zlib";
+import { BenchmarkResult, MemoryBenchmarkCategory } from "./benchmark-types";
+import { joinOnProperty, JoinResult } from "./util";
+import { barComparisonGraph } from "./visualizations/bar-comparison-graph";
+import { positiveNegativeBarGraph } from "./visualizations/positive-negative-bar-graph";
+
+const garbageCreatedComparisonGraphWidth = 1000;
+const garbageCreatedComparisonGraphHeight = 300;
+
+const garbageCreatedChangeGraphWidth = 1000;
+const garbageCreatedChangeGraphHeight = 300;
+
+// Utility functions
+const formatBenchmarkName = (benchmarkName: string) => benchmarkName.replace(".lua", "").split("/").pop()!;
+const formatMemory = (value: number) => `${Math.round(value / 10) / 100} Mb`;
+
+const benchmarkGarbage = (bm: BenchmarkResult) => bm.categories[MemoryBenchmarkCategory.Garbage];
+const garbagePercentChange = (result: JoinResult<BenchmarkResult>) =>
+    (benchmarkGarbage(result.right!) - benchmarkGarbage(result.left!)) / benchmarkGarbage(result.left!);
+
+export default function Benchmark() {
+    let garbageCreatedChangeSvgRef = useRef<SVGSVGElement>(null!);
+    let garbageCreatedComparisonSvgRef = useRef<SVGSVGElement>(null!);
+
+    const benchmarkData = decodeBenchmarkData(window.location.search.split("?d=")[1]);
+    // Sort by percentage change of garbage created
+    const benchmarksSortedByPercentDifference = benchmarkData.sort(
+        (a, b) => garbagePercentChange(a) - garbagePercentChange(b),
+    );
+
+    // Populate graph with benchmark results
+    const benchmarkResultsTable = benchmarksSortedByPercentDifference.map((bm, i) => {
+        const change = garbagePercentChange(bm);
+        const rowColor = change === 0 ? "currentColor" : change > 0 ? "red" : "green";
+
+        return (
+            <tr key={i} style={{ color: rowColor }}>
+                <td>{bm.left!.benchmarkName}</td>
+                <td>{formatMemory(benchmarkGarbage(bm.left!))}</td>
+                <td>{formatMemory(benchmarkGarbage(bm.right!))}</td>
+                <td>{change}</td>
+            </tr>
+        );
+    });
+
+    // Comparison data master garbage created vs commit garbate created (PERCENTAGE CHANGE)
+    const generatedGarbageChangeData = benchmarksSortedByPercentDifference.map((bm) => {
+        const oldValue = bm.left!.categories[MemoryBenchmarkCategory.Garbage]!;
+        const newValue = bm.right!.categories[MemoryBenchmarkCategory.Garbage]!;
+
+        return {
+            name: formatBenchmarkName(bm.left!.benchmarkName || bm.right!.benchmarkName!),
+            value: (100 * (newValue - oldValue)) / oldValue,
+        };
+    });
+
+    // Comparison data master garbage created vs commit garbate created (ABSOLUTE)
+    const generatedGarbageData = benchmarksSortedByPercentDifference.map((bm) => ({
+        name: formatBenchmarkName(bm.left!.benchmarkName || bm.right!.benchmarkName!),
+        oldValue: bm.left!.categories[MemoryBenchmarkCategory.Garbage] || 0,
+        newValue: bm.right!.categories[MemoryBenchmarkCategory.Garbage] || 0,
+    }));
+
+    useEffect(() => {
+        // Populate graph showing percentual change in garbage created
+        positiveNegativeBarGraph(
+            d3.select(garbageCreatedChangeSvgRef.current),
+            generatedGarbageChangeData,
+            garbageCreatedChangeGraphWidth,
+            garbageCreatedChangeGraphHeight,
+        );
+
+        // Populate graph showing absolute garbage created numbers
+        barComparisonGraph(
+            d3.select(garbageCreatedComparisonSvgRef.current),
+            generatedGarbageData,
+            garbageCreatedComparisonGraphWidth,
+            garbageCreatedComparisonGraphHeight,
+        );
+    });
+
+    return (
+        <>
+            <h2>Benchmark results</h2>
+            {/* Results table */}
+            <table>
+                <thead>
+                    <tr style={{ fontWeight: "bold" }}>
+                        <td>Benchmark</td>
+                        <td>Garbage Master</td>
+                        <td>Garbage Commit</td>
+                        <td>% Change</td>
+                    </tr>
+                </thead>
+                <tbody>{benchmarkResultsTable}</tbody>
+            </table>
+
+            <h2>Garbage created change</h2>
+            {/* [% Delta] Gerbage created */}
+            <svg
+                ref={garbageCreatedChangeSvgRef}
+                width={garbageCreatedChangeGraphWidth}
+                height={garbageCreatedChangeGraphHeight}
+            ></svg>
+
+            <h2>Garbage created</h2>
+            {/* [Absolute] Garbage created comparison */}
+            <svg
+                ref={garbageCreatedComparisonSvgRef}
+                width={garbageCreatedComparisonGraphWidth}
+                height={garbageCreatedComparisonGraphHeight}
+            ></svg>
+        </>
+    );
+}
+
+function decodeBenchmarkData(encodedData: string) {
+    const results = JSON.parse(zlib.inflateSync(Buffer.from(encodedData, "base64")).toString());
+
+    const dataMaster = results.old as BenchmarkResult[];
+    const dataCommit = results.new as BenchmarkResult[];
+
+    // Match old/new results by name
+    return joinOnProperty(dataMaster, dataCommit, (bm) => bm.benchmarkName);
+}

src/pages/benchviz/benchmark-types.ts

@@ -0,0 +1,16 @@
+export enum BenchmarkKind {
+    Memory = "memory",
+}
+
+export type BenchmarkResult = MemoryBenchmarkResult;
+
+export enum MemoryBenchmarkCategory {
+    TotalMemory = "totalMemory",
+    Garbage = "garbage",
+}
+
+export interface MemoryBenchmarkResult {
+    kind: string;
+    categories: Record<MemoryBenchmarkCategory, number>;
+    benchmarkName: string;
+}

src/pages/benchviz/index.tsx

@@ -0,0 +1,8 @@
+import Layout from "@theme/Layout";
+import React from "react";
+import Benchmark from "./Benchmark";
+
+export default function CreateBenchmark() {
+    const isSSR = typeof window === "undefined";
+    return <Layout title="Benchmark">{!isSSR && <Benchmark />}</Layout>;
+}

src/pages/benchviz/util.ts

@@ -0,0 +1,27 @@
+export interface JoinResult<T> {
+    left?: T;
+    right?: T;
+}
+
+export function joinOnProperty<TItem, TKey>(
+    left: TItem[],
+    right: TItem[],
+    propertySelector: (item: TItem) => TKey,
+): Array<JoinResult<TItem>> {
+    const map = new Map<TKey, JoinResult<TItem>>();
+
+    for (const item of left) {
+        map.set(propertySelector(item), { left: item });
+    }
+    for (const item of right) {
+        const key = propertySelector(item);
+        const entry = map.get(key);
+        if (entry) {
+            entry.right = item;
+        } else {
+            map.set(key, { right: item });
+        }
+    }
+
+    return [...map.values()];
+}

src/pages/benchviz/visualizations/bar-comparison-graph.ts

@@ -0,0 +1,79 @@
+import * as d3 from "d3";
+import { addLegend } from "./d3-util";
+
+interface ComparisonData {
+    name: string;
+    oldValue: number;
+    newValue: number;
+}
+
+const GRAPH_MARGIN = { left: 50, top: 5, right: 1 };
+
+const COLOR_OLD = "#888888";
+const COLOR_NEW = "#007ACC";
+
+export function barComparisonGraph(
+    selection: d3.Selection<SVGSVGElement, unknown, null, undefined>,
+    data: ComparisonData[],
+    width: number,
+    height: number,
+) {
+    const barMaxHeight = height - 50;
+
+    // Create X scale and axis
+    const xScale = d3
+        .scaleBand()
+        .domain(data.map((bm) => bm.name))
+        .range([GRAPH_MARGIN.left, width - GRAPH_MARGIN.right]);
+
+    const bandWidth = xScale.bandwidth();
+    const barWidth = 25;
+
+    const xAxis = d3.axisBottom(xScale);
+    selection.append("g").attr("transform", `translate(0, ${barMaxHeight})`).call(xAxis);
+
+    // Create Y scale and axis
+    const maxValue = d3.max(data.map((bm) => Math.max(bm.oldValue, bm.newValue)))!;
+    const maxAxisValue = Math.pow(10, Math.ceil(Math.log10(maxValue)));
+
+    const yScale = d3
+        .scaleLog()
+        .domain([1, maxAxisValue])
+        .range([barMaxHeight - GRAPH_MARGIN.top, 0]);
+
+    const yAxis = d3.axisLeft(yScale);
+    selection.append("g").attr("transform", `translate(${GRAPH_MARGIN.left}, ${GRAPH_MARGIN.top})`).call(yAxis);
+
+    // Create bars for each entry
+    const entries = selection.selectAll("rect").data(data).enter();
+
+    entries
+        .append("rect")
+        .attr("width", barWidth)
+        .attr("x", (d) => xScale(d.name)! + 0.5 * bandWidth - barWidth - 1)
+        .attr("height", (d) => barMaxHeight - yScale(d.oldValue))
+        .attr("y", (d) => yScale(d.oldValue))
+        .style("fill", COLOR_OLD);
+    //.style("stroke", "currentColor");
+
+    entries
+        .append("rect")
+        .attr("width", barWidth)
+        .attr("x", (d) => xScale(d.name)! + 0.5 * bandWidth + 1)
+        .attr("height", (d) => barMaxHeight - yScale(d.newValue))
+        .attr("y", (d) => yScale(d.newValue))
+        .style("fill", COLOR_NEW);
+    //.style("stroke", "currentColor");
+
+    // Add legend
+    const legendEntries: Array<[string, string]> = [
+        ["Master", COLOR_OLD],
+        ["Commit", COLOR_NEW],
+    ];
+    addLegend(selection, legendEntries).attr(
+        "transform",
+        `translate(${width - 100 * legendEntries.length - GRAPH_MARGIN.right}, ${height - 20})`,
+    );
+
+    return selection;
+}

src/pages/benchviz/visualizations/d3-util.ts

@@ -0,0 +1,27 @@
+import * as d3 from "d3";
+
+export function addLegend(
+    selection: d3.Selection<SVGSVGElement, unknown, null, undefined>,
+    items: Array<[string, string]>,
+) {
+    const legend = selection.append("g");
+
+    for (const [index, [name, color]] of items.entries()) {
+        legend
+            .append("rect")
+            .attr("width", 15)
+            .attr("height", 15)
+            .attr("x", 100 * index)
+            .style("fill", color)
+            .style("stroke", "currentColor");
+
+        legend
+            .append("text")
+            .attr("x", 100 * index + 20)
+            .attr("y", 13)
+            .text(name)
+            .attr("fill", "currentColor");
+    }
+
+    return legend;
+}

src/pages/benchviz/visualizations/positive-negative-bar-graph.ts

@@ -0,0 +1,64 @@
+import * as d3 from "d3";
+
+interface CategoryData {
+    name: string;
+    value: number;
+}
+
+const GRAPH_MARGIN = { left: 50, top: 5, right: 1 };
+
+export function positiveNegativeBarGraph(
+    selection: d3.Selection<SVGSVGElement, unknown, null, undefined>,
+    data: CategoryData[],
+    width: number,
+    height: number,
+) {
+    const minValue = d3.min(data.map((bm) => bm.value))!;
+    const maxValue = d3.max(data.map((bm) => bm.value))!;
+
+    const yScale = d3
+        .scaleLinear()
+        .domain([minValue * 1.2, maxValue * 1.2])
+        .range([0, height - 10]);
+
+    const yAxis = d3.axisLeft(yScale);
+
+    const xScale = d3
+        .scaleBand()
+        .domain(data.map((bm) => bm.name))
+        .range([GRAPH_MARGIN.left, width - GRAPH_MARGIN.right]);
+
+    const bandWidth = xScale.bandwidth();
+    const barWidth = 25;
+
+    const xAxis = d3.axisBottom(xScale);
+
+    selection
+        .append("g")
+        .attr("transform", `translate(0, ${yScale(0) + 5})`)
+        .call(xAxis);
+
+    selection.append("g").attr("transform", `translate(${GRAPH_MARGIN.left}, ${GRAPH_MARGIN.top})`).call(yAxis);
+
+    const barSize = (val: number) => Math.abs(height / 2 - yScale(val));
+
+    const bars = selection.selectAll("rect").data(data).enter();
+
+    bars.append("rect")
+        .attr("width", barWidth)
+        .attr("x", (d) => xScale(d.name)! + 0.5 * bandWidth - 0.5 * barWidth)
+        .attr("height", (d) => barSize(d.value) - 1)
+        .attr("y", (d) => (d.value > 0 ? height / 2 + 10 : height / 2 + 10 - barSize(d.value)))
+        .style("fill", (d) => (d.value > 0 ? "red" : "green"));
+    //.style("stroke", "currentColor");
+
+    bars.append("text")
+        .text((d) => `${d.value > 0 ? "+" : ""}${Math.round(d.value * 100) / 100}%`)
+        .attr("x", (d) => xScale(d.name)! + 0.5 * bandWidth)
+        .attr("y", (d) => (d.value > 0 ? height / 2 + barSize(d.value) + 30 : height / 2 - barSize(d.value)))
+        .style("fill", "currentColor")
+        .style("text-anchor", "middle");
+    //.style("stroke", "currentColor");
+
+    return selection;
+}