Simplify selected results table handling

We don't need to render all tables and use css to hide the ones we
don't currently want to see. Instead have `render` return the dom that
should be visible given the current state.

Author: jcreedcmu

extensions/ql-vscode/src/view/alert-table.tsx

@@ -1,10 +1,9 @@
-import cx from 'classnames';
 import * as path from 'path';
 import * as React from 'react';
 import * as Sarif from 'sarif';
 import { LocationStyle, ResolvableLocationValue } from 'semmle-bqrs';
 import * as octicons from './octicons';
-import { className, renderLocation, ResultTableProps, selectedClassName, zebraStripe } from './result-table-utils';
+import { className, renderLocation, ResultTableProps, zebraStripe } from './result-table-utils';
 import { PathTableResultSet } from './results';
 
 export type PathTableProps = ResultTableProps & { resultSet: PathTableResultSet };
@@ -99,11 +98,7 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
   }
 
   render(): JSX.Element {
-    const { selected, databaseUri, resultSet } = this.props;
-
-    const tableClassName = cx(className, {
-      [selectedClassName]: selected
-    });
+    const { databaseUri, resultSet } = this.props;
 
     const rows: JSX.Element[] = [];
     const { numTruncatedResults, sourceLocationPrefix } = resultSet;
@@ -342,7 +337,7 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
       </td></tr>);
     }
 
-    return <table className={tableClassName}>
+    return <table className={className}>
       <tbody>{rows}</tbody>
     </table>;
   }

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

@@ -1,6 +1,5 @@
-import cx from 'classnames';
 import * as React from "react";
-import { className, renderLocation, ResultTableProps, selectedClassName, zebraStripe } from "./result-table-utils";
+import { renderLocation, ResultTableProps, zebraStripe, className } from "./result-table-utils";
 import { RawTableResultSet, ResultValue, vscode } from "./results";
 import { assertNever } from "../helpers-pure";
 import { SortDirection, SortState, RAW_RESULTS_LIMIT } from "../interface-types";
@@ -16,11 +15,7 @@ export class RawTable extends React.Component<RawTableProps, {}> {
   }
 
   render(): React.ReactNode {
-    const { resultSet, selected, databaseUri } = this.props;
-
-    const tableClassName = cx(className, {
-      [selectedClassName]: selected
-    });
+    const { resultSet, databaseUri } = this.props;
 
     let dataRows = this.props.resultSet.rows;
     let numTruncatedResults = 0;
@@ -52,7 +47,7 @@ export class RawTable extends React.Component<RawTableProps, {}> {
       </td></tr>);
     }
 
