Interface

app.py

@@ -8,7 +8,8 @@ import numpy as np
 import periodictable
 from crystal_toolkit.settings import SETTINGS
 from dash import dcc, html
-from dash.dependencies import Input, Output
+from dash.dependencies import Input, Output, State
+from dash_breakpoints import WindowBreakpoints
 from datasets import load_dataset
 from pymatgen.analysis.structure_analyzer import SpacegroupAnalyzer
 from pymatgen.core import Structure
@@ -18,7 +19,7 @@ top_k = 500
 
 # Load only the train split of the dataset
 dataset = load_dataset(
-    "LeMaterial/leDataset",
+    "LeMaterial/leMat1",
     token=HF_TOKEN,
     split="train",
     columns=[
@@ -42,7 +43,7 @@ dataset = load_dataset(
         "chemical_formula_descriptive",
         "total_magnetization",
     ],
-)
+).select(range(1000))
 
 display_columns = [
     "chemical_formula_descriptive",
@@ -97,6 +98,11 @@ server = app.server  # Expose the server for deployment
 # Define the app layout
 layout = html.Div(
     [
+        WindowBreakpoints(
+            id="breakpoints",
+            widthBreakpointThresholdsPx=[800, 1200],
+            widthBreakpointNames=["sm", "md", "lg"],
+        ),
         html.H1(
             html.B("Interactive Crystal Viewer"),
             style={"textAlign": "center", "margin-top": "20px"},
@@ -104,24 +110,56 @@ layout = html.Div(
         html.Div(
             [
                 html.Div(
+                    [
+                        html.Div(
+                            "Search a material to display its structure and properties",
+                            style={"textAlign": "center"},
+                        ),
+                    ],
                     id="structure-container",
                     style={
-                        "width": "48%",
-                        "display": "inline-block",
+                        "width": "44%",
                         "verticalAlign": "top",
+                        "boxShadow": "0px 4px 8px rgba(0, 0, 0, 0.1)",
+                        "borderRadius": "10px",
+                        "backgroundColor": "#f9f9f9",
+                        "padding": "20px",
+                        "textAlign": "center",
+                        "display": "flex",
+                        "justifyContent": "center",
+                        "alignItems": "center",
                     },
                 ),
                 html.Div(
                     id="properties-container",
                     style={
-                        "width": "48%",
-                        "display": "inline-block",
+                        "width": "55%",
                         "paddingLeft": "4%",
                         "verticalAlign": "top",
+                        "boxShadow": "0px 4px 8px rgba(0, 0, 0, 0.1)",
+                        "borderRadius": "10px",
+                        "backgroundColor": "#f9f9f9",
+                        "padding": "20px",
+                        "overflow": "auto",
+                        "maxHeight": "600px",
+                        "display": "flex",
+                        "justifyContent": "center",
+                        "wordWrap": "break-word",
                     },
+                    children=[
+                        html.Div(
+                            "Properties will be displayed here",
+                            style={"textAlign": "center"},
+                        ),
+                    ],
                 ),
             ],
-            style={"margin-top": "20px"},
+            style={
+                "marginTop": "20px",
+                "display": "flex",
+                "justifyContent": "space-between",  # Ensure the two sections are responsive
+                "flexWrap": "wrap",
+            },
         ),
         html.Div(
             [
@@ -143,8 +181,9 @@ layout = html.Div(
                                             id="materials-input",
                                         ),
                                     ],
+                                    id="materials-input-container",
                                     style={
-                                        "width": "48%",
+                                        "width": "100%",
                                     },
                                 ),
                             ],
@@ -156,48 +195,90 @@ layout = html.Div(
                         ),
                     ],
                     style={
-                        "width": "100%",
+                        "width": "48%",
                         "verticalAlign": "top",
                     },
                 ),
-            ],
-            style={"margin-top": "20px", "margin-bottom": "20px"},
-        ),
-        html.Div(
-            [
-                html.Label("Select Material to Display"),
-                # dcc.Dropdown(
-                #     id="material-dropdown",
-                #     options=[],  # Empty options initially
-                #     value=None,
-                # ),
-                dash.dash_table.DataTable(
-                    id="table",
-                    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
+                html.Div(
+                    [
+                        html.Label(
+                            "Select a row to display the material's structure and properties",
+                            style={"margin-bottom": "20px"},
+                        ),
+                        # dcc.Dropdown(
+                        #     id="material-dropdown",
+                        #     options=[],  # Empty options initially
+                        #     value=None,
+                        # ),
+                        dash.dash_table.DataTable(
+                            id="table",
+                            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=[],
+                        ),
                     ],
-                    data=[{}],
-                    style_table={
-                        "overflowX": "auto",
-                        "height": "220px",
-                        "overflowY": "auto",
+                    style={
+                        "width": "48%",
+                        # "maxWidth": "800px",
+                        "margin": "0 auto",
+                        "padding": "20px",
+                        "backgroundColor": "#ffffff",
+                        "borderRadius": "10px",
+                        "boxShadow": "0px 4px 8px rgba(0, 0, 0, 0.1)",
                     },
-                    style_header={"fontWeight": "bold", "backgroundColor": "lightgrey"},
-                    style_cell={"textAlign": "center"},
-                    style_as_list_view=True,
                 ),
             ],
-            style={"margin-top": "30px"},
+            style={
+                "margin-top": "20px",
+                "margin-bottom": "20px",
+                "display": "flex",
+                "flexDirection": "row",
+                "alignItems": "center",
+            },
         ),
         # html.Button("Display Material", id="display-button", n_clicks=0),
     ],
@@ -259,12 +340,25 @@ def on_submit_materials_input(n_clicks, query):
     ],
     # Input("display-button", "n_clicks"),
     Input("table", "active_cell"),
