Graph-Browser

Search
Feedback

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="/structr/js/lib/linkurious/sigma.min.js" type="text/javascript"></script>
<script src="/structr/js/lib/linkurious/plugins.min.js" type="text/javascript"></script>
<script src="/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
graphContainerThe html container where the Graph-Browser should be displayed
sigmaSettingsOptional: You can specify your own settings for sigms.js
moduleSettingsThe 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-BrowserAdds the given node to the Graph-Browser
addEdge(edge){string,object} edge the edge that should be added to the Graph-BrowserAdds the given edge to the Graph-Browser
dropNode(node){string,object} node the node that should be removed from the Graph-BrowserRemoves 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-BrowserRemoves 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 removedRemoves 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 nodeReturns the node that matches the given id
getEdge(id){string} id the id of the edgeReturns 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.

Graph-Browser

About this article
Last change 2017-07-18
Topics ExperimentalOverviewStructr 2.0