gsoc legend interface

Implement a machine-readable graph legend interface

Background

GraphSpace is an easy-to-use web-based platform collaborating research groups can use for storing, interacting with, and sharing networks. A GraphSpace user can upload graphs through a REST API, import graphs created in Cytoscape, interact with graphs (view them, customize layouts, and save layouts), share graphs (create groups and add collaborators, share graphs among all members of a group or with the world), search graphs, and organize graphs using tags. GraphSpace has a comprehensive REST API that allows users to communicate programmatically with it.

Currently graphspace allows users to add legend by providing HTML table in the description of the graph. But this implementation has many issues:

• Including the legend as an HTML table in the description is tedious.
• The legend cannot be parsed programmatically.
• GraphSpace cannot learn or understand the legend of a graph uploaded to GraphSpace.
• Users cannot use the legend interactively.
• There is no widget/tool in the layout editor that allow users to quickly change/update the legend.

Goal

This project has three main goals:

1. Simplify the process of providing a legend for a graph. This can be done by representing legend data in JSON format, hence it will be programmatically parsable and users will be able to interact with the legend in easier ways.

   One possible solution would be include the legend data in the graph meta-data in json format. The data field in graph_json that contains metadata about the graph will also contain the legend data. A new field legend will be included in the data field. It will be a dictionary having two main fields: nodes and edges. nodes field will have the legend data for nodes and edges field for edges. Each key in the nodes or edges field will represent a legend key. The label of the legend key will be the key name. The definition of each legend key will be in form of a dictionary which will contain the style of the legend key.

   Example:

{
   "legend":{
      "nodes":{
         "Complementary Genes":{
            "node-shape":"ellipse",
            "color":"#fff"
         },
         "Polymer Genes":{
            "node-shape":"triangle",
            "color":"grey"
         }
      },
      "edges":{
         "Activating Interaction":{
            "edge-type":"haystack",
            "color":"green"
         }
      }
   }
}

2. Build graphical user interface on top of new legend format. Legend can be shown on top of the canvas for a graph (like the zoom-in/zoom-out scale is shown). The space on the top-right corner can be utilized for showing the legend. The legend can be constructed using the legend data available in the graph meta-data. Additionally, this goal involves developing following features:

   • Interactive legend - Users should be able to interact with the legend upon graph visualization. For example, the interface should allow users to select nodes or edges using the legend interface.
   • Edit the legend - Users should be able to edit the legend seamlessly from the layout editor tool. The current interface allows users to select nodes by color and shape but they cannot select edges by their edge-style and color.

3. API interface - Users should be able to update the legend using the graphspace-python package. To be specific, the GSGraph class in graphspace-python package should include methods to add, modify and remove legend data. Here is a sample set of API signatures to be implemented.

   add_legend_key(element_type, label, style):

    Add an individual legend key to the legend data.
   
    Args:
        element_type(str): Either node or edge.
        label(str): Label of legend key. Passing an already existing label as param will update that legend key.
        style(dict): Style dict of the legend key. Will contain attributes like node shape or edge type, color.
   

   remove_legend_key(element_type, label):

    Remove an individual legend key from the legend data.
   
    Args:
        element_type(str): Either node or edge.
        label(str): Label of legend key to be deleted.
   

   set_legend(legend_json):

    Set the json representation of legend for the graph.
   
    Args:
         legend_json(dict): JSON representation of the legend data.
   

   get_legend():

    Get the json representation of legend of graph.
   
    Returns:
         dict: JSON representation of legend data.
   

Skills

List skills/technologies that the student should be familiar with.

• Python, Django, HTML, JS, Jquery, CSS (essential)
• Databases (SQL), Git (nice to have)