new

frontend/src/components/FeatureSpaceDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <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: 3px; 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 class="panel panel-default" data-placement="center">
             <div class="panel-body" id="resetAllFilters" data-placement="center" style="margin-top: -20px">
@@ -102,6 +102,7 @@ export default {
       this.graphVizualization()
     },
     computeOnce () {  
+        var numberOfTransformations = 4 // change that
 
         var listofNodes = this.dataFS[34]
         var dataLocOnce = []
@@ -109,6 +110,8 @@ export default {
           dataLocOnce.push(JSON.parse(this.dataFS[loop+2]))
         }
 
+        var featureNames = JSON.parse(this.dataFS[35])
+
         var pushEach
         var oldVal
         var newVal
@@ -124,14 +127,15 @@ export default {
           var pushEachFinal = []
 
           this.dataFSTrans.forEach(function(element, index) {
-              var round = element.round
-              round = JSON.parse(round[loop-1])
+
+              var transf1 = element.transf1
+              transf1 = JSON.parse(transf1[loop-1])
               oldVal = 0
               newVal = 0
               outcome = 0
               countLoc = 0
               pushEach = []
-              Object.entries(round).forEach(
+              Object.entries(transf1).forEach(
               function ([feature, value]) {
                 var key = Object.keys(value)
                 var retrieveData = dataLocOnce[loop-1]
@@ -143,15 +147,15 @@ export default {
               oldVal = oldVal / listofNodes.length
               newVal = newVal / listofNodes.length
               outcome = oldVal - newVal
-              pushEach.push({keyIns: "r", valueIns: outcome})
+              pushEach.push({keyIns: featureNames[(index)*numberOfTransformations+0], valueIns: outcome})
 
-              var roundLogE = element.roundLogE
-              roundLogE = JSON.parse(roundLogE[loop-1])
+              var transf2 = element.transf2
+              transf2 = JSON.parse(transf2[loop-1])
               oldVal = 0
               newVal = 0
               outcome = 0
               countLoc = 0
-              Object.entries(roundLogE).forEach(
+              Object.entries(transf2).forEach(
               function ([feature, value]) {
                 var key = Object.keys(value)
                 var retrieveData = dataLocOnce[loop-1]
@@ -163,15 +167,15 @@ export default {
               oldVal = oldVal / listofNodes.length
               newVal = newVal / listofNodes.length
               outcome = oldVal - newVal
-              pushEach.push({keyIns: "r_E", valueIns: outcome})
+              pushEach.push({keyIns: featureNames[(index)*numberOfTransformations+1], valueIns: outcome})
 
-              var roundLog2 = element.roundLog2
-              roundLog2 = JSON.parse(roundLog2[loop-1])
+              var transf3 = element.transf3
+              transf3 = JSON.parse(transf3[loop-1])
               oldVal = 0
               newVal = 0
               outcome = 0
               countLoc = 0
-              Object.entries(roundLog2).forEach(
+              Object.entries(transf3).forEach(
               function ([feature, value]) {
                 var key = Object.keys(value)
                 var retrieveData = dataLocOnce[loop-1]
@@ -183,15 +187,15 @@ export default {
               oldVal = oldVal / listofNodes.length
               newVal = newVal / listofNodes.length
               outcome = oldVal - newVal
-              pushEach.push({keyIns: "r_2", valueIns: outcome})
+              pushEach.push({keyIns: featureNames[(index)*numberOfTransformations+2], valueIns: outcome})
 
-              var roundLog10 = element.roundLog10
-              roundLog10 = JSON.parse(roundLog10[loop-1])
+              var transf4 = element.transf4
+              transf4 = JSON.parse(transf4[loop-1])
               oldVal = 0
               newVal = 0
               outcome = 0
               countLoc = 0
-              Object.entries(roundLog10).forEach(
+              Object.entries(transf4).forEach(
               function ([feature, value]) {
                 var key = Object.keys(value)
                 var retrieveData = dataLocOnce[loop-1]
@@ -203,7 +207,7 @@ export default {
               oldVal = oldVal / listofNodes.length
               newVal = newVal / listofNodes.length
               outcome = oldVal - newVal
-              pushEach.push({keyIns: "r_10", valueIns: outcome})
+              pushEach.push({keyIns: featureNames[(index)*numberOfTransformations+3], valueIns: outcome})
               pushEachFinal.push({key: listofNodes[index], value: pushEach})
             })
             pushEachFinalFinal.push(pushEachFinal)
@@ -213,10 +217,14 @@ export default {
 
       },
       initializeNetwork () {   
+        var numberOfTransformations = 4 // change that
+
+        var featureNames = JSON.parse(this.dataFS[35])
+
         this.jsonData = []
         var threshLoc = this.threshold
 
-        this.corrMatrixComb = []
+        this.corrMatrixComb = [] 
         this.corrMatrixCombTotal = []
         this.VIFRemaining = []
         this.MIRemaining = []
@@ -238,18 +246,18 @@ export default {
         var MIRemainingLoc = []
 
         this.dataFSTrans.forEach(function(element, index) {
-          var round = element.round
-          corrMatrixCombLoc.push(Object.values(JSON.parse(round[5+quadrantNumberLocal])))
-          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(round[10+quadrantNumberLocal]))[0] * 100)
-          VIFRemainingLoc.push(Object.values(JSON.parse(round[15+quadrantNumberLocal]))[0])
-          MIRemainingLoc.push(JSON.parse(round[20+quadrantNumberLocal]))
-          round = JSON.parse(round[quadrantNumberLocal])
+          var transf1 = element.transf1
+          corrMatrixCombLoc.push(Object.values(JSON.parse(transf1[5+quadrantNumberLocal])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(transf1[10+quadrantNumberLocal]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(transf1[15+quadrantNumberLocal]))[0])
+          MIRemainingLoc.push(JSON.parse(transf1[20+quadrantNumberLocal]))
+          transf1 = JSON.parse(transf1[quadrantNumberLocal])
           oldVal = 0
           newVal = 0
           outcome = 0
           countLoc = 0
           pushEach = []
-          Object.entries(round).forEach(
+          Object.entries(transf1).forEach(
           function ([feature, value]) {
             var key = Object.keys(value)
             var search = Object.values(dataLoc[key])
@@ -260,19 +268,19 @@ export default {
           oldVal = oldVal / listofNodes.length
           newVal = newVal / listofNodes.length
           outcome = oldVal - newVal
-          pushEach.push({keyIns: "r", valueIns: outcome})
-
-          var roundLogE = element.roundLogE
-          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[5+quadrantNumberLocal])))
-          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLogE[10+quadrantNumberLocal]))[0] * 100)
-          VIFRemainingLoc.push(Object.values(JSON.parse(roundLogE[15+quadrantNumberLocal]))[0])
-          MIRemainingLoc.push(JSON.parse(roundLogE[20+quadrantNumberLocal]))
-          roundLogE = JSON.parse(roundLogE[quadrantNumberLocal])
+          pushEach.push({keyIns: featureNames[(index)*numberOfTransformations+0], valueIns: outcome})
+
+          var transf2 = element.transf2
+          corrMatrixCombLoc.push(Object.values(JSON.parse(transf2[5+quadrantNumberLocal])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(transf2[10+quadrantNumberLocal]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(transf2[15+quadrantNumberLocal]))[0])
+          MIRemainingLoc.push(JSON.parse(transf2[20+quadrantNumberLocal]))
+          transf2 = JSON.parse(transf2[quadrantNumberLocal])
           oldVal = 0
           newVal = 0
           outcome = 0
           countLoc = 0
-          Object.entries(roundLogE).forEach(
+          Object.entries(transf2).forEach(
           function ([feature, value]) {
             var key = Object.keys(value)
             var search = Object.values(dataLoc[key])
@@ -283,19 +291,19 @@ export default {
           oldVal = oldVal / listofNodes.length
           newVal = newVal / listofNodes.length
           outcome = oldVal - newVal
-          pushEach.push({keyIns: "r_E", valueIns: outcome})
-
-          var roundLog2 = element.roundLog2
-          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[5+quadrantNumberLocal])))
-          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog2[10+quadrantNumberLocal]))[0] * 100)
-          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog2[15+quadrantNumberLocal]))[0])
-          MIRemainingLoc.push(JSON.parse(roundLog2[20+quadrantNumberLocal]))
-          roundLog2 = JSON.parse(roundLog2[quadrantNumberLocal])
+          pushEach.push({keyIns: featureNames[(index)*numberOfTransformations+1], valueIns: outcome})
+
+          var transf3 = element.transf3
+          corrMatrixCombLoc.push(Object.values(JSON.parse(transf3[5+quadrantNumberLocal])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(transf3[10+quadrantNumberLocal]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(transf3[15+quadrantNumberLocal]))[0])
+          MIRemainingLoc.push(JSON.parse(transf3[20+quadrantNumberLocal]))
+          transf3 = JSON.parse(transf3[quadrantNumberLocal])
           oldVal = 0
           newVal = 0
           outcome = 0
           countLoc = 0
-          Object.entries(roundLog2).forEach(
+          Object.entries(transf3).forEach(
           function ([feature, value]) {
             var key = Object.keys(value)
             var search = Object.values(dataLoc[key])
@@ -306,19 +314,19 @@ export default {
           oldVal = oldVal / listofNodes.length
           newVal = newVal / listofNodes.length
           outcome = oldVal - newVal
-          pushEach.push({keyIns: "r_2", valueIns: outcome})
-
-          var roundLog10 = element.roundLog10
-          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[5+quadrantNumberLocal])))
-          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog10[10+quadrantNumberLocal]))[0] * 100)
-          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog10[15+quadrantNumberLocal]))[0])
-          MIRemainingLoc.push(JSON.parse(roundLog10[20+quadrantNumberLocal]))
-          roundLog10 = JSON.parse(roundLog10[quadrantNumberLocal])
+          pushEach.push({keyIns: featureNames[(index)*numberOfTransformations+2], valueIns: outcome})
+
+          var transf4 = element.transf4
+          corrMatrixCombLoc.push(Object.values(JSON.parse(transf4[5+quadrantNumberLocal])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(transf4[10+quadrantNumberLocal]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(transf4[15+quadrantNumberLocal]))[0])
+          MIRemainingLoc.push(JSON.parse(transf4[20+quadrantNumberLocal]))
+          transf4 = JSON.parse(transf4[quadrantNumberLocal])
           oldVal = 0
           newVal = 0
           outcome = 0
           countLoc = 0
-          Object.entries(roundLog10).forEach(
+          Object.entries(transf4).forEach(
           function ([feature, value]) {
             var key = Object.keys(value)
             var search = Object.values(dataLoc[key])
@@ -329,7 +337,7 @@ export default {
           oldVal = oldVal / listofNodes.length
           newVal = newVal / listofNodes.length
           outcome = oldVal - newVal
-          pushEach.push({keyIns: "r_10", valueIns: outcome})
+          pushEach.push({keyIns: featureNames[(index)*numberOfTransformations+3], valueIns: outcome})
           pushEachFinal.push({key: listofNodes[index], value: pushEach})
           })
 
@@ -360,14 +368,16 @@ export default {
         })
 
         groupID = 0
+        var featureNumber = 0
         listofNodes.forEach( function(element) {
           groupID++
           nodes.push(
-            {"name": "r", "group": groupID, "active": false},
-            {"name": "r_E", "group": groupID, "active": false},
-            {"name": "r_2", "group": groupID, "active": false},
-            {"name": "r_10", "group": groupID, "active": false},
+            {"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},
           )
+          featureNumber++
         })
 
         Object.entries(pushEachFinal).forEach(
@@ -528,92 +538,104 @@ export default {
           .data(graph.nodes)
           .enter().append('g')
           .on("click", function(id, index) { 
+            // This is for transformation
             if (modeLoc == 0) {
-              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.28) 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
-                }
-              }
-
-              node.selectAll('text').remove();
-
-              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.append('title').text(function (d) { return d.name; });
+              var clickedNode = document.getElementById('svg'+index).getAttribute('class')
+              if (!clickedNode.includes("root")) {
+                var clearSendNode = []
+                clearSendNode.push(id.name)
+                clearSendNode.push(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(""))
+                  var items = document.getElementsByClassName(numb)
 
-              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 {
+                  items.forEach( function (it) {
                     it.childNodes[0].style.visibility = "hidden";
                     it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.28) 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++) {
+                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.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "black"
+                  }
+                }
+
+                node.selectAll('text').remove();
+
+                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.append('title').text(function (d) { return d.name; });
 
-                if (graph.nodes[i].group == matches) {
-                  graph.nodes[i].active = true
+                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.28) 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++) {
+
+                  if (graph.nodes[i].group == matches) {
+                    graph.nodes[i].active = true
+                  }
                 }
-              }
 
-              node.selectAll('text').remove();
+                node.selectAll('text').remove();
 
-              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.append('title').text(function (d) { return d.name; });
-              EventBus.$emit('brushLink', groupLoc-1)
+                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.append('title').text(function (d) { return d.name; });
+                EventBus.$emit('brushLink', groupLoc-1)
+              }
             } else {
               var groupsColor = d3.select('#svg'+index)._groups['0'][0].childNodes[0].childNodes[1]
               var regex = /\d+/g
               var idLocal = parseInt(d3.select('#svg'+index)._groups['0'][0].getAttribute("id").match(regex))
-              if (groupsColor.getAttribute('fill') == "black") {
+              if (groupsColor.getAttribute('fill') == "#D3D3D3") {
                 if (selectionCounter < 3) {
                   // add here the different states of comparison! (=2 and =3)
-                  groupsColor.setAttribute('fill', '#D3D3D3')
+                  groupsColor.setAttribute('fill', '#black')
                   selectionCounter = selectionCounter + 1
                   EventBus.$emit('Counter', selectionCounter)
                   IDsGather.push(idLocal);
@@ -627,7 +649,7 @@ export default {
                   }
                 }
               } else {
-                groupsColor.setAttribute('fill', 'black')
+                groupsColor.setAttribute('fill', '#D3D3D3')
                 selectionCounter = selectionCounter - 1
                 EventBus.$emit('Counter', selectionCounter)
                 var index = IDsGather.indexOf(idLocal);
@@ -666,6 +688,8 @@ export default {
 
               if (graph.nodes[i].group == matches) {
                 graph.nodes[i].active = false
+              } else {
+                document.getElementById('svg'+index).childNodes[0].childNodes[1].style.fill = "#D3D3D3"
               }
             }
 
@@ -815,9 +839,9 @@ export default {
               var data = []
               var barchartData = []
               if (IDsGather.includes(indexNode)) {
-                data.push({value: VIFVarFormatted[indexNode], color: '#D3D3D3'})
-              } else {
                 data.push({value: VIFVarFormatted[indexNode], color: 'black'})
+              } else {
+                data.push({value: VIFVarFormatted[indexNode], color: '#D3D3D3'})
               }
               data.push({value: corrGlobFormatted[indexNode], color: colorsScaleNodes(MIVar[indexNode])})
 
@@ -1076,7 +1100,7 @@ export default {
                   var binaryBarLegend = []
                   var exemplaryValues = [25, 75]
 
-                  dataLegend.push({value: 25, color: 'black'})
+                  dataLegend.push({value: 25, color: '#D3D3D3'})
                   dataLegend.push({value: 50, color: '#6baed6'})
 
                   for(let k = 0; k < 2; k++) {
@@ -1203,7 +1227,7 @@ export default {
                   textLine.append('line')
                     .style("stroke", "black")
                     .style("stroke-width", 3)
-                    .attr("x1", 35 + marginBorderX)
+                    .attr("x1", 36 + marginBorderX)
                     .attr("y1", 50 - marginBorder)
                     .attr("x2", 74 + marginBorderX)
                     .attr("y2", 50 - marginBorder)

frontend/src/components/FeatureSpaceOverview.vue

@@ -106,48 +106,48 @@ export default {
         for (let i = 0; i < features[4].length; i++) {
           featuresQuad1.push({"name": features[0][i].key,
             "children": [  
-              {"name": "r", "lin_color": features[0][i].value[0].valueIns},
-              {"name": "r_E", "lin_color": features[0][i].value[1].valueIns},
-              {"name": "r_2", "lin_color": features[0][i].value[2].valueIns},
-              {"name": "r_10", "lin_color": features[0][i].value[3].valueIns},
+              {"name": features[0][i].value[0].keyIns, "lin_color": features[0][i].value[0].valueIns},
+              {"name": features[0][i].value[1].keyIns, "lin_color": features[0][i].value[1].valueIns},
+              {"name": features[0][i].value[2].keyIns, "lin_color": features[0][i].value[2].valueIns},
+              {"name": features[0][i].value[3].keyIns, "lin_color": features[0][i].value[3].valueIns},
             ],
-            "lin_color": features[0][i].value[0].valueIns+features[0][i].value[1].valueIns+features[0][i].value[3].valueIns+features[0][i].value[3].valueIns
+            "lin_color": features[0][i].value[0].valueIns+features[0][i].value[1].valueIns+features[0][i].value[2].valueIns+features[0][i].value[3].valueIns
             })
           featuresQuad2.push({"name": features[1][i].key,
             "children": [  
-              {"name": "r", "lin_color": features[1][i].value[0].valueIns},
-              {"name": "r_E", "lin_color": features[1][i].value[1].valueIns},
-              {"name": "r_2", "lin_color": features[1][i].value[2].valueIns},
-              {"name": "r_10", "lin_color": features[1][i].value[3].valueIns},
+              {"name": features[1][i].value[0].keyIns, "lin_color": features[1][i].value[0].valueIns},
+              {"name": features[1][i].value[1].keyIns, "lin_color": features[1][i].value[1].valueIns},
+              {"name": features[1][i].value[2].keyIns, "lin_color": features[1][i].value[2].valueIns},
+              {"name": features[1][i].value[3].keyIns, "lin_color": features[1][i].value[3].valueIns},
             ],
-            "lin_color": features[1][i].value[0].valueIns+features[1][i].value[1].valueIns+features[1][i].value[3].valueIns+features[1][i].value[3].valueIns
+            "lin_color": features[1][i].value[0].valueIns+features[1][i].value[1].valueIns+features[1][i].value[2].valueIns+features[1][i].value[3].valueIns
             })
           featuresQuad3.push({"name": features[2][i].key,
             "children": [  
-              {"name": "r", "lin_color": features[2][i].value[0].valueIns},
-              {"name": "r_E", "lin_color": features[2][i].value[1].valueIns},
-              {"name": "r_2", "lin_color": features[2][i].value[2].valueIns},
-              {"name": "r_10", "lin_color": features[2][i].value[3].valueIns},
+              {"name": features[2][i].value[0].keyIns, "lin_color": features[2][i].value[0].valueIns},
+              {"name": features[2][i].value[1].keyIns, "lin_color": features[2][i].value[1].valueIns},
+              {"name": features[2][i].value[2].keyIns, "lin_color": features[2][i].value[2].valueIns},
+              {"name": features[2][i].value[3].keyIns, "lin_color": features[2][i].value[3].valueIns},
             ],
-            "lin_color": features[2][i].value[0].valueIns+features[2][i].value[1].valueIns+features[2][i].value[3].valueIns+features[2][i].value[3].valueIns
+            "lin_color": features[2][i].value[0].valueIns+features[2][i].value[1].valueIns+features[2][i].value[2].valueIns+features[2][i].value[3].valueIns
             })
           featuresQuad4.push({"name": features[3][i].key,
             "children": [  
-              {"name": "r", "lin_color": features[3][i].value[0].valueIns},
-              {"name": "r_E", "lin_color": features[3][i].value[1].valueIns},
-              {"name": "r_2", "lin_color": features[3][i].value[2].valueIns},
-              {"name": "r_10", "lin_color": features[3][i].value[3].valueIns},
+              {"name": features[3][i].value[0].keyIns, "lin_color": features[3][i].value[0].valueIns},
+              {"name": features[3][i].value[1].keyIns, "lin_color": features[3][i].value[1].valueIns},
+              {"name": features[3][i].value[2].keyIns, "lin_color": features[3][i].value[2].valueIns},
+              {"name": features[3][i].value[3].keyIns, "lin_color": features[3][i].value[3].valueIns},
             ],
-            "lin_color": features[3][i].value[0].valueIns+features[3][i].value[1].valueIns+features[3][i].value[3].valueIns+features[3][i].value[3].valueIns
+            "lin_color": features[3][i].value[0].valueIns+features[3][i].value[1].valueIns+features[3][i].value[2].valueIns+features[3][i].value[3].valueIns
             })
           featuresQuad5.push({"name": features[4][i].key,
             "children": [  
-              {"name": "r", "lin_color": features[4][i].value[0].valueIns},
-              {"name": "r_E", "lin_color": features[4][i].value[1].valueIns},
-              {"name": "r_2", "lin_color": features[4][i].value[2].valueIns},
-              {"name": "r_10", "lin_color": features[4][i].value[3].valueIns},
+              {"name": features[4][i].value[0].keyIns, "lin_color": features[4][i].value[0].valueIns},
+              {"name": features[4][i].value[1].keyIns, "lin_color": features[4][i].value[1].valueIns},
+              {"name": features[4][i].value[2].keyIns, "lin_color": features[4][i].value[2].valueIns},
+              {"name": features[4][i].value[3].keyIns, "lin_color": features[4][i].value[3].valueIns},
             ],
-            "lin_color": features[4][i].value[0].valueIns+features[4][i].value[1].valueIns+features[4][i].value[3].valueIns+features[4][i].value[3].valueIns
+            "lin_color": features[4][i].value[0].valueIns+features[4][i].value[1].valueIns+features[4][i].value[2].valueIns+features[4][i].value[3].valueIns
             })
         }
         
@@ -214,7 +214,7 @@ export default {
         // current pan, zoom, and rotation
         var curX = width / 2;
         var curY = height / 2;
-        var curZ = 1.28; // current zoom
+        var curZ = 1.22; // current zoom
         var curR = 270; // current rotation
 
         // keyboard key codes
@@ -348,7 +348,7 @@ export default {
                 } else {
                   if (activeLeafLoc != -1) {
                     if (d.name == listofNodes[activeLeafLoc]) {
-                      return d._children ? 'yellow' : 'yellow'
+                      return d._children ? 'black' : 'black'
                     }
                     else {
                       return d._children ? '#D3D3D3' : '#D3D3D3'

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 "#D3D3D3"
+              else if (d == -3) return "black"
               else if (d == -4) return "url(#diagonalHatch)"
               else return colorScale(d)
           })
@@ -394,7 +394,7 @@ export default {
                     EventBus.$emit('addFeature', featuresAddRem)
                     return 'yellow'
                   } else if (d == -3) {
-                    return '#D3D3D3'
+                    return 'black'
                   } else if (d == -4) {
                     // svg.selectAll("rect").each(function(d){
                     //   if (d == -4) {
@@ -424,7 +424,7 @@ export default {
                 }
               } else {
                 if (d == -3) {
-                  return '#D3D3D3'
+                  return 'black'
                 } else {
                   return colorScale(d)
                 }

frontend/src/components/Main.vue

@@ -104,6 +104,7 @@ export default Vue.extend({
   },
   data () {
     return {
+      storeDataTransf: [],
       compareNumber: 0,
       IDToCompare: [],
       ImportanceCompare: [],
@@ -601,6 +602,29 @@ export default Vue.extend({
         console.log(error)
       })
   },
+  transformNodesFun () {
+    const path = `http://127.0.0.1:5000/data/transformation`
+    const postData = {
+      nameClicked: this.storeDataTransf,
+      removeNode: this.storeDataTransf
+    }
+    const axiosConfig = { 
+      headers: {
+        'Content-Type': 'application/json',
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
+        'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS'
+      }
+    }
+    axios.post(path, postData, axiosConfig)
+      .then(response => {
+        console.log('Features transformation active!')
+        this.threshold()
+      })
+      .catch(error => {
+        console.log(error)
+    })
+  }
   },
   created () {
 
@@ -705,6 +729,9 @@ export default Vue.extend({
     EventBus.$on('addFeatureGen', data => { this.featureAddRemGen = data })
     EventBus.$on('addFeatureGen', this.ManipulFeatureGen)
 
+    EventBus.$on('transformNodes', data => { this.storeDataTransf = data })
+    EventBus.$on('transformNodes', this.transformNodesFun)
+
     //Prevent double click to search for a word. 
     document.addEventListener('mousedown', function (event) {
       if (event.detail > 1) {

run.py

@@ -122,7 +122,13 @@ def reset():
 
     global columnsNewGen
     columnsNewGen = []
+
+    global columnsNames
+    columnsNames = []
     
+    global listofTransformations
+    listofTransformations = ["r","rE","r2","r10"]
+
     return 'The reset was done!'
 
 # retrieve data from client and select the correct data set
@@ -226,6 +232,12 @@ def retrieveFileName():
     global columnsNewGen
     columnsNewGen = []
 
+    global columnsNames
+    columnsNames = []
+
+    global listofTransformations
+    listofTransformations = ["r","rE","r2","r10"]
+
     DataRawLength = -1
     DataRawLengthTest = -1
     data = json.loads(fileName)  
@@ -315,7 +327,9 @@ def sendToServerData():
     global XDataStored, yDataStored
     XDataStored = XData.copy()
     yDataStored = yData.copy()
-    
+
+    global XDataStoredOriginal
+    XDataStoredOriginal = XData.copy()
     return 'Processed uploaded data set'
 
 def dataSetSelection():
@@ -414,9 +428,12 @@ def dataSetSelection():
     XDataStored = XData.copy()
     yDataStored = yData.copy()
 
+    global XDataStoredOriginal
+    XDataStoredOriginal = XData.copy()
+
     warnings.simplefilter('ignore')
 
-    executeModel([], 0)
+    executeModel([], 0, '')
     
     return 'Everything is okay'
 
@@ -431,7 +448,7 @@ def create_global_function():
         return np.mean(result['test_score'])
 
 # check this issue later because we are not getting the same results
-def executeModel(exeCall, flagEx):
+def executeModel(exeCall, flagEx, nodeTransfName):
 
     global keyFirstTime
     global estimator
@@ -442,6 +459,9 @@ def executeModel(exeCall, flagEx):
     global XDataStored
     global previousState
     global columnsNewGen
+    global columnsNames
+    global listofTransformations
+    columnsNames = []
     scores = []
 
     if (len(exeCall) == 0):
@@ -450,7 +470,10 @@ def executeModel(exeCall, flagEx):
         else:
             XData = XDataStored.copy()
     else:
-        XData = XDataStored.copy()
+        if (flagEx == 4):
+            XDataStored = XData.copy()
+        else:    
+            XData = XDataStored.copy()
     columnsNewGen = keepOriginalFeatures.columns.values.tolist()
 
     # Bayesian Optimization for 150 iterations
@@ -475,7 +498,38 @@ def executeModel(exeCall, flagEx):
 
             XDataTemp = XDataGen[columnsKeepNew]
             XData[columnsKeepNew] = XDataTemp.values
-    print(XData)
+        elif (flagEx == 4):
+            splittedCol = nodeTransfName.split('_')
+            XData.rename(columns={ XData.columns[exeCall[0]]: nodeTransfName }, inplace = True)
+            if (len(splittedCol) == 1):
+                XData[nodeTransfName] = XDataStoredOriginal[nodeTransfName]
+            else:
+                if (splittedCol[1] == 'r'):
+                    XData[nodeTransfName] = XData[nodeTransfName].round()
+                elif (splittedCol[1] == 'rE'):
+                    XData[nodeTransfName] = np.log(XData[nodeTransfName])
+                    XData[nodeTransfName] = XData[nodeTransfName].round()
+                elif (splittedCol[1] == 'r2'):
+                    XData[nodeTransfName] = np.log2(XData[nodeTransfName])
+                    XData[nodeTransfName] = XData[nodeTransfName].round()
+                else:
+                    XData[nodeTransfName] = np.log10(XData[nodeTransfName])
+                    XData[nodeTransfName] = XData[nodeTransfName].round()
+    print(XData)       
+    columnsNamesLoc = XData.columns.values.tolist()
+
+    for col in columnsNamesLoc:
+        splittedCol = col.split('_')
+        if (len(splittedCol) == 1):
+            for tran in listofTransformations:
+                columnsNames.append(splittedCol[0]+'_'+tran)
+        else:
+            for tran in listofTransformations:
+                if (splittedCol[1] == tran):
+                    columnsNames.append(splittedCol[0])
+                else:
+                    columnsNames.append(splittedCol[0]+'_'+tran)
+    print(columnsNames)
     featureImportanceData = estimatorFeatureSelection(XData, estimator)
     estimator.fit(XData, yData)
     yPredict = estimator.predict(XData)
@@ -597,54 +651,92 @@ def sendFinalResults():
 
 def Transformation(quadrant1, quadrant2, quadrant3, quadrant4, quadrant5):
 
-    XDataNumeric = XData.select_dtypes(include='number')
+    XDataNumericColumn = XDataStored.select_dtypes(include='number')
+    XDataNumeric = XDataStoredOriginal.select_dtypes(include='number')
 
-    columns = list(XDataNumeric)   
+    columns = list(XDataNumericColumn)   
 
     global packCorrTransformed
     packCorrTransformed = []
-
+    # FIX THAT!
     for count, i in enumerate(columns): 
         dicTransf = {}
         
-        d={}
-        XDataNumericCopy = XDataNumeric.copy()
-        XDataNumericCopy[i] = XDataNumericCopy[i].round()
-        for number in range(1,6):
-            quadrantVariable = str('quadrant%s' % number)
-            illusion = locals()[quadrantVariable]
-            d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
-        dicTransf["round"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
-
-        d={}
-        XDataNumericCopy = XDataNumeric.copy()
-        XDataNumericCopy[i] = np.log(XDataNumericCopy[i])
-        XDataNumericCopy[i] = XDataNumericCopy[i].round()
-        for number in range(1,6):
-            quadrantVariable = str('quadrant%s' % number)
-            illusion = locals()[quadrantVariable]
-            d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
-        dicTransf["roundLogE"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
-
-        d={}
-        XDataNumericCopy = XDataNumeric.copy()
-        XDataNumericCopy[i] = np.log2(XDataNumericCopy[i])
-        XDataNumericCopy[i] = XDataNumericCopy[i].round()
-        for number in range(1,6):
-            quadrantVariable = str('quadrant%s' % number)
-            illusion = locals()[quadrantVariable]
-            d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
-        dicTransf["roundLog2"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
-
-        d={}
-        XDataNumericCopy = XDataNumeric.copy()
-        XDataNumericCopy[i] = np.log10(XDataNumericCopy[i])
-        XDataNumericCopy[i] = XDataNumericCopy[i].round()
-        for number in range(1,6):
-            quadrantVariable = str('quadrant%s' % number)
-            illusion = locals()[quadrantVariable]
-            d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
-        dicTransf["roundLog10"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
+        splittedCol = columnsNames[(count)*len(listofTransformations)+0]
+        if(len(splittedCol) == 1):
+            d={}
+            XDataNumericCopy = XDataNumeric.copy()
+            for number in range(1,6):
+                quadrantVariable = str('quadrant%s' % number)
+                illusion = locals()[quadrantVariable]
+                d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
+            dicTransf["transf1"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
+        else:
+            d={}
+            XDataNumericCopy = XDataNumeric.copy()
+            XDataNumericCopy[i] = XDataNumericCopy[i].round()
+            for number in range(1,6):
+                quadrantVariable = str('quadrant%s' % number)
+                illusion = locals()[quadrantVariable]
+                d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
+            dicTransf["transf1"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)          
+        splittedCol = columnsNames[(count)*len(listofTransformations)+1]
+        if(len(splittedCol) == 1):
+            d={}
+            XDataNumericCopy = XDataNumeric.copy()
+            for number in range(1,6):
+                quadrantVariable = str('quadrant%s' % number)
+                illusion = locals()[quadrantVariable]
+                d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
+            dicTransf["transf2"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
+        else:
+            d={}
+            XDataNumericCopy = XDataNumeric.copy()
+            XDataNumericCopy[i] = np.log(XDataNumericCopy[i])
+            XDataNumericCopy[i] = XDataNumericCopy[i].round()
+            for number in range(1,6):
+                quadrantVariable = str('quadrant%s' % number)
+                illusion = locals()[quadrantVariable]
+                d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
+            dicTransf["transf2"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
+        splittedCol = columnsNames[(count)*len(listofTransformations)+2]
+        if(len(splittedCol) == 1):
+            d={}
+            XDataNumericCopy = XDataNumeric.copy()
+            for number in range(1,6):
+                quadrantVariable = str('quadrant%s' % number)
+                illusion = locals()[quadrantVariable]
+                d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
+            dicTransf["transf3"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
+        else:
+            d={}
+            XDataNumericCopy = XDataNumeric.copy()
+            XDataNumericCopy[i] = np.log2(XDataNumericCopy[i])
+            XDataNumericCopy[i] = XDataNumericCopy[i].round()
+            for number in range(1,6):
+                quadrantVariable = str('quadrant%s' % number)
+                illusion = locals()[quadrantVariable]
+                d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
+            dicTransf["transf3"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
+        splittedCol = columnsNames[(count)*len(listofTransformations)+3]
+        if(len(splittedCol) == 1):
+            d={}
+            XDataNumericCopy = XDataNumeric.copy()
+            for number in range(1,6):
+                quadrantVariable = str('quadrant%s' % number)
+                illusion = locals()[quadrantVariable]
+                d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
+            dicTransf["transf4"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
+        else:
+            d={}
+            XDataNumericCopy = XDataNumeric.copy()
+            XDataNumericCopy[i] = np.log10(XDataNumericCopy[i])
+            XDataNumericCopy[i] = XDataNumericCopy[i].round()
+            for number in range(1,6):
+                quadrantVariable = str('quadrant%s' % number)
+                illusion = locals()[quadrantVariable]
+                d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
+            dicTransf["transf4"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
         packCorrTransformed.append(dicTransf)
 
     return 'Everything Okay'
@@ -1164,6 +1256,7 @@ def Seperation():
 
     packCorr.append(list(XDataStored.columns.values.tolist()))
     packCorr.append(list(XData.columns.values.tolist()))
+    packCorr.append(json.dumps(columnsNames))
 
     return 'Everything Okay'
 
@@ -1203,7 +1296,7 @@ def ManipulFeat():
     featureProcess = request.get_data().decode('utf8').replace("'", '"')
     featureProcess = json.loads(featureProcess)
     featureProcessExtract = featureProcess['featureAddRem']
-    executeModel(featureProcessExtract, 1)
+    executeModel(featureProcessExtract, 1, '')
     return 'Okay'
 
 @cross_origin(origin='localhost',headers=['Content-Type','Authorization'])
@@ -1212,7 +1305,7 @@ def ManipulFeatGen():
     featureProcess = request.get_data().decode('utf8').replace("'", '"')
     featureProcess = json.loads(featureProcess)
     featureProcessExtract = featureProcess['featureAddRemGen']
-    executeModel(featureProcessExtract, 2)
+    executeModel(featureProcessExtract, 2, '')
     return 'Okay'
 
 @cross_origin(origin='localhost',headers=['Content-Type','Authorization'])
@@ -1314,5 +1407,15 @@ def CompareFunPy():
 @cross_origin(origin='localhost',headers=['Content-Type','Authorization'])
 @app.route('/data/storeGeneratedFeatures', methods=["GET", "POST"])
 def storeGeneratedFeat():
-    executeModel([], 3)
+    executeModel([], 3, '')
+    return 'Okay'
+
+@cross_origin(origin='localhost',headers=['Content-Type','Authorization'])
+@app.route('/data/transformation', methods=["GET", "POST"])
+def transformFeatures():
+    retrieveTransform = request.get_data().decode('utf8').replace("'", '"')
+    retrieveTransform = json.loads(retrieveTransform)
+    clickedNodeName = retrieveTransform['nameClicked']
+    removeNodeID = retrieveTransform['removeNode']
+    executeModel([removeNodeID[1]], 4, clickedNodeName[0])
     return 'Okay'