From 9bfba6023f0d5c1a069f9bfdf2ec4eb1593e616c Mon Sep 17 00:00:00 2001
From: Angelos Chatzimparmpas <angelos.chatzimparmpas@gmail.com>
Date: Mon, 29 Jul 2019 14:15:59 +0200
Subject: [PATCH] feature selection

---
 .vscode/settings.json                         |   2 +-
 __pycache__/run.cpython-37.pyc                | Bin 8232 -> 9951 bytes
 frontend/src/components/FeatureSelection.vue  |  91 +++++++++++++++
 frontend/src/components/Main.vue              |  20 +++-
 frontend/src/components/ParametersSetting.vue |   5 +-
 frontend/src/components/StretchedChord.vue    | 104 +++++++-----------
 run.py                                        |  37 ++++++-
 7 files changed, 189 insertions(+), 70 deletions(-)
 create mode 100644 frontend/src/components/FeatureSelection.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index ad66e0bb9..353f5f01b 100755
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
     "git.ignoreLimitWarning": true,
-    "python.pythonPath": "/Library/Frameworks/Python.framework/Versions/3.7/bin/python3"
+    "python.pythonPath": "/usr/local/bin/python3"
 }
\ No newline at end of file
diff --git a/__pycache__/run.cpython-37.pyc b/__pycache__/run.cpython-37.pyc
index 88bb2b56b304dfb56ebcc1b6d6b3a2d05f18719f..debea1e7fcfac3cf05b334deaeb1d9fcba3b1a72 100644
GIT binary patch
delta 3722
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

