From 74151a6094ac425076a582b571b86259bc49f8e7 Mon Sep 17 00:00:00 2001 From: Angelos Chatzimparmpas Date: Fri, 4 Oct 2019 12:22:15 +0200 Subject: [PATCH] push last --- __pycache__/run.cpython-37.pyc | Bin 20722 -> 20757 bytes frontend/index.html | 2 +- frontend/src/components/Algorithms.vue | 84 +++++++++++++++--- frontend/src/components/BarChart.vue | 11 ++- frontend/src/components/CurrentStack.vue | 53 ----------- frontend/src/components/Main.vue | 42 ++++----- frontend/src/components/PerMetricBarChart.vue | 17 ++-- frontend/src/components/ScatterPlot.vue | 53 +++++++++-- run.py | 2 + 9 files changed, 153 insertions(+), 111 deletions(-) delete mode 100644 frontend/src/components/CurrentStack.vue diff --git a/__pycache__/run.cpython-37.pyc b/__pycache__/run.cpython-37.pyc index 82a321aab0ab6b3722bef1cb6b067faaa1f821a8..0b396234566d3dcacc5e26fe6155f726f65c98f5 100644 GIT binary patch delta 925 zcmYL{Ur19?7{Kp$x82R_Hs>}imh->YZO%J%ZZiWdr=T^-qKAk~LL)^;Jx&Un1o==s zg?^Qkkz0Q#ddvF~f=TbvOG!}BLr_Q{mSv@8b-opKF6Vd7_wRh){mxlU!PVPfZM0Zq zfe*85vZHYPk=3riLo8ATJ#lj)V+=s(7Dwf{C2mc~VOGzFiJRCe;T7Qv;WI9I56U0;b`yAD4L12g88%>~8F67MvJEGFmtX~pDuND| z$X!g_BIt90%3$l-$qHG7Qe>4?u!VOkA44;CsE4dSxszANoP1#d;JoUAecF=h)LB~(GW9{x|?o!g(NtbSeiMK)q zQMBK<=Vi`r~=<`+@FI}(HOY2rRYw8YAkL(0Y2?w^A*wd$B`e!c!a=q zpuffYH>9s6YRjW@+=OW|yYNZN^>gW%mn1h5^2uC4I8I{Pv5<>LjQzv$f#G;Hdqesn z@+c;h5)?uo8Ab`^B$g1$2p+-$8N9Un->D`+z|J}|zHN0tKYndJ3jvMoodYS|SU-kh zs-cpH%wkWh3M%nNtVi?%9*el0Oy&C5|N5!t{Zuj3)(bjqx~*P3Ko2_o^4L1K%ffv;cEMoF4t6m3+>8pQta9l delta 891 zcmYk4OH7kN5XU=TpSJX)(AKm<%R?xA(DEo0#RTM;LZ|}a&}cXiA<-BkEahN;_#n}! z7vqSDAwIy6XuPQ3g=h#-51ME^=)p*Wi6(kdP$WnZA2U6O`(=N-v-98C`DS-~3YI59 zt~Z;FDrz<>c0aptPtNqf6y|vba(kswVKLFiomPO(Xi$n3j<7fhQl* zaluoA`9+_h0MothLP-NgFwiGfDCPkjN2X?`uBF~UebB9Rd2;~Ad;|8cWQ%W%dB%6f zGH&sA8kcCg4x}!}K7XYomhhT?8WyoJ5VkrbS~rkDrP&I6pjcDR1&k8p<9M(PHt=b1 z1{&~0s7wAuBA;5=Xb^u?_#xzl7R6NJ(m*%*!XZdvJX{aIaUwhb{b;V}g>@7a)9@1= zm4~#8v~3Tbt~^TzTOv0#T1p5@V>WyqaoDFhi&W|8r)7{OgCumg7C8kgI9yd?zq{#| zDN7yu^~zk83m~a1?3e?1h*zr%!Kyr|eyz@yDYp2*dG6wz9pVVs807L8l7IAAv8I=h_sK6>SN z>XbKZ*E3w~b~Ad|ObK(y+^0V}l;|Hyl#6$~p390n#&$*_<1jl$86GzC83l|Y#tU|M zdA3=cM!J$@OAZ`CXX`M8l=0SC(531az<66oTTJp9Jl|FZ#W>q`PznH^ta8~zkk;S+ zE1!nS7sPn%5J<}7SdG-d&sXpx6l;tP#z)2{20sj;<3#ifD}(Px@TCYR!^a3QI0Fja O(LSNJ8{D|m?)eKH*U|L= diff --git a/frontend/index.html b/frontend/index.html index d5c2c05b5..48ec241d1 100755 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ - istacking + StackVis
diff --git a/frontend/src/components/Algorithms.vue b/frontend/src/components/Algorithms.vue index c2ef5db8a..bcce5b4dd 100644 --- a/frontend/src/components/Algorithms.vue +++ b/frontend/src/components/Algorithms.vue @@ -23,9 +23,12 @@ export default { brushedBoxPl: [], previousColor: 0, selectedAlgorithm: 0, + AllAlgorithms: ['KNN','RF'], KNNModels: 576, //KNN models WH: [], parameters: [], + algorithm1: [], + algorithm2: [], chart: '' } }, @@ -34,28 +37,22 @@ export default { d3.selectAll("#exploding_boxplot > *").remove(); const PerformAlgor1 = JSON.parse(this.PerformanceAllModels[0]) const PerformAlgor2 = JSON.parse(this.PerformanceAllModels[2]) - var algorithm1 = [] - var algorithm2 = [] + this.algorithm1 = [] + this.algorithm2 = [] 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 '}) + this.algorithm1.push({Performance: Object.values(PerformAlgor1['0'])[i]*100,Algorithm:'KNN',Model:'Model ' + i + '; Parameters '+JSON.stringify(Object.values(PerformAlgor1['params'])[i])+'; Performance ',ModelID:i}) parameters.push(JSON.stringify(Object.values(PerformAlgor1['params'])[i])) } 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 '}) + this.algorithm2.push({Performance: Object.values(PerformAlgor2['0'])[j]*100,Algorithm:'RF',Model:'Model ' + temp + '; Parameters '+JSON.stringify(Object.values(PerformAlgor2['params'])[j])+'; Performance ',ModelID:temp}) parameters.push(JSON.stringify(Object.values(PerformAlgor2['params'])[j])) } EventBus.$emit('ParametersAll', parameters) - var data = algorithm1.concat(algorithm2) - /*median.push(sum/Object.keys(PerformAlgor2['0']).length) - if (median[0] > median[1]) - var data = algorithm1.concat(algorithm2) - else - var data = algorithm2.concat(algorithm1)*/ + var data = this.algorithm1.concat(this.algorithm2) - // chart(data,aes) // aesthetic : // y : point's value on y axis // group : how to group data on x axis @@ -104,7 +101,70 @@ export default { }, brushActivationAll () { // continue here and select the correct points. - console.log(this.chart.returnBrush()) + var limiter = this.chart.returnBrush() + + var algorithm = [] + const previousColor = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f'] + var modelsActive = [] + for (var j = 0; j < this.AllAlgorithms.length; j++) { + algorithm = [] + modelsActive = [] + if (this.AllAlgorithms[j] === 'KNN') { + var allPoints = document.getElementsByClassName('d3-exploding-boxplot point KNN') + algorithm = this.algorithm1 + } else { + var allPoints = document.getElementsByClassName('d3-exploding-boxplot point RF') + algorithm = this.algorithm2 + } + for (let k = 0; k < allPoints.length; k++) { + if (algorithm[k].Performance < limiter[0] && algorithm[k].Performance > limiter[1]) { + modelsActive.push(algorithm[k].ModelID) + } + } + for (let i = 0; i < allPoints.length; i++) { + if (this.AllAlgorithms[j] === 'KNN') { + allPoints[i].style.fill = previousColor[0] + } else { + allPoints[i].style.fill = previousColor[1] + } + } + + 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.AllAlgorithms[j] === '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 (this.AllAlgorithms[j] === '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() }, brushed () { if (this.selectedAlgorithm == 'KNN') { diff --git a/frontend/src/components/BarChart.vue b/frontend/src/components/BarChart.vue index 00ae89837..55d0ebb2a 100644 --- a/frontend/src/components/BarChart.vue +++ b/frontend/src/components/BarChart.vue @@ -85,9 +85,9 @@ export default { } }*/ var layout = { - autosize: false, + autosize: true, barmode: 'group', - width: 550, + width: 650, height: 400, xaxis: { title: 'Algorithm', @@ -132,6 +132,13 @@ export default { }, exponentformat: 'e', showexponent: 'all' + }, + margin: { + l: 40, + r: 0, + b: 40, + t: 25, + pad: 0 } } /*for (let j = 0; j < ClassNames.length; j++) { diff --git a/frontend/src/components/CurrentStack.vue b/frontend/src/components/CurrentStack.vue deleted file mode 100644 index 387c2512e..000000000 --- a/frontend/src/components/CurrentStack.vue +++ /dev/null @@ -1,53 +0,0 @@ - - - \ No newline at end of file diff --git a/frontend/src/components/Main.vue b/frontend/src/components/Main.vue index 11bacf4c0..c5501d684 100755 --- a/frontend/src/components/Main.vue +++ b/frontend/src/components/Main.vue @@ -15,25 +15,14 @@ - - - Data Space Visualization - - - - - - - Models Space Visualization - [Sel.:{{OverSelLength}}/All:{{OverAllLength}}] + [Sel.:{{OverSelLength}}/All:{{OverAllLength}}] @@ -52,6 +41,16 @@ + + + Data Space Visualization + + + + + + + @@ -101,22 +100,14 @@ - + - Current Stacking Ensemble + Current Stacking Ensemble and Provenance Visualization - - - Provenance Visualization - - - - - @@ -139,7 +130,6 @@ 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' @@ -171,7 +161,6 @@ export default Vue.extend({ Heatmap, ToggleSelection, Provenance, - CurrentStack, FinalResultsLinePlot, mdbCard, mdbCardBody, @@ -216,6 +205,7 @@ export default Vue.extend({ selectVisualRepresentation () { const representationSelectionDocum = document.getElementById('selectBarChart') this.representationSelection = representationSelectionDocum.options[representationSelectionDocum.selectedIndex].value + console.log(this.representationSelection) EventBus.$emit('RepresentationSelection', this.representationSelection) }, getCollection () { diff --git a/frontend/src/components/PerMetricBarChart.vue b/frontend/src/components/PerMetricBarChart.vue index 7c3ab7e57..9d74c70c8 100644 --- a/frontend/src/components/PerMetricBarChart.vue +++ b/frontend/src/components/PerMetricBarChart.vue @@ -10,8 +10,7 @@ export default { name: 'PerMetricsBarChart', data () { return { - barchartmetrics: '', - representationDefault: 'bar' + barchartmetrics: '' } }, methods: { @@ -19,8 +18,8 @@ export default { var metricsPerModel = JSON.parse(this.barchartmetrics[9]) var vh = 80 - if (this.representationDefault === 'bar'){ - var type = 'bar'; + /*if (this.representationDefault === 'bar'){ + var type = 'bar'; } else if (this.representationDefault === 'line'){ var type = 'line'; } else { @@ -29,9 +28,9 @@ export default { var difference = []; for (var i=0; i {this.barchartmetrics = data;}) EventBus.$on('InitializeMetricsBarChart', this.LineBar) - EventBus.$on('RepresentationSelection', this.LineBar) - EventBus.$on('RepresentationSelection', data => {this.representationDefault = data}) } } \ No newline at end of file diff --git a/frontend/src/components/ScatterPlot.vue b/frontend/src/components/ScatterPlot.vue index 450427c56..e482a80a5 100644 --- a/frontend/src/components/ScatterPlot.vue +++ b/frontend/src/components/ScatterPlot.vue @@ -16,7 +16,7 @@ export default { data () { return { ScatterPlotResults: '', - representationDefault: 'MDS', + representationDef: 'MDS', colorsforOver: [], brushedBox : [], max: 0, @@ -56,10 +56,10 @@ export default { Plotly.purge('OverviewPlotly') var colorsforScatterPlot = JSON.parse(this.ScatterPlotResults[0]) - console.log(colorsforScatterPlot) var MDSData = JSON.parse(this.ScatterPlotResults[1]) - console.log(MDSData) var parameters = JSON.parse(this.ScatterPlotResults[2]) + var tSNEData = JSON.parse(this.ScatterPlotResults[12]) + parameters = JSON.parse(parameters) var classifiersInfo = this.brushedBox var keepingArrayIndices = [] @@ -75,7 +75,6 @@ export default { } } } - var flag this.length = keepingArrayIndices.length EventBus.$emit('sendPointsNumber', this.length) @@ -97,8 +96,7 @@ export default { counter++ } } - console.log(MDSData) - console.log(colorsforScatterPlot) + if (this.colorsforOver.length != 0) { if (this.colorsforOver[1].length != 0) { MDSData = this.colorsforOver[1] @@ -107,13 +105,15 @@ export default { colorsforScatterPlot = this.colorsforOver[0] } } - console.log(this.colorsforOver) + console.log(MDSData) + console.log(tSNEData) var classifiersInfoProcessing = [] for (let i = 0; i < modelsDetails.length; i++) { classifiersInfoProcessing[i] = 'Model ID: ' + modelsIDs[i] + '; Details: ' + modelsDetails[i] } var DataGeneral var layout + if (this.representationDef == 'MDS') { DataGeneral = [{ type: 'scatter', mode: 'markers', @@ -149,6 +149,43 @@ export default { hoverlabel: { bgcolor: "#FFF" }, legend: {orientation: 'h', y: -0.3}, } + } else { + DataGeneral = [{ + type: 'scatter', + mode: 'markers', + x: tSNEData[0], + y: tSNEData[1], + hovertemplate: + "%{text}

" + + "", + text: classifiersInfoProcessing, + marker: { + color: colorsforScatterPlot, + size: 12, + colorscale: 'Viridis', + colorbar: { + title: 'Metrics Average', + titleside: 'Top' + }, + } + }] + layout = { + title: 'Models Performance (MDS)', + xaxis: { + visible: false + }, + yaxis: { + visible: false + }, + autosize: true, + width: 400, + height: 400, + 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} @@ -193,6 +230,8 @@ export default { this.colorsforOver = data}) EventBus.$on('ParametersAll', data => { this.parametersAll = data }) EventBus.$on('getColors', this.UpdateScatter) + EventBus.$on('RepresentationSelection', data => {this.representationDef = data}) + EventBus.$on('RepresentationSelection', this.ScatterPlotView) } } \ No newline at end of file diff --git a/run.py b/run.py index b2219d392..fa5ed1e73 100644 --- a/run.py +++ b/run.py @@ -496,6 +496,7 @@ def InitializeEnsemble(): ModelSpaceMDS = FunMDS(XClassifiers) ModelSpaceTSNE = FunTsne(XClassifiers) ModelSpaceTSNE = ModelSpaceTSNE.tolist() + print(ModelSpaceTSNE) global ClassifierIDsList key = 0 EnsembleModel(ClassifierIDsList, key) @@ -530,6 +531,7 @@ def ReturnResults(sumPerClassifier,ModelSpaceMDS,ModelSpaceTSNE,preProcessResult Results.append(json.dumps(metricsPerModel)) # Position: 9 Results.append(perm_imp_eli5PDCon) # Position: 10 Results.append(featureScoresCon) # Position: 11 + Results.append(json.dumps(ModelSpaceTSNE)) # Position: 12 return Results # Retrieve data from client