Merge pull request #362 from materialsproject/fix-and-test-examples

Fix and test example apps

.pre-commit-config.yaml

@@ -11,13 +11,13 @@ exclude: ^(docs/.+|.*lock.*|jupyterlab-extension/.+|.*\.(svg|js|css))|_version.p
 
 repos:
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.0.277
+    rev: v0.0.292
     hooks:
       - id: ruff
         args: [--fix, --ignore, D]
 
   - repo: https://github.com/psf/black
-    rev: 23.3.0
+    rev: 23.9.1
     hooks:
       - id: black-jupyter
 
@@ -27,7 +27,7 @@ repos:
   #     - id: mypy
 
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.4.0
+    rev: v4.5.0
     hooks:
       - id: check-case-conflict
       - id: check-symlinks
@@ -37,10 +37,11 @@ repos:
       - id: trailing-whitespace
 
   - repo: https://github.com/codespell-project/codespell
-    rev: v2.2.5
+    rev: v2.2.6
     hooks:
       - id: codespell
         stages: [commit, commit-msg]
+        args: [--ignore-words-list, "nd,te,ois,dscribe"]
 
   - repo: https://github.com/kynan/nbstripout
     rev: 0.6.1

crystal_toolkit/apps/examples/bandstructure.py

@@ -32,13 +32,13 @@
 )
 
 # example layout to demonstrate capabilities of component