-    return <table className={tableClassName}>
+    return <table className={className}>
       <thead>
         <tr>
           {

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

@@ -4,7 +4,6 @@ import { SortState } from '../interface-types';
 import { ResultSet, vscode } from './results';
 
 export interface ResultTableProps {
-  selected: boolean;
   resultSet: ResultSet;
   databaseUri: string;
   resultsPath: string | undefined;
@@ -14,8 +13,6 @@ export interface ResultTableProps {
 export const className = 'vscode-codeql__result-table';
 export const tableSelectionHeaderClassName = 'vscode-codeql__table-selection-header';
 export const toggleDiagnosticsClassName = `${className}-toggle-diagnostics`;
-export const selectedClassName = `${className}--selected`;
-export const toggleDiagnosticsSelectedClassName = `${toggleDiagnosticsClassName}--selected`;
 export const evenRowClassName = 'vscode-codeql__result-table-row--even';
 export const oddRowClassName = 'vscode-codeql__result-table-row--odd';
 export const pathRowClassName = 'vscode-codeql__result-table-row--path';

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

@@ -1,9 +1,8 @@
-import cx from 'classnames';
 import * as React from 'react';
 import { DatabaseInfo, Interpretation, SortState } from '../interface-types';
 import { PathTable } from './alert-table';
 import { RawTable } from './raw-results-table';
-import { ResultTableProps, toggleDiagnosticsClassName, toggleDiagnosticsSelectedClassName, tableSelectionHeaderClassName } from './result-table-utils';
+import { ResultTableProps, tableSelectionHeaderClassName, toggleDiagnosticsClassName } from './result-table-utils';
 import { ResultSet, vscode } from './results';
 
 /**
@@ -76,14 +75,26 @@ export class ResultTables
   }
 
   render(): React.ReactNode {
-    const selectedTable = this.state.selectedTable;
+    const { selectedTable } = this.state;
     const resultSets = this.getResultSets();
     const { database, resultsPath, kind } = this.props;
 
     // Only show the Problems view display checkbox for the alerts table.
-    const toggleDiagnosticsClass = cx(toggleDiagnosticsClassName, {
-      [toggleDiagnosticsSelectedClassName]: selectedTable === ALERTS_TABLE_NAME
-    });
+    const diagnosticsCheckBox = selectedTable === ALERTS_TABLE_NAME ?
+      <div className={toggleDiagnosticsClassName}>
+        <input type="checkbox" id="toggle-diagnostics" name="toggle-diagnostics" onChange={(e) => {
+          if (resultsPath !== undefined) {
+            vscode.postMessage({
+              t: 'toggleDiagnostics',
+              resultsPath: resultsPath,
+              databaseUri: database.databaseUri,
+              visible: e.target.checked,
+              kind: kind
+            });
+          }
+        }} />
+        <label htmlFor="toggle-diagnostics">Show results in Problems view</label>
+      </div> : undefined;
 
     return <div>
       <div className={tableSelectionHeaderClassName}>
@@ -96,20 +107,7 @@ export class ResultTables
             )
           }
         </select>
-        <div className={toggleDiagnosticsClass}>
-          <input type="checkbox" id="toggle-diagnostics" name="toggle-diagnostics" onChange={(e) => {
-            if (resultsPath !== undefined) {
-              vscode.postMessage({
-                t: 'toggleDiagnostics',
-                resultsPath: resultsPath,
-                databaseUri: database.databaseUri,
-                visible: e.target.checked,
-                kind: kind
-              });
-            }
-          }} />
-          <label htmlFor="toggle-diagnostics">Show results in Problems view</label>
-        </div>
+        {diagnosticsCheckBox}
         {
           this.props.isLoadingNewResults ?
             <span className={UPDATING_RESULTS_TEXT_CLASS_NAME}>Updating results…</span>
@@ -118,9 +116,12 @@ export class ResultTables
       </div>
       {
         resultSets.map(resultSet =>
-          <ResultTable key={resultSet.schema.name} resultSet={resultSet}
-            databaseUri={this.props.database.databaseUri} selected={resultSet.schema.name === selectedTable}
-            resultsPath={this.props.resultsPath} sortState={this.props.sortStates.get(resultSet.schema.name)} />
+          resultSet.schema.name === selectedTable ?
+            <ResultTable key={resultSet.schema.name} resultSet={resultSet}
+              databaseUri={this.props.database.databaseUri}
+              resultsPath={this.props.resultsPath}
+              sortState={this.props.sortStates.get(resultSet.schema.name)} /> :
+            undefined
         )
       }
     </div>;
@@ -137,10 +138,10 @@ class ResultTable extends React.Component<ResultTableProps, {}> {
     const { resultSet } = this.props;
     switch (resultSet.t) {
       case 'RawResultSet': return <RawTable
-        selected={this.props.selected} resultSet={resultSet} databaseUri={this.props.databaseUri}
+        resultSet={resultSet} databaseUri={this.props.databaseUri}
         resultsPath={this.props.resultsPath} sortState={this.props.sortState} />;
       case 'SarifResultSet': return <PathTable
-        selected={this.props.selected} resultSet={resultSet} databaseUri={this.props.databaseUri}
+        resultSet={resultSet} databaseUri={this.props.databaseUri}
         resultsPath={this.props.resultsPath} />;
     }
   }

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

@@ -1,13 +1,9 @@
 .vscode-codeql__result-table {
-  display: none;
+  display: table;
   border-collapse: collapse;
   width: 100%;
 }
 
-.vscode-codeql__result-table--selected {
-  display: table;
-}
-
 .vscode-codeql__table-selection-header {
   display: flex;
   padding: 0.5em 0;
@@ -18,22 +14,18 @@
 }
 
 .vscode-codeql__result-table-toggle-diagnostics {
-  display: none;
+  display: inline-block;
   text-align: left;
   margin-left: auto;
 }
 
-.vscode-codeql__result-table-toggle-diagnostics--selected {
-  display: inline-block;
-}
-
 /* Keep the checkbox and its label in horizontal alignment. */
-.vscode-codeql__result-table-toggle-diagnostics--selected label,
-.vscode-codeql__result-table-toggle-diagnostics--selected input {
+.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--selected input {
+.vscode-codeql__result-table-toggle-diagnostics input {
   margin: 3px 3px 1px 3px;
 }