Link from alerts indicator to model alerts view (#3520)

Author: shati-patel

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

@@ -752,10 +752,16 @@ interface StopEvaluationRunMessage {
   t: "stopEvaluationRun";
 }
 
+interface RevealModelMessage {
+  t: "revealModel";
+  modeledMethod: ModeledMethod;
+}
+
 export type ToModelAlertsMessage =
   | SetModelAlertsViewStateMessage
   | SetVariantAnalysisMessage
-  | SetRepoResultsMessage;
+  | SetRepoResultsMessage
+  | RevealModelMessage;
 
 export type FromModelAlertsMessage =
   | CommonFromViewMessages

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

@@ -20,6 +20,7 @@ import type {
   VariantAnalysisScannedRepositoryResult,
 } from "../../variant-analysis/shared/variant-analysis";
 import type { AppEvent, AppEventEmitter } from "../../common/events";
+import type { ModeledMethod } from "../modeled-method";
 import type { MethodSignature } from "../method";
 
 export class ModelAlertsView extends AbstractWebview<
@@ -179,6 +180,14 @@ export class ModelAlertsView extends AbstractWebview<
         }
       }),
     );
+
+    this.push(
+      this.modelingEvents.onRevealInModelAlertsView(async (event) => {
+        if (event.dbUri === this.dbItem.databaseUri.toString()) {
+          await this.revealMethod(event.modeledMethod);
+        }
+      }),
+    );
   }
 
   private async stopEvaluationRun() {
@@ -195,4 +204,15 @@ export class ModelAlertsView extends AbstractWebview<
       method,
     );
   }
+
+  private async revealMethod(method: ModeledMethod): Promise<void> {
+    const panel = await this.getPanel();
+
+    panel?.reveal();
+
+    await this.postMessage({
+      t: "revealModel",
+      modeledMethod: method,
+    });
+  }
 }

extensions/ql-vscode/src/view/model-alerts/ModelAlerts.tsx

@@ -17,6 +17,7 @@ import {
   filterAndSort,
 } from "../../model-editor/shared/model-alerts-filter-sort";
 import type { ModelAlertsFilterSortState } from "../../model-editor/shared/model-alerts-filter-sort";
+import type { ModeledMethod } from "../../model-editor/modeled-method";
 
 type Props = {
   initialViewState?: ModelAlertsViewState;
@@ -62,6 +63,10 @@ export function ModelAlerts({
   const [filterSortValue, setFilterSortValue] =
     useState<ModelAlertsFilterSortState>(defaultFilterSortState);
 
+  const [revealedModel, setRevealedModel] = useState<ModeledMethod | null>(
+    null,
+  );
+
   useEffect(() => {
     const listener = (evt: MessageEvent) => {
       if (evt.origin === window.origin) {
@@ -87,6 +92,10 @@ export function ModelAlerts({
             });
             break;
           }
+          case "revealModel": {
+            setRevealedModel(msg.modeledMethod);
+            break;
+          }
         }
       } else {
         // sanitize origin
@@ -146,7 +155,11 @@ export function ModelAlerts({
             // but we don't have a unique identifier for models. In the future,
             // we may need to consider coming up with unique identifiers for models
             // and using those as keys.
-            <ModelAlertsResults key={i} modelAlerts={alerts} />
+            <ModelAlertsResults
+              key={i}
+              modelAlerts={alerts}
+              revealedModel={revealedModel}
+            />
           ))}
         </div>
       </div>

extensions/ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx

@@ -1,13 +1,15 @@
 import { styled } from "styled-components";
 import type { ModelAlerts } from "../../model-editor/model-alerts/model-alerts";
 import { Codicon } from "../common";
-import { useCallback, useState } from "react";
 import { VSCodeBadge, VSCodeLink } from "@vscode/webview-ui-toolkit/react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { formatDecimal } from "../../common/number";
 import AnalysisAlertResult from "../variant-analysis/AnalysisAlertResult";
 import { MethodName } from "../model-editor/MethodName";
 import { ModelDetails } from "./ModelDetails";
 import { vscode } from "../vscode-api";
+import { createModeledMethodKey } from "../../model-editor/modeled-method";
+import type { ModeledMethod } from "../../model-editor/modeled-method";
 
 // This will ensure that these icons have a className which we can use in the TitleContainer
 const ExpandCollapseCodicon = styled(Codicon)``;
@@ -59,10 +61,12 @@ const Alert = styled.li`
 
 interface Props {
   modelAlerts: ModelAlerts;
+  revealedModel: ModeledMethod | null;
 }
 
 export const ModelAlertsResults = ({
   modelAlerts,
+  revealedModel,
 }: Props): React.JSX.Element => {
   const [isExpanded, setExpanded] = useState(true);
   const viewInModelEditor = useCallback(
@@ -73,6 +77,22 @@ export const ModelAlertsResults = ({
       }),
     [modelAlerts.model],
   );
+
+  const ref = useRef<HTMLElement>();
+
+  useEffect(() => {
+    if (
+      revealedModel &&
+      createModeledMethodKey(modelAlerts.model) ===
+        createModeledMethodKey(revealedModel)
+    ) {
+      ref.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  }, [modelAlerts.model, revealedModel]);
+
   return (
     <div>
       <TitleContainer onClick={() => setExpanded(!isExpanded)}>

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

@@ -24,7 +24,7 @@ export const ModelAlertsIndicator = ({
     return null;
   }
 
-  if (!evaluationRun || !modeledMethod) {
+  if (!evaluationRun?.variantAnalysis || !modeledMethod) {
     return null;
   }