Adding a right-click context menu inside the workspace

core/amber/src/main/scala/edu/uci/ics/texera/web/service/JobResultService.scala

@@ -31,7 +31,7 @@ import scala.concurrent.duration.DurationInt
 
 object JobResultService {
 
-  val defaultPageSize: Int = 10
+  val defaultPageSize: Int = 5
 
   // convert Tuple from engine's format to JSON format
   def webDataFromTuple(

core/new-gui/angular.json

@@ -29,6 +29,7 @@
               }
             ],
             "styles": [
+              "node_modules/jquery-contextmenu/dist/jquery.contextMenu.min.css",
               "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
               "node_modules/jointjs/css/layout.css",
               "node_modules/jointjs/css/themes/material.css",
@@ -37,6 +38,9 @@
               "src/styles.scss"
             ],
             "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/jquery-contextmenu/dist/jquery.contextMenu.min.js",
+              "node_modules/jquery-contextmenu/dist/jquery.ui.position.min.js",
               "./node_modules/ngx-monaco-editor/assets/monaco/vs/loader.js"
             ],
             "allowedCommonJsDependencies": [

core/new-gui/package.json

@@ -61,6 +61,7 @@
     "jointjs": "~3.5.4",
     "jquery": "~3.6.0",
     "jquery-ui-dist": "~1.13.1",
+    "jquery-contextmenu": "^2.9.2",
     "js-abbreviation-number": "~1.4.0",
     "jwt-decode": "~3.1.2",
     "lodash-es": "~4.17.21",
@@ -109,6 +110,7 @@
     "@types/jasminewd2": "~2.0.10",
     "@types/jquery": "~3.5.14",
     "@types/jqueryui": "1.12.10",
+    "@types/jquery.contextmenu": "1.7.35",
     "@types/json-schema": "~7.0.9",
     "@types/lodash": "~4.14.179",
     "@types/uuid": "~8.3.4",

core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html

@@ -1,5 +1,13 @@
 <div [hidden]="!showResultPanel" class="texera-workspace-result-panel-body texera-workflow-component-body">
   <nz-tabset [nzSize]="'small'" [nzTabPosition]="'left'">
+    <div *ngIf="frameComponentConfigs.size == 0">
+      <nz-tab nzTitle="Result">
+        <div style="text-align: center">
+          <h4>No results available to display.</h4>
+        </div>
+      </nz-tab>
+    </div>
+    <!--xx-->
     <div *ngFor="let config of frameComponentConfigs | keyvalue">
       <nz-tab nzTitle="{{config.key}}">
         <ndc-dynamic

core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss

@@ -2,7 +2,7 @@
 
 .texera-workspace-result-panel-body {
   .result-table {
-    padding: 10px;
+    padding: 1px;
   }
 }
 

core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html

@@ -1,30 +1,43 @@
+<div *ngIf="!currentResult || currentResult.length == 0" style="text-align: center">
+  <h4>Empty result set.</h4>
+</div>
 <div [hidden]="!currentColumns" class="result-table">
-  <nz-table
-    #basicTable
-    (nzQueryParams)="onTableQueryParamsChange($event)"
-    [nzData]="currentResult"
-    [nzFrontPagination]="isFrontPagination"
-    [nzLoading]="isLoadingResult"
-    [nzPageIndex]="currentPageIndex"
-    [nzPageSize]="pageSize"
-    [nzPaginationPosition]="'bottom'"
-    [nzScroll]="{ y: '200px' }"
-    [nzSize]="'small'"
-    [nzTableLayout]="'fixed'"
-    [nzTotal]="totalNumTuples"
-    nzBordered="true"
-  >
-    <thead>
-      <tr>
-        <th *ngFor="let column of currentColumns">{{ column.header }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let row of basicTable.data; let i = index">
-        <td (click)="open(row)" *ngFor="let column of currentColumns" class="table-row" nzEllipsis>
-          {{ column.getCell(row) }}
-        </td>
-      </tr>
-    </tbody>
-  </nz-table>
+  <div ngClass="scroll">
+    <nz-table
+      #basicTable
+      (nzQueryParams)="onTableQueryParamsChange($event)"
+      [nzData]="currentResult"
+      [nzFrontPagination]="isFrontPagination"
+      [nzLoading]="isLoadingResult"
+      [nzPageIndex]="currentPageIndex"
+      [nzPageSize]="pageSize"
+      [nzPaginationPosition]="'bottom'"
+      [nzScroll]="{ y: '200px' }"
+      [nzSize]="'small'"
+      [nzTableLayout]="'fixed'"
+      [nzTotal]="totalNumTuples"
+      nzBordered="true"
+    >
+      <thead>
+        <tr>
+          <th *ngFor="let column of currentColumns" ngClass="header-size" style="text-align: center">
+            {{ column.header }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let row of basicTable.data; let i = index">
+          <td
+            (click)="open(row)"
+            *ngFor="let column of currentColumns"
+            class="table-row"
+            nzEllipsis
+            ngClass="data-size"
+          >
+            {{ column.getCell(row) }}
+          </td>
+        </tr>
+      </tbody>
+    </nz-table>
+  </div>
 </div>

core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss

@@ -0,0 +1,33 @@
+:host ::ng-deep .ant-table-wrapper {
+  width: 500px;
+}
+
+:host ::ng-deep .ant-table-pagination.ant-pagination {
+  margin: 10px;
+}
+
+:host ::ng-deep .ant-table-pagination-right {
+  justify-content: left;
+}
+:host ::ng-deep .ant-table-header {
+  width: 200vw;
+}
+
+:host ::ng-deep .ant-table-body {
+  width: 200vw;
+}
+
+div.scroll {
+  margin: 0px, 0px;
+  padding: 0px;
+  width: 100%;
+  overflow-x: scroll;
+}
+
+td.data-size {
+  font-size: 9px;
+}
+
+th.header-size {
+  font-size: 10px;
+}

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

@@ -75,6 +75,7 @@ export const WORKFLOW_EDITOR_JOINTJS_ID = "texera-workflow-editor-jointjs-body-i
  * @author Henry Chen
  *
  */
+
 @UntilDestroy()
 @Component({
   selector: "texera-workflow-editor",
@@ -160,6 +161,8 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy {
     this.handleOperatorSuggestionHighlightEvent();
     this.dragDropService.registerWorkflowEditorDrop(this.WORKFLOW_EDITOR_JOINTJS_ID);
 
+    this.rightClickContextMenu();
+
     this.handleElementDelete();
     this.handleElementSelectAll();
     this.handleElementCopy();
@@ -602,6 +605,104 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy {
       });
   }
 
+  private rightClickContextMenu(): void {
+    const highlightedOperatorIDs = this.workflowActionService.getJointGraphWrapper().getCurrentHighlightedOperatorIDs();
+
+    const highlightedGroupIDs = this.workflowActionService.getJointGraphWrapper().getCurrentHighlightedGroupIDs();
+
+    var isVisible = function (key: any, opt: { $trigger: { nodeName: string } }) {
+      if (highlightedOperatorIDs.length > 0 || highlightedGroupIDs.length > 0) {
+        return true;
+      } else {
+        return false;
+      }
+    };
+
+    jQuery(() => {
+      jQuery.contextMenu({
+        selector: ".texera-workspace-workflow-editor-body",
+
+        callback: (key: any, options: any) => {
+          if (key == "copy") {
+            this.clearCopiedElements();
+            this.saveHighlighedElements();
+          } else if (key == "paste") {
+            if (this.copiedOperators.size > 0 || this.copiedGroups.size > 0) {
+              const operatorsAndPositions: { op: OperatorPredicate; pos: Point }[] = [];
+              const links: OperatorLink[] = [];
+              const groups: Group[] = [];
+              const positions: Point[] = [];
+
+              this.copiedOperators = new Map<string, CopiedOperator>(
+                Array.from<any>(this.copiedOperators).sort((first, second) => first[1].layer - second[1].layer)
+              );
+
+              this.copiedOperators.forEach((copiedOperator: { operator: any }, operatorID: any) => {
+                const newOperator = this.copyOperator(copiedOperator.operator);
+                const newOperatorPosition = this.calcOperatorPosition(newOperator.operatorID, operatorID, positions);
+                operatorsAndPositions.push({
+                  op: newOperator,
+                  pos: newOperatorPosition,
+                });
+                positions.push(newOperatorPosition);
+              });
+
+              this.copiedGroups.forEach((copiedGroup: { group: any; position: any }, groupID: any) => {
+                const newGroup = this.copyGroup(copiedGroup.group);
+
+                const oldPosition = copiedGroup.position;
+                const newPosition = this.calcGroupPosition(newGroup.groupID, groupID, positions);
+                positions.push(newPosition);
+
+                const delta = {
+                  x: newPosition.x - oldPosition.x,
+                  y: newPosition.y - oldPosition.y,
+                };
+
+                newGroup.operators.forEach(
+                  (operatorInfo: { position: { x: number; y: number }; operator: any }, operatorID: any) => {
+                    operatorInfo.position.x += delta.x;
+                    operatorInfo.position.y += delta.x;
+
+                    operatorsAndPositions.push({
+                      op: operatorInfo.operator,
+                      pos: operatorInfo.position,
+                    });
+                  }
+                );
+
+                newGroup.links.forEach((linkInfo: { link: OperatorLink }, operatorID: any) => {
+                  links.push(linkInfo.link);
+                });
+
+                groups.push(newGroup);
+              });
+
+              this.workflowActionService.addOperatorsAndLinks(operatorsAndPositions, links, groups, new Map());
+            }
+          } else if (key == "cut") {
+            this.clearCopiedElements();
+            this.saveHighlighedElements();
+            this.workflowActionService.deleteOperatorsAndLinks(highlightedOperatorIDs, [], highlightedGroupIDs);
+          } else if (key == "delete") {
+            this.workflowActionService.deleteOperatorsAndLinks(highlightedOperatorIDs, [], highlightedGroupIDs);
+          }
+          if (highlightedOperatorIDs.length == 0 || highlightedGroupIDs.length == 0) {
+          }
+          //var m = "clicked: " + key;
+          //alert(m); '
+          return true;
+        },
+        items: {
+          copy: { name: "Copy", icon: "copy", visible: isVisible },
+          paste: { name: "Paste", icon: "paste" },
+          cut: { name: "Cut", icon: "cut", visible: isVisible },
+          delete: { name: "Delete", icon: "delete", visible: isVisible },
+        },
+      });
+    });
+  }
+
   private handleHighlightMouseDBClickInput(): void {
     fromJointPaperEvent(this.getJointPaper(), "cell:pointerdblclick")
       .pipe(untilDestroyed(this))
@@ -854,6 +955,7 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy {
   }
 
   /**
+   *
    * Handles the event where the Delete button is clicked for a Link,
    *  and call workflowAction to delete the corresponding link.
    *

core/new-gui/src/app/workspace/component/workspace.component.scss

@@ -46,10 +46,10 @@
   grid-template-columns: 200px auto 350px;
   grid-template-rows:
     var(--header-height)
-    calc((100% - var(--header-height) - var(--resultbar-height)) * 0.6)
+    calc((100% - var(--header-height) - var(--resultbar-height)) * 0.4)
     0px
     var(--resultbar-height)
-    calc((100% - var(--header-height) - var(--resultbar-height)) * 0.4);
+    calc((100% - var(--header-height) - var(--resultbar-height)) * 0.6);
   position: relative;
 }
 
@@ -129,8 +129,7 @@
 .texera-result-panel-grid-container {
   grid-column: 2/3;
   grid-row: 5/6;
-  overflow: auto;
-  transition: height 1s;
+  transition: height 2s;
 }
 
 .texera-result-panel-toggle-grid-container {

core/new-gui/src/app/workspace/service/workflow-result/workflow-result.service.ts

@@ -13,9 +13,9 @@ import { Observable, of, Subject } from "rxjs";
 import { v4 as uuid } from "uuid";
 import { ChartType } from "../../types/visualization.interface";
 
-export const DEFAULT_PAGE_SIZE = 10;
+export const DEFAULT_PAGE_SIZE = 5;
 
-/**
+/*
  * WorkflowResultService manages the result data of a workflow execution.
  */
 @Injectable({

core/new-gui/src/environments/environment.default.ts

@@ -14,7 +14,7 @@ export const defaultEnvironment = {
    * whether fetching available source tables is enabled
    * see SourceTablesService for details
    */
-  sourceTableEnabled: false,
+  sourceTableEnabled: true,
   /**
    * whether operator schema propagation and autocomplete feature is enabled,
    * see SchemaPropagationService for details
@@ -36,7 +36,7 @@ export const defaultEnvironment = {
   /**
    * whether user system is enabled
    */
-  userSystemEnabled: false,
+  userSystemEnabled: true,
 
   /**
    * whether user preset feature is enabled, requires user system to be enabled

core/new-gui/src/tsconfig.app.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     // include jqueryui type definition here because Angular does not include it if it's not imported
-    "types": ["jqueryui", "gapi.auth2", "gapi"]
+    "types": ["jqueryui", "jquery.contextmenu", "gapi.auth2", "gapi"]
   },
   // ask Angular to check template error during the compilation process
   "angularCompilerOptions": {