new

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'
     }

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)
       

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 width = 1230;
-        var height = 500;
+        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>

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 })

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 () {

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], 
+        x: this.xaxis, 
-        y: [12, 22, 32, 45, 56, 67, 77, 89, 98, 100, 99, 88, 78, 66, 55, 44, 33, 23, 18, 8], 
+        y: this.scoresMean, 
-        fill: "tozerox", 
+        text: text,
-        fillcolor: "rgba(160,82,45,0.2)", 
+        line: {color: "rgb(139,69,19)"}, 
-        line: {color: "transparent"}, 
+        mode: "lines+markers", 
-        name: "Accuracy", 
+        marker : {
-        showlegend: false, 
+          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], 
+        x: xaxisReversed, 
-        y: [55, 29, 63, 79, 59, 29, 79, 48, 58, 53, 50, 40, 40, 70, 24, 50, 77, 60, 25, 47], 
+        y: this.scoresPositive.concat(this.scoresNegative), 
+        text: '',
+        hoverinfo: 'text',
         fill: "tozerox", 
-        fillcolor: "rgba(0,176,246,0.2)", 
+        fillcolor: "rgba(139,69,19,0.1)", 
-        line: {color: "transparent"}, 
+        mode: "lines", 
-        name: "Precision", 
+        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], 
+        x: this.xaxis, 
-        y: [100, 85, 68, 46, 25, 30, 29, 49, 27, 94, 87, 18, 30, 25, 25, 17, 30, 55, 77, 77], 
+        y: this.scoresMean2, 
-        fill: "tozerox", 
+        text: text,
-        fillcolor: "rgba(231,107,243,0.2)", 
+        line: {color: "rgb(0,176,246)"}, 
-        line: {color: "transparent"}, 
+        mode: "lines+markers", 
-        name: "Recall", 
+        marker : {
-        showlegend: false, 
+            symbol: 'square' },
+        name: "Precision", 
         type: "scatter"
-      };
+      }
+
       var trace4 = {
-        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
+        x: xaxisReversed, 
-        y: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100], 
+        y: this.scoresPositive2.concat(this.scoresNegative2), 
-        line: {color: "rgb(160,82,45)"}, 
+        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], 
+        x: this.xaxis, 
-        y: [50, 26, 59, 75, 50, 25, 75, 45, 55, 50], 
+        y: this.scoresMean3, 
-        line: {color: "rgb(0,176,246)"}, 
+        text: text,
-        mode: "lines", 
+        line: {color: "rgb(231,107,243)"}, 
-        name: "Precision", 
+        mode: "lines+markers", 
+        marker : {
+            symbol: 'triangle-up' },
+        name: "Recall", 
         type: "scatter"
-      };
+      }
+
       var trace6 = {
-        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
+        x: xaxisReversed, 
-        y: [100, 80, 60, 40, 20, 28, 20, 40, 20, 90], 
+        y: this.scoresPositive3.concat(this.scoresNegative3), 
-        line: {color: "rgb(231,107,243)"}, 
+        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",
+      var config = {displayModeBar: false, scrollZoom: true, displaylogo: false, showLink: false, showSendToCloud: false, modeBarButtonsToRemove: ['toImage'], responsive: true}
-          gridcolor: "rgb(230,230,230)", 
+      Plotly.newPlot('LinePlot', DataforLinePlot, layout, config)
-          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);
     },
     reset () {
       Plotly.purge('LinePlot')
     },
   },
   mounted () {
-    this.initializeLinePLot()
+    EventBus.$on('finalResults', data => { this.ValidResultsVar = data })
+    EventBus.$on('finalResults', this.initializeLinePLot)
+    
     EventBus.$on('reset', this.reset)
   }
 }

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)
 

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 = BayesianOptimization(estimator, params, random_state=RANDOM_SEED)
-    svc_bayesopt.maximize(init_points=5, n_iter=25, acq='ucb')
+    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')