From fc3170a2ccbb9c2825e6ca751c4758713aadcdf5 Mon Sep 17 00:00:00 2001
From: "Kyuho (Kyu) Oh" <80994706+sixsage@users.noreply.github.com>
Date: Mon, 16 Dec 2024 22:16:01 -0800
Subject: [PATCH] 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 <xinyual3@uci.edu>
---
 .../result-panel/result-panel.component.html  | 15 ++++++-----
 .../result-panel/result-panel.component.ts    | 27 +++++++++++++++++--
 2 files changed, 33 insertions(+), 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
index c707082f0cb..40169e1e069 100644
--- 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
index ecc65a994a4..f845030cdf2 100644
--- 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) {