components.py

import dash
import dash_mp_components as dmp
from dash import dcc, html

display_columns = [
    "chemical_formula_descriptive",
    "functional",
    "immutable_id",
    "energy",
]

display_names = {
    "chemical_formula_descriptive": "Formula",
    "functional": "Functional",
    "immutable_id": "Material ID",
    "energy": "Energy (eV)",
}


def get_periodic_table(id, table_kwargs, **style_kwargs):

    return html.Div(
        [
            html.H3("Search Materials (eg. 'Ac,Cd,Ge' or 'Ac2CdGe3')"),
            html.Div(
                [
                    dmp.MaterialsInput(
                        allowedInputTypes=[
                            "elements",
                            "formula",
                        ],
                        hidePeriodicTable=False,
                        periodicTableMode="toggle",
                        hideWildcardButton=True,
                        showSubmitButton=True,
                        submitButtonText="Search",
                        type="elements",
                        **table_kwargs,
                        id=id,
                    ),
                ],
                id="materials-input-container",
                style={
                    "width": "100%",
                },
            ),
        ],
        className="container periodic-table",
    )


def get_dropdown(id, options, **style_kwargs):
    return dcc.Dropdown(
        id=id,
        options=options,
        placeholder="Embedder",
        value=None,
        clearable=False,
        style=style_kwargs,
    )


def get_upload_div(id, **style_kwargs):
    return html.Div(
        [
            html.H3("Upload a CIF file"),
            dcc.Upload(
                id=id,
                children=html.Div(
                    [
                        "Drag and Drop or ",
                        html.A("Select a CIF file"),
                    ]
                ),
                style={
                    "width": "100%",
                    "height": "60px",
                    "lineHeight": "60px",
                    "borderWidth": "1px",
                    "borderStyle": "dashed",
                    "borderRadius": "5px",
                    "textAlign": "center",
                    "margin": "10px",
                },
                multiple=False,
            ),
        ],
        className="container",
    )


def get_display_table(id, display_names, display_columns, text, **style_kwargs):

    return html.Div(
        [
            html.Label(
                text,
                style={"margin-bottom": "20px"},
            ),
            dash.dash_table.DataTable(
                id=id,
                columns=[
                    (
                        {
                            "name": display_names[col],
                            "id": col,
                        }
                        if col != "energy"
                        else {
                            "name": display_names[col],
                            "id": col,
                            "type": "numeric",
                            "format": {"specifier": ".2f"},
                        }
                    )
                    for col in display_columns
                ],
                data=[{}],
                style_cell={
                    "fontFamily": "Arial",
                    "padding": "10px",
                    "border": "1px solid #ddd",  # Subtle border for elegance
                    "textAlign": "left",
                    "fontSize": "14px",
                },
                style_header={
                    "backgroundColor": "#f5f5f5",  # Light grey header
                    "fontWeight": "bold",
                    "textAlign": "left",
                    "borderBottom": "2px solid #ddd",
                },
                style_data={
                    "backgroundColor": "#ffffff",
                    "color": "#333333",
                    "borderBottom": "1px solid #ddd",
                },
                style_data_conditional=[
                    {
                        "if": {"state": "active"},
                        "backgroundColor": "#e6f7ff",
                        "border": "1px solid #1890ff",
                    },
                ],
                style_table={
                    "maxHeight": "400px",
                    "overflowX": "auto",
                    "overflowY": "auto",
                },
                style_as_list_view=True,
                row_selectable="single",
                selected_rows=[],
            ),
        ],
        className="container",
    )


def get_materials_display(id, text_materials_div, text_table_div, **style_kwargs):
    return html.Div(
        [
            html.Div(
                [
                    html.Div(
                        text_materials_div,
                        style={"textAlign": "center"},
                    ),
                ],
                id=f"structure-container{id}",
                className="container container-visu",
            ),
            html.Div(
                id=f"properties-container{id}",
                className="container container-table",
                style={"width": "100%"},
                children=[
                    html.Div(
                        text_table_div,
                        style={"textAlign": "center"},
                    ),
                ],
            ),
        ],
        className="container-row",
    )