From efa69bb9f78b7b18b6f8a2bfa2a3f72e7b7404a2 Mon Sep 17 00:00:00 2001
From: Angelos Chatzimparmpas <angelos.chatzimparmpas@gmail.com>
Date: Mon, 14 Dec 2020 16:10:14 +0100
Subject: [PATCH] new

---
 __pycache__/run.cpython-38.pyc                | Bin 22503 -> 22836 bytes
 .../src/components/FeatureSpaceDetail.vue     |  17 +-
 .../src/components/FeatureSpaceOverview.vue   |   8 +-
 frontend/src/components/Heatmap.vue           |  73 ++-
 frontend/src/components/Main.vue              |  38 +-
 frontend/src/components/Results.vue           | 442 +++++++++++++-----
 run.py                                        |  39 +-
 7 files changed, 428 insertions(+), 189 deletions(-)

diff --git a/__pycache__/run.cpython-38.pyc b/__pycache__/run.cpython-38.pyc
index 57b6792f696f69d40a6edb25f10227a251d631de..62ad4085227f14b1903d089f068148a104b2acca 100644
GIT binary patch
delta 5674
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
B6A1tS

delta 5146
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
M9-pU@c@I?oAE#M^i~s-t

diff --git a/frontend/src/components/FeatureSpaceDetail.vue b/frontend/src/components/FeatureSpaceDetail.vue
index 6a8dc88..7fa069f 100644
--- a/frontend/src/components/FeatureSpaceDetail.vue
+++ b/frontend/src/components/FeatureSpaceDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="column">
-    <div id="FeatureGraph" style="border-style: solid; border-width: 2px; border-color: yellow; min-height: 504px; max-height: 504px; min-width: 1230px"></div> 
-      <div id="toolbar" style="min-height: 67px; max-height: 67px; margin-top: 20px">
+    <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="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: 3px">
               <table class="table table-borderless centerTable" >
@@ -10,7 +10,7 @@
                     <td scope="row"><button class="btn btn-primary active" id="initButton" v-on:click="setLayerExplore" style="margin-left: -1px !important" ><font-awesome-icon icon="search" style="margin-right: 5px"/>Feature exploration</button></td>
                     <td><button class="btn btn-primary" v-on:click="setLayerCompare" style="margin-left: -1.4px"><font-awesome-icon icon="balance-scale-left" style="margin-right: 5px" />Feature generation</button></td>
                     <td scope="row"><button class="btn btn-primary" v-on:click="setLayerEngineer" style="margin-left: -2px !important"><font-awesome-icon icon="wrench" style="margin-right: 5px" />Feature transformation</button></td>
-                    <td scope="row"><p style="margin-left: -2px !important; color: #007bff;">Warning: pick between 2 to 3 features for detailed comparison of features.</p></td>
+                    <!--<td scope="row"><p style="margin-left: -2px !important; color: #007bff;">Warning: pick between 2 to 3 features for detailed comparison of features.</p></td>-->
                   </tr>
                 </tbody>
               </table>
@@ -432,12 +432,12 @@ export default {
         var colorsScaleNodes = d3.scaleOrdinal()
           .domain(d3.ticks([MIMin, MIMax, 5]))
           .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']);
-
+ 
         var svg = d3.select("#FeatureGraph");
         svg.selectAll("*").remove();
 
-        var width = 1230;
-        var height = 504;
+        var width = 819;
+        var height = 819;
 
         var numTicks = 200;
 
@@ -909,4 +909,9 @@ table td {
   cursor: pointer;
   }
 
+.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
+  padding-right: 6px !important;
+  padding-left: 6px !important;
+}
+
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/FeatureSpaceOverview.vue b/frontend/src/components/FeatureSpaceOverview.vue
index 41acfcb..3808ef0 100644
--- a/frontend/src/components/FeatureSpaceOverview.vue
+++ b/frontend/src/components/FeatureSpaceOverview.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-  <div id="tree-container" style="min-height: 500px"></div>
+  <div id="tree-container" style="min-height: 820px"></div>
   <div id="toolbar">
     <div class="tool">
       <div class="tlabel">Zoom</div>
