From fbf14e0c713592e30ecaae1cabfe494b5b4424d5 Mon Sep 17 00:00:00 2001
From: Angelos Chatzimparmpas <angelos.chatzimparmpas@gmail.com>
Date: Sun, 9 Aug 2020 14:54:20 +0200
Subject: [PATCH] new collapsible

---
 __pycache__/run.cpython-37.pyc                | Bin 18569 -> 18497 bytes
 .../src/components/FeatureSpace1 copy.vue     | 659 ++++++++++++++++++
 frontend/src/components/FeatureSpace1.vue     | 138 +++-
 frontend/src/components/FeatureSpace2.vue     |  11 -
 frontend/src/components/FeatureSpace3.vue     |  11 -
 frontend/src/components/FeatureSpace4.vue     |  11 -
 run.py                                        |   6 +-
 7 files changed, 772 insertions(+), 64 deletions(-)
 create mode 100644 frontend/src/components/FeatureSpace1 copy.vue

diff --git a/__pycache__/run.cpython-37.pyc b/__pycache__/run.cpython-37.pyc
index a8d727869f7e770ab5ab835360e0f5b35b82929d..f6f80ee809710f0693d7c6f40e3c0cbba89ef98a 100644
GIT binary patch
delta 143
zcmeC2$aru9Bd-%LFBbz4%yiR@m)po&sl@bveRGErkXWI0pPeyea);47MyAQ-#u=NR
z8|!j1icJ=^ZDA5;p1e>ynMndnF-lHOvFl*epZwOYn$c}?rhPtR?Btt3vShQT!*V9Z
r$D2Poi7+wlpUmbuneoKrS*|^d7dNZBg)?#c@iEHOGsH-7N^t@J&a5q-

