@parca/profile 0.16.499 → 0.16.501

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.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
+
+## [0.16.500](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.499...@parca/profile@0.16.500) (2025-04-28)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.499](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.498...@parca/profile@0.16.499) (2025-04-24)
 
 **Note:** Version bump only for package @parca/profile

package/dist/MetricsGraph/UtilizationMetrics/{AreaChart.d.ts → Throughput.d.ts}

@@ -21,4 +21,4 @@ type Props = CommonProps & {
 };
 declare const AreaChart: ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, }: Props) => JSX.Element;
 export default AreaChart;
-//# sourceMappingURL=AreaChart.d.ts.map
+//# sourceMappingURL=Throughput.d.ts.map

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

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

package/dist/MetricsGraph/UtilizationMetrics/{AreaChart.js → Throughput.js}

@@ -48,23 +48,7 @@ function transformToSeries(data, isReceive = false) {
         values: series.values.sort((a, b) => a[0] - b[0]),
     }));
 }
-const getYAxisUnit = (name) => {
-    switch (name) {
-        case 'gpu_utilization_percent':
-            return 'percent';
-        case 'gpu_memory_utilization_percent':
-            return 'percent';
-        case 'gpu_power_watt':
-            return 'watts';
-        case 'gpu_pcie_throughput_transmit_bytes':
-            return 'bytes_per_second';
-        case 'gpu_pcie_throughput_receive_bytes':
-            return 'bytes_per_second';
-        default:
-            return 'percent';
-    }
-};
-const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, width, height, margin, name, humanReadableName, from, to, }) => {
+const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, width, height, margin, humanReadableName, from, to, }) => {
     const { timezone } = useParcaContext();
     const graph = useRef(null);
     const [dragging, setDragging] = useState(false);
@@ -105,13 +89,12 @@ const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange
     });
     // Setup scales with padded time range
     const xScale = d3.scaleUtc().domain([paddedFrom, paddedTo]).range([0, graphWidth]);
-    // Find the absolute maximum to ensure symmetric scale
-    const absMax = Math.max(Math.abs(minY ?? 0), Math.abs(maxY ?? 0));
     const yScale = d3
         .scaleLinear()
-        // Ensure domain is symmetric around 0 and includes all values
-        .domain([-absMax, absMax])
-        .range([height - margin, 0]);
+        // Ensure domain is symmetric around 0 for balanced visualization
+        .domain([minY ?? 0, maxY ?? 0])
+        .range([height - margin, 0])
+        .nice();
     const throttledSetPos = throttle(setPos, 20);
     const onMouseMove = (e) => {
         if (isContextMenuOpen) {
@@ -137,21 +120,15 @@ const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange
             event: e,
         });
     }, [show]);
+    const color = d3.scaleOrdinal(d3.schemeCategory10);
     const getSeriesColor = (series) => {
-        return series.isReceive === true ? '#EAB308' : '#22C55E'; // Yellow for receive, Green for transmit
+        return color(series.labelset);
     };
-    // Create area generator for transmit (above zero)
-    const transmitArea = d3
-        .area()
-        .x(d => xScale(d[0]))
-        .y0(yScale(0)) // Start from zero line
-        .y1(d => yScale(d[1])); // Top of the area (data point)
-    // Create area generator for receive (below zero)
-    const receiveArea = d3
-        .area()
+    // Create line generator for both transmit and receive
+    const lineGenerator = d3
+        .line()
         .x(d => xScale(d[0]))
