Skip to content

Files

Latest commit

98bdb62 · Sep 29, 2023

History

History
This branch is 167 commits ahead of jonathandfitzgerald/wwp-w2vonline:master.

html

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Jun 5, 2023
Sep 29, 2023
Sep 29, 2023
Sep 29, 2023
Sep 14, 2023
May 23, 2023
May 23, 2023
May 23, 2023
Sep 29, 2023
Sep 29, 2023
Jun 5, 2023
Sep 29, 2023

HTML Templates for the Word Vector Interface

This directory contains snippets of HTML which are used to construct WVI Shiny app. Rather than building HTML elements through R functions, the structure of each tab is defined in its corresponding template.

How templating works

Where possible, we use HTML templates to separate the R code from the structure and styling of the web page. The Shiny application (app.R) generates reactive components and fills them into the templates.

For example, the “Home” tab has a template which lays out the structure of the tab’s content. Placeholders for reactive UI components look like this:

<div class="box-body">
  {{ controls }}
</div>

When app.R constructs the WVI user interface, it draws on the HTML template, filling in controls like so:

home_content <- tabPanel("Home", value=1,
  htmlTemplate("html/home_tab_content.html", 
    # ...
    controls = textInput("basic_word1", "Query term:", width="500px"),
    # ...
  )
)

When the webpage is loaded, you will see that Shiny has generated a text input field with the label “Query term”. Behind the scenes, this form control has the HTML identifier basic_word1. When you change the value of the field, Shiny uses definitions in app.R to determine how the interface reacts:

output$basic_table <- DT::renderDataTable({
  data <- list_models[[input$modelSelect[[1]]]] %>% 
    closest_to(tolower(input$basic_word1), max_terms)
  makeTableForModel(data, session, tableSidebarOpts(input$max_words_home))
})

In this case, the WVI app lower-cases the text in the basic_word1 field, and generates a table of words with the closest cosine similarity. The rendered HTML table is placed in output$basic_table. This basic_table is used to fill in part of the Home tab UI:

home_content <- tabPanel("Home", value=1,
  htmlTemplate("html/home_tab_content.html", 
    # ...
    controls = textInput("basic_word1", "Query term:", width="500px"),
    results = DT::dataTableOutput("basic_table"))
  )
)

The relevant part of the template looks like this:

<div class="box-body" id="table-main-1">
  {{ results }}
</div>

For more information, see Shiny’s documentation on HTML templates.