Merge pull request #266 from janosh/small-example-app-fixes

Small example app fixes

Author: janosh

.pre-commit-config.yaml

@@ -1,5 +1,5 @@
 repos:
   - repo: https://github.com/ambv/black
-    rev: stable
+    rev: 22.6.0
     hooks:
     - id: black

crystal_toolkit/apps/examples/basic_hello_structure.py

@@ -1,16 +1,15 @@
 # as explained in "preamble" section in documentation
 import dash
 from dash import html
-from dash import dcc
+from pymatgen.core.lattice import Lattice
+from pymatgen.core.structure import Structure
+
 import crystal_toolkit.components as ctc
 
 # app = dash.Dash(external_stylesheets=['https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css'])
 app = dash.Dash()
 
 # create our crystal structure using pymatgen
-from pymatgen.core.structure import Structure
-from pymatgen.core.lattice import Lattice
-
 structure = Structure(Lattice.cubic(4.2), ["Na", "K"], [[0, 0, 0], [0.5, 0.5, 0.5]])
 
 # create the Crystal Toolkit component

crystal_toolkit/apps/examples/basic_hello_structure_interactive.py

@@ -1,21 +1,21 @@
 # as above
 import dash
 from dash import html
-from dash import dcc
-import crystal_toolkit.components as ctc
 
 # standard Dash imports for callbacks (interactivity)
-from dash.dependencies import Input, Output, State
-from dash.exceptions import PreventUpdate
-
-from pymatgen.core.structure import Structure
+from dash.dependencies import Input, Output
 from pymatgen.core.lattice import Lattice
+from pymatgen.core.structure import Structure
 
-app = dash.Dash()
+import crystal_toolkit.components as ctc
+
+app = dash.Dash(
+    prevent_initial_callbacks=True,  # don't run callbacks on page load
+)
 
 # now we give a list of structures to pick from
 structures = [
-    Structure(Lattice.cubic(4), ["Na", "Cl"], [[0, 0, 0], [0.5, 0.5, 0.5]]),
+    Structure(Lattice.hexagonal(5, 3), ["Na", "Cl"], [[0, 0, 0], [0.5, 0.5, 0.5]]),
     Structure(Lattice.cubic(5), ["K", "Cl"], [[0, 0, 0], [0.5, 0.5, 0.5]]),
 ]
 
@@ -31,16 +31,13 @@
 
 ctc.register_crystal_toolkit(app=app, layout=my_layout)
 
+
 # for the interactivity, we use a standard Dash callback
 @app.callback(
     Output(structure_component.id(), "data"),
     [Input("change_structure_button", "n_clicks")],
 )
 def update_structure(n_clicks):
-    # on load, n_clicks will be None, and no update is required
-    # after clicking on the button, n_clicks will be an int and incremented
-    if not n_clicks:
-        raise PreventUpdate
     return structures[n_clicks % 2]
 
 

crystal_toolkit/apps/examples/diffraction_dynamic.py

@@ -1,40 +1,32 @@
 # standard Dash imports
 import dash
-from dash import html
-from dash import dcc
 from dash.dependencies import Input, Output
 
+# create our crystal structure using pymatgen
+from pymatgen.core.lattice import Lattice
+from pymatgen.core.structure import Structure
+
 # standard Crystal Toolkit import
 import crystal_toolkit.components as ctc
+from crystal_toolkit.helpers.layouts import H1, Button, Container
 from crystal_toolkit.settings import SETTINGS
-from crystal_toolkit.helpers.layouts import H1, H2, Container, Button
 
 # create Dash app as normal
 app = dash.Dash(assets_folder=SETTINGS.ASSETS_PATH)
 
-# create our crystal structure using pymatgen
-from pymatgen.core.structure import Structure
-from pymatgen.core.lattice import Lattice
-
-xrd_component = ctc.XRayDiffractionComponent()
+xrd_component = ctc.XRayDiffractionComponent(id="xrd-diffraction")
 
 # example layout to demonstrate capabilities of component
