Skip to content

[SPARK-55772][UI] Replace jQuery show/hide with Bootstrap 5 d-none utility class#54613

Closed
yaooqinn wants to merge 1 commit intoapache:masterfrom
yaooqinn:SPARK-55772
Closed

[SPARK-55772][UI] Replace jQuery show/hide with Bootstrap 5 d-none utility class#54613
yaooqinn wants to merge 1 commit intoapache:masterfrom
yaooqinn:SPARK-55772

Conversation

@yaooqinn
Copy link
Member

@yaooqinn yaooqinn commented Mar 4, 2026

What changes were proposed in this pull request?

Replaces jQuery .show(), .hide(), .toggle(), .css("display", ...), and inline style="display:none" with Bootstrap 5 d-none utility class across the Spark Web UI.

JS changes (5 files):

  • environmentpage.js: .show()/.hide().removeClass("d-none")/.addClass("d-none")
  • stagepage.js: 6 .show()/.hide() calls for speculation summary and accumulator table
  • executorspage.js: .hide()/.show() for active-process-container and flamegraph toggle
  • streaming-page.js: .toggle("collapsed").toggleClass("d-none")
  • log-view.js: .css("display", ...)d-none class add/remove

Scala changes (6 files):

  • 4 LogPage variants: style="display: none;"class="d-none"
  • UIUtils.scala: dag-viz-metadata div
  • StreamingPage.scala: inputs-table row

Why are the changes needed?

Using d-none consistently across the codebase:

  • Aligns with Bootstrap 5 conventions (no inline styles)
  • Makes visibility state inspectable via class (easier debugging)
  • Removes reliance on jQuery .show()/.hide() which manipulate inline styles

Part of SPARK-55760 (Spark Web UI Modernization).

Does this PR introduce any user-facing change?

No. Visibility behavior is identical.

How was this patch tested?

  • lint-js passes
  • scalastyle passes
  • Manual UI verification

Was this patch authored or co-authored using generative AI tooling?

Yes, co-authored with GitHub Copilot.

…ility class

Replace jQuery `.show()`, `.hide()`, `.toggle()`, and inline `style="display:none"` with Bootstrap 5 `d-none` utility class across the Spark Web UI.

**JS changes (5 files):**
- `environmentpage.js`: `.show()`/`.hide()` → `.removeClass('d-none')`/`.addClass('d-none')`
- `stagepage.js`: 6 `.show()`/`.hide()` calls → `d-none` class toggling
- `executorspage.js`: `.hide()`/`.show()` and `.toggle()` → `d-none` class
- `streaming-page.js`: `.toggle('collapsed')` → `.toggleClass('d-none')`
- `log-view.js`: `.css('display', ...)` → `d-none` class

**Scala changes (6 files):**
- 4 LogPage variants + UIUtils + StreamingPage: `style="display:none"` → `class="d-none"`

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@yaooqinn yaooqinn closed this in 93ab196 Mar 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants