Building a database backed website

cr1607 · November 8, 2023, 8:28pm

Thank you very much! I appreciate the help. I will keep you posted as I make more changes to the website. Once the webpage is completely functional, I can work on the design elements.

For instance, I was thinking of converting this webpage into a website where everything is not displayed on the same page (like BMEX). For instance, on the welcome page you just have place for inputs and a picture of chart of nuclides. Once the user puts in the inputs, the website takes it to another page to display the results.

cr1607 · November 13, 2023, 10:33pm

I have got the download button to work. Now the webpage is downloading the data frame as a CSV file. However, I am not able to set the name of the download file to my preferred naming scheme. I am thinking of saving the CSV files in the following format: name = "NLD" + "_" + str(A) + "_" + str(Z) + author + ".csv"

However, the dcc.send_data_frame() function seems to not recognize the name variable and the datafile is being downloaded as example.com. I have searched over the web but nobody has felt the need to discuss this issue. I would appreciate your inputs in this regard.

cr1607 · November 28, 2023, 10:39pm

Hi @Kyle and @landonbuskirk,

I was just following up on my previous message. I would appreciate your comments on it.

landonbuskirk · November 29, 2023, 4:59am

Apologies for the late response. How I had my settings, I don’t get notified unless you tag me, so thanks for doing so. If I understand your issue, all you need to do is use a second positional argument as your name. In the download component documentation, it includes the following code:

@callback(
Output(“download-dataframe-csv”, “data”),
Input(“btn_csv”, “n_clicks”),
prevent_initial_call=True,
)
def func(n_clicks):
return dcc.send_data_frame(df.to_csv, “mydf.csv”)

In the send_data_frame function, it looks like the first argument is the csv, and the second argument is a string for the file name. Let me know if this works.

cr1607 · November 29, 2023, 6:01pm

Hi @landonbuskirk

No worries. I will tag you from now on. Yes, I read the documentation before and tried to set a custom name outside the dcc_send_data_frame() function like,

@callback(
    Output("download-dataframe-csv", "data"),
    Input("btn_csv", "n_clicks"),
    [State('mass-number','value'),
    State('proton-number','value'),
    State(component_id='data_log_table',component_property='selected_rows'),
    State(component_id='index',component_property='value')],
    prevent_initial_call=True,
)
def func(n_clicks,A,Z,selected_rows,i):
    df = selected_log_book(selected_rows,i,A,Z)[0]
    df = pd.DataFrame.from_dict(df)
    author = str(df_NLD['Author'][(df_NLD['A'] == A) & (df_NLD['Z'] == Z) & (df_NLD['ID'] == i)])
    name = "NLD" + '_' + str(A) + '_' + str(Z) + '_' + author + ".csv"
    return dcc.send_data_frame(df.to_csv,filename=name)

However, when I try to download a particular NLD file, it downloads it as example.com. It is as if it is ignoring the custom file name and I was thinking that maybe the dcc_send_data_frame() function does not recognize anything declared outside it. I searched about it but couldn’t find any concrete answers.

I could just name the downloaded file NLD.csv every time a user downloads it but since I want to make it user friendly, I would like to give a custom name to each downloaded file. I am not able to do that and that is my issue.

cr1607 · November 29, 2023, 6:03pm

Just to add, df_NLD is the main data frame that I have defined in the beginning of my code, outside all functions:

df_NLD = pd.read_csv('Arranged_data.csv',header=0)

landonbuskirk · November 30, 2023, 12:02am

What I meant was to simply change your line

return dcc.send_data_frame(df.to_csv,filename=name)

to

return dcc.send_data_frame(df.to_csv, name)

cr1607 · November 30, 2023, 3:55am

@landonbuskirk I believe I had tried that before. Let me give it another shot and I will let you know how it goes. Thank you!

cr1607 · December 1, 2023, 9:42pm

Hi @landonbuskirk ,

Just wanted to let you know I solved the issue. So, when I printed the variable, name, in the terminal, it was not printing it as a string. It was printing that variable as a data frame instance. Anyways, I fixed that and now it is downloading with the custom file name!

landonbuskirk · December 1, 2023, 10:03pm

Ah, I see. I’ve had my fair share of errors from trying to cast subsets of data frames as single values. I assume this was your issue with the author variable, so always use a method like .values()[0] or .at() when handling this case. Great to hear it’s working!

