-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
359 lines (297 loc) · 16.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SoliDiffy: AST Differencing for Solidity Smart Contracts</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<meta name="google-site-verification" content="E6Zfw6BnTJExPNdnEuMxhYSB7UyCC8_2oxxz6dQ1O3o" />
<!-- Prism CSS for Syntax Highlighting -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.css" rel="stylesheet" />
<!-- Prism Line Numbers Plugin CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" />
<!-- Prism Core JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<!-- JSON Language Support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
<!-- Line Numbers Plugin JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<!-- Add CSS for line numbers -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" />
<style>
body {
background-color: #f8f9fa;
color: #343a40;
}
.cover-container {
max-width: 60%;
padding: 2rem 1rem;
}
.section-title {
margin-top: 2rem;
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: 600;
color: #007bff;
}
.section-content {
margin-bottom: 1.5rem;
text-align: left;
}
.results-box {
background-color: #e9ecef;
padding: 1rem;
border-radius: 0.25rem;
margin-bottom: 1rem;
}
.form-inline .form-control {
width: 80%;
margin-right: 0.5rem;
}
.uniform-select {
width: 100%;
height: 38px; /* Standard height for form controls */
border-radius: 4px;
border: 1px solid #ced4da;
padding: 6px 12px;
box-sizing: border-box;
background-color: #fff;
color: #495057;
}
.uniform-select:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.btn-primary {
height: 38px; /* Match the height of the select boxes */
}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
</head>
<body class="text-center">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="mb-4">
<h1 class="h3">SoliDiffy: AST Differencing for Solidity Smart Contracts</h1>
</header>
<main role="main" class="inner cover">
<div class="section-content">
<p>We address the need for precise and fine-grained code differencing tools in Solidity, the primary language for smart contracts on EVM-based blockchain platforms. SoliDiffy generates fine-grained edit scripts, which are crucial for tasks such code reviews and automated smart contract repair.</p>
</div>
<div class="section-title">Browsable Diffs</div>
<div style="text-align: left; padding-top: 10px; padding-bottom: 10px;">
You can browse through our diff pairs and their respective edit scripts generated by both SoliDiffy and Difftastic. Please keep in mind due to GitHub public API limitations, you can view the results of the first 1000 projects, and to view the rest you should manually clone the repository at <a href="https://github.com/SoliDiffy/SoliDiffyResults">https://github.com/SoliDiffy/SoliDiffyResults</a>. The following form helps you interactively view the diffing results of the first 1000 projects (all project names starting with a, b, and c).
</div>
<form id="project-form" class="form-inline section-content">
<div class="form-group mb-4">
<label for="project-select" class="sr-only">Select Project</label>
<select id="project-select" class="form-control" style="width: 100%;">
<option value="">Select a Solidity project</option>
</select>
</div>
<div class="form-group mb-3 ml-3" id="project-details">
<!-- Additional fields populated based on project selection -->
<label for="project-detail" class="sr-only">Project Detail</label>
<select id="project-detail" class="form-control" style="width: 100%;">
<option value="">Severity of modifications</option>
</select>
</div>
<div class="form-group mb-3 ml-3" id="mutation-operators-container">
<label for="mutation-operators" class="sr-only">Mutation Operators</label>
<select id="mutation-operators" class="form-control" style="width: 100%; height: 100px !important;">
<option value="">Select a mutation operator...</option>
</select>
</div>
<button type="button" id="retrieve-button" class="btn btn-primary mb-2 ml-2">Show Edit Scripts</button>
</form>
<div class="row mt-4">
<div class="col-md-6" style="text-align: left;">
<h5>SoliDiffy Edit Script</h5>
<pre id="soliDiffyScript" class="line-numbers" style="padding-left: 5px !important; font-size: 12px !important;"><code class="language-json"></code></pre>
</div>
<div class="col-md-6" style="text-align: left;">
<h5>Difftastic Edit Script</h5>
<pre id="difftasticScript" class="line-numbers" style="padding-left: 5px !important; font-size: 12px !important;"><code class="language-json"></code></pre>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
<script>
$(document).ready(function() {
// Initialize Select2 for project selection with dynamic fetching
$('#project-select').select2({
placeholder: 'Select a project...',
minimumInputLength: 1,
ajax: {
transport: function (params, success, failure) {
// Fetch projects from GitHub based on user input
fetch('https://api.github.com/repos/SoliDiffy/SoliDiffyResults/contents/results/contracts/mutants')
.then(response => response.json())
.then(data => {
// Filter directories and apply user input filtering
const filteredData = data
.filter(item => item.type === 'dir' && item.name.toLowerCase().startsWith(params.data.term.toLowerCase()))
.map(item => ({ id: item.name, text: item.name }));
success({ results: filteredData });
})
.catch(error => {
console.error('Error fetching project names:', error);
alert('Failed to load projects. Please try again later.');
failure(error);
});
},
processResults: function (data) {
return { results: data.results };
},
delay: 250
}
});
// Handle project selection
$('#project-select').on('select2:select', function(e) {
var projectId = e.params.data.id;
// Fetch and populate the number of mutations dropdown
fetch(`https://api.github.com/repos/SoliDiffy/SoliDiffyResults/contents/results/contracts/mutants/${projectId}`)
.then(response => response.json())
.then(data => {
const mutations = data
.filter(item => item.type === 'dir') // Ensure it's a directory (mutation numbers)
.map(item => ({ id: item.name, text: item.name }));
// Show the mutations dropdown
$('#project-details').show();
$('#project-detail').empty().select2({
data: mutations,
placeholder: 'Select the number of mutations...'
}).val('1').trigger('change'); // Set default to '1' and trigger change event
// Fetch mutation operators based on the default value ('1')
fetchMutationOperators(projectId, '1');
})
.catch(error => {
console.error('Error fetching mutations:', error);
alert('Failed to load mutations. Please try again later.');
});
});
// Function to fetch and populate mutation operators
function fetchMutationOperators(projectId, mutationNumber) {
// Fetch and populate the mutation operators dropdown
fetch(`https://api.github.com/repos/SoliDiffy/SoliDiffyResults/contents/results/contracts/mutants/${projectId}/${mutationNumber}`)
.then(response => response.json())
.then(data => {
const mutationOperators = data
.filter(item => item.type === 'dir') // Ensure it's a directory (mutation operators)
.map(item => ({ id: item.name, text: item.name }));
// Show the mutation operators dropdown
$('#mutation-operators-container').show();
$('#mutation-operators').empty().select2({
data: mutationOperators,
placeholder: 'Select a mutation operator...'
});
})
.catch(error => {
console.error('Error fetching mutation operators:', error);
alert('Failed to load mutation operators. Please try again later.');
});
}
// Handle mutation selection to fetch mutation operators when manually changed
$('#project-detail').on('select2:select', function(e) {
var projectId = $('#project-select').val();
var mutationNumber = e.params.data.id;
// Fetch mutation operators based on the selected mutation number
fetchMutationOperators(projectId, mutationNumber);
});
// Initialize Select2 for mutation operators
$('#mutation-operators').select2({
placeholder: 'Select a mutation operator...',
minimumInputLength: 1
}).hide(); // Hide initially until mutation number is selected
// Handle the click event on the Retrieve button
$('#retrieve-button').on('click', function() {
var projectId = $('#project-select').val();
var mutationNumber = $('#project-detail').val();
var operator = $('#mutation-operators').val();
if (!projectId || !mutationNumber || !operator) {
alert('Please select a project, number of mutations, and a mutation operator.');
return;
}
// Define paths for JSON files
var gtPath = `https://api.github.com/repos/SoliDiffy/SoliDiffyResults/contents/results/contracts/mutants/${projectId}/${mutationNumber}/${operator}/diff_result_GT.json`;
var difftPath = `https://api.github.com/repos/SoliDiffy/SoliDiffyResults/contents/results/contracts/mutants/${projectId}/${mutationNumber}/${operator}/diff_result_difft.json`;
// Fetch and display only the "edit_script" part of SoliDiffy Edit Script
fetch(gtPath)
.then(response => response.json())
.then(data => {
if (data.content) {
const decodedContent = atob(data.content);
const jsonData = JSON.parse(decodedContent);
const editScript = jsonData.edit_script || 'No edit script found.';
$('#soliDiffyScript').text(editScript);
Prism.highlightElement(document.querySelector('#soliDiffyScript'));
} else {
$('#soliDiffyScript').text('No SoliDiffy Edit Script available.');
}
})
.catch(() => {
$('#soliDiffyScript').text('Failed to load SoliDiffy Edit Script.');
});
// Fetch and display Difftastic Edit Script
fetch(difftPath)
.then(response => response.json())
.then(data => {
if (data.content) {
const decodedContent = atob(data.content);
$('#difftasticScript').text(decodedContent);
Prism.highlightElement(document.querySelector('#difftasticScript'));
} else {
$('#difftasticScript').text('No Difftastic Edit Script available.');
}
})
.catch(() => {
$('#difftasticScript').text('Failed to load Difftastic Edit Script.');
});
});
});
</script>
<div class="section-title">Research Questions</div>
<div class="section-content">
<ul>
<li><strong>RQ1:</strong> How does the performance of SoliDiffy compare to the most-closely related tool, Difftastic?</li>
<li><strong>RQ2:</strong> How does SoliDiffy perform when there are multiple changes in the smart contract source code?</li>
<li><strong>RQ3:</strong> How does the type of syntactic changes in file affect the performance of SoliDiffy?</li>
<li><strong>RQ4:</strong> How does SoliDiffy perform against line differencing on commit history of real-world smart contracts?</li>
</ul>
</div>
<div class="section-title">Results</div>
<div class="section-content">
<div class="results-box">
<strong>RQ1:</strong> SoliDiffy consistently produces shorter edit scripts across a variety of projects compared to Difftastic. SoliDiffy generates fewer edit actions, demonstrating its advantage in handling complex modifications, and also successfully analyzed a higher percentage of diff pairs than Difftastic (96.1% vs. 95.1%).
<div style="text-align: center;">
<img src="static/rq1.png" alt="RQ1 Results: KDE Plot of Mean Edit Script Lengths per Project" class="img-fluid mt-2" style="width:60% !important;">
</div>
</div>
<div class="results-box">
<strong>RQ2:</strong> SoliDiffy consistently produces smaller edit distances than Difftastic, even as the number of mutations increases. SoliDiffy maintains a lower average edit distance regardless of the complexity of changes, while Difftastic exhibits higher variability in performance.
<div style="text-align: center;">
<img src="static/rq2.png" alt="RQ2 Results: Edit Distances Comparison" class="img-fluid mt-3" style="width:60% !important;">
</div>
</div>
<div class="results-box">
<strong>RQ3:</strong> SoliDiffy excels in handling complex syntactic changes, such as code block mutations, where it produces shorter, more meaningful edit scripts. Difftastic performs better in simpler cases, but struggles with complex structural changes.
<div style="text-align: center;">
<img src="static/rq3.png" alt="RQ3 Results: Combined Edit Distances" class="img-fluid mt-3" style="width: 95%;">
</div>
</div>
<div class="results-box">
<strong>RQ4:</strong> SoliDiffy effectively analyzes real-world commit histories, such as the Uniswap v4 core project. Compared to Git's line-based differencing, SoliDiffy provides more compact results, making it highly suitable for advanced smart contract analysis tasks.
<div style="text-align: center;">
<img src="static/rq4.png" alt="RQ4 Results: Violin Plot of Edit Distances" class="img-fluid mt-3">
</div>
</div>
</div>
</main>
<footer class="mt-auto">
<p class="text-muted">© 2024 SoliDiffy. All rights reserved.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>