new

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 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" onclick="setLayerComp();" style="margin-left: -1.4px"><font-awesome-icon icon="balance-scale-left" style="margin-right: 5px" />Feature comparison</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" 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" 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])
@@ -450,6 +459,8 @@ export default {
           .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,6 +468,7 @@ export default {
           .data(graph.nodes)
           .enter().append('g')
           .on("click", function(id, index) { 
+            if (modeLoc == 0) {
               for (let i = 0; i < listofNodes.length; i++) {
                 var numb = graph.nodes[i]['group'].match(/\d/g)
                 numb = parseInt(numb.join(""))
@@ -475,6 +487,19 @@ export default {
                 }
               })
               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 {
+                groupsColor.setAttribute('fill', 'black')
+                selectionCounter = selectionCounter - 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()
+                // var drag_handler = d3.drag()
-                  .on("start", drag_start)
+                //   .on("start", drag_start)
-                  .on("drag", drag_drag)
+                //   .on("drag", drag_drag)
-                  .on("end", drag_end);	
+                //   .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>

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

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>

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"

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)