Shiny進階：Busy Button

seasonley 發布于2019-08-20 17:53 / 2573人閱讀

摘要：當點擊一個按鈕后，按鈕狀態轉為，同時顯示處于計算狀態計算成功后，返回執行成功額標識計算失敗時，返回具體的失敗信息。源代碼的鏈接請點這里本文對這段代碼進行詳細地解讀，需要讀者有一定的和基礎。

背景

在一個Shiny App中，如果點擊一個按鈕，往往意味著一些R代碼會被執行。如果這段代碼執行時間很短，用戶體驗不會受到影響；如果這段代碼執行時間很長，界面上如果不提供給用戶一些即時的反饋，就會讓用戶感到困惑。

本文從Github上找到了作者daattali的一個作品，專門用來提升長時運算按鈕的點擊體驗。當點擊一個按鈕后，按鈕狀態轉為disabled，同時顯示處于計算狀態；計算成功后，返回執行成功額標識；計算失敗時，返回具體的失敗信息。源代碼的鏈接請點這里

本文對這段代碼進行詳細地解讀，需要讀者有一定的HTML和shinyjs基礎。

界面增強

withBusyIndicatorUI <- function(button) {
  id <- button[["attribs"]][["id"]]  # 使用str(actionButton("test", "test"))查看Button的結構，是一個長度為3的list，其中一個元素是名為attribs的list，里面包含id、type和class屬性
  div(
    `data-for-btn` = id, # 為div創建一個attribute，取值為button id，這樣方便CSS Selector對其進行查詢
    button, # 等價于 
    span(
      class = "btn-loading-container",
      hidden(
        strong("loading...", class = "btn-loading-indicator"),,
        icon("check", class = "btn-done-indicator")
      )
    ), # 內聯元素，會跟在button的右側顯示，初始狀態為隱藏，用于顯示正在執行和執行成功
    hidden(
      div(class = "btn-err",
          div(icon("exclamation-circle"),
              tags$b("Error: "),
              span(class = "btn-err-msg")
          )
      )
    ) # 塊級元素，會在button的下側顯示，初始狀態為隱藏，用于顯示執行錯誤的消息
  )
}

后端處理

withBusyIndicatorServer <- function(buttonId, expr) {
  # UX stuff: show the "busy" message, hide the other messages, disable the button
  # 構造CSS選擇器，根據attribute定位按鈕，根據class獲取按鈕所處的狀態
  loadingEl <- sprintf("[data-for-btn=%s] .btn-loading-indicator", buttonId) 
  doneEl <- sprintf("[data-for-btn=%s] .btn-done-indicator", buttonId)
  errEl <- sprintf("[data-for-btn=%s] .btn-err", buttonId)
  # 使按鈕失效
  shinyjs::disable(buttonId)
  # 顯示正在執行部分
  shinyjs::show(selector = loadingEl)
  # 隱藏執行成功部分
  shinyjs::hide(selector = doneEl)
  # 隱藏執行失敗部分
  shinyjs::hide(selector = errEl)
  # 執行完成后需要調用的函數：使按鈕有效，隱藏正在執行部分
  on.exit({
    shinyjs::enable(buttonId)
    shinyjs::hide(selector = loadingEl)
  })
  
  # Try to run the code when the button is clicked and show an error message if
  # an error occurs or a success message if it completes
  tryCatch({
    # 執行按鈕點擊后的expr
    value <- expr
    # 顯示執行成功
    shinyjs::show(selector = doneEl)
    # 延時兩秒后，隱藏執行成功
    shinyjs::delay(2000, shinyjs::hide(selector = doneEl, anim = TRUE, animType = "fade",
                     time = 0.5))
    # 返回執行結果
    value
  }, error = function(err) { errorFunc(err, buttonId) })
}

