feat(gui): Display the status for each operator during execution

frontend/src/app/workspace/component/menu/menu.component.html

@@ -180,6 +180,14 @@
                   >Workers</label
                 >
               </li>
+              <li nz-menu-item>
+                <label
+                  nz-checkbox
+                  [(ngModel)]="showStatus"
+                  (ngModelChange)="toggleStatus()"
+                  >Status</label
+                >
+              </li>
             </ul>
           </nz-dropdown-menu>
           <button

frontend/src/app/workspace/component/menu/menu.component.ts

@@ -92,6 +92,7 @@ export class MenuComponent implements OnInit, OnDestroy {
   public showRegion: boolean = false;
   public showGrid: boolean = false;
   public showNumWorkers: boolean = false;
+  public showStatus: boolean = false;
   protected readonly DASHBOARD_USER_WORKFLOW = DASHBOARD_USER_WORKFLOW;
 
   @Input() public writeAccess: boolean = false;
@@ -261,6 +262,16 @@ export class MenuComponent implements OnInit, OnDestroy {
     this.workflowActionService
       .getJointGraphWrapper()
       .mainPaper.el.classList.toggle("hide-worker-count", !this.showNumWorkers);
+    const refY = this.showNumWorkers ? -50 : -35;
+    (this.workflowActionService.getJointGraphWrapper().mainPaper.model as any)
+      .getElements()
+      .forEach((el: any) => el.attr(".operator-status/ref-y", refY));
+  }
+
+  toggleStatus() {
+    this.workflowActionService
+      .getJointGraphWrapper()
+      .mainPaper.el.classList.toggle("hide-operator-status", !this.showStatus);
   }
 
   public async onClickOpenShareAccess(): Promise<void> {

frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.scss

@@ -28,3 +28,7 @@
 ::ng-deep .hide-worker-count .operator-worker-count {
   display: none;
 }
+
+::ng-deep .hide-operator-status .operator-status {
+  display: none;
+}

frontend/src/app/workspace/service/joint-ui/joint-ui.service.ts

@@ -141,6 +141,7 @@ class TexeraCustomJointElement extends joint.shapes.devs.Model {
       <text class="${operatorNameClass}"></text>
       <text class="${operatorPortMetricsClass}"></text>
       <text class="${operatorWorkerCountClass}"></text>
+      <text class="${operatorStatusTextClass}"></text>
       <text class="${operatorStateClass}"></text>
       <text class="${operatorReuseCacheTextClass}"></text>
       <text class="${operatorCoeditorEditingClass}"></text>
@@ -324,6 +325,11 @@ export class JointUIService {
     const workerCount = statistics.numWorkers ?? 1;
     element.attr(`.${operatorWorkerCountClass}/text`, "#workers: " + String(workerCount));
 
+    element.attr(
+      `.${operatorStatusTextClass}/text`,
+      "status: " + JointUIService.getStatusDisplayText(statistics.operatorState)
+    );
+
     inPorts.forEach(portDef => {
       const portId = portDef.id;
       if (portId != null) {
@@ -416,11 +422,14 @@ export class JointUIService {
         break;
     }
     jointPaper.getModelById(operatorID).attr({
-      [`.${operatorStateClass}`]: { text: operatorState.toString() },
-      [`.${operatorStateClass}`]: { fill: fillColor },
+      [`.${operatorStateClass}`]: {
+        text: String(operatorState),
+        fill: fillColor,
+      },
       "rect.body": { stroke: fillColor },
       [`.${operatorPortMetricsClass}`]: { fill: fillColor },
       [`.${operatorWorkerCountClass}`]: { fill: fillColor },
+      [`.${operatorStatusTextClass}`]: { fill: fillColor },
     });
     const element = jointPaper.getModelById(operatorID) as joint.shapes.devs.Model;
     const allPorts = element.getPorts();
@@ -812,6 +821,13 @@ export class JointUIService {
         "ref-x": -5,
         "ref-y": -35,
       },
+      [`.${operatorStatusTextClass}`]: {
+        "ref-x": 0.5,
+        "ref-y": -50,
+        ref: "rect.body",
+        "y-alignment": "middle",
+        "x-alignment": "middle",
+      },
       ".delete-button": {
         x: 60,
         y: -20,
@@ -977,6 +993,13 @@ export class JointUIService {
     return userCursor;
   }
 
+  private static getStatusDisplayText(state: OperatorState): string {
+    if (state === OperatorState.Uninitialized) {
+      return "Waiting";
+    }
+    return String(state);
+  }
+
   public static getJointUserPointerName(coeditor: Coeditor) {
     return "pointer_" + coeditor.clientId;
   }