Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changes for accuracy vs performance plot #4

Merged
merged 3 commits into from
Sep 2, 2024
Merged

Changes for accuracy vs performance plot #4

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3878a08
changes for accuracy vs performance graph
anandhu-eng Sep 2, 2024
aa570f3
Merge changes from main branch mlcommons
anandhu-eng Sep 2, 2024
58e7664
code clean - removed unecessary parameters
anandhu-eng Sep 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 153 additions & 0 deletions javascripts/results_charts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
function reConstructAccvsPerfChart(category, division, with_power, data) {
availabilities = [ "Available", "Preview", "RDI" ];
availabilities.forEach(function(availability) {
// filtered data as per the user choice
//console.log(filteredResults.length);
constructAccvsPerfChart(category, division, with_power, availability);
});
}

function constructAccvsPerfChart(category, division, with_power, availability) {
if(division == "open") {
drawAccvsPerfPlot(category, division, with_power, availability);
}
}

function drawAccvsPerfPlot(category, division, with_power, availability) {
// the data here is the preprocessed data through function preprocessData
models = []
if (category == "datacenter") {
models = models_datacenter;
}
else{
models = models_edge;
}
models.forEach(function(model, index) {
let accuracyMetric = ``;
// Currently the first accuracy matrix is used to construct the scatter plot
if (accuracyUnits.hasOwnProperty(model)) {
accuracyMetric = accuracyUnits[model].split(",")[0].trim();
}
if (category === "datacenter" && division === "open") {
let extractedData = extractTableDataForAccVsPerf(model, availability);
const chartContainer = document.getElementById(`AccVsPerfScatterPlot_${model}_${division}_${category}_${availability}`);
if (extractedData.length === 0) {
if (chartContainer) {
chartContainer.style.display = 'none'; // hide the div
}
return;
}
if (chartContainer) {
chartContainer.style.display = 'block'; // Show the div
}
// let filteredData = filterForAccvsPerfPlot(data, model, category, division, accuracyMetric);
if (extractedData.length !== 0) {
let chart = new CanvasJS.Chart(`AccVsPerfScatterPlot_${model}_${division}_${category}_${availability}`, {
animationEnabled: true,
theme: "light2",
title:{
text: `Accuracy vs Performance for ${model}`
},
axisX:{
title: "Performance"
},
axisY:{
title: "Accuracy",
includeZero: false
},
data: [{
type: "scatter",
toolTipContent: "<b>ID:</b> {id}<br/><b>Submitter:</b> {submitter}<br/><b>System:</b> {system}<br/><b>Accelerator:</b> {accelerator}<br/><b>Scenario:</b> {scenario}<br/><b>Performance:</b> {x}<br/><b>Accuracy:</b> {y}",
dataPoints: extractedData
}]
});
chart.render();
}
}
});
}

