ISOVIS
/
VisEvol
8
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

fixed comments

Browse Source
master
Angelos Chatzimparmpas 4 years ago
parent 9a10184093
commit af8a04f2bd
11 changed files with 234 additions and 190 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. BIN
      cachedir/joblib/run/randomSearch/66b1347d5a0a771524230baecfc307d3/output.pkl
  2. 1
      cachedir/joblib/run/randomSearch/857a7d5d95dd356021a96950625e2685/metadata.json
  3. BIN
      cachedir/joblib/run/randomSearch/941c9bbd8164b30831d49aded3da2e04/output.pkl
  4. 1
      cachedir/joblib/run/randomSearch/c2a6a25b366a9dc4607b8475c742ec6f/metadata.json
  5. 136
      frontend/src/components/AlgorithmsController.vue
  6. 18
      frontend/src/components/Ensemble.vue
  7. 34
      frontend/src/components/History.vue
  8. 16
      frontend/src/components/HyperParameterSpace.vue
  9. 210
      frontend/src/components/Main.vue
  10. 4
      frontend/src/components/ValidationController.vue
  11. 4
      frontend/src/main.js

BIN
cachedir/joblib/run/randomSearch/66b1347d5a0a771524230baecfc307d3/output.pkl
View File

Binary file not shown.

1
cachedir/joblib/run/randomSearch/857a7d5d95dd356021a96950625e2685/metadata.json
Unescape View File

@ -0,0 +1 @@
{"duration": 65.70701098442078, "input_args": {"XData": " Fbs Slope Trestbps Exang Thalach Age Chol Sex Oldpeak Restecg Cp Ca Thal\n0 1 0 145 0 150 63 233 1 2.3 0 3 0 1\n1 0 0 130 0 187 37 250 1 3.5 1 2 0 2\n2 0 2 130 0 172 41 204 0 1.4 0 1 0 2\n3 0 2 120 0 178 56 236 1 0.8 1 1 0 2\n4 0 2 120 1 163 57 354 0 0.6 1 0 0 2\n.. ... ... ... ... ... ... ... ... ... ... .. .. ...\n904 0 1 140 1 123 57 241 0 0.2 1 0 0 3\n905 0 1 110 0 132 45 264 1 1.2 1 3 0 3\n906 1 1 144 0 141 68 193 1 3.4 1 0 2 3\n907 0 1 130 1 115 57 131 1 1.2 1 0 1 3\n908 0 1 130 0 174 57 236 0 0.0 0 1 1 2\n\n[909 rows x 13 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]", "clf": "KNeighborsClassifier(algorithm='ball_tree', n_neighbors=16)", "params": "{'n_neighbors': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99], 'metric': ['chebyshev', 'manhattan', 'euclidean', 'minkowski'], 'algorithm': ['brute', 'kd_tree', 'ball_tree'], 'weights': ['uniform', 'distance']}", "eachAlgor": "'KNN'", "AlgorithmsIDsEnd": "0"}}

BIN
cachedir/joblib/run/randomSearch/941c9bbd8164b30831d49aded3da2e04/output.pkl
View File

Binary file not shown.

1
cachedir/joblib/run/randomSearch/c2a6a25b366a9dc4607b8475c742ec6f/metadata.json
Unescape View File

@ -0,0 +1 @@
{"duration": 61.642314195632935, "input_args": {"XData": " Fbs Slope Trestbps Exang Thalach Age Chol Sex Oldpeak Restecg Cp Ca Thal\n0 1 0 145 0 150 63 233 1 2.3 0 3 0 1\n1 0 0 130 0 187 37 250 1 3.5 1 2 0 2\n2 0 2 130 0 172 41 204 0 1.4 0 1 0 2\n3 0 2 120 0 178 56 236 1 0.8 1 1 0 2\n4 0 2 120 1 163 57 354 0 0.6 1 0 0 2\n.. ... ... ... ... ... ... ... ... ... ... .. .. ...\n702 0 1 140 1 123 57 241 0 0.2 1 0 0 3\n703 0 1 110 0 132 45 264 1 1.2 1 3 0 3\n704 1 1 144 0 141 68 193 1 3.4 1 0 2 3\n705 0 1 130 1 115 57 131 1 1.2 1 0 1 3\n706 0 1 130 0 174 57 236 0 0.0 0 1 1 2\n\n[707 rows x 13 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]", "clf": "KNeighborsClassifier(algorithm='ball_tree', metric='chebyshev', n_neighbors=52)", "params": "{'n_neighbors': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99], 'metric': ['chebyshev', 'manhattan', 'euclidean', 'minkowski'], 'algorithm': ['brute', 'kd_tree', 'ball_tree'], 'weights': ['uniform', 'distance']}", "eachAlgor": "'KNN'", "AlgorithmsIDsEnd": "0"}}

