Reverse pourbaix component

crystal_toolkit/apps/examples/reverse_pourbaix_example.py

@@ -0,0 +1,49 @@
+"""Example app for the Reverse Pourbaix Diagram Component.
+
+Renders the heatmap statically using the component's `get_heatmap_figure`
+staticmethod. No interactivity. See the Materials Project web integration.
+"""
+
+from __future__ import annotations
+
+import dash
+import pyarrow.parquet as pq
+from dash import dcc, html
+
+import crystal_toolkit.components as ctc
+from crystal_toolkit.components.reverse_pourbaix import ReversePourbaixDiagramComponent
+from crystal_toolkit.settings import SETTINGS
+
+app = dash.Dash(assets_folder=SETTINGS.ASSETS_PATH)
+
+# Load pre-computed heatmap data from the versioned, hive-partitioned S3
+# dataset; filter to one version so multiple versions in the bucket don't
+# get mixed together.
+DATA_PATH = "s3://materialsproject-build/collections/reverse-pourbaix-heatmap/"
+DATA_FILTERS = [("version", "=", "2026-04-13")]
+
+heatmap_df = pq.read_table(DATA_PATH, filters=DATA_FILTERS).to_pandas()
+heatmap_data = ReversePourbaixDiagramComponent.load_heatmap_data(heatmap_df)
+
+# Build the heatmap figure directly — no component, no callbacks.
+figure = ReversePourbaixDiagramComponent.get_heatmap_figure(heatmap_data)
+
+layout = html.Div(
+    [
+        html.H1("Reverse Pourbaix Diagram"),
+        html.P(
+            "Number of thermodynamically stable materials at each pH/potential "
+            "combination (decomposition energy < 0.2 eV/atom)."
+        ),
+        dcc.Graph(
+            figure=figure,
+            config={"displayModeBar": False, "displaylogo": False},
+        ),
+    ],
+    style=dict(maxWidth="900px", margin="2em auto"),
+)
+
+ctc.register_crystal_toolkit(app=app, layout=layout)
+
+if __name__ == "__main__":
+    app.run(debug=True, port=8050)

crystal_toolkit/components/__init__.py

@@ -18,6 +18,7 @@
     PhononBandstructureAndDosPanelComponent,
 )
 from crystal_toolkit.components.pourbaix import PourbaixDiagramComponent
+from crystal_toolkit.components.reverse_pourbaix import ReversePourbaixDiagramComponent
 from crystal_toolkit.components.search import SearchComponent
 from crystal_toolkit.components.structure import StructureMoleculeComponent
 

crystal_toolkit/components/pourbaix.py

@@ -688,10 +688,15 @@ def update_heatmap_choices(entries, mat_detials, filter_solids):
             Output(self.id("comp-conc-btn"), "children"),
             Output(self.id("comp-conc-btn"), "style"),
             Input(self.id(), "data"),
+            # Optional: prefilled ratio from a parent app linking via
+            # `links={"prefill-ratio": parent_app.id("prefill-ratio")}`.
+            # If not linked, falls back to equal ratios.
+            State(self.id("prefill-ratio"), "data"),
             prevent_initial_call=True,
         )
         def update_element_specific_sliders(
             entries,
+            prefill_ratio,
         ):
             """
             When pourbaix entries input, add concentration and composition options
@@ -711,7 +716,7 @@ def update_element_specific_sliders(
 
             conc_inputs = []
 
-            for element in sorted(elements):
+            for element in sorted(elements, key=lambda e: e.symbol):
                 conc_input = PourbaixDiagramComponent.create_centered_object(
                     self.get_numerical_input(
                         f"conc-{element}",
@@ -760,10 +765,20 @@ def update_element_specific_sliders(
                 }
 
             # elements store
-            elements = [element.symbol for element in elements]
-
-            # default_comp
-            default_comp = ":".join(["1" for _ in elements])
+            # Sort alphabetically for deterministic ordering across page loads.
+            # This order is the contract between the composition title display,
+            # the comp-text positional parsing in make_figure, and any URL-based
+            # ratio prefill from the reverse-Pourbaix app.
+            elements = sorted(element.symbol for element in elements)
+
+            # default_comp — use prefilled ratio from URL if supplied and length
+            # matches the resolved element list, otherwise fall back to all-equal.
+            if prefill_ratio and len(prefill_ratio) == len(elements):
+                default_comp = ":".join(
+                    str(int(r)) if r == int(r) else str(r) for r in prefill_ratio
+                )
+            else:
+                default_comp = ":".join(["1" for _ in elements])
 
             # composition title
             title = "💡 Composition of " + ":".join(elements)