COMP0016 Team 15

Summary of what we have done

Passing on from last month, we have managed to implement all the Must have functionalities. We have also decided on the main theme of the overall website and made significant progress in the CSSing of the web application

The Coding bit

Regarding the functionalities, the new features that we have added is the ability for authorized users to add more users (signup) and to change their own passwords.

We have added the feature of giving feedback to specific models as well, and the feedbacking feature follows the CarefulAI feedback format as agreed with our client. Similarly, we modified the model upload form to incorporate with CarefulAI's model specifications, which once again is agreed with our client.

Feedback API

We also refactored our API and made it more flexible when an error has occured to our backend. When appropriate, the error detail would be displayed in the form of popup messages or just plain messages such that the user is aware of it. The popup message design is shown in the next section.

To ensure unauthorized user would not be able to access any other pages other than the sign in page, we have included the Private Route component, which automatically navigates un-authorized user to the sign in page if the session token stored in local storage is empty i.e. the user is unauthorized.

Private Routing

Private Routing

In addition, we have setup a common context for the session token of authorized user. The useEffect hook continuously monitors the token, and would set the locally stored session token to null if it expired or has been maliciously modified. And relating to the Private Route component, the user would be forced to navigate to the sign page to re-enter the credentials.

This common token context is also used by all other children components to utilize the APIs as most backend endpoints take the session token as parameter to authenticate the API call and would reject if session token is invalid.

User Context

These are the major changes made, we have also done a lot of documentaion and refactoring on the way and extracted re-usable components.

The Visual Bits

The major theme of our application is designed in regard to the MedicApp X website designed by Webflow as shown below with the major theme color of sky blue and secondary color of orangy red, along with the white background which gives a clean and professional interface matching the NHS theme.

We would also like to embed more "medical" elements into our design such as the classic pill icons and below is our current design for our new home page

Each asset on the home page would have the pill shape that is initilised as being light red on the left half and deep red on the other. When user hovers over the pill, in the left side swipes over to and becomes white

We also redesigned the search bar with the options of searching for models or datasets being embedded to the bar rather than having a dropdown box. And we have added a side menu button which is still a work in progress

We have a lot of forms being used in our application, we have decided to use a standard form design for all forms with a big blue container and transparent background buttons as shown below, which we think is a clean and re-usable way of designing them and matches our theme

We also created popup menus to incorporate our changes with the APIs which has a normal mode and a warning mode, each showing different text and button colors

Popups

Normal popup

Warning Popup

We also managed to create a spinner screen mainly used for loading up search results, and for waiting to upload/download datasets and models

Spinner screen

And last but not least, we have completed the design for the user dashboard which shows the models and datasets that are uploaded by the user, and also grants user the ability to delete them as well. We have removed the feature to edit the assets, but instead we attached the button to navigate to the view details page of the assets, which still hasn't yet been styled.

Dashboard

That's about it to this month's update, as we slowly approach to the handover date, we aim to continue improve the styling of the remaining pages including the dataset/model view page and the dashboard. We also aim to add a bit more functionality for improving the navigation experience of users as they use our application. With all the functionalities done, we plan to complete our E2E tests in Cypress.io and some refactoring as well

Looking forward to our next updates blog post!!! 👋👋