Layout Compatibility GSOC '18

Compatibility Status

Compatibility status of Layouts for a particular version of a graph are stored in the layout_to_graph table. Layout_to_graph table uses layout_id and version_id of the graph to link a Layout to a particular version of the Graph. When the user tries to apply a layout, it's layout_id and the version_id of the graph is used to search for compatibility status. There are 3 possible results for this type of query -

1. A record is found, and compatibility status is True
2. A record is found, and compatibility status is False
3. No record could be found in the database.

For case 1 : Layout is applied automatically and no warning or notification is shown to User. For case 2 : A Red status bar will be displayed in GraphSpace UI, suggesting that the layout is not compatible. User has the option to view the Error in details. For case 3 : A Warning Status Bar in yellow will be displayed, informing the User to run Layout Compatibility Check.

Layout Compatibility Status Bar

The ticker bar used for notifying the User are of 3 different Colors corresponding to 3 different situations -

1. Red - For Errors, like incompatible Layout or layout missing nodes/edges of Graph.
2. Yellow - For Warnings, If the compatibility status of the Layout is unknown or if the layout has additional nodes/edges which are not present/required in the current version of the Graph.
3. Green - For unknown layouts, after the Layout compatibility check if the layout is found to compatible then the User is notified in a Green Ticker bar.

Layout Compatibility Check

Layout Compatibility Check has been implemented completely on the client side Javascript, this was done to prevent unnecessary load on the Server.

Details

In order to check layout compatibility, elements (nodes & edges) present in the layout needs to be compared with the elements in the current version of the Graph.

• style_json object in the layout contains styling information about nodes & edges.All elements present in the style_json are then searched in the current version of the Graph.
• Cytoscape.js provides the Filter function to search for nodes & edges present in the current graph. Cytoscape filter function returns the style attributes if a node or edge is found and returns Null if the element is not present in the graph.
• Syntax to search for nodes/edges using filter function - graphPage.cyGraph.filter(<selector>).
• Two possible cases -

1. Layout has some missing nodes & edges.
2. Layout has additional nodes & edges which are not present in the Graph.

Case 1 implies that the layout does not have style information for some or all nodes & edges. To make this layout compatible, the User needs to resolve all the issues (add styles for missing nodes & edges).

Case 2 serves only as a warning and the layout can be successfully applied without resolving these issues. However, it is important for the User to understand that the layout has extra nodes/edges which are not present in the current version of the graph but might be present in some other version. A yellow Warning status bar is displayed to notify the user of this issue.

For more details on selectors check Cytoscape documentation.

Compatible Layout

A layout is said to be compatible when all the nodes & edges of the graph are present in the style_json of the layout. After the compatibility check, a green success bar in GraphSpace UI notifies the User that the layout check was successful and the layout is compatible with the current version of the graph.

Layout with missing elements

User is notified about the missing nodes & edges and also about any additional nodes/edges which might be present in the layout. Missing nodes/edges and additional nodes/edges are displayed in a list format. In order to make the layout compatible users needs to add styles for all elements in the Nodes/Edges without style information list. The list Unknown nodes/edges is a read-only list and does not have an Add Style option.

Fixing Layout Compatibility Errors

Users can add style information for nodes & edges by clicking on the Add Style in Nodes/Edges without Style information Table. The status bar displays the number the elements which require attention of the User. This status bar is updated in real-time as the User adds Style for the missing elements.

When the User has successfully added style for all the missing elements then the Status bar will be updated based on the following 2 conditions -

1. Both the Nodes/Edges without Style information & Unknown Nodes & Edges Tables are empty - In this case the Status bar will disappear from the screen suggesting that all issues have been resolved.
2. Unknown Nodes & Edges Table is not empty - In this case the Status bar changes to Warning to let the User know that there are additional elements in the Layouts which are not present in the Graph.

Demonstration

LOOM Video demo