From ca9184e8152e515283783d0c228ac4145e8d44d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Llu=C3=ADs=20Revilla=20Sancho?= Date: Mon, 2 Mar 2026 15:58:28 +0100 Subject: [PATCH 1/5] Use the same first intro to use introjs to provide the introduction --- vignettes/getting-started-with-teal.Rmd | 149 +++++++++++++++++++++++- 1 file changed, 148 insertions(+), 1 deletion(-) diff --git a/vignettes/getting-started-with-teal.Rmd b/vignettes/getting-started-with-teal.Rmd index 751c80dfac..aca9ccfca4 100644 --- a/vignettes/getting-started-with-teal.Rmd +++ b/vignettes/getting-started-with-teal.Rmd @@ -89,10 +89,157 @@ 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 = "setosa") + ) +) |> + 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" + ), + tags$script(HTML(' + $(document).on("shiny:connected", function() { + setTimeout(function() { + console.log("Starting intro.js tour"); + introJs.tour().setOptions({ + steps: [ + { + intro: "Welcome! This tour will guide you through the key features of this Teal application." + }, + { + element: "#teal-teal_modules-nav-module_1-data_summary_accordion", + intro: "Data Summary: An overview of the datasets currently loaded in the application." + }, + { + element: "#teal-teal_modules-nav-module_1-filter_panel-filters-main_filter_accordion > div > div.accordion-header > button > div.accordion-title", + intro: "Filter Data: Use this area to subset your data and refine the analysis data." + }, + { + element: "#teal-teal_modules-nav-module_1-teal_module_ui > div.container-fluid.teal-widgets.standard-layout-wrapper > div > div > aside.sidebar", + intro: "Analysis input: Input parameters for the analysis will be shown here." + }, + { + element: "#teal-teal_modules-nav-module_1-teal_module_ui > div.container-fluid.teal-widgets.standard-layout-wrapper > div > div > div.main", + intro: "Analysis output: Plots, tables, and statistics will be rendered here." + }, + { + element: "#teal-snapshot_manager_panel-show_snapshot_manager > span.icon", + intro: "Snapshot Manager: Save your current inputs and settings to easily recreate a specific analysis later." + }, + { + element: "#teal-teal_modules-nav-module_1-filter_panel-filters-IRIS-filter_util_icons > a", + intro: "Add Filters: Incorporate additional variables to your filter criteria to dynamically update your results." + }, + { + element: "#teal-filter_manager_panel-show_filter_manager > span.icon", + intro: "Filter Manager: View a matrix of all active filters and see which modules they are currently affecting." + }, + { + element: ".teal.dropdown-button", + intro: "Module Navigation: Click here to switch between different analysis types and modules." + }, + { + element: "#teal-teal_modules-active_module_id > div.dropdown.nav-item-custom > div", + intro: "Breadcrumbs: This indicator tracks your location and shows which analysis is currently active." + }, + { + element: "#teal-teal_modules-nav-module_1-add_reporter_wrapper-report_add_wrapper", + intro: "Report Previewer: Add the current analysis to your report for later export." + }, + { + element: "#teal-reporter_menu_container", + intro: "Reporting Pane: Access, edit, organize and export all the analyses added to your custom report." + }, + { + element: "#teal-teal_modules-nav-module_1-source_code_wrapper-source_code-button", + intro: "Show Source Code: Review the underlying R code used to generate this specific output of the active analysis." + }, + { + element: "#teal-footer-session_info-sessionInfo-button", + intro: "Session Info: View technical details regarding the R version and package environment." + }, + { + element: "#teal-footer-session_info-identifier", + intro: "App Identifier: These helps support teams identify this specific application instance and environment.", + }, + { + intro: "Thanks for checking the introduction. Let us know if something is unclear.", + dontShowAgain: true + } + ], + showProgress: true, + showBullets: false, + exitOnOverlayClick: false, + doneLabel: "Done", + nextLabel: "Next →", + prevLabel: "← Back" + }).start(); + }, 2000); + }); + ')) + ), + 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") From ff2813ec8603ccc5cd689f01516f65cec06a8478 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Llu=C3=ADs=20Revilla=20Sancho?= Date: Fri, 6 Mar 2026 11:59:33 +0100 Subject: [PATCH 2/5] Style --- vignettes/getting-started-with-teal.Rmd | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/vignettes/getting-started-with-teal.Rmd b/vignettes/getting-started-with-teal.Rmd index aca9ccfca4..a28a27d529 100644 --- a/vignettes/getting-started-with-teal.Rmd +++ b/vignettes/getting-started-with-teal.Rmd @@ -181,7 +181,7 @@ app <- init( intro: "Add Filters: Incorporate additional variables to your filter criteria to dynamically update your results." }, { - element: "#teal-filter_manager_panel-show_filter_manager > span.icon", + element: "#teal-filter_manager_panel-show_filter_manager > span.icon", intro: "Filter Manager: View a matrix of all active filters and see which modules they are currently affecting." }, { @@ -228,7 +228,8 @@ app <- init( }); ')) ), - h3("My first teal application"))) |> + h3("My first teal application") + )) |> modify_footer(tags$div(a("Powered by teal", href = "https://insightsengineering.github.io/teal/latest-tag/"))) if (interactive()) { From 217061ba4623014010e18788c10ca77507355316 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Llu=C3=ADs=20Revilla=20Sancho?= Date: Fri, 6 Mar 2026 13:58:50 +0100 Subject: [PATCH 3/5] Update selectors --- vignettes/getting-started-with-teal.Rmd | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/vignettes/getting-started-with-teal.Rmd b/vignettes/getting-started-with-teal.Rmd index a28a27d529..96d1060740 100644 --- a/vignettes/getting-started-with-teal.Rmd +++ b/vignettes/getting-started-with-teal.Rmd @@ -93,8 +93,6 @@ Every `teal` application is composed of the following elements, all of which can library(teal) library(shiny) - - app <- init( data = teal_data(IRIS = iris, MTCARS = mtcars), modules = modules( @@ -161,7 +159,7 @@ app <- init( intro: "Data Summary: An overview of the datasets currently loaded in the application." }, { - element: "#teal-teal_modules-nav-module_1-filter_panel-filters-main_filter_accordion > div > div.accordion-header > button > div.accordion-title", + element: "#teal-teal_modules-nav-module_1-filter_panel-filters-main_filter_accordion > div > div.accordion-header", intro: "Filter Data: Use this area to subset your data and refine the analysis data." }, { @@ -177,7 +175,7 @@ app <- init( intro: "Snapshot Manager: Save your current inputs and settings to easily recreate a specific analysis later." }, { - element: "#teal-teal_modules-nav-module_1-filter_panel-filters-IRIS-filter_util_icons > a", + element: "#teal-teal_modules-nav-module_1-filter_panel-filters-IRIS-dataset_filter_accordion > div > div.accordion-header > button", intro: "Add Filters: Incorporate additional variables to your filter criteria to dynamically update your results." }, { From 7eb4b0ba6eaff15f27f5cd493cd9e7e37f8583b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Llu=C3=ADs=20Revilla=20Sancho?= Date: Fri, 6 Mar 2026 15:03:53 +0100 Subject: [PATCH 4/5] Avoid lintr issues for line length --- vignettes/getting-started-with-teal.Rmd | 2 ++ 1 file changed, 2 insertions(+) diff --git a/vignettes/getting-started-with-teal.Rmd b/vignettes/getting-started-with-teal.Rmd index 96d1060740..10ef3b9599 100644 --- a/vignettes/getting-started-with-teal.Rmd +++ b/vignettes/getting-started-with-teal.Rmd @@ -145,6 +145,7 @@ app <- init( 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() { @@ -226,6 +227,7 @@ app <- init( }); ')) ), + # nolint end. h3("My first teal application") )) |> modify_footer(tags$div(a("Powered by teal", href = "https://insightsengineering.github.io/teal/latest-tag/"))) From 41c2cbdfcceb52ea37a67adfc00e8969a10befcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Llu=C3=ADs=20Revilla=20Sancho?= Date: Wed, 11 Mar 2026 09:31:48 +0100 Subject: [PATCH 5/5] Update app --- vignettes/getting-started-with-teal.Rmd | 60 ++++++++++++------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/vignettes/getting-started-with-teal.Rmd b/vignettes/getting-started-with-teal.Rmd index 10ef3b9599..ebd3f0fb2e 100644 --- a/vignettes/getting-started-with-teal.Rmd +++ b/vignettes/getting-started-with-teal.Rmd @@ -100,7 +100,7 @@ app <- init( example_module("Module 2") ), filter = teal_slices( - teal_slice(dataname = "IRIS", varname = "Species", selected = "setosa") + teal_slice(dataname = "IRIS", varname = "Species", selected = "virginica") ) ) |> modify_title("My first teal application") |> @@ -153,68 +153,68 @@ app <- init( introJs.tour().setOptions({ steps: [ { - intro: "Welcome! This tour will guide you through the key features of this Teal application." + intro: "Welcome! This short tour will walk you through the key features of this teal application. Click Next to get started." }, { - element: "#teal-teal_modules-nav-module_1-data_summary_accordion", - intro: "Data Summary: An overview of the datasets currently loaded in the application." + element: "#teal-header", + intro: "This is the title of your teal application." }, { - element: "#teal-teal_modules-nav-module_1-filter_panel-filters-main_filter_accordion > div > div.accordion-header", - intro: "Filter Data: Use this area to subset your data and refine the analysis data." + element: ".teal.dropdown-button", + intro: "Use this dropdown to switch between available analysis modules." }, { - element: "#teal-teal_modules-nav-module_1-teal_module_ui > div.container-fluid.teal-widgets.standard-layout-wrapper > div > div > aside.sidebar", - intro: "Analysis input: Input parameters for the analysis will be shown here." + 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-teal_module_ui > div.container-fluid.teal-widgets.standard-layout-wrapper > div > div > div.main", - intro: "Analysis output: Plots, tables, and statistics will be rendered here." + 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-snapshot_manager_panel-show_snapshot_manager > span.icon", - intro: "Snapshot Manager: Save your current inputs and settings to easily recreate a specific analysis later." + 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.

  • Click the + button to add a new column to filter on.
  • Select which values to include or exclude from the dataset.
  • Click the x button next to a filter to remove it from the dataset.
