Skip to content

feat(python-notebook-migration, frontend): add Jupyter notebook iframe panel component#5271

Open
zyratlo wants to merge 1 commit into
apache:mainfrom
zyratlo:migration-tool-jupyter-panel
Open

feat(python-notebook-migration, frontend): add Jupyter notebook iframe panel component#5271
zyratlo wants to merge 1 commit into
apache:mainfrom
zyratlo:migration-tool-jupyter-panel

Conversation

@zyratlo
Copy link
Copy Markdown
Contributor

@zyratlo zyratlo commented May 28, 2026

What changes were proposed in this PR?

Introduces JupyterNotebookPanelComponent, the draggable iframe shell that hosts JupyterLab inside the Texera workspace. It consumes the visibility surface added in migration-tool-panel-controls (jupyterNotebookPanelVisible$ / closeJupyterNotebookPanel / minimizeJupyterNotebookPanel) and registers itself with the panel service via setIframeRef once its ViewChild is in the DOM.

  • frontend/src/app/workspace/component/jupyter-notebook-panel/jupyter-notebook-panel.component.ts
    • JupyterNotebookPanelComponent
      • ngOnInit subscribes to jupyterPanelService.jupyterNotebookPanelVisible$; on each emission it sets isVisible, and when visibility flips to true it fetches the iframe URL from notebookMigrationService.getJupyterIframeURL(), runs it through DomSanitizer.bypassSecurityTrustResourceUrl, and updates iframeRef
      • ngAfterViewInit registers the iframe with the panel service via setIframeRef
      • closePanel() calls jupyterPanelService.closeJupyterNotebookPanel()
      • minimizePanel() calls jupyterPanelService.minimizeJupyterNotebookPanel().
  • frontend/src/app/workspace/component/jupyter-notebook-panel/jupyter-notebook-panel.component.html
    • cdkDrag-enabled panel with header (title + close/minimize buttons; close uses nz-popconfirm for a "delete" confirmation)
    • <iframe [src]="jupyterUrl"> body bound to the sanitized URL, gated on *ngIf="isVisible".
  • frontend/src/app/workspace/component/jupyter-notebook-panel/jupyter-notebook-panel.component.scss
    • fixed-position panel styling, drag handle visuals, iframe sizing.
  • frontend/src/app/workspace/component/jupyter-notebook-panel/jupyter-notebook-panel.component.spec.ts
  • frontend/src/app/app.module.ts
    • imports JupyterNotebookPanelComponent and adds it to the @NgModule.declarations array.

Any related issues, documentation, discussions?

Closes #5270
Parent issue #4301

How was this PR tested?

jupyter-notebook-panel.component.spec.ts

  • mocks JupyterPanelService (via a controllable Subject<boolean> for the visibility observable) and NotebookMigrationService (returning a fixture URL)
  • Covers visibility transitions, URL fetch + sanitization, ref registration, button delegation.

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

Generated-by: Claude Code (Claude Opus 4.7)

@github-actions github-actions Bot added the frontend Changes related to the frontend GUI label May 28, 2026
@zyratlo zyratlo changed the title added jupyter notebook panel iframe logic feat(python-notebook-migration, frontend): add Jupyter notebook iframe panel component May 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend Changes related to the frontend GUI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Notebook Migration] Add Jupyter notebook iframe panel component

1 participant