function extractTableDataForAccVsPerf(model, availability) {
let mylocation = [], system_names = [], submitter = [], accelerator = [], offline_accuracy = [], offline_performance = [], server_accuracy = [], server_performance = [];
let locationIndex = {}, locCount = 0;
let extractedData = [];
let childTag = `#results_${model}_${availability}`
const escapedChildTag = childTag.replace(/\./g, '\\.');
// console.log(`#results_${model}_${availability}`)
$(`${escapedChildTag} tbody tr td:nth-child(1)`).each( function(){
if (!($(this).is(":hidden")) ){
var x = $(this).text();
mylocation.push(x );
if (! (x in locationIndex)) {
locationIndex[x] = locCount++;
}
}
});

$(`${escapedChildTag} tbody tr td:nth-child(2)`).each( function(){
if (!($(this).is(":hidden")) )
system_names.push( $(this).text() );
});

$(`${escapedChildTag} tbody tr td:nth-child(3)`).each( function(){
if (!($(this).is(":hidden")) )
submitter.push( $(this).text() );
});

$(`${escapedChildTag} tbody tr td:nth-child(4)`).each( function(){
if (!($(this).is(":hidden")) )
accelerator.push( $(this).text() );
});

$(`${escapedChildTag} tbody tr td:nth-child(6)`).each( function(){
if (!($(this).is(":hidden")) )
server_accuracy.push( $(this).text() );
});

$(`${escapedChildTag} tbody tr td:nth-child(7)`).each( function(){
if (!($(this).is(":hidden")) )
server_performance.push( $(this).text() );
});

$(`${escapedChildTag} tbody tr td:nth-child(8)`).each( function(){
if (!($(this).is(":hidden")) )
offline_accuracy.push( $(this).text() );
});

$(`${escapedChildTag} tbody tr td:nth-child(9)`).each( function(){
if (!($(this).is(":hidden")) )
offline_performance.push( $(this).text() );
});

Object.entries(locationIndex).forEach(([id, index]) => {
let tmpDict = {};
tmpDict["id"] = id;
tmpDict["system"] = system_names[index];
tmpDict["submitter"] = submitter[index];
tmpDict["accelerator"] = accelerator[index];
if (offline_accuracy[index] !== '' && offline_accuracy[index] !== undefined) {
tmpDict["scenario"] = "Offline";
tmpDict["markerType"] = "circle";
// the accuracy value is in the format " 42.0595, 19.8530, 26.7729, 1194.4000 "
// using to fixed, returns a string, which we have to convert to float again
tmpDict["y"] = parseFloat(parseFloat(offline_accuracy[index].trim().split(',')[0].trim()).toFixed(4));
tmpDict["x"] = parseFloat(parseFloat(offline_performance[index].trim()).toFixed(4));
// copy of tmpDict object is pushed to the returning array as only reference to the object is pushed
// this results in modification of already pushed content
extractedData.push({ ...tmpDict });
}
if (server_accuracy[index] !== '' && server_accuracy[index] !== undefined) {
tmpDict["scenario"] = "Server";
tmpDict["markerType"] = "triangle";
// the accuracy value is in the format " 42.0595, 19.8530, 26.7729, 1194.4000 "
tmpDict["y"] = parseFloat(parseFloat(server_accuracy[index].trim().split(',')[0].trim()).toFixed(4));
tmpDict["x"] = parseFloat(parseFloat(server_performance[index].trim()).toFixed(4));
extractedData.push({ ...tmpDict });
}
});

// console.log(extractedData);

return extractedData;

}
10 changes: 8 additions & 2 deletions javascripts/results_tablesorter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ $(document).ready(function() {
readAllData().then(function(allData) {
// console.log(allData);
reConstructTables(category, division, with_power[0], allData);
reConstructAccvsPerfChart(category, division, with_power[0], allData);
constructChartFromSummary(allData, category, division, with_power[0]);
}).catch(function(error) {
console.error(error);
Expand Down Expand Up @@ -572,7 +573,7 @@ function constructOpenTableModel(model, category, with_power, availability, myda
//console.log(html);
return html;
}
function constructOpenTable(category, with_power, availability, data) {
function constructOpenTable(category, division, with_power, availability, data) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need division here?

Copy link
Contributor Author

@anandhu-eng anandhu-eng Sep 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @arjunsuresh , i have cleaned up the unnecessary parameters in commit 58e7664

models = []
if (category == "datacenter") {
models = models_datacenter;
Expand All @@ -583,6 +584,11 @@ function constructOpenTable(category, with_power, availability, data) {
html = ''
models.forEach(function(model, index) {
html += constructOpenTableModel(model, category, with_power, availability, data);
if (category === "datacenter" && division === "open") {
html += `
<div id="AccVsPerfScatterPlot_${model}_${division}_${category}_${availability}" style="height: 370px; width: 100%; display: none; "></div>
`;
}
});
//console.log(with_power);
// html += "</table>";
Expand All @@ -603,7 +609,7 @@ function constructTable(category, division, with_power, availability, data) {
}
var needsFooter = Object.keys(mydata).length > 5;
if(division == "open") {
html = constructOpenTable(category, with_power, availability, mydata);
html = constructOpenTable(category, division, with_power, availability, mydata);
//console.log(html);
return html;
}
Expand Down
Loading