ISOVIS
/
FeatureEnVi
3
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

new

Browse Source
master
Angelos Chatzimparmpas 4 years ago
parent 530d38e7fd
commit b936d51c7f
4 changed files with 375 additions and 104 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 181
      frontend/src/components/DataSpace.vue
  2. 201
      frontend/src/components/FeatureSpaceDetail.vue
  3. 83
      frontend/src/components/FeatureSpaceOverview.vue
  4. 6
      frontend/src/components/Heatmap.vue

181
frontend/src/components/DataSpace.vue
Unescape View File

@ -2,6 +2,7 @@
<div id="AllClass"> <div id="AllClass">
<div id="BeeSwarm"></div> <div id="BeeSwarm"></div>
<div id="Sliders"></div> <div id="Sliders"></div>
<div id="TextLabels"></div>
<div id="NoAction" style="width: 2525px !important; height: 225px !important;"></div> <div id="NoAction" style="width: 2525px !important; height: 225px !important;"></div>
</div> </div>
</template> </template>
@ -19,7 +20,8 @@ export default {
PositiveValue: 75, PositiveValue: 75,
NegativeValue: 25, NegativeValue: 25,
storeColor: [], storeColor: [],
status: true status: true,
rootIDSelected: 1,
} }
}, },
methods: { methods: {
@ -163,7 +165,7 @@ export default {
.attr("r", dr) .attr("r", dr)
.attr("fill", colorX) .attr("fill", colorX)
.style("stroke", "black") .style("stroke", "black")
.style("stroke-width", 4) .style("stroke-width", 1)
.on("mouseover", function(d) { .on("mouseover", function(d) {
tooltip.select(".system").html(d.system) tooltip.select(".system").html(d.system)
return tooltip.select(".label").html(d.label) return tooltip.select(".label").html(d.label)
@ -305,30 +307,6 @@ export default {
.attr(lineAttributes) .attr(lineAttributes)
.call(drag); .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() { function dragstarted() {
if (d3.select(this)[0][0].id == 2) { if (d3.select(this)[0][0].id == 2) {
d3.select(this).classed(activeClassName, false); d3.select(this).classed(activeClassName, false);
@ -402,6 +380,153 @@ export default {
d3.select(this).classed(activeClassName, false); d3.select(this).classed(activeClassName, false);
} }
}, },
updateSliders () {
var svg = d3.select("#TextLabels");
svg.selectAll("*").remove();
var width = 2525
var height = 225
var svgLines = d3.select('#TextLabels').append('svg');
svgLines.attr('width', width);
svgLines.attr('height', height);
if (this.rootIDSelected == 1) {
svgLines
.append("text")
.attr("x", 0.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Worst")
.style("font-weight", "bold");
svgLines
.append("text")
.attr("x", 1.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Bad")
.style("font-weight", "bold");
svgLines
.append("text")
.attr("x", 2.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Good")
.style("font-weight", "bold");
svgLines
.append("text")
.attr("x", 3.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Best")
.style("font-weight", "bold");
} else if (this.rootIDSelected == 2) {
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")
.style("font-weight", "bold");
} else if (this.rootIDSelected == 3) {
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")
.style("font-weight", "bold");
svgLines
.append("text")
.attr("x", 3.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Best");
} else if (this.rootIDSelected == 4) {
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")
.style("font-weight", "bold");
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");
} else {
svgLines
.append("text")
.attr("x", 0.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Worst")
.style("font-weight", "bold");
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");
}
},
reset () { reset () {
var svg = d3.select("#BeeSwarm"); var svg = d3.select("#BeeSwarm");
svg.selectAll("*").remove(); svg.selectAll("*").remove();
@ -411,6 +536,9 @@ export default {
}, },
}, },
mounted () { mounted () {
EventBus.$on('keepRootFun', data => { this.rootIDSelected = data })
EventBus.$on('dataSpace', this.updateSliders)
EventBus.$on('ConfirmDataSet', data => {this.status = false}) EventBus.$on('ConfirmDataSet', data => {this.status = false})
EventBus.$on('SendtheChangeinRangePos', data => {this.PositiveValue = data}) EventBus.$on('SendtheChangeinRangePos', data => {this.PositiveValue = data})
@ -438,6 +566,7 @@ text {
#BeeSwarm { position: absolute; top: 0; left: 0; z-index: 1} #BeeSwarm { position: absolute; top: 0; left: 0; z-index: 1}
#Sliders { position: absolute; top: 0; left: 0; z-index: 2} #Sliders { position: absolute; top: 0; left: 0; z-index: 2}
#NoAction { position: absolute; top: 0; left: 0; z-index: -1} #NoAction { position: absolute; top: 0; left: 0; z-index: -1}
#TextLabels {position: absolute; top: 0; left: 0; z-index: 3}
.active-d3-item { .active-d3-item {
cursor: pointer; cursor: pointer;

201
frontend/src/components/FeatureSpaceDetail.vue
Unescape View File

@ -1,27 +1,29 @@
<template> <template>
<div class="column"> <div class="column">
<svg id="chartID" class="chart"></svg> <svg id="chartID" class="chart" style="min-height: 66px !important; max-height: 66px !important; min-width:318px !important;"></svg>
<div id="FeatureGraph" style="border-style: solid; border-width: 3px; border-color: yellow; min-height: 819px; max-height: 819px; min-width: 819px"></div> <div id="FeatureGraph" style="border-style: solid; border-width: 3px; border-color: black; min-height: 819px; max-height: 819px; min-width: 819px !important; max-width: 819px !important"></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; max-width: 819px !important">
<div class="panel panel-default" data-placement="center"> <div class="panel panel-default" data-placement="center">
<div class="panel-body" id="resetAllFilters" data-placement="center" style="margin-top: -20px"> <div class="panel-body" id="resetAllFilters" data-placement="center" style="margin-top: -20px">
<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"> <div style="border: 1px solid black; height:68px; margin-top:19px">
<td scope="row"><button class="btn btn-primary active" id="initButton" v-on:click="setLayerExplore" style="margin-top: 3px; 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-top: 3px; margin-left: 0px !important" ><font-awesome-icon icon="wrench" style="margin-right: 5px"/>Feature Transformation</button></td>
<td><button class="btn btn-primary" v-on:click="setLayerCompare" style="margin-top: 3px; 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-top: 3px; margin-left: -15px"><font-awesome-icon icon="balance-scale" style="margin-right: 5px" />Feature Generation</button></td>
</div> </div>
<td> <td>
<div id="buildLegend" style="min-width: 160px;"> <div id="glyphLegend">
<div id="legend" style="margin-top: 2px; "></div> <div id="buildLegend">
<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 id="legend" style="margin-top: 2px; margin-left: -6px"></div>
<div id="legendText" title="MI: Mutual Information (range: light blue to dark blue); COR: Correlation (range: 0%-100%); VIF: Variance Influence Factor (range: ... < 2.5 < 5 < 10 < ...)" style="border: 1px solid black; min-height: 68px; max-height: 68px; min-width:170px; margin-top: 17px; margin-left: -12px"></div>
</div>
</div> </div>
</td> </td>
<td> <td>
<div class="row align-items-center " style="height: 70px; margin-top:7px; border: 1px solid black"> <div id="floatingPanel" class="row align-items-center " style="height: 66px; margin-top:11px; border: 1px solid black; max-width: 260px">
<div class="col-lg-4"><p>Fs COR (>)</p></div> <div class="col-lg-4" style="margin-top:3px; margin-left: -5px"><p>Fs COR (>)</p></div>
<div class="col-lg-7"><div id="thres"></div></div> <div class="col-lg-7" style="margin-top:1px; margin-left: -15px"><div id="thres"></div></div>
</div> </div>
</td> </td>
</tr> </tr>
@ -83,10 +85,10 @@ export default {
var gStepPos = d3 var gStepPos = d3
.select('div#thres') .select('div#thres')
.append('svg') .append('svg')
.attr('width', 200) .attr('width', 176)
.attr('height', 80) .attr('height', 80)
.append('g') .append('g')
.attr('transform', 'translate(18,20)'); .attr('transform', 'translate(15,15)');
gStepPos.call(sliderStepPos); gStepPos.call(sliderStepPos);
@ -555,6 +557,7 @@ export default {
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(""))
var items = document.getElementsByClassName(numb) var items = document.getElementsByClassName(numb)
items.forEach( function (it) { items.forEach( function (it) {
@ -570,7 +573,8 @@ export default {
if (!str.includes("root")) { if (!str.includes("root")) {
graph.nodes[i].active = false graph.nodes[i].active = false
} else { } else {
document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "black" document.getElementsByClassName(str)[0].childNodes[0].childNodes[1].style.fill = "#D3D3D3"
document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "#707070"
} }
} }
@ -640,7 +644,7 @@ export default {
if (groupsColor.getAttribute('fill') == "#D3D3D3") { if (groupsColor.getAttribute('fill') == "#D3D3D3") {
if (selectionCounter < 3) { if (selectionCounter < 3) {
// add here the different states of comparison! (=2 and =3) // add here the different states of comparison! (=2 and =3)
groupsColor.setAttribute('fill', '#black') groupsColor.setAttribute('fill', '#707070')
selectionCounter = selectionCounter + 1 selectionCounter = selectionCounter + 1
EventBus.$emit('Counter', selectionCounter) EventBus.$emit('Counter', selectionCounter)
IDsGather.push(idLocal); IDsGather.push(idLocal);
@ -720,8 +724,8 @@ export default {
var chartWidth = 310; var chartWidth = 310;
var chartHeight = 65; var chartHeight = 66;
var margin = {left: 8, right: 15, top: 10, bottom: 40}; var margin = {left: 16, right: 15, top: 5, bottom: 45};
var chartSvg = d3.select('svg.chart') var chartSvg = d3.select('svg.chart')
.attr('width', chartWidth) .attr('width', chartWidth)
.attr('height', chartHeight) .attr('height', chartHeight)
@ -831,6 +835,7 @@ export default {
dispatch.call('layoutend', forceSim, p, i); dispatch.call('layoutend', forceSim, p, i);
++i; ++i;
if (i >= paramList.length) { if (i >= paramList.length) {
var widthLoc = 100; var widthLoc = 100;
@ -847,7 +852,7 @@ export default {
var data = [] var data = []
var barchartData = [] var barchartData = []
if (IDsGather.includes(indexNode)) { if (IDsGather.includes(indexNode)) {
data.push({value: VIFVarFormatted[indexNode], color: 'black'}) data.push({value: VIFVarFormatted[indexNode], color: '#707070'})
} else { } else {
data.push({value: VIFVarFormatted[indexNode], color: '#D3D3D3'}) data.push({value: VIFVarFormatted[indexNode], color: '#D3D3D3'})
} }
@ -930,7 +935,7 @@ export default {
insideRadius = 1 insideRadius = 1
return 'none' return 'none'
} }
}); })
var margin = {top: 0, right: 0, bottom: 0, left: 0}, var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 45 - margin.left - margin.right, width = 45 - margin.left - margin.right,
height = 45 - margin.top - margin.bottom; height = 45 - margin.top - margin.bottom;
@ -970,21 +975,41 @@ export default {
.attr("width", function(d) { return x(d.value); }) .attr("width", function(d) { return x(d.value); })
.attr("height", y.bandwidth() ) .attr("height", y.bandwidth() )
.attr("fill", function(d) { return d.color}) .attr("fill", function(d) { return d.color})
.attr('opacity', "0.5")
.on("mouseover", function(d) { .on("mouseover", function(d) {
document.getElementsByClassName("bar"+d.class).forEach (function (element) { document.getElementsByClassName("bar"+d.class).forEach (function (element) {
element.setAttribute("fill", "yellow") element.setAttribute("opacity", "1.0")
})
document.getElementsByClassName("label"+d.class).forEach (function (element) {
element.setAttribute("visibility", "visible")
}) })
d3.select(this)
.attr("fill", "yellow");
}) })
.on("mouseout", function(d, i) { .on("mouseout", function(d, i) {
var colorPrevious = d.color
document.getElementsByClassName("bar"+d.class).forEach (function (element) { document.getElementsByClassName("bar"+d.class).forEach (function (element) {
element.setAttribute("fill", colorPrevious) element.setAttribute("opacity", "0.5")
})
document.getElementsByClassName("label"+d.class).forEach (function (element) {
element.setAttribute("visibility", "hidden")
}) })
}); });
gText.selectAll("myRect")
.data(barchartData)
.enter().append("text")
.attr("class", function(d){ return "label"+d.class})
//y position of the label is halfway down the bar
.attr("y", function (d) {
return y(d.class)+ 11;
})
//x position is 3 pixels to the right of the bar
.attr("x", function (d) {
return x(0);
})
.text(function (d) {
return d.value;
}).style("font-size", "10px")
.style("fill", "white")
.attr("visibility", "hidden")
} }
// if (i == 0) { // if (i == 0) {
@ -1031,29 +1056,31 @@ export default {
}); });
})
// var drag_handler = d3.drag() // var drag_handler = d3.drag()
// .on("start", drag_start) // .on("start", drag_start)
// .on("drag", drag_drag) // .on("drag", drag_drag)
// .on("end", drag_end); // .on("end", drag_end);
// drag_handler(node);
// drag_handler(node);
})
var labels = node.append("text") var labels = node.append("text")
.text(function(d) { .text(function(d) {
return d.name; return d.name;
}) })
.attr('x', 39) .attr('x', 39)
.attr('y', function(d) { .attr('y', function(d) {
if(d.active) if(d.active)
return 8 return 8
else else
return 35 return 35
});
node.append('title').text(function (d, i) {
return 'Target COR: '+String(corrGlobFormatted[i])+'%';
}); });
node.append('title').text(function (d) { return d.name; });
//add zoom capabilities //add zoom capabilities
var zoom_handler = d3.zoom() var zoom_handler = d3.zoom()
.on("zoom", zoom_actions); .on("zoom", zoom_actions);
@ -1224,6 +1251,7 @@ export default {
.attr("width", function(d) { return x(d.value); }) .attr("width", function(d) { return x(d.value); })
.attr("height", y.bandwidth() ) .attr("height", y.bandwidth() )
.attr("fill", function(d) { return d.color}) .attr("fill", function(d) { return d.color})
.attr("opacity", "0.5")
} }
}) })
}); });
@ -1231,17 +1259,73 @@ export default {
var textLine = d3.select('#legendText').append("svg").attr('width', 170).attr('height', 90) var textLine = d3.select('#legendText').append("svg").attr('width', 170).attr('height', 90)
var marginBorder = 16 var marginBorder = 16
var marginBorderX = 10 var marginBorderX = 5
textLine.append('line')
const markerBoxWidth = 2;
const markerBoxHeight = 2;
const refX = markerBoxWidth / 2;
const refY = markerBoxHeight / 2;
const arrowPoints = [[0, 0], [0, 2], [2, 1]];
textLine.append("svg:defs").append("svg:marker")
.attr("id", "triangle")
.attr("refX", refX)
.attr("refY", refY)
.attr("markerWidth", markerBoxWidth)
.attr("markerHeight", markerBoxHeight)
.attr("orient", "auto")
.append("path")
.attr('d', d3.line()(arrowPoints))
.style("fill", "black");
textLine.append("svg:defs").append("svg:marker")
.attr("id", "triangle2")
.attr("refX", refX)
.attr("refY", refY)
.attr("markerWidth", markerBoxWidth)
.attr("markerHeight", markerBoxHeight)
.attr("orient", "auto")
.append("path")
.attr('d', d3.line()(arrowPoints))
.style("fill", "black");
textLine.append("svg:defs").append("svg:marker")
.attr("id", "triangle3")
.attr("refX", refX)
.attr("refY", refY)
.attr("markerWidth", markerBoxWidth)
.attr("markerHeight", markerBoxHeight)
.attr("orient", "auto")
.append("path")
.attr('d', d3.line()(arrowPoints))
.style("fill", "black");
textLine.append("svg:defs").append("svg:marker")
.attr("id", "triangle4")
.attr("refX", refX)
.attr("refY", refY)
.attr("markerWidth", markerBoxWidth)
.attr("markerHeight", markerBoxHeight)
.attr("orient", "auto-start-reverse")
.append("path")
.attr('d', d3.line()(arrowPoints))
.style("fill", "#6baed6");
//line
textLine.append("line")
.style("stroke", "black") .style("stroke", "black")
.style("stroke-width", 3) .style("stroke-width", 3)
.attr("x1", 36 + marginBorderX) .attr("x1", 36 + marginBorderX)
.attr("y1", 50 - marginBorder) .attr("y1", 50 - marginBorder)
.attr("x2", 74 + marginBorderX) .attr("x2", 74 + marginBorderX)
.attr("y2", 50 - marginBorder) .attr("y2", 50 - marginBorder)
.attr("marker-end", "url(#triangle)");
textLine.append("text") textLine.append("text")
.attr("dx", 75 + marginBorderX) .attr("dx", 77 + marginBorderX)
.attr("dy", 55 - marginBorder) .attr("dy", 55 - marginBorder)
.text("VIF") .text("VIF")
@ -1252,9 +1336,10 @@ export default {
.attr("y1", 31 - marginBorder) .attr("y1", 31 - marginBorder)
.attr("x2", 53 + marginBorderX) .attr("x2", 53 + marginBorderX)
.attr("y2", 31 - marginBorder) .attr("y2", 31 - marginBorder)
.attr("marker-end", "url(#triangle2)");
textLine.append("text") textLine.append("text")
.attr("dx", 54 + marginBorderX) .attr("dx", 56 + marginBorderX)
.attr("dy", 36 - marginBorder) .attr("dy", 36 - marginBorder)
.text("Per class COR") .text("Per class COR")
@ -1265,9 +1350,10 @@ export default {
.attr("y1", 67 - marginBorder) .attr("y1", 67 - marginBorder)
.attr("x2", 74 + marginBorderX) .attr("x2", 74 + marginBorderX)
.attr("y2", 67 - marginBorder) .attr("y2", 67 - marginBorder)
.attr("marker-end", "url(#triangle3)");
textLine.append("text") textLine.append("text")
.attr("dx", 75 + marginBorderX) .attr("dx", 77 + marginBorderX)
.attr("dy", 72 - marginBorder) .attr("dy", 72 - marginBorder)
.text("Target COR") .text("Target COR")
@ -1278,9 +1364,10 @@ export default {
.attr("y1", 50 - marginBorder) .attr("y1", 50 - marginBorder)
.attr("x2", 26 + marginBorderX) .attr("x2", 26 + marginBorderX)
.attr("y2", 50 - marginBorder) .attr("y2", 50 - marginBorder)
.attr("marker-start", "url(#triangle4)");
textLine.append("text") textLine.append("text")
.attr("dx", 0 + marginBorderX) .attr("dx", -2 + marginBorderX)
.attr("dy", 55 - marginBorder) .attr("dy", 55 - marginBorder)
.style("fill", "#6baed6") .style("fill", "#6baed6")
.text("MI") .text("MI")
@ -1438,6 +1525,16 @@ export default {
#legend { position: absolute; top: 0; left: 0; z-index: 1} #legend { position: absolute; top: 0; left: 0; z-index: 1}
#legendText { position: absolute; top: 0; left: 0; z-index: 2} #legendText { position: absolute; top: 0; left: 0; z-index: 2}
#floatingPanel {
position: absolute;
transform: translate(-1071px, -33px);
}
#glyphLegend {
position: absolute;
transform: translate(210px, 6px) !important;
}
#legend { #legend {
transform: translateY(-47px) scale(0.8) !important transform: translateY(-47px) scale(0.8) !important
} }
@ -1463,7 +1560,6 @@ svg {
float: left; float: left;
} }
.table { .table {
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
@ -1495,7 +1591,8 @@ table td {
#chartID { #chartID {
position: absolute; position: absolute;
transform: translate(-354px, 840px); transform: translate(-351px, 845px);
border: 1px solid black !important;
} }
.chart circle { .chart circle {

83
frontend/src/components/FeatureSpaceOverview.vue
Unescape View File

@ -16,13 +16,13 @@
<div class="button" data-key="34" title="Rotate CW" style="font-size:0.9em">&#8635;</div> <div class="button" data-key="34" title="Rotate CW" style="font-size:0.9em">&#8635;</div>
</div> </div>
</div> </div>
<div class="tool"> <!--<div class="tool">
<div class="tlabel">Select</div> <div class="tlabel">Select</div>
<div class="tbuttons"> <div class="tbuttons">
<div class="button" data-key="-38" title="Select Previous" style="font-size:0.9em">&#8613;</div> <div class="button" data-key="-38" title="Select Previous" style="font-size:0.9em">&#8613;</div>
<div class="button" data-key="-40" title="Select Next" style="font-size:0.9em">&#8615;</div> <div class="button" data-key="-40" title="Select Next" style="font-size:0.9em">&#8615;</div>
</div> </div>
</div> </div>-->
<div class="tool"> <div class="tool">
<div class="tlabel">View</div> <div class="tlabel">View</div>
<div class="tbuttons"> <div class="tbuttons">
@ -38,13 +38,13 @@
<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 class="tool" id="moveNavigate">
<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 class="tool" id="moveLabel">
<div id="help">Labels</div> <div id="help">Labels</div>
<div id="legendTarget" style="min-width: 457px; min-height: 50px; margin-top:-10px"></div> <div id="legendTarget" style="min-width: 130px; min-height: 50px; margin-top:-10px"></div>
</div> </div>
</div> </div>
@ -76,7 +76,7 @@ export default {
colorsReceive: [], colorsReceive: [],
activeLeaf: -1, activeLeaf: -1,
overallData: [], overallData: [],
keepRoot: 1 keepRoot: 1,
} }
}, },
methods: { methods: {
@ -198,7 +198,7 @@ export default {
var MIN_ZOOM = 0.5; // minimum zoom allowed var MIN_ZOOM = 0.5; // minimum zoom allowed
var MAX_ZOOM = 10; // maximum zoom allowed var MAX_ZOOM = 10; // maximum zoom allowed
var HAS_CHILDREN_COLOR = 'lightsteelblue'; var HAS_CHILDREN_COLOR = 'lightsteelblue';
var SELECTED_COLOR = 'yellow'; // color of selected node var SELECTED_COLOR = 'black'; // color of selected node
var ZOOM_INC = 0.04; // zoom factor per animation frame var ZOOM_INC = 0.04; // zoom factor per animation frame
var PAN_INC = 3; // pan per animation frame var PAN_INC = 3; // pan per animation frame
var ROT_INC = 0.3; // rotation per animation frame var ROT_INC = 0.3; // rotation per animation frame
@ -274,11 +274,26 @@ export default {
selectNode(treeData.children[this.keepRoot]); // current selected node selectNode(treeData.children[this.keepRoot]); // current selected node
// Collapse all children of root's children before rendering // Collapse all children of root's children before rendering
// if (root.children) {
// root.children.forEach(function(child) { root.children.forEach(function(child) {
// collapseTree(child); child.children.forEach(function(child) {
// }); collapseTree(child)
// } });
});
root.children.forEach(function(child) {
child.children.forEach(function(child) {
if (child.name == listofNodes[activeLeafLoc]) {
console.log(child)
toggle(child)
}
});
});
// root.children.forEach(function(child) {
// console.log(child)
// expand1Level(child)
// });
update(root, true); // Layout the tree initially and center on the root node update(root, true); // Layout the tree initially and center on the root node
@ -345,10 +360,20 @@ export default {
.style('fill', function(d) { .style('fill', function(d) {
if (d.name == 'Data') { if (d.name == 'Data') {
return d._children ? 'white' : 'white'; return d._children ? 'white' : 'white';
} else if (d.name == 'All') {
return d._children ? 'yellow' : 'yellow';
} else if (d.name == 'Best') {
return d._children ? 'yellow' : 'yellow';
} else if (d.name == 'Good') {
return d._children ? 'yellow' : 'yellow';
} else if (d.name == 'Bad') {
return d._children ? 'yellow' : 'yellow';
} else if (d.name == 'Worst') {
return d._children ? 'yellow' : 'yellow';
} else { } else {
if (activeLeafLoc != -1) { if (activeLeafLoc != -1) {
if (d.name == listofNodes[activeLeafLoc]) { if (d.name == listofNodes[activeLeafLoc]) {
return d._children ? 'black' : 'black' return d._children ? '#707070' : '#707070'
} }
else { else {
return d._children ? '#D3D3D3' : '#D3D3D3' return d._children ? '#D3D3D3' : '#D3D3D3'
@ -361,13 +386,13 @@ export default {
if(d.name == 'Data') { if(d.name == 'Data') {
return d.selected ? SELECTED_COLOR : 'white'; return d.selected ? SELECTED_COLOR : 'white';
} else { } else {
return d.selected ? SELECTED_COLOR : 'black'; return d.selected ? SELECTED_COLOR : '#D3D3D3';
} }
}).attr('stroke-width', function(d) { }).attr('stroke-width', function(d) {
if(d.name == 'Data') { if(d.name == 'Data') {
return d.selected ? 0 : 0; return d.selected ? 0 : 0;
} else if (d.name == 'All' || d.name == 'Best' || d.name == 'Good' || d.name == 'Bad' || d.name == 'Worst'){ } else if (d.name == 'All' || d.name == 'Best' || d.name == 'Good' || d.name == 'Bad' || d.name == 'Worst'){
return d.selected ? 3 : 3; return d.selected ? 4 : 4;
} else { } else {
return d.selected ? 0 : 0; return d.selected ? 0 : 0;
} }
@ -572,7 +597,7 @@ export default {
d3.event.preventDefault(); d3.event.preventDefault();
var pathelms = document.querySelectorAll('#selection .nodepath'); var pathelms = document.querySelectorAll('#selection .nodepath');
for (var i = 0; i < pathelms.length; i++) { for (var i = 0; i < pathelms.length; i++) {
pathelms[i].classList.remove('highlight'); //pathelms[i].classList.remove('highlight');
} }
var target = d3.event.target; var target = d3.event.target;
var node = curPath[+target.dataset.sel]; var node = curPath[+target.dataset.sel];
@ -953,7 +978,8 @@ export default {
legend.append('rect') legend.append('rect')
.attr('width', legendRectSize) .attr('width', legendRectSize)
.attr('height', legendRectSize) .attr('height', legendRectSize)
.style('fill', function (d) { return color(d) }); .style('fill', function (d) { return color(d) })
.style('opacity', "0.5");
legend.append('text') legend.append('text')
.attr('class', 'legendLab') .attr('class', 'legendLab')
@ -963,7 +989,6 @@ export default {
} }
}, },
mounted () { mounted () {
EventBus.$on('keepRootFun', data => { this.keepRoot = data }) EventBus.$on('keepRootFun', data => { this.keepRoot = data })
EventBus.$on('quad', data => { this.overallData = data }) EventBus.$on('quad', data => { this.overallData = data })
@ -1080,7 +1105,7 @@ svg {
-o-transform: rotate(270deg); -o-transform: rotate(270deg);
width: 100px; width: 100px;
text-align: center; text-align: center;
margin-top: -10px; margin-top: -6px;
margin-left: -38px; margin-left: -38px;
} }
#help a { #help a {
@ -1123,4 +1148,24 @@ svg {
font-size: 14px !important; font-size: 14px !important;
} }
#moveLabel {
position: absolute;
transform: translate(1369px, -2px);
z-index: 3;
min-height: 68px;
max-height: 68px;
}
#moveNavigate {
position: absolute;
transform: translate(1293px, -2px);
z-index: 3;
min-height: 68px;
max-height: 68px;
}
#selection {
font-weight: bold;
}
</style> </style>

6
frontend/src/components/Heatmap.vue
Unescape View File

@ -368,7 +368,7 @@ export default {
.style("fill", function(d) { .style("fill", function(d) {
if (d == -1) return "url(#diagonalHatch)" if (d == -1) return "url(#diagonalHatch)"
else if (d == -2) return "yellow" else if (d == -2) return "yellow"
else if (d == -3) return "black" else if (d == -3) return "#707070"
else if (d == -4) return "url(#diagonalHatch)" else if (d == -4) return "url(#diagonalHatch)"
else return colorScale(d) else return colorScale(d)
}) })
@ -396,7 +396,7 @@ export default {
EventBus.$emit('addFeature', featuresAddRem) EventBus.$emit('addFeature', featuresAddRem)
return 'yellow' return 'yellow'
} else if (d == -3) { } else if (d == -3) {
return 'black' return '#707070'
} else if (d == -4) { } else if (d == -4) {
// svg.selectAll("rect").each(function(d){ // svg.selectAll("rect").each(function(d){
// if (d == -4) { // if (d == -4) {
@ -430,7 +430,7 @@ export default {
} }
} else { } else {
if (d == -3) { if (d == -3) {
return 'black' return '#707070'
} else { } else {
return colorScale(d) return colorScale(d)
} }

Write Preview
Loading…
Cancel
Save