Chapter 11: URLs and Multi-Page Apps

So far, we have been building everything on one page. We kept adding new charts and interactive components to a single div and incorporated them as we saw fit. Adding new URLs can be useful for space-saving purposes, so that we don't end up having too many components on a single page. URLs also serve as a tool for classifying content and providing context, so users know "where" they are and what they are doing.

Even more interesting is the ability to programmatically generate many additional pages to your app, simply by displaying content based on the URL (or any part of it). This is what we will do in this chapter.

Once we get to know how the Location and Link components work, we will then make a slight change to the structure of the app, by making and isolating new layouts. Then, it will be clear how easy it is to make a multi-page app. We will have a general layout with an empty area in the middle, and using a simple rule...

Technical requirements

For the new components that we will introduce, we will still be using the same tools. Dash, Dash Core Components, Dash HTML Components, and Dash Bootstrap Components will be used to build our new functionality and add it to our app. We will also be using pandas for data manipulation, JupyterLab and jupyter_dash for experimenting with isolated functionality, and Plotly and Plotly Express for data visualization.

The main topic of this chapter will be manipulating parts of the URLs and using them as inputs to modify other components. This is the same as using any other element of our app to create the functionality that we want. Let's start by getting to know the two components that make this possible.

The code files of this chapter can be found on GitHub at https://github.com/PacktPublishing/Interactive-Dashboards-and-Data-Apps-with-Plotly-and-Dash/tree/master/chapter_11.

Check out the following video to see the Code in Action at https://bit.ly/3eks3GI...

Getting to know the Location and Link components

These components are part of Dash Core Components, and their names make quite clear what they are and what they might do. The Location component refers to the browser's location bar. It is also referred to as the address bar or the URL bar. We typically place a Location component in the app, and it doesn't produce anything visible. We mainly use it to discover where we are in the app, and based on that, we induce some functionality. Let's create a simple example to see how it can be used in its simplest form:

1. Create a simple app:

   import dash_html_components as html
   import dash_core_components as dcc
   from jupyter_dash import JupyterDash
   from dash.dependencies import Output, Input
   app = JupyterDash(__name__)

2. Create a simple layout for the app containing a Location component and, right underneath it, an empty div:

   app.layout = html.Div([
       dcc.Location(id='location'),
    html.Div...

Parsing URLs and using their components to modify parts of the app

Having established some working knowledge about how Location and Link components work, we want to use this in our app. The plan is to add 169 new pages using three callbacks and adding a few new layout elements. The user will have a drop-down menu of countries to choose from. Selecting a country modifies the URL, which will render the country layout. This layout will include a heading, a chart, and a table about the country in the URL.

Figure 11.2 shows a sample of a country page that we will build:

Figure 11.2 – A sample country page showing a chart including other countries as well

As you can see, we now have a template for a country page. This was triggered because the URL contained a country that is one of the available countries in the dataset. Otherwise, it will display the main app, containing all the components that we have built so far. Users can also click on the Home...

Restructuring your app to cater to multiple layouts

At this stage, we haven't moved from the basic structure that we discussed in Chapter 1, Overview of the Dash Ecosystem, and as a reminder, Figure 11.3 shows a simplified representation of the current structure:

Figure 11.3 – The structure of a Dash app

Everything will remain the same, with the exception of the layout part. Right now, we only have one layout attribute, and everything was added to the main div. We used tabs to efficiently utilize space in some cases, and from Dash Bootstrap Components we used the Row and Col components to flexibly manage how components are displayed. To create the new layout structure, we need to create one main layout, which will serve as the skeleton of our app. In this layout, we will have an empty div, which will get populated with the appropriate content, depending on the URL we are on. Figure 11.4 shows how this skeleton might look. This is just to make...

Adding dynamically generated URLs to the app

We now want to complete our main layout with a navigation bar, a home page link, as well as a drop-down menu for the countries. To achieve that, we introduce the NavbarSimple component from Dash Bootstrap Components and see how we can use it.

The NavbarSimple component will take a few elements to create the structure we want as follows:

1. We first create the navigation bar and give it brand and brand_href arguments, to indicate what the name would be and where it would link to:

   import dash_bootstrap_components as dbc
   dbc.NavbarSimple([
       …
   ], brand="Home", brand_href="/")

2. For its children argument, we will add a dbc.DropdownMenu component. We will also give it a label value so users know what to expect when they click on the menu. We will fill its children argument in the next step:

   dbc.DropdownMenu(children=[
       menu_item_1,
       menu_item_2...

Incorporating the new URL interactivity into the app

Having created a dropdown that automatically changes the URL based on the selected value, we have allowed our users to go from page to page as they please. We now need to manage the display of the right content based on the selected country.

Since the code was already written, one thing you can do is run the app in debug mode and get a visual representation of all the available components and see how they are connected with callbacks.

Figure 11.5 shows the graph of the callbacks that have been created. Let's use it to understand how this functionality was implemented:

Figure 11.5 – The various components and callbacks managing the URL functionality

Let's go through the figure from left to right and see what is going on here. You can refer to Figure 11.2 to see how this graph corresponds to visible components in the app:

• Everything starts with the pathname attribute of...

Summary

We first got to know the two main components that are responsible for modifying, reading, and parsing URLs, the Location and Link components. We created two simple apps in which we saw how to extract the part of the URL that we are interested in and experimented with several options for what can be done with them.

We then saw how to modify parts of an app by taking values from parsed URLs. With this knowledge, we were able to restructure our app. We created a skeleton layout with an empty div, in which the right content would then be displayed based on the URL.

We then incorporated the new functionality into our app. We were left with a final exercise that you can expect to go through in real life, which is a colleague handing you some code that you have to figure out and modify yourself.

Now that we have explored many options, layouts, components, and functionality, the next natural step is to deploy our app on a public server, so we can share it with the world.

...