search

InformaticsMatters / squonk2-data-manager-ui

Web UI for the Squonk Data Manager
data-manager-ui.vercel.app
Apache License 2.0
2 stars 0 forks source link

User settings page #198

Closed tdudgeon closed 2 years ago

tdudgeon commented 3 years ago

Exact details still need to be defined, but in brief:

  1. Add a link to the user popup in the top right corner that takes you to a modal 'User Settings' page (a 'Messages' page will also follow in the future)
  2. Add info and settings to that modal page. This will contain things like the users projects, usage stats etc. Exact details to follow.
OliverDudgeon commented 3 years ago

Should be possible to implement the modal with the general ModalWrapper component. See the return of the FileUpload component for an example.

tdudgeon commented 2 years ago

I think we're ready to do some initial work on this.

  1. Allow to open a modal "Settings" page from the user drop down.
  2. Move the "Dark mode" toggle to that model
  3. Add a mock-up for the projects stats info as a second section to that modal.

The project stats will list all the projects you own. It will look a bit like this (sorry for the ascii art!):

Project name        Usage           Tier            Used / Quota    Used / Quota
Test project        RRRRRROOOOOOGGGGGGGG    Evaluation  0.03 / 0.10 297 /1,000
New project     RRROOOOOOOGGGGGGGGGG    Evaluation  0.07 / 0.10 57 / 1,000
Mpro screening      RRRRRRRROOOOGGGGGGGG    Bronze      4.65 / 10.00    3,456 / 10,000
Important project   RRRRRRRRRRRRRRRRRRRR    Silver      15.52 / 35.00   42,125 / 35,000

Dataset storage Usage                       Used / Quota
            RRRRRROOOOOOGGGGGGGG            1.3 / 4.51

The usage column should contain a bar chart indicating the different sections in different colours. This data will come from a different API service which can be found here: https://squonk.informaticsmatters.org/account-server-api/api/ Currently there is no authentication. That will change. Currently the data returned is mock data that does not reflect your current projects but does provide something to work with. That will also change. The endpoint to use to get some data is https://squonk.informaticsmatters.org/account-server-api/product

For the bar chart we have used plotly for charts up to now so let's use that unless there is a good reason for something else.

Initially don't worry too much about the details. We should just start by getting something basic displaying and then work on the fine details.

We can go over this and discuss in more detail when we next meet.

OliverDudgeon commented 2 years ago

Plotly has a react library, https://plotly.com/javascript/react/. A fair amount of customisation might be needed to get what we want here.

tdudgeon commented 2 years ago

Note that the bar chart for the current project you are working in should also be displayed in the main header so that the user gets an overview of the current project's usage. They may not be the owner of the project so would not see it listed in the settings page.

OliverDudgeon commented 2 years ago

We don't have a generated client for the new api yet. This will take me some time which I don't really have at the moment. I suggest we just write react query hooks where needed for now.