+
diff --git a/detailsScript.js b/detailsScript.js
index 9bb50de..9dd01ea 100644
--- a/detailsScript.js
+++ b/detailsScript.js
@@ -1,193 +1,215 @@
-function filterDropdowns()
-{
- fetchData().then(data => {
- let datasetData = data[0];
- let ier = data[1];
- processData(datasetData, ier);
+var selectedDataset = "ier";
+let problemIds = {};
+
+// Entry point
+function filterDropdowns() {
+ document.getElementById('taskDropdown').addEventListener('change', function() {
+ selectedDataset = this.value;
+ fetchData().then(data => {
+ let datasetData = data[0];
+ processData(datasetData);
+ });
+ });
+
+ document.getElementById('datasetDropdown').addEventListener('change', function() {
+ console.log('Dataset selected:', this.value);
+ showGenerationTaskDropdown();
+ document.getElementById('generationTask').value = '';
+ });
+
+ document.getElementById('generationtask').addEventListener('change', function() {
+ console.log('Generation task selected:', this.value);
+
+ let dataset = document.getElementById('datasetDropdown').value;
+ if(this.value == 'code synthesis') {
+ populateProblemIdDropdown(dataset);
+ }
+ else {
+ }
+ });
+
+ document.getElementById('problemIdDropdown').addEventListener('change', function() {
+ let dataset = document.getElementById('datasetDropdown').value;
+ let problemId = this.value;
+ console.log('Problem ID selected:', this.value);
+ if (dataset && problemId) {
+ populateDetailsTable(dataset, problemId);
+ }
});
}
-// Fetch the data
-// function fetchData() {
-// return fetch('task1/dataset.json')
-// .then(response => response.json())
-// .catch(err => console.error("Error:", err));
-// }
+function showGenerationTaskDropdown() {
+ let tasks = ['code synthesis', 'code translation'];
+ populateDropdown('generationtask', tasks, 'Select a task');
+
+ document.getElementById('generationtask').style.display = 'inline';
+}
// Fetch the data
function fetchData() {
- return Promise.all([
- fetch('task1/dataset.json').then(response => response.json()),
- fetch('task1/ier_data.json').then(response => response.json())
- ]).catch(err => console.error("Error:", err));
+ let fetchUrls;
+ switch (selectedDataset) {
+ case "ier":
+ fetchUrls = ['task1/dataset.json', 'task1/ier_data.json'];
+ break;
+ case "der":
+ fetchUrls = ['task2/dataset_synthesis.json', 'task2/der_data.json'];
+ break;
+ case "sr":
+ fetchUrls = ['task3/dataset.json', 'task3/sr_data.json'];
+ break;
+ default:
+ return Promise.reject("Invalid dataset selected");
+ }
+
+ return Promise.all(fetchUrls.map(url => fetch(url).then(response => response.json())))
+ .catch(err => console.error("Error:", err));
}
// Process the data
-function processData(data, ier) {
- // Parse the JSON data
+function processData(data) {
let parsedData = data;
- let ierData = ier;
-
- // Get the datasets and problem ids
let datasets = Object.keys(parsedData);
console.log(datasets);
- populatedatasetDropdown(datasets);
-
- let problemIds = {};
- // Populate the problemIds object
+ problemIds = {};
datasets.forEach(dataset => {
problemIds[dataset] = Object.keys(parsedData[dataset]);
});
console.log(problemIds);
- // Add an event listener to the dataset dropdown
- document.getElementById('datasetDropdown').addEventListener('change', function() {
- console.log('Dataset selected:', this.value);
- populateProblemIdDropdown(problemIds, this.value);
- });
+ populateDropdown('datasetDropdown', datasets, 'Select a dataset');
- document.getElementById('problemIdDropdown').addEventListener('change', function() {
- let dataset = document.getElementById('datasetDropdown').value;
- let problemId = this.value;
-
- if (dataset && problemId) {
- populateDetailsTable(dataset, problemId, ierData);
- }
- });
}
-// Function to populate the dataset dropdown
-function populatedatasetDropdown(datasets) {
- let datasetDropdown = document.getElementById('datasetDropdown');
-
- // Clear the dropdown
- while (datasetDropdown.firstChild) {
- datasetDropdown.removeChild(datasetDropdown.firstChild);
+// Function to populate a dropdown
+function populateDropdown(dropdownId, items, defaultText) {
+ let dropdown = document.getElementById(dropdownId);
+ while (dropdown.firstChild) {
+ dropdown.removeChild(dropdown.firstChild);
}
let defaultOption = document.createElement('option');
- defaultOption.text = 'Select a dataset';
+ defaultOption.text = defaultText;
defaultOption.value = '';
- datasetDropdown.add(defaultOption);
+ dropdown.add(defaultOption);
- datasets.forEach(dataset => {
+ items.forEach(item => {
let option = document.createElement('option');
- option.text = dataset;
- option.value = dataset;
- datasetDropdown.add(option);
+ option.text = item;
+ option.value = item;
+ dropdown.add(option);
});
- datasetDropdown.value = '';
+ dropdown.value = '';
+ dropdown.style.display = 'inline';
+ document.getElementById(`${dropdownId}Label`).style.display = 'inline';
}
// Function to populate the problem id dropdown
-function populateProblemIdDropdown(problemIds, selectedDataset) {
- let problemIdDropdown = document.getElementById('problemIdDropdown');
-
- // Clear the dropdown
- while (problemIdDropdown.firstChild) {
- problemIdDropdown.removeChild(problemIdDropdown.firstChild);
- }
-
- // Add a default option
- let defaultOption = document.createElement('option');
- defaultOption.text = 'Select a problem id';
- defaultOption.value = '';
- problemIdDropdown.add(defaultOption);
-
- // Add the problem ids
- problemIds[selectedDataset].forEach(problemId => {
- let option = document.createElement('option');
- option.text = problemId;
- option.value = problemId;
- problemIdDropdown.add(option);
- });
+function populateProblemIdDropdown(selectedDataset) {
+ let problems = problemIds[selectedDataset] || [];
+ populateDropdown('problemIdDropdown', problems, 'Select a problem id');
- // Set the default option as selected
- problemIdDropdown.value = '';
-
- // Show the problem id dropdown
- problemIdDropdown.style.display = 'inline';
+ document.getElementById('problemIdDropdown').style.display = 'inline';
document.getElementById('problemIdDropdownLabel').style.display = 'inline';
}
-
-function populateDetailsTable(dataset, problemId, ierData) {
- // Fetch the data
+// Function to populate the details table
+function populateDetailsTable(dataset, problemId) {
fetchData().then(data => {
- // Get the code and actual input for the selected problem id
- let code = data[0][dataset][problemId]['code'];
- let input = data[0][dataset][problemId]['code_input'];
- let groundTruth = ierData["ChatGPT_3.5"][dataset][problemId]['ground_truth'];
+ let details;
+ if (selectedDataset == "ier") {
+ details = data[0][dataset][problemId];
+ let code = details['code'];
+ let input = details['code_input'];
+ let groundTruth = data[1]["ChatGPT_3.5"]?.[dataset][problemId]['ground_truth'] ?? 'Not Available';
+
+ displayDetailsTable([
+ { label: 'Code:', value: code },
+ { label: 'Input:', value: input },
+ { label: 'Expected Output:', value: groundTruth }
+ ]);
+
+ populateModelResults(data[1], dataset, problemId, 'ier');
+ } else if (selectedDataset == "der") {
+ details = data[0][dataset][problemId];
+ let f1 = details['nl'];
+ let f2 = details['asserts'];
+ let f3 = details['input_reasoning'];
+ let f4 = details['output_reasoning'];
+ let groundTruth = data[1]["ChatGPT_3.5"]?.[dataset][problemId]['ground-truth'] ?? 'Not Available';
+
+ displayDetailsTable([
+ { label: 'NL:', value: f1 },
+ { label: 'Asserts:', value: f2 },
+ { label: 'Input Reasoning:', value: f3 },
+ { label: 'Output Reasoning:', value: f4 },
+ { label: 'Expected Output:', value: groundTruth }
+ ]);
+
+ populateModelResults(data[1], dataset, problemId, 'der');
+ }
+ });
+}
+// Function to display details table
+function displayDetailsTable(rows) {
+ let tableContent = rows.map(row => `
+
+
${row.label}
+
${row.value}
+
`).join('');
- let table = `
+ let table = `
-
-
Code:
-
${code}
-
-
-
Input:
-
${input}
-
-
-
Expected Output:
-
${groundTruth}
-
+ ${tableContent}
`;
-
- // Insert the table into the div
- document.getElementById('detailsTable').innerHTML = table;
- populateModelResults(dataset, problemId);
- });
+ document.getElementById('detailsTable').innerHTML = table;
}
+// Function to populate the model results
+function populateModelResults(data, dataset, problemId, type) {
+ document.getElementById('modelResults').innerHTML = '';
+ let models = Object.keys(data);
-function populateModelResults(dataset, problemId) {
- // Fetch the data
- fetchData().then(data => {
- document.getElementById('modelResults').innerHTML = '';
-
- // Get the problem details for the selected problem id
- let models = Object.keys(data[1]);
+ let html = models.map(model => {
+ if (!model) return '';
- // Initialize the HTML string with table headers
- let html = '';
+ let details = data[model][dataset][problemId];
+ let color = type === 'ier' ? (details['label'] === 1 ? 'green' : 'red') :
+ details['label'] === 1 ? 'orange' : details['label'] === 0 ? 'red' : 'green';
- // Add a textbox and a table for each model
- models.forEach(model => {
- if (model == null || model=='') {
- return;
- }
- let details = data[1][model][dataset][problemId];
- let color = details['label'] === 1 ? 'green' : 'red';
+ let reasoning = details['reasoning'] || 'Not Available';
+ let output = details['output'] || 'Not Available';
+ let synthesized_code = type === 'der' ? details['synthesized_code'] || 'Not Available' : '';
- let reasoning = details['reasoning'] || 'Not Available';
- let output = details['output'] || 'Not Available';
-
- html += `
+ return `
-
-
-
-
Reasoning
-
${reasoning}
-
-
-
Predicted Output
-
${output}
-
-
-
-
- `;
- });
+
+
+
+
Reasoning
+
${reasoning}
+
+
+
Predicted Output
+
${output}
+
+ ${type === 'der' ? `
+
+
Synthesized Code
+
${synthesized_code}
+
` : ''}
+
+
+ `;
+ }).join('');
+
+ document.getElementById('modelResults').innerHTML = html;
+}
- // Insert the HTML into the div
- document.getElementById('modelResults').innerHTML = html;
- }).catch(err => console.error("Error:", err));
-}
\ No newline at end of file
+// Initialize the filterDropdowns function
+filterDropdowns();