Search with Periodic Table

app.py

@@ -2,6 +2,7 @@ import os
 
 import crystal_toolkit.components as ctc
 import dash
+import dash_mp_components as dmp
 from crystal_toolkit.settings import SETTINGS
 from dash import dcc, html
 from dash.dependencies import Input, Output, State
@@ -39,6 +40,7 @@ dataset = load_dataset(
     ],
 )
 
+dataset = dataset.select(range(1000))
 # Convert the train split to a pandas DataFrame
 train_df = dataset.to_pandas()
 del dataset
@@ -50,37 +52,28 @@ server = app.server  # Expose the server for deployment
 # Define the app layout
 layout = html.Div(
     [
-        dcc.Markdown("## Interactive Crystal Viewer"),
+        html.H1("Interactive Crystal Viewer"),
         html.Div(
             [
                 html.Div(
                     [
-                        html.Label("Search by Chemical System (e.g., 'Ac-Cd-Ge')"),
-                        dcc.Input(
-                            id="query-input",
-                            type="text",
-                            value="Ac-Cd-Ge",
-                            placeholder="Ac-Cd-Ge",
-                            style={"width": "100%"},
+                        html.H3("Search for materials by elements (eg. 'Ac,Cd,Ge')"),
+                        dmp.MaterialsInput(
+                            allowedInputTypes=["elements"],
+                            hidePeriodicTable=False,
+                            periodicTableMode="toggle",
+                            showSubmitButton=True,
+                            submitButtonText="Submit",
+                            type="elements",
+                            id="materials-input",
                         ),
                     ],
                     style={
-                        "width": "70%",
+                        "width": "100%",
                         "display": "inline-block",
                         "verticalAlign": "top",
                     },
                 ),
-                html.Div(
-                    [
-                        html.Button("Search", id="search-button", n_clicks=0),
-                    ],
-                    style={
-                        "width": "28%",
-                        "display": "inline-block",
-                        "paddingLeft": "2%",
-                        "verticalAlign": "top",
-                    },
-                ),
             ],
             style={"margin-bottom": "20px"},
         ),
@@ -118,13 +111,32 @@ layout = html.Div(
             ],
             style={"margin-top": "20px"},
         ),
-    ]
+    ],
+    style={
+        "margin-left": "10px",
+        "margin-right": "10px",
+    },
+)
+
+
+@app.callback(
+    Output("material-dropdown", "options"),
+    Output("material-dropdown", "value"),
+    Input("materials-input", "submitButtonClicks"),
+    Input("materials-input", "value"),
 )
+def on_submit_materials_input(n_clicks, query):
+    if n_clicks is None or not query:
+        return [], None
+    options = search_materials(query)
+    if not options:
+        return [], None
+    return options, options[0]["value"]
 
 
 # Function to search for materials
 def search_materials(query):
-    element_list = [el.strip() for el in query.split("-")]
+    element_list = [el.strip() for el in query.split(",")]
     isubset = lambda x: set(x).issubset(element_list)
     isintersection = lambda x: len(set(x).intersection(element_list)) > 0
     entries_df = train_df[
@@ -142,19 +154,19 @@ def search_materials(query):
     return options
 
 
-# Callback to update the material dropdown based on search
-@app.callback(
-    [Output("material-dropdown", "options"), Output("material-dropdown", "value")],
-    Input("search-button", "n_clicks"),
-    State("query-input", "value"),
-)
-def update_material_dropdown(n_clicks, query):
-    if n_clicks is None or not query:
-        return [], None
-    options = search_materials(query)
-    if not options:
-        return [], None
-    return options, options[0]["value"]
+# # Callback to update the material dropdown based on search
+# @app.callback(
+#     [Output("material-dropdown", "options"), Output("material-dropdown", "value")],
+#     Input("search-button", "n_clicks"),
+#     State("query-input", "value"),
+# )
+# def update_material_dropdown(n_clicks, query):
+#     if n_clicks is None or not query:
+#         return [], None
+#     options = search_materials(query)
+#     if not options:
+#         return [], None
+#     return options, options[0]["value"]
 
 
 # Callback to display the selected material

requirements.txt

@@ -8,3 +8,4 @@ plotly
 pandas
 dash-bootstrap-components
 datasets
+dash-mp-components