Fire an event when clicking the "model alerts indicator" button (#3516)

Author: shati-patel

extensions/ql-vscode/src/common/interface-types.ts

@@ -605,6 +605,11 @@ interface OpenModelAlertsViewMessage {
   t: "openModelAlertsView";
 }
 
+interface RevealInModelAlertsViewMessage {
+  t: "revealInModelAlertsView";
+  modeledMethod: ModeledMethod;
+}
+
 interface ModelDependencyMessage {
   t: "modelDependency";
 }
@@ -677,7 +682,8 @@ export type FromModelEditorMessage =
   | SetMultipleModeledMethodsMessage
   | StartModelEvaluationMessage
   | StopModelEvaluationMessage
-  | OpenModelAlertsViewMessage;
+  | OpenModelAlertsViewMessage
+  | RevealInModelAlertsViewMessage;
 
 interface RevealInEditorMessage {
   t: "revealInModelEditor";

extensions/ql-vscode/src/model-editor/model-editor-view.ts

@@ -384,6 +384,9 @@ export class ModelEditorView extends AbstractWebview<
       case "openModelAlertsView":
         await this.modelEvaluator.openModelAlertsView();
         break;
+      case "revealInModelAlertsView":
+        await this.modelEvaluator.revealInModelAlertsView(msg.modeledMethod);
+        break;
       case "telemetry":
         telemetryListener?.sendUIInteraction(msg.action);
         break;

extensions/ql-vscode/src/model-editor/model-evaluator.ts

@@ -21,6 +21,7 @@ import type { QlPackDetails } from "../variant-analysis/ql-pack-details";
 import type { App } from "../common/app";
 import { ModelAlertsView } from "./model-alerts/model-alerts-view";
 import type { ExtensionPack } from "./shared/extension-pack";
+import type { ModeledMethod } from "./modeled-method";
 
 export class ModelEvaluator extends DisposableObject {
   // Cancellation token source to allow cancelling of the current run
@@ -158,6 +159,16 @@ export class ModelEvaluator extends DisposableObject {
     }
   }
 
+  public async revealInModelAlertsView(modeledMethod: ModeledMethod) {
+    if (!this.modelingStore.isModelAlertsViewOpen(this.dbItem)) {
+      await this.openModelAlertsView();
+    }
+    this.modelingEvents.fireRevealInModelAlertsViewEvent(
+      this.dbItem.databaseUri.toString(),
+      modeledMethod,
+    );
+  }
+
   private registerToModelingEvents() {
     this.push(
       this.modelingEvents.onModelEvaluationRunChanged(async (event) => {

extensions/ql-vscode/src/model-editor/modeling-events.ts

@@ -69,6 +69,11 @@ interface FocusModelAlertsViewEvent {
   dbUri: string;
 }
 
+interface RevealInModelAlertsViewEvent {
+  dbUri: string;
+  modeledMethod: ModeledMethod;
+}
+
 export class ModelingEvents extends DisposableObject {
   public readonly onActiveDbChanged: AppEvent<void>;
   public readonly onDbOpened: AppEvent<DatabaseItem>;
@@ -84,6 +89,7 @@ export class ModelingEvents extends DisposableObject {
   public readonly onRevealInModelEditor: AppEvent<RevealInModelEditorEvent>;
   public readonly onFocusModelEditor: AppEvent<FocusModelEditorEvent>;
   public readonly onFocusModelAlertsView: AppEvent<FocusModelAlertsViewEvent>;
+  public readonly onRevealInModelAlertsView: AppEvent<RevealInModelAlertsViewEvent>;
 
   private readonly onActiveDbChangedEventEmitter: AppEventEmitter<void>;
   private readonly onDbOpenedEventEmitter: AppEventEmitter<DatabaseItem>;
@@ -99,6 +105,7 @@ export class ModelingEvents extends DisposableObject {
   private readonly onRevealInModelEditorEventEmitter: AppEventEmitter<RevealInModelEditorEvent>;
   private readonly onFocusModelEditorEventEmitter: AppEventEmitter<FocusModelEditorEvent>;
   private readonly onFocusModelAlertsViewEventEmitter: AppEventEmitter<FocusModelAlertsViewEvent>;
+  private readonly onRevealInModelAlertsViewEventEmitter: AppEventEmitter<RevealInModelAlertsViewEvent>;
 
   constructor(app: App) {
     super();
@@ -176,6 +183,12 @@ export class ModelingEvents extends DisposableObject {
       app.createEventEmitter<FocusModelAlertsViewEvent>(),
     );
     this.onFocusModelAlertsView = this.onFocusModelAlertsViewEventEmitter.event;
+
+    this.onRevealInModelAlertsViewEventEmitter = this.push(
+      app.createEventEmitter<RevealInModelAlertsViewEvent>(),
+    );
+    this.onRevealInModelAlertsView =
+      this.onRevealInModelAlertsViewEventEmitter.event;
   }
 
   public fireActiveDbChangedEvent() {
@@ -301,4 +314,11 @@ export class ModelingEvents extends DisposableObject {
   public fireFocusModelAlertsViewEvent(dbUri: string) {
     this.onFocusModelAlertsViewEventEmitter.fire({ dbUri });
   }
+
+  public fireRevealInModelAlertsViewEvent(
+    dbUri: string,
+    modeledMethod: ModeledMethod,
+  ) {
+    this.onRevealInModelAlertsViewEventEmitter.fire({ dbUri, modeledMethod });
+  }
 }

extensions/ql-vscode/src/view/model-editor/ModelAlertsIndicator.tsx

@@ -3,6 +3,7 @@ import type { ModeledMethod } from "../../model-editor/modeled-method";
 import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state";
 import type { ModelEditorViewState } from "../../model-editor/shared/view-state";
 import { VSCodeBadge } from "@vscode/webview-ui-toolkit/react";
+import { vscode } from "../vscode-api";
 
 const ModelAlertsButton = styled(VSCodeBadge)`
   cursor: pointer;
@@ -27,6 +28,13 @@ export const ModelAlertsIndicator = ({
     return null;
   }
 
+  const revealInModelAlertsView = () => {
+    vscode.postMessage({
+      t: "revealInModelAlertsView",
+      modeledMethod,
+    });
+  };
+
   // TODO: Once we have alert provenance, we can show actual alert counts here.
   // For now, we show a random number.
   const number = Math.floor(Math.random() * 10);
@@ -37,6 +45,7 @@ export const ModelAlertsIndicator = ({
       aria-label="Model alerts"
       onClick={(event: React.MouseEvent) => {
         event.stopPropagation();
+        revealInModelAlertsView();
       }}
     >
       {number}