Fix Right-Click Context Menu

core/new-gui/src/app/app.module.ts

@@ -36,6 +36,7 @@ import { NzSliderModule } from "ng-zorro-antd/slider";
 import { NzSpaceModule } from "ng-zorro-antd/space";
 import { NzBadgeModule } from "ng-zorro-antd/badge";
 import { NzUploadModule } from "ng-zorro-antd/upload";
+import { NzNoAnimationModule } from "ng-zorro-antd/core/no-animation";
 import { FileUploadModule } from "ng2-file-upload";
 import { NgxJsonViewerModule } from "ngx-json-viewer";
 import { ColorPickerModule } from "ngx-color-picker";
@@ -110,6 +111,7 @@ import { NzModalCommentBoxComponent } from "./workspace/component/workflow-edito
 import { NzCommentModule } from "ng-zorro-antd/comment";
 import { NgbdModalWorkflowExecutionsComponent } from "./dashboard/component/feature-container/saved-workflow-section/ngbd-modal-workflow-executions/ngbd-modal-workflow-executions.component";
 import { DeletePromptComponent } from "./dashboard/component/delete-prompt/delete-prompt.component";
+import { ContextMenuComponent } from "./workspace/component/workflow-editor/context-menu/context-menu/context-menu.component";
 
 registerLocaleData(en);
 
@@ -169,6 +171,7 @@ registerLocaleData(en);
     NgbdModalRemoveProjectFileComponent,
     NzModalCommentBoxComponent,
     DeletePromptComponent,
