search

broadinstitute / genetic-prevalence-estimator

https://genie.broadinstitute.org/
BSD 3-Clause "New" or "Revised" License
1 stars 0 forks source link

Create Dashboard with Mock Data #148

Closed rileyhgrant closed 5 months ago

rileyhgrant commented 1 year ago

As part of implementing the Dashboard per Sam's specifications and requirements, a visually accurate and functional Frontend component is neccessary.

This is as good a place as any to start.

The frontend directory holds all the frontend code, this is written with TypeScript, React, and ChakraUI, amongst other things. By using temporary, unchanging, data stored in a JSON file locally on the frontend, the Dashboard component can be developed mostly in isolation from the other required parts (API and Database changes)

  1. Create a feature branch off of the main branch, e.g. git checkout -b jl/add-frontend-dashboard
  2. Ensure you're on the feature branch: git branch -v
  3. In frontend/src/components create a new directory called DashboardPage. This will hold all the components and code used for the Dashboard page, in the same way that UsersPage, or VariantListPage have their own directory
  4. In the new DashboardPage directory, create a file called DashboardPage.tsx. This will store much of the code for the DashboardPage a. Consider referencing SystemStatusPage.tsx or another such file in creating this initially
  5. Add a route (perhaps "/dashboard") so that you can navigate to the page you're developing. a. Routes are created in frontend/src/App.tsx, towards the bottom of the file.
  6. Use docker compose up to start all services locally
  7. Navigate to your new route - http://localhost:3000/dashboard - so that you can see how it looks
  8. Create a temporary_data.json file to be used to populate data in the Dashboard component
  9. Using React and Chakra, and Sam's mockup, start on implementing the Dashboard component.
  10. Message me (Riley) at any point to have a message or zoom call for help if/when you need it.

Okay, @josephinelee1234, I think this is an OK starting point, but at the end it may have some big 'draw the rest of the owl' (google it if you're curious) energy. Depending on how familiar you feel with this stack, it may be worth it to plan on having a pair programming session at some point when we both have time, I've found those can be very helpful!

rileyhgrant commented 1 year ago

Hiya @josephinelee1234

I'm realizing now that it may be more useful for me to do some of the boilerplate stuff (routing, adding temporary dummy data, add a basic boilerplate react component) in a branch that you can check out, so that you can focus primarily on developing the React component.

Let's plan on discussing and forming a plan on how to go about this, and have you practice/review the Feature Branch workflow with the README.md issue (#147).