ui/layout.py

"""Master Gradio layout for the Pigeon Pea Pangenome Atlas."""

import gradio as gr

from ui.theme import build_theme, CUSTOM_CSS
from ui.quest0 import build_quest0
from ui.quest1 import build_quest1
from ui.quest2 import build_quest2
from ui.quest3 import build_quest3
from ui.quest4 import build_quest4
from ui.final import build_final_tab
from ui.gene_card_ui import build_gene_card_panel


def build_app(line_choices: list[str], contig_choices: list[str],
              gene_choices: list[str]) -> tuple:
    """
    Build the full Gradio Blocks app.

    Returns (demo, components_dict, theme, css) where:
      - demo is the gr.Blocks instance
      - components_dict maps all UI elements
      - theme is the Gradio theme object (pass to launch() for Gradio >= 6.0)
      - css is the custom CSS string (pass to launch() for Gradio >= 6.0)
    """
    theme = build_theme()

    with gr.Blocks(title="Pigeon Pea Pangenome Atlas") as demo:
        # State
        state = gr.State(value=None)

        # Header
        gr.Markdown("# Pigeon Pea Pangenome Atlas")
        gr.Markdown("*An interactive exploration of 89 pigeon pea lines and their pangenome*")

        # Main content area
        with gr.Row():
            # Main tabs (left ~75%)
            with gr.Column(scale=3):
                with gr.Tabs() as tabs:
                    q0 = build_quest0(line_choices)
                    q1 = build_quest1(line_choices)
                    q2 = build_quest2()
                    q3 = build_quest3(contig_choices)
                    q4 = build_quest4(gene_choices)
                    final = build_final_tab()

            # Gene Card side panel (right ~25%)
            gc = build_gene_card_panel()

        # Data Health accordion
        with gr.Accordion("Data Health", open=False, visible=True):
            data_health_html = gr.HTML(value="<p>Loading data health report...</p>")

    components = {
        "state": state,
        "tabs": tabs,
        "data_health_html": data_health_html,
        **{f"q0_{k}": v for k, v in q0.items()},
        **{f"q1_{k}": v for k, v in q1.items()},
        **{f"q2_{k}": v for k, v in q2.items()},
        **{f"q3_{k}": v for k, v in q3.items()},
        **{f"q4_{k}": v for k, v in q4.items()},
        **{f"final_{k}": v for k, v in final.items()},
        **{f"gc_{k}": v for k, v in gc.items()},
    }

    return demo, components, theme, CUSTOM_CSS