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

---
 __pycache__/run.cpython-38.pyc                | Bin 22503 -> 22503 bytes
 .../src/components/FeatureSpaceDetail.vue     | 110 ++++++++++++------
 .../src/components/FeatureSpaceOverview.vue   |   2 +-
 frontend/src/components/Heatmap.vue           |  16 +--
 frontend/src/components/Results.vue           |   6 +-
 run.py                                        |   2 +-
 6 files changed, 86 insertions(+), 50 deletions(-)

diff --git a/__pycache__/run.cpython-38.pyc b/__pycache__/run.cpython-38.pyc
index 0b446cf960374c7a60ce21923071dbad05017857..b80de56df3680315f5f712fb76d5c448f64d9de2 100644
GIT binary patch
delta 28
icmaF9p7Hs5My^m^UM>b8m?ONAYnv2f)8>OxYPJA>^9W!7

delta 28
icmaF9p7Hs5My^m^UM>b8xXiMVYnv2f#pZ)jYPJA@&Io=0

diff --git a/frontend/src/components/FeatureSpaceDetail.vue b/frontend/src/components/FeatureSpaceDetail.vue
index 1b2e31b..1db01f5 100644
--- a/frontend/src/components/FeatureSpaceDetail.vue
+++ b/frontend/src/components/FeatureSpaceDetail.vue
@@ -1,15 +1,15 @@
 <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: 66px; max-height: 66px; margin-top: 20px">
+      <div id="toolbar" style="min-height: 67px; max-height: 67px; 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-primary 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-primary" 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-primary" onclick="setLayerSche();" style="margin-left: -2px !important"><font-awesome-icon icon="wrench" style="margin-right: 5px" />Feature engineering</button></td>
+                    <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 comparison</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 engineering</button></td>
                   </tr>
                 </tbody>
               </table>
