@parca/profile 0.16.501 → 0.16.503

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.503](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.502...@parca/profile@0.16.503) (2025-04-30)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.502](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.501...@parca/profile@0.16.502) (2025-04-29)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.501](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.500...@parca/profile@0.16.501) (2025-04-29)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/UtilizationMetrics/Throughput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Throughput.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/Throughput.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAIpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAiB9E,UAAU,WAAW;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,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,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAmeF,QAAA,MAAM,SAAS,gIAUZ,KAAK,KAAG,GAAG,CAAC,OAiCd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Throughput.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/Throughput.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAqD,MAAM,mBAAmB,CAAC;AAIpG,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAkB9E,UAAU,WAAW;IACnB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,WAAW,EAAE,YAAY,EAAE,CAAC;IAC5B,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,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AA0dF,QAAA,MAAM,SAAS,gIAUZ,KAAK,KAAG,GAAG,CAAC,OAiCd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/MetricsGraph/UtilizationMetrics/Throughput.js

@@ -22,6 +22,7 @@ import { formatDate, formatForTimespan, getPrecision, valueFormatter } from '@pa
 import MetricsContextMenu from '../MetricsContextMenu';
 import MetricsTooltip from '../MetricsTooltip';
 import { useMetricsGraphDimensions } from '../useMetricsGraphDimensions';
+import { getSeriesColor } from '../utils/colorMapping';
 function transformToSeries(data, isReceive = false) {
     const series = data.reduce(function (agg, s) {
         if (s.labelset !== undefined) {
@@ -120,10 +121,6 @@ const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange
             event: e,
         });
     }, [show]);
-    const color = d3.scaleOrdinal(d3.schemeCategory10);
-    const getSeriesColor = (series) => {
-        return color(series.labelset);
-    };
     // Create line generator for both transmit and receive
     const lineGenerator = d3
         .line()
@@ -229,13 +226,11 @@ const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange
                                                     return false;
                                                 });
                                             }
