Issue with deployed app with Chrome and Firefox (different from #24760)

[HeadOf93]

! Hello everyone,

I have a very strange problem with a shiny dashboard app I deployed with shinyapps.io, which seems similar to Issue with Firefox and Chrome for an app hosted on shinyapps.io but without the specific error in the javascript console with took to the solution in that case.
My app has a Log-In page which gives the condition to the dashboard to appear, if it's false it obviously shows only the Log In page.
In fact, the app works perfectly in local, but from the deployed app in the server, if I use Safari browser, after the Log In page all the graphs are shown, while if I use another browser like Chrome, Firefox (they say also Edge for Windows users) I won't see the graphs. Sometimes these graphs appear after a very long time with the other browser (like 40-50 seconds), and sometimes (only the Plotly graphs) they appear not correctly shown (like they were meshed). Every other elements of the dashboard appears correctly.
When I look to the inspector with Chrome, I see from the consul the repetition (many times) of 2 errors: "Error evaluating expression: TRUE", which comes from the expression evaluation coming from an anonymous function called by Shiny I cannot understand when, and "Uncaught ReferenceError: TRUE is not defined
at Object.eval (eval at scopeExprToFunc (utils.js:176), :5:11)
at utils.js:193
at ShinyApp.$updateConditionals (shinyapp.js:420)
at ShinyApp.sendInput (shinyapp.js:143)
at InputBatchSender.$sendNow (input_rate.js:220)"
Now, I now the error it's that Javascript has true as Boolean variable and not TRUE because it's case sensitive, but I cannot understand why this expression is passed in the scope evaluation. I don't have any ConditionalPanels in the app, the only condition evaluated is for see the entire dash if (USER$login == TRUE) which comes from the Log In page, where obviously the condition is TRUE because it's the R expression. Even if this was the cause it's not possible that I would see all the other elements of the Dash and I wouldn't see only the graphs, I cannot understand. Another suspect I have come from the updateTabItems(session, "tabs", "summary"), but again why I would not see only the graphs? And why the hell if I use Safari or if I see in local I see all perfectly?

I post in the comments my source code and some screens of the output and of the Chrome console Logs.
Thank you in advance if you could give me some clues!

[HeadOf93]

The Source Code (relevant):

loginpage <- div(id = "loginpage", style = "width: 500px; max-width: 100%; margin: 0 auto; padding: 20px;",
                 wellPanel(
                   tags$h2("LOG IN", class = "text-center", style = "padding-top: 0;color:#333; font-weight:600;"),
                   textInput("userName", placeholder="Username", label = tagList(icon("user"), "Username")),
                   passwordInput("passwd", placeholder="Password", label = tagList(icon("unlock-alt"), "Password")),
                   br(),
                   div(
                     style = "text-align: center;",
                     actionButton("login", "SIGN IN", style = "color: white; background-color:#3c8dbc;
                                 padding: 10px 15px; width: 150px; cursor: pointer;
                                 font-size: 18px; font-weight: 600;"),
                     shinyjs::hidden(
                       div(id = "nomatch",
                           tags$p("Oops! Incorrect username or password!",
                                  style = "color: red; font-weight: 600; 
                                            padding-top: 5px;font-size:16px;", 
                                  class = "text-center"))),
                     br()
                     # br(),
                     # tags$code("Username: myuser  Password: mypass"),
                     # br(),
                     # tags$code("Username: myuser1  Password: mypass1")
                   ))
)

convertMenuItem <- function(mi,tabName) {
  mi$children[[1]]$attribs['data-toggle']="tab"
  mi$children[[1]]$attribs['data-value'] = "tabName"
  mi
}

server <- function(input, output, session) {
  # filtered.collaboration <- collaboration
  # makeReactiveBinding(filtered.collaboration)
  
  login = FALSE
  USER <- reactiveValues(login = login)
  
  observe({ 
    if (USER$login == FALSE) {
      if (!is.null(input$login)) {
        if (input$login > 0) {
          Username <- isolate(input$userName)
          Password <- isolate(input$passwd)
          if(length(which(credentials$username_id==Username))==1) { 
            pasmatch  <- credentials["passod"][which(credentials$username_id==Username),]
            pasverify <- password_verify(pasmatch, Password)
            if(pasverify) {
              USER$login <- TRUE
            } else {
              shinyjs::toggle(id = "nomatch", anim = TRUE, time = 1, animType = "fade")
              shinyjs::delay(3000, shinyjs::toggle(id = "nomatch", anim = TRUE, time = 1, animType = "fade"))
            }
          } else {
            shinyjs::toggle(id = "nomatch", anim = TRUE, time = 1, animType = "fade")
            shinyjs::delay(3000, shinyjs::toggle(id = "nomatch", anim = TRUE, time = 1, animType = "fade"))
          }
        } 
      }
    }    
  })
  
  id <- reactive({m <- elenco.emails %>%
    filter(value == input$userName) %>%
    select(landing_id) %>%
    unlist()
  m})
  
  # observeEvent(input$info, {
  #   shinyalert("Queste sono Info inerenti il tuo punteggio", type = "error", closeOnEsc = TRUE, timer = 0, showConfirmButton= TRUE)
  # })
  
  #Bottone di More Info
  observeEvent(input$info, {
    sendSweetAlert(session = session,
                   title = "Your Score / Il tuo punteggio",
                   text = tags$span(
                     tags$h2({giudizio.complessivo()}),
                     tags$br(),
                     tags$p({complessivo.inglese()}),
                     tags$br(),
                     tags$p({complessivo.italiano()}),
                     tags$br(),
                     tags$strong(paste0(sprintf("Your total score %.2f, which compared to the best achievable is %.2f",
                                            a = round(mean({risposte.reattive()}$Mark),2),
                                            b = (round(mean({risposte.reattive()}$Mark),2)/5)*100),"%")),
                     tags$br(),
                     tags$strong(sprintf("Your score on Knowledge and Tools is %.2f", a = {knowledge.value()})),
                     tags$br(),
                     tags$strong(sprintf("Your score on Resilience is %.2f", a = {resilience.value()})),
                     tags$br(),
                     tags$strong(sprintf("Your score on Culture and Behaviours is %.2f", a = {behaviours.value()}))
                   ),
                   type = "info")
  })
  
  filtered.behaviours <- reactive({# Filtri interattivi
    filtro.ruolo <- input$ruolo3
    filtro.anzianita <- input$anzianita3
    filtro.eta <- input$eta3
    filtro.educazione <- input$educazione3
    
    # Campi dove filtrare
    campo.ruolo <- fields[3,1]
    campo.anzianita <- fields[5,1]
    campo.eta <- fields[6,1]
    campo.educazione <- fields[7,1]
    
    # Id filtrati
    risposte.filtro.ruolo <- if (filtro.ruolo == "All") {behaviours %>% select(landing_id)}
    else {
      responses[[campo.ruolo]] %>%
        filter(grepl(filtro.ruolo, value)) %>%
        select(landing_id)}
    risposte.filtro.anzianita <- if (filtro.anzianita == "All") {behaviours %>% select(landing_id)}
    else {
      responses[[campo.anzianita]] %>%
        filter(grepl(filtro.anzianita, value)) %>%
        select(landing_id)}
    risposte.filtro.eta <- if (filtro.eta == "All") {behaviours %>% select(landing_id)}
    else {
      responses[[campo.eta]] %>%
        filter(grepl(filtro.eta, value)) %>%
        select(landing_id)}
    risposte.filtro.educazione <- if (filtro.educazione == "All") {behaviours %>% select(landing_id)}
    else {
      responses[[campo.educazione]] %>%
        filter(grepl(filtro.educazione, value)) %>%
        select(landing_id)}
    
    # Data Frame filtrato
    m <- behaviours %>%
      filter(landing_id %in% risposte.filtro.anzianita$landing_id &
               landing_id %in% risposte.filtro.ruolo$landing_id &
               landing_id %in% risposte.filtro.eta$landing_id &
               landing_id %in% risposte.filtro.educazione$landing_id) %>%
      select(-landing_id)
    
    if (filtro.anzianita != "All" | filtro.educazione != "All" | filtro.eta != "All" | filtro.ruolo != "All") {
      m <- rbind(behaviours[1:2, 2:ncol(behaviours)], m)
    }
    
    if (nrow(m) == 2) {
      n <- ncol(behaviours) - 1
      a <- as.tibble(matrix(rep(0, n), ncol = n))
      colnames(a) <- colnames(behaviours)[2:ncol(behaviours)]
      m <- rbind(behaviours[1:2, 2:ncol(behaviours)], a)
    }
    
    a <- as.tibble(matrix(rep(0, ncol(m)), ncol = ncol(m)))
    colnames(a) <- colnames(m)
    for (i in colnames(m)) {
      a[[i]] <- mean(m[[i]][3:nrow(m)])
    }
    m <- rbind(m, a)
    m
  })
  
  
  filtered.resilience <- reactive({# Filtri interattivi
    filtro.ruolo <- input$ruolo
    filtro.anzianita <- input$anzianita
    filtro.eta <- input$eta
    filtro.educazione <- input$educazione
    
    # Campi dove filtrare
    campo.ruolo <- fields[3,1]
    campo.anzianita <- fields[5,1]
    campo.eta <- fields[6,1]
    campo.educazione <- fields[7,1]
    
    # Id filtrati
    risposte.filtro.ruolo <- if (filtro.ruolo == "All") {resilience %>% select(landing_id)}
    else {
      responses[[campo.ruolo]] %>%
        filter(grepl(filtro.ruolo, value)) %>%
        select(landing_id)}
    risposte.filtro.anzianita <- if (filtro.anzianita == "All") {resilience %>% select(landing_id)}
    else {
      responses[[campo.anzianita]] %>%
        filter(grepl(filtro.anzianita, value)) %>%
        select(landing_id)}
    risposte.filtro.eta <- if (filtro.eta == "All") {resilience %>% select(landing_id)}
    else {
      responses[[campo.eta]] %>%
        filter(grepl(filtro.eta, value)) %>%
        select(landing_id)}
    risposte.filtro.educazione <- if (filtro.educazione == "All") {resilience %>% select(landing_id)}
    else {
      responses[[campo.educazione]] %>%
        filter(grepl(filtro.educazione, value)) %>%
        select(landing_id)}
    
    # Data Frame filtrato
    m <- resilience %>%
      filter(landing_id %in% risposte.filtro.anzianita$landing_id &
               landing_id %in% risposte.filtro.ruolo$landing_id &
               landing_id %in% risposte.filtro.eta$landing_id &
               landing_id %in% risposte.filtro.educazione$landing_id) %>%
      select(-landing_id)
    
    if (filtro.anzianita != "All" | filtro.educazione != "All" | filtro.eta != "All" | filtro.ruolo != "All") {
      m <- rbind(resilience[1:2, 2:ncol(resilience)], m)
    }
    
    if (nrow(m) == 2) {
      n <- ncol(resilience) - 1
      a <- as.tibble(matrix(rep(0, n), ncol = n))
      colnames(a) <- colnames(resilience)[2:ncol(resilience)]
      m <- rbind(resilience[1:2, 2:ncol(resilience)], a)
    }
    
    a <- as.tibble(matrix(rep(0, ncol(m)), ncol = ncol(m)))
    colnames(a) <- colnames(m)
    for (i in colnames(m)) {
      a[[i]] <- mean(m[[i]][3:nrow(m)])
    }
    m <- rbind(m, a)
    m
  })
  
  filtered.knowledge <- reactive({# Filtri interattivi
    filtro.ruolo <- input$ruolo4
    filtro.anzianita <- input$anzianita4
    filtro.eta <- input$eta4
    filtro.educazione <- input$educazione4
    
    # Campi dove filtrare
    campo.ruolo <- fields[3,1]
    campo.anzianita <- fields[5,1]
    campo.eta <- fields[6,1]
    campo.educazione <- fields[7,1]
    
    # Id filtrati
    risposte.filtro.ruolo <- if (filtro.ruolo == "All") {knowledge %>% select(landing_id)}
    else {
      responses[[campo.ruolo]] %>%
        filter(grepl(filtro.ruolo, value)) %>%
        select(landing_id)}
    risposte.filtro.anzianita <- if (filtro.anzianita == "All") {knowledge %>% select(landing_id)}
    else {
      responses[[campo.anzianita]] %>%
        filter(grepl(filtro.anzianita, value)) %>%
        select(landing_id)}
    risposte.filtro.eta <- if (filtro.eta == "All") {knowledge %>% select(landing_id)}
    else {
      responses[[campo.eta]] %>%
        filter(grepl(filtro.eta, value)) %>%
        select(landing_id)}
    risposte.filtro.educazione <- if (filtro.educazione == "All") {knowledge %>% select(landing_id)}
    else {
      responses[[campo.educazione]] %>%
        filter(grepl(filtro.educazione, value)) %>%
        select(landing_id)}
    
    # Data Frame filtrato
    m <- knowledge %>%
      filter(landing_id %in% risposte.filtro.anzianita$landing_id &
               landing_id %in% risposte.filtro.ruolo$landing_id &
               landing_id %in% risposte.filtro.eta$landing_id &
               landing_id %in% risposte.filtro.educazione$landing_id) %>%
      select(-landing_id)
    
    if (filtro.anzianita != "All" | filtro.educazione != "All" | filtro.eta != "All" | filtro.ruolo != "All") {
      m <- bind_rows(knowledge[1:2, ], m) %>% 
        select(-landing_id)
    }
    
    if (nrow(m) == 2) {
      n <- ncol(knowledge) - 1
      a <- as.tibble(matrix(rep(0, n), ncol = n))
      colnames(a) <- colnames(knowledge)[2:ncol(knowledge)]
      m <- bind_rows(knowledge[1:2, ], a) %>%
        select(-landing_id)
    }
    
    a <- as.tibble(matrix(rep(0, ncol(m)), ncol = ncol(m)))
    colnames(a) <- colnames(m)
    for (i in colnames(m)) {
      a[[i]] <- mean(m[[i]][3:nrow(m)])
    }
    m <- rbind(m, a)
    m
  })

  output$radarBehaviours <- renderPlotly(
    # newdarchart({filtered.attitude()}, axistype = 1, 
    #             pcol=colors_border, pfcol=colors_in, plwd=4, plty=1, vlabels = colnames({filtered.attitude()}),
    #             cglcol="grey", cglty=1, axislabcol="grey", caxislabels=seq(1,5,1), cglwd=1.5,
    #             vlcex = 0.8, title = "Attitude")
    plot_ly(
      type = 'scatterpolar',
      fill = 'toself'
    ) %>%
      add_trace(
        r = as.numeric(unname(unlist({filtered.behaviours()}[nrow({filtered.behaviours()}),]))),
        theta = colnames({filtered.behaviours()}),
        name = 'Average',
        color = I("lightgreen")
      ) %>%
      add_trace(
        r = as.numeric(unname(unlist(behaviours[behaviours$landing_id=={id()},2:ncol(behaviours)]))),
        theta = colnames({filtered.behaviours()}),
        name = 'Your Scores',
        color = I("blue")
      ) %>%
      layout(
        polar = list(
          radialaxis = list(
            visible = T,
            range = c(0,5)
          )
        ),
        title = "Culture and Behaviours",
        margin = list(b = 50, l = 140)
      )
  )
  
  output$radarKnowledge <- renderPlotly(
    # newdarchart({filtered.attitude()}, axistype = 1, 
    #             pcol=colors_border, pfcol=colors_in, plwd=4, plty=1, vlabels = colnames({filtered.attitude()}),
    #             cglcol="grey", cglty=1, axislabcol="grey", caxislabels=seq(1,5,1), cglwd=1.5,
    #             vlcex = 0.8, title = "Attitude")
    plot_ly(
      type = 'scatterpolar',
      fill = 'toself'
    ) %>%
      add_trace(
        r = as.numeric(unname(unlist({filtered.knowledge()}[nrow({filtered.knowledge()}),]))),
        theta = colnames({filtered.knowledge()}),
        name = 'Average',
        color = I("lightgreen")
      ) %>%
      add_trace(
        r = as.numeric(unname(unlist(knowledge[knowledge$landing_id=={id()},2:ncol(knowledge)]))),
        theta = colnames({filtered.knowledge()}),
        name = 'Your Scores',
        color = I("blue")
      ) %>%
      layout(
        polar = list(
          radialaxis = list(
            visible = T,
            range = c(0,5)
          )
        ),
        title = "Knowledge and Tools",
        margin = list(b = 50, l = 140)
      )
  )

  output$sidebarpanel <- renderUI({
    if (USER$login == TRUE ){ 
      dashboardSidebar(
        sidebarMenu(
          convertMenuItem(menuItem("Summary: Click Here!", tabName = "summary", icon = icon("dashboard")), "summary"),
          convertMenuItem(menuItem("Culture and Behaviours", tabName = "behaviours", icon = icon("chart-pie")), "behaviours"),
          convertMenuItem(menuItem("Smart Resilience", tabName = "resilience", icon = icon("chart-pie")), "resilience"),
          convertMenuItem(menuItem("Knowledge and Tools", tabName = "knowledge", icon = icon("chart-pie")), "knowledge"),
          convertMenuItem(menuItem("Instructions", tabName = "instructions", icon = icon("fas fa-question")), "instructions")
          # convertMenuItem(menuItem("Histograms", tabName = "histograms", icon = icon("chart-bar"),
          #                          selectInput("skill.digital", "Digital Skill:", 
          #                                      # choices=colnames(my.skills)[-1]),
          #                                      choices = 
          #                                        union(
          #                                          c('Collaboration',
          #                                            'Artificial Intelligence',
          #                                            'Safety and Security',
          #                                            'Information Processing',
          #                                            'Problem Solving',
          #                                            'Content Creation'), 
          #                                          colnames({filtered.vertical.skills()})),
          #                          ),
          #                          selectInput("skill.attitude", "Attitude and Digital Behaviour:", 
          #                                      choices=union(colnames(attitude)[-1],
          #                                                    colnames(behaviours)[-1]))), "histograms")
        ),
        # img(src='Logo.jpg', height='50', weight='50', style="display: block; margin-left: auto; margin-right: auto;")
        dashboard_footer(href="https://www.kilpatrick-digital.com", src='Logo.png', label = "", width = "100%", height = "130px",
                         italic = TRUE, bold = TRUE,
                         style = "text-align:center; align: center; padding: 0px; margin: 0px;")
      )}
  })

output$body <- renderUI({
    if (USER$login == TRUE){ 
      tabItems(
        # First tab content
        tabItem(tabName = "summary",
                fluidRow(
                  # h2("Executive Summary"),
                  valueBox(8, "Skills evaluated", icon=icon("user-check")),
                  #valueBox(nrow(behaviours) - 2, "Evaluated", icon=icon("user-check")),
                  valueBox(3, "Evaluated Areas", icon=icon("layer-group"), color = "purple"),
                  valueBox(nrow({risposte.reattive()}), "Questions", icon=icon("question"), color = "orange"),
                  # h2("Your results"),
                  column(width = 6,
                         valueBox(round(mean({risposte.reattive()}$Mark),2), "Your Total Score", icon=icon("dashboard"), color = case_when(mean({risposte.reattive()}$Mark)<=3 ~ "red",
                                                                                                                                           mean({risposte.reattive()}$Mark)<=4 ~ "yellow",
                                                                                                                                           TRUE ~ "green"),
                                  width = "100%")),
                  # box(C3GaugeOutput("totalplot", width = "100%", height = "100px"), height = "120px", width = 3),
                  # C3GaugeOutput("totalplot", width = "30%", height = "100px"),
                  column(width = 6,
                         h2(sprintf('Hi %s', {nome()}), icon("far fa-smile-wink")),
                         br(),
                         strong({giudizio.complessivo()}, icon("fas fa-medal")),
                         br(),
                         p(paste0(sprintf("Your total score is %.2f, which compared to the best achievable is %.2f",
                                               # c = 2,
                                               # d = 3)))
                                               a = round(mean({risposte.reattive()}$Mark),2),
                                               b = (round(mean({risposte.reattive()}$Mark),2)/5)*100),"%")),
                         actionButton("info", "More Infos"),
                         br()
                  ),
                  column(width = 12,
                         h2("Below you can see a summary of your results for each topic:"),
                         br()),
                  column(width = 12,
                         box(plotOutput(outputId = "summaryplot", width = "100%", height = "490px"), height = "505px"),
                         box(plotlyOutput(outputId = "distrubutionPlotPlot", width = "100%", height = "490px")), height = "550px")
                         #box(column(width = 12, DT::dataTableOutput("results"), style = "overflow-y: scroll;")), height = "550px")
                  # box(plotOutput(outputId = "summaryplot", width = "100%", height = "565px"), height = "580px"),
                  # box(column(width = 12, DT::dataTableOutput("results"), style = "overflow-y: scroll;"), height = "580px"))
                )),
        tabItem(tabName = "behaviours",
                fluidRow(
                  column(3, selectInput("ruolo3", "Role:", c("All", "Board Member", "Manager", "Employee", "Consultant", "CxO/Executive"))),
                  column(3, selectInput("anzianita3", "Seniority:", c("All", "1-3 years", "4-8 years", "9-15 years", "more than 15 years"))),
                  column(3, selectInput("eta3", "Age:", c("All", "19-24", "25-34", "35-44", "45-54", "55-64", "65 or more"))),
                  column(3, selectInput("educazione3", "Education:", c("All", "Undergraduate", "Graduate", "MSc/MBA", "PhD"))),
                  # box(plotOutput("radarPlot", width = "100%")),
                  # box(plotOutput("newradarPlot", width = "100%"))
                  box(
                    conditionalPanel(condition = TRUE,
                                     plotlyOutput(outputId = "radarBehaviours", width = "70%", height = "350px"),
                                     align = "center")
                    # selectInput("attitudeBehaviours", "Dimension:", c("Attitude", "Digital Behaviours"))
                  ),
                  box(
                    h3("Culture and Behaviours", icon("fas fa-users")),
                    # conditionalPanel(condition = TRUE,
                    #                  # tableOutput("radarPlot")
                    #                  plotlyOutput(outputId = "radarPlot", width = "70%", height = "350px"),
                    #                  align = "center")
                    br(),
                    strong({behaviours.giudizio()}),
                    br(),
                    p({behaviours.inglese()}),
                    br(),
                    p({behaviours.italiano()}),
                    height = "370px"
                  ),
                  box(width = 12,
                      plotlyOutput("gapplotBehaviours", width = "100%"))
                )
        ),
        tabItem(tabName = "resilience",
                fluidRow(
                  column(3, selectInput("ruolo", "Role:", c("All", "Board Member", "Manager", "Employee", "Consultant", "CxO/Executive"))),
                  column(3, selectInput("anzianita", "Seniority:", c("All", "1-3 years", "4-8 years", "9-15 years", "more than 15 years"))),
                  column(3, selectInput("eta", "Age:", c("All", "19-24", "25-34", "35-44", "45-54", "55-64", "65 or more"))),
                  column(3, selectInput("educazione", "Education:", c("All", "Undergraduate", "Graduate", "MSc/MBA", "PhD"))),
                  box(
                    conditionalPanel(condition = TRUE,
                                     plotlyOutput(outputId = "radarResilience", width = "70%", height = "350px"),
                                     align = "center")
                  ),
                  box(
                    h3("Smart Resilience", icon("fas fa-swimmer")),
                    # conditionalPanel(condition = TRUE,
                    #                  # tableOutput("radarPlot")
                    #                  plotlyOutput(outputId = "radarPlot", width = "70%", height = "350px"),
                    #                  align = "center")
                    br(),
                    strong({resilience.giudizio()}),
                    br(),
                    p({resilience.inglese()}),
                    br(),
                    p({resilience.italiano()}),
                    height = "370px"
                  ),
                  box(width = 12,
                      plotlyOutput("gapplotResilience", width = "100%"))
                )
        ),
        tabItem(tabName = "knowledge",
                fluidRow(
                  column(3, selectInput("ruolo4", "Role:", c("All", "Board Member", "Manager", "Employee", "Consultant", "CxO/Executive"))),
                  column(3, selectInput("anzianita4", "Seniority:", c("All", "1-3 years", "4-8 years", "9-15 years", "more than 15 years"))),
                  column(3, selectInput("eta4", "Age:", c("All", "19-24", "25-34", "35-44", "45-54", "55-64", "65 or more"))),
                  column(3, selectInput("educazione4", "Education:", c("All", "Undergraduate", "Graduate", "MSc/MBA", "PhD"))),
                  # box(plotOutput("radarPlot", width = "100%")),
                  # box(plotOutput("newradarPlot", width = "100%"))
                  box(
                    conditionalPanel(condition = TRUE,
                                     plotlyOutput(outputId = "radarKnowledge", width = "70%", height = "350px"),
                                     align = "center")
                  ),
                  box(
                    h3("Smart Resilience Knowledge and Tools", icon("fas fa-chalkboard-teacher")),
                    br(),
                    strong({knowledge.giudizio()}),
                    br(),
                    p({knowledge.inglese()}),
                    br(),
                    p({knowledge.italiano()}),
                    height = "370px"
                  ),
                  box(width = 12,
                      plotlyOutput("gapplotKnowledge", width = "100%"))
                )
        ),
        tabItem(tabName = "instructions",
                fluidRow(
                  box(
                    tags$head(tags$style(
                      type="text/css",
                      "#istruzioni img {max-width: 100%; width: 100%; height: auto}"
                    )),
                    tags$a(imageOutput("istruzioni")),
                    align = "center",
                    width = "100%",
                    height = "330px"
                  )
                ))
        
        # Second tab content
        # tabItem(tabName = "histograms",
        #         fluidRow(
        #           column(3, selectInput("ruolo2", "Role:", c("All", "Board Member", "Manager", "Employee", "Consultant", "CxO/Executive"))),
        #           column(3, selectInput("anzianita2", "Seniority:", c("All", "1-3 years", "4-8 years", "9-15 years", "more than 15 years"))),
        #           column(3, selectInput("eta2", "Age:", c("All", "19-24", "25-34", "35-44", "45-54", "55-64", "65 or more"))),
        #           column(3, selectInput("educazione2", "Education:", c("All", "Undergraduate", "Graduate", "MSc/MBA", "PhD"))),
        #           box(plotlyOutput("infoplot", width = "100%", height = "350px")),
        #           box(plotlyOutput("plot", width = "100%", height = "350px")),
        #           box(width = 12,
        #               plotlyOutput("barchart", width = "100%"))))
      )
    } else {
      loginpage
    }
    
  })
  updateTabItems(session, "tabs", "summary")
}

[nirgrahamuk]

Sounds like a frustrating problem. For an app to work in one modern browser and not others is

unfortunately I'm intimidated to try to debug this because the shared code is so long....
would it be possible to produce the smallest code that demonstrates the poor behaviour, stripped down to the essentials ? I expect there's a lot that can be removed here...and still illustrate your challenge. And who knows the process of reworking the app for support might cause you to stumble on reason/solution yourself, I've had that experience in my own work.

[HeadOf93]

Hi, thank you for the reply. Yes, I can create ac copy of it with only the essential part, log-in page, 2 tabs with one Plotly graph to show, I will do and post the code today, thank you again

[HeadOf93]

Here I am I created a version "Debugging" with only 2 tabs, one with only a title and another with 2 poorly graphs with show the problems described, together with the filters applied you can play with. I deployed it so that you can also see from the server, here is the link: https://kilpatrick-group.shinyapps.io/Debugging/

Here is the code:

# Server
# Function for UI
convertMenuItem <- function(mi,tabName) {
  mi$children[[1]]$attribs['data-toggle']="tab"
  mi$children[[1]]$attribs['data-value'] = "tabName"
  mi
}

server <- function(input, output, session) {

  login = TRUE
  USER <- reactiveValues(login = login)
  
  id <- reactive({"euhzzui7c38hecuveuhzzui65fuvh34h"})
  
  filtered.behaviours <- reactive({# Filtri interattivi
    filtro.ruolo <- input$ruolo3
    filtro.anzianita <- input$anzianita3
    filtro.eta <- input$eta3
    filtro.educazione <- input$educazione3
    
    # Campi dove filtrare
    campo.ruolo <- fields[3,1]
    campo.anzianita <- fields[5,1]
    campo.eta <- fields[6,1]
    campo.educazione <- fields[7,1]
    
    # Id filtrati
    risposte.filtro.ruolo <- if (filtro.ruolo == "All") {behaviours %>% select(landing_id)}
    else {
      responses[[campo.ruolo]] %>%
        filter(grepl(filtro.ruolo, value)) %>%
        select(landing_id)}
    risposte.filtro.anzianita <- if (filtro.anzianita == "All") {behaviours %>% select(landing_id)}
    else {
      responses[[campo.anzianita]] %>%
        filter(grepl(filtro.anzianita, value)) %>%
        select(landing_id)}
    risposte.filtro.eta <- if (filtro.eta == "All") {behaviours %>% select(landing_id)}
    else {
      responses[[campo.eta]] %>%
        filter(grepl(filtro.eta, value)) %>%
        select(landing_id)}
    risposte.filtro.educazione <- if (filtro.educazione == "All") {behaviours %>% select(landing_id)}
    else {
      responses[[campo.educazione]] %>%
        filter(grepl(filtro.educazione, value)) %>%
        select(landing_id)}
    
    # Data Frame filtrato
    m <- behaviours %>%
      filter(landing_id %in% risposte.filtro.anzianita$landing_id &
               landing_id %in% risposte.filtro.ruolo$landing_id &
               landing_id %in% risposte.filtro.eta$landing_id &
               landing_id %in% risposte.filtro.educazione$landing_id) %>%
      select(-landing_id)
    
    if (filtro.anzianita != "All" | filtro.educazione != "All" | filtro.eta != "All" | filtro.ruolo != "All") {
      m <- rbind(behaviours[1:2, 2:ncol(behaviours)], m)
    }
    
    if (nrow(m) == 2) {
      n <- ncol(behaviours) - 1
      a <- as.tibble(matrix(rep(0, n), ncol = n))
      colnames(a) <- colnames(behaviours)[2:ncol(behaviours)]
      m <- rbind(behaviours[1:2, 2:ncol(behaviours)], a)
    }
    
    a <- as.tibble(matrix(rep(0, ncol(m)), ncol = ncol(m)))
    colnames(a) <- colnames(m)
    for (i in colnames(m)) {
      a[[i]] <- mean(m[[i]][3:nrow(m)])
    }
    m <- rbind(m, a)
    m
  })
  
  # SCORE ----------------------------------------------

  behaviours.value <- reactive({
    m <- behaviours
    p <- rowMeans(m[m$landing_id=={id()},2:ncol(m)])
    p
  })
  
  nome <- reactive({
    m <- responses[[campo.nome]]
    p <- m %>% filter(landing_id == {id()}) %>% select(value) %>% unlist() %>% unname()
    p
  })
  
  # Media dei data frame "fissi", necessari per garantire media Skills dello user per ogni filtro
  my.behaviours <- behaviours
  my.behaviours$mean_behaviours <- rowMeans(my.behaviours[,2:ncol(my.behaviours)])
  risposte.reattive <- reactive({tok <- {id()}
  sequenza.risposte <- cbind(knowledge[knowledge$landing_id==tok,2:ncol(knowledge)], resilience[resilience$landing_id==tok,2:ncol(resilience)]) %>%
                        cbind(behaviours[behaviours$landing_id==tok,2:ncol(behaviours)]) %>%
                        gather("Question", "Mark")
  sequenza.risposte})
  
  output$logoutbtn <- renderUI({
    req(USER$login)
    tags$li(a(icon("fa fa-sign-out"), "Logout", 
              href="javascript:window.location.reload(true)"),
            class = "dropdown", 
            style = "background-color: #eee !important; border: 0;
                    font-weight: bold; margin:5px; padding: 10px;")
  })
  
  # Pictures
  output$logoheader <- renderImage({
    req(USER$login)
    return(list(src = "Logo.png",contentType = "image/png",alt = "Alignment", href="https://www.kilpatrick-digital.com"))
  }, deleteFile = FALSE) 
  
  output$istruzioni <- renderImage({
    return(list(src = "Instructions.png",contentType = "image/png"))
  }, deleteFile = FALSE)
  
  output$radarBehaviours <- renderPlotly(
    plot_ly(
      type = 'scatterpolar',
      fill = 'toself'
    ) %>%
      add_trace(
        r = as.numeric(unname(unlist({filtered.behaviours()}[nrow({filtered.behaviours()}),]))),
        theta = colnames({filtered.behaviours()}),
        name = 'Average',
        color = I("lightgreen")
      ) %>%
      add_trace(
        r = as.numeric(unname(unlist(behaviours[behaviours$landing_id=={id()},2:ncol(behaviours)]))),
        theta = colnames({filtered.behaviours()}),
        name = 'Your Scores',
        color = I("blue")
      ) %>%
      layout(
        polar = list(
          radialaxis = list(
            visible = T,
            range = c(0,5)
          )
        ),
        title = "Culture and Behaviours",
        margin = list(b = 50, l = 140)
      )
  )
  
  output$gapplotBehaviours <- renderPlotly({
    m <- behaviours[behaviours$landing_id=={id()},2:ncol(behaviours)]
    p <- {filtered.behaviours()}[nrow({filtered.behaviours()}),]
    plot_ly() %>% 
      # add_trace(x = colnames(p), y = as.vector(unname(m)), name = 'Candidate', showlegend = FALSE) %>%
      # add_trace(x = colnames(p), y = as.vector(unname(p)), name = 'Average', showlegend = FALSE) %>% 
      add_segments(x = colnames(p), xend = colnames(p), y = unlist(as.vector(unname(m))), yend = unlist(as.vector(unname(p))), showlegend = FALSE) %>%
      add_markers(x = colnames(p), y = as.vector(unname(m)), name = "Candidate", color = I("blue")) %>%
      add_markers(x = colnames(p), y = as.vector(unname(p)), name = "Average", color = I("lightgreen")) %>%
      layout(
        title = "Gap with Objective",
        xaxis = list(title = "", tickangle = -45),
        yaxis = list(title = "Score")
        # margin = list(l = 65)
      )
  })
  
  output$sidebarpanel <- renderUI({
    if (USER$login == TRUE ){ 
      dashboardSidebar(
        sidebarMenu(
          convertMenuItem(menuItem("Summary: Click Here!", tabName = "summary", icon = icon("dashboard")), "summary"),
          convertMenuItem(menuItem("Culture and Behaviours", tabName = "behaviours", icon = icon("chart-pie")), "behaviours")
        ),
        # img(src='Logo.jpg', height='50', weight='50', style="display: block; margin-left: auto; margin-right: auto;")
        dashboard_footer(href="https://www.kilpatrick-digital.com", src='Logo.png', label = "", width = "100%", height = "130px",
                         italic = TRUE, bold = TRUE,
                         style = "text-align:center; align: center; padding: 0px; margin: 0px;")
      )}
  })
  
  output$body <- renderUI({
    if (USER$login == TRUE){ 
      tabItems(
        # First tab content
        tabItem(tabName = "summary",
                fluidRow(
                  h2("Executive Summary")
                                  )),
        tabItem(tabName = "behaviours",
                fluidRow(
                  column(3, selectInput("ruolo3", "Role:", c("All", "Board Member", "Manager", "Employee", "Consultant", "CxO/Executive"))),
                  column(3, selectInput("anzianita3", "Seniority:", c("All", "1-3 years", "4-8 years", "9-15 years", "more than 15 years"))),
                  column(3, selectInput("eta3", "Age:", c("All", "19-24", "25-34", "35-44", "45-54", "55-64", "65 or more"))),
                  column(3, selectInput("educazione3", "Education:", c("All", "Undergraduate", "Graduate", "MSc/MBA", "PhD"))),
                  # box(plotOutput("radarPlot", width = "100%")),
                  # box(plotOutput("newradarPlot", width = "100%"))
                  box(
                    conditionalPanel(condition = TRUE,
                                     plotlyOutput(outputId = "radarBehaviours", width = "70%", height = "350px"),
                                     align = "center")
                    # selectInput("attitudeBehaviours", "Dimension:", c("Attitude", "Digital Behaviours"))
                  ),
                  box(
                    h3("Culture and Behaviours", icon("fas fa-users")),
                    height = "370px"
                  ),
                  box(width = 12,
                      plotlyOutput("gapplotBehaviours", width = "100%"))
                )
        ),
        tabItem(tabName = "instructions",
                fluidRow(
                  box(
                    tags$head(tags$style(
                      type="text/css",
                      "#istruzioni img {max-width: 100%; width: 100%; height: auto}"
                    )),
                    tags$a(imageOutput("istruzioni")),
                    align = "center",
                    width = "100%",
                    height = "330px"
                  )
                ))
      )
    } else {
      loginpage
    }
    
  })
  updateTabItems(session, "tabs", "summary")
}

title <- tags$a(href="https://www.kilpatrick-digital.com",
                tags$img(src='Logo.jpg', height='50', weight='50'),
                "Smart Resilience Assessment Results")

sidebar <- dashboardSidebar(uiOutput("sidebarpanel")) 
body <- dashboardBody(
                      shinyjs::useShinyjs(),
                      uiOutput("body"))

ui <- dashboardPage(
                    skin = "green",
  # App title ----
  dashboardHeader(title = "Smart Resilience Assessment Results", titleWidth = 600,
                  tags$li(a(href = 'http://www.kilpatrick-digital.com',
                            img(src = 'Logo.png',
                                title = "Company Home", height = "30px"),
                            style = "padding-top:10px; padding-bottom:10px;"),
                          class = "dropdown")
                  #uiOutput("logoutbtn")
                  ),
  sidebar,
  body
)

# Make app
shinyApp(ui, server)

The library used are:

library(dplyr)
library(tidyr)
library(data.table)
library(stringr)
library(fmsb)
library(shiny)
library(shinydashboard)
library(shinyWidgets)
library(DT)
library(shinyjs)
library(sodium)
library(rtypeform)
library(tidyverse)
library(apputils)
library(C3)
library(plotly)
library(shinyalert)

The information represented in the dashboard are taken from Typeform through an API and elaborated to give scores based on the answer, I can give you a csv file with the elaborated dataset.

Thank you again!

[nirgrahamuk]

@HeadOf93

but I cannot understand why this expression is passed in the scope evaluation. I don't have any ConditionalPanels in the app,

but ... I can see that there are conditionalPanel in your app...
they seem like they would be entirely redundant because you pass TRUE to their arguments (which is not an appropriate thing to pass).
I think if you remove these your app will work.

[HeadOf93]

Sorry, what ConditionalPanel do you mean? Because in that example the only condition I agree is the log in that I pass true, but only to show you: in reality, default value of the log-in is false, and it becomes true if a user put the right credentials in the log box, which is shown by default at the beginning

[nirgrahamuk]

i list them here for you .

@HeadOf93

box( conditionalPanel(condition = TRUE, plotlyOutput(outputId = "radarBehaviours

@HeadOf93

box( conditionalPanel(condition = TRUE, plotlyOutput(outputId = "radarResilience", width = "70%", height = "350px"), align = "center")

@HeadOf93

conditionalPanel(condition = TRUE, plotlyOutput(outputId = "radarKnowledge", width = "70%", height = "350px"), align = "center") ),

[HeadOf93]

Sorry I cannot explain myself ho I couldn't see them... I try to remove them and let you know!

[Rana]

Hi, I am experiencing the same problem of not being able to make a graph appear on any browser except Safari. If you found a solution for this problem I would appreciate it if you could share it with me as well. Thank you in advance. Best regards.

[nirgrahamuk]

This persons issue was caused by improper use of conditionalPanel, passing TRUE, where this does not evaluate to a javascript boolean. Does your app feature the same ?