Skip to content

[Notebook Migration] Add Jupyter notebook iframe panel component #5270

@zyratlo

Description

@zyratlo

Task Summary

Introduce JupyterNotebookPanelComponent, the draggable iframe shell that hosts JupyterLab inside the Texera workspace.

Scope

Adds and modifies these files:

  • 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 (+2 lines)
    • imports JupyterNotebookPanelComponent and adds it to the @NgModule.declarations array.

Task Type

  • Refactor / Cleanup
  • DevOps / Deployment / CI
  • Testing / QA
  • Documentation
  • Performance
  • Other

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No fields configured for Task.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions