Modify graph metadata using UI

[jlaw9]

The main missing UI features to modify graph metadata are:

• [ ] Modify graph title
• [ ] Add/remove tags
• [ ] Modify Graph Information / Legend

Users should be able to edit the title and tags in the "Graph Visualization" tab and the graph inforomation/legend in the "Graph Information" tab

[bruce-wayne99]

I would like to work on this issue.

[tmmurali]

@jlaw9 @adbharadwaj Can you help @bruce-wayne99 to get started on fixing this issue?

Thanks for the offer, @bruce-wayne99. We welcome new contributors!

[adbharadwaj]

@bruce-wayne99, Thanks for offering to work on this issue. Here is how I would do it I was a newbie in GraphSpace project.

Step 1

You can find detailed documentation on how the graph information, tags, title, and legend is populated using the following link.

Graph Data Attributes Attributes Treated Specially by GraphSpace

Although the above-mentioned sub-section should be sufficient, I highly encourage you to understand go through entire section on CYJS format to get a more thorough understanding.

Step 2

Go through our update/put /graphs/{id} API works. Play around with it on your local setup. Try to update all of three fields mentioned above and understand the input and output data format.

Here are some useful links:

1. API Reference
2. Tutorial: How to use GraphSpace APIs

Step 3

Since the API call for this feature will be from UI, we don't have to authenticate our calls using BasicAuth. Instead, we need to authenticate it using CSRF tokens.

The good thing is we already have a JS API to handle graph update in our JS library. All you need to worry about is sending in the right input data and hence, step 1 and 2 is really important.

Here is a sample call where we are updating the graph to make it public.

apis.graphs.update(graph_id, {
                'is_public': 1
            },
            successCallback = function (response) {
                // This method is called when group_to_graph relationship is successfully deleted.
                // The entry from the table is deleted.
                $(e).parent().find('.unshare-graph-btn').removeClass('hidden');
                $(e).addClass('hidden');

            },
            errorCallback = function (xhr, status, errorThrown) {
                // This method is called when  error occurs while deleting group_to_graph relationship.
                $.notify({
                    message: xhr.responseJSON.error_message
                }, {
                    type: 'danger'
                });

            });

Step 4

Write the code !!

@bruce-wayne99, I would be happy to discuss the user experience flow with you on this thread, if you need to. Some tips:

• We would prefer to use AJAX request rather than submit and reloading the entire page.
• Inline editing would be amazing. But, you create a new page for updating graph information.

[bruce-wayne99]

@adbharadwaj I actually thought of adding buttons like 'Edit name', 'Add Tag', 'Remove Tag', 'Edit description' in the graph table. As shown in the figure below. Correct me if there is a better way to provide UI to modify graph meta data.

[tmmurali]

@bruce-wayne99 In principle, this UI is good but a challenge is that as we expand the list of items we want to be editable the number of buttons increases.

Another option to consider is show an "Edit" icon (usually looks like a pen). Upon clicking this icon, either (i) a new page opens up that allows editing of all metadata associated with the graph or (ii) the appropriate columns in the table become editable in place.

I like option (i) more since it allows metadata that is not shown in the table to edited. But a minor drawback is that it requires opening a new page.

@adbharadwaj Comments?

[bruce-wayne99]

@tmmurali So, Iam thinking of implementing an Edit icon for each graph and on clicking the Edit option a new modal opens up just like the way for Remove where for each meta data field an input tag can be specified where he can enter new values for the data and clicking the submit button triggers an AJAX request. Suggest me if this could be done in a better way.

[adbharadwaj]

I like what @tmmurali suggested in option (i).

Another option would be to create a new page for editing and that means you will have to add a new url-route. I would rather create a client-side util on the graph page.

So instead of editing from the graphs list page, users should be editing on the page for a given graph. Something like edit description feature in GitHub.

Let me know if you have more questions.

[bruce-wayne99]

@adbharadwaj i have implemented editing name and title of the graph. The following is a gif of the implementation. Please have a look at it. Suggest me if any changes can be made!

[adbharadwaj]

@bruce-wayne99 Looks promising! Can you make it look like Github? You can refer to the GIF in my previous comment. Ideally we wouldn't wanna hide the graph while editing the name and description. For tags, you can refer to Github's tags edit functionality. Let me know if you have more questions.

[bruce-wayne99]

@adbharadwaj sorry for the late response, I was having exams, since the graph visualization and graph information are on different panels, should i display the name, description, tags, title for the graph in the visualization tab and then provide edit/cancel options for the user in the visualization tab?

[adbharadwaj]

@bruce-wayne99 We need to split this into two parts.

1. On graph visualization page, we should allow a user to edit the name, title, and tags of the graph.
2. On graph information page, we should allow a user to edit all of the graph data attributes like name, title, tags, description etc.

[bruce-wayne99]

@adbharadwaj I have implemented editing name,title,description functionality. gif of the implementation : I have gone through the tags implementation of github but there are using a new page for displaying all the tags and editing them as shown in the screen shot. Please suggest me regarding implementation of add/remove tags.

[tmmurali]

Thanks. This implementation looks nice.

Is the edit button seen only by the user of the graph?

On Mon, Feb 12, 2018 at 3:46 AM, Subramanyam Makam <notifications@github.com

