ISOVIS
/
StackGenVis
9
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

fixed parameters radial layout

Browse Source
master
Angelos Chatzimparmpas 5 years ago
parent c1665c58f2
commit 6a2b251dda
6 changed files with 2319 additions and 1160 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. BIN
      __pycache__/run.cpython-37.pyc
  2. 3304
      frontend/package-lock.json
  3. 64
      frontend/package.json
  4. 39
      frontend/src/components/Algorithms.vue
  5. 1
      frontend/src/components/Main.vue
  6. 71
      frontend/src/components/Parameters.vue

BIN
__pycache__/run.cpython-37.pyc
View File

Binary file not shown.

3304
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

64
frontend/package.json
Unescape View File

@ -11,15 +11,15 @@
"start": "npm run dev" "start": "npm run dev"
}, },
"dependencies": { "dependencies": {
"@babel/core": "^7.6.4", "@babel/core": "^7.7.2",
"@babel/runtime": "^7.6.3", "@babel/runtime": "^7.7.2",
"@fortawesome/fontawesome-free": "^5.11.2", "@fortawesome/fontawesome-free": "^5.11.2",
"@fortawesome/fontawesome-svg-core": "^1.2.25", "@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-solid-svg-icons": "^5.11.2", "@fortawesome/free-solid-svg-icons": "^5.11.2",
"@fortawesome/vue-fontawesome": "^0.1.7", "@fortawesome/vue-fontawesome": "^0.1.8",
"@statnett/vue-plotly": "^0.3.2", "@statnett/vue-plotly": "^0.3.2",
"@types/d3-drag": "^1.2.3", "@types/d3-drag": "^1.2.3",
"@types/node": "^12.7.12", "@types/node": "^12.12.7",
"ajv": "^6.10.2", "ajv": "^6.10.2",
"audit": "0.0.6", "audit": "0.0.6",
"axios": "^0.19.0", "axios": "^0.19.0",
@ -46,17 +46,17 @@
"fs": "0.0.2", "fs": "0.0.2",
"fs-es6": "0.0.2", "fs-es6": "0.0.2",
"ify-loader": "^1.1.0", "ify-loader": "^1.1.0",
"interactjs": "^1.6.2", "interactjs": "^1.6.3",
"jquery": "^3.4.1", "jquery": "^3.4.1",
"mdbvue": "^5.8.3", "mdbvue": "^6.0.0",
"mini-css-extract-plugin": "^0.8.0", "mini-css-extract-plugin": "^0.8.0",
"npm-check-updates": "^3.1.24", "npm-check-updates": "^3.2.1",
"papaparse": "^5.1.0", "papaparse": "^5.1.0",
"parcoord-es": "^2.2.10", "parcoord-es": "^2.2.10",
"plotly.js": "^1.50.0", "plotly.js": "^1.51.1",
"popper.js": "^1.15.0", "popper.js": "^1.16.0",
"react": "^16.10.2", "react": "^16.11.0",
"react-dom": "^16.10.2", "react-dom": "^16.11.0",
"stardust-allofw": "^0.1.1", "stardust-allofw": "^0.1.1",
"stardust-core": "^0.2.4", "stardust-core": "^0.2.4",
"stardust-webgl": "^0.2.4", "stardust-webgl": "^0.2.4",
@ -64,22 +64,22 @@
"toposort": "^2.0.2", "toposort": "^2.0.2",
"transform-loader": "^0.2.4", "transform-loader": "^0.2.4",
"update": "^0.7.4", "update": "^0.7.4",
"vega": "^5.7.2", "vega": "^5.7.3",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-bootstrap-slider": "^2.1.8", "vue-bootstrap-slider": "^2.1.8",
"vue-papa-parse": "^1.2.2", "vue-papa-parse": "^1.3.0",
"vue-plotly": "^1.0.1", "vue-plotly": "^1.0.1",
"vue-router": "^3.1.3", "vue-router": "^3.1.3",
"vue-slider-component": "^3.0.41", "vue-slider-component": "^3.0.42",
"vue2-simplert-plugin": "^0.5.3", "vue2-simplert-plugin": "^0.5.3",
"webpack-cli": "^3.3.9", "webpack-cli": "^3.3.10",
"webpack-require": "0.0.16" "webpack-require": "0.0.16"
}, },
"devDependencies": { "devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.5.5", "@babel/plugin-proposal-class-properties": "^7.7.0",
"@babel/plugin-proposal-decorators": "^7.6.0", "@babel/plugin-proposal-decorators": "^7.7.0",
"@babel/plugin-proposal-export-namespace-from": "^7.5.2", "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
"@babel/plugin-proposal-function-sent": "^7.5.0", "@babel/plugin-proposal-function-sent": "^7.7.0",
"@babel/plugin-proposal-json-strings": "^7.2.0", "@babel/plugin-proposal-json-strings": "^7.2.0",
"@babel/plugin-proposal-numeric-separator": "^7.2.0", "@babel/plugin-proposal-numeric-separator": "^7.2.0",
"@babel/plugin-proposal-throw-expressions": "^7.2.0", "@babel/plugin-proposal-throw-expressions": "^7.2.0",
@ -87,16 +87,16 @@
"@babel/plugin-syntax-import-meta": "^7.2.0", "@babel/plugin-syntax-import-meta": "^7.2.0",
"@babel/plugin-syntax-jsx": "^7.2.0", "@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.6.2", "@babel/plugin-transform-runtime": "^7.6.2",
"@babel/preset-env": "^7.6.3", "@babel/preset-env": "^7.7.1",
"autoprefixer": "^9.6.5", "autoprefixer": "^9.7.1",
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"babel-plugin-transform-vue-jsx": "^3.7.0", "babel-plugin-transform-vue-jsx": "^3.7.0",
"chalk": "^2.4.2", "chalk": "^3.0.0",
"copy-webpack-plugin": "^5.0.4", "copy-webpack-plugin": "^5.0.5",
"css-loader": "^3.2.0", "css-loader": "^3.2.0",
"eslint": "^6.5.1", "eslint": "^6.6.0",
"eslint-config-standard": "^14.1.0", "eslint-config-standard": "^14.1.0",
"eslint-friendly-formatter": "^4.0.1", "eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^3.0.2", "eslint-loader": "^3.0.2",
@ -104,7 +104,7 @@
"eslint-plugin-node": "^10.0.0", "eslint-plugin-node": "^10.0.0",
"eslint-plugin-promise": "^4.2.1", "eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1", "eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^5.2.3", "eslint-plugin-vue": "^6.0.0",
"extract-text-webpack-plugin": "^3.0.2", "extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^4.2.0", "file-loader": "^4.2.0",
"friendly-errors-webpack-plugin": "^1.7.0", "friendly-errors-webpack-plugin": "^1.7.0",
@ -112,28 +112,28 @@
"node-notifier": "^6.0.0", "node-notifier": "^6.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.3", "optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^4.0.2", "ora": "^4.0.2",
"portfinder": "^1.0.24", "portfinder": "^1.0.25",
"postcss-import": "^12.0.1", "postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",
"postcss-url": "^8.0.0", "postcss-url": "^8.0.0",
"rimraf": "^3.0.0", "rimraf": "^3.0.0",
"sass": "^1.23.0", "sass": "^1.23.3",
"sass-loader": "^8.0.0", "sass-loader": "^8.0.0",
"semver": "^6.3.0", "semver": "^6.3.0",
"shelljs": "^0.8.3", "shelljs": "^0.8.3",
"uglifyjs-webpack-plugin": "^2.2.0", "uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^2.2.0", "url-loader": "^2.2.0",
"vue-class-component": "^7.1.0", "vue-class-component": "^7.1.0",
"vue-cli-plugin-vuetify": "^1.0.1", "vue-cli-plugin-vuetify": "^2.0.2",
"vue-loader": "^15.7.1", "vue-loader": "^15.7.2",
"vue-property-decorator": "^8.2.2", "vue-property-decorator": "^8.3.0",
"vue-style-loader": "^4.1.2", "vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10", "vue-template-compiler": "^2.6.10",
"vue2-simplert": "^1.0.0", "vue2-simplert": "^1.0.0",
"vuetify-loader": "^1.3.0", "vuetify-loader": "^1.3.0",
"webpack": "^4.41.1", "webpack": "^4.41.2",
"webpack-bundle-analyzer": "^3.5.2", "webpack-bundle-analyzer": "^3.6.0",
"webpack-dev-server": "^3.8.2", "webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2" "webpack-merge": "^4.2.2"
}, },
"browserslist": [ "browserslist": [

39
frontend/src/components/Algorithms.vue
Unescape View File

@ -29,7 +29,9 @@ export default {
parameters: [], parameters: [],
algorithm1: [], algorithm1: [],
algorithm2: [], algorithm2: [],
chart: '' chart: '',
flagEmpty: 0,
ActiveModels: []
} }
}, },
methods: { methods: {
@ -48,18 +50,18 @@ export default {
// initialize/instansiate algorithms and parameters // initialize/instansiate algorithms and parameters
this.algorithm1 = [] this.algorithm1 = []
this.algorithm2 = [] this.algorithm2 = []
var parameters = [] this.parameters = []
for (var i = 0; i < Object.keys(PerformAlgor1['0']).length; i++) { for (var i = 0; i < Object.keys(PerformAlgor1['0']).length; i++) {
this.algorithm1.push({'Performance Metrics': Object.values(PerformAlgor1['0'])[i]*100,Algorithm:'KNN',Model:'Model ' + Algor1IDs[i] + '; Parameters '+JSON.stringify(Object.values(PerformAlgor1['params'])[i])+'; Performance Metrics ',ModelID:Algor1IDs[i]}) this.algorithm1.push({'Performance Metrics': Object.values(PerformAlgor1['0'])[i]*100,Algorithm:'KNN',Model:'Model ' + Algor1IDs[i] + '; Parameters '+JSON.stringify(Object.values(PerformAlgor1['params'])[i])+'; Performance Metrics ',ModelID:Algor1IDs[i]})
parameters.push(JSON.stringify(Object.values(PerformAlgor1['params'])[i])) this.parameters.push(JSON.stringify(Object.values(PerformAlgor1['params'])[i]))
} }
for (let j = 0; j < Object.keys(PerformAlgor2['0']).length; j++) { for (let j = 0; j < Object.keys(PerformAlgor2['0']).length; j++) {
this.algorithm2.push({'Performance Metrics': Object.values(PerformAlgor2['0'])[j]*100,Algorithm:'RF',Model:'Model ' + Algor2IDs[j] + '; Parameters '+JSON.stringify(Object.values(PerformAlgor2['params'])[j])+'; Performance Metrics ',ModelID:Algor2IDs[j]}) this.algorithm2.push({'Performance Metrics': Object.values(PerformAlgor2['0'])[j]*100,Algorithm:'RF',Model:'Model ' + Algor2IDs[j] + '; Parameters '+JSON.stringify(Object.values(PerformAlgor2['params'])[j])+'; Performance Metrics ',ModelID:Algor2IDs[j]})
parameters.push(JSON.stringify(Object.values(PerformAlgor2['params'])[j])) this.parameters.push(JSON.stringify(Object.values(PerformAlgor2['params'])[j]))
} }
EventBus.$emit('ParametersAll', parameters) EventBus.$emit('ParametersAll', this.parameters)
// concat the data // concat the data
var data = this.algorithm1.concat(this.algorithm2) var data = this.algorithm1.concat(this.algorithm2)
@ -81,12 +83,24 @@ export default {
var el = document.getElementsByClassName('d3-exploding-boxplot boxcontent') var el = document.getElementsByClassName('d3-exploding-boxplot boxcontent')
this.brushStatus = document.getElementsByClassName('extent') this.brushStatus = document.getElementsByClassName('extent')
// on clicks // on clicks
var flagEmptyKNN = 0
var flagEmptyRF = 0
el[0].onclick = function() { el[0].onclick = function() {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point KNN') var allPoints = document.getElementsByClassName('d3-exploding-boxplot point KNN')
for (let i = 0; i < allPoints.length; i++) { for (let i = 0; i < allPoints.length; i++) {
allPoints[i].style.fill = previousColor[0] allPoints[i].style.fill = previousColor[0]
allPoints[i].style.opacity = '1.0' allPoints[i].style.opacity = '1.0'
} }
if (flagEmptyKNN == 0) {
flagEmptyKNN = 1
} else {
flagEmptyKNN = 0
}
EventBus.$emit('updateFlagKNN', flagEmptyKNN)
EventBus.$emit('PCPCall', 'KNN') EventBus.$emit('PCPCall', 'KNN')
EventBus.$emit('updateBarChart', []) EventBus.$emit('updateBarChart', [])
} }
@ -96,6 +110,14 @@ export default {
allPoints[i].style.fill = previousColor[1] allPoints[i].style.fill = previousColor[1]
allPoints[i].style.opacity = '1.0' allPoints[i].style.opacity = '1.0'
} }
if (flagEmptyRF == 0) {
flagEmptyRF = 1
} else {
flagEmptyRF = 0
}
EventBus.$emit('updateFlagRF', flagEmptyRF)
EventBus.$emit('PCPCall', 'RF') EventBus.$emit('PCPCall', 'RF')
EventBus.$emit('updateBarChart', []) EventBus.$emit('updateBarChart', [])
} }
@ -111,11 +133,10 @@ export default {
var limiter = this.chart.returnBrush() var limiter = this.chart.returnBrush()
var algorithm = [] var algorithm = []
const previousColor = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f'] const previousColor = ['#8dd3c7','#8da0cb']
var modelsActive = [] var modelsActive = []
for (var j = 0; j < this.AllAlgorithms.length; j++) { for (var j = 0; j < this.AllAlgorithms.length; j++) {
algorithm = [] algorithm = []
modelsActive = []
if (this.AllAlgorithms[j] === 'KNN') { if (this.AllAlgorithms[j] === 'KNN') {
var allPoints = document.getElementsByClassName('d3-exploding-boxplot point KNN') var allPoints = document.getElementsByClassName('d3-exploding-boxplot point KNN')
algorithm = this.algorithm1 algorithm = this.algorithm1
@ -170,6 +191,8 @@ export default {
} }
} }
} }
EventBus.$emit('sendParameters', this.parameters)
EventBus.$emit('updateActiveModels', modelsActive)
this.UpdateBarChart() this.UpdateBarChart()
}, },
brushed () { brushed () {
@ -223,6 +246,8 @@ export default {
} }
} }
} }
EventBus.$emit('sendParameters', this.parameters)
EventBus.$emit('updateActiveModels', modelsActive)
this.UpdateBarChart() this.UpdateBarChart()
}, },
UpdateBarChart () { UpdateBarChart () {

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

@ -296,7 +296,6 @@ export default Vue.extend({
console.log('Server successfully sent updated per class features!') console.log('Server successfully sent updated per class features!')
EventBus.$emit('emittedEventCallingAllAlgorithms', this.PerformancePerModel) EventBus.$emit('emittedEventCallingAllAlgorithms', this.PerformancePerModel)
EventBus.$emit('emittedEventCallingBarChart', this.PerformancePerModel) EventBus.$emit('emittedEventCallingBarChart', this.PerformancePerModel)
EventBus.$emit('emittedEventCallingOverview')
}) })
.catch(error => { .catch(error => {
console.log(error) console.log(error)

71
frontend/src/components/Parameters.vue
Unescape View File

@ -12,10 +12,20 @@ export default {
data () { data () {
return { return {
WH: [], WH: [],
storeActiveModels: [],
storeParameters: [],
FlagKNN: 0,
FlagRF: 0,
KNNModels: 576, //KNN models
} }
}, },
methods: { methods: {
draw() { draw() {
// Clear Heatmap first
var svg = d3.select("#overview");
svg.selectAll("*").remove();
var widthinter = this.WH[0]*3 // interactive visualization var widthinter = this.WH[0]*3 // interactive visualization
var heightinter = this.WH[1]*1.23 // interactive visualization var heightinter = this.WH[1]*1.23 // interactive visualization
var margin = 0, var margin = 0,
@ -110,13 +120,54 @@ export default {
.attr("r", innerRadius) .attr("r", innerRadius)
.classed("center-circle", true); .classed("center-circle", true);
var n_neighbors = 0
var metric = 0
var algorithm = 0
var weight = 0
var n_estimators = 0
var criterion = 0
if (this.FlagKNN == 1) {
n_neighbors = 100
metric = 100
algorithm = 100
weight = 100
}
if (this.FlagRF == 1) {
n_estimators = 100
criterion = 100
}
if (this.storeActiveModels.length != 0) {
var countkNNRelated = []
var countRFRelated = []
for (let i = 0; i < this.storeActiveModels.length; i++) {
if (this.storeActiveModels[i] < this.KNNModels) {
countkNNRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]]))
} else {
countRFRelated.push(JSON.parse(this.storeParameters[this.storeActiveModels[i]]))
}
}
console.log(countkNNRelated)
console.log(countRFRelated)
n_neighbors = ([... new Set(countkNNRelated.map(data => data.n_neighbors))].length / 25) * 100
metric = ([... new Set(countkNNRelated.map(data => data.metric))].length / 4) * 100
algorithm = ([... new Set(countkNNRelated.map(data => data.algorithm))].length / 3) * 100
weight = ([... new Set(countkNNRelated.map(data => data.weight))].length / 2) * 100
n_estimators = ([... new Set(countRFRelated.map(data => data.n_estimators))].length / 80) * 100
criterion = ([... new Set(countRFRelated.map(data => data.criterion))].length / 2) * 100
console.log(algorithm)
}
var data = [ var data = [
{ algorithm: 'KNN', parameter: 'n_neighbors', percentage: 70 }, { algorithm: 'KNN', parameter: 'n_neighbors', percentage: n_neighbors },
{ algorithm: 'KNN', parameter: 'metric', percentage: 50 }, { algorithm: 'KNN', parameter: 'metric', percentage: metric },
{ algorithm: 'KNN', parameter: 'algorithm', percentage: 75 }, { algorithm: 'KNN', parameter: 'algorithm', percentage: algorithm },
{ algorithm: 'KNN', parameter: 'weight', percentage: 50 }, { algorithm: 'KNN', parameter: 'weight', percentage: weight },
{ algorithm: 'RF', parameter: 'n_estimators', percentage: 80 }, { algorithm: 'RF', parameter: 'n_estimators', percentage: n_estimators },
{ algorithm: 'RF', parameter: 'criterion', percentage: 50 } { algorithm: 'RF', parameter: 'criterion', percentage: criterion }
]; ];
var cats = data.map(function(d, i) { var cats = data.map(function(d, i) {
@ -448,7 +499,13 @@ export default {
} }
}, },
mounted () { mounted () {
EventBus.$on('emittedEventCallingOverview',this.draw) EventBus.$on('updateFlagKNN', data => { this.FlagKNN = data })
EventBus.$on('updateFlagRF', data => { this.FlagRF = data })
EventBus.$on('updateFlagKNN', this.draw)
EventBus.$on('updateFlagRF', this.draw)
EventBus.$on('sendParameters', data => { this.storeParameters = data })
EventBus.$on('updateActiveModels', data => { this.storeActiveModels = data })
EventBus.$on('updateActiveModels', this.draw)
EventBus.$on('Responsive', data => { EventBus.$on('Responsive', data => {
this.WH = data}) this.WH = data})
EventBus.$on('ResponsiveandChange', data => { EventBus.$on('ResponsiveandChange', data => {

Write Preview
Loading…
Cancel
Save