feat(python-notebook-migration, frontend): add Jupyter panel visibility surface and mini-map expand-panel button

frontend/src/app/app.module.ts

@@ -20,7 +20,7 @@
 import { DatePipe, registerLocaleData } from "@angular/common";
 import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
 import en from "@angular/common/locales/en";
-import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
+import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, APP_BOOTSTRAP_LISTENER, NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
@@ -191,6 +191,7 @@ import { NzCheckboxModule } from "ng-zorro-antd/checkbox";
 import { RegistrationRequestModalComponent } from "./common/service/user/registration-request-modal/registration-request-modal.component";
 import { UserComputingUnitComponent } from "./dashboard/component/user/user-computing-unit/user-computing-unit.component";
 import { UserComputingUnitListItemComponent } from "./dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component";
+import { JupyterPanelService } from "./workspace/service/jupyter-panel/jupyter-panel.service";
 
 registerLocaleData(en);
 
@@ -404,6 +405,12 @@ registerLocaleData(en);
       deps: [GuiConfigService],
       multi: true,
     },
+    {
+      provide: APP_BOOTSTRAP_LISTENER,
+      useFactory: (jupyterPanelService: JupyterPanelService) => () => jupyterPanelService.init(),
+      deps: [JupyterPanelService],
+      multi: true,
+    },
   ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

frontend/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.html

@@ -53,6 +53,17 @@
       nz-icon
       nzType="zoom-in"></i>
   </button>
+  <button
+    *ngIf="pythonNotebookMigrationEnabled"
+    id="minimap-expand-jupyter-button"
+    (click)="onClickExpandJupyterNotebookPanel()"
+    nz-button
+    title="Expand Jupyter Notebook">
+    <i
+      nz-icon
+      nzType="expand-alt"
+      nzTheme="outline"></i>
+  </button>
   <div
     [hidden]="hidden"
     id="mini-map-container">

frontend/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.scss

@@ -45,6 +45,13 @@
   z-index: 4;
 }
 
+#minimap-expand-jupyter-button {
+  position: absolute;
+  bottom: 0;
+  right: 120px;
+  z-index: 4;
+}
+
 #mini-map-container {
   position: relative;
   overflow: hidden;

frontend/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { CommonModule } from "@angular/common";
 import { AfterViewInit, Component, HostListener, OnDestroy, ViewChild } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
@@ -31,6 +32,8 @@ import { NzWaveDirective } from "ng-zorro-antd/core/wave";
 import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
 import { NzIconDirective } from "ng-zorro-antd/icon";
 import { FormlyRepeatDndComponent } from "../../../../common/formly/repeat-dnd/repeat-dnd.component";
+import { JupyterPanelService } from "../../../service/jupyter-panel/jupyter-panel.service";
+import { GuiConfigService } from "../../../../common/service/gui-config.service";
 
 @UntilDestroy()
 @Component({
@@ -45,6 +48,7 @@ import { FormlyRepeatDndComponent } from "../../../../common/formly/repeat-dnd/r
     NzIconDirective,
     CdkDrag,
     FormlyRepeatDndComponent,
+    CommonModule,
   ],
 })
 export class MiniMapComponent implements AfterViewInit, OnDestroy {
@@ -57,7 +61,9 @@ export class MiniMapComponent implements AfterViewInit, OnDestroy {
 
   constructor(
     private workflowActionService: WorkflowActionService,
-    private panelService: PanelService
+    private panelService: PanelService,
+    protected config: GuiConfigService,
+    private jupyterPanelService: JupyterPanelService
   ) {}
 
   ngAfterViewInit() {
@@ -156,6 +162,17 @@ export class MiniMapComponent implements AfterViewInit, OnDestroy {
       );
   }
 
+  /**
+   * This method will expand and redisplay the jupyter notebook.
+   */
+  public get pythonNotebookMigrationEnabled(): boolean {
+    return this.config.env.pythonNotebookMigrationEnabled;
+  }
+
+  public onClickExpandJupyterNotebookPanel(): void {
+    this.jupyterPanelService.openJupyterNotebookPanel();
+  }
+
   public triggerCenter(): void {
     this.workflowActionService.getTexeraGraph().triggerCenterEvent();
     if (this.navigatorDrag) this.navigatorDrag.reset();

frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.ts

@@ -48,6 +48,7 @@ import { NzNoAnimationDirective } from "ng-zorro-antd/core/animation";
 import { ContextMenuComponent } from "./context-menu/context-menu/context-menu.component";
 import { NgIf } from "@angular/common";
 import { AgentInteractionComponent } from "../agent/agent-interaction/agent-interaction.component";
+import { JupyterPanelService } from "../../service/jupyter-panel/jupyter-panel.service";
 
 // jointjs interactive options for enabling and disabling interactivity
 // https://resources.jointjs.com/docs/jointjs/v3.2/joint.html#dia.Paper.prototype.options.interactive
@@ -128,7 +129,8 @@ export class WorkflowEditorComponent implements OnInit, AfterViewInit, OnDestroy
     public nzContextMenu: NzContextMenuService,
     private elementRef: ElementRef,
     private config: GuiConfigService,
-    private agentService: AgentService
+    private agentService: AgentService,
+    private jupyterPanelService: JupyterPanelService
   ) {
     this.wrapper = this.workflowActionService.getJointGraphWrapper();
   }
@@ -603,12 +605,14 @@ export class WorkflowEditorComponent implements OnInit, AfterViewInit, OnDestroy
         const elementID = event[0].model.id.toString();
         const highlightedOperatorIDs = this.wrapper.getCurrentHighlightedOperatorIDs();
         const highlightedCommentBoxIDs = this.wrapper.getCurrentHighlightedCommentBoxIDs();
+        this.jupyterPanelService.onWorkflowComponentClick(elementID); // Highlight corresponding Jupyter notebook cell
         if (event[1].shiftKey) {
           // if in multiselect toggle highlights on click
           if (highlightedOperatorIDs.includes(elementID)) {
             this.workflowActionService.unhighlightOperators(elementID);
           } else if (this.workflowActionService.getTexeraGraph().hasOperator(elementID)) {
             this.workflowActionService.highlightOperators(<boolean>event[1].shiftKey, elementID);
+            this.jupyterPanelService.onWorkflowComponentClick(elementID); // Highlight corresponding Jupyter notebook cell
           }
           if (highlightedCommentBoxIDs.includes(elementID)) {
             this.wrapper.unhighlightCommentBoxes(elementID);