Merge branch 'master' into Yicong-Huang-patch-1

Texera · Dec 17, 2024 · 3f1ba61 · 3f1ba61
2 parents b697c6c + fc3170a
commit 3f1ba61
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/core/gui/src/app/workspace/component/result-panel/result-panel.component.html b/core/gui/src/app/workspace/component/result-panel/result-panel.component.html
@@ -39,6 +39,7 @@
   [style.height.px]="height"
   (nzResize)="onResize($event)"
   [cdkDragFreeDragPosition]="dragPosition"
+  (cdkDragStarted)="handleStartDrag()"
   (cdkDragEnded)="handleEndDrag($event)">
   <ul
     nz-menu
@@ -64,12 +65,9 @@
   </ul>
   <div
     id="content"
-    *ngIf="width">
-    <h4
-      id="title"
-      cdkDragHandle>
-      Result Panel{{operatorTitle ? ': ' + operatorTitle : ''}}
-    </h4>
+    *ngIf="width"
+    cdkDragHandle>
+    <h4 id="title">Result Panel{{operatorTitle ? ': ' + operatorTitle : ''}}</h4>
     <nz-tabset
       [nzSize]="'small'"
       [nzTabPosition]="'left'">
@@ -82,7 +80,10 @@ <h4>No results available to display.</h4>
       </div>
       <div *ngFor="let config of frameComponentConfigs | keyvalue">
         <nz-tab nzTitle="{{config.key}}">
-          <ng-container *ngComponentOutlet="config.value.component;inputs: config.value.componentInputs"></ng-container>
+          <div #dynamicComponent>
+            <ng-container
+              *ngComponentOutlet="config.value.component;inputs: config.value.componentInputs"></ng-container>
+          </div>
         </nz-tab>
       </div>
     </nz-tabset>

diff --git a/core/gui/src/app/workspace/component/result-panel/result-panel.component.ts b/core/gui/src/app/workspace/component/result-panel/result-panel.component.ts
@@ -1,4 +1,14 @@
-import { ChangeDetectorRef, Component, OnInit, Type, HostListener, OnDestroy } from "@angular/core";
+import {
+  ChangeDetectorRef,
+  Component,
+  OnInit,
+  Type,
+  HostListener,
+  OnDestroy,
+  ViewChild,
+  ElementRef,
+  AfterViewInit,
+} from "@angular/core";
 import { merge } from "rxjs";
 import { ExecuteWorkflowService } from "../../service/execute-workflow/execute-workflow.service";
 import { WorkflowActionService } from "../../service/workflow-graph/model/workflow-action.service";
@@ -17,7 +27,7 @@ import { NzResizeEvent } from "ng-zorro-antd/resizable";
 import { VisualizationFrameContentComponent } from "../visualization-panel-content/visualization-frame-content.component";
 import { calculateTotalTranslate3d } from "../../../common/util/panel-dock";
 import { isDefined } from "../../../common/util/predicate";
-import { CdkDragEnd } from "@angular/cdk/drag-drop";
+import { CdkDragEnd, CdkDragStart } from "@angular/cdk/drag-drop";
 import { PanelService } from "../../service/panel/panel.service";
 import { WorkflowCompilingService } from "../../service/compile-workflow/workflow-compiling.service";
 import { CompilationState } from "../../types/workflow-compiling.interface";
@@ -36,6 +46,8 @@ export const DEFAULT_HEIGHT = 300;
   styleUrls: ["./result-panel.component.scss"],
 })
 export class ResultPanelComponent implements OnInit, OnDestroy {
+  @ViewChild("dynamicComponent")
+  componentOutlets!: ElementRef;
   frameComponentConfigs: Map<string, { component: Type<any>; componentInputs: {} }> = new Map();
   protected readonly window = window;
   id = -1;
@@ -316,12 +328,23 @@ export class ResultPanelComponent implements OnInit, OnDestroy {
     return this.returnPosition.x === this.dragPosition.x && this.returnPosition.y === this.dragPosition.y;
   }
 
+  handleStartDrag() {
+    let visualizationResult = this.componentOutlets.nativeElement.querySelector("#html-content");
+    if (visualizationResult !== null) {
+      visualizationResult.style.zIndex = -1;
+    }
+  }
+
   handleEndDrag({ source }: CdkDragEnd) {
     /**
      * records the most recent panel location, updating dragPosition when dragging is over
      */
     const { x, y } = source.getFreeDragPosition();
     this.dragPosition = { x: x, y: y };
+    let visualizationResult = this.componentOutlets.nativeElement.querySelector("#html-content");
+    if (visualizationResult !== null) {
+      visualizationResult.style.zIndex = 0;
+    }
   }
 
   onResize({ width, height }: NzResizeEvent) {