Introduce introjs to show an app

vignettes/getting-started-with-teal.Rmd

@@ -89,10 +89,158 @@ Every `teal` application is composed of the following elements, all of which can
 
 ## Try the above app in `shinylive`
 
+```{r appintro, message=FALSE, warning=FALSE, include=FALSE}
+library(teal)
+library(shiny)
+
+app <- init(
+  data = teal_data(IRIS = iris, MTCARS = mtcars),
+  modules = modules(
+    example_module("Module 1"),
+    example_module("Module 2")
+  ),
+  filter = teal_slices(
+    teal_slice(dataname = "IRIS", varname = "Species", selected = "virginica")
+  )
+) |>
+  modify_title("My first teal application") |>
+  modify_header(tags$div(
+    tags$head(
+      tags$link(
+        rel = "stylesheet",
+        href = "https://unpkg.com/intro.js/introjs.css"
+      ),
+      tags$style(HTML("
+      .introjs-tooltip {
+        background-color: white !important;
+        border: 1px solid #ccc !important;
+        border-radius: 5px !important;
+        padding: 15px !important;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
+        min-width: 250px !important;
+        max-width: 400px !important;
+      }
+
+      .introjs-tooltip {
+        z-index: 10000000 !important;
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1 !important;
+        position: absolute !important;
+      }
+      .introjs-overlay {
+        z-index: 9999999 !important;
+        opacity: 0.8 !important;
+      }
+      .introjs-helperLayer {
+        z-index: 9999998 !important;
+      }
+      .introjs-tooltipbuttons {
+        display: block !important;
+      }
+      .introjs-button {
+        display: inline-block !important;
+      }
+    ")),
+      tags$script(
+        src = "https://unpkg.com/intro.js/intro.js"
+      ),
+      # nolint start line_length_linter.
+      tags$script(HTML('
+      $(document).on("shiny:connected", function() {
+        setTimeout(function() {
+          console.log("Starting intro.js tour");
+          introJs.tour().setOptions({
+            steps: [
+              {
+                intro: "Welcome! This short tour will walk you through the key features of this teal application. Click Next to get started."
+              },
+              {
+                element: "#teal-header",
+                intro: "This is the title of your teal application."
+              },
+              {
+                element: ".teal.dropdown-button",
+                intro: "Use this dropdown to switch between available analysis modules."
+              },
+              {
+                element: "#teal-teal_modules-nav-module_1-wrapper > div:first-child > div:first-child",
+                intro: "This breadcrumb shows your current location in the app and which analysis module is active."
+              },
+              {
+                element: "#teal-teal_modules-nav-module_1-data_summary_accordion",
+                intro: "The Active Data Summary gives you an overview of the datasets currently loaded in the application."
+              },
+              {
+                element: "#teal-teal_modules-nav-module_1-filter_panel-filters-main_filter_accordion",
+                intro: "Use the Filter Data area to subset your datasets and refine the data used by each analysis.<br><br><ul><li>Click the <b>+</b> button to add a new column to filter on.</li><li>Select which values to include or exclude from the dataset.</li><li>Click the <b>x</b> button next to a filter to remove it from the dataset.</li></ul>"
+              },
+              {
+                element: "#teal-teal_modules-nav-module_1-teal_module_ui > div.container-fluid.teal-widgets.standard-layout-wrapper > div > div > aside.sidebar",
+                intro: "Input parameters for the active analysis are displayed here. Adjust them to update the output."
+              },
+              {
+                element: "#teal-teal_modules-nav-module_1-teal_module_ui > div.container-fluid.teal-widgets.standard-layout-wrapper > div > div > div.main",
+                intro: "Plots, tables, and statistics generated by the active analysis are displayed in this area."
+              },
+              {
+                element: "#teal-teal_modules-nav-module_1-add_reporter_wrapper-report_add_wrapper",
+                intro: "Happy with the current analysis? Click Add to Report to save it for later export."
+              },
+              {
+                element: "#teal-reporter_menu_container",
+                intro: "Open the Report menu to view, edit, organize, and export all analyses you have added to your report."
+              },
+              {
+                element: "#teal-teal_modules-nav-module_1-source_code_wrapper-source_code-button",
+                intro: "Click Show R Code to view the underlying R code that generated the current analysis output."
+              },
+              {
+                element: "#teal-snapshot_manager_panel-show_snapshot_manager > span.icon",
+                intro: "Use the Snapshot Manager to save your current inputs and settings so you can easily recreate this analysis later."
+              },
+              {
+                element: "#teal-filter_manager_panel-show_filter_manager > span.icon",
+                intro: "The Filter Manager shows a matrix of all active filters and which modules each filter is applied to."
+              },
+              {
+                element: "#teal-footer-session_info-sessionInfo-button",
+                intro: "Click Session Info to view details about the current R version and loaded packages."
+              },
+              {
+                element: "#teal-footer-session_info-identifier",
+                intro: "This app identifier helps support teams locate and diagnose this specific instance of the application.",
+              },
+              {
+                intro: "That\'s the end of the tour! If anything was unclear, feel free to reach out for help.",
+                dontShowAgain: true
+              },
+            ],
+            showProgress: true,
+            showBullets: false,
+            exitOnOverlayClick: false,
+            doneLabel: "Done",
+            nextLabel: "Next →",
+            prevLabel: "← Back"
+          }).start();
+        }, 2000);
+      });
+    '))
+    ),
+    # nolint end.
+    h3("My first teal application")
+  )) |>
+  modify_footer(tags$div(a("Powered by teal", href = "https://insightsengineering.github.io/teal/latest-tag/")))
+
+if (interactive()) {
+  shinyApp(app$ui, app$server)
+}
+```
+
 ```{r shinylive_iframe, echo = FALSE, out.width = '150%', out.extra = 'style = "position: relative; z-index:1"', eval = requireNamespace("roxy.shinylive", quietly = TRUE) && knitr::is_html_output() && identical(Sys.getenv("IN_PKGDOWN"), "true")}
 code <- paste0(c(
   "interactive <- function() TRUE",
-  knitr::knit_code$get("app")
+  knitr::knit_code$get("appintro")
 ), collapse = "\n")
 url <- roxy.shinylive::create_shinylive_url(code)
 knitr::include_url(url, height = "800px")