Skip to content

Commit

Permalink
add asymmetry plot
Browse files Browse the repository at this point in the history
  • Loading branch information
@teobag
teobag committed Feb 11, 2025
1 parent 1510c7a commit f62a5eb
Show file tree
Hide file tree
Showing 3 changed files with 163 additions and 20 deletions.
35 changes: 27 additions & 8 deletions ACE/js/algorithms.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -982,16 +982,35 @@ function ACEDisplay() {
const pagesEvictedDiff = calculatePercentageDifference(pagesEvicted, ACEpagesEvicted);
const latencydiff = calculatePercentageDifference(tradLatency, aceLatencyval);

$("#ace-alg-buffer-misses").html(`${ACEbufferMiss} (${bufferMissDiff})`);
$("#ace-alg-buffer-hits").html(`${ACEbufferHit} (${bufferHitDiff})`);
$("#ace-alg-pages-read").html(`${ACEpagesRead} (${pagesReadDiff})`);
$("#ace-alg-pages-written").html(`${ACEpagesWritten} (${pagesWrittenDiff})`);
$("#ace-alg-read-IO").html(`${ACEreadIO} (${readIODiff})`);
$("#ace-alg-write-IO").html(`${ACEwriteIO} (${writeIODiff})`);
$("#ace-alg-pages-evicted").html(`${ACEpagesEvicted} (${pagesEvictedDiff})`);
$("#ace-alg-latency").html(`${aceLatencyval.toFixed(2)} (${latencydiff})`);
// ✅ Display the values with color-coded percentage differences
$("#ace-alg-buffer-misses").html(`${ACEbufferMiss}   ${formatDifference(bufferMissDiff, true)}`);
$("#ace-alg-buffer-hits").html(`${ACEbufferHit}   ${formatDifference(bufferHitDiff, false)}`);
$("#ace-alg-pages-read").html(`${ACEpagesRead}   ${formatDifference(pagesReadDiff, true)}`);
$("#ace-alg-pages-written").html(`${ACEpagesWritten}   ${formatDifference(pagesWrittenDiff, true)}`);
$("#ace-alg-read-IO").html(`${ACEreadIO}   ${formatDifference(readIODiff, true)}`);
$("#ace-alg-write-IO").html(`${ACEwriteIO}   ${formatDifference(writeIODiff, true)}`);
$("#ace-alg-pages-evicted").html(`${ACEpagesEvicted}   ${formatDifference(pagesEvictedDiff, true)}`);
$("#ace-alg-latency").html(`${aceLatencyval.toFixed(2)}   ${formatDifference(latencydiff, true)}`);
}

function formatDifference(diffStr, isLowerBetter) {
if (diffStr === "0.00%") {
return `<span style="color: black;">(--)</span>`; // Show "--" for no difference
}

let diffValue = parseFloat(diffStr);
let color;

if (isLowerBetter) {
// Lower value is better → Green if negative, Red if positive
color = diffValue < 0 ? "green" : "red";
} else {
// Higher value is better → Green if positive, Red if negative
color = diffValue > 0 ? "green" : "red";
}

return `<span style="color: ${color};">(${diffStr})</span>`;
}

function baseLRU(p){
var type = workload[p][0];
Expand Down
82 changes: 81 additions & 1 deletion ACE/js/workloadGenerator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@ $(document).ready(function(){

RWgraph(); // Now the RW plot updates only when the user clicks the button
Bgraph(); // Buffer pool graph updates only when the user clicks the button
ACELRUgraph();
});


Expand Down Expand Up @@ -431,6 +432,9 @@ function RWgraph(){
RWData = [LRUtrace, ACELRUtrace, CFLRUtrace, ACECFLRUtrace, LRUWSRtrace, ACELRUWSRtrace];
Plotly.newPlot('RWplot', RWData, RWlayout);

document.getElementById("RWplot-caption").innerText =
"ACE improves runtime of write-heavy workloads.";

if(progress==23){
$("#loadingbar").empty();
}
Expand Down Expand Up @@ -595,7 +599,8 @@ function Bgraph(){
};
console.log("graph");
Plotly.newPlot('Bplot', BData, Blayout);

document.getElementById("Bplot-caption").innerText =
"ACE is beneficial across a wide range of bufferpool size ";
$("#loadingbar").empty();

}
Expand All @@ -605,6 +610,81 @@ function Bgraph(){
})(1);
}


