Create UI element to pick sort order

Author: jcreedcmu

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

@@ -120,8 +120,11 @@ export interface RawResultsSortState {
   direction: SortDirection;
 }
 
+export type InterpretedResultsSortOrder =
+  'file-position' | 'alert-message';
+
 export interface InterpretedResultsSortState {
-  sortBy: 'file-position' | 'alert-message';
+  sortBy: InterpretedResultsSortOrder;
 }
 
 interface ChangeRawResultsSortMsg {

extensions/ql-vscode/src/query-results.ts

@@ -116,8 +116,10 @@ export class CompletedQuery implements QueryWithResults {
     this.sortedResultsInfo.set(resultSetName, sortedResultSetInfo);
   }
 
-  async updateInterpretedSortState(_server: cli.CodeQLCliServer, _sortState: InterpretedResultsSortState | undefined): Promise<void> {
-
+  async updateInterpretedSortState(_server: cli.CodeQLCliServer, sortState: InterpretedResultsSortState | undefined): Promise<void> {
+    if (sortState !== undefined) {
+      this.interpretedResultsSortState = sortState;
+    }
   }
 }
 

extensions/ql-vscode/src/view/result-table-utils.tsx

@@ -13,6 +13,7 @@ export interface ResultTableProps {
 
 export const className = 'vscode-codeql__result-table';
 export const tableSelectionHeaderClassName = 'vscode-codeql__table-selection-header';
+export const alertExtrasClassName = `${className}-alert-extras`;
 export const toggleDiagnosticsClassName = `${className}-toggle-diagnostics`;
 export const evenRowClassName = 'vscode-codeql__result-table-row--even';
 export const oddRowClassName = 'vscode-codeql__result-table-row--odd';

extensions/ql-vscode/src/view/result-tables.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { DatabaseInfo, Interpretation, RawResultsSortState, QueryMetadata, ResultsPaths } from '../interface-types';
+import { DatabaseInfo, Interpretation, RawResultsSortState, QueryMetadata, ResultsPaths, InterpretedResultsSortOrder, InterpretedResultsSortState } from '../interface-types';
 import { PathTable } from './alert-table';
 import { RawTable } from './raw-results-table';
-import { ResultTableProps, tableSelectionHeaderClassName, toggleDiagnosticsClassName } from './result-table-utils';
+import { ResultTableProps, tableSelectionHeaderClassName, toggleDiagnosticsClassName, alertExtrasClassName } from './result-table-utils';
 import { ResultSet, vscode } from './results';
 
 /**
@@ -16,6 +16,7 @@ export interface ResultTablesProps {
   resultsPath: string;
   origResultsPaths: ResultsPaths;
   sortStates: Map<string, RawResultsSortState>;
+  interpretedSortState?: InterpretedResultsSortState;
   isLoadingNewResults: boolean;
 }
 
@@ -89,17 +90,21 @@ export class ResultTables
     return [ALERTS_TABLE_NAME, SELECT_TABLE_NAME, resultSets[0].schema.name].filter(resultSetName => resultSetNames.includes(resultSetName))[0];
   }
 
-  private onChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
+  private onTableSelectionChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
     this.setState({ selectedTable: event.target.value });
   }
 
-  render(): React.ReactNode {
-    const { selectedTable } = this.state;
-    const resultSets = this.getResultSets();
-    const { database, resultsPath, metadata, origResultsPaths } = this.props;
+  private onSortChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
+    vscode.postMessage({
+      t: 'changeInterpretedSort',
+      sortState: { sortBy: event.target.value as InterpretedResultsSortOrder },
+    });
+  }
+
+  private alertTableExtras(): JSX.Element | undefined {
+    const { database, resultsPath, metadata, origResultsPaths, interpretedSortState } = this.props;
 
-    // Only show the Problems view display checkbox for the alerts table.
-    const diagnosticsCheckBox = selectedTable === ALERTS_TABLE_NAME ?
+    const displayProblemsAsAlertsToggle =
       <div className={toggleDiagnosticsClassName}>
         <input type="checkbox" id="toggle-diagnostics" name="toggle-diagnostics" onChange={(e) => {
           if (resultsPath !== undefined) {
@@ -113,14 +118,31 @@ export class ResultTables
           }
         }} />
         <label htmlFor="toggle-diagnostics">Show results in Problems view</label>
-      </div> : undefined;
+      </div>;
+
+    const interpretedResultsSortSelect = <select value={interpretedSortState?.sortBy || 'file-position'}
+      onChange={this.onSortChange}>
+      <option value={'file-position'}>Source File Position</option>
+      <option value={'alert-message'}>Alert Message</option>
+    </select>;
+
+    return <div className={alertExtrasClassName}>
+      Sort:
+      {interpretedResultsSortSelect}
+      {displayProblemsAsAlertsToggle}
+    </div>
+  }
+
+  render(): React.ReactNode {
+    const { selectedTable } = this.state;
+    const resultSets = this.getResultSets();
 
     const resultSet = resultSets.find(resultSet => resultSet.schema.name == selectedTable);
     const numberOfResults = resultSet && renderResultCountString(resultSet);
 
     return <div>
       <div className={tableSelectionHeaderClassName}>
-        <select value={selectedTable} onChange={this.onChange}>
+        <select value={selectedTable} onChange={this.onTableSelectionChange}>
           {
             resultSets.map(resultSet =>
               <option key={resultSet.schema.name} value={resultSet.schema.name}>
@@ -130,7 +152,7 @@ export class ResultTables
           }
         </select>
         {numberOfResults}
-        {diagnosticsCheckBox}
+        {selectedTable === ALERTS_TABLE_NAME ? this.alertTableExtras() : undefined}
         {
           this.props.isLoadingNewResults ?
             <span className={UPDATING_RESULTS_TEXT_CLASS_NAME}>Updating results…</span>
@@ -144,7 +166,7 @@ export class ResultTables
           resultsPath={this.props.resultsPath}
           sortState={this.props.sortStates.get(resultSet.schema.name)} />
       }
-    </div>;
+    </div >;
   }
 }
 

extensions/ql-vscode/src/view/results.tsx

@@ -314,6 +314,7 @@ class App extends React.Component<{}, ResultsViewState> {
         resultsPath={displayedResults.resultsInfo.resultsPath}
         metadata={displayedResults.resultsInfo ? displayedResults.resultsInfo.metadata : undefined}
         sortStates={displayedResults.results.sortStates}
+        interpretedSortState={displayedResults.resultsInfo.interpretation?.sortState}
         isLoadingNewResults={this.state.isExpectingResultsUpdate || this.state.nextResultsInfo !== null} />;
     }
     else {

extensions/ql-vscode/src/view/resultsView.css

@@ -13,20 +13,24 @@
   border: 0;
 }
 
-.vscode-codeql__result-table-toggle-diagnostics {
+.vscode-codeql__result-table-alert-extras {
   display: inline-block;
   text-align: left;
   margin-left: auto;
 }
 
+.vscode-codeql__result-table-toggle-diagnostics  {
+  display: inline-block;
+}
+
 /* Keep the checkbox and its label in horizontal alignment. */
 .vscode-codeql__result-table-toggle-diagnostics label,
 .vscode-codeql__result-table-toggle-diagnostics input {
   display: inline-block;
   vertical-align: middle;
 }
 .vscode-codeql__result-table-toggle-diagnostics input {
-  margin: 3px 3px 1px 3px;
+  margin: 3px 3px 1px 13px;
 }