+
-
@@ -76,7 +76,7 @@ export default {
colorsReceive: [],
activeLeaf: -1,
overallData: [],
- keepRoot: 1
+ keepRoot: 1,
}
},
methods: {
@@ -198,7 +198,7 @@ export default {
var MIN_ZOOM = 0.5; // minimum zoom allowed
var MAX_ZOOM = 10; // maximum zoom allowed
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 PAN_INC = 3; // pan 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
// Collapse all children of root's children before rendering
- // if (root.children) {
- // root.children.forEach(function(child) {
- // collapseTree(child);
- // });
- // }
+
+ root.children.forEach(function(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
@@ -345,10 +360,20 @@ export default {
.style('fill', function(d) {
if (d.name == 'Data') {
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 {
if (activeLeafLoc != -1) {
if (d.name == listofNodes[activeLeafLoc]) {
- return d._children ? 'black' : 'black'
+ return d._children ? '#707070' : '#707070'
}
else {
return d._children ? '#D3D3D3' : '#D3D3D3'
@@ -361,13 +386,13 @@ export default {
if(d.name == 'Data') {
return d.selected ? SELECTED_COLOR : 'white';
} else {
- return d.selected ? SELECTED_COLOR : 'black';
+ return d.selected ? SELECTED_COLOR : '#D3D3D3';
}
}).attr('stroke-width', function(d) {
if(d.name == 'Data') {
return d.selected ? 0 : 0;
} 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 {
return d.selected ? 0 : 0;
}
@@ -572,7 +597,7 @@ export default {
d3.event.preventDefault();
var pathelms = document.querySelectorAll('#selection .nodepath');
for (var i = 0; i < pathelms.length; i++) {
- pathelms[i].classList.remove('highlight');
+ //pathelms[i].classList.remove('highlight');
}
var target = d3.event.target;
var node = curPath[+target.dataset.sel];
@@ -953,7 +978,8 @@ export default {
legend.append('rect')
.attr('width', 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')
.attr('class', 'legendLab')
@@ -963,7 +989,6 @@ export default {
}
},
mounted () {
-
EventBus.$on('keepRootFun', data => { this.keepRoot = data })
EventBus.$on('quad', data => { this.overallData = data })
@@ -1080,7 +1105,7 @@ svg {
-o-transform: rotate(270deg);
width: 100px;
text-align: center;
- margin-top: -10px;
+ margin-top: -6px;
margin-left: -38px;
}
#help a {
@@ -1123,4 +1148,24 @@ svg {
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;
+}
+
\ No newline at end of file
diff --git a/frontend/src/components/Heatmap.vue b/frontend/src/components/Heatmap.vue
index ea83b36..d7d1684 100644
--- a/frontend/src/components/Heatmap.vue
+++ b/frontend/src/components/Heatmap.vue
@@ -368,7 +368,7 @@ export default {
.style("fill", function(d) {
if (d == -1) return "url(#diagonalHatch)"
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 return colorScale(d)
})
@@ -396,7 +396,7 @@ export default {
EventBus.$emit('addFeature', featuresAddRem)
return 'yellow'
} else if (d == -3) {
- return 'black'
+ return '#707070'
} else if (d == -4) {
// svg.selectAll("rect").each(function(d){
// if (d == -4) {
@@ -430,7 +430,7 @@ export default {
}
} else {
if (d == -3) {
- return 'black'
+ return '#707070'
} else {
return colorScale(d)
}