ui.R

# ==============================================================================
# Polyphenol Estimation Pipeline - Shiny Application UI
# ==============================================================================
#
# PIPELINE DEVELOPED BY:
#   Stephanie M.G. Wilson
#   University of California, Davis
#   Contact: smgwilson@ucdavis.edu
#   Repository: https://github.com/SWi1/polyphenol_pipeline/
#   License: MIT
#
# SHINY APP DEVELOPED BY:
#   Richard Stoker
#   United States Department of Agriculture - Agricultural Research Service
#   Contact: Richard.Stoker@usda.gov
#   License: CC0 (Public Domain)
#
# VERSION: 0.1 Alpha
# DATE: November 2025
# ==============================================================================

# Custom theme using bslib
app_theme <- bs_theme(
  version = 5,
  primary = "#6f42c1",
  secondary = "#5c2d91",
  success = "#28a745",
  info = "#17a2b8",
  warning = "#ffc107",
  danger = "#dc3545",
  base_font = font_google("Lato"),
  heading_font = font_google("Lato"),
  font_scale = 1.0,
  bootswatch = NULL
)

# Main UI Definition
ui <- page_navbar(
  id = "main_nav",
  title = tags$span(
    class = "navbar-title-text",
    "Polyphenol Estimation Pipeline"
  ),
  theme = app_theme,
  fillable = TRUE,
  header = tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "custom.css"),
    tags$link(rel = "preconnect", href = "https://fonts.googleapis.com"),
    tags$link(rel = "preconnect", href = "https://fonts.gstatic.com", crossorigin = NA),
    tags$link(href = "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap", rel = "stylesheet")
  ),
  footer = tags$footer(
    class = "app-footer",
    tags$div(
      class = "footer-content",
      tags$span(
        class = "footer-main",
        "Pipeline developed by Stephanie M.G. Wilson | ",
        tags$a(href = "https://github.com/SWi1/polyphenol_pipeline", target = "_blank", "GitHub Repository")
      ),
      tags$span(
        class = "footer-secondary",
        "Shiny app by Richard Stoker"
      )
    )
  ),

  # --------------------------------------------------------------------------
  # Tab 1: Get Started
  # --------------------------------------------------------------------------
  nav_panel(
    title = "Get Started",
    value = "get_started",
    icon = icon("circle-play"),
    class = "fade-in",
    layout_columns(
      col_widths = c(12),

      # Main welcome card
      card(
        card_header(
          class = "card-header-primary",
          tags$h4("Welcome to the Polyphenol Estimation Pipeline", class = "mb-0 text-white")
        ),
        card_body(
          class = "p-4",
          layout_columns(
            col_widths = c(5, 7),
            # Pipeline diagram
            tags$div(
              class = "text-center",
              tags$img(
                src = "Polyphenol_Estimation_Pipeline_Overview.png",
                alt = "Polyphenol Estimation Pipeline Overview",
                class = "img-fluid pipeline-diagram",
                style = "max-width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
              )
            ),
            # What this app does
            tags$div(
              class = "getting-started-content",
              tags$h5("What This App Does"),
              tags$p(
                "Polyphenols are plant-derived compounds associated with reduced risk of chronic diseases, ",
                "but estimating intake from dietary data has traditionally required manual processing of ",
                "multiple databases. This pipeline automates that process."
              ),
              tags$p(
                "The app takes your 24-hour diet recall data and:"
              ),
              tags$ul(
                tags$li("Disaggregates reported foods into underlying ingredients"),
                tags$li("Maps ingredients to polyphenol content from FooDB"),
                tags$li("Calculates intake at total, class, and compound levels"),
                tags$li("Identifies which foods contribute most to polyphenol consumption"),
                tags$li("Computes a 42-component Dietary Inflammatory Index (DII)")
              ),
              tags$p(class = "text-muted small mt-3 mb-0",
                     "Results are provided in both absolute amounts (mg) and energy-standardized values (mg/1000 kcal)."
              )
            )
          )
        )
      ),

      # How to use section
      card(
        card_header(tags$h5("How to Use This App", class = "mb-0")),
        card_body(
          layout_columns(
            col_widths = c(4, 4, 4),
            # Step 1
            tags$div(
              class = "text-center p-3",
              tags$div(
                style = "background: var(--primary-color); color: white; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; margin-bottom: 0.75rem;",
                "1"
              ),
              tags$h6("Upload Your Data"),
              tags$p(class = "text-muted small",
                     "Upload your diet recall file, or click \"Load Demo Data\" to explore with sample data first."
              )
            ),
            # Step 2
            tags$div(
              class = "text-center p-3",
              tags$div(
                style = "background: var(--primary-color); color: white; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; margin-bottom: 0.75rem;",
                "2"
              ),
              tags$h6("Run the Pipeline"),
              tags$p(class = "text-muted small",
                     "Select your data format and click \"Run Pipeline\" to process your data."
              )
            ),
            # Step 3
            tags$div(
              class = "text-center p-3",
              tags$div(
                style = "background: var(--primary-color); color: white; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; margin-bottom: 0.75rem;",
                "3"
              ),
              tags$h6("View & Export"),
              tags$p(class = "text-muted small",
                     "Explore interactive charts and tables. Download results as CSV files."
              )
            )
          ),
          tags$div(
            class = "text-center pt-3",
            actionButton(
              inputId = "go_to_input",
              label = tags$span(icon("arrow-right"), " Go to Input"),
              class = "btn-primary btn-lg"
            )
          )
        )
      )
    )
  ),

  # --------------------------------------------------------------------------
  # Tab 2: Input & Configuration
  # --------------------------------------------------------------------------
  nav_panel(
    title = "Input",
    value = "input",
    icon = icon("upload"),
    class = "fade-in",
    layout_columns(
      col_widths = c(4, 8),
      card(
        card_header(
          class = "card-header-primary",
          tags$h5("Configuration", class = "mb-0 text-white")
        ),
        card_body(
          # Data source selection with context
          radioGroupButtons(
            inputId = "data_source",
            label = tags$span(icon("database"), " Data Source"),
            choices = c("ASA24" = "ASA24", "NHANES" = "NHANES"),
            selected = "ASA24",
            justified = TRUE,
            status = "primary"
          ),
          tags$p(class = "text-muted small mt-2 mb-0",
                 "ASA24: Items File from researcher site. NHANES: Individual Foods file."
          ),

          tags$hr(),

          # File upload
          tags$div(
            class = "upload-zone",
            fileInput(
              inputId = "diet_file",
              label = tags$span(icon("file-csv"), " Upload Diet Data"),
              accept = c(".csv", ".xlsx", ".xls"),
              placeholder = "CSV or Excel file",
              width = "100%"
            ),
            tags$details(
              class = "mt-2",
              tags$summary(class = "text-muted small", style = "cursor: pointer;", icon("circle-info"), " Data format help"),
              tags$div(
                class = "small text-muted mt-2 ps-2",
                style = "font-size: 0.78rem; line-height: 1.6;",
                tags$div(tags$strong("ASA24:"), " UserName, RecallNo, FoodCode, FoodAmt, KCAL, ..."),
                tags$div(tags$strong("NHANES:"), " SEQN, RecallNo, DRXIFDCD, DRXIGRMS, DRXIKCAL, ..."),
                tags$div(class = "mt-2 fst-italic", "Each participant must have 2+ recalls.")
              )
            )
          ),

          tags$hr(),

          # Demo data button
          tags$div(
            class = "text-center mb-3",
            actionButton(
              inputId = "load_demo",
              label = tags$span(icon("flask"), " Load Demo Data"),
              class = "btn-outline-secondary w-100"
            ),
            tags$small(class = "text-muted d-block mt-2", "Sample ASA24 data to try the pipeline")
          ),

          tags$hr(),

          # DII calculation option
          checkboxInput(
            inputId = "calculate_dii",
            label = "Include DII Calculation",
            value = TRUE
          ),

          tags$hr(),

          # Action buttons
          layout_columns(
            col_widths = c(6, 6),
            actionButton(
              inputId = "reset_btn",
              label = tags$span(icon("rotate-left"), " Reset"),
              class = "btn-outline-danger w-100"
            ),
            actionButton(
              inputId = "run_pipeline",
              label = tags$span(icon("play"), " Run Pipeline"),
              class = "btn-primary btn-lg w-100 run-btn"
            )
          )
        )
      ),

      card(
        card_header(
          class = "bg-light",
          tags$h5("Data Preview", class = "mb-0")
        ),
        card_body(
          uiOutput("data_status"),
          tags$hr(),
          tags$div(
            class = "data-preview-container",
            DTOutput("data_preview")
          )
        )
      )
    )
  ),

  # --------------------------------------------------------------------------
  # Tab 3: Results Dashboard
  # --------------------------------------------------------------------------
  nav_panel(
    title = "Results",
    value = "results",
    icon = icon("chart-bar"),
    class = "fade-in",

    layout_columns(
      col_widths = c(12),

      # Summary cards row
      uiOutput("summary_cards"),

      # Main results tabs
      navset_card_tab(
        id = "results_tabs",
        full_screen = TRUE,

        # Total Intake Tab
        nav_panel(
          title = "Total Intake",
          icon = icon("chart-simple"),
          card(
            card_header(
              class = "d-flex justify-content-between align-items-center",
              tags$span("Total Polyphenol Intake"),
              tags$div(
                class = "d-flex align-items-center gap-2",
                tags$div(
                  class = "btn-group btn-group-sm view-toggle",
                  role = "group",
                  `aria-label` = "Toggle between chart and table view",
                  tags$button(type = "button", class = "btn btn-outline-primary active", id = "total_chart_btn",
                              icon("chart-bar"), " Chart"),
                  tags$button(type = "button", class = "btn btn-outline-primary", id = "total_table_btn",
                              icon("table"), " Table")
                ),
                downloadButton("download_total", NULL, class = "btn-sm btn-outline-primary", icon = icon("download"))
              )
            ),
            card_body(
              class = "results-view-container",
              tags$div(id = "total_chart_view", class = "results-view-visible",
                layout_columns(
                  col_widths = c(6, 6),
                  plotlyOutput("plot_total_intake", height = "400px"),
                  plotlyOutput("plot_intake_distribution", height = "400px")
                )
              ),
              tags$div(id = "total_table_view", class = "results-view-hidden",
                DTOutput("table_total_intake")
              )
            )
          )
        ),

        # Class-Level Tab
        nav_panel(
          title = "By Polyphenol Class",
          icon = icon("layer-group"),
          card(
            card_header(
              class = "d-flex justify-content-between align-items-center",
              tags$span("Polyphenol Intake by Chemical Class"),
              tags$div(
                class = "d-flex align-items-center gap-2",
                tags$div(
                  class = "btn-group btn-group-sm view-toggle",
                  role = "group",
                  `aria-label` = "Toggle between chart and table view",
                  tags$button(type = "button", class = "btn btn-outline-primary active", id = "class_chart_btn",
                              icon("chart-bar"), " Chart"),
                  tags$button(type = "button", class = "btn btn-outline-primary", id = "class_table_btn",
                              icon("table"), " Table")
                ),
                downloadButton("download_class", NULL, class = "btn-sm btn-outline-primary", icon = icon("download"))
              )
            ),
            card_body(
              class = "results-view-container",
              tags$div(id = "class_chart_view", class = "results-view-visible",
                plotlyOutput("plot_class_intake", height = "450px")
              ),
              tags$div(id = "class_table_view", class = "results-view-hidden",
                DTOutput("table_class_intake")
              )
            )
          )
        ),

        # Food Contributors Tab
        nav_panel(
          title = "Food Contributors",
          icon = icon("apple-whole"),
          card(
            card_header(
              class = "d-flex justify-content-between align-items-center",
              tags$span("Top Food Contributors to Polyphenol Intake"),
              tags$div(
                class = "d-flex align-items-center gap-2",
                tags$div(
                  class = "btn-group btn-group-sm view-toggle",
                  role = "group",
                  `aria-label` = "Toggle between chart and table view",
                  tags$button(type = "button", class = "btn btn-outline-primary active", id = "food_chart_btn",
                              icon("chart-bar"), " Chart"),
                  tags$button(type = "button", class = "btn btn-outline-primary", id = "food_table_btn",
                              icon("table"), " Table")
                ),
                downloadButton("download_foods", NULL, class = "btn-sm btn-outline-primary", icon = icon("download"))
              )
            ),
            card_body(
              class = "results-view-container",
              tags$div(id = "food_chart_view", class = "results-view-visible",
                plotlyOutput("plot_food_treemap", height = "500px")
              ),
              tags$div(id = "food_table_view", class = "results-view-hidden",
                DTOutput("table_food_contributors")
              )
            )
          )
        ),

        # DII Tab
        nav_panel(
          title = "DII Scores",
          icon = icon("fire"),
          uiOutput("dii_content")
        )
      ),

      # Download all results
      tags$div(
        class = "text-center py-3",
        downloadButton(
          outputId = "download_all",
          label = tags$span(icon("download"), " Download All Results"),
          class = "btn-primary"
        )
      ),

      # JavaScript for chart/table toggles
      tags$script(HTML("
        $(document).ready(function() {
          // Helper function to toggle views using CSS classes
          function toggleView(chartBtn, tableBtn, chartView, tableView) {
            $(chartBtn).click(function() {
              $(chartBtn).addClass('active');
              $(tableBtn).removeClass('active');
              $(chartView).removeClass('results-view-hidden').addClass('results-view-visible');
              $(tableView).removeClass('results-view-visible').addClass('results-view-hidden');
            });
            $(tableBtn).click(function() {
              $(tableBtn).addClass('active');
              $(chartBtn).removeClass('active');
              $(chartView).removeClass('results-view-visible').addClass('results-view-hidden');
              $(tableView).removeClass('results-view-hidden').addClass('results-view-visible');
              // Trigger resize to help DataTables adjust columns
              setTimeout(function() {
                $(window).trigger('resize');
                // Also trigger DataTables column adjustment if available
                var table = $(tableView).find('.dataTable').DataTable();
                if (table && table.columns) {
                  table.columns.adjust();
                }
              }, 50);
            });
          }

          // Set up toggles for each results section
          toggleView('#total_chart_btn', '#total_table_btn', '#total_chart_view', '#total_table_view');
          toggleView('#class_chart_btn', '#class_table_btn', '#class_chart_view', '#class_table_view');
          toggleView('#food_chart_btn', '#food_table_btn', '#food_chart_view', '#food_table_view');
        });
      "))
    )
  ),

  # --------------------------------------------------------------------------
  # Tab 4: QA/QC
  # --------------------------------------------------------------------------
  nav_panel(
    title = "QA/QC",
    value = "qaqc",
    icon = icon("clipboard-check"),
    class = "fade-in",
    layout_columns(
      col_widths = c(12),
      card(
        card_header(
          class = "d-flex justify-content-between align-items-center bg-warning text-dark",
          tags$span(icon("triangle-exclamation"), " Unmapped Foods Report"),
          tags$div(
            class = "btn-group btn-group-sm view-toggle",
            role = "group",
            `aria-label` = "Toggle between chart and table view",
            tags$button(type = "button", class = "btn btn-outline-dark active", id = "qaqc_chart_btn",
                        icon("chart-bar"), " Chart"),
            tags$button(type = "button", class = "btn btn-outline-dark", id = "qaqc_table_btn",
                        icon("table"), " Table")
          )
        ),
        card_body(
          tags$p(
            class = "text-muted small",
            "Foods that could not be mapped to FooDB are listed below. ",
            "These items will not contribute to polyphenol estimates. Review this list to assess data quality."
          ),
          uiOutput("unmapped_summary"),
          tags$div(class = "results-view-container",
            tags$div(id = "qaqc_chart_view", class = "results-view-visible",
              plotlyOutput("plot_missing_distribution", height = "400px")
            ),
            tags$div(id = "qaqc_table_view", class = "results-view-hidden",
              DTOutput("table_unmapped_foods")
            )
          )
        )
      ),

      # JavaScript for QA/QC toggle
      tags$script(HTML("
        $(document).ready(function() {
          $('#qaqc_chart_btn').click(function() {
            $(this).addClass('active');
            $('#qaqc_table_btn').removeClass('active');
            $('#qaqc_chart_view').removeClass('results-view-hidden').addClass('results-view-visible');
            $('#qaqc_table_view').removeClass('results-view-visible').addClass('results-view-hidden');
          });
          $('#qaqc_table_btn').click(function() {
            $(this).addClass('active');
            $('#qaqc_chart_btn').removeClass('active');
            $('#qaqc_chart_view').removeClass('results-view-visible').addClass('results-view-hidden');
            $('#qaqc_table_view').removeClass('results-view-hidden').addClass('results-view-visible');
            setTimeout(function() {
              $(window).trigger('resize');
            }, 50);
          });
        });
      "))
    )
  ),

  # --------------------------------------------------------------------------
  # Tab 5: About
  # --------------------------------------------------------------------------
  nav_panel(
    title = "About",
    value = "about",
    icon = icon("info-circle"),
    class = "fade-in",

    # About content - use card to fill available space
    card(
      class = "about-page-card",
      card_body(
        class = "about-page-content",

        # Header with animated logo
        tags$div(
        class = "text-center mb-4",
        tags$div(
          class = "about-logo-container mx-auto",
          style = "width: 180px; height: 180px; position: relative;",
          tags$video(
            id = "about-video",
            autoplay = NA,
            muted = NA,
            playsinline = NA,
            style = "width: 100%; height: 100%; object-fit: cover; border-radius: 50%;",
            tags$source(src = "splash_animation.mp4", type = "video/mp4")
          )
        ),
        tags$h3(class = "mt-3 mb-1", style = "color: var(--primary-color);", "Polyphenol Estimation Pipeline"),
        tags$p(class = "text-muted", "Automated dietary polyphenol intake estimation")
      ),

      # About the Pipeline
      tags$div(
        class = "card mb-3",
        tags$div(class = "card-body",
          tags$h5(class = "card-title", style = "color: var(--primary-color);", "About the Pipeline"),
          tags$p(
            "The Polyphenol Estimation Pipeline automates the estimation of dietary polyphenol intake ",
            "from 24-hour diet recall data. It addresses the need for standardized, reproducible methods ",
            "to quantify polyphenol consumption in epidemiological and nutrition research."
          ),

          tags$h6(class = "mt-4", "How It Works"),
          tags$div(class = "row",
            tags$div(class = "col-md-4",
              tags$div(class = "p-2",
                tags$strong("1. Food Disaggregation"),
                tags$p(class = "small text-muted mb-0",
                  "Reported foods are broken down into ingredients using the FDA Food Disaggregation Database (FDD v3.1)."
                )
              )
            ),
            tags$div(class = "col-md-4",
              tags$div(class = "p-2",
                tags$strong("2. FooDB Mapping"),
                tags$p(class = "small text-muted mb-0",
                  "Each ingredient is mapped to its polyphenol content using FooDB, covering 3,000+ compounds."
                )
              )
            ),
            tags$div(class = "col-md-4",
              tags$div(class = "p-2",
                tags$strong("3. Intake Calculation"),
                tags$p(class = "small text-muted mb-0",
                  "Polyphenol intake calculated at total, class, and compound levels (mg and mg/1000 kcal)."
                )
              )
            )
          ),

          tags$h6(class = "mt-4", "Dietary Inflammatory Index (DII)"),
          tags$p(class = "small",
            "The pipeline calculates a 42-component DII based on Shivappa et al. (2014). This extends ",
            "previous 28-component calculations by adding 7 polyphenol subclasses (eugenol, isoflavones, ",
            "flavan-3-ols, flavones, anthocyanidins, flavanones, flavonols) and 7 anti-inflammatory foods ",
            "(garlic, ginger, onion, pepper, tea, turmeric, thyme/oregano)."
          )
        )
      ),

      # Credits
      tags$div(
        class = "card mb-3",
        tags$div(class = "card-body",
          tags$h5(class = "card-title", style = "color: var(--primary-color);", "Credits"),

          tags$div(class = "row",
            tags$div(class = "col-md-8",
              tags$h6("Pipeline Development"),
              tags$p(class = "mb-1",
                tags$strong("Stephanie M.G. Wilson")
              ),
              tags$p(class = "small text-muted mb-2",
                "University of California, Davis"
              ),
              tags$p(class = "small mb-3",
                "The polyphenol estimation methodology, database mappings, and DII calculations ",
                "were developed by Dr. Wilson as part of her research at UC Davis."
              ),
              tags$a(
                href = "https://github.com/SWi1/polyphenol_pipeline",
                target = "_blank",
                class = "btn btn-outline-primary btn-sm",
                icon("github"), " View Pipeline Repository"
              )
            ),
            tags$div(class = "col-md-4 text-md-end",
              tags$p(class = "small text-muted mb-1", "Tutorial Draft Release"),
              tags$p(class = "small text-muted", "November 2025")
            )
          ),

          tags$hr(),

          tags$h6("Web Application"),
          tags$p(class = "mb-1", tags$strong("Richard Stoker")),
          tags$p(class = "small text-muted mb-1",
            "United States Department of Agriculture - Agricultural Research Service"
          ),
          tags$p(class = "small mb-2",
            tags$a(href = "mailto:Richard.Stoker@usda.gov", "Richard.Stoker@usda.gov")
          ),
          tags$p(class = "small text-muted mb-0",
            "Shiny interface developed to provide researchers with a user-friendly way to run the pipeline ",
            "without needing to execute R scripts directly."
          )
        )
      ),

      # Citation
      tags$div(
        class = "card mb-3",
        tags$div(class = "card-body",
          tags$h5(class = "card-title", style = "color: var(--primary-color);", "Citation"),
          tags$p(class = "small mb-2",
            "If you use this pipeline in your research, please cite the pipeline repository. ",
            "For DII calculations, please also cite:"
          ),
          tags$div(
            class = "bg-light p-3 rounded",
            style = "border-left: 4px solid var(--primary-color);",
            tags$p(class = "small mb-1", tags$strong("Shivappa, N., Steck, S. E., Hurley, T. G., Hussey, J. R., & Hebert, J. R.")),
            tags$p(class = "small mb-1", "Designing and developing a literature-derived, population-based dietary inflammatory index."),
            tags$p(class = "small mb-1 text-muted", tags$em("Public Health Nutrition"), ", 17(8), 1689-1696. (2014)"),
            tags$a(href = "https://doi.org/10.1017/s1368980013002115", target = "_blank", class = "small", "https://doi.org/10.1017/s1368980013002115")
          )
        )
      ),

        # JavaScript for about page video
        tags$script(HTML("
          $(document).ready(function() {
            var aboutVideo = document.getElementById('about-video');
            if (aboutVideo) {
              aboutVideo.addEventListener('timeupdate', function() {
                if (aboutVideo.duration && aboutVideo.currentTime >= aboutVideo.duration - 1.0) {
                  aboutVideo.pause();
                }
              });
            }
          });
        "))
      )
    )
  )
)