app.py

from pathlib import Path
import datetime

from shiny import App, render, ui, reactive

app_dir = Path(__file__).parent

# -------------------------------------------------------------------
# Analysis registry: (dataset, analysis_id) -> module UI/server
# -------------------------------------------------------------------
ANALYSIS_REGISTRY = {
    ("manuscript", "1"): {
        "label": "SLIDE and GRN Enriched Regulons",
        "description": "Regulon analysis integrating SLIDE and dynamic GRNs to identify key TFs driving B cell fate decisions.",
        "ui": ("modules.regulon.app", "regulon_ui"),
        "server": ("modules.regulon.app", "regulon_server"),
        "ns": "regulon",
    },
    ("manuscript", "2"): {
    "label": "Dynamic GRNs",
    "description": "Dynamic Gene Regulatory Networks (GRNs) across B cell development stages.",
    "ui": ("modules.dictys.app", "dictys_ui"),
    "server": ("modules.dictys.app", "dictys_server"),
    "ns": "dictys",
    },
    ("manuscript", "3"): {
    "label": "Cellular Programs",
    "description": "Visualization of cellular programs.",
    "ui": ("modules.cellular_program.app", "cellular_program_ui"),
    "server": ("modules.cellular_program.app", "cellular_program_server"),
    "ns": "cellular_program",
    },
    # ("resource", "9"): {
    #     "label": "CAP-SELEX",
    #     "description": "Clustering of CAP-SELEX CEs.",
    #     "ui": ("modules.cap_selex.app", "cap_selex_ui"),
    #     "server": ("modules.cap_selex.app", "cap_selex_server"),
    #     "ns": "cap",
    # },
}
# -------------------------------------------------------------------
# App CSS
# -------------------------------------------------------------------
APP_CSS = """
:root {
  --bslib-sidebar-main-bg: #f8f8f8;
  --header-color: #1a1a2e;
  --accent-color: #ff6b9d;
  --accent-dark: #e55a87;
  
  /* Refined rose palette */
  --rose-50: #f9d8e6;
  --rose-100: #f2acca;
  --rose-200: #ed85b0;
  --rose-300: #e95694;
  --rose-400: #e33177;
  --rose-500: #ec4899;
  --rose-600: #c5295a;
  --rose-700: #8f1b3b;
  --green-50: #e1f2e3;
  --yellow-50: #fff9e5;
  --blue-50: #e4f1f7;

  /* Claude-style typography */
  --font-claude: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Spacing & shadows */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-shadow: rgba(0, 0, 0, 0.05);
}

/* Base typography - Claude style */
* {
  font-feature-settings: 'cv11', 'ss01';
}

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: var(--font-claude);
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Elegant rose gradient from center with subtle grid */
body {
  background: 
    /* Central radial gradient */
    radial-gradient(ellipse 70% 50% at center, var(--yellow-50) 0%,  transparent 100%),

    /* Subtle grid */
    linear-gradient(rgba(17,89,42,0.04) 2px, transparent 1px),
    linear-gradient(90deg, rgba(17,89,42,0.04) 2px, transparent 1px);

  background-size: 
    1200px 1200px,  /* radial gradient */
    60px 60px,      /* vertical grid lines */
    60px 60px;      /* horizontal grid lines */
    
  background-attachment: fixed;
  color: #1f2937;
}

/* Premium Rose Navigation Buttons */
.premium-rose-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(252, 231, 243, 0.6) !important;
  border-radius: 25px !important;
  color: #1a1a2e !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  padding: 12px 24px !important;
  box-shadow: 
    0 4px 12px rgba(119, 5, 56, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.premium-rose-btn:hover {
  background: linear-gradient(135deg, rgba(252, 231, 243, 0.95), rgba(248, 215, 230, 0.9)) !important;
  border-color: rgba(248, 113, 113, 0.8) !important;
  color: #770538 !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 
    0 12px 30px rgba(119, 5, 56, 0.25),
    0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

.premium-rose-btn:active {
  transform: translateY(-1px) scale(1.02) !important;
}

/* Special Resources button */
.premium-rose-special {
  background: linear-gradient(135deg, rgba(248, 215, 230, 0.8), rgba(252, 231, 243, 0.7)) !important;
  border-color: rgba(119, 5, 56, 0.3) !important;
}

.premium-rose-special:hover {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.9), rgba(119, 5, 56, 0.85)) !important;
  border-color: #770538 !important;
  color: white !important;
  box-shadow: 
    0 16px 40px rgba(119, 5, 56, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Ensure nav-pill compatibility */
.nav-pill.premium-rose-btn {
  margin: 2px !important;
}

/* Typography - Clean & precise */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-claude);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--header-color);
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

/* Cards - Glassmorphism perfection */
.card, .ui-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-xl);
  margin-bottom: var(--space-lg);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.card-header, .card-title {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding: var(--space-md) var(--space-lg);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  color: var(--header-color);
  margin: 0;
}


/* Layout containers */
.app-main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.analysis-card {
  margin-top: var(--space-lg);
}

/* Intro text */
.app-intro-text {
  color: #374151;
  font-size: 1rem;
  line-height: 1.7;
}

.app-intro-note {
  color: var(--accent-color);
  font-style: italic;
  font-size: 0.95rem;
}

/* Resources */
.resources-title {
  color: var(--accent-dark);
  font-size: 1rem;
  margin: var(--space-md) 0 var(--space-sm) 0;
}

/* Footer */
.app-footer {
  text-align: center;
  padding: var(--space-lg) 0;
  color: #9ca3af;
  font-size: 0.875rem;
}

.footer-link {
  color: var(--accent-color);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

/* Plotly fixes */
.plotly .modebar-container { display: none !important; }
.plotly-widget, .plotly .js-plotly-plot { height: 100% !important; }

/* Responsive */
@media (max-width: 768px) {
  .nav-pill-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .nav-pill {
    justify-content: center;
  }
}
"""
# -------------------------------------------------------------------
# UI
# -------------------------------------------------------------------
app_ui = ui.page_fluid(
    ui.tags.head(ui.tags.style(APP_CSS)),
    # Header
    ui.div(
        ui.h1(
            "FIREFate: Functional and Interpretable Regulatory Encoding of Fate determination",
            class_="mb-3",
            style=(
                "font-weight: 800; letter-spacing: 0.5px; color: #003594; "
                "margin-top: 40px;"
            ),
        ),
        ui.h4(
            "Data Portal • v0.0.1",
            class_="mt-4 mb-2",
            style="letter-spacing: 0.5px; color: #555;",
        ),
        ui.h6(
            "Jishnu Lab, University of Pittsburgh (2026)",
            class_="mt-4 mb-3",
            style="color: #555; font-size: 1.2em;",
        ),
        ui.div(
            ui.a(
                "📄 Manuscript @ bioRxiv",
                href="",
                target="_blank",
                class_="btn btn-outline-primary",
                style="padding: 4px 16px; margin-right: 12px;",
            ),
            ui.a(
                "💻 Code @ GitHub",
                href="",
                target="_blank",
                class_="btn btn-outline-primary",
                style="padding: 4px 16px;",
            ),
            style=(
                "display: flex; justify-content: center; align-items: center; "
                "gap: 8px;"
            ),
        ),
        class_="text-center mt-4 mb-4",
    ),
    ui.hr(),

    # Welcome / selection
    ui.layout_columns(
        # Welcome card
        ui.card(
            ui.card_header("Getting Started", style="font-size: 1.2em; text-align: center;"),
            ui.panel_well(
            ui.p(
                "Welcome! This app provides interactive tools for exploring FIREFate",
                style="font-size: 1.05em;",
            ),
            ui.p(
                "💡 Please scroll to see all results.",
                style=(
                "color: #A23B72; text-align: center; "
                ),
            ),
            style="background: transparent; box-shadow: none; border: none;",
            ),
            style=(
                "margin-top: 1rem; padding: 1.5em; background: var(--rose-50); "
                "border-radius: 1em;"
            ),
        ),
        # Analysis selection card with 9 buttons
        ui.card(
            ui.card_header("Select Analysis", style="font-size: 1.2em; text-align: center;"),
            ui.div(
                    ui.input_action_button(
                        "btn_manuscript_1", 
                        "Regulons", 
                        class_="nav-pill premium-rose-btn"
                    ),
                    ui.input_action_button(
                        "btn_manuscript_2", 
                        "Dynamic GRNs", 
                        class_="nav-pill premium-rose-btn"
                    ),
                    ui.input_action_button(
                        "btn_manuscript_3", 
                        "Cellular Programs", 
                        class_="nav-pill premium-rose-btn"
                    ),
                    # ui.input_action_button(
                    #     "btn_resources", 
                    #     "Resources", 
                    #     class_="nav-pill premium-rose-btn premium-rose-special"
                    # ),
                    style="display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1rem; padding: 8px;",
                ),
            ui.output_ui("resources_panel"),
            style=(
                "margin-top: 1rem; padding: 1.5em; background: var(--blue-50); "
                "border-radius: 1em;"
            ),
        ),
        col_widths=[4, 8],
    ),

    # Dynamic analysis UI
    ui.card(
        ui.output_ui("dynamic_analysis_view"),
        style=(
            "margin-top: 2rem; padding: 1.5em; background: var(--blue-50); "
            "border-radius: 1em;"
        ),
    ),

    ui.hr(),

    # Footer
    ui.div(
        ui.p(
            "©",
            str(datetime.date.today().year) + " ",
            ui.a(
                "Jishnu",
                href="https://jishnulab.org/",
                target="_blank",
                style="text-decoration: underline dotted;",
            ),
            " Lab @ University of Pittsburgh",
        ),
        ui.p(
            "Developed with ❤️ by ",
            ui.a(
                "Swapnil Keshari",
                href="https://swapnilkeshari.github.io/",
                target="_blank",
            ),
            " • Clone App from: ",
            ui.a(
                "GitHub",
                href="https://github.com/pitt-csi/FIREFate_shinyapp",
                target="_blank",
            ),
        ),
        ui.p("Last updated: ", str(datetime.date.today().isoformat())),
        class_="text-center mt-4 mb-4",
        style="font-size: 0.98em; color: #555;",
    ),
)


