added plot loading spinner. closes #22

ParkerICI · Nov 9, 2018 · c37fc42 · c37fc42
1 parent 6174802
commit c37fc42
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 12 deletions.
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -1,7 +1,7 @@
 Package: premessa
 Type: Package
 Title: R package for pre-processing of flow and mass cytometry data
-Version: 0.2.3
+Version: 0.2.4
 Author: "Pier Federico Gherardini <pfgherardini@parkerici.org> [aut, cre]"
 Description: This package includes panel editing/renaming for FCS files, bead-based normalization and debarcoding.
 Imports: shiny (>= 0.14), flowCore, reshape, ggplot2, hexbin, gridExtra, rhandsontable, jsonlite

diff --git a/inst/debarcoder_shinyGUI/server.R b/inst/debarcoder_shinyGUI/server.R
@@ -33,7 +33,10 @@ render_debarcoder_ui <- function(...){renderUI({
                     selectizeInput("debarcoderui_xaxis", "Select x axis", choices = c(""), multiple = FALSE, width = "100%"),
                     selectizeInput("debarcoderui_yaxis", "Select y axis", choices = c(""), multiple = FALSE, width = "100%")
                 ),
-                actionButton("debarcoderui_plot_data", "Plot data"),
+                actionButton("debarcoderui_plot_data",
+                                tagList(tags$div(id = "debarcoderui_plot_data_text", "Plot data"),
+                                        tags$div(id = "debarcoderui_plot_data_spinner", class = "spinner", style = "visibility: hidden")),
+                                style = "position: relative"),
                 actionButton("debarcoderui_save_files", "Save files")
             ),
             column(8,
@@ -63,16 +66,23 @@ shinyServer(function(input, output, session) {
     })
 
     debarcoderui_get_fcs <- reactive({
+        ret <- NULL
         if(!is.null(debarcoderui.reactive.values$fcs.fname) && debarcoderui.reactive.values$fcs.fname != "")
-            return(flowCore::read.FCS(debarcoderui.reactive.values$fcs.fname))
+            ret <- flowCore::read.FCS(debarcoderui.reactive.values$fcs.fname)
+        return(ret)
     })
 
     debarcoderui_get_exprs <- reactive({
             fcs <- debarcoderui_get_fcs()
+
+            ret <- NULL
             if(!is.null(fcs)) {
                 m <- flowCore::exprs(fcs)
-                return(asinh(m / 10))
+                ret <- asinh(m / 10)
             }
+
+
+            return(ret)
     })
 
     debarcoderui_get_mahalanobis_distance <- reactive({
@@ -112,29 +122,34 @@ shinyServer(function(input, output, session) {
 
     output$debarcoderui_plot1 <- renderPlot({
         if(!is.null(input$debarcoderui_plot_data) && input$debarcoderui_plot_data) {
+            session$sendCustomMessage(type = "plot_loading", "none")
+            ret <- NULL
             isolate({
                 bc.res <- debarcoderui_get_bc_results()
                 if(!is.null(bc.res)) {
                     if(input$debarcoderui_plot_type == "Separation")
-                        return(premessa:::plot_separation_histogram(bc.res))
+                        ret <- premessa:::plot_separation_histogram(bc.res)
                     else if(input$debarcoderui_plot_type == "Event" || input$debarcoderui_plot_type == "Single biaxial"
                             || input$debarcoderui_plot_type == "All barcode biaxials") {
                         mahal.dist <- debarcoderui_get_mahalanobis_distance()
-                        return(premessa:::plot_barcode_yields(bc.res, input$debarcoderui_separation_threshold,
-                                                    input$debarcoderui_mahal_dist_threshold, mahal.dist))
+                        ret <- premessa:::plot_barcode_yields(bc.res, input$debarcoderui_separation_threshold,
+                                                    input$debarcoderui_mahal_dist_threshold, mahal.dist)
                     }
                 }
             })
+            return(ret)
         }
     })
 
     output$debarcoderui_plot2 <- renderPlot({
         if(!is.null(input$debarcoderui_plot_data) && input$debarcoderui_plot_data) {
+            session$sendCustomMessage(type = "plot_loading", "none")
+            ret <- NULL
             isolate({
                 bc.res <- debarcoderui_get_bc_results()
                 if(!is.null(bc.res)) {
                     if(input$debarcoderui_plot_type == "Separation")
-                        return(premessa:::plot_barcode_separation(bc.res, input$debarcoderui_separation_threshold))
+                        ret <- premessa:::plot_barcode_separation(bc.res, input$debarcoderui_separation_threshold)
                     else {
                         m <- debarcoderui_get_exprs()
                         mahal.dist <- debarcoderui_get_mahalanobis_distance()
@@ -144,17 +159,18 @@ shinyServer(function(input, output, session) {
                         m <- m[sel.rows, ]
 
                         if(input$debarcoderui_plot_type == "Event")
-                            return(premessa:::plot_barcode_channels_intensities(m, bc.res$bc.channels, bc.res$m.normed[sel.rows,]))
+                            ret <- premessa:::plot_barcode_channels_intensities(m, bc.res$bc.channels, bc.res$m.normed[sel.rows,])
                         else {
                             if(input$debarcoderui_plot_type == "Single biaxial")
-                                return(premessa:::plot_color_coded_biaxial(m, input$debarcoderui_xaxis,
-                                                input$debarcoderui_yaxis, "mahal.dist"))
+                                ret <- premessa:::plot_color_coded_biaxial(m, input$debarcoderui_xaxis,
+                                                input$debarcoderui_yaxis, "mahal.dist")
                             else if(input$debarcoderui_plot_type == "All barcode biaxials")
-                                return(premessa:::plot_all_barcode_biaxials(m, bc.res$bc.channels))
+                                ret <- premessa:::plot_all_barcode_biaxials(m, bc.res$bc.channels)
                         }
                     }
                 }
             })
+            return(ret)
         }
     })
 

diff --git a/inst/debarcoder_shinyGUI/ui.R b/inst/debarcoder_shinyGUI/ui.R
@@ -1,5 +1,9 @@
 shinyUI(
     navbarPage("premessa",
+        header = list(
+            tags$head(tags$script(src = "shinyoutputbindings.js")),
+            singleton(tags$head(tags$link(rel = 'stylesheet', type = 'text/css', href = 'spinner.css')))
+        ),
         tabPanel("Debarcode data",
             uiOutput("debarcoderUI")
         )

diff --git a/inst/debarcoder_shinyGUI/www/shinyoutputbindings.js b/inst/debarcoder_shinyGUI/www/shinyoutputbindings.js
@@ -0,0 +1,15 @@
+Shiny.addCustomMessageHandler("plot_loading",
+    value => {
+        document.getElementById("debarcoderui_plot_data_spinner").style.visibility = "visible"
+        document.getElementById("debarcoderui_plot_data_text").style.visibility = "hidden"
+    }
+)
+
+$(document).on('shiny:value', event => {
+
+    if(event.target.id == "debarcoderui_plot1" || event.target.id == "debarcoderui_plot2") {
+
+        document.getElementById("debarcoderui_plot_data_spinner").style.visibility = "hidden"
+        document.getElementById("debarcoderui_plot_data_text").style.visibility = "visible"
+    }
+})
diff --git a/inst/debarcoder_shinyGUI/www/spinner.css b/inst/debarcoder_shinyGUI/www/spinner.css
@@ -0,0 +1,20 @@
+
+@keyframes spinner {
+  to {transform: rotate(360deg);}
+}
+
+.spinner:before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -10px;
+  border-radius: 50%;
+  border-top: 2px solid #07d;
+  border-right: 2px solid transparent;
+  animation: spinner .6s linear infinite;
+}