Skip to content

Commit

Permalink
More robust table filler functions, they combine data in one table.
Browse files Browse the repository at this point in the history
  • Loading branch information
@izzat5233
izzat5233 committed Dec 18, 2023
1 parent 723d639 commit a8116b4
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 64 deletions.
66 changes: 32 additions & 34 deletions web/content/control/data.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,13 @@ <h5>Training Data</h5>
<p class="btn btn-danger px-2" id="clearTrainingDataButton"
onclick="onClearTrainingData()">Clear</p>
</div>
<div class="row">
<table class="col table table-bordered">
<thead id="trainInPreviewThead"></thead>
<tbody id="trainInPreviewTbody"></tbody>
</table>
<table class="col table table-bordered">
<thead id="trainOutPreviewThead"></thead>
<tbody id="trainOutPreviewTbody"></tbody>
</table>
<div class="row justify-content-center">
<div class="col">
<table class="table table-bordered">
<thead id="trainPreviewThead"></thead>
<tbody id="trainPreviewTbody"></tbody>
</table>
</div>
</div>
</div>
<div class="col">
Expand All @@ -38,15 +36,13 @@ <h5>Testing Data</h5>
<p class="btn btn-danger px-2" id="clearTestingDataButton"
onclick="onClearTestingData()">Clear</p>
</div>
<div class="row">
<table class="col table table-bordered">
<thead id="testInPreviewThead"></thead>
<tbody id="testInPreviewTbody"></tbody>
</table>
<table class="col table table-bordered">
<thead id="testOutPreviewThead"></thead>
<tbody id="testOutPreviewTbody"></tbody>
</table>
<div class="row justify-content-center">
<div class="col">
<table class="table table-bordered">
<thead id="testPreviewThead"></thead>
<tbody id="testPreviewTbody"></tbody>
</table>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -99,17 +95,13 @@ <h5>Testing Data</h5>
}

function clearTrainPreviewTable() {
document.getElementById('trainInPreviewThead').innerHTML = "";
document.getElementById('trainInPreviewTbody').innerHTML = "";
document.getElementById('trainOutPreviewThead').innerHTML = "";
document.getElementById('trainOutPreviewTbody').innerHTML = "";
document.getElementById('trainPreviewThead').innerHTML = "";
document.getElementById('trainPreviewTbody').innerHTML = "";
}

function clearTestPreviewTable() {
document.getElementById('testInPreviewThead').innerHTML = "";
document.getElementById('testInPreviewTbody').innerHTML = "";
document.getElementById('testOutPreviewThead').innerHTML = "";
document.getElementById('testOutPreviewTbody').innerHTML = "";
document.getElementById('testPreviewThead').innerHTML = "";
document.getElementById('testPreviewTbody').innerHTML = "";
}

