From cf96d7ce99731303efe76e282112dc8cfd0080ea Mon Sep 17 00:00:00 2001
From: Angelos Chatzimparmpas <angelos.chatzimparmpas@gmail.com>
Date: Wed, 9 Dec 2020 15:25:13 +0100
Subject: [PATCH] new

---
 __pycache__/run.cpython-38.pyc                | Bin 20262 -> 21191 bytes
 frontend/src/components/DataSetSlider.vue     |   4 +-
 frontend/src/components/DataSpace.vue         |   6 +-
 .../src/components/FeatureSpaceDetail.vue     |  49 ++++-
 .../src/components/FeatureSpaceOverview.vue   |  19 +-
 frontend/src/components/Main.vue              |  23 ++
 frontend/src/components/Results.vue           | 206 ++++++++++++------
 frontend/src/main.js                          |   4 +-
 run.py                                        |  43 +++-
 9 files changed, 264 insertions(+), 90 deletions(-)

diff --git a/__pycache__/run.cpython-38.pyc b/__pycache__/run.cpython-38.pyc
index 2e3cb2110b8121acfaa0dc0b25fae120e7fa583b..1cc717511710f172abc28eb05676d0f04101492c 100644
GIT binary patch
delta 5863
zcma)AdvFuS8NWSACs~$lVGI~!{J`cRjNf2hj(OM^5@Q0fL&-HnK5NfHaMFpr6JR1&
zO(4y*)D2{rrjJYlZPJ#eO*%C*ZPKP8P13aKBT3U~(raGipAJd?=ro<_w9}dN`&LFM
z!f7qd{cdmf`@Y@%Ui;mB>ml;uqonlKk`liJzmhjz3Gcc8OldVS&NN*tSsbrXYluW8
z>Nggj`D;UFUc6Clj4xG}icYstp;o|Psj)1+TwN~u%8V89kQySAPV|*0h}uMhdegyG
zbWXRVD|!?3H0wUSiI&s3v?4}ggwC6k)fT;o&Zi4#WmKjMCuQJhrB!qht%m2tlQONL
zwI`($Bm?YiGmzHhk=D~CND7qgGf+0<Q8v=0)07=_8C`x-QakAi8iM<3x{@}*eGOej
zo8jIi7SuvB*H+X@+mKmZOWSD&kgTJfbT!=9&oJqlyh*$0+UZF*2%+op#@5pfLgq#>
zvN3O@o8EvULA9Iq&`mJS4b(j(g*NlOax_>LH>qxfE#1%~cFauhr{n__vg6yWG0iY^
z!|}qfHm*}%@4DhAVCG)9tTeB1N2{Wewh%77FM_KYuEo>~vVHsscjY1vP#&K<d_b>b
zx~1E7M>VUCnhCu=R5Nwf^8n#ny*rg2AYwiIthY}Iq2wO^ws&p7?VA1*ws~r)uTI`m
zgLI1#Y7uZHjytYv3099ypB9Ovm=+m#%9Biw#4OlL_^2L>9<X)lltCA4=UPYcSUYd^
z)Kz=fHk8(nupMCs!i@k|WPaX%EYpb34G2pSmLse{z{Rp92+I&wA~Yea0#M7wVur1=
zKF!wpV+qY*tvJ+z(2UTI(1y@~(21}bVGTkTfaA3yCYu{eMAd*{n#q1$vs0i)ww6Cs
zyo0Rce<^ONUysxq5H=!<f5_Gn5q(&<Y}SpvH}K9tPt72XxyND&%636hEzXkl3c8#5
zeSs0Olm9KSwmxeMWZZ--L8jX*rXSJ!V}`y<i|b$DJ4!f-PQ6)@Aq`uQZYu(MgcC?5
z4O62!#XYlm*gwEOQ`X#pLN5@990O2bC<;QwL}CtKx1q&Hsn)X*EczjkO2?P*SA*63
zUu8WjVkkw>9>kWBdqh^20O$rTW^yvWt0lMi3$i1(v^m5qU~v51M$ED!W<1%`$Da$X
zBQ^X#!4;Vy6gG@-E5bg6+W;JQ#7vGmKC0_U(Q+Ts$1Qfd7_v-eJN_+(F)Vguu{)4W
zD18J8<Ro>9g!vgL&M6vWW;{$|5j*QRdG3Pi4h7f&xT)p&N`w%!bjtRlxMCD_i*BV1
z+j9IU2mD)O<LofMJZDGNa6&y<!&!QQ4x2+dJCgOmCVo@-0J(SS%jJ`@lCw=H#QwjA
z4`(%e=e!U}f;~f>v*5w#WG1Ye?MB#x_G!r3hgsNJV9X=XH_p}hXcU-bHY<A|yRunQ
ze<kNBvslT){Pco(nOk5@p-Ps<<xT*oMf=bUB5Xc|oktOlA&er7BcOY*;|RhdMzHl6
z0JUg5$BZUrcOnRf5ve54BVfSs9o2Ya<<jaKkhLt&`eOFaBJW|YSGEq`jm;AXClT%e
zP%E}DritmMT}CivaQrTW&mjnV<a~xjpl^g<uAC$hZZ5nV%<%Vx%QBc9Ll94qBWy1;
zRlg0nC5)L#5BZoM<%pD6f~{-&5D839Bv~KwyV)0UcoM+zi1Wr#Ad`VFXBQz>A{@5}
zq{rf#ZL(*<T$X~VRg!~pxy(4ULPXs1xU#JL>8eGUXOKe{4D2l2a6`GD7g~5>s<M6z
zU`r<?s5uDy<p<>n$tJd(mTVVwO}ZvXnjCafH}z13dM8~(f@cr)EtDo?TS?33ytL>%
z5qJN2LW_YbFv*7&HD*d^>7++1rDYRt8l-b*dDJ!GvCGnKI(L%L3OetkWCzop6Qoa6
z850T?E+?h5g3sC<S_x<8!d)Rb+T2_H!Fyd*n_@vwZ%DqTKv2P#VEI?j>#kG)sIF9G
zG~`l?V~H65(W076PS?ZvidT!1%pBE5V@Av#7b4UWI4CibgvAI<avz9ul(=pmFe$5n
z2XQ#6W!DbWxE5ii8kjy!#Zw5fdLn$#9JL}~07*hG!=DQ-A6yvh7M_@CX@A}A@&o}L
zg0@e9zHOK7wmoS%O-?9#!5W8UDh){@zl0Q44m^&>G7ZRKX#4{A3b~k#y*k1eg7AeN
z;pJIp>W=CO{aBLqyoIje1{$}dNXKjSV|pZI>w{SNv~(LLlm=E$OO86b51_^$ZUZ@o
z;IgU!qPUTAbdf%3zi&cL%V%7N1Baoa$}V6hE@OIes@F=5;+d1bKo}OsE5nrcHm(fS
zq)4*3j@RX{j$aN|H2%A68>nF1J^-~q-OY!z@ld&Na27yOLN&|zhU)5m)ioB&J6}}q
zw1HVE5{j4%jPK4GeK&Xmn}hv#062;WX)EMq5Age{muJ+XL@FM}Ft=1+ERjsv)=)$Z
zj2W68&W5g)7lo*9b_(Dn+)gz#Bw6wJNht{uKdB}Gz;fA5{BkuZl?7!)L8|E=DgZAL
zomkFfqSAz7O9x3BLJu6o1rY>+I;l)})5<wH?LFr@FP$e4nAs=y)hCD_*Df{yBESUb
z&mwKHuVROX6~j#}0~fZe@DUBFUfduXK{8BKs>`xz$fvrkOvD%~@He#xslfy{CLA{w
zWZ4eg+G$2qx2?y)&rpy6p^&e^<9nzOOp_9EllgKfZXf%P&uOJ_l(gbOeM|OOk090b
zk3T=K?6$yO&4^tch44HFgA9EU3Mn5LA!#Noy<k!&h!RD~IW6{ss~#qKWJ&(W?P8C7
z^GdY~^85R>cl#a$ao|oNZr8OeKu^e?Y2SyI<6&ANs<SYEvaYT2H1@a*Gm4v!b~qlu
z_BJ-cN&TnENxr|nar2`<q6QDAGzyINUX8`HQ9}p!F^m+J<AqBt9R@mU%w&-8VfY{X
z+4}wD(p2q|F8?aj;sqkA>I-r<&`&~Ffd~;oef+LfvFw@tb0m506X>?_SDQD@g06p-
zblZ_`i!k^9oOcJDNh0}Rh>Q1@{tHA^tR$9qtcLGt+1e|%E3>(<bVmWtOhKKG`v6PJ
z``Yt-3UkItP9Tv#0wswIcoWoE6}+}>*;28hU!W3l5;_VbjLZDpzO6G+b{0_H|A~~V
z3n(8GlpQn7zNUck`TX_6OTy8%hKz78kA`K7qofkC!zrC<xQ8+T#|z$mKuhXQ2_(3%
zebsHQRc4M7F%uEZW<Nw8JQf{=GBcUb90jW27^w3H*y#~s*waWA6jZi}`8n*kZ7pVq
zRN#1RGknkjf5kTe$3s)`q!k)s-$AAe2;W6`4B>kSSWd7f5uQT$3BpeSRPR{!osIo$
z>R9`Wu9d>d9`-9F_zlAE5MDv}J%Y#@7opWO6<hNHAs44w*PikhZ^5yx2)+D;ElUD*
z(7e(CFwC9>t5@>V%{8;|>oDKBH9QNt5#H82n>f*CNjHjgvxt+3>$*5$&*QFZ5MH?I
z-(4T~F!oCv6@5Z|7$A4%Btd|%myjSA9<>GRzb;_sTefY_Dk&F2?6(Cp@OXj0)7M)_
z_wx00myj+~Fz2h+)4l$&C5x;aVjiT!!egel)9mZT!#FyEuoB@Cf+)j9AiRc;f54KA
z{SliOW$bl?HxP0G#{Ptl4ni6MUv}7^5ipe4n+R_qU=Xpl5pp5K-oeLr0UTdaiyZ1T
z8Do!Q--`(E0eG{oIhXl|{r$BfTit_0GsX?yx4nAajG;F5?d^SJeFGe4tPue|Bf_^A
z1o(IeA7v1PqT&1D^al+8ke-A*f~QNvlyc*1L|Fx6#~b*$flB_*oAy>cf$P8{m3;$2
zunXA469ZLqTVP03XSuVpnSXuYj_xL$VMaEP0$*X^2u3yN#@g!ywD2`M`-fvd2bKH?
z-dw5&Q&78FoXvY-Q7|5Yq5SpWBN}ZpN)!bJd?EA6KB%okf2fDQytBV}AJU1}($Dj{
z!I}~@r|N-PE;-Il^MS$DRbK0mp=&IWEryCl;oF`SHj_3B@Kb|}l@b(C${!zGM9TO}
zgSEw&CbNZNIe&j}Wd_eEb%AATwk2NWtQOlejcLrLUSBwzfR7&Gu;bE_Ns*h!Vo|07
zCw^057L*ny6yR(#%8nx3ix5FLi*O17>m>FF!X<=@2&=kK_00$^2*QuAnJsHOAas1)
zu)36?_W+e-CHXVER&<hp93(zDKms10?1xqb6l6gX2n)<eb>iOX3;T+FmA)dVU46Xt
H=F0y9$0A=|

delta 4837
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
HNB;i-&m>&1

diff --git a/frontend/src/components/DataSetSlider.vue b/frontend/src/components/DataSetSlider.vue
index 95bdb37..9e05e05 100644
--- a/frontend/src/components/DataSetSlider.vue
+++ b/frontend/src/components/DataSetSlider.vue
@@ -14,7 +14,7 @@
         <button class="btn-outline-success"
         id="initializeID"
         v-on:click="initialize">
-        <font-awesome-icon icon="search" />
+        <font-awesome-icon icon="play-circle" />
         {{ searchText }}
         </button>
         <button class="btn-outline-danger"
@@ -46,7 +46,7 @@ export default {
   data () {
     return {
       defaultDataSet: 'IrisC', // default value for the first data set
-      searchText: 'Feature exploration',
+      searchText: 'Feature search',
       resetText: 'Factory reset',
       dataset: 'Data set'
     }
diff --git a/frontend/src/components/DataSpace.vue b/frontend/src/components/DataSpace.vue
index e6fb05c..639b7d5 100644
--- a/frontend/src/components/DataSpace.vue
+++ b/frontend/src/components/DataSpace.vue
@@ -31,10 +31,10 @@ export default {
       var rectWidth = 20
       var rectHeight = 10
       
-      var nodeR = 8
+      var nodeR = 6
       var nodeStrokeW = 1.5
       
-      var scale = 1
+      var scale = 0.8
 
       var predictions = JSON.parse(this.dataInstances[2])
 
@@ -79,7 +79,7 @@ export default {
       // the range is set in such a way that portions of nodes are not drawn outside the g
       var xScale = d3.scale.linear()
         .domain(extent)
-        .range([0, width])
+        .range([50, width-50])
         
       var norm = d3.random.normal(0, 4.0)
       
diff --git a/frontend/src/components/FeatureSpaceDetail.vue b/frontend/src/components/FeatureSpaceDetail.vue
index 4683e8d..cbf8d58 100644
--- a/frontend/src/components/FeatureSpaceDetail.vue
+++ b/frontend/src/components/FeatureSpaceDetail.vue
@@ -1,6 +1,21 @@
 <template>
   <div class="column">
-    <div id="FeatureGraph"></div>
+    <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: 66px; max-height: 66px; margin-top: 20px">
+          <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" >
+                <tbody>
+                  <tr>
+                    <td scope="row"><button class="btn btn-info active" onclick="setLayerProj();" style="margin-left: -1px !important" ><font-awesome-icon icon="search" style="margin-right: 5px"/>Feature exploration</button></td>
+                    <td><button class="btn btn-info" onclick="setLayerComp();" style="margin-left: -1.4px"><font-awesome-icon icon="balance-scale-left" style="margin-right: 5px" />Feature comparison</button></td>
+                    <td scope="row"><button class="btn btn-info" onclick="setLayerSche();" style="margin-left: -2px !important"><font-awesome-icon icon="wrench" style="margin-right: 5px" />Feature engineering</button></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+      </div>
   </div>
 </template>
 
@@ -408,8 +423,8 @@ export default {
         var svg = d3.select("#FeatureGraph");
         svg.selectAll("*").remove();
 
-        var width = 1000;
-        var height = 500;
+        var width = 1230;
+        var height = 504;
 
         var numTicks = 200;
 
@@ -669,7 +684,7 @@ export default {
                     it.style.visibility = "hidden";
                   })
                 }
-
+                console.log(d3.zoom())
                 //Zoom functions 
                 function zoom_actions(){
                   svg.attr("transform", d3.event.transform)
@@ -825,7 +840,31 @@ svg {
 
 .column {
   float: left;
-  margin: 0 10px;
 }
 
+
+.table {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+table td {
+  vertical-align: middle !important;
+  padding: 2 !important;
+  margin: 0 !important;
+}
+
+.centerTable {
+  text-align: center; 
+}
+
+/* Dropdown Button */
+.dropbtn {
+  background-color: rgb(185, 185, 185);
+  color: black;
+  padding: 14px;
+  border: none;
+  cursor: pointer;
+  }
+
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/FeatureSpaceOverview.vue b/frontend/src/components/FeatureSpaceOverview.vue
index 68386d1..8c838b0 100644
--- a/frontend/src/components/FeatureSpaceOverview.vue
+++ b/frontend/src/components/FeatureSpaceOverview.vue
@@ -39,7 +39,7 @@
       </div>
     </div>
     <div class="tool">
-      <div class="tlabel" style="text-align:left" title="Change Root">&nbsp;Navigation</div>
+      <div class="tlabel" style="text-align:left" title="Change Root">&nbsp;Navigate</div>
       <div id="selection" class="tlabel"></div>
     </div>
   </div>
@@ -66,7 +66,8 @@ export default {
     return {
       colorsReceive: [],
       activeLeaf: -1,
-      overallData: []
+      overallData: [],
+      keepRoot: 1
     }
   },
   methods: {
@@ -258,7 +259,8 @@ export default {
         var root = treeData;
         root.x0 = curY;
         root.y0 = 0;
-        selectNode(treeData.children[1]); // current selected node
+        console.log(treeData.children)
+        selectNode(treeData.children[this.keepRoot]); // current selected node
 
         // Collapse all children of root's children before rendering
         // if (root.children) {
@@ -588,24 +590,31 @@ export default {
               ')translate(' + curX + ' ' + curY + ')scale(' + curZ + ')');
           update(root);
         }
-
+        
         function click(d) { // select node
           if (d3.event.defaultPrevented || d === curNode) { return; } // suppressed
           d3.event.preventDefault();
           selectNode(d);
           update(d);
           var sendSliceID = 4
+          var rootID = 1
           if (d.name == "Best") {
             sendSliceID = 0
+            rootID = 2
           } else if (d.name == "Good") {
             sendSliceID = 1
+            rootID = 3
           } else if (d.name == "Bad") {
             sendSliceID = 2
+            rootID = 4
           } else if (d.name == "Worst") {
             sendSliceID = 3
+            rootID = 0
           } else {
             sendSliceID = 4
+            rootID = 1
           }
+          EventBus.$emit('keepRootFun', rootID)
           EventBus.$emit('updateSlice', sendSliceID)
         }
 
@@ -911,6 +920,8 @@ export default {
       }
     },
   mounted () {
+
+    EventBus.$on('keepRootFun', data => { this.keepRoot = data })
     EventBus.$on('quad', data => { this.overallData = data })
 
     EventBus.$on('overviewCall', data => { this.colorsReceive = data })
diff --git a/frontend/src/components/Main.vue b/frontend/src/components/Main.vue
index 07053d7..54b97b3 100755
--- a/frontend/src/components/Main.vue
+++ b/frontend/src/components/Main.vue
@@ -107,6 +107,7 @@ export default Vue.extend({
   },
   data () {
     return {
+      ValidResults: [],
       correlResulTranformed: [],
       PositiveValue: 75,
       NegativeValue: 25,
@@ -398,6 +399,7 @@ export default Vue.extend({
           console.log('Server successfully send the correlation matrices!')
           this.correlResul = response.data.correlResul
           EventBus.$emit('quad', this.correlResul)
+          this.returnResults()
         })
         .catch(error => {
           console.log(error)
@@ -424,6 +426,27 @@ export default Vue.extend({
       .catch(error => {
         console.log(error)
       })
+  },
+  returnResults () {
+    const path = `http://127.0.0.1:5000/data/sendResults`
+
+    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.get(path, axiosConfig)
+      .then(response => {
+        console.log('Server successfully send the predictive results!')
+        this.ValidResults = response.data.ValidResults
+        EventBus.$emit('finalResults', this.ValidResults)
+      })
+      .catch(error => {
+        console.log(error)
+      })
   }
   },
   created () {
diff --git a/frontend/src/components/Results.vue b/frontend/src/components/Results.vue
index 2a64408..e6b7730 100644
--- a/frontend/src/components/Results.vue
+++ b/frontend/src/components/Results.vue
@@ -12,72 +12,167 @@ export default {
   data () {
     return {
       dataInstances: '',
+      NumberofExecutions: 0,
       PositiveValue: 75,
       NegativeValue: 25,
+      ValidResultsVar: [],
+      scoresMean: [],
+      scoresSTD: [],
+      scoresPositive: [], 
+      scoresNegative: [],
+      scoresMean2: [],
+      scoresSTD2: [],
+      scoresPositive2: [], 
+      scoresNegative2: [],
+      scoresMean3: [],
+      scoresSTD3: [],
+      scoresPositive3: [], 
+      scoresNegative3: [],
+      xaxis: [],
     }
   },
   methods: {
     initializeLinePLot () { 
+      this.NumberofExecutions ++ 
+      this.xaxis.push(this.NumberofExecutions) 
 
-      Plotly.purge('LinePlot')  
+      // 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))
+
+      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]))
+
+      this.scoresMean2.push((JSON.parse(this.ValidResultsVar[2])*100).toFixed(2))
+      this.scoresSTD2.push((JSON.parse(this.ValidResultsVar[3])*100).toFixed(2))
+
+      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]))
+
+      this.scoresMean3.push((JSON.parse(this.ValidResultsVar[4])*100).toFixed(2))
+      this.scoresSTD3.push((JSON.parse(this.ValidResultsVar[5])*100).toFixed(2))
+
+      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 xaxisReversed = []
+      xaxisReversed = this.xaxis.slice().reverse()
+      xaxisReversed = this.xaxis.concat(xaxisReversed)
+
+      // fill in 'text' array for hover
+      var text = this.scoresSTD.map (function(value, i) {
+          return `STD: +/-${value}`
+        })
 
       var trace1 = {
-        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 
-        y: [12, 22, 32, 45, 56, 67, 77, 89, 98, 100, 99, 88, 78, 66, 55, 44, 33, 23, 18, 8], 
-        fill: "tozerox", 
-        fillcolor: "rgba(160,82,45,0.2)", 
-        line: {color: "transparent"}, 
-        name: "Accuracy", 
-        showlegend: false, 
+        x: this.xaxis, 
+        y: this.scoresMean, 
+        text: text,
+        line: {color: "rgb(139,69,19)"}, 
+        mode: "lines+markers", 
+        marker : {
+          symbol: 'circle' },
+        name: "Accuracy",
         type: "scatter"
-      };
+      }
+
       var trace2 = {
-        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 
-        y: [55, 29, 63, 79, 59, 29, 79, 48, 58, 53, 50, 40, 40, 70, 24, 50, 77, 60, 25, 47], 
+        x: xaxisReversed, 
+        y: this.scoresPositive.concat(this.scoresNegative), 
+        text: '',
+        hoverinfo: 'text',
         fill: "tozerox", 
-        fillcolor: "rgba(0,176,246,0.2)", 
-        line: {color: "transparent"}, 
-        name: "Precision", 
+        fillcolor: "rgba(139,69,19,0.1)", 
+        mode: "lines", 
+        name: "Accuracy", 
         showlegend: false, 
         type: "scatter"
-      };
+      }
+
+      var text = this.scoresSTD2.map (function(value, i) {
+          return `STD: +/-${value}`
+      })
+
       var trace3 = {
-        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 
-        y: [100, 85, 68, 46, 25, 30, 29, 49, 27, 94, 87, 18, 30, 25, 25, 17, 30, 55, 77, 77], 
-        fill: "tozerox", 
-        fillcolor: "rgba(231,107,243,0.2)", 
-        line: {color: "transparent"}, 
-        name: "Recall", 
-        showlegend: false, 
+        x: this.xaxis, 
+        y: this.scoresMean2, 
+        text: text,
+        line: {color: "rgb(0,176,246)"}, 
+        mode: "lines+markers", 
+        marker : {
+            symbol: 'square' },
+        name: "Precision", 
         type: "scatter"
-      };
+      }
+
       var trace4 = {
-        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
-        y: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100], 
-        line: {color: "rgb(160,82,45)"}, 
+        x: xaxisReversed, 
+        y: this.scoresPositive2.concat(this.scoresNegative2), 
+        text: '',
+        hoverinfo: 'text',
+        fill: "tozerox", 
+        fillcolor: "rgba(0,176,246,0.1)", 
         mode: "lines", 
-        name: "Accuracy", 
+        name: "Precision", 
+        showlegend: false, 
         type: "scatter"
-      };
+      }
+      var text = this.scoresSTD3.map (function(value, i) {
+          return `STD: +/-${value}`
+      })
       var trace5 = {
-        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
-        y: [50, 26, 59, 75, 50, 25, 75, 45, 55, 50], 
-        line: {color: "rgb(0,176,246)"}, 
-        mode: "lines", 
-        name: "Precision", 
+        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"
-      };
+      }
+
       var trace6 = {
-        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
-        y: [100, 80, 60, 40, 20, 28, 20, 40, 20, 90], 
-        line: {color: "rgb(231,107,243)"}, 
+        x: xaxisReversed, 
+        y: this.scoresPositive3.concat(this.scoresNegative3), 
+        text: '',
+        hoverinfo: 'text',
+        fill: "tozerox", 
+        fillcolor: "rgba(231,107,243,0.1)", 
         mode: "lines", 
         name: "Recall", 
+        showlegend: false, 
         type: "scatter"
-      };
-      var data = [trace1, trace2, trace3, trace4, trace5, trace6];
+      }
+
+      var DataforLinePlot = [trace1, trace2, trace3, trace4, trace5, trace6];
+
       var layout = {
-        height: '235',
+        xaxis: {
+            gridcolor: "rgb(230,230,230)",
+            title: 'Step of the feature engineering',
+            tickformat: '.0f',
+            range: [0, this.scoresMean.length + 10], 
+            showgrid: true, 
+            showline: false, 
+            showticklabels: true, 
+            tickcolor: "rgb(230,230,230)", 
+            ticks: "outside", 
+            zeroline: false
+        }, 
+        yaxis: {
+            gridcolor: "rgb(230,230,230)", 
+            title: 'Performance (%)',
+            showgrid: true, 
+            showline: false, 
+            showticklabels: true, 
+            tickcolor: "rgb(230,230,230)", 
+            ticks: "outside", 
+            zeroline: false
+        },
+        autosize: false,
+        width: '1230',
+        height: '232',
         margin: {
           l: 55,
           r: 20,
@@ -85,36 +180,19 @@ export default {
           t: 5,
           pad: 5
         },
-        xaxis: {
-          title: "Step of feature engeering",
-          gridcolor: "rgb(230,230,230)", 
-          range: [1, 10], 
-          showgrid: true, 
-          showline: false, 
-          showticklabels: true, 
-          tickcolor: "rgb(230,230,230)", 
-          ticks: "outside", 
-          zeroline: false
-        }, 
-        yaxis: {
-          title: "Performance (%)",
-          gridcolor: "rgb(230,230,230)", 
-          showgrid: true, 
-          showline: false, 
-          showticklabels: true, 
-          tickcolor: "rgb(230,230,230)", 
-          ticks: "outside", 
-          zeroline: false
-        }
-      };
-      Plotly.newPlot('LinePlot', data, layout);
+      }
+      var config = {displayModeBar: false, scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage'], responsive: true}
+      Plotly.newPlot('LinePlot', DataforLinePlot, layout, config)
+      
     },
     reset () {
       Plotly.purge('LinePlot')
     },
   },
   mounted () {
-    this.initializeLinePLot()
+    EventBus.$on('finalResults', data => { this.ValidResultsVar = data })
+    EventBus.$on('finalResults', this.initializeLinePLot)
+    
     EventBus.$on('reset', this.reset)
   }
 }
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 922450f..233f284 100755
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,10 +6,10 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
 import router from './router'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faDna, faSearch, faTrash} from '@fortawesome/free-solid-svg-icons'
+import { faDna, faSearch, faTrash, faBalanceScaleLeft , faWrench, faPlayCircle } from '@fortawesome/free-solid-svg-icons'
 import bFormSlider from 'vue-bootstrap-slider'
 
-library.add(faDna, faSearch, faTrash)
+library.add(faDna, faSearch, faTrash, faBalanceScaleLeft, faWrench, faPlayCircle)
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 
diff --git a/run.py b/run.py
index 22d5790..3a52fda 100644
--- a/run.py
+++ b/run.py
@@ -15,12 +15,16 @@ import multiprocessing
 from joblib import Memory
 
 from sklearn.svm import SVC
+from sklearn import model_selection
 from bayes_opt import BayesianOptimization
 from sklearn.model_selection import cross_validate
 from sklearn.model_selection import cross_val_predict
 from sklearn.preprocessing import OneHotEncoder
 from sklearn.feature_selection import mutual_info_classif
 
+from joblib import Parallel, delayed
+import multiprocessing
+
 from statsmodels.stats.outliers_influence import variance_inflation_factor
 from statsmodels.tools.tools import add_constant
 
@@ -106,7 +110,7 @@ def reset():
     all_classifiers = []
 
     global crossValidation
-    crossValidation = 10
+    crossValidation = 5
     
     # models
     global KNNModels
@@ -114,12 +118,6 @@ def reset():
     global RFModels
     RFModels = []
 
-    global scoring
-    scoring = {'accuracy': 'accuracy', 'precision_micro': 'precision_micro', 'precision_macro': 'precision_macro', 'precision_weighted': 'precision_weighted', 'recall_micro': 'recall_micro', 'recall_macro': 'recall_macro', 'recall_weighted': 'recall_weighted', 'roc_auc_ovo_weighted': 'roc_auc_ovo_weighted'}
-
-    global loopFeatures
-    loopFeatures = 2
-
     global results
     results = []
 
@@ -462,18 +460,43 @@ def executeModel():
     create_global_function()
     global estimator
     global yPredictProb
+    global scores
 
     params = {"C": (0.0001, 10000), "gamma": (0.0001, 10000)}
-    svc_bayesopt = BayesianOptimization(estimator, params)
-    svc_bayesopt.maximize(init_points=5, n_iter=25, acq='ucb')
+    svc_bayesopt = BayesianOptimization(estimator, params, random_state=RANDOM_SEED)
+    svc_bayesopt.maximize(init_points=120, n_iter=20, acq='ucb')
     bestParams = svc_bayesopt.max['params']
     estimator = SVC(C=bestParams.get('C'), gamma=bestParams.get('gamma'), probability=True, random_state=RANDOM_SEED)
     estimator.fit(XData, yData)
     yPredict = estimator.predict(XData)
     yPredictProb = cross_val_predict(estimator, XData, yData, cv=crossValidation, method='predict_proba')
-    
+
+    num_cores = 1
+    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]
+
     return 'Everything Okay'
 
+def solve(sclf,XData,yData,crossValidation,scoringIn,loop):
+    scoresLoc = []
+    temp = model_selection.cross_val_score(sclf, XData, yData, cv=crossValidation, scoring=scoringIn, n_jobs=-1)
+
+    scoresLoc.append(temp.mean())
+    scoresLoc.append(temp.std())
+
+    return scoresLoc
+
+@app.route('/data/sendResults', methods=["GET", "POST"])
+def sendFinalResults():
+    global scores
+
+    response = {    
+        'ValidResults': scores
+    }
+    return jsonify(response)
+
 def Transformation(quadrant1, quadrant2, quadrant3, quadrant4, quadrant5):
 
     XDataNumeric = XData.select_dtypes(include='number')