Skip to content

Commit

Permalink
feat: add line number toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
@P403n1x87
P403n1x87 committed May 29, 2021
1 parent b5f3fd9 commit e51d32b
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 32 deletions.
7 changes: 7 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Austin VS Code Extension

![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/p403n1x87.austin-vscode.svg?style=flat-square&color=blue&logo=visual-studio)

Profile and analyse your Python application inside VS Code using Austin.

<p align="center">
Expand Down Expand Up @@ -36,6 +38,11 @@ string. To reset the view, simply press <kbd>R</kbd>. Conveniently, you can
bring up the open dialog with <kbd>O</kbd> while the focus is on the flame graph
panel.

To toggle line numbers, press <kbd>L</kbd>. This could be useful when the same
Python module has multiple methods with the same names (e.g. `__init__`), since
the function names collected by Austin are not fully qualified.


## Configuration

Whenver you have an active Python script, the sampling interval and mode
Expand Down
10 changes: 7 additions & 3 deletions media/flamegraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ function hslToHex(h, s, l) {
}


var stringToColour = function (str) {
var stringToColour = function (str, highlight = false) {
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
let h = hash % 360;
return hslToHex(h >= 0 ? h : -h, 50, 75);
return hslToHex(h >= 0 ? h : -h, 50, highlight ? 90 : 70);
};

function isEmpty(obj) {
Expand All @@ -48,7 +48,11 @@ function flameGraph(data) {
};

flameGraph.setColorMapper(function (d, originalColor) {
return d.highlight ? "#E600E6" : stringToColour(d.data.name);
if (!isNaN(+d.data.name)) {
return '#808080';
}
// return stringToColour(d.data.name, d.highlight);
return d.highlight ? "#F620F6" : stringToColour(d.data.name);
});

flameGraph.onClick(function (d) {
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"displayName": "Austin VS Code",
"publisher": "p403n1x87",
"description": "Austin extension for VS Code",
"version": "0.2.0",
"version": "0.3.0",
"engines": {
"vscode": "^1.52.0"
},
Expand Down
43 changes: 26 additions & 17 deletions src/controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ export class FlameGraphViewProvider implements vscode.WebviewViewProvider {
public static readonly viewType = 'austin-vscode.flameGraph';

private _view?: vscode.WebviewView;
private _source: string | null = null;
private _lines: boolean = false;

constructor(
private readonly _extensionUri: vscode.Uri,
Expand Down Expand Up @@ -55,9 +57,18 @@ export class FlameGraphViewProvider implements vscode.WebviewViewProvider {
}
});
break;

case "l":
this._lines = !this._lines;
if (this._source) {
this.showFlameGraph(this._source);
}
break;

case "o":
this.openSampleFile();
break;

case "r":
webview.postMessage("reset");
}
Expand All @@ -66,8 +77,7 @@ export class FlameGraphViewProvider implements vscode.WebviewViewProvider {

const source = data.source;
const module = data.file;
const minLine = data.lines ? Math.min(...data.lines) : 0;
const line = Math.max(minLine - 4, 1);
const line = data.line || 0;
if (!source || !module) {
return;
}
Expand All @@ -93,6 +103,17 @@ export class FlameGraphViewProvider implements vscode.WebviewViewProvider {
webviewView.show(true);
}

private showFlameGraph(outputFile: string) {
makeHierarchy(outputFile, this._lines, (data) => {
if (this._view) {
this._setFlameGraphHtml();
this._view.show?.(true);
this._view.webview.postMessage(data);
this._source = outputFile;
}
});
}

public async profileScript() {
if (this._view) {
const pythonExtension = vscode.extensions.getExtension("ms-python.python");
Expand Down Expand Up @@ -130,13 +151,7 @@ export class FlameGraphViewProvider implements vscode.WebviewViewProvider {
let own: number, total: number;
[own, total] = v;
setLineHeat(k, own, total, overallTotal);
makeHierarchy(outputFile, (data) => {
if (this._view) {
this._setFlameGraphHtml();
this._view.show?.();
this._view.webview.postMessage(data);
}
});
this.showFlameGraph(outputFile);
});
});
}
Expand Down Expand Up @@ -166,13 +181,7 @@ export class FlameGraphViewProvider implements vscode.WebviewViewProvider {
if (currentUri?.scheme === "file") {
const outputFile = currentUri.fsPath;
this._setLoadingHtml();
makeHierarchy(outputFile, (data) => {
if (this._view) {
this._setFlameGraphHtml();
this._view.show?.(true);
this._view.webview.postMessage(data);
}
});
this.showFlameGraph(outputFile);
}
}
});
Expand Down Expand Up @@ -220,7 +229,7 @@ export class FlameGraphViewProvider implements vscode.WebviewViewProvider {
</head>
<body>
<div class="box">
<div class="center">Crunching ...</div>
<div class="center">Crunching the numbers ...</div>
</div>
<script>
Expand Down
45 changes: 34 additions & 11 deletions src/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ interface D3Hierarchy {
}


export function makeHierarchy(file: string, cb: (stats: D3Hierarchy) => void) {
export function makeHierarchy(file: string, lines: boolean, cb: (stats: D3Hierarchy) => void) {
const readInterface = createInterface({
input: createReadStream(file)
});
Expand All @@ -122,27 +122,50 @@ export function makeHierarchy(file: string, cb: (stats: D3Hierarchy) => void) {
let frameList: FrameObject[] = frames.split(';').map(parseFrame);
stats.value += metric;

let container = stats.children;
frameList.forEach((fo) => {
const name = fo.module ? `${fo.scope} (${fo.module})` : fo.scope;
let updateContainer = (container: D3Hierarchy[], frame: FrameObject, keyFactory: (frame: FrameObject) => string, newDataFactory: (frame: FrameObject) => any) => {
const name: string = keyFactory(frame);
for (let e of container) {
if (e.name === name) {
e.value += metric;
if (!e.data.lines.includes(fo.lineNumber)) {
e.data.lines.push(fo.lineNumber);
}
container = e.children;
return;
return e.children;
}
}
const newContainer: D3Hierarchy[] = [];
container.push({
"name": name,
"value": metric,
children: newContainer,
"data": { "file": fo.module, "lines": [fo.lineNumber], "source": file },
"data": newDataFactory(frame),
});
container = newContainer;
return newContainer;
};

let container = stats.children;
frameList.forEach((fo) => {
if (lines) {
container = updateContainer(
container,
fo,
(fo) => { return fo.lineNumber ? `${fo.scope} (${fo.module})` : fo.scope; },
(fo) => { return { "file": fo.module, "source": file }; }
);
if (fo.lineNumber) {
container = updateContainer(
container,
fo,
(fo) => { return `${fo.lineNumber}`; },
(fo) => { return { "file": fo.module, "line": fo.lineNumber, "source": file }; }
);
};
}
else {
container = updateContainer(
container,
fo,
(fo) => { return fo.module && fo.lineNumber ? `${fo.scope} (${fo.module})` : fo.scope; },
(fo) => { return { "file": fo.module, "line": fo.lineNumber, "source": file }; }
);
}
});

});
Expand Down

0 comments on commit e51d32b

Please sign in to comment.