delta 205
zcmX>&fw6NUBd-%LFBbz4T>GIN|7;^~r4o|@$L0>D2kaILBub<fNY{uhWL(I|$WY@1
z<%^^7CD8bin-jF2vopp__Aq+K$T->DIAim4V^dB>smW(;T9~AnCnstrGs%D{M%l?S
zb{$N{%#(NNq)q0r7h&|8tZ1Llm^gVNkgV9u=&+oL@%iSJP9jW<hbQlInap@*a*%5e
X<JHagUBj8UgZLO_>KS6BIHfoNC4oNc

diff --git a/frontend/src/components/FeatureSpace1 copy.vue b/frontend/src/components/FeatureSpace1 copy.vue
new file mode 100644
index 0000000..2a39d61
--- /dev/null
+++ b/frontend/src/components/FeatureSpace1 copy.vue	
@@ -0,0 +1,659 @@
+<template>
+  <div class="column">
+    <div id="FeatureGraph1"></div>
+  </div>
+</template>
+
+<script>
+import { EventBus } from '../main.js'
+import * as greadability from '../greadability.js'
+import * as d3Base from 'd3'
+
+// attach all d3 plugins to the d3 library
+const d3 = Object.assign(d3Base)
+
+export default {
+  name: 'FeatureSpace1',
+  data () {
+    return {
+      dataFS1: [],
+      dataFS1Trans: [],
+      jsonData: [],
+      corrMatrixComb: [],
+      corrMatrixCombTotal: [],
+      VIFRemaining: [],
+      MIRemaining: [],
+    }
+  },
+  methods: {
+      initializeNetwork () {   
+        
+        var listofNodes = this.dataFS1[0]
+        var dataLoc = JSON.parse(this.dataFS1[2])
+        var pushEachFinal = []
+        var pushEach
+        var oldVal
+        var newVal
+        var outcome
+        var countLoc
+
+        var corrMatrixCombLoc =[]
+        var corrMatrixCombTotalLoc = []
+        var VIFRemainingLoc = []
+        var MIRemainingLoc = []
+
+        this.dataFS1Trans.forEach(function(element, index) {
+          var round = element.round
+          corrMatrixCombLoc.push(Object.values(JSON.parse(round[4])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(round[8]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(round[12]))[0])
+          MIRemainingLoc.push(JSON.parse(round[16]))
+          round = JSON.parse(round[0])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          pushEach = []
+          Object.entries(round).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "round", valueIns: outcome})
+
+          var roundLogE = element.roundLogE
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[4])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLogE[8]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLogE[12]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLogE[16]))
+          roundLogE = JSON.parse(roundLogE[0])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          Object.entries(roundLogE).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "roundLogE", valueIns: outcome})
+
+          var roundLog2 = element.roundLog2
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[4])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog2[8]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog2[12]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLog2[16]))
+          roundLog2 = JSON.parse(roundLog2[0])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          Object.entries(roundLog2).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "roundLog2", valueIns: outcome})
+
+          var roundLog10 = element.roundLog10
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[4])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog10[8]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog10[12]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLog10[16]))
+          roundLog10 = JSON.parse(roundLog10[0])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          Object.entries(roundLog10).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "roundLog10", valueIns: outcome})
+          pushEachFinal.push({key: listofNodes[index], value: pushEach})
+          })
+
+        this.corrMatrixComb = [...corrMatrixCombLoc]
+        this.corrMatrixCombTotal = [...corrMatrixCombTotalLoc]
+        this.VIFRemaining = [...VIFRemainingLoc]
+        this.MIRemaining = [...MIRemainingLoc]
+
+        var nodes = []
+        var groupID = 0
+        listofNodes.forEach( function(element) {
+          groupID++
+          nodes.push({"name": element, "group": groupID})
+        })
+
+        var links = []
+
+        Object.entries(dataLoc).forEach(
+            function ([feature, value]) {
+              Object.entries(value).forEach( function ([featureInside, value]) {
+                if (feature != featureInside) { 
+                  if (value >= 0) {
+                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "lin_color": "#D3D3D3"})
+                  }
+                }   
+              })
+        })
+
+        groupID = 0
+        listofNodes.forEach( function(element) {
+          groupID++
+          nodes.push(
+            {"name": element+"_r", "group": groupID},
+            {"name": element+"_r_E", "group": groupID},
+            {"name": element+"_r_2", "group": groupID},
+            {"name": element+"_r_10", "group": groupID},
+          )
+        })
+
+        Object.entries(pushEachFinal).forEach(
+            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"})
+                }
+                else {
+                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#d6604d"})
+                }
+              })
+        })
+
+        this.jsonData = {"nodes": nodes, "links": links};
+
+        this.graphVizualization()
+
+      },
+      graphVizualization () {
+
+        var listofNodes = this.dataFS1[0]
+        var uniqueTarget = JSON.parse(this.dataFS1[14])
+        var corrTarget = JSON.parse(this.dataFS1[6])
+        var corrGlob = JSON.parse(this.dataFS1[10])
+        var VIFVar = JSON.parse(this.dataFS1[18])
+        var MIVar = JSON.parse(this.dataFS1[22])
+        MIVar = MIVar.concat(this.MIRemaining)
+        var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
+
+        var corrTargetFormatted = []
+        for (let i = 0; i < Object.keys(corrTarget).length; i++) {
+          var corrTargetFormattedLoc = []
+          for (let j = 0; j < Object.keys(corrTarget[i]).length; j++) {
+            if (j > uniqueTarget.length - 1) {
+              corrTargetFormattedLoc.push(Math.round(Object.values(corrTarget[i])[j] * 100))
+            }
+          }
+          corrTargetFormatted.push(corrTargetFormattedLoc) 
+        }
+
+        for (let j = 0; j < uniqueTarget.length; j++) {
+          for (let i = 0; i < Object.keys(this.corrMatrixComb).length; i++) {
+            if (Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100) == null) {
+              corrTargetFormatted[j].push(0)
+            } else {
+              corrTargetFormatted[j].push(Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100))
+            }
+          }
+        }
+
+        var corrGlobFormatted = []
+        for (let i = 0; i < Object.keys(corrGlob).length; i++) {
+          if (i != 0) {
+            corrGlobFormatted.push(Math.round(Object.values(corrGlob)[i]['0'] * 100))
+          }
+        }
+
+        for (let i = 0; i < this.corrMatrixCombTotal.length; i++) {
+            corrGlobFormatted.push(Math.round(this.corrMatrixCombTotal[i]))
+        }
+
+        var VIFVarFormatted = []
+        for (let i = 0; i < Object.keys(VIFVar).length; i++) {
+          if (i != 0) {
+            if (Object.values(VIFVar)[i] > 10) {
+              VIFVarFormatted.push(4)
+            } else if (Object.values(VIFVar)[i] > 5) {
+              VIFVarFormatted.push(2)
+            } else {
+              VIFVarFormatted.push(0)
+            }
+          }
+        }
+
+        for (let i = 0; i < this.VIFRemaining.length; i++) {
+            if (this.VIFRemaining[i] > 10) {
+              VIFVarFormatted.push(4)
+            } else if (this.VIFRemaining[i] > 5) {
+              VIFVarFormatted.push(2)
+            } else {
+              VIFVarFormatted.push(0)
+            }
+          }
+
+        function min(input) {
+            if (toString.call(input) !== "[object Array]")  
+              return false;
+          return Math.min.apply(null, input);
+        }
+
+        function max(input) {
+            if (toString.call(input) !== "[object Array]")  
+              return false;
+          return Math.max.apply(null, input);
+        }
+
+        function normalize(min, max) {
+            var delta = max - min;
+            return function (val) {
+                return (val - min) / delta;
+            };
+        }
+
+        var MIMin = min(MIVar)
+        var MIMax = max(MIVar)
+
+        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']);
+
+        var svg = d3.select("#FeatureGraph1");
+        svg.selectAll("*").remove();
+
+        var width = 1000;
+        var height = 500;
+
+        var numTicks = 200;
+
+        var selectedParams;
+        var bestParams;
+
+        var dispatch = d3.dispatch('layoutend');
+
+        svg = d3.select("#FeatureGraph1").append("svg")
+          .attr("width", width)
+          .attr("height", height);
+
+        var graph = this.jsonData
+
+        var link = svg.append('g')
+          .attr('class', 'links')
+          .selectAll('line')
+          .data(graph.links)
+          .enter().append('line')
+          .attr("stroke", function(d) { return d.lin_color; })
+          .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
+          
+
+        var node = svg.append('g')
+          .attr('class', 'nodes')
+          .selectAll('g')
+          .data(graph.nodes)
+          .enter().append('g')
+
+        var paramGroups = [
+          {name: 'chargeStrength', values: [-30, -80]},
+          {name: 'linkDistance', values: [30, -80]},
+          {name: 'linkStrength', values: [0, 1]},
+          {name: 'gravity', values: [0, 0.5]},
+          {name: 'iterations', values: [1, 2]},
+          {name: 'alphaDecay', values: [0, 0.0228, 0.05]},
+          {name: 'velocityDecay', values: [0.4, 0.8]}
+        ];
+
+        var paramList = generateParams(paramGroups);
+
+        var bestSoFar = d3.select('.best').selectAll('li')
+          .data(paramGroups.map(function (d) { return d.name; }))
+          .enter().append('li')
+          .text(function (d) { return d; });
+
+        dispatch.on('layoutend', function (params, i) {
+          if (!bestParams || params.graphReadability > bestParams.graphReadability) {
+            bestParams = params;
+            selectedParams = bestParams;
+
+            bestSoFar
+              .data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
+              .text(function (d) { return d + ' = ' + bestParams[d]; });
+          }
+
+        });
+
+        var i = 0;
+        var stepper = d3.timer(function () {
+          var p = paramList[i];
+          var forceSim = getForceSimFromParams(p);
+
+          // Reset node attributes.
+          graph.nodes.forEach(function (n) {
+            n.x = n.y = n.vx = n.vy = 0;
+          });
+
+          forceSim.nodes(graph.nodes)
+            .stop();
+
+          forceSim.force('link')
+            .links(graph.links);
+
+          for (var t = 0; t < numTicks; ++t) {
+            forceSim.tick();
+          }
+
+          p.graphReadability = greadability.greadability(graph.nodes, graph.links);
+          p.graphReadability = (p.graphReadability.crossing + p.graphReadability.crossingAngle +
+          p.graphReadability.angularResolutionMin + p.graphReadability.angularResolutionDev) / 4
+
+          p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; });
+
+          dispatch.call('layoutend', forceSim, p, i);
+
+          ++i;
+          if (i >= paramList.length) {
+            
+            var widthLoc = 100;
+            var arcSize = (6 * widthLoc / 100);
+            var innerRadius = arcSize * 2; 
+
+            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
+              .attr("id", function(d, i) { return "svg" + (i); })
+
+            graph.nodes.forEach(function(itemVal, indexNode) {
+              
+              var data = []
+
+              for(let k = 0; k < uniqueTarget.length; k++) {
+                data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''})
+              }
+
+              var length = data.length
+              data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
+
+
+              var border = VIFVarFormatted[indexNode]
+
+                  var arcs = data.map(function (obj, i) {
+                    if (i == length) {
+                      return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border);
+                    } else {
+                      return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius);
+                    }
+                  });
+                  
+                  var arcsGrey = data.map(function (obj, i) {
+                      return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
+                  });
+
+                  var pieData = data.map(function (obj, i) {
+                      return [
+                          {value: obj.value, arc: arcs[i], object: obj},
+                          {value: (100 - obj.value), arc: arcsGrey[i], object: obj},
+                          {value: 0, arc: arcs[i], object: obj}];
+                  });
+
+                  var pie = d3.pie().sort(null).value(function (d) {
+                      return d.value;
+                  });
+                  var id = indexNode
+                  var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
+                      .append('g')
+                      .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
+                  var gText = d3.select('#svg'+id).selectAll('g.textClass').data([{}]).enter()
+                      .append('g')
+                      .classed('textClass', true)
+                      .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
+
+                  g.selectAll('path').data(function (d) {
+                      return pie(d);
+                  }).enter().append('path')
+                      .attr('id', function (d, i) {
+                          if (i == 1) {
+                              return "Text" + d.data.object.label
+                          }
+                      })
+                      .attr('d', function (d) {
+                          return d.data.arc(d);
+                      }).attr('fill', function (d, i) {
+                      return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none';
+                  });
+
+                  g.each(function (d, index) {
+
+                      var el = d3.select(this);
+                      var path = el.selectAll('path').each(function (r, i) {
+                          if (i === 1) {
+                              var centroid = r.data.arc.centroid({
+                                  startAngle: r.startAngle + 0.05,
+                                  endAngle: r.startAngle + 0.001 + 0.05
+                              });
+                              var lableObj = r.data.object;
+                              g.append('text')
+                                  .attr('font-size', ((2 * width) / 100))
+                                  .attr('dominant-baseline', 'central')
+                                  .append("textPath")
+                                  .attr("textLength", function (d, i) {
+                                      return 0;
+                                  })
+                                  .attr("startOffset", '5')
+                                  .attr("dy", '-3em')
+                                  .text(lableObj.value + '%');
+                          }
+                          if (i === 0) {
+                              var centroidText = r.data.arc.centroid({
+                                  startAngle: r.startAngle,
+                                  endAngle: r.startAngle
+                              });
+                              var lableObj = r.data.object;
+                              gText.append('text')
+                                  .attr('font-size', ((2 * width) / 100))
+                                  .text(lableObj.label)
+                                  .style('fill', lableObj.lcolor)
+                                  .attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")"))
+                                  .attr('dominant-baseline', 'central');
+                          }
+                      });
+
+                  });
+
+                })
+
+                var drag_handler = d3.drag()
+                  .on("start", drag_start)
+                  .on("drag", drag_drag)
+                  .on("end", drag_end);	
+                  
+                drag_handler(node);
+
+                var labels = node.append("text")
+                  .text(function(d) {
+                    return d.name;
+                  })
+                  .attr('x', 20)
+                  .attr('y', 8);
+            
+                node.append('title').text(function (d) { return d.name; });
+
+                //add zoom capabilities 
+                var zoom_handler = d3.zoom()
+                    .on("zoom", zoom_actions);
+
+                zoom_handler(svg); 
+
+                drawGraph();
+
+                //Zoom functions 
+                function zoom_actions(){
+                    svg.attr("transform", d3.event.transform)
+                }
+
+                function drag_start(d) {
+                  if (!d3.event.active) forceSim.alphaTarget(0.3).restart();
+                      d.fx = d.x;
+                      d.fy = d.y;
+                  }
+
+                  //make sure you can't drag the circle outside the box
+                  function drag_drag(d) {
+                    d.fx = d3.event.x;
+                    d.fy = d3.event.y;
+                    tickActions();
+                  }
+
+                  function drag_end(d) {
+                    if (!d3.event.active) forceSim.alphaTarget(0);
+                    d.fx = null;
+                    d.fy = null;
+                  }
+
+                stepper.stop();
+          }
+
+        });
+
+        function tickActions() {
+          link
+            .attr('x1', function (d) { return d.source.x; })
+            .attr('x2', function (d) { return d.target.x; })
+            .attr('y1', function (d) { return d.source.y; })
+            .attr('y2', function (d) { return d.target.y; });
+
+          node
+            .attr("id", function(d, i) { return "g" + (i); })
+            .attr("transform", function(d, i) {
+              d.x = d.x - 50
+              d.y = d.y - 50
+              return "translate(" + d.x + "," + d.y + ")";
+            })
+        };
+
+        function drawGraph () {
+          graph.nodes.forEach(function (n, i) {
+            n.x = selectedParams.positions[i].x;
+            n.y = selectedParams.positions[i].y;
+          });
+
+          var xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
+          var xMin = xDistance[0];
+          xDistance = xDistance[1] - xDistance[0];
+
+          var yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
+          var yMin = yDistance[0];
+          yDistance = yDistance[1] - yDistance[0];
+
+          graph.nodes.forEach(function (n, i) {
+            n.x = (height - 10) * (n.x - xMin) / Math.max(xDistance, yDistance);
+            n.y = (height - 10) * (n.y - yMin) / Math.max(xDistance, yDistance);
+          });
+
+          xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
+          var xMid = (xDistance[1] + xDistance[0]) / 2;
+          yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
+          var yMid = (yDistance[1] - yDistance[0]) / 2;
+
+          graph.nodes.forEach(function (n, i) {
+            n.x = n.x + width/2 - xMid;
+            n.y = n.y + height/2 - yMid;
+          });
+
+          tickActions();
+        }
+
+        function generateParams (paramGroups, paramList, currParam) {
+          var p = paramGroups[0];
+
+          if (!paramList) paramList = [];
+
+          if (!currParam) currParam = {};
+
+          p.values.forEach(function (v) {
+            var setting = {};
+            setting[p.name] = v;
+            if (paramGroups.length === 1) {
+              paramList.push(Object.assign(setting, currParam));
+            } else {
+              generateParams(paramGroups.slice(1), paramList, Object.assign(setting, currParam));
+            }
+          });
+
+          return paramList;
+        }
+
+        function getForceSimFromParams (params) {
+          var forceSim = d3.forceSimulation()
+            .force('link', d3.forceLink().iterations(params.iterations))
+            .force('charge', d3.forceManyBody().strength(params.chargeStrength))
+            .force('x', d3.forceX(0).strength(params.gravity))
+            .force('y', d3.forceY(0).strength(params.gravity))
+            .force('center', d3.forceCenter(0, 0))
+            .alphaDecay(params.alphaDecay)
+            .velocityDecay(params.velocityDecay);
+
+          if (params.linkStrength !== null) {
+            forceSim.force('link').strength(params.linkStrength);
+          }
+
+          return forceSim;
+        }
+
+      },
+      reset () {
+        var svg = d3.select("#FeatureGraph1");
+        svg.selectAll("*").remove();
+      },
+    },
+  mounted () {
+    EventBus.$on('quadTrans1', data => { this.dataFS1Trans = data })
+    EventBus.$on('quad1', data => { this.dataFS1 = data })
+    EventBus.$on('quad1', this.initializeNetwork)
+  }
+}
+</script>
+
+<style>
+
+text {
+  font-family: sans-serif;
+}
+
+svg {
+  display: block;
+}
+
+.links line {
+  stroke-opacity: 0.6;
+}
+
+.column {
+  float: left;
+  margin: 0 10px;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/FeatureSpace1.vue b/frontend/src/components/FeatureSpace1.vue
index 4cce411..6bd91df 100644
--- a/frontend/src/components/FeatureSpace1.vue
+++ b/frontend/src/components/FeatureSpace1.vue
@@ -19,6 +19,10 @@ export default {
       dataFS1: [],
       dataFS1Trans: [],
       jsonData: [],
+      corrMatrixComb: [],
+      corrMatrixCombTotal: [],
+      VIFRemaining: [],
+      MIRemaining: [],
     }
   },
   methods: {
@@ -33,8 +37,17 @@ export default {
         var outcome
         var countLoc
 
+        var corrMatrixCombLoc =[]
+        var corrMatrixCombTotalLoc = []
+        var VIFRemainingLoc = []
+        var MIRemainingLoc = []
+
         this.dataFS1Trans.forEach(function(element, index) {
           var round = element.round
+          corrMatrixCombLoc.push(Object.values(JSON.parse(round[4])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(round[8]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(round[12]))[0])
+          MIRemainingLoc.push(JSON.parse(round[16]))
           round = JSON.parse(round[0])
           oldVal = 0
           newVal = 0
@@ -55,6 +68,10 @@ export default {
           pushEach.push({keyIns: "round", valueIns: outcome})
 
           var roundLogE = element.roundLogE
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[4])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLogE[8]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLogE[12]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLogE[16]))
           roundLogE = JSON.parse(roundLogE[0])
           oldVal = 0
           newVal = 0
@@ -74,6 +91,10 @@ export default {
           pushEach.push({keyIns: "roundLogE", valueIns: outcome})
 
           var roundLog2 = element.roundLog2
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[4])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog2[8]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog2[12]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLog2[16]))
           roundLog2 = JSON.parse(roundLog2[0])
           oldVal = 0
           newVal = 0
@@ -93,6 +114,10 @@ export default {
           pushEach.push({keyIns: "roundLog2", valueIns: outcome})
 
           var roundLog10 = element.roundLog10
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[4])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog10[8]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog10[12]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLog10[16]))
           roundLog10 = JSON.parse(roundLog10[0])
           oldVal = 0
           newVal = 0
@@ -113,14 +138,16 @@ export default {
           pushEachFinal.push({key: listofNodes[index], value: pushEach})
           })
 
+        this.corrMatrixComb = [...corrMatrixCombLoc]
+        this.corrMatrixCombTotal = [...corrMatrixCombTotalLoc]
+        this.VIFRemaining = [...VIFRemainingLoc]
+        this.MIRemaining = [...MIRemainingLoc]
+
         var nodes = []
+        var groupID = 0
         listofNodes.forEach( function(element) {
-          nodes.push({"name": element, "children": [
-            {"name": element+"_round"},
-            {"name": element+"_roundLogE"},
-            {"name": element+"_roundLog2"},
-            {"name": element+"_roundLog10"},
-          ]})
+          groupID++
+          nodes.push({"name": element, "group": groupID+"_root"})
         })
 
         var links = []
@@ -130,12 +157,35 @@ export default {
               Object.entries(value).forEach( function ([featureInside, value]) {
                 if (feature != featureInside) { 
                   if (value >= 0) {
-                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30})
+                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "lin_color": "#D3D3D3"})
                   }
                 }   
               })
         })
 
+        groupID = 0
+        listofNodes.forEach( function(element) {
+          groupID++
+          nodes.push(
+            {"name": element+"_r", "group": groupID},
+            {"name": element+"_r_E", "group": groupID},
+            {"name": element+"_r_2", "group": groupID},
+            {"name": element+"_r_10", "group": groupID},
+          )
+        })
+
+        Object.entries(pushEachFinal).forEach(
+            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"})
+                }
+                else {
+                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#d6604d"})
+                }
+              })
+        })
+
         this.jsonData = {"nodes": nodes, "links": links};
 
         this.graphVizualization()
