three views

master
parent 81a9e520ac
commit 801c407dbb
  1. BIN
      __pycache__/run.cpython-37.pyc
  2. 1760
      frontend/package-lock.json
  3. 65
      frontend/package.json
  4. 71
      frontend/src/components/AlgorithmHyperParam.vue
  5. 162
      frontend/src/components/Algorithms.vue
  6. 12
      frontend/src/components/BarChart.vue
  7. 21
      frontend/src/components/DataSetExecController.vue
  8. 129
      frontend/src/components/Main.vue
  9. 143
      frontend/src/components/ScatterPlot.vue
  10. 51
      frontend/src/components/SlidersController.vue
  11. 3
      frontend/src/main.js
  12. 104
      run.py

Binary file not shown.

File diff suppressed because it is too large Load Diff

@ -12,12 +12,14 @@
},
"dependencies": {
"@babel/core": "^7.5.5",
"@fortawesome/fontawesome-free": "^5.10.1",
"@fortawesome/fontawesome-svg-core": "^1.2.21",
"@fortawesome/free-solid-svg-icons": "^5.10.1",
"@fortawesome/vue-fontawesome": "^0.1.6",
"@babel/runtime": "^7.5.5",
"@fortawesome/fontawesome-free": "^5.10.2",
"@fortawesome/fontawesome-svg-core": "^1.2.22",
"@fortawesome/free-solid-svg-icons": "^5.10.2",
"@fortawesome/vue-fontawesome": "^0.1.7",
"@statnett/vue-plotly": "^0.3.2",
"@types/node": "^12.7.1",
"@types/d3-drag": "^1.2.3",
"@types/node": "^12.7.4",
"ajv": "^6.10.2",
"audit": "0.0.6",
"axios": "^0.19.0",
@ -27,8 +29,12 @@
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.27",
"clean-webpack-plugin": "^3.0.0",
"d3": "^5.9.7",
"d3": "^5.12.0",
"d3-drag": "^1.2.4",
"d3-lasso": "0.0.5",
"d3-loom": "^1.0.2",
"d3-selection": "^1.4.0",
"d3-selection-multi": "^1.0.1",
"d3_exploding_boxplot": "^0.2.1",
"file-saver": "^2.0.2",
"file-system": "^2.2.2",
@ -36,27 +42,29 @@
"fs": "0.0.2",
"fs-es6": "0.0.2",
"ify-loader": "^1.1.0",
"interactjs": "^1.5.4",
"interactjs": "^1.6.1",
"jquery": "^3.4.1",
"mdbvue": "^5.8.0",
"mdbvue": "^5.8.1",
"mini-css-extract-plugin": "^0.8.0",
"npm-check-updates": "^3.1.21",
"papaparse": "^5.0.2",
"parcoord-es": "^2.2.10",
"plotly": "^1.0.6",
"plotly.js": "^1.49.1",
"plotly.js": "^1.49.4",
"popper.js": "^1.15.0",
"strip-loader": "^0.1.2",
"toposort": "^2.0.2",
"transform-loader": "^0.2.4",
"update": "^0.7.4",
"vega": "^5.4.0",
"vega": "^5.5.3",
"vue": "^2.6.10",
"vue-bootstrap-slider": "^2.1.8",
"vue-papa-parse": "^1.2.1",
"vue-plotly": "^1.0.0",
"vue-router": "^3.1.2",
"vue-slider-component": "^3.0.37",
"webpack-cli": "^3.3.6"
"vue-router": "^3.1.3",
"vue-slider-component": "^3.0.40",
"vue2-simplert-plugin": "^0.5.3",
"webpack-cli": "^3.3.7",
"webpack-require": "0.0.16"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.5.5",
@ -72,36 +80,36 @@
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"autoprefixer": "^9.6.1",
"babel-eslint": "^10.0.2",
"babel-eslint": "^10.0.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^8.0.6",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"chalk": "^2.4.2",
"copy-webpack-plugin": "^5.0.4",
"css-loader": "^3.2.0",
"eslint": "^6.1.0",
"eslint-config-standard": "^13.0.1",
"eslint": "^6.3.0",
"eslint-config-standard": "^14.1.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.2.1",
"eslint-loader": "^3.0.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^9.1.0",
"eslint-plugin-node": "^9.2.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^5.2.3",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^4.2.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"node-notifier": "^5.4.1",
"node-notifier": "^5.4.3",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^3.4.0",
"portfinder": "^1.0.21",
"portfinder": "^1.0.23",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-url": "^8.0.0",
"rimraf": "^2.6.3",
"sass": "^1.22.9",
"sass-loader": "^7.2.0",
"rimraf": "^3.0.0",
"sass": "^1.22.10",
"sass-loader": "^8.0.0",
"semver": "^6.3.0",
"shelljs": "^0.8.3",
"uglifyjs-webpack-plugin": "^2.2.0",
@ -109,14 +117,15 @@
"vue-class-component": "^7.1.0",
"vue-cli-plugin-vuetify": "^0.6.3",
"vue-loader": "^15.7.1",
"vue-property-decorator": "^8.2.1",
"vue-property-decorator": "^8.2.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"vue2-simplert": "^1.0.0",
"vuetify-loader": "^1.3.0",
"webpack": "^4.39.1",
"webpack": "^4.39.3",
"webpack-bundle-analyzer": "^3.4.1",
"webpack-dev-server": "^3.8.0",
"webpack-merge": "^4.2.1"
"webpack-merge": "^4.2.2"
},
"browserslist": [
"> 1%",

@ -1,5 +1,5 @@
<template>
<div id="PCP" class="parcoords" style="width:600;height:300px"></div>
<div id="PCP" class="parcoords" style="height:200px"></div>
</template>
<script>
@ -23,29 +23,45 @@ export default {
},
methods: {
PCPView () {
var Combined = 0
if (this.selAlgorithm == 'KNN') {
Combined = JSON.parse(this.ModelsPerformance[0])
} else {
Combined = JSON.parse(this.ModelsPerformance[1])
}
var valuesPerf = Object.values(Combined['mean_test_score'])
var ObjectsParams = Combined['params']
var ArrayCombined = new Array(valuesPerf.length)
for (let i = 0; i < valuesPerf.length; i++) {
Object.assign(ObjectsParams[i], {performance: valuesPerf[i]})
ArrayCombined[i] = ObjectsParams[i]
d3.selectAll("#PCP > *").remove();
if (this.selAlgorithm != '') {
var colors = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a']
var colorGiv = 0
var Combined = 0
if (this.selAlgorithm == 'KNN') {
Combined = JSON.parse(this.ModelsPerformance[0])
colorGiv = colors[0]
} else {
Combined = JSON.parse(this.ModelsPerformance[1])
colorGiv = colors[1]
}
var valuesPerf = Object.values(Combined['mean_test_score'])
var ObjectsParams = Combined['params']
var ArrayCombined = new Array(valuesPerf.length)
for (let i = 0; i < valuesPerf.length; i++) {
Object.assign(ObjectsParams[i], {performance: valuesPerf[i]}, {model: i})
ArrayCombined[i] = ObjectsParams[i]
}
this.pc = ParCoords()("#PCP")
.data(ArrayCombined)
.color(colorGiv)
.hideAxis(['model'])
.bundlingStrength(0) // set bundling strength
.smoothness(0)
.bundleDimension('performance')
.showControlPoints(false)
.render()
.brushMode('1D-axes')
.interactive();
this.pc.on("brush", function(d) {
EventBus.$emit('UpdateBoxPlot', d)
});
}
this.pc = ParCoords()("#PCP")
.data(ArrayCombined)
.bundlingStrength(0) // set bundling strength
.smoothness(0)
.bundleDimension('performance')
.showControlPoints(false)
.render()
.brushMode('1D-axes')
.reorderable()
.interactive();
},
sliders () {
},
brushed () {
if (this.pc.brushed()) {
@ -56,6 +72,12 @@ export default {
},
clear () {
d3.selectAll("#PCP > *").remove();
},
None () {
document.getElementById('PCP').style.cssText='display:none';
},
Reveal () {
document.getElementById('PCP').style.cssText='height:200px;display:""';
}
},
mounted() {
@ -63,7 +85,10 @@ export default {
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>

@ -1,6 +1,6 @@
<template>
<div>
<div id="exploding_boxplot" class="exploding_boxplot"></div>
<div id="exploding_boxplot" class="exploding_boxplot" ref="myClickable"></div>
</div>
</template>
@ -9,6 +9,8 @@ import interact from 'interactjs'
import { EventBus } from '../main.js'
import * as d3Base from 'd3'
import * as exploding_boxplot from 'd3_exploding_boxplot'
import 'd3_exploding_boxplot/src/d3_exploding_boxplot.css'
import $ from 'jquery'
// attach all d3 plugins to the d3 library
const d3 = Object.assign(d3Base)
@ -17,56 +19,117 @@ export default {
name: 'Algorithms',
data () {
return {
PerformanceAllModels: ''
PerformanceAllModels: '',
brushedBoxPl: [],
previousColor: 0,
selectedAlgorithm: 0,
WH: []
}
},
methods: {
boxplot () {
d3.selectAll("#exploding_boxplot > *").remove();
d3.selectAll("#exploding_boxplot > *").remove();
//generate random data
const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[0])
const PerformAlgor2 = JSON.parse(this.PerformanceAllModels[1])
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
}
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 data = algorithm1.concat(algorithm2)
/*median.push(sum/Object.keys(PerformAlgor2.mean_test_score).length)
if (median[0] > median[1])
const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[0])
const PerformAlgor2 = JSON.parse(this.PerformanceAllModels[1])
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
}
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 data = algorithm1.concat(algorithm2)
else
var data = algorithm2.concat(algorithm1)*/
/*median.push(sum/Object.keys(PerformAlgor2.mean_test_score).length)
if (median[0] > median[1])
var data = algorithm1.concat(algorithm2)
else
var data = algorithm2.concat(algorithm1)*/
// chart(data,aes)
// aesthetic :
// y : point's value on y axis
// 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(data,aes)
// aesthetic :
// y : point's value on y axis
// 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')
//call chart on a div
chart('#exploding_boxplot')
var el = document.getElementsByClassName('d3-exploding-boxplot boxcontent')
var doubleClick = document.getElementsByClassName('exploding_boxplot')
doubleClick[0].ondblclick = function(d) {
EventBus.$emit('PCPCallDB')
var el = document.getElementsByClassName('d3-exploding-boxplot boxcontent')
var doubleClick = document.getElementsByClassName('exploding_boxplot')
doubleClick[0].ondblclick = function(d) {
EventBus.$emit('PCPCallDB')
}
el[0].onclick = function() {
EventBus.$emit('PCPCall', 'KNN')
}
el[1].onclick = function() {
EventBus.$emit('PCPCall', 'RF')
}
},
brushed () {
var allPoints = document.getElementsByClassName("d3-exploding-boxplot point")
const previousColor = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a']
var modelsActive = []
for (let j = 0; j < this.brushedBoxPl.length; j++) {
modelsActive.push(this.brushedBoxPl[j].model)
}
for (let i = 0; i < allPoints.length; i++) {
if (this.selectedAlgorithm == 'KNN') {
allPoints[i].style.fill = previousColor[0]
} else {
allPoints[i].style.fill = previousColor[1]
}
}
el[0].onclick = function() {
EventBus.$emit('PCPCall', 'KNN')
if (modelsActive.length == 0) {
for (let i = 0; i < allPoints.length; i++) {
//if (modelsActive.indexOf(i) == -1) {
allPoints[i].style.fill = "#d3d3d3"
allPoints[i].style.opacity = '1.0'
//}
}
} else if (modelsActive.length == allPoints.length) {
for (let i = 0; i < allPoints.length; i++) {
if (this.selectedAlgorithm == 'KNN') {
allPoints[i].style.fill = previousColor[0]
allPoints[i].style.opacity = '1.0'
} else {
allPoints[i].style.fill = previousColor[1]
allPoints[i].style.opacity = '1.0'
}
}
} 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'
}
}
}
el[1].onclick = function() {
EventBus.$emit('PCPCall', 'RF')
},
previousBoxPlotState () {
var el = document.getElementsByClassName('d3-exploding-boxplot box')
if (document.getElementById('PCP').style.display == 'none') {
} else {
if (this.selectedAlgorithm == 'KNN') {
$(el)[0].dispatchEvent(new Event('click'))
} else if (this.selectedAlgorithm == 'RF') {
$(el)[2].dispatchEvent(new Event('click'))
} else {
}
}
}
},
@ -74,10 +137,17 @@ export default {
EventBus.$on('emittedEventCallingAllAlgorithms', data => {
this.PerformanceAllModels = data})
EventBus.$on('emittedEventCallingAllAlgorithms', this.boxplot)
}
EventBus.$on('emittedEventCallingBrushedBoxPlot', data => {
this.brushedBoxPl = data})
EventBus.$on('emittedEventCallingBrushedBoxPlot', this.brushed),
EventBus.$on('Responsive', data => {
this.WH = data})
EventBus.$on('ResponsiveandChange', data => {
this.WH = data})
EventBus.$on('ResponsiveandChange', this.boxplot)
EventBus.$on('ResponsiveandChange', this.previousBoxPlotState)
EventBus.$on('emittedEventCallingSelectedALgorithm', data => {
this.selectedAlgorithm = data})
}
}
</script>
<style>
@import 'd3_exploding_boxplot/src/d3_exploding_boxplot.css';
</style>

@ -77,8 +77,8 @@ export default {
var layoutPrec = {
autosize: false,
width: 300,
height: 300,
width: 150,
height: 150,
xaxis: {
title: 'Classifier ID',
type:"category",
@ -109,8 +109,8 @@ export default {
var layoutRec = {
autosize: false,
width: 300,
height: 300,
width: 150,
height: 150,
xaxis: {
title: 'Classifier ID',
type:"category",
@ -141,8 +141,8 @@ export default {
var layoutf1Score = {
autosize: false,
width: 300,
height: 300,
width: 150,
height: 150,
xaxis: {
title: 'Classifier ID',
type:"category",

@ -23,7 +23,7 @@
</template>
<script>
// import Papa from 'papaparse'
import Papa from 'papaparse'
import { EventBus } from '../main.js'
export default {
@ -37,24 +37,7 @@ export default {
},
methods: {
upload () {
// const that = this
// const fileToLoad = event.target.files[0]
// const reader = new FileReader()
/*
reader.onload = fileLoadedEvent => {
Papa.parse(fileLoadedEvent.target.result, {
header: true,
complete (results) {
console.log('complete', results)
that.doc = JSON.stringify(results.data, null, 2)
},
error (errors) {
console.log('error', errors)
}
})
}
reader.readAsText(fileToLoad)
*/
EventBus.$emit('UploadedFile')
},
selectDataSet () {
const fileName = document.getElementById('selectFile')

@ -25,12 +25,14 @@
</mdb-card>
</b-col>
<b-col cols="3">
<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>
<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-row>
<b-row class="mb-3 mt-3">
@ -38,8 +40,9 @@
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Algorithms Selection and HyperParameters Search</mdb-card-header>
<mdb-card-body>
<Algorithms/>
<Algorithms :width="width" :height="height"/>
<AlgorithmHyperParam/>
<SlidersController/>
</mdb-card-body>
</mdb-card>
</b-col>
@ -79,7 +82,12 @@
<b-row>
<b-col cols="3">
<mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Base Models Overview</mdb-card-header>
<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>
</mdb-card-header>
<mdb-card-body>
<ScatterPlot/>
</mdb-card-body>
@ -104,6 +112,7 @@ import Vue from 'vue'
import DataSetExecController from './DataSetExecController.vue'
import Algorithms from './Algorithms.vue'
import AlgorithmHyperParam from './AlgorithmHyperParam.vue'
import SlidersController from './SlidersController.vue'
import ScatterPlot from './ScatterPlot.vue'
import DataSpace from './DataSpace.vue'
import PredictionsSpace from './PredictionsSpace.vue'
@ -119,6 +128,10 @@ import { mdbCard, mdbCardBody, mdbCardText, mdbCardHeader } from 'mdbvue'
import { EventBus } from '../main.js'
import * as jQuery from 'jquery'
import $ from 'jquery'
import * as d3Base from 'd3'
// attach all d3 plugins to the d3 library
const d3 = Object.assign(d3Base)
export default Vue.extend({
name: 'Main',
@ -126,6 +139,7 @@ export default Vue.extend({
DataSetExecController,
Algorithms,
AlgorithmHyperParam,
SlidersController,
ScatterPlot,
DataSpace,
PredictionsSpace,
@ -154,12 +168,25 @@ export default Vue.extend({
brushedAll: [],
ExecutionStart: false,
reset: false,
limitModels: 64
limitModels: 64,
brushedBoxPlotUpdate: 0,
width: 0,
height: 0,
combineWH: [],
basicValuesFact: [],
sumPerClassifier: [],
representationSelection: 'MDS'
}
},
methods: {
selectVisualRepresentation () {
const representationSelectionDocum = document.getElementById('selectProjection')
this.representationSelection = representationSelectionDocum.options[representationSelectionDocum.selectedIndex].value
EventBus.$emit('RepresentationSelection', this.representationSelection)
},
DataBaseRequestDataSetName () {
this.ExecutionStart = true
EventBus.$emit('slidersOn')
this.getOverviewResults()
},
getCollection () {
@ -206,7 +233,6 @@ export default Vue.extend({
console.log('Server successfully sent all the data related to visualizations!')
EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResults)
var length = JSON.parse(this.OverviewResults[0]).length
console.log(this.ClassifierIDsList)
if (length < this.limitModels) {
this.OverviewResults.push(JSON.stringify(this.ClassifierIDsList))
EventBus.$emit('emittedEventCallingBarChart', this.OverviewResults)
@ -398,7 +424,11 @@ export default Vue.extend({
console.log(error)
})
},
UpdateBrushBoxPlot () {
EventBus.$emit('emittedEventCallingBrushedBoxPlot', this.brushedBoxPlotUpdate)
},
CallPCP () {
EventBus.$emit('emittedEventCallingSelectedALgorithm', this.selectedAlgorithm)
EventBus.$emit('emittedEventCallingModelClear')
EventBus.$emit('emittedEventCallingModelSelect', this.selectedAlgorithm)
EventBus.$emit('emittedEventCallingModel', this.PerformancePerModel)
@ -425,7 +455,68 @@ export default Vue.extend({
.catch(error => {
console.log(error)
})
}
},
UploadProcess () {
},
render (flag) {
this.combineWH = []
this.width = document.body.clientWidth / 12 - 30
this.height = document.body.clientHeight / 3
this.combineWH.push(this.width)
this.combineWH.push(this.height)
if(flag) {
EventBus.$emit('Responsive', this.combineWH)
}
else {
EventBus.$emit('ResponsiveandChange', this.combineWH)
}
},
change () {
this.render(false)
},
factors () {
const path = `http://127.0.0.1:5000/data/factors`
const postData = {
Factors: this.basicValuesFact
}
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('The client send the new factors! Done.')
this.RetrieveNewColors()
})
.catch(error => {
console.log(error)
})
},
RetrieveNewColors () {
const path = `http://127.0.0.1:5000/data/UpdateOverv`
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.sumPerClassifierSel = response.data.Results
console.log('Server successfully send the new colors!')
EventBus.$emit('getColors',this.sumPerClassifierSel)
})
.catch(error => {
console.log(error)
})
},
},
created() {
// does the browser support the Navigation Timing API?
@ -437,8 +528,10 @@ export default Vue.extend({
console.info("TYPE_RELOAD");
this.Reset();
}
window.addEventListener('resize', this.change)
},
mounted() {
this.render(true)
loadProgressBar()
this.fileNameSend()
window.onbeforeunload = function(e) {
@ -447,6 +540,8 @@ export default Vue.extend({
$(window).on("unload", function(e) {
alert('Handler for .unload() called.');
})
EventBus.$on('UploadedFile', this.Reset)
EventBus.$on('UploadedFile', this.UploadProcess)
EventBus.$on('ReturningBrushedPoints', data => { this.brushed = data })
EventBus.$on('SendSelectedPointsToServerEvent', data => { this.ClassifierIDsList = data })
EventBus.$on('SendSelectedPointsToServerEvent', this.SendSelectedPointsToServer)
@ -457,6 +552,10 @@ export default Vue.extend({
EventBus.$on('PCPCall', data => { this.selectedAlgorithm = data })
EventBus.$on('PCPCall', this.CallPCP)
EventBus.$on('PCPCallDB', this.SendBrushedParameters)
EventBus.$on('UpdateBoxPlot', data => { this.brushedBoxPlotUpdate = data })
EventBus.$on('UpdateBoxPlot', this.UpdateBrushBoxPlot)
EventBus.$on('CallFactorsView', data => { this.basicValuesFact = data })
EventBus.$on('CallFactorsView', this.factors)
//Prevent double click to search for a word.
document.addEventListener('mousedown', function (event) {
@ -484,4 +583,12 @@ box-shadow: 0 0 10px red, 0 0 5px red !important;
border-top-color: red !important;
border-left-color: red !important;
}
body {
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: 0px;
}
</style>

@ -4,52 +4,129 @@
<script>
import * as Plotly from 'plotly.js'
import * as d3Base from 'd3'
import { EventBus } from '../main.js'
// attach all d3 plugins to the d3 library
const d3 = Object.assign(d3Base)
export default {
name: 'ScatterPlot',
data () {
return {
ScatterPlotResults: ''
ScatterPlotResults: '',
representationDefault: 'MDS',
colorsforOver: [],
max: 0,
min: 0,
}
},
methods: {
ScatterPlotView () {
const colorsforScatterPlot = JSON.parse(this.ScatterPlotResults[0])
const MDSData = JSON.parse(this.ScatterPlotResults[1])
Plotly.purge('OverviewPlotly')
var colorsforScatterPlot = JSON.parse(this.ScatterPlotResults[0])
var MDSData = JSON.parse(this.ScatterPlotResults[1])
var TSNEData = JSON.parse(this.ScatterPlotResults[12])
const classifiersInfo = JSON.parse(this.ScatterPlotResults[2])
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]
}
}
var classifiersInfoProcessing = []
for (let i = 0; i < classifiersInfo.length; i++) {
classifiersInfoProcessing[i] = 'ClassifierID: ' + i + '; Details: '
classifiersInfoProcessing[i] = 'Model ID: ' + i + '; Details: '
}
const DataforMDS = [{
x: MDSData[0],
y: MDSData[1],
mode: 'markers',
text: classifiersInfoProcessing,
marker: {
color: colorsforScatterPlot,
size: 12,
colorscale: 'Viridis',
colorbar: {
title: 'Metrics Sum',
titleside: 'Top'
var DataGeneral
var layout
if ( this.representationDefault == 'MDS') {
DataGeneral = [{
type: 'scatter',
mode: 'markers',
x: MDSData[0],
y: MDSData[1],
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 (MDS)',
xaxis: {
visible: false
},
reversescale: true
}
}]
const layout = {
title: 'Models Performance (MDS)',
xaxis: {
visible: false
},
yaxis: {
visible: false
}
yaxis: {
visible: false
},
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},
}
}
Plotly.newPlot('OverviewPlotly', DataforMDS, layout)
var config = {scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage', 'toggleSpikelines', 'autoScale2d', 'hoverClosestGl2d','hoverCompareCartesian','select2d','hoverClosestCartesian','zoomIn2d','zoomOut2d','zoom2d'], responsive: true}
Plotly.newPlot('OverviewPlotly', DataGeneral, layout, config)
this.selectedPointsOverview()
},
selectedPointsOverview () {
@ -68,12 +145,20 @@ export default {
EventBus.$emit('SendSelectedPointsToServerEvent', ClassifierIDsList)
}
})
},
UpdateScatter () {
this.ScatterPlotView()
}
},
mounted() {
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)
}
}
</script>

@ -0,0 +1,51 @@
<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>
</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: 'SlidersController',
data () {
return {
basicValue1: 100,
basicValue2: 100,
basicValue3: 100,
basicValue4: 100,
basicValue5: 100
}
},
methods: {
slideStart () {
},
slideStop () {
var basicValues = []
basicValues.push(this.basicValue1/100)
basicValues.push(this.basicValue2/100)
basicValues.push(this.basicValue3/100)
basicValues.push(this.basicValue4/100)
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>

@ -7,11 +7,14 @@ import router from './router'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUpload, faPlay, faCheck, faSave} from '@fortawesome/free-solid-svg-icons'
import bFormSlider from 'vue-bootstrap-slider'
library.add(faUpload, faPlay, faCheck, faSave)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.use(bFormSlider)
Vue.use(BootstrapVue)
Vue.config.productionTip = false

104
run.py

@ -359,7 +359,7 @@ def class_feature_importance(X, Y, feature_importances):
#GridSearch = mem.cache(GridSearch)
def InitializeEnsemble():
def Preprocessing():
global resultsList
df_cv_results_classifiersList = []
parametersList = []
@ -378,48 +378,107 @@ def InitializeEnsemble():
FeatureImportance = pd.concat(FeatureImportanceList, ignore_index=True, sort=False)
PerClassMetrics = pd.concat(PerClassMetricsList, ignore_index=True, sort=False)
FeatureAccuracy = pd.concat(FeatureAccuracyList, 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
del df_cv_results_classifiers['params']
df_cv_results_classifiers_metrics = df_cv_results_classifiers.copy()
df_cv_results_classifiers_metrics = df_cv_results_classifiers_metrics.ix[:, 0:NumberofscoringMetrics+1]
del df_cv_results_classifiers_metrics['mean_fit_time']
del df_cv_results_classifiers_metrics['mean_score_time']
df_cv_results_classifiers_metrics = df_cv_results_classifiers_metrics.ix[:, 0:NumberofscoringMetrics]
return [parameters,FeatureImportance,PerClassMetrics,FeatureAccuracy,df_cv_results_classifiers_metrics]
def sumPerMetric(factors):
sumPerClassifier = []
global df_cv_results_classifiers_metrics
for index, row in df_cv_results_classifiers_metrics.iterrows():
rowSum = 0
for elements in row:
rowSum = elements + rowSum
sumPerClassifier.append(rowSum)
global scoring
lengthFactors = len(scoring)
for loop,elements in enumerate(row):
lengthFactors = lengthFactors - 1 + factors[loop]
rowSum = elements*factors[loop] + rowSum
sumPerClassifier.append(rowSum/lengthFactors)
return sumPerClassifier
# Retrieve data from client
@cross_origin(origin='localhost',headers=['Content-Type','Authorization'])
@app.route('/data/factors', methods=["GET", "POST"])
def RetrieveFactors():
Factors = request.get_data().decode('utf8').replace("'", '"')
FactorsInt = json.loads(Factors)
global sumPerClassifierSel
global ModelSpaceMDSNew
global ModelSpaceTSNENew
sumPerClassifierSel = []
ModelSpaceMDSNew = []
ModelSpaceTSNENew = []
preProcessResults = []
preProcessResults = Preprocessing()
XClassifiers = preProcessResults[4]
flagLocal = 0
countRemovals = 0
for l,el in enumerate(FactorsInt['Factors']):
if el is 0:
XClassifiers.drop(XClassifiers.columns[[l-countRemovals]], axis=1, inplace=True)
counter = countRemovals + 1
flagLocal = 1
if flagLocal is 1:
ModelSpaceMDSNew = FunMDS(XClassifiers)
ModelSpaceTSNENew = FunTsne(XClassifiers)
ModelSpaceTSNENew = ModelSpaceTSNENew.tolist()
sumPerClassifierSel = sumPerMetric(FactorsInt['Factors'])
return 'Everything Okay'
@app.route('/data/UpdateOverv', methods=["GET", "POST"])
def UpdateOverview():
global sumPerClassifierSel
global ModelSpaceMDSNew
global ModelSpaceTSNENew
ResultsUpdateOverview = []
ResultsUpdateOverview.append(sumPerClassifierSel)
ResultsUpdateOverview.append(ModelSpaceMDSNew)
ResultsUpdateOverview.append(ModelSpaceTSNENew)
response = {
'Results': ResultsUpdateOverview
}
return jsonify(response)
def InitializeEnsemble():
preProcessResults = []
preProcessResults = Preprocessing()
sumPerClassifier = sumPerMetric(factors)
mergedPredList = zip(*yPredictProb)
mergedPredListListForm = []
for el in mergedPredList:
mergedPredListListForm.append(list(chain(*el)))
XClassifiers = df_cv_results_classifiers_metrics
XClassifiers = preProcessResults[4]
PredictionSpace = FunTsne(mergedPredListListForm)
DataSpace = FunTsne(XData)
ModelSpace = FunMDS(XClassifiers)
ModelSpaceMDS = FunMDS(XClassifiers)
ModelSpaceTSNE = FunTsne(XClassifiers)
ModelSpaceTSNE = ModelSpaceTSNE.tolist()
global ClassifierIDsList
key = 0
EnsembleModel(ClassifierIDsList, key)
DataSpaceList = DataSpace.tolist()
PredictionSpaceList = PredictionSpace.tolist()
DataSpaceList = DataSpace.tolist()
ReturnResults(sumPerClassifier,ModelSpaceMDS,ModelSpaceTSNE,preProcessResults,DataSpaceList,PredictionSpaceList)
def ReturnResults(sumPerClassifier,ModelSpaceMDS,ModelSpaceTSNE,preProcessResults,DataSpaceList,PredictionSpaceList):
global Results
Results = []
FeatureImportance = preProcessResults[1]
PerClassMetrics = preProcessResults[2]
FeatureAccuracy = preProcessResults[3]
FeatureImportance = FeatureImportance.to_json(orient='records')
PerClassMetrics = PerClassMetrics.to_json(orient='records')
FeatureAccuracy = FeatureAccuracy.to_json(orient='records')
DataSpaceList = DataSpace.tolist()
XDataJSON = XData.columns.tolist()
Results.append(json.dumps(sumPerClassifier)) # Position: 0
Results.append(json.dumps(ModelSpace)) # Position: 1
Results.append(json.dumps(ModelSpaceMDS)) # Position: 1
Results.append(json.dumps(classifiersIDPlusParams)) # Position: 2
Results.append(FeatureImportance) # Position: 3
Results.append(PerClassMetrics) # Position: 4
@ -430,11 +489,9 @@ def InitializeEnsemble():
Results.append(json.dumps(classifiersIDwithFI)) # Position: 9
Results.append(json.dumps(DataSpaceList)) # Position: 10
Results.append(json.dumps(PredictionSpaceList)) # Position: 11
Results.append(json.dumps(ModelSpaceTSNE)) # Position: 12
return Results
# Retrieve data from client
@cross_origin(origin='localhost',headers=['Content-Type','Authorization'])
@app.route('/data/ServerRequestSelPoin', methods=["GET", "POST"])
@ -456,11 +513,12 @@ def FeatureSelPerModel():
RetrieveModelsPar = json.loads(RetrieveModelsPar)
RetrieveModelsParRed = []
print(RetrieveModelsPar['brushedAll']) # FIX THIS THING!!!!!
for j, i in enumerate(RetrieveModelsPar['brushedAll']):
print(j)
RetrieveModelsParRed = [for j, i in enumerate(RetrieveModelsPar['brushedAll']) if j not in ClassifierIDsList]
#for j, i in enumerate(RetrieveModelsPar['brushedAll']):
# print(j)
#RetrieveModelsParRed = [for j, i in enumerate(RetrieveModelsPar['brushedAll']) if j not in ClassifierIDsList]
RetrieveModelsParPandas = pd.DataFrame(RetrieveModelsParRed)
#RetrieveModelsParPandas = pd.DataFrame(RetrieveModelsParRed)
RetrieveModelsParPandas = pd.DataFrame(RetrieveModelsPar)
RetrieveModelsParPandas = RetrieveModelsParPandas.drop(columns=['performance'])
RetrieveModelsParPandas = RetrieveModelsParPandas.to_dict(orient='list')
print(RetrieveModelsParPandas)
@ -557,7 +615,6 @@ def EnsembleModel (ClassifierIDsList, keyRetrieved):
for j, each in enumerate(resultsList[index][1]):
all_classifiers.append(make_pipeline(ColumnSelector(cols=columnsReduce[j]), RandomForestClassifier().set_params(**each)))
del columnsReduce[0:len(resultsList[index][1])]
print(all_classifiers)
sclf = StackingCVClassifier(classifiers=all_classifiers,
use_probas=True,
meta_classifier=lr,
@ -566,7 +623,6 @@ def EnsembleModel (ClassifierIDsList, keyRetrieved):
else:
for index, eachelem in enumerate(algorithmList):
if (eachelem == 'KNN'):
print(resultsList[index][1])
for j, each in enumerate(resultsList[index][1]):
all_classifiersSelection.append(make_pipeline(ColumnSelector(cols=columnsReduce[j]), KNeighborsClassifier().set_params(**each)))
del columnsReduce[0:len(resultsList[index][1])]
@ -574,7 +630,6 @@ def EnsembleModel (ClassifierIDsList, keyRetrieved):
for j, each in enumerate(resultsList[index][1]):
all_classifiersSelection.append(make_pipeline(ColumnSelector(cols=columnsReduce[j]), RandomForestClassifier().set_params(**each)))
del columnsReduce[0:len(resultsList[index][1])]
print(all_classifiersSelection)
sclf = StackingCVClassifier(classifiers=all_classifiersSelection,
use_probas=True,
meta_classifier=lr,
@ -687,6 +742,7 @@ def RetrieveModelsParam():
algorithm = RetrieveModelsPar['algorithm']
RetrieveModelsParPandas = pd.DataFrame(RetrieveModelsPar['brushed'])
RetrieveModelsParPandas = RetrieveModelsParPandas.drop(columns=['performance'])
RetrieveModelsParPandas = RetrieveModelsParPandas.drop(columns=['model'])
RetrieveModelsParPandas = RetrieveModelsParPandas.to_dict(orient='list')
RetrieveModels = {}
for key, value in RetrieveModelsParPandas.items():

Loading…
Cancel
Save