+    ContextMenuComponent,
   ],
   imports: [
     BrowserModule,
@@ -221,6 +224,7 @@ registerLocaleData(en);
     NzSpaceModule,
     NzBadgeModule,
     NzUploadModule,
+    NzNoAnimationModule,
     NgxJsonViewerModule,
     MatDialogModule,
     NzCardModule,

core/new-gui/src/app/workspace/component/navigation/navigation.component.html

@@ -171,36 +171,36 @@
           <i nz-icon nzTheme="outline" nzType="ungroup"></i>
         </button> -->
         <button
-          (click)="onClickDisableOperators()"
-          *ngIf="isDisableOperator || !isDisableOperatorClickable"
-          [disabled]="!isDisableOperatorClickable || !lockGranted"
+          (click)="operatorMenu.disableHighlightedOperators()"
+          *ngIf="operatorMenu.isDisableOperator || !operatorMenu.isDisableOperatorClickable"
+          [disabled]="!operatorMenu.isDisableOperatorClickable || !lockGranted"
           nz-button
           title="disable operators"
         >
           <i nz-icon nzTheme="outline" nzType="stop"></i>
         </button>
         <button
-          (click)="onClickDisableOperators()"
-          *ngIf="!isDisableOperator && isDisableOperatorClickable"
-          [disabled]="!isDisableOperatorClickable || !lockGranted"
+          (click)="operatorMenu.disableHighlightedOperators()"
+          *ngIf="!operatorMenu.isDisableOperator && operatorMenu.isDisableOperatorClickable"
+          [disabled]="!operatorMenu.isDisableOperatorClickable || !lockGranted"
           nz-button
           title="operators disabled, click to re-enable"
         >
           <i nz-icon nzTheme="twotone" nzType="stop"></i>
         </button>
         <button
-          *ngIf="operatorCacheEnabled && (isCacheOperator || ! isCacheOperatorClickable)"
-          [disabled]="! isCacheOperatorClickable || !lockGranted"
-          (click)="onClickCacheOperators()"
+          *ngIf="operatorMenu.operatorCacheEnabled && (operatorMenu.isCacheOperator || ! operatorMenu.isCacheOperatorClickable)"
+          [disabled]="! operatorMenu.isCacheOperatorClickable || !lockGranted"
+          (click)="operatorMenu.cacheHighlightedOperators()"
           nz-button
           title="cache operators"
         >
           <i nz-icon nzType="database" nzTheme="outline"></i>
         </button>
         <button
-          *ngIf="operatorCacheEnabled && (! isCacheOperator && isCacheOperatorClickable)"
-          [disabled]="! isCacheOperatorClickable || !lockGranted"
-          (click)="onClickCacheOperators()"
+          *ngIf="operatorMenu.operatorCacheEnabled && (! operatorMenu.isCacheOperator && operatorMenu.isCacheOperatorClickable)"
+          [disabled]="! operatorMenu.isCacheOperatorClickable || !lockGranted"
+          (click)="operatorMenu.cacheHighlightedOperators()"
           nz-button
           title="operators cached, click to remove cache"
         >

core/new-gui/src/app/workspace/component/navigation/navigation.component.ts

@@ -14,7 +14,6 @@ import { JointGraphWrapper } from "../../service/workflow-graph/model/joint-grap
 import { WorkflowActionService } from "../../service/workflow-graph/model/workflow-action.service";
 import { ExecutionState } from "../../types/execute-workflow.interface";
 import { WorkflowWebsocketService } from "../../service/workflow-websocket/workflow-websocket.service";
-import { merge } from "rxjs";
 import { WorkflowResultExportService } from "../../service/workflow-result-export/workflow-result-export.service";
 import { debounceTime } from "rxjs/operators";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
@@ -27,6 +26,7 @@ import { WorkflowCollabService } from "../../service/workflow-collab/workflow-co
 import { NzUploadFile } from "ng-zorro-antd/upload";
 import { saveAs } from "file-saver";
 import { NotificationService } from "src/app/common/service/notification/notification.service";
+import { OperatorMenuService } from "../../service/operator-menu/operator-menu.service";
 
 /**
  * NavigationComponent is the top level navigation bar that shows
@@ -75,14 +75,6 @@ export class NavigationComponent implements OnInit {
   public displayParticularWorkflowVersion: boolean = false;
   public onClickRunHandler: () => void;
 
-  // whether the disable-operator-button should be enabled
-  public isDisableOperatorClickable: boolean = false;
-  public isDisableOperator: boolean = true;
-
-  public operatorCacheEnabled: boolean = environment.operatorCacheEnabled;
-  public isCacheOperatorClickable: boolean = false;
-  public isCacheOperator: boolean = true;
-
   public static readonly COLLAB_RELOAD_WAIT_TIME = 500;
 
   constructor(
@@ -101,6 +93,7 @@ export class NavigationComponent implements OnInit {
     public workflowUtilService: WorkflowUtilService,
     private userProjectService: UserProjectService,
     private notificationService: NotificationService,
+    public operatorMenu: OperatorMenuService,
     public changeDetectionRef: ChangeDetectorRef
   ) {
     this.executionState = executeWorkflowService.getExecutionState().state;
@@ -134,8 +127,6 @@ export class NavigationComponent implements OnInit {
 
     this.registerWorkflowMetadataDisplayRefresh();
     this.handleWorkflowVersionDisplay();
-    this.handleDisableOperatorStatusChange();
-    this.handleCacheOperatorStatusChange();
     this.handleLockChange();
     this.handleWorkflowAccessChange();
   }
@@ -431,31 +422,6 @@ export class NavigationComponent implements OnInit {
     }
   }
 
-  /**
-   * callback function when user clicks the "disable operator" icon:
-   * this.isDisableOperator indicates whether the operators should be disabled or enabled
-   */
-  public onClickDisableOperators(): void {
-    if (this.isDisableOperator) {
-      this.workflowActionService.disableOperators(this.effectivelyHighlightedOperators());
-    } else {
-      this.workflowActionService.enableOperators(this.effectivelyHighlightedOperators());
-    }
-  }
-
-  public onClickCacheOperators(): void {
-    const effectiveHighlightedOperators = this.effectivelyHighlightedOperators();
-    const effectiveHighlightedOperatorsExcludeSink = effectiveHighlightedOperators.filter(
-      op => !isSink(this.workflowActionService.getTexeraGraph().getOperator(op))
-    );
-
-    if (this.isCacheOperator) {
-      this.workflowActionService.cacheOperators(effectiveHighlightedOperatorsExcludeSink);
-    } else {
-      this.workflowActionService.unCacheOperators(effectiveHighlightedOperatorsExcludeSink);
-    }
-  }
-
   /**
    * Returns true if currently highlighted elements are all groups.
    */
@@ -584,55 +550,6 @@ export class NavigationComponent implements OnInit {
     }, NavigationComponent.COLLAB_RELOAD_WAIT_TIME);
   }
 
-  /**
-   * Updates the status of the disable operator icon:
-   * If all selected operators are disabled, then click it will re-enable the operators
-   * If any of the selected operator is not disabled, then click will disable all selected operators
-   */
-  handleDisableOperatorStatusChange() {
-    merge(
-      this.workflowActionService.getJointGraphWrapper().getJointOperatorHighlightStream(),
-      this.workflowActionService.getJointGraphWrapper().getJointOperatorUnhighlightStream(),
-      this.workflowActionService.getJointGraphWrapper().getJointGroupHighlightStream(),
-      this.workflowActionService.getJointGraphWrapper().getJointGroupUnhighlightStream(),
-      this.workflowActionService.getTexeraGraph().getDisabledOperatorsChangedStream()
-    )
-      .pipe(untilDestroyed(this))
-      .subscribe(event => {
-        const effectiveHighlightedOperators = this.effectivelyHighlightedOperators();
-        const allDisabled = this.effectivelyHighlightedOperators().every(op =>
-          this.workflowActionService.getTexeraGraph().isOperatorDisabled(op)
-        );
-
-        this.isDisableOperator = !allDisabled;
-        this.isDisableOperatorClickable = effectiveHighlightedOperators.length !== 0;
-      });
-  }
-
-  handleCacheOperatorStatusChange() {
-    merge(
-      this.workflowActionService.getJointGraphWrapper().getJointOperatorHighlightStream(),
-      this.workflowActionService.getJointGraphWrapper().getJointOperatorUnhighlightStream(),
-      this.workflowActionService.getJointGraphWrapper().getJointGroupHighlightStream(),
-      this.workflowActionService.getJointGraphWrapper().getJointGroupUnhighlightStream(),
-      this.workflowActionService.getTexeraGraph().getCachedOperatorsChangedStream()
-    )
-      .pipe(untilDestroyed(this))
-      .subscribe(event => {
-        const effectiveHighlightedOperators = this.effectivelyHighlightedOperators();
-        const effectiveHighlightedOperatorsExcludeSink = effectiveHighlightedOperators.filter(
-          op => !isSink(this.workflowActionService.getTexeraGraph().getOperator(op))
-        );
-
-        const allCached = effectiveHighlightedOperatorsExcludeSink.every(op =>
-          this.workflowActionService.getTexeraGraph().isOperatorCached(op)
-        );
-
-        this.isCacheOperator = !allCached;
-        this.isCacheOperatorClickable = effectiveHighlightedOperatorsExcludeSink.length !== 0;
-      });
-  }
-
   private handleLockChange(): void {
     this.workflowCollabService
       .getLockStatusStream()
@@ -651,21 +568,4 @@ export class NavigationComponent implements OnInit {
         this.workflowReadonly = workflowReadonly;
       });
   }
-
-  /**
-   * Gets all highlighted operators, and all operators in the highlighted groups
-   */
-  effectivelyHighlightedOperators(): readonly string[] {
-    const highlightedOperators = this.workflowActionService.getJointGraphWrapper().getCurrentHighlightedOperatorIDs();
-    const highlightedGroups = this.workflowActionService.getJointGraphWrapper().getCurrentHighlightedGroupIDs();
-
-    const operatorInHighlightedGroups: string[] = highlightedGroups.flatMap(g =>
-      Array.from(this.workflowActionService.getOperatorGroup().getGroup(g).operators.keys())
-    );
-
-    const effectiveHighlightedOperators = new Set<string>();
-    highlightedOperators.forEach(op => effectiveHighlightedOperators.add(op));
-    operatorInHighlightedGroups.forEach(op => effectiveHighlightedOperators.add(op));
-    return Array.from(effectiveHighlightedOperators);
-  }
 }

core/new-gui/src/app/workspace/component/workflow-editor/context-menu/context-menu/context-menu.component.html