wrote:

@adbharadwaj https://github.com/adbharadwaj I have implemented editing name,title,description functionality. gif of the implementation : [image: final] https://user-images.githubusercontent.com/25129274/36088891-1e900b70-0fff-11e8-873c-ef7137b244ec.gif I have gone through the tags implementation github but there are using a new page for displaying all the tags and editing them as shown in the screen shot. [image: screenshot from 2018-02-12 14-10-04] https://user-images.githubusercontent.com/25129274/36088898-259f2c5c-0fff-11e8-80ea-7c44dcfc60e9.png Please suggest me regarding implementation of add/remove tags.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Murali-group/GraphSpace/issues/317#issuecomment-364859494, or mute the thread https://github.com/notifications/unsubscribe-auth/AGkWUJ2FVaHVNNTNaS-p6iLkyb6lk9DGks5tT_pdgaJpZM4O6aC1 .

[tmmurali]

Sorry. I meant to say "owner of the graph".

On Mon, Feb 12, 2018 at 10:49 AM, T. M. Murali murali@cs.vt.edu wrote:

Thanks. This implementation looks nice.

Is the edit button seen only by the user of the graph?

On Mon, Feb 12, 2018 at 3:46 AM, Subramanyam Makam < notifications@github.com> wrote:

@adbharadwaj https://github.com/adbharadwaj I have implemented editing name,title,description functionality. gif of the implementation : [image: final] https://user-images.githubusercontent.com/25129274/36088891-1e900b70-0fff-11e8-873c-ef7137b244ec.gif I have gone through the tags implementation github but there are using a new page for displaying all the tags and editing them as shown in the screen shot. [image: screenshot from 2018-02-12 14-10-04] https://user-images.githubusercontent.com/25129274/36088898-259f2c5c-0fff-11e8-80ea-7c44dcfc60e9.png Please suggest me regarding implementation of add/remove tags.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Murali-group/GraphSpace/issues/317#issuecomment-364859494, or mute the thread https://github.com/notifications/unsubscribe-auth/AGkWUJ2FVaHVNNTNaS-p6iLkyb6lk9DGks5tT_pdgaJpZM4O6aC1 .

[bruce-wayne99]

Yes, the edit button will only appear if user-id is same as the owner-id.

[adbharadwaj]

@bruce-wayne99 Looks great. Few more suggestions.

• The edit panel should be spread across the entire width of the screen i.e width 100%, instead of centering them.
• Change color of cancel button to red - you can use danger class in bootstrap
• To edit tags, you refer to Manage Topics feature on GitHub. You can refer to the multiple terms input functionality used on graphspace search page to get ideas on how allow users to input multiple tags for graphs.

Let me know if you have any questions.

[adbharadwaj]

This is how add topics look like on GitHub.

[bruce-wayne99]

@adbharadwaj Sir, @tmmurali Sir,

• I have spread the edit panel 100% across the screen.
• Added red color to cancel button (shown in the gif for editing tags).
• Implemented removing/adding /editing tags in the same way as Manage Topics on github
• GIF of the implementation.
• Please suggest me if any changes required. :) :)

[adbharadwaj]

@bruce-wayne99 A few more suggestions,

• Font size of Manage tags link looks inconsistent with tags font size left to it.
• Arrange the input field and two buttons in such a way that buttons aligned on the right side and field is bigger size s.t there are no awkward big empty area between field and buttons.
• Edit button is too close to export button. distance should be same as with share button.

Basically, use your discretion to come up with a neat UI.

[bruce-wayne99]

@adbharadwaj Sir,

• I have used to bootstrap hyperlink to display Manage tags.
• I have aligned Save and Cancel buttons to the right and spread the input element across the whole edit panel in case of both Add/Remove Tags and Edit Name/Description/Title.
• I have aligned Edit button properly with equal spaces between all the buttons.
• GIF of the impelementation:
• Please suggest me if any changes required. :) :)

[tmmurali]

@bruce-wayne99 @adbharadwaj This implementation looks good. Two points:

1. Having both an "Edit" button and a "Manage tags" button is bound to be confusing. The user will wonder (before clicking "Edit") about what it does. Can we not unite them in one button?

2. Are we changing the database to record these edits? Will other users who can see the graph get a notification of the changes and what the changes are? Is the plan to add new issues to address these must-have functions? In that case, we should create a separate branch for edit functionality, should we not?

[bruce-wayne99]

@adbharadwaj , @tmmurali Sir,

• Yes, there might be confusion for the user. So, I will unite them into one button .
• Yes, I am changing the database to record the edits made but I have not considered regarding sending the notifications.
• I would like to keep a pull request for the work I have done till now so that we can think about further extending it.

[adbharadwaj]

@tmmurali

1. I agree that we should have one edit button.
2. Yes, the notifications will be automatically generated once the notification framework is merged. IN the notification framework, we currently have a wrapper function on update data access layer function which will trigger the notification, irrespective which element on the UI or API triggers the update.

@bruce-wayne99 Do not worry about the notification in this pull request. That will be taken care when we merge the notifications pull request. For now, just unite the edits under one button and let us know.

[bruce-wayne99]

@adbharadwaj, @tmmurali Sir, I have made a pull request for this issue please look at it.