@@ -149,7 +199,7 @@ export default {
         var corrGlob = JSON.parse(this.dataFS1[10])
         var VIFVar = JSON.parse(this.dataFS1[18])
         var MIVar = JSON.parse(this.dataFS1[22])
-
+        MIVar = MIVar.concat(this.MIRemaining)
         var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
 
         var corrTargetFormatted = []
@@ -163,6 +213,16 @@ export default {
           corrTargetFormatted.push(corrTargetFormattedLoc) 
         }
 
+        for (let j = 0; j < uniqueTarget.length; j++) {
+          for (let i = 0; i < Object.keys(this.corrMatrixComb).length; i++) {
+            if (Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100) == null) {
+              corrTargetFormatted[j].push(0)
+            } else {
+              corrTargetFormatted[j].push(Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100))
+            }
+          }
+        }
+
         var corrGlobFormatted = []
         for (let i = 0; i < Object.keys(corrGlob).length; i++) {
           if (i != 0) {
@@ -170,6 +230,10 @@ export default {
           }
         }
 
+        for (let i = 0; i < this.corrMatrixCombTotal.length; i++) {
+            corrGlobFormatted.push(Math.round(this.corrMatrixCombTotal[i]))
+        }
+
         var VIFVarFormatted = []
         for (let i = 0; i < Object.keys(VIFVar).length; i++) {
           if (i != 0) {
@@ -183,6 +247,16 @@ export default {
           }
         }
 
+        for (let i = 0; i < this.VIFRemaining.length; i++) {
+            if (this.VIFRemaining[i] > 10) {
+              VIFVarFormatted.push(4)
+            } else if (this.VIFRemaining[i] > 5) {
+              VIFVarFormatted.push(2)
+            } else {
+              VIFVarFormatted.push(0)
+            }
+          }
+
         function min(input) {
             if (toString.call(input) !== "[object Array]")  
               return false;
@@ -207,14 +281,14 @@ export default {
 
         MIVar = MIVar.map(normalize(MIMin, MIMax))
 
-        var colorsScaleNodes = d3.scaleLinear()
-          .domain([MIMin, MIMax])
-          .range(['#a6bddb','#74a9cf','#3690c0','#0570b0','#045a8d','#023858']);
+        var colorsScaleNodes = d3.scaleOrdinal()
+          .domain(d3.ticks([MIMin, MIMax, 10]))
+          .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']);
 
         var svg = d3.select("#FeatureGraph1");
         svg.selectAll("*").remove();
 
-        var width = 800;
+        var width = 1000;
         var height = 500;
 
         var numTicks = 200;
@@ -235,13 +309,26 @@ export default {
           .selectAll('line')
           .data(graph.links)
           .enter().append('line')
+          .attr("stroke", function(d) { return d.lin_color; })
           .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
+          
 
         var node = svg.append('g')
           .attr('class', 'nodes')
           .selectAll('g')
           .data(graph.nodes)
           .enter().append('g')
+          .on("click", function(id, index) { 
+            var groupLoc = index + 1
+            var items = document.getElementsByClassName(groupLoc)
+            items.forEach( function (it) {
+              if (it.style.visibility == "hidden") {
+                it.style.visibility = "visible";
+              } else {
+                it.style.visibility = "hidden";
+              }
+            })
+          });
 
         var paramGroups = [
           {name: 'chargeStrength', values: [-30, -80]},
@@ -307,24 +394,21 @@ export default {
             var arcSize = (6 * widthLoc / 100);
             var innerRadius = arcSize * 2; 
 
-            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
+            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc).attr("class", function(d, i) { return d.group; })
               .attr("id", function(d, i) { return "svg" + (i); })
 
             graph.nodes.forEach(function(itemVal, indexNode) {
-
-              // var data = [[
-              //     {value: 70, label: "", color: '#ff0000', lcolor: ''},
-              //     {value: 33, label: "", color: '#00ff00', lcolor: ''},
-              //     {value: 100, label: "44.5", color: '#000000', lcolor: 'black'}
-              // ];]
               
               var data = []
 
               for(let k = 0; k < uniqueTarget.length; k++) {
                 data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''})
               }
+
               var length = data.length
               data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
+
+
               var border = VIFVarFormatted[indexNode]
 
                   var arcs = data.map(function (obj, i) {
@@ -436,6 +520,15 @@ export default {
 
                 drawGraph();
 
+                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";
+                  })
+                }
+
                 //Zoom functions 
                 function zoom_actions(){
                     svg.attr("transform", d3.event.transform)
@@ -575,16 +668,9 @@ svg {
 }
 
 .links line {
-  stroke: #D3D3D3;
   stroke-opacity: 0.6;
 }
 
-.nodes circle {
-  fill: #000000;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
 .column {
   float: left;
   margin: 0 10px;
diff --git a/frontend/src/components/FeatureSpace2.vue b/frontend/src/components/FeatureSpace2.vue
index c38b6c4..35329be 100644
--- a/frontend/src/components/FeatureSpace2.vue
+++ b/frontend/src/components/FeatureSpace2.vue
@@ -481,17 +481,6 @@ svg {
   display: block;
 }
 
-.links line {
-  stroke: #D3D3D3;
-  stroke-opacity: 0.6;
-}
-
-.nodes circle {
-  fill: #000000;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
 .column {
   float: left;
   margin: 0 10px;
diff --git a/frontend/src/components/FeatureSpace3.vue b/frontend/src/components/FeatureSpace3.vue
index 20a1a0b..3570a9a 100644
--- a/frontend/src/components/FeatureSpace3.vue
+++ b/frontend/src/components/FeatureSpace3.vue
@@ -483,17 +483,6 @@ svg {
   display: block;
 }
 
-.links line {
-  stroke: #D3D3D3;
-  stroke-opacity: 0.6;
-}
-
-.nodes circle {
-  fill: #000000;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
 .column {
   float: left;
   margin: 0 10px;
diff --git a/frontend/src/components/FeatureSpace4.vue b/frontend/src/components/FeatureSpace4.vue
index 665d786..923505f 100644
--- a/frontend/src/components/FeatureSpace4.vue
+++ b/frontend/src/components/FeatureSpace4.vue
@@ -483,17 +483,6 @@ svg {
   display: block;
 }
 
-.links line {
-  stroke: #D3D3D3;
-  stroke-opacity: 0.6;
-}
-
-.nodes circle {
-  fill: #000000;
-  stroke: #fff;
-  stroke-width: 1px;
-}
-
 .column {
   float: left;
   margin: 0 10px;
diff --git a/run.py b/run.py
index 83a8083..0a4dc4d 100644
--- a/run.py
+++ b/run.py
@@ -669,6 +669,7 @@ def NewComputationTransf(DataRows1, DataRows2, DataRows3, DataRows4, quadrant1,
         MI4List = []
 
     corrMatrixComb1 = corrMatrixComb1.loc[[feature]]
+
     corrMatrixComb2 = corrMatrixComb2.loc[[feature]]
     corrMatrixComb3 = corrMatrixComb3.loc[[feature]]
     corrMatrixComb4 = corrMatrixComb4.loc[[feature]]
@@ -733,11 +734,6 @@ def NewComputationTransf(DataRows1, DataRows2, DataRows3, DataRows4, quadrant1,
     packCorrLoc.append(json.dumps(MI3List))
     packCorrLoc.append(json.dumps(MI4List))
 
-    packCorrLoc.append(json.dumps(uniqueTarget1))
-    packCorrLoc.append(json.dumps(uniqueTarget2))
-    packCorrLoc.append(json.dumps(uniqueTarget3))
-    packCorrLoc.append(json.dumps(uniqueTarget4))
-
     return packCorrLoc
 
 @cross_origin(origin='localhost',headers=['Content-Type','Authorization'])