Dr. Uli Muellner & Nick Snellgrove | Shiny modularization, Leaflet for R and Leaflet JS extensions

Transcript#

This transcript was generated automatically and may contain errors.

Hi, everyone. Thanks so much for joining us today. Welcome to the RStudio Enterprise community meetup. I'm Rachel. I'm calling in from Boston. It's afternoon for me here, but morning for our friends on the call. If you just joined now, feel free to introduce yourselves through the chat window and say hello, maybe where you're calling in from.

Just to go through a brief agenda, we'll have some short introductions of the meetup and code of conduct, but Uli and Nick will share a behind-the-scenes look at their road trip app, which I got a first glimpse of last holiday season and was super impressed from it and wanted to see how it worked behind the scenes. We'll also have lots of time for questions after the presentation as well. But with that, I am so excited to turn it over to, I think Uli, you're starting first, to Uli first and then Nick.

Yeah. Hey, Rachel. Yeah, thanks for the intro and I'm really excited to actually chip in with that meetup and to get to know you all.

Yeah, thanks for joining and title for today's session is Under the Hood of Aotearoa Road Trip and provide a bit of an intro who we are and how we came to creating the app we demo today.

So we are Epi-interactive and we are based in New Zealand or the Maori name or the, yeah, so the original name of New Zealand is Aotearoa. And so we are a company here in Wellington in the capital of New Zealand and we, yeah, work a lot with R and also R Shiny . And so what we are known for, so we create more complex or sophisticated apps which often connect research and science with decision making. So as you do the last couple of years, for example, we are part of the New Zealand COVID-19 response. So we created a lot of dashboards to help response services and also create a dashboard for the general public. Or another example you see here is, so we work together with the Minnesota Aquatic Invasive Species Research Centre. So, and to help decision making around the spread of aquatic invasive species in Minnesota because they are known for their 10,000 lakes. So they're two examples of the apps we produce.

And yeah, we are a small team here. So we got some photos here. So Petra and I, so we are directors and we, yeah, so we founded Epi-interactive and we have a software development team. So and our developer team, so currently five staff and Nick is one of them. I saw also Shana joining. So she heads our design UI and UX team. And we also have, yeah, Chris who looks after the admin.

So depending which map you use, so we are actually in the centre of the world. So you see that in the middle and meaning we are reasonably close to a lot of other locations, but the closest we are probably to Australian. So, but unfortunately when you look at some other maps, so we often drop off into the right corner there. So a small country in the Pacific, but yeah, so I'm not too sure who've kind of looked a bit closer into New Zealand, but maybe some of you guys have already travelled there. It's actually a really beautiful country. So we've got, it's divided into islands. So we've got the North Island and we've got the South Island. The top, there are some pictures of the South Island. So we've got the Southern Alps and great skiing there and a really beautiful landscape. We've got nice beaches. So I think in the middle is Golden Bay close to Nelson. And yeah, on some days you can go skiing in the morning and go for surf in the afternoon. So great country to live in. So I'm originally from, disclosure, disclosure, I'm originally from Germany, but I moved to New Zealand around 17 years ago and it's home right now.

because there are limitations to what Leaflet for R can do out of the box. So when we're putting this together, we were looking around for ways that we could extend that, and we found a way that we can use these JavaScript plugins, we can add those onto our Leaflet for R maps, so that we can actually access that functionality.

So that's the plugin that we're using for that, that moving marker, and so that's built for Leaflet JavaScript, and so we need to register that on our Leaflet for R map, so that we can then use it in our application. So we're doing that, we're creating kind of a dependency in global.R, and then we have a function there so that we can register that plugin to our map. And so when we're actually creating the map the first time is where we bind the plugin to the map, and then we do kind of an extra step in the onRender of when we're creating that map to help set up the the marker for the first time. So actually setting up the car.

So back into the code we go, and so starting off with actually registering the plugin. So we have up here, so we have this little utility function that we created called registerPlugin, which takes the arguments for a map and the plugin that we want to register, and it's just adding it to the dependencies of the map and then returning the map. So the reason that we have that set up like so, is so that we can hook it into over here, so we can put that into that kind of pipe. So as we're creating the map we can then pass the map into this register plugin function here alongside the plugin that we've created, which we also do over here in global. So we have this object, this MovingMarkerPlugin, which is an HTML dependency, and so we're just sourcing the javascript. So we have that, we kind of downloaded a copy of the, of the MovingMarkerPlugin, and we just put that into our resources down here, so in our javascript folder. So we have a copy of that plugin sitting here, and so we're creating this HTML dependency, which is just going to source that, that code from our, from our file system here, and then allow us to attach it to the map. So that's where over here, so when we actually call registerPlugin, and so we're passing in that global HTML dependency object, and so that will then attach it to the map, so that when we access the map later on, we can have access to all the functionality that we need.

