Added functionality for modifing graph metadata using UI

applications/graphs/controllers.py

@@ -229,6 +229,11 @@ def update_graph(request, graph_id, name=None, is_public=None, graph_json=None,
 		if name is not None:
 			G.set_name(name)
 
+		db.remove_tags_by_graph_id(request.db_session, graph_id=graph_id)
+		# Add graph tags
+		for tag in G.get_tags():
+			add_graph_tag(request, graph_id, tag)
+
 		db.remove_nodes_by_graph_id(request.db_session, graph_id=graph_id)
 		# Add graph nodes
 		node_name_to_id_map = add_graph_nodes(request, graph_id, G.nodes(data=True))

applications/graphs/dal.py

@@ -290,6 +290,9 @@ def add_tag(db_session, name):
 	db_session.add(tag)
 	return tag
 
+@with_session
+def remove_tags_by_graph_id(db_session, graph_id):
+	db_session.query(GraphToTag).filter(GraphToTag.graph_id == graph_id).delete()
 
 @with_session
 def get_layout(db_session, owner_email, name, graph_id):

applications/graphs/views.py

@@ -489,10 +489,26 @@ def _update_graph(request, graph_id, graph={}):
 	------
 
 	It will update the owner_email only if user has admin access otherwise user cannot update the owner email.
+	Fetching graph_json from old graph if the updated graph does not contain 'graph_json' as it's attribute.
+	Updating title, description, tags in the graph_json if present accordingly.
 
 	"""
 	authorization.validate(request, permission='GRAPH_UPDATE', graph_id=graph_id)
 	user_role = authorization.user_role(request)
+	old_graph = _get_graph(request, graph_id)
+
+	if ('title' in graph) or ('description' in graph) or ('tags' in graph):
+		if not ('graph_json' in graph):
+			graph['graph_json'] = old_graph['graph_json']
+
+	if 'title' in graph:
+		graph['graph_json']['data']['title'] = graph['title']
+
+	if 'description' in graph:
+		graph['graph_json']['data']['description'] = graph['description']
+
+	if 'tags' in graph:
+		graph['graph_json']['data']['tags'] = graph['tags']
 
 	return utils.serializer(graphs.update_graph(request,
 	                                            graph_id=graph_id,

docs/Editing_Graph_Data_Attributes.md

@@ -0,0 +1,57 @@
+# Editing Graph Data Attributes
+
+GraphSpace includes a user interface to modify the [Graph Data Attributes](https://github.com/Murali-group/GraphSpace/blob/master/docs/GraphSpace_Network_Model.md#graph-data-attributes).
+Through this interface a [GraphSpace](http://www.graphspace.org) user will be able to:
+
+- [Modify graph title](#edit-graph-title)
+- [Modify graph name](#edit-graph-name)
+- [Modify graph information/legend](#edit-graph-description)
+- [Add/remove tags](#edit-graph-tags)
+
+The user can activate this functionality by clicking the `Edit` button on the page for an individual network.
+
+## Edit graph title
+
+A [Graphspace](http://www.graphspace.org) user can edit the graph title by following the given steps:
+
+1. Click on the `Edit` button present on the right top corner of the page given for an individual network.
+2. Enter the **new title** in the space provided under the `Title` heading.
+3. Click on `Save` if you want to save the changes else click on the `Cancel` button to discard the changes.
+4. On clicking the `Save` button you will be notified with a success or error message based on whether **title** of the graph has been updated or not.
+
+![editing title](_static/gifs/gs-screenshot-user1-wnt-signaling-pathway-edit-title.gif)
+
+## Edit graph name
+
+A [Graphspace](http://www.graphspace.org) user can edit the graph name by following the given steps:
+
+1. Click on the `Edit` button present on the right top corner of the page given for an individual network.
+2. Enter the **new name** in the space provided under the `Name` heading.
+3. Click on `Save` if you want to save the changes else click on the `Cancel` button to discard the changes.
+4. On clicking the `Save` button you will be notified with a success or error message based on whether **name** of the graph has been updated or not.
+
+![editing name](_static/gifs/gs-screenshot-user1-wnt-signaling-pathway-edit-name.gif)
+
+## Edit graph description
+
+A [Graphspace](http://www.graphspace.org) user can edit the graph description/legend by following the given steps:
+
+1. Click on the `Edit` button present on the right top corner of the page given for an individual network.
+2. Navigate to the `Graph Information` Page.
+3. Enter the **new description** in the space provided under the `Description` heading.
+3. Click on `Save` if you want to save the changes else click on the `Cancel` button to discard the changes.
+4. On clicking the `Save` button you will be notified with a success or error message based on whether **description** of the graph has been updated or not.
+
+![editing description](_static/gifs/gs-screenshot-user1-wnt-signaling-pathway-edit-description.gif)
+
+## Edit graph tags
+
+A [Graphspace](http://www.graphspace.org) user can add/remove tags by following the given steps:
+
+1. Click on the `Edit` button present on the right top corner of the page given for an individual network.
+2. Enter the **new tags** in the space provided under the `Add/Remove tags` heading with space separation.
+3. You can remove the **old tags** by clicking on the `x` symbol provided for each tag.
+4. Click on `Save` if you want to save the changes else click on the `Cancel` button to discard the changes.
+5. On clicking the `Save` button you will be notified with a success or error message based on whether **tags** of the graph have been updated or not.
+
+![editing tags](_static/gifs/gs-screenshot-user1-wnt-signaling-pathway-edit-tags.gif)

static/css/graphspace.css

@@ -438,4 +438,20 @@ p.lead {
         position: relative;
         margin-left: 0;
     }
+}
+
+#edit-graph-table tr {
+    font-size: 16px;
+}
+
+#edit-graph-table td, th {
+    padding-left: 10px;
+}
+
+#edit-graph-table button {
+    height: 40px;
+    width: 80px;
+    border-radius: 5px;
+    font-weight: bold;
+    font-size: 16px;
 }

static/js/graphs_page.js

@@ -430,6 +430,7 @@ var uploadGraphPage = {
 var graphPage = {
     cyGraph: undefined,
     timeout: null,
+    tagsBar: null,
     init: function () {
         /**
          * This function is called to setup the graph page.
@@ -513,6 +514,19 @@ var graphPage = {
             $('#inputSearchEdgesAndNodes').val(searchquery).trigger('onkeyup');
         }
 
+        graphPage.tagsBar = $(".add-remove-tags").select2({
+            tags: true,
+            tokenSeparators: [',', ' '],
+            width: '99%'
+        });
+
+        //adding on click event handlers to buttons used for editing graphs.
+        $('#cancel-edit-btn').click(function () {
+            $('#edit-tab').css('display','none');
+            $('#view-tab').css('display','');
+            $('#edit-desc').css('display','none');
+            $('#view-desc').css('display','');
+        });
 
         graphPage.defaultLayoutWidget.init();
     },
@@ -686,6 +700,56 @@ var graphPage = {
             )
         );
     },
+    updateGraphAttributesBtn: function (e, graph_id) {
+
+        //takes name,title, description and tags and updates them by sending an ajax request to server.
+        apis.graphs.update(graph_id, {
+                'name': $('#new_name').val(),
+                'title': $('#new_title').val(),
+                'description': $('#new_description').val(),
+                'tags': graphPage.tagsBar.val()
+            },
+            successCallback = function (response) {
+                // This method is called when attributes of the graph(name, title, tags...etc) have been successfully updated.
+                $.notify({message: 'Successfully updated the graph with id=' + graph_id.toString()}, {type: 'success'});
+                location.reload();
+            },
+            errorCallback = function (xhr, status, errorThrown) {
+                // This method is called when error occurs while trying to update the graph attributes.
+                $.notify({
+                    message: xhr.responseJSON.error_message
+                }, {
+                    type: 'danger'
+                });
+
+            });
+    },
+    graphEditFormatter: function(e, title, name, description) {
+
+        //populating input tags with appropriate values before showing the edit panel.
+        $('#new_name').val(name);
+        $('#new_title').val(title);
+        $('#new_description').val(description);
+
+        //fetching all the tags and populating them in the tag bar.
+        console.log(title, name, description);
+        var hyper_links = $('#Tags').children();
+        graphPage.tagsBar.find('option').remove().end();
+        $.each(hyper_links, function(idx) {
+                var tag = $.trim(hyper_links[idx].text);
+                graphPage.tagsBar.append(new Option(tag, tag, true, true));
+            }
+        );
+        graphPage.tagsBar.trigger('change');
+
+        //hides view tab and displays edit tab.
+        $('#view-tab').css('display','none');
+        $('#edit-tab').css('display','');
+
+        //hides view description tab and displays edit description tab.
+        $('#view-desc').css('display','none');
+        $('#edit-desc').css('display','');
+    },
     onShareGraphWithPublicBtn: function (e, graph_id) {
 
         apis.graphs.update(graph_id, {

templates/graph/graph_details_tab.html

@@ -3,13 +3,28 @@
         img {
             max-width: 200px;
         }
+        textarea {
+          width: 90%;
+          height: 150px;
+          padding: 12px 20px;
+          box-sizing: border-box;
+          border: 1px solid #ccc;
+          border-radius: 4px;
+          resize: none;
+          font-size: 15px;
+      }
     </style>
     <div class="row">
-        <div class="col-md-6">
+        <div class="col-md-6" id="view-desc">
+          <div style="font-weight: bold; font-size: 15px">Description</div><br/>
             <table>
                 {{ description|safe }}
             </table>
         </div>
+        <div class="col-md-6" style="display:none" id="edit-desc">
+          <div style="font-weight: bold; font-size: 15px">Description</div><br/>
+            <textarea id="new_description"> {{ description | safe}} </textarea>
+        </div>
         <div class="col-md-6">
             <div class="table-responsive">
                 <table class="table table-bordered">

templates/graph/index.html

@@ -8,6 +8,8 @@
             var default_layout_id = {% if default_layout_id %}{{ default_layout_id|safe }}{% else %}null{% endif %};
         {% endif %}
     </script>
+    <link href="{% static 'components/select2/dist/css/select2.min.css' %}" rel="stylesheet"/>
+    <script src="{% static 'components/select2/dist/js/select2.full.min.js' %}"></script>
 
     <!--- Modals start here--->
     <div>
@@ -75,7 +77,7 @@ <h4 class="modal-title" id="myModalLabel">Share Graph</h4>
                 </div>
             </div>
         </div>
-    
+
         <!-- Save on Exit Layout Modal -->
         <div class="modal fade" id="saveOnExitLayoutModal" tabindex="-1" role="dialog" aria-labelledby="saveOnExitLayoutModalLabel"
              aria-hidden="true">
@@ -143,7 +145,48 @@ <h4 class="modal-title" id="myModalLabel">Save Layout</h4>
     </div>
     <!--- Modals end here--->
     <div class="container-fluid zero-margin zero-padding">
-        <div class="row zero-margin zero-padding padding-top-2 padding-bottom-2">
+        <div class="row zero-margin zero-padding padding-top-2 padding-bottom-2" id="edit-tab" style="display:none">
+            <table style="width:100%;" id="edit-graph-table">
+                <tr>
+                    <th>Title</th>
+                    <th>Name</th>
+                </tr>
+                <tr>
+                    <td style="width: 58%">
+                        <input type="text" style="width:100%;height: 38px" id="new_title"/>
+                    </td>
+                    <td style="width: 30%">
+                        <input type="text" style=" width:99%;height: 38px;" id="new_name"/>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <div style="font-weight: bold">
+                            Add/Remove tags
+                        </div>
+                        <div style="font-size: 15px;color:grey;">
+                            (Enter multiple tags with space seperation)
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <td style="width:88%">
+                        <select class="add-remove-tags gs-full-width" multiple="multiple">
+                        </select>
+                    </td>
+                    <td>
+                        <button type="button" class="btn btn-default btn-sm" onclick="graphPage.updateGraphAttributesBtn(this,{{ graph.id }})">
+                            Save
+                        </button>
+                        or
+                        <button type="button" class="btn btn-danger" id="cancel-edit-btn">
+                            Cancel
+                        </button>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        <div class="row zero-margin zero-padding padding-top-2 padding-bottom-2" id="view-tab">
             <div class="col-md-10">
                 <p class="lead">
                     {{ title }}
@@ -191,8 +234,15 @@ <h4 class="zero-margin d-inline-block">
                         <li><a onclick="graphPage.export('style');">Network Stylesheet (.json)</a></li>
                     </ul>
                 </div>
+                {% if uid and uid == graph.owner_email %}
+                <div class="btn-group pull-right">
+                    <button class="btn btn-default btn-sm" onclick="graphPage.graphEditFormatter(this, '{{title}}', '{{graph.name}}', '{{description}}')" style="margin-right: 1.2em;">
+                        <i class="fa fa-edit fa-lg"></i> &nbsp;Edit
+                    </button>
+                </div>
+                {% endif %}
             </div>
-
+            
         </div>
 
         <ul class="nav nav-tabs">
@@ -333,4 +383,4 @@ <h4 class="zero-margin d-inline-block">
             })
         })
     </script>
-{% endblock %}
+{% endblock %}