diff --git "a/ui.R" "b/ui.R"
--- "a/ui.R"
+++ "b/ui.R"
@@ -1,1519 +1,1519 @@
-library(shiny)
-library(shinythemes)
-library(DT)
-library(reticulate)
-
-# --- Python Environment Configuration (USER ACTION REQUIRED) ---
-# Uncomment and configure ONE of the following lines to point to your Python environment
-# where 'openai' and 'pandas' are installed (from requirements.txt).
-# Ensure the path to python executable is correct or the virtual/conda env name is correct.
-
-# Option 1: Specify path to Python executable (e.g., in a virtual environment)
-# reticulate::use_python("C:/Users/28702/AppData/Local/Programs/Python/Python311/python.exe", required = TRUE) # FIXME
-
-# Option 2: Specify name of a virtual environment (if R can find it by name)
-# reticulate::use_virtualenv("your_python_venv_name", required = TRUE)
-
-# Option 3: Specify name of a Conda environment
-# reticulate::use_condaenv("your_python_conda_env_name", required = TRUE)
-
-# Ensure Python environment is configured before proceeding
-if (!py_available(initialize = TRUE)) {
-  stop("Python environment with required packages (openai, pandas) not found or configured correctly for reticulate. Please check the comments above.")
-} else {
-  print(paste("Reticulate using Python at:", py_config()$python))
-  # Try importing a core Python module to confirm setup
-  py_run_string("import json; print(\'Python integration test: json module imported successfully.\')")
-}
-
-# --- Import Python Agent Module ---
-# This assumes server.R is in the project root, and 'agents' is a subdirectory.
-# If your R working directory is not the project root, adjust sys.path or import call.
-# Ensure agents/__init__.py exists.
-manager_agent_module <- NULL
-tryCatch({
-  # Add project root to Python's sys.path if not already discoverable by reticulate
-  # This makes `import agents.manager_agent` work if R CWD is project root.
-  reticulate::py_run_string("import sys; import os; os.chdir(os.path.abspath('.')); sys.path.insert(0, os.getcwd())")
-  manager_agent_module <- reticulate::import("agents.manager_agent")
-  print("Successfully imported Python 'agents.manager_agent' module.")
-}, error = function(e) {
-  stop(paste("Failed to import Python 'agents.manager_agent' module. Error:", e$message, 
-             "Ensure your R working directory is the project root (containing server.R and the 'agents' folder), ",
-             "and that agents/__init__.py exists. Also check Python environment."))
-})
-
-# Source the new chat UI definitions
-source("chat_ui.R", local = TRUE) # local = TRUE is good practice if chat_ui.R defines reactive expressions, though here it's just UI functions
-
-# setwd("/Users/audrey/Downloads/research/ckweb/Tcellstates")
-
-js_code <- "
-  Shiny.addCustomMessageHandler('redirect', function(url) {
-    window.open(url, '_blank');
-  });
-"
-
-# ---- REMOVE TEMPORARY DEBUG ----
-# generated_sidebar_html <- chatSidebarUI()
-# print("--- HTML generated by chatSidebarUI(): ---")
-# print(generated_sidebar_html)
-# ---- END REMOVE TEMPORARY DEBUG ----
-
-# Define UI
-ui <- navbarPage(
-  # title = "T Cell States",
-  title = "",
-  id = "mainNav",
-  theme = shinytheme("flatly"),
-  
-  tags$style(HTML("
-    body, h1, h2, h3, h4, h5, h6, p, a, li, span, div {
-      font-family: 'Arial', sans-serif;
-    }
-    p {
-      font-size: 16px; /* Adjust the size as needed */
-    }
-
-    /* === CSS TO MATCH THEME'S VERTICAL ALIGNMENT === */
-    /*
-    .nav.navbar-nav > li > a {
-      padding-top: YOUR_PADDING_TOP !important;
-      padding-bottom: YOUR_PADDING_BOTTOM !important;
-      line-height: YOUR_LINE_HEIGHT !important;
-    }
-    */
-    /* === END OF CSS === */
-  ")),
-  
-  tags$head(
-    tags$link(rel = "stylesheet", type = "text/css", href = "chat_styles.css"),
-    tags$script(src = "chat_script.js")
-  ),
-  
-  tabPanel(
-    "Home",
-    # Big header in a box
-    tags$div(
-      style = "background-color: #f8f9fa; padding: 20px;",
-      tags$h1(
-        "TF atlas of CD8+ T cell states",
-        style = "font-size: 36px;",
-        align = "center"
-      )
-    ),
-    
-    br(),
-    
-    tags$div(
-      p(
-        "This website serves as a companion resource to our study, 'Multi-Omics Atlas-Assisted Discovery of Transcription Factors for Selective T Cell State Programming.' It is designed to make the bioinformatics analyses and data from the study accessible to researchers from diverse backgrounds, including those without extensive bioinformatics expertise. The platform provides comprehensive tools to explore transcription factor (TF) activities across distinct T cell states, enabling users to examine TF scores for specific cell states, multi-state TFs and their regulatory roles, visualize TF relationships using wave and network analyses and access a searchable database of TF scores and multi-omics data. Explore our TF catalog, network analyses, and more to uncover insights into our study."
-      ),
-
-      align = "center"
-    ),
-    
-    br(),
-    br(),
-    
-    #NEW WITH UPDATED HOME PAGE LAYOUT
-    tags$div(
-      # Container using flexbox to arrange image and text horizontally
-      tags$div(
-        style = "display: flex; justify-content: space-between; align-items: center; width: 100%;",
-        
-        # First image with action links (take more space)
-        tags$div(
-          style = "flex: 4;",  # Give this div more space (4 parts for the image)
-          tags$img(
-            src = "homedesc.png",
-            style = "max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;",
-            usemap = "#image-map",
-            alt = "something went wrong",
-            deleteFile = FALSE
-          ),
-          # ActionLink 1
-          actionLink(
-            "to_tfcat",
-            "",
-            style = "position: absolute; top: 92%; left: 54%;
-                  width: 100px; height: 70px; background-color: transparent; border: none;"
-          ),
-          # ActionLink 2
-          actionLink(
-            "to_tfwave",
-            "",
-            style = "position: absolute; top: 92%; left: 66%;
-                  width: 100px; height: 70px; background-color: transparent; border: none;"
-          ),
-          # ActionLink 3
-          actionLink(
-            "to_tfnet",
-            "",
-            style = "position: absolute; top: 92%; left: 80%;
-                  width: 100px; height: 70px; background-color: transparent; border: none;"
-          )
-        ),
-        
-        # Text (p tag) will take less space than the images
-        tags$div(
-          style = "flex: 2; font-size: 12px; padding: 10px;",  # Reduced space and smaller font
-          p(
-            "Naive T cells adopt diverse states in various contexts, such as acute or chronic infections and tumors. Upon activation, they
-                      become early effector (EE) cells that differentiate into distinct CD8+ T cell subsets with varied trafficking patterns—residing
-                      in lymphoid organs, blood, or peripheral tissues."
-          ),
-          p(
-            "In acute infection, TE (Terminal Effector) cells are found in the spleen or blood, while MP (Memory Precursor) cells mainly
-                      reside in lymphoid structures. TCM (Central Memory) and TEM (Effector Memory) cells circulate in the blood, with TCM predominant
-                      in lymphoid organs and TEM in tissues. TPM cells circulate throughout lymph, blood, and tissues, while TRM (Tissue-Resident Memory)
-                      cells stay long-term in tissues."
-          ),
-          p(
-            "Similarly, chronic infections or tumors induce T cell states through chronic antigen exposure, leading to a spectrum of exhaustion,
-                      from TEXprog (Progenitor) to TEXterm (Terminal). These cells lose function over time, with TEXterm becoming dysfunctional."
-          ),
-          p(
-            "In this study, we developed a pipeline to analyze transcription factor regulation across CD8+ T cell states, enabling therapeutic
-                        manipulation. Using 121 experiments, we created an epigenetic and transcription atlas of 9 cell states, allowing an unbiased analysis of
-                        unique and shared transcription factor activities across memory and exhaustion contexts."
-          )
-        )
-      )
-    ),
-    
-    # Button saying "Read Now"
-    tags$head(tags$script(HTML(js_code))),
-    tags$h3("Reference", style = "text-align: center;"),
-    tags$div(
-      style = "text-align: center;",
-      actionButton("read_now", "Multi-Omics Atlas-Assisted Discovery of Transcription Factors for Selective T Cell State Programming. bioRxiv (2024)", style = "font-size: 13px; margin-top: 20px;")
-    ),
-    
-    br(),
-    
-    tags$p(
-      "Transcription factors (TFs) regulate the differentiation of T cells into diverse states with distinct functionalities. To precisely program
-        desired T cell states in viral infections and cancers, we generated a comprehensive transcriptional and epigenetic atlas of nine CD8+ T cell
-        differentiation states for TF activity prediction. Our analysis catalogued TF activity fingerprints of each state, uncovering new regulatory
-        mechanisms that govern selective cell state differentiation. Leveraging this platform, we focused on two critical T cell states in tumor and
-        virus control: terminally exhausted T cells (TEXterm), which are dysfunctional, and tissue-resident memory T cells (TRM), which are protective.
-        Despite their functional differences, these states share significant transcriptional and anatomical similarities, making it both challenging and
-        essential to engineer T cells that avoid TEXterm differentiation while preserving beneficial TRM characteristics. Through in vivo CRISPR screening
-        combined with single-cell RNA sequencing (Perturb-seq), we validated the specific TFs driving the TEXterm state and confirmed the accuracy of TF
-        specificity predictions. Importantly, we discovered novel TEXterm-specific TFs such as ZSCAN20, JDP2, and ZFP324. The deletion of these TEXterm-specific
-        TFs in T cells enhanced tumor control and synergized with immune checkpoint blockade. Additionally, this study identified multi-state TFs like HIC1
-        and GFI1, which are vital for both TEXterm and TRM states. Furthermore, our global TF community analysis and Perturb-seq experiments revealed how TFs
-        differentially regulate key processes in TRM and TEXterm cells, uncovering new biological pathways like protein catabolism that are specifically linked
-        to TEXterm differentiation. In summary, our platform systematically identifies TF programs across diverse T cell states, facilitating the engineering of
-        specific T cell states to improve tumor control and providing insights into the cellular mechanisms underlying their functional disparities."
-    ),
-    
-
-    # Placeholder for content below the button
-    uiOutput("home_content"),
-    
-    #logos and website links
-    fluidRow(
-      tags$div(
-        style = "width: 100%; background-color: #f8f9fa; padding: 10px; display: flex; justify-content: space-between; align-items: center;",  # Use flexbox for full-width layout
-        # Left half: Links
-        tags$div(
-          style = "width: 48%; text-align: left;",  # Adjusted to allow space for both sections
-          HTML("<a href='http://wanglab.ucsd.edu/' class='link-style'>http://wanglab.ucsd.edu/</a>"),
-          br(),
-          HTML("<a href='https://unclineberger.org/chunglab/' class='link-style'>https://unclineberger.org/chunglab/</a>"),
-          br(),
-          HTML("<a href='https://kaech.salk.edu/' class='link-style'>https://kaech.salk.edu/</a>")
-        ),
-        # Right half: Logos
-        tags$div(
-          style = "width: 48%; text-align: center;",  # Adjusted to allow space for both sections
-          tags$img(src = "ucsdlogo.png", style = "max-width: 40%; height: auto; margin-left: 10px;"),
-          tags$img(src = "salklogo.png", style = "max-width: 40%; height: auto; margin-left: 10px;"),
-          tags$img(src = "unclogo.jpg", style = "max-width: 40%; height: auto; margin-left: 10px;")
-        )
-      )
-    )
-    
-    
-  ),
-  
-  navbarMenu(
-    "TF Catalog",
-    tabPanel(
-      "Search TF Scores",
-      value = "tfcatpage",
-      selected = "searchtfscorespage",
-      
-      tags$h1("Search TF Scores",
-              align="center"),
-      
-      #NEW DESCRIPTION
-      tags$p("TF score: normalized PageRank scores across samples. Higher scores mean higher activity. TF score takes account of TF expression level, ATAC-seq peak intensity, and motif binding affinity. A TF needs to have both open chromatin regions and gene expression of its downstream genes to have high PageRank scores. For the detailed information of how TF scores are calculated, visit the link: ", 
-             tags$a(href = "https://taiji-pipeline.github.io/algorithm_PageRank.html", "https://taiji-pipeline.github.io/algorithm_PageRank.html"), 
-             align = "left"),
-      tags$p("Cell-state specificity: significantly higher TF score in specific cell state. For example, 'TEXterm' means TF has significantly higher TF score in TEXterm. 'ALL' means no cell-state specificity.", align="left"),
-      tags$p("Sample name nomenclature: cell state abbreviation + first author of RNA dataset + first author of ATAC dataset. If the same author has multiple datasets, then publication year and month is used. For example: 'Milner17' means Milner paper published in 2017; 'MilnerApr' means Milner paper published in April.", align="left"),
-      br(),
-      
-      
-      fluidRow(
-        
-        column(
-          4,
-          tags$img(src = "tfcat/onlycellstates.png",
-                   style = "max-width: 100%; height: auto;",
-                   alt = "Image on left"),
-          br(),
-          br(),
-        ),
-        
-        column(8,
-               fluidRow(
-                 column(
-                   width = 12,
-                   align = "center",
-                   # Search bar
-                   # p("Search TF activity score in each cell state below."),
-                   br(),
-                   textInput("search_input", label = "Search", placeholder = "Enter interested regulator name..."),
-                   
-                   #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
-                   actionButton("prev_btn", "Previous 4 columns"),
-                   actionButton("next_btn", "Next 4 columns"),
-                   br(),
-                   br()
-                 )
-               ),
-               
-               #read in excel file and make it searchable
-               fluidRow(
-                 column(width = 12, align = "center", # Center the content
-                        # Output table
-                        DTOutput("table")),
-                       # Render pagination controls
-                       uiOutput("pagination")
-               )),
-        br(),
-        br()
-      )
-    ),
-    
-    
-    # navbarMenu("Cell State Specific TF Catalog",
-    tabPanel(
-      "Cell State Specific TF Catalog",
-      navlistPanel(
-        "Cell State Specific TF Catalog",
-        tabPanel(
-          "Naive",
-          fluidRow(column(
-            12,
-            align = "center",
-            # Center the content
-            tags$h1("Naive Specific Cells & normalized TF Activity Scores"),
-            p(
-              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
-            ),
-            p(
-              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
-            ),
-            br(),
-            # Render the image
-            tags$img(src = "bubbleplots/naivebubble.jpg", width = "100%")
-          )),
-          
-          br(),
-          br(),
-          
-          #search bar
-          fluidRow(column(
-            width = 12,
-            align = "center",
-            # Center the content
-            # Search bar
-            textInput("search_input_naive", label = "Search", placeholder = "Enter interested regulator name..."),
-            
-            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
-            actionButton("naive_prev_btn", "Previous 4 columns"),
-            actionButton("naive_next_btn", "Next 4 columns"),
-            br(),
-            br()
-          )),
-          
-          fluidRow(column(
-            width = 12, align = "center", # Center the content
-            DTOutput("table_naive")
-          ))
-        ),
-        
-        tabPanel(
-          "TE (Terminal Effector)",
-          fluidRow(column(
-            12,
-            align = "center",
-            # Center the content
-            tags$h1("TE Specific Cells & normalized TF Activity Scores"),
-            p(
-              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
-            ),
-            p(
-              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
-            ),
-            br(),
-            # Render the image
-            tags$img(src = "bubbleplots/tebubble.jpg", width = "100%")
-          )),
-          
-          br(),
-          br(),
-          
-          #search bar
-          fluidRow(column(
-            width = 12,
-            align = "center",
-            # Center the content
-            # Search bar
-            textInput("search_input_te", label = "Search", placeholder = "Enter interested regulator name..."),
-            
-            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
-            actionButton("te_prev_btn", "Previous 4 columns"),
-            actionButton("te_next_btn", "Next 4 columns"),
-            br(),
-            br()
-          )),
-          
-          fluidRow(column(
-            width = 12, align = "center", # Center the content
-            DTOutput("table_te")
-          ))
-        ),
-        
-        tabPanel(
-          "MP (Memory Pressuror)",
-          fluidRow(column(
-            12,
-            align = "center",
-            # Center the content
-            tags$h1("MP Specific Cells & normalized TF Activity Scores"),
-            p(
-              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
-            ),
-            p(
-              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
-            ),
-            br(),
-            # Render the image
-            tags$img(src = "bubbleplots/mpbubble.jpg", width = "100%")
-          )),
-          
-          br(),
-          br(),
-          
-          #search bar
-          fluidRow(column(
-            width = 12,
-            align = "center",
-            # Center the content
-            # Search bar
-            textInput("search_input_mp", label = "Search", placeholder = "Enter interested regulator name..."),
-            
-            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
-            actionButton("mp_prev_btn", "Previous 4 columns"),
-            actionButton("mp_next_btn", "Next 4 columns"),
-            br(),
-            br()
-          )),
-          
-          fluidRow(column(
-            width = 12, align = "center", # Center the content
-            DTOutput("table_mp")
-          ))
-        ),
-        
-        tabPanel(
-          "Tcm (Central Memory)",
-          fluidRow(column(
-            12,
-            align = "center",
-            # Center the content
-            tags$h1("Tcm Specific Cells & normalized TF Activity Scores"),
-            p(
-              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
-            ),
-            p(
-              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
-            ),
-            br(),
-            # Render the image
-            tags$img(src = "bubbleplots/tcmbubble.jpg", width = "100%")
-          )),
-          
-          br(),
-          br(),
-          
-          #search bar
-          fluidRow(column(
-            width = 12,
-            align = "center",
-            # Center the content
-            # Search bar
-            textInput("search_input_tcm", label = "Search", placeholder = "Enter interested regulator name..."),
-            
-            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
-            actionButton("tcm_prev_btn", "Previous 4 columns"),
-            actionButton("tcm_next_btn", "Next 4 columns"),
-            br(),
-            br()
-          )),
-          
-          fluidRow(column(
-            width = 12, align = "center", # Center the content
-            DTOutput("table_tcm")
-          ))
-        ),
-        
-        tabPanel(
-          "Tem (Effector Memory)",
-          fluidRow(column(
-            12,
-            align = "center",
-            # Center the content
-            tags$h1("Tem Specific Cells & normalized TF Activity Scores"),
-            p(
-              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
-            ),
-            p(
-              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
-            ),
-            br(),
-            # Render the image
-            tags$img(src = "bubbleplots/tembubble.jpg", width = "100%")
-          )),
-          
-          br(),
-          br(),
-          
-          #search bar
-          fluidRow(column(
-            width = 12,
-            align = "center",
-            # Center the content
-            # Search bar
-            textInput("search_input_tem", label = "Search", placeholder = "Enter interested regulator name..."),
-            
-            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
-            actionButton("tem_prev_btn", "Previous 4 columns"),
-            actionButton("tem_next_btn", "Next 4 columns"),
-            br(),
-            br()
-          )),
-          
-          fluidRow(column(
-            width = 12, align = "center", # Center the content
-            DTOutput("table_tem")
-          ))
-        ),
-        
-        tabPanel(
-          "Trm (Tissue-Resident Memory)",
-          fluidRow(column(
-            12,
-            align = "center",
-            # Center the content
-            tags$h1("Trm Specific Cells & normalized TF Activity Scores"),
-            p(
-              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores."
-            ),
-            p(
-              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
-            ),
-            br(),
-            # Render the image
-            tags$img(src = "bubbleplots/trmbubble.jpg", width = "100%")
-          )),
-          
-          br(),
-          br(),
-          
-          #search bar
-          fluidRow(column(
-            width = 12,
-            align = "center",
-            # Center the content
-            # Search bar
-            textInput("search_input_trm", label = "Search", placeholder = "Enter interested regulator name..."),
-            
-            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
-            actionButton("trm_prev_btn", "Previous 4 columns"),
-            actionButton("trm_next_btn", "Next 4 columns"),
-            br(),
-            br()
-          )),
-          
-          fluidRow(column(
-            width = 12, align = "center", # Center the content
-            DTOutput("table_trm")
-          ))
-        ),
-        
-        tabPanel(
-          "TEXprog",
-          fluidRow(column(
-            12,
-            align = "center",
-            # Center the content
-            tags$h1("TEXprog Specific Cells & normalized TF Activity Scores"),
-            p(
-              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
-            ),
-            br(),
-            # Render the image
-            tags$img(src = "bubbleplots/texprogbubble.jpg", width = "100%")
-          )),
-          
-          br(),
-          br(),
-          
-          #search bar
-          fluidRow(column(
-            width = 12,
-            align = "center",
-            # Center the content
-            # Search bar
-            textInput("search_input_texprog", label = "Search", placeholder = "Enter interested regulator name..."),
-            
-            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
-            actionButton("texprog_prev_btn", "Previous 4 columns"),
-            actionButton("texprog_next_btn", "Next 4 columns"),
-            br(),
-            br()
-          )),
-          
-          fluidRow(column(
-            width = 12,
-            align = "center",
-            # Center the content
-            DTOutput("table_texprog")
-          ))
-        ),
-        
-        tabPanel(
-          "TEXeff-like",
-          fluidRow(column(
-            12,
-            align = "center",
-            # Center the content
-            tags$h1("TEXeff-like Specific Cells & normalized TF Activity Scores"),
-            p(
-              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
-            ),
-            p(
-              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
-            ),
-            br(),
-            # Render the image
-            tags$img(src = "bubbleplots/texintbubble.jpg", width = "100%")
-          )),
-          
-          br(),
-          br(),
-          
-          #search bar
-          fluidRow(column(
-            width = 12,
-            align = "center",
-            # Center the content
-            # Search bar
-            textInput("search_input_texefflike", label = "Search", placeholder = "Enter interested regulator name..."),
-            
-            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
-            actionButton("texefflike_prev_btn", "Previous 4 columns"),
-            actionButton("texefflike_next_btn", "Next 4 columns"),
-            br(),
-            br()
-          )),
-          
-          fluidRow(column(
-            width = 12,
-            align = "center",
-            # Center the content
-            DTOutput("table_texefflike")
-          ))
-        ),
-        
-        tabPanel(
-          "TEXterm",
-          fluidRow(column(
-            12,
-            align = "center",
-            # Center the content
-            tags$h1("TEXterm Specific Cells & normalized TF Activity Scores"),
-            p(
-              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
-            ),
-            p(
-              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
-            ),
-            br(),
-            # Render the image
-            tags$img(src = "bubbleplots/textermbubble.jpg", width = "100%")
-          )),
-          
-          br(),
-          br(),
-          
-          #search bar
-          fluidRow(column(
-            width = 12,
-            align = "center",
-            textInput("search_input_texterm", label = "Search", placeholder = "Enter interested regulator name..."),
-            
-            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
-            actionButton("texterm_prev_btn", "Previous 4 columns"),
-            actionButton("texterm_next_btn", "Next 4 columns"),
-            br(),
-            br()
-          )),
-          
-          fluidRow(column(
-            width = 12,
-            align = "center",
-            DTOutput("table_texterm")
-          ))
-        )
-      )
-    ),
-    
-    tabPanel("Multi-State TFs",
-             tags$h1("Multi-State TFs",
-                     align="center"),
-             
-             fluidRow(
-               tags$div(
-                 style = "text-align: center;",  # Center align the text
-                 # h4("Multi-state TFs"),
-                 
-                 tags$img(src="tfcat/multistatesheatmap.png",
-                          style = "max-width: 80%; height: auto;",
-                          alt = "multi state TF heatmaps")
-               )
-               
-             ))
-    
-  ),
-  
-  navbarMenu(
-    "TF Wave Analysis",
-    tabPanel(
-      "Overview",
-      value = "overview",
-      
-      fluidRow(
-        column(
-          12,
-          align = "center",
-          tags$h1("TF Wave Analysis"),
-          p(
-            "To evaluate the predicted TFs governing specific T cell differentiation pathways, we identified dynamic activity patterns of TF groups, termed 'Transcription factor waves'. Transcription factor waves are generated via integration of the unbiased clustering and prior immunology
-                    knowledge. This curates catalogs of TFs associated with different cell states or differentiation trajectories. Circles
-                    represent specific cell state. Color indicates normalized PageRank scores with red displaying high values. Click to
-                    check TFs and GSEA results associated with each wave."
-          ), 
-          br(),
-          tags$img(
-            src = "tfwaveanal.png",
-            style = "max-width: 80%; height: auto;",
-            alt = "something went wrong",
-            deleteFile = FALSE
-          ),
-          br(),
-          br(),
-          
-          tags$div(style = "background-color: #f8f9fa; padding: 20px;",
-                   p("TF Waves", style = "font-size: 26px;")),
-          br(),
-          p(
-            "Seven TF waves associated with distinctive biological pathways were identified. For example, the TRM TF wave (Wave 6) includes several members of the AP-1 family (e.g. Atf3, Fosb, Fosl2, and Jun), which aligns well with a recent report of their roles in TRM formation (",
-            tags$a(href = "https://www.biorxiv.org/content/10.1101/2023.09.29.560006v1", "link", target = "_blank"),
-            "). This wave was uniquely linked to the transforming growth factor beta (TGFβ) response pathway. Conversely, the TEX TF (including TEXprog, TEXeff, and TEXterm) wave, Wave 2, was characterized by a distinct set of TFs, such as Irf8, Jdp2, Nfatc1, and Vax2, among others, that correlated with pathways related to PD1 and senescence."
-          ),
-          br(),
-          p("Click on the wave images below to be redirected to their corresponding pages and learn more about them!"),
-          br(),
-          br()
-        )
-      ),
-      
-      
-      #NEW WAVE LAYOUT (W/OUT HEATMAP ON THE RIGHT)
-      fluidRow(
-        # First row with 3 images
-        column(
-          12,  # This ensures the entire row is used
-          align = "center",
-          fluidRow(
-            column(
-              4, align = "center",
-              h5("Wave 1"),
-              actionLink(
-                "c1_link",
-                tags$img(
-                  src = "waveanalysis/c1.jpg",
-                  style = "max-width: 100%; height: auto;",
-                  deleteFile = FALSE
-                )
-              )
-            ),
-            column(
-              4, align = "center",
-              h5("Wave 2"),
-              actionLink(
-                "c2_link",
-                tags$img(
-                  src = "waveanalysis/c2.jpg",
-                  style = "max-width: 100%; height: auto;",
-                  deleteFile = FALSE
-                )
-              )
-            ),
-            column(
-              4, align = "center",
-              h5("Wave 3"),
-              actionLink(
-                "c3_link",
-                tags$img(
-                  src = "waveanalysis/c3.jpg",
-                  style = "max-width: 100%; height: auto;",
-                  deleteFile = FALSE
-                )
-              )
-            )
-          )
-        ),
-        # Second row with 3 images
-        column(
-          12,  # This ensures the entire row is used
-          align = "center",
-          fluidRow(
-            column(
-              4, align = "center",
-              h5("Wave 4"),
-              actionLink(
-                "c4_link",
-                tags$img(
-                  src = "waveanalysis/c4.jpg",
-                  style = "max-width: 100%; height: auto;",
-                  deleteFile = FALSE
-                )
-              )
-            ),
-            column(
-              4, align = "center",
-              h5("Wave 5"),
-              actionLink(
-                "c5_link",
-                tags$img(
-                  src = "waveanalysis/c5.jpg",
-                  style = "max-width: 100%; height: auto;",
-                  deleteFile = FALSE
-                )
-              )
-            ),
-            column(
-              4, align = "center",
-              h5("Wave 6"),
-              actionLink(
-                "c6_link",
-                tags$img(
-                  src = "waveanalysis/c6.jpg",
-                  style = "max-width: 100%; height: auto;",
-                  deleteFile = FALSE
-                )
-              )
-            )
-          )
-        )
-      ),
-      
-      #add search tf to find which wave they are in
-      # Wave Search Bar
-      fluidRow(
-        column(
-          width = 12,
-          align = "center",
-          textInput("search_input_wave", label = "Wave Search", placeholder = "Enter interested TF name...")
-        )
-      ),
-      
-      # Table output
-      fluidRow(
-        column(
-          width = 12,
-          align = "center",
-          DTOutput("table_wave")
-        )
-      )
-      
-    ),
-    
-    tabPanel("Wave 1", value = "c1",
-             fluidRow(
-               column(
-                 12,
-                 align = "center",
-                 tags$h1("Wave 1 Analysis"),
-                 p("Details about the Wave 1 analysis go here."),
-                 br(),
-                 fluidRow(
-                   column(
-                     6,
-                     align = "center",
-                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                              p("Wave 1", style = "font-size: 20px;")),
-                     tags$img(
-                       src = "waveanalysis/c1.jpg",
-                       style = "max-width: 100%; height: auto;",
-                       deleteFile = FALSE
-                     )
-                   ),
-                   column(
-                     6,
-                     align = "center",
-                     fluidRow(column(
-                       12,
-                       align = "center",
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("GO KEGG Result", style = "font-size: 20px;")),
-                       tags$img(
-                         src = "waveanalysis/c1_selected_GO_KEGG.jpg",
-                         style = "max-width: 100%; height: auto;",
-                         deleteFile = FALSE
-                       )
-                     )),
-                     br(),
-                     
-                     fluidRow(
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("Ranked Text", style = "font-size: 20px;")),
-                       column(
-                         12,
-                         align = "center",
-                         tags$img(
-                           src = "waveanalysis/txtJPG/c1_ranked_1.jpg",
-                           style = "max-width: 100%; height: auto;",
-                           deleteFile = FALSE
-                         )
-                       ),
-                       column(
-                         12,
-                         align = "center",
-                         tags$img(
-                           src = "waveanalysis/txtJPG/c1_ranked_2.jpg",
-                           style = "max-width: 100%; height: auto;",
-                           deleteFile = FALSE
-                         )
-                       )
-                     )
-                   )
-                 )
-               )
-             )),
-    
-    tabPanel("Wave 2", value = "c2",
-             fluidRow(
-               column(
-                 12,
-                 align = "center",
-                 tags$h1("Wave 2 Analysis"),
-                 p("Details about the Wave 2 analysis go here."),
-                 br(),
-                 fluidRow(
-                   column(
-                     6,
-                     align = "center",
-                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                              p("Wave 2", style = "font-size: 20px;")),
-                     tags$img(
-                       src = "waveanalysis/c2.jpg",
-                       style = "max-width: 100%; height: auto;",
-                       deleteFile = FALSE
-                     )
-                   ),
-                   column(
-                     6,
-                     align = "center",
-                     fluidRow(column(
-                       12,
-                       align = "center",
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("GO KEGG Result", style = "font-size: 20px;")),
-                       tags$img(
-                         src = "waveanalysis/c2_selected_GO_KEGG_v2.jpg",
-                         style = "max-width: 100%; height: auto;",
-                         deleteFile = FALSE
-                       )
-                     )),
-                     br(),
-                     
-                     fluidRow(
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("Ranked Text", style = "font-size: 20px;")),
-                       column(
-                         12,
-                         align = "center",
-                         tags$img(
-                           src = "waveanalysis/txtJPG/c2_ranked.jpg",
-                           style = "max-width: 100%; height: auto;",
-                           deleteFile = FALSE
-                         )
-                       )
-                     )
-                   )
-                 )
-               )
-             )),
-    
-    tabPanel("Wave 3", value = "c3",
-             fluidRow(
-               column(
-                 12,
-                 align = "center",
-                 tags$h1("Wave 3 Analysis"),
-                 p("Details about the Wave 3 analysis go here."),
-                 br(),
-                 fluidRow(
-                   column(
-                     6,
-                     align = "center",
-                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                              p("Wave 3", style = "font-size: 20px;")),
-                     tags$img(
-                       src = "waveanalysis/c3.jpg",
-                       style = "max-width: 100%; height: auto;",
-                       deleteFile = FALSE
-                     )
-                   ),
-                   column(
-                     6,
-                     align = "center",
-                     fluidRow(column(
-                       12,
-                       align = "center",
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("GO KEGG Result", style = "font-size: 20px;")),
-                       tags$img(
-                         src = "waveanalysis/c3_selected_GO_KEGG.jpg",
-                         style = "max-width: 100%; height: auto;",
-                         deleteFile = FALSE
-                       )
-                     )),
-                     br(),
-                     
-                     fluidRow(
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("Ranked Text", style = "font-size: 20px;")),
-                       column(
-                         12,
-                         align = "center",
-                         tags$img(
-                           src = "waveanalysis/txtJPG/c3_ranked.jpg",
-                           style = "max-width: 100%; height: auto;",
-                           deleteFile = FALSE
-                         )
-                       )
-                     )
-                   )
-                 )
-               )
-             )),
-    
-    tabPanel("Wave 4", value = "c4",
-             fluidRow(
-               column(
-                 12,
-                 align = "center",
-                 tags$h1("Wave 4 Analysis"),
-                 p("Details about the Wave 4 analysis go here."),
-                 br(),
-                 fluidRow(
-                   column(
-                     6,
-                     align = "center",
-                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                              p("Wave 4", style = "font-size: 20px;")),
-                     tags$img(
-                       src = "waveanalysis/c4.jpg",
-                       style = "max-width: 100%; height: auto;",
-                       deleteFile = FALSE
-                     )
-                   ),
-                   column(
-                     6,
-                     align = "center",
-                     fluidRow(column(
-                       12,
-                       align = "center",
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("GO KEGG Result", style = "font-size: 20px;")),
-                       tags$img(
-                         src = "waveanalysis/c4_selected_GO_KEGG.jpg",
-                         style = "max-width: 100%; height: auto;",
-                         deleteFile = FALSE
-                       )
-                     )),
-                     br(),
-                     
-                     fluidRow(
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("Ranked Text", style = "font-size: 20px;")),
-                       column(
-                         12,
-                         align = "center",
-                         tags$img(
-                           src = "waveanalysis/txtJPG/c4_ranked.jpg",
-                           style = "max-width: 100%; height: auto;",
-                           deleteFile = FALSE
-                         )
-                       )
-                     )
-                   )
-                 )
-               )
-             )),
-    
-    tabPanel("Wave 5", value = "c5",
-             fluidRow(
-               column(
-                 12,
-                 align = "center",
-                 tags$h1("Wave 5 Analysis"),
-                 p("Details about the Wave 5 analysis go here."),
-                 br(),
-                 fluidRow(
-                   column(
-                     6,
-                     align = "center",
-                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                              p("Wave 5", style = "font-size: 20px;")),
-                     tags$img(
-                       src = "waveanalysis/c5.jpg",
-                       style = "max-width: 100%; height: auto;",
-                       deleteFile = FALSE
-                     )
-                   ),
-                   column(
-                     6,
-                     align = "center",
-                     fluidRow(column(
-                       12,
-                       align = "center",
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("GO KEGG Result", style = "font-size: 20px;")),
-                       tags$img(
-                         src = "waveanalysis/c5_selected_GO_KEGG.jpg",
-                         style = "max-width: 100%; height: auto;",
-                         deleteFile = FALSE
-                       )
-                     )),
-                     br(),
-                     
-                     fluidRow(
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("Ranked Text", style = "font-size: 20px;")),
-                       column(
-                         12,
-                         align = "center",
-                         tags$img(
-                           src = "waveanalysis/txtJPG/c5_ranked.jpg",
-                           style = "max-width: 100%; height: auto;",
-                           deleteFile = FALSE
-                         )
-                       )
-                     )
-                   )
-                 )
-               )
-             )),
-    
-    tabPanel("Wave 6", value = "c6",
-             fluidRow(
-               column(
-                 12,
-                 align = "center",
-                 tags$h1("Wave 6 Analysis"),
-                 p("Details about the Wave 6 analysis go here."),
-                 br(),
-                 fluidRow(
-                   column(
-                     6,
-                     align = "center",
-                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                              p("Wave 6", style = "font-size: 20px;")),
-                     tags$img(
-                       src = "waveanalysis/c6.jpg",
-                       style = "max-width: 100%; height: auto;",
-                       deleteFile = FALSE
-                     )
-                   ),
-                   column(
-                     6,
-                     align = "center",
-                     fluidRow(column(
-                       12,
-                       align = "center",
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("GO KEGG Result", style = "font-size: 20px;")),
-                       tags$img(
-                         src = "waveanalysis/c6_selected_GO_KEGG.jpg",
-                         style = "max-width: 100%; height: auto;",
-                         deleteFile = FALSE
-                       )
-                     )),
-                     br(),
-                     
-                     fluidRow(
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("Ranked Text", style = "font-size: 20px;")),
-                       column(
-                         12,
-                         align = "center",
-                         tags$img(
-                           src = "waveanalysis/txtJPG/c6_ranked.jpg",
-                           style = "max-width: 100%; height: auto;",
-                           deleteFile = FALSE
-                         )
-                       )
-                     )
-                   )
-                 )
-               )
-             )),
-    
-    tabPanel("Wave 7", value = "c7",
-             fluidRow(
-               column(
-                 12,
-                 align = "center",
-                 tags$h1("Wave 7 Analysis"),
-                 p("Details about the Wave 7 analysis go here."),
-                 br(),
-                 fluidRow(
-                   column(
-                     6,
-                     align = "center",
-                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                              p("Wave 7", style = "font-size: 20px;")),
-                     tags$img(
-                       src = "waveanalysis/c7.jpg",
-                       style = "max-width: 100%; height: auto;",
-                       deleteFile = FALSE
-                     )
-                   ),
-                   column(
-                     6,
-                     align = "center",
-                     fluidRow(column(
-                       12,
-                       align = "center",
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("GO KEGG Result", style = "font-size: 20px;")),
-                       tags$img(
-                         src = "waveanalysis/c7_selected_GO_KEGG.jpg",
-                         style = "max-width: 100%; height: auto;",
-                         deleteFile = FALSE
-                       )
-                     )),
-                     br(),
-                     
-                     fluidRow(
-                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
-                                p("Ranked Text", style = "font-size: 20px;")),
-                       column(
-                         12,
-                         align = "center",
-                         tags$img(
-                           src = "waveanalysis/txtJPG/c7_ranked.jpg",
-                           style = "max-width: 100%; height: auto;",
-                           deleteFile = FALSE
-                         )
-                       )
-                     )
-                   )
-                 )
-               )
-             ))
-  ),
-  
-  # TF Network Analysis
-  navbarMenu(
-    "TF Network Analysis",
-    
-    tabPanel("Search TF-TF correlation in TRM/TEXterm",
-             fluidRow(
-               column(
-                 12,
-                 align = "center",
-                 tags$h1("Search TF-TF Correlation in TRM/TEXterm"),
-                 br(),
-                 
-                 tags$img(
-                   src = "networkanalysis/tfcorrdesc.png",
-                   style = "max-width: 40%; height: 40%;",
-                   alt = "something went wrong",
-                   deleteFile = FALSE
-                 ),
-                 
-                 br(),
-                 br(),
-                 
-                 tags$div(
-                   style = "text-align: left;",
-                   p("Inspired by DBPNet", tags$sup("1"), "which is a framework to identify cooperations between DNA-binding proteins using Chromatin 
-    immunoprecipitation followed by sequencing (ChIP-seq) and Hi-C data, we constructed TF interaction network based on 
-    Taiji's output, which is a TF-regulatee network. For each context, we first combined the cell state-important TFs and 
-    cell state-specific TFs. In total, 159 TFs for TEXterm and 170 TFs for TRM were selected. We then combined TEXterm/TRM 
-    samples' network by taking the mean value of edge weight for each TF-regulatee pair. Next, regulatees with low variation 
-    across TFs (standard deviation <= 1) were removed, then correlation matrix between TFs is calculated by taking account 
-    of the SpeArmstrongan's correlation of edge weight for each TF-regulatee pair. R package 'huge'", tags$sup("2"),  "is used to build a 
-    graphical model and construct the graph. We employed the Graphical lasso algorithm and the shrunken ECDF (empirical cumulative 
-    distribution function) estimator. We used a lasso penalty parameter lambda equal to 0.052 to control the regularization. 
-    We chose this value based on the local minimum point on the sparsity-lambda curve. When lambda = 0.05, around 15% of TF-TF pairs 
-    are considered as connected in the network.  To estimate the false discovery rate, we generated a null model by random shuffling 
-    the edge weight of TF-regulatee pair across TFs. When the same algorithm is applied to this dataset, the chosen cutoff identifies 
-    zero interaction, suggesting that the method with cutoff equal to 0.05 has a very low false discovery rate.")
-                 ),
-                 
-                 br(),
-                 br(),
-                 
-                 # Sidebar for input
-                 sidebarLayout(
-                   sidebarPanel(
-                     textInput("search", "Enter in a TF you are interested: ", value = ""),
-                     actionButton("search_btn", "Search"),
-                     br(),
-                     # Table for displaying the first column of genes
-                     tags$div(
-                       h4("Available TFs:"),
-                       tableOutput("gene_list_table"),
-                       style = "text-align: left;"
-                     )
-                   ),
-                   
-                   # Main panel to display results
-                   mainPanel(
-                     tableOutput("result_table"),
-                     
-                     # Legend section aligned to the left
-                     tags$div(
-                       h4("Key for TF-TF Network Image", style = "text-align: center;"),
-                       p("Circle: TF-specificity Green: TRM-specific Brown: TEXterm-specific"),
-                       p("Line thickness: TF-TF interaction intensity"),
-                       p("Line color: Green: TF-TF interaction found in TRM, Brown: TF-TF interaction found in TEXterm"),
-                       style = "text-align: left; margin-bottom: 20px;"  # Left-align the legend and add spacing below
-                     ),
-                     
-                     # Image section centered
-                     tags$div(
-                       uiOutput("image_gallery"),
-                       style = "text-align: center;"  # Center-align the image
-                     )
-                   )
-                 ),
-
-               ),
-             ),
-             
-             #NEW FOOTER
-             fluidRow(
-               tags$div(
-                 style = "position: relative; bottom: 0; width: 100%; background-color: #f8f9fa; padding: 10px; text-align: left;",
-                 HTML("<small>1. Zhang, K., Li, N., Ainsworth, R. I. & Wang, W. Systematic identification of protein combinations mediating chromatin looping. Nat. Commun. 7, 1–11 (2016).</small>"),
-                 br(),
-                 HTML("<small>2. Zhao, T., Liu, H., Roeder, K., Lafferty, J. & Wasserman, L. The huge Package for High-dimensional Undirected Graph Estimation in R. (2020)</small>"),
-                 br(),
-                 HTML("<small>doi:10.48550/arXiv.2006.14781.</small>")
-               )
-             )
-
-    ),
-             
-
-    
-    tabPanel("TRM/TEXterm TF communities",
-             fluidRow(
-               column(
-                 12,
-                 align = "center",
-                 tags$h1("TF Community in TRM/TEXterm"),
-                 br(),
-                 tags$img(src="networkanalysis/community.jpg",
-                          style = "max-width: 30%; height: 30%;"),
-                 br(),
-                 br(),
-                 p("Communities were detected using Leiden algorithm",tags$sup("3") ,"with modularity as objective function and 
-                   resolution as 0.9 since it reached the highest clustering modularity. In total, we identified 
-                   5 communities for each context. Network visualization was performed by graph with Fruchterman-Reingold 
-                   layout algorithm",tags$sup("4") ,"utilizing R package 'igraph' (https://r.igraph.org/)."),
-                 
-                 br(),
-                 br(),
-                 br(),
-                 
-                 tags$img(
-                   src = "networkanalysis/trmtexcom.png",
-                   style = "max-width: 90%; height: 80%;",
-                   alt = "something went wrong",
-                   deleteFile = FALSE
-                 ),
-                 
-                 br(),
-                 br(),
-                 
-                 p("TF-TF association clustering generates five TF communities between TRM and TEXterm cells. Left: The overall community topology is shaped by shared TFs (gray) in both TRM and TEXterm cells. Middle and Right: TRM and TEXterm cells show differential TF-TF interactions within each community and between communities. Top 10% of interactions are shown. The line thickness represents the interaction intensity."),
-                 
-                 br(),
-                 br(),
-                 br(),
-                 
-                 p("Members of each TF community in each cell state are below:"),
-               
-               fluidRow(
-                 column(6, DTOutput("trmcom")),  # First table in left half
-                 column(6, DTOutput("texcom"))   # Second table in right half
-               ),
-              
-               br(),
-               br(),
-               br(),
-               
-               p("TF neighbor communities in TEXterm and TRM cells, respectively are linked to different biological processes (below) 
-               The overall topology of these communities was influenced by multi-state TFs active in both cell states, while cell state-specific 
-               TFs created unique interaction patterns between the communities. Pathway analysis of the regulatees in each community suggested that 
-               TRM- or TEXterm-specific TFs within each community controlled different biological pathways. For example, in TRM cells, community 
-               3 was associated with cell-cell adhesion and response to TGFβ, and community 1 was associated with RNA metabolism, but in TEXterm cells, 
-               community 3 was linked to apoptosis, and community 1 was coupled to catabolism, proteolysis, ubiquitin-proteasome, and autophagy."),
-               
-               br(), 
-               
-               tags$img(
-                 src = "networkanalysis/tfcompathway.png",
-                 style = "max-width: 50%; height: 50%;",
-                 alt = "something went wrong",
-                 deleteFile = FALSE
-               ),
-               
-               br(),
-               br(),
-               br(),
-               br(),
-               br(),
-               br()
-               
-             )),
-             
-             # fluidRow(
-             #   tags$div(
-             #     HTML("<small style='text-align: left; padding: 10px;'>3.   Traag, V. A., Waltman, L. & van Eck, N. J. From Louvain to Leiden: guaranteeing well-connected communities. Sci. Rep. 9, 5233 (2019).</small>"),
-             #     br(),
-             #     HTML("<small style='text-align: left; padding: 10px;'>4. Schönfeld, M. & Pfeffer, J. Fruchterman/Reingold (1991): Graph Drawing by Force-Directed Placement. Schlüsselwerke der Netzwerkforschung 
-             #     217–220</small>"),
-             #     br(),
-             #     HTML("<small style='text-align: left; padding: 10px;'>https://doi.org/10.1007/978-3-658-21742-6_49 (2019).</small>") 
-             #   )
-             # )
-             
-             #NEW FOOTER
-             fluidRow(
-               tags$div(
-                 style = "position: relative; bottom: 0; width: 100%; background-color: #f8f9fa; padding: 10px; text-align: left;",
-                 HTML("<small>3. Traag, V. A., Waltman, L. & van Eck, N. J. From Louvain to Leiden: guaranteeing well-connected communities. Sci. Rep. 9, 5233 (2019).</small>"),
-                 br(),
-                 HTML("<small>4. Schönfeld, M. & Pfeffer, J. Fruchterman/Reingold (1991): Graph Drawing by Force-Directed Placement. Schlüsselwerke der Netzwerkforschung 217–220</small>"),
-                 br(),
-                 HTML("<small>https://doi.org/10.1007/978-3-658-21742-6_49 (2019).</small>")
-               )
-             )
-             
-             
-             )
-  ),
-  
-  
-  # Multi-omics data
-  tabPanel(
-    "Multi-omics Data",
-    
-    # Center the header using inline CSS
-    tags$h1("Multi-omics Data", style = "text-align: center;"),
-    br(),
-    
-    p("Scroll horizontally to view entire data table"),
-    br(),
-    br(),
-    
-    # Add space for the multi-omics data sheet
-    dataTableOutput("multiomicsdatatable"),
-    
-    br(),
-    br(),
-    
-    p("Composition of multi-omic atlas. A total of 121 experiments across multiple data sets were utilized to generate an epigenetic and transcriptional atlas of murine CD8+ T cells under chronic and acute antigen exposure. Unless stated, all CD8+ T cells were isolated from spleens.")
-  ),
-  
-  # Adding header with modal and JS
-  header = tags$div(
-    chatSidebarUI(),
-    # Modal dialog to display the expanded image
-    tags$div(
-      id = "modalDialog",
-      class = "modal",
-      tags$div(
-        class = "modal-content",
-        tags$span(class = "close", HTML("&times;")),
-        tags$div(
-          style = "text-align: center;",
-          tags$img(src = "csdescrip.jpeg", style = "max-width: 80%; height: auto;"),
-          tags$p("Caption for the csdescrip image.")
-        )
-      )
-    ),
-    
-    # Custom JavaScript for modal behavior
-    tags$script(
-      HTML(
-        '
-      $(document).ready(function(){
-        $("#csdescrip_link").click(function(){
-          $("#modalDialog").css("display", "block");
-        });
-        $(".close").click(function(){
-          $("#modalDialog").css("display", "none");
-        });
-        $(window).click(function(event){
-          if($(event.target).hasClass("modal")){
-            $("#modalDialog").css("display", "none");
-          }
-        });
-      });
-    '
-      )
-    ),
-    
-    tags$script(
-      HTML(
-        "
-    $(document).on('click', '#c1_link', function(e) {
-      e.preventDefault();
-      Shiny.setInputValue('c1_link_clicked', Math.random());
-    });
-  "
-      )
-    )
-  )
-)
-
-
+library(shiny)
+library(shinythemes)
+library(DT)
+library(reticulate)
+
+# --- Python Environment Configuration (USER ACTION REQUIRED) ---
+# Uncomment and configure ONE of the following lines to point to your Python environment
+# where 'openai' and 'pandas' are installed (from requirements.txt).
+# Ensure the path to python executable is correct or the virtual/conda env name is correct.
+
+# Option 1: Specify path to Python executable (e.g., in a virtual environment)
+# reticulate::use_python("C:/Users/28702/AppData/Local/Programs/Python/Python311/python.exe", required = TRUE) # FIXME
+
+# Option 2: Specify name of a virtual environment (if R can find it by name)
+# reticulate::use_virtualenv("your_python_venv_name", required = TRUE)
+
+# Option 3: Specify name of a Conda environment
+# reticulate::use_condaenv("your_python_conda_env_name", required = TRUE)
+
+# Ensure Python environment is configured before proceeding
+if (!py_available(initialize = TRUE)) {
+  stop("Python environment with required packages (openai, pandas) not found or configured correctly for reticulate. Please check the comments above.")
+} else {
+  print(paste("Reticulate using Python at:", py_config()$python))
+  # Try importing a core Python module to confirm setup
+  py_run_string("import json; print(\'Python integration test: json module imported successfully.\')")
+}
+
+# --- Import Python Agent Module ---
+# This assumes server.R is in the project root, and 'agents' is a subdirectory.
+# If your R working directory is not the project root, adjust sys.path or import call.
+# Ensure agents/__init__.py exists.
+manager_agent_module <- NULL
+tryCatch({
+  # Add project root to Python's sys.path if not already discoverable by reticulate
+  # This makes `import agents.manager_agent` work if R CWD is project root.
+  reticulate::py_run_string("import sys; import os; os.chdir(os.path.abspath('.')); sys.path.insert(0, os.getcwd())")
+  manager_agent_module <- reticulate::import("agents.manager_agent")
+  print("Successfully imported Python 'agents.manager_agent' module.")
+}, error = function(e) {
+  stop(paste("Failed to import Python 'agents.manager_agent' module. Error:", e$message, 
+             "Ensure your R working directory is the project root (containing server.R and the 'agents' folder), ",
+             "and that agents/__init__.py exists. Also check Python environment."))
+})
+
+# Source the new chat UI definitions
+source("chat_ui.R", local = TRUE) # local = TRUE is good practice if chat_ui.R defines reactive expressions, though here it's just UI functions
+
+# setwd("/Users/audrey/Downloads/research/ckweb/Tcellstates")
+
+js_code <- "
+  Shiny.addCustomMessageHandler('redirect', function(url) {
+    window.open(url, '_blank');
+  });
+"
+
+# ---- REMOVE TEMPORARY DEBUG ----
+# generated_sidebar_html <- chatSidebarUI()
+# print("--- HTML generated by chatSidebarUI(): ---")
+# print(generated_sidebar_html)
+# ---- END REMOVE TEMPORARY DEBUG ----
+
+# Define UI
+ui <- navbarPage(
+  # title = "T Cell States",
+  title = "",
+  id = "mainNav",
+  theme = shinytheme("flatly"),
+  
+  tags$style(HTML("
+    body, h1, h2, h3, h4, h5, h6, p, a, li, span, div {
+      font-family: 'Arial', sans-serif;
+    }
+    p {
+      font-size: 16px; /* Adjust the size as needed */
+    }
+
+    /* === CSS TO MATCH THEME'S VERTICAL ALIGNMENT === */
+    /*
+    .nav.navbar-nav > li > a {
+      padding-top: YOUR_PADDING_TOP !important;
+      padding-bottom: YOUR_PADDING_BOTTOM !important;
+      line-height: YOUR_LINE_HEIGHT !important;
+    }
+    */
+    /* === END OF CSS === */
+  ")),
+  
+  tags$head(
+    tags$link(rel = "stylesheet", type = "text/css", href = "chat_styles.css"),
+    tags$script(src = "chat_script.js")
+  ),
+  
+  tabPanel(
+    "Home",
+    # Big header in a box
+    tags$div(
+      style = "background-color: #f8f9fa; padding: 20px;",
+      tags$h1(
+        "TF atlas of CD8+ T cell states",
+        style = "font-size: 36px;",
+        align = "center"
+      )
+    ),
+    
+    br(),
+    
+    tags$div(
+      p(
+        "This website serves as a companion resource to our study, 'Multi-Omics Atlas-Assisted Discovery of Transcription Factors for Selective T Cell State Programming.' It is designed to make the bioinformatics analyses and data from the study accessible to researchers from diverse backgrounds, including those without extensive bioinformatics expertise. The platform provides comprehensive tools to explore transcription factor (TF) activities across distinct T cell states, enabling users to examine TF scores for specific cell states, multi-state TFs and their regulatory roles, visualize TF relationships using wave and network analyses and access a searchable database of TF scores and multi-omics data. Explore our TF catalog, network analyses, and more to uncover insights into our study."
+      ),
+
+      align = "center"
+    ),
+    
+    br(),
+    br(),
+    
+    #NEW WITH UPDATED HOME PAGE LAYOUT
+    tags$div(
+      # Container using flexbox to arrange image and text horizontally
+      tags$div(
+        style = "display: flex; justify-content: space-between; align-items: center; width: 100%;",
+        
+        # First image with action links (take more space)
+        tags$div(
+          style = "flex: 4;",  # Give this div more space (4 parts for the image)
+          tags$img(
+            src = "homedesc.png",
+            style = "max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;",
+            usemap = "#image-map",
+            alt = "something went wrong",
+            deleteFile = FALSE
+          ),
+          # ActionLink 1
+          actionLink(
+            "to_tfcat",
+            "",
+            style = "position: absolute; top: 92%; left: 54%;
+                  width: 100px; height: 70px; background-color: transparent; border: none;"
+          ),
+          # ActionLink 2
+          actionLink(
+            "to_tfwave",
+            "",
+            style = "position: absolute; top: 92%; left: 66%;
+                  width: 100px; height: 70px; background-color: transparent; border: none;"
+          ),
+          # ActionLink 3
+          actionLink(
+            "to_tfnet",
+            "",
+            style = "position: absolute; top: 92%; left: 80%;
+                  width: 100px; height: 70px; background-color: transparent; border: none;"
+          )
+        ),
+        
+        # Text (p tag) will take less space than the images
+        tags$div(
+          style = "flex: 2; font-size: 12px; padding: 10px;",  # Reduced space and smaller font
+          p(
+            "Naive T cells adopt diverse states in various contexts, such as acute or chronic infections and tumors. Upon activation, they
+                      become early effector (EE) cells that differentiate into distinct CD8+ T cell subsets with varied trafficking patterns—residing
+                      in lymphoid organs, blood, or peripheral tissues."
+          ),
+          p(
+            "In acute infection, TE (Terminal Effector) cells are found in the spleen or blood, while MP (Memory Precursor) cells mainly
+                      reside in lymphoid structures. TCM (Central Memory) and TEM (Effector Memory) cells circulate in the blood, with TCM predominant
+                      in lymphoid organs and TEM in tissues. TPM cells circulate throughout lymph, blood, and tissues, while TRM (Tissue-Resident Memory)
+                      cells stay long-term in tissues."
+          ),
+          p(
+            "Similarly, chronic infections or tumors induce T cell states through chronic antigen exposure, leading to a spectrum of exhaustion,
+                      from TEXprog (Progenitor) to TEXterm (Terminal). These cells lose function over time, with TEXterm becoming dysfunctional."
+          ),
+          p(
+            "In this study, we developed a pipeline to analyze transcription factor regulation across CD8+ T cell states, enabling therapeutic
+                        manipulation. Using 121 experiments, we created an epigenetic and transcription atlas of 9 cell states, allowing an unbiased analysis of
+                        unique and shared transcription factor activities across memory and exhaustion contexts."
+          )
+        )
+      )
+    ),
+    
+    # Button saying "Read Now"
+    tags$head(tags$script(HTML(js_code))),
+    tags$h3("Reference", style = "text-align: center;"),
+    tags$div(
+      style = "text-align: center;",
+      actionButton("read_now", "Multi-Omics Atlas-Assisted Discovery of Transcription Factors for Selective T Cell State Programming. bioRxiv (2024)", style = "font-size: 13px; margin-top: 20px;")
+    ),
+    
+    br(),
+    
+    tags$p(
+      "Transcription factors (TFs) regulate the differentiation of T cells into diverse states with distinct functionalities. To precisely program
+        desired T cell states in viral infections and cancers, we generated a comprehensive transcriptional and epigenetic atlas of nine CD8+ T cell
+        differentiation states for TF activity prediction. Our analysis catalogued TF activity fingerprints of each state, uncovering new regulatory
+        mechanisms that govern selective cell state differentiation. Leveraging this platform, we focused on two critical T cell states in tumor and
+        virus control: terminally exhausted T cells (TEXterm), which are dysfunctional, and tissue-resident memory T cells (TRM), which are protective.
+        Despite their functional differences, these states share significant transcriptional and anatomical similarities, making it both challenging and
+        essential to engineer T cells that avoid TEXterm differentiation while preserving beneficial TRM characteristics. Through in vivo CRISPR screening
+        combined with single-cell RNA sequencing (Perturb-seq), we validated the specific TFs driving the TEXterm state and confirmed the accuracy of TF
+        specificity predictions. Importantly, we discovered novel TEXterm-specific TFs such as ZSCAN20, JDP2, and ZFP324. The deletion of these TEXterm-specific
+        TFs in T cells enhanced tumor control and synergized with immune checkpoint blockade. Additionally, this study identified multi-state TFs like HIC1
+        and GFI1, which are vital for both TEXterm and TRM states. Furthermore, our global TF community analysis and Perturb-seq experiments revealed how TFs
+        differentially regulate key processes in TRM and TEXterm cells, uncovering new biological pathways like protein catabolism that are specifically linked
+        to TEXterm differentiation. In summary, our platform systematically identifies TF programs across diverse T cell states, facilitating the engineering of
+        specific T cell states to improve tumor control and providing insights into the cellular mechanisms underlying their functional disparities."
+    ),
+    
+
+    # Placeholder for content below the button
+    uiOutput("home_content"),
+    
+    #logos and website links
+    fluidRow(
+      tags$div(
+        style = "width: 100%; background-color: #f8f9fa; padding: 10px; display: flex; justify-content: space-between; align-items: center;",  # Use flexbox for full-width layout
+        # Left half: Links
+        tags$div(
+          style = "width: 48%; text-align: left;",  # Adjusted to allow space for both sections
+          HTML("<a href='http://wanglab.ucsd.edu/' class='link-style'>http://wanglab.ucsd.edu/</a>"),
+          br(),
+          HTML("<a href='https://unclineberger.org/chunglab/' class='link-style'>https://unclineberger.org/chunglab/</a>"),
+          br(),
+          HTML("<a href='https://kaech.salk.edu/' class='link-style'>https://kaech.salk.edu/</a>")
+        ),
+        # Right half: Logos
+        tags$div(
+          style = "width: 48%; text-align: center;",  # Adjusted to allow space for both sections
+          tags$img(src = "ucsdlogo.png", style = "max-width: 40%; height: auto; margin-left: 10px;"),
+          tags$img(src = "salklogo.png", style = "max-width: 40%; height: auto; margin-left: 10px;"),
+          tags$img(src = "unclogo.jpg", style = "max-width: 40%; height: auto; margin-left: 10px;")
+        )
+      )
+    )
+    
+    
+  ),
+  
+  navbarMenu(
+    "TF Catalog",
+    tabPanel(
+      "Search TF Scores",
+      value = "tfcatpage",
+      selected = "searchtfscorespage",
+      
+      tags$h1("Search TF Scores",
+              align="center"),
+      
+      #NEW DESCRIPTION
+      tags$p("TF score: normalized PageRank scores across samples. Higher scores mean higher activity. TF score takes account of TF expression level, ATAC-seq peak intensity, and motif binding affinity. A TF needs to have both open chromatin regions and gene expression of its downstream genes to have high PageRank scores. For the detailed information of how TF scores are calculated, visit the link: ", 
+             tags$a(href = "https://taiji-pipeline.github.io/algorithm_PageRank.html", "https://taiji-pipeline.github.io/algorithm_PageRank.html"), 
+             align = "left"),
+      tags$p("Cell-state specificity: significantly higher TF score in specific cell state. For example, 'TEXterm' means TF has significantly higher TF score in TEXterm. 'ALL' means no cell-state specificity.", align="left"),
+      tags$p("Sample name nomenclature: cell state abbreviation + first author of RNA dataset + first author of ATAC dataset. If the same author has multiple datasets, then publication year and month is used. For example: 'Milner17' means Milner paper published in 2017; 'MilnerApr' means Milner paper published in April.", align="left"),
+      br(),
+      
+      
+      fluidRow(
+        
+        column(
+          4,
+          tags$img(src = "tfcat/onlycellstates.png",
+                   style = "max-width: 100%; height: auto;",
+                   alt = "Image on left"),
+          br(),
+          br(),
+        ),
+        
+        column(8,
+               fluidRow(
+                 column(
+                   width = 12,
+                   align = "center",
+                   # Search bar
+                   # p("Search TF activity score in each cell state below."),
+                   br(),
+                   textInput("search_input", label = "Search", placeholder = "Enter interested regulator name..."),
+                   
+                   #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
+                   actionButton("prev_btn", "Previous 4 columns"),
+                   actionButton("next_btn", "Next 4 columns"),
+                   br(),
+                   br()
+                 )
+               ),
+               
+               #read in excel file and make it searchable
+               fluidRow(
+                 column(width = 12, align = "center", # Center the content
+                        # Output table
+                        DTOutput("table")),
+                       # Render pagination controls
+                       uiOutput("pagination")
+               )),
+        br(),
+        br()
+      )
+    ),
+    
+    
+    # navbarMenu("Cell State Specific TF Catalog",
+    tabPanel(
+      "Cell State Specific TF Catalog",
+      navlistPanel(
+        "Cell State Specific TF Catalog",
+        tabPanel(
+          "Naive",
+          fluidRow(column(
+            12,
+            align = "center",
+            # Center the content
+            tags$h1("Naive Specific Cells & normalized TF Activity Scores"),
+            p(
+              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
+            ),
+            p(
+              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
+            ),
+            br(),
+            # Render the image
+            tags$img(src = "bubbleplots/naivebubble.jpg", width = "100%")
+          )),
+          
+          br(),
+          br(),
+          
+          #search bar
+          fluidRow(column(
+            width = 12,
+            align = "center",
+            # Center the content
+            # Search bar
+            textInput("search_input_naive", label = "Search", placeholder = "Enter interested regulator name..."),
+            
+            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
+            actionButton("naive_prev_btn", "Previous 4 columns"),
+            actionButton("naive_next_btn", "Next 4 columns"),
+            br(),
+            br()
+          )),
+          
+          fluidRow(column(
+            width = 12, align = "center", # Center the content
+            DTOutput("table_naive")
+          ))
+        ),
+        
+        tabPanel(
+          "TE (Terminal Effector)",
+          fluidRow(column(
+            12,
+            align = "center",
+            # Center the content
+            tags$h1("TE Specific Cells & normalized TF Activity Scores"),
+            p(
+              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
+            ),
+            p(
+              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
+            ),
+            br(),
+            # Render the image
+            tags$img(src = "bubbleplots/tebubble.jpg", width = "100%")
+          )),
+          
+          br(),
+          br(),
+          
+          #search bar
+          fluidRow(column(
+            width = 12,
+            align = "center",
+            # Center the content
+            # Search bar
+            textInput("search_input_te", label = "Search", placeholder = "Enter interested regulator name..."),
+            
+            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
+            actionButton("te_prev_btn", "Previous 4 columns"),
+            actionButton("te_next_btn", "Next 4 columns"),
+            br(),
+            br()
+          )),
+          
+          fluidRow(column(
+            width = 12, align = "center", # Center the content
+            DTOutput("table_te")
+          ))
+        ),
+        
+        tabPanel(
+          "MP (Memory Pressuror)",
+          fluidRow(column(
+            12,
+            align = "center",
+            # Center the content
+            tags$h1("MP Specific Cells & normalized TF Activity Scores"),
+            p(
+              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
+            ),
+            p(
+              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
+            ),
+            br(),
+            # Render the image
+            tags$img(src = "bubbleplots/mpbubble.jpg", width = "100%")
+          )),
+          
+          br(),
+          br(),
+          
+          #search bar
+          fluidRow(column(
+            width = 12,
+            align = "center",
+            # Center the content
+            # Search bar
+            textInput("search_input_mp", label = "Search", placeholder = "Enter interested regulator name..."),
+            
+            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
+            actionButton("mp_prev_btn", "Previous 4 columns"),
+            actionButton("mp_next_btn", "Next 4 columns"),
+            br(),
+            br()
+          )),
+          
+          fluidRow(column(
+            width = 12, align = "center", # Center the content
+            DTOutput("table_mp")
+          ))
+        ),
+        
+        tabPanel(
+          "Tcm (Central Memory)",
+          fluidRow(column(
+            12,
+            align = "center",
+            # Center the content
+            tags$h1("Tcm Specific Cells & normalized TF Activity Scores"),
+            p(
+              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
+            ),
+            p(
+              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
+            ),
+            br(),
+            # Render the image
+            tags$img(src = "bubbleplots/tcmbubble.jpg", width = "100%")
+          )),
+          
+          br(),
+          br(),
+          
+          #search bar
+          fluidRow(column(
+            width = 12,
+            align = "center",
+            # Center the content
+            # Search bar
+            textInput("search_input_tcm", label = "Search", placeholder = "Enter interested regulator name..."),
+            
+            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
+            actionButton("tcm_prev_btn", "Previous 4 columns"),
+            actionButton("tcm_next_btn", "Next 4 columns"),
+            br(),
+            br()
+          )),
+          
+          fluidRow(column(
+            width = 12, align = "center", # Center the content
+            DTOutput("table_tcm")
+          ))
+        ),
+        
+        tabPanel(
+          "Tem (Effector Memory)",
+          fluidRow(column(
+            12,
+            align = "center",
+            # Center the content
+            tags$h1("Tem Specific Cells & normalized TF Activity Scores"),
+            p(
+              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
+            ),
+            p(
+              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
+            ),
+            br(),
+            # Render the image
+            tags$img(src = "bubbleplots/tembubble.jpg", width = "100%")
+          )),
+          
+          br(),
+          br(),
+          
+          #search bar
+          fluidRow(column(
+            width = 12,
+            align = "center",
+            # Center the content
+            # Search bar
+            textInput("search_input_tem", label = "Search", placeholder = "Enter interested regulator name..."),
+            
+            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
+            actionButton("tem_prev_btn", "Previous 4 columns"),
+            actionButton("tem_next_btn", "Next 4 columns"),
+            br(),
+            br()
+          )),
+          
+          fluidRow(column(
+            width = 12, align = "center", # Center the content
+            DTOutput("table_tem")
+          ))
+        ),
+        
+        tabPanel(
+          "Trm (Tissue-Resident Memory)",
+          fluidRow(column(
+            12,
+            align = "center",
+            # Center the content
+            tags$h1("Trm Specific Cells & normalized TF Activity Scores"),
+            p(
+              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores."
+            ),
+            p(
+              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
+            ),
+            br(),
+            # Render the image
+            tags$img(src = "bubbleplots/trmbubble.jpg", width = "100%")
+          )),
+          
+          br(),
+          br(),
+          
+          #search bar
+          fluidRow(column(
+            width = 12,
+            align = "center",
+            # Center the content
+            # Search bar
+            textInput("search_input_trm", label = "Search", placeholder = "Enter interested regulator name..."),
+            
+            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
+            actionButton("trm_prev_btn", "Previous 4 columns"),
+            actionButton("trm_next_btn", "Next 4 columns"),
+            br(),
+            br()
+          )),
+          
+          fluidRow(column(
+            width = 12, align = "center", # Center the content
+            DTOutput("table_trm")
+          ))
+        ),
+        
+        tabPanel(
+          "TEXprog",
+          fluidRow(column(
+            12,
+            align = "center",
+            # Center the content
+            tags$h1("TEXprog Specific Cells & normalized TF Activity Scores"),
+            p(
+              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
+            ),
+            br(),
+            # Render the image
+            tags$img(src = "bubbleplots/texprogbubble.jpg", width = "100%")
+          )),
+          
+          br(),
+          br(),
+          
+          #search bar
+          fluidRow(column(
+            width = 12,
+            align = "center",
+            # Center the content
+            # Search bar
+            textInput("search_input_texprog", label = "Search", placeholder = "Enter interested regulator name..."),
+            
+            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
+            actionButton("texprog_prev_btn", "Previous 4 columns"),
+            actionButton("texprog_next_btn", "Next 4 columns"),
+            br(),
+            br()
+          )),
+          
+          fluidRow(column(
+            width = 12,
+            align = "center",
+            # Center the content
+            DTOutput("table_texprog")
+          ))
+        ),
+        
+        tabPanel(
+          "TEXeff-like",
+          fluidRow(column(
+            12,
+            align = "center",
+            # Center the content
+            tags$h1("TEXeff-like Specific Cells & normalized TF Activity Scores"),
+            p(
+              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
+            ),
+            p(
+              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
+            ),
+            br(),
+            # Render the image
+            tags$img(src = "bubbleplots/texintbubble.jpg", width = "100%")
+          )),
+          
+          br(),
+          br(),
+          
+          #search bar
+          fluidRow(column(
+            width = 12,
+            align = "center",
+            # Center the content
+            # Search bar
+            textInput("search_input_texefflike", label = "Search", placeholder = "Enter interested regulator name..."),
+            
+            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
+            actionButton("texefflike_prev_btn", "Previous 4 columns"),
+            actionButton("texefflike_next_btn", "Next 4 columns"),
+            br(),
+            br()
+          )),
+          
+          fluidRow(column(
+            width = 12,
+            align = "center",
+            # Center the content
+            DTOutput("table_texefflike")
+          ))
+        ),
+        
+        tabPanel(
+          "TEXterm",
+          fluidRow(column(
+            12,
+            align = "center",
+            # Center the content
+            tags$h1("TEXterm Specific Cells & normalized TF Activity Scores"),
+            p(
+              "Below you will find the bubble plot and a searchable excel file containing all the normalized TF activity scores"
+            ),
+            p(
+              "Circle size represents the logarithm of gene expression, and the color represents the normalized PageRank score."
+            ),
+            br(),
+            # Render the image
+            tags$img(src = "bubbleplots/textermbubble.jpg", width = "100%")
+          )),
+          
+          br(),
+          br(),
+          
+          #search bar
+          fluidRow(column(
+            width = 12,
+            align = "center",
+            textInput("search_input_texterm", label = "Search", placeholder = "Enter interested regulator name..."),
+            
+            #NEW ADDITION FOR THE NEW TRANSPOSED DATAFRAME
+            actionButton("texterm_prev_btn", "Previous 4 columns"),
+            actionButton("texterm_next_btn", "Next 4 columns"),
+            br(),
+            br()
+          )),
+          
+          fluidRow(column(
+            width = 12,
+            align = "center",
+            DTOutput("table_texterm")
+          ))
+        )
+      )
+    ),
+    
+    tabPanel("Multi-State TFs",
+             tags$h1("Multi-State TFs",
+                     align="center"),
+             
+             fluidRow(
+               tags$div(
+                 style = "text-align: center;",  # Center align the text
+                 # h4("Multi-state TFs"),
+                 
+                 tags$img(src="tfcat/multistatesheatmap.png",
+                          style = "max-width: 80%; height: auto;",
+                          alt = "multi state TF heatmaps")
+               )
+               
+             ))
+    
+  ),
+  
+  navbarMenu(
+    "TF Wave Analysis",
+    tabPanel(
+      "Overview",
+      value = "overview",
+      
+      fluidRow(
+        column(
+          12,
+          align = "center",
+          tags$h1("TF Wave Analysis"),
+          p(
+            "To evaluate the predicted TFs governing specific T cell differentiation pathways, we identified dynamic activity patterns of TF groups, termed 'Transcription factor waves'. Transcription factor waves are generated via integration of the unbiased clustering and prior immunology
+                    knowledge. This curates catalogs of TFs associated with different cell states or differentiation trajectories. Circles
+                    represent specific cell state. Color indicates normalized PageRank scores with red displaying high values. Click to
+                    check TFs and GSEA results associated with each wave."
+          ), 
+          br(),
+          tags$img(
+            src = "tfwaveanal.png",
+            style = "max-width: 80%; height: auto;",
+            alt = "something went wrong",
+            deleteFile = FALSE
+          ),
+          br(),
+          br(),
+          
+          tags$div(style = "background-color: #f8f9fa; padding: 20px;",
+                   p("TF Waves", style = "font-size: 26px;")),
+          br(),
+          p(
+            "Seven TF waves associated with distinctive biological pathways were identified. For example, the TRM TF wave (Wave 6) includes several members of the AP-1 family (e.g. Atf3, Fosb, Fosl2, and Jun), which aligns well with a recent report of their roles in TRM formation (",
+            tags$a(href = "https://www.biorxiv.org/content/10.1101/2023.09.29.560006v1", "link", target = "_blank"),
+            "). This wave was uniquely linked to the transforming growth factor beta (TGFβ) response pathway. Conversely, the TEX TF (including TEXprog, TEXeff, and TEXterm) wave, Wave 2, was characterized by a distinct set of TFs, such as Irf8, Jdp2, Nfatc1, and Vax2, among others, that correlated with pathways related to PD1 and senescence."
+          ),
+          br(),
+          p("Click on the wave images below to be redirected to their corresponding pages and learn more about them!"),
+          br(),
+          br()
+        )
+      ),
+      
+      
+      #NEW WAVE LAYOUT (W/OUT HEATMAP ON THE RIGHT)
+      fluidRow(
+        # First row with 3 images
+        column(
+          12,  # This ensures the entire row is used
+          align = "center",
+          fluidRow(
+            column(
+              4, align = "center",
+              h5("Wave 1"),
+              actionLink(
+                "c1_link",
+                tags$img(
+                  src = "waveanalysis/c1.jpg",
+                  style = "max-width: 100%; height: auto;",
+                  deleteFile = FALSE
+                )
+              )
+            ),
+            column(
+              4, align = "center",
+              h5("Wave 2"),
+              actionLink(
+                "c2_link",
+                tags$img(
+                  src = "waveanalysis/c2.jpg",
+                  style = "max-width: 100%; height: auto;",
+                  deleteFile = FALSE
+                )
+              )
+            ),
+            column(
+              4, align = "center",
+              h5("Wave 3"),
+              actionLink(
+                "c3_link",
+                tags$img(
+                  src = "waveanalysis/c3.jpg",
+                  style = "max-width: 100%; height: auto;",
+                  deleteFile = FALSE
+                )
+              )
+            )
+          )
+        ),
+        # Second row with 3 images
+        column(
+          12,  # This ensures the entire row is used
+          align = "center",
+          fluidRow(
+            column(
+              4, align = "center",
+              h5("Wave 4"),
+              actionLink(
+                "c4_link",
+                tags$img(
+                  src = "waveanalysis/c4.jpg",
+                  style = "max-width: 100%; height: auto;",
+                  deleteFile = FALSE
+                )
+              )
+            ),
+            column(
+              4, align = "center",
+              h5("Wave 5"),
+              actionLink(
+                "c5_link",
+                tags$img(
+                  src = "waveanalysis/c5.jpg",
+                  style = "max-width: 100%; height: auto;",
+                  deleteFile = FALSE
+                )
+              )
+            ),
+            column(
+              4, align = "center",
+              h5("Wave 6"),
+              actionLink(
+                "c6_link",
+                tags$img(
+                  src = "waveanalysis/c6.jpg",
+                  style = "max-width: 100%; height: auto;",
+                  deleteFile = FALSE
+                )
+              )
+            )
+          )
+        )
+      ),
+      
+      #add search tf to find which wave they are in
+      # Wave Search Bar
+      fluidRow(
+        column(
+          width = 12,
+          align = "center",
+          textInput("search_input_wave", label = "Wave Search", placeholder = "Enter interested TF name...")
+        )
+      ),
+      
+      # Table output
+      fluidRow(
+        column(
+          width = 12,
+          align = "center",
+          DTOutput("table_wave")
+        )
+      )
+      
+    ),
+    
+    tabPanel("Wave 1", value = "c1",
+             fluidRow(
+               column(
+                 12,
+                 align = "center",
+                 tags$h1("Wave 1 Analysis"),
+                 p("Details about the Wave 1 analysis go here."),
+                 br(),
+                 fluidRow(
+                   column(
+                     6,
+                     align = "center",
+                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                              p("Wave 1", style = "font-size: 20px;")),
+                     tags$img(
+                       src = "waveanalysis/c1.jpg",
+                       style = "max-width: 100%; height: auto;",
+                       deleteFile = FALSE
+                     )
+                   ),
+                   column(
+                     6,
+                     align = "center",
+                     fluidRow(column(
+                       12,
+                       align = "center",
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("GO KEGG Result", style = "font-size: 20px;")),
+                       tags$img(
+                         src = "waveanalysis/c1_selected_GO_KEGG.jpg",
+                         style = "max-width: 100%; height: auto;",
+                         deleteFile = FALSE
+                       )
+                     )),
+                     br(),
+                     
+                     fluidRow(
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("Ranked Text", style = "font-size: 20px;")),
+                       column(
+                         12,
+                         align = "center",
+                         tags$img(
+                           src = "waveanalysis/txtJPG/c1_ranked_1.jpg",
+                           style = "max-width: 100%; height: auto;",
+                           deleteFile = FALSE
+                         )
+                       ),
+                       column(
+                         12,
+                         align = "center",
+                         tags$img(
+                           src = "waveanalysis/txtJPG/c1_ranked_2.jpg",
+                           style = "max-width: 100%; height: auto;",
+                           deleteFile = FALSE
+                         )
+                       )
+                     )
+                   )
+                 )
+               )
+             )),
+    
+    tabPanel("Wave 2", value = "c2",
+             fluidRow(
+               column(
+                 12,
+                 align = "center",
+                 tags$h1("Wave 2 Analysis"),
+                 p("Details about the Wave 2 analysis go here."),
+                 br(),
+                 fluidRow(
+                   column(
+                     6,
+                     align = "center",
+                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                              p("Wave 2", style = "font-size: 20px;")),
+                     tags$img(
+                       src = "waveanalysis/c2.jpg",
+                       style = "max-width: 100%; height: auto;",
+                       deleteFile = FALSE
+                     )
+                   ),
+                   column(
+                     6,
+                     align = "center",
+                     fluidRow(column(
+                       12,
+                       align = "center",
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("GO KEGG Result", style = "font-size: 20px;")),
+                       tags$img(
+                         src = "waveanalysis/c2_selected_GO_KEGG_v2.jpg",
+                         style = "max-width: 100%; height: auto;",
+                         deleteFile = FALSE
+                       )
+                     )),
+                     br(),
+                     
+                     fluidRow(
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("Ranked Text", style = "font-size: 20px;")),
+                       column(
+                         12,
+                         align = "center",
+                         tags$img(
+                           src = "waveanalysis/txtJPG/c2_ranked.jpg",
+                           style = "max-width: 100%; height: auto;",
+                           deleteFile = FALSE
+                         )
+                       )
+                     )
+                   )
+                 )
+               )
+             )),
+    
+    tabPanel("Wave 3", value = "c3",
+             fluidRow(
+               column(
+                 12,
+                 align = "center",
+                 tags$h1("Wave 3 Analysis"),
+                 p("Details about the Wave 3 analysis go here."),
+                 br(),
+                 fluidRow(
+                   column(
+                     6,
+                     align = "center",
+                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                              p("Wave 3", style = "font-size: 20px;")),
+                     tags$img(
+                       src = "waveanalysis/c3.jpg",
+                       style = "max-width: 100%; height: auto;",
+                       deleteFile = FALSE
+                     )
+                   ),
+                   column(
+                     6,
+                     align = "center",
+                     fluidRow(column(
+                       12,
+                       align = "center",
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("GO KEGG Result", style = "font-size: 20px;")),
+                       tags$img(
+                         src = "waveanalysis/c3_selected_GO_KEGG.jpg",
+                         style = "max-width: 100%; height: auto;",
+                         deleteFile = FALSE
+                       )
+                     )),
+                     br(),
+                     
+                     fluidRow(
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("Ranked Text", style = "font-size: 20px;")),
+                       column(
+                         12,
+                         align = "center",
+                         tags$img(
+                           src = "waveanalysis/txtJPG/c3_ranked.jpg",
+                           style = "max-width: 100%; height: auto;",
+                           deleteFile = FALSE
+                         )
+                       )
+                     )
+                   )
+                 )
+               )
+             )),
+    
+    tabPanel("Wave 4", value = "c4",
+             fluidRow(
+               column(
+                 12,
+                 align = "center",
+                 tags$h1("Wave 4 Analysis"),
+                 p("Details about the Wave 4 analysis go here."),
+                 br(),
+                 fluidRow(
+                   column(
+                     6,
+                     align = "center",
+                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                              p("Wave 4", style = "font-size: 20px;")),
+                     tags$img(
+                       src = "waveanalysis/c4.jpg",
+                       style = "max-width: 100%; height: auto;",
+                       deleteFile = FALSE
+                     )
+                   ),
+                   column(
+                     6,
+                     align = "center",
+                     fluidRow(column(
+                       12,
+                       align = "center",
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("GO KEGG Result", style = "font-size: 20px;")),
+                       tags$img(
+                         src = "waveanalysis/c4_selected_GO_KEGG.jpg",
+                         style = "max-width: 100%; height: auto;",
+                         deleteFile = FALSE
+                       )
+                     )),
+                     br(),
+                     
+                     fluidRow(
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("Ranked Text", style = "font-size: 20px;")),
+                       column(
+                         12,
+                         align = "center",
+                         tags$img(
+                           src = "waveanalysis/txtJPG/c4_ranked.jpg",
+                           style = "max-width: 100%; height: auto;",
+                           deleteFile = FALSE
+                         )
+                       )
+                     )
+                   )
+                 )
+               )
+             )),
+    
+    tabPanel("Wave 5", value = "c5",
+             fluidRow(
+               column(
+                 12,
+                 align = "center",
+                 tags$h1("Wave 5 Analysis"),
+                 p("Details about the Wave 5 analysis go here."),
+                 br(),
+                 fluidRow(
+                   column(
+                     6,
+                     align = "center",
+                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                              p("Wave 5", style = "font-size: 20px;")),
+                     tags$img(
+                       src = "waveanalysis/c5.jpg",
+                       style = "max-width: 100%; height: auto;",
+                       deleteFile = FALSE
+                     )
+                   ),
+                   column(
+                     6,
+                     align = "center",
+                     fluidRow(column(
+                       12,
+                       align = "center",
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("GO KEGG Result", style = "font-size: 20px;")),
+                       tags$img(
+                         src = "waveanalysis/c5_selected_GO_KEGG.jpg",
+                         style = "max-width: 100%; height: auto;",
+                         deleteFile = FALSE
+                       )
+                     )),
+                     br(),
+                     
+                     fluidRow(
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("Ranked Text", style = "font-size: 20px;")),
+                       column(
+                         12,
+                         align = "center",
+                         tags$img(
+                           src = "waveanalysis/txtJPG/c5_ranked.jpg",
+                           style = "max-width: 100%; height: auto;",
+                           deleteFile = FALSE
+                         )
+                       )
+                     )
+                   )
+                 )
+               )
+             )),
+    
+    tabPanel("Wave 6", value = "c6",
+             fluidRow(
+               column(
+                 12,
+                 align = "center",
+                 tags$h1("Wave 6 Analysis"),
+                 p("Details about the Wave 6 analysis go here."),
+                 br(),
+                 fluidRow(
+                   column(
+                     6,
+                     align = "center",
+                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                              p("Wave 6", style = "font-size: 20px;")),
+                     tags$img(
+                       src = "waveanalysis/c6.jpg",
+                       style = "max-width: 100%; height: auto;",
+                       deleteFile = FALSE
+                     )
+                   ),
+                   column(
+                     6,
+                     align = "center",
+                     fluidRow(column(
+                       12,
+                       align = "center",
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("GO KEGG Result", style = "font-size: 20px;")),
+                       tags$img(
+                         src = "waveanalysis/c6_selected_GO_KEGG.jpg",
+                         style = "max-width: 100%; height: auto;",
+                         deleteFile = FALSE
+                       )
+                     )),
+                     br(),
+                     
+                     fluidRow(
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("Ranked Text", style = "font-size: 20px;")),
+                       column(
+                         12,
+                         align = "center",
+                         tags$img(
+                           src = "waveanalysis/txtJPG/c6_ranked.jpg",
+                           style = "max-width: 100%; height: auto;",
+                           deleteFile = FALSE
+                         )
+                       )
+                     )
+                   )
+                 )
+               )
+             )),
+    
+    tabPanel("Wave 7", value = "c7",
+             fluidRow(
+               column(
+                 12,
+                 align = "center",
+                 tags$h1("Wave 7 Analysis"),
+                 p("Details about the Wave 7 analysis go here."),
+                 br(),
+                 fluidRow(
+                   column(
+                     6,
+                     align = "center",
+                     tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                              p("Wave 7", style = "font-size: 20px;")),
+                     tags$img(
+                       src = "waveanalysis/c7.jpg",
+                       style = "max-width: 100%; height: auto;",
+                       deleteFile = FALSE
+                     )
+                   ),
+                   column(
+                     6,
+                     align = "center",
+                     fluidRow(column(
+                       12,
+                       align = "center",
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("GO KEGG Result", style = "font-size: 20px;")),
+                       tags$img(
+                         src = "waveanalysis/c7_selected_GO_KEGG.jpg",
+                         style = "max-width: 100%; height: auto;",
+                         deleteFile = FALSE
+                       )
+                     )),
+                     br(),
+                     
+                     fluidRow(
+                       tags$div(style = "background-color: #f8f9fa; padding: 10px; text-align: center;",
+                                p("Ranked Text", style = "font-size: 20px;")),
+                       column(
+                         12,
+                         align = "center",
+                         tags$img(
+                           src = "waveanalysis/txtJPG/c7_ranked.jpg",
+                           style = "max-width: 100%; height: auto;",
+                           deleteFile = FALSE
+                         )
+                       )
+                     )
+                   )
+                 )
+               )
+             ))
+  ),
+  
+  # TF Network Analysis
+  navbarMenu(
+    "TF Network Analysis",
+    
+    tabPanel("Search TF-TF correlation in TRM/TEXterm",
+             fluidRow(
+               column(
+                 12,
+                 align = "center",
+                 tags$h1("Search TF-TF Correlation in TRM/TEXterm"),
+                 br(),
+                 
+                 tags$img(
+                   src = "networkanalysis/tfcorrdesc.png",
+                   style = "max-width: 40%; height: 40%;",
+                   alt = "something went wrong",
+                   deleteFile = FALSE
+                 ),
+                 
+                 br(),
+                 br(),
+                 
+                 tags$div(
+                   style = "text-align: left;",
+                   p("Inspired by DBPNet", tags$sup("1"), "which is a framework to identify cooperations between DNA-binding proteins using Chromatin 
+    immunoprecipitation followed by sequencing (ChIP-seq) and Hi-C data, we constructed TF interaction network based on 
+    Taiji's output, which is a TF-regulatee network. For each context, we first combined the cell state-important TFs and 
+    cell state-specific TFs. In total, 159 TFs for TEXterm and 170 TFs for TRM were selected. We then combined TEXterm/TRM 
+    samples' network by taking the mean value of edge weight for each TF-regulatee pair. Next, regulatees with low variation 
+    across TFs (standard deviation <= 1) were removed, then correlation matrix between TFs is calculated by taking account 
+    of the SpeArmstrongan's correlation of edge weight for each TF-regulatee pair. R package 'huge'", tags$sup("2"),  "is used to build a 
+    graphical model and construct the graph. We employed the Graphical lasso algorithm and the shrunken ECDF (empirical cumulative 
+    distribution function) estimator. We used a lasso penalty parameter lambda equal to 0.052 to control the regularization. 
+    We chose this value based on the local minimum point on the sparsity-lambda curve. When lambda = 0.05, around 15% of TF-TF pairs 
+    are considered as connected in the network.  To estimate the false discovery rate, we generated a null model by random shuffling 
+    the edge weight of TF-regulatee pair across TFs. When the same algorithm is applied to this dataset, the chosen cutoff identifies 
+    zero interaction, suggesting that the method with cutoff equal to 0.05 has a very low false discovery rate.")
+                 ),
+                 
+                 br(),
+                 br(),
+                 
+                 # Sidebar for input
+                 sidebarLayout(
+                   sidebarPanel(
+                     textInput("search", "Enter in a TF you are interested: ", value = ""),
+                     actionButton("search_btn", "Search"),
+                     br(),
+                     # Table for displaying the first column of genes
+                     tags$div(
+                       h4("Available TFs:"),
+                       tableOutput("gene_list_table"),
+                       style = "text-align: left;"
+                     )
+                   ),
+                   
+                   # Main panel to display results
+                   mainPanel(
+                     tableOutput("result_table"),
+                     
+                     # Legend section aligned to the left
+                     tags$div(
+                       h4("Key for TF-TF Network Image", style = "text-align: center;"),
+                       p("Circle: TF-specificity Green: TRM-specific Brown: TEXterm-specific"),
+                       p("Line thickness: TF-TF interaction intensity"),
+                       p("Line color: Green: TF-TF interaction found in TRM, Brown: TF-TF interaction found in TEXterm"),
+                       style = "text-align: left; margin-bottom: 20px;"  # Left-align the legend and add spacing below
+                     ),
+                     
+                     # Image section centered
+                     tags$div(
+                       uiOutput("image_gallery"),
+                       style = "text-align: center;"  # Center-align the image
+                     )
+                   )
+                 ),
+
+               ),
+             ),
+             
+             #NEW FOOTER
+             fluidRow(
+               tags$div(
+                 style = "position: relative; bottom: 0; width: 100%; background-color: #f8f9fa; padding: 10px; text-align: left;",
+                 HTML("<small>1. Zhang, K., Li, N., Ainsworth, R. I. & Wang, W. Systematic identification of protein combinations mediating chromatin looping. Nat. Commun. 7, 1–11 (2016).</small>"),
+                 br(),
+                 HTML("<small>2. Zhao, T., Liu, H., Roeder, K., Lafferty, J. & Wasserman, L. The huge Package for High-dimensional Undirected Graph Estimation in R. (2020)</small>"),
+                 br(),
+                 HTML("<small>doi:10.48550/arXiv.2006.14781.</small>")
+               )
+             )
+
+    ),
+             
+
+    
+    tabPanel("TRM/TEXterm TF communities",
+             fluidRow(
+               column(
+                 12,
+                 align = "center",
+                 tags$h1("TF Community in TRM/TEXterm"),
+                 br(),
+                 tags$img(src="networkanalysis/community.jpg",
+                          style = "max-width: 30%; height: 30%;"),
+                 br(),
+                 br(),
+                 p("Communities were detected using Leiden algorithm",tags$sup("3") ,"with modularity as objective function and 
+                   resolution as 0.9 since it reached the highest clustering modularity. In total, we identified 
+                   5 communities for each context. Network visualization was performed by graph with Fruchterman-Reingold 
+                   layout algorithm",tags$sup("4") ,"utilizing R package 'igraph' (https://r.igraph.org/)."),
+                 
+                 br(),
+                 br(),
+                 br(),
+                 
+                 tags$img(
+                   src = "networkanalysis/trmtexcom.png",
+                   style = "max-width: 90%; height: 80%;",
+                   alt = "something went wrong",
+                   deleteFile = FALSE
+                 ),
+                 
+                 br(),
+                 br(),
+                 
+                 p("TF-TF association clustering generates five TF communities between TRM and TEXterm cells. Left: The overall community topology is shaped by shared TFs (gray) in both TRM and TEXterm cells. Middle and Right: TRM and TEXterm cells show differential TF-TF interactions within each community and between communities. Top 10% of interactions are shown. The line thickness represents the interaction intensity."),
+                 
+                 br(),
+                 br(),
+                 br(),
+                 
+                 p("Members of each TF community in each cell state are below:"),
+               
+               fluidRow(
+                 column(6, DTOutput("trmcom")),  # First table in left half
+                 column(6, DTOutput("texcom"))   # Second table in right half
+               ),
+              
+               br(),
+               br(),
+               br(),
+               
+               p("TF neighbor communities in TEXterm and TRM cells, respectively are linked to different biological processes (below) 
+               The overall topology of these communities was influenced by multi-state TFs active in both cell states, while cell state-specific 
+               TFs created unique interaction patterns between the communities. Pathway analysis of the regulatees in each community suggested that 
+               TRM- or TEXterm-specific TFs within each community controlled different biological pathways. For example, in TRM cells, community 
+               3 was associated with cell-cell adhesion and response to TGFβ, and community 1 was associated with RNA metabolism, but in TEXterm cells, 
+               community 3 was linked to apoptosis, and community 1 was coupled to catabolism, proteolysis, ubiquitin-proteasome, and autophagy."),
+               
+               br(), 
+               
+               tags$img(
+                 src = "networkanalysis/tfcompathway.png",
+                 style = "max-width: 50%; height: 50%;",
+                 alt = "something went wrong",
+                 deleteFile = FALSE
+               ),
+               
+               br(),
+               br(),
+               br(),
+               br(),
+               br(),
+               br()
+               
+             )),
+             
+             # fluidRow(
+             #   tags$div(
+             #     HTML("<small style='text-align: left; padding: 10px;'>3.   Traag, V. A., Waltman, L. & van Eck, N. J. From Louvain to Leiden: guaranteeing well-connected communities. Sci. Rep. 9, 5233 (2019).</small>"),
+             #     br(),
+             #     HTML("<small style='text-align: left; padding: 10px;'>4. Schönfeld, M. & Pfeffer, J. Fruchterman/Reingold (1991): Graph Drawing by Force-Directed Placement. Schlüsselwerke der Netzwerkforschung 
+             #     217–220</small>"),
+             #     br(),
+             #     HTML("<small style='text-align: left; padding: 10px;'>https://doi.org/10.1007/978-3-658-21742-6_49 (2019).</small>") 
+             #   )
+             # )
+             
+             #NEW FOOTER
+             fluidRow(
+               tags$div(
+                 style = "position: relative; bottom: 0; width: 100%; background-color: #f8f9fa; padding: 10px; text-align: left;",
+                 HTML("<small>3. Traag, V. A., Waltman, L. & van Eck, N. J. From Louvain to Leiden: guaranteeing well-connected communities. Sci. Rep. 9, 5233 (2019).</small>"),
+                 br(),
+                 HTML("<small>4. Schönfeld, M. & Pfeffer, J. Fruchterman/Reingold (1991): Graph Drawing by Force-Directed Placement. Schlüsselwerke der Netzwerkforschung 217–220</small>"),
+                 br(),
+                 HTML("<small>https://doi.org/10.1007/978-3-658-21742-6_49 (2019).</small>")
+               )
+             )
+             
+             
+             )
+  ),
+  
+  
+  # Multi-omics data
+  tabPanel(
+    "Multi-omics Data",
+    
+    # Center the header using inline CSS
+    tags$h1("Multi-omics Data", style = "text-align: center;"),
+    br(),
+    
+    p("Scroll horizontally to view entire data table"),
+    br(),
+    br(),
+    
+    # Add space for the multi-omics data sheet
+    dataTableOutput("multiomicsdatatable"),
+    
+    br(),
+    br(),
+    
+    p("Composition of multi-omic atlas. A total of 121 experiments across multiple data sets were utilized to generate an epigenetic and transcriptional atlas of murine CD8+ T cells under chronic and acute antigen exposure. Unless stated, all CD8+ T cells were isolated from spleens.")
+  ),
+  
+  # Adding header with modal and JS
+  header = tags$div(
+    chatSidebarUI(),
+    # Modal dialog to display the expanded image
+    tags$div(
+      id = "modalDialog",
+      class = "modal",
+      tags$div(
+        class = "modal-content",
+        tags$span(class = "close", HTML("&times;")),
+        tags$div(
+          style = "text-align: center;",
+          tags$img(src = "csdescrip.jpeg", style = "max-width: 80%; height: auto;"),
+          tags$p("Caption for the csdescrip image.")
+        )
+      )
+    ),
+    
+    # Custom JavaScript for modal behavior
+    tags$script(
+      HTML(
+        '
+      $(document).ready(function(){
+        $("#csdescrip_link").click(function(){
+          $("#modalDialog").css("display", "block");
+        });
+        $(".close").click(function(){
+          $("#modalDialog").css("display", "none");
+        });
+        $(window).click(function(event){
+          if($(event.target).hasClass("modal")){
+            $("#modalDialog").css("display", "none");
+          }
+        });
+      });
+    '
+      )
+    ),
+    
+    tags$script(
+      HTML(
+        "
+    $(document).on('click', '#c1_link', function(e) {
+      e.preventDefault();
+      Shiny.setInputValue('c1_link_clicked', Math.random());
+    });
+  "
+      )
+    )
+  )
+)
+
+
 ############################## CODE GRAVEYARD ##############################
\ No newline at end of file