errorFunc <- function(err, buttonId) {
  errEl <- sprintf("[data-for-btn=%s] .btn-err", buttonId)
  errElMsg <- sprintf("[data-for-btn=%s] .btn-err-msg", buttonId)
  errMessage <- err$message
  shinyjs::html(html = errMessage, selector = errElMsg)
  shinyjs::show(selector = errEl, anim = TRUE, animType = "fade")
}

Demo

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  tags$style(appCSS),
  selectInput("select", "Select an option",
              c("This one is okay" = "ok",
                "This will give an error" = "error")),
  
  # Wrap the button in the function `withBusyIndicatorUI()`
  withBusyIndicatorUI(
    actionButton(
      "uploadFilesBtn",
      "Process data",
      class = "btn-primary"
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$uploadFilesBtn, {
    # When the button is clicked, wrap the code in a call to `withBusyIndicatorServer()`
    withBusyIndicatorServer("uploadFilesBtn", {
      Sys.sleep(1)
      if (input$select == "error") {
        stop("choose another option")
      }
    })
  })
}

shinyApp(ui = ui, server = server)

云服務器 GPU云服務器 busy Shiny xampp apache busy 服務器shiny

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83944.html

Docker-Shiny使用筆記1

摘要：之前只是聽說是一個容器技術，微型虛擬機，然后在這之前并沒有接觸過，所以不得不硬著頭皮看英文的幫助文檔，借助的這個好用來做筆記，充當專欄文章。英文好的同學可以按照這個教程來下載問題我默認看這篇文章的都是黨。。寫在前面的話在HarryZhu寫的系列的docker文章后，我也開始心動了，準備嘗試一下。周末在家下了半天，終于下載成功了，然后也跑起來。Docker之前只是聽說是一個容器技術，...

darkerXi 2019-06-28 15:08 評論0 收藏0
[原]打造數據產品的快速原型：Shiny的Docker之旅

摘要：使得非傳統程序員的使用者不必依賴于前端后端工程師就可以自己依照業務完成一些簡單的數據可視化工作，快速驗證想法的可靠性。本文以上的的新主機為例。概述本文將介紹如何通過Docker+Shiny-Server技術極速打造Web開發，并通過實戰案例進行演示。為什么使用Shiny Shiny是R中的一種Web開發框架，使得R的使用者不必太了解css、js只需要了解一些html的知識就可以快...

seal_de 2019-06-28 15:03 評論0 收藏0
[原]文檔定義應用：數據科學的文檔革命

摘要：對于數據科學的研究可以說已經是本文我將介紹如何以文檔定義應用的方式成為數據科學中的標準交付。參考前文解密的數據科學部門如果構建知識倉庫，作為一個謝大大的死忠，我很自然選擇了作為我文檔輸出的首選工具。 showImg(https://segmentfault.com/img/remote/1460000006760433?w=423&h=426); 概述隨著近年來，Rstudio 通過...

wh469012917 2019-07-25 10:22 評論0 收藏0
[原] 容器定義應用：數據科學的容器革命

摘要：概述隨著容器化技術的興起，數據科學現在最大的一場運動已經不是由一個新的算法或者統計方法發起的了，而是來自的容器化技術。本文將介紹利用容器技術如何加速數據科學在生產環境中的實際應用。 showImg(https://segmentfault.com//img/bVxzYL); 概述隨著容器化技術的興起，數據科學現在最大的一場運動已經不是由一個新的算法或者統計方法發起的了，而是來自Doc...

alin 2019-07-25 10:29 評論0 收藏0
[原] 容器定義應用：數據科學的容器革命

摘要：概述隨著容器化技術的興起，數據科學現在最大的一場運動已經不是由一個新的算法或者統計方法發起的了，而是來自的容器化技術。本文將介紹利用容器技術如何加速數據科學在生產環境中的實際應用。 showImg(https://segmentfault.com//img/bVxzYL); 概述隨著容器化技術的興起，數據科學現在最大的一場運動已經不是由一個新的算法或者統計方法發起的了，而是來自Doc...

novo 2019-06-28 15:12 評論0 收藏0