From e54d4161cfa01850dd0caa77675628bf8d20c45e Mon Sep 17 00:00:00 2001
From: Azra-Zahin <azraz@uci.edu>
Date: Mon, 4 Jul 2022 14:17:42 -0700
Subject: [PATCH 01/14] Updating the Texera UI display for the results table
 with enhanced readability with larger columns and adding scroll bars. Also
 displaying message when no results are shown in empty results panel.

---
 .../result-panel/result-panel.component.html  |  3 +
 .../result-table-frame.component.html         | 58 ++++++++++---------
 .../result-table-frame.component.scss         | 18 ++++++
 3 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html
index 88ba14308f0..b0382dead0c 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html
@@ -1,4 +1,7 @@
 <div [hidden]="!showResultPanel" class="texera-workspace-result-panel-body texera-workflow-component-body">
+  <div *ngIf="frameComponentConfigs.size == 0" style="text-align: center">
+    <h4>No results available to display.</h4>
+  </div>
   <nz-tabset [nzSize]="'small'" [nzTabPosition]="'left'">
     <div *ngFor="let config of frameComponentConfigs | keyvalue">
       <nz-tab nzTitle="{{config.key}}">
diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html
index 0bc036c3be0..d294f7d9766 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html
@@ -1,30 +1,32 @@
 <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">{{ 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>
 </div>
diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
index e69de29bb2d..2e9e0745960 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
@@ -0,0 +1,18 @@
+:host ::ng-deep .ant-table-wrapper {
+  width: 300px;
+}
+
+:host ::ng-deep .ant-table-header {
+  width: 300vw;
+}
+
+:host ::ng-deep .ant-table-body {
+  width: 300vw;
+}
+
+div.scroll {
+  margin: 4px, 4px;
+  padding: 4px;
+  width: 100%;
+  overflow-x: auto;
+}

From 7a24e51df1619fb69b02d112bd6891b3feda8340 Mon Sep 17 00:00:00 2001
From: Azra-Zahin <azraz@uci.edu>
Date: Wed, 6 Jul 2022 23:29:56 -0700
Subject: [PATCH 02/14] Removed the external scroll bar; resized the results
 table to make it more compact; display text to distinguish between "no
 result" and "empty result set"

---
 .../result-table-frame.component.html              |  7 +++++--
 .../result-table-frame.component.scss              | 14 +++++++++++---
 .../workspace/component/workspace.component.scss   |  4 ++--
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html
index d294f7d9766..37a60dde95a 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html
@@ -1,3 +1,6 @@
+<div *ngIf = "!currentResult || currentResult.length == 0" style="text-align:center">
+  <h4>Empty result set.</h4>
+</div>
 <div [hidden]="!currentColumns" class="result-table">
   <div ngClass="scroll">
     <nz-table
@@ -17,12 +20,12 @@
     >
       <thead>
         <tr>
-          <th *ngFor="let column of currentColumns">{{ column.header }}</th>
+          <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>
+          <td (click)="open(row)" *ngFor="let column of currentColumns" class="table-row" nzEllipsis ngClass="data-size">
             {{ column.getCell(row) }}
           </td>
         </tr>
diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
index 2e9e0745960..7f2ad58991a 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
@@ -3,16 +3,24 @@
 }
 
 :host ::ng-deep .ant-table-header {
-  width: 300vw;
+  width: 150vw;
 }
 
 :host ::ng-deep .ant-table-body {
-  width: 300vw;
+  width: 150vw;
 }
 
 div.scroll {
-  margin: 4px, 4px;
+  margin: 1px, 1px;
   padding: 4px;
   width: 100%;
   overflow-x: auto;
 }
