NetworkView

Labels: :IA_Function:IA_NetworkView

The NetworkView Function renders a visualisation of a graph.

Function parameters

Function parameters are used to configue the functions. They can be set in the Function itself or by mapping values to them on incoming triggers.

Key Description Default value Possible values
$area The area in which the NetworkView is rendered. content content|sidebar-right|sidebar_left
$autoComplete Automatically retrieves missing relations between nodes. false true|false 0|1
$autoLayoutStatus Sets the auto-layout status. true true|false 0|1
$canDownloadSVG Allows for download of current visualisation as a standalone SVG file. true true|false 0|1
$canSave Displays the button to save the network as diagram. true true|false 0|1
$canSetForceParameters * Displays the button to set force-layout parameters. true true|false 0|1
$canSwitchAutoLayoutStatus Displays the button to switch automatic layout using force-layout. true true|false 0|1
$canSwitchZoomToFitStatus Displays the button to switch zoom-to-fit status. true true|false 0|1
$container.id The id of the container in which the NetworkView is rendered. If set to _new , a new container will be created each time the function is triggered. Assigned by system. a..zA..Z0..9_
$container.height The height of the container in pixels. positive integer
$container.width The width of the container in pixels. positive integer
$explorable Allows the user to fetch neighbouring nodes by double-click. true true|false 0|1
$exploreFilter * Grants access to the ExploreFilter, allowing the user to explore using controlled exploration. true true|false 0|1
#filters * Pre-sets the filtering of the visualisation. [] [{"filter":"node|rel:[label]|[type]","status":0|1},..]
$_method Determines whether updates are sent to all instances of the Function or just the a single one. broadcast|update
$name The name of the container. Will appear as its caption. The function type.
#nodes The array of nodes to be visualized. [] Array of node objects
$params Placeholder for parameters on incoming triggers. null
#relations The array of relations to be visualized. [] Array of relation objects
$store Sets the default store for the NetworkView. application name of configured Neo4j store
$styles The id of the IA:UserStyles node that contains the styling to be applied. The id of IA:UserStyles node belonging to the user.
#_update.add.nodes Nodes to be added to the view. [] Array of node objects.
#_update.add.relations Relations to be added to the view. The start and end nodes need to be provides explicitely as well. [] Array of relation objects.
#_update.remove.nodes Nodes to be removed from the view. [] Array of node objects.
#_update.remove.relations Relations to be removed from the view. [] Array of relation objects.
#_update.set.nodes Nodes to be added to / updated in the view. [] Array of node objects.
#_update.set.relations Relations to be added to / updated in the view. The start and end nodes need to be provides explicitely as well. [] Array of relation objects.
#_update.set.state.selected Nodes / relations to be switched to state "selected" . [] Array of node / relation objects.
#_update.set.state.visble Nodes / relations to be switched to state "visible" . [] Array of node / relation objects.
$viewFilter Allows filtering the current visualisation by using selectors. true true|false 0|1
$zoomToFitStatus Sets the zoom-to-fit status. true true|false 0|1

Events

A NetworkView has the following events:

Each of these events generates its own event data object. The structure of these event data objects is given below.

nodeClick

This event is triggered when a user clicks on a node, and creates an event object of the following structure:

{
   "type": "nodeClick",                         // type
   "data": {
			  "id": 123  ,                        // node id    
			  "index": 0 ,                        // index in d3.js nodes array
			  "fixed": true,                      // fixed status
			  "labels": [],                        // array of node labels  
			  "linkCount": 3 ,                    // number of edges
			  "meta": {                                      
			    "store": "application"            // name of  graphstore
			  },
			  "properties": {},                   // map of  node properties
			  "px": 1205.7835273159094,           // previous x-coord of node
			  "py": 596.4062796272416,            // previous y-coord of node
			  "selected": true,                   // selected status 
			  "style": {},                        // map of style 
			  "weight": 0 ,                       // reserved for future use
			  "x": 1205.7835273159094,            // x-coord of node
			  "y": 596.4062796272416,             // y-coord of node
			 },
   "_function": {},                            // _function info
   "_global": {}                               // _global info
}

nodeDoubleClick (1.0.3)

This event is triggered when a user double clicks on a node, and creates an event object of the following structure:

{
   "type": "nodeDoubleClick",                         // type
   "data": {
			  "id": 123  ,                        // node id    
			  "index": 0 ,                        // index in d3.js nodes array
			  "fixed": true,                      // fixed status
			  "labels": [],                        // array of node labels  
			  "linkCount": 3 ,                    // number of edges
			  "meta": {                                      
			    "store": "application"            // name of  graphstore
			  },
			  "properties": {},                   // map of  node properties
			  "px": 1205.7835273159094,           // previous x-coord of node
			  "py": 596.4062796272416,            // previous y-coord of node
			  "selected": true,                   // selected status 
			  "style": {},                        // map of style 
			  "weight": 0 ,                       // reserved for future use
			  "x": 1205.7835273159094,            // x-coord of node
			  "y": 596.4062796272416,             // y-coord of node
			 },
   "_function": {},                            // _function info
   "_global": {}                               // _global info
}

relationClick

This event is triggered when a user clicks on a relation, and creates an event object of the following structure:

{
   "type": "relationClick",                     // type
   "data": {
			  "id": 15,                           // relation id   
			  "meta": {
			    "store": "application"            // name of graphstore
			  },
			  "properties": {},                   // map of relation properties
			  "selected": true,                    // selected status 
			  "source": {},                       // map of source node
			  "target": {},                       // map of target node
			  "type": "TRIGGER",                  // relation type
			  "visible": true                     // visible status
			},
   "_function": {},                            // _function info
   "_global": {}                               // _global info
}

