Update app.py

app.py

@@ -1,4 +1,3 @@
-
 import math
 from typing import Dict, List, Optional
 
@@ -8,6 +7,9 @@ import numpy as np
 import matplotlib.pyplot as plt
 from periodictable import elements
 
+# -----------------------------
+# Data
+# -----------------------------
 NUMERIC_PROPS = [
     ("mass", "Atomic mass (u)"),
     ("density", "Density (g/cm^3)"),
@@ -109,23 +111,33 @@ def build_elements_df() -> pd.DataFrame:
     return df
 
 DF = build_elements_df()
+
+# -----------------------------
+# Safe grid mapping (skip None period/group)
+# -----------------------------
 MAX_GROUP = 18
 MAX_PERIOD = 7
-
 GRID: List[List[Optional[int]]] = [[None for _ in range(MAX_GROUP)] for _ in range(MAX_PERIOD)]
+
 for _, row in DF.iterrows():
-    period, group, Z = int(row["period"]), row["group"], int(row["Z"])
-    if group is None:
+    period = row["period"]
+    group = row["group"]
+    z = int(row["Z"])
+    # Skip rows with missing period or group
+    if pd.isna(period) or group is None:
         continue
-    GRID[period-1][group-1] = Z
+    period = int(period)
+    GRID[period - 1][group - 1] = z
 
-LAN = [z for z in DF["Z"] if 57 <= z <= 71]
-ACT = [z for z in DF["Z"] if 89 <= z <= 103]
+LAN = [int(z) for z in DF["Z"] if 57 <= int(z) <= 71]
+ACT = [int(z) for z in DF["Z"] if 89 <= int(z) <= 103]
 
+# -----------------------------
+# Plotting helpers (Matplotlib)
+# -----------------------------
 def plot_trend(trend_df: pd.DataFrame, prop_key: str, Z: int, symbol: str):
     fig, ax = plt.subplots()
     ax.scatter(trend_df["Z"], trend_df[prop_key])
-    # highlight
     sel = trend_df.loc[trend_df["Z"] == Z, prop_key]
     if not sel.empty and not pd.isna(sel.values[0]):
         ax.scatter([Z], [sel.values[0]], s=80)
@@ -144,16 +156,15 @@ def plot_heatmap(property_key: str):
             z = GRID[r][c]
             if z is None:
                 continue
-            val = DF.loc[DF['Z'] == z, property_key].values[0]
+            val = DF.loc[DF["Z"] == z, property_key].values[0]
             if not pd.isna(val):
                 grid_vals[r, c] = float(val)
-
     fig, ax = plt.subplots()
     im = ax.imshow(grid_vals, origin="upper", aspect="auto")
     ax.set_xticks(range(MAX_GROUP))
-    ax.set_xticklabels([str(i) for i in range(1, MAX_GROUP+1)])
+    ax.set_xticklabels([str(i) for i in range(1, MAX_GROUP + 1)])
     ax.set_yticks(range(MAX_PERIOD))
-    ax.set_yticklabels([str(i) for i in range(1, MAX_PERIOD+1)])
+    ax.set_yticklabels([str(i) for i in range(1, MAX_PERIOD + 1)])
     ax.set_xlabel("Group")
     ax.set_ylabel("Period")
     ax.set_title(f"Periodic heatmap: {prop_label}")
@@ -161,6 +172,9 @@ def plot_heatmap(property_key: str):
     fig.tight_layout()
     return fig
 
+# -----------------------------
+# Callbacks
+# -----------------------------
 def element_info(z_or_symbol: str):
     try:
         if z_or_symbol.isdigit():
@@ -172,29 +186,33 @@ def element_info(z_or_symbol: str):
     except Exception:
         return f"Unknown element: {z_or_symbol}", None, None
 
-    row = DF.loc[DF['Z'] == Z].iloc[0].to_dict()
-    symbol = row['symbol']
+    row = DF.loc[DF["Z"] == Z].iloc[0].to_dict()
+    symbol = row["symbol"]
 
     facts = []
     facts.extend(CURATED_FACTS.get(symbol, []))
-    facts.append(GROUP_FACTS.get(row['category'], None))
+    facts.append(GROUP_FACTS.get(row["category"], None))
     facts = [f for f in facts if f]
 
     props_lines = [
         f"{row['name']} ({symbol}), Z = {Z}",
-        f"Period {int(row['period'])}, Group {row['group']}, Block {row['block']} | Category: {row['category'].replace('-', ' ').title()}",
+        f"Period {int(row['period']) if not pd.isna(row['period']) else '—'}, "
+        f"Group {row['group'] if row['group'] is not None else '—'}, "
+        f"Block {row['block']} | Category: {row['category'].replace('-', ' ').title()}",
         f"Atomic mass: {row['mass'] if row['mass'] else '—'} u",
         f"Density: {row['density'] if row['density'] else '—'} g/cm³",
         f"Electronegativity: {row['electronegativity'] if row['electronegativity'] else '—'} (Pauling)",
-        f"Melting point: {row['melting_point'] if row['melting_point'] else '—'} K | Boiling point: {row['boiling_point'] if row['boiling_point'] else '—'} K",
-        f"vdW radius: {row['vdw_radius'] if row['vdw_radius'] else '—'} pm | Covalent radius: {row['covalent_radius'] if row['covalent_radius'] else '—'} pm",
+        f"Melting point: {row['melting_point'] if row['melting_point'] else '—'} K | "
+        f"Boiling point: {row['boiling_point'] if row['boiling_point'] else '—'} K",
+        f"vdW radius: {row['vdw_radius'] if row['vdw_radius'] else '—'} pm | "
+        f"Covalent radius: {row['covalent_radius'] if row['covalent_radius'] else '—'} pm",
         f"Radioactive: {'Yes' if row['is_radioactive'] else 'No'}",
     ]
     info_text = "\n".join(props_lines)
     facts_text = "\n• ".join(["Interesting facts:"] + facts) if facts else "No fact on file—still cool though!"
 
-    prop_key = 'electronegativity' if not pd.isna(row['electronegativity']) else 'mass'
-    trend_df = DF[['Z', 'symbol', prop_key]].dropna()
+    prop_key = "electronegativity" if not pd.isna(row["electronegativity"]) else "mass"
+    trend_df = DF[["Z", "symbol", prop_key]].dropna()
     fig = plot_trend(trend_df, prop_key, Z, symbol)
 
     return info_text, facts_text, fig
@@ -203,20 +221,45 @@ def handle_button_click(z: int):
     return element_info(str(z))
 
 def search_element(query: str):
-    query = (query or '').strip()
+    query = (query or "").strip()
     if not query:
         return gr.update(), gr.update(), gr.update()
     return element_info(query)
 
+# -----------------------------
+# UI
+# -----------------------------
 with gr.Blocks(title="Interactive Periodic Table") as demo:
     gr.Markdown("# 🧪 Interactive Periodic Table\nClick an element or search by symbol/name/atomic number.")
 
     with gr.Row():
+        # Create the inspector FIRST so button clicks can target these components
+        with gr.Column(scale=1):
+            gr.Markdown("### Inspector")
+            search = gr.Textbox(label="Search (symbol/name/Z)", placeholder="e.g., C, Iron, 79")
+            info = gr.Textbox(label="Properties", lines=10, interactive=False)
+            facts = gr.Markdown("Select an element to see fun facts.")
+            trend = gr.Matplotlib()
+
+            search.submit(search_element, inputs=[search], outputs=[info, facts, trend])
+
+            gr.Markdown("### Trend heatmap")
+            prop = gr.Dropdown(choices=[k for k, _ in NUMERIC_PROPS], value="electronegativity", label="Property")
+            heat = gr.Matplotlib()
+            prop.change(lambda k: plot_heatmap(k), inputs=[prop], outputs=[heat])
+
+            # Initialize heatmap on load
+            demo.load(lambda: plot_heatmap("electronegativity"), outputs=[heat])
+
+        # Now build the grid of buttons
         with gr.Column(scale=2):
             gr.Markdown("### Main Table")
+            # Headers (groups 1-18)
             with gr.Row():
                 for g in range(1, 19):
                     gr.Markdown(f"**{g}**")
+
+            # Element grid
             for r in range(MAX_PERIOD):
                 with gr.Row():
                     for c in range(MAX_GROUP):
@@ -224,41 +267,26 @@ with gr.Blocks(title="Interactive Periodic Table") as demo:
                         if z is None:
                             gr.Button("", interactive=False)
                         else:
-                            sym = DF.loc[DF['Z'] == z, 'symbol'].values[0]
+                            sym = DF.loc[DF["Z"] == z, "symbol"].values[0]
                             btn = gr.Button(sym)
-                            btn.click(handle_button_click, inputs=[gr.Number(z, visible=False)], outputs=[
-                                gr.Textbox(interactive=False), gr.Markdown(), gr.Matplotlib()])
+                            btn.click(handle_button_click, inputs=[gr.Number(z, visible=False)],
+                                      outputs=[info, facts, trend])
 
             gr.Markdown("### f-block (lanthanides & actinides)")
             with gr.Row():
                 for z in LAN:
-                    sym = DF.loc[DF['Z'] == z, 'symbol'].values[0]
+                    sym = DF.loc[DF["Z"] == z, "symbol"].values[0]
                     btn = gr.Button(sym)
-                    btn.click(handle_button_click, inputs=[gr.Number(z, visible=False)], outputs=[
-                        gr.Textbox(interactive=False), gr.Markdown(), gr.Matplotlib()])
+                    btn.click(handle_button_click, inputs=[gr.Number(z, visible=False)],
+                              outputs=[info, facts, trend])
             with gr.Row():
                 for z in ACT:
-                    sym = DF.loc[DF['Z'] == z, 'symbol'].values[0]
+                    sym = DF.loc[DF["Z"] == z, "symbol"].values[0]
                     btn = gr.Button(sym)
-                    btn.click(handle_button_click, inputs=[gr.Number(z, visible=False)], outputs=[
-                        gr.Textbox(interactive=False), gr.Markdown(), gr.Matplotlib()])
-
-        with gr.Column(scale=1):
-            search = gr.Textbox(label="Search (symbol/name/Z)", placeholder="e.g., C, Iron, 79")
-            info = gr.Textbox(label="Properties", lines=10, interactive=False)
-            facts = gr.Markdown("Select an element to see fun facts.")
-            trend = gr.Matplotlib()
-
-            search.submit(search_element, inputs=[search], outputs=[info, facts, trend])
-
-            gr.Markdown("### Trend heatmap")
-            prop = gr.Dropdown(choices=[k for k, _ in NUMERIC_PROPS], value="electronegativity", label="Property")
-            heat = gr.Matplotlib()
-
-            def heatmap_callback(property_key):
-                return plot_heatmap(property_key)
-            prop.change(heatmap_callback, inputs=[prop], outputs=[heat])
-            heat.update(plot_heatmap("electronegativity"))
+                    btn.click(handle_button_click, inputs=[gr.Number(z, visible=False)],
+                              outputs=[info, facts, trend])
 
 if __name__ == "__main__":
     demo.launch()
+
+