From f8d144c0600c443148257adafbe76240097aa632 Mon Sep 17 00:00:00 2001 From: Angelos Chatzimparmpas Date: Wed, 30 Dec 2020 10:32:28 +0100 Subject: [PATCH] new --- __pycache__/run.cpython-38.pyc | Bin 25278 -> 25352 bytes frontend/src/components/DataSpace.vue | 86 +++++++--- .../src/components/FeatureSpaceDetail.vue | 160 ++++++++++++++---- .../src/components/FeatureSpaceOverview.vue | 102 ++++++++--- frontend/src/components/Heatmap.vue | 15 +- frontend/src/components/Results.vue | 9 +- run.py | 34 ++-- 7 files changed, 298 insertions(+), 108 deletions(-) diff --git a/__pycache__/run.cpython-38.pyc b/__pycache__/run.cpython-38.pyc index 9fa50b80057454a9ed4779369da913644c996fff..c4ee2310796ab305889d18cef07ed6a98568bf3f 100644 GIT binary patch delta 6766 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 50 && predictions[i] > this.PositiveValue) { - colorInstances.push("#33a02c") - } else if (predictions[i] > 50 && predictions[i] <= this.PositiveValue) { - colorInstances.push("#b2df8a") - } else if (predictions[i] <= 50 && predictions[i] > this.NegativeValue) { - colorInstances.push("#fb9a99") - } else { - colorInstances.push("#e31a1c") + + if (this.status) { + this.storeColor = [] + for (let i = 0; i < predictions.length; i++) { + if (predictions[i] > 50 && predictions[i] > this.PositiveValue) { + colorInstances.push("#33a02c") + } else if (predictions[i] > 50 && predictions[i] <= this.PositiveValue) { + colorInstances.push("#b2df8a") + } else if (predictions[i] <= 50 && predictions[i] > this.NegativeValue) { + colorInstances.push("#fb9a99") + } else { + colorInstances.push("#e31a1c") + } } + this.storeColor = colorInstances + } else { + colorInstances = this.storeColor } - + var data = d3.range(instances.length).map(function(d, i) { return { x : predictions[i], @@ -79,7 +88,7 @@ export default { // the range is set in such a way that portions of nodes are not drawn outside the g var xScale = d3.scale.linear() - .domain(extent) + .domain([0,100]) .range([25, width-25]) var norm = d3.random.normal(0, 4.0) @@ -224,32 +233,32 @@ export default { var svgLines = d3.select('#Sliders').append('svg'); svgLines.attr('width', width); svgLines.attr('height', height); - + //The data for our lines and endpoints var data = [ { 'id': 1, - 'x1': width/4-25, + 'x1': width/4, 'y1': 25, - 'x2': width/4-25, + 'x2': width/4, 'y2': height, 'stroke': '#D3D3D3', 'strokeW': '5px' }, { 'id': 2, - 'x1': width/2-25, + 'x1': width/2, 'y1': 25, - 'x2': width/2-25, + 'x2': width/2, 'y2': height, 'stroke': 'black', 'strokeW': '3px' }, { 'id': 3, - 'x1': width*3/4-25, + 'x1': width*3/4, 'y1': 25, - 'x2': width*3/4-25, + 'x2': width*3/4, 'y2': height, 'stroke': '#D3D3D3', 'strokeW': '5px', @@ -296,6 +305,30 @@ export default { .attr(lineAttributes) .call(drag); + svgLines + .append("text") + .attr("x", 0.5*width/4).attr("y", 210) + .style("text-anchor", "middle") + .style("font-size", "16px").text("Worst"); + + svgLines + .append("text") + .attr("x", 1.5*width/4).attr("y", 210) + .style("text-anchor", "middle") + .style("font-size", "16px").text("Bad"); + + svgLines + .append("text") + .attr("x", 2.5*width/4).attr("y", 210) + .style("text-anchor", "middle") + .style("font-size", "16px").text("Good"); + + svgLines + .append("text") + .attr("x", 3.5*width/4).attr("y", 210) + .style("text-anchor", "middle") + .style("font-size", "16px").text("Best"); + function dragstarted() { if (d3.select(this)[0][0].id == 2) { d3.select(this).classed(activeClassName, false); @@ -329,13 +362,13 @@ export default { }; } if (lineID == 1) { - if (attributes.x1 > 1110) { - attributes.x1 = 1110 - attributes.x2 = 1110 + if (attributes.x1 > 1125) { + attributes.x1 = 1125 + attributes.x2 = 1125 return line.attr(attributes); - } else if (attributes.x1 < 115) { - attributes.x1 = 115 - attributes.x2 = 115 + } else if (attributes.x1 < 125) { + attributes.x1 = 125 + attributes.x2 = 125 return line.attr(attributes); } else { return line.attr(attributes); @@ -362,7 +395,7 @@ export default { if (d3.select(this)[0][0].getAttribute('id') == 3) { EventBus.$emit('SendtheChangeinRangePos', Math.floor(xScaleOp(d3.select(this)[0][0].x1.baseVal.value))) } else if (d3.select(this)[0][0].getAttribute('id') == 1) { - EventBus.$emit('SendtheChangeinRangeNeg', Math.ceil(xScaleOp(d3.select(this)[0][0].x1.baseVal.value))) + EventBus.$emit('SendtheChangeinRangeNeg', Math.floor(xScaleOp(d3.select(this)[0][0].x1.baseVal.value))) } else { } @@ -374,9 +407,12 @@ export default { svg.selectAll("*").remove(); var svg = d3.select("#Sliders"); svg.selectAll("*").remove(); + this.status = true }, }, mounted () { + EventBus.$on('ConfirmDataSet', data => {this.status = false}) + EventBus.$on('SendtheChangeinRangePos', data => {this.PositiveValue = data}) EventBus.$on('SendtheChangeinRangeNeg', data => {this.NegativeValue = data}) EventBus.$on('dataSpace', data => { this.dataInstances = data }) diff --git a/frontend/src/components/FeatureSpaceDetail.vue b/frontend/src/components/FeatureSpaceDetail.vue index fde7ee5..69bbbe7 100644 --- a/frontend/src/components/FeatureSpaceDetail.vue +++ b/frontend/src/components/FeatureSpaceDetail.vue @@ -55,6 +55,8 @@ export default { MIRemaining: [], featureAddRemCount: [], mode: 0, // this should be 0 + KeepIDs: [], + keepNumberOfCompareNodes: 0 } }, methods: { @@ -87,6 +89,8 @@ export default { }, setLayerExplore() { this.mode = 0 + this.KeepIDs = [] + this.keepNumberOfCompareNodes = 0 this.graphVizualization() }, setLayerCompare() { @@ -94,7 +98,8 @@ export default { this.graphVizualization() }, computeOnce () { - var listofNodes = this.dataFS[0] + + var listofNodes = this.dataFS[34] var dataLocOnce = [] for (let loop=1; loop<=5; loop++) { dataLocOnce.push(JSON.parse(this.dataFS[loop+2])) @@ -133,7 +138,7 @@ export default { oldVal = oldVal / listofNodes.length newVal = newVal / listofNodes.length outcome = oldVal - newVal - pushEach.push({keyIns: "round", valueIns: outcome}) + pushEach.push({keyIns: "r", valueIns: outcome}) var roundLogE = element.roundLogE roundLogE = JSON.parse(roundLogE[loop-1]) @@ -153,7 +158,7 @@ export default { oldVal = oldVal / listofNodes.length newVal = newVal / listofNodes.length outcome = oldVal - newVal - pushEach.push({keyIns: "roundLogE", valueIns: outcome}) + pushEach.push({keyIns: "r_E", valueIns: outcome}) var roundLog2 = element.roundLog2 roundLog2 = JSON.parse(roundLog2[loop-1]) @@ -173,7 +178,7 @@ export default { oldVal = oldVal / listofNodes.length newVal = newVal / listofNodes.length outcome = oldVal - newVal - pushEach.push({keyIns: "roundLog2", valueIns: outcome}) + pushEach.push({keyIns: "r_2", valueIns: outcome}) var roundLog10 = element.roundLog10 roundLog10 = JSON.parse(roundLog10[loop-1]) @@ -193,13 +198,12 @@ export default { oldVal = oldVal / listofNodes.length newVal = newVal / listofNodes.length outcome = oldVal - newVal - pushEach.push({keyIns: "roundLog10", valueIns: outcome}) + pushEach.push({keyIns: "r_10", valueIns: outcome}) pushEachFinal.push({key: listofNodes[index], value: pushEach}) }) pushEachFinalFinal.push(pushEachFinal) } - EventBus.$emit('overviewCall', pushEachFinalFinal) }, @@ -213,7 +217,7 @@ export default { this.MIRemaining = [] var quadrantNumberLocal = this.quadrantNumber - var listofNodes = this.dataFS[0] + var listofNodes = this.dataFS[34] var dataLoc = JSON.parse(this.dataFS[3+quadrantNumberLocal]) var pushEachFinal = [] @@ -251,7 +255,7 @@ export default { oldVal = oldVal / listofNodes.length newVal = newVal / listofNodes.length outcome = oldVal - newVal - pushEach.push({keyIns: "round", valueIns: outcome}) + pushEach.push({keyIns: "r", valueIns: outcome}) var roundLogE = element.roundLogE corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[5+quadrantNumberLocal]))) @@ -274,7 +278,7 @@ export default { oldVal = oldVal / listofNodes.length newVal = newVal / listofNodes.length outcome = oldVal - newVal - pushEach.push({keyIns: "roundLogE", valueIns: outcome}) + pushEach.push({keyIns: "r_E", valueIns: outcome}) var roundLog2 = element.roundLog2 corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[5+quadrantNumberLocal]))) @@ -297,7 +301,7 @@ export default { oldVal = oldVal / listofNodes.length newVal = newVal / listofNodes.length outcome = oldVal - newVal - pushEach.push({keyIns: "roundLog2", valueIns: outcome}) + pushEach.push({keyIns: "r_2", valueIns: outcome}) var roundLog10 = element.roundLog10 corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[5+quadrantNumberLocal]))) @@ -320,7 +324,7 @@ export default { oldVal = oldVal / listofNodes.length newVal = newVal / listofNodes.length outcome = oldVal - newVal - pushEach.push({keyIns: "roundLog10", valueIns: outcome}) + pushEach.push({keyIns: "r_10", valueIns: outcome}) pushEachFinal.push({key: listofNodes[index], value: pushEach}) }) @@ -333,7 +337,7 @@ export default { var groupID = 0 listofNodes.forEach( function(element) { groupID++ - nodes.push({"name": element, "group": groupID+"_root"}) + nodes.push({"name": element, "group": groupID+"_root", "active": true}) }) var links = [] @@ -354,10 +358,10 @@ export default { listofNodes.forEach( function(element) { groupID++ nodes.push( - {"name": element+"_r", "group": groupID}, - {"name": element+"_r_E", "group": groupID}, - {"name": element+"_r_2", "group": groupID}, - {"name": element+"_r_10", "group": groupID}, + {"name": "r", "group": groupID, "active": false}, + {"name": "r_E", "group": groupID, "active": false}, + {"name": "r_2", "group": groupID, "active": false}, + {"name": "r_10", "group": groupID, "active": false}, ) }) @@ -375,7 +379,6 @@ export default { }) this.jsonData = {"nodes": nodes, "links": links}; - this.graphVizualization() }, @@ -383,7 +386,7 @@ export default { var legendCall = this.legendOnlyOnce - var listofNodes = this.dataFS[0] + var listofNodes = this.dataFS[34] var corrTarget = JSON.parse(this.dataFS[8+this.quadrantNumber]) var corrGlob = JSON.parse(this.dataFS[13+this.quadrantNumber]) @@ -508,8 +511,8 @@ export default { .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); var modeLoc = this.mode - var selectionCounter = 0 - var IDsGather = [] + var selectionCounter = this.keepNumberOfCompareNodes + var IDsGather = this.KeepIDs var node = svg.append('g') .attr('class', 'nodes') @@ -524,11 +527,35 @@ export default { 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.3) rotate(180)"); + it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.28) 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 + } + } + + 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; }); + var groupLoc = index + 1 var items = document.getElementsByClassName(groupLoc) items.forEach( function (it) { @@ -539,11 +566,37 @@ export default { it.childNodes[2].style.visibility = "visible"; } else { it.childNodes[0].style.visibility = "hidden"; - it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.3) rotate(180)"); + it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.28) 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', 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] @@ -554,10 +607,13 @@ export default { // add here the different states of comparison! (=2 and =3) groupsColor.setAttribute('fill', 'yellow') selectionCounter = selectionCounter + 1 + EventBus.$emit('Counter', selectionCounter) IDsGather.push(idLocal); if (selectionCounter == 2) { + EventBus.$emit('UpdateIDs', IDsGather) EventBus.$emit('CompareTwo', IDsGather) } else if (selectionCounter == 3) { + EventBus.$emit('UpdateIDs', IDsGather) EventBus.$emit('CompareThree', IDsGather) } else { @@ -566,10 +622,12 @@ export default { } else { groupsColor.setAttribute('fill', 'black') selectionCounter = selectionCounter - 1 + EventBus.$emit('Counter', selectionCounter) var index = IDsGather.indexOf(idLocal); if (index > -1) { IDsGather.splice(index, 1); } + EventBus.$emit('UpdateIDs', IDsGather) if (selectionCounter == 1) { EventBus.$emit('Default') } @@ -583,11 +641,37 @@ export default { 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.3) rotate(180)"); + it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.28) rotate(180)"); it.childNodes[1].childNodes[0].style.fill = "white"; 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 + } + } + + 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) }); @@ -649,6 +733,7 @@ export default { dispatch.call('layoutend', forceSim, p, i); ++i; + if (i >= paramList.length) { var widthLoc = 100; @@ -664,8 +749,11 @@ export default { var data = [] var barchartData = [] - - data.push({value: VIFVarFormatted[indexNode], color: 'black'}) + if (IDsGather.includes(indexNode)) { + data.push({value: VIFVarFormatted[indexNode], color: 'yellow'}) + } else { + data.push({value: VIFVarFormatted[indexNode], color: 'black'}) + } data.push({value: corrGlobFormatted[indexNode], color: colorsScaleNodes(MIVar[indexNode])}) for(let k = 0; k < uniqueTarget.length; k++) { @@ -859,8 +947,13 @@ export default { .text(function(d) { return d.name; }) - .attr('x', 20) - .attr('y', 8); + .attr('x', 39) + .attr('y', function(d) { + if(d.active) + return 8 + else + return 35 + }); node.append('title').text(function (d) { return d.name; }); @@ -878,7 +971,7 @@ export default { 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.3) rotate(180)"); + it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.28) rotate(180)"); it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; it.childNodes[2].style.visibility = "hidden"; }) @@ -1041,7 +1134,7 @@ export default { }); var textLine = d3.select('#legendText').append("svg").attr('width', 160).attr('height', 90) - + textLine.append('line') .style("stroke", "black") .style("stroke-width", 3) @@ -1059,13 +1152,13 @@ export default { .style("stroke", "black") .style("stroke-width", 3) .attr("x1", 42) - .attr("y1", 33) + .attr("y1", 31) .attr("x2", 53) - .attr("y2", 33) + .attr("y2", 31) textLine.append("text") .attr("dx", "54") - .attr("dy", "38") + .attr("dy", "36") .text("Per class COR") textLine.append('line') @@ -1194,6 +1287,9 @@ export default { }, mounted () { + EventBus.$on('Counter', data => { this.keepNumberOfCompareNodes = data }) + EventBus.$on('UpdateIDs', data => { this.KeepIDs = data }) + this.InitSlider() EventBus.$on('CorrThres', data => { this.threshold = data }) EventBus.$on('CorrThres', this.initializeNetwork) diff --git a/frontend/src/components/FeatureSpaceOverview.vue b/frontend/src/components/FeatureSpaceOverview.vue index c8066d6..27aa9ad 100644 --- a/frontend/src/components/FeatureSpaceOverview.vue +++ b/frontend/src/components/FeatureSpaceOverview.vue @@ -38,6 +38,10 @@
/
+
+
Labels
+
+
 Navigate
@@ -59,6 +63,11 @@ import { EventBus } from '../main.js' import * as greadability from '../greadability.js' import * as Plotly from 'plotly.js' +import * as d3Base from 'd3' +import $ from 'jquery' + +// attach all d3 plugins to the d3 library +const d3v5 = Object.assign(d3Base) export default { name: 'FeatureSpaceOverview', @@ -74,10 +83,13 @@ export default { reset () { var svg = d3.select("#tree-container"); svg.selectAll("*").remove(); + var svg = d3.select("#legendTarget") + svg.selectAll("*").remove(); }, // Get JSON data initializeRadialTree() { - + var svg = d3.select("#legendTarget") + svg.selectAll("*").remove(); var svg = d3.select("#tree-container"); svg.selectAll("*").remove(); @@ -94,46 +106,46 @@ export default { for (let i = 0; i < features[4].length; i++) { featuresQuad1.push({"name": features[0][i].key, "children": [ - {"name": "Round", "lin_color": features[0][i].value[0].valueIns}, - {"name": "Round logE", "lin_color": features[0][i].value[1].valueIns}, - {"name": "Round log2", "lin_color": features[0][i].value[2].valueIns}, - {"name": "Round log10", "lin_color": features[0][i].value[3].valueIns}, + {"name": "r", "lin_color": features[0][i].value[0].valueIns}, + {"name": "r_E", "lin_color": features[0][i].value[1].valueIns}, + {"name": "r_2", "lin_color": features[0][i].value[2].valueIns}, + {"name": "r_10", "lin_color": features[0][i].value[3].valueIns}, ], "lin_color": features[0][i].value[0].valueIns+features[0][i].value[1].valueIns+features[0][i].value[3].valueIns+features[0][i].value[3].valueIns }) featuresQuad2.push({"name": features[1][i].key, "children": [ - {"name": "Round", "lin_color": features[1][i].value[0].valueIns}, - {"name": "Round logE", "lin_color": features[1][i].value[1].valueIns}, - {"name": "Round log2", "lin_color": features[1][i].value[2].valueIns}, - {"name": "Round log10", "lin_color": features[1][i].value[3].valueIns}, + {"name": "r", "lin_color": features[1][i].value[0].valueIns}, + {"name": "r_E", "lin_color": features[1][i].value[1].valueIns}, + {"name": "r_2", "lin_color": features[1][i].value[2].valueIns}, + {"name": "r_10", "lin_color": features[1][i].value[3].valueIns}, ], "lin_color": features[1][i].value[0].valueIns+features[1][i].value[1].valueIns+features[1][i].value[3].valueIns+features[1][i].value[3].valueIns }) featuresQuad3.push({"name": features[2][i].key, "children": [ - {"name": "Round", "lin_color": features[2][i].value[0].valueIns}, - {"name": "Round logE", "lin_color": features[2][i].value[1].valueIns}, - {"name": "Round log2", "lin_color": features[2][i].value[2].valueIns}, - {"name": "Round log10", "lin_color": features[2][i].value[3].valueIns}, + {"name": "r", "lin_color": features[2][i].value[0].valueIns}, + {"name": "r_E", "lin_color": features[2][i].value[1].valueIns}, + {"name": "r_2", "lin_color": features[2][i].value[2].valueIns}, + {"name": "r_10", "lin_color": features[2][i].value[3].valueIns}, ], "lin_color": features[2][i].value[0].valueIns+features[2][i].value[1].valueIns+features[2][i].value[3].valueIns+features[2][i].value[3].valueIns }) featuresQuad4.push({"name": features[3][i].key, "children": [ - {"name": "Round", "lin_color": features[3][i].value[0].valueIns}, - {"name": "Round logE", "lin_color": features[3][i].value[1].valueIns}, - {"name": "Round log2", "lin_color": features[3][i].value[2].valueIns}, - {"name": "Round log10", "lin_color": features[3][i].value[3].valueIns}, + {"name": "r", "lin_color": features[3][i].value[0].valueIns}, + {"name": "r_E", "lin_color": features[3][i].value[1].valueIns}, + {"name": "r_2", "lin_color": features[3][i].value[2].valueIns}, + {"name": "r_10", "lin_color": features[3][i].value[3].valueIns}, ], "lin_color": features[3][i].value[0].valueIns+features[3][i].value[1].valueIns+features[3][i].value[3].valueIns+features[3][i].value[3].valueIns }) featuresQuad5.push({"name": features[4][i].key, "children": [ - {"name": "Round", "lin_color": features[4][i].value[0].valueIns}, - {"name": "Round logE", "lin_color": features[4][i].value[1].valueIns}, - {"name": "Round log2", "lin_color": features[4][i].value[2].valueIns}, - {"name": "Round log10", "lin_color": features[4][i].value[3].valueIns}, + {"name": "r", "lin_color": features[4][i].value[0].valueIns}, + {"name": "r_E", "lin_color": features[4][i].value[1].valueIns}, + {"name": "r_2", "lin_color": features[4][i].value[2].valueIns}, + {"name": "r_10", "lin_color": features[4][i].value[3].valueIns}, ], "lin_color": features[4][i].value[0].valueIns+features[4][i].value[1].valueIns+features[4][i].value[3].valueIns+features[4][i].value[3].valueIns }) @@ -182,7 +194,7 @@ export default { var DURATION = 700; // d3 animation duration var STAGGERN = 4; // delay for each node var STAGGERD = 200; // delay for each depth - var NODE_DIAMETER = 6; // diameter of circular nodes + var NODE_DIAMETER = 8; // diameter of circular nodes var MIN_ZOOM = 0.5; // minimum zoom allowed var MAX_ZOOM = 10; // maximum zoom allowed var HAS_CHILDREN_COLOR = 'lightsteelblue'; @@ -202,7 +214,7 @@ export default { // current pan, zoom, and rotation var curX = width / 2; var curY = height / 2; - var curZ = 1.14; // current zoom + var curZ = 1.28; // current zoom var curR = 270; // current rotation // keyboard key codes @@ -916,6 +928,39 @@ export default { }); svgGroup.selectAll('circle').attr('r', NODE_DIAMETER * reduceZ()); } + + var legendRectSize = 14; + var legendSpacing = 3; + var color = d3v5.scaleOrdinal(d3v5.schemeDark2) + var labelsData = JSON.parse(this.overallData[1]) + + var svgLegend = d3v5.select('#legendTarget').append('svg') + .attr('width', 130) + .attr('height', 60) + + var legend = svgLegend.selectAll('.legend') // NEW + .data(labelsData) // NEW + .enter() // NEW + .append('g') // NEW + .attr('class', 'legend') // NEW + .attr('transform', function(d, i) { // NEW + var height = legendRectSize + legendSpacing; // NEW + var offset = height * color.domain().length / 2; + var horz = 25 // NEW + var vert = i * height - offset; // NEW + return 'translate(' + horz + ',' + vert + ')'; // NEW + }); // NEW + + legend.append('rect') + .attr('width', legendRectSize) + .attr('height', legendRectSize) + .style('fill', function (d) { return color(d) }); + + legend.append('text') + .attr('class', 'legendLab') + .attr('x', legendRectSize + legendSpacing) + .attr('y', legendRectSize - legendSpacing) + .text(function(d) { return d; }); } }, mounted () { @@ -1029,12 +1074,15 @@ svg { } #help { position: relative; - bottom: -1.8em; + bottom: -1.7em; transform: rotate(270deg); -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); - width: 1.2em; + width: 100px; + text-align: center; + margin-top: -10px; + margin-left: -38px; } #help a { color: black; @@ -1072,4 +1120,8 @@ svg { stroke: #D3D3D3; } +.legendLab { + font-size: 14px !important; +} + \ No newline at end of file diff --git a/frontend/src/components/Heatmap.vue b/frontend/src/components/Heatmap.vue index a1ee8a0..115af56 100644 --- a/frontend/src/components/Heatmap.vue +++ b/frontend/src/components/Heatmap.vue @@ -84,6 +84,7 @@ export default { if (Object.entries(this.generKey).length == 0) { var Features = this.featureData[0] } else { + console.log(this.generKey) var Features = this.generKey } @@ -145,6 +146,7 @@ export default { }, heatmap_display(data, heatmapId) { var featuresAddRem = [] + var featuresGen = [] var cellSize = this.cellSize //########################################################################## // Patrick.Brockmann@lsce.ipsl.fr @@ -367,12 +369,13 @@ export default { } else if (d == -3) { return 'white' } else if (d == -4) { - svg.selectAll("rect").each(function(d){ - if (d == -4) { - d3.select(this).style("fill", "url(#diagonalHatch)") - } - }) - EventBus.$emit('addFeatureGen', [k]) + // svg.selectAll("rect").each(function(d){ + // if (d == -4) { + // d3.select(this).style("fill", "url(#diagonalHatch)") + // } + // }) + featuresGen.push(k) + EventBus.$emit('addFeatureGen', featuresGen) return 'yellow' } else { return colorScale(d) diff --git a/frontend/src/components/Results.vue b/frontend/src/components/Results.vue index a9ded34..2839830 100644 --- a/frontend/src/components/Results.vue +++ b/frontend/src/components/Results.vue @@ -40,7 +40,7 @@ export default { var padding = 3 var xLabelHeight = 30 var yLabelWidth = 80 - var borderWidth = 2 + var borderWidth = 0 var duration = 50 var chart = d3.select('#HistoryPlot').append('svg') @@ -60,7 +60,8 @@ export default { var color = JSON.parse(this.ValidResultsVar[12]) var data = [] - var features = this.featuresReceived[35] + + var features = this.featuresReceived[33] var labelsX = ['Add', 'Remove', 'Combine', 'Round'] for (let i=0; i< features.length; i++) { data.push({ @@ -200,7 +201,7 @@ export default { xLabels.transition() .text(function (d) { return d }) .duration(duration) - .attr('x', function(d, i){ return maxR * i * 2 + maxR + yLabelWidth }) + .attr('x', function(d, i){ return maxR * i * 2 + maxR + yLabelWidth - 2}) .style('fill-opacity', 1) var yLabels = chart.selectAll('.yLabel') @@ -221,7 +222,7 @@ export default { yLabels.transition() .duration(duration) - .attr('y', function(d, i){ return maxR * i * 2 + maxR + xLabelHeight }) + .attr('y', function(d, i){ return maxR * i * 2 + maxR + xLabelHeight - 9 }) .attr('transform', 'translate(-6,' + maxR / 2.5 + ')') .style('fill-opacity', 1) diff --git a/run.py b/run.py index 0b8a448..d928ab8 100644 --- a/run.py +++ b/run.py @@ -65,6 +65,9 @@ def reset(): global keyData keyData = 0 + global keepOriginalFeatures + keepOriginalFeatures = [] + global XData XData = [] global yData @@ -144,6 +147,9 @@ def retrieveFileName(): global keyData keyData = 0 + global keepOriginalFeatures + keepOriginalFeatures = [] + global XData XData = [] @@ -390,7 +396,11 @@ def dataSetSelection(): global XData, yData, RANDOM_SEED XData, yData = ArrayDataResults, AllTargetsFloatValues - XData.columns = [str(col) + ' (F'+str(idx+1)+')' for idx, col in enumerate(XData.columns)] + global keepOriginalFeatures + keepOriginalFeatures = XData.copy() + keepOriginalFeatures.columns = [str(col) + ' (F'+str(idx+1)+')' for idx, col in enumerate(keepOriginalFeatures.columns)] + + XData.columns = ['F'+str(idx+1) for idx, col in enumerate(XData.columns)] global XDataStored, yDataStored XDataStored = XData.copy() @@ -1094,17 +1104,7 @@ def Seperation(): global packCorr packCorr = [] - AbbreviatedFeatures = [] - for index, value in enumerate(XData.columns.values.tolist()): - realIndex = index + 1 - AbbreviatedFeatures.append('F'+str(realIndex)) - - AbbreviatedFeaturesOriginal = [] - for index, value in enumerate(XDataStored.columns.values.tolist()): - realIndex = index + 1 - AbbreviatedFeaturesOriginal.append('F'+str(realIndex)) - - packCorr.append(list(XData.columns.values.tolist())) + packCorr.append(list(keepOriginalFeatures.columns.values.tolist())) packCorr.append(json.dumps(target_names)) packCorr.append(json.dumps(probabilityPredictions)) @@ -1145,8 +1145,7 @@ def Seperation(): packCorr.append(json.dumps(MI5List)) packCorr.append(list(XDataStored.columns.values.tolist())) - packCorr.append(AbbreviatedFeatures) - packCorr.append(AbbreviatedFeaturesOriginal) + packCorr.append(list(XData.columns.values.tolist())) return 'Everything Okay' @@ -1212,14 +1211,17 @@ def CompareFunPy(): IDsToCompare = retrieveComparison['getIDs'] XDataGen = XDataStored.copy() columns = XData.columns.values.tolist() + columnsOriganl = keepOriginalFeatures.columns.values.tolist() columnsKeep = [] + columnsKeepNonOrig = [] columnsKeepID = [] for indx, col in enumerate(columns): if indx in IDsToCompare: - columnsKeep.append(col) + columnsKeepNonOrig.append(col) + columnsKeep.append(columnsOriganl[indx]) columnsKeepID.append(str(indx+1)) if (compareMode == 1): - XDataGen = XData[columnsKeep] + XDataGen = XData[columnsKeepNonOrig] feat1 = XDataGen.iloc[:,0] feat2 = XDataGen.iloc[:,1] XDataGen['F'+columnsKeepID[0]+'+F'+columnsKeepID[1]] = feat1 + feat2