diff --git a/docs/Commenting_on_Graphs.md b/docs/Commenting_on_Graphs.md
new file mode 100644
index 0000000..2531f83
--- /dev/null
+++ b/docs/Commenting_on_Graphs.md
@@ -0,0 +1,184 @@
+# Commenting on Graphs
+
+Comment-system allows user to comment on different graph components similar to add comments as a means to discuss or share ideas with their collaborators for a given graph, analogous to the way "Comments" on Google Docs allow users to discuss ideas on text documents.
+. [GraphSpace](http://www.graphspace.org) allows users to comment on the following:
+
+1. **Node** - Users can comment on a node.
+2. **Edge** - Users can comment on an edge.
+3. **Subgraph** - Users can comment on a combination of nodes and edges (a subgraph).
+
+The following features are available in the Comment system functionality:
+- [Adding comments](#adding-comments)
+- [Viewing comments](#viewing-comments)
+- [Replying to comments](#replying-to-comments)
+- [Real-time experience of add and reply to comments](#real-time-experience-of-add-and-reply-to-comments)
+- [Editing comments](#editing-comments)
+- [Resolving comments](#resolving-comments)
+- [Deleting comments](#deleting-comments)
+- [Re-opening resolved comments](#re-opening-resolved-comments)
+- [Real-time experience of edit resolve reopen and delete comments](#real-time-experience-of-edit-resolve-reopen-and-delete-comments)
+- [Displaying comments associated with selected graph](#displaying-comments-associated-with-selected-graph)
+- [Highlighting subgraph associated with a comment](#highlighting-subgraph-associated-with-a-comment)
+- [Pinning comments](#pinning-comments)
+- [Viewing pinned comments](#viewing-pinned-comments)
+- [Unpin pinned comments](#unpin-pinned-comments)
+- [Toggle feature to view resolved comments](#toggle-feature-to-view-resolved-comments)
+
+
+## Adding comments
+
+Every graph has a tab named `Graph Visualization`, on opening this tab we can see a side panel on the right side of the graph. To add a comment we have to click on the `Add comment` button as shown in the image:
+
+
+
+On clicking this button, the user will be redirected to a separate panel consisting of a `Comment box` where the user can select the part of the graph he/she wants to comment on and type the comment message in the space provided and click on the `Submit` button to create a comment.
+
+The gif below shows an example of `Adding a new comment` to the graph.
+
+
+**Permissions**
+1) Any user having permission to access the graph can add a comment on the graph.
+2) User must have an account to comment on a graph (User must be signed in).
+
+## Viewing comments
+
+1) Every graph has a tab named `Graph Visualization`, on opening this tab we can see a side panel on the right side of the graph.
+2) If there are many comments associated with a graph, it would be difficult for the user to scroll down to see the list of all comments. **Pagination** functionality has been added to display atmost 3 comments per page.
+3) To view the comment we have to click on the `View comments` button as shown in the image:
+
+
+
+On clicking this button, the user will be redirected to a separate panel where all the comments under the graph are listed down.
+
+The gif below shows an example of `Viewing comments` of a graph.
+
+
+**Permissions**
+1) Any user having permission to access the graph can view comments of that graph.
+
+## Replying to comments
+
+1) For replying to a specific comment user has to click on the space provided below for a `Comment` showing `Reply..`.
+2) Then the user has to enter the reply message and click on the `Reply` button. The user has to click on `Cancel` button if he/she wants to discard the reply.
+
+
+
+**Permissions**
+1) Any user having permission to access the graph can add a comment on the graph.
+2) User must have an account to comment on a graph (User must be signed in).
+
+## Real-time experience of add and reply to comments
+
+Since comment-system provides real-time experience using `Web-sockets` the following gifs demonstrate the real-time functionality of adding comments and replying to comments.
+
+
+
+## Editing comments
+
+User can edit comment messages by clicking on the `icon` present in the top-right corner of the comment box and clicking on `Edit` option. After that the user can enter the new message and click on `Edit` button to update the comment message.
+
+
+
+**Permissions**
+1) Only the creator of the comment can edit the comment message.
+
+## Resolving comments
+
+1) User can resolve comments by clicking on the `icon` present in the top-right corner of the comment box and clicking on `Resolve` option. After that the comments would be resolved and replies to that comment are **disabled**.
+2) Only the **top most** comment in a comment thread can be resolved and the other comments in the thread(replies to top most comment) cannot be resolved.
+
+
+
+**Permissions**
+1) Only the creator of the comment can resolve the comment.
+
+## Deleting comments
+
+1) User can delete comments/replies by clicking on the `icon` present in the top-right corner of the comment/reply box and clicking on `Delete` option.
+2) After a `Delete operation` the comment/reply will be **permanently lost** and cannot be retrieved.
+
+
+
+**Permissions**
+1) Only the creator of the comment/reply can delete the comment/reply.
+
+## Re-opening resolved comments
+
+1) User can re-open comments by clicking on the icon present in the top-right corner of the comment box and clicking on `Re-open` option.
+2) Only the **resolved comments** can be re-opened and replies are again allowed on re-opened comments.
+
+
+
+**Permissions**
+1) Any user having permission to access the graph can re-open a comment.
+
+## Real-time experience of edit resolve reopen and delete comments
+
+All the real-time functionality involving editing, resolving, deleting and re-opening the comments is demonstrated in the gif below.
+
+
+
+## Displaying comments associated with selected graph
+
+1) User has the ability to filter comments to view only the comments related to a graph by clicking on the radio button `View comments related to selected graph`.
+2) User has to select the part of the graph on which he wishes to view the comments and the comments related to that part of the graph are listed down.
+
+
+
+**Permissions**
+1) Any user having permission to access the graph can use this feature.
+2) User must have an account to access this feature. (User must be signed in).
+
+## Highlighting subgraph associated with a comment
+
+1) User can view the part of the graph a comment is associated with, this can be done by `hovering` over a comment box.
+2) On hovering over a comment the part of the graph related to that comment is **highlighted**.
+
+
+
+**Permissions**
+1) Any user having permission to access the graph can use this feature.
+2) User must have an account to access this feature (User must be signed in).
+
+## Pinning comments
+
+1) Similar to **bookmarks** in browsers sometimes a user might want to **pin** comments and visit or deal with them again later.
+2) For pinning comments user has to click on the `icon` present in the top-right corner of the comment box and click on `Pin` option.
+
+
+
+**Permissions**
+1) Any user having permission to access the graph can pin comments.
+2) User must have an account to pin comments (User must be signed in).
+
+## Viewing pinned comments
+
+1) After pinning comments a user can see the list of all pinned comments by clicking on the radio button named `View pinned comments` which will display the list of all pinned comments.
+
+
+
+**Permissions**
+1) Any user having permission to access the graph can view his/her pinned comments.
+2) User must have an account to view pinned comments (User must be signed in).
+
+## Unpin pinned comments
+
+1) A user can unpin a comment by clicking on the `icon` present in the top-right corner of the comment box and click on `Unpin` option.
+2) On clicking this option the comment will be removed from the list of pinned comments.
+
+
+
+**Permissions**
+1) Any user having permission to access the graph can unpin his/her pinned comments.
+2) User must have an account to view unpin pinned comments (User must be signed in).
+
+## Toggle feature to view resolved comments
+
+1) A user can may want to see resolved or ignore them sometimes.
+2) **Toggling** over the button named `Include resolved comments` in current page will help in including and ignoring the resolved comments on that particular page.
+
+
+
+**Permissions**
+1) Any user having permission to access the graph to access this feature.
+2) User must have an account to access this feature (User must be signed in).
\ No newline at end of file
diff --git a/docs/Programmers_Guide.md b/docs/Programmers_Guide.md
index f2434b9..ee4f746 100644
--- a/docs/Programmers_Guide.md
+++ b/docs/Programmers_Guide.md
@@ -32,7 +32,7 @@ The GraphSpace REST API is served over HTTP. In case you are
### API Reference
-
+
## graphspace-python
diff --git a/docs/Quick_Tour_of_GraphSpace.md b/docs/Quick_Tour_of_GraphSpace.md
index 1f077aa..a1c9dc9 100644
--- a/docs/Quick_Tour_of_GraphSpace.md
+++ b/docs/Quick_Tour_of_GraphSpace.md
@@ -34,19 +34,23 @@ The user can log-in to [GraphSpace](http://www.graphspace.org) by following the
-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](/Uploading_Graphs.html#upload-page) or the [RESTful API](/Programmers_Guide.html#api-reference). The tutorial specifically steps through how ``user1@example.com`` interacts with GraphSpace after logging 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](Uploading_Graphs.html#upload-page) or the [RESTful API](Programmers_Guide.html#api-reference). The tutorial specifically steps through how ``user1@example.com`` interacts with GraphSpace after logging in.
### Upload a graph
The user can upload a graph on [GraphSpace](http://www.graphspace.org) by following the given steps:
1. Go to the [Upload Graph Page](http://www.graphspace.org/upload) by clicking on the `Upload Graph` button on [Home Page](http://www.graphspace.org/).
-2. Enter a [unique name](/Uploading_Graphs.html#graph-name) for the new graph.
-3. Select a [CYJS file](/GraphSpace_Network_Model.html#cyjs-format) which contains the graph information.
-4. Select a [JSON file](/GraphSpace_Network_Model.html#stylesheet-json-format) which contains the style information for the graph. (Optional Step)
+2. Enter a [unique name](Uploading_Graphs.html#graph-name) for the new graph.
+3. Select a [CYJS file](GraphSpace_Network_Model.html#cyjs-format) which contains the graph information.
+4. Select a [JSON file](GraphSpace_Network_Model.html#stylesheet-json-format) 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](http://www.graphspace.org) 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:
+- [Sample network file](_static/sample_graph.cyjs)
+- [Sample style file](_static/sample_stylesheet.json)
+
### List of uploaded graphs
@@ -62,12 +66,12 @@ In this example, the user owns 33 graphs, can access 64 public graphs and 33 gra
## 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](/Searching_Graphs.html#query-semantics) on [Graphs Page](http://www.graphspace.org/graphs/) by following the given steps:
+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](Searching_Graphs.html#query-semantics) on [Graphs Page](http://www.graphspace.org/graphs/) 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](/Viewing_Graphs.html#highlighted-graph-elements). 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](/Viewing_Graphs.html#highlighted-graph-elements).
+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](Viewing_Graphs.html#highlighted-graph-elements). 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](Viewing_Graphs.html#highlighted-graph-elements).
@@ -75,23 +79,23 @@ In this example, the user searches for the list for graphs that contain the prot
The user can search for node or edges within a given graph on [GraphSpace](http://www.graphspace.org/) by following the given steps:
-1. Enter the name of the node or an edge you are searching for in the [search bar](/Interacting_with_Graphs.html#search).
-2. The nodes or edges are [highlighted](/Viewing_Graphs.html#highlighted-graph-elements) automatically as you type in the name of the node or edge in the search bar.
+1. Enter the name of the node or an edge you are searching for in the [search bar](Interacting_with_Graphs.html#search).
+2. The nodes or edges are [highlighted](Viewing_Graphs.html#highlighted-graph-elements) 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](/Viewing_Graphs.html#highlighted-graph-elements) 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.
+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](Viewing_Graphs.html#highlighted-graph-elements) 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.
-In the following example, the user [searches the graph for edges](/Searching_Graphs.html#query-semantics) from `Wnt` to `Fzd` using the query `Wnt::Fzd`. GraphSpace
-[highlights](/Viewing_Graphs.html#highlighted-graph-elements) 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.
+In the following example, the user [searches the graph for edges](Searching_Graphs.html#query-semantics) from `Wnt` to `Fzd` using the query `Wnt::Fzd`. GraphSpace
+[highlights](Viewing_Graphs.html#highlighted-graph-elements) 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.
## Interacting with a Graph
-In this section, we examine [different ways to interact with an individual network](/Interacting_with_Graphs.html) 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](/GraphSpace_Network_Model.html) section. An individual network page is designed to access features like:
+In this section, we examine [different ways to interact with an individual network](Interacting_with_Graphs.html) 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](GraphSpace_Network_Model.html) section. An individual network page is designed to access features like:
- [Graph Information](#graph-information)
- [Edge and Node Information](#edge-and-node-information)
@@ -101,20 +105,20 @@ In this section, we examine [different ways to interact with an individual netwo
### 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](/GraphSpace_Network_Model.html#graph-data-attributes) specifies this content. The user can go to `Graph Information` panel by clicking on the `Graph Information` link above the graph.
+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](GraphSpace_Network_Model.html#graph-data-attributes) specifies this content. The user can go to `Graph Information` panel by clicking on the `Graph Information` link above the graph.
-Please refer to [this section](/Viewing_Graphs.html#graph-information-tab) for more information.
+Please refer to [this section](Viewing_Graphs.html#graph-information-tab) for more information.
### 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](/GraphSpace_Network_Model.html#cyjs-format) specifies this content.
+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](GraphSpace_Network_Model.html#cyjs-format) specifies this content.
-Please refer to [this section](/Viewing_Graphs.html#node-and-edge-popups) for more information.
+Please refer to [this section](Viewing_Graphs.html#node-and-edge-popups) for more information.
### Export Graph
@@ -124,7 +128,7 @@ In the following example, the user is exporting the graph as an image in PNG for
-Please refer to [this section](/Interacting_with_Graphs.html#export) for more information.
+Please refer to [this section](Interacting_with_Graphs.html#export) for more information.
### Change Layout
@@ -142,7 +146,7 @@ In the following example, the user selects to view the layout titled "manual-top
-Please refer to [this section](/Interacting_with_Graphs.html#change-layout) for more information.
+Please refer to [this section](Interacting_with_Graphs.html#change-layout) for more information.
### Share Layout
@@ -159,5 +163,5 @@ Note: The icons next to each layout name allow the user to (i) change its name,
-Please refer to [this section](/Sharing_Graphs.html#sharing-layouts-with-group-s) for more information.
+Please refer to [this section](Sharing_Graphs.html#sharing-layouts-with-group-s) for more information.
diff --git a/docs/Uploading_Graphs.md b/docs/Uploading_Graphs.md
index eee4efa..7b6380a 100644
--- a/docs/Uploading_Graphs.md
+++ b/docs/Uploading_Graphs.md
@@ -4,7 +4,7 @@
1. Users may create their own [JSON files](GraphSpace_Network_Model.html) and upload networks one-by one via the [web interface](#upload-page) at http://graphspace.org/upload.
-2. Cytoscape users may export their visually-coded networks from Cytoscape and [import them directly into GraphSpace](Uploading_Graphs.html#style-file). This functionality works as follows. Since v3.1, Cytoscape has supported export of the structure of networks into JSON files and the visual elements of networks in JSON-based style files. GraphSpace can import [both these types of files](GraphSpace_Network_Model.html) at http://graphspace.org/upload. Moreover, users can import a Cytoscape style file when they are [editing the layout](Editing_Layouts.html) of a network in GraphSpace. In the future, we intend to develop a Cytoscape app to make the integration between the two systems seamless.
+2. Cytoscape users may seamlessly export their visually-coded networks from Cytoscape directly to GraphSpace using the new [CyGraphSpace App](http://apps.cytoscape.org/apps/cygraphspace). The app works by exporting the structure of networks to JSON (CYJS) and the visual elements of networks to JSON-based style files and then uploads them to GraphSpace using the REST API. Cytoscape users may also manually export the network structure and style files and upload them to GraphSpace at http://graphspace.org/upload. Moreover, users can import a Cytoscape style file when they are [editing the layout](Editing_Layouts.html) of a network in GraphSpace. In the future, we intend to update the Cytoscape app to sync different styles/layouts with Cytoscape.
3. A comprehensive [RESTful API](Programmers_Guide.html#graphspace-rest-api) and a [Python module](Programmers_Guide.html#graphspace-python) called “graphspace_python” facilitate bulk uploads of networks. Both the API and the module are easy to integrate into software pipelines. Please refer to the [Programmer's Guide](Programmers_Guide.html) for more information.
diff --git a/docs/_static/gifs/comments/gs-screenshot-adding-comments.gif b/docs/_static/gifs/comments/gs-screenshot-adding-comments.gif
new file mode 100644
index 0000000..12c6201
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-adding-comments.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-deleting-comments.gif b/docs/_static/gifs/comments/gs-screenshot-deleting-comments.gif
new file mode 100644
index 0000000..c07e516
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-deleting-comments.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-displaying-comments-associated-with-selected-graph.gif b/docs/_static/gifs/comments/gs-screenshot-displaying-comments-associated-with-selected-graph.gif
new file mode 100644
index 0000000..1b92843
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-displaying-comments-associated-with-selected-graph.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-editing-comments.gif b/docs/_static/gifs/comments/gs-screenshot-editing-comments.gif
new file mode 100644
index 0000000..5a840c1
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-editing-comments.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-highlighting-subgraph-associated-with-a-comment.gif b/docs/_static/gifs/comments/gs-screenshot-highlighting-subgraph-associated-with-a-comment.gif
new file mode 100644
index 0000000..cff54a3
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-highlighting-subgraph-associated-with-a-comment.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-pinning-comments.gif b/docs/_static/gifs/comments/gs-screenshot-pinning-comments.gif
new file mode 100644
index 0000000..cf9d7e7
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-pinning-comments.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-re-opening-resolved-comments.gif b/docs/_static/gifs/comments/gs-screenshot-re-opening-resolved-comments.gif
new file mode 100644
index 0000000..8abc7e8
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-re-opening-resolved-comments.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-real-time-experience-of-add-and-reply-to-comments.gif b/docs/_static/gifs/comments/gs-screenshot-real-time-experience-of-add-and-reply-to-comments.gif
new file mode 100644
index 0000000..163260a
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-real-time-experience-of-add-and-reply-to-comments.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-real-time-experience-of-edit-resolve-reopen-and-delete-comments.gif b/docs/_static/gifs/comments/gs-screenshot-real-time-experience-of-edit-resolve-reopen-and-delete-comments.gif
new file mode 100644
index 0000000..c1134f3
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-real-time-experience-of-edit-resolve-reopen-and-delete-comments.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-replying-to-comments.gif b/docs/_static/gifs/comments/gs-screenshot-replying-to-comments.gif
new file mode 100644
index 0000000..9dc3703
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-replying-to-comments.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-resolving-comments.gif b/docs/_static/gifs/comments/gs-screenshot-resolving-comments.gif
new file mode 100644
index 0000000..5e38437
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-resolving-comments.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-toggle-feature-to-view-resolved-comments.gif b/docs/_static/gifs/comments/gs-screenshot-toggle-feature-to-view-resolved-comments.gif
new file mode 100644
index 0000000..72fa2f8
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-toggle-feature-to-view-resolved-comments.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-unpin-pinned-comments.gif b/docs/_static/gifs/comments/gs-screenshot-unpin-pinned-comments.gif
new file mode 100644
index 0000000..3635154
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-unpin-pinned-comments.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-viewing-comments.gif b/docs/_static/gifs/comments/gs-screenshot-viewing-comments.gif
new file mode 100644
index 0000000..df75665
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-viewing-comments.gif differ
diff --git a/docs/_static/gifs/comments/gs-screenshot-viewing-pinned-comments.gif b/docs/_static/gifs/comments/gs-screenshot-viewing-pinned-comments.gif
new file mode 100644
index 0000000..c8a4768
Binary files /dev/null and b/docs/_static/gifs/comments/gs-screenshot-viewing-pinned-comments.gif differ
diff --git a/docs/_static/images/graph-page/comments/gs-screenshot-visualization-tab.png b/docs/_static/images/graph-page/comments/gs-screenshot-visualization-tab.png
new file mode 100644
index 0000000..8ea6aa9
Binary files /dev/null and b/docs/_static/images/graph-page/comments/gs-screenshot-visualization-tab.png differ
diff --git a/docs/_static/sample_graph.cyjs b/docs/_static/sample_graph.cyjs
new file mode 100644
index 0000000..59d5bda
--- /dev/null
+++ b/docs/_static/sample_graph.cyjs
@@ -0,0 +1,57 @@
+{
+ "format_version": "1.0",
+ "generated_by": "graphspace-2.0.0",
+ "target_cytoscapejs_version": "~2.7",
+ "elements": {
+ "nodes": [
+ {
+ "data": {
+ "id": "P4314611",
+ "k": 0,
+ "name": "P4314611",
+ "label": "Sample Node 1",
+ "aliases": [],
+ "popup": "Popup for node 1
A string that will be displayed in a popup window when the user clicks the node/edge.
This string can be HTML-formatted information, e.g., Gene Ontology annotations and database links for a protein; or types, mechanism, and database sources for an interaction."
+ },
+ "position": {
+ "x": 297.5,
+ "y": 277.5
+ }
+ },
+ {
+ "data": {
+ "id": "P0810711",
+ "k": 0,
+ "name": "P0810711",
+ "label": "Sample Node 2",
+ "aliases": [],
+ "popup": "Popup for node 2
A string that will be displayed in a popup window when the user clicks the node/edge.
This string can be HTML-formatted information, e.g., Gene Ontology annotations and database links for a protein; or types, mechanism, and database sources for an interaction."
+ },
+ "position": {
+ "x": 892.5,
+ "y": 277.5
+ }
+ }
+ ],
+ "edges": [
+ {
+ "data": {
+ "target": "P0810711",
+ "k": 0,
+ "source": "P4314611",
+ "is_directed": 1,
+ "id": "P4314611-P0810711",
+ "name": "Sample Edge",
+ "popup": "Popup for edge
A string that will be displayed in a popup window when the user clicks the node/edge.
This string can be HTML-formatted information, e.g., Gene Ontology annotations and database links for a protein; or types, mechanism, and database sources for an interaction."
+ }
+ }
+ ]
+ },
+ "data": {
+ "description": "Description of graph.. can also point to an image hosted elsewhere",
+ "name": "Graph Name",
+ "tags": [
+ "tutorial"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/docs/_static/sample_stylesheet.json b/docs/_static/sample_stylesheet.json
new file mode 100644
index 0000000..009649e
--- /dev/null
+++ b/docs/_static/sample_stylesheet.json
@@ -0,0 +1,51 @@
+{
+ "format_version": "1.0",
+ "generated_by": "graphspace-2.0.0",
+ "target_cytoscapejs_version": "~2.7",
+ "style": [
+ {
+ "selector": "node[name='P4314611']",
+ "style": {
+ "border-color": "#888",
+ "text-halign": "center",
+ "text-valign": "center",
+ "border-width": "2px",
+ "height": "50px",
+ "width": "50px",
+ "shape": "ellipse",
+ "background-blacken": "0.1",
+ "background-color": "yellow"
+ }
+ },
+ {
+ "selector": "node[name='P0810711']",
+ "style": {
+ "text-halign": "center",
+ "text-valign": "center",
+ "text-outline-color": "#888",
+ "text-outline-width": "2px",
+ "border-color": "black",
+ "border-width": "5px",
+ "height": "150px",
+ "shape": "ellipse",
+ "color": "black",
+ "border-style": "double",
+ "text-wrap": "wrap",
+ "background-blacken": "0",
+ "width": "150px",
+ "background-color": "red"
+ }
+ },
+ {
+ "selector": "edge",
+ "style": {
+ "curve-style": "bezier",
+ "line-style": "dotted",
+ "width": "12px",
+ "line-color": "blue",
+ "source-arrow-color": "yellow",
+ "target-arrow-shape": "triangle"
+ }
+ }
+ ]
+}
\ No newline at end of file
diff --git a/docs/index.rst b/docs/index.rst
index 3d08fe4..5385f4d 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -23,5 +23,6 @@ GraphSpace 2.0 User Manual
Sharing_Graphs
Editing_Layouts
Organizing_Graphs_Using_Tags
+ Commenting_on_Graphs
Programmers_Guide
Release_Notes