@parca/profile 0.19.110 → 0.19.111
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/dist/SourceView/Highlighter.d.ts +5 -2
- package/dist/SourceView/Highlighter.d.ts.map +1 -1
- package/dist/SourceView/Highlighter.js +3 -2
- package/dist/SourceView/index.d.ts.map +1 -1
- package/dist/SourceView/index.js +40 -11
- package/package.json +2 -2
- package/src/SourceView/Highlighter.tsx +6 -5
- package/src/SourceView/index.tsx +45 -12
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 0.19.111 (2026-01-15)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @parca/profile
|
|
9
|
+
|
|
6
10
|
## 0.19.110 (2026-01-13)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @parca/profile
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { MouseEventHandler } from 'react';
|
|
2
|
-
import { Vector } from 'apache-arrow';
|
|
3
2
|
import { type createElementProps } from 'react-syntax-highlighter';
|
|
4
3
|
interface RendererProps {
|
|
5
4
|
rows: any[];
|
|
@@ -12,7 +11,11 @@ interface HighlighterProps {
|
|
|
12
11
|
content: string;
|
|
13
12
|
renderer?: Renderer;
|
|
14
13
|
}
|
|
15
|
-
export
|
|
14
|
+
export type LineDataLookup = (lineNumber: number) => {
|
|
15
|
+
cumulative: bigint;
|
|
16
|
+
flat: bigint;
|
|
17
|
+
} | undefined;
|
|
18
|
+
export declare const profileAwareRenderer: (getLineData: LineDataLookup, total: bigint, filtered: bigint, onContextMenu: MouseEventHandler<HTMLDivElement>) => Renderer;
|
|
16
19
|
export declare const Highlighter: ({ file, content, renderer }: HighlighterProps) => JSX.Element;
|
|
17
20
|
export {};
|
|
18
21
|
//# sourceMappingURL=Highlighter.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Highlighter.d.ts","sourceRoot":"","sources":["../../src/SourceView/Highlighter.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,iBAAiB,EAAiB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Highlighter.d.ts","sourceRoot":"","sources":["../../src/SourceView/Highlighter.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAC,KAAK,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAcjE,UAAU,aAAa;IAErB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC7C,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;CACxD;AAED,KAAK,QAAQ,GAAG,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,eAAe,EAAC,EAAE,aAAa,KAAK,GAAG,CAAC,OAAO,CAAC;AAEpF,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAuED,MAAM,MAAM,cAAc,GAAG,CAAC,UAAU,EAAE,MAAM,KAAK;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG,SAAS,CAAC;AAEpG,eAAO,MAAM,oBAAoB,GAC/B,aAAa,cAAc,EAC3B,OAAO,MAAM,EACb,UAAU,MAAM,EAChB,eAAe,iBAAiB,CAAC,cAAc,CAAC,KAC/C,QAqEF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,6BAA2B,gBAAgB,KAAG,GAAG,CAAC,OAyC7E,CAAC"}
|
|
@@ -57,7 +57,7 @@ const LineProfileMetadata = ({ value, total, filtered, }) => {
|
|
|
57
57
|
const charsToWidth = (chars) => {
|
|
58
58
|
return charsToWidthMap[chars];
|
|
59
59
|
};
|
|
60
|
-
export const profileAwareRenderer = (
|
|
60
|
+
export const profileAwareRenderer = (getLineData, total, filtered, onContextMenu) => {
|
|
61
61
|
return function ProfileAwareRenderer({ rows, stylesheet, useInlineStyles, }) {
|
|
62
62
|
const lineNumberWidth = charsToWidth(rows.length.toString().length);
|
|
63
63
|
const { startLine, endLine, setLineRange } = useLineRange();
|
|
@@ -65,6 +65,7 @@ export const profileAwareRenderer = (cumulative, flat, total, filtered, onContex
|
|
|
65
65
|
const lineNumber = node.children[0].children[0].value;
|
|
66
66
|
const isCurrentLine = lineNumber >= startLine && lineNumber <= endLine;
|
|
67
67
|
node.children = node.children.slice(1);
|
|
68
|
+
const data = getLineData(lineNumber);
|
|
68
69
|
return (_jsxs("div", { className: "flex gap-1", children: [_jsx("div", { className: cx('shrink-0 overflow-hidden border-r border-r-gray-200 text-right dark:border-r-gray-700', lineNumberWidth), children: _jsx(LineNo, { value: lineNumber, isCurrent: isCurrentLine, selectLine: (isShiftDown = false) => {
|
|
69
70
|
if (!isShiftDown) {
|
|
70
71
|
setLineRange(lineNumber, lineNumber);
|
|
@@ -77,7 +78,7 @@ export const profileAwareRenderer = (cumulative, flat, total, filtered, onContex
|
|
|
77
78
|
setLineRange(startLine, lineNumber);
|
|
78
79
|
}
|
|
79
80
|
}
|
|
80
|
-
} }) }), _jsx(LineProfileMetadata, { value: cumulative
|
|
81
|
+
} }) }), _jsx(LineProfileMetadata, { value: data?.cumulative ?? 0n, total: total, filtered: filtered }), _jsx(LineProfileMetadata, { value: data?.flat ?? 0n, total: total, filtered: filtered }), _jsx("div", { className: cx('w-full flex-grow-0 border-l border-gray-200 pl-1 dark:border-gray-700', {
|
|
81
82
|
'bg-yellow-200 dark:bg-yellow-700': isCurrentLine,
|
|
82
83
|
}), onContextMenu: onContextMenu, children: createElement({
|
|
83
84
|
key: `source-line-${i}`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SourceView/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAQrC,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SourceView/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAQrC,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,eAAO,MAAM,UAAU,6CAuKrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
|
package/dist/SourceView/index.js
CHANGED
|
@@ -35,28 +35,57 @@ export const SourceView = React.memo(function SourceView({ data, loading, total,
|
|
|
35
35
|
id: MENU_ID,
|
|
36
36
|
});
|
|
37
37
|
const { startLine, endLine } = useLineRange();
|
|
38
|
-
const
|
|
38
|
+
const sourceTable = useMemo(() => {
|
|
39
39
|
if (data === undefined) {
|
|
40
|
-
return
|
|
40
|
+
return null;
|
|
41
41
|
}
|
|
42
42
|
const table = tableFromIPC(data.record);
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
return {
|
|
44
|
+
numRows: table.numRows,
|
|
45
|
+
lineNumbers: table.getChild('line_number'),
|
|
46
|
+
cumulative: table.getChild('cumulative'),
|
|
47
|
+
flat: table.getChild('flat'),
|
|
48
|
+
};
|
|
46
49
|
}, [data]);
|
|
50
|
+
const getLineData = useCallback((lineNumber) => {
|
|
51
|
+
if (sourceTable === null || sourceTable.lineNumbers === null) {
|
|
52
|
+
return undefined;
|
|
53
|
+
}
|
|
54
|
+
const { numRows, lineNumbers, cumulative, flat } = sourceTable;
|
|
55
|
+
let lo = 0;
|
|
56
|
+
let hi = numRows - 1;
|
|
57
|
+
while (lo <= hi) {
|
|
58
|
+
const mid = (lo + hi) >>> 1;
|
|
59
|
+
const midVal = Number(lineNumbers.get(mid));
|
|
60
|
+
if (midVal === lineNumber) {
|
|
61
|
+
return {
|
|
62
|
+
cumulative: cumulative?.get(mid) ?? 0n,
|
|
63
|
+
flat: flat?.get(mid) ?? 0n,
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
if (midVal < lineNumber) {
|
|
67
|
+
lo = mid + 1;
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
hi = mid - 1;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
return undefined;
|
|
74
|
+
}, [sourceTable]);
|
|
47
75
|
const getProfileDataForLine = useCallback((line, newLine) => {
|
|
48
|
-
|
|
76
|
+
const data = getLineData(line);
|
|
77
|
+
if (data === undefined) {
|
|
49
78
|
return undefined;
|
|
50
79
|
}
|
|
51
|
-
if (cumulative
|
|
80
|
+
if (data.cumulative === 0n && data.flat === 0n) {
|
|
52
81
|
return undefined;
|
|
53
82
|
}
|
|
54
83
|
return {
|
|
55
84
|
line: newLine,
|
|
56
|
-
cumulative: Number(cumulative
|
|
57
|
-
flat: Number(flat
|
|
85
|
+
cumulative: Number(data.cumulative),
|
|
86
|
+
flat: Number(data.flat),
|
|
58
87
|
};
|
|
59
|
-
}, [
|
|
88
|
+
}, [getLineData]);
|
|
60
89
|
const [selectedCode, profileData] = useMemo(() => {
|
|
61
90
|
if (startLine === -1 && endLine === -1) {
|
|
62
91
|
return ['', []];
|
|
@@ -97,6 +126,6 @@ export const SourceView = React.memo(function SourceView({ data, loading, total,
|
|
|
97
126
|
event,
|
|
98
127
|
});
|
|
99
128
|
};
|
|
100
|
-
return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: [_jsx(Highlighter, { file: sourceFileName, content: data.source, renderer: profileAwareRenderer(
|
|
129
|
+
return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: [_jsx(Highlighter, { file: sourceFileName, content: data.source, renderer: profileAwareRenderer(getLineData, total, filtered, onContextMenu) }), sourceViewContextMenuItems.length > 0 ? (_jsx(Menu, { id: MENU_ID, children: sourceViewContextMenuItems.map(item => (_jsx(Item, { onClick: () => item.action(selectedCode, profileData), children: item.label }, item.id))) })) : null] }, "source-view-loaded") }));
|
|
101
130
|
});
|
|
102
131
|
export default SourceView;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@parca/profile",
|
|
3
|
-
"version": "0.19.
|
|
3
|
+
"version": "0.19.111",
|
|
4
4
|
"description": "Profile viewing libraries",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@floating-ui/react": "^0.27.12",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"access": "public",
|
|
85
85
|
"registry": "https://registry.npmjs.org/"
|
|
86
86
|
},
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "77f4ccf0e86c3d2c62f8a24d2d5316b78f24dec7"
|
|
88
88
|
}
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
|
|
14
14
|
import {MouseEventHandler, useId, useMemo} from 'react';
|
|
15
15
|
|
|
16
|
-
import {Vector} from 'apache-arrow';
|
|
17
16
|
import cx from 'classnames';
|
|
18
17
|
import {scaleLinear} from 'd3-scale';
|
|
19
18
|
import {type createElementProps} from 'react-syntax-highlighter';
|
|
@@ -114,9 +113,10 @@ const charsToWidth = (chars: number): string => {
|
|
|
114
113
|
return charsToWidthMap[chars];
|
|
115
114
|
};
|
|
116
115
|
|
|
116
|
+
export type LineDataLookup = (lineNumber: number) => {cumulative: bigint; flat: bigint} | undefined;
|
|
117
|
+
|
|
117
118
|
export const profileAwareRenderer = (
|
|
118
|
-
|
|
119
|
-
flat: Vector | null,
|
|
119
|
+
getLineData: LineDataLookup,
|
|
120
120
|
total: bigint,
|
|
121
121
|
filtered: bigint,
|
|
122
122
|
onContextMenu: MouseEventHandler<HTMLDivElement>
|
|
@@ -135,6 +135,7 @@ export const profileAwareRenderer = (
|
|
|
135
135
|
const lineNumber: number = node.children[0].children[0].value as number;
|
|
136
136
|
const isCurrentLine = lineNumber >= startLine && lineNumber <= endLine;
|
|
137
137
|
node.children = node.children.slice(1);
|
|
138
|
+
const data = getLineData(lineNumber);
|
|
138
139
|
return (
|
|
139
140
|
<div className="flex gap-1" key={`${i}`}>
|
|
140
141
|
<div
|
|
@@ -161,11 +162,11 @@ export const profileAwareRenderer = (
|
|
|
161
162
|
/>
|
|
162
163
|
</div>
|
|
163
164
|
<LineProfileMetadata
|
|
164
|
-
value={cumulative
|
|
165
|
+
value={data?.cumulative ?? 0n}
|
|
165
166
|
total={total}
|
|
166
167
|
filtered={filtered}
|
|
167
168
|
/>
|
|
168
|
-
<LineProfileMetadata value={flat
|
|
169
|
+
<LineProfileMetadata value={data?.flat ?? 0n} total={total} filtered={filtered} />
|
|
169
170
|
<div
|
|
170
171
|
className={cx(
|
|
171
172
|
'w-full flex-grow-0 border-l border-gray-200 pl-1 dark:border-gray-700',
|
package/src/SourceView/index.tsx
CHANGED
|
@@ -22,7 +22,7 @@ import {SourceSkeleton, useParcaContext, useURLState, type ProfileData} from '@p
|
|
|
22
22
|
|
|
23
23
|
import {ExpandOnHover} from '../GraphTooltipArrow/ExpandOnHoverValue';
|
|
24
24
|
import {truncateStringReverse} from '../utils';
|
|
25
|
-
import {Highlighter, profileAwareRenderer} from './Highlighter';
|
|
25
|
+
import {Highlighter, profileAwareRenderer, type LineDataLookup} from './Highlighter';
|
|
26
26
|
import useLineRange from './useSelectedLineRange';
|
|
27
27
|
|
|
28
28
|
interface SourceViewProps {
|
|
@@ -59,31 +59,64 @@ export const SourceView = React.memo(function SourceView({
|
|
|
59
59
|
|
|
60
60
|
const {startLine, endLine} = useLineRange();
|
|
61
61
|
|
|
62
|
-
const
|
|
62
|
+
const sourceTable = useMemo(() => {
|
|
63
63
|
if (data === undefined) {
|
|
64
|
-
return
|
|
64
|
+
return null;
|
|
65
65
|
}
|
|
66
66
|
const table = tableFromIPC(data.record);
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
67
|
+
return {
|
|
68
|
+
numRows: table.numRows,
|
|
69
|
+
lineNumbers: table.getChild('line_number'),
|
|
70
|
+
cumulative: table.getChild('cumulative'),
|
|
71
|
+
flat: table.getChild('flat'),
|
|
72
|
+
};
|
|
70
73
|
}, [data]);
|
|
71
74
|
|
|
75
|
+
const getLineData: LineDataLookup = useCallback(
|
|
76
|
+
(lineNumber: number) => {
|
|
77
|
+
if (sourceTable === null || sourceTable.lineNumbers === null) {
|
|
78
|
+
return undefined;
|
|
79
|
+
}
|
|
80
|
+
const {numRows, lineNumbers, cumulative, flat} = sourceTable;
|
|
81
|
+
|
|
82
|
+
let lo = 0;
|
|
83
|
+
let hi = numRows - 1;
|
|
84
|
+
while (lo <= hi) {
|
|
85
|
+
const mid = (lo + hi) >>> 1;
|
|
86
|
+
const midVal = Number(lineNumbers.get(mid));
|
|
87
|
+
if (midVal === lineNumber) {
|
|
88
|
+
return {
|
|
89
|
+
cumulative: (cumulative?.get(mid) as bigint) ?? 0n,
|
|
90
|
+
flat: (flat?.get(mid) as bigint) ?? 0n,
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
if (midVal < lineNumber) {
|
|
94
|
+
lo = mid + 1;
|
|
95
|
+
} else {
|
|
96
|
+
hi = mid - 1;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
return undefined;
|
|
100
|
+
},
|
|
101
|
+
[sourceTable]
|
|
102
|
+
);
|
|
103
|
+
|
|
72
104
|
const getProfileDataForLine = useCallback(
|
|
73
105
|
(line: number, newLine: number): ProfileData | undefined => {
|
|
74
|
-
|
|
106
|
+
const data = getLineData(line);
|
|
107
|
+
if (data === undefined) {
|
|
75
108
|
return undefined;
|
|
76
109
|
}
|
|
77
|
-
if (cumulative
|
|
110
|
+
if (data.cumulative === 0n && data.flat === 0n) {
|
|
78
111
|
return undefined;
|
|
79
112
|
}
|
|
80
113
|
return {
|
|
81
114
|
line: newLine,
|
|
82
|
-
cumulative: Number(cumulative
|
|
83
|
-
flat: Number(flat
|
|
115
|
+
cumulative: Number(data.cumulative),
|
|
116
|
+
flat: Number(data.flat),
|
|
84
117
|
};
|
|
85
118
|
},
|
|
86
|
-
[
|
|
119
|
+
[getLineData]
|
|
87
120
|
);
|
|
88
121
|
|
|
89
122
|
const [selectedCode, profileData] = useMemo(() => {
|
|
@@ -155,7 +188,7 @@ export const SourceView = React.memo(function SourceView({
|
|
|
155
188
|
<Highlighter
|
|
156
189
|
file={sourceFileName as string}
|
|
157
190
|
content={data.source}
|
|
158
|
-
renderer={profileAwareRenderer(
|
|
191
|
+
renderer={profileAwareRenderer(getLineData, total, filtered, onContextMenu)}
|
|
159
192
|
/>
|
|
160
193
|
{sourceViewContextMenuItems.length > 0 ? (
|
|
161
194
|
<Menu id={MENU_ID}>
|