diff --git a/README.md b/README.md index 32d1d62..9bf4c55 100644 --- a/README.md +++ b/README.md @@ -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)** diff --git a/app.R b/app.R index afdbc45..de7b4ea 100644 --- a/app.R +++ b/app.R @@ -20,6 +20,7 @@ library(stringr) library(stringi) library(dplyr) library(MASS) +library(rintrojs) source('conf.R') source('common.R') @@ -42,6 +43,7 @@ if (file.exists(piwik_code_file)) { ui <- function(request) { material_page( + introjsUI(), # title # title = app_title, nav_bar_color = "transparent", @@ -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", @@ -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(), @@ -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') diff --git a/common.R b/common.R index f1ad98a..08d1980 100644 --- a/common.R +++ b/common.R @@ -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 diff --git a/tab_design.R b/tab_design.R index 89d631d..1fe2ced 100644 --- a/tab_design.R +++ b/tab_design.R @@ -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"), @@ -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 diff --git a/tab_inspect.R b/tab_inspect.R index d1a96ff..09817bd 100644 --- a/tab_inspect.R +++ b/tab_inspect.R @@ -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') ) @@ -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, @@ -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"), @@ -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") ) ) ) diff --git a/www/custom.css b/www/custom.css index ea0c82c..2fa8bdf 100644 --- a/www/custom.css +++ b/www/custom.css @@ -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; diff --git a/www/get_started.html b/www/get_started.html index 0aa9e4d..c8cbfee 100644 --- a/www/get_started.html +++ b/www/get_started.html @@ -1,4 +1,4 @@ -
This web application allows you to easily simulate and diagnose designs following the DeclareDesign framework. +
This web application allows you to easily simulate and diagnose designs following the DeclareDesign framework. For a quick tour, use the "Start tutorial" button on the top right.

DESIGN TAB