Optimized for Chrome

Implementation

Graphies is a Web-based application. The client is implemented as a dynamic web page essentially written in Javascript using ES6. It has been tested primarily with Google Chrome and Mozilla Firefox.

The UI relies on d3.js and paper.js. d3.js handles all UI widgets in an <svg> element and computes the nodes' layout; paper.js handles the drawing of the network's nodes and links in a <canvas> element. The two UI components (<svg> and <canvas>) are seamlessly integrated (overlaid) using CSS rules and input event redirection.

Server Side

The server side (implemented in PHP) is in charge of:

  • parsing datasets, processing data attributes and serializing the resulting structure in JSON (to be sent to the client for display);
  • managing individual user sessions (saving & restoring the workspace);
  • generating MPEG-4 videos by interpolating between the keyframes selected by users in the history to create an animated diagram.

Communication between the server and client sides is handled through asynchronous calls (AJAX). Although most server-side operations could actually be handled client-side, offloading them to the server has several advantages: it enables Graphies to run on devices with modest computational power while keeping the UI responsive; it enables users to load much larger networks than what can reasonably be displayed and populate the diagram with elements of interest by filtering items a priori from the meta-graph; the code modularity eases maintenance and debugging.

Client Side (UI)

Node-Link Diagram

We draw the node-link diagram using low-level 2D primitves directly in an HTML canvas instead of managing an SVG DOM hierarchy in order to improve perfomance (frame rate, memory consumption). The paper.js API is used to simplify the management of vector graphics drawn on the <canvas> element.

While higher performance could have been achieved by using WebGL instead of canvas 2D primitives (at the cost of a more complex code base), Graphies is already able to handle diagrams that feature 3000 nodes and 3000 links (*), which we consider a resonable limit in the context of expressive node-link diagrams authored primarily for communication purposes.

<<<<<<< HEAD

Server Side

On the server side, a set of algorithms written in PHP execute several functions as they are requested by Graphies' web client. Each user will have his own session in order to be able to work on the same plateform in the same time than other users. Among other tasks, the server component is responsible for
1) parsing the dataset and collecting data attributes
2) loading and saving data upon request and
3) computing the video from the workflow historic. We store and load all the data under the JSON format. Communication between server and client is implemented through AJAX methods.

Although eventually it will be be possible to carry out the server-side operations in the browser, there are several advantages in offloading them to an external component. Devices with low computational power may not handle such operations. By separating heavy calculation from the interface, we allow users to be in optimal conditions to interact with the interface. Having all core algorithms in the same place allow us to improve maintainability and to debug easier our tool. Graphies current implementation has been tested on Google Chrome, and Mozilla Firefox. =======

(*) As mentioned earlier, the input datasets on the server side can be larger (an order of magnitude).

For graph layout, Graphies uses d3.js' force layout implementation, based on the Barnes-Hut approximation and quadtrees.

>>>>>>> 5c401938a1535adb69c42dbe8986f25d7450e896

Widgets

UI controls (menu bar, visual mapping widgets, history timeline) are far less numerous than nodes and links in the diagram. To simplify the code, these widgets are managed with D3 (input event handling included) in an <svg> element that is spatially-aligned with the diagram's <canvas> element in the HTML DOM.