blob: dd561c3ed5f6f33f6790f65a500bcb60740b48d0 [file] [log] [blame] [raw]
// Copyright (c) 2017, Najjar Chedy
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright
// notice, this list of conditions and the following disclaimer in the
// documentation and/or other materials provided with the distribution.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
'use strict';
var $ = require('jquery');
var vis = require('vis');
var _ = require('underscore');
require('selectize');
require("vis/dist/vis.css");
function Cfg(hub, container, state) {
this.container = container;
this.eventHub = hub.createEventHub();
this.domRoot = container.getElement();
this.domRoot.html($('#cfg').html());
this.defaultCfgOutput = {nodes: [{id: 0, shape: 'box', label: 'No Output'}], edges: []};
this.binaryModeSupport = {
nodes: [{
id: 0,
shape: 'box',
label: 'Cfg mode cannot be used when the binary filter is set'
}], edges: []
};
// Note that this might be outdated if no functions were present when creating the link, but that's handled
// by selectize
this.currentFunc = state.selectedFn || '';
this.functions = [];
this.networkOpts = {
autoResize: true,
locale: 'en',
edges: {
arrows: {to: {enabled: true}},
smooth: {
enabled: true,
type: "dynamic",
roundness: 1
},
physics: true
},
nodes: {
font: {face: 'Consolas, "Liberation Mono", Courier, monospace', align: 'left'}
},
layout: {
hierarchical: {
enabled: true,
direction: 'UD',
nodeSpacing: 100,
levelSeparation: 150
}
},
physics: {
enabled: true,
hierarchicalRepulsion: {
nodeDistance: 160
}
},
interaction: {
navigationButtons: false,
keyboard: {
enabled: true,
speed: {x: 10, y: 10, zoom: 0.03},
bindToWindow: false
}
}
};
this.cfgVisualiser = new vis.Network(this.domRoot.find('.graph-placeholder')[0],
this.defaultCfgOutput, this.networkOpts);
this.domRoot.find('.show-hide-btn').on('click', _.bind(function () {
this.networkOpts.interaction.navigationButtons = !this.networkOpts.interaction.navigationButtons;
this.cfgVisualiser.setOptions(this.networkOpts);
}, this));
this.domRoot.find('.enable-physics-btn').on('click', _.bind(function () {
this.networkOpts.physics.enabled = !this.networkOpts.physics.enabled;
// change only physics.enabled option to preserve current node locations
this.cfgVisualiser.setOptions({
physics: {enabled: this.networkOpts.physics.enabled}
});
}, this));
this.compilerId = state.id;
this._editorid = state.editorid;
this._binaryFilter = false;
this.functionPicker = $(this.domRoot).find('.function-picker').selectize({
sortField: 'name',
valueField: 'name',
labelField: 'name',
searchField: ['name']
}).on('change', _.bind(function (e) {
var selectedFn = this.functions[e.target.value];
if (selectedFn) {
this.currentFunc = e.target.value;
this.showCfgResults({
nodes: selectedFn.nodes,
edges: selectedFn.edges
});
this.cfgVisualiser.selectNodes([selectedFn.nodes[0].id]);
this.saveState();
}
}, this));
this.eventHub.on('compilerClose', this.onCompilerClose, this);
this.eventHub.on('compileResult', this.onCompileResult, this);
this.eventHub.on('compiler', this.onCompiler, this);
this.eventHub.on('filtersChange', this.onFiltersChange, this);
this.container.on('destroy', this.close, this);
this.container.on('resize', this.resize, this);
this.container.on('shown', this.resize, this);
this.eventHub.emit('cfgViewOpened', this.compilerId);
this.eventHub.emit('requestFilters', this.compilerId);
this.eventHub.emit('requestCompiler', this.compilerId);
this.adaptStructure = function (names) {
return _.map(names, function (name) {
return {name: name};
});
};
this.setTitle();
}
Cfg.prototype.onCompileResult = function (id, compiler, result) {
if (this.compilerId === id) {
var functionNames = [];
if (this.supportsCfg && !$.isEmptyObject(result.cfg)) {
this.functions = result.cfg;
functionNames = Object.keys(this.functions);
if (functionNames.indexOf(this.currentFunc) === -1) {
this.currentFunc = functionNames[0];
}
this.showCfgResults({
nodes: this.functions[this.currentFunc].nodes,
edges: this.functions[this.currentFunc].edges
});
this.cfgVisualiser.selectNodes([this.functions[this.currentFunc].nodes[0].id]);
} else {
// We don't reset the current function here as we would lose the saved one if this happened at the begining
// (Hint: It *does* happen)
this.showCfgResults(this._binaryFilter ? this.binaryModeSupport : this.defaultCfgOutput);
}
this.functionPicker[0].selectize.clearOptions();
this.functionPicker[0].selectize.addOption(functionNames.length ? this.adaptStructure(functionNames) : {name: 'The input does not contain functions'});
this.functionPicker[0].selectize.refreshOptions(false);
this.functionPicker[0].selectize.clear();
this.functionPicker[0].selectize.addItem(functionNames.length ? this.currentFunc : 'The input does not contain any function', true);
this.saveState();
}
};
Cfg.prototype.onCompiler = function (id, compiler) {
if (id === this.compilerId) {
this._compilerName = compiler ? compiler.name : '';
this.supportsCfg = compiler.supportsCfg;
this.setTitle();
}
};
Cfg.prototype.onFiltersChange = function (id, filters) {
if (this.compilerId === id) {
this._binaryFilter = filters.binary;
}
};
Cfg.prototype.resize = function () {
if (this.cfgVisualiser.canvas) {
var height = this.domRoot.height() - this.domRoot.find('.top-bar').outerHeight(true);
this.cfgVisualiser.setSize('100%', height.toString());
this.cfgVisualiser.redraw();
}
};
Cfg.prototype.setTitle = function () {
this.container.setTitle(this._compilerName + ' Graph Viewer (Editor #' + this._editorid + ', Compiler #' + this.compilerId + ')');
};
Cfg.prototype.assignLevels = function (data) {
var nodes = [];
var idToIdx = [];
for (var i in data.nodes) {
var node = data.nodes[i];
idToIdx[node.id] = i;
nodes.push({
edges: [],
dagEdges: [],
index: i,
id: node.id,
level: 0,
state: 0,
inCount: 0
});
}
var isEdgeValid = function (edge) {
return edge.from in idToIdx && edge.to in idToIdx;
};
data.edges.forEach(function (edge) {
if (isEdgeValid(edge)) {
nodes[idToIdx[edge.from]].edges.push(idToIdx[edge.to]);
}
});
var dfs = function (node) { // choose which edges will be back-edges
node.state = 1;
node.edges.forEach(function (targetIndex) {
var target = nodes[targetIndex];
if (target.state !== 1) {
if (target.state === 0) {
dfs(target);
}
node.dagEdges.push(targetIndex);
target.inCount += 1;
}
});
node.state = 2;
};
var markLevels = function (node) {
node.dagEdges.forEach(function (targetIndex) {
var target = nodes[targetIndex];
target.level = Math.max(target.level, node.level + 1);
if (--target.inCount === 0) {
markLevels(target);
}
});
};
nodes.forEach(function (node) {
if (node.state === 0) {
dfs(node);
node.level = 1;
markLevels(node);
}
});
nodes.forEach(function (node) {
data.nodes[node.index]['level'] = node.level;
});
data.edges.forEach(function (edge) {
if (isEdgeValid(edge)) {
var nodeA = nodes[idToIdx[edge.from]];
var nodeB = nodes[idToIdx[edge.to]];
if (nodeA.level >= nodeB.level) {
edge.physics = false;
} else {
edge.physics = true;
var diff = (nodeB.level - nodeA.level);
edge.length = diff * (200 - 5 * (Math.min(5, diff)));
}
} else {
edge.physics = false;
}
});
};
Cfg.prototype.showCfgResults = function (data) {
this.assignLevels(data);
this.cfgVisualiser.setData(data);
};
Cfg.prototype.onCompilerClose = function (compilerId) {
if (this.compilerId === compilerId) {
// We can't immediately close as an outer loop somewhere in GoldenLayout is iterating over
// the hierarchy. We can't modify while it's being iterated over.
this.close();
_.defer(function (self) {
self.container.close();
}, this);
}
};
Cfg.prototype.close = function () {
this.eventHub.unsubscribe();
this.eventHub.emit('cfgViewClosed', this.compilerId);
this.cfgVisualiser.destroy();
};
Cfg.prototype.saveState = function () {
this.container.setState(this.currentState());
};
Cfg.prototype.currentState = function () {
return {
id: this.compilerId,
editorid: this._editorid,
selectedFn: this.currentFunc
};
};
module.exports = {
Cfg: Cfg
};