136
frontend/src/components/AlgorithmsController.vue
Unescape View File

@ -1,7 +1,8 @@
<template>
<div id="containerForAllAlg">
<div id="Bees" class="chart-wrapper" style="min-height: 357px;"></div>
<div id="Bees" class="chart-wrapper" style="min-height: 307px;"></div>
<div id="MainPlot"></div>
<div id="uncertainty"></div>
</div>
</template>
@ -32,6 +33,7 @@ export default {
svg.selectAll("*").remove();
var svg = d3.select("#MainPlot");
svg.selectAll("*").remove();
Plotly.purge('uncertainty')
this.PerF = []
this.PerFCM = []
this.storedEnsem = []
@ -44,8 +46,16 @@ export default {
svg.selectAll("*").remove();
var svg = d3.select("#MainPlot");
svg.selectAll("*").remove();
Plotly.purge('uncertainty')
var chart1
var data = []
var originalPositions = []
var belongs = []
var newPositions = []
var difference = []
var maximumDiff = 0
var minimumDiff = 0
var average = new Array(5).fill(0);
for (let i=0; i<this.storedCM.length; i++){
let tempSplit = this.storedCM[i].split(/([0-9]+)/)
@ -129,7 +139,7 @@ export default {
}
var widthChr = 589;
var heightChr = 330;
var heightChr = 280;
let svgAlg = d3v5
.select("#MainPlot")
@ -161,7 +171,10 @@ export default {
})
.attr("r", (d) => d.size)
.attr("cx", (d) => xScale(d.Algorithm))
.attr("cy", (d) => yScale(d.value));
.attr("cy", function (d) {
originalPositions.push(yScale(d.value))
return yScale(d.value)
});
let simulation = d3v5
.forceSimulation(data)
@ -199,26 +212,98 @@ export default {
.attr("cy", (d) => d.y);
}
function first() {
simulation.alphaDecay(0.1);
second()
setTimeout(function () {
tick();
}, 6000);
}
simulation.alphaDecay(0.1);
setTimeout(function () {
tick();
d3v5.selectAll(".circ").attr("cy", function (d) {
belongs.push(d.Algorithm)
newPositions.push(d.y)
return d.y
})
for(var i = 0;i<=originalPositions.length-1;i++)
difference.push(Math.ceil(Math.abs(newPositions[i] - originalPositions[i])));
maximumDiff = Math.max(difference)
minimumDiff = Math.min(difference)
var localSum = new Array(5).fill(0);
var localCount = new Array(5).fill(0);
for (let j = 0; j<belongs.length; j++) {
if(belongs[j] == "KNN") {
localSum[0] = localSum[0] + difference[j]
localCount[0]++
}
else if (belongs[j] == "LR") {
localSum[1] = localSum[1] + difference[j]
localCount[1]++
} else if (belongs[j] == "MLP") {
localSum[2] = localSum[2] + difference[j]
localCount[2]++
} else if (belongs[j] == "RF") {
localSum[3] = localSum[3] + difference[j]
localCount[3]++
} else {
localSum[4] = localSum[4] + difference[j]
localCount[4]++
}
}
for (let k = 0; k<localSum.length; k++) {
average[k] = localSum[k]/localCount[k]
}
var dataPlot = [
{
x: ['KNN', 'LR', 'MLP', 'RF', 'GradB'],
y: average,
marker:{
color: ['rgb(255,127,0)', 'rgb(253,191,111)', 'rgb(251,154,153)', 'rgb(177,89,40)', 'rgb(166,206,227)']
},
type: 'bar'
}
];
var layout = {
xaxis: {
visible: false
},
yaxis: {
range: [minimumDiff, maximumDiff],
title: {
text: 'Dev. (px)',
}
},
title: {
text: 'Visualization Uncertainty (Mean Deviation in Pixels)',
},
width: 589,
height: 50,
showlegend: false,
bargap :0.60,
margin: {
l: 40,
r: 0,
b: 5,
t: 20,
pad: 0
},
};
var config = {'displayModeBar': false}
Plotly.newPlot('uncertainty', dataPlot, layout, config);
}, 6000);
function second() {
chart1 = makeDistroChart({
data:data,
xName:'Algorithm',
yName:'value',
axisLabels: {xAxis: 'Algorithhm', yAxis: '# Performance (%) #'},
axisLabels: {xAxis: 'Algorithhm', yAxis: '# Ov. Performance (%) #'},
selector:"#Bees",
constrainExtremes:true});
//chart1.renderDataPlots({showPlot:true,plotType:'beeswarm',showBeanLines:false, colors:null});
}
first()
@ -249,10 +334,10 @@ export default {
yName: null,
selector: null,
axisLables: null,
yTicks: 1,
yTicks: 0.25,
scale: 'linear',
chartSize: {width: 825, height: 420},
margin: {top: 15, right: 45, bottom: 25, left: 40},
chartSize: {width: 825, height: 354},
margin: {top: 15, right: 45, bottom: 75, left: 40},
constrainExtremes: false,
color: ['#ff7f00','#fdbf6f','#fb9a99','#b15928','#a6cee3']
};
@ -956,4 +1041,21 @@ export default {
#MainPlot {
z-index: 10;
}
.gtitle {
transform: translate(-351px, -93px) !important;
font-size: 18.5px !important;
font-family: sans-serif !important;
}
.g-ytitle {
transform: translate(0px, 0px) !important;
}
.ytitle {
transform: rotate(-90deg) translate(67px, -530px) !important;
font-size: 16px !important;
font-family: sans-serif !important;
}
</style>

18
frontend/src/components/Ensemble.vue
Unescape View File

@ -148,7 +148,7 @@ export default {
size: 16,
colorscale: 'Viridis',
colorbar: {
title: '# Performance (%) #',
title: '# Ov. Performance (%) #',
titleside:'right',
},
}
@ -164,7 +164,7 @@ export default {
visible: false,
range: [minY, maxY]
},
font: { family: 'Helvetica', size: 16, color: '#000000' },
font: { family: 'Helvetica', size: 22, color: '#000000' },
autosize: true,
width: width,
height: height,
@ -212,7 +212,7 @@ export default {
size: 16,
colorscale: 'Viridis',
colorbar: {
title: '# Performance (%) #',
title: '# Ov. Performance (%) #',
titleside: 'right'
},
}
@ -227,6 +227,7 @@ export default {
visible: false,
range: [minY, maxY]
},
font: { family: 'Helvetica', size: 22, color: '#000000' },
autosize: true,
width: width,
height: height,
@ -264,7 +265,7 @@ export default {
size: 16,
colorscale: 'Viridis',
colorbar: {
title: '# Performance (%) #',
title: '# Ov. Performance (%) #',
titleside: 'right'
},
}
@ -280,6 +281,7 @@ export default {
visible: false,
range: [minY, maxY]
},
font: { family: 'Helvetica', size: 22, color: '#000000' },
autosize: true,
width: width,
height: height,
@ -362,4 +364,10 @@ export default {
EventBus.$on('resetViews', this.reset)
}
}
</script>
</script>
<style>
.infolayer {
transform: scale(0.7) translate(520px, 110px) !important;
}
</style>

34
frontend/src/components/History.vue
Unescape View File

@ -354,43 +354,43 @@ export default {
{"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99",valueN:this.RandomSearLoc},
{"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f",valueN:this.RandomSearLoc},
{"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00",valueN:this.RandomSearLoc},
{"name":"Random search","node":5,"month":"RandSear","color":"#ffffff",valueN:this.RandomSearLoc},
{"name":"Random Search \u2014 S0","node":5,"month":"RandSear","color":"#ffffff",valueN:this.RandomSearLoc},
{"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3",valueN:this.RandomSearLoc/2},
{"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928",valueN:this.RandomSearLoc/2},
{"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99",valueN:this.RandomSearLoc/2},
{"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f",valueN:this.RandomSearLoc/2},
{"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00",valueN:this.RandomSearLoc/2},
{"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
{"name":"(M) Mutate \u2014 S1","node":11,"month":"Crossover_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
{"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3",valueN:this.RandomSearLoc/2},
{"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928",valueN:this.RandomSearLoc/2},
{"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99",valueN:this.RandomSearLoc/2},
{"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f",valueN:this.RandomSearLoc/2},
{"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00",valueN:this.RandomSearLoc/2},
{"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
{"name":"(C) Crossover \u2014 S1","node":17,"month":"Mutate_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
{"name":"GradB","node":18,"month":"Crossover_S2","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":19,"month":"Crossover_S2","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":20,"month":"Crossover_S2","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":21,"month":"Crossover_S2","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":22,"month":"Crossover_S2","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Mutate S2 (M)","node":23,"month":"Crossover_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"Mutate \u2014 S2 (M)","node":23,"month":"Crossover_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"GradB","node":24,"month":"Mutate_S2","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":25,"month":"Mutate_S2","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":26,"month":"Mutate_S2","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":27,"month":"Mutate_S2","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":28,"month":"Mutate_S2","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Crossover S2 (M)","node":29,"month":"Mutate_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"Crossover \u2014 S2 (M)","node":29,"month":"Mutate_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"GradB","node":30,"month":"Crossover_S2_Prime","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":31,"month":"Crossover_S2_Prime","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":32,"month":"Crossover_S2_Prime","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":33,"month":"Crossover_S2_Prime","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":34,"month":"Crossover_S2_Prime","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Mutate S2 (C)","node":35,"month":"Crossover_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"Mutate \u2014 S2 (C)","node":35,"month":"Crossover_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"GradB","node":36,"month":"Mutate_S2_Prime","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":37,"month":"Mutate_S2_Prime","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":38,"month":"Mutate_S2_Prime","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":39,"month":"Mutate_S2_Prime","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":40,"month":"Mutate_S2_Prime","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Crossover S2 (C)","node":41,"month":"Mutate_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"Crossover \u2014 S2 (C)","node":41,"month":"Mutate_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
],
"links":[
@ -841,43 +841,43 @@ export default {
{"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99",valueN:this.RandomSearLoc},
{"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f",valueN:this.RandomSearLoc},
{"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00",valueN:this.RandomSearLoc},
{"name":"Random search","node":5,"month":"RandSear","color":"#ffffff",valueN:this.RandomSearLoc},
{"name":"Random Search \u2014 S0","node":5,"month":"RandSear","color":"#ffffff",valueN:this.RandomSearLoc},
{"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3",valueN:this.RandomSearLoc/2},
{"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928",valueN:this.RandomSearLoc/2},
{"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99",valueN:this.RandomSearLoc/2},
{"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f",valueN:this.RandomSearLoc/2},
{"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00",valueN:this.RandomSearLoc/2},
{"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
{"name":"(M) Mutate \u2014 S1","node":11,"month":"Crossover_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
{"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3",valueN:this.RandomSearLoc/2},
{"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928",valueN:this.RandomSearLoc/2},
{"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99",valueN:this.RandomSearLoc/2},
{"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f",valueN:this.RandomSearLoc/2},
{"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00",valueN:this.RandomSearLoc/2},
{"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
{"name":"(C) Crossover \u2014 S1","node":17,"month":"Mutate_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
{"name":"GradB","node":18,"month":"Crossover_S2","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":19,"month":"Crossover_S2","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":20,"month":"Crossover_S2","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":21,"month":"Crossover_S2","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":22,"month":"Crossover_S2","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Mutate S2 (M)","node":23,"month":"Crossover_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"Mutate \u2014 S2 (M)","node":23,"month":"Crossover_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"GradB","node":24,"month":"Mutate_S2","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":25,"month":"Mutate_S2","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":26,"month":"Mutate_S2","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":27,"month":"Mutate_S2","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":28,"month":"Mutate_S2","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Crossover S2 (M)","node":29,"month":"Mutate_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"Crossover \u2014 S2 (M)","node":29,"month":"Mutate_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"GradB","node":30,"month":"Crossover_S2_Prime","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":31,"month":"Crossover_S2_Prime","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":32,"month":"Crossover_S2_Prime","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":33,"month":"Crossover_S2_Prime","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":34,"month":"Crossover_S2_Prime","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Mutate S2 (C)","node":35,"month":"Crossover_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"Mutate \u2014 S2 (C)","node":35,"month":"Crossover_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"GradB","node":36,"month":"Mutate_S2_Prime","color":"#a6cee3",valueN:this.RandomSearLoc/4},
{"name":"RF","node":37,"month":"Mutate_S2_Prime","color":"#b15928",valueN:this.RandomSearLoc/4},
{"name":"MLP","node":38,"month":"Mutate_S2_Prime","color":"#fb9a99",valueN:this.RandomSearLoc/4},
{"name":"LR","node":39,"month":"Mutate_S2_Prime","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
{"name":"KNN","node":40,"month":"Mutate_S2_Prime","color":"#ff7f00",valueN:this.RandomSearLoc/4},
{"name":"Crossover S2 (C)","node":41,"month":"Mutate_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
{"name":"Crossover \u2014 S2 (C)","node":41,"month":"Mutate_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
],
"links":[
@ -1174,19 +1174,19 @@ export default {
{"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99", valueN: this.RandomSearLoc},
{"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f", valueN: this.RandomSearLoc},
{"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00", valueN: this.RandomSearLoc},
{"name":"Random search","node":5,"month":"RandSear","color":"#ffffff", valueN: this.RandomSearLoc},
{"name":"Random Search \u2014 S0","node":5,"month":"RandSear","color":"#ffffff", valueN: this.RandomSearLoc},
{"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3", valueN: this.RandomSearLoc/2},
{"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928", valueN: this.RandomSearLoc/2},
{"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99", valueN: this.RandomSearLoc/2},
{"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f", valueN: this.RandomSearLoc/2},
{"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00", valueN: this.RandomSearLoc/2},
{"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff", valueN: this.RandomSearLoc/2},
{"name":"(M) Mutate \u2014 S1","node":11,"month":"Crossover_S1","color":"#ffffff", valueN: this.RandomSearLoc/2},
{"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3", valueN: this.RandomSearLoc/2},
{"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928", valueN: this.RandomSearLoc/2},
{"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99", valueN: this.RandomSearLoc/2},
{"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f", valueN: this.RandomSearLoc/2},
{"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00", valueN: this.RandomSearLoc/2},
{"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff", valueN: this.RandomSearLoc/2},
{"name":"(C) Crossover \u2014 S1","node":17,"month":"Mutate_S1","color":"#ffffff", valueN: this.RandomSearLoc/2},
],
"links":[

16
frontend/src/components/HyperParameterSpace.vue
Unescape View File

@ -145,7 +145,7 @@ export default {
size: 12,
colorscale: 'Viridis',
colorbar: {
title: '# Performance (%) #',
title: '# Ov. Performance (%) #',
titleside:'right',
},
}
@ -161,7 +161,7 @@ export default {
visible: false,
range: [minY, maxY]
},
font: { family: 'Helvetica', size: 16, color: '#000000' },
font: { family: 'Helvetica', size: 22, color: '#000000' },
autosize: true,
width: width,
height: height,
@ -209,7 +209,7 @@ export default {
size: 12,
colorscale: 'Viridis',
colorbar: {
title: '# Performance (%) #',
title: '# Ov. Performance (%) #',
titleside: 'right'
},
}
@ -224,6 +224,7 @@ export default {
visible: false,
range: [minY, maxY]
},
font: { family: 'Helvetica', size: 22, color: '#000000' },
autosize: true,
width: width,
height: height,
@ -261,7 +262,7 @@ export default {
size: 12,
colorscale: 'Viridis',
colorbar: {
title: '# Performance (%) #',
title: '# Ov. Performance (%) #',
titleside: 'right'
},
}
@ -277,6 +278,7 @@ export default {
visible: false,
range: [minY, maxY]
},
font: { family: 'Helvetica', size: 22, color: '#000000' },
autosize: true,
width: width,
height: height,
@ -371,3 +373,9 @@ export default {
}
</script>
<style>
.infolayer {
transform: scale(0.7) translate(520px, 110px) !important;
}
</style>

210
frontend/src/components/Main.vue
Unescape View File

@ -18,7 +18,7 @@
</b-col>
<b-col cols="6">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">History and Algorithms/Models Selector<span class="badge badge-primary badge-pill float-right">Active<span class="badge badge-light" style="margin-left:4px; margin-bottom:1px">1&2</span></span></mdb-card-header>
<mdb-card-header color="primary-color" tag="h5" class="text-center"><span class="float-left"><font-awesome-icon icon="arrow-alt-circle-right"/> {{ Status }}</span>History and Algorithms/Models Selector<span class="badge badge-primary badge-pill float-right">Active<span class="badge badge-light" style="margin-left:4px; margin-bottom:1px">1&2</span></span></mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-left" style="font-size: 18.5px; min-height: 357px">
<History/>
@ -37,148 +37,67 @@
</mdb-card>
</b-col>
</b-row>
<!--
<hr/>
<ul class="nav nav-tabs" id="myTab" role="tablist" style="margin-top: 15px">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Algorithms' Exploration</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Data Wrangling</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Models' Exploration</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<b-row class="md-3">
<b-col cols="3">
<mdb-card style="margin-top: 15px">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Overview of the Algorithms' Space</mdb-card-header>
<mdb-card-body class="text-center">
<Parameters/>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="9">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center"><small class="float-left" style="padding-top: 3px;">Metrics Support: [All]</small>Performance of the Algorithms [Sel: {{valueSel}} / All: {{valueAll}}]<small class="float-right" style="font-size:85% !important"><Controller/></small></mdb-card-header>
<mdb-card-body>
<Algorithms :width="width" :height="height"/>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
<b-row class="md-3">
<b-col cols="3">
<mdb-card style="margin-top: 15px">
<mdb-card-header color="primary-color" tag="h5" class="text-center"><small class="float-left" style="padding-top: 3px;">Metrics Support: [All]</small>Parameters Manipulation for Each Algorithm</mdb-card-header>
<mdb-card-body>
<AlgorithmHyperParam/>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="9">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center"><small class="float-left" style="padding-top: 3px;"><font-awesome-icon class="fa-lg" icon="dice-three"/>&nbsp;Metrics Support: [M3*, M4*, M5* (F1 Score)]</small>Performance of the Algorithms for Each Class<small class="float-right"><ResetClass/></small></mdb-card-header>
<mdb-card-body>
<BarChart/>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<b-row class="md-3">
<b-col cols="6">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space<small class="float-right"><saveStack/></small></mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 822px">
<DataSpace/>
<PCPData/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="6">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Features Selection for Each Model<small class="float-right"><active/></small></mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 822px">
<ToggleSelection/>
<br/>
<Heatmap/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
-->
<b-row class="md-3">
<b-col cols="6">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Solution Space of Hyper-Parameters
[Sel: {{OverSelLength}} / All: {{OverAllLength}}]<small class="float-right"></small><span class="badge badge-info badge-pill float-right">Projection<span class="badge badge-light" style="margin-left:4px; margin-bottom:1px">1</span></span>
</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 434px">
<HyperParameterSpace/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="6">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center"><small class="float-left"><Knowledge/></small>Majority-Voting Ensemble
[Sel: {{OverSelLengthCM}} / All: {{OverAllLengthCM}}]<small class="float-right"></small><span class="badge badge-info badge-pill float-right">Projection<span class="badge badge-light" style="margin-left:4px; margin-bottom:1px">2</span></span>
</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 434px">
<Ensemble/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
<b-row class="md-3">
<b-col cols="3">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Overall Performance for Each Validation Metric<span class="badge badge-primary badge-pill float-right">Active<span class="badge badge-light" style="margin-left:4px; margin-bottom:1px">{{projectionID_B}}</span></span>
</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 270px">
<ValidationController/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="6">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Predictive Results for Each Data Instance<span class="badge badge-primary badge-pill float-right">Active<span class="badge badge-light" style="margin-left:4px; margin-bottom:1px">{{projectionID_A}}</span></span>
</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 270px">
<Predictions/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="3">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center"><span class="float-left"><font-awesome-icon icon="calculator" /></span>Predictive Results for Majority-Voting Ensemble<span class="badge badge-primary badge-pill float-right">Active<span class="badge badge-light" style="margin-left:4px; margin-bottom:1px">2</span></span>
</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 270px">
<VotingResults/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
<b-row class="md-3">
<b-col cols="6">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Solution Space of Hyper-Parameters
[Sel: {{OverSelLength}} / All: {{OverAllLength}}]<small class="float-right"></small><span class="badge badge-info badge-pill float-right">Projection<span class="badge badge-light" style="margin-left:4px; margin-bottom:1px">1</span></span>
</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 434px">
<HyperParameterSpace/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="6">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center"><small class="float-left"><Knowledge/></small>Majority-Voting Ensemble
[Sel: {{OverSelLengthCM}} / All: {{OverAllLengthCM}}]<small class="float-right"></small><span class="badge badge-info badge-pill float-right">Projection<span class="badge badge-light" style="margin-left:4px; margin-bottom:1px">2</span></span>
</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 434px">
<Ensemble/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
<b-row class="md-3">
<b-col cols="3">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Overall Performance for Each Validation Metric<span class="badge badge-primary badge-pill float-right">Active<span class="badge badge-light" style="margin-left:4px; margin-bottom:1px">{{projectionID_B}}</span></span>
</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 270px">
<ValidationController/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="6">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Predictive Results for Each Data Instance<span class="badge badge-primary badge-pill float-right">Active<span class="badge badge-light" style="margin-left:4px; margin-bottom:1px">{{projectionID_A}}</span></span>
</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 270px">
<Predictions/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="3">
<mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center"><span class="float-left"><font-awesome-icon icon="calculator" /></span>Predictive Results for Majority-Voting Ensemble<span class="badge badge-primary badge-pill float-right">Active<span class="badge badge-light" style="margin-left:4px; margin-bottom:1px">2</span></span>
</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 270px">
<VotingResults/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
</b-row>
</b-container>
<div class="w3-container">
<div id="myModal" class="w3-modal" style="position: fixed;">
@ -252,6 +171,7 @@ export default Vue.extend({
},
data () {
return {
Status: " (S) Stage 0",
valuePickled: 'Close',
sankeyCallS: true,
CMNumberofModelsOFFICIAL: [0,0,0,0,0,0,50,50,50,50,50,0,50,50,50,50,50,0],
@ -383,6 +303,7 @@ export default Vue.extend({
this.storeBothEnsCM[0] = this.OverviewResults
this.firstTimeExec = false
EventBus.$emit('callAlgorithhms')
this.Status = " (S) Stage 1"
} else {
var Performance = JSON.parse(this.OverviewResults[1])
EventBus.$emit('SendStoredEnsembleHist', this.storeEnsemble)
@ -393,10 +314,12 @@ export default Vue.extend({
if (this.sankeyCallS) {
EventBus.$emit('SendSank')
EventBus.$emit('emittedEventCallingSankeyStage2')
this.Status = " (S) Stage 2"
} else {
EventBus.$emit('SendSankS')
EventBus.$emit('emittedEventCallingSankeyStage3')
EventBus.$emit('hideCrossMut')
this.Status = " (S) Stage \u2014"
}
this.storeBothEnsCM[1] = this.OverviewResults
this.getFinalResults()
@ -407,6 +330,7 @@ export default Vue.extend({
EventBus.$emit('callValidation')
EventBus.$emit('LegendPredictEnsem')
EventBus.$emit('callAlgorithhms')
}
})
.catch(error => {

4
frontend/src/components/ValidationController.vue
Unescape View File

@ -153,7 +153,7 @@ export default {
data:data,
xName:'Algorithm',
yName:'value',
axisLabels: {xAxis: 'Algorithm', yAxis: '# Performance (%) #'},
axisLabels: {xAxis: 'Algorithm', yAxis: '# Ov. Performance (%) #'},
selector:"#violin",
constrainExtremes:false});
chart2.renderBoxPlot({showBox:false});
@ -187,7 +187,7 @@ export default {
yName: null,
selector: null,
axisLables: null,
yTicks: 1,
yTicks: 0.5,
scale: 'linear',
chartSize: {width: 820, height: 200},
margin: {top: 15, right: 40, bottom: 60, left: 40},

4
frontend/src/main.js
Unescape View File

@ -6,10 +6,10 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
import router from './router'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faDna, faEraser, faSearch, faTrash, faCalculator, faPlusSquare, faFileExport, faWindowClose} from '@fortawesome/free-solid-svg-icons'
import { faDna, faEraser, faSearch, faTrash, faCalculator, faPlusSquare, faFileExport, faWindowClose, faArrowAltCircleRight} from '@fortawesome/free-solid-svg-icons'
import bFormSlider from 'vue-bootstrap-slider'
library.add(faDna, faEraser, faSearch, faTrash, faCalculator, faPlusSquare, faFileExport, faWindowClose)
library.add(faDna, faEraser, faSearch, faTrash, faCalculator, faPlusSquare, faFileExport, faWindowClose, faArrowAltCircleRight)
Vue.component('font-awesome-icon', FontAwesomeIcon)

Write Preview
Loading…
Cancel
Save