Merge pull request #3103 from github/koesie10/compare-view-results

Move columns in compare view to result

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

@@ -353,10 +353,9 @@ export interface SetComparisonsMessage {
       time: string;
     };
   };
-  readonly columns: readonly BqrsColumn[];
   readonly commonResultSetNames: string[];
   readonly currentResultSetName: string;
-  readonly rows: QueryCompareResult | undefined;
+  readonly result: RawQueryCompareResult | undefined;
   readonly message: string | undefined;
   readonly databaseUri: string;
 }
@@ -370,7 +369,8 @@ export interface SetComparisonsMessage {
  * If an array element is null, that means that the element was removed
  * (or added) in the comparison.
  */
-export type QueryCompareResult = {
+export type RawQueryCompareResult = {
+  columns: readonly BqrsColumn[];
   from: ResultRow[];
   to: ResultRow[];
 };

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

@@ -2,7 +2,7 @@ import { ViewColumn } from "vscode";
 
 import {
   FromCompareViewMessage,
-  QueryCompareResult,
+  RawQueryCompareResult,
   ToCompareViewMessage,
 } from "../common/interface-types";
 import { Logger, showAndLogExceptionWithTelemetry } from "../common/logging";
@@ -93,10 +93,10 @@ export class CompareView extends AbstractWebview<
       selectedResultSetName,
     );
     if (currentResultSetDisplayName) {
-      let rows: QueryCompareResult | undefined;
+      let result: RawQueryCompareResult | undefined;
       let message: string | undefined;
       try {
-        rows = this.compareResults(fromResultSet, toResultSet);
+        result = this.compareResults(fromResultSet, toResultSet);
       } catch (e) {
         message = getErrorMessage(e);
       }
@@ -118,10 +118,9 @@ export class CompareView extends AbstractWebview<
             time: to.startTime,
           },
         },
-        columns: fromResultSet.columns,
+        result,
         commonResultSetNames,
         currentResultSetName: currentResultSetDisplayName,
-        rows,
         message,
         databaseUri: to.initialInfo.databaseInfo.databaseUri,
       });
@@ -240,7 +239,7 @@ export class CompareView extends AbstractWebview<
   private compareResults(
     fromResults: DecodedBqrsChunk,
     toResults: DecodedBqrsChunk,
-  ): QueryCompareResult {
+  ): RawQueryCompareResult {
     // Only compare columns that have the same name
     return resultsDiff(fromResults, toResults);
   }

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

@@ -1,5 +1,5 @@
 import { DecodedBqrsChunk } from "../common/bqrs-cli-types";
-import { QueryCompareResult } from "../common/interface-types";
+import { RawQueryCompareResult } from "../common/interface-types";
 
 /**
  * Compare the rows of two queries. Use deep equality to determine if
@@ -22,7 +22,7 @@ import { QueryCompareResult } from "../common/interface-types";
 export default function resultsDiff(
   fromResults: DecodedBqrsChunk,
   toResults: DecodedBqrsChunk,
-): QueryCompareResult {
+): RawQueryCompareResult {
   if (fromResults.columns.length !== toResults.columns.length) {
     throw new Error("CodeQL Compare: Columns do not match.");
   }
@@ -36,6 +36,7 @@ export default function resultsDiff(
   }
 
   const results = {
+    columns: fromResults.columns,
     from: arrayDiff(fromResults.tuples, toResults.tuples),
     to: arrayDiff(toResults.tuples, fromResults.tuples),
   };

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

@@ -31,13 +31,13 @@ CompareTable.args = {
         time: "8/16/2023, 3:07:21 PM",
       },
     },
-    columns: [
-      { name: "a", kind: "Entity" },
-      { name: "b", kind: "Entity" },
-    ],
     commonResultSetNames: ["edges", "nodes", "subpaths", "#select"],
     currentResultSetName: "edges",
-    rows: {
+    result: {
+      columns: [
+        { name: "a", kind: "Entity" },
+        { name: "b", kind: "Entity" },
+      ],
       from: [],
       to: [
         [

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

@@ -14,8 +14,7 @@ import "../results/resultsView.css";
 const emptyComparison: SetComparisonsMessage = {
   t: "setComparisons",
   stats: {},
-  rows: undefined,
-  columns: [],
+  result: undefined,
   commonResultSetNames: [],
   currentResultSetName: "",
   databaseUri: "",
@@ -28,8 +27,8 @@ export function Compare(_: Record<string, never>): JSX.Element {
 
   const message = comparison.message || "Empty comparison";
   const hasRows =
-    comparison.rows &&
-    (comparison.rows.to.length || comparison.rows.from.length);
+    comparison.result &&
+    (comparison.result.to.length || comparison.result.from.length);
 
   useEffect(() => {
     const listener = (evt: MessageEvent) => {

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

@@ -22,7 +22,7 @@ const OpenButton = styled(TextButton)`
 
 export default function CompareTable(props: Props) {
   const comparison = props.comparison;
-  const rows = props.comparison.rows!;
+  const result = props.comparison.result!;
 
   async function openQuery(kind: "from" | "to") {
     vscode.postMessage({
@@ -69,8 +69,8 @@ export default function CompareTable(props: Props) {
           <td>{comparison.stats.toQuery?.time}</td>
         </tr>
         <tr>
-          <th>{rows.from.length} rows removed</th>
-          <th>{rows.to.length} rows added</th>
+          <th>{result.from.length} rows removed</th>
+          <th>{result.to.length} rows added</th>
         </tr>
       </thead>
       <tbody>
@@ -78,21 +78,21 @@ export default function CompareTable(props: Props) {
           <td>
             <table className={className}>
               <RawTableHeader
-                columns={comparison.columns}
+                columns={result.columns}
                 schemaName={comparison.currentResultSetName}
                 preventSort={true}
               />
-              {createRows(rows.from, comparison.databaseUri)}
+              {createRows(result.from, comparison.databaseUri)}
             </table>
           </td>
           <td>
             <table className={className}>
               <RawTableHeader
-                columns={comparison.columns}
+                columns={result.columns}
                 schemaName={comparison.currentResultSetName}
                 preventSort={true}
               />
-              {createRows(rows.to, comparison.databaseUri)}
+              {createRows(result.to, comparison.databaseUri)}
             </table>
           </td>
         </tr>