" }, { - element: "#teal-teal_modules-nav-module_1-filter_panel-filters-IRIS-dataset_filter_accordion > div > div.accordion-header > button", - intro: "Add Filters: Incorporate additional variables to your filter criteria to dynamically update your results." + 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-filter_manager_panel-show_filter_manager > span.icon", - intro: "Filter Manager: View a matrix of all active filters and see which modules they are currently affecting." + 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.dropdown-button", - intro: "Module Navigation: Click here to switch between different analysis types and modules." + 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-teal_modules-active_module_id > div.dropdown.nav-item-custom > div", - intro: "Breadcrumbs: This indicator tracks your location and shows which analysis is currently active." + 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-add_reporter_wrapper-report_add_wrapper", - intro: "Report Previewer: Add the current analysis to your report for later export." + 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-reporter_menu_container", - intro: "Reporting Pane: Access, edit, organize and export all the analyses added to your custom report." + 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-teal_modules-nav-module_1-source_code_wrapper-source_code-button", - intro: "Show Source Code: Review the underlying R code used to generate this specific output of the active analysis." + 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: "Session Info: View technical details regarding the R version and package environment." + intro: "Click Session Info to view details about the current R version and loaded packages." }, { element: "#teal-footer-session_info-identifier", - intro: "App Identifier: These helps support teams identify this specific application instance and environment.", + intro: "This app identifier helps support teams locate and diagnose this specific instance of the application.", }, { - intro: "Thanks for checking the introduction. Let us know if something is unclear.", + 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,