Skip to content

Commit 81deb81

Browse files
PerryvwPerryvw
committed
PR feedback
1 parent 30289f0 commit 81deb81

7 files changed

Lines changed: 139 additions & 162 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"trailingComma": "all"
1212
},
1313
"dependencies": {
14+
"@types/d3": "^5.7.2",
1415
"@types/lz-string": "^1.3.34",
1516
"@types/react": "^16.9.34",
1617
"@types/react-dom": "^16.9.6",
@@ -33,7 +34,6 @@
3334
"@ark120202/typescript-config": "^2.1.0",
3435
"@docusaurus/core": "^2.0.0-alpha.50",
3536
"@docusaurus/preset-classic": "^2.0.0-alpha.50",
36-
"@types/d3": "^5.7.2",
3737
"@types/node": "^13.11.1",
3838
"file-loader": "^6.0.0",
3939
"fork-ts-checker-webpack-plugin": "^4.1.3",

‎src/pages/benchviz/Benchmark.tsx‎

Lines changed: 0 additions & 151 deletions
This file was deleted.

‎src/pages/benchviz/benchmark-types.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export enum BenchmarkKind {
2+
Memory = "memory",
3+
}
4+
5+
export type BenchmarkResult = MemoryBenchmarkResult;
6+
7+
export enum MemoryBenchmarkCategory {
8+
TotalMemory = "totalMemory",
9+
Garbage = "garbage",
10+
}
11+
12+
export interface MemoryBenchmarkResult {
13+
kind: string;
14+
categories: Record<MemoryBenchmarkCategory, number>;
15+
benchmarkName: string;
16+
}

‎src/pages/benchviz/index.tsx‎

Lines changed: 122 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,128 @@
11
import Layout from "@theme/Layout";
2-
import React from "react";
2+
import * as d3 from "d3";
3+
import React, { useEffect, useRef } from "react";
4+
import * as zlib from "zlib";
5+
import { BenchmarkResult, MemoryBenchmarkCategory } from "./benchmark-types";
6+
import { joinOnProperty, JoinResult } from "./util";
7+
import { barComparisonGraph } from "./visualizations/bar-comparison-graph";
8+
import { positiveNegativeBarGraph } from "./visualizations/positive-negative-bar-graph";
9+
10+
const garbageCreatedComparisonGraphWidth = 1000;
11+
const garbageCreatedComparisonGraphHeight = 300;
12+
13+
const garbageCreatedChangeGraphWidth = 1000;
14+
const garbageCreatedChangeGraphHeight = 300;
15+
16+
// Utility functions
17+
const formatBenchmarkName = (benchmarkName: string) => benchmarkName.replace(".lua", "").split("/").pop()!;
18+
const formatMemory = (value: number) => `${Math.round(value / 10) / 100} Mb`;
19+
20+
const benchmarkGarbage = (bm: BenchmarkResult) => bm.categories[MemoryBenchmarkCategory.Garbage];
21+
const garbagePercentChange = (result: JoinResult<BenchmarkResult>) =>
22+
(benchmarkGarbage(result.right!) - benchmarkGarbage(result.left!)) / benchmarkGarbage(result.left!);
23+
24+
export default function Benchmark() {
25+
let garbageCreatedChangeSvgRef = useRef<SVGSVGElement>(null!);
26+
let garbageCreatedComparisonSvgRef = useRef<SVGSVGElement>(null!);
27+
28+
const benchmarkData = decodeBenchmarkData(window.location.search.split("?d=")[1]);
29+
// Sort by percentage change of garbage created
30+
const benchmarksSortedByPercentDifference = benchmarkData.sort(
31+
(a, b) => garbagePercentChange(a) - garbagePercentChange(b),
32+
);
33+
34+
// Populate graph with benchmark results
35+
const benchmarkResultsTable = benchmarksSortedByPercentDifference.map((bm, i) => {
36+
const change = garbagePercentChange(bm);
37+
const rowColor = change === 0 ? "currentColor" : change > 0 ? "red" : "green";
38+
39+
return (
40+
<tr key={i} style={{ color: rowColor }}>
41+
<td>{bm.left?.benchmarkName}</td>
42+
<td>{formatMemory(benchmarkGarbage(bm.left!))}</td>
43+
<td>{formatMemory(benchmarkGarbage(bm.right!))}</td>
44+
<td>{change}</td>
45+
</tr>
46+
);
47+
});
48+
49+
// Comparison data master garbage created vs commit garbate created (PERCENTAGE CHANGE)
50+
const generatedGarbageChangeData = benchmarksSortedByPercentDifference.map((bm) => {
51+
const oldValue = bm.left?.categories[MemoryBenchmarkCategory.Garbage]!;
52+
const newValue = bm.right?.categories[MemoryBenchmarkCategory.Garbage]!;
53+
54+
return {
55+
name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
56+
value: (100 * (newValue - oldValue)) / oldValue,
57+
};
58+
});
59+
60+
// Comparison data master garbage created vs commit garbate created (ABSOLUTE)
61+
const generatedGarbageData = benchmarksSortedByPercentDifference.map((bm) => ({
62+
name: formatBenchmarkName(bm.left?.benchmarkName ?? bm.right?.benchmarkName!),
63+
oldValue: bm.left?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
64+
newValue: bm.right?.categories[MemoryBenchmarkCategory.Garbage] ?? 0,
65+
}));
66+
67+
useEffect(() => {
68+
// Populate graph showing percentual change in garbage created
69+
positiveNegativeBarGraph(
70+
d3.select(garbageCreatedChangeSvgRef.current),
71+
generatedGarbageChangeData,
72+
garbageCreatedChangeGraphWidth,
73+
garbageCreatedChangeGraphHeight,
74+
);
75+
76+
// Populate graph showing absolute garbage created numbers
77+
barComparisonGraph(
78+
d3.select(garbageCreatedComparisonSvgRef.current),
79+
generatedGarbageData,
80+
garbageCreatedComparisonGraphWidth,
81+
garbageCreatedComparisonGraphHeight,
82+
);
83+
});
384

4-
const Benchmark = React.lazy(() => import("./Benchmark"));
5-
export default function CreateBenchmark() {
6-
const isSSR = typeof window === "undefined";
785
return (
8-
<Layout title="Benchmark">
9-
{!isSSR && (
10-
<React.Suspense fallback={<div />}>
11-
<Benchmark />
12-
</React.Suspense>
13-
)}
86+
<Layout title="BenchViz">
87+
{/* Results table */}
88+
<h2>Benchmark results</h2>
89+
<table>
90+
<thead>
91+
<tr style={{ fontWeight: "bold" }}>
92+
<td>Benchmark</td>
93+
<td>Garbage Master</td>
94+
<td>Garbage Commit</td>
95+
<td>% Change</td>
96+
</tr>
97+
</thead>
98+
<tbody>{benchmarkResultsTable}</tbody>
99+
</table>
100+
101+
<h2>Garbage created change</h2>
102+
{/* [% Delta] Gerbage created */}
103+
<svg
104+
ref={garbageCreatedChangeSvgRef}
105+
width={garbageCreatedChangeGraphWidth}
106+
height={garbageCreatedChangeGraphHeight}
107+
></svg>
108+
109+
<h2>Garbage created</h2>
110+
{/* [Absolute] Garbage created comparison */}
111+
<svg
112+
ref={garbageCreatedComparisonSvgRef}
113+
width={garbageCreatedComparisonGraphWidth}
114+
height={garbageCreatedComparisonGraphHeight}
115+
></svg>
14116
</Layout>
15117
);
16118
}
119+
120+
function decodeBenchmarkData(encodedData: string) {
121+
const results = JSON.parse(zlib.inflateSync(Buffer.from(encodedData, "base64")).toString());
122+
123+
const dataMaster = results.old as BenchmarkResult[];
124+
const dataCommit = results.new as BenchmarkResult[];
125+
126+
// Match old/new results by name
127+
return joinOnProperty(dataMaster, dataCommit, (bm) => bm.benchmarkName);
128+
}

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

0 commit comments

Comments
 (0)