master
parent ff669e8f56
commit 42c8d9c4e7
  1. BIN
      __pycache__/run.cpython-37.pyc
  2. 726
      frontend/package-lock.json
  3. 44
      frontend/package.json
  4. 39
      frontend/src/components/AlgorithmHyperParam.vue
  5. 157
      frontend/src/components/Algorithms.vue
  6. 41
      frontend/src/components/BalancePredictions.vue
  7. 401
      frontend/src/components/BarChart.vue
  8. 31
      frontend/src/components/Controller.vue
  9. 53
      frontend/src/components/CurrentStack.vue
  10. 20
      frontend/src/components/DataSetExecController.vue
  11. 2
      frontend/src/components/DataSpace.vue
  12. 5
      frontend/src/components/FinalResultsLinePlot.vue
  13. 83
      frontend/src/components/Heatmap.vue
  14. 210
      frontend/src/components/Main.vue
  15. 127
      frontend/src/components/PerMetricBarChart.vue
  16. 7
      frontend/src/components/PredictionsSpace.vue
  17. 40
      frontend/src/components/Provenance.vue
  18. 141
      frontend/src/components/ScatterPlot.vue
  19. 42
      frontend/src/components/SlidersController.vue
  20. 4
      frontend/src/main.js
  21. 350
      run.py

Binary file not shown.

File diff suppressed because it is too large Load Diff

@ -11,15 +11,15 @@
"start": "npm run dev"
},
"dependencies": {
"@babel/core": "^7.6.0",
"@babel/runtime": "^7.6.0",
"@fortawesome/fontawesome-free": "^5.11.1",
"@fortawesome/fontawesome-svg-core": "^1.2.24",
"@fortawesome/free-solid-svg-icons": "^5.11.1",
"@babel/core": "^7.6.2",
"@babel/runtime": "^7.6.2",
"@fortawesome/fontawesome-free": "^5.11.2",
"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"@fortawesome/vue-fontawesome": "^0.1.7",
"@statnett/vue-plotly": "^0.3.2",
"@types/d3-drag": "^1.2.3",
"@types/node": "^12.7.5",
"@types/node": "^12.7.9",
"ajv": "^6.10.2",
"audit": "0.0.6",
"axios": "^0.19.0",
@ -28,7 +28,8 @@
"blob": "0.0.5",
"bootstrap": "^4.3.1",
"bootstrap-toggle": "^2.2.2",
"bootstrap-vue": "^2.0.1",
"bootstrap-vue": "^2.0.2",
"circlepack-chart": "^1.3.0",
"clean-webpack-plugin": "^3.0.0",
"colorbrewer": "^1.3.0",
"d3": "^5.12.0",
@ -47,24 +48,29 @@
"ify-loader": "^1.1.0",
"interactjs": "^1.6.2",
"jquery": "^3.4.1",
"mdbvue": "^5.8.2",
"mdbvue": "^5.8.3",
"mini-css-extract-plugin": "^0.8.0",
"npm-check-updates": "^3.1.23",
"papaparse": "^5.1.0",
"parcoord-es": "^2.2.10",
"plotly.js": "^1.49.5",
"popper.js": "^1.15.0",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"stardust": "^0.52.5",
"stardust-core": "^0.2.4",
"stardust-webgl": "^0.2.4",
"strip-loader": "^0.1.2",
"toposort": "^2.0.2",
"transform-loader": "^0.2.4",
"update": "^0.7.4",
"vega": "^5.6.0",
"vega": "^5.7.0",
"vue": "^2.6.10",
"vue-bootstrap-slider": "^2.1.8",
"vue-papa-parse": "^1.2.2",
"vue-plotly": "^1.0.1",
"vue-router": "^3.1.3",
"vue-slider-component": "^3.0.40",
"vue-slider-component": "^3.0.41",
"vue2-simplert-plugin": "^0.5.3",
"webpack-cli": "^3.3.9",
"webpack-require": "0.0.16"
@ -80,8 +86,8 @@
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-syntax-import-meta": "^7.2.0",
"@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/preset-env": "^7.6.2",
"autoprefixer": "^9.6.1",
"babel-eslint": "^10.0.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
@ -90,10 +96,10 @@
"chalk": "^2.4.2",
"copy-webpack-plugin": "^5.0.4",
"css-loader": "^3.2.0",
"eslint": "^6.4.0",
"eslint": "^6.5.1",
"eslint-config-standard": "^14.1.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^3.0.0",
"eslint-loader": "^3.0.2",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-promise": "^4.2.1",
@ -103,15 +109,15 @@
"file-loader": "^4.2.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"node-notifier": "^5.4.3",
"node-notifier": "^6.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^3.4.0",
"ora": "^4.0.2",
"portfinder": "^1.0.24",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-url": "^8.0.0",
"rimraf": "^3.0.0",
"sass": "^1.22.12",
"sass": "^1.23.0",
"sass-loader": "^8.0.0",
"semver": "^6.3.0",
"shelljs": "^0.8.3",
@ -125,8 +131,8 @@
"vue-template-compiler": "^2.6.10",
"vue2-simplert": "^1.0.0",
"vuetify-loader": "^1.3.0",
"webpack": "^4.40.2",
"webpack-bundle-analyzer": "^3.5.0",
"webpack": "^4.41.0",
"webpack-bundle-analyzer": "^3.5.2",
"webpack-dev-server": "^3.8.1",
"webpack-merge": "^4.2.2"
},

