Split compare view messages

This splits the compare view messages into two different messages. One
contains the metadata that doesn't change when the user selects a
different result set, and the other contains the actual results.

Author: koesie10

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

@@ -334,13 +334,15 @@ interface ChangeCompareMessage {
   newResultSetName: string;
 }
 
-export type ToCompareViewMessage = SetComparisonsMessage;
+export type ToCompareViewMessage =
+  | SetComparisonQueryInfoMessage
+  | SetComparisonsMessage;
 
 /**
- * Message to the compare view that specifies the query results to compare.
+ * Message to the compare view that sets the metadata of the compared queries.
  */
-export interface SetComparisonsMessage {
-  readonly t: "setComparisons";
+export interface SetComparisonQueryInfoMessage {
+  readonly t: "setComparisonQueryInfo";
   readonly stats: {
     fromQuery?: {
       name: string;
@@ -353,11 +355,18 @@ export interface SetComparisonsMessage {
       time: string;
     };
   };
+  readonly databaseUri: string;
+}
+
+/**
+ * Message to the compare view that specifies the query results to compare.
+ */
+export interface SetComparisonsMessage {
+  readonly t: "setComparisons";
   readonly commonResultSetNames: string[];
   readonly currentResultSetName: string;
   readonly result: RawQueryCompareResult | undefined;
   readonly message: string | undefined;
-  readonly databaseUri: string;
 }
 
 /**

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

@@ -69,6 +69,26 @@ export class CompareView extends AbstractWebview<
       toSchemas,
     };
 
+    await this.postMessage({
+      t: "setComparisonQueryInfo",
+      stats: {
+        fromQuery: {
+          // since we split the description into several rows
+          // only run interpolation if the label is user-defined
+          // otherwise we will wind up with duplicated rows
+          name: this.labelProvider.getShortLabel(from),
+          status: from.completedQuery.statusString,
+          time: from.startTime,
+        },
+        toQuery: {
+          name: this.labelProvider.getShortLabel(to),
+          status: to.completedQuery.statusString,
+          time: to.startTime,
+        },
+      },
+      databaseUri: to.initialInfo.databaseInfo.databaseUri,
+    });
+
     await this.showResultsInternal(selectedResultSetName);
   }
 
@@ -77,8 +97,6 @@ export class CompareView extends AbstractWebview<
       return;
     }
 
-    const { from, to } = this.comparePair;
-
     const panel = await this.getPanel();
     panel.reveal(undefined, true);
 
@@ -103,26 +121,10 @@ export class CompareView extends AbstractWebview<
 
       await this.postMessage({
         t: "setComparisons",
-        stats: {
-          fromQuery: {
-            // since we split the description into several rows
-            // only run interpolation if the label is user-defined
-            // otherwise we will wind up with duplicated rows
-            name: this.labelProvider.getShortLabel(from),
-            status: from.completedQuery.statusString,
-            time: from.startTime,
-          },
-          toQuery: {
-            name: this.labelProvider.getShortLabel(to),
-            status: to.completedQuery.statusString,
-            time: to.startTime,
-          },
-        },
         result,
         commonResultSetNames,
         currentResultSetName: currentResultSetDisplayName,
         message,
-        databaseUri: to.initialInfo.databaseInfo.databaseUri,
       });
     }
   }

extensions/ql-vscode/src/stories/compare/CompareTable.stories.tsx

@@ -17,8 +17,8 @@ const Template: StoryFn<typeof CompareTableComponent> = (args) => (
 
 export const CompareTable = Template.bind({});
 CompareTable.args = {
-  comparison: {
-    t: "setComparisons",
+  queryInfo: {
+    t: "setComparisonQueryInfo",
     stats: {
       fromQuery: {
         name: "Query built from user-controlled sources",
@@ -31,6 +31,10 @@ CompareTable.args = {
         time: "8/16/2023, 3:07:21 PM",
       },
     },
+    databaseUri: "file:///java",
+  },
+  comparison: {
+    t: "setComparisons",
     commonResultSetNames: ["edges", "nodes", "subpaths", "#select"],
     currentResultSetName: "edges",
     result: {
@@ -65,6 +69,5 @@ CompareTable.args = {
       ],
     },
     message: undefined,
-    databaseUri: "file:///java",
   },
 };

extensions/ql-vscode/src/view/compare/Compare.tsx

@@ -5,12 +5,14 @@ import { styled } from "styled-components";
 import {
   ToCompareViewMessage,
   SetComparisonsMessage,
+  SetComparisonQueryInfoMessage,
 } from "../../common/interface-types";
 import CompareSelector from "./CompareSelector";
 import { vscode } from "../vscode-api";
 import CompareTable from "./CompareTable";
 
 import "../results/resultsView.css";
+import { assertNever } from "../../common/helpers-pure";
 
 const Header = styled.div`
   display: flex;
@@ -25,6 +27,8 @@ const Message = styled.div`
 `;
 
 export function Compare(_: Record<string, never>): JSX.Element {
+  const [queryInfo, setQueryInfo] =
+    useState<SetComparisonQueryInfoMessage | null>(null);
   const [comparison, setComparison] = useState<SetComparisonsMessage | null>(
     null,
   );
@@ -39,8 +43,14 @@ export function Compare(_: Record<string, never>): JSX.Element {
       if (evt.origin === window.origin) {
         const msg: ToCompareViewMessage = evt.data;
         switch (msg.t) {
+          case "setComparisonQueryInfo":
+            setQueryInfo(msg);
+            break;
           case "setComparisons":
             setComparison(msg);
+            break;
+          default:
+            assertNever(msg);
         }
       } else {
         // sanitize origin
@@ -55,7 +65,7 @@ export function Compare(_: Record<string, never>): JSX.Element {
     };
   }, []);
 
-  if (!comparison) {
+  if (!queryInfo || !comparison) {
     return <div>Waiting for results to load.</div>;
   }
 
@@ -73,7 +83,10 @@ export function Compare(_: Record<string, never>): JSX.Element {
           />
         </Header>
         {hasRows ? (
-          <CompareTable comparison={comparison}></CompareTable>
+          <CompareTable
+            queryInfo={queryInfo}
+            comparison={comparison}
+          ></CompareTable>
         ) : (
           <Message>{message}</Message>
         )}

extensions/ql-vscode/src/view/compare/CompareTable.tsx

@@ -1,13 +1,17 @@
 import * as React from "react";
 
-import { SetComparisonsMessage } from "../../common/interface-types";
+import {
+  SetComparisonQueryInfoMessage,
+  SetComparisonsMessage,
+} from "../../common/interface-types";
 import { className } from "../results/result-table-utils";
 import { vscode } from "../vscode-api";
 import TextButton from "../common/TextButton";
 import { styled } from "styled-components";
 import { RawCompareResultTable } from "./RawCompareResultTable";
 
 interface Props {
+  queryInfo: SetComparisonQueryInfoMessage;
   comparison: SetComparisonsMessage;
 }
 
@@ -26,9 +30,8 @@ const Table = styled.table`
   }
 `;
 
-export default function CompareTable(props: Props) {
-  const comparison = props.comparison;
-  const result = props.comparison.result!;
+export default function CompareTable({ queryInfo, comparison }: Props) {
+  const result = comparison.result!;
 
   async function openQuery(kind: "from" | "to") {
     vscode.postMessage({
@@ -43,18 +46,18 @@ export default function CompareTable(props: Props) {
         <tr>
           <td>
             <OpenButton onClick={() => openQuery("from")}>
-              {comparison.stats.fromQuery?.name}
+              {queryInfo.stats.fromQuery?.name}
             </OpenButton>
           </td>
           <td>
             <OpenButton onClick={() => openQuery("to")}>
-              {comparison.stats.toQuery?.name}
+              {queryInfo.stats.toQuery?.name}
             </OpenButton>
           </td>
         </tr>
         <tr>
-          <td>{comparison.stats.fromQuery?.time}</td>
-          <td>{comparison.stats.toQuery?.time}</td>
+          <td>{queryInfo.stats.fromQuery?.time}</td>
+          <td>{queryInfo.stats.toQuery?.time}</td>
         </tr>
         <tr>
           <th>{result.from.length} rows removed</th>
@@ -68,7 +71,7 @@ export default function CompareTable(props: Props) {
               columns={result.columns}
               schemaName={comparison.currentResultSetName}
               rows={result.from}
-              databaseUri={comparison.databaseUri}
+              databaseUri={queryInfo.databaseUri}
               className={className}
             />
           </td>
@@ -77,7 +80,7 @@ export default function CompareTable(props: Props) {
               columns={result.columns}
               schemaName={comparison.currentResultSetName}
               rows={result.to}
-              databaseUri={comparison.databaseUri}
+              databaseUri={queryInfo.databaseUri}
               className={className}
             />
           </td>