Skip to content

Commit

Permalink
Fixed screenshots up and fixed exact edge searching error.
Browse files Browse the repository at this point in the history
  • Loading branch information
DSin52 committed Jan 11, 2016
1 parent e1ec74d commit bac5158
Show file tree
Hide file tree
Showing 20 changed files with 33 additions and 25 deletions.
Binary file modified graphs/static/images/auto_1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/auto_2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/auto_3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/auto_4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/bambi.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/edge_search.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/edge_search2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/graph_search.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/graphs.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/in_search.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/interact_1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/interact_2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/interact_3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/interact_4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/log_in.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/logged_in.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/search_edge.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified graphs/static/images/view_graph.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 17 additions & 17 deletions graphs/templates/graphs/help_tutorial.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,81 +27,81 @@ <h1>Tutorial on interacting with GraphSpace</h1>
<h2 style="padding-top: 50px; margin-top: -40px;">Logging In</h2>
<p>The <a href="{{url}}">welcome page</a> greets a user when the user visits GraphSpace. We assume that the user has already created an account and uploaded graphs via the upload page or the RESTful API.</p>
<br>
<img width="70%" height="60%" align="middle" src="../../static/images/log_in.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/log_in.png"></img>
<br><br>

<br>
<p>The user logs in and is provided a link to the list of graphs that the user can access.</p>
<img width="70%" height="60%" align="middle" src="../../static/images/logged_in.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/logged_in.png"></img>
<br><br>
<br>
<p>Clicking on the link titled "Graphs" takes the user to a page that lists the graphs accessible by the user. In this example, this user owns 33 graphs and can access public graphs. No graphs are shared with this user.</p>
<img width="70%" height="60%" align="middle" src="../../static/images/graphs.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/graphs.png"></img>
<br><br>
</div>

<div id="in_search">
<h2 style="padding-top: 50px; margin-top: -40px;">Searching within Multiple Graphs</h2>
<br>
<p>The user searches this list for graphs that contain the protein CTNNB1 (the symbol for &beta;-catenin, a transcriptional regulator in the Wnt signaling pathway) obtaining a reduced list of graphs. The selection of the button "Similar" means that the any protein whose label or identifies contains "CTNNB1" as a substring will match this search. This image shows the result of this search. There are six graphs owned by the user and two public graphs that contain this protein. Each link in the "Graph Id" column will take the user to a specific graph with the search term highlighted.</p>
<img width="70%" height="60%" align="middle" src="../../static/images/graph_search.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/graph_search.png"></img>

<br><br>
<p>The user clicks on the graph with the id "KEGG-Wnt-signaling-pathway" and reaches the graph for the Wnt pathway with the searched node highlighted.</p>
<img width="70%" height="60%" align="middle" src="../../static/images/view_graph.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/view_graph.png"></img>

</div>

<div id="search_single">
<h2 style="padding-top: 50px; margin-top: -40px;">Searching within a Single Graph</h2>
<br>
<p>The same search interface greets the user on the page for this graph, which allows the user to add more search terms for nodes (Wnt in this example).</p>
<img width="70%" height="60%" align="middle" src="../../static/images/in_search.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/in_search.png"></img>
<br><br>
<p>The user can also add search terms for edges ("Wnt:Fzd" in this example). Since the user has selected the "similar" option for the search, any edge whose tail node contains "Wnt" and whose head contains "Fzd" matches the query.</p>
<br>
<img width="70%" height="60%" align="middle" src="../../static/images/search_edge.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/search_edge.png"></img>
<br><br>
<p>By selecting an "Exact" option, the user can perform a new search for nodes that are an exact match to the query, which is "BAMBI" in this figure.</p>
<br>
<img width="70%" height="60%" align="middle" src="../../static/images/bambi.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/bambi.png"></img>
<br><br>
<p>Figure 9: GraphSpace also supports exact searches for edges.</p>
<br>
<img width="70%" height="60%" align="middle" src="../../static/images/edge_search2.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/edge_search2.png"></img>
</div>

<div id="graph_interaction">
<h2 style="padding-top: 50px; margin-top: -40px;">Interacting with a Graph</h2>
<p>As its name suggests, the "Graph details" panel displays information about the entire graph, e.g., a legend of node and edge shapes and colors.</p>
<img width="70%" height="60%" align="middle" src="../../static/images/interact_1.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/interact_1.png"></img>
<br><br>
<p>Clicking on a node pops up a panel with information on that node.</p>
<img width="70%" height="60%" align="middle" src="../../static/images/interact_2.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/interact_2.png"></img>
<br><br>
<br>
<p>Clicking on a edge pops up a panel with information on that edge. The information that appears in "Graph Details" and the pop-up panels must be included in the JSON for the graph uploaded by the user using the RESTful API.</p>
<img width="70%" height="60%" align="middle" src="../../static/images/interact_3.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/interact_3.png"></img>