@ -18,7 +18,8 @@ export default {
return {
ModelsPerformance: 0,
selAlgorithm: 0,
pc: 0
pc: 0,
KNNModels: 576 //KNN models
}
},
methods: {
@ -33,20 +34,22 @@ export default {
Combined = JSON.parse(this.ModelsPerformance[0])
colorGiv = colors[0]
} else {
Combined = JSON.parse(this.ModelsPerformance[1])
Combined = JSON.parse(this.ModelsPerformance[2])
colorGiv = colors[1]
}
var valuesPerf = Object.values(Combined['mean_test_score'])
var valuesPerf = Object.values(Combined['0'])
var ObjectsParams = Combined['params']
var newObjectsParams = []
var ArrayCombined = new Array(valuesPerf.length)
for (let i = 0; i < valuesPerf.length; i++) {
if (this.selAlgorithm == 'KNN') {
var ArrayCombined = []
var temp
for (var i = 0; i < valuesPerf.length; i++) {
if (this.selAlgorithm === 'KNN') {
// There is a problem here!
newObjectsParams.push({'weights':ObjectsParams[i].weights, 'algorithm':ObjectsParams[i].algorithm,'metric':ObjectsParams[i].metric,'n_neighbors':ObjectsParams[i].n_neighbors})
Object.assign(newObjectsParams[i], {performance: valuesPerf[i]}, {model: i})
ArrayCombined[i] = newObjectsParams[i]
} else {
Object.assign(ObjectsParams[i], {performance: valuesPerf[i]}, {model: i})
Object.assign(ObjectsParams[i], {performance: valuesPerf[i]}, {model: this.KNNModels + i})
ArrayCombined[i] = ObjectsParams[i]
}
}
@ -54,7 +57,7 @@ export default {
this.pc = ParCoords()("#PCP")
.data(ArrayCombined)
.color(colorGiv)
.hideAxis(['model','performance'])
.hideAxis(['model'])
.bundlingStrength(0) // set bundling strength
.smoothness(0)
.showControlPoints(false)
@ -63,7 +66,7 @@ export default {
.reorderable()
.interactive();
this.pc.on("brush", function(d) {
this.pc.on("brushend", function(d) {
EventBus.$emit('AllSelModels', d.length)
EventBus.$emit('UpdateBoxPlot', d)
});
@ -72,32 +75,18 @@ export default {
sliders () {
},
brushed () {
if (this.pc.brushed()) {
EventBus.$emit('ReturningBrushedPoints', this.pc.brushed())
} else {
EventBus.$emit('ReturningBrushedPoints', this.pc.data())
}
},
clear () {
d3.selectAll("#PCP > *").remove();
},
None () {
document.getElementById('PCP').style.cssText='display:none';
},
Reveal () {
document.getElementById('PCP').style.cssText='height:200px;display:""';
}
},
mounted() {
EventBus.$on('emittedEventCallingModelBrushed', this.brushed)
EventBus.$on('ReturningBrushedPointsModels', this.brushed)
EventBus.$on('emittedEventCallingModelSelect', data => { this.selAlgorithm = data })
EventBus.$on('emittedEventCallingModel', data => { this.ModelsPerformance = data })
EventBus.$on('emittedEventCallingModel', this.PCPView)
EventBus.$on('ResponsiveandChange', this.PCPView)
EventBus.$on('emittedEventCallingModelClear', this.clear)
EventBus.$on('slidersOn', this.None)
EventBus.$on('PCPCall', this.Reveal)
}
}
</script>

@ -5,7 +5,6 @@
</template>
<script>
import interact from 'interactjs'
import { EventBus } from '../main.js'
import * as d3Base from 'd3'
import * as exploding_boxplot from 'd3_exploding_boxplot'
@ -20,34 +19,37 @@ export default {
data () {
return {
PerformanceAllModels: '',
brushedAll: [],
brushedBoxPl: [],
previousColor: 0,
selectedAlgorithm: 0,
WH: []
KNNModels: 576, //KNN models
WH: [],
parameters: [],
chart: ''
}
},
methods: {
boxplot () {
d3.selectAll("#exploding_boxplot > *").remove();
//generate random data
const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[0])
const PerformAlgor2 = JSON.parse(this.PerformanceAllModels[1])
const PerformAlgor2 = JSON.parse(this.PerformanceAllModels[2])
var algorithm1 = []
var algorithm2 = []
var median = []
var sum = 0
for (let i = 0; i < Object.keys(PerformAlgor1.mean_test_score).length; i++) {
algorithm1.push({Accuracy: Object.values(PerformAlgor1.mean_test_score)[i]*100,Algorithm:'KNN',Model:'Model ' + i + ', Accuracy '})
sum = sum + Object.values(PerformAlgor1.mean_test_score)[i]*100
var parameters = []
for (var i = 0; i < Object.keys(PerformAlgor1['0']).length; i++) {
algorithm1.push({Performance: Object.values(PerformAlgor1['0'])[i]*100,Algorithm:'KNN',Model:'Model ' + i + '; Parameters '+JSON.stringify(Object.values(PerformAlgor1['params'])[i])+'; Performance '})
parameters.push(JSON.stringify(Object.values(PerformAlgor1['params'])[i]))
}
median.push(sum/Object.keys(PerformAlgor1.mean_test_score).length)
sum = 0
for (let i = 0; i < Object.keys(PerformAlgor2.mean_test_score).length; i++) {
algorithm2.push({Accuracy: Object.values(PerformAlgor2.mean_test_score)[i]*100,Algorithm:'RF',Model:'Model ' + i + ', Accuracy '})
sum = sum + Object.values(PerformAlgor1.mean_test_score)[i]*100
var temp = i
for (let j = 0; j < Object.keys(PerformAlgor2['0']).length; j++) {
temp = i + j
algorithm2.push({Performance: Object.values(PerformAlgor2['0'])[j]*100,Algorithm:'RF',Model:'Model ' + temp + '; Parameters '+JSON.stringify(Object.values(PerformAlgor2['params'])[j])+'; Performance '})
parameters.push(JSON.stringify(Object.values(PerformAlgor2['params'])[j]))
}
EventBus.$emit('ParametersAll', parameters)
var data = algorithm1.concat(algorithm2)
/*median.push(sum/Object.keys(PerformAlgor2.mean_test_score).length)
/*median.push(sum/Object.keys(PerformAlgor2['0']).length)
if (median[0] > median[1])
var data = algorithm1.concat(algorithm2)
else
@ -59,26 +61,57 @@ export default {
// group : how to group data on x axis
// color : color of the point / boxplot
// label : displayed text in toolbox
var chart = exploding_boxplot(data, {y:'Accuracy',group:'Algorithm',color:'Algorithm',label:'Model'})
chart.width(this.WH[0]*3)
chart.height(this.WH[1])
//call chart on a div
chart('#exploding_boxplot')
this.chart = exploding_boxplot(data, {y:'Performance',group:'Algorithm',color:'Algorithm',label:'Model'})
this.chart.width(this.WH[0]*3)
this.chart.height(this.WH[1])
//call chart on a div
this.chart('#exploding_boxplot')
const previousColor = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']
var el = document.getElementsByClassName('d3-exploding-boxplot boxcontent')
var doubleClick = document.getElementsByClassName('exploding_boxplot')
doubleClick[0].ondblclick = function(d) {
EventBus.$emit('PCPCallDB')
}
this.brushStatus = document.getElementsByClassName('extent')
el[0].onclick = function() {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point KNN')
for (let i = 0; i < allPoints.length; i++) {
//if (modelsActive.indexOf(i) == -1) {
allPoints[i].style.fill = previousColor[0]
allPoints[i].style.opacity = '1.0'
//}
}
EventBus.$emit('PCPCall', 'KNN')
}
el[1].onclick = function() {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point RF')
for (let i = 0; i < allPoints.length; i++) {
//if (modelsActive.indexOf(i) == -1) {
allPoints[i].style.fill = previousColor[1]
allPoints[i].style.opacity = '1.0'
//}
}
EventBus.$emit('PCPCall', 'RF')
}
const myObserver = new ResizeObserver(entries => {
EventBus.$emit('brusheAllOn')
});
var brushRect = document.querySelector('.extent');
myObserver.observe(brushRect);
},
brushActivationAll () {
// continue here and select the correct points.
console.log(this.chart.returnBrush())
},
brushed () {
var allPoints = document.getElementsByClassName("d3-exploding-boxplot point")
if (this.selectedAlgorithm == 'KNN') {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point KNN')
} else {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point RF')
}
const previousColor = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f']
var modelsActive = []
for (let j = 0; j < this.brushedBoxPl.length; j++) {
@ -111,12 +144,76 @@ export default {
} else {
for (let i = 0; i < allPoints.length; i++) {
allPoints[i].style.opacity = '1.0'
if (modelsActive.indexOf(i) == -1) {
allPoints[i].style.fill = "#d3d3d3"
allPoints[i].style.opacity = '0.4'
if (this.selectedAlgorithm == 'KNN') {
if (modelsActive.indexOf(i) == -1) {
allPoints[i].style.fill = "#d3d3d3"
allPoints[i].style.opacity = '0.4'
}
} else {
if (modelsActive.indexOf(i+this.KNNModels) == -1) {
allPoints[i].style.fill = "#d3d3d3"
allPoints[i].style.opacity = '0.4'
}
}
}
}
this.UpdateBarChart()
},
UpdateBarChart () {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point')
var activeModels = []
var algorithmsSelected = []
var parameters = []
for (let i = 0; i < allPoints.length; i++) {
if (allPoints[i].style.fill != "rgb(211, 211, 211)") {
activeModels.push(allPoints[i].__data__.Model)
if (allPoints[i].__data__.Algorithm === 'KNN') {
algorithmsSelected.push('KNN')
}
else {
algorithmsSelected.push('RF')
}
}
}
if (activeModels.length == 0){
} else {
for (let i = 0; i<activeModels.length; i++) {
var array = activeModels[i].split(';')
var temp2 = array[1].split(' ')
parameters.push(temp2[2])
}
EventBus.$emit('ReturningAlgorithmsBar', algorithmsSelected)
EventBus.$emit('ReturningBrushedPointsParamsBar', parameters)
}
},
selectedPointsPerAlgorithm () {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point')
var activeModels = []
var algorithmsSelected = []
var parameters = []
for (let i = 0; i < allPoints.length; i++) {
if (allPoints[i].style.fill != "rgb(211, 211, 211)") {
activeModels.push(allPoints[i].__data__.Model)
if (allPoints[i].__data__.Algorithm === 'KNN') {
algorithmsSelected.push('KNN')
}
else {
algorithmsSelected.push('RF')
}
}
}
if (activeModels.length == 0){
alert('No models selected, please, retry!')
} else {
for (let i = 0; i<activeModels.length; i++) {
var array = activeModels[i].split(';')
var temp2 = array[1].split(' ')
parameters.push(temp2[2])
}
EventBus.$emit('ReturningAlgorithms', algorithmsSelected)
EventBus.$emit('ReturningBrushedPointsParams', parameters)
}
},
previousBoxPlotState () {
var el = document.getElementsByClassName('d3-exploding-boxplot box')
@ -134,6 +231,7 @@ export default {
}
},
mounted () {
EventBus.$on('emittedEventCallingModelBrushed', this.selectedPointsPerAlgorithm)
EventBus.$on('emittedEventCallingAllAlgorithms', data => {
this.PerformanceAllModels = data})
EventBus.$on('emittedEventCallingAllAlgorithms', this.boxplot)
@ -148,6 +246,7 @@ export default {
EventBus.$on('ResponsiveandChange', this.previousBoxPlotState)
EventBus.$on('emittedEventCallingSelectedALgorithm', data => {
this.selectedAlgorithm = data})
EventBus.$on('brusheAllOn', this.brushActivationAll)
}
}
</script>
</script>

@ -0,0 +1,41 @@
<template>
<div>
<p><font-awesome-icon icon="balance-scale"/> Optimize Selection:<b-form-slider ref="basic1" v-model="basicValue" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue }}%</p>
</div>
</template>
<script>
import bFormSlider from 'vue-bootstrap-slider/es/form-slider';
import 'bootstrap-slider/dist/css/bootstrap-slider.css'
import { EventBus } from '../main.js'
export default {
name: 'BalancePredictions',
data () {
return {
basicValue: 0,
}
},
methods: {
slideStart () {
},
slideStop () {
//var basicValues = []
//EventBus.$emit('CallFactorsView', basicValues)
},
},
}
</script>
<style>
p {
margin: 0 !important;
padding: 0 !important;
}
.slider.slider-horizontal {
width: 150px !important;
}
.slider-handle {
background: black;
}
</style>

@ -1,19 +1,7 @@
<template>
<b-row>
<b-col cols="4">
<div id="barChartPrecision0" class="barChartPrecision0"></div>
<div id="barChartPrecision1" class="barChartPrecision1"></div>
<div id="barChartPrecision2" class="barChartPrecision2"></div>
</b-col>
<b-col cols="4">
<div id="barChartRecall0" class="barChartRecall0"></div>
<div id="barChartRecall1" class="barChartRecall1"></div>
<div id="barChartRecall2" class="barChartRecall2"></div>
</b-col>
<b-col cols="4">
<div id="barChartf1Score0" class="barChartf1Score0"></div>
<div id="barChartf1Score1" class="barChartf1Score1"></div>
<div id="barChartf1Score2" class="barChartf1Score2"></div>
<b-col cols="12">
<div id="barChart" class="barChart"></div>
</b-col>
</b-row>
</template>
@ -26,208 +14,127 @@ export default {
name: 'BarChart',
data () {
return {
BarChartResults: '',
ClassNamesOverview: ''
PerformanceResults: '',
ClassNamesOverview: '',
PerformanceResultsSel: []
}
},
methods: {
BarChartView () {
const PerClassMetrics = JSON.parse(this.BarChartResults[3])
var ClassNames = JSON.parse(this.BarChartResults[4])
this.ClassNamesOverview = ClassNames
let ClassifierswithoutFI = JSON.parse(this.BarChartResults[7])
let ClassifierswithFI = JSON.parse(this.BarChartResults[8])
const limit = JSON.parse(this.BarChartResults[14])
for (let j = 0; j < this.ClassNamesOverview.length; j++) {
Plotly.purge('barChartf1Score' + j)
Plotly.purge('barChartPrecision' + j)
Plotly.purge('barChartRecall' + j)
const PerClassMetrics = JSON.parse(this.PerformanceResults[1])
const PerClassMetrics2 = JSON.parse(this.PerformanceResults[3])
var UpdateFeatures = 0
UpdateFeatures = JSON.parse(this.PerformanceResultsSel[0])
var UpdateFeatures2 = 0
UpdateFeatures2 = JSON.parse(this.PerformanceResultsSel[1])
var target_names
target_names = Object.keys(PerClassMetrics)
var sum = []
var temp = 0
for (var i=0;i<target_names.length;i++) {
temp = 0
temp = (Object.values(PerClassMetrics)[i][0]['f1-score']+Object.values(PerClassMetrics)[i][0]['precision']+Object.values(PerClassMetrics)[i][0]['recall'])/3
sum.push(temp)
temp = 0
temp = (Object.values(PerClassMetrics2)[i][0]['f1-score']+Object.values(PerClassMetrics2)[i][0]['precision']+Object.values(PerClassMetrics2)[i][0]['recall'])/3
sum.push(temp)
}
var Classifiers
Classifiers = ClassifierswithoutFI.concat(ClassifierswithFI)
var PerClassMetricsRed = []
var limitList = []
if (limit == '') {
for (let i = 0; i < Classifiers.length; i++) {
limitList.push(Classifiers[i])
var sumLine = []
var temp = 0
for (var i=0;i<target_names.length;i++) {
if (UpdateFeatures != 0) {
temp = 0
temp = (Object.values(UpdateFeatures)[i][0]['f1-score']+Object.values(UpdateFeatures)[i][0]['precision']+Object.values(UpdateFeatures)[i][0]['recall'])/3
sumLine.push(temp)
} else {
temp = 0
temp = (Object.values(PerClassMetrics)[i][0]['f1-score']+Object.values(PerClassMetrics)[i][0]['precision']+Object.values(PerClassMetrics)[i][0]['recall'])/3
sumLine.push(temp)
}
} else {
limitList = []
for (let i = 0; i < limit.length; i++) {
for (let j = 0; j < Classifiers.length; j++) {
if (Number(limit[i].match(/\d+/)[0]) == Classifiers[j]) {
limitList.push(Number(limit[i].match(/\d+/)[0]))
}
}
if (UpdateFeatures2 != 0) {
temp = 0
temp = (Object.values(UpdateFeatures2)[i][0]['f1-score']+Object.values(UpdateFeatures2)[i][0]['precision']+Object.values(UpdateFeatures2)[i][0]['recall'])/3
sumLine.push(temp)
} else {
temp = 0
temp = (Object.values(PerClassMetrics2)[i][0]['f1-score']+Object.values(PerClassMetrics2)[i][0]['precision']+Object.values(PerClassMetrics2)[i][0]['recall'])/3
sumLine.push(temp)
}
}
/* console.log(PerClassMetrics)
if (this.ModelsChosen != []) {
console.log('mpike')
for (var i=0;i<target_names.length;i++) {
temp = 0
temp = (Object.values(PerClassMetrics)[i][0]['f1-score']+Object.values(PerClassMetrics)[i][0]['f1-score']+Object.values(PerClassMetrics)[i][0]['f1-score'])/3
sum.push(temp)
temp = 0
temp = (Object.values(PerClassMetrics2)[i][0]['f1-score']+Object.values(PerClassMetrics2)[i][0]['f1-score']+Object.values(PerClassMetrics2)[i][0]['f1-score'])/3
sum.push(temp)
}
}*/
Plotly.purge('barChart')
const precisionPerClass = []
const recallPerClass = []
const f1ScorePerClass = []
for (let j = 0; j < ClassNames.length; j++) {
precisionPerClass[j] = []
recallPerClass[j] = []
/* for (let j = 0; j < ClassNames.length; j++) {
f1ScorePerClass[j] = []
for (let i = 0; i < limitList.length; i++) { // Fix this tomorrow! 0 to 16 and we want the ids..
precisionPerClass[j].push(PerClassMetrics[limitList[i]][ClassNames[j]].precision)
recallPerClass[j].push(PerClassMetrics[limitList[i]][ClassNames[j]].recall)
f1ScorePerClass[j].push(PerClassMetrics[limitList[i]][ClassNames[j]]['f1-score'])
}
}
var precisionData
var recallData
var f1ScoreData
var layoutPrec = {
autosize: false,
width: 300,
height: 300,
xaxis: {
title: 'Classifier ID',
type:"category",
titlefont: {
family: 'Arial, sans-serif',
size: 18,
color: 'lightgrey'
},
showticklabels: true,
tickangle: 'auto',
tickfont: {
family: 'Old Standard TT, serif',
size: 14,
color: 'black'
},
exponentformat: 'e',
showexponent: 'all'
},
yaxis: {
title: 'Precision',
titlefont: {
family: 'Arial, sans-serif',
size: 18,
color: 'lightgrey'
}
}
}
var layoutRec = {
autosize: false,
width: 300,
height: 300,
xaxis: {
title: 'Classifier ID',
type:"category",
titlefont: {
family: 'Arial, sans-serif',
size: 18,
color: 'lightgrey'
},
showticklabels: true,
tickangle: 'auto',
tickfont: {
family: 'Old Standard TT, serif',
size: 14,
color: 'black'
},
exponentformat: 'e',
showexponent: 'all'
},
yaxis: {
title: 'Recall',
titlefont: {
family: 'Arial, sans-serif',
size: 18,
color: 'lightgrey'
}
}
}
var layoutf1Score = {
}*/
var layout = {
autosize: false,
width: 300,
height: 300,
xaxis: {
title: 'Classifier ID',
type:"category",
titlefont: {
family: 'Arial, sans-serif',
size: 18,
color: 'lightgrey'
barmode: 'group',
width: 550,
height: 400,
xaxis: {
title: 'Algorithm',
type:"category",
titlefont: {
family: 'Arial, sans-serif',
size: 18,
color: 'grey'
},
showticklabels: true,
tickangle: 'auto',
tickfont: {
family: 'Old Standard TT, serif',
size: 14,
color: 'black'
},
exponentformat: 'e',
showexponent: 'all'
},
showticklabels: true,
tickangle: 'auto',
tickfont: {
family: 'Old Standard TT, serif',
size: 14,
color: 'black'
},
exponentformat: 'e',
showexponent: 'all'
},
yaxis: {
title: 'F1-Score',
titlefont: {
family: 'Arial, sans-serif',
size: 18,
color: 'lightgrey'
}
}
}
for (let j = 0; j < ClassNames.length; j++) {
let len = precisionPerClass[j].length
let indices = new Array(len)
for (let i = 0; i < len; ++i) indices[i] = i
indices.sort(function (a, b) { return precisionPerClass[j][b] < precisionPerClass[j][a] ? -1 : precisionPerClass[j][b] > precisionPerClass[j][a] ? 1 : 0 })
precisionPerClass[j].sort((function(a, b){return b-a}))
precisionData = [
{
x: indices.map(String),
y: precisionPerClass[j],
type: 'bar',
marker: {
color: 'rgb(158,202,225)',
opacity: 0.6,
line: {
color: 'rgb(8,48,107)',
width: 1.5
}
}
}
]
Plotly.newPlot('barChartPrecision' + j, precisionData, layoutPrec)
}
for (let j = 0; j < ClassNames.length; j++) {
let len = recallPerClass[j].length
let indices = new Array(len)
for (let i = 0; i < len; ++i) indices[i] = i
indices.sort(function (a, b) { return recallPerClass[j][b] < recallPerClass[j][a] ? -1 : recallPerClass[j][b] > recallPerClass[j][a] ? 1 : 0 })
recallPerClass[j].sort((function(a, b){return b-a}))
recallData = [
{
x: indices.map(String),
y: recallPerClass[j],
type: 'bar',
marker: {
color: 'rgb(158,202,225)',
opacity: 0.6,
line: {
color: 'rgb(8,48,107)',
width: 1.5
yaxis: {
title: 'Per Class Performance',
titlefont: {
family: 'Arial, sans-serif',
size: 18,
color: 'grey'
}
},
xaxis2: {
overlaying: 'x',
type:"category",
titlefont: {
family: 'Arial, sans-serif',
size: 18,
color: 'grey'
},
showticklabels: true,
tickangle: 'auto',
tickfont: {
family: 'Old Standard TT, serif',
size: 14,
color: 'black'
},
exponentformat: 'e',
showexponent: 'all'
}
}
]
Plotly.newPlot('barChartRecall' + j, recallData, layoutRec)
}
for (let j = 0; j < ClassNames.length; j++) {
/*for (let j = 0; j < ClassNames.length; j++) {
let len = f1ScorePerClass[j].length
let indices = new Array(len)
for (let i = 0; i < len; ++i) indices[i] = i
@ -247,22 +154,106 @@ export default {
}
}
}
]
]*/
Plotly.newPlot('barChartf1Score' + j, f1ScoreData, layoutf1Score)
}
var colors = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a']
var trace1 = {
x: ['KNN', 'RF'],
y: [sum[0],sum[1]],
name: target_names[0],
opacity: 0.5,
marker: {
opacity: 0.5,
color: colors[0]
},
type: 'bar'
};
var trace2 = {
x: ['KNN', 'RF'],
y: [sum[2],sum[3]],
name: target_names[1],
opacity: 0.5,
marker: {
opacity: 0.5,
color: colors[1]
},
type: 'bar'
};
var trace3 = {
x: ['KNN', 'RF'],
y: [sum[4],sum[5]],
name: target_names[2],
opacity: 0.5,
marker: {
opacity: 0.5,
color: colors[2]
},
type: 'bar'
};
var trace4 = {
type: 'bar',
x: ['KNN', 'RF'],
y: [sumLine[0],sumLine[1]],
name: target_names[0]+' (Sel)',
xaxis: 'x2',
mode: 'markers',
marker: {
opacity: 1.0,
color: colors[0],
},
width: [0.1, 0.1]
};
var trace5 = {
type: 'bar',
x: ['KNN', 'RF'],
y: [sumLine[2],sumLine[3]],
name: target_names[1]+' (Sel)',
xaxis: 'x2',
mode: 'markers',
marker: {
opacity: 1.0,
color: colors[1],
},
width: [0.1, 0.1]
};
var trace6 = {
type: 'bar',
x: ['KNN', 'RF'],
y: [sumLine[4],sumLine[5]],
name: target_names[2]+' (Sel)',
xaxis: 'x2',
mode: 'markers',
marker: {
opacity: 1.0,
color: colors[2],
},
width: [0.1, 0.1]
};
var data = [trace1, trace4, trace2, trace5, trace3, trace6];
Plotly.newPlot('barChart', data, layout)
},
reset () {
for (let j = 0; j < this.ClassNamesOverview.length; j++) {
Plotly.purge('barChartf1Score' + j)
Plotly.purge('barChartPrecision' + j)
Plotly.purge('barChartRecall' + j)
}
reset ()
{
Plotly.purge('barChart')
}
},
mounted() {
EventBus.$on('emittedEventCallingBarChart', data => { this.BarChartResults = data })
this.PerformanceResultsSel[0] = 0
this.PerformanceResultsSel[1] = 0
EventBus.$on('emittedEventCallingBarChartUpdatedFeatures', data => { this.PerformanceResultsSel = data })
EventBus.$on('emittedEventCallingBarChartUpdatedFeatures', this.BarChartView)
EventBus.$on('emittedEventCallingBarChart', data => { this.PerformanceResults = data })
EventBus.$on('emittedEventCallingBarChart', this.BarChartView)
EventBus.$on('emittedEventCallingUpdateBarChart', data => { this.ModelsChosen = data })
EventBus.$on('emittedEventCallingUpdateBarChart', this.BarChartView)
EventBus.$on('resetViews', this.reset)
}
}

@ -0,0 +1,31 @@
<template>
<div>
<button
id="Execute"
v-on:click="execute">
<font-awesome-icon icon="play" />
{{ valueExecute }}
</button>
</div>
</template>
<script>
import { EventBus } from '../main.js'
export default {
name: 'Controller',
data () {
return {
value: 'Add to Stack',
valueExecute: 'Execute Stacking Ensemble'
}
},
methods: {
execute () {
EventBus.$emit('PCPCallDB')
//EventBus.$emit('InitializeEnsembleLearningEvent')
}
}
}
</script>

@ -0,0 +1,53 @@
<template>
<div>
<div id="CircleChart"></div>
</div>
</template>
<script>
import { EventBus } from '../main.js'
import CirclePack from 'circlepack-chart';
export default {
name: 'CurrentStack',
data () {
return {
}
},
methods: {
stack () {
console.log('mpike')
const CHILDREN_PROB_DECAY = 1; // per level
const MAX_CHILDREN = 1000;
const MAX_VALUE = 100;
function genNode(name='root', probOfChildren=1) {
if (Math.random() < probOfChildren) {
return {
name,
children: [...Array(Math.round(Math.random() * MAX_CHILDREN))]
.map((_, i) => genNode(i, probOfChildren - CHILDREN_PROB_DECAY))
}
} else {
return {
name,
value: Math.round(Math.random() * MAX_VALUE)
}
}
}
const color = d3.scaleOrdinal(d3.schemePaired);
CirclePack()
.data(genNode())
.sort((a, b) => a.value - b.value) // sort ascending by size
.color(d => color(d.name))
.showLabels(false)
.excludeRoot(true)
.tooltipContent((d, node) => `Size: <i>${node.value}</i>`)
(document.getElementById('CircleChart'));
},
mount () {
this.stack()
}
}
}
</script>

@ -14,14 +14,14 @@
<font-awesome-icon icon="upload"/>
Upload</button>
<button
id="Execute"
v-on:click="execute">
<font-awesome-icon icon="play" />
id="Confirm"
v-on:click="confirm">
<font-awesome-icon icon="check" />
{{ value }}
</button>
<button
id="Reset"
v-on:click="execute">
v-on:click="reset">
<font-awesome-icon icon="trash" />
{{ valueReset }}
</button>
@ -37,9 +37,8 @@ export default {
data () {
return {
RetrieveValueCSV: 'IrisC',
value: 'Execute',
value: 'Confirm',
valueReset: 'Reset',
InitializeEnsemble: false
}
},
methods: {
@ -52,10 +51,11 @@ export default {
this.RetrieveValueCSV = this.RetrieveValueCSV.split('.')[0]
EventBus.$emit('SendToServerDataSetConfirmation', this.RetrieveValueCSV)
},
execute () {
this.InitializeEnsemble = true
this.value = 'ReExecute'
this.$emit('InitializeEnsembleLearningEvent')
reset () {
EventBus.$emit('reset')
},
confirm () {
EventBus.$emit('ConfirmDataSet')
}
}
}

@ -16,7 +16,7 @@ export default {
},
methods: {
ScatterPlotDataView () {
const XandYCoordinates = JSON.parse(this.DataSpace[9])
const XandYCoordinates = JSON.parse(this.DataSpace[7])
var result = XandYCoordinates.reduce(function(r, a) {
a.forEach(function(s, i) {

@ -70,7 +70,7 @@ export default {
plot_bgcolor: "rgb(229,229,229)",
xaxis: {
gridcolor: "rgb(255,255,255)",
title: 'Number of Execution',
title: 'Step of Execution',
tickformat: '.0f',
range: [0, this.scoresMean.length + 2],
showgrid: true,
@ -82,8 +82,7 @@ export default {
},
yaxis: {
gridcolor: "rgb(255,255,255)",
title: 'Accuracy (%)',
range: [0, 100],
title: 'Performance (%)',
showgrid: true,
showline: false,
showticklabels: true,

@ -21,7 +21,9 @@ export default {
limitation: 0,
flag: false,
classesNumber: 10,
cellSize: 24
cellSize: 24,
indicestoRem: [],
modelIds: []
}
},
methods: {
@ -29,69 +31,58 @@ export default {
EventBus.$emit('SendSelectedFeaturesEvent', '')
},
Heatmap () {
// Clear Heatmap first
var svg = d3.select("#Heatmap");
svg.selectAll("*").remove();
//svg.selectAll("*").remove();
//var FeaturesImportance = JSON.parse(this.GetResultsAll[3])
var FeaturesAccuracy = JSON.parse(this.GetResultsAll[5])
var Features= JSON.parse(this.GetResultsAll[6])
var ClassifierswithoutFI = JSON.parse(this.GetResultsAll[7])
var ClassifierswithFI = JSON.parse(this.GetResultsAll[8])
var Classifiers
Classifiers = ClassifierswithoutFI.concat(ClassifierswithFI)
//var RFEList = JSON.parse(this.GetResultsAll[13])
var PermImpEli = JSON.parse(this.GetResultsAll[12])
var featureUni = JSON.parse(this.GetResultsAll[13])
var limit
if (this.flag) {
limit = this.limitation;
} else {
limit = JSON.parse(this.GetResultsAll[14])
this.limitation = limit;
}
var Classifiers = this.modelIds
var keepingArrayIndices = this.indicestoRem
var PermImpEli = JSON.parse(this.GetResultsAll[10])
var featureUni = JSON.parse(this.GetResultsAll[11])
if (Classifiers != '') {
var limitList = []
if (limit == '') {
for (let i = 0; i < Classifiers.length; i++) {
limitList.push(Classifiers[i])
var lengthInitial = PermImpEli.length
var counter = 0
var flag
for (var i = 0; i < lengthInitial; i++) {
flag = 0
for (var j = 0; j < keepingArrayIndices.length; j++) {
if (i == parseInt(keepingArrayIndices[j])) {
flag = 1
}
} else {
limitList = []
for (let i = 0; i < limit.length; i++) {
for (let j = 0; j < Classifiers.length; j++) {
if (Number(limit[i].match(/\d+/)[0]) == Classifiers[j]) {
limitList.push(Number(limit[i].match(/\d+/)[0]))
}
}
}
}
if (flag == 0) {
PermImpEli.splice(i-counter, 1)
counter++
}
}
var len2 = Classifiers.length
console.log(len2)
var maxUni = Math.max.apply(Math, featureUni.map(function(o) { return o.Score; }))
var minUni = Math.min.apply(Math, featureUni.map(function(o) { return o.Score; }))
let len = Features.length
console.log(len)
let indicesYAxis = new Array(len)
for (let i = 0; i < len; i++) {
indicesYAxis[i] = [Features[i]]
}
var len2 = limitList.length
console.log(indicesYAxis)
let indicesXAxis = new Array(len)
var temp = []
for (let i = 0; i < len2; i++) {
temp = []
temp.push("R")
temp.push("Model "+i.toString())
temp.push("Model "+Classifiers[i].toString())
indicesXAxis[i] = temp
}
console.log(indicesXAxis)
temp = []
temp.push("R")
temp.push("Average")
indicesXAxis[len2] = temp
let withoutfilength = ClassifierswithoutFI.length
var values = []
var msg = false
var counter = 0
@ -140,19 +131,7 @@ export default {
}
var dataAll = {"columns":indicesXAxis,"index":indicesYAxis,"data":transposedArray}
this.heatmap_display(dataAll, "#Heatmap");
/*
// add the squares
svg.selectAll()
.data(data, function(d) {return d.group+':'+d.variable;})
.enter()
.append("rect")
.attr("x", function(d) { return x(d.group) })
.attr("y", function(d) { return y(d.variable) })
.attr("width", x.bandwidth() )
.attr("height", y.bandwidth() )
.style("fill", function(d) { return myColor(d.value)} )
*/
}
},
heatmap_display(data, heatmapId) {
var cellSize = this.cellSize
@ -190,8 +169,8 @@ export default {
svg.attr('transform', d3.event.transform) // updated for d3 v4
})
//==================================================
var viewerWidth = $(document).width()/4.5;
var viewerHeight = $(document).height()/6;
var viewerWidth = $(document).width()/2;
var viewerHeight = $(document).height()/5.5;
var viewerPosTop = 125;
var viewerPosLeft = 100;
@ -572,6 +551,8 @@ export default {
EventBus.$on('emittedEventCallingTogglesUpdate', this.Refresh)
EventBus.$on('emittedEventCallingTogglesUpdate', this.Heatmap)
EventBus.$on('resetViews', this.reset)
EventBus.$on('sendModelsIDs', data => { this.modelIds = data })
EventBus.$on('sendIndicestoRemove', data => { this.indicestoRem = data })
}
}
</script>

@ -6,30 +6,48 @@
<b-row class="md-3">
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Basic Operations Control Panel</mdb-card-header>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data and Performance Metrics Selection</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center" >
<DataSetExecController
v-on:InitializeEnsembleLearningEvent="DataBaseRequestDataSetName()"
/>
<DataSetExecController/>
<SlidersController/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="6">
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space Visualization</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center">
<DataSpace/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Diverse Models Exploration</mdb-card-header>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Models Space Visualization
[Sel.:{{OverSelLength}}/All:{{OverAllLength}}]
<select id="selectBarChart" @change="selectVisualRepresentation()">
<option value="bar">Bar Chart</option>
<option value="line">Line Plot</option>
<option value="diffline">Difference Line Plot</option>
</select>
</mdb-card-header>
<mdb-card-body>
<BarChart/>
<ScatterPlot/>
<PerMetricBarChart/>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space Visualization</mdb-card-header>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Predictions Space Visualization</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center">
<DataSpace/>
<PredictionsSpace/>
<BalancePredictions/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
@ -38,11 +56,13 @@
<b-row class="mb-3 mt-3">
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Algorithms Selection and HyperParameters Search [Sel.:{{valueSel}}/All:{{valueAll}}]</mdb-card-header>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Best Algorithms and HyperParameters Search [Sel.:{{valueSel}}/All:{{valueAll}}]</mdb-card-header>
<mdb-card-body>
<Algorithms :width="width" :height="height"/>
<AlgorithmHyperParam/>
<SlidersController/>
<mdb-card-text class="text-center" >
<Controller/>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
</b-col>
@ -56,46 +76,44 @@
</mdb-card-body>
</b-col>
</b-row>
<b-row>
<b-col cols="12">
<mdb-card-body>
<ToggleSelection/>
</mdb-card-body>
</b-col>
</b-row>
</mdb-card>
</b-col>
<b-col cols="3">
<mdb-card >
<mdb-card-header color="primary-color" tag="h5" class="text-center">Predictions Space Visualization</mdb-card-header>
<mdb-card-body>
<mdb-card-text class="text-center">
<PredictionsSpace/>
</mdb-card-text>
</mdb-card-body>
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Meta-Model Performance</mdb-card-header>
<mdb-card-body>
<FinalResultsLinePlot/>
</mdb-card-body>
</mdb-card>
</mdb-card>
</b-col>
</b-row>
<b-row>
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Base Models Overview
<select id="selectProjection" @change="selectVisualRepresentation()">
<option value="MDS">MDS Projection</option>
<option value="TSNE">t-SNE Projection</option>
</select>
[Sel.:{{OverSelLength}}/All:{{OverAllLength}}]
</mdb-card-header>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Diverse Algorithms Exploration</mdb-card-header>
<mdb-card-body>
<ScatterPlot/>
<BarChart/>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="3" offset-md="6">
<b-col cols="6">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Meta-Model Performance</mdb-card-header>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Current Stacking Ensemble</mdb-card-header>
<mdb-card-body>
<FinalResultsLinePlot/>
<Provenance/>
</mdb-card-body>
</mdb-card>
</b-col>
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Provenance Visualization</mdb-card-header>
<mdb-card-body>
<CurrentStack/>
</mdb-card-body>
</mdb-card>
</b-col>
@ -110,14 +128,19 @@ import Vue from 'vue'
import DataSetExecController from './DataSetExecController.vue'
import Algorithms from './Algorithms.vue'
import AlgorithmHyperParam from './AlgorithmHyperParam.vue'
import Controller from './Controller.vue'
import SlidersController from './SlidersController.vue'
import ScatterPlot from './ScatterPlot.vue'
import PerMetricBarChart from './PerMetricBarChart.vue'
import DataSpace from './DataSpace.vue'
import PredictionsSpace from './PredictionsSpace.vue'
import BalancePredictions from './BalancePredictions.vue'
import BarChart from './BarChart.vue'
import Heatmap from './Heatmap.vue'
import ToggleSelection from './ToggleSelection.vue'
import FinalResultsLinePlot from './FinalResultsLinePlot.vue'
import CurrentStack from './CurrentStack.vue'
import Provenance from './Provenance.vue'
import axios from 'axios'
import { loadProgressBar } from 'axios-progress-bar'
import 'axios-progress-bar/dist/nprogress.css'
@ -137,13 +160,18 @@ export default Vue.extend({
DataSetExecController,
Algorithms,
AlgorithmHyperParam,
Controller,
SlidersController,
ScatterPlot,
PerMetricBarChart,
DataSpace,
PredictionsSpace,
BalancePredictions,
BarChart,
Heatmap,
ToggleSelection,
Provenance,
CurrentStack,
FinalResultsLinePlot,
mdbCard,
mdbCardBody,
@ -161,11 +189,10 @@ export default Vue.extend({
Algorithms: ['KNN','RF'],
selectedAlgorithm: '',
PerformancePerModel: '',
brushed: 0,
brushedAll: [],
ExecutionStart: false,
PerformanceCheck: '',
selectedAlgorithms: [],
parametersofModels: [],
reset: false,
limitModels: 64,
brushedBoxPlotUpdate: 0,
width: 0,
height: 0,
@ -179,20 +206,18 @@ export default Vue.extend({
OverAllLength: 0,
toggle1: 1,
toggle2: 1,
toggle3: 1
toggle3: 1,
modelsUpdate: [],
parametersUpdate: [],
AlgorithmsUpdate: []
}
},
methods: {
selectVisualRepresentation () {
const representationSelectionDocum = document.getElementById('selectProjection')
const representationSelectionDocum = document.getElementById('selectBarChart')
this.representationSelection = representationSelectionDocum.options[representationSelectionDocum.selectedIndex].value
EventBus.$emit('RepresentationSelection', this.representationSelection)
},
DataBaseRequestDataSetName () {
this.ExecutionStart = true
EventBus.$emit('slidersOn')
this.getOverviewResults()
},
getCollection () {
this.Collection = this.getCollectionFromBackend()
},
@ -236,26 +261,19 @@ export default Vue.extend({
this.OverviewResults = response.data.OverviewResults
console.log('Server successfully sent all the data related to visualizations!')
EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResults)
var length = JSON.parse(this.OverviewResults[0]).length
this.OverSelLength = length
this.OverAllLength = length
EventBus.$emit('InitializeMetricsBarChart', this.OverviewResults)
this.valueSel = 0
this.valueAll = 0
var toggles = []
toggles.push(this.toggle1)
toggles.push(this.toggle2)
toggles.push(this.toggle3)
if (length < this.limitModels) {
this.OverviewResults.push(JSON.stringify(this.ClassifierIDsList))
EventBus.$emit('emittedEventCallingBarChart', this.OverviewResults)
EventBus.$emit('emitToggles', this.OverviewResults)
EventBus.$emit('emittedEventCallingToggles', toggles)
EventBus.$emit('emittedEventCallingHeatmapView', this.OverviewResults)
EventBus.$emit('emittedEventCallingTableView', this.OverviewResults)
EventBus.$emit('emittedEventCallingDataSpacePlotView', this.OverviewResults)
EventBus.$emit('emittedEventCallingPredictionsSpacePlotView', this.OverviewResults)
this.OverviewResults.pop()
}
EventBus.$emit('emitToggles', this.OverviewResults)
EventBus.$emit('emittedEventCallingToggles', toggles)
EventBus.$emit('emittedEventCallingHeatmapView', this.OverviewResults)
EventBus.$emit('emittedEventCallingTableView', this.OverviewResults)
EventBus.$emit('emittedEventCallingDataSpacePlotView', this.OverviewResults)
EventBus.$emit('emittedEventCallingPredictionsSpacePlotView', this.OverviewResults)
this.getFinalResults()
})
.catch(error => {
@ -279,8 +297,30 @@ export default Vue.extend({
axios.get(path, axiosConfig)
.then(response => {
this.PerformancePerModel = response.data.PerformancePerModel
console.log('Server successfully sent all the performance data related to models!')
console.log('Server successfully sent updated per class features!')
EventBus.$emit('emittedEventCallingAllAlgorithms', this.PerformancePerModel)
EventBus.$emit('emittedEventCallingBarChart', this.PerformancePerModel)
})
.catch(error => {
console.log(error)
})
},
UpdateModelsFeaturePerformance () {
const path = `http://localhost:5000/data/UpdatePerFeaturePerformance`
const axiosConfig = {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
}
}
axios.get(path, axiosConfig)
.then(response => {
this.PerformanceCheck = response.data.PerformanceCheck
console.log('Server successfully sent all the performance data related to models!')
EventBus.$emit('emittedEventCallingBarChartUpdatedFeatures', this.PerformanceCheck)
})
.catch(error => {
console.log(error)
@ -308,15 +348,10 @@ export default Vue.extend({
.then(response => {
console.log('Sent the selected points to the server (scatterplot)!')
this.OverSelLength = this.ClassifierIDsList.length
if (this.ClassifierIDsList.length < this.limitModels) {
this.OverviewResults.push(JSON.stringify(this.ClassifierIDsList))
EventBus.$emit('emittedEventCallingBarChart', this.OverviewResults)
EventBus.$emit('emittedEventCallingHeatmapView', this.OverviewResults)
EventBus.$emit('emittedEventCallingTableView', this.OverviewResults)
EventBus.$emit('emittedEventCallingDataSpacePlotView', this.OverviewResults)
EventBus.$emit('emittedEventCallingPredictionsSpacePlotView', this.OverviewResults)
this.OverviewResults.pop()
}
EventBus.$emit('emittedEventCallingHeatmapView', this.OverviewResults)
EventBus.$emit('emittedEventCallingTableView', this.OverviewResults)
EventBus.$emit('emittedEventCallingDataSpacePlotView', this.OverviewResults)
EventBus.$emit('emittedEventCallingPredictionsSpacePlotView', this.OverviewResults)
this.getFinalResults()
})
.catch(error => {
@ -396,8 +431,8 @@ export default Vue.extend({
EventBus.$emit('emittedEventCallingModelBrushed')
const path = `http://127.0.0.1:5000/data/SendBrushedParam`
const postData = {
brushed: this.brushed,
algorithm: this.selectedAlgorithm
parameters: this.parametersofModels,
algorithms: this.selectedAlgorithms
}
const axiosConfig = {
headers: {
@ -410,6 +445,7 @@ export default Vue.extend({
axios.post(path, postData, axiosConfig)
.then(response => {
console.log('Send request to server! Brushed parameters sent successfully!')
this.getScatterplotDataFromBackend()
if (!this.ExecutionStart) {
} else {
this.getCollection()
@ -419,6 +455,29 @@ export default Vue.extend({
console.log(error)
})
},
UpdateBarChartFeatures () {
const path = `http://127.0.0.1:5000/data/FeaturesScoresUpdate`
const postData = {
parameters: this.parametersUpdate,
algorithms: this.AlgorithmsUpdate
}
const axiosConfig = {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
}
}
axios.post(path, postData, axiosConfig)
.then(response => {
console.log('Send request to server! Updating Barchart!')
this.UpdateModelsFeaturePerformance()
})
.catch(error => {
console.log(error)
})
},
UpdateBasedonFeatures () {
const path = `http://127.0.0.1:5000/data/FeaturesSelection`
const postData = {
@ -557,22 +616,27 @@ export default Vue.extend({
mounted() {
this.render(true)
loadProgressBar()
this.fileNameSend()
window.onbeforeunload = function(e) {
return 'Dialog text here.'
}
$(window).on("unload", function(e) {
alert('Handler for .unload() called.');
})
EventBus.$on('ReturningAlgorithmsBar', data => { this.AlgorithmsUpdate = data })
EventBus.$on('ReturningBrushedPointsParamsBar', data => { this.parametersUpdate = data })
EventBus.$on('ReturningBrushedPointsParamsBar', this.UpdateBarChartFeatures )
EventBus.$on('ConfirmDataSet', this.fileNameSend)
EventBus.$on('reset', this.Reset)
EventBus.$on('UploadedFile', this.Reset)
EventBus.$on('UploadedFile', this.UploadProcess)
EventBus.$on('ReturningBrushedPoints', data => { this.brushed = data })
EventBus.$on('InitializeEnsembleLearningEvent', this.getOverviewResults)
EventBus.$on('ReturningAlgorithms', data => { this.selectedAlgorithms = data })
EventBus.$on('ReturningBrushedPointsParams', data => { this.parametersofModels = data; })
EventBus.$on('SendSelectedPointsToServerEvent', data => { this.ClassifierIDsList = data })
EventBus.$on('SendSelectedPointsToServerEvent', this.SendSelectedPointsToServer)
EventBus.$on('SendSelectedFeaturesEvent', data => { this.SelectedFeaturesPerClassifier = data })
EventBus.$on('SendSelectedFeaturesEvent', this.UpdateBasedonFeatures )
EventBus.$on('SendToServerDataSetConfirmation', data => { this.RetrieveValueFile = data })
EventBus.$on('SendToServerDataSetConfirmation', this.fileNameSend)
EventBus.$on('PCPCall', data => { this.selectedAlgorithm = data })
EventBus.$on('toggle1', data => { this.toggle1 = data })
EventBus.$on('toggle2', data => { this.toggle2 = data })
@ -590,6 +654,8 @@ export default Vue.extend({
this.valueSel = data
this.valueAll = data
})
EventBus.$on('sendPointsNumber', data => {this.OverSelLength = data})
EventBus.$on('sendPointsNumber', data => {this.OverAllLength = data})
EventBus.$on('AllSelModels', data => {this.valueSel = data})
//Prevent double click to search for a word.
document.addEventListener('mousedown', function (event) {

@ -0,0 +1,127 @@
<template>
<div id="PerMetricBar" class="PerMetricBar"></div>
</template>
<script>
import * as Plotly from 'plotly.js'
import { EventBus } from '../main.js'
export default {
name: 'PerMetricsBarChart',
data () {
return {
barchartmetrics: '',
representationDefault: 'bar'
}
},
methods: {
LineBar () {
var metricsPerModel = JSON.parse(this.barchartmetrics[9])
var vh = 80
if (this.representationDefault === 'bar'){
var type = 'bar';
} else if (this.representationDefault === 'line'){
var type = 'line';
} else {
var type = 'difference';
}
var difference = [];
for (var i=0; i<metricsPerModel.length; i++){
difference.push(metricsPerModel[i] - metricsPerModel[i]);
}
if (type == 'difference'){
var trace = {
x: kValuesLegend,
y: difference,
name: 'Delta(preservation)',
showlegend: true,
type: 'line',
marker: {
color: 'rgb(128,128,0)'
}
};
var LimitXaxis = Number(maxKNN) + 1;
var data = [trace];
var layout = {
barmode: 'group',autosize: false,
width: 400,
height: vh * 1.3,
margin: {
l: 50,
r: 30,
b: 30,
t: 5,
pad: 4
},
xaxis: {range: [0, LimitXaxis],
title: 'Number of neighbors',
titlefont: {
size: 12,
color: 'black'
}},
yaxis: {
title: '+/- Pres.',
titlefont: {
size: 12,
color: 'black'
}}};
Plotly.newPlot('PerMetricBar', data, layout, {displayModeBar:false}, {staticPlot: true});
} else{
var trace1 = {
x: ['Acc','F1s','Pre','Rec','Jac'],
y: metricsPerModel,
name: 'Projection average',
type: type,
marker: {
color: 'rgb(0,0,0)'
}
};
var trace2 = {
x: ['Acc','F1s','Pre','Rec','Jac'],
y: metricsPerModel,
name: 'Selected points',
type: type,
marker: {
color: 'rgb(0, 187, 187)'
}
};
var data = [trace1, trace2];
var layout = {
barmode: 'group',autosize: false,
width: 400,
height: vh * 1.3,
margin: {
l: 50,
r: 30,
b: 30,
t: 5,
pad: 4
},
xaxis: {
title: 'Performance Metrics',
titlefont: {
size: 12,
color: 'black'
}},
yaxis: {
title: 'Performance',
titlefont: {
size: 12,
color: 'black'
}}};
Plotly.newPlot('PerMetricBar', data, layout, {displayModeBar:false}, {staticPlot: true});
}
}
},
mounted () {
EventBus.$on('InitializeMetricsBarChart', data => {this.barchartmetrics = data;})
EventBus.$on('InitializeMetricsBarChart', this.LineBar)
EventBus.$on('RepresentationSelection', this.LineBar)
EventBus.$on('RepresentationSelection', data => {this.representationDefault = data})
}
}
</script>

@ -15,7 +15,7 @@ export default {
},
methods: {
ScatterPlotDataView () {
const XandYCoordinates = JSON.parse(this.PredictionsData[10])
const XandYCoordinates = JSON.parse(this.PredictionsData[8])
var result = XandYCoordinates.reduce(function(r, a) {
a.forEach(function(s, i) {
@ -40,7 +40,10 @@ export default {
},
yaxis: {
visible: false
}
},
autosize: true,
width: 400,
height: 400,
}
Plotly.newPlot('OverviewPredPlotly', Data, layout, {responsive: true})
}

@ -0,0 +1,40 @@
<template>
<div>
<div class="squares-container">
<canvas id="main-canvas"></canvas>
<svg id="main-svg"></svg>
</div>
</div>
</template>
<script>
import { EventBus } from '../main.js'
export default {
name: 'Provenance',
data () {
return {
}
},
methods: {
provenance () {
var container = d3.select(".squares-container");
var vis = new SquaresVisualization(container.node());
loadData("mnist.csv", DATA => {
vis.layout();
vis.setInstances(DATA.slice(0, 4000));
vis.setLayoutParameter({
y0: 10,
numberBins: 10,
squaresPerBin: 11,
squareSize: 3,
squareSpacing: 4,
xSpacing: 88
});
});
}
},
mount () {
}
}
</script>

@ -18,33 +18,102 @@ export default {
ScatterPlotResults: '',
representationDefault: 'MDS',
colorsforOver: [],
brushedBox : [],
max: 0,
min: 0
min: 0,
parametersAll: [],
length: 0,
}
},
methods: {
ScatterPlotView () {
function isEquivalent(a, b) {
// Create arrays of property names
var aProps = Object.getOwnPropertyNames(a);
var bProps = Object.getOwnPropertyNames(b);
// If number of properties is different,
// objects are not equivalent
if (aProps.length != bProps.length) {
return false;
}
for (var i = 0; i < aProps.length; i++) {
var propName = aProps[i];
// If values of same property are not equal,
// objects are not equivalent
if (a[propName] !== b[propName]) {
return false;
}
}
// If we made it this far, objects
// are considered equivalent
return true;
}
Plotly.purge('OverviewPlotly')
var colorsforScatterPlot = JSON.parse(this.ScatterPlotResults[0])
console.log(colorsforScatterPlot)
var MDSData = JSON.parse(this.ScatterPlotResults[1])
var TSNEData = JSON.parse(this.ScatterPlotResults[12])
const classifiersInfo = JSON.parse(this.ScatterPlotResults[2])
console.log(MDSData)
var parameters = JSON.parse(this.ScatterPlotResults[2])
parameters = JSON.parse(parameters)
var classifiersInfo = this.brushedBox
var keepingArrayIndices = []
var modelsDetails = []
var modelsIDs = []
for (var j in parameters) {
for (var i in classifiersInfo) {
if (isEquivalent(JSON.parse(this.parametersAll[classifiersInfo[i].model]),parameters[j])) {
keepingArrayIndices.push(j)
modelsDetails.push(this.parametersAll[classifiersInfo[i].model])
modelsIDs.push(classifiersInfo[i].model)
} else {
}
}
}
var flag
this.length = keepingArrayIndices.length
EventBus.$emit('sendPointsNumber', this.length)
EventBus.$emit('sendModelsIDs', modelsIDs)
EventBus.$emit('sendIndicestoRemove', keepingArrayIndices)
var lengthInitial = colorsforScatterPlot.length
var counter = 0
for (var i = 0; i < lengthInitial; i++) {
flag = 0
for (var j = 0; j < keepingArrayIndices.length; j++) {
if (i == parseInt(keepingArrayIndices[j])) {
flag = 1
}
}
if (flag == 0) {
colorsforScatterPlot.splice(i-counter, 1)
MDSData[0].splice(i-counter,1)
MDSData[1].splice(i-counter,1)
counter++
}
}
console.log(MDSData)
console.log(colorsforScatterPlot)
if (this.colorsforOver.length != 0) {
if (this.colorsforOver[1].length != 0) {
MDSData = this.colorsforOver[1]
TSNEData = this.colorsforOver[2]
}
if (this.colorsforOver[0].length != 0) {
colorsforScatterPlot = this.colorsforOver[0]
}
}
console.log(this.colorsforOver)
var classifiersInfoProcessing = []
for (let i = 0; i < classifiersInfo.length; i++) {
classifiersInfoProcessing[i] = 'Model ID: ' + i + '; Details: '
for (let i = 0; i < modelsDetails.length; i++) {
classifiersInfoProcessing[i] = 'Model ID: ' + modelsIDs[i] + '; Details: ' + modelsDetails[i]
}
var DataGeneral
var layout
if ( this.representationDefault == 'MDS') {
DataGeneral = [{
type: 'scatter',
mode: 'markers',
@ -59,10 +128,9 @@ export default {
size: 12,
colorscale: 'Viridis',
colorbar: {
title: 'Metrics Sum',
title: 'Metrics Average',
titleside: 'Top'
},
reversescale: true
}
}]
layout = {
@ -73,56 +141,14 @@ export default {
yaxis: {
visible: false
},
autosize: true,
width: 400,
height: 400,
dragmode: 'lasso',
hovermode: "closest",
hoverlabel: { bgcolor: "#FFF" },
legend: {orientation: 'h', y: -0.3},
}
} else {
var result = TSNEData.reduce(function(r, a) {
a.forEach(function(s, i) {
var key = i === 0 ? 'Xax' : 'Yax';
r[key] || (r[key] = []); // if key not found on result object, add the key with empty array as the value
r[key].push(s);
})
return r;
}, {})
DataGeneral = [{
type: 'scatter',
mode: 'markers',
x: result.Xax,
y: result.Yax,
hovertemplate:
"<b>%{text}</b><br><br>" +
"<extra></extra>",
text: classifiersInfoProcessing,
marker: {
color: colorsforScatterPlot,
size: 12,
colorscale: 'Viridis',
colorbar: {
title: 'Metrics Sum',
titleside: 'Top'
},
reversescale: true
}
}]
layout = {
title: 'Models Performance (t-SNE)',
xaxis: {
visible: false
},
yaxis: {
visible: false
},
dragmode: 'lasso',
hovermode: "closest",
hoverlabel: { bgcolor: "#FFF" },
legend: {orientation: 'h', y: -0.3},
}
}
var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true}
@ -158,14 +184,15 @@ export default {
}
},
mounted() {
EventBus.$on('emittedEventCallingBrushedBoxPlot', data => {
this.brushedBox = data})
EventBus.$on('emittedEventCallingScatterPlot', data => {
this.ScatterPlotResults = data})
EventBus.$on('emittedEventCallingScatterPlot', this.ScatterPlotView)
EventBus.$on('getColors', data => {
this.colorsforOver = data})
EventBus.$on('getColors', this.UpdateScatter),
EventBus.$on('RepresentationSelection', data => {this.representationDefault = data})
EventBus.$on('RepresentationSelection', this.ScatterPlotView)
EventBus.$on('ParametersAll', data => { this.parametersAll = data })
EventBus.$on('getColors', this.UpdateScatter)
}
}
</script>

@ -1,10 +1,10 @@
<template>
<div id="WrapSliders" style="display:none">
<p>Accuracy:<b-form-slider ref="basic1" v-model="basicValue1" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue1 }}%</p>
<p>F1_Score:<b-form-slider ref="basic2" v-model="basicValue2" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider >{{ basicValue2 }}%</p>
<p>Precision:<b-form-slider ref="basic3" v-model="basicValue3" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop"style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue3 }}%</p>
<p>Recall:<b-form-slider ref="basic4" v-model="basicValue4" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue4 }}%</p>
<p>Jaccard_Score:<b-form-slider ref="basic5" v-model="basicValue5" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue5 }}%</p>
<div id="WrapSliders">
<p>Acc<b-form-slider ref="basic1" v-model="basicValue1" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue1 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Met6<b-form-slider ref="basic1" v-model="basicValue6" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue6 }}%</p>
<p>F1s<b-form-slider ref="basic2" v-model="basicValue2" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider >{{ basicValue2 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Met7<b-form-slider ref="basic1" v-model="basicValue7" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue7 }}%</p>
<p>Pre<b-form-slider ref="basic3" v-model="basicValue3" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue3 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Met8<b-form-slider ref="basic1" v-model="basicValue8" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue8 }}%</p>
<p>Rec<b-form-slider ref="basic4" v-model="basicValue4" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue4 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Met9<b-form-slider ref="basic1" v-model="basicValue9" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue9 }}%</p>
<p>Jac<b-form-slider ref="basic5" v-model="basicValue5" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px; padding-left:15px"></b-form-slider>{{ basicValue5 }}%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Me10<b-form-slider ref="basic1" v-model="basicValue10" :min="0" :max="100" trigger-change-event @slide-start="slideStart" @slide-stop="slideStop" style="padding-right: 15px;padding-left:15px"></b-form-slider>{{ basicValue10 }}%</p>
</div>
</template>
@ -21,7 +21,12 @@
basicValue2: 100,
basicValue3: 100,
basicValue4: 100,
basicValue5: 100
basicValue5: 100,
basicValue6: 100,
basicValue7: 100,
basicValue8: 100,
basicValue9: 100,
basicValue10: 100
}
},
methods: {
@ -36,16 +41,19 @@
basicValues.push(this.basicValue5/100)
EventBus.$emit('CallFactorsView', basicValues)
},
Enable () {
document.getElementById('WrapSliders').style.cssText='height:200px;display:""';
},
Disable () {
document.getElementById('WrapSliders').style.cssText='display:none';
}
},
mounted () {
EventBus.$on('slidersOn', this.Enable)
EventBus.$on('PCPCall', this.Disable)
}
}
</script>
<style>
p {
margin: 0 !important;
padding: 0 !important;
}
.slider.slider-horizontal {
width: 150px !important;
}
.slider-handle {
background: black;
}
</style>

@ -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 { faUpload, faPlay, faCheck, faSave, faTrash} from '@fortawesome/free-solid-svg-icons'
import { faUpload, faPlay, faCheck, faSave, faTrash, faPlus, faBalanceScale} from '@fortawesome/free-solid-svg-icons'
import bFormSlider from 'vue-bootstrap-slider'
library.add(faUpload, faPlay, faCheck, faSave, faTrash)
library.add(faUpload, faPlay, faCheck, faSave, faTrash, faPlus, faBalanceScale)
Vue.component('font-awesome-icon', FontAwesomeIcon)

350
run.py

@ -12,6 +12,7 @@ import warnings
import copy
from joblib import Memory
from itertools import chain
import ast
from sklearn.linear_model import LogisticRegression
from sklearn.neighbors import KNeighborsClassifier
@ -72,15 +73,6 @@ def Reset():
# Initializing models
global classifiersId
classifiersId = []
global classifiersIDwithFI
classifiersIDwithFI = []
global classifiersIDPlusParams
classifiersIDPlusParams = []
global classifierID
classifierID = 0
global resultsList
resultsList = []
@ -146,15 +138,6 @@ def RetrieveFileName():
# Initializing models
global classifiersId
classifiersId = []
global classifiersIDwithFI
classifiersIDwithFI = []
global classifiersIDPlusParams
classifiersIDPlusParams = []
global classifierID
classifierID = 0
global RetrieveModelsList
RetrieveModelsList = []
@ -170,9 +153,7 @@ def RetrieveFileName():
global crossValidation
crossValidation = 3
global scoring
#scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted', 'neg_log_loss': 'neg_log_loss', 'r2': 'r2', 'neg_mean_absolute_error': 'neg_mean_absolute_error', 'neg_mean_absolute_error': 'neg_mean_absolute_error'}
scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted'}
global yPredictProb
yPredictProb = []
@ -296,7 +277,7 @@ def GridSearch(clf, params):
number_of_columns = len(df_cv_results.iloc[0])
df_cv_results_per_item = []
df_cv_results_per_row = []
for i in range(number_of_classifiers):
df_cv_results_per_item = []
for column in df_cv_results.iloc[0]:
@ -398,21 +379,15 @@ def Preprocessing():
global resultsList
df_cv_results_classifiersList = []
parametersList = []
#FeatureImportanceList = []
PerClassMetricsList = []
FeatureAccuracyList = []
#RFEListPD = []
#perm_imp_rfpimp = []
perm_imp_eli5PD = []
featureScores = []
for j, result in enumerate(resultsList):
df_cv_results_classifiersList.append(resultsList[j][0])
parametersList.append(resultsList[j][1])
#FeatureImportanceList.append(resultsList[j][2])
PerClassMetricsList.append(resultsList[j][2])
FeatureAccuracyList.append(resultsList[j][3])
#RFEListPD.append(resultsList[j][5])
#perm_imp_rfpimp.append(resultsList[j][6])
perm_imp_eli5PD.append(resultsList[j][4])
featureScores.append(resultsList[j][5])
@ -427,9 +402,8 @@ def Preprocessing():
featureScoresCon = pd.concat(featureScores, ignore_index=True, sort=False)
global factors
factors = [1,1,1,1,1,1]
global scoring
NumberofscoringMetrics = len(scoring)
global df_cv_results_classifiers_metrics
global NumberofscoringMetrics
del df_cv_results_classifiers['params']
df_cv_results_classifiers_metrics = df_cv_results_classifiers.copy()
del df_cv_results_classifiers_metrics['mean_fit_time']
@ -441,10 +415,18 @@ def sumPerMetric(factors):
sumPerClassifier = []
preProcessResults = []
preProcessResults = Preprocessing()
loopThroughMetrics = preProcessResults[4]
loopThroughMetrics = preProcessResults[3]
global scoring
global metricsPerModel
metricsPerModel = []
metricsPerModel.append(loopThroughMetrics['mean_test_accuracy'].sum()/loopThroughMetrics['mean_test_accuracy'].count())
metricsPerModel.append(loopThroughMetrics['mean_test_f1_macro'].sum()/loopThroughMetrics['mean_test_f1_macro'].count())
metricsPerModel.append(loopThroughMetrics['mean_test_precision'].sum()/loopThroughMetrics['mean_test_precision'].count())
metricsPerModel.append(loopThroughMetrics['mean_test_recall'].sum()/loopThroughMetrics['mean_test_recall'].count())
metricsPerModel.append(loopThroughMetrics['mean_test_jaccard'].sum()/loopThroughMetrics['mean_test_jaccard'].count())
for index, row in loopThroughMetrics.iterrows():
rowSum = 0
global scoring
lengthFactors = len(scoring)
for loop,elements in enumerate(row):
lengthFactors = lengthFactors - 1 + factors[loop]
@ -470,7 +452,7 @@ def RetrieveFactors():
ModelSpaceTSNENew = []
preProcessResults = []
preProcessResults = Preprocessing()
XClassifiers = preProcessResults[4]
XClassifiers = preProcessResults[3]
flagLocal = 0
countRemovals = 0
for l,el in enumerate(FactorsInt['Factors']):
@ -489,10 +471,12 @@ def UpdateOverview():
global sumPerClassifierSel
global ModelSpaceMDSNew
global ModelSpaceTSNENew
global metricsPerModel
ResultsUpdateOverview = []
ResultsUpdateOverview.append(sumPerClassifierSel)
ResultsUpdateOverview.append(ModelSpaceMDSNew)
ResultsUpdateOverview.append(ModelSpaceTSNENew)
ResultsUpdateOverview.append(metricsPerModel)
response = {
'Results': ResultsUpdateOverview
}
@ -506,7 +490,7 @@ def InitializeEnsemble():
mergedPredListListForm = []
for el in mergedPredList:
mergedPredListListForm.append(list(chain(*el)))
XClassifiers = preProcessResults[4]
XClassifiers = preProcessResults[3]
PredictionSpace = FunTsne(mergedPredListListForm)
DataSpace = FunTsne(XData)
ModelSpaceMDS = FunMDS(XClassifiers)
@ -522,38 +506,30 @@ def InitializeEnsemble():
def ReturnResults(sumPerClassifier,ModelSpaceMDS,ModelSpaceTSNE,preProcessResults,DataSpaceList,PredictionSpaceList):
global Results
Results = []
#FeatureImportanceListPD = preProcessResults[1]
parametersGen = preProcessResults[0]
PerClassMetrics = preProcessResults[1]
FeatureAccuracy = preProcessResults[2]
#RFEListPDCon = preProcessResults[5]
#perm_imp_rfpimpCon = preProcessResults[6]
perm_imp_eli5PDCon = preProcessResults[4]
featureScoresCon = preProcessResults[5]
#FeatureImportanceListPD = FeatureImportanceListPD.to_json(orient='records')
parametersGenPD = parametersGen.to_json(orient='records')
PerClassMetrics = PerClassMetrics.to_json(orient='records')
FeatureAccuracy = FeatureAccuracy.to_json(orient='records')
#RFEListPDCon = RFEListPDCon.to_json(orient='records')
#perm_imp_rfpimpCon = perm_imp_rfpimpCon.to_json(orient='records')
perm_imp_eli5PDCon = perm_imp_eli5PDCon.to_json(orient='records')
featureScoresCon = featureScoresCon.to_json(orient='records')
XDataJSON = XData.columns.tolist()
global metricsPerModel
Results.append(json.dumps(sumPerClassifier)) # Position: 0
Results.append(json.dumps(ModelSpaceMDS)) # Position: 1
Results.append(json.dumps(classifiersIDPlusParams)) # Position: 2
#Results.append(FeatureImportanceListPD) # Position: 3
Results.append(json.dumps(parametersGenPD)) # Position: 2
Results.append(PerClassMetrics) # Position: 3
Results.append(json.dumps(target_names)) # Position: 4
Results.append(FeatureAccuracy) # Position: 5
Results.append(json.dumps(XDataJSON)) # Position: 6
Results.append(json.dumps(classifiersId)) # Position: 7
Results.append(json.dumps(classifiersIDwithFI)) # Position: 8
Results.append(json.dumps(DataSpaceList)) # Position: 9
Results.append(json.dumps(PredictionSpaceList)) # Position: 10
Results.append(json.dumps(ModelSpaceTSNE)) # Position: 11
#Results.append(RFEListPDCon) # Position: 13
#Results.append(perm_imp_rfpimpCon) # Position: 14
Results.append(perm_imp_eli5PDCon) # Position: 12
Results.append(featureScoresCon) # Position: 13
Results.append(json.dumps(DataSpaceList)) # Position: 7
Results.append(json.dumps(PredictionSpaceList)) # Position: 8
Results.append(json.dumps(metricsPerModel)) # Position: 9
Results.append(perm_imp_eli5PDCon) # Position: 10
Results.append(featureScoresCon) # Position: 11
return Results
# Retrieve data from client
@ -581,7 +557,9 @@ def FeatureSelPerModel():
resultsList = []
global loopFeatures
loopFeatures = 2
for index, eachalgor in enumerate(algorithmList):
algorithmsWithoutDuplicates = list(dict.fromkeys(algorithmList))
for index, eachalgor in enumerate(algorithmsWithoutDuplicates):
if (eachalgor == 'KNN'):
clf = KNeighborsClassifier()
params = detailsParams[index]
@ -595,8 +573,7 @@ def FeatureSelPerModel():
if (featureSelection['featureSelection'] == ''):
key = 0
else:
key = 2
EnsembleModel(ClassifierIDsList, key)
key = 2
return 'Everything Okay'
def FunMDS (data):
@ -621,11 +598,13 @@ def EnsembleModel (ClassifierIDsList, keyRetrieved):
global all_classifiers
global algorithmList
algorithmsWithoutDuplicates = list(dict.fromkeys(algorithmList))
if (keyRetrieved == 0):
columnsInit = []
all_classifiers = []
columnsInit = [XData.columns.get_loc(c) for c in XData.columns if c in XData]
for index, eachelem in enumerate(algorithmList):
for index, eachelem in enumerate(algorithmsWithoutDuplicates):
if (eachelem == 'KNN'):
for each in resultsList[index][1]:
all_classifiers.append(make_pipeline(ColumnSelector(cols=columnsInit), KNeighborsClassifier().set_params(**each)))
@ -640,7 +619,7 @@ def EnsembleModel (ClassifierIDsList, keyRetrieved):
random_state=RANDOM_SEED,
n_jobs = -1)
elif (keyRetrieved == 1):
ClassifierIDsList = json.loads(ClassifierIDsList)
ClassifierIDsList = json.loads(ClassifierIDsList)
for loop in ClassifierIDsList['ClassifiersList']:
temp = [int(s) for s in re.findall(r'\b\d+\b', loop)]
all_classifiersSelection.append(all_classifiers[temp[0]])
@ -656,7 +635,7 @@ def EnsembleModel (ClassifierIDsList, keyRetrieved):
lr = LogisticRegression()
if (len(all_classifiersSelection) == 0):
all_classifiers = []
for index, eachelem in enumerate(algorithmList):
for index, eachelem in enumerate(algorithmsWithoutDuplicates):
if (eachelem == 'KNN'):
for j, each in enumerate(resultsList[index][1]):
all_classifiers.append(make_pipeline(ColumnSelector(cols=columnsReduce[j]), KNeighborsClassifier().set_params(**each)))
@ -671,7 +650,7 @@ def EnsembleModel (ClassifierIDsList, keyRetrieved):
random_state=RANDOM_SEED,
n_jobs = -1)
else:
for index, eachelem in enumerate(algorithmList):
for index, eachelem in enumerate(algorithmsWithoutDuplicates):
if (eachelem == 'KNN'):
for j, each in enumerate(resultsList[index][1]):
all_classifiersSelection.append(make_pipeline(ColumnSelector(cols=columnsReduce[j]), KNeighborsClassifier().set_params(**each)))
@ -726,6 +705,8 @@ def RetrieveModel():
global parametersPerformancePerModel
parametersPerformancePerModel = []
global algorithms
global factors
factors = [1,1,1,1,1,1]
algorithms = RetrievedModel['Algorithms']
for eachAlgor in algorithms:
if (eachAlgor) == 'KNN':
@ -734,22 +715,31 @@ def RetrieveModel():
else:
clf = RandomForestClassifier()
params = {'n_estimators': list(range(80, 120)), 'criterion': ['gini', 'entropy']}
GridSearchForParameters(clf, params, eachAlgor)
GridSearchForParameters(clf, params, eachAlgor, factors)
SendEachClassifiersPerformanceToVisualize()
return 'Everything Okay'
def GridSearchForParameters(clf, params, eachAlgor):
def GridSearchForParameters(clf, params, eachAlgor, factors):
global scoring
global NumberofscoringMetrics
scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted'}
NumberofscoringMetrics = len(scoring)
grid = GridSearchCV(estimator=clf,
param_grid=params,
scoring='accuracy',
scoring=scoring,
cv=crossValidation,
refit='accuracy',
n_jobs = -1)
grid.fit(XData, yData)
yPredict = grid.predict(XData)
cv_results = []
cv_results.append(grid.cv_results_)
df_cv_results = pd.DataFrame.from_dict(cv_results)
number_of_classifiers = len(df_cv_results.iloc[0][0])
number_of_columns = len(df_cv_results.iloc[0])
df_cv_results_per_item = []
df_cv_results_per_row = []
@ -761,9 +751,42 @@ def GridSearchForParameters(clf, params, eachAlgor):
df_cv_results_classifiers = pd.DataFrame(data = df_cv_results_per_row, columns= df_cv_results.columns)
global allParametersPerformancePerModel
parametersPerformancePerModel = df_cv_results_classifiers[['mean_test_score','params']]
global parametersPerformancePerModel
metrics = df_cv_results_classifiers.copy()
del metrics['mean_fit_time']
del metrics['mean_score_time']
metrics = metrics.ix[:, 0:NumberofscoringMetrics]
sumperModel = []
global rowSum
for index, row in metrics.iterrows():
rowSum = 0
lengthFactors = NumberofscoringMetrics
for loop,elements in enumerate(row):
lengthFactors = lengthFactors - 1 + factors[loop]
rowSum = elements*factors[loop] + rowSum
if lengthFactors is 0:
sumperModel = 0
else:
sumperModel.append(rowSum/lengthFactors)
global target_names
global PerClassMetric
global PerClassMetricPandas
PerClassMetric = []
yPredictProb.append(grid.predict_proba(XData))
PerClassMetric.append(classification_report(yData, yPredict, target_names=target_names, digits=2, output_dict=True))
PerClassMetricPandas = pd.DataFrame(PerClassMetric)
del PerClassMetricPandas['accuracy']
del PerClassMetricPandas['macro avg']
del PerClassMetricPandas['weighted avg']
summarizedMetrics = pd.DataFrame(sumperModel)
summarizedMetrics.rename(columns={0:'sum'})
parameters = pd.DataFrame(df_cv_results_classifiers['params'])
parametersPerformancePerModel = pd.concat([summarizedMetrics, parameters], axis=1)
PerClassMetricPandas = PerClassMetricPandas.to_json()
parametersPerformancePerModel = parametersPerformancePerModel.to_json()
allParametersPerformancePerModel.append(parametersPerformancePerModel)
allParametersPerformancePerModel.append(PerClassMetricPandas)
return 'Everything is okay'
#GridSearchForParameters = mem.cache(GridSearchForParameters)
@ -772,7 +795,7 @@ def GridSearchForParameters(clf, params, eachAlgor):
@app.route('/data/PerformanceForEachModel', methods=["GET", "POST"])
def SendEachClassifiersPerformanceToVisualize ():
response = {
'PerformancePerModel': allParametersPerformancePerModel
'PerformancePerModel': allParametersPerformancePerModel,
}
return jsonify(response)
@ -780,7 +803,13 @@ def Remove(duplicate):
final_list = []
for num in duplicate:
if num not in final_list:
final_list.append(num)
if (isinstance(num, float)):
if np.isnan(num):
pass
else:
final_list.append(int(num))
else:
final_list.append(num)
return final_list
# Retrieve data from client
@ -789,45 +818,174 @@ def Remove(duplicate):
def RetrieveModelsParam():
RetrieveModelsPar = request.get_data().decode('utf8').replace("'", '"')
RetrieveModelsPar = json.loads(RetrieveModelsPar)
algorithm = RetrieveModelsPar['algorithm']
RetrieveModelsParPandas = pd.DataFrame(RetrieveModelsPar['brushed'])
RetrieveModelsParPandas = RetrieveModelsParPandas.drop(columns=['performance'])
RetrieveModelsParPandas = RetrieveModelsParPandas.drop(columns=['model'])
RetrieveModelsParPandas = RetrieveModelsParPandas.to_dict(orient='list')
global algorithmList
algorithmList = RetrieveModelsPar['algorithms']
count = []
if ('KNN' in algorithmList):
count.append('KNN')
if ('RF' in algorithmList):
count.append('RF')
global detailsParams
results = []
counter1 = 0
counter2 = 0
for index, items in enumerate(algorithmList):
if (items == 'KNN'):
counter1 = counter1 + 1
else:
counter2 = counter2 + 1
output = pd.DataFrame()
for d in RetrieveModelsPar['parameters']:
output = output.append(json.loads(d), ignore_index=True)
RetrieveModelsPandSel = output.loc[0:counter1,:]
RetrieveModelsPandSel2 = output.loc[counter1:counter1+counter2,:]
RetrieveModelsPandSelDic = RetrieveModelsPandSel.to_dict(orient='list')
RetrieveModelsPandSelDic2 = RetrieveModelsPandSel2.to_dict(orient='list')
RetrieveModels = {}
for key, value in RetrieveModelsParPandas.items():
for key, value in RetrieveModelsPandSelDic.items():
withoutDuplicates = Remove(value)
RetrieveModels[key] = withoutDuplicates
global RetrieveModelsList
RetrieveModelsList.append(RetrieveModels)
global classifierID
global algorithmList
global detailsParams
RetrieveModels2 = {}
for key, value in RetrieveModelsPandSelDic2.items():
withoutDuplicates = Remove(value)
RetrieveModels2[key] = withoutDuplicates
global resultsList
resultsList = []
for alg in count:
if (alg == 'KNN'):
clf = KNeighborsClassifier()
params = RetrieveModels
detailsParams.append(params)
results.append(GridSearch(clf, params))
resultsList.append(results[0])
elif (alg == 'RF'):
clf = RandomForestClassifier()
params = RetrieveModels2
detailsParams.append(params)
results.append(GridSearch(clf, params))
resultsList.append(results[0])
else:
pass
return 'Everything Okay'
# Retrieve data from client
@cross_origin(origin='localhost',headers=['Content-Type','Authorization'])
@app.route('/data/FeaturesScoresUpdate', methods=["GET", "POST"])
def UpdateBarChartLine():
RetrieveModelsforUpdate = request.get_data().decode('utf8').replace("'", '"')
RetrieveModelsforUpdate = json.loads(RetrieveModelsforUpdate)
algorithms = RetrieveModelsforUpdate['algorithms']
count = []
if ('KNN' in algorithms):
count.append('KNN')
else:
count.append(0)
if ('RF' in algorithms):
count.append('RF')
else:
count.append(0)
results = []
algorithmList.append(algorithm)
if (algorithm == 'KNN'):
clf = KNeighborsClassifier()
params = RetrieveModels
detailsParams.append(params)
results.append(GridSearch(clf, params))
resultsList.append(results[0])
for j, oneClassifier in enumerate(results[0][1]):
classifiersId.append(classifierID)
classifiersIDPlusParams.append(classifierID)
classifierID = classifierID + 1
elif (algorithm == 'RF'):
clf = RandomForestClassifier()
params = RetrieveModels
detailsParams.append(params)
results.append(GridSearch(clf, params))
resultsList.append(results[0])
for oneClassifier, j in enumerate(results[0][1]):
classifiersIDPlusParams.append(classifierID)
classifiersIDwithFI.append(classifierID)
classifierID = classifierID + 1
counter1 = 0
counter2 = 0
for index, items in enumerate(algorithms):
if (items == 'KNN'):
counter1 = counter1 + 1
else:
counter2 = counter2 + 1
output = pd.DataFrame()
output2 = pd.DataFrame()
loop = 0
for d in RetrieveModelsforUpdate['parameters']:
if (loop < counter1):
output = output.append(json.loads(d), ignore_index=True)
else:
output2 = output2.append(json.loads(d), ignore_index=True)
loop = loop + 1
output.dropna(axis='columns')
output2.dropna(axis='columns')
if (output.empty):
pass
else:
RetrieveModelsPandSel = output.loc[0:counter1,:]
RetrieveModelsPandSelDic = RetrieveModelsPandSel.to_dict(orient='list')
RetrieveModels = {}
for key, value in RetrieveModelsPandSelDic.items():
withoutDuplicates = Remove(value)
RetrieveModels[key] = withoutDuplicates
if (output2.empty):
pass
else:
RetrieveModelsPandSel2 = output2.loc[0:counter2,:]
RetrieveModelsPandSelDic2 = RetrieveModelsPandSel2.to_dict(orient='list')
RetrieveModels2 = {}
for key, value in RetrieveModelsPandSelDic2.items():
withoutDuplicates = Remove(value)
RetrieveModels2[key] = withoutDuplicates
factors = [1,1,1,1,1,1]
global allParametersPerformancePerModelUpdate
allParametersPerformancePerModelUpdate = []
for alg in count:
if (alg == 'KNN'):
clf = KNeighborsClassifier()
params = RetrieveModels
GridSearchForUpdate(clf, params, factors)
elif (alg == 'RF'):
clf = RandomForestClassifier()
params = RetrieveModels2
GridSearchForUpdate(clf, params, factors)
else:
allParametersPerformancePerModelUpdate.append(0)
SendEachClassifiersPerformanceToVisualizeLinePlot()
return 'Everything Okay'
def GridSearchForUpdate(clf, params, factors):
global scoring
global NumberofscoringMetrics
scoring = {'accuracy': 'accuracy', 'f1_macro': 'f1_weighted', 'precision': 'precision_weighted', 'recall': 'recall_weighted', 'jaccard': 'jaccard_weighted'}
NumberofscoringMetrics = len(scoring)
grid = GridSearchCV(estimator=clf,
param_grid=params,
scoring=scoring,
cv=crossValidation,
refit='accuracy',
n_jobs = -1)
grid.fit(XData, yData)
yPredict = grid.predict(XData)
global allParametersPerformancePerModelUpdate
global target_names
global PerClassUpd
global PerClassMetricUpdate
PerClassUpd = []
PerClassMetricUpdate = []
PerClassUpd.append(classification_report(yData, yPredict, target_names=target_names, digits=2, output_dict=True))
PerClassMetricUpdate = pd.DataFrame(PerClassUpd)
del PerClassMetricUpdate['accuracy']
del PerClassMetricUpdate['macro avg']
del PerClassMetricUpdate['weighted avg']
PerClassMetricUpdate = PerClassMetricUpdate.to_json()
allParametersPerformancePerModelUpdate.append(PerClassMetricUpdate)
return 'Everything is okay'
# Sending each model's results
@app.route('/data/UpdatePerFeaturePerformance', methods=["GET", "POST"])
def SendEachClassifiersPerformanceToVisualizeLinePlot ():
global allParametersPerformancePerModelUpdate
response = {
'PerformanceCheck': allParametersPerformancePerModelUpdate,
}
return jsonify(response)
Loading…
Cancel
Save