feat: add description to performance view

Adds a generic InfoBox similar to the existing WarningBox.
Currently threads through a string as the description, but it should be trivial to change that to a ReactNode if needed...

Author: esbena

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

@@ -401,6 +401,7 @@ export type ToComparePerformanceViewMessage = SetPerformanceComparisonQueries;
 
 export interface SetPerformanceComparisonQueries {
   readonly t: "setPerformanceComparison";
+  readonly description: string;
   readonly from: PerformanceComparisonDataFromLog;
   readonly to: PerformanceComparisonDataFromLog;
 }

extensions/ql-vscode/src/compare-performance/compare-performance-view.ts

@@ -43,7 +43,11 @@ export class ComparePerformanceView extends AbstractWebview<
     );
   }
 
-  async showResults(fromJsonLog: string, toJsonLog: string) {
+  async showResults(
+    fromJsonLog: string,
+    toJsonLog: string,
+    description: string,
+  ) {
     const panel = await this.getPanel();
     panel.reveal(undefined, false);
 
@@ -65,6 +69,7 @@ export class ComparePerformanceView extends AbstractWebview<
 
     await this.postMessage({
       t: "setPerformanceComparison",
+      description,
       from: fromPerf.getData(),
       to: toPerf.getData(),
     });
@@ -125,6 +130,6 @@ export class ComparePerformanceView extends AbstractWebview<
       );
       return;
     }
-    await this.showResults(result.before, result.after);
+    await this.showResults(result.before, result.after, result.description);
   }
 }

extensions/ql-vscode/src/compare-performance/remote-logs.ts

@@ -254,6 +254,7 @@ export class RemoteLogs {
     | {
         before: string;
         after: string;
+        description: string;
       }
     | undefined
   > {
@@ -270,7 +271,11 @@ export class RemoteLogs {
     if (processed.some((d) => typeof d === "undefined")) {
       throw new Error("Silently failed to download or process some logs!?");
     }
-    return { before: processed[0]!, after: processed[1]! };
+    return {
+      before: processed[0]!,
+      after: processed[1]!,
+      description: picked.description,
+    };
   }
 
   /**
@@ -640,6 +645,7 @@ export class RemoteLogs {
     | {
         before: ArtifactDownload;
         after: ArtifactDownload;
+        description: string;
       }
     | undefined
   > {
@@ -723,6 +729,7 @@ export class RemoteLogs {
       before: targetInfoChoice1.downloads["evaluator-logs"],
       after: targetInfos.find((t) => t.info.target_id === targetChoice2)!
         .downloads["evaluator-logs"],
+      description: `Comparison of logs from DCA experiment '${experimentChoice}' between targets '${targetChoice1}' and '${targetChoice2}'`,
     };
   }
 }

extensions/ql-vscode/src/extension.ts

@@ -1223,7 +1223,11 @@ async function showPerformanceComparison(
     `Comparing performance of ${from.getQueryName()} and ${to.getQueryName()}`,
   );
 
-  await view.showResults(fromLog, toLog);
+  await view.showResults(
+    fromLog,
+    toLog,
+    `Comparison of logs from local runs of ${from.getQueryName()} and ${to.getQueryName()}`,
+  );
 }
 
 function addUnhandledRejectionListener() {

extensions/ql-vscode/src/view/common/InfoBox.tsx

@@ -0,0 +1,21 @@
+import { styled } from "styled-components";
+
+const InfoBoxDiv = styled.div`
+  max-width: 100em;
+  padding: 0.5em 1em;
+  border: 1px solid var(--vscode-widget-border);
+  box-shadow: var(--vscode-widget-shadow) 0px 3px 8px;
+  display: flex;
+`;
+
+export interface WarningBoxProps {
+  children: React.ReactNode;
+}
+
+export function InfoBox(props: WarningBoxProps) {
+  return (
+    <InfoBoxDiv>
+      <p>{props.children}</p>
+    </InfoBoxDiv>
+  );
+}

extensions/ql-vscode/src/view/compare-performance/ComparePerformance.tsx

@@ -11,6 +11,7 @@ import type {
   PipelineSummary,
 } from "../../log-insights/performance-comparison";
 import { Codicon, ViewTitle, WarningBox } from "../common";
+import { InfoBox } from "../common/InfoBox";
 import { useMessageFromExtension } from "../common/useMessageFromExtension";
 import { abbreviateRASteps } from "./RAPrettyPrinter";
 
@@ -363,6 +364,7 @@ export function ComparePerformance(_: Record<string, never>) {
   return (
     <>
       <ViewTitle>Performance comparison</ViewTitle>
+      {data?.description && <InfoBox>{data.description}</InfoBox>}
       {hasCacheHitMismatch && (
         <WarningBox>
           <strong>Inconsistent cache hits</strong>