Finish up Cfg view review concerns

.gitignore

@@ -7,4 +7,4 @@
 *.heapsnapshot
 etc/config/*.local.properties
 /nbproject
-/package-lock.json
+/package-lock.json

lib/base-compiler.js

@@ -296,9 +296,9 @@ Compile.prototype.compile = function (source, options, backendOptions, filters)
             .then(function (result) {
                 return filters.demangle ? _.bind(self.postProcessAsm, self, result)() : result;
             })
-            .then(function(result){
+            .then(function(result) {
                     result.supportsCfg = false;
-                    if (result.code === 0 && self.isSupportedCompiler(self.compiler.version)){
+                    if (result.code === 0 && self.isCfgCompiler(self.compiler.version)){
                         var cfg_ = new cfg.ControlFlowGraph(self.compiler.version);
                         result.cfg = cfg_.generateCfgStructure(result.asm);
                         result.supportsCfg = true;
@@ -372,8 +372,8 @@ Compile.prototype.couldSupportASTDump = function (options, version) {
     return false;
 };
 
-Compile.prototype.isSupportedCompiler = function(compilerVersion){
-    return compilerVersion.includes("clang") || compilerVersion.includes("g++") ;
+Compile.prototype.isCfgCompiler = function(compilerVersion) {
+    return compilerVersion.includes("clang") || compilerVersion.includes("g++");
 };
 
 Compile.prototype.processAstOutput = function (output) {

static/cfg-view.js

@@ -25,25 +25,23 @@
 
 define(function(require){
    "use strict";
-   
-   var FontScale = require('fontscale');
-   var options = require('options');
-   var vis = require('vis');
-   var _ = require('underscore');
-   
+
+    var vis = require('vis');
+    var _ = require('underscore');
+
     require('asm-mode');
     require('selectize');
-   
-   function Cfg(hub, container, state){
+
+    function Cfg(hub, container, state){
         this.container = container;
         this.eventHub = hub.createEventHub();
         this.domRoot = container.getElement();
         this.domRoot.html($('#cfg').html());
         this.functions = state.cfgResult;
-        this.defaultCfgOuput = {'nodes': [{id: 0, label: 'No Output'}], 'edges': []};
+        this.defaultCfgOuput = {nodes: [{id: 0, label: 'No Output'}], edges: []};
         this.fnNames = this.functions? Object.keys(this.functions):  [];
         this.currentFunc = this.fnNames.length? this.fnNames[0]: "";
-        
+
         this.networkOpts = {
             autoResize: true,
             locale: 'en',
@@ -57,10 +55,10 @@ define(function(require){
             },
             layout: {
                 improvedLayout: true,
-                "hierarchical": {
-                    "enabled": true,
-                    "sortMethod": "directed",
-                    "direction": "UD",
+                hierarchical: {
+                    enabled: true,
+                    sortMethod: "directed",
+                    direction: "LR", // LR means Upside/down for some reason!
                     nodeSpacing: 100,
                     levelSeparation: 100
                 }
@@ -79,19 +77,19 @@ define(function(require){
                 }
             }
         };
-        
-        this.cfgVisualiser = new vis.Network(this.domRoot.find(".graph-placeholder")[0], 
+
+        this.cfgVisualiser = new vis.Network(this.domRoot.find(".graph-placeholder")[0],
                                              this.defaultCfgOuput, this.networkOpts);
         this.restButton = this.domRoot.find(".show-hide-btn")
-                .on('click', _.bind(function(event){
-                    this.networkOpts.interaction.navigationButtons = !this.networkOpts.interaction.navigationButtons;
-                    this.cfgVisualiser.setOptions(this.networkOpts);
-                }, this));
-        
+            .on('click', _.bind(function(){
+                this.networkOpts.interaction.navigationButtons = !this.networkOpts.interaction.navigationButtons;
+                this.cfgVisualiser.setOptions(this.networkOpts);
+            }, this));
+
         this._compilerid = state.id;
         this._compilerName = state.compilerName;
         this._editorid = state.editorid;
-        
+
         this.eventHub.on('compileResult', this.onCompileResult, this);
         this.eventHub.on('compiler', this.onCompiler, this);
         this.eventHub.emit('cfgViewOpened', this._compilerid);
@@ -99,13 +97,13 @@ define(function(require){
             this.eventHub.emit("cfgViewClosed", this._compilerid, this.cfgVisualiser);
             this.eventHub.unsubscribe();
         }, this);
-        
+
         container.on('resize', this.resize, this);
         container.on('shown', this.resize, this);
-        
+
         this.adaptStructure = function(names){
             var options = [];
-            
+
             for(var i = 0; i < names.length; ++i){
                 options.push({name:names[i]});
             }
@@ -117,16 +115,16 @@ define(function(require){
             valueField: 'name',
             labelField: 'name',
             searchField: ['name'],
-            options: this.fnNames.length ? this.adaptStructure(this.fnNames) : [{name:"the input contain no function"}],
-            items: this.fnNames.length ? [this.currentFunc] : ["select a function please..."]
+            options: this.fnNames.length ? this.adaptStructure(this.fnNames) : [{name:"The input does not contain any function"}],
+            items: this.fnNames.length ? [this.currentFunc] : ["Please select a function"]
         }).on('change', _.bind(function(event){
             this.onFunctionChange(this.functions, event.target.value);
         }, this));
-        
+
         this.setTitle();
-   }
-   
-   Cfg.prototype.onCompileResult = function (id, compiler, result) {
+    }
+
+    Cfg.prototype.onCompileResult = function (id, compiler, result) {
         if (this._compilerid === id) {
             if (result.supportsCfg && !$.isEmptyObject(result.cfg)) {
                 this.functions = result.cfg;
@@ -143,25 +141,22 @@ define(function(require){
                 this.currentFunc = "";
                 this.fnNames = [];
             }
-            
+
             this.select[0].selectize.destroy();
             this.select = this.domRoot.find(".function-picker").selectize({
                 sortField: 'name',
                 valueField: 'name',
                 labelField: 'name',
                 searchField: ['name'],
-                options: this.fnNames.length ? this.adaptStructure(this.fnNames) : [{name:"the input contain no function"}],
-                items:  this.fnNames.length ? [this.currentFunc] : ["select a function please..."]
+                options: this.fnNames.length ? this.adaptStructure(this.fnNames) : [{name:"The input does not contain any function"}],
+                items:  this.fnNames.length ? [this.currentFunc] : ["Please select a function"]
             }).on('change', _.bind(function (event) {
                 this.onFunctionChange(this.functions, event.target.value);
-            }), this);
-            
-            
-
+            }, this));
         }
     };
-   
-   Cfg.prototype.setTitle = function () {
+
+    Cfg.prototype.setTitle = function () {
           this.container.setTitle(this._compilerName + " Graph Viewer (Editor #" + this._editorid + ", Compiler #" + this._compilerid + ")");
     };
 
@@ -185,9 +180,9 @@ define(function(require){
                 'edges': functions[name].edges
             });
             this.cfgVisualiser.selectNodes([functions[name].nodes[0].id]);
-        }      
+        }
     };
-    
+
     Cfg.prototype.resize = function () {
         var height = this.domRoot.height() - this.domRoot.find(".top-bar").outerHeight(true);
         this.cfgVisualiser.setSize('100%', height.toString());

static/compiler.js

@@ -325,7 +325,7 @@ define(function (require) {
         this.cfgButton.click(_.bind(function () {
             var insertPoint = hub.findParentRowOrColumn(this.container) ||
                 this.container.layoutManager.root.contentItems[0];
-            insertPoint.addChild(createCfgView());
+            insertPoint.addChild(createCfgView);
             this.cfgButton.prop("disabled", true);
             this.compile();
         }, this));

static/explorer.css

@@ -233,3 +233,12 @@ pre.content {
     display: block;
     overflow: auto;
 }
+
+.cfg-toolbar table {
+    width: 100%;
+}
+
+.graph-placeholder {
+    width: 100%;
+    height: 100%;
+}

static/themes/dark/theme-dark.css

@@ -213,3 +213,8 @@ input.permalink {
 .conformance-wrapper {
     background-color: #1e1e1e !important;
 }
+
+.graph-placeholder {
+    background-color: #333333 !important;
+}
+

static/themes/explorer-default.css

@@ -98,3 +98,7 @@
 .conformance-wrapper {
     background-color: #fff;
 }
+
+.graph-placeholder {
+    background-color: #FFFFFF;
+}

test/cases/cfg-clang.if-else.json

@@ -229,4 +229,4 @@
                 }]
         }
     }
-}
+}

test/cases/cfg-clang.loop.json

@@ -408,4 +408,4 @@
                 }]
         }
     }
-}
+}

test/cases/cfg-gcc.single-block.json

@@ -94,4 +94,4 @@
                 }]
         }
     }
-}
+}

test/cfg-tests.js

@@ -44,8 +44,3 @@ describe('Cfg test cases', function () {
         common(cases, "clang", "clang");
     });
 });
-
-
-
-
-

views/templates.pug

@@ -87,13 +87,13 @@
     .monaco-placeholder
 
   #cfg
-    .top-bar.btn-toolbar(role="toolbar")
-      table(style="width:100%")
-       tr(style="width:100%")
+    .top-bar.btn-toolbar.cfg-toolbar(role="toolbar")
+      table
+       tr
          td: select.function-picker
          td: button.btn.btn-default.btn-sm.show-hide-btn
                span.glyphicon.glyphicon-unchecked
-    div.graph-placeholder(style="width:100%;height:100%;background-color:white")
+    div.graph-placeholder
 
   #conformance
     .top-bar.tn-toolbar(role="toolbar")