canvasClick (1.0.3)

This event is triggered when a clicks on the canvas, and creates an event object of the following structure:

{
   "type": "canvasClick",                           // type
   "position": {                                    // position at which was clicked
				  "clientX": 955,
				  "clientY": 208,
				  "layerX": 544,
				  "layerY": 113,
				  "screenX": 1828,
				  "screenY": 463,
				  "graphX": 1066.8781044651214,
				  "graphY": 291.1015613286323
             },
   "_function": {},                             // _function info
   "_global": {}                                // _global info
   "_path": {}                                  // _path info
}

canvasDoubleClick (1.0.3)

This event is triggered when a doubleclicks on the canvas, and creates an event object of the following structure:

{
   "type": "canvasDoubleClick",                           // type
   "position": {                                          // position at which was doubleclicked
				  "clientX": 955,
				  "clientY": 208,
				  "layerX": 544,
				  "layerY": 113,
				  "screenX": 1828,
				  "screenY": 463,
				  "graphX": 1066.8781044651214,
				  "graphY": 291.1015613286323
             },
   "_function": {},                             // _function info
   "_global": {}                                // _global info
   "_path": {}                                  // _path info
}

context (node)

This event is triggered when a user selects an option in a node-context menu, and creates an event object of the following structure:

{
   "type": "context",                           // type
   "menu": "node",                              // menu
   "action": "Details" ,                        // caption of menu option
   "index": "4",                                // index of menu option
   "target": {
			    "id": 123  ,                        // node id    
			    "index": 0 ,                        // index in d3.js nodes array
			    "fixed": true,                      // fixed status
		  	    "labels": []                        // array of node labels  
			    "linkCount": 3 ,                    // number of edges
			    "meta": {                                      
			      "store": "application"            // name of  graphstore
			    },
			    "properties": {}                    // map of  node properties
			    "px": 1205.7835273159094,           // previous x-coord of node
			    "py": 596.4062796272416,            // previous y-coord of node
			    "selected": true                    // selected status 
			    "style": {},                         // map of style
			    "weight": 0 ,                       // reserved for future use
			    "x": 1205.7835273159094,            // x-coord of node
			    "y": 596.4062796272416,             // y-coord of node
			   },
   "_function": {},                            // _function info
   "_global": {}                               // _global info
			 
}

context (relation)

This event is triggered when a user selects an option in a relation-context menu, and creates an event object of the following structure:

{
   "type": "context",                           // type
   "menu": "relation",                          // menu
   "action": "Details" ,                        // caption of menu option
   "index": "1",                                // index of menu option
   "target": {
			    "id": 15,                           // relation id   
			    "meta": {
			      "store": "application"            // name of graphstore
			    },
			    "properties": {},                   // map of relation properties
			    "selected": true,                    // selected status 
			    "source": {},                       // map of source node
			    "target": {},                       // map of target node
			    "type": "TRIGGER",                  // relation type
			    "visible": true                     // visible status
			  },
   "_function": {},                            // _function info
   "_global": {}                               // _global info
}

context (canvas)

This event is triggered when a user selects an option in a canvas-context menu, and creates an event object of the following structure:

{
   "type": "context",                           // type
   "menu": "canvas",                            // menu
   "action": "Create node" ,                    // caption of menu option
   "index": "1",                                // index of menu option
   "target": {
				  "clientX": 955,
				  "clientY": 208,
				  "layerX": 544,
				  "layerY": 113,
				  "screenX": 1828,
				  "screenY": 463,
				  "graphX": 1066.8781044651214,
				  "graphY": 291.1015613286323
             },
   "_function": {},                             // _function info
   "_global": {}                                // _global info
}

batch *

This event is triggered when a button in the button-bar is clicked, and creates an event object of the following structure:

{
   "type": "batch",                             // type
   "menu": "canvas",                            // menu
   "action": "Nodes to list" ,                  // caption of button
   "index": "1",                                // index of button
   "selection": [],                             // array of selected nodes
   "_function": {},                             // _function info
   "_global": {},                               // _global info
   "_path": {}                                  // _path info
}

functionUpdated

This event is triggered when the view is updated, and creates an event object (%) of the following structure:

{
   "type": "functionUpdated",                   // type
   "data": {},                                   // the data that was updated
   "_function": {},                             // _function info
   "_global": {}                                // _global info
}

functionExecuted

This event is triggered when the view is executed, and creates an event object(%) of the following structure:

{
   "type": "functionExecuted",                   // type
   "data": {},                                  // currens state of function
   "_function": {},                             // _function info
   "_global": {}                                // _global info
}

Example

Imagine a NetworkView with an incoming trigger from a Neo4jQuery , and with two outgoing triggers to an HtmlView.

NetworkView example

On the incoming trigger, the #nodes and #relations function parameters of the Networkview are mapped from the event data of the success event of the Neo4jQuery. The NetworkView renders a visualisation based on this data.

When an event occurs in the NetworkView, InterActor looks for matching outgoing triggers. Only matching triggers are executed.

One of the two outgoing triggers matches when

  • the event data contains type:"nodeClick"
  • the event data contains data.linkCount:1

Only when both conditions are met, so when the user clicks on a node that has a single relation attached to it in the current view, the trigger is executed.

The trigger has a property $data.myParam:(%).data.id which maps the id from the nodeClick event data to $data.myParam which is a function parameter of the HtmlView the trigger is pointing to.

The second trigger from the NetworkView to the HtmlView is executed when a relationClick event happens. This trigger only executes when the users clicks on a relation that points to a node that has no other relations. When executed, it maps the id of the relation that was clicked to the HtmlView.

A more generic description of triggers is available on the Triggers page.