Skip to content

Job widget (Shadow DOM)

The job status widget is rendered via a single Shadow DOM-based template (src/templates/job_widget.html). This isolates CSS/JS so it works consistently across JupyterLab, classic Notebook, VS Code notebooks, marimo, and web front-ends.

Key details:

  • Uses a custom element do-job-widget which attaches an open shadow root.
  • Loads Bootstrap 5 (CSS) inside the shadow via CDN, avoiding conflicts with legacy Bootstrap shipped by notebooks.
  • Tabs are implemented with a small vanilla JavaScript controller inside the shadow; JavaScript is required.
  • The Python code in src/tools/job.py renders this template in all environments.

CSP and offline notes:

  • By default, assets load from https://cdn.jsdelivr.net. If your environment has a strict CSP or is offline, vendor these assets and update the <link> in the template accordingly.

Usage:

  • In Python: Job.from_id("<execution_id>").show() or .watch().