new

frontend/src/components/FeatureSpaceDetail.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="column">
+    <svg id="chartID" class="chart"></svg>
     <div id="FeatureGraph" style="border-style: solid; border-width: 2px; border-color: yellow; min-height: 819px; max-height: 819px; min-width: 819px"></div> 
       <div id="toolbar" style="min-height: 67px; max-height: 67px; margin-top: 25px">
           <div class="panel panel-default" data-placement="center">
@@ -7,17 +8,19 @@
               <table class="table table-borderless centerTable" >
                 <tbody>
                   <tr>
+                    <div style="border: 1px solid black; height:70px; margin-top:19px">
                     <td scope="row"><button class="btn btn-primary active" id="initButton" v-on:click="setLayerExplore" style="margin-left: -1px !important" ><font-awesome-icon icon="wrench" style="margin-right: 5px"/>Transformation</button></td>
                     <td><button class="btn btn-primary" v-on:click="setLayerCompare" style="margin-left: -1.4px"><font-awesome-icon icon="balance-scale" style="margin-right: 5px" />Generation</button></td>
+                    </div>
                     <td>
                       <div id="buildLegend" style="min-width: 160px;">
                       <div id="legend"></div>
-                      <div id="legendText"></div>
+                      <div id="legendText" style="border: 1px solid black; min-height: 70px; max-height: 70px; min-width:181px; margin-top: 16px; margin-left:-12px;"></div>
                       </div>
                     </td>
                     <td>
-                      <div class="row align-items-center">
+                      <div class="row align-items-center " style="height: 69px; margin-top:7px; min-width: 160px; border: 1px solid black">
-                        <div class="col-lg-4"><p>Collinear (>)</p></div>
+                        <div class="col-lg-4"><p>Fs COR (>)</p></div>
                         <div class="col-lg-7"><div id="thres"></div></div>
                       </div>
                     </td> 
