resources.ait-network-graph.js Maven / Gradle / Ivy
var networkGraph = {
alchemy: null,
getParams: [],
c: {
dataSource: null,
graph: {
dataSource: null,
divSelector: '#network-graph',
backgroundColour: '#ffffff',
directedEdges: false,
initialScale: 1,
scaleExtent: [0.5, 1.5],
nodeClick: function(n, event) {
networkGraph.showInformationPanel(event.pageX, event.pageY, 'node', n.getProperties());
},
nodeTypes: { "role":
["PATCH-PANEL", "SWITCH", "SERVER"]
},
nodeStyle: {
"all": {
"borderColor": "#ff8f02",
"borderWidth": function(d, radius) {
return radius / 5
},
"color": function(d) {
return "rgba(127, 127, 127, 0.5)"
},
"radius": function(d) {
if(d.getProperties().root)
return 20; else return 10
},
"captionOffset": 22
},
"PATCH-PANEL":{
"borderColor": "#ff8f02",
"color": "#ace9ff",
"selected": {
"color": "#333333",
},
"highlighted": {
"color": "#005c96"
}
},
"SWITCH":{
"borderColor": "#ff8f02",
"color": "#9bf896",
"selected": {
"color": "#333333",
},
"highlighted": {
"color": "#409e43"
},
"radius": function(d) {
return 15;
}
},
"SERVER":{
"borderColor": "#ff8f02",
"color": "#fcf8e3",
"selected": {
"color": "#333333",
},
"highlighted": {
"color": "#d3cfba"
}
}
},
curvedEdges: false,
edgeClick: function(e, event){
networkGraph.showInformationPanel(event.pageX, event.pageY, 'edge', e.getProperties());
},
edgeTypes: {"edgeType": ["gray", "black", "green", "blue", "red", "yellow", "aqua", "multiply"]},
edgeStyle: {
"all": {
"color": "#333333",
"width": 3
},
"gray": {
"width": 3,
"color": "rgba(128,128,128,1)",
"opacity": 0.6,
"selected": {
"opacity": 1
},
"highlighted": {
"opacity": 1
}
},
"black": {
"width": 3,
"color": "rgba(0,0,0,1)",
"opacity": 0.6,
"selected": {
"opacity": 1
},
"highlighted": {
"opacity": 1
}
},
"green": {
"width": 3,
"color": "rgba(0,255,0,1)",
"opacity": 0.6,
"selected": {
"opacity": 1
},
"highlighted": {
"opacity": 1
}
},
"blue": {
"width": 3,
"color": "rgba(0,0,255,1)",
"opacity": 0.6,
"selected": {
"opacity": 1
},
"highlighted": {
"opacity": 1
}
},
"red": {
"width": 3,
"color": "rgba(255,0,0,1)",
"opacity": 0.6,
"selected": {
"opacity": 1
},
"highlighted": {
"opacity": 1
}
},
"yellow": {
"width": 3,
"color": "rgba(255,255,0,1)",
"opacity": 0.6,
"selected": {
"opacity": 1
},
"highlighted": {
"opacity": 1
}
},
"aqua": {
"width": 3,
"color": "rgba(96,196,212,1)",
"opacity": 0.6,
"selected": {
"opacity": 1
},
"highlighted": {
"opacity": 1
}
},
"multiply": {
"width": function(e){
if (e.getProperties().weight) return (e.getProperties().weight + 3)
else return 3;
},
"color": "rgba(163,0,255,1)",
"opacity": 0.6,
"selected": {
"opacity": 1
},
"highlighted": {
"opacity": 1
}
}
}
},
markup: {
lightwindow: '\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
[X] Close\
\
',
radioFilter: '\
\
',
radioItem: '',
contextPanel: '',
contextMenu: '\
\
\
',
},
label: {
description: "Description:"
}
},
init: function(c) {
$.extend(true, this.c, c);
},
show: function(itemID) {
var self = this;
this.createLayer();
this.initLayerControl();
this.getParams = [];
this.getParams = comParam.add(this.getParams, 'rootId', itemID);
this.getData(this.getParams, function(data){
self.onResponse(data);
});
},
createLayer: function() {
var markup = string.replacePlaceHolders(this.c.markup.lightwindow, {
width: ($(window).width() - 30) + 'px',
height: ($(window).height() - 30) + 'px',
padding: '5px'
});
lightwindow.options.lightwindowTopDelta = 0;
lightwindow.show(markup);
},
initLayerControl: function() {
var self = this;
var isEventSupported = function(eventName) {
var el = document.createElement('div');
eventName = 'on' + eventName;
var isSupported = (eventName in el);
if (!isSupported) {
el.setAttribute(eventName, 'return;');
isSupported = typeof el[eventName] == 'function';
}
el = null;
return isSupported;
};
$('#network-graph-filter input[name="captions"]').change(function(){
switch (this.value) {
case "0":
$(self.c.graph.divSelector).removeClass('show-all-captions show-nodes-captions show-edges-captions');
break;
case "1":
$(self.c.graph.divSelector).removeClass('show-all-captions show-nodes-captions show-edges-captions').addClass('show-all-captions');
break;
case "2":
$(self.c.graph.divSelector).removeClass('show-all-captions show-nodes-captions show-edges-captions').addClass('show-nodes-captions');
break;
case "3":
$(self.c.graph.divSelector).removeClass('show-all-captions show-nodes-captions show-edges-captions').addClass('show-edges-captions');
break;
}
});
$(self.c.graph.divSelector).bind('contextmenu', function(e){
if (e.target.nodeName == 'circle') {
e.preventDefault();
self.showNodeContextMenu(e.pageX, e.pageY, e.target['__data__'].id);
return false;
}
});
$('body').bind('click', function(){
self.hideContextPanel();
});
var wheelEvent = isEventSupported('mousewheel') ? 'mousewheel' : 'wheel';
$(self.c.graph.divSelector).bind(wheelEvent, function(){
self.hideContextPanel();
});
},
getData: function(getParams, callback) {
var self = this;
if (this.c.dataSource == null) {
alert('Error: No Data found.');
return;
}
app.showLoader(0);
$.ajax(this.c.dataSource+'?'+comParam.getRequestParamString(getParams),{
dataType: 'json'
})
.done(function(data, textStatus, jqXHR) {
callback(data);
app.removeLoader();
})
.fail(function(e) {
alert('AJAX-Error: ' + self.c.graph.dataSource);
app.removeLoader();
});
},
onResponse: function(data) {
$('#graph-title').html(data.comment);
this.initFilters(data);
this.initComParams(data);
//create graph
this.c.graph.dataSource = data;
this.alchemy = new Alchemy(this.c.graph);
},
initFilters: function(data) {
var self = this,
markup = this.getFiltersMarkup(data);
$('#network-graph-filter .filters').html('').append(markup);
//events
//radio filter
$('#network-graph-filter .filters input[type="radio"]').change(function(){
self.alchemy = null;
$(self.c.graph.divSelector).html('');
this.getParams = comParam.change(self.getParams, this.name, this.value);
self.getData(self.getParams, function(data){
self.onResponse(data);
});
});
},
getFiltersMarkup: function(data) {
var filterData = data.filter,
allFilters = '';
for (var filter in filterData) {
if (typeof(filterData[filter].config) == 'undefined') continue;
if (typeof(filterData[filter].data) == 'undefined') continue;
switch (filterData[filter].config.type) {
case "radio":
var itemsMarkup = '';
for (var i=0; i'+this.c.label.description+'
'+prop.description);
break;
}
}
};
//communication parameter
var comParam = {
add: function(target, name, value){
var param = new Array();
param[name] = value;
target.push(param);
return target;
},
remove: function(target, name, value){
var buffer = new Array();
var isValuesEQ = function(targetValue, value){
if (typeof(value) == 'undefined') return true;
if (targetValue == value) return true;
else return false;
};
for(var i in target){
for (var paramName in target[i]) {
if ((paramName == name) && isValuesEQ(target[i][paramName],value)) {
continue;
} else {
var param = new Array();
param[paramName] = target[i][paramName];
buffer.push(param);
}
}
}
target = buffer;
return target;
},
change: function(target, name, value) {
var found = false;
for(var i in target){
for (var paramName in target[i]) {
if (paramName == name) {
target[i][paramName] = value;
found = true;
}
}
}
if (!found) comParam.add(target, name, value);
return target;
},
get: function(target, name) {
for(var i in target){
for (var paramName in target[i]) {
if (paramName == name) {
return target[i][paramName];
}
}
}
return null;
},
getRequestedState: function(){
var state = new Array;
var items = this.getUrlParams().split('&');
if ((items.length == 1) && (items[0] == '')) return state;
for (var i=0; i © 2015 - 2025 Weber Informatics LLC | Privacy Policy