Dashboard (Both design and functionality)

[sayamkanwar]

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

1. 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.

2. 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.

3. 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]

4. 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.

5. 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.

6. 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.

7. 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! :)

[sayamkanwar]

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]

@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!

[sayamkanwar]

@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]

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

[Ram81]

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

[sayamkanwar]

Sure, I’ll make the changes! Thank you

[sayamkanwar]

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

1. Reduced the border radius of the cards

   

2. Changed the name of the variable isPublicSharing to isShared.

3. Combined both the save methods into a general save method.

4. Made the dashboard and logout button adjacent to each other.

   

5. Tested the real time collaboration feature after the changes

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

[Ram81]

@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]

Duplicate of #477