From 68ff2d42b09d0870b039e91c671ecc48cb81cb93 Mon Sep 17 00:00:00 2001 From: Angelos Chatzimparmpas Date: Wed, 20 Jan 2021 16:22:38 +0100 Subject: [PATCH] new --- __pycache__/run.cpython-38.pyc | Bin 35317 -> 35332 bytes .../src/components/FeatureSpaceDetail.vue | 527 ++++++++++-------- .../src/components/FeatureSpaceOverview.vue | 3 +- frontend/src/components/Heatmap.vue | 6 +- frontend/src/components/Main.vue | 1 - frontend/src/components/Results.vue | 2 +- run.py | 1 - 7 files changed, 288 insertions(+), 252 deletions(-) diff --git a/__pycache__/run.cpython-38.pyc b/__pycache__/run.cpython-38.pyc index e07987513dcc6a3e81b805bf110715b7f2f19e8a..7e24ac9a64d44932d85b5b020531aa2fbad9d6e8 100644 GIT binary patch delta 1551 zcmZvcYiv_x7{||ZPTO^Dw~m$3)$S%^m#)*X?gFzjAzol}8pJ8gqQc2eCv)p%Z%@Y< zts5Jld>|ot_(Cvdi!ml9Cg3448nfs(HAacL4H`&rjzkm(4lfvR@qJFGwh8_4%kzJ( z?|Gkd`a6n;Pl|cZ<>grf{u^m9@BQ;^-bZD?w9m?x4PC+{fS_(vCDlGD%8jah%E#@d zX_0&FQ_ZS04N0fkqT0!;wkkDB?Qx^LN!>ivHZ3HJ6^~MJZ@~-1hcrW=`BuM^G=w<-sUIa4xVYAfWL4@+<{wL>ftWNS`zRp z-fWp$^`=@YVMSYM?JlTT;LSad%IOdH4#t%r0~+=|p^ES$4sH9i^cptheuL7*q7Q4Q-nAY*;%!!|boOpic zS${CbZcz9pei$g*ev3?*l8j0`6peYhnLu^?eHIvheFY{F41_#FKEX~X zAgtjCIL0c_gky-Sw-Mee%h<9L=8 zfq;iXZJAfpFc{2~X9u%x%n{0x@l5H3V!R&ew5BhQhTn%?fZz-M$@6OQW zxGs{Z@5e-zuEd4N6Jr#d)iKxe&1_pQWc?^P)m55q8_s92(OT|6P5{H@*N@T zC_!HxZH?7a-~mESPo+k4_9!{B~a__*S5yn^pWj{rM4uZbi9Gs8tDZ1zG zuxqHK=$`A=4h_8s);P6$nmP?@i);zt0Dh~+tY&f>$W5P{A4c(b{3Yv1me+x~!=-Q# zYlagpdg|LoL5S&po{~W_i)OF^tJ6Lnb^(mx-2OML2`Wz#Ud7}{D~xOBMsDXq0^gem zTlK5eFLV~GC;Q^ delta 1437 zcmZ{ke@t6d6vy9rk3I@-ST=O!0WAn6rR%2hv(QcBY|LP4BAE^>Dl|M$25s5pl^>%W z4jAemEK836m@LbP*+2T%e8w1KW-u{P6J1OY6-@*;GniX-BP4`{=smAEi;4Z?lkfSS zbMJZgp7%QWmbivu&ht4r*#iHaTa-H%FXepfgk#1R&N~?aNw-aip+|Jvg-Tu0t7b$H zxUSZv8A#am8r?>&UaPsaifK!zPWN4?pAi!Inn&BCd0&wds@{MWSEYr;3qyX~?^4}< z4OBt*Yq_eBFZ5=dwXhH4g3+Kq0`7>t;#rx!Xq1%~OR(PvRFs0z z=lK%gCf0dB0MWSR?X@WL{F2zCglpJYIR@VwS1U6Be#PagR+z_w)jpWRk?MCi9W_Vc zJJf5Qh7Fvp8HaT|=+48I+P!cWCu`&ICqmu)miv2M8EhIh-;vysCBC@_7BYJxoqaK_ zivcxzpHNP?j^l@B9m`w>Gj$e<40PACm9(gV-N25<*C2^Yjkn-uywaq?60S6r$iL9? zMZW>&>^qVV`SlbK~+wY`~$xVI``cn8RA&5Xt8krfaeJNi!6cm2LgZd z1SS!7U~ZdT31)V8h4dKfVml3A+c#2i0p%QoV#0%jGD0(Lq!_MtK1{_(b|ka!yUMMV zDvsya{UG3_mWK4hKi=1s9)8xh?Jiv5ZQ)dU=mk4&hMSbswNP^vnd4FAk8kq z*+^Sj>_m4oJuboNZE-2CMh}nuKqu)Yn6KagQd!g`kKiJd6WoN0l&v7;AsnO7Mz~Gb zL*8jpQv`D=g`~Wc*h@%_hrG85I|clt-|E`OQw!GqP-kx-${2fyDxaZzBf*@bjLZG) zV2%mfkE;d$JIRNQ>Ekbf{4A}E8EY&FFpSsq0VR`m%^*AV)x=^IFoNe}FDpa;$rKDa z-~`qW##K7yx1RC=ot?*sGapM&uV$IPm5qbpoZ?-6 rH0ob}7oM1-N8cdaC0r(K63js<)PI;TLO4M%XLOR(7~vGU-dy|}^vZwH diff --git a/frontend/src/components/FeatureSpaceDetail.vue b/frontend/src/components/FeatureSpaceDetail.vue index 7f1b42b..6b7f131 100644 --- a/frontend/src/components/FeatureSpaceDetail.vue +++ b/frontend/src/components/FeatureSpaceDetail.vue @@ -61,8 +61,9 @@ export default { featureAddRemCount: [], mode: 0, // this should be 0 KeepIDs: [], - KeepIDTransform: '', - keepNumberOfCompareNodes: 0 + KeepIDTransform: [], + keepNumberOfCompareNodes: 0, + activeLeafNode: -1 } }, methods: { @@ -96,13 +97,14 @@ export default { setLayerExplore() { this.mode = 0 this.KeepIDs = [] + this.KeepIDTransform = [] this.keepNumberOfCompareNodes = 0 //this.graphVizualization() EventBus.$emit('storeGeneration') }, setLayerCompare() { this.mode = 1 - this.KeepIDTransform = '' + this.KeepIDTransform = [] EventBus.$emit('brushLink', -1) this.graphVizualization() }, @@ -732,11 +734,13 @@ export default { this.VIFRemaining = [...VIFRemainingLoc] this.MIRemaining = [...MIRemainingLoc] + var activeNodeLoc = this.activeLeafNode + var nodes = [] var groupID = 0 listofNodes.forEach( function(element) { groupID++ - nodes.push({"name": element, "group": groupID+"_root", "active": true}) + nodes.push({"name": element, "group": groupID+"_root"}) }) var links = [] @@ -752,47 +756,66 @@ export default { } }) }) - - groupID = 0 - var featureNumber = 0 - listofNodes.forEach( function(element) { - groupID++ - nodes.push( - {"name": featureNames[(featureNumber)*numberOfTransformations+0], "group": groupID, "active": false}, - {"name": featureNames[(featureNumber)*numberOfTransformations+1], "group": groupID, "active": false}, - {"name": featureNames[(featureNumber)*numberOfTransformations+2], "group": groupID, "active": false}, - {"name": featureNames[(featureNumber)*numberOfTransformations+3], "group": groupID, "active": false}, - {"name": featureNames[(featureNumber)*numberOfTransformations+4], "group": groupID, "active": false}, - {"name": featureNames[(featureNumber)*numberOfTransformations+5], "group": groupID, "active": false}, - {"name": featureNames[(featureNumber)*numberOfTransformations+6], "group": groupID, "active": false}, - {"name": featureNames[(featureNumber)*numberOfTransformations+7], "group": groupID, "active": false}, - {"name": featureNames[(featureNumber)*numberOfTransformations+8], "group": groupID, "active": false}, - {"name": featureNames[(featureNumber)*numberOfTransformations+9], "group": groupID, "active": false}, - {"name": featureNames[(featureNumber)*numberOfTransformations+10], "group": groupID, "active": false}, - {"name": featureNames[(featureNumber)*numberOfTransformations+11], "group": groupID, "active": false}, - ) - featureNumber++ - }) - Object.entries(pushEachFinal).forEach( - function ([index, feature]) { - feature.value.forEach(function (element, indexIns) { - if (element.valueIns > 0) { - links.push({"source": index, "target": (index*feature.value.length+pushEachFinal.length+indexIns), "value": Math.abs(element.valueIns) * 30, "lin_color": "#33a02c"}) - } else if (element.valueIns == 0) { - links.push({"source": index, "target": (index*feature.value.length+pushEachFinal.length+indexIns), "value": 0.01 * 30, "lin_color": "#D3D3D3"}) - } else { - links.push({"source": index, "target": (index*feature.value.length+pushEachFinal.length+indexIns), "value": Math.abs(element.valueIns) * 30, "lin_color": "#e31a1c"}) + if (activeNodeLoc != -1) { + + groupID = 0 + var featureNumber = 0 + listofNodes.forEach( function(element) { + groupID++ + if ((activeNodeLoc+1) == groupID) { + nodes.push( + {"name": featureNames[(featureNumber)*numberOfTransformations+0], "group": groupID}, + {"name": featureNames[(featureNumber)*numberOfTransformations+1], "group": groupID}, + {"name": featureNames[(featureNumber)*numberOfTransformations+2], "group": groupID}, + {"name": featureNames[(featureNumber)*numberOfTransformations+3], "group": groupID}, + {"name": featureNames[(featureNumber)*numberOfTransformations+4], "group": groupID}, + {"name": featureNames[(featureNumber)*numberOfTransformations+5], "group": groupID}, + {"name": featureNames[(featureNumber)*numberOfTransformations+6], "group": groupID}, + {"name": featureNames[(featureNumber)*numberOfTransformations+7], "group": groupID}, + {"name": featureNames[(featureNumber)*numberOfTransformations+8], "group": groupID}, + {"name": featureNames[(featureNumber)*numberOfTransformations+9], "group": groupID}, + {"name": featureNames[(featureNumber)*numberOfTransformations+10], "group": groupID}, + {"name": featureNames[(featureNumber)*numberOfTransformations+11], "group": groupID}, + ) + } + featureNumber++ + }) + + Object.entries(pushEachFinal).forEach( + function ([index, feature]) { + if (index == activeNodeLoc) { + feature.value.forEach(function (element, indexIns) { + // if (element.valueIns > 0) { + // links.push({"source": index, "target": (index*feature.value.length+pushEachFinal.length+indexIns), "value": Math.abs(element.valueIns) * 30, "lin_color": "#33a02c"}) + // } else if (element.valueIns == 0) { + // links.push({"source": index, "target": (index*feature.value.length+pushEachFinal.length+indexIns), "value": 0.01 * 30, "lin_color": "#D3D3D3"}) + // } else { + // links.push({"source": index, "target": (index*feature.value.length+pushEachFinal.length+indexIns), "value": Math.abs(element.valueIns) * 30, "lin_color": "#e31a1c"}) + // } + if (element.valueIns > 0) { + links.push({"source": index, "target": (pushEachFinal.length+indexIns), "value": Math.abs(element.valueIns) * 30, "lin_color": "#33a02c"}) + } else if (element.valueIns == 0) { + links.push({"source": index, "target": (pushEachFinal.length+indexIns), "value": 0.01 * 30, "lin_color": "#D3D3D3"}) + } else { + links.push({"source": index, "target": (pushEachFinal.length+indexIns), "value": Math.abs(element.valueIns) * 30, "lin_color": "#e31a1c"}) + } + }) } - }) - }) - + }) + } + this.jsonData = {"nodes": nodes, "links": links}; this.graphVizualization() }, graphVizualization () { + var svg = d3.select("#FeatureGraph"); + svg.selectAll("*").remove(); + var svg = d3.select('#chartID') + svg.selectAll("*").remove() + var legendCall = this.legendOnlyOnce var listofNodes = this.dataFS[34] @@ -890,11 +913,6 @@ export default { var colorsScaleNodes = d3.scaleOrdinal() .domain(d3.ticks([MIMin, MIMax, 5])) .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']); - - var svg = d3.select("#FeatureGraph"); - svg.selectAll("*").remove(); - var svg = d3.select('#chartID') - svg.selectAll("*").remove() var marginNodes = {top: 0, right: 0, bottom: 0, left: 0}; var width = 819 - marginNodes.right - marginNodes.left; @@ -942,91 +960,103 @@ export default { clearSendNode.push(clickedNode-1) EventBus.$emit('updateHistoryKey', 2) EventBus.$emit('updateValuesofHistory', clickedNode-1) - EventBus.$emit('UpdateIDTrans', clickedNode+"_root") + EventBus.$emit('UpdateIDTrans', [clickedNode-1]) EventBus.$emit('transformNodes', clearSendNode) } else { - for (let i = 0; i < listofNodes.length; i++) { - var numb = graph.nodes[i]['group'].match(/\d/g) - numb = parseInt(numb.join("")) - - var items = document.getElementsByClassName(numb) - - items.forEach( function (it) { - it.childNodes[0].style.visibility = "hidden"; - it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); - it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; - it.childNodes[2].style.visibility = "hidden"; - }) - } - - for (let i = 0; i < graph.nodes.length; i++) { - var str = String(graph.nodes[i].group) - if (!str.includes("root")) { - graph.nodes[i].active = false - } else { - document.getElementsByClassName(str)[0].childNodes[0].childNodes[1].style.fill = "#D3D3D3" - document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "#707070" - } - } - - node.selectAll('text').remove(); - - var labels = node.append("text") - .text(function(d) { - return d.name; - }) - .attr('x', 39) - .attr('y', function(d) { - if(d.active) - return 8 - else - return 35 - }); + // for (let i = 0; i < listofNodes.length; i++) { + // var numb = graph.nodes[i]['group'].match(/\d/g) + // numb = parseInt(numb.join("")) + + // var items = document.getElementsByClassName(numb) + + // items.forEach( function (it) { + // it.childNodes[0].style.visibility = "hidden"; + // it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); + // it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; + // it.childNodes[2].style.visibility = "hidden"; + // }) + // } + + // for (let i = 0; i < graph.nodes.length; i++) { + // var str = String(graph.nodes[i].group) + // // if (!str.includes("root")) { + // // graph.nodes[i].active = false + // // } else { + // document.getElementsByClassName(str)[0].childNodes[0].childNodes[1].style.fill = "#D3D3D3" + // document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "#969696" + // //} + // } + + // node.selectAll('text').remove(); + + // var labels = node.append("text") + // .text(function(d) { + // return d.name; + // }) + // .attr('x', function(d) { + // let characters = d.name.length + // return 41-Math.pow(characters,1.5) + // }) + // .attr('y', function(d) { + // if(d.active) + // return 6 + // else + // return 32 + // }); - node.append('title').text(function (d) { return d.name; }); - + // node.append('title').text(function (d) { return d.name; }); + + // var items = document.getElementsByClassName(groupLoc) + // items.forEach( function (it) { + // if (it.childNodes[0].style.visibility == "hidden") { + // it.childNodes[0].style.visibility = "visible"; + // it.childNodes[1].setAttribute("transform", "translate(50,50) scale(1) rotate(180)"); + // it.childNodes[1].childNodes[0].style.fill = "none"; + // it.childNodes[2].style.visibility = "visible"; + // } else { + // it.childNodes[0].style.visibility = "hidden"; + // it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); + // it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; + // it.childNodes[2].style.visibility = "hidden"; + // } + // }) + // var regex = /\d+/g + // var string = id.group + // var matches = parseInt(string.match(regex)[0]) + + // for (let i = 0; i < graph.nodes.length; i++) { + + // if (graph.nodes[i].group == matches) { + // graph.nodes[i].active = true + // } + // } + + // node.selectAll('text').remove(); + + // var labels = node.append("text") + // .text(function(d) { + // return d.name; + // }) + // .attr('x', function(d) { + // let characters = d.name.length + // return 41-Math.pow(characters,1.5) + // }) + // .attr('y', function(d) { + // if(d.active) + // return 6 + // else + // return 32 + // }); var groupLoc = index + 1 - var items = document.getElementsByClassName(groupLoc) - items.forEach( function (it) { - if (it.childNodes[0].style.visibility == "hidden") { - it.childNodes[0].style.visibility = "visible"; - it.childNodes[1].setAttribute("transform", "translate(50,50) scale(1) rotate(180)"); - it.childNodes[1].childNodes[0].style.fill = "none"; - it.childNodes[2].style.visibility = "visible"; - } else { - it.childNodes[0].style.visibility = "hidden"; - it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); - it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; - it.childNodes[2].style.visibility = "hidden"; - } - }) - var regex = /\d+/g - var string = id.group - var matches = parseInt(string.match(regex)[0]) - - for (let i = 0; i < graph.nodes.length; i++) { - - if (graph.nodes[i].group == matches) { - graph.nodes[i].active = true - } + let length = document.getElementsByClassName(groupLoc).length + // node.append('title').text(function (d) { return d.name; }); + if (length > 0) { + EventBus.$emit('UpdateIDTrans', []) + EventBus.$emit('brushLink', -1) + } else { + EventBus.$emit('UpdateIDTrans', [groupLoc-1]) + EventBus.$emit('brushLink', groupLoc-1) } - - node.selectAll('text').remove(); - - var labels = node.append("text") - .text(function(d) { - return d.name; - }) - .attr('x', 39) - .attr('y', function(d) { - if(d.active) - return 8 - else - return 35 - }); - - node.append('title').text(function (d) { return d.name; }); - EventBus.$emit('brushLink', groupLoc-1) } } else { var groupsColor = d3.select('#svg'+index)._groups['0'][0].childNodes[0].childNodes[1] @@ -1035,7 +1065,7 @@ export default { if (groupsColor.getAttribute('fill') == "#D3D3D3") { if (selectionCounter < 3) { // add here the different states of comparison! (=2 and =3) - groupsColor.setAttribute('fill', '#707070') + groupsColor.setAttribute('fill', '#969696') selectionCounter = selectionCounter + 1 EventBus.$emit('Counter', selectionCounter) IDsGather.push(idLocal); @@ -1060,7 +1090,7 @@ export default { } EventBus.$emit('UpdateIDs', IDsGather) if (selectionCounter == 1) { - //EventBus.$emit('storeGeneration') + EventBus.$emit('Default') } else if (selectionCounter == 2) { EventBus.$emit('UpdateIDs', IDsGather) EventBus.$emit('CompareTwo', IDsGather) @@ -1069,51 +1099,53 @@ export default { } } } - }) - .on("dblclick", function(id, index) { - for (let i = 0; i < listofNodes.length; i++) { - var numb = graph.nodes[i]['group'].match(/\d/g) - numb = parseInt(numb.join("")) - var items = document.getElementsByClassName(numb) - items.forEach( function (it) { - it.childNodes[0].style.visibility = "hidden"; - it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); - it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; - it.childNodes[2].style.visibility = "hidden"; - }) - } - var regex = /\d+/g - var string = id.group - var matches = parseInt(string.match(regex)[0]) - - for (let i = 0; i < graph.nodes.length; i++) { - - if (graph.nodes[i].group == matches) { - graph.nodes[i].active = false - } else { - document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "#D3D3D3" - } - } - - node.selectAll('text').remove(); - - var labels = node.append("text") - .text(function(d) { - return d.name; - }) - .attr('x', 39) - .attr('y', function(d) { - if(d.active) - return 8 - else - return 35 - }); - - node.append('title').text(function (d) { return d.name; }); - EventBus.$emit('brushLink', -1) }); + // .on("dblclick", function(id, index) { + // for (let i = 0; i < listofNodes.length; i++) { + // var numb = graph.nodes[i]['group'].match(/\d/g) + // numb = parseInt(numb.join("")) + // var items = document.getElementsByClassName(numb) + // items.forEach( function (it) { + // it.childNodes[0].style.visibility = "hidden"; + // it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); + // it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; + // it.childNodes[2].style.visibility = "hidden"; + // }) + // } + // var regex = /\d+/g + // var string = id.group + // var matches = parseInt(string.match(regex)[0]) + + // for (let i = 0; i < graph.nodes.length; i++) { + + // if (graph.nodes[i].group == matches) { + // graph.nodes[i].active = false + // } else { + // document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "#D3D3D3" + // } + // } + + // node.selectAll('text').remove(); + + // var labels = node.append("text") + // .text(function(d) { + // return d.name; + // }) + // .attr('x', function(d) { + // let characters = d.name.length + // return 41-Math.pow(characters,1.5) + // }) + // .attr('y', function(d) { + // if(d.active) + // return 6 + // else + // return 32 + // }); - + // node.append('title').text(function (d) { return d.name; }); + // EventBus.$emit('brushLink', -1) + // }); + var chartWidth = 310; var chartHeight = 66; var margin = {left: 16, right: 15, top: 5, bottom: 45}; @@ -1127,7 +1159,7 @@ export default { chartHeight = chartHeight - margin.top - margin.bottom; var x = d3.scaleLinear() - .domain([75, 100]) + .domain([0, 100]) .range([0, chartWidth]); chartSvg.append('g') @@ -1142,7 +1174,8 @@ export default { .text("Weighted graph readability (%)"); var readabilityCircles = chartSvg.append('g').selectAll('circle'); - // 32 parameter combinations + + // 48 parameter combinations var paramGroups = [ {name: 'chargeStrength', values: [-80]}, {name: 'linkDistance', values: [-80]}, @@ -1170,31 +1203,32 @@ export default { .data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; })) .text(function (d) { return d + ' = ' + bestParams[d]; }); } - // Plot the number line. - readabilityCircles = readabilityCircles - .data(readabilityCircles.data().concat(params)) - .enter().append('circle') - .attr('cx', function (d) { return x(d.graphReadability*100); }) - .attr('cy', 5) - .attr('r', 4) - .on('click', function (d) { - selectedParams = d; - readabilityCircles.classed('selected', false); - d3.select(this).classed('selected', true).raise(); - - bestSoFar - .data(d3.map(selectedParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; })) - .text(function (d) { return d + ' = ' + selectedParams[d]; }); - - drawGraph(); - }) - .merge(readabilityCircles) - .classed('selected', function (d) { return d === selectedParams; }); - readabilityCircles.filter(function (d) { return d === selectedParams; }) - .raise(); + // Plot the number line. + readabilityCircles = readabilityCircles + .data(readabilityCircles.data().concat(params)) + .enter().append('circle') + .attr('cx', function (d) { return x(d.graphReadability*100); }) + .attr('cy', 5) + .attr('r', 4) + .on('click', function (d) { + selectedParams = d; + readabilityCircles.classed('selected', false); + d3.select(this).classed('selected', true).raise(); + + bestSoFar + .data(d3.map(selectedParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; })) + .text(function (d) { return d + ' = ' + selectedParams[d]; }); drawGraph(); + }) + .merge(readabilityCircles) + .classed('selected', function (d) { return d === selectedParams; }); + + readabilityCircles.filter(function (d) { return d === selectedParams; }) + .raise(); + + drawGraph(); }); var i = 0; @@ -1242,8 +1276,8 @@ export default { var data = [] var barchartData = [] - if (IDsGather.includes(indexNode)) { - data.push({value: VIFVarFormatted[indexNode], color: '#707070'}) + if (IDsGather.includes(indexNode) || IDsGatherTrans.includes(indexNode)) { + data.push({value: VIFVarFormatted[indexNode], color: '#969696'}) } else { data.push({value: VIFVarFormatted[indexNode], color: '#D3D3D3'}) } @@ -1330,6 +1364,7 @@ export default { var margin = {top: 0, right: 0, bottom: 0, left: 0}, width = 45 - margin.left - margin.right, height = 45 - margin.top - margin.bottom; + g.each(function (d, index) { var el = d3.select(this); var path = el.selectAll('path').each(function (r, i) { @@ -1394,12 +1429,14 @@ export default { }) //x position is 3 pixels to the right of the bar .attr("x", function (d) { - return x(0); + return x(38); }) .text(function (d) { return d.value; }).style("font-size", "10px") - .style("fill", "white") + .style("fill", function(d) { + return "black" + }) .attr("visibility", "hidden") } @@ -1461,59 +1498,59 @@ export default { .text(function(d) { return d.name; }) - .attr('x', 39) + .attr('x', function(d) { + let characters = d.name.length + return 41-Math.pow(characters,1.5) + }) .attr('y', function(d) { - if(d.active) - return 8 - else - return 35 + return 6 }); node.append('title').text(function (d, i) { return 'Target COR: '+String(corrGlobFormatted[i])+'%'; }); //add zoom capabilities - var zoom_handler = d3.zoom() - .on("zoom", zoom_actions); + // var zoom_handler = d3.zoom() + // .on("zoom", zoom_actions); - zoom_handler(svg); - - - for (let i = 0; i < listofNodes.length; i++) { - var numb = graph.nodes[i]['group'].match(/\d/g) - numb = parseInt(numb.join("")) - var items = document.getElementsByClassName(numb) - items.forEach( function (it) { - it.childNodes[0].style.visibility = "hidden"; - it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); - it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; - it.childNodes[2].style.visibility = "hidden"; - }) - } + // zoom_handler(svg); - //Zoom functions - function zoom_actions(){ - svg.attr("transform", d3.event.transform) - } - function drag_start(d) { - if (!d3.event.active) forceSim.alphaTarget(0.3).restart(); - d.fx = d.x; - d.fy = d.y; - } + // for (let i = 0; i < listofNodes.length; i++) { + // var numb = graph.nodes[i]['group'].match(/\d/g) + // numb = parseInt(numb.join("")) + // var items = document.getElementsByClassName(numb) + // items.forEach( function (it) { + // it.childNodes[0].style.visibility = "hidden"; + // it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); + // it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; + // it.childNodes[2].style.visibility = "hidden"; + // }) + // } - //make sure you can't drag the circle outside the box - function drag_drag(d) { - d.fx = d3.event.x; - d.fy = d3.event.y; - tickActions(); - } - - function drag_end(d) { - if (!d3.event.active) forceSim.alphaTarget(0); - d.fx = null; - d.fy = null; - } + //Zoom functions + // function zoom_actions(){ + // svg.attr("transform", d3.event.transform) + // } + + // function drag_start(d) { + // if (!d3.event.active) forceSim.alphaTarget(0.3).restart(); + // d.fx = d.x; + // d.fy = d.y; + // } + + // //make sure you can't drag the circle outside the box + // function drag_drag(d) { + // d.fx = d3.event.x; + // d.fy = d3.event.y; + // tickActions(); + // } + + // function drag_end(d) { + // if (!d3.event.active) forceSim.alphaTarget(0); + // d.fx = null; + // d.fy = null; + // } if (legendCall) { @@ -1764,11 +1801,11 @@ export default { .text("MI") } stepper.stop(); - if (IDsGatherTrans != '') { - let ID = document.getElementsByClassName(IDsGatherTrans)[0].parentElement.getAttribute('id') - d3.select('#'+ID).dispatch('click'); - IDsGatherTrans = '' - } + // if (IDsGatherTrans != '') { + // let ID = document.getElementsByClassName(IDsGatherTrans)[0].parentElement.getAttribute('id') + // d3.select('#'+ID).dispatch('click'); + // IDsGatherTrans = '' + // } } }); @@ -1783,8 +1820,8 @@ export default { node .attr("id", function(d, i) { return "g" + (i); }) .attr("transform", function(d, i) { - d.x = d.x - 50 - d.y = d.y - 50 + d.x = d.x - 52 + d.y = d.y - 45 return "translate(" + d.x + "," + d.y + ")"; }) }; @@ -1868,6 +1905,8 @@ export default { }, }, mounted () { + EventBus.$on('brushLink', data => { this.activeLeafNode = data }) + EventBus.$on('brushLink', this.initializeNetwork) EventBus.$on('Counter', data => { this.keepNumberOfCompareNodes = data }) EventBus.$on('UpdateIDs', data => { this.KeepIDs = data }) diff --git a/frontend/src/components/FeatureSpaceOverview.vue b/frontend/src/components/FeatureSpaceOverview.vue index 1719ac4..79e8da5 100644 --- a/frontend/src/components/FeatureSpaceOverview.vue +++ b/frontend/src/components/FeatureSpaceOverview.vue @@ -96,7 +96,6 @@ export default { svg.selectAll("*").remove(); var features = this.colorsReceive - console.log(features) var activeLeafLoc = this.activeLeaf var listofNodes = this.overallData[34] @@ -559,7 +558,7 @@ export default { } else { if (activeLeafLoc != -1) { if (d.name == listofNodes[activeLeafLoc]) { - return d._children ? '#707070' : '#707070' + return d._children ? '#969696' : '#969696' } else { return d._children ? '#D3D3D3' : '#D3D3D3' diff --git a/frontend/src/components/Heatmap.vue b/frontend/src/components/Heatmap.vue index c8d8f47..7674a35 100644 --- a/frontend/src/components/Heatmap.vue +++ b/frontend/src/components/Heatmap.vue @@ -376,7 +376,7 @@ export default { .style("fill", function(d) { if (d == -1) return "url(#diagonalHatch)" else if (d == -2) return "yellow" - else if (d == -3) return "#707070" + else if (d == -3) return "#969696" else if (d == -4) return "url(#diagonalHatch)" else return colorScale(d) }) @@ -404,7 +404,7 @@ export default { EventBus.$emit('addFeature', featuresAddRem) return 'yellow' } else if (d == -3) { - return '#707070' + return '#969696' } else if (d == -4) { // svg.selectAll("rect").each(function(d){ // if (d == -4) { @@ -438,7 +438,7 @@ export default { } } else { if (d == -3) { - return '#707070' + return '#969696' } else { return colorScale(d) } diff --git a/frontend/src/components/Main.vue b/frontend/src/components/Main.vue index f6616ff..e13fbf3 100755 --- a/frontend/src/components/Main.vue +++ b/frontend/src/components/Main.vue @@ -490,7 +490,6 @@ export default Vue.extend({ .then(response => { console.log('Server successfully send the predictive results!') this.ValidResults = response.data.ValidResults - console.log(this.spaceChange) if (!this.spaceChange) { EventBus.$emit('finalResults', this.ValidResults) } diff --git a/frontend/src/components/Results.vue b/frontend/src/components/Results.vue index 067efd2..77a999f 100644 --- a/frontend/src/components/Results.vue +++ b/frontend/src/components/Results.vue @@ -35,7 +35,7 @@ export default { this.globalStep = this.globalStep + 1 var state = this.globalStep - console.log('Current Step: ', state) + //console.log('Current Step: ', state) if (state == 1) { this.storeBestSoFarAV = ((parseFloat(this.scoresMean[0]) + parseFloat(this.scoresMean[1]) + parseFloat(this.scoresMean[2])) / 3) } diff --git a/run.py b/run.py index aa1896f..450e6fe 100644 --- a/run.py +++ b/run.py @@ -576,7 +576,6 @@ def executeModel(exeCall, flagEx, nodeTransfName): columnsNames.append(splittedCol[0]) else: columnsNames.append(splittedCol[0]+'_'+tran) - featureImportanceData = estimatorFeatureSelection(XData, estimator) estimator.fit(XData, yData) yPredict = estimator.predict(XData)