Skip to content

Update subtitle rendering in notebook Analysis Cards (#5112)#5112

Open
shrutipatel31 wants to merge 1 commit intofacebook:mainfrom
shrutipatel31:export-D98690381
Open

Update subtitle rendering in notebook Analysis Cards (#5112)#5112
shrutipatel31 wants to merge 1 commit intofacebook:mainfrom
shrutipatel31:export-D98690381

Conversation

@shrutipatel31
Copy link
Copy Markdown
Contributor

@shrutipatel31 shrutipatel31 commented Mar 30, 2026

Summary:

Matches the web UI change from D97406631 for notebook (Jupyter/Bento) rendering of Ax analysis cards.

Before: Subtitles were hidden behind a clickable

/ element with an info icon - users had to click to reveal the subtitle text.

After: Subtitles are now shown as visible, secondary-styled text directly beneath the title, line-clamped to a single line. A "See more"/"See less" toggle appears automatically when the subtitle text overflows, allowing users to expand and collapse the full text.

Key changes to html_card_template in analysis_card.py:

  • Replaced
    / with always-visible

    using CSS -webkit-line-clamp: 2

  • Added a "See more"/"See less" toggle that is shown only when the subtitle is actually clamped (detected via scrollHeight > clientHeight in a requestAnimationFrame callback)
  • The inline script uses document.currentScript.previousElementSibling to locate its sibling card element and querySelector to find the subtitle and toggle within it, avoiding the need for unique DOM IDs or any Python-side bookkeeping
  • Removed the info icon CSS (content: "ℹ️") and hover-to-reveal interaction

Differential Revision: D98690381

@meta-codesync
Copy link
Copy Markdown

meta-codesync bot commented Mar 30, 2026

@shrutipatel31 has exported this pull request. If you are a Meta employee, you can view the originating Diff in D98690381.

@meta-cla meta-cla bot added the CLA Signed Do not delete this pull request or issue due to inactivity. label Mar 30, 2026
@meta-codesync meta-codesync bot changed the title Update subtitle rendering in notebook Analysis Cards Update subtitle rendering in notebook Analysis Cards (#5112) Mar 30, 2026
shrutipatel31 added a commit to shrutipatel31/Ax that referenced this pull request Mar 30, 2026
Summary:

Matches the web UI change from D97406631 for notebook (Jupyter/Bento) rendering of Ax analysis cards.

**Before**: Subtitles were hidden behind a clickable <details>/<summary> element with an info icon - users had to click to reveal the subtitle text.

**After**: Subtitles are now shown as visible, secondary-styled text directly beneath the title, line-clamped to a single line. A "See more"/"See less" toggle appears automatically when the subtitle text overflows, allowing users to expand and collapse the full text.

Key changes to html_card_template in analysis_card.py:

- Replaced <details>/<summary> with always-visible <p class="card-subtitle"> using CSS -webkit-line-clamp: 2
- Added a "See more"/"See less" <button> toggle that is shown only when the subtitle is actually clamped (detected via scrollHeight > clientHeight in a requestAnimationFrame callback)
- The inline script uses `document.currentScript.previousElementSibling` to locate its sibling card element and querySelector to find the subtitle and toggle within it, avoiding the need for unique DOM IDs or any Python-side bookkeeping
- Removed the info icon CSS (content: "ℹ️") and hover-to-reveal interaction

Differential Revision: D98690381
@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Mar 30, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 96.40%. Comparing base (bdcfdbe) to head (590fc2e).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #5112      +/-   ##
==========================================
- Coverage   96.40%   96.40%   -0.01%     
==========================================
  Files         613      613              
  Lines       68142    68142              
==========================================
- Hits        65694    65693       -1     
- Misses       2448     2449       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Summary:

Matches the web UI change from D97406631 for notebook (Jupyter/Bento) rendering of Ax analysis cards.

**Before**: Subtitles were hidden behind a clickable <details>/<summary> element with an info icon - users had to click to reveal the subtitle text.

**After**: Subtitles are now shown as visible, secondary-styled text directly beneath the title, line-clamped to a single line. A "See more"/"See less" toggle appears automatically when the subtitle text overflows, allowing users to expand and collapse the full text.

Key changes to html_card_template in analysis_card.py:

- Replaced <details>/<summary> with always-visible <p class="card-subtitle"> using CSS -webkit-line-clamp: 2
- Added a "See more"/"See less" <button> toggle that is shown only when the subtitle is actually clamped (detected via scrollHeight > clientHeight in a requestAnimationFrame callback)
- The inline script uses `document.currentScript.previousElementSibling` to locate its sibling card element and querySelector to find the subtitle and toggle within it, avoiding the need for unique DOM IDs or any Python-side bookkeeping
- Removed the info icon CSS (content: "ℹ️") and hover-to-reveal interaction

Differential Revision: D98690381
shrutipatel31 added a commit to shrutipatel31/Ax that referenced this pull request Apr 2, 2026
Summary:

Matches the web UI change from D97406631 for notebook (Jupyter/Bento) rendering of Ax analysis cards.

**Before**: Subtitles were hidden behind a clickable <details>/<summary> element with an info icon - users had to click to reveal the subtitle text.

**After**: Subtitles are now shown as visible, secondary-styled text directly beneath the title, line-clamped to a single line. A "See more"/"See less" toggle appears automatically when the subtitle text overflows, allowing users to expand and collapse the full text.

Key changes to html_card_template in analysis_card.py:

- Replaced <details>/<summary> with always-visible <p class="card-subtitle"> using CSS -webkit-line-clamp: 2
- Added a "See more"/"See less" <button> toggle that is shown only when the subtitle is actually clamped (detected via scrollHeight > clientHeight in a requestAnimationFrame callback)
- The inline script uses `document.currentScript.previousElementSibling` to locate its sibling card element and querySelector to find the subtitle and toggle within it, avoiding the need for unique DOM IDs or any Python-side bookkeeping
- Removed the info icon CSS (content: "ℹ️") and hover-to-reveal interaction

Differential Revision: D98690381
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Do not delete this pull request or issue due to inactivity. fb-exported meta-exported

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants