Update web app entry point

- Rename 'app' -> 'web'
- Return shiny app object in entry point function

33 files changed, 445 insertions, 0 deletions

diff --git a/inst/web/templates/content.html b/inst/web/templates/content.html
new file mode 100644
index 0000000..da69f08
--- /dev/null
+++ b/inst/web/templates/content.html
@@ -0,0 +1,14 @@
+<div class="container-fluid tab-content px-3 py-3">
+  <div id="about" class="tab-pane fade show active px-1">
+    {{ htmlTemplate("templates/content/about.html") }}
+  </div>
+  <div id="data" class="tab-pane fade">
+    {{ htmlTemplate("templates/content/data.html") }}
+  </div>
+  <div id="estimation" class="tab-pane fade">
+    {{ htmlTemplate("templates/content/estimation.html") }}
+  </div>
+   <div id="help" class="tab-pane fade">
+    {{ htmlTemplate("templates/content/help.html") }}
+  </div>
+</div>
diff --git a/inst/web/templates/content/about.html b/inst/web/templates/content/about.html
new file mode 100644
index 0000000..73b75ea
--- /dev/null
+++ b/inst/web/templates/content/about.html
@@ -0,0 +1,28 @@
+<h1>Welcome to the Rnaught web application</h1>
+<p>
+  Rnaught is an R package and web application for estimating the
+  <a href="https://en.wikipedia.org/wiki/Basic_reproduction_number" target="_blank">basic reproduction number</a>
+  of infectious diseases. For information about using this application, view the
+  <span class="fw-bold text-primary">Help <span class="glyphicon glyphicon-question-sign"></span></span> tab.
+  To learn more about the package, visit the online
+  <a href="https://MI2YorkU.github.io/Rnaught" target="_blank">documentation</a> or
+  <a href="https://github.com/MI2YorkU/Rnaught" target="_blank">GitHub</a> repository.
+  Technical details about the estimators featured in this project can be found in the reference
+  <a href="https://doi.org/10.1371/journal.pone.0269306" target="_blank">article</a>.
+</p>
+<h4>What is the basic reproduction number?</h4>
+<p>
+  The basic reproduction number, denoted <em>R</em><sub>0</sub>, is defined as the expected number of infections caused
+  by a single infectious individual when introduced into a totally susceptible population. It assumes that all
+  individuals in a given population are susceptible to the disease, and that no preventive measures (such as lockdowns
+  or vaccinations) have been enforced. It is a useful indicator of the transmissibility of an infectious disease during
+  the early stages of its spread and detection.
+</p>
+<p>
+  If <em>R</em><sub>0</sub> &lt; 1, the disease will eventually die out. On the other hand, if
+  <em>R</em><sub>0</sub> &gt; 1, the disease will spread (the higher the <em>R</em><sub>0</sub>, the faster this will
+  happen). Due to uncertainty of known data about the disease, it is difficult to determine <em>R</em><sub>0</sub>
+  precisely. Therefore, many estimation methods exist, each based on different assumptions and yielding different
+  estimates. It is the responsibility of users to employ the most appropriate estimator (or suite of estimators) given
+  the situation at hand.
+</p>
diff --git a/inst/web/templates/content/data.html b/inst/web/templates/content/data.html
new file mode 100644
index 0000000..574f003
--- /dev/null
+++ b/inst/web/templates/content/data.html
@@ -0,0 +1,12 @@
+<nav class="nav nav-tabs">
+  <a class="nav-link active" data-bs-toggle="tab" href="#enter-data">Enter data</a>
+  <a class="nav-link" data-bs-toggle="tab" href="#view-data">View data</a>
+</nav>
+<div class="container-fluid tab-content">
+  <div id="enter-data" class="pt-3 tab-pane fade show active">
+    {{ htmlTemplate("templates/content/data/enter-data.html") }}
+  </div>
+  <div id="view-data" class="pt-3 tab-pane fade">
+    {{ htmlTemplate("templates/content/data/view-data.html") }}
+  </div>
+</div>
diff --git a/inst/web/templates/content/data/enter-data.html b/inst/web/templates/content/data/enter-data.html
new file mode 100644
index 0000000..254f1d7
--- /dev/null
+++ b/inst/web/templates/content/data/enter-data.html
@@ -0,0 +1,9 @@
+<form class="mb-5">
+  {{ htmlTemplate("templates/content/data/enter-data/required-format.html") }}
+  {{ htmlTemplate("templates/content/data/enter-data/manual-entry.html") }}
+  {{ htmlTemplate("templates/content/data/enter-data/upload-data.html") }}
+</form>
+<hr>
+<form>
+  {{ htmlTemplate("templates/content/data/enter-data/load-samples.html") }}
+</form>
diff --git a/inst/web/templates/content/data/enter-data/load-samples.html b/inst/web/templates/content/data/enter-data/load-samples.html
new file mode 100644
index 0000000..2a4f013
--- /dev/null
+++ b/inst/web/templates/content/data/enter-data/load-samples.html
@@ -0,0 +1,19 @@
+<h4 class="mb-3">Load samples</h4>
+<!-- Checkboxes for sample data. -->
+{{
+  checkboxInput(inputId = "covid_canada", label = "COVID-19 Canada, 2020/03/03 - 2020/03/31 (Weekly)",
+    value = FALSE, width = "100%"
+  )
+}}
+{{
+  checkboxInput(inputId = "covid_ontario", label = "COVID-19 Ontario, 2020/03/03 - 2020/03/31 (Weekly)",
+    value = FALSE, width = "100%"
+  )
+}}
+<!-- Warning text. -->
+<div>
+  <small id="data_samples_warn" class="form-text text-primary shiny-text-output"></small>
+</div>
+<button id="data_samples" type="button" class="btn btn-outline-primary btn-sm action-button mt-3">
+  <span class="glyphicon glyphicon-plus"></span> Add
+</button>
diff --git a/inst/web/templates/content/data/enter-data/manual-entry.html b/inst/web/templates/content/data/enter-data/manual-entry.html
new file mode 100644
index 0000000..a6319d9
--- /dev/null
+++ b/inst/web/templates/content/data/enter-data/manual-entry.html
@@ -0,0 +1,11 @@
+<!-- Data input area (manual entry). -->
+<div class="my-4">
+  <label class="form-label" for="data_area">Enter manually</label>
+  <textarea id="data_area" class="form-control" rows="3" wrap="off"></textarea>
+  <div>
+    <small id="data_area_warn" class="form-text text-primary shiny-html-output"></small>
+  </div>
+  <button id="data_bulk" type="button" class="btn btn-outline-primary btn-sm action-button mt-3">
+    <span class="glyphicon glyphicon-plus"></span> Add
+  </button>
+</div>
diff --git a/inst/web/templates/content/data/enter-data/required-format.html b/inst/web/templates/content/data/enter-data/required-format.html
new file mode 100644
index 0000000..724dd83
--- /dev/null
+++ b/inst/web/templates/content/data/enter-data/required-format.html
@@ -0,0 +1,25 @@
+<!-- Button to toggle help text. -->
+<button type="button" class="btn btn-outline-primary btn-sm" id="data-format-toggle"
+        data-bs-toggle="collapse" data-bs-target="#data-format">Show required format</button>
+<!-- Help text for data input format. -->
+<div class="collapse mt-2" id="data-format">
+  <div class="card card-body border-primary">
+    <p>Manually enter rows or upload a CSV file in the following format:</p>
+    <p class="overflow-x-scroll text-nowrap font-monospace">
+      <u>Dataset name</u>,<u>Time units</u>,<u>Case counts</u>
+    </p>
+    <p>
+      <u class="font-monospace">Time units</u> must be one of
+      <u class="font-monospace">Days</u> or 
+      <u class="font-monospace">Weeks</u>, and
+      <u class="font-monospace">Case counts</u>
+      must be a comma-separated list of one or more non-negative integers.
+    </p>
+    <p>Example:</p>
+    <p class="overflow-x-scroll text-nowrap font-monospace lh-sm">
+      Disease A,Days,1,2,3,4,5,6,7,8,9<br>
+      Disease B,Weeks,3,1,4,1,5,2,9<br>
+      Disease C,Days,2,3,5,7,11,13,17,19
+    </p>
+  </div>
+</div>
diff --git a/inst/web/templates/content/data/enter-data/upload-data.html b/inst/web/templates/content/data/enter-data/upload-data.html
new file mode 100644
index 0000000..740047b
--- /dev/null
+++ b/inst/web/templates/content/data/enter-data/upload-data.html
@@ -0,0 +1,12 @@
+<!-- File input for data upload (hidden). -->
+<input class="form-control" type="file" id="data_upload" accept="text/csv,text/comma-separated-values,text/plain,.csv">
+<!-- Custom button to trigger file selector for data upload (visible). -->
+<label class="form-label" for="data-upload-select">Upload a CSV file</label>
+<div class="input-group">
+  <button id="data-upload-select" type="button" class="btn btn-outline-primary btn-sm">
+    <span class="glyphicon glyphicon-file"></span> Select file
+  </button>
+  <input type="text" id="data-upload-name" class="form-control" placeholder="No file selected" disabled>
+</div>
+<!-- Warning text. -->
+<small id="data_upload_warn" class="form-text text-primary shiny-html-output"></small>
diff --git a/inst/web/templates/content/data/view-data.html b/inst/web/templates/content/data/view-data.html
new file mode 100644
index 0000000..880cf7f
--- /dev/null
+++ b/inst/web/templates/content/data/view-data.html
@@ -0,0 +1,3 @@
+{{ htmlTemplate("templates/content/data/view-data/data-table.html") }}
+<hr>
+{{ htmlTemplate("templates/content/data/view-data/data-plots.html") }}
diff --git a/inst/web/templates/content/data/view-data/data-plots.html b/inst/web/templates/content/data/view-data/data-plots.html
new file mode 100644
index 0000000..5019088
--- /dev/null
+++ b/inst/web/templates/content/data/view-data/data-plots.html
@@ -0,0 +1,7 @@
+<h4>Data plots</h4>
+<div class="container my-5">
+  {{ plotly::plotlyOutput(outputId = "data_plot_days") }}
+</div>
+<div class="container">
+  {{ plotly::plotlyOutput(outputId = "data_plot_weeks") }}
+</div>
diff --git a/inst/web/templates/content/data/view-data/data-table.html b/inst/web/templates/content/data/view-data/data-table.html
new file mode 100644
index 0000000..590a5b9
--- /dev/null
+++ b/inst/web/templates/content/data/view-data/data-table.html
@@ -0,0 +1,18 @@
+<h4>Data table</h4>
+<div class="my-3">
+  {{ DT::dataTableOutput(outputId = "data_table") }}
+</div>
+<!-- Display inactive delete button when no rows are selected. -->
+<button type="button" class="btn btn-primary btn-sm text-white" disabled
+        data-display-if="'data_table_rows_selected' in input && input.data_table_rows_selected.length == 0">
+  <span class="glyphicon glyphicon-remove"></span> Delete row(s)
+</button>
+<!-- Display active delete button when at least one row is selected. -->
+<button id="data_delete" type="button" class="btn btn-primary btn-sm action-button text-white"
+        data-display-if="'data_table_rows_selected' in input && input.data_table_rows_selected.length != 0">
+  <span class="glyphicon glyphicon-remove"></span> Delete row(s)
+</button>
+<!-- Button to export data table as a CSV file. -->
+<a id="data_export" type="button" class="btn btn-outline-primary btn-sm shiny-download-link">
+  <span class="glyphicon glyphicon-download-alt"></span> Export table
+</a>
diff --git a/inst/web/templates/content/estimation.html b/inst/web/templates/content/estimation.html
new file mode 100644
index 0000000..5764057
--- /dev/null
+++ b/inst/web/templates/content/estimation.html
@@ -0,0 +1,13 @@
+<nav class="nav nav-tabs">
+  <a class="nav-link active" data-bs-toggle="tab" href="#about-estimators">About the estimators</a>
+  <a class="nav-link" data-bs-toggle="tab" href="#estimates">Compute and view estimates</a>
+</nav>
+
+<div class="container-fluid tab-content">
+  <div id="about-estimators" class="pt-3 tab-pane fade show active">
+    {{ htmlTemplate("templates/content/estimation/about-estimators.html") }}
+  </div>
+  <div id="estimates" class="pt-3 tab-pane fade">
+    {{ htmlTemplate("templates/content/estimation/estimates.html") }}
+  </div>
+</div>
diff --git a/inst/web/templates/content/estimation/about-estimators.html b/inst/web/templates/content/estimation/about-estimators.html
new file mode 100644
index 0000000..db2898b
--- /dev/null
+++ b/inst/web/templates/content/estimation/about-estimators.html
@@ -0,0 +1,31 @@
+<div class="accordion accordion-flush" id="estimation-accordion">
+  {{
+    htmlTemplate("templates/content/estimation/about-estimators/panel.html",
+      id = "id",
+      header = "Incidence Decay (ID)",
+      reference_label = "Fisman et al. (PloS One, 2013)",
+      reference_url = "https://doi.org/10.1371/journal.pone.0083622"
+    )
+  }}
+  {{
+    htmlTemplate("templates/content/estimation/about-estimators/panel.html",
+      id = "idea", header = "Incidence Decay and Exponential Adjustment (IDEA)",
+      reference_label = "Fisman et al. (PloS One, 2013)",
+      reference_url = "https://doi.org/10.1371/journal.pone.0083622"
+    )
+  }}
+  {{
+    htmlTemplate("templates/content/estimation/about-estimators/panel.html",
+      id = "seq_bayes", header = "Sequential Bayes (seqB)",
+      reference_label = "Bettencourt and Riberio (PloS One, 2008)",
+      reference_url = "https://doi.org/10.1371/journal.pone.0002185"
+    )
+  }}
+  {{
+    htmlTemplate("templates/content/estimation/about-estimators/panel.html",
+      id = "wp", header = "White and Pagano (WP)",
+      reference_label = "White and Pagano (Statistics in Medicine, 2008)",
+      reference_url = "https://doi.org/10.1002/sim.3136"
+    )
+  }}
+</div>
diff --git a/inst/web/templates/content/estimation/about-estimators/id.html b/inst/web/templates/content/estimation/about-estimators/id.html
new file mode 100644
index 0000000..fc70b1c
--- /dev/null
+++ b/inst/web/templates/content/estimation/about-estimators/id.html
@@ -0,0 +1,3 @@
+The Incidence Decay (ID) estimator uses the method of least squares to estimate <em>R</em><sub>0</sub>.
+This method assumes the serial interval is known, and is built under the SIR assumption.
+We note that the use of this method might result in the underestimation of <em>R</em><sub>0</sub>.
diff --git a/inst/web/templates/content/estimation/about-estimators/idea.html b/inst/web/templates/content/estimation/about-estimators/idea.html
new file mode 100644
index 0000000..67548f8
--- /dev/null
+++ b/inst/web/templates/content/estimation/about-estimators/idea.html
@@ -0,0 +1,4 @@
+The Incidence Decay and Exponential Adjustment (ID) estimator is an alternative formulation of the Incidence Decay (ID) model which includes a decay factor to reflect the often observed outbreak decline.
+This addresses the potential underestimation of the <em>R</em><sub>0</sub> estimate when using the ID method.
+The method of least squares is used to estimate <em>R</em><sub>0</sub>, and similar to the ID model, the serial interval is assumed to be known and this method is developed assuming the SIR model.
+We note that, since we need to obtain a minimizer of the decay factor to solve the optimization problem, we require that the number of cases in the dataset be at least 2.
diff --git a/inst/web/templates/content/estimation/about-estimators/panel.html b/inst/web/templates/content/estimation/about-estimators/panel.html
new file mode 100644
index 0000000..98fe155
--- /dev/null
+++ b/inst/web/templates/content/estimation/about-estimators/panel.html
@@ -0,0 +1,14 @@
+<div class="accordion-item">
+  <h2 class="accordion-header">
+    <button class="accordion-button collapsed" type="button"
+            data-bs-toggle="collapse" data-bs-target="#{{ id }}">
+      <h4>{{ header }}</h4>
+    </button>
+  </h2>
+  <div id="{{ id }}" class="accordion-collapse collapse" data-bs-parent="#estimators-accordion">
+    <div class="accordion-body">
+      <p>Reference: <a href="{{ reference_url }}" target="_blank"><em>{{ reference_label }}</em></a></p>
+      <p>{{ htmlTemplate(paste0("templates/content/estimation/about-estimators/", id, ".html")) }}</p>
+    </div>
+  </div>
+</div>
diff --git a/inst/web/templates/content/estimation/about-estimators/seq_bayes.html b/inst/web/templates/content/estimation/about-estimators/seq_bayes.html
new file mode 100644
index 0000000..8f66ab4
--- /dev/null
+++ b/inst/web/templates/content/estimation/about-estimators/seq_bayes.html
@@ -0,0 +1,9 @@
+The sequential Bayes (seqB) estimator uses a Bayesian approach to estimate <em>R</em><sub>0</sub> which updates the reproductive number estimate as data accumulates over time.
+This approach is based on the SIR model, and assumes that the mean of the serial distribution (ie. the serial interval (SI)) is known.
+It is assumed that infectious counts are observed at periodic times (ie. daily, weekly).
+This method cannot handle datasets where there are no new infections observed in a time interval, thus, to remedy this, 
+some manipulation may be necessary to make the times at which infectious counts are observed sufficiently course (ie. weeks instead of days).
+Further, this method is also inappropriate in situations where long intervals between cases are observed in the initial stages of the epidemic.
+Finally, the <em>R</em><sub>0</sub> approximation behaves similarly to a branching process, which means that throughout, the population size “available” to be infected remains constant.
+We note that this assumption does not hold for the SIR/SEIR/SEAIR compartmental models.
+As such, seqB estimates should only really be considered early on in an epidemic, ie. before the inflection point of an epidemic, if the dataset being used follows these models. 
diff --git a/inst/web/templates/content/estimation/about-estimators/wp.html b/inst/web/templates/content/estimation/about-estimators/wp.html
new file mode 100644
index 0000000..c6f4580
--- /dev/null
+++ b/inst/web/templates/content/estimation/about-estimators/wp.html
@@ -0,0 +1,6 @@
+The White and Pagano (WP) estimator uses maximum likelihood estimation to estimate <em>R</em><sub>0</sub>.
+In this method, the serial interval (SI) is either known, or can be estimated along with <em>R</em><sub>0</sub>.
+It is assumed that the number of infectious individuals are observable at discrete time points (ie. daily or weekly).
+Further, this method also assumes an underlying branching process, which means that throughout, the population size “available” to be infected remains constant.
+We note that this assumption does not hold for the SIR/SEIR/SEAIR compartmental models.
+As such, WP estimates should only really be considered early on in an epidemic, ie. before the inflection point of an epidemic, if the dataset being used follows these models.
diff --git a/inst/web/templates/content/estimation/estimates.html b/inst/web/templates/content/estimation/estimates.html
new file mode 100644
index 0000000..bc9124e
--- /dev/null
+++ b/inst/web/templates/content/estimation/estimates.html
@@ -0,0 +1,3 @@
+{{ htmlTemplate("templates/content/estimation/estimates/estimates-table.html") }}
+<hr>
+{{ htmlTemplate("templates/content/estimation/estimates/add-estimators.html") }}
diff --git a/inst/web/templates/content/estimation/estimates/add-estimators.html b/inst/web/templates/content/estimation/estimates/add-estimators.html
new file mode 100644
index 0000000..60111c7
--- /dev/null
+++ b/inst/web/templates/content/estimation/estimates/add-estimators.html
@@ -0,0 +1,16 @@
+<h4>Add estimators</h4>
+<form class="my-3">
+  <!-- Dropdown to select estimator. -->
+  <label class="form-label" for="estimator_select">Select estimator:</label>
+  <select name="estimator_select" class="form-select">
+    <option value="id" selected>Incidence Decay (ID)</option>
+    <option value="idea">Incidence Decay and Exponential Adjustment (IDEA)</option>
+    <option value="seq_bayes">Sequential Bayes (seqB)</option>
+    <option value="wp">White and Pagano (WP)</option>
+  </select>
+  <!-- Parameters. -->
+  {{ htmlTemplate("templates/content/estimation/estimates/add-estimators/parameters.html", id = "id") }}
+  {{ htmlTemplate("templates/content/estimation/estimates/add-estimators/parameters.html", id = "idea") }}
+  {{ htmlTemplate("templates/content/estimation/estimates/add-estimators/parameters.html", id = "seq_bayes") }}
+  {{ htmlTemplate("templates/content/estimation/estimates/add-estimators/parameters.html", id = "wp") }}
+</form>
diff --git a/inst/web/templates/content/estimation/estimates/add-estimators/id.html b/inst/web/templates/content/estimation/estimates/add-estimators/id.html
new file mode 100644
index 0000000..7c35e55
--- /dev/null
+++ b/inst/web/templates/content/estimation/estimates/add-estimators/id.html
@@ -0,0 +1 @@
+{{ htmlTemplate("templates/content/estimation/estimates/add-estimators/mu.html", id = "id") }}
diff --git a/inst/web/templates/content/estimation/estimates/add-estimators/idea.html b/inst/web/templates/content/estimation/estimates/add-estimators/idea.html
new file mode 100644
index 0000000..781349f
--- /dev/null
+++ b/inst/web/templates/content/estimation/estimates/add-estimators/idea.html
@@ -0,0 +1 @@
+{{ htmlTemplate("templates/content/estimation/estimates/add-estimators/mu.html", id = "idea") }}
diff --git a/inst/web/templates/content/estimation/estimates/add-estimators/mu.html b/inst/web/templates/content/estimation/estimates/add-estimators/mu.html
new file mode 100644
index 0000000..8781574
--- /dev/null
+++ b/inst/web/templates/content/estimation/estimates/add-estimators/mu.html
@@ -0,0 +1,22 @@
+<!-- Serial interval label and help tooltip. -->
+<label class="form-label" for="mu_{{ id }}">
+  Serial interval
+  <sup data-bs-toggle="tooltip" data-bs-placement="right"
+       data-bs-title="The serial interval is the time between when an infected individual (the infector) becomes
+                      symptomatic, to when another individual (who is infected by the infector) becomes symptomatic.">
+    [?]
+  </sup>
+</label>
+<div class="input-group">
+  <!-- Serial interval input field. -->
+  <input name="mu_{{ id }}" class="form-control" type="text">
+  <!-- Days/weeks dropdown. -->
+  <select name="mu_{{ id }}_units" class="form-select">
+    <option value="Days" selected>Days</option>
+    <option value="Weeks">Weeks</option>
+  </select>
+</div>
+<!-- Warning text for incorrect values. -->
+<div>
+  <small id="mu_{{ id }}_warn" class="form-text text-primary shiny-text-output"></small>
+</div>
diff --git a/inst/web/templates/content/estimation/estimates/add-estimators/parameters.html b/inst/web/templates/content/estimation/estimates/add-estimators/parameters.html
new file mode 100644
index 0000000..5250e31
--- /dev/null
+++ b/inst/web/templates/content/estimation/estimates/add-estimators/parameters.html
@@ -0,0 +1,7 @@
+<div class="my-4" data-display-if="input.estimator_select === '{{ id }}'">
+  <h5>Parameters</h5>
+  {{ htmlTemplate(paste0("templates/content/estimation/estimates/add-estimators/", id, ".html")) }}
+  <button id="add_{{ id }}" type="button" class="btn btn-outline-primary btn-sm action-button mt-3">
+    <span class="glyphicon glyphicon-plus"></span> Add
+  </button>
+</div>
diff --git a/inst/web/templates/content/estimation/estimates/add-estimators/seq_bayes.html b/inst/web/templates/content/estimation/estimates/add-estimators/seq_bayes.html
new file mode 100644
index 0000000..028fabc
--- /dev/null
+++ b/inst/web/templates/content/estimation/estimates/add-estimators/seq_bayes.html
@@ -0,0 +1,22 @@
+<div class="row">
+  <!-- Serial interval (mu). -->
+  <div class="col-md">
+    {{ htmlTemplate("templates/content/estimation/estimates/add-estimators/mu.html", id = "seq_bayes") }}
+  </div>
+  <!-- Maximum value of the uniform prior (kappa). -->
+  <div class="col-md mt-2 mt-md-0">
+    <!-- Label and help tooltip. -->
+    <label class="form-label" for="kappa">
+      Maximum prior (&#954;)
+      <sup data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true"
+           data-bs-title="The initial maximum belief of <em>R</em><sub>0</sub>. The higher this value, the higher
+                          <em>R</em><sub>0</sub> is believed to be prior to the estimation.">
+        [?]
+      </sup>
+    </label>
+    <!-- Input field. -->
+    <input name="kappa" class="form-control" type="text" placeholder="Default: 20">
+    <!-- Warning text for incorrect values. -->
+    <small id="kappa_warn" class="form-text text-primary shiny-text-output"></small>
+  </div>
+</div>
diff --git a/inst/web/templates/content/estimation/estimates/add-estimators/wp.html b/inst/web/templates/content/estimation/estimates/add-estimators/wp.html
new file mode 100644
index 0000000..511170f
--- /dev/null
+++ b/inst/web/templates/content/estimation/estimates/add-estimators/wp.html
@@ -0,0 +1,39 @@
+<!-- Radio buttons to specify whether the serial interval is known. -->
+<label class="form-label" for="wp_mu_known">Is the serial interval known?</label>
+<div class="shiny-input-radiogroup" id="wp_mu_known">
+  <div class="form-check form-check-inline">
+    <label class="form-check-label">
+      <input type="radio" class="form-check-input me-2" name="wp_mu_known" value="Yes" checked>Yes
+    </label>
+  </div>
+  <div class="form-check form-check-inline">
+    <label class="form-check-label">
+      <input type="radio" class="form-check-input me-2" name="wp_mu_known" value="No">No
+    </label>
+  </div>
+</div>
+<!-- Show the input field for the serial interval if it is known. -->
+<div data-display-if="input.wp_mu_known == 'Yes'" class="mt-2 mt-md-0">
+  {{ htmlTemplate("templates/content/estimation/estimates/add-estimators/mu.html", id = "wp") }}
+</div>
+<!-- Show the input fields for the grid search parameters if the serial interval is unknown. -->
+<div data-display-if="input.wp_mu_known == 'No'" class="row">
+  <!-- Grid length. -->
+  <div class="col-md mt-2 mt-md-0">
+    <label class="form-label" for="grid_length">Grid length</label>
+    <input name="grid_length" class="form-control" type="text" placeholder="Default: 100">
+    <small id="grid_length_warn" class="form-text text-primary shiny-text-output"></small>
+  </div>
+  <!-- Maximum shape. -->
+  <div class="col-md mt-2 mt-md-0">
+    <label class="form-label" for="max_shape">Maximum shape</label>
+    <input name="max_shape" class="form-control" type="text" placeholder="Default: 10">
+    <small id="max_shape_warn" class="form-text text-primary shiny-text-output"></small>
+  </div>
+  <!-- Grid length. -->
+  <div class="col-md mt-2 mt-md-0">
+    <label class="form-label" for="max_scale">Maximum scale</label>
+    <input name="max_scale" class="form-control" type="text" placeholder="Default: 10">
+    <small id="max_scale_warn" class="form-text text-primary shiny-text-output"></small>
+  </div>
+</div>
diff --git a/inst/web/templates/content/estimation/estimates/estimates-table.html b/inst/web/templates/content/estimation/estimates/estimates-table.html
new file mode 100644
index 0000000..4704d03
--- /dev/null
+++ b/inst/web/templates/content/estimation/estimates/estimates-table.html
@@ -0,0 +1,19 @@
+<h4>Estimates table</h4>
+<!-- Estimates table. -->
+<div class="my-3">
+  {{ DT::dataTableOutput(outputId = "estimates_table") }}
+</div>
+<!-- Display inactive delete button when no rows are selected. -->
+<button type="button" class="btn btn-primary btn-sm text-white" disabled
+        data-display-if="'estimates_table_rows_selected' in input && input.estimates_table_rows_selected.length == 0">
+  <span class="glyphicon glyphicon-remove"></span> Delete row(s)
+</button>
+<!-- Display active delete button when at least one row is selected. -->
+<button id="estimators_delete" type="button" class="btn btn-primary btn-sm action-button text-white"
+        data-display-if="'estimates_table_rows_selected' in input && input.estimates_table_rows_selected.length != 0">
+  <span class="glyphicon glyphicon-remove"></span> Delete row(s)
+</button>
+<!-- Button to export estimates table as a CSV file. -->
+<a id="estimates_export" type="button" class="btn btn-outline-primary btn-sm shiny-download-link">
+  <span class="glyphicon glyphicon-download-alt"></span> Export table
+</a>
diff --git a/inst/web/templates/content/help.html b/inst/web/templates/content/help.html
new file mode 100644
index 0000000..df4e887
--- /dev/null
+++ b/inst/web/templates/content/help.html
@@ -0,0 +1,8 @@
+<div class="accordion accordion-flush" id="help-accordion">
+  {{
+    htmlTemplate("templates/content/help/panel.html",
+      id = "serial-interval",
+      header = "What is the serial interval?"
+    )
+  }}
+</div>
diff --git a/inst/web/templates/content/help/panel.html b/inst/web/templates/content/help/panel.html
new file mode 100644
index 0000000..9eb6e2e
--- /dev/null
+++ b/inst/web/templates/content/help/panel.html
@@ -0,0 +1,12 @@
+<div class="accordion-item">
+  <h2 class="accordion-header">
+    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#{{ id }}">
+      {{ header }}
+    </button>
+  </h2>
+  <div id="{{ id }}" class="accordion-collapse collapse" data-bs-parent="#help-accordion">
+    <div class="accordion-body">
+      {{ htmlTemplate(paste0("templates/content/help/", id, ".html")) }}
+    </div>
+  </div>
+</div>
diff --git a/inst/web/templates/content/help/serial-interval.html b/inst/web/templates/content/help/serial-interval.html
new file mode 100644
index 0000000..e061115
--- /dev/null
+++ b/inst/web/templates/content/help/serial-interval.html
@@ -0,0 +1,9 @@
+<p>Reference: <a href="https://en.wikipedia.org/wiki/Serial_interval" target="_blank"><em>Wikipedia</em></a>
+<p>
+  The serial interval (SI) is not one of the estimators. It is a parameter required by most of the estimators, and can
+  also be estimated by some of them (if not specified).
+</p>
+<p>
+  The SI is defined as the average time between successive infections in a chain of transmission (i.e., the time between
+  the infection of an infected individual and their subsequent transmissions).
+</p>
diff --git a/inst/web/templates/footer.html b/inst/web/templates/footer.html
new file mode 100644
index 0000000..19d4b0c
--- /dev/null
+++ b/inst/web/templates/footer.html
@@ -0,0 +1,7 @@
+<footer class="container-fluid mt-auto text-center">
+  <em>
+    Released under the
+    <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank">AGPLv3</a>
+    or later.
+  </em>
+</footer>
diff --git a/inst/web/templates/navbar.html b/inst/web/templates/navbar.html
new file mode 100644
index 0000000..d447fba
--- /dev/null
+++ b/inst/web/templates/navbar.html
@@ -0,0 +1,27 @@
+<nav class="navbar navbar-expand-sm">
+  <div class="container-fluid">
+    <!-- Project name and description. -->
+    <a class="navbar-brand text-primary" href="/">Rnaught Web</a>
+    <span class="navbar-text d-none d-md-block">
+      An estimation suite for <em>R</em><sub>0</sub>
+    </span>
+    <!-- Navigation toggler for smaller screens. -->
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-toggle">
+      <span class="glyphicon glyphicon-menu-hamburger text-primary"></span>
+    </button>
+    <!-- Navigation links. -->
+    <div class="collapse navbar-collapse justify-content-end" id="nav-toggle">
+      <div class="navbar-nav">
+        <a class="nav-link text-primary" href="https://MI2YorkU.github.io/Rnaught" target="_blank">
+          <span class="glyphicon glyphicon-book"></span> Documentation
+        </a>
+        <a class="nav-link text-primary" href="https://github.com/MI2Yorku/Rnaught" target="_blank">
+          <span class="glyphicon glyphicon-console"></span> Source
+        </a>
+        <a class="nav-link text-primary" href="https://doi.org/10.1371/journal.pone.0269306" target="_blank">
+          <span class="glyphicon glyphicon-education"></span> Article
+        </a>
+      </div>
+    </div>
+  </div>
+</nav>
diff --git a/inst/web/templates/tabs.html b/inst/web/templates/tabs.html
new file mode 100644
index 0000000..351b480
--- /dev/null
+++ b/inst/web/templates/tabs.html
@@ -0,0 +1,14 @@
+<nav class="nav nav-pills nav-fill">
+  <a class="nav-link rounded-0 active" data-bs-toggle="pill" href="#about">
+    About <span class="glyphicon glyphicon-info-sign"></span>
+  </a>
+  <a class="nav-link rounded-0" data-bs-toggle="pill" href="#data">
+    Data <span class="glyphicon glyphicon-list-alt"></span>
+  </a>
+  <a class="nav-link rounded-0" data-bs-toggle="pill" href="#estimation">
+    Estimation <span class="glyphicon glyphicon-random"></span>
+  </a>
+  <a class="nav-link rounded-0" data-bs-toggle="pill" href="#help">
+    Help <span class="glyphicon glyphicon-question-sign"></span>
+  </a>
+</nav>