Skip to content

Add help system with IntroJS #188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sisi-huang wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Add help system with IntroJS #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9794319
add introjs into shiny
sisi-huang Aug 5, 2019
de7a959
load the essential package
sisi-huang Aug 8, 2019
466c344
Merge branch 'master' into issue_144
sisi-huang Aug 8, 2019
354337e
update get_started messages
sisi-huang Aug 12, 2019
843b8f2
update the intro descriptions
sisi-huang Aug 20, 2019
24bcad8
move tutorial button to top right
Aug 21, 2019
265efd7
better position for tutorial step 3
Aug 21, 2019
932ed27
Merge branch 'master' into issue_144
sisi-huang Oct 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,10 @@ Authors:
- htmlwidgets **1.3**
- htmltools **0.3.6**
- digest
- rintrojs
- MASS


Optional for parallel processing during simulation:

- future **<= 1.12.0 (>= 1.13.0 produces problems)**
Expand Down
20 changes: 18 additions & 2 deletions app.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ library(stringr)
library(stringi)
library(dplyr)
library(MASS)
library(rintrojs)

source('conf.R')
source('common.R')
Expand All @@ -42,6 +43,7 @@ if (file.exists(piwik_code_file)) {

ui <- function(request) {
material_page(
introjsUI(),
# title
# title = app_title,
nav_bar_color = "transparent",
Expand All @@ -59,10 +61,14 @@ ui <- function(request) {
),
shinyjs::useShinyjs(),


bookmarkButton("SHARE", title = "Share the status of your design and diagnoses"),
div(
class="btns_top_right",
actionButton("intro_tutorial", label = "Start tutorial"),
bookmarkButton("SHARE", title = "Share the status of your design and diagnoses")
),

# tabs
introBox(
material_tabs(
tabs = c(
"Design" = "tab_design",
Expand All @@ -71,6 +77,9 @@ ui <- function(request) {
color = "blue"

),
data.step = 13,
data.intro = "Please switch to diagnose tab, click on 'DIAGNOSE'",
data.position = "left"),

# "Design" tab
useShinyalert(),
Expand Down Expand Up @@ -110,6 +119,13 @@ server <- function(input, output, session) {

### observers global events ###

# tutorial button clicked
observeEvent(input$intro_tutorial,{
introjs(session, options = list("nextLabel"="next",
"prevLabel"="back",
"skipLabel"="skip"))
})

# legal notice button clicked
observeEvent(input$show_legal_notice, {
alert_with_content_from_html_file('Legal notice', 'www/legal_notice.html', className = 'wide')
Expand Down
2 changes: 1 addition & 1 deletion common.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ library(digest)
library(DeclareDesign)


# Append `v` to list `l` and return the resulting list. Appending is slow, don't use that often!
# Append `v` to list `l` and return the resulting list. Appending is slow, don't use that often!
list_append <- function(l, v) {
l[[length(l)+1]] <- v
l
Expand Down
83 changes: 66 additions & 17 deletions tab_design.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,40 +24,88 @@ designTabUI <- function(id, label = 'Design') {
# tagList("Read about the library ", a("here", href="https://declaredesign.org/library/")),
div(style="text-align: center;",
# add a selectbox to choose the design from DesignLibrary
uiOutput(nspace("import_design_lib_id")),
introjsUI(),
introBox(
uiOutput(nspace("import_design_lib_id")),
data.step = 1,
data.intro = "Choose the design you want"
),

introBox(
actionButton(nspace("import_from_design_lib"),
label = "Load",
disabled = "disabled"),


actionButton(inputId='learn_more', label= NULL,
icon = icon("question-circle"),
style = "text-align: center; padding-left: 8px; padding-right: 8px;",
onclick = "window.open('https://declaredesign.org/library', '_blank')")
style = "text-align: center; padding-left: 8px; padding-right: 8px",
onclick = "window.open('https://declaredesign.org/library', '_blank')"),
data.step = 2,
data.intro = "Click on 'LOAD' button to load the design you selected")

)
),
# show designer parameters if a design was loaded
hidden(div(id = nspace('design_params_panel_wrapper'),
material_card("Set design parameters",
uiOutput(nspace('design_vignette')),
br(),
textInput(nspace('design_arg_design_name'), 'Design name'),
conditionalPanel(paste0("output['", nspace('design_supports_fixed_arg'), "'] != ''"),
div(style="text-align: right;", uiOutput(nspace('fix_toggle_btn')))
),
uiOutput(nspace("design_parameters")) # display *all* arguments of an imported design
)
introBox(
introBox(
uiOutput(nspace('design_vignette')),
data.step = 4,
data.intro = "Check out more details about the design"
),

br(),
textInput(nspace('design_arg_design_name'), 'Design name'),
introBox(


conditionalPanel(paste0("output['", nspace('design_supports_fixed_arg'), "'] != ''"),
div(style="text-align: right;", uiOutput(nspace('fix_toggle_btn')))
),
data.step = 5,
data.intro = "Once you click on 'FIX ALL', the values of arguments cannot be changed in the 'Diagnose' tab,
of course, you can unfix all the arguments unless you click on 'UNFIX ALL'"),
uiOutput(nspace("design_parameters")), # display *all* arguments of an imported design
data.step = 3,
data.intro = "Display all arguments of the imported design and you can change the values if you want",
data.position = 'right'
)
)
))
),
material_column( # center: design output
width = 9,
introBox(
uiOutput(nspace("load_design_info")),
data.step = 6,
data.intro = "Brief description of design"),

material_card("Download",
downloadButton(nspace('download_r_script'), label = 'R code', disabled = 'disabled'),
downloadButton(nspace('download_rds_obj'), label = 'Design as RDS file', disabled = 'disabled')),
introBox(
downloadButton(nspace('download_r_script'), label = 'R code', disabled = 'disabled'),
downloadButton(nspace('download_rds_obj'), label = 'Design as RDS file', disabled = 'disabled'),
data.step = 7,
data.intro = "Download R script & RDS file if you want"
)
),
bsCollapse(id=nspace('sections_container'), multiple = TRUE,
bsCollapsePanel('Warnings or errors', uiOutput(nspace("section_messages"))),
bsCollapsePanel('Summary', uiOutput(nspace("section_summary"))),
bsCollapsePanel('Code output', uiOutput(nspace('section_design_code'))),
bsCollapsePanel('Simulated data',

bsCollapsePanel(introBox('Warnings or errors',
data.step = 8,
data.intro = "Check out the warnings or errors, if the panel is open"), uiOutput(nspace("section_messages"))),
bsCollapsePanel(introBox('Summary',
data.step = 9,
data.intro = "Check out the summary of design, you will see how you set the parameters in the design"), uiOutput(nspace("section_summary"))),
bsCollapsePanel(introBox('Code output',
data.step = 10,
data.intro = "Check out the output of code, which can be applied independently"
), uiOutput(nspace('section_design_code'))),
bsCollapsePanel(introBox('Simulated data',
data.step = 11,
data.intro = "Check out the simulated data of design"
),
p("The following table shows a single draw of the data."),
actionButton(nspace("simdata_redraw"), label = "Redraw data", disabled = "disabled"),
downloadButton(nspace("simdata_download"), label = "Download data", disabled = "disabled"),
Expand Down Expand Up @@ -354,6 +402,7 @@ designTab <- function(input, output, session) {
if (!is.null(input$import_design_library)) {
load_designer(input$import_design_library)
}

})

# input observer for click on "Fix/Unfix all" button
Expand Down
27 changes: 19 additions & 8 deletions tab_inspect.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,12 @@ inspectTabUI <- function(id, label = 'Inspect') {
material_column( # left: design parameters for comparison
width = 3,
material_card("Compare design parameters",
conditionalPanel(paste0("output['", nspace_design('design_loaded'), "'] != ''"),
uiOutput(nspace("compare_design_parameters")) # display not-fixed parameters of a design / allow to define sequences
),
introjsUI(),
conditionalPanel(paste0("output['", nspace_design('design_loaded'), "'] != ''"),
introBox(uiOutput(nspace("compare_design_parameters")),
data.step = 14,
data.intro = "Display changable parameters of the imported design, you can vary the argument if you want" # display not-fixed parameters of a design / allow to define sequences
)),
conditionalPanel(paste0("output['", nspace_design('design_loaded'), "'] == ''"),
p('Load a design first')
)
Expand All @@ -43,7 +46,7 @@ inspectTabUI <- function(id, label = 'Inspect') {
material_column( # center: inspection output
width = 6,
bsCollapse(id = nspace('inspect_sections_simconf_container'),
bsCollapsePanel('Configure simulations',
bsCollapsePanel(introBox('Configure simulations', data.step = 16, data.intro = "Open the panel and set the Num. of simulation and Num.of bootstraps you want"),
checkboxInput(nspace('simconf_force_rerun'), label = 'Always re-run simulations (disable cache)'),
numericInput(nspace("simconf_sim_num"), label = "Num. of simulations",
value = default_diag_sims,
Expand All @@ -55,13 +58,18 @@ inspectTabUI <- function(id, label = 'Inspect') {
conditionalPanel(paste0("output['", nspace('all_design_args_fixed'), "'] === false"),
material_card("Diagnostic plots",
uiOutput(nspace('plot_message')),
div(actionButton(nspace('update_plot'), 'Run diagnoses'), style = "margin-bottom:10px"),
introBox(div(actionButton(nspace('update_plot'), 'Run diagnoses'), style = "margin-bottom:10px"),
data.step = 17,
data.intro = "click on it if you want the diagnostic plot"),
uiOutput(nspace('plot_output')),
introBox(
downloadButton(nspace("download_plot"), label = "Download plot", disabled = "disabled"),
downloadButton(nspace("download_plot_code"), label = "Download plot code", disabled = "disabled")
downloadButton(nspace("download_plot_code"), label = "Download plot code", disabled = "disabled"),
data.step = 18,
data.intro = "Download the plot & code if you want")
),
bsCollapse(id = nspace('inspect_sections_container'),
bsCollapsePanel('Diagnosis',
bsCollapsePanel(introBox('Diagnosis', data.step = 19, data.intro = "Check out the diagnosis results"),
uiOutput(nspace("section_diagnosands_message")),
dataTableOutput(nspace("section_diagnosands_table")),
checkboxInput(nspace("reshape_diagnosands"),
Expand All @@ -83,7 +91,10 @@ inspectTabUI <- function(id, label = 'Inspect') {
),
material_column( # right: plot configuration
width = 3,
uiOutput(nspace("plot_conf"))
introBox(
uiOutput(nspace("plot_conf")),
data.step = 15,
data.intro = "Change any plot parameters you want, e.g show CI or not, display bias of diagnosand or other criteria on the plot")
)
)
)
Expand Down
12 changes: 11 additions & 1 deletion www/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,22 @@ body {
position: relative;
}

body > button.btn.btn-default.action-button.shiny-bound-input { /** bookmark button */
div.btns_top_right {
position: absolute;
top: 0;
right: 0;
}

div.btns_top_right button {
font-size: 80%;
padding-left: 0.5rem;
padding-right: 0.5rem;
}

div.btns_top_right button i {
font-size: 80%;
}

pre.share-url {
margin-top: 15px;
font-size: 13px;
Expand Down
2 changes: 1 addition & 1 deletion www/get_started.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<dl> This web application allows you to easily simulate and diagnose designs following the <a href = 'http://declaredesign.org'>DeclareDesign</a> framework.
<dl> This web application allows you to easily simulate and diagnose designs following the <a href = 'http://declaredesign.org'>DeclareDesign</a> framework. <strong>For a quick tour, use the "Start tutorial" button on the top right.</strong>
<br/><br/>
<dt>DESIGN TAB</dt>
<br/>
Expand Down