cr1607 · December 6, 2023, 4:06pm

Hi @kyle and @landonbuskirk,

I am now starting to tweak my website and I would like to change some things in it.

Right now if I open the website, it looks like the attached screenshot. It is very bare-bones right now. Once the user enters the Z and A of a nuclei, the website shows all the available data sets with their unique ID and the associated information. Then the user chooses which dataset they would like to view by selecting the ID of that dataset. I would like to display the option of ID after they enter the Z and A and I would like to display the option to graph after they choose an ID. So, is there a way to delay these callbacks?

The way this website is set up, it displays everything at once (like in the screenshot). Once that is done, I will look into CSS styles to design my website.

landonbuskirk · December 6, 2023, 5:24pm

Thanks for reaching out! It may help to know your current callback structure, but I’ll assume you have a main callback that takes the three dropdowns as input and outputs the graph. In this case, I would add two additional outputs: the display properties of a parent div to the id dropdown and the graph. With some simple conditionals, you can return “hidden” or “block” for the divs’ displays, and hide and show the component based on whether A and Z or A and Z and ID have values. You can take this a step further and change the classname (which can alter all of the CSS styling of a component) as mentioned at Hide certain components on click - Dash Python - Plotly Community Forum.

cr1607 · December 8, 2023, 3:52pm

Hi @landonbuskirk
Thanks for the helpful pointer. I am reading into it.

I had a general question about the operation of CodeSpaces. Sometimes when I am using CodeSpaces, it freezes and doesn’t respond to any commands. On many occasions I have had to close the tab or force quit the web browser which is not a healthy practice. Has this ever happened with you? If yes, were you able to solve this issue? Please let me know.

kyle · December 19, 2023, 6:13pm

I’ve never had that happen, but it could be because the codespaces are not very powerful and it could be overwhelmed by what’s running in the codespace. If you can setup a local environment to test on your own computer you can see if indeed you have some performance issues with the website.

Sorry I have been absent by the way, I was in Japan for about a month

cr1607 · July 16, 2024, 11:00am

Hi @Kyle and @landonbuskirk

It’s been a while since we have talked and I have hit a road block. Right now I have set up my website such that it displays 4 subplots and fits it to the constant temperature model. Now I am trying to place sliders for the x-axis that will set the minimum and maximum values of energies used in the fitting. The purpose of this move is to make the website more interactive to draw-in users.

However, when I am adding in the sliders, it is placing them at the bottom of the webpage which makes it very difficult for the user to change the range and simultaneously see the effects. I want to place those sliders such that they are placed just below each plot (and not at the bottom of the page). There are a couple of options:

I could replace the 4 subplots with 4 plots and attach sliders to each plot. However, this will make the webpage very rigid (as I will not be able to display more than 4 plots).
I find some way to place sliders below each subplot. However, I have been unsuccessful at doing that.

I would appreciate it if I could get your help and opinions on this matter.

cr1607 · July 22, 2024, 5:19pm

Hi @Kyle and @landonbuskirk

I was just following up on my previous message. I would appreciate if I could get some help from you.

kyle · July 23, 2024, 3:06pm

Ah, I guess it’s adding them as separate elements. The subplots you’re using now are subplots within plotly? If so, then they might be hard to edit much.

Can you take a look at bmex-masses to see how we manage multiple plots? We have a way to add plots one at a time and they get added to their own little div. I think we manage it using some custom CSS styling, but that’s probably to best way to do it. You can:

have a button to add new plots
plots use a specific styling in the CSS and get their own div
You can then add plot specific things to that div below the figure, like sliders and buttons

cr1607 · August 1, 2024, 3:54pm

Hi @kyle

Thank you so much for your help! Over the last week, I have made exponential progress on the website. I have shown my product to my advisor and to a few other people and I have received very positive feedback about it. Yesterday, we (me and my advisor) were discussing about publishing the website soon and I feel we have reached that stage.

So, I wanted to discuss the options for publishing this website. I remember we chatted about this very briefly in one of our previous meetings and I would like to talk about it more now. Could we please set up a meeting? I could also give you a rundown of my website and what I have done with it. I will be looking forward to your response!

cr1607 · August 6, 2024, 2:33pm

Hi @kyle

I was just following up on my previous message. Please let me know if you would be available for a meeting.