Skip to content

Commit d1013ed

Browse files
PerryvwPerryvw
committed
reverted to old index
1 parent 81deb81 commit d1013ed

2 files changed

Lines changed: 138 additions & 122 deletions

File tree

‎src/pages/benchviz/Benchmark.tsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import Layout from "@theme/Layout";
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+
});
84+
85+
return (
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>
116+
</Layout>
117+
);
118+
}
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/index.tsx‎

Lines changed: 10 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,16 @@
11
import Layout from "@theme/Layout";
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-
});
2+
import React from "react";
3+
import Benchmark from "./Benchmark";
844

5+
export default function CreateBenchmark() {
6+
const isSSR = typeof window === "undefined";
857
return (
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>
8+
<Layout title="Benchmark">
9+
{!isSSR && (
10+
<React.Suspense fallback={<div />}>
11+
<Benchmark />
12+
</React.Suspense>
13+
)}
11614
</Layout>
11715
);
11816
}
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-
}

0 commit comments

Comments
 (0)