@@ -82,7 +85,7 @@ export default {
           .attr('width', 200)
           .attr('height', 80)
           .append('g')
-          .attr('transform', 'translate(30,30)');
+          .attr('transform', 'translate(18,20)');
 
         gStepPos.call(sliderStepPos);
 
@@ -485,6 +488,8 @@ export default {
  
         var svg = d3.select("#FeatureGraph");
         svg.selectAll("*").remove();
+        var svg = d3.select('#chartID')
+        svg.selectAll("*").remove()
 
         var width = 819;
         var height = 819;
@@ -674,11 +679,39 @@ export default {
             node.append('title').text(function (d) { return d.name; });
             EventBus.$emit('brushLink', -1)
           });
+        var chartWidth = 350;
+        var chartHeight = 65;
+        var margin = {left: 25, right: 25, top: 10, bottom: 40};
+        var chartSvg = d3.select('svg.chart')
+          .attr('width', chartWidth)
+          .attr('height', chartHeight)
+          .append('g')
+          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+        chartWidth = chartWidth - margin.left - margin.right;
+        chartHeight = chartHeight - margin.top - margin.bottom;
 
+        var x = d3.scaleLinear()
+          .domain([75, 100])
+          .range([0, chartWidth]);
+
+        chartSvg.append('g')
+            .attr('transform', 'translate(0,' + chartHeight + ')')
+            .call(d3.axisBottom(x).ticks(7))
+          .append("text")
+            .attr("fill", "#000")
+            .attr('transform', 'translate(' + chartWidth/2 + ',' + 0 + ')')
+            .attr("y", chartHeight + 10)
+            .attr("dy", "0.71em")
+            .attr("text-anchor", "middle")
+            .text("Graph readability (%)");
+
+        var readabilityCircles = chartSvg.append('g').selectAll('circle');
+        // 48 parameters
         var paramGroups = [ 
-          {name: 'chargeStrength', values: [-30, -80]},
+          {name: 'chargeStrength', values: [-80]},
-          {name: 'linkDistance', values: [30, -80]},
+          {name: 'linkDistance', values: [-80]},
-          {name: 'linkStrength', values: [0, 1]},
+          {name: 'linkStrength', values: [0.25, 0.5]},
           {name: 'gravity', values: [0, 0.5]},
           {name: 'iterations', values: [1, 2]},
           {name: 'alphaDecay', values: [0, 0.0228, 0.05]},
@@ -693,6 +726,7 @@ export default {
           .text(function (d) { return d; });
 
         dispatch.on('layoutend', function (params, i) {
+
           if (!bestParams || params.graphReadability > bestParams.graphReadability) {
             bestParams = params;
             selectedParams = bestParams;
@@ -701,7 +735,31 @@ export default {
               .data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
               .text(function (d) { return d + ' = ' + bestParams[d]; });
           }
+                // Plot the number line.
+                readabilityCircles = readabilityCircles
+                  .data(readabilityCircles.data().concat(params))
+                  .enter().append('circle')
+                  .attr('cx', function (d) { return x(d.graphReadability*100); })
+                  .attr('cy', 5)
+                  .attr('r', 4)
+                  .on('click', function (d) {
+                    selectedParams = d;
+                    readabilityCircles.classed('selected', false);
+                    d3.select(this).classed('selected', true).raise();
+
+                    bestSoFar
+                      .data(d3.map(selectedParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
+                      .text(function (d) { return d + ' = ' + selectedParams[d]; });
+
+                    drawGraph();
+                  })
+                  .merge(readabilityCircles)
+                  .classed('selected', function (d) { return d === selectedParams; });
+
+                readabilityCircles.filter(function (d) { return d === selectedParams; })
+                  .raise();
 
+                drawGraph();
         });
 
         var i = 0;
@@ -724,9 +782,9 @@ export default {
             forceSim.tick();
           }
 
-          p.graphReadability = greadability.greadability(graph.nodes, graph.links);
+          p.graphReadability = greadability.greadability(graph.nodes, graph.links); // crossing > angularResolDev > angularResolMin > Angle
-          p.graphReadability = (p.graphReadability.crossing + p.graphReadability.crossingAngle +
+          p.graphReadability = (p.graphReadability.crossing * 1 + p.graphReadability.crossingAngle * 0.1 +
-          p.graphReadability.angularResolutionMin + p.graphReadability.angularResolutionDev) / 4
+          p.graphReadability.angularResolutionMin * 0.4 + p.graphReadability.angularResolutionDev * 0.75) / 2.25
 
           p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; });
 
@@ -963,8 +1021,6 @@ export default {
                 
                 zoom_handler(svg); 
 
-                drawGraph();
-
                 for (let i = 0; i < listofNodes.length; i++) {
                   var numb = graph.nodes[i]['group'].match(/\d/g)
                   numb = parseInt(numb.join(""))
@@ -1001,11 +1057,10 @@ export default {
                     d.fy = null;
                   }
 
-                stepper.stop();
                 if (legendCall) {
 
                   var svgLegend = d3.select("#legend").append("svg")
-                    .attr("width", 160)
+                    .attr("width", 170)
                     .attr("height", 90)
                     .attr("id", "legendNode")
 
@@ -1133,61 +1188,64 @@ export default {
                     })
                   });
 
-                  var textLine = d3.select('#legendText').append("svg").attr('width', 160).attr('height', 90)
+                  var textLine = d3.select('#legendText').append("svg").attr('width', 170).attr('height', 90)
 
+                  var marginBorder = 18
+                  var marginBorderX = 10
                   textLine.append('line')
                     .style("stroke", "black")
                     .style("stroke-width", 3)
-                    .attr("x1", 35)
+                    .attr("x1", 35 + marginBorderX)
-                    .attr("y1", 50)
+                    .attr("y1", 50 - marginBorder)
-                    .attr("x2", 74)
+                    .attr("x2", 74 + marginBorderX)
-                    .attr("y2", 50)
+                    .attr("y2", 50 - marginBorder)
                   
                   textLine.append("text")
-                    .attr("dx", "75")
+                    .attr("dx", 75 + marginBorderX)
-                    .attr("dy", "55")
+                    .attr("dy", 55 - marginBorder)
                     .text("VIF")
 
                   textLine.append('line')
                     .style("stroke", "black")
                     .style("stroke-width", 3)
-                    .attr("x1", 42)
+                    .attr("x1", 42 + marginBorderX)
-                    .attr("y1", 31)
+                    .attr("y1", 31 - marginBorder)
-                    .attr("x2", 53)
+                    .attr("x2", 53 + marginBorderX)
-                    .attr("y2", 31)
+                    .attr("y2", 31 - marginBorder)
                   
                   textLine.append("text")
-                    .attr("dx", "54")
+                    .attr("dx", 54 + marginBorderX)
-                    .attr("dy", "36")
+                    .attr("dy", 36 - marginBorder)
                     .text("Per class COR")
 
                   textLine.append('line')
                     .style("stroke", "black")
                     .style("stroke-width", 3)
-                    .attr("x1", 32)
+                    .attr("x1", 32 + marginBorderX) 
-                    .attr("y1", 67)
+                    .attr("y1", 67 - marginBorder)
-                    .attr("x2", 74)
+                    .attr("x2", 74 + marginBorderX)
-                    .attr("y2", 67)
+                    .attr("y2", 67 - marginBorder)
                   
                   textLine.append("text")
-                    .attr("dx", "75")
+                    .attr("dx", 75 + marginBorderX)
-                    .attr("dy", "72")
+                    .attr("dy", 72 - marginBorder)
                     .text("Target COR")
 
                   textLine.append('line')
                     .style("stroke", "#6baed6")
                     .style("stroke-width", 3)
-                    .attr("x1", 18)
+                    .attr("x1", 18 + marginBorderX)
-                    .attr("y1", 50)
+                    .attr("y1", 50 - marginBorder)
-                    .attr("x2", 26)
+                    .attr("x2", 26 + marginBorderX)
-                    .attr("y2", 50)
+                    .attr("y2", 50 - marginBorder)
                   
                   textLine.append("text")
-                    .attr("dx", "0")
+                    .attr("dx", 0 + marginBorderX)
-                    .attr("dy", "55")
+                    .attr("dy", 55 - marginBorder)
                     .style("fill", "#6baed6")
                     .text("MI")
             }
+            stepper.stop();
           }
 
         });
