Highlight currently selected path node

asger-semmle · asger-semmle · commit 3e8c53be7809 · 2019-11-21T14:49:15.000Z
diff --git a/extensions/ql-vscode/src/result-keys.ts b/extensions/ql-vscode/src/result-keys.ts
@@ -0,0 +1,95 @@
+import * as sarif from 'sarif';
+
+/**
+ * Identifies one of the results in a result set by its index in the result list.
+ */
+export interface Result {
+  resultIndex: number;
+}
+
+/**
+ * Identifies one of the paths associated with a result.
+ */
+export interface Path extends Result {
+  pathIndex: number;
+}
+
+/**
+ * Identifies one of the nodes in a path.
+ */
+export interface PathNode extends Path {
+  pathNodeIndex: number;
+}
+
+/** Alias for `undefined` but more readable in some cases */
+export const none: PathNode | undefined = undefined;
+
+/**
+ * Looks up a specific result in a result set.
+ */
+export function getResult(sarif: sarif.Log, key: Result): sarif.Result | undefined {
+  if (sarif.runs.length === 0) return undefined;
+  if (sarif.runs[0].results === undefined) return undefined;
+  let results = sarif.runs[0].results;
+  return results[key.resultIndex];
+}
+
+/**
+ * Looks up a specific path in a result set.
+ */
+export function getPath(sarif: sarif.Log, key: Path): sarif.ThreadFlow | undefined {
+  let result = getResult(sarif, key);
+  if (result === undefined) return undefined;
+  let index = -1;
+  if (result.codeFlows === undefined) return undefined;
+  for (let codeFlows of result.codeFlows) {
+    for (let threadFlow of codeFlows.threadFlows) {
+      ++index;
+      if (index == key.pathIndex)
+        return threadFlow;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Looks up a specific path node in a result set.
+ */
+export function getPathNode(sarif: sarif.Log, key: PathNode): sarif.Location | undefined {
+  let path = getPath(sarif, key);
+  if (path === undefined) return undefined;
+  return path.locations[key.pathNodeIndex];
+}
+
+/**
+ * Returns true if the two keys are both `undefined` or contain the same set of indices.
+ */
+export function equals(key1: PathNode | undefined, key2: PathNode | undefined): boolean {
+  if (key1 === key2) return true;
+  if (key1 === undefined || key2 === undefined) return false;
+  return key1.resultIndex === key2.resultIndex && key1.pathIndex === key2.pathIndex && key1.pathNodeIndex === key2.pathNodeIndex;
+}
+
+/**
+ * Returns true if the two keys contain the same set of indices and neither are `undefined`.
+ */
+export function equalsNotUndefined(key1: PathNode | undefined, key2: PathNode | undefined): boolean {
+  if (key1 === undefined || key2 === undefined) return false;
+  return key1.resultIndex === key2.resultIndex && key1.pathIndex === key2.pathIndex && key1.pathNodeIndex === key2.pathNodeIndex;
+}
+
+/**
+ * Returns the list of paths in the given SARIF result.
+ *
+ * Path nodes indices are relative to this flattened list.
+ */
+export function getAllPaths(result: sarif.Result): sarif.ThreadFlow[] {
+  if (result.codeFlows === undefined) return [];
+  let paths = [];
+  for (const codeFlow of result.codeFlows) {
+    for (const threadFlow of codeFlow.threadFlows) {
+      paths.push(threadFlow);
+    }
+  }
+  return paths;
+}
diff --git a/extensions/ql-vscode/src/view/alert-table.tsx b/extensions/ql-vscode/src/view/alert-table.tsx
@@ -1,14 +1,16 @@
 import * as path from 'path';
 import * as React from 'react';
 import * as Sarif from 'sarif';
+import * as Keys from '../result-keys';
 import { LocationStyle, ResolvableLocationValue } from 'semmle-bqrs';
 import * as octicons from './octicons';
-import { className, renderLocation, ResultTableProps, zebraStripe } from './result-table-utils';
+import { className, renderLocation, ResultTableProps, zebraStripe, selectableZebraStripe } from './result-table-utils';
 import { PathTableResultSet } from './results';
 
 export type PathTableProps = ResultTableProps & { resultSet: PathTableResultSet };
 export interface PathTableState {
   expanded: { [k: string]: boolean };
+  selectedPathNode: undefined | Keys.PathNode;
 }
 
 interface SarifLink {
@@ -72,7 +74,7 @@ export function getPathRelativeToSourceLocationPrefix(sourceLocationPrefix: stri
 export class PathTable extends React.Component<PathTableProps, PathTableState> {
   constructor(props: PathTableProps) {
     super(props);
-    this.state = { expanded: {} };
+    this.state = { expanded: {}, selectedPathNode: undefined };
   }
 
   /**
@@ -118,7 +120,8 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
         if (typeof part === "string") {
           result.push(<span>{part} </span>);
         } else {
-          const renderedLocation = renderSarifLocationWithText(part.text, relatedLocationsById[part.dest]);
+          const renderedLocation = renderSarifLocationWithText(part.text, relatedLocationsById[part.dest],
+              undefined);
           result.push(<span>{renderedLocation} </span>);
         }
       } return result;
@@ -191,14 +194,23 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
       }
     }
 
-    function renderSarifLocationWithText(text: string | undefined, loc: Sarif.Location): JSX.Element | undefined {
+    const updateSelectionCallback = (pathNodeKey: Keys.PathNode | undefined) => {
+      return () => {
+        this.setState(previousState => ({
+          ...previousState,
+          selectedPathNode: pathNodeKey
+        }));
+      }
+    };
+
+    function renderSarifLocationWithText(text: string | undefined, loc: Sarif.Location, pathNodeKey: Keys.PathNode | undefined): JSX.Element | undefined {
       const parsedLoc = parseSarifLocation(loc);
       switch (parsedLoc.t) {
         case 'NoLocation':
           return renderNonLocation(text, parsedLoc.hint);
         case LocationStyle.FivePart:
         case LocationStyle.WholeFile:
-          return renderLocation(parsedLoc, text, databaseUri);
+            return renderLocation(parsedLoc, text, databaseUri, undefined, updateSelectionCallback(pathNodeKey));
       }
       return undefined;
     }
@@ -207,7 +219,7 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
      * Render sarif location as a link with the text being simply a
      * human-readable form of the location itself.
      */
-    function renderSarifLocation(loc: Sarif.Location): JSX.Element | undefined {
+    function renderSarifLocation(loc: Sarif.Location, pathNodeKey: Keys.PathNode | undefined): JSX.Element | undefined {
       const parsedLoc = parseSarifLocation(loc);
       let shortLocation, longLocation: string;
       switch (parsedLoc.t) {
@@ -216,11 +228,11 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
         case LocationStyle.WholeFile:
           shortLocation = `${path.basename(parsedLoc.userVisibleFile)}`;
           longLocation = `${parsedLoc.userVisibleFile}`;
-          return renderLocation(parsedLoc, shortLocation, databaseUri, longLocation);
+          return renderLocation(parsedLoc, shortLocation, databaseUri, longLocation, updateSelectionCallback(pathNodeKey));
         case LocationStyle.FivePart:
           shortLocation = `${path.basename(parsedLoc.userVisibleFile)}:${parsedLoc.lineStart}:${parsedLoc.colStart}`;
           longLocation = `${parsedLoc.userVisibleFile}`;
-          return renderLocation(parsedLoc, shortLocation, databaseUri, longLocation);
+          return renderLocation(parsedLoc, shortLocation, databaseUri, longLocation, updateSelectionCallback(pathNodeKey));
       }
     }
 
@@ -245,7 +257,7 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
       const currentResultExpanded = this.state.expanded[expansionIndex];
       const indicator = currentResultExpanded ? octicons.chevronDown : octicons.chevronRight;
       const location = result.locations !== undefined && result.locations.length > 0 &&
-        renderSarifLocation(result.locations[0]);
+        renderSarifLocation(result.locations[0], Keys.none);
       const locationCells = <td className="vscode-codeql__location-cell">{location}</td>;
 
       if (result.codeFlows === undefined) {
@@ -260,12 +272,7 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
         );
       }
       else {
-        const paths: Sarif.ThreadFlow[] = [];
-        for (const codeFlow of result.codeFlows) {
-          for (const threadFlow of codeFlow.threadFlows) {
-            paths.push(threadFlow);
-          }
-        }
+        const paths: Sarif.ThreadFlow[] = Keys.getAllPaths(result);
 
         const indices = paths.length == 1 ?
           [expansionIndex, expansionIndex + 1] : /* if there's exactly one path, auto-expand
@@ -288,7 +295,8 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
         );
         expansionIndex++;
 
-        paths.forEach(path => {
+        paths.forEach((path, pathIndex) => {
+          const pathKey = { resultIndex, pathIndex };
           const currentPathExpanded = this.state.expanded[expansionIndex];
           if (currentResultExpanded) {
             const indicator = currentPathExpanded ? octicons.chevronDown : octicons.chevronRight;
@@ -305,25 +313,27 @@ export class PathTable extends React.Component<PathTableProps, PathTableState> {
           expansionIndex++;
 
           if (currentResultExpanded && currentPathExpanded) {
-            let pathIndex = 1;
-            for (const step of path.locations) {
+            const pathNodes = path.locations;
+            for (let pathNodeIndex = 0; pathNodeIndex < pathNodes.length; ++pathNodeIndex) {
+              const pathNodeKey: Keys.PathNode = { ...pathKey, pathNodeIndex };
+              const step = pathNodes[pathNodeIndex];
               const msg = step.location !== undefined && step.location.message !== undefined ?
-                renderSarifLocationWithText(step.location.message.text, step.location) :
+                renderSarifLocationWithText(step.location.message.text, step.location, pathNodeKey) :
                 '[no location]';
               const additionalMsg = step.location !== undefined ?
-                renderSarifLocation(step.location) :
+                renderSarifLocation(step.location, pathNodeKey) :
                 '';
-
-              const stepIndex = resultIndex + pathIndex;
+              let isSelected = Keys.equalsNotUndefined(this.state.selectedPathNode, pathNodeKey);
+              const stepIndex = pathNodeIndex + 1; // Convert to 1-based
+              const zebraIndex = resultIndex + stepIndex;
               rows.push(
-                <tr>
+                <tr className={isSelected ? 'vscode-codeql__selected-path-node' : undefined}>
                   <td className="vscode-codeql__icon-cell"><span className="vscode-codeql__vertical-rule"></span></td>
                   <td className="vscode-codeql__icon-cell"><span className="vscode-codeql__vertical-rule"></span></td>
-                  <td {...zebraStripe(stepIndex, 'vscode-codeql__path-index-cell')}>{pathIndex}</td>
-                  <td {...zebraStripe(stepIndex)}>{msg} </td>
-                  <td {...zebraStripe(stepIndex, 'vscode-codeql__location-cell')}>{additionalMsg}</td>
+                  <td {...selectableZebraStripe(isSelected, zebraIndex, 'vscode-codeql__path-index-cell')}>{stepIndex}</td>
+                  <td {...selectableZebraStripe(isSelected, zebraIndex)}>{msg} </td>
+                  <td {...selectableZebraStripe(isSelected, zebraIndex, 'vscode-codeql__location-cell')}>{additionalMsg}</td>
                 </tr>);
-              pathIndex++;
             }
           }
         });
diff --git a/extensions/ql-vscode/src/view/result-table-utils.tsx b/extensions/ql-vscode/src/view/result-table-utils.tsx
@@ -16,10 +16,12 @@ export const toggleDiagnosticsClassName = `${className}-toggle-diagnostics`;
 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';
+export const selectedRowClassName = 'vscode-codeql__result-table-row--selected';
 
 export function jumpToLocationHandler(
   loc: ResolvableLocationValue,
-  databaseUri: string
+  databaseUri: string,
+  callback?: () => void
 ): (e: React.MouseEvent) => void {
   return (e) => {
     vscode.postMessage({
@@ -29,14 +31,15 @@ export function jumpToLocationHandler(
     });
     e.preventDefault();
     e.stopPropagation();
+    if (callback) callback();
   };
 }
 
 /**
  * Render a location as a link which when clicked displays the original location.
  */
 export function renderLocation(loc: LocationValue | undefined, label: string | undefined,
-  databaseUri: string, title?: string): JSX.Element {
+  databaseUri: string, title?: string, callback?: () => void): JSX.Element {
 
   // If the label was empty, use a placeholder instead, so the link is still clickable.
   let displayLabel = label;
@@ -51,7 +54,7 @@ export function renderLocation(loc: LocationValue | undefined, label: string | u
       return <a href="#"
         className="vscode-codeql__result-table-location-link"
         title={title}
-        onClick={jumpToLocationHandler(resolvableLoc, databaseUri)}>{displayLabel}</a>;
+        onClick={jumpToLocationHandler(resolvableLoc, databaseUri, callback)}>{displayLabel}</a>;
     } else {
       return <span title={title}>{displayLabel}</span>;
     }
@@ -63,5 +66,15 @@ export function renderLocation(loc: LocationValue | undefined, label: string | u
  * Returns the attributes for a zebra-striped table row at position `index`.
  */
 export function zebraStripe(index: number, ...otherClasses: string[]): { className: string } {
-  return { className: [(index % 2) ? oddRowClassName : evenRowClassName, otherClasses].join(' ') };
+  return { className: [(index % 2) ? oddRowClassName : evenRowClassName, ...otherClasses].join(' ') };
+}
+
+/**
+ * Returns the attributes for a zebra-striped table row at position `index`,
+ * with highlighting if `isSelected` is true.
+ */
+export function selectableZebraStripe(isSelected: boolean, index: number, ...otherClasses: string[]): { className: string } {
+  return isSelected
+      ? { className: [selectedRowClassName, ...otherClasses].join(' ') }
+      : zebraStripe(index, ...otherClasses)
 }
diff --git a/extensions/ql-vscode/src/view/resultsView.css b/extensions/ql-vscode/src/view/resultsView.css
@@ -87,6 +87,10 @@ select {
   background-color: var(--vscode-textBlockQuote-background);
 }
 
+.vscode-codeql__result-table-row--selected {
+  background-color: var(--vscode-editor-findMatchBackground);
+}
+
 td.vscode-codeql__icon-cell {
   text-align: center;
   position: relative;
