app.R

library(shiny)
library(shinyjs)
source("global.R")

ui <- fluidPage(
  useShinyjs(),
  
  # Headers
  tags$head(
    tags$title("Flipside Crypto's Dashboard Expandooor"),
    tags$link(rel = "stylesheet", type = "text/css", href = "styles.css"),
    tags$link(rel = "icon", href = "fliptrans.png"),
    tags$script(src = "rudderstack.js"),
    tags$script("rudderanalytics.page('dashboard_expandoor')")
  ),
  
  # Top row with logo and title
  fluidRow(class = "titlerow",
           column(width = 3, 
                  div(id = "applogo", 
                      a(href = "https://flipsidecrypto.xyz",
                        img(src = "Flipside_black_logo_wordmark.svg", height = "24px"),
                        onclick = paste0("rudderanalytics.track('", "dashboard_expandoor", "_flipside')"),
                        target = "_blank"))
           ),
           column(width = 6,
                  div(id = "appname", "Dashboard Expandoooor")
           ),
           column(width = 3, 
                  div(id = "sidelinks"))
  ),
  
  hr(),
  
  # Main app body
  div(class = "appbody",
      br(),
      
      # Input area with side-by-side elements
      fluidRow(
        column(width = 6,
               div(style = "margin: 0 20%;",
                   textInput("slug", "Please provide your dashboard slug", 
                             value = "near-staking-FxmsnX")
               )
        ),
        column(width = 6,
               # Queries box
               div(style = "margin: 0 20%;",
                   div(class = "card",
                       uiOutput("queries_used")
                   )
               )
        )
      ),
      
      # Centered Start button
      fluidRow(
        column(width = 12,
               div(style = "display: flex; justify-content: center; margin: 20px 0;",
                   actionButton("start", "Start", class = "btn-primary")
               )
        )
      ),
      
      # Content area with two columns
      fluidRow(
        # Left column - Key Insights
        column(width = 6,
               div(class = "card",
                   uiOutput("key_insights")
               )
        ),
        # Right column - Recommendations
        column(width = 6,
               div(class = "card",
                   uiOutput("recommendations")
               )
        )
      )
  )
)
server <- function(input, output, session) {
  # Reactive values to store results
  rv <- reactiveValues(
    queries = NULL,
    key_insights = NULL,
    recommendations = NULL
  )
  
  # Step 1: Get queries
  queries <- eventReactive(input$start, {
    withProgress(message = 'Step 1/3', detail = "Fetching queries...", value = 0.33, {
      submitSnowflake(dashslug_to_queries(input$slug), snowflake_credentials)
    })
  })
  
  # Step 2: Get insights once queries are available
  insights <- eventReactive(queries(), {
    req(queries())
    withProgress(message = 'Step 2/3', detail = "Generating insights...", value = 0.66, {
      summary_content <- paste0(
        get_query_summary(input$slug),
        paste0(queries()$QUERY_STATEMENT, collapse = "\n### NEW QUERY BELOW\n")
      )
      
      insights_response <- ask_flipai(
        api_key = flipai_secret,
        slug = 'query-statement-summarizer',
        content = summary_content
      )
      insights_response$text
    })
  })
  
  # Step 3: Get recommendations when Start is clicked
  recommendations <- eventReactive(input$start, {
    # Wait for insights but don't block UI updates
    isolate({
      if(is.null(insights())) return(NULL)
      withProgress(message = 'Step 3/3', detail = "Generating recommendations...", value = 1, {
        recommendations_response <- ask_flipai(
          api_key = flipai_secret,
          slug = 'data-science-pyramid',
          content = insights()
        )
        recommendations_response$text
      })
    })
  })
  
  # Update reactive values as results become available
  observe({
    rv$queries <- queries()
  })
  
  observe({
    rv$key_insights <- insights()
  })
  
  observe({
    rv$recommendations <- recommendations()
  })
  
  # Render UI Components with proper styling
  output$queries_used <- renderUI({
    div(class = "card-body",
        div(class = "card-header", "# Queries Used"),
        div(class = "pre-wrap",
            verbatimTextOutput("n_queries", placeholder = TRUE))
    )
  })
  
  output$key_insights <- renderUI({
    div(class = "card-body",
        div(class = "card-header", "Key Insights"),
        div(class = "pre-wrap",
            verbatimTextOutput("insights_text", placeholder = TRUE))
    )
  })
  
  output$recommendations <- renderUI({
    div(class = "card-body",
        div(class = "card-header", "Recommendations"),
        div(class = "pre-wrap",
            verbatimTextOutput("recommendations_text", placeholder = TRUE))
    )
  })
  
  # Render actual content within the styled divs
  output$n_queries <- renderPrint({
    req(rv$queries)
    cat("Total Queries:", nrow(rv$queries))
  })
  
  output$insights_text <- renderPrint({
    req(rv$key_insights)
    cat(rv$key_insights)
  })
  
  output$recommendations_text <- renderPrint({
    req(rv$recommendations)
    cat(rv$recommendations)
  })
}


# Run the application 
shinyApp(ui = ui, server = server)