- 3 Minutes Wednesdays
- Posts
- 3MW (More similarities between Py- and R-Shiny)
3MW (More similarities between Py- and R-Shiny)
Albert Rapp
December 13, 2023
Guten Tag!
Many greetings from Munich, Germany. Last week, we built a small Shiny for Python app. It didn’t look very pretty and didn’t have much functionality but at least we made it work.
This week, let’s try to add a stylish button to this app. Not only will this teach us about reactive events in Py-Shiny but also about how to add custom styles. But before we do that, time for my regular announcements.
Last chance to get on the pre-sale
This week, I completed the last charts for Part 2 of the data visualization course. Since every dataviz course should have Taylor Swift related charts (obviously), I created some charts for my dataviz course as well. Here’s how they look:
More importantly, next week is launch day 🥳 So, this week is your last change to get the reduced pre-sale price if you want to join the course. If you want to learn how to create insightful data visualizations, you can sign up on the course website.
Now, let’s dive into this week’s newsletter. As always, all of the code is available on GitHub. (INSERT LINK)
The first thing we want to do is to add a button to our app. In R, the code for a button would be:
This would give us a boring button like this.
In Py-Shiny, we can generate the same boring button like this:
Well, it’s not exactly the same button but it’s still boring. Have a look:
The notable difference in the code is that the id argument name is actually just id and not inputId. More importantly, just like any other input element, the function that generates the button starts with input_. (I’m really a fan of this naming convention 🥳)
Next, let us add a little bit more flavor to our button. In R, we can achieve that by adding CSS code to the style argument of the button.
This will give us a button that looks different but not really fancy either. Here’s how it looks.
We can make this much more fancy by adding more CSS. But at this point, it becomes just too cumbersome to include all of the key-value pairs (like border-radius: 10px) in one long text. That’s messy af.
Thankfully, there’s the {htmltoools} package in R. It makes the CSS code-formatting much easier.
Ahh much nicer code. Now, we can add a couple of CSS keywords to make our button fancy. Don’t worry if you don’t know them all. This newsletter isn’t really about CSS but I do like to show what’s possible with it. (You know, because people always say all Shiny app look alike (which is true but might be different if more people would want to use CSS))
In the end, this CSS code would give us a fancy button that is admittedly a bit extreme:
So, we used the {htmltools} package to make our life a lot easier in R. The questions quickly becomes: Can we do that in Py-Shiny too?
Thankfully, the answer is yes. It turns out that the kind people of Posit also brought {htmltools} to Python. The code is nearly identical.
Neat! We didn’t have to learn anything new and got the same output. Check out how the button looks.
Alright cool. We have a fancy button in Python now. We can stick this into our app. The code for that is pretty much the same code from last week plus the new button variable.
Look how beautiful our button is in our new app. If that’s not majestic as pug, then I don’t know what is 🤣
Okay, maybe the button is a bit too much right now. Whatever. Let’s just make make sure that the text output in the main panel appears only after clicking the button.
Reactive events in Py-Shiny
Just like in R, there are there are multiple reactive things you can do in Py-Shiny. Interestingly, in Py-Shiny all of the things that are related to reactivity are accessible via reactive. (naming conventions strike again!) If you look at the docs of Py-Shiny you will find:
For our current use case, what we need from that list is reactive.event(). This one is really easy. It’s just another decorator (the scientific term is “@-thingy”) that we need to include for our render call.
After we make these changes to our server function in the Py-Shiny app, everything works as expected. Hooray 🤸
Nice, we have learned to style our Py-Shiny and use reactive events. Great job everybody. As always, if you want to reach out to me, just reply to this mail or find me on LinkedIn.
See you next week,
Albert 👋
If you like my content, you may also enjoy these:
Reply