-my_layout = Container(
-    [
-        H1("XRDComponent Example (Structure Added After Loading)"),
-        xrd_component.layout(),
-        Button("Load XRD", id="load-xrd-button"),
-    ]
-)
+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])
 
 # as explained in "preamble" section in documentation
 ctc.register_crystal_toolkit(app=app, layout=my_layout)
 
 
-@app.callback(
-    Output(xrd_component.id(), "data"), [Input("load-xrd-button", "n_clicks")]
-)
-def load_structure(n_clicks):
+@app.callback(Output(xrd_component.id(), "data"), Input(load_btn.id, "n_clicks"))
+def load_structure(n_clicks: int) -> Structure:
     structure = Structure(Lattice.cubic(4.2), ["Na", "K"], [[0, 0, 0], [0.5, 0.5, 0.5]])
     return structure
 

crystal_toolkit/apps/examples/structure.py

@@ -1,17 +1,17 @@
 # standard Dash imports
 import dash
-from dash import dcc
 from dash import html
 
 # import for this example
-from pymatgen.core.structure import Structure
 from pymatgen.core.lattice import Lattice
+from pymatgen.core.structure import Structure
 
 # standard Crystal Toolkit import
 import crystal_toolkit.components as ctc
+from crystal_toolkit.settings import SETTINGS
 
 # create Dash app as normal
