Dashboard (Both design and functionality) #471

sayamkanwar · 2018-11-23T21:23:52Z

Hey,
I had claimed the task '[Fabrik] Add backend support for maintaining dashboard for a user' but there was no dashboard in Fabrik presently so I had to design a dashboard first which was another task (https://codein.withgoogle.com/tasks/6415117748011008/). So I have made the deliverables for both the tasks because the former task wasn't possible without completing the latter task.

Work done

I have created a new save button in the canvas sidebar (under Actions), I have created a function saveModel_to_db for that, it saves the model to the database with public_sharing set to false by default. This function first checks the database if the model already exists, it updates the JSON field instead of creating a new entry if the model already exists.

On clicking the save button, if there are no errors. It gives the user a success message.

I have added a button 'Dashboard' in canvas sidebar which takes the user to dashboard. This button is only shown when the user is logged in, also the if someone tries to open dashboard by manually entering the dashboard URL, it redirects the person to home page (i.e. canvas) if the user is not logged in.
The dashboard consists of a button 'Create a new model' and it displays the list of models created by the user with it's name and thumbnail. Each model list item has two options: edit and delete which become visible on hover. Currently the thumbnail is just a sample image as I didn't know how will the actual preview of the model will be rendered as a thumbnail and I was guided by the mentor to just leave it like that for the time being. I have also created the route to dashboard(/dashboard).

[on hover]

[on deleting the model]

[if the user hasn't created any models]

I have modified the existing load_from_db function, now it also returns the public_sharing property of the model which is used by the main canvas to check if a model is shared. If it's shared it adds comments option to it and other shared features. If it's not shared, it acts as an editor for the user.
The current criteria for rendering the Share/History button in the canvas was that if the path is /load so I had to update the criteria, now I'm passing on the value of public_sharing to the topBar component as a prop value and in the topBar component it renders the Share button if value of isShared state is false, else if it's true it renders the History button which shows the history of the model.
To make login system more easy to work with, I have added the piece of code in the login function to set localStorage item 'userID' to the value of the user id, it makes the work a lot more easier as different components can use user id value for different functions. On logout, the localStorage item is destroyed as well.
NOTE: I haven't removed any of the already existing code for the login part, I have just made an addition.
I have added the tests for all the new functions that I have created in tests/unit/caffe_app/test_db.py.

[all tests passed]

Modifications in old features

In the save_to_db function, now it checks if the model exists in the database and updates the json field else it creates a new record in the database. Also, if a model exists in the database with public_sharing set to false. On clicking the share button which triggers the save_to_db function sets the public_sharing of the existing model to true instead of creating a new shared model.

Correction

For the people who are using docker to run Fabrik, they'll have to edit the settings/test.py file because the variables have been set to the values being used in the virtual environment method, I have added the comments in this file for the changes that have to be made for docker, otherwise it will throw an error.

Please review my work @Ram81 @RishabhJain2018, thank you! :)

Ram81

@sayamkanwar Great work, I haven't tested it locally yet. But left some comments related to coding style fixes and some doubts.

Also have you tested whether this works for real time collaboration feature too?
Because due to multiple share button clicks we used to get different ids, have you tested real time collaboration after this change?

Ram81 · 2018-11-24T04:25:07Z

ide/static/js/content.js

@@ -979,6 +980,35 @@ class Content extends React.Component {
    layer.info.phase = 0;
    this.setState({ net });
  }
+  saveModel(){
+  let netData1 = this.state.net;


Please rename this variable

Ram81 · 2018-11-24T04:25:16Z

ide/static/js/content.js

@@ -979,6 +980,35 @@ class Content extends React.Component {
    layer.info.phase = 0;
    this.setState({ net });
  }
+  saveModel(){
+  let netData1 = this.state.net;
+  console.log(netData1);


remove log statements

Ram81 · 2018-11-24T04:26:03Z

ide/static/js/content.js

@@ -1055,7 +1086,7 @@ class Content extends React.Component {
    // Note: this needs to be improved when handling conflict resolution to avoid
    // inconsistent states of model
    let nextLayerId = this.state.nextLayerId;
-
+    var shareBool = false;


rename the variable and use let

Ram81 · 2018-11-24T04:26:39Z

ide/static/js/content.js

@@ -1299,9 +1341,11 @@ class Content extends React.Component {
          <div id="sidebar-scroll" className="col-md-12">
             <h5 className="sidebar-heading">ACTIONS</h5>
             <TopBar
+              isPublic_Sharing={this.state.isShared}


Ram81 · 2018-11-24T04:27:36Z

ide/static/js/dashboard.js

+  }
+};
+
+class Dashboard extends React.Component{


Don't add two different components in same files

Ram81 · 2018-11-24T04:29:20Z

ide/urls.py

 from django.conf.urls import url, include
 from django.contrib import admin
 from django.conf.urls.static import static
 from django.conf import settings
 from views import index, calculate_parameter, fetch_layer_shape
-from views import load_from_db, save_to_db, fetch_model_history
+from views import load_from_db, loadModel_from_db, deleteModel_from_db, save_to_db, saveModel_to_db, fetch_model_history


please follow naming conventions for method names

Ram81 · 2018-11-24T04:30:09Z

ide/views.py


+        if Network.objects.filter(name=net_name).exists():


net_nam is not the primary key, please use mode id as the key to filter

How will I check using model id? If a person is creating a new model with the same model name then only I can run a query right?

Basically, in this method I'm taking the net name from the POST request to filter from database because that's the only parameter that can be used to do this as this would be the only similarity amongst the already existing records and new models. So I can't really use model id to filter out results.

Ram81 · 2018-11-24T04:30:41Z

ide/views.py

+@csrf_exempt
+def loadModel_from_db(request):
+    if request.method == 'POST':
+        if 'userID' in request.POST:


Please follow naming conventions

Ram81 · 2018-11-24T04:31:22Z

ide/views.py

+
+
+@csrf_exempt
+def saveModel_to_db(request):


Why do we need to save model to db methods?

We need a save model to db method as the save to db function saves the model in the database with sharing properties and I tried to combine the two but it wasn’t working because they both work differently

The save button triggers this function

sayamkanwar · 2018-11-24T07:21:32Z

Hi @Ram81,
Thanks a lot for such a precise review! For the share button, it cannot generate multiple ids anymore because as I stated that I have updated the save to db method now it checks for already existing models. So it gives the same ID every time. Here is a demo.

I’ll make the rest of the changes which you have mentioned as soon as possible.
Thank you! :)

sayamkanwar · 2018-11-24T09:53:59Z

@Ram81, I have made all the changes except 2, I have replied so as to why I can't make those changes, please read those and let me know what should be done.
Thank you!

Ram81

@sayamkanwar did you also tested it for real time collaboration feature and please verify if there is any corner case you missed.

Ram81 · 2018-11-24T18:49:33Z

ide/static/js/content.js

@@ -979,6 +980,34 @@ class Content extends React.Component {
    layer.info.phase = 0;
    this.setState({ net });
  }
+  saveModel(){


As far as I understand this method performs update on already existing model so please rename it to update model

This method doesn’t update on already existing model, it saves the model data on clicking the save button but if the model already exists in the database then it updates the model.

So if you are doing this then why do we have older method still present?
Why can't your remove that or add the code in same method?

I can’t remover the older method as there is a difference between the 2 methods the older one is saving the model with shared properties while the new method is saving the model with not shared properties, if you still want me to combine the two, I’ll try to do it.

Ram81 · 2018-11-24T18:50:25Z

ide/static/js/content.js

@@ -1072,6 +1101,13 @@ class Content extends React.Component {
          // while loading a model ensure paramete intialisation
          // for UI show/hide is not executed, it leads to inconsistent
          // data which cannot be used further
+          if (response.public_sharing == false) {
+            is_shared = false;


If you are not changing value before this step then why do you have to set it to false again as the default value is already false

Okay, I’ll make the change, thanks for pointing out!

Ram81 · 2018-11-24T18:51:01Z

ide/static/js/content.js

              exportNet={this.exportNet}
              importNet={this.importNet}
              saveDb={this.saveDb}
+              saveModel={this.saveModel}


Change the method name to update model (if I understand the functionality correctly

I have explained this function above, please have a look at it, it’s not just updating the already existing model, it updates the model only if it already exists else it saves the model.

Ram81 · 2018-11-24T18:52:30Z

ide/static/js/content.js

@@ -1299,9 +1339,11 @@ class Content extends React.Component {
          <div id="sidebar-scroll" className="col-md-12">
             <h5 className="sidebar-heading">ACTIONS</h5>
             <TopBar
+              isPublicSharing={this.state.isShared}


There is one flag variable in state of content.js where I maintain the type of model as isShared or not, can't we use that here because defining a new one causes necessity to maintain consistency in both. If not possible then please rename this variable name in props

I haven’t defined this, this was already in the existing code. isShared is the flag variable which is there in content.js file right?

I didn’t exactly understand, could you please elaborate?

There is one boolean flag in content.js state variable if you are passing it down as props use the same name and don't define new ones if possible

Ram81 · 2018-11-24T18:53:23Z

ide/templates/index.html

@@ -26,7 +26,7 @@
  </script>

 </head>
-<body>
+<body style="background: #F3F5F7;">


don't add style tags here maintain them in css

Ram81 · 2018-11-24T18:53:50Z

ide/urls.py

+        name='calculate-parameter'),
+    url(r'^layer_parameter/', fetch_layer_shape,
+        name='fetch-layer-shape'),
+    ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \


Fix alignment

This was according to the PEP8. It gives an error otherwise.

sayamkanwar · 2018-11-24T19:09:15Z

@Ram81, what exactly do you mean by testing it for real time collaboration feature? I have already mentioned the load page is working fine for shared models. If that’s what you are asking?

sayamkanwar · 2018-11-25T11:46:42Z

@Ram81, please have a look at the replies and let me know what shall be done further.
Thank you! :)

Ram81 · 2018-11-26T16:00:45Z

@sayamkanwar I meant did you try making updates in real time collaboration mode and see the changes getting reflected in corresponding tabs.

Ram81

@sayamkanwar can you reduce the radius of rounded corners of cards

sayamkanwar · 2018-11-26T18:55:57Z

Sure, I’ll make the changes!
Thank you

sayamkanwar · 2018-11-26T22:00:27Z

Hi @Ram81,
I have done everything that you had asked for.

Reduced the border radius of the cards

Changed the name of the variable isPublicSharing to isShared.
Combined both the save methods into a general save method.
Made the dashboard and logout button adjacent to each other.

Tested the real time collaboration feature after the changes

Let me know if you need anymore changes.
Thank you! :)

Ram81 · 2018-11-27T05:32:49Z

@sayamkanwar please reopen the PR on user-dashboard branch, we'll have to test this thoroughly and release it when login, signup and homepage are ready

Ram81 · 2018-11-27T10:25:30Z

Duplicate of #477

sayamkanwar added 19 commits November 24, 2018 01:19

Update content.js

0e4988e

Update views.py

ebac6b1

Update urls.py

d10486c

Create dashboard.js

5ffc512

Create dash_style.css

2cd218c

Update index.html

c7dfbce

Update login.js

288a67c

Update topBar.js

feaa07b

Create dashbutton.js

27f3823

Update index.js

0bf3a0c

Update test_db.py

c48605f

Update test.py

80194bc

Update test.py

63d934d

Update test.py

f8499c1

Update test.py

37df28c

Update urls.py

8706c6c

Update views.py

6c28f76

Update views.py

c81f450

Update test_db.py

41c6afd

Ram81 requested changes Nov 24, 2018

View reviewed changes

sayamkanwar added 9 commits November 24, 2018 14:47

Update content.js

0a5a94e

Update content.js

216807a

Update topBar.js

46b1e09

Create card.js

422e886

Update dashboard.js

5b9405a

Update views.py

28e6c66

Update urls.py

08b4090

Update views.py

640a9d3

Update views.py

10d1bfa

Ram81 requested changes Nov 24, 2018

View reviewed changes

sayamkanwar added 2 commits November 25, 2018 02:25

Update index.html

7a88df1

Update searchbar_style.css

8aaeda7

Update content.js

b239062

Ram81 requested changes Nov 26, 2018

View reviewed changes

sayamkanwar added 8 commits November 27, 2018 03:17

Update views.py

815402a

Update content.js

ef40924

Update topBar.js

dc03332

Update card.js

2da10bb

Update dash_style.css

74d8b3a

Update login_style.css

0387266

Update login.js

3de7f30

Update dashbutton.js

9df8d9d

sayamkanwar mentioned this pull request Nov 27, 2018

Dashboard #477

Open

Ram81 marked this as a duplicate of #477 Nov 27, 2018

Ram81 closed this Nov 27, 2018



		@csrf_exempt
		def saveModel_to_db(request):

Dashboard (Both design and functionality) #471

Dashboard (Both design and functionality) #471

Conversation

sayamkanwar commented Nov 23, 2018 • edited Loading

Work done

Modifications in old features

Correction

Ram81 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sayamkanwar Nov 24, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sayamkanwar commented Nov 24, 2018 • edited Loading

sayamkanwar commented Nov 24, 2018

Ram81 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sayamkanwar Nov 24, 2018 • edited Loading

Choose a reason for hiding this comment

sayamkanwar commented Nov 24, 2018

sayamkanwar commented Nov 25, 2018

Ram81 commented Nov 26, 2018

Ram81 left a comment

Choose a reason for hiding this comment

sayamkanwar commented Nov 26, 2018

sayamkanwar commented Nov 26, 2018

Ram81 commented Nov 27, 2018

Ram81 commented Nov 27, 2018

sayamkanwar commented Nov 23, 2018 •

edited

Loading

Ram81 left a comment •

edited

Loading

sayamkanwar Nov 24, 2018 •

edited

Loading

sayamkanwar commented Nov 24, 2018 •

edited

Loading

sayamkanwar Nov 24, 2018 •

edited

Loading