parent f8d144c060
commit 44aabbbf6e
  1. BIN
      __pycache__/run.cpython-38.pyc
  2. 158
      frontend/src/components/FeatureSpaceDetail.vue
  3. 11
      frontend/src/components/FeatureSpaceOverview.vue
  4. 2
      run.py

Binary file not shown.

@ -1,5 +1,6 @@
<template> <template>
<div class="column"> <div class="column">
<svg id="chartID" class="chart"></svg>
<div id="FeatureGraph" style="border-style: solid; border-width: 2px; border-color: yellow; min-height: 819px; max-height: 819px; min-width: 819px"></div> <div id="FeatureGraph" style="border-style: solid; border-width: 2px; border-color: yellow; min-height: 819px; max-height: 819px; min-width: 819px"></div>
<div id="toolbar" style="min-height: 67px; max-height: 67px; margin-top: 25px"> <div id="toolbar" style="min-height: 67px; max-height: 67px; margin-top: 25px">
<div class="panel panel-default" data-placement="center"> <div class="panel panel-default" data-placement="center">
@ -7,17 +8,19 @@
<table class="table table-borderless centerTable" > <table class="table table-borderless centerTable" >
<tbody> <tbody>
<tr> <tr>
<div style="border: 1px solid black; height:70px; margin-top:19px">
<td scope="row"><button class="btn btn-primary active" id="initButton" v-on:click="setLayerExplore" style="margin-left: -1px !important" ><font-awesome-icon icon="wrench" style="margin-right: 5px"/>Transformation</button></td> <td scope="row"><button class="btn btn-primary active" id="initButton" v-on:click="setLayerExplore" style="margin-left: -1px !important" ><font-awesome-icon icon="wrench" style="margin-right: 5px"/>Transformation</button></td>
<td><button class="btn btn-primary" v-on:click="setLayerCompare" style="margin-left: -1.4px"><font-awesome-icon icon="balance-scale" style="margin-right: 5px" />Generation</button></td> <td><button class="btn btn-primary" v-on:click="setLayerCompare" style="margin-left: -1.4px"><font-awesome-icon icon="balance-scale" style="margin-right: 5px" />Generation</button></td>
</div>
<td> <td>
<div id="buildLegend" style="min-width: 160px;"> <div id="buildLegend" style="min-width: 160px;">
<div id="legend"></div> <div id="legend"></div>
<div id="legendText"></div> <div id="legendText" style="border: 1px solid black; min-height: 70px; max-height: 70px; min-width:181px; margin-top: 16px; margin-left:-12px;"></div>
</div> </div>
</td> </td>
<td> <td>
<div class="row align-items-center"> <div class="row align-items-center " style="height: 69px; margin-top:7px; min-width: 160px; border: 1px solid black">
<div class="col-lg-4"><p>Collinear (>)</p></div> <div class="col-lg-4"><p>Fs COR (>)</p></div>
<div class="col-lg-7"><div id="thres"></div></div> <div class="col-lg-7"><div id="thres"></div></div>
</div> </div>
</td> </td>
@ -82,7 +85,7 @@ export default {
.attr('width', 200) .attr('width', 200)
.attr('height', 80) .attr('height', 80)
.append('g') .append('g')
.attr('transform', 'translate(30,30)'); .attr('transform', 'translate(18,20)');
gStepPos.call(sliderStepPos); gStepPos.call(sliderStepPos);
@ -485,6 +488,8 @@ export default {
var svg = d3.select("#FeatureGraph"); var svg = d3.select("#FeatureGraph");
svg.selectAll("*").remove(); svg.selectAll("*").remove();
var svg = d3.select('#chartID')
svg.selectAll("*").remove()
var width = 819; var width = 819;
var height = 819; var height = 819;
@ -674,11 +679,39 @@ export default {
node.append('title').text(function (d) { return d.name; }); node.append('title').text(function (d) { return d.name; });
EventBus.$emit('brushLink', -1) EventBus.$emit('brushLink', -1)
}); });
var chartWidth = 350;
var chartHeight = 65;
var margin = {left: 25, right: 25, top: 10, bottom: 40};
var chartSvg = d3.select('svg.chart')
.attr('width', chartWidth)
.attr('height', chartHeight)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
chartWidth = chartWidth - margin.left - margin.right;
chartHeight = chartHeight - margin.top - margin.bottom;
var x = d3.scaleLinear()
.domain([75, 100])
.range([0, chartWidth]);
chartSvg.append('g')
.attr('transform', 'translate(0,' + chartHeight + ')')
.call(d3.axisBottom(x).ticks(7))
.append("text")
.attr("fill", "#000")
.attr('transform', 'translate(' + chartWidth/2 + ',' + 0 + ')')
.attr("y", chartHeight + 10)
.attr("dy", "0.71em")
.attr("text-anchor", "middle")
.text("Graph readability (%)");
var readabilityCircles = chartSvg.append('g').selectAll('circle');
// 48 parameters
var paramGroups = [ var paramGroups = [
{name: 'chargeStrength', values: [-30, -80]}, {name: 'chargeStrength', values: [-80]},
{name: 'linkDistance', values: [30, -80]}, {name: 'linkDistance', values: [-80]},
{name: 'linkStrength', values: [0, 1]}, {name: 'linkStrength', values: [0.25, 0.5]},
{name: 'gravity', values: [0, 0.5]}, {name: 'gravity', values: [0, 0.5]},
{name: 'iterations', values: [1, 2]}, {name: 'iterations', values: [1, 2]},
{name: 'alphaDecay', values: [0, 0.0228, 0.05]}, {name: 'alphaDecay', values: [0, 0.0228, 0.05]},
@ -693,6 +726,7 @@ export default {
.text(function (d) { return d; }); .text(function (d) { return d; });
dispatch.on('layoutend', function (params, i) { dispatch.on('layoutend', function (params, i) {
if (!bestParams || params.graphReadability > bestParams.graphReadability) { if (!bestParams || params.graphReadability > bestParams.graphReadability) {
bestParams = params; bestParams = params;
selectedParams = bestParams; selectedParams = bestParams;
@ -701,7 +735,31 @@ export default {
.data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; })) .data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
.text(function (d) { return d + ' = ' + bestParams[d]; }); .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();
drawGraph();
}); });
var i = 0; var i = 0;
@ -724,9 +782,9 @@ export default {
forceSim.tick(); forceSim.tick();
} }
p.graphReadability = greadability.greadability(graph.nodes, graph.links); p.graphReadability = greadability.greadability(graph.nodes, graph.links); // crossing > angularResolDev > angularResolMin > Angle
p.graphReadability = (p.graphReadability.crossing + p.graphReadability.crossingAngle + p.graphReadability = (p.graphReadability.crossing * 1 + p.graphReadability.crossingAngle * 0.1 +
p.graphReadability.angularResolutionMin + p.graphReadability.angularResolutionDev) / 4 p.graphReadability.angularResolutionMin * 0.4 + p.graphReadability.angularResolutionDev * 0.75) / 2.25
p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; }); p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; });
@ -963,8 +1021,6 @@ export default {
zoom_handler(svg); zoom_handler(svg);
drawGraph();
for (let i = 0; i < listofNodes.length; i++) { for (let i = 0; i < listofNodes.length; i++) {
var numb = graph.nodes[i]['group'].match(/\d/g) var numb = graph.nodes[i]['group'].match(/\d/g)
numb = parseInt(numb.join("")) numb = parseInt(numb.join(""))
@ -1001,11 +1057,10 @@ export default {
d.fy = null; d.fy = null;
} }
stepper.stop();
if (legendCall) { if (legendCall) {
var svgLegend = d3.select("#legend").append("svg") var svgLegend = d3.select("#legend").append("svg")
.attr("width", 160) .attr("width", 170)
.attr("height", 90) .attr("height", 90)
.attr("id", "legendNode") .attr("id", "legendNode")
@ -1133,61 +1188,64 @@ export default {
}) })
}); });
var textLine = d3.select('#legendText').append("svg").attr('width', 160).attr('height', 90) var textLine = d3.select('#legendText').append("svg").attr('width', 170).attr('height', 90)
var marginBorder = 18
var marginBorderX = 10
textLine.append('line') textLine.append('line')
.style("stroke", "black") .style("stroke", "black")
.style("stroke-width", 3) .style("stroke-width", 3)
.attr("x1", 35) .attr("x1", 35 + marginBorderX)
.attr("y1", 50) .attr("y1", 50 - marginBorder)
.attr("x2", 74) .attr("x2", 74 + marginBorderX)
.attr("y2", 50) .attr("y2", 50 - marginBorder)
textLine.append("text") textLine.append("text")
.attr("dx", "75") .attr("dx", 75 + marginBorderX)
.attr("dy", "55") .attr("dy", 55 - marginBorder)
.text("VIF") .text("VIF")
textLine.append('line') textLine.append('line')
.style("stroke", "black") .style("stroke", "black")
.style("stroke-width", 3) .style("stroke-width", 3)
.attr("x1", 42) .attr("x1", 42 + marginBorderX)
.attr("y1", 31) .attr("y1", 31 - marginBorder)
.attr("x2", 53) .attr("x2", 53 + marginBorderX)
.attr("y2", 31) .attr("y2", 31 - marginBorder)
textLine.append("text") textLine.append("text")
.attr("dx", "54") .attr("dx", 54 + marginBorderX)
.attr("dy", "36") .attr("dy", 36 - marginBorder)
.text("Per class COR") .text("Per class COR")
textLine.append('line') textLine.append('line')
.style("stroke", "black") .style("stroke", "black")
.style("stroke-width", 3) .style("stroke-width", 3)
.attr("x1", 32) .attr("x1", 32 + marginBorderX)
.attr("y1", 67) .attr("y1", 67 - marginBorder)
.attr("x2", 74) .attr("x2", 74 + marginBorderX)
.attr("y2", 67) .attr("y2", 67 - marginBorder)
textLine.append("text") textLine.append("text")
.attr("dx", "75") .attr("dx", 75 + marginBorderX)
.attr("dy", "72") .attr("dy", 72 - marginBorder)
.text("Target COR") .text("Target COR")
textLine.append('line') textLine.append('line')
.style("stroke", "#6baed6") .style("stroke", "#6baed6")
.style("stroke-width", 3) .style("stroke-width", 3)
.attr("x1", 18) .attr("x1", 18 + marginBorderX)
.attr("y1", 50) .attr("y1", 50 - marginBorder)
.attr("x2", 26) .attr("x2", 26 + marginBorderX)
.attr("y2", 50) .attr("y2", 50 - marginBorder)
textLine.append("text") textLine.append("text")
.attr("dx", "0") .attr("dx", 0 + marginBorderX)
.attr("dy", "55") .attr("dy", 55 - marginBorder)
.style("fill", "#6baed6") .style("fill", "#6baed6")
.text("MI") .text("MI")
} }
stepper.stop();
} }
}); });
@ -1283,6 +1341,8 @@ export default {
reset () { reset () {
var svg = d3.select("#FeatureGraph"); var svg = d3.select("#FeatureGraph");
svg.selectAll("*").remove(); svg.selectAll("*").remove();
var svg = d3.select('#chartID')
svg.selectAll("*").remove()
}, },
}, },
mounted () { mounted () {
@ -1387,4 +1447,24 @@ table td {
padding-left: 6px !important; padding-left: 6px !important;
} }
#chartID {
position: absolute;
transform: translate(-390px, 840px);
}
.chart circle {
fill: black;
fill-opacity: 0.05;
stroke: black;
stroke-opacity: 0.05;
cursor: pointer;
}
.chart circle.selected {
fill: #0062cc;
fill-opacity: 1;
stroke: #0062cc;
stroke-opacity: 1;
}
</style> </style>