function ACELRUgraph(){
var b = parseInt($("#cmp_buffer_size_rw").val());
var a = parseInt($("#cmp_kappa_rw").val());

var LRUx = [];
var LRUy = [[], [], [], []]; // Four SSD configurations

var SSDConfigs = [
[12.4, 3.0, 6], // PCI
[100, 1.5, 9], // SATA
[6.8, 1.1, 5], // Optane
[180, 2.0, 19] // Virtual
];

(function myLoop(i) {
setTimeout(function() {
progress++;
LRUx.push(i);

for (let j = 0; j < SSDConfigs.length; j++) {
let workloadStats = IOcalc(RWWorkload(i), b, a, 1); // Running ACE-LRU instead of LRU
let base_latency = 12.4; // TODO: needs to be fixed
let asymmetry = SSDConfigs[j][1];
let write_latency = base_latency * asymmetry;
let latency = (workloadStats[2] * write_latency + workloadStats[3] * base_latency) / 1000;
LRUy[j].push(latency);
}

update(progress);

if (i < 100){
i+=10;
myLoop(i);
} else {
let traces = SSDConfigs.map((config, index) => {
return {
x: LRUx,
y: LRUy[index],
mode: "scatter",
name: `${['PCI (α = 3.0)', 'SATA (α = 1.5)', 'Optane (α = 1.1)', 'Virtual (α = 2.0)'][index]}`,
marker: { size: 12, symbol: 'circle-open' }
};
});

let layout = {
xaxis: {
autorange: true,
showgrid: false,
zeroline: false,
showline: true,
title: "Read Ratio (%)"
},
yaxis: {
autorange: true,
showgrid: false,
zeroline: false,
showline: true,
title: "Latency (ms)"
},
title: "ACE-LRU Latency"
};

Plotly.newPlot('LRUplot', traces, layout);

document.getElementById("LRUplot-caption").innerText =
"Devices with higher asymmetry (α) have higher gain for ACE";

if(progress==23){
$("#loadingbar").empty();
}
}
}, 100);
})(0);
}
//check if input values are too high
function capacity() {
var isComparative = $("#comparative-analysis").is(":visible");
Expand Down
66 changes: 55 additions & 11 deletions ACE/research.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -366,7 +366,7 @@ <h2>
<span id="ace-alg-pages-written" class="cost uncertain">0</span>
</div>
</div>

<!-- #Disk Pages Read-->
<div class="row">
<div class="col text-right">
Expand All @@ -380,7 +380,7 @@ <h2>
<span id="ace-alg-pages-read" class="cost uncertain">0</span>
</div>
</div>

<!-- #Buffer Misses -->
<div class="row">
<div class="col text-right">
Expand All @@ -394,7 +394,7 @@ <h2>
<span id="ace-alg-buffer-misses" class="cost uncertain">0</span>
</div>
</div>

<!-- #Buffer Hits-->
<div class="row">
<div class="col text-right">
Expand All @@ -408,19 +408,21 @@ <h2>
<span id="ace-alg-buffer-hits" class="cost uncertain">0</span>
</div>
</div>


<!-- #Write Batches -->
<div class="row">
<div class="col text-right">
<span id="base-alg-write-IO" class="cost uncertain" data-toggle="tooltip" data-placement="right">0</span>
</div>
<div class="col-2 text-center">
<span class="metric-title">#Write batches</span>
<span class="metric-title">#Write Batches</span>
</div>
<div class="col text-left">
<span id="ace-alg-write-IO" class="cost uncertain">0</span>
</div>
</div>


<!-- Latency -->
<div class="row">
<div class="col text-right">
<span id="base-alg-latency" class="cost uncertain" data-toggle="tooltip" data-placement="right">0</span>
Expand All @@ -434,6 +436,7 @@ <h2>
</div>
</div>


<!-- After the Performance Metrics Panel -->
<div class="container">
<div class="row">
Expand Down Expand Up @@ -660,16 +663,57 @@ <h5 class="text-center"><strong>Vary Buffer Pool Size</strong></h5>
<!-- Add a Spacer -->
<div style="height: 30px;"></div>

<!-- Plots -->
<div class="flex-parent-element" style="margin-top: 0px !important; padding-top: 0px !important;">
<div class="flex-child-element" id="RWplot"></div>
<div class="flex-child-element" id="Bplot"></div>
<!-- Plots Section -->
<div class="container">
<div class="row justify-content-center">
<!-- First Row (Top 2 Plots) -->
<div class="col-md-6">
<div id="RWplot"></div>
<p id="RWplot-caption" class="plot-caption"></p>
</div>
<div class="col-md-6">
<div id="LRUplot"></div>
<p id="LRUplot-caption" class="plot-caption"></p>
</div>
</div>

<!-- Second Row (Centered Bottom Plot) -->
<div class="row justify-content-center">
<div class="col-md-8">
<div id="Bplot"></div>
<p id="Bplot-caption" class="plot-caption"></p>
</div>
</div>
</div>


</div>
</div>
</div>

<style>
/* Ensures all plots have the same width & height */
#RWplot, #LRUplot, #Bplot {
width: 100%;
height: 400px;
}

/* Center the bottom plot */
.row.justify-content-center {
display: flex;
justify-content: center;
align-items: center;
}

/* Adjust column width to maintain consistency */
.col-md-6 {
max-width: 50%; /* Ensures the top two plots are evenly spaced */
}

.col-md-8 {
max-width: 50%; /* Centers and resizes the bottom plot */
}

.flex-parent-element {
display: flex;
flex-wrap: wrap;
Expand All @@ -680,7 +724,7 @@ <h5 class="text-center"><strong>Vary Buffer Pool Size</strong></h5>
}

.flex-child-element {
flex: 1 1 48%;
flex: 1 1 20%;
min-width: 500px; /* Wider */
height: 400px; /* Ensures proper height */
background-color: transparent; /* Removes box background */
Expand Down

0 comments on commit f62a5eb

Please sign in to comment.