That also comes into this extra step that we have down here, so there's onRender, so we're saying that when the, when, when, when the map draws the first time, so we want to set up, we want to run this, this function here, and so we're, basically we're creating an object in javascript, which is the map that we've just finished making, and so, so that we can then access that later on from our other javascript code, which we're going to use, and then after that, we're also running this jsString as a part of that function, which if you remember up here, is this, it's a call to a javascript function, which, which we had set up earlier using, you know, our initial position, and our speed, and things like that. So in this onRender, so we're creating, we're making a reference to the map, so we can access it later, and then we're also running this, this javascript function to actually set up the marker for the first time, so that we can use it.

Creating and moving the car marker

Which then leads into the next point, which is you're creating and moving the marker. So there's kind of two stages to this, and there's a, there's a javascript function, which we're going to keep coming back to for a lot of this stuff, which is that update car position. So the two stages here, which are initialization, so when we're making it the first time around, and then movement, which is, you know, it's already, it's already been created, it exists on the map, and we just want to move to the next place. So for the initialization, so we create an icon, and we assign it to a new moving marker, and we set up kind of the, the start and the end behavior for that marker, so when it starts moving, and when it stops moving, what should it do, and then we put it onto our map in that initial position. Whereas for the movement, so if the marker is already there, and it's already set up, then we update the direction, so we're using gifs to handle the direction of the car, so we update that image if we need to, and then we move the marker to the new position, and we also move the map to the new position.

And how that looks in the code, so we have our main.js file here, and then we have these kind of two stages of it, so we have this if init, which is coming in from here, so this is our kind of initial setup phase here, and so in this stage, we're creating an icon, and we're using, to start off, we use the carFacingLeft gif, and we give it a size, and we put the anchor in the middle of that, so that it appears in the right place, and then we create a moving marker using the coordinates which are passed in to this function, we set the icon for this marker to the icon that we created here, we give it, we give the moving marker a much higher offset than, if you remember, we set the offset for the locations, we set that to zero, as we set this to 1000, probably doesn't need to be that high, but the point is to set it higher so that when the car is on the map, it always appears in front of the location markers, and then as the last thing that we do for setting that up, we set interactive equal to false, so that you can't click and interact with the car on the map.

Then we set up the kind of the start and end behavior, so as I said, that's when the car starts moving or when it stops moving, and so we link that up to do some things with our controls, so you may notice in the application when the car starts moving, when it starts moving, these controls get disabled, and then when it stops moving, they get re-enabled, so we set that up in these on start and on end points here.

So that's kind of the initial setup of the car, and then for the movement, basically because we have these parameters, so location, speed, direction, and so for that, we're updating the image that we're using, we're creating some new coordinates, we're moving the car to those coordinates, and then we're also moving the map to those coordinates as well, so that's essentially how the car is functioning in the application.

Reactivity and staged reactives

Which moves us on to the next point, which is to do with reactivity, and so for this app, we're tracking a lot of our important map details as reactives and reactive valves, so we have our current location index as a reactive valve, we have our first and last location, so kind of a little calculation to figure out if we're at the start or the end, we have those as reactives, we have our location data and our current location data as reactives as well, and then we also have kind of some UI parts as reactives too, so like the current postcard and the current description.

We try to keep the static UI as minimal as we can, as we've seen so far, and we do that by defining these UI elements in our server, so we use these render UI and UI outputs, and then that allows us to use reactives and reactivity to update our UI. So back into the code, and in the map page server, so we have our reactives up the top here, so we have our current location index, and we start off from whatever this global variable happens to be, which most of the time is one, yeah we can change that for testing, but most of the time we start off at the start, and then we have our first location and last location reactives, which just tells us if we're at the start or the end, our location data, which takes in our locations which were loaded in global, and then we just do a little bit of formatting to them and sourcing, and then our current location data, which is filtering this reactive here to just our current location, and then the postcard and description, which is pulling the image path and the description from the location data specifically.

So these ones in particular are quite handy because we can, you know, that allows us to kind of, we can build our UI using those elements specifically. So if we look into say postcards, and then postcards has some multiple kind of nested stages, so we have postcard front and postcard back, postcard front here, which we can just use the current postcard, so that's that reactive which we have, which holds the the path to the image, and so that means that whenever that reactive updates, the the UI will update, you know, on its own, on account of, you know, the process of reactivity, and similar thing in postcard back here, where we're using the current description, so anytime our location changes, the description changes, and then the UI changes, so it all kind of happens on its own.

