dearwolf/aider
1
0
Fork 0
mirror of https://github.com/Aider-AI/aider.git synced 2025-05-29 00:35:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Replaced checkbox controls with clickable table rows to toggle chart data.

Browse source
This commit is contained in:
Paul Gauthier (aider) 2024-07-25 10:15:41 +02:00
parent 7eb6754a7c
commit db5538b159
1 changed files with 29 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

61
aider/website/docs/leaderboards/index.md
View file

@ -51,7 +51,6 @@ from Exercism. This benchmark measures the LLM's coding ability, but also whethe
</tbody> </tbody>
</table> </table>
<div id="editChartControls"></div>
<canvas id="editChart" width="800" height="450" style="margin-top: 20px"></canvas> <canvas id="editChart" width="800" height="450" style="margin-top: 20px"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script> <script>
@ -85,12 +84,15 @@ from Exercism. This benchmark measures the LLM's coding ability, but also whethe
{% endfor %} {% endfor %}
function updateChart() { function updateChart() {
var selectedRows = document.querySelectorAll('tr.selected');
var showAll = selectedRows.length === 0;
leaderboardData.labels = []; leaderboardData.labels = [];
leaderboardData.datasets[0].data = []; leaderboardData.datasets[0].data = [];
leaderboardData.datasets[1].data = []; leaderboardData.datasets[1].data = [];
allData.forEach(function(row, index) { allData.forEach(function(row, index) {
if (document.getElementById('edit-checkbox-' + index).checked) { if (showAll || document.getElementById('edit-row-' + index).classList.contains('selected')) {
leaderboardData.labels.push(row.model); leaderboardData.labels.push(row.model);
leaderboardData.datasets[0].data.push(row.pass_rate_2); leaderboardData.datasets[0].data.push(row.pass_rate_2);
leaderboardData.datasets[1].data.push(row.percent_cases_well_formed); leaderboardData.datasets[1].data.push(row.percent_cases_well_formed);
@ -100,21 +102,15 @@ from Exercism. This benchmark measures the LLM's coding ability, but also whethe
leaderboardChart.update(); leaderboardChart.update();
} }
var controlsDiv = document.getElementById('editChartControls'); var tableBody = document.querySelector('table tbody');
allData.forEach(function(row, index) { allData.forEach(function(row, index) {
var checkbox = document.createElement('input'); var tr = tableBody.children[index];
checkbox.type = 'checkbox'; tr.id = 'edit-row-' + index;
checkbox.id = 'edit-checkbox-' + index; tr.style.cursor = 'pointer';
checkbox.checked = true; tr.onclick = function() {
checkbox.onchange = updateChart; this.classList.toggle('selected');
updateChart();
var label = document.createElement('label'); };
label.htmlFor = 'edit-checkbox-' + index;
label.appendChild(document.createTextNode(row.model));
controlsDiv.appendChild(checkbox);
controlsDiv.appendChild(label);
controlsDiv.appendChild(document.createElement('br'));
}); });
var leaderboardChart = new Chart(ctx, { var leaderboardChart = new Chart(ctx, {
@ -137,6 +133,11 @@ from Exercism. This benchmark measures the LLM's coding ability, but also whethe
updateChart(); updateChart();
}); });
</script> </script>
<style>
tr.selected {
background-color: #e6f3ff;
}
</style>
## Code refactoring leaderboard ## Code refactoring leaderboard
@ -170,7 +171,6 @@ Therefore, results are available for fewer models.
</tbody> </tbody>
</table> </table>
<div id="refacChartControls"></div>
<canvas id="refacChart" width="800" height="450" style="margin-top: 20px"></canvas> <canvas id="refacChart" width="800" height="450" style="margin-top: 20px"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script> <script>
@ -204,12 +204,15 @@ Therefore, results are available for fewer models.
{% endfor %} {% endfor %}
function updateChart() { function updateChart() {
var selectedRows = document.querySelectorAll('tr.selected');
var showAll = selectedRows.length === 0;
leaderboardData.labels = []; leaderboardData.labels = [];
leaderboardData.datasets[0].data = []; leaderboardData.datasets[0].data = [];
leaderboardData.datasets[1].data = []; leaderboardData.datasets[1].data = [];
allData.forEach(function(row, index) { allData.forEach(function(row, index) {
if (document.getElementById('refac-checkbox-' + index).checked) { if (showAll || document.getElementById('refac-row-' + index).classList.contains('selected')) {
leaderboardData.labels.push(row.model); leaderboardData.labels.push(row.model);
leaderboardData.datasets[0].data.push(row.pass_rate_1); leaderboardData.datasets[0].data.push(row.pass_rate_1);
leaderboardData.datasets[1].data.push(row.percent_cases_well_formed); leaderboardData.datasets[1].data.push(row.percent_cases_well_formed);
@ -219,21 +222,15 @@ Therefore, results are available for fewer models.
leaderboardChart.update(); leaderboardChart.update();
} }
var controlsDiv = document.getElementById('refacChartControls'); var tableBody = document.querySelectorAll('table tbody')[1];
allData.forEach(function(row, index) { allData.forEach(function(row, index) {
var checkbox = document.createElement('input'); var tr = tableBody.children[index];
checkbox.type = 'checkbox'; tr.id = 'refac-row-' + index;
checkbox.id = 'refac-checkbox-' + index; tr.style.cursor = 'pointer';
checkbox.checked = true; tr.onclick = function() {
checkbox.onchange = updateChart; this.classList.toggle('selected');
updateChart();
var label = document.createElement('label'); };
label.htmlFor = 'refac-checkbox-' + index;
label.appendChild(document.createTextNode(row.model));
controlsDiv.appendChild(checkbox);
controlsDiv.appendChild(label);
controlsDiv.appendChild(document.createElement('br'));
}); });
var leaderboardChart = new Chart(ctx, { var leaderboardChart = new Chart(ctx, {