-                                            const seriesColor = getSeriesColor(s);
-                                            const strokeOpacity = isSelected ? 1 : 0.8;
-                                            return (_jsx("g", { className: "line cursor-pointer", children: _jsx("path", { d: lineGenerator(s.values) ?? '', fill: "none", stroke: seriesColor, strokeWidth: isSelected
+                                            return (_jsx("g", { className: "line cursor-pointer", children: _jsx("path", { d: lineGenerator(s.values) ?? '', fill: "none", stroke: getSeriesColor(s.metric), strokeWidth: isSelected
                                                         ? lineStrokeSelected
                                                         : hovering && highlighted != null && i === highlighted.seriesIndex
                                                             ? lineStrokeHover
-                                                            : lineStroke, strokeOpacity: strokeOpacity, onClick: () => {
+                                                            : lineStroke, strokeOpacity: isSelected ? 1 : 0.8, onClick: () => {
                                                         if (highlighted != null) {
                                                             setSelectedSeries(JSON.stringify(highlighted.labels.map(l => ({
                                                                 key: l.name,

package/dist/MetricsGraph/UtilizationMetrics/index.d.ts.map

@@ -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;AAM9E,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;AAodF,QAAA,MAAM,kBAAkB,2GASrB,KAAK,KAAG,GAAG,CAAC,OAgCd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"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"}

package/dist/MetricsGraph/UtilizationMetrics/index.js

@@ -23,6 +23,7 @@ import MetricsSeries from '../../MetricsSeries';
 import MetricsContextMenu from '../MetricsContextMenu';
 import MetricsTooltip from '../MetricsTooltip';
 import { useMetricsGraphDimensions } from '../useMetricsGraphDimensions';
+import { getSeriesColor } from '../utils/colorMapping';
 function transformToSeries(data) {
     const series = data.reduce(function (agg, s) {
         if (s.labelset !== undefined) {
@@ -126,7 +127,6 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
             event: e,
         });
     }, [show]);
-    const color = d3.scaleOrdinal(d3.schemeCategory10);
     const l = d3.line(d => xScale(d[0]), d => yScale(d[1]));
     const highlighted = useMemo(() => {
         if (series.length === 0) {
@@ -229,7 +229,7 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
                                                 return false;
                                             });
                                         }
-                                        return (_jsx("g", { className: "line cursor-pointer", children: _jsx(MetricsSeries, { data: s, line: l, color: color(i.toString()), strokeWidth: isSelected
+                                        return (_jsx("g", { className: "line cursor-pointer", children: _jsx(MetricsSeries, { data: s, line: l, color: getSeriesColor(s.metric), strokeWidth: isSelected
                                                     ? lineStrokeSelected
                                                     : hovering && highlighted != null && i === highlighted.seriesIndex
                                                         ? lineStrokeHover

package/dist/MetricsGraph/utils/colorMapping.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Generates a consistent color for a series based on its identifying properties
+ */
+export declare function getSeriesColor(labels: Array<{
+    name: string;
+    value: string;
+}>): string;
+//# sourceMappingURL=colorMapping.d.ts.map

package/dist/MetricsGraph/utils/colorMapping.d.ts.map

@@ -0,0 +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"}

package/dist/MetricsGraph/utils/colorMapping.js

@@ -0,0 +1,35 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import * as d3 from 'd3';
+// Cache to store color mappings
+const colorCache = new Map();
+// Create a color scale using d3's category10 scheme
+const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
+/**
+ * Generates a consistent color for a series based on its identifying properties
+ */
+export function getSeriesColor(labels) {
+    // Create a key from all labels to ensure unique identification
+    const key = labels
+        .map(l => `${l.name}=${l.value}`)
+        .sort()
+        .join(',');
+    // Return cached color if exists
+    if (colorCache.has(key)) {
+        return colorCache.get(key);
+    }
+    // Generate new color and cache it
+    const color = colorScale(key);
+    colorCache.set(key, color);
+    return color;
+}

package/dist/MetricsGraphStrips/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAGvC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAY,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB,cAAe,QAAQ,KAAG,MAmBtD,CAAC;AAaF,eAAO,MAAM,kBAAkB,2EAO5B,KAAK,KAAG,GAAG,CAAC,OAiEd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAGvC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAY,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB,cAAe,QAAQ,KAAG,MAmBtD,CAAC;AAaF,eAAO,MAAM,kBAAkB,2EAO5B,KAAK,KAAG,GAAG,CAAC,OAgEd,CAAC"}

package/dist/MetricsGraphStrips/index.js

@@ -43,7 +43,6 @@ const getTimelineGuideHeight = (cpus, collapsedIndices) => {
 };
 export const MetricsGraphStrips = ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, }) => {
     const [collapsedIndices, setCollapsedIndices] = useState([]);
-    // @ts-expect-error
     const color = d3.scaleOrdinal(d3.schemeObservable10);
     const valueBounds = d3.extent(data.flatMap(d => d.map(p => p.value)));
     return (_jsxs("div", { className: "flex flex-col gap-1 relative my-0 ml-[70px]", style: { width: width ?? '100%' }, children: [_jsx(TimelineGuide, { bounds: [BigInt(0), BigInt(bounds[1] - bounds[0])], width: width ?? 1468, height: getTimelineGuideHeight(cpus, collapsedIndices), margin: 1 }), cpus.map((cpu, i) => {

package/dist/ProfileSelector/MetricsGraphSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricsGraphSection.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/MetricsGraphSection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAQ,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACxD,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAI5D,OAAO,EAAC,cAAc,EAAE,KAAK,kBAAkB,IAAI,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE1F,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC;IAChC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,qBAAqB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,kBAAkB,CAAC,EAAE,KAAK,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,IAAI,EAAE,sBAAsB,EAAE,CAAC;KAChC,CAAC,CAAC;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,gBAAgB,EAChB,gCAAgC,EAChC,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,KAAK,EACL,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,GAC1B,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CA0LxC"}
+{"version":3,"file":"MetricsGraphSection.d.ts","sourceRoot":"","sources":["../../src/ProfileSelector/MetricsGraphSection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAQ,kBAAkB,EAAC,MAAM,eAAe,CAAC;AACxD,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAyB,gBAAgB,EAAC,MAAM,IAAI,CAAC;AAI5D,OAAO,EAAC,cAAc,EAAE,KAAK,kBAAkB,IAAI,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE1F,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gCAAgC,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACvB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,kBAAkB,CAAC;IAChC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,qBAAqB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,KAAK,EAAE,KAAK,CAAC;IACb,qBAAqB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,kBAAkB,CAAC,EAAE,KAAK,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,IAAI,EAAE,sBAAsB,EAAE,CAAC;KAChC,CAAC,CAAC;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,gBAAgB,EAChB,gCAAgC,EAChC,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,KAAK,EACL,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,GAC1B,EAAE,wBAAwB,GAAG,GAAG,CAAC,OAAO,CAgMxC"}

package/dist/ProfileSelector/MetricsGraphSection.js

@@ -88,7 +88,9 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
                         return (_jsx(_Fragment, { children: _jsx(UtilizationMetricsGraph, { data: data, addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, utilizationMetricsLoading: utilizationMetricsLoading, name: name, humanReadableName: humanReadableName, from: querySelection.from, to: querySelection.to }, name) }));
                     }
                     return null;
-                }), throughputMetrics.length > 0 && (_jsx(AreaChart, { transmitData: throughputMetrics[0].data, receiveData: throughputMetrics[1].data, addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, name: throughputMetrics[0].name, humanReadableName: throughputMetrics[0].humanReadableName, from: querySelection.from, to: querySelection.to, utilizationMetricsLoading: utilizationMetricsLoading }))] }));
+                }), throughputMetrics.length > 0 && (_jsx(AreaChart, { transmitData: throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_transmit_bytes')
+                        ?.data ?? [], receiveData: throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_receive_bytes')
+                        ?.data ?? [], addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, name: throughputMetrics[0].name, humanReadableName: throughputMetrics[0].humanReadableName, from: querySelection.from, to: querySelection.to, utilizationMetricsLoading: utilizationMetricsLoading }))] }));
     };
     return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [setDisplayHideMetricsGraphButton != null ? (_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900 z-10', showMetricsGraph && 'absolute right-0 bottom-3 !flex', !showMetricsGraph && 'relative !flex ml-auto'), children: [showMetricsGraph ? 'Hide' : 'Show', " Metrics Graph"] })) : null, showMetricsGraph && (_jsx(_Fragment, { children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== '' &&
                         querySelection.from !== undefined &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.501",
+  "version": "0.16.503",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -77,5 +77,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "c4e8f04f288c83601e5ade7a94e595ac2f07fc4e"
+  "gitHead": "d819176089991f04be81ea484dc04c6d09001d05"
 }

package/src/MetricsGraph/UtilizationMetrics/Throughput.tsx

@@ -27,6 +27,7 @@ import {type UtilizationMetrics as MetricSeries} from '../../ProfileSelector';
 import MetricsContextMenu from '../MetricsContextMenu';
 import MetricsTooltip from '../MetricsTooltip';
 import {useMetricsGraphDimensions} from '../useMetricsGraphDimensions';
+import {getSeriesColor} from '../utils/colorMapping';
 
 interface NetworkLabel {
   name: string;
@@ -207,12 +208,6 @@ const RawAreaChart = ({
     [show]
   );
 
-  const color = d3.scaleOrdinal(d3.schemeCategory10);
-
-  const getSeriesColor = (series: NetworkSeries): string => {
-    return color(series.labelset);
-  };
-
   // Create line generator for both transmit and receive
   const lineGenerator = d3
     .line<number[]>()
@@ -502,15 +497,12 @@ const RawAreaChart = ({
                   });
                 }
 
-                const seriesColor = getSeriesColor(s);
-                const strokeOpacity = isSelected ? 1 : 0.8;
-
                 return (
                   <g key={i} className="line cursor-pointer">
                     <path
                       d={lineGenerator(s.values) ?? ''}
                       fill="none"
-                      stroke={seriesColor}
+                      stroke={getSeriesColor(s.metric)}
                       strokeWidth={
                         isSelected
                           ? lineStrokeSelected
@@ -518,7 +510,7 @@ const RawAreaChart = ({
                           ? lineStrokeHover
                           : lineStroke
                       }
-                      strokeOpacity={strokeOpacity}
+                      strokeOpacity={isSelected ? 1 : 0.8}
                       onClick={() => {
                         if (highlighted != null) {
                           setSelectedSeries(

package/src/MetricsGraph/UtilizationMetrics/index.tsx

@@ -29,6 +29,7 @@ import MetricsContextMenu from '../MetricsContextMenu';
 import MetricsTooltip from '../MetricsTooltip';
 import {type Series} from '../index';
 import {useMetricsGraphDimensions} from '../useMetricsGraphDimensions';
+import {getSeriesColor} from '../utils/colorMapping';
 
 interface CommonProps {
   data: MetricSeries[];
@@ -203,8 +204,6 @@ const RawUtilizationMetrics = ({
     [show]
   );
 
-  const color = d3.scaleOrdinal(d3.schemeCategory10);
-
   const l = d3.line(
     d => xScale(d[0]),
     d => yScale(d[1])
@@ -487,7 +486,7 @@ const RawUtilizationMetrics = ({
                     <MetricsSeries
                       data={s}
                       line={l}
-                      color={color(i.toString())}
+                      color={getSeriesColor(s.metric)}
                       strokeWidth={
                         isSelected
                           ? lineStrokeSelected

package/src/MetricsGraph/utils/colorMapping.ts

@@ -0,0 +1,41 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import * as d3 from 'd3';
+
+// Cache to store color mappings
+const colorCache = new Map<string, string>();
+
+// Create a color scale using d3's category10 scheme
+const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
+
+/**
+ * Generates a consistent color for a series based on its identifying properties
+ */
+export function getSeriesColor(labels: Array<{name: string; value: string}>): string {
+  // Create a key from all labels to ensure unique identification
+  const key = labels
+    .map(l => `${l.name}=${l.value}`)
+    .sort()
+    .join(',');
+
+  // Return cached color if exists
+  if (colorCache.has(key)) {
+    return colorCache.get(key)!;
+  }
+
+  // Generate new color and cache it
+  const color = colorScale(key);
+  colorCache.set(key, color);
+  return color;
+}

package/src/MetricsGraphStrips/index.tsx

@@ -78,7 +78,6 @@ export const MetricsGraphStrips = ({
 }: Props): JSX.Element => {
   const [collapsedIndices, setCollapsedIndices] = useState<number[]>([]);
 
-  // @ts-expect-error
   const color = d3.scaleOrdinal(d3.schemeObservable10);
 
   const valueBounds = d3.extent(data.flatMap(d => d.map(p => p.value))) as [number, number];
@@ -127,7 +126,7 @@ export const MetricsGraphStrips = ({
                 data={data[i]}
                 height={STRIP_HEIGHT}
                 width={width ?? 1468}
-                fill={color(labelStr) as string}
+                fill={color(labelStr)}
                 selectionBounds={isSelected ? selectedTimeframe?.bounds : undefined}
                 setSelectionBounds={bounds => {
                   onSelectedTimeframe(cpu, bounds);

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -184,8 +184,14 @@ export function MetricsGraphSection({
         })}
         {throughputMetrics.length > 0 && (
           <AreaChart
-            transmitData={throughputMetrics[0].data}
-            receiveData={throughputMetrics[1].data}
+            transmitData={
+              throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_transmit_bytes')
+                ?.data ?? []
+            }
+            receiveData={
+              throughputMetrics.find(metric => metric.name === 'gpu_pcie_throughput_receive_bytes')
+                ?.data ?? []
+            }
             addLabelMatcher={addLabelMatcher}
             setTimeRange={handleTimeRangeChange}
             name={throughputMetrics[0].name}