area/ui: use the same color for similar nodes

ui/packages/shared/profile/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,23 +497,20 @@ 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
                           : hovering && highlighted != null && i === highlighted.seriesIndex
                           ? lineStrokeHover
                           : lineStroke
                       }
-                      strokeOpacity={strokeOpacity}
+                      strokeOpacity={isSelected ? 1 : 0.8}
                       onClick={() => {
                         if (highlighted != null) {
                           setSelectedSeries(

ui/packages/shared/profile/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

ui/packages/shared/profile/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;
+}

ui/packages/shared/profile/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}