Frontend Progress Update (Jan 2022)
Summary of What we have done
This month is mainly focusing on learning about relevent tools for frontend development. Regarding the functionalities, the frontend now supports user to login and to search and upload datasets and similarly for models. User would also be able to view information about the uploaded assets by clicking on the corresponding links on Home page
Managing Home State
The Home component is a complex one as it involves the functionality to search, functionality to lay out assets and the functionality to change type of assets to search for. To cope with this complex component and to manage stateful logic in a more elegant manner, we have designed our own hook for managing the Home state whenenver user changes the search type or entered some search term
Use Search:
You would have notices that I have also used a context provider UserContext, the purpose of this is to provide common context to the session token for all components, of which is used to authenticate the API calls
The UserContext provider is still a work in progress, which hopefully would be done by the next progress update
How our frontend looks
Home Page:
Search Demo:
User would be able to select to search for models or datasets by selecting on the dropdown box
View Details and download:
Dashboard:
Its main purpose is to manage the assets that are uploaded by the user, user would be able to delete the uploaded assets, or edit information (such as description) of the assets
Upload:
Currently the frontend is only laying out all the information that is retrived from the backend with some structuring.
Connecting with backend
Other than the basic structure of our webapp, we have also managed to connect our React.js frontend with the FastAPI and PostgreSQL backend. A more detailed progress update on the backend would be in another post, here we would just focus on the frontend and the custom frontend APIs that invokes the FastAPI endpoints.
When user submits their credentials at login, it would be sent to the backend as x-www-form-urlencoded content, and if the credentials match, then a unique session token would be returned.
This token would be used for all frontend requests including uploading, downloading and viewing datasets/models, and is attached as the request header.
To download the dataset/model, one would require to restrict the type of the response as a Blob, and as the React frontend uses this API, it would invoke the file saving function from the file-saver library to save the Blob data.
For the search functionality, although it might be a slight violation of the MVC structure, we have made it such that the filtering process of the end results is done by the frontend. Though we will definitely revise this method to fit for more complex situations in the future.
The custom API for getting datasets to be displayed on home page and for uploading datasets are as follow, similar APIs were written for classification models
Whenever the fetchDatasets/fetchModels API is called, the retrieved content would be cached in localStorage, which leads the final functionality for viewing details of the selected dataset/model. This is achieved by retrieving the selected model from local storage by its index, and its content is then parsed and displayed
Future Work
We now plan to complete the final Must Have functionalty regarding to our MosCow chart, which is the functionality to download the assets, creating feedback and to create/signup new users. We plan to continue learning about CSS and starting fleshing out the frontend with our agreed visual designs. Another part to work on would be to work on our Unit tests and our E2E tests.
Still go loads of stuff to work on, how exciting!!! 🤸♀️🤸♂️🤸♀️🤸♂️