LeMaterial/materials_explorer

1import dash2import dash_mp_components as dmp3from dash import dcc, html4 5display_columns = [6    "chemical_formula_descriptive",7    "functional",8    "immutable_id",9    "energy",10]11 12display_names = {13    "chemical_formula_descriptive": "Formula",14    "functional": "Functional",15    "immutable_id": "Material ID",16    "energy": "Energy (eV)",17}18 19 20def get_periodic_table(id, table_kwargs, **style_kwargs):21 22    return html.Div(23        [24            html.H3("Search Materials (eg. 'Ac,Cd,Ge' or 'Ac2CdGe3')"),25            html.Div(26                [27                    dmp.MaterialsInput(28                        allowedInputTypes=[29                            "elements",30                            "formula",31                        ],32                        hidePeriodicTable=False,33                        periodicTableMode="toggle",34                        hideWildcardButton=True,35                        showSubmitButton=True,36                        submitButtonText="Search",37                        type="elements",38                        **table_kwargs,39                        id=id,40                    ),41                ],42                id="materials-input-container",43                style={44                    "width": "100%",45                },46            ),47        ],48        className="container periodic-table",49    )50 51 52def get_dropdown(id, options, **style_kwargs):53    return dcc.Dropdown(54        id=id,55        options=options,56        placeholder="Embedder",57        value=None,58        clearable=False,59        style=style_kwargs,60    )61 62 63def get_upload_div(id, **style_kwargs):64    return html.Div(65        [66            html.H3("Upload a CIF file"),67            dcc.Upload(68                id=id,69                children=html.Div(70                    [71                        "Drag and Drop or ",72                        html.A("Select a CIF file"),73                    ]74                ),75                style={76                    "width": "100%",77                    "height": "60px",78                    "lineHeight": "60px",79                    "borderWidth": "1px",80                    "borderStyle": "dashed",81                    "borderRadius": "5px",82                    "textAlign": "center",83                    "margin": "10px",84                },85                multiple=False,86            ),87        ],88        className="container",89    )90 91 92def get_display_table(id, display_names, display_columns, text, **style_kwargs):93 94    return html.Div(95        [96            html.Label(97                text,98                style={"margin-bottom": "20px"},99            ),100            dash.dash_table.DataTable(101                id=id,102                columns=[103                    (104                        {105                            "name": display_names[col],106                            "id": col,107                        }108                        if col != "energy"109                        else {110                            "name": display_names[col],111                            "id": col,112                            "type": "numeric",113                            "format": {"specifier": ".2f"},114                        }115                    )116                    for col in display_columns117                ],118                data=[{}],119                style_cell={120                    "fontFamily": "Arial",121                    "padding": "10px",122                    "border": "1px solid #ddd",  # Subtle border for elegance123                    "textAlign": "left",124                    "fontSize": "14px",125                },126                style_header={127                    "backgroundColor": "#f5f5f5",  # Light grey header128                    "fontWeight": "bold",129                    "textAlign": "left",130                    "borderBottom": "2px solid #ddd",131                },132                style_data={133                    "backgroundColor": "#ffffff",134                    "color": "#333333",135                    "borderBottom": "1px solid #ddd",136                },137                style_data_conditional=[138                    {139                        "if": {"state": "active"},140                        "backgroundColor": "#e6f7ff",141                        "border": "1px solid #1890ff",142                    },143                ],144                style_table={145                    "maxHeight": "400px",146                    "overflowX": "auto",147                    "overflowY": "auto",148                },149                style_as_list_view=True,150                row_selectable="single",151                selected_rows=[],152            ),153        ],154        className="container",155    )156 157 158def get_materials_display(id, text_materials_div, text_table_div, **style_kwargs):159    return html.Div(160        [161            html.Div(162                [163                    html.Div(164                        text_materials_div,165                        style={"textAlign": "center"},166                    ),167                ],168                id=f"structure-container{id}",169                className="container container-visu",170            ),171            html.Div(172                id=f"properties-container{id}",173                className="container container-table",174                style={"width": "100%"},175                children=[176                    html.Div(177                        text_table_div,178                        style={"textAlign": "center"},179                    ),180                ],181            ),182        ],183        className="container-row",184    )185