Skip to content

Add commands for navigating the steps on a path #175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 25, 2019
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions extensions/ql-vscode/src/result-keys.ts
Original file line number Diff line number Diff line change
@@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be const, yeah?

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;
}
64 changes: 37 additions & 27 deletions extensions/ql-vscode/src/view/alert-table.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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 };
}

/**
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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) {
Expand All @@ -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));
}
}

Expand All @@ -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) {
Expand All @@ -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
Expand All @@ -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;
Expand All @@ -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++;
}
}
});
Expand Down
21 changes: 17 additions & 4 deletions extensions/ql-vscode/src/view/result-table-utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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;
Expand All @@ -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>;
}
Expand All @@ -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)
}
4 changes: 4 additions & 0 deletions extensions/ql-vscode/src/view/resultsView.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down