structr.js.graph.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of structr-ui Show documentation
Show all versions of structr-ui Show documentation
Structr is an open source framework based on the popular Neo4j graph database.
The newest version!
/*
* Copyright (C) 2010-2016 Structr GmbH
*
* This file is part of Structr .
*
* Structr is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* Structr is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Structr. If not, see 
'
+ '');
queriesSlideout.append(''
+ '');
queriesSlideout.append('Cypher Parameters
');
_Graph.appendCypherParameter($('#cypher-params'));
$('#clear-graph').on('click', function() {
_Graph.clearGraph();
});
$('#exec-rest').on('click', function() {
var query = $('.search[name=rest]').val();
if (query && query.length) {
_Graph.execQuery(query, 'rest');
}
});
$('#exec-cypher').on('click', function() {
var query = $('.search[name=cypher]').val();
var params = {};
var names = $.map($('[name="cyphername[]"]'), function(n) {
return $(n).val();
});
var values = $.map($('[name="cyphervalue[]"]'), function(v) {
return $(v).val();
});
for (var i = 0; i < names.length; i++) {
params[names[i]] = values[i];
}
if (query && query.length) {
_Graph.execQuery(query, 'cypher', JSON.stringify(params));
}
});
$('#add-cypher-parameter').on('click', function() {
_Graph.appendCypherParameter($('#cypher-params'));
});
_Graph.activateClearSearchIcon();
queriesSlideout.append('Saved Queries
');
_Graph.listSavedQueries();
//_Graph.restoreSavedQuery(0);
searchField = $('.search', queriesSlideout);
searchField.focus();
searchField.keydown(function(e) {
var rawSearchString = $(this).val();
var searchString = rawSearchString;
var self = $(this);
var type = self.attr('name');
if (type !== 'cypher') {
var type;
var posOfColon = rawSearchString.indexOf(':');
if (posOfColon > -1) {
type = rawSearchString.substring(0, posOfColon);
type = type.capitalize();
searchString = rawSearchString.substring(posOfColon + 1, rawSearchString.length);
}
}
if (searchString && searchString.length) {
_Graph.activateClearSearchIcon(type);
} else {
_Graph.clearSearch(type);
}
if (searchString && searchString.length && e.which === 13) {
//console.log('Search executed', searchString, type);
if (!shiftKey) {
_Graph.execQuery(searchString, type);
return false;
}
} else if (e.which === 27 || rawSearchString === '') {
_Graph.clearSearch(type);
}
});
win.off('resize');
win.resize(function() {
_Graph.resize();
});
Structr.unblockMenu(100);
},
execQuery: function(query, type, params) {
//console.log('exec', type, 'query: ', query, ', with parameters.', params);
if (query && query.length) {
if (type === 'cypher') {
Command.cypher(query.replace(/(\r\n|\n|\r)/gm, ''), params, _Graph.processQueryResults);
_Graph.saveQuery(query, 'cypher', params);
} else {
Command.rest(query.replace(/(\r\n|\n|\r)/gm, ''), _Graph.processQueryResults);
_Graph.saveQuery(query, 'rest');
}
_Graph.listSavedQueries();
}
},
processQueryResults: function (results) {
// console.log('query results: ', results);
var nodes = [];
var rels = [];
$(results).each(function (i, entity) {
if (entity.hasOwnProperty('relType')) {
rels.push(entity);
} else {
nodes.push(entity);
}
});
nodes.forEach(function (entity) {
StructrModel.createSearchResult(entity);
});
rels.forEach(function (entity) {
StructrModel.createSearchResult(entity);
});
if (engine) {
_Graph.resize();
_Graph.scheduleRefreshEngine();
}
},
saveQuery: function(query, type, params) {
var savedQueries = JSON.parse(LSWrapper.getItem(savedQueriesKey)) || [];
var exists = false;
$.each(savedQueries, function(i, q) {
if (q.query === query && q.params === params) {
exists = true;
}
});
if (!exists) {
savedQueries.unshift({'type': type, 'query': query, 'params': params});
LSWrapper.setItem(savedQueriesKey, JSON.stringify(savedQueries));
Structr.saveLocalStorage();
}
},
removeSavedQuery: function(i) {
var savedQueries = JSON.parse(LSWrapper.getItem(savedQueriesKey)) || [];
savedQueries.splice(i, 1);
LSWrapper.setItem(savedQueriesKey, JSON.stringify(savedQueries));
_Graph.listSavedQueries();
Structr.saveLocalStorage();
},
restoreSavedQuery: function(i, exec) {
var savedQueries = JSON.parse(LSWrapper.getItem(savedQueriesKey)) || [];
var query = savedQueries[i];
$('.search[name=' + query.type + ']').val(query.query);
_Graph.activateClearSearchIcon(query.type);
$('#cypher-params input').remove();
$('#cypher-params br').remove();
$('#cypher-params img.remove-cypher-parameter').remove();
if (query.params && query.params.length) {
var parObj = JSON.parse(query.params);
$.each(Object.keys(parObj), function(i, key) {
_Graph.appendCypherParameter($('#cypher-params'), key, parObj[key]);
});
} else {
_Graph.appendCypherParameter($('#cypher-params'));
}
if (exec) {
_Graph.execQuery(query.query, query.type, query.params);
}
},
listSavedQueries: function() {
$('#saved-queries').empty();
queriesSlideout.append('');
var savedQueries = JSON.parse(LSWrapper.getItem(savedQueriesKey)) || [];
$.each(savedQueries, function(q, query) {
if (query.type === 'cypher') {
$('#saved-queries').append('
' + query.query + '');
} else {
$('#saved-queries').append('
' + query.query + '');
}
});
$('.saved-query').on('click', function() {
_Graph.restoreSavedQuery($(this).index());
});
$('.replay').on('click', function() {
_Graph.restoreSavedQuery($(this).parent().index(), true);
});
$('.remove-query').on('click', function() {
_Graph.removeSavedQuery($(this).parent().index());
});
},
activateClearSearchIcon: function(type) {
var icon = $('#clear-' + type);
icon.show().on('click', function() {
$(this).hide();
$('.search[name=' + type + ']').val('').focus();
});
},
clearSearch: function(type) {
$('#clear-' + type).hide().off('click');
$('.search[name=' + type + ']').val('').focus();
},
clearGraph: function() {
//console.log('clearGraph');
colors = [];
relTypes = {};
nodeTypes = {};
//nodeColors = {};
//relColors = {};
nodeIds = [];
relIds = [];
hiddenNodeTypes = [];
hiddenRelTypes = [];
engine.graph.clear();
engine.refresh();
//engine = undefined;
},
unload: function() {
//console.log('unload graph');
_Graph.clearGraph();
},
loadRelationships: function(nodeId) {
if (nodeId) {
$.ajax({
url: rootUrl + nodeId + '/out?pageSize=' + maxRels,
dataType: "json",
//async: false,
success: function(data) {
if (!data || data.length === 0 || !data.result || !data.result.length) {
return;
}
var results = data.result;
var count = 0, i = 0;
while (i < results.length && count < maxRels) {
var r = results[i++];
if (relIds.indexOf(r.id) === -1) {
_Graph.loadRelationship(r);
}
}
_Graph.scheduleRefreshEngine();
}
});
$.ajax({
url: rootUrl + nodeId + '/in?pageSize=' + maxRels,
dataType: "json",
//async: false,
success: function(data) {
if (!data || data.length === 0 || !data.result || !data.result.length) {
return;
}
var results = data.result;
var count = 0, i = 0;
while (i < results.length && count < maxRels) {
var r = results[i++];
if (relIds.indexOf(r.id) === -1) {
_Graph.loadRelationship(r);
}
}
_Graph.scheduleRefreshEngine();
}
});
}
},
loadNode: function(nodeId, callback) {
//console.log('loadNode', nodeId, callback);
if (nodeId) {
if (isIn(nodeId, nodeIds)) {
if (callback) {
callback();
}
} else {
Command.get(nodeId, function(n) {
_Graph.drawNode(n);
if (callback) {
callback();
}
});
}
}
},
loadRelationship: function(rel) {
//console.log('loadRelationship', rel);
_Graph.loadNode(rel.sourceId, function() {
_Graph.loadNode(rel.targetId, function() {
_Graph.drawRel(rel);
});
});
},
findRelationships: function(sourceId, targedId, relType) {
var edges = [];
engine.graph.edges().forEach(function(edge) {
if (edge.source === sourceId && edge.target === targedId && (!relType || edge.relType === relType)) {
edges.push(edge);
}
});
return edges;
},
drawNode: function(node, x, y) {
if (isIn(node.id, nodeIds) || isIn(node.type, filteredNodeTypes)) {
return;
}
nodeIds.push(node.id);
_Graph.setNodeColor(node);
//console.log('drawing node', node, nodeTypes[node.type], isIn(node.type, hiddenNodeTypes));
engine.graph.addNode({
id: node.id || node.name,
label: (node.name || node.tag || node.id.substring(0, 5) + '…') + ':' + node.type,
x: x || Math.random(10),
y: y || Math.random(10),
size: 20,
color: nodeColors[node.type],
type: node.type,
name: node.name,
hidden: isIn(node.type, hiddenNodeTypes)
});
//_Graph.scheduleRefreshEngine();
//_Graph.updateNodeTypes();
},
drawRel: function(r) {
if (isIn(r.id, relIds) || (!isIn(r.sourceId, nodeIds) || !isIn(r.targetId, nodeIds)) ) {
return;
}
relIds.push(r.id);
_Graph.setRelationshipColor(r);
//var existingEdges = _Graph.findRelationships(r.sourceId, r.targetId, r.relType);
var existingEdges = _Graph.findRelationships(r.sourceId, r.targetId);
var c = existingEdges.length * 15;
//console.log('Found existing edges:', r, existingEdges, c);
engine.graph.addEdge({
id: r.id,
label: r.relType,
source: r.sourceId,
target: r.targetId,
size: 40,
color: defaultRelColor,
type: edgeType,
relType: r.relType,
hidden: isIn(r.relType, hiddenRelTypes),
count: c
});
_Graph.scheduleRefreshEngine();
_Graph.updateRelationshipTypes();
},
updateNode: function(node, obj) {
if (!node) {
node = engine.graph.nodes(obj.id);
}
if (obj.name) {
node.name = obj.name;
}
if (obj.id) {
node.id = obj.id;
}
if (obj.tag) {
node.tag = obj.tag;
}
node.label = (node.name || node.tag || node.id.substring(0, 5) + '…') + ':' + node.type;
if (obj.type) {
node.type = obj.type;
}
_Graph.scheduleRefreshEngine();
},
resize: function() {
Structr.resize();
var windowHeight = win.height();
var offsetHeight = 360;
$('#saved-queries').css({
height: windowHeight - offsetHeight + 'px'
});
var ch = win.height() - 61;
graph.css({
height: ch,
width: win.width()
});
$('canvas', graph).css({
height: ch,
width: win.width()
});
nodeTypes = $('#node-types');
var distance = nodeTypes.position().top - 61;
var boxHeight = (ch - (3 * distance)) / 2;
nodeTypes.css({
height: boxHeight
});
$('#relationship-types').css({
top: nodeTypes.position().top + boxHeight + distance,
height: boxHeight
});
if (engine) {
_Graph.scheduleRefreshEngine();
}
},
loadTypeDefinition: function(type, callback) {
var url = rootUrl + '_schema/' + type;
$.ajax({
url: url,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
//async: false,
statusCode: {
200: function(data) {
if (callback) {
callback(data.result[0]);
}
},
401: function(data) {
console.log(data);
},
404: function(data) {
console.log(data);
},
422: function(data) {
console.log(data);
}
}
}).always(function(data) {
if (callback) {
callback(data.result[0]);
}
});
},
updateNodeTypes: function() {
var nodeTypesBox = $('#node-types');
fastRemoveAllChildren(nodeTypesBox[0]);
// getByType: function(type, pageSize, page, sort, order, properties, includeDeletedAndHidden, callback) {
Command.getSchemaInfo(function(nodes) {
nodes.sort(function(a, b) {
var aName = a.name.toLowerCase();
var bName = b.name.toLowerCase();
return aName < bName ? -1 : aName > bName ? 1 : 0;
});
nodes.forEach(function(node) {
var hide = false;
if (!displayCustomTypes && node.className.startsWith('org.structr.dynamic')) hide = true;
if (!hide && !displayCoreTypes && node.className.startsWith('org.structr.core.entity')) hide = true;
if (!hide && !displayHtmlTypes && node.className.startsWith('org.structr.web.entity.html')) hide = true;
if (!hide && !displayUiTypes && node.className.startsWith('org.structr.web.entity') && !(displayHtmlTypes && node.className.startsWith('org.structr.web.entity.html'))) hide = true;
if (!hide && !displayLogTypes && node.className.startsWith('org.structr.rest.logging.entity')) hide = true;
if (!hide && !displayOtherTypes && node.className.startsWith('org.structr.xmpp')) hide = true;
//console.log(hide, node.type);
if (hide) {
filteredNodeTypes.push(node.type);
return;
} else {
filteredNodeTypes.splice(filteredNodeTypes.indexOf(node.type), 1);
}
//console.log(filteredNodeTypes);
schemaNodes[node.type] = node;
schemaNodesById[node.id] = node;
// expand comma-separated list into real collection
if (schemaNodes[node.type].possibleSourceTypes) {
schemaNodes[node.type].possibleSourceTypes = schemaNodes[node.type].possibleSourceTypes.split(",");
}
// expand comma-separated list into real collection
if (schemaNodes[node.type].possibleTargetTypes) {
schemaNodes[node.type].possibleTargetTypes = schemaNodes[node.type].possibleTargetTypes.split(",");
}
var nodeType = node.name;
if (!isIn(nodeType, Object.keys(nodeColors))) {
nodeColors[nodeType] = colors[color++];
}
//Object.keys(nodeColors).forEach(function (nodeType) {
nodeTypesBox.append(' ' + nodeType + '');
var nt = $('#node-type-' + nodeType, nodeTypesBox);
if (isIn(nodeType, hiddenNodeTypes)) {
nt.attr('data-hidden', 1);
nt.addClass('hidden-node-type');
console.log('nodeType is hidden', nodeType);
}
nt.on('mousedown', function() {
var nodeTypeEl = $(this);
nodeTypeEl.css({pointer: 'move'});
//_Graph.toggleNodeType(nodeType);
}).on('click', function() {
// TODO: Query
}).on('mouseover', function() {
_Graph.highlightNodeType(nodeType);
}).on('mouseout', function() {
_Graph.unhighlightNodeType(nodeType);
}).draggable({
helper: 'clone'
});
$('.toggle-type', nt).on('click', function() {
var n = $(this);
if (n.attr('data-hidden')) {
_Graph.showNodeType(nodeType, function() {
n.removeAttr('data-hidden', 1);
//n.removeClass('hidden-node-type');
});
} else {
_Graph.hideNodeType(nodeType, function() {
n.attr('data-hidden', 1);
//n.addClass('hidden-node-type');
});
}
});
});
_Graph.filterNodeTypes(filteredNodeTypes);
_Graph.resize();
});
},
filterNodeTypes: function(types, callback) {
types.forEach(function(type) {
engine.graph.nodes().forEach(function(node) {
if (node.type === type) {
//console.log(type, node.type, node);
engine.graph.dropNode(node.id);
//try { engine.graph.dropNode(node); } catch(x) {}
}
});
});
_Graph.refreshEngine();
if (callback) {
callback();
}
//console.log(hiddenNodeTypes);
},
hideNodeType: function(type, callback) {
engine.graph.nodes().forEach(function(node) {
if (node.type === type) {
node.hidden = true;
}
});
hiddenNodeTypes.push(type);
_Graph.refreshEngine();
if (callback) {
callback();
}
//console.log(hiddenNodeTypes);
},
showNodeTypes: function(types, callback) {
types.forEach(function(type) {
engine.graph.nodes().forEach(function(node) {
if (node.type === type) {
node.hidden = false;
}
});
hiddenNodeTypes.splice(hiddenNodeTypes.indexOf(type), 1);
});
_Graph.refreshEngine();
if (callback) {
callback();
}
//console.log(hiddenNodeTypes);
},
showNodeType: function(type, callback) {
engine.graph.nodes().forEach(function(node) {
if (node.type === type) {
node.hidden = false;
}
});
hiddenNodeTypes.splice(hiddenNodeTypes.indexOf(type), 1);
_Graph.refreshEngine();
if (callback) {
callback();
}
//console.log(hiddenNodeTypes);
},
highlightNodeType: function(type) {
engine.graph.nodes().forEach(function(node) {
if (node.type === type) {
node.oldColor = node.color;
node.color = colorLuminance(node.color, -.2);
}
});
//_Graph.scheduleRefreshEngine();
},
unhighlightNodeType: function(type) {
engine.graph.nodes().forEach(function(node) {
if (node.type === type) {
node.color = node.oldColor;
}
});
//_Graph.scheduleRefreshEngine();
},
setNodeColor: function(node) {
if (!isIn(node.type, Object.keys(nodeColors))) {
node.color = colors[color++];
//console.log(typeDef.type, typeDef.color, color);
nodeColors[node.type] = node.color;
} else {
node.color = nodeColors[node.type];
}
},
setRelationshipColor: function(rel) {
//console.log('setRelColor', rel);
if (!isIn(rel.relType, Object.keys(relColors))) {
rel.color = colors[color++];
//console.log(typeDef.type, typeDef.color, color);
relColors[rel.relType] = rel.color;
} else {
rel.color = relColors[rel.relType];
}
},
updateRelationshipTypes: function() {
var relTypesBox = $('#relationship-types');
relTypesBox.empty();
//console.log(relColors);
Object.keys(relColors).forEach(function(relType) {
relTypesBox.append('' + relType + '');
var rt = $('#rel-type-' + relType, relTypesBox);
if (isIn(relType, hiddenRelTypes)) {
rt.attr('data-hidden', 1);
rt.addClass('hidden-node-type');
}
rt.on('mousedown', function() {
var relTypeEl = $(this);
relTypeEl.css({pointer: 'move'});
//_Graph.toggleNodeType(nodeType);
}).on('click', function() {
var n = $(this);
if (n.attr('data-hidden')) {
_Graph.showRelType(relType, function() {
n.removeAttr('data-hidden', 1);
n.removeClass('hidden-node-type');
});
} else {
_Graph.hideRelType(relType, function() {
n.attr('data-hidden', 1);
n.addClass('hidden-node-type');
});
}
}).on('mouseover', function() {
_Graph.highlightRelationshipType(relType);
}).on('mouseout', function() {
_Graph.unhighlightRelationshipType(relType);
});
});
},
highlightRelationshipType: function(type) {
engine.graph.edges().forEach(function(edge) {
if (edge.relType === type) {
edge.oldColor = edge.color;
edge.color = colorLuminance(edge.color, -.2);
}
});
//_Graph.scheduleRefreshEngine();
},
unhighlightRelationshipType: function(type) {
engine.graph.edges().forEach(function(edge) {
if (edge.relType === type) {
edge.color = edge.oldColor;
}
});
//_Graph.scheduleRefreshEngine();
},
hideRelType: function(type, callback) {
engine.graph.edges().forEach(function(edge) {
if (edge.relType === type) {
edge.hidden = true;
}
});
hiddenRelTypes.push(type);
_Graph.scheduleRefreshEngine();
if (callback) {
callback();
}
},
showRelType: function(type, callback) {
engine.graph.edges().forEach(function(edge) {
if (edge.relType === type) {
edge.hidden = false;
}
});
hiddenRelTypes.splice(hiddenRelTypes.indexOf('type'), 1);
_Graph.scheduleRefreshEngine();
if (callback) {
callback();
}
},
appendCypherParameter: function(el, key, value) {
el.append('
');
$('.remove-cypher-parameter', el).on('click', function() {
$(this).parent().remove();
});
},
scheduleRefreshEngine: function() {
window.clearTimeout(refreshTimeout);
refreshTimeout = window.setTimeout(_Graph.refreshEngine, 100);
},
refreshEngine: function() {
hasDoubleClicked = false;
hasDragged = false;
engine.refresh();
},
distance: function(n1, n2) {
var x1 = parseInt(n1['renderer1:x']);
var y1 = parseInt(n1['renderer1:y']);
var x2 = parseInt(n2['renderer1:x']);
var y2 = parseInt(n2['renderer1:y']);
var d = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
//console.log(x1,y2, x2,y2, d);
return d;
}
};
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
function colorLuminance(hex, lum) {
hex = String(hex).replace(/[^0-9a-f]/gi, '');
lum = lum || 0;
if (hex.length < 6) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
// convert to decimal
var r = convertToDec(hex.substr(0, 2)), g = convertToDec(hex.substr(2, 2)), b = convertToDec(hex.substr(4, 2));
// desaturate
var rgb = desaturate(r, g, b, .5);
// change luminosity
var newHex = "#", c, i;
for (i = 0; i < 3; i++) {
c = rgb[i];
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
newHex += ("00" + c).substr(c.length);
}
return newHex;
}
function convertToDec(hex) {
return parseInt(hex, 16);
}
function desaturate(r, g, b, k) {
var intensity = 0.3 * r + 0.59 * g + 0.11 * b;
r = Math.floor(intensity * k + r * (1 - k));
g = Math.floor(intensity * k + g * (1 - k));
b = Math.floor(intensity * k + b * (1 - k));
return [r, g, b];
}
function doLayout(num) {
running = true;
restartLayout(num);
}
function restartLayout(num) {
window.setTimeout(function() {
animating = true;
sigma.layouts.fruchtermanReingold.start(engine, {
autoArea: false,
area: 1000000000,
gravity: 0,
speed: 0.1,
iterations: 1000
});
animating = false;
if (count++ < num) {
restartLayout(num);
} else {
count = 0;
}
}, 20);
}
© 2015 - 2025 Weber Informatics LLC | Privacy Policy