+
+td.data-size{
+  font-size: xx-small;
+}
+
+th.header-size{
+  font-size: xx-small;
+}
\ No newline at end of file
diff --git a/core/new-gui/src/app/workspace/component/workspace.component.scss b/core/new-gui/src/app/workspace/component/workspace.component.scss
index d9e167c63f3..f91cd1876a2 100644
--- a/core/new-gui/src/app/workspace/component/workspace.component.scss
+++ b/core/new-gui/src/app/workspace/component/workspace.component.scss
@@ -129,8 +129,8 @@
 .texera-result-panel-grid-container {
   grid-column: 2/3;
   grid-row: 5/6;
-  overflow: auto;
-  transition: height 1s;
+  /*overflow: auto;*/
+  transition: height 2s;
 }
 
 .texera-result-panel-toggle-grid-container {

From 8d4896f09e5a21de820c0ac8685c13f53a96b731 Mon Sep 17 00:00:00 2001
From: Azra-Zahin <azraz@uci.edu>
Date: Wed, 6 Jul 2022 23:45:40 -0700
Subject: [PATCH 03/14] Removed the external scroll bar; Updated the results
 table to make the display more compact; Display text to distinguish bewteen
 "no result" and "empty result set"

---
 .../result-table-frame.component.html              | 14 +++++++++++---
 .../result-table-frame.component.scss              |  6 +++---
 .../workspace/component/workspace.component.scss   |  1 -
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html
index 37a60dde95a..db3bf296679 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.html
@@ -1,4 +1,4 @@
-<div *ngIf = "!currentResult || currentResult.length == 0" style="text-align:center">
+<div *ngIf="!currentResult || currentResult.length == 0" style="text-align: center">
   <h4>Empty result set.</h4>
 </div>
 <div [hidden]="!currentColumns" class="result-table">
@@ -20,12 +20,20 @@ <h4>Empty result set.</h4>
     >
       <thead>
         <tr>
-          <th *ngFor="let column of currentColumns" ngClass="header-size" style="text-align: center">{{ column.header }}</th>
+          <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">
+          <td
+            (click)="open(row)"
+            *ngFor="let column of currentColumns"
+            class="table-row"
+            nzEllipsis
+            ngClass="data-size"
+          >
             {{ column.getCell(row) }}
           </td>
         </tr>
diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
index 7f2ad58991a..97fb47366cd 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
@@ -17,10 +17,10 @@ div.scroll {
   overflow-x: auto;
 }
 
-td.data-size{
+td.data-size {
   font-size: xx-small;
 }
 
-th.header-size{
+th.header-size {
   font-size: xx-small;
-}
\ No newline at end of file
+}
diff --git a/core/new-gui/src/app/workspace/component/workspace.component.scss b/core/new-gui/src/app/workspace/component/workspace.component.scss
index f91cd1876a2..e3a151ef584 100644
--- a/core/new-gui/src/app/workspace/component/workspace.component.scss
+++ b/core/new-gui/src/app/workspace/component/workspace.component.scss
@@ -129,7 +129,6 @@
 .texera-result-panel-grid-container {
   grid-column: 2/3;
   grid-row: 5/6;
-  /*overflow: auto;*/
   transition: height 2s;
 }
 

From 37cea092c99b8451a3db941fbd57de141c65fc14 Mon Sep 17 00:00:00 2001
From: Azra-Zahin <azraz@uci.edu>
Date: Mon, 11 Jul 2022 18:05:04 -0700
Subject: [PATCH 04/14] Adjusted the number of rows displayed per page

---
 .../service/workflow-result/workflow-result.service.ts        | 2 +-
 core/new-gui/src/environments/environment.default.ts          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/new-gui/src/app/workspace/service/workflow-result/workflow-result.service.ts b/core/new-gui/src/app/workspace/service/workflow-result/workflow-result.service.ts
index df1f27b9862..2365ccb68a4 100644
--- a/core/new-gui/src/app/workspace/service/workflow-result/workflow-result.service.ts
+++ b/core/new-gui/src/app/workspace/service/workflow-result/workflow-result.service.ts
@@ -13,7 +13,7 @@ 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.
diff --git a/core/new-gui/src/environments/environment.default.ts b/core/new-gui/src/environments/environment.default.ts
index ac9a51ba010..c42c40b6880 100644
--- a/core/new-gui/src/environments/environment.default.ts
+++ b/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

From 22331c8c447279cd711dea40d5209ccbeef62aa6 Mon Sep 17 00:00:00 2001
From: Azra-Zahin <azraz@uci.edu>
Date: Mon, 11 Jul 2022 18:14:21 -0700
Subject: [PATCH 05/14] Updated result & table display; fixed scroll bars

---
 .../result-panel/result-panel.component.html  | 11 ++++++---
 .../result-panel/result-panel.component.scss  |  2 +-
 .../result-table-frame.component.scss         | 23 ++++++++++++-------
 .../component/workspace.component.scss        |  4 ++--
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html
index b0382dead0c..7a39573b78e 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html
@@ -1,8 +1,13 @@
 <div [hidden]="!showResultPanel" class="texera-workspace-result-panel-body texera-workflow-component-body">
-  <div *ngIf="frameComponentConfigs.size == 0" style="text-align: center">
-    <h4>No results available to display.</h4>
-  </div>
   <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>
+
     <div *ngFor="let config of frameComponentConfigs | keyvalue">
       <nz-tab nzTitle="{{config.key}}">
         <ndc-dynamic
diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss
index cacff51a417..436264007f1 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss
+++ b/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;
   }
 }
 
diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
index 97fb47366cd..2fa38e9fea1 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
@@ -1,26 +1,33 @@
 :host ::ng-deep .ant-table-wrapper {
-  width: 300px;
+  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: 150vw;
+  width: 200vw;
 }
 
 :host ::ng-deep .ant-table-body {
-  width: 150vw;
+  width: 200vw;
 }
 
 div.scroll {
-  margin: 1px, 1px;
-  padding: 4px;
+  margin: 0px, 0px;
+  padding: 0px;
   width: 100%;
-  overflow-x: auto;
+  overflow-x: scroll;
 }
 
 td.data-size {
-  font-size: xx-small;
+  font-size: 9px;
 }
 
 th.header-size {
-  font-size: xx-small;
+  font-size: 10px;
 }
diff --git a/core/new-gui/src/app/workspace/component/workspace.component.scss b/core/new-gui/src/app/workspace/component/workspace.component.scss
index e3a151ef584..4c754e36b17 100644
--- a/core/new-gui/src/app/workspace/component/workspace.component.scss
+++ b/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;
 }
 

From 0ab54861ff9cecac5d6a1597bb0a428550d334f3 Mon Sep 17 00:00:00 2001
From: Azra-Zahin <azraz@uci.edu>
Date: Tue, 12 Jul 2022 07:48:34 -0700
Subject: [PATCH 06/14] Updated results & table display; Fixed scroll bars

---
 .../result-panel/result-panel.component.html  | 11 ++++++---
 .../result-panel/result-panel.component.scss  |  2 +-
 .../result-table-frame.component.scss         | 23 ++++++++++++-------
 .../component/workspace.component.scss        |  4 ++--
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html
index b0382dead0c..7a39573b78e 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html
@@ -1,8 +1,13 @@
 <div [hidden]="!showResultPanel" class="texera-workspace-result-panel-body texera-workflow-component-body">
-  <div *ngIf="frameComponentConfigs.size == 0" style="text-align: center">
-    <h4>No results available to display.</h4>
-  </div>
   <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>
+
     <div *ngFor="let config of frameComponentConfigs | keyvalue">
       <nz-tab nzTitle="{{config.key}}">
         <ndc-dynamic
diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss
index cacff51a417..436264007f1 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss
+++ b/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;
   }
 }
 
diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
index 97fb47366cd..2fa38e9fea1 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
@@ -1,26 +1,33 @@
 :host ::ng-deep .ant-table-wrapper {
-  width: 300px;
+  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: 150vw;
+  width: 200vw;
 }
 
 :host ::ng-deep .ant-table-body {
-  width: 150vw;
+  width: 200vw;
 }
 
 div.scroll {
-  margin: 1px, 1px;
-  padding: 4px;
+  margin: 0px, 0px;
+  padding: 0px;
   width: 100%;
-  overflow-x: auto;
+  overflow-x: scroll;
 }
 
 td.data-size {
-  font-size: xx-small;
+  font-size: 9px;
 }
 
 th.header-size {
-  font-size: xx-small;
+  font-size: 10px;
 }
diff --git a/core/new-gui/src/app/workspace/component/workspace.component.scss b/core/new-gui/src/app/workspace/component/workspace.component.scss
index e3a151ef584..4c754e36b17 100644
--- a/core/new-gui/src/app/workspace/component/workspace.component.scss
+++ b/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;
 }
 

From f0792f40008867916830defe9cdaf0f1db22d6a3 Mon Sep 17 00:00:00 2001
From: Azra-Zahin <azraz@uci.edu>
Date: Tue, 12 Jul 2022 08:31:27 -0700
Subject: [PATCH 07/14] Fixed scroll bars; Updated results & table display

---
 .../component/result-panel/result-panel.component.html          | 2 +-
 .../component/result-panel/result-panel.component.scss          | 1 +
 .../result-table-frame/result-table-frame.component.scss        | 1 +
 .../src/app/workspace/component/workspace.component.scss        | 1 +
 4 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html