@ -38,14 +38,14 @@
<div class="button" data-key="191" title="Toggle Root">/</div> <div class="button" data-key="191" title="Toggle Root">/</div>
</div> </div>
</div> </div>
<div class="tool">
<div id="help">Labels</div>
<div id="legendTarget" style="min-width: 130px; min-height: 50px; margin-top:-10px"></div>
</div>
<div class="tool"> <div class="tool">
<div class="tlabel" style="text-align:left" title="Change Root">&nbsp;Navigate</div> <div class="tlabel" style="text-align:left" title="Change Root">&nbsp;Navigate</div>
<div id="selection" class="tlabel"></div> <div id="selection" class="tlabel"></div>
</div> </div>
<div class="tool">
<div id="help">Labels</div>
<div id="legendTarget" style="min-width: 492.7px; min-height: 50px; margin-top:-10px"></div>
</div>
</div> </div>
<div id="contextmenu"> <div id="contextmenu">
@ -561,8 +561,7 @@ export default {
function fullpath(d, idx) { function fullpath(d, idx) {
idx = idx || 0; idx = idx || 0;
curPath.push(d); curPath.push(d);
return (d.parent ? fullpath(d.parent, curPath.length) : '') + return '/<span class="nodepath'+
'/<span class="nodepath'+(d.name === root.name ? ' highlight' : '')+
'" data-sel="'+ idx +'" title="Set Root to '+ d.name +'">' + '" data-sel="'+ idx +'" title="Set Root to '+ d.name +'">' +
d.name + '</span>'; d.name + '</span>';
} }

@ -436,7 +436,7 @@ def executeModel(exeCall, flagEx):
scores = [] scores = []
XData = XDataStored.copy() XData = XDataStored.copy()
# Bayesian Optimization for 150 iterations
if (keyFirstTime): if (keyFirstTime):
create_global_function() create_global_function()
params = {"C": (0.0001, 10000), "gamma": (0.0001, 10000)} params = {"C": (0.0001, 10000), "gamma": (0.0001, 10000)}

Loading…
Cancel
Save