delta 1981
zcmZ8i-A^1<6rVdgGdt`q%ffDfg$3GDphH`vw6?TjMQN&l{R-IDO@RzE!?JXDX1R0M
zfX<3a{HRH5(wnp|O<a61t=goO_oj~;6W`=vVq$!ge?XJQ7|$7MYnjdc?YZac&iS1)
zGryg_GaP@dwl*Tb^(Q?x_2A%xcv3pl4qGNv$(m3VO|nL+AyYI%YoabOnMtc;LeQi$
zzEoy&gO5qiW3pRQIFowgRD!^}0^I|DbPxYYx*S1`AT<)&z5b$nfb{y(g6r76TyS*L
zrJZ2(<)UNf9A7kN>0aDRb9vjO8o#P6c5Gz=E$u>6e8edfEQ948`=rkF{X8Ak$jf{r
z{KLvHI&E{WF?43k&*+81I9Oc;KnN+MfzUTVdN<nlf}tDp){L2_hKxqIGO&=35m@eR
zf<$<NM?4?`Nid~rN=0Tw7d^QeVj`2)L?Yybm5SmiRoRmllr=&G7G6-RH6F;7FpGHM
zg{Uc~1zfA7qCV5Wt|li`BCw)M!z|{htK_6Gb+{5k?b6QwB0<+ssr4doLai4|3wXxj
zCl>`T3YrM)R)j@*F*w$XLQt)#ToWsCFK&j@LZuFpC1BMr-Nze59VGm!(vTM_$)#Se
zp&DO9P5WiBlB(<g&ql8i67RrcyhbnSrG|vXKOjGHk$j$uEgn|3h=5HU6QSxRFHx0Q
zf=OPJCz+~QV@9sYLAsC`y&}>LCN9)hnpp$RQzh-ygLl$v_R?^Jsf8V@p`gMIEUBt`
z^^mb8kP;xZdU3DLYw=p=B$&k5nN8?jt>CM=VU($EEYltyi48X$gAV#(!zq-Dw(Bb;
zo$5t*Q{-0@nzjjz6|_cLk3RAx9423J%d@V<vZ1*=^W|mK(Ifol#J;wp;FXo~1;_AZ
zs@pk>o(bae%qqJ4c>Ppk#t#{VIeHe<6lX0fo*Jd+*YDLg6TZ=KY+&19Mqa0RbHdW8
zF@F)f-OB)iC=v0=PZcHpN^*CMB!~p#Dv=0@@h_7*$vl6Q{H`er-o9v;e5q*Zwic#y
zprARvn(9eCe-fPn%MJc8)kLP&H&Wk+NDsf-tnEcFjre2<K!G}Q7TbDwg2zl9D(J;o
zQ$KN+|Jpo2OkS5BIJgx;-5`=OJTW*6BWM}m8(3%+XfMJ(PSXSZPj5#PeX+0KCyqw8
z1wW1q74j}KoMP$31O7{Tuz3RFeI=i>9cpa`$zH{bW4x<njEwP8%TaQU-)R{nXZi0f
zxx<IhUAkf|yL15kK14W-a0CGvrk4=jMwmpnz`a&2ihZRqgn53ybwTMvagguKbU@9+
znZf9JRLme)d^Mwyaegn;wSO8F*y^k}dW!0}o5fxIDNAQ%YK<044rRJ+Sk&PEWE^sw
z+ifGYPY4W{>*5dFnn;yzw0%o%@{igXnc#o5@5@|=Jeo*vU``X^DSxz!pXg{yreJVg
z6)ZxiF_;T_Yu)bnn`p=xP+P&Ea|rLFLZquGuONH?FbU5F-_@@K+SB~UUEK|%Xd43n
z=QmLv=VbTS(*bn>H*r*cju1ttLnt650J3!kbzFDm9lbE)8qhEL7Md;q_;QKnZANW$
z3%ShnWw%twGp&Z+;Gxa~WSSrBOm81pWFW(*J9ToMKk9TRgC1dr=>deB2wxyb08sD{
z%Ku{twti&7vdu~7T)|-z$X5iEf*1$B6j2rFZT{(=@gsfc8HLxwlMjlUmF;q|v`mX&
zpfvzlcxTwA?ru%cXQ=*oUG1tRbNF%a6~nRT@;Ta%t`gMl!rQ?qGmCbk>&xg9qGdby
z*knURt4Qb3fRE%>9k)=zg6VC9XH^7J7k{sNJRNRnjSw}IAgLNvR9{l#DvOg$SUvhL
Dy#3Kg

diff --git a/frontend/src/components/FeatureSelection.vue b/frontend/src/components/FeatureSelection.vue
new file mode 100644
index 000000000..eb6a9987f
--- /dev/null
+++ b/frontend/src/components/FeatureSelection.vue
@@ -0,0 +1,91 @@
+<template>
+  <div id="myDynamicTable" v-on:change="this.getFeatureSelection"></div>
+</template>
+
+<script>
+import { EventBus } from '../main.js'
+
+export default {
+  name: 'FeatureSelection',
+  data () {
+    return {
+      GetResults: '',
+      datafromCheckbox: ''
+    }
+  },
+  methods: {
+      FeatureSelection () { 
+
+        document.getElementById("myDynamicTable").innerHTML = "";
+
+        var myTableDiv = document.getElementById("myDynamicTable");
+
+        var table = document.createElement('TABLE');
+        table.border = '1';
+
+        var tableBody = document.createElement('TBODY');
+        table.appendChild(tableBody);
+
+        var checkBoxArray = []
+
+        for (var i = 0; i < 3; i++) {
+            var tr = document.createElement('TR');
+            tableBody.appendChild(tr);
+            for (var j = 0; j < 4; j++) {
+                if (j == 0){
+                    if (i == 0) {
+                        var td = document.createElement('TD');
+                        td.width = '75';
+                        td.appendChild(document.createTextNode(''));
+                        tr.appendChild(td);
+                    } else {
+                        var td = document.createElement('TD');
+                        td.width = '90';
+                        td.appendChild(document.createTextNode('Classifier ' + i));
+                        tr.appendChild(td);
+                    }
+                }
+                if (i == 0){
+                    var td = document.createElement('TD');
+                    td.width = '30';
+                    td.appendChild(document.createTextNode('F ' + j));
+                    tr.appendChild(td);
+                } else {
+                    var checkbox = document.createElement('input');
+                    checkbox.type = "checkbox";
+                    checkbox.checked = true;
+                    checkbox.name = i;
+                    checkbox.text = "F " + j
+                    checkbox.value = "value";
+                    checkbox.id = "Cl " + i + ", F " + j;
+                    checkBoxArray.push(checkbox)
+                    var td = document.createElement('TD');
+                    td.appendChild(myTableDiv.appendChild(checkbox));
+                    tr.appendChild(td);
+                }
+            
+            }
+        }
+        myTableDiv.appendChild(table);
+        this.datafromCheckbox = checkBoxArray
+      },
+      getFeatureSelection () {
+        var results = new Array();
+        this.datafromCheckbox.forEach(eachCheckbox => {
+            if (eachCheckbox.checked == true) {
+                results.push('ClassifierID: ' + eachCheckbox.name, 'FeatureName: ' + eachCheckbox.text, 'Check: 1')
+            }
+            else {
+                results.push('ClassifierID: ' + eachCheckbox.name, 'FeatureName: ' + eachCheckbox.text, 'Check: 0')
+            }
+        });
+        console.log(results)
+        EventBus.$emit('SendSelectedFeaturesEvent', results)
+      }
+  },
+  mounted () {
+        EventBus.$on('emittedEventCallingTableView', data => { this.GetResults = data })
+        EventBus.$on('emittedEventCallingTableView', this.FeatureSelection)
+    }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/Main.vue b/frontend/src/components/Main.vue
index 4af7a64e5..60d7e2f6a 100755
--- a/frontend/src/components/Main.vue
+++ b/frontend/src/components/Main.vue
@@ -53,6 +53,14 @@
                 </mdb-card-body>
         </mdb-card>
     </b-col>
+     <b-col cols="3">
+        <mdb-card>
+            <mdb-card-header color="primary-color" tag="h5" class="text-center">Subset Feature Selection</mdb-card-header>
+                <mdb-card-body>
+                  <FeatureSelection/>
+                </mdb-card-body>
+        </mdb-card>
+    </b-col>
   </b-row>
   <b-row>
       <b-col cols="3">
@@ -77,6 +85,7 @@ import ScatterPlot from './ScatterPlot.vue'
 import BarChart from './BarChart.vue'
 import StretchedChord from './StretchedChord.vue'
 import Tuning from './Tuning.vue'
+import FeatureSelection from './FeatureSelection.vue'
 import axios from 'axios'
 import { mdbCard, mdbCardBody, mdbCardText, mdbCardHeader } from 'mdbvue'
 import { EventBus } from '../main.js'
@@ -90,6 +99,7 @@ export default Vue.extend({
     BarChart,
     StretchedChord,
     Tuning,
+    FeatureSelection,
     mdbCard,
     mdbCardBody,
     mdbCardHeader,
@@ -100,7 +110,8 @@ export default Vue.extend({
       Collection: 0,
       OverviewResults: 0,
       RetrieveValueFile: 'IrisC',
-      ClassifierIDsList: ''
+      ClassifierIDsList: '',
+      SelectedFeaturesPerClassifier: ''
     }
   },
   methods: {
@@ -110,7 +121,8 @@ export default Vue.extend({
     DataBaseRequestDataSetName () {
       const path = `http://127.0.0.1:5000/data/ServerRequest`
       const postData = {
-        fileName: this.RetrieveValueFile
+        fileName: this.RetrieveValueFile,
+        featureSelection: this.SelectedFeaturesPerClassifier
       }
       const axiosConfig = {
         headers: {
@@ -122,6 +134,7 @@ export default Vue.extend({
       }
       axios.post(path, postData, axiosConfig)
         .then(response => {
+          console.log(response)
           console.log('Send request to server! FileName was sent successfully!')
         })
         .catch(error => {
@@ -174,6 +187,8 @@ export default Vue.extend({
           EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResults)
           EventBus.$emit('emittedEventCallingBarChart', this.OverviewResults)
           EventBus.$emit('emittedEventCallingChordView', this.OverviewResults)
+          EventBus.$emit('emittedEventCallingTableView', this.OverviewResults)
+
         })
         .catch(error => {
           console.log(error)
@@ -204,6 +219,7 @@ export default Vue.extend({
   mounted() {
     EventBus.$on('SendSelectedPointsToServerEvent', data => { this.ClassifierIDsList = data })
     EventBus.$on('SendSelectedPointsToServerEvent', this.SendSelectedPointsToServer)
+    EventBus.$on('SendSelectedFeaturesEvent', data => { this.SelectedFeaturesPerClassifier = data })
   }
 })
 </script>
diff --git a/frontend/src/components/ParametersSetting.vue b/frontend/src/components/ParametersSetting.vue
index d6831f995..7085beb88 100644
--- a/frontend/src/components/ParametersSetting.vue
+++ b/frontend/src/components/ParametersSetting.vue
@@ -3,7 +3,8 @@
   id="Execute"
   v-on:click="execute">
   <font-awesome-icon icon="play" />
-  Execute</button>
+  {{ value }}
+  </button>
 </template>
 
 <script>
@@ -12,11 +13,13 @@ export default {
   data () {
     return {
         InitializeEnsemble: false,
+        value: 'Execute'
     };
   },
   methods: {
     execute () {
         this.InitializeEnsemble = true
+        this.value = 'ReExecute'
         this.$emit('InitializeEnsembleLearningEvent')
     }
   }
diff --git a/frontend/src/components/StretchedChord.vue b/frontend/src/components/StretchedChord.vue
index d8e79135c..8d258be38 100644
--- a/frontend/src/components/StretchedChord.vue
+++ b/frontend/src/components/StretchedChord.vue
@@ -20,15 +20,22 @@ export default {
   methods: {
       StretchChord () {
         const FeatureImportance = JSON.parse(this.AllResults[3])
-        const ClassNames = JSON.parse(this.AllResults[5])    
+        const ClassNames = JSON.parse(this.AllResults[5]) 
 
         var SortFeaturesPerClass = []
+        var MergeSortFeaturesPerClass = []
+        var counter = 0
         FeatureImportance.forEach(classifier => {
+            counter++
+            var length = this.ObjectSize(classifier)
             for (let i = 0; i < length; i++) {
-                SortFeaturesPerClass.push(this.sortObject(classifier[i]))
+                SortFeaturesPerClass.push(this.sortObject(classifier[i], counter, ClassNames[i]))
             }
         })
-
+        MergeSortFeaturesPerClass = SortFeaturesPerClass[0]
+        for (let i = 0; i < SortFeaturesPerClass.length - 1; i++) {
+            MergeSortFeaturesPerClass = MergeSortFeaturesPerClass.concat(SortFeaturesPerClass[i+1])
+        }
         var margin = {left:80, top:40, right:120, bottom:50},
             width = Math.max( Math.min(window.innerWidth, 1100) - margin.left - margin.right - 20, 400),
             height = Math.max( Math.min(window.innerHeight - 250, 900) - margin.top - margin.bottom - 20, 400),
@@ -54,14 +61,17 @@ export default {
                                     
             var loom = d3.loom()
                 .padAngle(0.05)
-                //.sortSubgroups(sortAlpha)
-                //.heightInner(28)
-                .emptyPerc(0.2)
-                .widthInner(30)
+                //.sortSubgroups(sortCharacter)
+                //.heightInner(0)
+                //.sortGroups(function(d) { return d.words })
+                //.sortLooms(d3.descending)
+                .emptyPerc(0)
+                .widthInner(40)
                 //.widthInner(function(d) { return 6 * d.length; })
-                .value(function(d) { return d.words; })
-                .inner(function(d) { return d.character; })
-                .outer(function(d) { return d.location; });
+                .value(function(d) { return d.importancerate; })
+                .outercolorfun(function(d) { return d.class; })
+                .inner(function(d) { return d.feature; })
+                .outer(function(d) { return d.classifier; });
 
             var arc = d3.arc()
                 .innerRadius(innerRadius*1.01)
@@ -70,17 +80,13 @@ export default {
             var string = d3.string()
                 .radius(innerRadius)
                 .pullout(pullOutSize);
-                
-            var characterNotes = [];
-
-            characterNotes["Iris Setosa"] = "Speaking almost twice as many words as the second most abundant speaker, Gandalf is taking up a large portion of dialogue in almost every location he's in, but stays rather quiet in Mordor";
-            characterNotes["Iris Versicolour"] = "An unexpected runner up to having spoken the most words, Sam flourishes after the battle at Amon Hen, taking up a considerable portion of the words said in both Mordor and Gondor";
-            characterNotes["Iris Virginica"] = "Although eventually being crowned in Minas Tirith, Gondor, Aragorn is by far most talkative in that other human region, Rohan, fighting a battle at Helm's Deep and convincing an army of dead";
 
             ////////////////////////////////////////////////////////////
             ////////////////////// Create SVG //////////////////////////
             ////////////////////////////////////////////////////////////
                         
+            d3.select("#chart").selectAll("*").remove();
+
             var svg = d3.select("#chart").append("svg")
                 .attr("width", width + margin.left + margin.right)
                 .attr("height", height + margin.top + margin.bottom);
@@ -95,33 +101,8 @@ export default {
                 ////////////////////////////////////////////////////////////
                 
                 //Sort the inner characters based on the total number of words spoken
-                var dataAgg = [
-            {
-                "location": "Classifier 1",
-                "character": "Iris Setosa",
-                "words": 94
-            },
-            {
-                "location": "Classifier 1",
-                "character": "Iris Versicolour",
-                "words": 100
-            },
-            {
-                "location": "Classifier 1",
-                "character": "Iris Virginica",
-                "words": 100
-            },
-            {
-                "location": "Feature 1",
-                "character": "Iris Virginica",
-                "words": 40
-            },
-            {
-                "location": "Feature 2",
-                "character": "Iris Virginica",
-                "words": 60
-            },
-            ]			
+                var dataAgg = MergeSortFeaturesPerClass
+
             //Find the total number of words per character
             var dataChar = d3.nest()
                 .key(function(d) { return d.character; })
@@ -138,16 +119,16 @@ export default {
             //Set more loom functions
             loom
                 .sortSubgroups(sortCharacter)
-                .heightInner(innerRadius*0.75/characterOrder.length)
+                .heightInner(innerRadius*0.2/characterOrder.length)
             
             ////////////////////////////////////////////////////////////
             ///////////////////////// Colors ///////////////////////////
             ////////////////////////////////////////////////////////////
                             
-            var locations = ["Iris Setosa", "Iris Versicolour", "Iris Virginica"]
-            var colors = ["#5a3511", "#47635f", "#223e15"]
+            var categories = ClassNames
+            var colors = ["#0000FF", "#ff0000", "#00ff00"]
             var color = d3.scaleOrdinal()
-                .domain(locations)
+                .domain(categories)
                 .range(colors)
             
             //Create a group that already holds the data
@@ -238,7 +219,7 @@ export default {
 
             var outerArcs = arcs.append("path")
                 .attr("class", "arc")
-                .style("fill", function(d) { return color(d.innername) })
+                //.style("fill", function(d) { return color(d.outer.innername) })
                 .attr("d", arc)
                 .attr("transform", function(d, i) { //Pull the two slices apart
                     return "translate(" + d.pullOutSize + ',' + 0 + ")"
@@ -271,7 +252,7 @@ export default {
             outerLabels.append("text")
                 .attr("class", "outer-label-value")
                 .attr("dy", "1.5em")
-                .text(function(d,i){ return numFormat(d.value) + " words" })
+                .text(function(d,i){ return 'Relation:' + numFormat(d.value) + '%'})
 
             ////////////////////////////////////////////////////////////
             ////////////////// Draw inner strings //////////////////////
@@ -288,7 +269,9 @@ export default {
                 .attr("class", "string")
                 .style("mix-blend-mode", "multiply")
                 .attr("d", string)
-                .style("fill", function(d) { return d3.rgb( color(d.outer.innername) ).brighter(0.2)  })
+                .style("fill", function(d) {
+                        return d3.rgb( color(d.outer.outercolor) ).brighter(0.2)
+                    })
                 .style("opacity", defaultOpacity)
                 
             ////////////////////////////////////////////////////////////
@@ -355,11 +338,6 @@ export default {
                             return numFormat(words[0].value)
                         })
                         
-                    //Show the character note
-                    d3.selectAll(".character-note")
-                        .text(characterNotes[d.name])
-                        .call(wrap, 2.25*pullOutSize)
-                        
                 })
                 .on("mouseout", function(d) {
                     
@@ -370,7 +348,7 @@ export default {
                         
                     //Return the word count to what it was
                     d3.selectAll(".outer-label-value")	
-                        .text(function(s,i){ return numFormat(s.value) + " words" })
+                        .text(function(s,i){ return 'Importance Rate: ' + numFormat(s.value) })
                         
                     //Show all arcs again
                     d3.selectAll(".arc-wrapper")
@@ -430,19 +408,21 @@ export default {
         })
         }//wrap
         },
-        sortObject (obj) {
+        sortObject (obj, classifierID, ClassName) {
             var arr = []
             for (var prop in obj) {
                 if (Object.prototype.hasOwnProperty.call(obj, prop)) {
-                    if ((this.LimitFeatureImportance/100) < Math.abs(obj[prop])) {
+                    //if ((this.LimitFeatureImportance/100) < Math.abs(obj[prop])) {
                         arr.push({
-                        'FeatureID': prop,
-                        'ImportanceValue': obj[prop]
+                        'feature': 'Feature ' + prop,
+                        'classifier': 'Classifier ' + classifierID,
+                        'class': ClassName,
+                        'importancerate': Math.abs(Math.round(obj[prop] * 100))
                         })
-                    }
+                    //}
                 }
             }
-            arr = arr.sort(function (a, b) { return Math.abs(b.ImportanceValue) - Math.abs(a.ImportanceValue) })
+            arr = arr.sort(function (a, b) { return Math.abs(b.ImportanceValue - a.ImportanceValue) })
             return arr
         },
         ObjectSize (obj) {
diff --git a/run.py b/run.py
index f360ae04f..a3d687499 100644
--- a/run.py
+++ b/run.py
@@ -38,6 +38,9 @@ cors = CORS(app, resources={r"/data/*": {"origins": "*"}})
 def RetrieveFileName():
     global fileName 
     fileName = request.get_data().decode('utf8').replace("'", '"') 
+    global featureSelection 
+    featureSelection = request.get_data().decode('utf8').replace("'", '"')
+    featureSelection = json.loads(featureSelection)
     return jsonify(fileName)
 
 # Sent data to client 
@@ -92,10 +95,8 @@ def GridSearch(clf, params, scoring, FI, target_names):
                 cv=5,
                 refit='accuracy',
                 n_jobs = -1)
-    global subset
-    subset = XData
     
-    grid.fit(subset, yData)
+    grid.fit(XData, yData)
 
     cv_results = []
     cv_results.append(grid.cv_results_)
@@ -116,12 +117,40 @@ def GridSearch(clf, params, scoring, FI, target_names):
     parameters = df_cv_results_classifiers['params']
     PerClassMetrics = []
     FeatureImp = []
-    for eachClassifierParams in grid.cv_results_['params']:
+    global subset
+    print(XData.columns)
+    subset = XData
+    for i, eachClassifierParams in enumerate(grid.cv_results_['params']):
         eachClassifierParamsDictList = {}
         for key, value in eachClassifierParams.items():
             Listvalue = []
             Listvalue.append(value)
             eachClassifierParamsDictList[key] = Listvalue
+        if (FI == 1):
+            if (featureSelection['featureSelection'] == ''):
+                subset = XData
+            else:
+                featureSelected = []
+                if ((i+1) == int(''.join(x for x in featureSelection['featureSelection'][0] if x.isdigit()))):
+                    if (int(''.join(x for x in featureSelection['featureSelection'][2] if x.isdigit())) == 1):
+                        featureSelected.append('petal_l')
+                    if (int(''.join(x for x in featureSelection['featureSelection'][5] if x.isdigit())) == 1):
+                        featureSelected.append('petal_w')
+                    if (int(''.join(x for x in featureSelection['featureSelection'][8] if x.isdigit())) == 1):
+                        featureSelected.append('sepal_l')
+                    if (int(''.join(x for x in featureSelection['featureSelection'][11] if x.isdigit())) == 1):
+                        featureSelected.append('sepal_w')
+                else:   
+                    if (int(''.join(x for x in featureSelection['featureSelection'][14] if x.isdigit())) == 1):
+                        featureSelected.append('petal_l')
+                    if (int(''.join(x for x in featureSelection['featureSelection'][17] if x.isdigit())) == 1):
+                        featureSelected.append('petal_w')
+                    if (int(''.join(x for x in featureSelection['featureSelection'][20] if x.isdigit())) == 1):
+                        featureSelected.append('sepal_l')
+                    if (int(''.join(x for x in featureSelection['featureSelection'][23] if x.isdigit())) == 1):
+                        featureSelected.append('sepal_w')
+                print(featureSelected)
+                subset = XData[featureSelected]
         grid = GridSearchCV(estimator=clf, 
             param_grid=eachClassifierParamsDictList,
             scoring=scoring,