Skip to content

Commit ab1fb04

Browse files
JacekDabrowski1JacekDabrowski1
JacekDabrowski1
authored and
JacekDabrowski1
committed
Update charts to fix display issues and improve readability
Refactors the speed chart to use vertical bars with a log scale, groups data by algorithm, and ensures failure bars are consistently gray. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec794acd-c4a5-47f6-b906-d70ac3c316ee Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 6e2d1735-a56c-4817-99a6-c647024abc06 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/28ec11df-9ccf-40bc-9ff4-d0523e5b6a98/ec794acd-c4a5-47f6-b906-d70ac3c316ee/Jxc03TD Replit-Helium-Checkpoint-Created: true
1 parent a7ade77 commit ab1fb04

1 file changed

Lines changed: 55 additions & 56 deletions

File tree

‎website/static/benchmarks.js‎

Lines changed: 55 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ const failureBarPlugin = {
149149
const bar = meta.data[dataIndex];
150150
if (!bar) return;
151151

152-
const color = ds.borderColor || COLORS.textMuted;
152+
const color = '#666680';
153153
const barX = bar.x;
154154
const barY = bar.y;
155155

@@ -269,59 +269,59 @@ function buildAccuracyChart() {
269269

270270
function buildSpeedChart() {
271271
const ctx = document.getElementById('chart-speed').getContext('2d');
272-
const algos = SPEED_DATA.algorithms;
273272

274-
const dsConfigs = [
275-
{ key: 'facebook', label: 'ego-Facebook (4k)', color: COLORS.accent },
276-
{ key: 'cora', label: 'Cora (2.7k)', color: '#10b981' },
277-
{ key: 'citeseer', label: 'CiteSeer (3.3k)', color: COLORS.orange },
278-
{ key: 'pubmed', label: 'PubMed (19.7k)', color: COLORS.blue },
279-
{ key: 'ppi', label: 'PPI (57k)', color: '#f472b6' },
280-
{ key: 'roadnet', label: 'roadNet-CA (2M)', color: COLORS.green },
281-
];
282-
const datasets = dsConfigs.map(d => ({
283-
label: d.label,
284-
data: SPEED_DATA[d.key],
285-
backgroundColor: d.color + 'cc',
286-
borderColor: d.color,
287-
borderWidth: 1,
288-
borderRadius: 3,
289-
}));
273+
const datasets_labels = ['ego-Facebook', 'Cora', 'CiteSeer', 'PubMed', 'PPI'];
274+
const algos = SPEED_DATA.algorithms;
275+
const dsKeys = ['facebook', 'cora', 'citeseer', 'pubmed', 'ppi'];
276+
277+
const algoDatasets = algos.map(algo => {
278+
const algoIdx = SPEED_DATA.algorithms.indexOf(algo);
279+
return {
280+
label: algo,
281+
data: dsKeys.map(k => SPEED_DATA[k][algoIdx]),
282+
backgroundColor: ALGO_COLORS[algo] + 'cc',
283+
borderColor: ALGO_COLORS[algo],
284+
borderWidth: 1,
285+
borderRadius: 3,
286+
};
287+
});
290288

291289
const speedFailureMap = {};
292-
dsConfigs.forEach(d => {
293-
if (SPEED_FAILURE[d.key]) speedFailureMap[d.label] = SPEED_FAILURE[d.key];
290+
algos.forEach(algo => {
291+
const algoIdx = SPEED_DATA.algorithms.indexOf(algo);
292+
const statuses = dsKeys.map(k => SPEED_FAILURE[k] ? SPEED_FAILURE[k][algoIdx] : null);
293+
if (statuses.some(s => s)) speedFailureMap[algo] = statuses;
294294
});
295295

296296
new Chart(ctx, {
297297
type: 'bar',
298-
data: { labels: algos, datasets },
298+
data: { labels: datasets_labels, datasets: algoDatasets },
299299
plugins: [failureBarPlugin],
300300
options: {
301-
indexAxis: 'y',
302301
responsive: true,
303302
maintainAspectRatio: false,
304303
_failureMap: speedFailureMap,
305304
plugins: {
306-
title: { display: true, text: 'Embedding Time (seconds) — Real Datasets, Linear Scale', color: COLORS.text, font: { size: 14, weight: 500 }, padding: { bottom: 20 } },
305+
title: { display: true, text: 'Embedding Time (seconds) — Real Datasets, Log Scale', color: COLORS.text, font: { size: 14, weight: 500 }, padding: { bottom: 20 } },
307306
tooltip: {
308307
callbacks: {
309308
label: tooltipCtx => {
310-
const dsLabel = tooltipCtx.dataset.label;
309+
const algo = tooltipCtx.dataset.label;
311310
const idx = tooltipCtx.dataIndex;
312-
const status = speedFailureMap[dsLabel] && speedFailureMap[dsLabel][idx];
313-
if (status) return dsLabel + ': ' + status;
314-
return tooltipCtx.raw !== null ? dsLabel + ': ' + tooltipCtx.raw + 's' : '';
311+
const status = speedFailureMap[algo] && speedFailureMap[algo][idx];
312+
if (status) return algo + ': ' + status;
313+
return tooltipCtx.raw !== null ? algo + ': ' + tooltipCtx.raw + 's' : '';
315314
}
316315
}
317316
},
318317
},
319318
scales: {
320-
x: {
319+
x: { grid: { display: false }, ticks: { color: COLORS.textMuted } },
320+
y: {
321+
type: 'logarithmic',
321322
grid: { color: COLORS.border + '60' },
322323
ticks: { color: COLORS.textMuted, callback: v => v + 's' },
323324
},
324-
y: { grid: { display: false }, ticks: { color: COLORS.textMuted } },
325325
},
326326
},
327327
});
@@ -331,57 +331,56 @@ function buildMemoryChart() {
331331
const ctx = document.getElementById('chart-memory').getContext('2d');
332332
const algos = MEMORY_DATA.algorithms;
333333

334-
const dsConfigs = [
335-
{ key: 'facebook', label: 'ego-Facebook (4k)', color: COLORS.accent },
336-
{ key: 'cora', label: 'Cora (2.7k)', color: '#10b981' },
337-
{ key: 'citeseer', label: 'CiteSeer (3.3k)', color: COLORS.orange },
338-
{ key: 'pubmed', label: 'PubMed (19.7k)', color: COLORS.blue },
339-
{ key: 'ppi', label: 'PPI (57k)', color: '#f472b6' },
340-
{ key: 'roadnet', label: 'roadNet-CA (2M)', color: COLORS.green },
341-
];
334+
const datasets_labels = ['ego-Facebook', 'Cora', 'CiteSeer', 'PubMed', 'PPI'];
335+
const dsKeys = ['facebook', 'cora', 'citeseer', 'pubmed', 'ppi'];
336+
337+
const algoDatasets = algos.map(algo => {
338+
const algoIdx = MEMORY_DATA.algorithms.indexOf(algo);
339+
return {
340+
label: algo,
341+
data: dsKeys.map(k => MEMORY_DATA[k][algoIdx]),
342+
backgroundColor: ALGO_COLORS[algo] + 'cc',
343+
borderColor: ALGO_COLORS[algo],
344+
borderWidth: 1,
345+
borderRadius: 3,
346+
};
347+
});
342348

343349
const memFailureMap = {};
344-
dsConfigs.forEach(d => {
345-
if (MEMORY_FAILURE[d.key]) memFailureMap[d.label] = MEMORY_FAILURE[d.key];
350+
algos.forEach(algo => {
351+
const algoIdx = MEMORY_DATA.algorithms.indexOf(algo);
352+
const statuses = dsKeys.map(k => MEMORY_FAILURE[k] ? MEMORY_FAILURE[k][algoIdx] : null);
353+
if (statuses.some(s => s)) memFailureMap[algo] = statuses;
346354
});
347355

348356
new Chart(ctx, {
349357
type: 'bar',
350-
data: {
351-
labels: algos,
352-
datasets: dsConfigs.map(d => ({
353-
label: d.label,
354-
data: MEMORY_DATA[d.key],
355-
backgroundColor: d.color + 'cc',
356-
borderColor: d.color,
357-
borderWidth: 1,
358-
borderRadius: 3,
359-
})),
360-
},
358+
data: { labels: datasets_labels, datasets: algoDatasets },
361359
plugins: [failureBarPlugin],
362360
options: {
363361
responsive: true,
364362
maintainAspectRatio: false,
365363
_failureMap: memFailureMap,
366364
plugins: {
367-
title: { display: true, text: 'Peak Memory Usage (MB) — Real Datasets, Linear Scale', color: COLORS.text, font: { size: 14, weight: 500 }, padding: { bottom: 20 } },
365+
title: { display: true, text: 'Peak Memory Usage (MB) — Real Datasets, Log Scale', color: COLORS.text, font: { size: 14, weight: 500 }, padding: { bottom: 20 } },
368366
tooltip: {
369367
callbacks: {
370368
label: tooltipCtx => {
371-
const dsLabel = tooltipCtx.dataset.label;
369+
const algo = tooltipCtx.dataset.label;
372370
const idx = tooltipCtx.dataIndex;
373-
const status = memFailureMap[dsLabel] && memFailureMap[dsLabel][idx];
374-
if (status) return dsLabel + ': ' + status;
375-
return tooltipCtx.raw !== null ? dsLabel + ': ' + tooltipCtx.raw + ' MB' : '';
371+
const status = memFailureMap[algo] && memFailureMap[algo][idx];
372+
if (status) return algo + ': ' + status;
373+
return tooltipCtx.raw !== null ? algo + ': ' + tooltipCtx.raw + ' MB' : '';
376374
}
377375
}
378376
},
379377
},
380378
scales: {
381379
x: { grid: { display: false }, ticks: { color: COLORS.textMuted } },
382380
y: {
381+
type: 'logarithmic',
383382
grid: { color: COLORS.border + '60' },
384-
ticks: { color: COLORS.textMuted, callback: v => v + ' MB' },
383+
ticks: { color: COLORS.textMuted, callback: v => v >= 1000 ? (v/1000).toFixed(1) + ' GB' : v + ' MB' },
385384
},
386385
},
387386
},

0 commit comments

Comments
 (0)