2. Quick Tour of GraphSpace

2.1. Welcome Screen

The welcome page greets a user when the user visits GraphSpace. The Welcome Screen is designed to access commonly used features of GraphSpace like:

2.1.1. Create Account

The user can create an account on GraphSpace by following the given steps:

  1. Click on the Create Account button on the top navigation bar. This will trigger a create account window/pop-up to be displayed.
  2. Enter the your email address.
  3. Enter a password for your account.
  4. Verify your password by entering the same password again.
  5. Click on Submit button to create the account with the given email address and password.

_images/gs-screenshot-user5-creating-account-with-caption.gifCreate Account

2.1.2. Log In

The user can log-in to GraphSpace by following the given steps:

  1. Click on the Log In button on the top navigation bar. This will trigger a log-in window/pop-up to be displayed.
  2. Enter your email address.
  3. Enter you password.
  4. Click on Submit button to log in with the given email address.
  5. If you have forgotten you password, click on the Forgot Password link.

_images/gs-screenshot-user1-logging-in-with-caption.gifLog In

For the rest of the tutorial, we assume that the user has already created an account. We also assume that the user belongs to a group with shared networks or that the user uploaded networks via the upload page or the RESTful API. The tutorial specifically steps through how user1@example.com interacts with GraphSpace after logging in.

2.1.3. Upload a graph

The user can upload a graph on GraphSpace by following the given steps:

  1. Go to the Upload Graph Page by clicking on the Upload Graph button on Home Page.
  2. Enter a unique name for the new graph.
  3. Select a CYJS file which contains the graph information.
  4. Select a JSON file which contains the style information for the graph. (Optional Step)
  5. Click on Submit button to upload the graph using the selected files.
  6. Once the graph has been uploaded, GraphSpace will provide a unique URL through which the user may interact with the graph represented by the uploaded files.

You can use the following sample files to learn how to upload graphs to GraphSpace:

_images/gs-screenshot-user1-upload-graph-with-caption.gifUpload a graph

2.1.4. List of uploaded graphs

The user can go to a page that lists the graphs accessible by the user on GraphSpace by following the given steps:

  • Click on the button titled Graphs on the top navigation bar. OR
  • Click on the My Graphs button on the Home Page.

In this example, the user owns 33 graphs, can access 64 public graphs and 33 graphs are shared with this user. _images/gs-screenshot-user1-go-graphs-list-page-with-caption.gifList of uploaded graphs

2.2. Searching within Multiple Graphs

The search interface in GraphSpace allows a user to search for networks that have a specific attribute or tag and contain one or more nodes using simple syntax on Graphs Page by following the given steps:

  1. Enter the name of the graph/node or specific network attribute mapping you are searching for in the search bar.
  2. Press Enter key or click on the Search button.

In this example, the user searches for the list for graphs that contain the protein (node) CTNNB1 (the symbol for β-catenin, a transcriptional regulator in the Wnt signaling pathway). The reduced list of graphs are the graphs where protein (node) name, label or aliases contain CTNNB1 as a substring. The match is case-insenstive. In the following example, There are six graphs owned by the user and thirty-two public graphs that contain this protein. Each link in the Graph Name column will take the user to a specific graph with the search term highlighted. In this example, the user clicks on the graph with the name KEGG-Wnt-signaling-pathway and reaches the graph for the Wnt pathway with the searched node highlighted.

_images/gs-screenshot-user1-searching-withing-multiple-graphs-with-caption.gifSearching within Multiple Graphs

2.3. Searching within a Single Graph

The user can search for node or edges within a given graph on GraphSpace by following the given steps:

  1. Enter the name of the node or an edge you are searching for in the search bar.
  2. The nodes or edges are highlighted automatically as you type in the name of the node or edge in the search bar.

In the following example, the user searches for the graph for two proteins (nodes) CTNNB1 and WNT using the query ctnnb1, wnt. This search query highlights the proteins where protein (node) name, label or aliases contains CTNNB1 or WNT as a substring (case-insensitive). In the following example, the graph contains four nodes which match the given query.

_images/gs-screenshot-user1-searching-nodes-within-a-single-graphs-with-caption.gifSearching nodes within a Single Graph

In the following example, the user searches the graph for edges from Wnt to Fzd using the query Wnt::Fzd. GraphSpace highlights any edge whose tail node matches wnt and whose head node matches fzd. In the following example, the graph contains three edges which match the given query.

_images/gs-screenshot-user1-searching-edges-within-a-single-graphs-with-caption.gifSearching edges within a Single Graph

2.4. Interacting with a Graph

In this section, we examine different ways to interact with an individual network on its page. The information that appears in following examples must be included in the JSON files that are uploaded by the network owner, as described in the Network Model section. An individual network page is designed to access features like:

2.4.1. Graph Information

As its name suggests, the Graph Information panel displays information about the entire graph, e.g., a legend of node and edge shapes and colors. The description attribute in the JSON for the network specifies this content. The user can go to Graph Information panel by clicking on the Graph Information link above the graph.

_images/gs-screenshot-user1-graph-information-with-caption.gifGraph Details

Please refer to this section for more information.

2.4.2. Edge and Node Information

Clicking on a node or edge pops up a panel with information on that node or edge. The popup attribute for the node in the network JSON specifies this content.

_images/gs-screenshot-user1-node-edge-pop-up-with-caption.gifEdge and Node Information

Please refer to this section for more information.

2.4.3. Export Graph

GraphSpace allows users to export a graph as an image file or a JSON file. GraphSpace does not support any other export formats since it relies on Cytoscape.js for this functionality, which implements only export to PNG, JPG and JSON format.

In the following example, the user is exporting the graph as an image in PNG format.

_images/gs-screenshot-user1-export-graph-png-with-caption.gifExport Graph

Please refer to this section for more information.

2.4.4. Change Layout

Layouts provide a powerful means to organize nodes within a network. The following figures illustrate how a user may access and view automatically generated and previously saved layouts.

GraphSpace allows users to change layout using the following steps:

  1. Click on the Change Layout button to view available layout options.
  2. The Change Layout panel provides two alternatives:    - Select Layout Algorithm - List of layout algorithms supported by GraphSpace through its use of Cytoscape.js.    - Select Saved Layout - List of layout saved by the user using GraphSpace. The user has created them in earlier sessions by manually modifying the positions of nodes and edges created by some automatic layout algorithm and saving the layout.
  3. Click on a layout option to change the current layout.

In the following example, the user selects to view the layout titled “manual-top-to-bottom”. To create this layout, the user manually moved nodes so that extracellular ligands and receptors (triangles) appear on the top while transcription factors (rectangles) appear at the bottom. The user can click on the Back button to return to the main menu.

_images/gs-screenshot-user1-change-layout-with-caption.gifChange Layout

Please refer to this section for more information.

2.4.5. Share Layout

GraphSpace allows users to share a layout using the following steps:

  1. Click on the Layouts link above the graph.
  2. The layouts panel shows two types of layouts:
    • Private Layouts - The user has created them in earlier sessions by manually modifying the positions of nodes and edges. But the user has not shared them with any other user.
    • Shared Layouts - These layouts were created by the user who has access to this graph and shared the layout with other users who have access to this graph.
  3. Click on the Share link next to the layout name of a private layout you want to share with other users who have access to this graph.

Note: The icons next to each layout name allow the user to (i) change its name, (ii) share it with other users who have access to this graph, (iii) delete this layout.

_images/gs-screenshot-user1-share-layout-with-caption.gifShare Layout

Please refer to this section for more information.