-my_layout = Container(
+layout = Container(
     [H1("Band Structure and Density of States Example"), bsdos_component.layout()]
 )
 
 # wrap your app.layout with crystal_toolkit_layout()
 # to ensure all necessary components are loaded into layout
-ctc.register_crystal_toolkit(app, layout=my_layout)
+ctc.register_crystal_toolkit(app, layout=layout)
 
 
 # run this app with "python path/to/this/file.py"

crystal_toolkit/apps/examples/basic_hello_structure.py

@@ -15,9 +15,9 @@
 structure_component = ctc.StructureMoleculeComponent(structure, id="hello_structure")
 
 # add the component's layout to our app's layout
-my_layout = html.Div([structure_component.layout()])
+layout = html.Div([structure_component.layout()])
 
 # as explained in "preamble" section in documentation
-ctc.register_crystal_toolkit(app=app, layout=my_layout)
+ctc.register_crystal_toolkit(app=app, layout=layout)
 if __name__ == "__main__":
     app.run(debug=True, port=8050)

crystal_toolkit/apps/examples/basic_hello_structure_interactive.py

@@ -28,9 +28,9 @@
 
 # now we have two entries in our app layout,
 # the structure component's layout and the button
-my_layout = html.Div([structure_component.layout(), my_button])
+layout = html.Div([structure_component.layout(), my_button])
 
-ctc.register_crystal_toolkit(app=app, layout=my_layout)
+ctc.register_crystal_toolkit(app=app, layout=layout)
 
 
 # for the interactivity, we use a standard Dash callback

crystal_toolkit/apps/examples/diffraction.py

@@ -4,27 +4,26 @@
 from pymatgen.core import Lattice, Structure
 
 import crystal_toolkit.components as ctc
-from crystal_toolkit.helpers.layouts import H1, H3, Container
+from crystal_toolkit.helpers.layouts import H1, H2, Container
 from crystal_toolkit.settings import SETTINGS
 
 app = dash.Dash(assets_folder=SETTINGS.ASSETS_PATH)
 
-
 structure = Structure(Lattice.cubic(4.2), ["Na", "K"], [[0, 0, 0], [0.5, 0.5, 0.5]])
 
 xrd_component = ctc.XRayDiffractionComponent(initial_structure=structure)
 
 # example layout to demonstrate capabilities of component
-my_layout = Container(
+layout = Container(
     [
         H1("XRDComponent Example"),
-        H3("Generated from Structure object"),
+        H2("Generated from Structure object", style={"fontSize": "1rem"}),
         xrd_component.layout(),
     ]
 )
 
 # as explained in "preamble" section in documentation
-ctc.register_crystal_toolkit(app=app, layout=my_layout)
+ctc.register_crystal_toolkit(app=app, layout=layout)
 
 # run this app with "python path/to/this/file.py"
 # in production, deploy behind gunicorn or similar

crystal_toolkit/apps/examples/diffraction_dynamic.py

@@ -15,10 +15,10 @@
 # example layout to demonstrate capabilities of component
 page_title = H1("XRDComponent Example (Structure Added After Loading)")
 load_btn = Button("Load XRD", id="load-xrd-button")
-my_layout = Container([page_title, xrd_component.layout(), load_btn])
+layout = Container([page_title, xrd_component.layout(), load_btn])
 
 # as explained in "preamble" section in documentation
-ctc.register_crystal_toolkit(app=app, layout=my_layout)
+ctc.register_crystal_toolkit(app=app, layout=layout)
 
 
 @app.callback(Output(xrd_component.id(), "data"), Input(load_btn, "n_clicks"))

crystal_toolkit/apps/examples/diffraction_empty.py

@@ -11,12 +11,12 @@
 xrd_component = ctc.XRayDiffractionComponent()
 
 # example layout to demonstrate capabilities of component
-my_layout = Container(
+layout = Container(
     [H1("XRDComponent Example (Empty, No Structure Defined)"), xrd_component.layout()]
 )
 
 # as explained in "preamble" section in documentation
-ctc.register_crystal_toolkit(app=app, layout=my_layout)
+ctc.register_crystal_toolkit(app=app, layout=layout)
 
 # run this app with "python path/to/this/file.py"
 # in production, deploy behind gunicorn or similar

crystal_toolkit/apps/examples/diffraction_tem.py

@@ -30,7 +30,7 @@
 tem_component = ctc.TEMDiffractionComponent(initial_structure=structure)
 
 # example layout to demonstrate capabilities of component
-my_layout = Container(
+layout = Container(
     [
         H1("TEMDiffractionComponent Example"),
         H3("Generated from Structure object"),
@@ -39,7 +39,7 @@
 )
 
 # as explained in "preamble" section in documentation
-ctc.register_crystal_toolkit(app=app, layout=my_layout)
+ctc.register_crystal_toolkit(app=app, layout=layout)
 
 # run this app with "python path/to/this/file.py"
 # in production, deploy behind gunicorn or similar

crystal_toolkit/apps/examples/fermi_surface.py

@@ -25,11 +25,11 @@
 fs_component = ctc.FermiSurfaceComponent(fermi_surface, id="fermi_surface")
 
 # example layout to demonstrate capabilities of component
-my_layout = Container([H1("Fermi Surface Example"), fs_component.layout()])
+layout = Container([H1("Fermi Surface Example"), fs_component.layout()])
 
 # wrap your app.layout with crystal_toolkit_layout()
 # to ensure all necessary components are loaded into layout
-ctc.register_crystal_toolkit(app, layout=my_layout)
+ctc.register_crystal_toolkit(app, layout=layout)
 
 # run this app with "python path/to/this/file.py"
 # in production, deploy behind gunicorn or similar

crystal_toolkit/apps/examples/kwarg_inputs.py

@@ -37,7 +37,7 @@
 )
 
 # create your layout
-my_layout = ctl.Section(
+layout = ctl.Section(
     [
         ctl.H1("Example of input controls"),
         dcc.Markdown(
@@ -86,7 +86,7 @@ def add_inputs(n_clicks):
 
 
 # tell Crystal Toolkit about the app and layout we want to display
-ctc.register_crystal_toolkit(app=app, layout=my_layout, cache=None)
+ctc.register_crystal_toolkit(app=app, layout=layout, cache=None)
 
 # run this app with "python path/to/this/file.py"
 # in production, deploy behind gunicorn or similar

crystal_toolkit/apps/examples/phase_diagram.py

@@ -42,7 +42,7 @@
 
 
 # example layout to demonstrate capabilities of component
-my_layout = html.Div(
+layout = html.Div(
     [
         html.H1("PhaseDiagramComponent Example"),
         html.H2("Standard Layout (1 Element)"),
@@ -57,7 +57,7 @@
 
 # wrap your app.layout with crystal_toolkit_layout()
 # to ensure all necessary components are loaded into layout
-app.layout = ctc.crystal_toolkit_layout(my_layout)
+app.layout = ctc.crystal_toolkit_layout(layout)
 
 
 # run this app with "python path/to/this/file.py"

crystal_toolkit/apps/examples/pourbaix.py

@@ -22,7 +22,7 @@
 pourbaix_component = ctc.PourbaixDiagramComponent(default_data=pourbaix_entries)
 
 # example layout to demonstrate capabilities of component
-my_layout = html.Div(
+layout = html.Div(
     [
         html.H1("PourbaixDiagramComponent Example"),
         html.Button("Get Pourbaix Diagram", id="get-pourbaix"),
@@ -32,7 +32,7 @@
     style=dict(maxWidth="90vw", margin="2em auto"),
 )
 
-ctc.register_crystal_toolkit(app=app, layout=my_layout)
+ctc.register_crystal_toolkit(app=app, layout=layout)
 
 # run this app with "python path/to/this/file.py"
 # in production, deploy behind gunicorn or similar

crystal_toolkit/apps/examples/relaxation_trajectory.py

@@ -1,3 +1,5 @@
+from __future__ import annotations
+
 import sys
 
 import numpy as np

crystal_toolkit/apps/examples/structure.py

@@ -21,7 +21,7 @@
 structure_component = ctc.StructureMoleculeComponent(structure, id="my_structure")
 
 # example layout to demonstrate capabilities of component
-my_layout = html.Div(
+layout = html.Div(
     [
         html.H1("StructureMoleculeComponent Example"),
         html.H2("Standard Layout"),
@@ -35,7 +35,7 @@
 )
 
 # tell crystal toolkit about your app and layout
-ctc.register_crystal_toolkit(app, layout=my_layout)
+ctc.register_crystal_toolkit(app, layout=layout)
 
 # run this app with "python path/to/this/file.py"
 # in production, deploy behind gunicorn or similar

crystal_toolkit/apps/examples/structure_magnetic.py

@@ -22,7 +22,7 @@
 structure_component = ctc.StructureMoleculeComponent(structure, id="struct")
 
 # example layout to demonstrate capabilities of component
-my_layout = html.Div(
+layout = html.Div(
     [
         html.H1("StructureMoleculeComponent Example"),
         html.H2("Standard Layout"),
@@ -40,7 +40,7 @@
 )
 
 # tell crystal toolkit about your app and layout
-ctc.register_crystal_toolkit(app, layout=my_layout)
+ctc.register_crystal_toolkit(app, layout=layout)
 
 # run this app with "python path/to/this/file.py"
 # in production, deploy behind gunicorn or similar

crystal_toolkit/apps/examples/transformations.py

@@ -31,7 +31,7 @@
 )
 
 # example layout to demonstrate capabilities of component
-my_layout = html.Div(
+layout = html.Div(
     [
         html.H1("TransformationComponent Example"),
         html.H2("Standard Layout"),
@@ -46,7 +46,7 @@
 )
 
 # tell crystal toolkit about your app and layout
-ctc.register_crystal_toolkit(app, layout=my_layout)
+ctc.register_crystal_toolkit(app, layout=layout)
 
 # this is here for to see the JSON representation of
 # the transformations when running the example app,

crystal_toolkit/apps/examples/transformations_minimal.py

@@ -36,7 +36,7 @@
 )
 
 # example layout to demonstrate capabilities of component
-my_layout = html.Div(
+layout = html.Div(
     [
         html.H1("TransformationComponent Example"),
         html.H2("Standard Layout"),
@@ -49,7 +49,7 @@
 )
 
 # tell crystal toolkit about your app and layout
-ctc.register_crystal_toolkit(app, layout=my_layout)
+ctc.register_crystal_toolkit(app, layout=layout)
 
 
 @app.callback(

crystal_toolkit/apps/examples/write_structure_screenshot_to_file.py

@@ -26,7 +26,7 @@
     scene_settings={"zoomToFit2D": True},
 )
 
-my_layout = html.Div(
+layout = html.Div(
     [structure_component.layout(), dcc.Location(id="url"), html.Div(id="dummy-output")]
 )
 
@@ -73,6 +73,6 @@ def save_image(image_data_timestamp, url, image_data):
             file.write(response.file.read())
 
 
-ctc.register_crystal_toolkit(app=app, layout=my_layout)
+ctc.register_crystal_toolkit(app=app, layout=layout)
 if __name__ == "__main__":
     app.run(debug=True, port=8050)

crystal_toolkit/apps/main.py

@@ -55,9 +55,7 @@
     }
 ]
 
-print("SETTINGS")
-for setting, value in SETTINGS:
-    print(f"{setting}: {value}")
+SETTINGS.print()
 
 if not SETTINGS.ASSETS_PATH:
     warnings.warn(

crystal_toolkit/apps/tests/conftest.py

@@ -0,0 +1,15 @@
+import pytest
+from playwright.sync_api import Page
+
+
+@pytest.fixture(autouse=True)
+def _assert_no_console_errors(page: Page):
+    logs = []
+    page.on("console", lambda msg: logs.append(msg))
+
+    page.goto("http://127.0.0.1:8050")
+
+    yield
+
+    errors = [msg.text for msg in logs if msg.type == "error"]
+    assert len(errors) == 0, f"Unexpected browser {errors=}"

crystal_toolkit/apps/tests/test_pourbaix.py

@@ -0,0 +1,22 @@
+import threading
+
+from playwright.sync_api import Page
+
+from crystal_toolkit.apps.examples.pourbaix import app
+
+thread = threading.Thread(target=app.run)
+thread.start()
+
+
+def test_pourbaix(page: Page):
+    # select 1st structure
+    page.locator(".react-select__input-container").click()
+    page.get_by_text("Fe₃H (mp-1184287-GGA)", exact=True).click()
+
+    # click toggle switches
+    page.locator("div.mpc-switch").nth(0).click()  # click on "Filter Solids"
+    page.locator("div.mpc-switch").nth(1).click()  # click on "Show Heatmap"
+
+    # select 2nd structure
+    page.locator(".react-select__input-container").click()
+    page.get_by_text("CoH (mp-1206874-GGA)", exact=True).click()