Introduce introjs to show an app #1702
Merged
Merged
Conversation
llrs-roche
marked this pull request as ready for review
March 6, 2026 13:05
Contributor
|
Code Coverage SummaryDiff against mainResults for commit: 41c2cbd Minimum allowed coverage is ♻️ This comment has been updated with latest results |
Contributor
Unit Tests Summary 1 files 30 suites 2m 25s ⏱️ Results for commit 41c2cbd. ♻️ This comment has been updated with latest results. |
Contributor
Unit Test Performance Difference
Additional test case details
Results for commit 58dde17 ♻️ This comment has been updated with latest results. |
…al into 1680_introjs@main
Contributor
|
I'm trying to add my code as a review but it creates a really long comment section and hard to follow. Therefore, I'll just put my review as a comment. I think the intro looks good and simple enough, however, I would like to suggest on improving the flow (starting from the teal app title).
Here's the full app code: Codelibrary(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/")))
shinyApp(app$ui, app$server) |
donyunardi
requested changes
Mar 11, 2026
donyunardi
left a comment
donyunardi
left a comment
Contributor
There was a problem hiding this comment.
See previous comment.
Contributor
Author
|
I saw you unified the introduction about filters, I like that. |
donyunardi
approved these changes
Mar 11, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request
Fixes #1680
Uses the first app to show how a teal app works.
WIP: Some ids do not work well.
I couldn't make an app to stop do something and continue on the next step.