Fix benchmark visualizer (#104)

Author: Perryvw

src/pages/benchviz/Benchmark.tsx

@@ -15,10 +15,10 @@ import { joinOnProperty, JoinResult } from "./util";
 import { barComparisonGraph } from "./visualizations/bar-comparison-graph";
 import { positiveNegativeBarGraph } from "./visualizations/positive-negative-bar-graph";
 
-const comparisonGraphWidth = 1000;
+const comparisonGraphWidth = 1200;
 const comparisonGraphHeight = 300;
 
-const changeGraphWidth = 1000;
+const changeGraphWidth = 1200;
 const changeGraphHeight = 300;
 
 // Utility functions
@@ -53,7 +53,7 @@ function BenchmarkCategory<T extends BenchmarkResult>({
     // Populate graph with benchmark results
     const memoryBenchmarksResultTable = benchmarksSortedByPercentageDiff.map((bm, i) => {
         const change = percentChangeForResult(bm);
-        const rowColor = change === 0 ? "currentColor" : change > 0 ? "red" : "green";
+        const rowColor = change <= -0.01 ? "green" : change >= 0.01 ? "red" : "currentColor";
 
         return (
             <tr key={i} style={{ color: rowColor }}>
@@ -133,7 +133,7 @@ export default function Benchmark() {
             <BenchmarkCategory
                 name={"Runtime"}
                 benchmarks={benchmarkData.runtime}
-                extractValue={(bm) => bm.time}
+                extractValue={(bm) => bm.time * 1000}
                 formatValue={formatTime}
             />
         </>

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

@@ -27,7 +27,7 @@ export function barComparisonGraph(
         .range([GRAPH_MARGIN.left, width - GRAPH_MARGIN.right]);
 
     const bandWidth = xScale.bandwidth();
-    const barWidth = 25;
+    const barWidth = Math.min(25, (0.3 * width) / data.length);
 
     const xAxis = d3.axisBottom(xScale);
     selection.append("g").attr("transform", `translate(0, ${barMaxHeight})`).call(xAxis);
@@ -47,23 +47,32 @@ export function barComparisonGraph(
     // Create bars for each entry
     const entries = selection.selectAll("rect").data(data).enter();
 
+    const formatTooltip = (d: ComparisonData) =>
+        `${d.name}\nOld: ${d.oldValue.toFixed(2)}\nNew: ${d.newValue.toFixed(2)}`;
+
     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");
+        .style("fill", COLOR_OLD)
+        .style("stroke", "currentColor")
+        // Add hover tooltip
+        .append("svg:title")
+        .text(formatTooltip);
 
     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");
+        .style("fill", COLOR_NEW)
+        .style("stroke", "currentColor")
+        // Add hover tooltip
+        .append("svg:title")
+        .text(formatTooltip);
 
     // Add legend
     const legendEntries: Array<[string, string]> = [

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

@@ -16,9 +16,11 @@ export function positiveNegativeBarGraph(
     const minValue = d3.min(data.map((bm) => bm.value))!;
     const maxValue = d3.max(data.map((bm) => bm.value))!;
 
+    const range = maxValue - minValue;
+
     const yScale = d3
         .scaleLinear()
-        .domain([minValue * 1.2, maxValue * 1.2])
+        .domain([minValue - 0.2 * range, maxValue + 0.2 * range])
         .range([0, height - 10]);
 
     const yAxis = d3.axisLeft(yScale);
@@ -29,7 +31,7 @@ export function positiveNegativeBarGraph(
         .range([GRAPH_MARGIN.left, width - GRAPH_MARGIN.right]);
 
     const bandWidth = xScale.bandwidth();
-    const barWidth = 25;
+    const barWidth = Math.min(25, (0.5 * width) / data.length);
 
     const xAxis = d3.axisBottom(xScale);
 
@@ -40,25 +42,27 @@ export function positiveNegativeBarGraph(
 
     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 barSize = (val: number) => Math.abs(yScale(0)! - 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");
+        .attr("height", (d) => barSize(d.value))
+        .attr("y", (d) => GRAPH_MARGIN.top + (d.value > 0 ? yScale(0)! : yScale(0)! - barSize(d.value)))
+        .style("fill", (d) => (d.value > 0 ? "red" : "green"))
+        .style("stroke", "currentColor")
+        // Add hover tooltip
+        .append("svg:title")
+        .text((d) => `${d.name}: ${d.value.toFixed(2)}%`);
 
     bars.append("text")
         .text((d) => `${d.value > 0 ? "+" : ""}${d.value.toFixed(2)}%`)
         .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)))
+        .attr("y", (d) => (d.value > 0 ? Math.max(yScale(0)! + 40, yScale(d.value)! + 20) : yScale(d.value)!))
         .style("fill", "currentColor")
         .style("text-anchor", "middle");
-    //.style("stroke", "currentColor");
 
     return selection;
 }

src/pages/index.tsx

@@ -12,11 +12,11 @@ interface Feature {
 
 const features: Feature[] = [
     {
-        title: "Extend existing APIs",
+        title: "Declare and use existing APIs",
         description: (
             <>
-                This project is useful in any environment where Lua code is accepted, with the powerful option of simply
-                declaring any existing API using TypeScript declaration files.
+                This project is useful in any environment where Lua code is accepted, with the powerful option of
+                declaring types for any existing API using TypeScript declaration files.
             </>
         ),
     },
@@ -43,7 +43,7 @@ const features: Feature[] = [
 ];
 
 const exampleSource = `
-function onAbilityCast(this: void, caster: Unit, targetPos: Vector) {
+function onAbilityCast(caster: Unit, targetPos: Vector) {
     const units = findUnitsInRadius(targetPos, 500);
 
     const enemies = units.filter(unit => caster.isEnemy(unit));