One thing that we like to look at sometimes with that is the react log, so you may or may not be familiar with this, but it's kind of a neat tool for examining the reactive chain of your application. So I can quickly run that here, and we can see kind of what that looks like. So if I go, so is it react log enable, and so that kind of sets it up, and it's running, and it's waiting, and then I just run the application, this is a local version that we'll have here, and then I'll just click through a couple of points here, and in the background the react log is, you know, it's recording, it's watching what's happening here, doesn't really matter what I do too much, but if I bring up, so I come back into here, and then I say shiny react log show, and so that brings up a react log for this application specifically, for that session that I just did, and so from this we can see, yeah, we can see how the different reactives, and reactive elements link together. So you can see, you know, this first here, we have the current location which feeds into these reactives here, so first and last location, which feeds into these observe events, and it kind of goes from there, so you can kind of get an idea of what relies, what elements of your reactivity are relying on the other elements, and if you wanted to get, you know, really specific, you can click on certain elements, and then you can see, yeah, everything that, say, the current location data is linked to, so you can focus in on specific parts of your application as well, and so you can then step through the different stages, and you can watch how your reactive chain essentially operates as you run the app. So that's quite a, you know, quite a handy one for us as well.

User experience improvements

So I think with the reactivity, and then with the, just quickly look at the observe events that we have set up, so this is watching these start and back buttons, and reset buttons, things like that, and so that's kind of just handling like our UI elements, things like that, for the back button, that's up there, and then updating the car position, so we're putting together, kind of preparing these different parameters here, and then we have this function update static car position, which will then make a call to our JavaScript as well, so this is kind of all happening mostly in these observe events here, so how we actually link up those buttons and your user inputs to the car.

Which kind of ties into the last few points here, which is to do with the user experience, so these are the little things that we do along the way to improve the overall feel of the application, so things like animating the car, changing the direction, making the map follow the car, turning off the map interactivity, showing, hiding, disabling controls based on the state of the map, even like animating the background, which we do with just kind of CSS animations.

So for the car, so we already talked about how we animate the car, so what comes to mind is that the simplest solution is often the best solution, and we tried a lot of other more complicated things, like inverting the image CSS transformations, all kind of things like that, and then realize, you know, why don't we just use multiple different images, so we have one image for the car facing left, and one image for the car facing right, and so we just swap between those depending on what direction the car should be going, because we don't need it to be more complicated than that, and we just assign that icon to the marker, you know, as we saw in that, in the JavaScript function here.

what comes to mind is that the simplest solution is often the best solution, and we tried a lot of other more complicated things, like inverting the image CSS transformations, all kind of things like that, and then realize, you know, why don't we just use multiple different images, so we have one image for the car facing left, and one image for the car facing right, and so we just swap between those depending on what direction the car should be going.

For the map then, and the map interactivity, we already looked at the, the leaflet options, so the minimum maximum zoom, and disabling dragging, so that you don't get lost. When we make the marker, we talked about setting the interact, so disabling the interactivity for the marker, so we're trying to kind of make it, yeah, because the overall look and feel of the application is kind of themed around this road trip, and it's these postcards, so we kind of, it's, it's more of like a look, don't touch kind of thing set up there, I mean you can still zoom in and out a bit, but there's not really anything to be gained by interacting with the car, so we just disable that to make it a bit cleaner.

Having the map position following the car movements, so we're sending it to the, so we're sending the camera, I guess you could call it, to the same position as the car, but it, at least it feels like it, the camera kind of arrives a little bit faster than the car does, so that's happening in this step here, so with this move to, and we give it a certain speed, and then the map pan to, so that's being given the same speed, but it feels like the camera arrives there slightly faster, and that's good because, you know, if, if the car arrives before the camera, then you would be able to queue up more movements while the camera is still moving, and then you'd end up with some kind of unexpected camera behavior, which we want to avoid, so easiest way to do that is to just make the camera arrive a little bit first.

For the controls, so we disable the controls while the car is moving, so that also allows us to prevent these unexpected movements, so going off track, you know, just rushing through all of, all of the movements in half of a second, and so we do that again in that, in that JavaScript function here, so in these start and end functions here, so we're finding all of those links, finding all of those links, and then disabling them when the, when the car starts moving, and then, again, when it stops moving, we're removing that disabled class from it.

Actually, the other thing that we're doing in here, which is useful for mobile, which is, you know, if, so we have a scroll locator, so just like a little invisible element attached to our postcards, so that if you're on mobile and you're not looking at the postcards, when the car arrives at the location, it will scroll into view so that you can actually read the text on the postcards.

And then showing and hiding the controls based on the map state that we are doing kind of in the, in the server parts, so we're using remove UI and insert UI for some of it, and we're also using kind of run.js to handle some of it as well, so at the first position where we hide the back button, and then at the last position where we take away that forward button and we replace it with a restart button, and so where we're actually doing that in here in the map page server, so we have down here, so we have is first location, and if it is, then we are hiding the back button, so using run.js, so basically we're adding that hide class to it so that it won't be visible, and then at the last location we're removing the next button and we are inserting a restart button instead, so that kind of allows us to customize the the UI on the fly depending on what stages people are at.