Add Udon breakpoint UI - breakpoint-related operations

core/amber/src/main/python/core/architecture/handlers/control/debug_command_handler.py

@@ -17,6 +17,8 @@ def __call__(self, context: Context, command: cmd, *args, **kwargs):
         context.debug_manager.put_debug_command(translated_command)
 
         # allow MainLoop to switch into DataProcessor.
+        context.pause_manager.resume(PauseType.USER_PAUSE)
+        context.pause_manager.resume(PauseType.EXCEPTION_PAUSE)
         context.pause_manager.resume(PauseType.DEBUG_PAUSE)
 
     @staticmethod

core/amber/src/main/python/core/architecture/handlers/control/replay_current_tuple_handler.py

@@ -20,5 +20,6 @@ def __call__(self, context: Context, command: cmd, *args, **kwargs):
                 [context.tuple_processing_manager.current_input_tuple],
                 context.tuple_processing_manager.current_input_tuple_iter,
             )
+            context.pause_manager.resume(PauseType.USER_PAUSE)
             context.pause_manager.resume(PauseType.EXCEPTION_PAUSE)
         return None

core/amber/src/main/python/core/architecture/managers/pause_manager.py

@@ -53,7 +53,6 @@ def pause_input_channel(
         raise NotImplementedError()
 
     def resume(self, pause_type: PauseType, change_state=True) -> None:
-        logger.debug("resume by " + str(pause_type))
         if pause_type in self._global_pauses:
             self._global_pauses.remove(pause_type)
         # del self._specific_input_pauses[pause_type]

core/amber/src/main/scala/edu/uci/ics/amber/engine/architecture/controller/promisehandlers/ConsoleMessageHandler.scala

@@ -2,10 +2,8 @@ package edu.uci.ics.amber.engine.architecture.controller.promisehandlers
 
 import edu.uci.ics.amber.engine.architecture.controller.ControllerAsyncRPCHandlerInitializer
 import edu.uci.ics.amber.engine.architecture.controller.promisehandlers.ConsoleMessageHandler.ConsoleMessageTriggered
-import edu.uci.ics.amber.engine.architecture.controller.promisehandlers.PauseHandler.PauseWorkflow
 import edu.uci.ics.amber.engine.architecture.worker.controlcommands.ConsoleMessage
 import edu.uci.ics.amber.engine.common.rpc.AsyncRPCServer.ControlCommand
-import edu.uci.ics.amber.engine.common.virtualidentity.util.CONTROLLER
 
 object ConsoleMessageHandler {
   case class ConsoleMessageTriggered(consoleMessage: ConsoleMessage) extends ControlCommand[Unit]
@@ -15,11 +13,6 @@ trait ConsoleMessageHandler {
   this: ControllerAsyncRPCHandlerInitializer =>
   registerHandler[ConsoleMessageTriggered, Unit] { (msg, sender) =>
     {
-      if (msg.consoleMessage.msgType.isError) {
-        // if its an error message, pause the workflow
-        execute(PauseWorkflow(), CONTROLLER)
-      }
-
       // forward message to frontend
       sendToClient(msg)
     }

core/gui/custom-webpack.config.js

@@ -4,15 +4,18 @@ module.exports = {
       {
         test: /\.css$/,
         use: ["style-loader", "css-loader"],
-        include: [require("path").resolve(__dirname, "node_modules/monaco-editor")],
+        include: [
+          require("path").resolve(__dirname, "node_modules/monaco-editor"),
+          require("path").resolve(__dirname, "node_modules/monaco-breakpoints")
+        ],
       },
     ],
     // this is required for loading .wasm (and other) files.
     // For context, see https://stackoverflow.com/a/75252098 and https://github.com/angular/angular-cli/issues/24617
     parser: {
       javascript: {
-        url: true
-      }
-    }
+        url: true,
+      },
+    },
   },
 };

core/gui/package.json

@@ -58,6 +58,7 @@
     "jszip": "3.10.1",
     "lodash-es": "4.17.21",
     "marked": "4.3.0",
+    "monaco-breakpoints": "0.2.0",
     "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@8.0.4",
     "monaco-editor-wrapper": "5.5.3",
     "monaco-languageclient": "8.8.3",

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

@@ -138,6 +138,8 @@ import { HubWorkflowResultComponent } from "./hub/component/workflow/result/hub-
 import { HubWorkflowComponent } from "./hub/component/workflow/hub-workflow.component";
 import { HubWorkflowSearchBarComponent } from "./hub/component/workflow/search-bar/hub-workflow-search-bar.component";
 import { HubWorkflowDetailComponent } from "./hub/component/workflow/detail/hub-workflow-detail.component";
+import { BreakpointConditionInputComponent } from "./workspace/component/code-editor-dialog/breakpoint-condition-input/breakpoint-condition-input.component";
+import { CodeDebuggerComponent } from "./workspace/component/code-editor-dialog/code-debugger.component";
 
 registerLocaleData(en);
 
@@ -226,6 +228,8 @@ registerLocaleData(en);
     HubWorkflowDetailComponent,
     HubWorkflowResultComponent,
     GoogleLoginComponent,