-        .y0(yScale(0)) // Start from zero line
-        .y1(d => yScale(d[1])); // Bottom of the area (negative data point)
+        .y(d => yScale(d[1]));
     const highlighted = useMemo(() => {
         if (series.length === 0) {
             return null;
@@ -230,46 +207,44 @@ const RawAreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange
     return (_jsxs(_Fragment, { children: [_jsx(MetricsContextMenu, { onAddLabelMatcher: addLabelMatcher, menuId: MENU_ID, highlighted: highlighted, trackVisibility: trackVisibility, utilizationMetrics: true }), highlighted != null && hovering && !dragging && pos[0] !== 0 && pos[1] !== 0 && (_jsx("div", { onMouseMove: onMouseMove, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), children: !isContextMenuOpen && (_jsx(MetricsTooltip, { x: pos[0] + margin, y: pos[1] + margin, highlighted: {
                         ...highlighted,
                         valuePerSecond: Math.abs(highlighted.valuePerSecond),
-                    }, contextElement: graph.current, sampleUnit: getYAxisUnit(name), delta: false, utilizationMetrics: true, valuePrefix: highlighted.seriesIndex >= transmitData.length ? 'Receive ' : 'Transmit ' })) })), _jsx("div", { ref: graph, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), onContextMenu: displayMenu, children: _jsxs("svg", { width: `${width}px`, height: `${height + margin}px`, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove, children: [_jsx("g", { transform: `translate(${margin}, 0)`, children: dragging && (_jsx("g", { className: "zoom-time-rect", children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) })) }), _jsxs("g", { transform: `translate(${margin * 1.5}, ${margin / 1.5})`, children: [_jsxs("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: [yScale.ticks(6).map((d, i, allTicks) => {
+                    }, contextElement: graph.current, sampleUnit: 'bytes_per_second', delta: false, utilizationMetrics: true, valuePrefix: highlighted.seriesIndex >= transmitData.length ? 'Receive ' : 'Transmit ' })) })), _jsx("div", { ref: graph, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false), onContextMenu: displayMenu, children: _jsxs("svg", { width: `${width}px`, height: `${height + margin}px`, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseMove: onMouseMove, children: [_jsx("g", { transform: `translate(${margin}, 0)`, children: dragging && (_jsx("g", { className: "zoom-time-rect", children: _jsx("rect", { className: "bar", x: pos[0] - relPos < 0 ? pos[0] : relPos, y: 0, height: height, width: Math.abs(pos[0] - relPos), fill: 'rgba(0, 0, 0, 0.125)' }) })) }), _jsxs("g", { transform: `translate(${margin * 1.5}, ${margin / 1.5})`, children: [_jsxs("g", { className: "y axis", textAnchor: "end", fontSize: "10", fill: "none", children: [yScale.ticks(6).map((d, i, allTicks) => {
                                             let decimals = 2;
                                             const intervalBetweenTicks = allTicks[1] - allTicks[0];
                                             if (intervalBetweenTicks < 1) {
                                                 const precision = getPrecision(intervalBetweenTicks);
                                                 decimals = precision;
                                             }
-                                            return (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsxs("text", { fill: "currentColor", x: -9, dy: '0.32em', children: [d < 0 ? '-' : '', valueFormatter(Math.abs(d), getYAxisUnit(name), decimals)] })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`));
+                                            return (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", transform: `translate(0, ${yScale(d)})`, children: [_jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x2: -6 }), _jsxs("text", { fill: "currentColor", x: -9, dy: '0.32em', children: [d < 0 ? '-' : '', valueFormatter(Math.abs(d), 'bytes_per_second', decimals)] })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(from), x2: xScale(to), y1: yScale(d), y2: yScale(d) }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`));
                                         }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: 0, y1: 0, y2: height - margin }), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(to), x2: xScale(to), y1: 0, y2: height - margin }), _jsx("g", { transform: `translate(${-margin}, ${(height - margin) / 2}) rotate(270)`, children: _jsx("text", { fill: "currentColor", dy: "-0.7em", className: "text-sm capitalize", textAnchor: "middle", children: humanReadableName }) })] }), _jsxs("g", { className: "x axis", fill: "none", fontSize: "10", textAnchor: "middle", transform: `translate(0,${height - margin})`, children: [xScale.ticks(5).map((d, i) => (_jsxs(Fragment, { children: [_jsxs("g", { className: "tick", 
                                                     /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
-                                                    transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to), timezone) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: graphWidth, y1: 0, y2: 0 }), _jsx("g", { transform: `translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 5, className: "text-sm", children: "Time" }) })] }), _jsx("g", { className: "areas", children: series.map((s, i) => {
-                                        let isSelected = false;
-                                        if (parsedSelectedSeries != null && parsedSelectedSeries.length > 0) {
-                                            isSelected = parsedSelectedSeries.every(m => {
-                                                for (let i = 0; i < s.metric.length; i++) {
-                                                    if (s.metric[i].name === m.key && s.metric[i].value === m.value) {
-                                                        return true;
+                                                    transform: `translate(${xScale(d)}, 0)`, children: [_jsx("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-500" }), _jsx("text", { fill: "currentColor", dy: ".71em", y: 9, children: formatDate(d, formatForTimespan(from, to), timezone) })] }, `tick-${i}`), _jsx("g", { children: _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: xScale(d), x2: xScale(d), y1: 0, y2: -height + margin }) }, `grid-${i}`)] }, `${i.toString()}-${d.toString()}`))), _jsx("line", { className: "stroke-gray-300 dark:stroke-gray-500", x1: 0, x2: graphWidth, y1: 0, y2: 0 }), _jsx("g", { transform: `translate(${(width - 2.5 * margin) / 2}, ${margin / 2})`, children: _jsx("text", { fill: "currentColor", dy: ".71em", y: 5, className: "text-sm", children: "Time" }) })] }), _jsxs("g", { className: "areas", children: [_jsx("line", { x1: xScale(from), x2: xScale(to), y1: yScale(0), y2: yScale(0), stroke: "#64748b", strokeDasharray: "4 2", strokeWidth: 1, opacity: 0.7 }), series.map((s, i) => {
+                                            let isSelected = false;
+                                            if (parsedSelectedSeries != null && parsedSelectedSeries.length > 0) {
+                                                isSelected = parsedSelectedSeries.every(m => {
+                                                    for (let i = 0; i < s.metric.length; i++) {
+                                                        if (s.metric[i].name === m.key && s.metric[i].value === m.value) {
+                                                            return true;
+                                                        }
                                                     }
-                                                }
-                                                return false;
-                                            });
-                                        }
-                                        const seriesColor = getSeriesColor(s);
-                                        const fillOpacity = isSelected ? 0.4 : 0.2;
-                                        const strokeOpacity = isSelected ? 1 : 0.8;
-                                        const areaGenerator = s.isReceive === true ? receiveArea : transmitArea;
-                                        return (_jsx("g", { className: "area cursor-pointer", children: _jsx("path", { d: areaGenerator(s.values) ?? '', fill: seriesColor, fillOpacity: fillOpacity, stroke: seriesColor, strokeWidth: isSelected
-                                                    ? lineStrokeSelected
-                                                    : hovering && highlighted != null && i === highlighted.seriesIndex
-                                                        ? lineStrokeHover
-                                                        : lineStroke, strokeOpacity: strokeOpacity, onClick: () => {
-                                                    if (highlighted != null) {
-                                                        setSelectedSeries(JSON.stringify(highlighted.labels.map(l => ({
-                                                            key: l.name,
-                                                            value: l.value,
-                                                        }))));
-                                                        setSelectedTimeframe(undefined);
-                                                    }
-                                                } }) }, i));
-                                    }) })] })] }) })] }));
+                                                    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
+                                                        ? lineStrokeSelected
+                                                        : hovering && highlighted != null && i === highlighted.seriesIndex
+                                                            ? lineStrokeHover
+                                                            : lineStroke, strokeOpacity: strokeOpacity, onClick: () => {
+                                                        if (highlighted != null) {
+                                                            setSelectedSeries(JSON.stringify(highlighted.labels.map(l => ({
+                                                                key: l.name,
+                                                                value: l.value,
+                                                            }))));
+                                                            setSelectedTimeframe(undefined);
+                                                        }
+                                                    } }) }, i));
+                                        })] })] })] }) })] }));
 };
 const AreaChart = ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, }) => {
     const { isDarkMode } = useParcaContext();

package/dist/ProfileSelector/MetricsGraphSection.js

@@ -15,7 +15,7 @@ import cx from 'classnames';
 import { Query } from '@parca/parser';
 import { MergedProfileSelection } from '..';
 import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
-import AreaChart from '../MetricsGraph/UtilizationMetrics/AreaChart';
+import AreaChart from '../MetricsGraph/UtilizationMetrics/Throughput';
 import ProfileMetricsGraph, { ProfileMetricsEmptyState } from '../ProfileMetricsGraph';
 export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGraphButton, heightStyle, querySelection, profileSelection, comparing, sumBy, defaultSumByLoading, queryClient, queryExpressionString, setTimeRangeSelection, selectQuery, selectProfile, query, setNewQueryExpression, utilizationMetrics, utilizationMetricsLoading, }) {
     const handleTimeRangeChange = (range) => {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.499",
+  "version": "0.16.501",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.16.128",
-    "@parca/components": "0.16.329",
+    "@parca/components": "0.16.330",
     "@parca/dynamicsize": "0.16.65",
     "@parca/hooks": "0.0.84",
     "@parca/icons": "0.16.71",
@@ -77,5 +77,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "8973a316f189e3eaa00c8a7ca3d7f5c528d6f1da"
+  "gitHead": "c4e8f04f288c83601e5ade7a94e595ac2f07fc4e"
 }

package/src/MetricsGraph/UtilizationMetrics/{AreaChart.tsx → Throughput.tsx}

@@ -100,23 +100,6 @@ function transformToSeries(data: MetricSeries[], isReceive = false): NetworkSeri
   }));
 }
 
-const getYAxisUnit = (name: string): string => {
-  switch (name) {
-    case 'gpu_utilization_percent':
-      return 'percent';
-    case 'gpu_memory_utilization_percent':
-      return 'percent';
-    case 'gpu_power_watt':
-      return 'watts';
-    case 'gpu_pcie_throughput_transmit_bytes':
-      return 'bytes_per_second';
-    case 'gpu_pcie_throughput_receive_bytes':
-      return 'bytes_per_second';
-    default:
-      return 'percent';
-  }
-};
-
 const RawAreaChart = ({
   transmitData,
   receiveData,
@@ -125,7 +108,6 @@ const RawAreaChart = ({
   width,
   height,
   margin,
-  name,
   humanReadableName,
   from,
   to,
@@ -181,14 +163,12 @@ const RawAreaChart = ({
   // Setup scales with padded time range
   const xScale = d3.scaleUtc().domain([paddedFrom, paddedTo]).range([0, graphWidth]);
 
-  // Find the absolute maximum to ensure symmetric scale
-  const absMax = Math.max(Math.abs(minY ?? 0), Math.abs(maxY ?? 0));
-
   const yScale = d3
     .scaleLinear()
-    // Ensure domain is symmetric around 0 and includes all values
-    .domain([-absMax, absMax])
-    .range([height - margin, 0]);
+    // Ensure domain is symmetric around 0 for balanced visualization
+    .domain([minY ?? 0, maxY ?? 0])
+    .range([height - margin, 0])
+    .nice();
 
   const throttledSetPos = throttle(setPos, 20);
 
@@ -227,23 +207,17 @@ const RawAreaChart = ({
     [show]
   );
 
+  const color = d3.scaleOrdinal(d3.schemeCategory10);
+
   const getSeriesColor = (series: NetworkSeries): string => {
-    return series.isReceive === true ? '#EAB308' : '#22C55E'; // Yellow for receive, Green for transmit
+    return color(series.labelset);
   };
 
-  // Create area generator for transmit (above zero)
-  const transmitArea = d3
-    .area<number[]>()
+  // Create line generator for both transmit and receive
+  const lineGenerator = d3
+    .line<number[]>()
     .x(d => xScale(d[0]))
-    .y0(yScale(0)) // Start from zero line
-    .y1(d => yScale(d[1])); // Top of the area (data point)
-
-  // Create area generator for receive (below zero)
-  const receiveArea = d3
-    .area<number[]>()
-    .x(d => xScale(d[0]))
-    .y0(yScale(0)) // Start from zero line
-    .y1(d => yScale(d[1])); // Bottom of the area (negative data point)
+    .y(d => yScale(d[1]));
 
   const highlighted = useMemo(() => {
     if (series.length === 0) {
@@ -365,7 +339,7 @@ const RawAreaChart = ({
                 valuePerSecond: Math.abs(highlighted.valuePerSecond),
               }}
               contextElement={graph.current}
-              sampleUnit={getYAxisUnit(name)}
+              sampleUnit={'bytes_per_second'}
               delta={false}
               utilizationMetrics={true}
               valuePrefix={
@@ -419,7 +393,7 @@ const RawAreaChart = ({
                       <line className="stroke-gray-300 dark:stroke-gray-500" x2={-6} />
                       <text fill="currentColor" x={-9} dy={'0.32em'}>
                         {d < 0 ? '-' : ''}
-                        {valueFormatter(Math.abs(d), getYAxisUnit(name), decimals)}
+                        {valueFormatter(Math.abs(d), 'bytes_per_second', decimals)}
                       </text>
                     </g>
                     <g key={`grid-${i}`}>
@@ -504,6 +478,17 @@ const RawAreaChart = ({
               </g>
             </g>
             <g className="areas">
+              {/* Draw baseline at y=0 */}
+              <line
+                x1={xScale(from)}
+                x2={xScale(to)}
+                y1={yScale(0)}
+                y2={yScale(0)}
+                stroke="#64748b"
+                strokeDasharray="4 2"
+                strokeWidth={1}
+                opacity={0.7}
+              />
               {series.map((s, i) => {
                 let isSelected = false;
                 if (parsedSelectedSeries != null && parsedSelectedSeries.length > 0) {
@@ -518,16 +503,13 @@ const RawAreaChart = ({
                 }
 
                 const seriesColor = getSeriesColor(s);
-                const fillOpacity = isSelected ? 0.4 : 0.2;
                 const strokeOpacity = isSelected ? 1 : 0.8;
-                const areaGenerator = s.isReceive === true ? receiveArea : transmitArea;
 
                 return (
-                  <g key={i} className="area cursor-pointer">
+                  <g key={i} className="line cursor-pointer">
                     <path
-                      d={areaGenerator(s.values) ?? ''}
-                      fill={seriesColor}
-                      fillOpacity={fillOpacity}
+                      d={lineGenerator(s.values) ?? ''}
+                      fill="none"
                       stroke={seriesColor}
                       strokeWidth={
                         isSelected

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -19,7 +19,7 @@ import {Query} from '@parca/parser';
 
 import {MergedProfileSelection, ProfileSelection} from '..';
 import UtilizationMetricsGraph from '../MetricsGraph/UtilizationMetrics';
-import AreaChart from '../MetricsGraph/UtilizationMetrics/AreaChart';
+import AreaChart from '../MetricsGraph/UtilizationMetrics/Throughput';
 import ProfileMetricsGraph, {ProfileMetricsEmptyState} from '../ProfileMetricsGraph';
 import {QuerySelection, type UtilizationMetrics as UtilizationMetricsType} from './index';
 

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

@@ -1 +0,0 @@
-{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/AreaChart.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;AAqfF,QAAA,MAAM,SAAS,gIAUZ,KAAK,KAAG,GAAG,CAAC,OAiCd,CAAC;AAEF,eAAe,SAAS,CAAC"}