new

frontend/src/components/FeatureSpaceDetail.vue

@@ -297,10 +297,10 @@ export default {
             function ([index, feature]) {
               feature.value.forEach(function (element, indexIns) {
                 if (element.valueIns > 0) {
-                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#4393c3"})
+                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#33a02c"})
                 }
                 else {
-                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#d6604d"})
+                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#e31a1c"})
                 }
               })
         })
@@ -314,14 +314,13 @@ export default {
         
         var computeNodesVar = this.computeNodes
         var listofNodes = this.dataFS[0]
-        console.log(this.dataFS)
         var corrTarget = JSON.parse(this.dataFS[8+this.quadrantNumber])
         var corrGlob = JSON.parse(this.dataFS[13+this.quadrantNumber])
         var uniqueTarget = JSON.parse(this.dataFS[18+this.quadrantNumber])
         var VIFVar = JSON.parse(this.dataFS[23+this.quadrantNumber])
         var MIVar = JSON.parse(this.dataFS[28+this.quadrantNumber])
         MIVar = MIVar.concat(this.MIRemaining)
-        var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
+        var colorCateg = d3.scaleOrdinal(d3.schemeDark2)
 
         var corrTargetFormatted = []
         for (let i = 0; i < Object.keys(corrTarget).length; i++) {
@@ -403,8 +402,8 @@ export default {
         MIVar = MIVar.map(normalize(MIMin, MIMax))
 
         var colorsScaleNodes = d3.scaleOrdinal()
-          .domain(d3.ticks([MIMin, MIMax, 10]))
-          .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']);
+          .domain(d3.ticks([MIMin, MIMax, 5]))
+          .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']);
 
         var svg = d3.select("#FeatureGraph");
         svg.selectAll("*").remove();
@@ -440,6 +439,14 @@ export default {
           .data(graph.nodes)
           .enter().append('g')
           .on("click", 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.style.visibility = "hidden";
+              })
+            }
             var groupLoc = index + 1
             var items = document.getElementsByClassName(groupLoc)
             items.forEach( function (it) {
@@ -449,6 +456,18 @@ export default {
                 it.style.visibility = "hidden";
               }
             })
+            EventBus.$emit('brushLink', groupLoc-1)
+          })
+          .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.style.visibility = "hidden";
+              })
+            }
+            EventBus.$emit('brushLink', -1)
           });
 
         var paramGroups = [
@@ -637,7 +656,7 @@ export default {
                 //add zoom capabilities 
                 var zoom_handler = d3.zoom()
                     .on("zoom", zoom_actions);
-
+                
                 zoom_handler(svg); 
 
                 drawGraph();
@@ -653,7 +672,7 @@ export default {
 
                 //Zoom functions 
                 function zoom_actions(){
-                    svg.attr("transform", d3.event.transform)
+                  svg.attr("transform", d3.event.transform)
                 }
 
                 function drag_start(d) {

frontend/src/components/FeatureSpaceOverview.vue

@@ -65,17 +65,24 @@ export default {
   data () {
     return {
       colorsReceive: [],
+      activeLeaf: -1,
+      overallData: []
     }
   },
   methods: {
       reset () {
-        var svg = d3.select("#FeatureTree");
+        var svg = d3.select("#tree-container");
         svg.selectAll("*").remove();
       },
       // Get JSON data
       initializeRadialTree() {
-        
+
+        var svg = d3.select("#tree-container");
+        svg.selectAll("*").remove();   
+
         var features = this.colorsReceive
+        var activeLeafLoc = this.activeLeaf
+        var listofNodes = this.overallData[0]
 
         var featuresQuad1 = []
         var featuresQuad2 = []
@@ -323,10 +330,19 @@ export default {
           node.select('circle')
             .attr('r', NODE_DIAMETER * reduceZ())
             .style('fill', function(d) {
-                if(d.name == 'Data') {
+                if (d.name == 'Data') {
                   return d._children ? 'white' : 'white';
                 } else {
-                  return d._children ? HAS_CHILDREN_COLOR : '#D3D3D3';
+                  if (activeLeafLoc != -1) {
+                    if (d.name == listofNodes[activeLeafLoc]) {
+                      return d._children ? 'yellow' : 'yellow'
+                    }
+                    else {
+                      return d._children ? '#D3D3D3' : '#D3D3D3'
+                    }
+                  } else {
+                    return d._children ? '#D3D3D3' : '#D3D3D3'
+                  }
                 }
             }).attr('stroke', function(d) {
               if(d.name == 'Data') {
@@ -895,8 +911,14 @@ export default {
       }
     },
   mounted () {
+    EventBus.$on('quad', data => { this.overallData = data })
+
     EventBus.$on('overviewCall', data => { this.colorsReceive = data })
     EventBus.$on('overviewCall', this.initializeRadialTree)
+
+    EventBus.$on('brushLink', data => { this.activeLeaf = data })
+    EventBus.$on('brushLink', this.initializeRadialTree)
+
     EventBus.$on('reset', this.reset)
   }
 }

frontend/src/components/Main.vue

@@ -41,6 +41,17 @@
           </b-col>
         </b-row>
       <b-row class="md-3">
+           <b-col cols="6">
+            <mdb-card style="margin-top: 15px;">
+              <mdb-card-header color="primary-color" tag="h5" class="text-center">Final Predictive Results
+              </mdb-card-header>
+              <mdb-card-body>
+                <mdb-card-text class="text-center"  style="min-height: 234px">
+                  <Results/>
+                </mdb-card-text>
+              </mdb-card-body>
+            </mdb-card>
+          </b-col>
           <b-col cols="6">
             <mdb-card style="margin-top: 15px;">
               <mdb-card-header color="primary-color" tag="h5" class="text-center">Feature Selection Algorithms
@@ -52,17 +63,6 @@
                 </mdb-card-body>
             </mdb-card>
           </b-col>
-          <b-col cols="6">
-            <mdb-card style="margin-top: 15px;">
-              <mdb-card-header color="primary-color" tag="h5" class="text-center">Final Predictive Results
-              </mdb-card-header>
-              <mdb-card-body>
-                <mdb-card-text class="text-center"  style="min-height: 234px">
-                  <Results/>
-                </mdb-card-text>
-              </mdb-card-body>
-            </mdb-card>
-          </b-col>
         </b-row>
     </b-container>
   </body>

frontend/src/components/Results.vue

@@ -86,7 +86,7 @@ export default {
           pad: 5
         },
         xaxis: {
-          title: "Execution step",
+          title: "Step of feature engeering",
           gridcolor: "rgb(230,230,230)", 
           range: [1, 10], 
           showgrid: true,