+    BreakpointConditionInputComponent,
+    CodeDebuggerComponent,
   ],
   imports: [
     BrowserModule,

core/gui/src/app/workspace/component/code-editor-dialog/breakpoint-condition-input/breakpoint-condition-input.component.html

@@ -0,0 +1,13 @@
+<div
+  *ngIf="isVisible"
+  class="condition-input-popup"
+  [ngStyle]="{ top: topPosition, left: leftPosition }">
+  <div class="tooltip-header">Condition on line {{ lineNum }}:</div>
+  <textarea
+    #conditionTextarea
+    [(ngModel)]="condition"
+    class="condition-textarea"
+    rows="2">
+  </textarea>
+  {{ conditionTextarea.focus() }}
+</div>

core/gui/src/app/workspace/component/code-editor-dialog/breakpoint-condition-input/breakpoint-condition-input.component.scss

@@ -0,0 +1,59 @@
+.condition-input-popup {
+  position: absolute;
+  background: #333;
+  color: #fff;
+  padding: 5px; /* Larger padding for better UX */
+  border-radius: 3px; /* Smoother rounded corners */
+  z-index: 1000;
+  pointer-events: auto;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 240px;
+  opacity: 1;
+  transition: opacity 1s ease-in-out;
+}
+
+.condition-input-popup .tooltip-header {
+  font-weight: bold;
+  margin-bottom: 5px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.condition-input-popup .condition-textarea {
+  width: 100%;
+  height: 50px;
+  resize: vertical;
+  background-color: transparent;
+  color: white;
+  border: 1px solid #ccc;
+  padding: 5px;
+}
+
+.condition-input-popup.fade-out {
+  opacity: 0;
+  pointer-events: none;
+}
+
+::ng-deep .cgmr.codicon.monaco-conditional-breakpoint {
+  width: 10px !important;
+  height: 10px !important;
+  border-radius: 100%;
+  background-color: #d47d78;
+  margin: 4px 0 0 8px;
+  cursor: pointer;
+  color: #000;
+  text-align: center;
+  font-size: 8px;
+  font-weight: bold;
+}
+
+::ng-deep .cgmr.codicon.monaco-conditional-breakpoint::before {
+  content: "?";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

core/gui/src/app/workspace/component/code-editor-dialog/breakpoint-condition-input/breakpoint-condition-input.component.spec.ts

@@ -0,0 +1,100 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { BreakpointConditionInputComponent } from "./breakpoint-condition-input.component";
+import { UdfDebugService } from "../../../service/operator-debug/udf-debug.service";
+import { SimpleChanges } from "@angular/core";
+import * as monaco from "monaco-editor";
+
+describe("BreakpointConditionInputComponent", () => {
+  let component: BreakpointConditionInputComponent;
+  let fixture: ComponentFixture<BreakpointConditionInputComponent>;
+  let mockUdfDebugService: jasmine.SpyObj<UdfDebugService>;
+  let editorElement: HTMLElement;
+
+  beforeEach(async () => {
+    // Create a mock UdfDebugService
+    mockUdfDebugService = jasmine.createSpyObj("UdfDebugService", ["getCondition", "doUpdateBreakpointCondition"]);
+
+    await TestBed.configureTestingModule({
+      declarations: [BreakpointConditionInputComponent],
+      providers: [{ provide: UdfDebugService, useValue: mockUdfDebugService }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BreakpointConditionInputComponent);
+    component = fixture.componentInstance;
+
+    // Create and attach a <div> to host the Monaco editor
+    editorElement = document.createElement("div");
+    editorElement.style.width = "800px";
+    editorElement.style.height = "600px";
+    document.body.appendChild(editorElement); // Attach to the DOM
+
+    // Initialize the Monaco editor
+    component.monacoEditor = monaco.editor.create(editorElement, {
+      value: "function hello() {\n\tconsole.log(\"Hello, world!\");\n}",
+      language: "javascript",
+    });
+
+    // Set required inputs
+    component.operatorId = "test-operator";
+    component.lineNum = 1;
+
+    fixture.detectChanges(); // Trigger Angular's change detection
+  });
+
+  afterEach(() => {
+    // Clean up the editor and DOM element after each test
+    component.monacoEditor.dispose();
+    editorElement.remove();
+    component.closeEmitter.emit();
+  });
+
+  it("should create the component", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("should update the condition when lineNum changes", () => {
+    mockUdfDebugService.getCondition.and.returnValue("existing condition");
+
+    const changes: SimpleChanges = {
+      lineNum: {
+        currentValue: 2,
+        previousValue: 1,
+        firstChange: false,
+        isFirstChange: () => false,
+      },
+    };
+
+    component.ngOnChanges(changes);
+
+    expect(component.condition).toBe("existing condition");
+  });
+
+  it("should handle Enter key event and save the condition", () => {
+    const emitSpy = spyOn(component.closeEmitter, "emit");
+    const event = new KeyboardEvent("keydown", { key: "Enter" });
+
+    component.condition = " new condition ";
+    component.handleEvent(event);
+
+    expect(mockUdfDebugService.doUpdateBreakpointCondition).toHaveBeenCalledWith("test-operator", 1, "new condition");
+    expect(emitSpy).toHaveBeenCalled();
+  });
+
+  it("should not handle Enter key event if shift key is pressed", () => {
+    const emitSpy = spyOn(component.closeEmitter, "emit");
+    const event = new KeyboardEvent("keydown", { key: "Enter", shiftKey: true });
+
+    component.handleEvent(event);
+
+    expect(mockUdfDebugService.doUpdateBreakpointCondition).not.toHaveBeenCalled();
+    expect(emitSpy).not.toHaveBeenCalled();
+  });
+
+  it("should emit close event on focusout", () => {
+    const emitSpy = spyOn(component.closeEmitter, "emit");
+
+    component.handleEvent(); // Simulate focusout
+
+    expect(emitSpy).toHaveBeenCalled();
+  });
+});

core/gui/src/app/workspace/component/code-editor-dialog/breakpoint-condition-input/breakpoint-condition-input.component.ts

@@ -0,0 +1,101 @@
+import {
+  AfterViewChecked,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from "@angular/core";
+import { UdfDebugService } from "../../../service/operator-debug/udf-debug.service";
+import { isDefined } from "../../../../common/util/predicate";
+import { MonacoEditor } from "monaco-breakpoints/dist/types";
+
+/**
+ * This component is a dialog that allows users to input a condition for a breakpoint.
+ */
+@Component({
+  selector: "texera-breakpoint-condition-input",
+  templateUrl: "./breakpoint-condition-input.component.html",
+  styleUrls: ["./breakpoint-condition-input.component.scss"],
+})
+export class BreakpointConditionInputComponent implements OnChanges {
+  constructor(private udfDebugService: UdfDebugService) {}
+
+  @Input() operatorId = "";
+  @Input() lineNum?: number;
+  @Input() monacoEditor!: MonacoEditor;
+  @Output() closeEmitter = new EventEmitter<void>();
+  public condition = "";
+  public topPosition: string = "0px";
+  public leftPosition: string = "0px";
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!isDefined(changes["lineNum"]?.currentValue)) {
+      return;
+    }
+    // when the line number changes, update the condition
+    this.condition = this.udfDebugService.getCondition(this.operatorId, this.lineNum!) ?? "";
+
+    // update position
+    const layoutInfo = this.monacoEditor.getLayoutInfo();
+    const editorRect = this.monacoEditor.getDomNode()?.getBoundingClientRect();
+    const topValue =
+      (editorRect?.top || 0) +
+      this.monacoEditor.getBottomForLineNumber(this.lineNum!) -
+      this.monacoEditor.getScrollTop();
+    const leftValue = (editorRect?.left || 0) + (layoutInfo?.glyphMarginLeft || 0) - 160;
+    this.topPosition = `${topValue}px`;
+    this.leftPosition = `${leftValue}px`;
+  }
+
+  public left(): number {
+    if (!isDefined(this.monacoEditor)) {
+      return 0;
+    }
+
+    // Calculate the left position of the input popup based on the editor layout
+    const { glyphMarginLeft } = this.monacoEditor.getLayoutInfo()!;
+    const { left } = this.monacoEditor.getDomNode()!.getBoundingClientRect();
+    return left + glyphMarginLeft - this.monacoEditor.getScrollLeft() - 160;
+  }
+
+  public top(): number {
+    if (!(isDefined(this.monacoEditor) && isDefined(this.lineNum))) {
+      return 0;
+    }
+
+    // Calculate the top position of the input popup based on the editor layout
+    const topPixel = this.monacoEditor.getBottomForLineNumber(this.lineNum);
+    const editorRect = this.monacoEditor.getDomNode()?.getBoundingClientRect();
+    return (editorRect?.top || 0) + topPixel - this.monacoEditor.getScrollTop();
+  }
+
+  get isVisible(): boolean {
+    return isDefined(this.lineNum);
+  }
+
+  /**
+   * Update the condition and close the dialog when the user presses Enter or focus out.
+   * @param event the keyboard event, or undefined if the event is focus out.
+   */
+  @HostListener("window:keydown", ["$event"])
+  @HostListener("focusout")
+  handleEvent(event?: KeyboardEvent): void {
+    if (!this.lineNum || (event && !(event.key === "Enter" && !event.shiftKey))) {
+      // perform no changes if no line number or the key is not Enter
+      return;
+    }
+
+    // prevent the default behavior of the Enter key
+    event?.preventDefault();
+
+    // save the updated condition
+    this.udfDebugService.doUpdateBreakpointCondition(this.operatorId, this.lineNum, this.condition.trim());
+
+    // close the dialog
+    this.closeEmitter.emit();
+  }
+}

core/gui/src/app/workspace/component/code-editor-dialog/code-debugger.component.html

@@ -0,0 +1,6 @@
+<texera-breakpoint-condition-input
+  [operatorId]="this.currentOperatorId"
+  [lineNum]="breakpointConditionLine"
+  [monacoEditor]="monacoEditor"
+  (closeEmitter)="closeBreakpointConditionInput()">
+</texera-breakpoint-condition-input>