@@ -0,0 +1,42 @@
+<ul nz-menu>
+  <li nz-menu-item *ngIf="operatorMenu.effectivelyHighlightedOperators.value.length > 0" (click)="onCopy()">
+    <span nz-icon nzType="copy" nzTheme="outline"></span>copy
+  </li>
+  <li nz-menu-item *ngIf="operatorMenu.effectivelyHighlightedOperators.value.length > 0" (click)="onCut()">
+    <span nz-icon nzType="scissor" nzTheme="outline"></span>cut
+  </li>
+  <li nz-menu-item *ngIf="operatorMenu.effectivelyHighlightedOperators.value.length === 0" (click)="onPaste()">
+    <span nz-icon nzType="snippets" nzTheme="outline"></span>paste
+  </li>
+  <li
+    nz-menu-item
+    *ngIf="operatorMenu.isDisableOperator && operatorMenu.isDisableOperatorClickable"
+    (click)="operatorMenu.disableHighlightedOperators()"
+  >
+    <span nz-icon nzType="stop" nzTheme="outline"></span>disable
+  </li>
+  <li
+    nz-menu-item
+    *ngIf="!operatorMenu.isDisableOperator && operatorMenu.isDisableOperatorClickable"
+    (click)="operatorMenu.disableHighlightedOperators()"
+  >
+    <span nz-icon nzType="stop" nzTheme="twotone"></span>enable
+  </li>
+  <li
+    nz-menu-item
+    *ngIf="operatorMenu.operatorCacheEnabled && (operatorMenu.isCacheOperator && operatorMenu.isCacheOperatorClickable)"
+    (click)="operatorMenu.cacheHighlightedOperators()"
+  >
+    <span nz-icon nzType="database" nzTheme="outline"></span>cache output
+  </li>
+  <li
+    nz-menu-item
+    *ngIf="operatorMenu.operatorCacheEnabled && (! operatorMenu.isCacheOperator && operatorMenu.isCacheOperatorClickable)"
+    (click)="operatorMenu.cacheHighlightedOperators()"
+  >
+    <span nz-icon nzType="database" nzTheme="twotone"></span>remove cache
+  </li>
+  <li nz-menu-item *ngIf="operatorMenu.effectivelyHighlightedOperators.value.length > 0" (click)="onDelete()">
+    <span nz-icon nzType="delete" nzTheme="outline"></span>delete
+  </li>
+</ul>

core/new-gui/src/app/workspace/component/workflow-editor/context-menu/context-menu/context-menu.component.scss

@@ -0,0 +1,11 @@
+li {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  font-size: 14px;
+  min-width: 120px;
+
+  span {
+    margin-left: 2px;
+    margin-right: 12px;
+  }
+}

core/new-gui/src/app/workspace/component/workflow-editor/context-menu/context-menu/context-menu.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { OperatorMetadataService } from "src/app/workspace/service/operator-metadata/operator-metadata.service";
+import { StubOperatorMetadataService } from "src/app/workspace/service/operator-metadata/stub-operator-metadata.service";
+
+import { ContextMenuComponent } from "./context-menu.component";
+
+describe("ContextMenuComponent", () => {
+  let component: ContextMenuComponent;
+  let fixture: ComponentFixture<ContextMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ContextMenuComponent],
+      providers: [{ provide: OperatorMetadataService, useClass: StubOperatorMetadataService }],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContextMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

core/new-gui/src/app/workspace/component/workflow-editor/context-menu/context-menu/context-menu.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from "@angular/core";
+import { OperatorMenuService } from "src/app/workspace/service/operator-menu/operator-menu.service";
+import { WorkflowActionService } from "src/app/workspace/service/workflow-graph/model/workflow-action.service";
+
+@Component({
+  selector: "context-menu",
+  templateUrl: "./context-menu.component.html",
+  styleUrls: ["./context-menu.component.scss"],
+})
+export class ContextMenuComponent implements OnInit {
+  constructor(public workflowActionService: WorkflowActionService, public operatorMenu: OperatorMenuService) {}
+
+  ngOnInit(): void {}
+
+  public onCopy(): void {
+    this.operatorMenu.saveHighlightedElements();
+  }
+
+  public onPaste(): void {
+    this.operatorMenu.performPasteOperation();
+  }
+
+  public onCut(): void {
+    this.onCopy();
+    this.onDelete();
+  }
+
+  public onDelete(): void {
+    const highlightedOperatorIDs = this.workflowActionService.getJointGraphWrapper().getCurrentHighlightedOperatorIDs();
+    const highlightedGroupIDs = this.workflowActionService.getJointGraphWrapper().getCurrentHighlightedGroupIDs();
+    this.workflowActionService.deleteOperatorsAndLinks(highlightedOperatorIDs, [], highlightedGroupIDs);
+  }
+}

core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.html

@@ -1,8 +1,13 @@
 <div style="position: relative; width: 100%; height: 100%">
   <div
     [attr.id]="WORKFLOW_EDITOR_JOINTJS_WRAPPER_ID"
+    (contextmenu)="contextMenu($event, menu)"
     class="texera-workspace-workflow-editor-body texera-workflow-component-body"
   >
     <div [attr.id]="WORKFLOW_EDITOR_JOINTJS_ID" class="texera-workspace-workflow-jointjs"></div>
   </div>
 </div>
+
+<nz-dropdown-menu nzNoAnimation #menu="nzDropdownMenu">
+  <context-menu></context-menu>
+</nz-dropdown-menu>