@@ -196,13 +196,13 @@ export default {
         var curPath;  // array of nodes in the path to the currently selected node
 
         // size of the diagram
-        var width = 1250;
-        var height = 500;
+        var width = 820;
+        var height = 820;
 
         // current pan, zoom, and rotation
         var curX = width / 2;
         var curY = height / 2;
-        var curZ = 1.25; // current zoom
+        var curZ = 1.14; // current zoom
         var curR = 270; // current rotation
 
         // keyboard key codes
diff --git a/frontend/src/components/Heatmap.vue b/frontend/src/components/Heatmap.vue
index c394811..d13b8aa 100644
--- a/frontend/src/components/Heatmap.vue
+++ b/frontend/src/components/Heatmap.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div id="Heatmap"></div>
-    <div id="LegendHeat" style="margin-left: 280px"></div>
+    <div id="LegendHeat"></div>
   </div>
 </template>
 
@@ -24,7 +24,7 @@ export default {
       limitation: 0,
       flag: false,
       classesNumber: 10,
-      cellSize: 20,
+      cellSize: 16,
       ModelsIDHeatStack: [],
       highlighted: [],
       responsiveWidthHeight: [],
@@ -80,44 +80,43 @@ export default {
       var FeaturesAccuracy = JSON.parse(this.dataFI[2])
       var Features = this.featureData[0]
 
-      var len2 = Features.length
-
       let arr = Object.values(featureUni.Score);
       let minUni = Math.min(...arr);
       let maxUni = Math.max(...arr);
 
-      let len = algorithms.length
+      let len = Features.length
       let indicesYAxis = []
-      for (let i = 0; i < len+1; i++) {
-          indicesYAxis[i] = [algorithms[i]]
+      for (let i = 0; i < len; i++) {
+          indicesYAxis[i] = [Features[i]]
       } 
+
       let indicesXAxis = []
       var temp = []
+      var len2 = algorithms.length
       for (let i = 0; i < len2; i++) {
         temp = []
         temp.push("R")
-        var loop = i+1
-        temp.push(Features[i].toString()+" (F"+loop+")")
+        temp.push(algorithms[i].toString())
         indicesXAxis[i] = temp
       }
 
         var values = []
         var modelData = []
-        for (let j = 0; j < len2; j++) {
+        for (let j = 0; j <len2; j++) {
           var data = []
-          for (let i = 0; i <len; i++) {
-              if (algorithms[i] == "Univariate FS") {
-                values[i] = ((Object.values(featureUni.Score)[j]-minUni)/(maxUni-minUni))
-              } else if (algorithms[i] == "Permutation FI") {
-                values[i] = PermImpEli[j][0]
-              } else if (algorithms[i] == "Accuracy-based FI") {
-                values[i] = FeaturesAccuracy[j][0]
-              } else if (algorithms[i] == "Average") {
-                values[i] = ((((Object.values(featureUni.Score)[j]-minUni)/(maxUni-minUni)))+(PermImpEli[j][0])+(FeaturesAccuracy[j][0]))/(len-2)
+          for (let i = 0; i < len; i++) {
+              if (algorithms[j] == "Univariate FS") {
+                values[j] = ((Object.values(featureUni.Score)[i]-minUni)/(maxUni-minUni))
+              } else if (algorithms[j] == "Permutation FI") {
+                values[j] = PermImpEli[i][0]
+              } else if (algorithms[j] == "Accuracy-based FI") {
+                values[j] = FeaturesAccuracy[i][0]
+              } else if (algorithms[j] == "Average") {
+                values[j] = ((((Object.values(featureUni.Score)[i]-minUni)/(maxUni-minUni)))+(PermImpEli[i][0])+(FeaturesAccuracy[i][0]))/(len-2)
               } else {
-                values[i] = -2
+                values[j] = -2
               }
-              data.push(values[i])
+              data.push(values[j])
           }
           modelData.push(data)
         }
@@ -159,16 +158,14 @@ export default {
     //==================================================
     
 
+    var viewerHeight = 820
+    var widthHeatmap = 392
 
-    var viewerWidth = 1225
-    var viewerHeight = 180
-    var widthHeatmap = 1225
-
-    var viewerPosTop = viewerHeight * 0.05;
-    var viewerPosTopHeat = viewerHeight * 0.42;
-    var viewerPosLeft = viewerWidth*0.1;
+    var viewerPosTop = 70;
+    var viewerPosTopHeat = 110;
+    var viewerPosLeft = 100;
 
-    var legendElementWidth = cellSize * 3;
+    var legendElementWidth = cellSize * 2.5;
 
     // http://bl.ocks.org/mbostock/5577023
     var colors = colorbrewer.RdYlGn[this.classesNumber];
@@ -186,7 +183,7 @@ export default {
           .range(colors);
 
       svg = d3.select(heatmapId).append("svg")
-          .attr("width", viewerWidth)
+          .attr("width", widthHeatmap)
           .attr("height", viewerHeight)
           .call(zoom)
             //.call(zoom.transform, d3.zoomIdentity.translate(200, 20).scale(0.25)) //initial size
@@ -290,8 +287,8 @@ export default {
             return d.idx;
           })
           .attr("class", "row");
-          svg.append("text").attr("x", 15).attr("y", -60).text("Feature").style("font-size", "16px").attr("alignment-baseline","top")
-          svg.append("text").attr("transform", "rotate(-90)").attr("x", -52).attr("y", -90).style("text-anchor", "middle").style("font-size", "16px").text("Technique"); // -130 before for HeartC
+          svg.append("text").attr("x", 10).attr("y", -65).text("Technique").style("font-size", "16px").attr("alignment-baseline","top")
+          svg.append("text").attr("transform", "rotate(-90)").attr("x", -33).attr("y", -50).style("text-anchor", "middle").style("font-size", "16px").text("Feature"); // -130 before for HeartC
           var heatMap = row.selectAll(".cell")
           .data(function(d) {
               return d;
@@ -343,7 +340,7 @@ export default {
               if (d3.select(this).style("fill") === "yellow" || d3.select(this).style("fill") === "url(\"#diagonalHatch\")") {
                 if (d3.select(this).style("fill") === "url(\"#diagonalHatch\")"){
                   if (d == -2) {
-                    const index = featuresAddRem.indexOf(i);
+                    const index = featuresAddRem.indexOf(k);
                     if (index > -1) {
                       featuresAddRem.splice(index, 1);
                     }
@@ -353,7 +350,7 @@ export default {
                     return colorScale(d)
                   }
                 } else {
-                  featuresAddRem.push(i)
+                  featuresAddRem.push(k)
                   EventBus.$emit('removeFeatures', featuresAddRem)
                   return "url(#diagonalHatch)"
                 }
@@ -368,7 +365,7 @@ export default {
         
       var svgLeg = d3.select("#LegendHeat").append("svg")
         .attr("width", widthHeatmap)
-        .attr("height", viewerHeight*0.3)
+        .attr("height", viewerHeight*0.12)
 
       var legend = svgLeg.append('g')
           .attr("class", "legend")
@@ -400,7 +397,7 @@ export default {
           })
           .attr("y", viewerPosTop + cellSize);
 
-      svgLeg.append("text").attr("x", 200).attr("y", 50).text("Normalized feature importance (FI)").style("font-size", "16px").attr("alignment-baseline","top")
+      svgLeg.append("text").attr("x", 75).attr("y", 55).text("Normalized feature importance (FI)").style("font-size", "16px").attr("alignment-baseline","top")
 
       //==================================================
       // Change ordering of cells
@@ -567,7 +564,7 @@ export default {
 
 <style>
 .heatmap {
-  font-size: 8px;
+  font-size: 9px;
   font-family: monospace;
 }
 rect.bordered {
@@ -575,7 +572,7 @@ rect.bordered {
   stroke-width:2px;   
 }
 text.mono {
-  font-size: 8px;
+  font-size: 9px;
   font-family: monospace;
   fill: #000;
 }
diff --git a/frontend/src/components/Main.vue b/frontend/src/components/Main.vue
index b521420..78fba80 100755
--- a/frontend/src/components/Main.vue
+++ b/frontend/src/components/Main.vue
@@ -17,52 +17,50 @@
         </b-col>
       </b-row>
       <b-row class="md-3">
-          <b-col cols="6">
+        <b-col>
+          <mdb-card style="margin-top: 15px;">
+            <mdb-card-header color="primary-color" tag="h5" class="text-center">Feature Selection (FS) Techniques
+              </mdb-card-header>
+              <mdb-card-body>
+                <mdb-card-text class="text-center"  style="min-height: 920px">
+                  <Heatmap/>
+                </mdb-card-text>
+              </mdb-card-body>
+          </mdb-card>
+        </b-col>
+          <b-col cols="4">
             <mdb-card style="margin-top: 15px;">
               <mdb-card-header color="primary-color" tag="h5" class="text-center">Feature Space Overview
                 </mdb-card-header>
                 <mdb-card-body>
-                  <mdb-card-text class="text-center"  style="min-height: 600px">
+                  <mdb-card-text class="text-center"  style="min-height: 920px">
                     <FeatureSpaceOverview/>
                   </mdb-card-text>
                 </mdb-card-body>
             </mdb-card>
           </b-col>
-          <b-col cols="6">
+          <b-col cols="4">
             <mdb-card style="margin-top: 15px;">
               <mdb-card-header color="primary-color" tag="h5" class="text-center">Feature Space Detail
               </mdb-card-header>
               <mdb-card-body>
-                <mdb-card-text class="text-center"  style="min-height: 600px">
+                <mdb-card-text class="text-center"  style="min-height: 920px">
                   <FeatureSpaceDetail/>
                 </mdb-card-text>
               </mdb-card-body>
             </mdb-card>
           </b-col>
-        </b-row>
-      <b-row class="md-3">
-           <b-col cols="6">
+          <b-col cols="2">
             <mdb-card style="margin-top: 15px;">
-              <mdb-card-header color="primary-color" tag="h5" class="text-center">Final Predictive Results
+              <mdb-card-header color="primary-color" tag="h5" class="text-center">Process Tracker and Predictive Results 
               </mdb-card-header>
               <mdb-card-body>
-                <mdb-card-text class="text-center"  style="min-height: 234px">
+                <mdb-card-text class="text-center"  style="min-height: 920px">
                   <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 (FS) Techniques
-                </mdb-card-header>
-                <mdb-card-body>
-                  <mdb-card-text class="text-center"  style="min-height: 234px">
-                    <Heatmap/>
-                  </mdb-card-text>
-                </mdb-card-body>
-            </mdb-card>
-          </b-col>
         </b-row>
     </b-container>
   </body>
diff --git a/frontend/src/components/Results.vue b/frontend/src/components/Results.vue
index e0d8b15..4e80ed8 100644
--- a/frontend/src/components/Results.vue
+++ b/frontend/src/components/Results.vue
@@ -1,5 +1,8 @@
 <template>
+<div>
+  <div id="HistoryPlot"></div>
   <div id="LinePlot"></div>
+</div>
 </template>
 
 <script>
@@ -11,148 +14,333 @@ export default {
   name: 'Results',
   data () {
     return {
-      dataInstances: '',
-      NumberofExecutions: 0,
-      PositiveValue: 75,
-      NegativeValue: 25,
       ValidResultsVar: [],
+      globalStep: 0,
+      featuresReceived: [],
       scoresMean: [],
       scoresSTD: [],
-      scoresPositive: [], 
-      scoresNegative: [],
-      scoresMean2: [],
-      scoresSTD2: [],
-      scoresPositive2: [], 
-      scoresNegative2: [],
-      scoresMean3: [],
-      scoresSTD3: [],
-      scoresPositive3: [], 
-      scoresNegative3: [],
+      scoresMeanBest: [],
+      scoresSTDBest: [],
       xaxis: [],
+      valuesGlobal: [1, 0, 0, 0], // initial
+      previousState: [],
+      flag: true
     }
   },
   methods: {
-    initializeLinePLot () { 
-      this.NumberofExecutions ++ 
-      this.xaxis.push(this.NumberofExecutions) 
+    HistoryPun() {
+      var state = this.globalStep + 1
+      
+      var svg = d3.select("#HistoryPlot");
+      svg.selectAll("*").remove();
 
-      // Under Exploration = Current
-      this.scoresMean.push((JSON.parse(this.ValidResultsVar[0])*100).toFixed(2))
-      this.scoresSTD.push((JSON.parse(this.ValidResultsVar[1])*100).toFixed(2))
+      var margin = {top: 0, right: 0, bottom: 0, left: 0}
+      var width = 390 - margin.left - margin.right
+      var height = 570 - margin.top - margin.bottom
+      var padding = 3
+      var xLabelHeight = 30
+      var yLabelWidth = 80
+      var borderWidth = 2
+      var duration = 50
 
-      this.scoresPositive.push(parseFloat(this.scoresMean[this.scoresMean.length - 1]) + parseFloat(this.scoresSTD[this.scoresSTD.length - 1]))
-      this.scoresNegative.push(parseFloat(this.scoresMean[this.scoresMean.length - 1]) - parseFloat(this.scoresSTD[this.scoresSTD.length - 1]))
+      var chart = d3.select('#HistoryPlot').append('svg')
+          .attr('width', width + margin.left + margin.right)
+          .attr('height', height + margin.top + margin.bottom)
+          .append('g')
+          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
 
-      this.scoresMean2.push((JSON.parse(this.ValidResultsVar[2])*100).toFixed(2))
-      this.scoresSTD2.push((JSON.parse(this.ValidResultsVar[3])*100).toFixed(2))
+      var border = chart.append('rect')
+          .attr('x', yLabelWidth)
+          .attr('y', xLabelHeight)
+          .style('fill-opacity', 0)
+          .style('stroke', '#000')
+          .style('stroke-width', borderWidth)
+          .style('shape-rendering', 'crispEdges')
 
-      this.scoresPositive2.push(parseFloat(this.scoresMean2[this.scoresMean2.length - 1]) + parseFloat(this.scoresSTD2[this.scoresSTD2.length - 1]))
-      this.scoresNegative2.push(parseFloat(this.scoresMean2[this.scoresMean2.length - 1]) - parseFloat(this.scoresSTD2[this.scoresSTD2.length - 1]))
+      var color = JSON.parse(this.ValidResultsVar[12])
 
-      this.scoresMean3.push((JSON.parse(this.ValidResultsVar[4])*100).toFixed(2))
-      this.scoresSTD3.push((JSON.parse(this.ValidResultsVar[5])*100).toFixed(2))
+      var data = []
+      var features = this.featuresReceived[0]
+      var labelsX = ['Add', 'Remove', 'Combine', 'Round']
+      for (let i=0; i< features.length; i++) {
+        data.push({
+          label: features[i],
+          values: this.valuesGlobal
+        })
+      }
 
-      this.scoresPositive3.push(parseFloat(this.scoresMean3[this.scoresMean3.length - 1]) + parseFloat(this.scoresSTD3[this.scoresSTD3.length - 1]))
-      this.scoresNegative3.push(parseFloat(this.scoresMean3[this.scoresMean3.length - 1]) - parseFloat(this.scoresSTD3[this.scoresSTD3.length - 1]))
+      var allValues = Array.prototype.concat.apply([], data.map(function(d) { return d.values }))
+      var maxWidth = d3.max(data.map(function(d) { return d.values.length }))
+      var maxR = d3.min([(width - yLabelWidth) / maxWidth, (height - xLabelHeight) / data.length]) / 2
 
-      var xaxisReversed = []
-      xaxisReversed = this.xaxis.slice().reverse()
-      xaxisReversed = this.xaxis.concat(xaxisReversed)
+      var r = function(d) {
 
-      // fill in 'text' array for hover
-      var text = this.scoresSTD.map (function(value, i) {
-          return `STD: +/-${value}`
-        })
+        var f = d3.scale.sqrt()
+            .domain([d3.min(allValues), d3.max(allValues)])
+            .rangeRound([0, maxR - padding])
 
-      var trace1 = {
-        x: this.xaxis, 
-        y: this.scoresMean, 
-        text: text,
-        line: {color: "rgb(139,69,19)"}, 
-        mode: "lines+markers", 
-        marker : {
-          symbol: 'circle' },
-        name: "Accuracy",
-        type: "scatter"
+        return f(d)
       }
 
-      var trace2 = {
-        x: xaxisReversed, 
-        y: this.scoresPositive.concat(this.scoresNegative), 
-        text: '',
-        hoverinfo: 'text',
-        fill: "tozerox", 
-        fillcolor: "rgba(139,69,19,0.1)", 
-        line: {color: "transparent"}, 
-        name: "Accuracy", 
-        showlegend: false, 
-        type: "scatter"
-      }
+      var c = d3.scale.ordinal()
+          .domain([0, 1])
+          .range(["#D3D3D3", "#e76bf3"]);
 
-      var text = this.scoresSTD2.map (function(value, i) {
-          return `STD: +/-${value}`
-      })
+      var rows = chart.selectAll('.row')
+          .data(data, function(d){ return d.label })
 
-      var trace3 = {
-        x: this.xaxis, 
-        y: this.scoresMean2, 
-        text: text,
-        line: {color: "rgb(0,176,246)"}, 
-        mode: "lines+markers", 
-        marker : {
-            symbol: 'square' },
-        name: "Precision", 
-        type: "scatter"
-      }
+      rows.enter().append('g')
+          .attr('class', 'row')
 
-      var trace4 = {
-        x: xaxisReversed, 
-        y: this.scoresPositive2.concat(this.scoresNegative2), 
-        text: '',
-        hoverinfo: 'text',
-        fill: "tozerox", 
-        fillcolor: "rgba(0,176,246,0.1)", 
-        line: {color: "transparent"}, 
-        name: "Precision", 
-        showlegend: false, 
-        type: "scatter"
-      }
-      var text = this.scoresSTD3.map (function(value, i) {
-          return `STD: +/-${value}`
-      })
-      var trace5 = {
+      rows.exit()
+          .transition()
+          .duration(duration)
+          .style('fill-opacity', 0)
+          .remove()
+
+      rows.transition()
+          .duration(duration)
+          .attr('transform', function(d, i){ return 'translate(' + yLabelWidth + ',' + (maxR * i * 2 + maxR + xLabelHeight) + ')' })
+
+      var dots = rows.selectAll('circle')
+          .data(function(d){ return d.values })
+
+      dots.enter().append('circle')
+          .attr('cy', 0)
+          .attr('r', 0)
+          .style('fill', '#ffffff')
+          .text(function(d){ return d })
+
+      dots.exit()
+          .transition()
+          .duration(duration)
+          .attr('r', 0)
+          .remove()
+
+      var previously = this.previousState
+
+      var testLoc = this.flag
+
+      dots.transition()
+          .duration(duration)
+          .attr('r', function(d){ return r(d) })
+          .attr('cx', function(d, i){ return i * maxR * 2 + maxR })
+          .style('fill', function(d){
+            if (testLoc) {
+              if (d == state) {
+                previously.push(c(color)) 
+                return c(color); 
+              } else {
+                previously.push(c(0)) 
+                return c(0)
+              }
+            } else {
+              return c(0)
+            }
+          })
+
+      this.flag = false
+      this.previousState = previously
+
+      var dotLabels = rows.selectAll('.dot-label')
+          .data(function(d){ return d.values })
+
+      var dotLabelEnter = dotLabels.enter().append('g')
+          .attr('class', 'dot-label')
+          .on('mouseover', function(d){
+              var selection = d3.select(this)
+              selection.select('rect').transition().duration(100).style('opacity', 1)
+              selection.select("text").transition().duration(100).style('opacity', 1)
+          })
+          .on('mouseout', function(d){
+              var selection = d3.select(this)
+              selection.select('rect').transition().style('opacity', 0)
+              selection.select("text").transition().style('opacity', 0)
+          })
+
+      dotLabelEnter.append('rect')
+          .style('fill', '#000000')
+          .style('opacity', 0)
+
+      dotLabelEnter.append('text')
+          .style('text-anchor', 'middle')
+          .style('fill', '#ffffff')
+          .style('opacity', 0)
+
+      dotLabels.exit().remove()
+
+      dotLabels
+          .attr('transform', function(d, i){ return 'translate(' + (i * maxR * 2) + ',' + (-maxR) + ')' })
+          .select('text')
+              .text(function(d){ return d })
+              .attr('y', maxR + 4)
+              .attr('x', maxR)
+
+      dotLabels
+          .select('rect')
+          .attr('width', maxR * 2)
+          .attr('height', maxR * 2)
+
+      var xLabels = chart.selectAll('.xLabel')
+          .data(labelsX)
+
+      xLabels.enter().append('text')
+          .attr('y', xLabelHeight)
+          .attr('transform', 'translate(0,-6)')
+          .attr('class', 'xLabel')
+          .style('text-anchor', 'middle')
+          .style('fill-opacity', 0)
+
+      xLabels.exit()
+          .transition()
+          .duration(duration)
+          .style('fill-opacity', 0)
+          .remove()
+
+      xLabels.transition()
+          .text(function (d) { return d })
+          .duration(duration)
+          .attr('x', function(d, i){ return maxR * i * 2 + maxR + yLabelWidth })
+          .style('fill-opacity', 1)
+
+      var yLabels = chart.selectAll('.yLabel')
+          .data(data, function(d){ return d.label })
+
+      yLabels.enter().append('text')
+          .text(function (d) { return d.label })
+          .attr('x', yLabelWidth)
+          .attr('class', 'yLabel')
+          .style('text-anchor', 'end')
+          .style('fill-opacity', 0)
+
+      yLabels.exit()
+          .transition()
+          .duration(duration)
+          .style('fill-opacity', 0)
+          .remove()
+
+      yLabels.transition()
+          .duration(duration)
+          .attr('y', function(d, i){ return maxR * i * 2 + maxR + xLabelHeight })
+          .attr('transform', 'translate(-6,' + maxR / 2.5 + ')')
+          .style('fill-opacity', 1)
+
+      var vert = chart.selectAll('.vert')
+          .data(labelsX)
+
+      vert.enter().append('line')
+          .attr('class', 'vert')
+          .attr('y1', xLabelHeight + borderWidth / 2)
+          .attr('stroke', '#888')
+          .attr('stroke-width', 1)
+          .style('shape-rendering', 'crispEdges')
+          .style('stroke-opacity', 0)
+
+      vert.exit()
+          .transition()
+          .duration(duration)
+          .style('stroke-opacity', 0)
+          .remove()
+
+      vert.transition()
+          .duration(duration)
+          .attr('x1', function(d, i){ return maxR * i * 2 + yLabelWidth })
+          .attr('x2', function(d, i){ return maxR * i * 2 + yLabelWidth })
+          .attr('y2', maxR * 2 * data.length + xLabelHeight - borderWidth / 2)
+          .style('stroke-opacity', function(d, i){ return i ? 1 : 0 })
+
+      var horiz = chart.selectAll('.horiz').
+          data(data, function(d){ return d.label })
+
+      horiz.enter().append('line')
+          .attr('class', 'horiz')
+          .attr('x1', yLabelWidth + borderWidth / 2)
+          .attr('stroke', '#888')
+          .attr('stroke-width', 1)
+          .style('shape-rendering', 'crispEdges')
+          .style('stroke-opacity', 0)
+
+      horiz.exit()
+          .transition()
+          .duration(duration)
+          .style('stroke-opacity', 0)
+          .remove()
+
+      horiz.transition()
+          .duration(duration)
+          .attr('x2', maxR * 2 * labelsX.length + yLabelWidth - borderWidth / 2)
+          .attr('y1', function(d, i){ return i * maxR * 2 + xLabelHeight })
+          .attr('y2', function(d, i){ return i * maxR * 2 + xLabelHeight })
+          .style('stroke-opacity', function(d, i){ return i ? 1 : 0 })
+
+      border.transition()
+          .duration(duration)
+          .attr('width', maxR * 2 * labelsX.length)
+          .attr('height', maxR * 2 * data.length)
+    },
+    initializeLinePLot () { 
+
+      Plotly.purge('LinePlot')
+      this.scoresMean = []
+      this.scoresSTD = []
+      this.scoresMeanBest = []
+      this.scoresSTDBest = []
+
+      this.xaxis.push('Accuracy') 
+      this.xaxis.push('Precision') 
+      this.xaxis.push('Recall') 
+
+      this.scoresMean.push((JSON.parse(this.ValidResultsVar[0])*100).toFixed(2))
+      this.scoresSTD.push((JSON.parse(this.ValidResultsVar[1])*100).toFixed(2))
+      this.scoresMean.push((JSON.parse(this.ValidResultsVar[2])*100).toFixed(2))
+      this.scoresSTD.push((JSON.parse(this.ValidResultsVar[3])*100).toFixed(2))
+      this.scoresMean.push((JSON.parse(this.ValidResultsVar[4])*100).toFixed(2))
+      this.scoresSTD.push((JSON.parse(this.ValidResultsVar[5])*100).toFixed(2))
+
+      this.scoresMeanBest.push((JSON.parse(this.ValidResultsVar[6])*100).toFixed(2))
+      this.scoresSTDBest.push((JSON.parse(this.ValidResultsVar[7])*100).toFixed(2))
+      this.scoresMeanBest.push((JSON.parse(this.ValidResultsVar[8])*100).toFixed(2))
+      this.scoresSTDBest.push((JSON.parse(this.ValidResultsVar[9])*100).toFixed(2))
+      this.scoresMeanBest.push((JSON.parse(this.ValidResultsVar[10])*100).toFixed(2))
+      this.scoresSTDBest.push((JSON.parse(this.ValidResultsVar[11])*100).toFixed(2))   
+
+      var trace1 = {
         x: this.xaxis, 
-        y: this.scoresMean3, 
-        text: text,
-        line: {color: "rgb(231,107,243)"}, 
-        mode: "lines+markers", 
-        marker : {
-            symbol: 'triangle-up' },
-        name: "Recall", 
-        type: "scatter"
+        y: this.scoresMean, 
+        error_y: {
+          type: 'data',
+          array: this.scoresSTD,
+          visible: true
+        },
+        marker: {
+          color: "rgb(0,255,255)"
+        },
+        name: "Current",
+        type: "bar"
       }
 
-      var trace6 = {
-        x: xaxisReversed, 
-        y: this.scoresPositive3.concat(this.scoresNegative3), 
-        text: '',
-        hoverinfo: 'text',
-        fill: "tozerox", 
-        fillcolor: "rgba(231,107,243,0.1)", 
-        line: {color: "transparent"}, 
-        name: "Recall", 
-        showlegend: false, 
-        type: "scatter"
+      var trace2 = {
+        x: this.xaxis, 
+        y: this.scoresMeanBest, 
+        error_y: {
+          type: 'data',
+          array: this.scoresSTDBest,
+          visible: true
+        },
+        marker: {
+          color: "rgb(231,107,243)"
+        },
+        name: "Best", 
+        type: "bar"
       }
 
-      var DataforLinePlot = [trace1, trace2, trace3, trace4, trace5, trace6];
+      var DataforLinePlot = [trace1, trace2];
 
       var layout = {
         xaxis: {
             gridcolor: "rgb(230,230,230)",
-            title: 'Step of the feature engineering',
+            title: 'Validation metric',
             tickformat: '.0f',
-            range: [0, this.scoresMean.length + 5], 
             showgrid: true, 
             showline: false, 
             showticklabels: true, 
@@ -170,22 +358,32 @@ export default {
             ticks: "outside", 
             zeroline: false
         },
+        barmode: 'group',
         autosize: false,
-        width: '1230',
-        height: '232',
+        width: '400',
+        height: '350',
         margin: {
           l: 55,
-          r: 20,
-          b: 45,
+          r: 5,
+          b: 50,
           t: 5,
           pad: 5
         },
+        legend:{
+          xanchor:"center",
+          yanchor:"top",
+          y:-0.2, // play with it
+          x:0.5,   // play with it
+          orientation: "h"
+        }
       }
       var config = {displayModeBar: false, scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage'], responsive: true}
       Plotly.newPlot('LinePlot', DataforLinePlot, layout, config)
       
     },
     reset () {
+      var svg = d3.select("#HistoryPlot");
+      svg.selectAll("*").remove();
       Plotly.purge('LinePlot')
     },
   },
@@ -193,6 +391,9 @@ export default {
     EventBus.$on('finalResults', data => { this.ValidResultsVar = data })
     EventBus.$on('finalResults', this.initializeLinePLot)
     
+    EventBus.$on('quad', data => { this.featuresReceived = data })
+    EventBus.$on('finalResults', this.HistoryPun)
+
     EventBus.$on('reset', this.reset)
   }
 }
@@ -202,6 +403,9 @@ export default {
 
 text {
   font-family: sans-serif;
+  fill: black;
+  font: 16px sans-serif;
+  cursor: default;
 }
 
 svg {
@@ -216,4 +420,12 @@ svg {
   display: none !important;
 }
 
+body {
+  background-color: #fff;
+}
+
+.dot-label text {
+  font-size: 12px;
+}
+
 </style>
\ No newline at end of file
diff --git a/run.py b/run.py
index 3464c2d..d741fc5 100644
--- a/run.py
+++ b/run.py
@@ -144,9 +144,6 @@ def retrieveFileName():
     global previousState
     previousState = []
 
-    global previousStateActive
-    previousStateActive = []
-
     global yData
     yData = []
 
@@ -405,6 +402,8 @@ def executeModel(exeCall):
     global featureImportanceData
     global XData
     global XDataStored
+    global previousState
+    scores = []
 
     if (keyFirstTime):
         create_global_function()
@@ -414,7 +413,7 @@ def executeModel(exeCall):
         bestParams = svc_bayesopt.max['params']
         estimator = SVC(C=bestParams.get('C'), gamma=bestParams.get('gamma'), probability=True, random_state=RANDOM_SEED)
         featureImportanceData = estimatorFeatureSelection(estimator)
-        keyFirstTime = False
+
     XData = XDataStored.copy()
     if (len(exeCall) != 0):
         XData = XData.drop(XData.columns[exeCall], axis=1)
@@ -427,8 +426,36 @@ def executeModel(exeCall):
     inputsSc = ['accuracy','precision_macro','recall_macro']
 
     flat_results = Parallel(n_jobs=num_cores)(delayed(solve)(estimator,XData,yData,crossValidation,item,index) for index, item in enumerate(inputsSc))
-    scores = [item for sublist in flat_results for item in sublist]
-    
+    scoresAct = [item for sublist in flat_results for item in sublist]
+
+    howMany = 0
+
+    if (keyFirstTime):
+        previousState = scoresAct
+        keyFirstTime = False
+        howMany = 3
+    else:
+        if ((scoresAct[0]-scoresAct[1]) > (previousState[0]-previousState[1])):
+            previousState[0] = scoresAct[0]
+            previousState[1] = scoresAct[1]
+            howMany = howMany + 1
+        elif ((scoresAct[2]-scoresAct[3]) > (previousState[2]-previousState[3])):
+            previousState[2] = scoresAct[2]
+            previousState[3] = scoresAct[3]
+            howMany = howMany + 1
+        elif ((scoresAct[4]-scoresAct[5]) > (previousState[4]-previousState[5])):
+            previousState[4] = scoresAct[4]
+            previousState[5] = scoresAct[5]
+            howMany = howMany + 1
+        else:
+            pass
+
+    scores = scoresAct + previousState
+    if (howMany == 3):
+        scores.append(1)
+    else:
+        scores.append(0)
+
     return 'Everything Okay'
 
 def estimatorFeatureSelection(clf):