function onClearTrainingData() {
Expand All @@ -128,23 +120,29 @@ <h5>Testing Data</h5>

function onPreviewTrainingData() {
clearTrainPreviewTable()

let input = network.getTrainInPreview();
setupTableHeader("#trainInPreviewThead", input.get(0).size(), "Input");
fillNumTable("#trainInPreviewTbody", input);
setupTableHeader("#trainPreviewThead", input.get(0).size(), "Input");
fillNumTable("#trainPreviewTbody", input);

let output = network.getTrainOutPreview();
setupTableHeader("#trainOutPreviewThead", output.get(0).size(), "Output");
fillNumTable("#trainOutPreviewTbody", output);
setupTableHeader("#trainPreviewThead", output.get(0).size(), "Output");
fillNumTable("#trainPreviewTbody", output);

return input.size();
}

function onPreviewTestingData() {
clearTestPreviewTable()

let input = network.getTestInPreview();
setupTableHeader("#testInPreviewThead", input.get(0).size(), "Input");
fillNumTable("#testInPreviewTbody", input);
setupTableHeader("#testPreviewThead", input.get(0).size(), "Input");
fillNumTable("#testPreviewTbody", input);

let output = network.getTestOutPreview();
setupTableHeader("#testOutPreviewThead", output.get(0).size(), "Output");
fillNumTable("#testOutPreviewTbody", output);
setupTableHeader("#testPreviewThead", output.get(0).size(), "Output");
fillNumTable("#testPreviewTbody", output);

return input.size();
}
</script>
43 changes: 24 additions & 19 deletions web/content/control/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,37 +23,42 @@
</div>
</div>
<hr class="my-4">
<div class="row justify-content-center">
<table class="col table table-bordered">
<thead id="predictedInThead"></thead>
<tbody id="predictedInTbody"></tbody>
</table>
<table class="col table table-bordered">
<thead id="predictedOutThead"></thead>
<tbody id="predictedOutTbody"></tbody>
</table>
<div class="container">
<div class="row justify-content-center">
<div class="col">
<table class="table table-bordered">
<thead id="predictedThead"></thead>
<tbody id="predictedTbody"></tbody>
</table>
</div>
</div>
</div>
<script>
function clearPredictedTable() {
document.getElementById('predictedInThead').innerHTML = "";
document.getElementById('predictedInTbody').innerHTML = "";
document.getElementById('predictedOutThead').innerHTML = "";
document.getElementById('predictedOutTbody').innerHTML = "";
document.getElementById('predictedThead').innerHTML = "";
document.getElementById('predictedTbody').innerHTML = "";
document.getElementById("downloadOutputsButton").disabled = true;
}

function getTestOutputs() {
clearPredictedTable();
document.getElementById("downloadOutputsButton").disabled = false;

network.predictTestingOutputs();
const thead = "#predictedThead";
const tbody = "#predictedTbody";

let input = network.getTestIn();
setupTableHeader("#predictedInThead", input.get(0).size(), "Input");
fillNumTable("#predictedInTbody", input);
setupTableHeader(thead, input.get(0).size(), "Input");
fillNumTable(tbody, input);

let output = network.getTestOut();
setupTableHeader(thead, output.get(0).size(), "Output");
fillNumTable(tbody, output);

let predicted = network.getPredictedOutputs();
setupTableHeader(thead, predicted.get(0).size(), "Predicted");
fillNumTable(tbody, predicted);

let output = network.getPredictedOutputs();
setupTableHeader("#predictedOutThead", output.get(0).size(), "Output");
fillNumTable("#predictedOutTbody", output, window.innerWidth > 400 ? 8 : 4);
showSimpleToast("<h5>Computed " + input.size() + " predictions</h5>");
}
</script>
26 changes: 15 additions & 11 deletions web/static/js/table.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
function setupTableHeader(theadSelector, numCols, name = "") {
const thead = d3.select(theadSelector);
let tr = thead.selectAll("tr").join();
if (tr.empty()) tr = thead.append('tr');

for (let i = 0; i < numCols; i++) {
tr.append('th').text(name + (i + 1));
}
}

function fillNumTable(tbodySelector, vecVecNum, decimalPlaces = 4) {
const tbody = d3.select(tbodySelector);
for (let i = 0; i < vecVecNum.size(); i++) {
const tr = tbody.append('tr');
for (let j = 0; j < vecVecNum.get(i).size(); j++) {
for (let i = 0; i < vecVecNum.size(); ++i) {
let tr = tbody.selectAll(`tr:nth-child(${i + 1})`);
if (tr.empty()) tr = tbody.append('tr');

for (let j = 0; j < vecVecNum.get(i).size(); ++j) {
const num = vecVecNum.get(i).get(j);
const formattedNum = typeof num === 'number' ? num.toFixed(decimalPlaces) : num;
tr.append('td').text(formattedNum);
}
}
}

function setupTableHeader(theadSelector, numCols, name = "") {
const thead = d3.select(theadSelector);
const tr = thead.append('tr');
for (let i = 0; i < numCols; i++) {
tr.append('th').text(name + (i + 1)); // Headers numbered 1, 2, 3, ...
}
}

0 comments on commit a8116b4

Please sign in to comment.