diff --git a/__pycache__/run.cpython-38.pyc b/__pycache__/run.cpython-38.pyc index 9fa50b8..c4ee231 100644 Binary files a/__pycache__/run.cpython-38.pyc and b/__pycache__/run.cpython-38.pyc differ diff --git a/frontend/src/components/DataSpace.vue b/frontend/src/components/DataSpace.vue index 7b572ee..1ff60da 100644 --- a/frontend/src/components/DataSpace.vue +++ b/frontend/src/components/DataSpace.vue @@ -18,6 +18,8 @@ export default { dataInstances: '', PositiveValue: 75, NegativeValue: 25, + storeColor: [], + status: true } }, methods: { @@ -47,18 +49,25 @@ export default { predictions.sort() var colorInstances = [] - 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") + + 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