From 8fbc53df7bed6e389159553bdf9ca034407d2fa3 Mon Sep 17 00:00:00 2001 From: sjagtap3 Date: Wed, 3 Jul 2024 15:44:51 -0500 Subject: [PATCH] Task2 --- detailsPage.html | 21 +++- detailsScript.js | 306 +++++++++++++++++++++++++---------------------- 2 files changed, 182 insertions(+), 145 deletions(-) diff --git a/detailsPage.html b/detailsPage.html index 66ccf3d..1708f36 100644 --- a/detailsPage.html +++ b/detailsPage.html @@ -90,8 +90,22 @@
🙏 Please cite our paper if you ar
- - + + + + + + + + + + + @@ -100,9 +114,10 @@
🙏 Please cite our paper if you ar
+ 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 = `
- - - - - - - - - - - - + ${tableContent}
Code:
${code}
Input:
${input}
Expected Output:
${groundTruth}
`; - - // 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}
-
- `; - }); + + + + + + + + + + + ${type === 'der' ? ` + + + + ` : ''} + +
Reasoning${reasoning}
Predicted Output${output}
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();