@parca/profile 0.16.511 → 0.17.0
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 +6 -0
- package/dist/MetricsGraph/UtilizationMetrics/index.d.ts.map +1 -1
- package/dist/MetricsGraph/UtilizationMetrics/index.js +3 -1
- package/dist/MetricsGraph/utils/colorMapping.d.ts.map +1 -1
- package/dist/MetricsGraph/utils/colorMapping.js +1 -0
- package/dist/MetricsSeries/index.d.ts +2 -1
- package/dist/MetricsSeries/index.d.ts.map +1 -1
- package/dist/MetricsSeries/index.js +2 -1
- package/dist/ProfileSelector/MetricsGraphSection.js +1 -1
- package/package.json +2 -2
- package/src/MetricsGraph/UtilizationMetrics/index.tsx +5 -0
- package/src/MetricsGraph/utils/colorMapping.ts +1 -0
- package/src/MetricsSeries/index.tsx +3 -0
- package/src/ProfileSelector/MetricsGraphSection.tsx +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
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.17.0](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.511...@parca/profile@0.17.0) (2025-05-14)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- ui: Add support for dashed lines for limit metrics in graphs ([ff2a43a](https://github.com/parca-dev/parca/commit/ff2a43a9ead4e3c7ce47beb824c2b3165caf73df))
|
|
11
|
+
|
|
6
12
|
## [0.16.511](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.510...@parca/profile@0.16.511) (2025-05-08)
|
|
7
13
|
|
|
8
14
|
**Note:** Version bump only for package @parca/profile
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAKpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAO9E,UAAU,WAAW;IACnB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAQD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAKpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAO9E,UAAU,WAAW;IACnB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAQD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,eAAe,EAAE,CACf,MAAM,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KACvE,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAudF,QAAA,MAAM,kBAAkB,2GASrB,KAAK,KAAG,GAAG,CAAC,OAgCd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -229,11 +229,13 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
|
|
|
229
229
|
return false;
|
|
230
230
|
});
|
|
231
231
|
}
|
|
232
|
+
const isLimit = s.metric.findIndex(m => m.name === '__type__' && m.value === 'limit') > -1;
|
|
233
|
+
const strokeDasharray = isLimit ? '8 4' : '';
|
|
232
234
|
return (_jsx("g", { className: "line cursor-pointer", children: _jsx(MetricsSeries, { data: s, line: l, color: getSeriesColor(s.metric), strokeWidth: isSelected
|
|
233
235
|
? lineStrokeSelected
|
|
234
236
|
: hovering && highlighted != null && i === highlighted.seriesIndex
|
|
235
237
|
? lineStrokeHover
|
|
236
|
-
: lineStroke, xScale: xScale, yScale: yScale, onClick: () => {
|
|
238
|
+
: lineStroke, strokeDasharray: strokeDasharray, xScale: xScale, yScale: yScale, onClick: () => {
|
|
237
239
|
if (highlighted != null) {
|
|
238
240
|
setSelectedSeries(JSON.stringify(highlighted.labels.map(l => ({
|
|
239
241
|
key: l.name,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colorMapping.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/utils/colorMapping.ts"],"names":[],"mappings":"AAqBA;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,GAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"colorMapping.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/utils/colorMapping.ts"],"names":[],"mappings":"AAqBA;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,GAAG,MAAM,CAiBnF"}
|
|
@@ -21,6 +21,7 @@ const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
|
|
|
21
21
|
export function getSeriesColor(labels) {
|
|
22
22
|
// Create a key from all labels to ensure unique identification
|
|
23
23
|
const key = labels
|
|
24
|
+
.filter(l => l.name !== '__type__' && l.name !== 'limit') // ignore injected virtual labels
|
|
24
25
|
.map(l => `${l.name}=${l.value}`)
|
|
25
26
|
.sort()
|
|
26
27
|
.join(',');
|
|
@@ -4,10 +4,11 @@ interface MetricsSeriesProps {
|
|
|
4
4
|
line: d3.Line<[number, number]>;
|
|
5
5
|
color: string;
|
|
6
6
|
strokeWidth: string;
|
|
7
|
+
strokeDasharray?: string;
|
|
7
8
|
xScale: (input: number) => number;
|
|
8
9
|
yScale: (input: number) => number;
|
|
9
10
|
onClick?: () => void;
|
|
10
11
|
}
|
|
11
|
-
declare const MetricsSeries: ({ data, line, color, strokeWidth, onClick, }: MetricsSeriesProps) => JSX.Element;
|
|
12
|
+
declare const MetricsSeries: ({ data, line, color, strokeWidth, strokeDasharray, onClick, }: MetricsSeriesProps) => JSX.Element;
|
|
12
13
|
export default MetricsSeries;
|
|
13
14
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsSeries/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AAEzB,UAAU,kBAAkB;IAC1B,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsSeries/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AAEzB,UAAU,kBAAkB;IAC1B,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,kEAOhB,kBAAkB,KAAG,GAAG,CAAC,OAa3B,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
const MetricsSeries = ({ data, line, color, strokeWidth, onClick, }) => (_jsx("g", { className: "line-group", children: _jsx("path", { className: "line", d: line(data.values) ?? undefined, style: {
|
|
2
|
+
const MetricsSeries = ({ data, line, color, strokeWidth, strokeDasharray = '', onClick, }) => (_jsx("g", { className: "line-group", children: _jsx("path", { className: "line", d: line(data.values) ?? undefined, style: {
|
|
3
3
|
stroke: color,
|
|
4
4
|
strokeWidth,
|
|
5
|
+
strokeDasharray,
|
|
5
6
|
}, onClick: onClick }) }));
|
|
6
7
|
export default MetricsSeries;
|
|
@@ -79,7 +79,7 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
|
|
|
79
79
|
const UtilizationGraphToShow = ({ utilizationMetrics, }) => {
|
|
80
80
|
const throughputMetrics = utilizationMetrics.filter(metric => metric.name === 'gpu_pcie_throughput_transmit_bytes' ||
|
|
81
81
|
metric.name === 'gpu_pcie_throughput_receive_bytes');
|
|
82
|
-
if (utilizationMetrics
|
|
82
|
+
if (utilizationMetrics.length === 0) {
|
|
83
83
|
return _jsx(_Fragment, {});
|
|
84
84
|
}
|
|
85
85
|
return (_jsxs("div", { children: [utilizationMetrics.map(({ name, humanReadableName, data }) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@parca/profile",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.17.0",
|
|
4
4
|
"description": "Profile viewing libraries",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@headlessui/react": "^1.7.19",
|
|
@@ -77,5 +77,5 @@
|
|
|
77
77
|
"access": "public",
|
|
78
78
|
"registry": "https://registry.npmjs.org/"
|
|
79
79
|
},
|
|
80
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "71a61d8524e92e2e9fb1f4b2ea9d53b066bf5b3c"
|
|
81
81
|
}
|
|
@@ -481,6 +481,10 @@ const RawUtilizationMetrics = ({
|
|
|
481
481
|
});
|
|
482
482
|
}
|
|
483
483
|
|
|
484
|
+
const isLimit =
|
|
485
|
+
s.metric.findIndex(m => m.name === '__type__' && m.value === 'limit') > -1;
|
|
486
|
+
const strokeDasharray = isLimit ? '8 4' : '';
|
|
487
|
+
|
|
484
488
|
return (
|
|
485
489
|
<g key={i} className="line cursor-pointer">
|
|
486
490
|
<MetricsSeries
|
|
@@ -494,6 +498,7 @@ const RawUtilizationMetrics = ({
|
|
|
494
498
|
? lineStrokeHover
|
|
495
499
|
: lineStroke
|
|
496
500
|
}
|
|
501
|
+
strokeDasharray={strokeDasharray}
|
|
497
502
|
xScale={xScale}
|
|
498
503
|
yScale={yScale}
|
|
499
504
|
onClick={() => {
|
|
@@ -25,6 +25,7 @@ const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
|
|
|
25
25
|
export function getSeriesColor(labels: Array<{name: string; value: string}>): string {
|
|
26
26
|
// Create a key from all labels to ensure unique identification
|
|
27
27
|
const key = labels
|
|
28
|
+
.filter(l => l.name !== '__type__' && l.name !== 'limit') // ignore injected virtual labels
|
|
28
29
|
.map(l => `${l.name}=${l.value}`)
|
|
29
30
|
.sort()
|
|
30
31
|
.join(',');
|
|
@@ -18,6 +18,7 @@ interface MetricsSeriesProps {
|
|
|
18
18
|
line: d3.Line<[number, number]>;
|
|
19
19
|
color: string;
|
|
20
20
|
strokeWidth: string;
|
|
21
|
+
strokeDasharray?: string;
|
|
21
22
|
xScale: (input: number) => number;
|
|
22
23
|
yScale: (input: number) => number;
|
|
23
24
|
onClick?: () => void;
|
|
@@ -28,6 +29,7 @@ const MetricsSeries = ({
|
|
|
28
29
|
line,
|
|
29
30
|
color,
|
|
30
31
|
strokeWidth,
|
|
32
|
+
strokeDasharray = '',
|
|
31
33
|
onClick,
|
|
32
34
|
}: MetricsSeriesProps): JSX.Element => (
|
|
33
35
|
<g className="line-group">
|
|
@@ -37,6 +39,7 @@ const MetricsSeries = ({
|
|
|
37
39
|
style={{
|
|
38
40
|
stroke: color,
|
|
39
41
|
strokeWidth,
|
|
42
|
+
strokeDasharray,
|
|
40
43
|
}}
|
|
41
44
|
onClick={onClick}
|
|
42
45
|
/>
|
|
@@ -153,7 +153,7 @@ export function MetricsGraphSection({
|
|
|
153
153
|
metric.name === 'gpu_pcie_throughput_receive_bytes'
|
|
154
154
|
);
|
|
155
155
|
|
|
156
|
-
if (utilizationMetrics
|
|
156
|
+
if (utilizationMetrics.length === 0) {
|
|
157
157
|
return <></>;
|
|
158
158
|
}
|
|
159
159
|
|