+    Input("table", "derived_virtual_selected_rows"),
 )
-def display_material(active_cell):
-    if not active_cell:
-        return "", ""
-
-    idx_active = active_cell["row"]
+def display_material(active_cell, selected_rows):
+    if not active_cell and not selected_rows:
+        return (
+            html.Div(
+                "Search a material to display its structure and properties",
+                style={"textAlign": "center"},
+            ),
+            html.Div(
+                "Properties will be displayed here",
+                style={"textAlign": "center"},
+            ),
+        )
+
+    if len(selected_rows) > 0:
+        idx_active = selected_rows[0]
+    else:
+        idx_active = active_cell["row"]
     row = dataset[mapping_table_idx_dataset_idx[idx_active]]
 
     structure = Structure(
@@ -291,7 +385,7 @@ def display_material(active_cell):
         "Crystal system": sga.get_crystal_system(),
         "International Spacegroup": sga.get_symmetry_dataset().international,
         "Magnetic moments (μB/f.u.)": row["magnetic_moments"],
-        "Stress tensor (kB)": row["stress_tensor"],
+        # "Stress tensor (kB)": row["stress_tensor"], # not available in LeMat1
         "Forces on atoms (eV/A)": row["forces"],
         "Bader charges (e-)": row["charges"],
         "DFT Functional": row["functional"],
@@ -302,21 +396,71 @@ def display_material(active_cell):
         [
             html.Tbody(
                 [
-                    html.Tr([html.Th(key), html.Td(str(value))])
+                    html.Tr(
+                        [
+                            html.Th(
+                                key,
+                                style={
+                                    "padding": "10px",
+                                    "verticalAlign": "middle",
+                                },
+                            ),
+                            html.Td(
+                                str(value),
+                                style={
+                                    "padding": "10px",
+                                    "borderBottom": "1px solid #ddd",
+                                },
+                            ),
+                        ],
+                    )
                     for key, value in properties.items()
-                ]
+                ],
             )
         ],
         style={
-            "border": "1px solid black",
             "width": "100%",
             "borderCollapse": "collapse",
+            "fontFamily": "'Arial', sans-serif",
+            "fontSize": "14px",
+            "color": "#333333",
         },
     )
 
     return structure_component.layout(), properties_html
 
 
+@app.callback(
+    Output("materials-input-container", "children"),
+    Input("breakpoints", "widthBreakpoint"),
+    State("breakpoints", "width"),
+)
+def update_materials_input_layout(breakpoint_name, width):
+    if breakpoint_name in ["lg", "md"]:
+        # Default layout if no page size is detected
+        return dmp.MaterialsInput(
+            allowedInputTypes=["elements", "formula"],
+            hidePeriodicTable=False,
+            periodicTableMode="toggle",
+            hideWildcardButton=True,
+            showSubmitButton=True,
+            submitButtonText="Search",
+            type="elements",
+            id="materials-input",
+        )
+    elif breakpoint_name == "sm":
+        return dmp.MaterialsInput(
+            allowedInputTypes=["elements", "formula"],
+            hidePeriodicTable=True,
+            periodicTableMode="none",
+            hideWildcardButton=False,
+            showSubmitButton=False,
+            # submitButtonText="Search",
+            type="elements",
+            id="materials-input",
+        )
+
+
 # Register crystal toolkit with the app
 ctc.register_crystal_toolkit(app, layout)