Graph-Browser
The Graph-Browser is a visualization tool for webapplications built with Structr.
Adding the Graph-Browser to a Webpage
To use the Graph-Browser, simply drag the Graph Explorer Widget from the widget panel into your site.
Alternatively you can include the javascript files manually and write a script for the configuration yourself.
<script src="https://support.structr.com/structr/js/lib/linkurious/sigma.min.js" type="text/javascript"></script>
<script src="https://support.structr.com/structr/js/lib/linkurious/plugins.min.js" type="text/javascript"></script>
<script src="https://support.structr.com/structr/js/lib/graphbrowser/graph-browser.js" type="text/javascript"></script>
Configuration
The Graph-Browser has to be instantiated with an configuration object.
| Field | Purpose |
|---|---|
| graphContainer | The html container where the Graph-Browser should be displayed |
| sigmaSettings | Optional: You can specify your own settings for sigms.js |
| moduleSettings | The settings for the Graph-Browsers modules |
Example
var graphSettings = {
graphContainer: 'graph-container',
moduleSettings: {
currentNodeTypes: {
container: 'graph-container',
classes: 'btn btn-block'
},
nodeExpander: {
container: 'graph-info',
margins: {'top': 20, 'left': -5},
onNodesAdded: myFunctionAfterNodesWereAdded
},
nodeFilter: {
filterNodeTypes: ['Image', 'User']
},
tooltips: {
node: {
showOn: 'rightClickNode',
hideOn: 'clickStage',
cssClass: 'tooltip-container',
position: 'bottom',
renderer: myRendererFunction
}
}
}
};
var graphBrowser = new GraphBrowser(graphSettings);
Functions
| Name | Parameters | Description |
|---|---|---|
| bindEvent(event, handler) | {string} event the name of the event {function} handler the handler function |
Binds a function to a specific event of the Graph-Browser |
| unbindEvent(event, handler) | {string} event the name of the event {function} handler the handler function |
Unbinds a function that was previously bound via the bind function |
| addNode(node) | {string,object} node the node that should be added to the Graph-Browser |
Adds the given node to the Graph-Browser |
| addEdge(edge) | {string,object} edge the edge that should be added to the Graph-Browser |
Adds the given edge to the Graph-Browser |
| dropNode(node) | {string,object} node the node that should be removed from the Graph-Browser |
Removes the given node from the Graph-Browser |
| dropNodes(nodes, keep) | {array} nodes an array of node objects that should be removed {boolean} keep if true, all nodes except the ones given in the array will be removed |
Removes the given nodes from the Graph-Browser |
| dropEdge(edge) | {string,object} edge the edge that should be removed from the Graph-Browser |
Removes the given edge from the Graph-Browser |
| dropEdges(edges, keep) | {array} edges an array of edge objects that should be removed {boolean} keep if true, all edges except the ones given in the array will be removed |
Removes the given edges from the Graph-Browser |
| dropElement(id) | {string} id the id of the element that should be removed |
Removes an element from the Graph-Browser |
| updateNode(node, object, fields, map) | {string} node the id of the node {object} object the object with properties wich will override the properties of the given node {array} fields optional array of property names to define wich properties of the node should be overritten with the objects properties {objectmap} map an object that maps one property of the node to an other property |
Updates the properties of a given node with the properties of the given object |
| updateEdge(edge, object, fields, map) | {string} edge the id of the edge {object} object the object with properties wich will override the properties of the given edge {array} fields optional array of property names to define wich properties of the edge should be overritten {objectmap} map an object that maps one property of the edge to an other property |
Updates the properties of a given edge with the properties of the given object |
| getNode(id) | {string} id the id of the node |
Returns the node that matches the given id |
| getEdge(id) | {string} id the id of the edge |
Returns the edge that matches the given id |
| getNodes() | Returns the nodes that currently are displayed | |
| getEdges() | Returns the edges that currently are displayed | |
| getNodeByProperty(property, value) | {string} property the name of the property {any} value the value to match |
Returns the node whose property matches the given value |
| setNodeProperty(node, property, value) | {string,object} node the node to change {string} property the name of the property {any} value the new value for the property |
Adds or changes the property of the given node |
| setDefaultNodeTypeProperty(nodeType, property, value, applyNow) | {string} nodeType the node type that should have the default value {string} property the name of the property {any} value the new value for the property {boolean} applyNow if true, the new default value will be applied to thre current nodes in the graph |
Set a default value for all nodes of the given type |
| setEdgeProperty(edge, property, value) | {string,object} edge the edge to change {string} property the name of the property {any} value the new value for the property |
Adds or changes the property of the given edge |
| setDefaultEdgeTypeProperty(relType, property, value, applyNow) | {string} relType the relationship type that should have the default value {string} property the name of the property {any} value the new value for the property {boolean} applyNow if true, the new default value will be applied to thre current edges in the graph |
Set a default value for all edges of the given type |
| findRelationships(source, target, relType) | {string} source the id of the source node {string} target the id of the target node {string} relType the type of the realtionship |
Returns an array of edges that connect the given nodes |
| setNodeStatus(node, status) | {string,object} node the node to change {boolean} status the new status |
Changes the status of the given node |
| setEdgeStatus(edge, status) | {string,object} edge the edge to change {boolean} status the new status |
Changes the status of the given edge |
| getCameraRatio() | Returns the current camera ratio of the Graph-Browsers sigma instance | |
| changeSigmaSetting(setting, value) | {string} setting the name of the setting {any} value the new value of the setting |
Changes the given setting of the Graph-Browsers sigma instance |
| getSigma() | Returns the current sigma instance of the Graph-Browser | |
| undo() | Can undo some of the Graph-Browsers actions. | |
| dataChanged() | Should be called if there are changes to the data modell or the sigma instance. Updates the status of the modules and should be called if the action has to be undoable. | |
| refresh() | Refreshes the view of the Graph-Browser | |
| reset() | Resets the Graph-Browser | |
Configuration of the modules
Each module of the Graph-Browser can be used by defining its settings when starting the browser. The module will then add its own functions to the Graph-Browser object.