Add Readme on HTML templates, missing viz. templates

html/README.md

@@ -0,0 +1,61 @@
+# 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`](../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](home_tab_content.html). Placeholders for reactive UI components look like this:
+
+```html
+<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:
+
+```R
+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:
+
+```R
+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:
+
+```R
+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](home_tab_content.html) looks like this:
+
+```html
+<div class="box-body" id="table-main-1">
+  {{ results }}
+</div>
+```
+
+For more information, see Shiny’s [documentation on HTML templates](https://shiny.posit.co/r/articles/build/templates/).
+

html/viz_pairs_tab_content.html

@@ -0,0 +1,31 @@
+<div>
+  <!-- Layout for the "Pairs Plot" portion of the visualization tab. -->
+  <div class="col-sm-12">
+    <div class="box">
+      <div class="box-body">
+        <div class="col-sm-6">
+          {{ word1 }}
+        </div>
+        <div class="col-sm-6">
+          {{ word2 }}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-12">
+    <p>This tab allows you to plot the words closest to a pair of query terms, 
+      according to cosine similarity. To see how it works, input two terms in the 
+      two boxes. You can use the slider to control the maximum number of words to 
+      plot.</p>
+    <p>For example, try plotting "happy" and "sad." You'll see that some terms are 
+      close to "happy" but far from "sad"; some terms are close to "sad" but far 
+      from "happy"; and some terms are close to both "happy" and "sad".</p>
+  </div>
+  <div class="col-sm-12">
+    <div class="box box-solid">
+      <div class="box-body">
+        {{ pairs_plot }}
+      </div>
+    </div>
+  </div>
+</div>

html/viz_word-cloud_tab_content.html

@@ -0,0 +1,56 @@
+<div>
+  <!-- Layout for the "Word Cloud" portion of the visualization tab. -->
+  <div class="col-sm-12">
+    <div class="box box-solid">
+      <div class="box-body">
+        {{ word }}
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-12">
+    <div class="box">
+      <div class="box-body">
+        <div class="col-sm-12 col-md-8">
+          <div class="box box-solid">
+            <div class="box-body">
+              {{ word_cloud }}
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-4">
+          <div class="box box-solid">
+            <div class="box-body">
+              <p>The visualizations tab allows you to create a
+                word cloud for the query term you would like to
+                analyze. The word cloud will produce a collage
+                of the most similar words to your query term
+                using the WWO general corpus model. You can
+                adjust the visualization based on the number
+                of words you would like to see appear
+                (top slider bar on the left of this page).
+                These terms are based on their percentage of
+                similarity to the query term. The similarity
+                percentage is also represented in the visualization
+                by the color of each word. See below for the color
+                key. The second slider down from the similarity
+                bar will allow you to adjust the number of words you
+                would like in your word cloud, and the bottom-most
+                slider controls the size of the plot image.</p>
+              <div id="wc-color-key">
+                <p>Similarity Color Key
+                  <br />Similarity % -- Color</p>
+                <ul class="list-unstyled">
+                  <li>91 – 100 -- gray</li>
+                  <li>81 – 90 -- brown</li>
+                  <li>71 – 80 -- orange</li>
+                  <li>51 – 70 -- green</li>
+                  <li>00 – 50 -- pink</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>