pages/data.py

import dash
from dash import html, dcc, dash_table
import dash_bootstrap_components as dbc

dash.register_page(__name__, path='/data')

# Data preview based on the uploaded CSV snapshots
feature_data = [
    {"u": 24.2444, "g": 23.9796, "r": 23.5221, "i": 22.9110, "z": 22.5258, "y": 22.3291},
    {"u": 24.4891, "g": 23.9162, "r": 22.9237, "i": 21.8738, "z": 21.3065, "y": 21.2514},
    {"u": 24.8740, "g": 22.9739, "r": 21.4659, "i": 20.7884, "z": 20.4623, "y": 20.4137},
    {"u": 24.5290, "g": 24.3386, "r": 23.8912, "i": 23.2061, "z": 22.9893, "y": 23.1124},
    {"u": 23.6412, "g": 23.3874, "r": 22.9753, "i": 22.2352, "z": 21.8097, "y": 21.5595},
]

target_data = [
    {"zhelio": 1.0034}, {"zhelio": 0.9023}, {"zhelio": 0.4242}, 
    {"zhelio": 0.7690}, {"zhelio": 0.9910}
]

layout = html.Div([
    html.Div([
        html.H1("Data: The Building Blocks", className="text-white fw-bold mb-2"),
        html.P("Project Foundation and Dataset Structure", className="lead text-info"),
    ], className="mb-5"),

    dbc.Card([
        dbc.CardBody([
            html.H3("Dataset Origins", className="text-white mb-4"),
            
            html.Div([
                html.P([
                    "Our project is inspired by the work of ", 
                    html.A("Zhou et al. (2019)", href="https://arxiv.org/abs/1903.08174", target="_blank", className="text-info font-weight-bold"),
                    ", who made the data available for the purpose of building redshift forecasting algorithms.",
                ], className="text-light mb-3"),
                
                html.P([
                    "The target data resembles the wavelength coverage and depth of the upcoming ",
                    html.B("Vera Rubin Observatory"), " (formerly known as the Large Synoptic Survey Telescope). ",
                    "The goal is to build a model capable of handling data across six bands, ranging from near-ultraviolet to near-infrared (u, g, r, i, z, and y)."
                ], className="text-light mb-4"),
            ], className="border-start border-info border-4 ps-4 mb-5"),

            # Data Preview Tables
            dbc.Row([
                dbc.Col([
                    html.H5("Photometric Features (sel_features.csv)", className="text-info mb-3"),
                    dash_table.DataTable(
                        data=feature_data,
                        columns=[{"name": i, "id": i} for i in ["u", "g", "r", "i", "z", "y"]],
                        style_header={'backgroundColor': '#1a1a1a', 'color': '#00d2ff', 'fontWeight': 'bold'},
                        style_cell={'backgroundColor': '#2b2b2b', 'color': 'white', 'textAlign': 'center', 'border': '1px solid #444'},
                    )
                ], width=12, lg=8),
                dbc.Col([
                    html.H5("Target Redshift (sel_target.csv)", className="text-success mb-3"),
                    dash_table.DataTable(
                        data=target_data,
                        columns=[{"name": "zhelio", "id": "zhelio"}],
                        style_header={'backgroundColor': '#1a1a1a', 'color': '#28a745', 'fontWeight': 'bold'},
                        style_cell={'backgroundColor': '#2b2b2b', 'color': 'white', 'textAlign': 'center', 'border': '1px solid #444'},
                    )
                ], width=12, lg=4),
            ], className="mb-5"),

            # Resource Links Section
            html.Div([
                html.H4("Resources & Technical Papers", className="text-info mb-3"),
                html.Ul([
                    html.Li([
                        html.B("Data Repository: "), 
                        html.A("Zhou et al. (Pittsburgh Repository)", href="http://d-scholarship.pitt.edu/36064/", target="_blank", className="ms-2 text-info")
                    ], className="text-light mb-2"),
                    html.Li([
                        html.B("Technical Paper: "), 
                        html.A("[1903.08174] Deep ugrizY Imaging and DEEP2/3 Spectroscopy", href="https://arxiv.org/abs/1903.08174", target="_blank", className="ms-2 text-info")
                    ], className="text-light"),
                ], style={"listStyleType": "none", "paddingLeft": "0"})
            ], className="p-4 rounded-4", style={"background": "rgba(255, 255, 255, 0.02)", "border": "1px solid rgba(255, 255, 255, 0.1)"})
        ])
    ], className="modern-card p-4"),
])