@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 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;AAkdF,QAAA,MAAM,kBAAkB,2GASrB,KAAK,KAAG,GAAG,CAAC,OAgCd,CAAC;AAEF,eAAe,kBAAkB,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,CAgBnF"}
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,iDAMhB,kBAAkB,KAAG,GAAG,CAAC,OAY3B,CAAC;AAEF,eAAe,aAAa,CAAC"}
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 === undefined || utilizationMetrics.length === 0) {
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.16.511",
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": "56bc28ad4c9e60a31602dd5d248d2b42a959ae54"
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 === undefined || utilizationMetrics.length === 0) {
156
+ if (utilizationMetrics.length === 0) {
157
157
  return <></>;
158
158
  }
159
159