Man thanks to you that I have added another dimension to my career on data science, i.e., quick frontend development as well. In previous org, I was the key contributor in introducing dash free of cost. And now I have had the opportunity to demonstrate my analysis output to numerous clients across the globe. I wish I could interact with you over email about the integration of genai multimodal system with dash, I've been doing over past year.
Hi @avisankhadutta4053 I'd love to see the genai multimodal system with Dash you built. Feel free to email me at adam@charming-data.com. I'm on vacation next week but I'll try to respond as soon as possible.
ohh - just got to the part where you were going to show me how to use the progress bar without all the redis stuff! Love these videos, find them one of best dash resources out there. Am struggling to find easy just dash example of how to just update progress from within a function that's actually doing the work. Feel like might be a hacky way using globals that would be fine for my app.
@@CharmingData Empecé hace tres semanas pero ya siento que lo domino! jajaja sin embargo ya sabía programar, ya que estoy estudiando ingeniería en sistemas. Tenía experiencia previa con Plotly pero no sabía nada de Dash, así que los videos introductorios, el de callback, de instalación en el entorno virtual de Anaconda y deployment to Heroku fueron de muchísima ayuda
what if someone want to output results other than graphs like list or dict? Can we put that in same way inside spinner/loading component? However I tried and it isn't showing me the results.
Hi @its_me. It should be possible. As long as you put the component inside the spinner, it should work. However, if the result/component loads very quickly, the spinner might not have the time to appear
@@CharmingData it is not working. here is the issue i put up in community community.plotly.com/t/how-to-output-results-in-dash-bootstrap-toast-component/48852
Hey Everyone, make sure to differentiate between Dash Loading spinners and Dash Bootstrap spinners. They use different keyword arguments. And don't forget the supporting document drive.google.com/file/d/1ciGVkkqgJ7b_riXUP6E_aOrjiZ0kTWPT/view Enjoy the tutorial 👍
Hi and thanks for the video! I have a callback that has as input a button, has different states as well and has two outputs, a figure and a dataframe.to_json. When I am putting a spinner on the figure as you showed and clicking the button, the figure is updated but the spinner never appears. Any ideas why that could be happening? Thanks in advance!
Great video thanks a lot :) I'm new to dash and i wanted to ask, is it possible when i have a dcc.Loading to hold the old figure while loading the next one after clicking the button, so instead of showing the spinner and its animation, the previous figure should be kept in place until the next one is shown. I hope I explained the problem well Thanks in advance
@@CharmingData Not really, but I'm not a front-end expert either. Following Dash documentation is sometimes annoying, so your videos work like a charm!
Brilliant tutorial indeed. I tried dcc.Loading with dash_table.DataTable but it doesn't seem to work, any idea? the table takes a few seconds to load so i wanted to wrap it inside dcc.Loading.
Super useful video! Thanks a lot for the great content! I was wondering if it is possible to set up the dbc.spinner or dcc.Loading to run the animation only once at the beginning of the dash initialization to avoid the 'awkward silence' that happens at the beginning so to speak as figures are being generated. I have figures that update their content every 10 minutes, so having a spinner pop up every 10 minutes would be very annoying. This seems to be a common problem for some people online as well. Thank you very much in advance!!
Hi Nawal El Boghdady, that is indeed a common problem. I am not aware of any solution around that. If you find a solution, can you please share with all of us here on TH-cam comments. Thank you.
Hi Nawal! Myself in the Spinner component I have added only the features that I need to load once. Then I defined an html.Div component with children the Spinner and I set its style equal to: style={'display':'block'}. In the first callback I returned the style of the html.Div component equal to: style={'display':'none'}. I hope this helps! :) Michaela
@@allanmathews2093 When I tried doing that, it didn't work for me. But I think it's possible. I might have missed something. But to save yourself a headache, why don't you use the Bootstrap spinner? dash-bootstrap-components.opensource.faculty.ai/docs/components/spinner/
@@allanmathews2093 I have tried this and it works, but not sure if you'll run into any performance issues or if it is a recommended way for coding in the first place. Nevertheless, I just went with it and it seems to be working fine for me so far: layout_var = [dbc.Row([dbc.Col(...)...]), dbc.Row(...)] app.layout = dbc.Container([ dcc.Loading( layout_var, color='#fde725', type="dot", fullscreen=False ), ... ]) where 'layout_var' is an array containing all your dbc.Rows and Cols. In fact, I wrapped my entire layout (except the title) in that dcc.Loading function
@@CharmingData When I wrote the comment, it was just an idea but after reading your reply I gave it a try and it worked! I used a bit of CSS to set the GIF image to the background and voilà. 😊
@@lukaskaspras7737 Hey Lukas, Sorry, we signed an NDA! We can't share the whole code but I can send you some snippets to get you started. TH-cam doesn't allow us to put links in comments, how do you want me to reach you out?
@@stoufa Wow, thanks for replying that fast - TH-cam has repeatedly deleted/not accepted my previous comments where I posted an e-mail. Could you contact me via LinkedIn or open an issue on any of my public Github Repos? On both platforms, you can find me under Lukas Kaspras!
Man thanks to you that I have added another dimension to my career on data science, i.e., quick frontend development as well. In previous org, I was the key contributor in introducing dash free of cost. And now I have had the opportunity to demonstrate my analysis output to numerous clients across the globe. I wish I could interact with you over email about the integration of genai multimodal system with dash, I've been doing over past year.
Hi @avisankhadutta4053 I'd love to see the genai multimodal system with Dash you built. Feel free to email me at adam@charming-data.com.
I'm on vacation next week but I'll try to respond as soon as possible.
18:47 Most important part, how to use the loading component.
Put the dcc.Graph() *inside* the dcc.Loading() component.
Thanks Charming Data! Kudos!
One stop channel for Dash developers!!
Thank you Aditya.
ohh - just got to the part where you were going to show me how to use the progress bar without all the redis stuff! Love these videos, find them one of best dash resources out there. Am struggling to find easy just dash example of how to just update progress from within a function that's actually doing the work. Feel like might be a hacky way using globals that would be fine for my app.
Thanks Andrew. I'm glad you like it. Yes, using global might work. The progress bar is indeed much more complicated than I would like 😁
Great! I wish you the best. You are making very didactic and high quality content. Greetings from Argentina :)
Saludos Agustín. Hay un video que te gusta en particular? Cuándo empezaste con Dash?
@@CharmingData Empecé hace tres semanas pero ya siento que lo domino! jajaja sin embargo ya sabía programar, ya que estoy estudiando ingeniería en sistemas.
Tenía experiencia previa con Plotly pero no sabía nada de Dash, así que los videos introductorios, el de callback, de instalación en el entorno virtual de Anaconda y deployment to Heroku fueron de muchísima ayuda
@@agustindangelo1412 qué bien! Me avisas si necesitas ayuda con algo. Y suerte con tus apps 🙅🏽
@@CharmingData Por supuesto te mencionaré cuando lance alguna! I'm } still on "for my mother"s apps hahaha
Is there a way to do this while my api endpoint fetches data? Showing progress bar with the remaining time from api would also be helpful
Thank you, your dash videos are always helpful :-)
Nice video as always
what if someone want to output results other than graphs like list or dict? Can we put that in same way inside spinner/loading component? However I tried and it isn't showing me the results.
Hi @its_me. It should be possible. As long as you put the component inside the spinner, it should work. However, if the result/component loads very quickly, the spinner might not have the time to appear
@@CharmingData it is not working. here is the issue i put up in community community.plotly.com/t/how-to-output-results-in-dash-bootstrap-toast-component/48852
@@its_me7363 I'm sorry @its_me. I'm away from my computer. When I get a chance, I'll try to take a look at your Plotly post.
@@CharmingData I am hoping you could help me now...if u r free🙏
@@its_me7363 hi, I'm on vacation for a week away from my computer. Remind me next week and I'll try to help.
Hey Everyone, make sure to differentiate between Dash Loading spinners and Dash Bootstrap spinners. They use different keyword arguments. And don't forget the supporting document drive.google.com/file/d/1ciGVkkqgJ7b_riXUP6E_aOrjiZ0kTWPT/view Enjoy the tutorial 👍
Hi and thanks for the video!
I have a callback that has as input a button, has different states as well and has two outputs, a figure and a dataframe.to_json. When I am putting a spinner on the figure as you showed and clicking the button, the figure is updated but the spinner never appears. Any ideas why that could be happening? Thanks in advance!
I'm sorry Constantino's. It's hard to say without seeing and running the code on my computer
@@CharmingData I'll try to create an example and send it to you! Thanks again
Great video thanks a lot :)
I'm new to dash and i wanted to ask, is it possible when i have a dcc.Loading to hold the old figure while loading the next one after clicking the button, so instead of showing the spinner and its animation, the previous figure should be kept in place until the next one is shown. I hope I explained the problem well
Thanks in advance
Hi Karim, I don't think that's possible yet
This is great. Thank you!
You're welcome Melissa. Are you new to Dash?
@@CharmingData Not really, but I'm not a front-end expert either. Following Dash documentation is sometimes annoying, so your videos work like a charm!
Brilliant tutorial indeed. I tried dcc.Loading with dash_table.DataTable but it doesn't seem to work, any idea? the table takes a few seconds to load so i wanted to wrap it inside dcc.Loading.
same issue
Awesome!!
Super useful video! Thanks a lot for the great content! I was wondering if it is possible to set up the dbc.spinner or dcc.Loading to run the animation only once at the beginning of the dash initialization to avoid the 'awkward silence' that happens at the beginning so to speak as figures are being generated. I have figures that update their content every 10 minutes, so having a spinner pop up every 10 minutes would be very annoying. This seems to be a common problem for some people online as well. Thank you very much in advance!!
Hi Nawal El Boghdady, that is indeed a common problem. I am not aware of any solution around that. If you find a solution, can you please share with all of us here on TH-cam comments. Thank you.
Hi Nawal!
Myself in the Spinner component I have added only the features that I need to load once. Then I defined an html.Div component with children the Spinner and I set its style equal to: style={'display':'block'}. In the first callback I returned the style of the html.Div component equal to: style={'display':'none'}.
I hope this helps! :)
Michaela
Can we put dbc components inside dcc components??
Hi Allan, it's not recommend. Were you thinking of something on particular?
@@CharmingData I want the whole page to load in dcc. Loading component but the rows and columns are dbc components.. Is that possible??
@@allanmathews2093 When I tried doing that, it didn't work for me. But I think it's possible. I might have missed something.
But to save yourself a headache, why don't you use the Bootstrap spinner?
dash-bootstrap-components.opensource.faculty.ai/docs/components/spinner/
@@allanmathews2093 I have tried this and it works, but not sure if you'll run into any performance issues or if it is a recommended way for coding in the first place. Nevertheless, I just went with it and it seems to be working fine for me so far:
layout_var = [dbc.Row([dbc.Col(...)...]), dbc.Row(...)]
app.layout = dbc.Container([
dcc.Loading(
layout_var,
color='#fde725',
type="dot", fullscreen=False
),
...
])
where 'layout_var' is an array containing all your dbc.Rows and Cols. In fact, I wrapped my entire layout (except the title) in that dcc.Loading function
@@nawalelboghdady9998 thanks alot.. I have figured it out some time ago... Thanks again for your reply
Nice
Good stuff
Nana, I'm glad you liked it. If you think I can do anything better, please let me know.
@@CharmingData You're killing it, man! Keep up the good work. I've learned a whole lot from your channel.
And another question: Instead of messing with HTML and CSS, can we simply add a GIF image inside the spinner? ... I got the idea from loading.io 😁
Hi @Stoufa. Very interesting. I've never tried that. Did it work for you?
@@CharmingData When I wrote the comment, it was just an idea but after reading your reply I gave it a try and it worked!
I used a bit of CSS to set the GIF image to the background and voilà. 😊
@@stoufa Would you mind sharing your code?
@@lukaskaspras7737 Hey Lukas,
Sorry, we signed an NDA! We can't share the whole code but I can send you some snippets to get you started. TH-cam doesn't allow us to put links in comments, how do you want me to reach you out?
@@stoufa Wow, thanks for replying that fast - TH-cam has repeatedly deleted/not accepted my previous comments where I posted an e-mail.
Could you contact me via LinkedIn or open an issue on any of my public Github Repos? On both platforms, you can find me under Lukas Kaspras!
Great video, as usual. 😊
Did anyone tried one of the advanced spinners, I tried to add the additional tags inside the spinner but it didn't work!