-app = dash.Dash()
+app = dash.Dash(assets_folder=SETTINGS.ASSETS_PATH)
 
 # create the Structure object
 structure = Structure(

crystal_toolkit/apps/main.py

@@ -1,6 +1,6 @@
 import logging
 import os
-from ast import literal_eval
+import warnings
 from random import choice
 from time import time
 from typing import Optional
@@ -9,17 +9,28 @@
 
 import dash
 import sentry_sdk
+from dash import dcc, html
 from dash.dependencies import Input, Output, State
 from dash.exceptions import PreventUpdate
 from flask_caching import Cache
 from monty.serialization import loadfn
 from pymatgen.core import __version__ as pmg_version
-from pymatgen.ext.matproj import MPRester
+from pymatgen.ext.matproj import MPRester, MPRestError
 
 import crystal_toolkit.components as ctc
 from crystal_toolkit import __file__ as module_path
 from crystal_toolkit.core.mpcomponent import MPComponent
-from crystal_toolkit.helpers.layouts import *
+from crystal_toolkit.helpers.layouts import (
+    Box,
+    Column,
+    Columns,
+    Container,
+    Loading,
+    MessageBody,
+    MessageContainer,
+    MessageHeader,
+    Reveal,
+)
 from crystal_toolkit.settings import SETTINGS
 
 # choose a default structure on load
@@ -196,17 +207,17 @@
     mp_panels = []
 
     mp_section = (
-        H3("Materials Project"),
+        html.H3("Materials Project"),
         html.Div([panel.panel_layout() for panel in mp_panels], id="mp_panels"),
     )
 
 
 body_layout = [
     html.Br(),
-    H3("Transform"),
+    html.H3("Transform"),
     html.Div([transformation_component.layout()]),
     html.Br(),
-    H3("Analyze"),
+    html.H3("Analyze"),
     html.Div([panel.panel_layout() for panel in panels], id="panels"),
     # html.Br(),
     # *mp_section,
@@ -270,7 +281,7 @@
 ################################################################################
 
 
-footer = Footer(
+footer = html.Footer(
     html.Div(
         [
             dcc.Markdown(
@@ -317,7 +328,7 @@
     [
         dcc.Location(id="url", refresh=False),
         banner,
-        Section(
+        html.Section(
             [
                 Columns(
                     [
@@ -398,7 +409,7 @@
                 Columns([Column(body_layout)]),
             ]
         ),
-        Section(footer),
+        html.Section(footer),
     ]
 )
 
@@ -524,7 +535,7 @@ def master_update_structure(search_mpid: Optional[str], upload_data: Optional[st
             try:
                 struct = mpr.get_task_data(search_mpid, "structure")[0]["structure"]
                 print("Struct from task.")
-            except:
+            except MPRestError:
                 struct = mpr.get_structure_by_material_id(search_mpid)
                 print("Struct from material.")
     else:

crystal_toolkit/components/__init__.py

@@ -1,42 +1,28 @@
-from crystal_toolkit.core.mpcomponent import MPComponent
-
-register_app = MPComponent.register_app
-register_cache = MPComponent.register_cache
-register_crystal_toolkit = MPComponent.register_crystal_toolkit
-crystal_toolkit_layout = MPComponent.crystal_toolkit_layout
-
-from crystal_toolkit.components.search import SearchComponent
-from crystal_toolkit.components.structure import StructureMoleculeComponent
-
-from crystal_toolkit.components.robocrys import RobocrysComponent
-
-from crystal_toolkit.components.diffraction import (
-    XRayDiffractionComponent,
-    TEMDiffractionComponent,
-)
-
-# from crystal_toolkit.components.xas import XASComponent, XASPanelComponent
-
-# from crystal_toolkit.components.submit_snl import SubmitSNLPanel
-from crystal_toolkit.components.symmetry import SymmetryPanel
-from crystal_toolkit.components.upload import StructureMoleculeUploadComponent
-
 from crystal_toolkit.components.bandstructure import (
     BandstructureAndDosComponent,
     BandstructureAndDosPanelComponent,
 )
+from crystal_toolkit.components.diffraction import (
+    TEMDiffractionComponent,
+    XRayDiffractionComponent,
+)
+from crystal_toolkit.components.localenv import LocalEnvironmentPanel
 
 # from crystal_toolkit.components.phase_diagram import (
 #     PhaseDiagramComponent,
 #     PhaseDiagramPanelComponent,
 # )
 from crystal_toolkit.components.pourbaix import PourbaixDiagramComponent
-from crystal_toolkit.components.localenv import LocalEnvironmentPanel
+from crystal_toolkit.components.robocrys import RobocrysComponent
+from crystal_toolkit.components.search import SearchComponent
+from crystal_toolkit.components.structure import StructureMoleculeComponent
 
-from crystal_toolkit.components.transformations.core import AllTransformationsComponent
+# from crystal_toolkit.components.submit_snl import SubmitSNLPanel
+from crystal_toolkit.components.symmetry import SymmetryPanel
 from crystal_toolkit.components.transformations.autooxistatedecoration import (
     AutoOxiStateDecorationTransformationComponent,
 )
+from crystal_toolkit.components.transformations.core import AllTransformationsComponent
 
 # from crystal_toolkit.components.transformations.cubic import (
 #     CubicSupercellTransformationComponent,
@@ -51,7 +37,18 @@
 from crystal_toolkit.components.transformations.supercell import (
     SupercellTransformationComponent,
 )
+from crystal_toolkit.components.upload import StructureMoleculeUploadComponent
+from crystal_toolkit.core.mpcomponent import MPComponent
+
+# from crystal_toolkit.components.xas import XASComponent, XASPanelComponent
+
 
 # from crystal_toolkit.components.transformations.rattle import (
 #     MonteCarloRattleTransformationComponent,
 # )
+
+
+register_app = MPComponent.register_app
+register_cache = MPComponent.register_cache
+register_crystal_toolkit = MPComponent.register_crystal_toolkit
+crystal_toolkit_layout = MPComponent.crystal_toolkit_layout

crystal_toolkit/components/phase_diagram.py

@@ -1,15 +1,12 @@
-from typing import Optional
-
 import dash
-from dash import dcc
-from dash import html
 import dash_table
 import plotly.graph_objs as go
+from dash import dcc, html
 from dash.dependencies import Input, Output, State
 from dash.exceptions import PreventUpdate
-from pymatgen.ext.matproj import MPRester
 from pymatgen.analysis.phase_diagram import PDEntry, PDPlotter, PhaseDiagram
 from pymatgen.core.composition import Composition
+from pymatgen.ext.matproj import MPRester
 
 from crystal_toolkit.core.mpcomponent import MPComponent
 from crystal_toolkit.core.panelcomponent import PanelComponent
@@ -758,7 +755,7 @@ def title(self):
     def description(self):
         return (
             "Display the compositional phase diagram for the"
-            " chemical system containing this structure (between 2–4 species)."
+            " chemical system containing this structure (between 2-4 species)."
         )
 
     def update_contents(self, new_store_contents, *args):