Frontend models

Frontend Dataflow

The Activity Diagram

Illustrates the flow and communication between different frontend files. After React starts we call the view we want depending on what the card should show. We then set the initial state to loading, fetch the desired data and change the state depending on if the data was fetched successfully or not. If an error occurred, we should get a message displaying the error. If data was fetched succesfully, we use the existing "Card" to display the data with the correct layout.

Sequence diagram

This shows how data is transfererad from a view call in the app until its rendered. First the app calls the view for a render. Then the View needs to call both Hook (API) for data and Card to render the frame. When the View have received both the data and the rendered frame it can return a complete rendered View to the app.

Missing

In the future there might be a logic layer to give a uniform view of the different type of cards like text,picture and graph. This would also be called from the view.

Original issue: #135, subject to change

Webpage Container Structure

The model shows which containers exist within which to give the frontpage its structure.