index 7a39573b78e..406b84d9cce 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.html
@@ -7,7 +7,7 @@ <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
diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss
index 436264007f1..6896fa9678b 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss
@@ -1,5 +1,6 @@
 @import "../workspace.component.scss";
 
+//xx
 .texera-workspace-result-panel-body {
   .result-table {
     padding: 1px;
diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
index 2fa38e9fea1..5a1bd65098e 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
@@ -2,6 +2,7 @@
   width: 500px;
 }
 
+//xx
 :host ::ng-deep .ant-table-pagination.ant-pagination {
   margin: 10px;
 }
diff --git a/core/new-gui/src/app/workspace/component/workspace.component.scss b/core/new-gui/src/app/workspace/component/workspace.component.scss
index 4c754e36b17..108daa613f6 100644
--- a/core/new-gui/src/app/workspace/component/workspace.component.scss
+++ b/core/new-gui/src/app/workspace/component/workspace.component.scss
@@ -9,6 +9,7 @@
   height: 100%;
 }
 
+//xx
 .texera-workspace {
   // transition: grid-template-rows 0.5s;
   --header-height: 56px;

From 92899698def22beb7f6ef47fb12f79b643e4a55c Mon Sep 17 00:00:00 2001
From: Azra-Zahin <azraz@uci.edu>
Date: Tue, 12 Jul 2022 10:25:10 -0700
Subject: [PATCH 08/14] Changed the defaultPageSize to 5

---
 .../scala/edu/uci/ics/texera/web/service/JobResultService.scala | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/service/JobResultService.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/service/JobResultService.scala
index a5b8168b3ae..d0c367faa69 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/service/JobResultService.scala
+++ b/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(

From 1def8decba74e9c4ab3bdb1fa4a425aff983ff4f Mon Sep 17 00:00:00 2001
From: Azra-Zahin <azraz@uci.edu>
Date: Wed, 13 Jul 2022 21:30:03 -0700
Subject: [PATCH 09/14] Cleaned up code: removed comments

---
 .../workspace/component/result-panel/result-panel.component.scss | 1 -
 .../result-table-frame/result-table-frame.component.scss         | 1 -
 .../new-gui/src/app/workspace/component/workspace.component.scss | 1 -
 3 files changed, 3 deletions(-)

diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss
index 6896fa9678b..436264007f1 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-panel.component.scss
@@ -1,6 +1,5 @@
 @import "../workspace.component.scss";
 
-//xx
 .texera-workspace-result-panel-body {
   .result-table {
     padding: 1px;
diff --git a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
index 5a1bd65098e..2fa38e9fea1 100644
--- a/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
+++ b/core/new-gui/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.scss
@@ -2,7 +2,6 @@
   width: 500px;
 }
 
-//xx
 :host ::ng-deep .ant-table-pagination.ant-pagination {
   margin: 10px;
 }
diff --git a/core/new-gui/src/app/workspace/component/workspace.component.scss b/core/new-gui/src/app/workspace/component/workspace.component.scss
index 108daa613f6..4c754e36b17 100644
--- a/core/new-gui/src/app/workspace/component/workspace.component.scss
+++ b/core/new-gui/src/app/workspace/component/workspace.component.scss
@@ -9,7 +9,6 @@
   height: 100%;
 }
 
-//xx
 .texera-workspace {
   // transition: grid-template-rows 0.5s;
   --header-height: 56px;

From d8eca8105d2a837e4bf1b19e4242476b9731f3bb Mon Sep 17 00:00:00 2001
From: Azra-Zahin <azraz@uci.edu>
Date: Wed, 13 Jul 2022 21:41:09 -0700
Subject: [PATCH 10/14] Removed environment changes from PR

---
 .../service/workflow-result/workflow-result.service.ts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/new-gui/src/app/workspace/service/workflow-result/workflow-result.service.ts b/core/new-gui/src/app/workspace/service/workflow-result/workflow-result.service.ts
index 2365ccb68a4..5befdc46ffb 100644
--- a/core/new-gui/src/app/workspace/service/workflow-result/workflow-result.service.ts
+++ b/core/new-gui/src/app/workspace/service/workflow-result/workflow-result.service.ts
@@ -15,7 +15,7 @@ import { ChartType } from "../../types/visualization.interface";
 
 export const DEFAULT_PAGE_SIZE = 5;
 
-/**
+/*
  * WorkflowResultService manages the result data of a workflow execution.
  */
 @Injectable({

From a2b6c28eabe3594c06fddb2cda128b774799d51a Mon Sep 17 00:00:00 2001
From: Azra-Zahin <azraz@uci.edu>
Date: Wed, 10 Aug 2022 14:23:21 -0700
Subject: [PATCH 11/14] Enable custom right-click context menu

---
 core/new-gui/angular.json                     |   4 +
 core/new-gui/package.json                     |   1 +
 .../workflow-editor.component.ts              | 105 ++++++++++++++++++
 core/new-gui/yarn.lock                        |   9 +-
 4 files changed, 118 insertions(+), 1 deletion(-)

diff --git a/core/new-gui/angular.json b/core/new-gui/angular.json
index 935108a0e26..438c4490ba1 100644
--- a/core/new-gui/angular.json
+++ b/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": [
diff --git a/core/new-gui/package.json b/core/new-gui/package.json
index 9cb4b99e4db..0d555c9e41b 100644
--- a/core/new-gui/package.json
+++ b/core/new-gui/package.json
@@ -60,6 +60,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",
diff --git a/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts b/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
index 378ef07b16a..9fcf2ecff19 100644
--- a/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
+++ b/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
@@ -72,6 +72,10 @@ export const WORKFLOW_EDITOR_JOINTJS_ID = "texera-workflow-editor-jointjs-body-i
  * @author Henry Chen
  *
  */
+
+// this code is causing the unit test to fail
+declare var $: any;
+
 @UntilDestroy()
 @Component({
   selector: "texera-workflow-editor",
@@ -147,6 +151,8 @@ export class WorkflowEditorComponent implements AfterViewInit {
     this.handleOperatorSuggestionHighlightEvent();
     this.dragDropService.registerWorkflowEditorDrop(this.WORKFLOW_EDITOR_JOINTJS_ID);
 
+    this.rightClickContextMenu();
+
     this.handleElementDelete();
     this.handleElementSelectAll();
     this.handleElementCopy();
@@ -553,6 +559,104 @@ export class WorkflowEditorComponent implements AfterViewInit {
       });
   }
 
+  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(() => {
+      $.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))
@@ -805,6 +909,7 @@ export class WorkflowEditorComponent implements AfterViewInit {
   }
 
   /**
+   *
    * Handles the event where the Delete button is clicked for a Link,
    *  and call workflowAction to delete the corresponding link.
    *
diff --git a/core/new-gui/yarn.lock b/core/new-gui/yarn.lock
index 2553b03c6ab..ed95a494fba 100644
--- a/core/new-gui/yarn.lock
+++ b/core/new-gui/yarn.lock
@@ -8897,6 +8897,13 @@ jointjs@~3.5.4:
     jquery "~3.6.0"
     lodash "~4.17.21"
 
+jquery-contextmenu@2.9.2:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/jquery-contextmenu/-/jquery-contextmenu-2.9.2.tgz#f9dc362e45871dda2e50fa45de2243e917446ced"
+  integrity sha512-6S6sH/08owDStC/7zNwcN366yR0ydX6PmMB0RnjLRQOp7Nc/rqwEHglshfHrrw2kdTev97GXwRXrayDUmToIOw==
+  dependencies:
+    jquery "^3.5.0"
+
 jquery-ui-dist@~1.13.1:
   version "1.13.1"
   resolved "https://registry.npmjs.org/jquery-ui-dist/-/jquery-ui-dist-1.13.1.tgz"
@@ -8904,7 +8911,7 @@ jquery-ui-dist@~1.13.1:
   dependencies:
     jquery ">=1.8.0 <4.0.0"
 
-"jquery@>=1.8.0 <4.0.0", jquery@~3.6.0:
+"jquery@>=1.8.0 <4.0.0", jquery@^3.5.0, jquery@~3.6.0:
   version "3.6.0"
   resolved "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz"
   integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==

From 03584ce4dd8b55a5bd8ecf5197af420f272395db Mon Sep 17 00:00:00 2001
From: Azra-Zahin <azraz@uci.edu>
Date: Wed, 10 Aug 2022 16:31:03 -0700
Subject: [PATCH 12/14] Add right-click context menu

---
 .../component/workflow-editor/workflow-editor.component.ts      | 1 -
 core/new-gui/yarn.lock                                          | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts b/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
index 9ecb03a64d4..5c348bde39f 100644
--- a/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
+++ b/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
@@ -76,7 +76,6 @@ export const WORKFLOW_EDITOR_JOINTJS_ID = "texera-workflow-editor-jointjs-body-i
  *
  */
 
-// this code is causing the unit test to fail
 declare var $: any;
 
 @UntilDestroy()
diff --git a/core/new-gui/yarn.lock b/core/new-gui/yarn.lock
index d5cbb71c474..8c143bc6d49 100644
--- a/core/new-gui/yarn.lock
+++ b/core/new-gui/yarn.lock
@@ -8902,7 +8902,7 @@ jointjs@~3.5.4:
     jquery "~3.6.0"
     lodash "~4.17.21"
 
-jquery-contextmenu@2.9.2:
+jquery-contextmenu@^2.9.2:
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/jquery-contextmenu/-/jquery-contextmenu-2.9.2.tgz#f9dc362e45871dda2e50fa45de2243e917446ced"
   integrity sha512-6S6sH/08owDStC/7zNwcN366yR0ydX6PmMB0RnjLRQOp7Nc/rqwEHglshfHrrw2kdTev97GXwRXrayDUmToIOw==

From 7dc24929202b10857a1e07d3a8bacd21af72abac Mon Sep 17 00:00:00 2001
From: Zuozhi Wang <zuozhiw@gmail.com>
Date: Thu, 18 Aug 2022 09:51:50 -0700
Subject: [PATCH 13/14] add type definition

---
 core/new-gui/package.json                                  | 1 +
 .../component/workflow-editor/workflow-editor.component.ts | 4 ++--
 core/new-gui/src/tsconfig.app.json                         | 2 +-
 core/new-gui/yarn.lock                                     | 7 +++++++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/core/new-gui/package.json b/core/new-gui/package.json
index 17c1ea8c2e4..8a7c423fbbd 100644
--- a/core/new-gui/package.json
+++ b/core/new-gui/package.json
@@ -110,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",
diff --git a/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts b/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
index 5c348bde39f..cdb605822a0 100644
--- a/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
+++ b/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
@@ -76,7 +76,7 @@ export const WORKFLOW_EDITOR_JOINTJS_ID = "texera-workflow-editor-jointjs-body-i
  *
  */
 
-declare var $: any;
+// declare var $: any;
 
 @UntilDestroy()
 @Component({
@@ -621,7 +621,7 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy {
     };
 
     jQuery(() => {
-      $.contextMenu({
+      jQuery.contextMenu({
         selector: ".texera-workspace-workflow-editor-body",
 
         callback: (key: any, options: any) => {
diff --git a/core/new-gui/src/tsconfig.app.json b/core/new-gui/src/tsconfig.app.json
index 26727d8c999..4a93fd74166 100644
--- a/core/new-gui/src/tsconfig.app.json
+++ b/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": {
diff --git a/core/new-gui/yarn.lock b/core/new-gui/yarn.lock
index 8c143bc6d49..1418850c329 100644
--- a/core/new-gui/yarn.lock
+++ b/core/new-gui/yarn.lock
@@ -3339,6 +3339,13 @@
   dependencies:
     "@types/jasmine" "*"
 
+"@types/jquery.contextmenu@1.7.35":
+  version "1.7.35"
+  resolved "https://registry.yarnpkg.com/@types/jquery.contextmenu/-/jquery.contextmenu-1.7.35.tgz#f7fc43f0c5529c48bd687ef5aaf858a3090cca2f"
+  integrity sha512-0KmOOYgU6ySqOcglRYxFz8KyoFyOeN5YJ0ykg8IL1SJmmLTkeplVixqspcSmFtpLRORPl46a893An5YbuLr6rw==
+  dependencies:
+    "@types/jquery" "*"
+
 "@types/jquery@*", "@types/jquery@~3.5.14":
   version "3.5.14"
   resolved "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.14.tgz"

From 2cde695b85edf21ef5b9b80989006ece22696a7d Mon Sep 17 00:00:00 2001
From: Zuozhi Wang <zuozhiw@gmail.com>
Date: Thu, 18 Aug 2022 10:58:31 -0700
Subject: [PATCH 14/14] remove commented out line

---
 .../component/workflow-editor/workflow-editor.component.ts      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts b/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
index cdb605822a0..e08bbe14c90 100644
--- a/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
+++ b/core/new-gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
@@ -76,8 +76,6 @@ export const WORKFLOW_EDITOR_JOINTJS_ID = "texera-workflow-editor-jointjs-body-i
  *
  */
 
-// declare var $: any;
-
 @UntilDestroy()
 @Component({
   selector: "texera-workflow-editor",