The last section we finalized the base Shiny Application. In this section we will add an advanced capability.

This will be an auto complete text-box that allows users to enter/find county names that are can modify the global FIP variable and change the interactive components.

Extending the UI:

First lets add a text box to our UI. Now, we don’t want to make users guess what their options are, so, we will add an autofilling capability that shows valid selections as a user types.

To do this, we need to load the dqshiny library (taken care of in the helpers.R script) and update the UI to include the autocomplete functionality. The way we set this up, the autocomplete_input function stores an object called auto in the input list. The default value of auto is "" and the prompt displayed to users is “Search for a County:”.

ui <- fluidPage(
  
  titlePanel('Mike Johnson: COVID-19 Tracker'),
  # Sidebar layout output definitions ----
  sidebarPanel(
    autocomplete_input("auto", "Search for a County:", 
                       value = "",
                       structure(today$fips, names = today$name)),
    # Output: Message ----
    textOutput("covid_message", container = h3),
    DTOutput("covid_table")
  ),
  
  # Main panel for displaying outputs ----
  mainPanel(
    # App title ----
    # Output: Map ----
    leafletOutput('covidmap'),
    # Output: Chart ----
    dygraphOutput('covid_chart')
  )
)

The tricky part is that we want to return a FIP code from the textbox (to parameterize zoom_to_county, make_table, and make_chart) but users need to be able to search by county/state names (bcause who really knows their FIP code ?!). Becasue of this, we need to structure the searchable data so that selecting a name, will return the associated FIP code.

As you see above, we do this with the structure call where the first input (today$fips) defines what is returned to auto while the name input (today$name) defines the options users can search and select.

Extending the Server

In the server function we are going to add an observer. This time we are not observing an event, but an input object. The expression we will observe is to see if auto is either "" (the default). If it is, then the our reactive observer will return NULL.

Otherwise, the observer will initate the same workflow we defined in our mouseclick event observer. Specifically,the global FIP will overridden by the value returned from the text box, the covidMap zoom is updated, the covidChart is re-generated, and a new Wikipedia table is visualized.

observe( 
    if(input$auto == ""){ 
      NULL 
    } else {
      FIP <<- input$auto
      leafletProxy("covidMap") %>% zoom_to_county(counties, FIP)
      output$covidChart <- renderDygraph({ make_graph(covid19, FIP) })
      output$covidTable <- renderDT({ make_table(today, FIP) })
    }
  )

A full app.R file up to this point can be found here

Conclusion

Fantastic, now we have a completly functional and enhanced web application. Lets move to the next section where we will apply a unique theme to our application and publish it as a website!