parent 5287d375d5
commit 68ff2d42b0
  1. BIN
      __pycache__/run.cpython-38.pyc
  2. 415
      frontend/src/components/FeatureSpaceDetail.vue
  3. 3
      frontend/src/components/FeatureSpaceOverview.vue
  4. 6
      frontend/src/components/Heatmap.vue
  5. 1
      frontend/src/components/Main.vue
  6. 2
      frontend/src/components/Results.vue
  7. 1
      run.py

Binary file not shown.

@ -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 = []
@ -753,39 +757,53 @@ export default {
})
})
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, "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},
{"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": (index*feature.value.length+pushEachFinal.length+indexIns), "value": Math.abs(element.valueIns) * 30, "lin_color": "#33a02c"})
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": (index*feature.value.length+pushEachFinal.length+indexIns), "value": 0.01 * 30, "lin_color": "#D3D3D3"})
links.push({"source": index, "target": (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"})
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()
@ -793,6 +811,11 @@ export default {
},
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]
@ -891,11 +914,6 @@ export default {
.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;
var height = 819 - marginNodes.top - marginNodes.bottom;
@ -942,92 +960,104 @@ 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(""))
// 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)
// 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();
// 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 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 < 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.append('title').text(function (d) { return d.name; });
// node.selectAll('text').remove();
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])
// 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
// });
for (let i = 0; i < graph.nodes.length; i++) {
// 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])
if (graph.nodes[i].group == matches) {
graph.nodes[i].active = true
}
}
// for (let i = 0; i < graph.nodes.length; i++) {
node.selectAll('text').remove();
// if (graph.nodes[i].group == matches) {
// graph.nodes[i].active = true
// }
// }
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.selectAll('text').remove();
node.append('title').text(function (d) { return d.name; });
// 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
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)
}
}
} else {
var groupsColor = d3.select('#svg'+index)._groups['0'][0].childNodes[0].childNodes[1]
var regex = /\d+/g
@ -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,50 +1099,52 @@ 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++) {
});
// .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])
if (graph.nodes[i].group == matches) {
graph.nodes[i].active = false
} else {
document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "#D3D3D3"
}
}
// for (let i = 0; i < graph.nodes.length; i++) {
node.selectAll('text').remove();
// if (graph.nodes[i].group == matches) {
// graph.nodes[i].active = false
// } else {
// document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "#D3D3D3"
// }
// }
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.selectAll('text').remove();
node.append('title').text(function (d) { return d.name; });
EventBus.$emit('brushLink', -1)
});
// 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;
@ -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,6 +1203,7 @@ 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))
@ -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);
// 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";
})
}
// 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 functions
function zoom_actions(){
svg.attr("transform", d3.event.transform)
}
// 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;
}
// 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();
}
// //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;
}
// 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 })

@ -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'

@ -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)
}

@ -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)
}

@ -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)
}

@ -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)

Loading…
Cancel
Save