From 586bac8d9791e0acebe63a1ceba17e9fb2dac9a5 Mon Sep 17 00:00:00 2001 From: Angelos Chatzimparmpas Date: Wed, 9 Dec 2020 10:55:52 +0100 Subject: [PATCH] new --- .../src/components/FeatureSpaceDetail.vue | 35 ++++++++++++++----- .../src/components/FeatureSpaceOverview.vue | 30 +++++++++++++--- frontend/src/components/Main.vue | 22 ++++++------ frontend/src/components/Results.vue | 2 +- 4 files changed, 65 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/FeatureSpaceDetail.vue b/frontend/src/components/FeatureSpaceDetail.vue index d8f7ab9..4683e8d 100644 --- a/frontend/src/components/FeatureSpaceDetail.vue +++ b/frontend/src/components/FeatureSpaceDetail.vue @@ -297,10 +297,10 @@ export default { function ([index, feature]) { feature.value.forEach(function (element, indexIns) { if (element.valueIns > 0) { - links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#4393c3"}) + links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#33a02c"}) } else { - links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#d6604d"}) + links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#e31a1c"}) } }) }) @@ -314,14 +314,13 @@ export default { var computeNodesVar = this.computeNodes var listofNodes = this.dataFS[0] - console.log(this.dataFS) var corrTarget = JSON.parse(this.dataFS[8+this.quadrantNumber]) var corrGlob = JSON.parse(this.dataFS[13+this.quadrantNumber]) var uniqueTarget = JSON.parse(this.dataFS[18+this.quadrantNumber]) var VIFVar = JSON.parse(this.dataFS[23+this.quadrantNumber]) var MIVar = JSON.parse(this.dataFS[28+this.quadrantNumber]) MIVar = MIVar.concat(this.MIRemaining) - var colorCateg = d3.scaleOrdinal(d3.schemeAccent) + var colorCateg = d3.scaleOrdinal(d3.schemeDark2) var corrTargetFormatted = [] for (let i = 0; i < Object.keys(corrTarget).length; i++) { @@ -403,8 +402,8 @@ export default { MIVar = MIVar.map(normalize(MIMin, MIMax)) var colorsScaleNodes = d3.scaleOrdinal() - .domain(d3.ticks([MIMin, MIMax, 10])) - .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']); + .domain(d3.ticks([MIMin, MIMax, 5])) + .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']); var svg = d3.select("#FeatureGraph"); svg.selectAll("*").remove(); @@ -440,6 +439,14 @@ export default { .data(graph.nodes) .enter().append('g') .on("click", 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.style.visibility = "hidden"; + }) + } var groupLoc = index + 1 var items = document.getElementsByClassName(groupLoc) items.forEach( function (it) { @@ -449,6 +456,18 @@ export default { it.style.visibility = "hidden"; } }) + EventBus.$emit('brushLink', groupLoc-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.style.visibility = "hidden"; + }) + } + EventBus.$emit('brushLink', -1) }); var paramGroups = [ @@ -637,7 +656,7 @@ export default { //add zoom capabilities var zoom_handler = d3.zoom() .on("zoom", zoom_actions); - + zoom_handler(svg); drawGraph(); @@ -653,7 +672,7 @@ export default { //Zoom functions function zoom_actions(){ - svg.attr("transform", d3.event.transform) + svg.attr("transform", d3.event.transform) } function drag_start(d) { diff --git a/frontend/src/components/FeatureSpaceOverview.vue b/frontend/src/components/FeatureSpaceOverview.vue index 6300b79..68386d1 100644 --- a/frontend/src/components/FeatureSpaceOverview.vue +++ b/frontend/src/components/FeatureSpaceOverview.vue @@ -65,17 +65,24 @@ export default { data () { return { colorsReceive: [], + activeLeaf: -1, + overallData: [] } }, methods: { reset () { - var svg = d3.select("#FeatureTree"); + var svg = d3.select("#tree-container"); svg.selectAll("*").remove(); }, // Get JSON data initializeRadialTree() { - + + var svg = d3.select("#tree-container"); + svg.selectAll("*").remove(); + var features = this.colorsReceive + var activeLeafLoc = this.activeLeaf + var listofNodes = this.overallData[0] var featuresQuad1 = [] var featuresQuad2 = [] @@ -323,10 +330,19 @@ export default { node.select('circle') .attr('r', NODE_DIAMETER * reduceZ()) .style('fill', function(d) { - if(d.name == 'Data') { + if (d.name == 'Data') { return d._children ? 'white' : 'white'; } else { - return d._children ? HAS_CHILDREN_COLOR : '#D3D3D3'; + if (activeLeafLoc != -1) { + if (d.name == listofNodes[activeLeafLoc]) { + return d._children ? 'yellow' : 'yellow' + } + else { + return d._children ? '#D3D3D3' : '#D3D3D3' + } + } else { + return d._children ? '#D3D3D3' : '#D3D3D3' + } } }).attr('stroke', function(d) { if(d.name == 'Data') { @@ -895,8 +911,14 @@ export default { } }, mounted () { + EventBus.$on('quad', data => { this.overallData = data }) + EventBus.$on('overviewCall', data => { this.colorsReceive = data }) EventBus.$on('overviewCall', this.initializeRadialTree) + + EventBus.$on('brushLink', data => { this.activeLeaf = data }) + EventBus.$on('brushLink', this.initializeRadialTree) + EventBus.$on('reset', this.reset) } } diff --git a/frontend/src/components/Main.vue b/frontend/src/components/Main.vue index 7b05b14..07053d7 100755 --- a/frontend/src/components/Main.vue +++ b/frontend/src/components/Main.vue @@ -41,6 +41,17 @@ + + + Final Predictive Results + + + + + + + + Feature Selection Algorithms @@ -52,17 +63,6 @@ - - - Final Predictive Results - - - - - - - - diff --git a/frontend/src/components/Results.vue b/frontend/src/components/Results.vue index 74a139a..2a64408 100644 --- a/frontend/src/components/Results.vue +++ b/frontend/src/components/Results.vue @@ -86,7 +86,7 @@ export default { pad: 5 }, xaxis: { - title: "Execution step", + title: "Step of feature engeering", gridcolor: "rgb(230,230,230)", range: [1, 10], showgrid: true,