Added Documentation for comment-system and discussions-system

docs/Commenting_on_Graphs.md

@@ -0,0 +1,124 @@
+# 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).
+
+## 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 `comments` button.
+
+On clicking this button, you will see a `Add Comment` we have to click on it then 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.
+![Add Comment Graph](_static/gifs/gs-screenshot-adding-comments.gif)
+
+**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.
+3) To view the comment we have to click on the `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.
+![View Comments Graph](_static/gifs/gs-screenshot-viewing-comments.gif)
+
+**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.
+
+![Reply Comment Gif](_static/gifs/gs-screenshot-replying-to-comments.gif)
+
+**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.
+
+![Real Time Experience Add Reply Gif](_static/gifs/gs-screenshot-real-time-experience-of-add-and-reply-to-comments.gif)
+
+## 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.
+
+![Edit Comment Gif](_static/gifs/gs-screenshot-editing-comments.gif)
+
+**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.
+
+![Resolve Comment Gif](_static/gifs/gs-screenshot-resolving-comments.gif)
+
+**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.
+
+![Delete Comment Gif](_static/gifs/gs-screenshot-deleting-comments.gif)
+
+**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.
+
+![Re-open Comment Gif](_static/gifs/gs-screenshot-reopen-comments.gif)
+
+**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.
+
+![Real Time Experience Edit Resolve Reopen Delete Gif](_static/gifs/gs-screenshot-real-time-experience-of-edit-resolve-reopen-and-delete-comments.gif)
+
+## 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.
+
+![Display Comments on Selected Graph Gif](_static/gifs/gs-screenshot-displaying-comments-associated-with-selected-graph.gif)
+
+**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**.
+
+![Display Comments on Selected Graph Gif](_static/gifs/gs-screenshot-highlight-sub-graph.gif)
+
+## React unreact to the comments and replies
+
+User can react unreact comment messages by clicking on the `emoji icon` present in the top-right corner of the comment box and clicking on `Emoji`. After that if user want to unreact then clicking on the same emoji again from the emoji icon in the top-right corner .
+
+![Display React-unreact on comments Gif](_static/gifs/gs-screenshot-react-unreact-on-comments.gif)
+
+**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).

docs/Group_Discussions.md

@@ -0,0 +1,67 @@
+# Group Discussions
+
+## Description
+
+This is the feature of [Graphspace](http://www.graphspace.org) is used for discussions inside the group. This feature allows users to create discussions about some particular topic so that members of the group will join the discussions and discuss the topic. This feature helps researchers to discuss about some ideas and issues.
+
+## Create Discussion
+
+The user can create a discussion inside the group by following the given steps:
+
+1. Before creating discussions,the user must be a member of the group and logged in.
+2. Click on the `Discussion` tab inside the group. This will open a discussion table with a Add Discussion button.
+3. Click on the `Add Discussion` button and this will trigger a pop-up form for creating discussion.
+4. Fill out the topic and description of your discussion which you want to discuss.
+5. Click on the `Create Discussion` button to create discussion.
+5. Your discussion is created and it is visible in the discussion table in the discussions tab.
+
+![Create Discussion](_static/gifs/gs-screenshot-create-discussion.gif)
+
+
+## Discussion Table
+
+After your discussion is created it is visible on the discussion table, from there you can delete, close, re-open discussion by follwing steps:
+
+1. You can see your discussion on the top of discussion table where you can see delete and close discussion options if you are the owner of the discussion, other members of the group can see discussions but don't have control over it.
+2. For deleting discussion you click on `delete` and this will trigger the pop-up for delete discussion.
+3. Click on `Delete` this will delete you discussion.
+4. If your discussion is completed you can close the discussion by clicking on `Close` so that no can further comment and edit.
+5. If you want to re-open the discussion you can do that by clicking on `re-open` so that users can again comment and edit.
+
+Since the discussion system is real-time so you don't have to worry about what will be the response of users pages with your changes.
+
+## Searching and Filter Discussions
+
+Searching discussions is feature that enables you to search discussion based on your input.
+
+1. On the top of discussion table there is a search box where you have to give some input and it will filter the discussions based on your keyword.
+2. The following elements will be used for searching discussions:
+    1. `Owner email`
+    2. `Discussion Topic`
+    3. `Discussion Description`
+
+## Discussion Comments
+
+Group members can view the discussion and comment by the following steps:
+
+1. Click on the discussion from the discussion table and this will redirect you to that discussion page.
+2. If the discussion is closed then you can't comment on it.
+3. If the discussion is open you can see the comment box below discussions there you can write your comment and click on `Create Comment` button.
+4. Your comment is created and now you can edit or delete the comment from the menu dropdown by clicking on `edit` and `delete` options.
+5. If you want to go back to discussion table click on `Back to Discussion` button.
+
+![Create Discussion](_static/gifs/gs-screenshot-adding_editing-discussion-comment.gif)
+
+
+![Create Discussion](_static/gifs/gs-screenshot-resolve-delete-discussion.gif)
+
+## Comment Reactions
+
+Group members can react on comments by the following steps:
+
+1. Click on the smiley emoticon on top-right of the comment and this will open the dropdown and you can see a list of emoticons.
+2. Choose the reaction from the list and click on it, this will react on comments.
+3. For Unreact you can again click on the same emoji so that you can unreact.
+4. On hover on the reaction you will see the list of users reacted that reaction on the same particular comment.
+
+![Create Discussion](_static/gifs/gs-screenshot-reaction-system-discussion.gif)

docs/index.rst

@@ -22,6 +22,8 @@ GraphSpace 2.0 User Manual
    Searching_Graphs
    Sharing_Graphs
    Editing_Layouts
+   Commenting_on_Graphs
+   Group_Discussions
    Organizing_Graphs_Using_Tags
    Programmers_Guide
    Release_Notes