<br><br>
<p>A user can export a graph in PNG format and view the JSON string for the graph. GraphSpace does not support any other export formats since it relies on Cytoscape.js for this functionality, which implements only export to PNG format.</p>
<img width="70%" height="60%" align="middle" src="../../static/images/interact_4.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/interact_4.png"></img>

</div>

<div id="auto_layouts">
<h2 style="padding-top: 50px; margin-top: -40px;">Automatic and Manual Layouts</h2>
<p>The layout panel for a graph displays two alternatives: automatic and manual.</p>
<img width="70%" height="60%" align="middle" src="../../static/images/auto_1.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/auto_1.png"></img>
<br><br>
<p>Clicking on the first choice reveals the name of layout algorithms supported by GraphSpace through its use of Cytoscape.js.</p>
<img width="70%" height="60%" align="middle" src="../../static/images/auto_2.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/auto_2.png"></img>
<br><br>
<p>Clicking on the "Manual" tab shows that there are two "Private" layouts, meaning that the user has not yet shared them with any other user. 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. The icons next to each layout name provide (i) a direct link to this layout, (ii) allow the user to change its name, (iii) share it with other users who have access to this graph, (iv) delete this layout, and (v) make it the default layout, i.e., instruct GraphSpace to display this layout whenever a user visits the page for this graph.</p>
<img width="70%" height="60%" align="middle" src="../../static/images/auto_3.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/auto_3.png"></img>
<br><br>
<p>The user selects to view the layout titled "manual-top-to-bottom".</p>
<img width="70%" height="60%" align="middle" src="../../static/images/auto_4.png"></img>
<img width="80%" height="80%" align="middle" src="../../static/images/auto_4.png"></img>
<br><br>
</div>
</div>
Expand Down
24 changes: 16 additions & 8 deletions graphs/util/db.py
Original file line number Diff line number Diff line change
Expand Up @@ -1703,6 +1703,7 @@ def find_edge(uid, gid, edge_to_find, search_type):
print "No matching edges"

else:

# Find node id's that are being searched for (source and target nodes)
head_nodes = find_node(uid, gid, head_node, 'full_search')
tail_nodes = find_node(uid, gid, tail_node, 'full_search')
Expand All @@ -1717,7 +1718,7 @@ def find_edge(uid, gid, edge_to_find, search_type):

try:
# Aggregate all matching edges (DO THIS TWO TIMES SO ORDER OF HEAD OR TAIL NODE DOESN'T MATTER... THIS IS TO RESOLVE UNDIRECTED EDGE SEARCHING)
matching_edges = db_session.query(models.Edge).filter(models.Edge.head_node_id == head_node).filter(models.Edge.tail_node_id == tail_node).filter(models.Edge.user_id == uid).filter(models.Edge.graph_id == gid).all()
matching_edges = db_session.query(models.Edge).filter(models.Edge.head_node_id == head_nodes[j]).filter(models.Edge.tail_node_id == tail_nodes[i]).filter(models.Edge.user_id == uid).filter(models.Edge.graph_id == gid).all()
edge_list += matching_edges

# # Aggregate all matching edges (DO THIS TWO TIMES SO ORDER OF HEAD OR TAIL NODE DOESN'T MATTER... THIS IS TO RESOLVE UNDIRECTED EDGE SEARCHING)
Expand Down Expand Up @@ -1749,7 +1750,6 @@ def find_node(uid, gid, node_to_find, search_type):

# Create database connection
db_session = data_connection.new_session()
print uid, gid, node_to_find, search_type

try:
id_list = []
Expand All @@ -1772,16 +1772,24 @@ def find_node(uid, gid, node_to_find, search_type):

else:
# Get all matching labels
label = db_session.query(models.Node.node_id).filter(models.Node.label == node_to_find).filter(models.Node.user_id == uid).filter(models.Node.graph_id == gid).first()
labels = db_session.query(models.Node.node_id).filter(models.Node.label == node_to_find).filter(models.Node.user_id == uid).filter(models.Node.graph_id == gid).all()

# Get all matching ids
node_id = db_session.query(models.Node.node_id).filter(models.Node.node_id == node_to_find).filter(models.Node.user_id == uid).filter(models.Node.graph_id == gid).first()
node_ids = db_session.query(models.Node.node_id).filter(models.Node.node_id == node_to_find).filter(models.Node.user_id == uid).filter(models.Node.graph_id == gid).all()

# if label != None and label not in id_list:
# id_list.append(label[0])

if label != None and label not in id_list:
id_list.append(label[0])
# if node_id != None and node_id not in id_list:
# id_list.append(node_id[0])

for label in labels:
if label not in id_list:
id_list.append(label[0])

if node_id != None and node_id not in id_list:
id_list.append(node_id[0])
for node_id in node_ids:
if node_id not in id_list:
id_list.append(node_id[0])

db_session.close()
return id_list
Expand Down

0 comments on commit bac5158

Please sign in to comment.