tweak structure and pourbaix example css

Author: janosh

crystal_toolkit/apps/examples/pourbaix.py

@@ -26,12 +26,13 @@
         html.Button("Get Pourbaix Diagram", id="get-pourbaix"),
         pourbaix_component.layout(),
         html.Div(id="pourbaix-output"),
-    ]
+    ],
+    style=dict(maxWidth="90vw", margin="2em auto"),
 )
 
 ctc.register_crystal_toolkit(app=app, layout=my_layout)
 
-# allow app to be run using "python structure.py"
+# allow app to be run using "python pourbaix.py"
 # in production, deploy behind gunicorn or similar
 # see Dash documentation for more information
 if __name__ == "__main__":

crystal_toolkit/apps/examples/structure.py

@@ -24,10 +24,13 @@
     [
         html.H1("StructureMoleculeComponent Example"),
         html.H2("Standard Layout"),
-        structure_component.layout(size="400px"),
+        structure_component.layout(),
         html.H2("Optional Title Layout"),
         structure_component.title_layout(),
-    ]
+    ],
+    style=dict(
+        margin="2em auto", display="grid", placeContent="center", placeItems="center"
+    ),
 )
 
 # tell crystal toolkit about your app and layout

crystal_toolkit/apps/examples/write_structure_screenshot_to_file.py

@@ -7,6 +7,7 @@
 import dash
 from dash import dcc, html
 from dash.dependencies import Input, Output, State
+from pymatgen.ext.matproj import MPRester
 from pymatgen.symmetry.analyzer import SpacegroupAnalyzer
 
 import crystal_toolkit.components as ctc
@@ -48,7 +49,13 @@ def trigger_image_request(data):
 
 @app.callback(Output(structure_component.id(), "data"), [Input("url", "pathname")])
 def trigger_new_data(url):
-    return get_structure_for_mpid(url[1:])
+
+    mp_id = url[1:]
+    with MPRester() as mpr:
+        structure = mpr.get_structure_by_material_id(mp_id)
+
+    structure = SpacegroupAnalyzer(structure).get_conventional_standard_structure()
+    return structure
 
 
 @app.callback(