Last week, we were able to create the page that can connect to the server, call and retrieve data from DBT models and postgreSQL database, and display all three graphs. This week, we are focusing on adding sliders, dropdown menus, and input boxes to allow users to choose different regions, use different paarameters for calculation, and show the corresponding plots dynamically. To do so, we first created a dictionary that contains all necessary parameters we need for the sliders and dropdown menus, and created a function to update the dictionary whenever there is a change in the sliders or the dropdown menus. Then we added an updated_variable route to allow us to pass the new parameters to the database and execute the change. We used some Svelte components from the Zambia app and changed some parameters. These components are reusable, and if someone want to use it, all they need to do is to pass some variables in it, and it will create the components automatically. We also created two functions. One called clearSVG, and the other one is called createSVG. For D3, when we change the data and re-draw the graph, it will not automatically clear the previous data. Instead, we need to write a clearSVG function, and call it each time when we make any change. Same for createSVG, we need to call it after we call the clearSVG function.

After we created these functions and implemented the components, we started to test our app. However, it worked correctly sometimes while sometimes d3.json function will return a 500 internal server error. We thought that we did something wrong with fetching the data from the database through d3.json, so we tried different async/await functions, and then manually pause the code for 10 seconds and then continue process by using setTimeout. However, these methods did not solve the problem. We spent 2 days tried to solve the issue. In the end, we found out that the problem is actually related to the parameters we passed back to the database. The default setting sets the parameter to be the largest possible year as the current year; however, in our calculation, we used the current year and the following year, which creates an error in calculation, and causes the 500 error. We then modified the default parameter, and set the limit that they cannot choose the largest year, and then everything worked perfectly.