Address Result Panel Getting Sticky Too Easily (#3136)

## Purpose
Address #3042
There was an issue where visualization results were very easy to make
panels "sticky", meaning the panels would be dragged even though the
user is no longer holding down the mouse. This PR aims to fix this
issue.
## Changes
Add logic to modify the z-index of visualization results directly. If
the panel is being dragged, the visualization result's z-index becomes
-1, and if the panel is not dragged, the z-index changes back to 0 so
that the user can interact with the visualization.
## Demo
Before

![chrome_svDxLZYYvl](https://github.com/user-attachments/assets/8299e19d-9c66-4d9c-a40f-3fed8f7823be)
After

![R3oNSHxH8J](https://github.com/user-attachments/assets/65069f65-3995-435a-88f6-d7cc5b66ddf1)

---------

Co-authored-by: Xinyuan Lin <[email protected]>

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>

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) {