Embedded Graph visualization

Thing’in portal provides to other projects a graph visualization to embed in an iframe.
In order to use the embedded graph visualization, you’ll have to provide informations:

  • settings of the visualization
  • data of the graph (nodes and links)
  • data for enhancing the graph

Contact: Alain Dechorgnat

Purpose

json
{
  "settings": {...},
  "graph": {...},
  "highlightGraph": {...}
}

Properties

Settings of the visualization

Settings of the visualization describes the appearence of the graph:

  • ’’backgroundColor’’: the color of the background. The format is #RRGGBB or #rgb or a web color name. The default value is #545454 (a dark grey).
  • ’’infoWindowTransparency’’: infoWindow represents the panel opening on the right side of the graph for displaying additional info (object properties, search form, settings form). This panel has a black background and can have a transparency of 0.6 or not. Values are true or false. Default value is false (opaque).
  • ’’legend’’: shows or not the graph legend. Values are true or false. Default value is false.
  • ’’toolbar’’: shows or not the toolbar. The toolbar is composed of three buttons (hide/show legend, search and settings). Values are true or false. Default value is false.
  • ’’namespace’’: if namespace is specified, you will be able to make the focus on one node, i.e. to request Thing’in for the graph centered on this node with a specified depth.
  • ’’niceNameFields’’: you can provide a list of object properties to learn to the graph how to add a title to nodes. Object properties are evaluated from first to last. The first object property value found for an object will by used as title. If none is found, the _class property value will be used.
json
"settings": {
  "backgroundColor": "lightgray",
  "infoWindowTransparency": true,
  "legend": false,
  "toolbar": true,
  "namespace": "MyNamespace",
  "niceNameFields": ["", ""]
}

Data for the graph

Data for the graph (nodes and links) is the raw result of a Thing’in request with the format application/ziggy-json.

Here is an exemple of this format with two nodes and a link:

json
"graph":  {
"total_items": 2,
"index": 0,
"nodes": [
 {
  "_ori": "http://orange-labs.fr/fog/ont/datashare.owl#Device-10506",
  "ont_datashare_owl_created": "2017-08-02T06:44:18Z",
  "_last_updated": 1505229641979,
  "_uuid": "17ed4dd9-50e0-436d-92e3-12277da2600e",
  "orientdb_class": "projection",
  "ont_datashare_owl_lastSync": "2017-09-12T15:07:40Z",
  "ont_datashare_owl_error": "NONE",
  "_class": "http://orange-labs.fr/fog/ont/datashare.owl#Lifx",
  "ont_datashare_owl_id": 10506,
 },
 {
  "_ori": "http://orange-labs.fr/fog/ont/datashare.owl#Connector-3606",
  "ont_datashare_owl_created": "2017-08-02T06:44:18Z",
  "_last_updated": 1505229642278,
  "_uuid": "7c4fce52-bfb1-4104-bf31-9d32b720a3c1",
  "orientdb_class": "projection",
  "ont_datashare_owl_error": "NONE",
  "_class": "http://orange-labs.fr/fog/ont/datashare.owl#Connector",
  "ont_datashare_owl_id": 3606,
  "ont_datashare_owl_key": "-",
 }
],
"links": [
 {
  "source": "7c4fce52-bfb1-4104-bf31-9d32b720a3c1",
  "target": "17ed4dd9-50e0-436d-92e3-12277da2600e",
  "value": "ont_datashare_owl_hasDevice"
 }
],
"size": 500
}

Data for enhancing the graph

You can configure different parties of the graph like nodes and links:

  • a node can be hilighted and/or pre position in the graph.
  • * an hilighted node will appear with an underlying glowing effect
  • * a pre positioned node will have a fixed position in the graph
  • a link can be hilighted. In this case, its representing line will be larger and a ’fireball’ will follow the link. For exemple, this can be used for showing a path in a graph.

The format of those data is a Json object , very similar to the previous format. In this case, only _uuid property is mandatory for nodes. For links the three properties are mandatotory:

json
"highlightGraph": {
  "nodes" :  [
     {
      "_uuid": "17ed4dd9-50e0-436d-92e3-12277da2600e",
      "_highlighted": false,
      "_position": {
                       "x": 50,
                       "y": 100
                   }
     },
     {
      "_uuid": "7c4fce52-bfb1-4104-bf31-9d32b720a3c1",
      "_highlighted": true,
     }
  ],
  "links" : [
     {
      "source": "7c4fce52-bfb1-4104-bf31-9d32b720a3c1",
      "target": "17ed4dd9-50e0-436d-92e3-12277da2600e",
      "value": "ont_datashare_owl_hasDevice"
     }
  ]
}

In this exemple the first node will have a fixed position in the graph. Position is relative to the center point of the iframe: in this case, the first node will be placed at 50 pixels to the right of the center and 100 pixels below. This node will not have an underlying glowing effect ("_highlighted": false). We could have simply omitted the parameter.

The second node will not have a fixed position (no position attribute), but will have an underlying glowing effect ("_highlighted": true).

Dialog between the host page and the iframe

The dialog between the host page and the iframe relies on HTML5 messaging system, following this workflow:

  • when the iframe is loaded, it sends a load event to the host page to fetch data.
  • the host page send the data to the iframe only once.

The iframe has a context menu to allow to reset the graph.

  • at this time, the iframe send a message to rearm the data send and reload.
  • the host page wait for the iframe message of loading and resend data.

For this you can use the following code in your host page:

html
<iframe id="myIframe">
   <p>Your browser does not support iframes.</p>
</iframe>

and script

javascript
var messageNotSent = true;
var graphData = {
  "settings": {...},
  "graph": {...},
  "highlightGraph": {...}
}
var graphDataMessage = JSON.stringify(graphData, false);
       
var iframe = document.getElementById('myIframe');
iframe.addEventListener('load',function () {
   console.log('load event received');
   if (messageNotSent) {
       iframe['contentWindow'].postMessage(graphDataMessage, "*");
       messageNotSent = false;
   }
});

window.addEventListener('message',function (event) {
   console.log('message received: '+event.data);
   if (event.data == 'rearm') messageNotSent = true;
   },false);  
   
iframe.src="http://ziggy-por-dev.nprpaas.ddns.integ.dns-orange.fr/assets/graph/index.html";
    •