Correct layout and functionalities

[minhsueh]

Original error:
The concentration/composition inputs appear after heatmap entries are provided, but they should appear immediately after Pourbaix entries are entered.

Root cause:
Several callbacks have interdependent triggers, and their execution order isn’t controlled correctly.

TODO:

• Display concentration and composition inputs after Pourbaix entries are provided.
• Remove annotations from the heatmap, as suggested by Kristin.
• Format composition input and invalid input windows.
• Adjust concentration range limits from 1e-8 to 5, take care of invalid input.
• Verify that changing concentration affects the calculated energy. Preliminary results show a change, but it appears too small to notice.
• Implement a concentration input for support heatmap generation (or at least display what concentration is being used)
• Correct heatmap entries when filtering solids
• Include instructions on how to zoom in and out for the Pourbaix diagram (as suggested by Mackinzie).
• Error handling if composition is invalid

Takeaway:

1. Trigger discipline:
   Avoid using MPComponent.get_all_kwargs_id() as an Input in multiple callbacks—typing or minor changes in any child will fire callbacks unexpectedly. Use it only for a single, dedicated callback when sub-components are generated dynamically, and you can’t explicitly list triggers. Otherwise, prefer explicit Inputs (or dict/pattern IDs) and use State for values that shouldn’t trigger. (mpc limits the ID format—so for this repo, keeping MPComponent.get_all_kwargs_id())
2. Static shell, dynamic children:
   Don’t create your main components inside callbacks. Put stable containers in the initial layout and add dynamic sub-components to their children. This avoids common errors like “component id not found” and “duplicate id.”

[minhsueh]

The previous design for adjusting composition was counterintuitive and failed to render properly on the web due to incorrect callback references.

Before:

After:

[minhsueh]

After resetting the axes (e.g., zooming in/out), the updated axes may not match the original ones.

This behavior appears to be a long-standing issue in Dash.

This might also occur in other components we have.

Reference:
https://community.plotly.com/t/dash-reset-axes-range-not-updating-if-ranges-specified-in-layout/25839/3

Fix:
Intentionally update the graph by wrapping it in an html.Div instead of directly modifying go.Figure or dcc.Graph.