@@ -1283,6 +1341,8 @@ export default {
       reset () {
         var svg = d3.select("#FeatureGraph");
         svg.selectAll("*").remove();
+        var svg = d3.select('#chartID')
+        svg.selectAll("*").remove()
       },
     },
   mounted () {
@@ -1387,4 +1447,24 @@ table td {
   padding-left: 6px !important;
 }
 
+#chartID {
+  position: absolute;
+  transform: translate(-390px, 840px);
+}
+
+.chart circle {
+  fill: black;
+  fill-opacity: 0.05;
+  stroke: black;
+  stroke-opacity: 0.05;
+  cursor: pointer;
+}
+
+.chart circle.selected {
+  fill: #0062cc;
+  fill-opacity: 1;
+  stroke: #0062cc;
+  stroke-opacity: 1;
+}
+
 </style>

frontend/src/components/FeatureSpaceOverview.vue

@@ -38,14 +38,14 @@
         <div class="button" data-key="191" title="Toggle Root">/</div>
       </div>
     </div>
-    <div class="tool">
-      <div id="help">Labels</div>
-      <div id="legendTarget" style="min-width: 130px; min-height: 50px; margin-top:-10px"></div>
-    </div>
     <div class="tool">
       <div class="tlabel" style="text-align:left" title="Change Root">&nbsp;Navigate</div>
       <div id="selection" class="tlabel"></div>
     </div>
+    <div class="tool">
+      <div id="help">Labels</div>
+      <div id="legendTarget" style="min-width: 492.7px; min-height: 50px; margin-top:-10px"></div>
+    </div>
   </div>
 
   <div id="contextmenu">
@@ -561,8 +561,7 @@ export default {
         function fullpath(d, idx) {
           idx = idx || 0;
           curPath.push(d);
-          return (d.parent ? fullpath(d.parent, curPath.length) : '') +
+          return '/<span class="nodepath'+
-            '/<span class="nodepath'+(d.name === root.name ? ' highlight' : '')+
             '" data-sel="'+ idx +'" title="Set Root to '+ d.name +'">' +
             d.name + '</span>';
         }

run.py

@@ -436,7 +436,7 @@ def executeModel(exeCall, flagEx):
     scores = []
 
     XData = XDataStored.copy()
-
+    # Bayesian Optimization for 150 iterations
     if (keyFirstTime):
         create_global_function()
         params = {"C": (0.0001, 10000), "gamma": (0.0001, 10000)}