@@ -39,11 +39,22 @@ export default {
       corrMatrixCombTotal: [],
       VIFRemaining: [],
       MIRemaining: [],
-      computeNodes: 0,
       featureAddRemCount: [],
+      mode: 0, // this should be 0
     }
   },
   methods: {
+    setLayerExplore() {
+      this.mode = 0
+      this.graphVizualization()
+    },
+    setLayerCompare() {
+      this.mode = 1 
+      this.graphVizualization()
+    },
+    setLayerEngineer() {
+      this.mode = 2 
+    },
     computeOnce () {  
         var listofNodes = this.dataFS[0]
         var dataLocOnce = []
@@ -328,8 +339,6 @@ export default {
 
       },
       graphVizualization () {
-        
-        var computeNodesVar = this.computeNodes
         var listofNodes = this.dataFS[0]
 
         var corrTarget = JSON.parse(this.dataFS[8+this.quadrantNumber])
@@ -449,7 +458,9 @@ export default {
           .enter().append('line')
           .attr("stroke", function(d) { return d.lin_color; })
           .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
-          
+        
+        var modeLoc = this.mode
+        var selectionCounter = 0
 
         var node = svg.append('g')
           .attr('class', 'nodes')
@@ -457,24 +468,38 @@ export default {
           .data(graph.nodes)
           .enter().append('g')
           .on("click", function(id, index) { 
-            for (let i = 0; i < listofNodes.length; i++) {
-              var numb = graph.nodes[i]['group'].match(/\d/g)
-              numb = parseInt(numb.join(""))
-              var items = document.getElementsByClassName(numb)
+            if (modeLoc == 0) {
+              for (let i = 0; i < listofNodes.length; i++) {
+                var numb = graph.nodes[i]['group'].match(/\d/g)
+                numb = parseInt(numb.join(""))
+                var items = document.getElementsByClassName(numb)
+                items.forEach( function (it) {
+                  it.style.visibility = "hidden";
+                })
+              }
+              var groupLoc = index + 1
+              var items = document.getElementsByClassName(groupLoc)
               items.forEach( function (it) {
-                it.style.visibility = "hidden";
+                if (it.style.visibility == "hidden") {
+                  it.style.visibility = "visible";
+                } else {
+                  it.style.visibility = "hidden";
+                }
               })
-            }
-            var groupLoc = index + 1
-            var items = document.getElementsByClassName(groupLoc)
-            items.forEach( function (it) {
-              if (it.style.visibility == "hidden") {
-                it.style.visibility = "visible";
+              EventBus.$emit('brushLink', groupLoc-1)
+            } else {
+              var groupsColor = d3.select('#svg'+index)._groups['0'][0].childNodes[3].childNodes[0]
+              if (groupsColor.getAttribute('fill') == "black") {
+                if (selectionCounter < 3) {
+                  // add here the different states of comparison! (=2 and =3)
+                  groupsColor.setAttribute('fill', 'yellow')
+                  selectionCounter = selectionCounter + 1
+                }
               } else {
-                it.style.visibility = "hidden";
+                groupsColor.setAttribute('fill', 'black')
+                selectionCounter = selectionCounter - 1
               }
-            })
-            EventBus.$emit('brushLink', groupLoc-1)
+            }
           })
           .on("dblclick", function(id, index) { 
             for (let i = 0; i < listofNodes.length; i++) {
@@ -553,7 +578,7 @@ export default {
             var innerRadius = arcSize * 2; 
 
             var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc).attr("class", function(d, i) { return d.group; })
-              .attr("id", function(d, i) { return "svg" + (i+computeNodesVar); })
+              .attr("id", function(d, i) { return "svg" + (i); })
 
             graph.nodes.forEach(function(itemVal, indexNode) {
               
@@ -564,8 +589,7 @@ export default {
               }
 
               var length = data.length
-              data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
-
+              data.push({value: 100, label: corrGlobFormatted[indexNode], color: 'black', lcolor: colorsScaleNodes(MIVar[indexNode])})
 
               var border = VIFVarFormatted[indexNode]
 
@@ -592,7 +616,7 @@ export default {
                       return d.value;
                   });
 
-                  var id = indexNode + computeNodesVar
+                  var id = indexNode
                   var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
                       .append('g')
                       .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
@@ -655,12 +679,12 @@ export default {
 
                 })
 
-                var drag_handler = d3.drag()
-                  .on("start", drag_start)
-                  .on("drag", drag_drag)
-                  .on("end", drag_end);	
+                // var drag_handler = d3.drag()
+                //   .on("start", drag_start)
+                //   .on("drag", drag_drag)
+                //   .on("end", drag_end);	
                   
-                drag_handler(node);
+                // drag_handler(node);
 
                 var labels = node.append("text")
                   .text(function(d) {
@@ -725,7 +749,7 @@ export default {
             .attr('y2', function (d) { return d.target.y; });
 
           node
-            .attr("id", function(d, i) { return "g" + (i+computeNodesVar); })
+            .attr("id", function(d, i) { return "g" + (i); })
             .attr("transform", function(d, i) {
               d.x = d.x - 50
               d.y = d.y - 50
@@ -802,10 +826,6 @@ export default {
           return forceSim;
         }
 
-        this.computeNodes = this.computeNodes + graph.nodes.length
-
-        EventBus.$emit('countNodes2', this.computeNodes)
-
       },
       reset () {
         var svg = d3.select("#FeatureGraph");
@@ -814,17 +834,33 @@ export default {
     },
   mounted () {
     EventBus.$on('updateSlice', data => { this.quadrantNumber = data })
+    EventBus.$on('updateSlice', data => { 
+      document.getElementById("initButton").click()
+    })
+    EventBus.$on('updateSlice', this.setLayerExplore)
     EventBus.$on('updateSlice', this.initializeNetwork)
 
     EventBus.$on('quadTrans', data => { this.dataFSTrans = data })
     EventBus.$on('quad', data => { this.dataFS = data })
     EventBus.$on('quad', this.computeOnce)
     EventBus.$on('quad', this.initializeNetwork)
-    EventBus.$on('countNodes1', data => { this.computeNodes = data })
 
     EventBus.$on('removeFeatures', data => { this.featureAddRemCount = data })
 
     EventBus.$on('reset', this.reset)
+
+    // Get the container element
+    var btnContainer2 = document.getElementById("resetAllFilters"); //resetAllFilters button
+    // Get all buttons with class="btn" inside the container
+    var btns2 = btnContainer2.getElementsByClassName("btn");
+
+    for (var i = 0; i < btns2.length; i++) {
+      btns2[i].addEventListener("click", function() {
+      let current = document.getElementsByClassName("active");
+      current[0].className = current[0].className.replace("btn btn-primary active", "btn btn-primary");
+      this.className += " active";
+      });
+    }
   }
 }
 </script>
diff --git a/frontend/src/components/FeatureSpaceOverview.vue b/frontend/src/components/FeatureSpaceOverview.vue
index a4913df..41acfcb 100644
--- a/frontend/src/components/FeatureSpaceOverview.vue
+++ b/frontend/src/components/FeatureSpaceOverview.vue
@@ -202,7 +202,7 @@ export default {
         // current pan, zoom, and rotation
         var curX = width / 2;
         var curY = height / 2;
-        var curZ = 1.0; // current zoom
+        var curZ = 1.25; // 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 f500fac..c394811 100644
--- a/frontend/src/components/Heatmap.vue
+++ b/frontend/src/components/Heatmap.vue
@@ -160,12 +160,12 @@ export default {
     
 
 
-    var viewerWidth = 1250
+    var viewerWidth = 1225
     var viewerHeight = 180
-    var widthHeatmap = 1250
+    var widthHeatmap = 1225
 
     var viewerPosTop = viewerHeight * 0.05;
-    var viewerPosTopHeat = viewerHeight * 0.15;
+    var viewerPosTopHeat = viewerHeight * 0.42;
     var viewerPosLeft = viewerWidth*0.1;
 
     var legendElementWidth = cellSize * 3;
@@ -215,6 +215,11 @@ export default {
           .text(function(d) {
               return d.count > 1 ? d.join("/") : d;
           })
+          .style('font-weight', function(d) {
+            if (d[0] == "# Action #" || d[0] == "Average") {
+                return "bold"
+            }
+          })
           .attr("x", 0)
           .attr("y", function(d, i) {
               return (i * cellSize);
@@ -577,10 +582,5 @@ text.mono {
 text.legendElement {
   font-size: 10px;
 }
-text.hover {
-  font-weight: bold;
-  fill: #66F;
-  font-background: #000;
-}
 
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Results.vue b/frontend/src/components/Results.vue
index d47f637..e0d8b15 100644
--- a/frontend/src/components/Results.vue
+++ b/frontend/src/components/Results.vue
@@ -83,7 +83,7 @@ export default {
         hoverinfo: 'text',
         fill: "tozerox", 
         fillcolor: "rgba(139,69,19,0.1)", 
-        mode: "lines", 
+        line: {color: "transparent"}, 
         name: "Accuracy", 
         showlegend: false, 
         type: "scatter"
@@ -112,7 +112,7 @@ export default {
         hoverinfo: 'text',
         fill: "tozerox", 
         fillcolor: "rgba(0,176,246,0.1)", 
-        mode: "lines", 
+        line: {color: "transparent"}, 
         name: "Precision", 
         showlegend: false, 
         type: "scatter"
@@ -139,7 +139,7 @@ export default {
         hoverinfo: 'text',
         fill: "tozerox", 
         fillcolor: "rgba(231,107,243,0.1)", 
-        mode: "lines", 
+        line: {color: "transparent"}, 
         name: "Recall", 
         showlegend: false, 
         type: "scatter"
diff --git a/run.py b/run.py
index 54e4978..3464c2d 100644
--- a/run.py
+++ b/run.py
@@ -410,7 +410,7 @@ def executeModel(exeCall):
         create_global_function()
         params = {"C": (0.0001, 10000), "gamma": (0.0001, 10000)}
         svc_bayesopt = BayesianOptimization(estimator, params, random_state=RANDOM_SEED)
-        svc_bayesopt.maximize(init_points=120, n_iter=20, acq='ucb')
+        svc_bayesopt.maximize(init_points=130, 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)
         featureImportanceData = estimatorFeatureSelection(estimator)