Feature/SOF-7728 Update: add visualization with Prove

[VsevolodX]

Summary by CodeRabbit

• New Features

  • Render Prove-style property results directly in notebooks with optional configuration.
  • Per-item visualizations now support dynamic CSS injection and extra configuration for flexible display.

• Refactor

  • Replaced specialized wave-only rendering with a generalized viewer infrastructure for consistent visuals across types.
  • Updated material workflows to use the new unified viewer path for Wave visuals.

[coderabbitai]

📝 Walkthrough

Walkthrough

Introduces a generalized viewer infrastructure in utils/visualize.py (new get_viewer_html / get_viewer_js), replaces wave-specific helpers with get_wave_viewer, adds render_prove, and updates a notebook to use render_prove for band-gap output. Deprecated wave helpers removed. (≤50 words)

Changes

Cohort / File(s)	Summary
Viewer core & wave refactor utils/visualize.py	Adds get_viewer_html, get_viewer_js (optional extra_config_json, css_url), adds get_wave_viewer, render_prove; updates render_wave and render_wave_grid to use the new helpers; removes default_div_id, get_wave_html, get_wave_js.
Notebook: band gap workflow other/materials_designer/workflows/band_gap.ipynb	Replaces printed band-gap values with construction of a Prove-like property JSON and calls render_prove (import added). Minor kernelspec metadata update.

Sequence Diagram(s)

(Skipped — changes are primarily refactor + a notebook update; no multi-component control flow requiring a sequence diagram.)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Feature/sof-7728-1 update: optimize wave + prove #268 — appears to make the same replacements in utils/visualize.py (get_wave_html/get_wave_js → generalized viewer helpers) and adds render_prove.

Suggested reviewers

• timurbazhirov

Poem

🐰 I hopped through code with nimble feet,

New viewers stitched — both neat and sweet.
Waves and Prove now share one tune,
I nibble bugs beneath the moon.
Hooray — the render blooms in June! 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 57.14% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding visualization capabilities with Prove through new viewer infrastructure and render_prove function.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/SOF-7728

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[review-notebook-app]

Check out this pull request on 

See visual diffs & provide feedback on Jupyter Notebooks.

---

Powered by ReviewNB

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@utils/visualize.py`:
- Around line 403-409: The code currently treats empty containers as falsy so
extra_config passed as {} or [] becomes the string "undefined"; change the
truthiness check to an explicit None check so only None maps to "undefined". In
visualize.py locate the block that sets extra_config_json (referencing the
extra_config variable and the extra_config_json assignment) and replace the
conditional expression that uses truthiness with a check like "if extra_config
is not None" so that empty dicts/lists serialize to their JSON ("{}"/"[]") while
None remains "undefined".

🧹 Nitpick comments (1)

utils/visualize.py (1)

190-230: CSS may not be loaded before the render function executes.

The css_loader block (inserting the <link> tag) is placed after the async IIFE that awaits the bundle and calls the render function. While the <link> insertion is synchronous, the browser fetches the stylesheet asynchronously. If the bundle resolves from cache before the stylesheet arrives, the viewer could briefly render unstyled.

Consider moving the CSS insertion before the async IIFE so the browser starts fetching the stylesheet earlier:

Proposed fix

     return f"""
+    {css_loader}
     const {data_var_name}={data_json};
     const container = document.getElementById('{div_id}');
     (async function() {{
         await import('{bundle_url}');
         window.{render_function}({data_var_name}, container{extra_config_arg});
     }})();
-    {css_loader}
     """

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

extra_config={} silently becomes JS undefined due to falsy check.

bool({}) is False in Python, so passing an explicit empty dict (or empty list) to extra_config will serialize as "undefined" instead of "{}". If a caller ever passes extra_config={} intentionally, this would be surprising.

Proposed fix — use `is not None` instead of truthiness

-    extra_config_json = json.dumps(extra_config) if extra_config else "undefined"
+    extra_config_json = json.dumps(extra_config) if extra_config is not None else "undefined"

🤖 Prompt for AI Agents

In `@utils/visualize.py` around lines 403 - 409, The code currently treats empty
containers as falsy so extra_config passed as {} or [] becomes the string
"undefined"; change the truthiness check to an explicit None check so only None
maps to "undefined". In visualize.py locate the block that sets
extra_config_json (referencing the extra_config variable and the
extra_config_json assignment) and replace the conditional expression that uses
truthiness with a check like "if extra_config is not None" so that empty
dicts/lists serialize to their JSON ("{}"/"[]") while None remains "undefined".