From 79adb128c76d9add4c3659fd86c38c9cf24cfe2d Mon Sep 17 00:00:00 2001
From: Naeem Model <me@nmode.ca>
Date: Wed, 29 Jan 2025 22:39:36 +0000
Subject: [PATCH] Update web app help tab and add demo video

---
 inst/web/templates/content/help.html                 | 8 +++++++-
 inst/web/templates/content/help/demo-video.html      | 3 +++
 inst/web/templates/content/help/panel.html           | 4 ++--
 inst/web/templates/content/help/serial-interval.html | 7 ++++---
 4 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 inst/web/templates/content/help/demo-video.html

diff --git a/inst/web/templates/content/help.html b/inst/web/templates/content/help.html
index df4e887..fe12010 100644
--- a/inst/web/templates/content/help.html
+++ b/inst/web/templates/content/help.html
@@ -1,8 +1,14 @@
 <div class="accordion accordion-flush" id="help-accordion">
+  {{
+    htmlTemplate("templates/content/help/panel.html",
+      id = "demo-video",
+      header = "Demo video"
+    )
+  }}
   {{
     htmlTemplate("templates/content/help/panel.html",
       id = "serial-interval",
-      header = "What is the serial interval?"
+      header = "What is the serial interval (SI)?"
     )
   }}
 </div>
diff --git a/inst/web/templates/content/help/demo-video.html b/inst/web/templates/content/help/demo-video.html
new file mode 100644
index 0000000..d59766a
--- /dev/null
+++ b/inst/web/templates/content/help/demo-video.html
@@ -0,0 +1,3 @@
+<div class="ratio ratio-16x9">
+  <video src="https://files.catbox.moe/1ho8b7.mp4" type="video/mp4" controls></video>
+</div>
diff --git a/inst/web/templates/content/help/panel.html b/inst/web/templates/content/help/panel.html
index 9eb6e2e..e6a256a 100644
--- a/inst/web/templates/content/help/panel.html
+++ b/inst/web/templates/content/help/panel.html
@@ -1,10 +1,10 @@
 <div class="accordion-item">
   <h2 class="accordion-header">
-    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#{{ id }}">
+    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#help-{{ id }}">
       {{ header }}
     </button>
   </h2>
-  <div id="{{ id }}" class="accordion-collapse collapse" data-bs-parent="#help-accordion">
+  <div id="help-{{ id }}" class="accordion-collapse collapse" data-bs-parent="#help-accordion">
     <div class="accordion-body">
       {{ htmlTemplate(paste0("templates/content/help/", id, ".html")) }}
     </div>
diff --git a/inst/web/templates/content/help/serial-interval.html b/inst/web/templates/content/help/serial-interval.html
index e061115..be17d95 100644
--- a/inst/web/templates/content/help/serial-interval.html
+++ b/inst/web/templates/content/help/serial-interval.html
@@ -1,7 +1,8 @@
-<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).
+  The <a href="https://en.wikipedia.org/wiki/Serial_interval" target="_blank">serial interval (SI)</a> is a parameter
+  required by most of the estimators, and can also be estimated by some of them (if not specified). For the latter, "—"
+  is reported in the "Serial interval" column of the estimates table, and the estimated value is shown next to the
+  <em>R</em><sub>0</sub> result(s) as "(SI = ...)".
 </p>
 <p>
   The SI is defined as the average time between successive infections in a chain of transmission (i.e., the time between
-- 
2.50.1