# -------------------------------------------------------------------
# Server
# -------------------------------------------------------------------
def server(input, output, session):
    # One source of truth, e.g. "manuscript_1" or "resource_9"
    current_selection = reactive.Value("none")
    # Whether resource sub-panel is visible
    resources_open = reactive.Value(False)

    # --- Resource panel UI (3 resource buttons) ---------------------
    @render.ui
    def resources_panel():
        if not resources_open.get():
            return ui.TagList()
        return ui.div(
            ui.hr(),
            ui.h5("Curated Resources", class_="mt-2, font-size: 1em"),
            ui.div(
                ui.input_action_button(
                    "btn_resource_9", 
                    "CAP-SELEX", 
                    class_="nav-pill premium-rose-btn"
                ),
                ui.input_action_button(
                    "btn_resource_10", 
                    "TransCompel Collection", 
                    class_="nav-pill premium-rose-btn"
                ),
                ui.input_action_button(
                    "btn_resource_11", 
                    "CESeek–JASPAR Motif Clustering", 
                    class_="nav-pill premium-rose-btn"
                ),
                style="display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 8px;",
            )

        )

    # --- Manuscript button handlers --------------------------------
    @reactive.Effect
    @reactive.event(input.btn_manuscript_1)
    def _click_m1():
        current_selection.set("manuscript_1")

    @reactive.Effect
    @reactive.event(input.btn_manuscript_2)
    def _click_m2():
        current_selection.set("manuscript_2")

    @reactive.Effect
    @reactive.event(input.btn_manuscript_3)
    def _click_m3():
        current_selection.set("manuscript_3")

    # --- Resources main button: toggle visibility -------------------
    @reactive.Effect
    @reactive.event(input.btn_resources)
    def _toggle_resources():
        resources_open.set(not resources_open.get())

    # --- Resource button handlers ----------------------------------
    @reactive.Effect
    @reactive.event(input.btn_resource_9)
    def _click_r9():
        current_selection.set("resource_9")

    @reactive.Effect
    @reactive.event(input.btn_resource_10)
    def _click_r10():
        current_selection.set("resource_10")

    @reactive.Effect
    @reactive.event(input.btn_resource_11)
    def _click_r11():
        current_selection.set("resource_11")

    # --- Helper: map key -> ANALYSIS_REGISTRY ----------------------
    def _get_analysis_config():
        selected = current_selection.get()
        if not selected or selected == "none":
            return None
        parts = selected.split("_", 1)
        if len(parts) != 2:
            return None
        key = (parts[0], parts[1])
        return ANALYSIS_REGISTRY.get(key)

    # --- Dynamic analysis UI ---------------------------------------
    @render.ui
    def dynamic_analysis_view():
        cfg = _get_analysis_config()

        if cfg is None:
            return ui.p(
                "Please select an analysis using the buttons above.",
                style="color: #770538; font-weight: 600; text-align: center; font-size: 1.1rem;",
            )

        print("Loading analysis module:", cfg["label"])

        # Description box - FULLY TRANSPARENT
        description_box = ui.card(
            ui.p(
                f"Description: {cfg['description']}",
                style="color: #770538; text-align: center; font-weight: 500; font-size: 1.2em; line-height: 1.6;",
            ),
            style="""
                background: transparent !important; 
                box-shadow: none !important; 
                border: none !important; 
                padding: 0;
            """,
        )

        # Module UI box - FULLY TRANSPARENT
        mod_path, ui_name = cfg["ui"]
        ns = cfg["ns"]
        mod = __import__(mod_path, fromlist=[ui_name])
        ui_fun = getattr(mod, ui_name)
        module_ui = ui.card(
            ui_fun(ns),
            style="""
                background: transparent !important; 
                box-shadow: none !important; 
                border: none !important; 
                padding: 0;
                margin: 0;
            """,
        )

        # Return them stacked with separator
        return ui.TagList(
            description_box, 
            ui.hr(style="border-color: rgba(119, 5, 56, 0.2); margin: 2rem 0;"),
            module_ui
        )

    # --- Dynamic analysis server -----------------------------------
    @reactive.Effect
    def _dynamic_analysis_server():
        cfg = _get_analysis_config()
        print("Config:", cfg)
        if cfg is None:
            return
        mod_path, server_name = cfg["server"]
        ns = cfg["ns"]
        mod = __import__(mod_path, fromlist=[server_name])
        server_fun = getattr(mod, server_name)
        server_fun(ns)


# -------------------------------------------------------------------
# App
# -------------------------------------------------------------------
app = App(
    app_ui,
    server,
    # static_assets={
    #     "/clustering": str(app_dir / "modules" / "clustering" / "www"),
    #     "/cap_selex": str(app_dir / "modules" / "cap_selex" / "www"),
    #     "/cap_match": str(app_dir / "modules" / "cap_match" / "www"),
    #     "/cistrome_match": str(app_dir / "modules" / "cistrome_match" / "www"),
    #     "/clus_jas": str(app_dir / "modules" / "clus_jas" / "www"),
    # },
)