@parca/profile 0.16.470 → 0.16.471

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.471](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.470...@parca/profile@0.16.471) (2025-02-13)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.470 (2025-02-12)
 
 **Note:** Version bump only for package @parca/profile

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,EAAwC,MAAM,mBAAmB,CAAC;AAUvF,UAAU,YAAY;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QACR,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,UAAU,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;AAaD,UAAU,KAAK;IACb,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;AAgaD,QAAA,MAAM,kBAAkB,wEAKrB,KAAK,KAAG,GAAG,CAAC,OA4Bd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAC,aAAa,EAAwC,MAAM,mBAAmB,CAAC;AAUvF,UAAU,YAAY;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QACR,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,UAAU,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;AAaD,UAAU,KAAK;IACb,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;AAoaD,QAAA,MAAM,kBAAkB,wEAKrB,KAAK,KAAG,GAAG,CAAC,OA4Bd,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/MetricsGraph/UtilizationMetrics/index.js

@@ -114,6 +114,9 @@ const RawUtilizationMetrics = ({ data, addLabelMatcher, setTimeRange, width, hei
     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) {
+            return null;
+        }
         // Return the closest point as the highlighted point
         const closestPointPerSeries = series.map(function (s) {
             const distances = s.values.map(d => {

package/dist/MetricsGraphStrips/AreaGraph/Tooltip.d.ts

@@ -1,7 +1,7 @@
 interface TooltipProps {
     x: number;
     y: number;
-    timestamp: Date;
+    timestamp: Date | number;
     value: number;
     containerWidth: number;
 }

package/dist/MetricsGraphStrips/AreaGraph/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraphStrips/AreaGraph/Tooltip.tsx"],"names":[],"mappings":"AAkBA,UAAU,YAAY;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,OAAO,CAAC,EAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAwD3F"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraphStrips/AreaGraph/Tooltip.tsx"],"names":[],"mappings":"AAkBA,UAAU,YAAY;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,OAAO,CAAC,EAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAC,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAwD3F"}

package/dist/MetricsGraphStrips/AreaGraph/index.js

@@ -192,5 +192,5 @@ export const AreaGraph = ({ data, height, width, marginLeft = 0, marginRight = 0
                 hoverData !== null &&
                 !isDragging &&
                 !isHoveringDragHandle &&
-                isMouseOverGraph && (_jsx(Tooltip, { x: mousePosition[0], y: mousePosition[1], timestamp: new Date(hoverData.timestamp), value: hoverData.value, containerWidth: width })), _jsx("svg", { style: { width: '100%', height: '100%' }, children: _jsx("path", { fill: fill, d: area(data), className: "opacity-80" }) })] }));
+                isMouseOverGraph && (_jsx(Tooltip, { x: mousePosition[0], y: mousePosition[1], timestamp: hoverData.timestamp, value: hoverData.value, containerWidth: width })), _jsx("svg", { style: { width: '100%', height: '100%' }, children: _jsx("path", { fill: fill, d: area(data), className: "opacity-80" }) })] }));
 };

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.d.ts

@@ -17,6 +17,7 @@ export declare const ThreeCPUStrips: {
             bounds: number[];
         };
         onSelectedTimeframe: (index: number, bounds: NumberDuo) => void;
+        bounds: number[];
     };
     render: (args: any) => JSX.Element;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MetricsGraphStrips.stories.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/MetricsGraphStrips.stories.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAqBtC,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,cAAc;;;;;;;;;;;;;qCAKM,MAAM,UAAU,SAAS,KAAG,IAAI;;mBAI9B,GAAG,KAAG,GAAG,CAAC,OAAO;CAUnD,CAAC"}
+{"version":3,"file":"MetricsGraphStrips.stories.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/MetricsGraphStrips.stories.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAqBtC,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,cAAc;;;;;;;;;;;;;qCAKM,MAAM,UAAU,SAAS,KAAG,IAAI;;;mBAK9B,GAAG,KAAG,GAAG,CAAC,OAAO;CAUnD,CAAC"}

package/dist/MetricsGraphStrips/MetricsGraphStrips.stories.js

@@ -43,6 +43,7 @@ export const ThreeCPUStrips = {
         onSelectedTimeframe: (index, bounds) => {
             console.log('onSelectedTimeframe', index, bounds);
         },
+        bounds: [mockData[0][0].timestamp, mockData[0][mockData[0].length - 1].timestamp],
     },
     render: function Component(args) {
         const [, setArgs] = useArgs();

package/dist/MetricsGraphStrips/index.d.ts

@@ -10,8 +10,9 @@ interface Props {
     };
     onSelectedTimeframe: (labels: LabelSet, bounds: NumberDuo | undefined) => void;
     width?: number;
+    bounds: NumberDuo;
 }
 export declare const labelSetToString: (labelSet?: LabelSet) => string;
-export declare const MetricsGraphStrips: ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, }: Props) => JSX.Element;
+export declare const MetricsGraphStrips: ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, }: Props) => JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAmBA,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;CAChB;AAED,eAAO,MAAM,gBAAgB,cAAe,QAAQ,KAAG,MAmBtD,CAAC;AAMF,eAAO,MAAM,kBAAkB,mEAM5B,KAAK,KAAG,GAAG,CAAC,OAmEd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAmBA,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;AAMF,eAAO,MAAM,kBAAkB,2EAO5B,KAAK,KAAG,GAAG,CAAC,OAwDd,CAAC"}

package/dist/MetricsGraphStrips/index.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { Icon } from '@iconify/react';
 import * as d3 from 'd3';
 import isEqual from 'fast-deep-equal';
@@ -36,21 +36,11 @@ export const labelSetToString = (labelSet) => {
 const getTimelineGuideHeight = (cpus, collapsedIndices) => {
     return 56 * (cpus.length - collapsedIndices.length) + 20 * collapsedIndices.length + 24;
 };
-export const MetricsGraphStrips = ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, }) => {
+export const MetricsGraphStrips = ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, bounds, }) => {
     const [collapsedIndices, setCollapsedIndices] = useState([]);
     // @ts-expect-error
     const color = d3.scaleOrdinal(d3.schemeObservable10);
-    const bounds = useMemo(() => {
-        const bounds = data.length > 0 ? [Infinity, -Infinity] : [0, 1];
-        data.forEach(cpuData => {
-            cpuData.forEach(dataPoint => {
-                bounds[0] = Math.min(bounds[0], dataPoint.timestamp);
-                bounds[1] = Math.max(bounds[1], dataPoint.timestamp);
-            });
-        });
-        return [0, bounds[1] - bounds[0]];
-    }, [data]);
-    return (_jsxs("div", { className: "flex flex-col gap-1 relative my-0 ml-[70px]", style: { width: width ?? '100%' }, children: [_jsx(TimelineGuide, { bounds: [BigInt(bounds[0]), BigInt(bounds[1])], width: width ?? 1468, height: getTimelineGuideHeight(cpus, collapsedIndices), margin: 1 }), cpus.map((cpu, i) => {
+    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) => {
                 const isCollapsed = collapsedIndices.includes(i);
                 const labelStr = labelSetToString(cpu);
                 return (_jsxs("div", { className: "relative min-h-5", style: { width: width ?? 1468 }, children: [_jsxs("div", { className: "text-xs absolute top-0 left-0 flex gap-[2px] items-center bg-white/50 px-1 rounded-sm cursor-pointer", style: {

package/dist/ProfileSelector/MetricsGraphSection.js

@@ -75,7 +75,7 @@ export function MetricsGraphSection({ showMetricsGraph, setDisplayHideMetricsGra
         const mergeTo = query.profileType().delta ? mergeFrom + durationInMilliseconds : mergeFrom;
         selectProfile(new MergedProfileSelection(mergeFrom, mergeTo, query));
     };
-    return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [_jsxs("button", { onClick: () => setDisplayHideMetricsGraphButton(!showMetricsGraph), className: cx('hidden z-10 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', showMetricsGraph && 'absolute right-0 bottom-3 !flex', !showMetricsGraph && 'relative !flex ml-auto'), children: [showMetricsGraph ? 'Hide' : 'Show', " Metrics Graph"] }), showMetricsGraph && (_jsx(_Fragment, { children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== '' &&
+    return (_jsxs("div", { className: cx('relative', { 'py-4': !showMetricsGraph }), children: [_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', showMetricsGraph && 'absolute right-0 bottom-3 !flex', !showMetricsGraph && 'relative !flex ml-auto'), children: [showMetricsGraph ? 'Hide' : 'Show', " Metrics Graph"] }), showMetricsGraph && (_jsx(_Fragment, { children: _jsx("div", { style: { height: heightStyle }, children: querySelection.expression !== '' &&
                         querySelection.from !== undefined &&
                         querySelection.to !== undefined ? (_jsx(_Fragment, { children: utilizationMetrics !== undefined ? (_jsx(UtilizationMetricsGraph, { data: utilizationMetrics, addLabelMatcher: addLabelMatcher, setTimeRange: handleTimeRangeChange, utilizationMetricsLoading: utilizationMetricsLoading })) : (_jsx(_Fragment, { children: _jsx(ProfileMetricsGraph, { queryClient: queryClient, queryExpression: querySelection.expression, from: querySelection.from, to: querySelection.to, profile: profileSelection, comparing: comparing, sumBy: querySelection.sumBy ?? sumBy ?? [], sumByLoading: defaultSumByLoading, setTimeRange: handleTimeRangeChange, addLabelMatcher: addLabelMatcher, onPointClick: handlePointClick }) })) })) : (profileSelection === null && (_jsx("div", { className: "p-2", children: _jsx(ProfileMetricsEmptyState, { message: "Please select a profile type and click 'Search' to begin." }) }))) }) }))] }));
 }

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.470",
+  "version": "0.16.471",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.16.127",
-    "@parca/components": "0.16.321",
+    "@parca/components": "0.16.322",
     "@parca/dynamicsize": "0.16.65",
-    "@parca/hooks": "0.0.79",
+    "@parca/hooks": "0.0.80",
     "@parca/icons": "0.16.71",
     "@parca/parser": "0.16.78",
-    "@parca/store": "0.16.165",
-    "@parca/utilities": "0.0.91",
+    "@parca/store": "0.16.166",
+    "@parca/utilities": "0.0.92",
     "@popperjs/core": "^2.11.8",
     "@protobuf-ts/runtime-rpc": "^2.5.0",
     "@storybook/preview-api": "^8.4.3",
@@ -75,5 +75,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "487d4b97e6da9903b123b9292c214c0b17796d93"
+  "gitHead": "9bcabd1ea569b85c2b8ce7bb86ed0c871953712b"
 }

package/src/MetricsGraph/UtilizationMetrics/index.tsx

@@ -189,6 +189,10 @@ const RawUtilizationMetrics = ({
   );
 
   const highlighted = useMemo(() => {
+    if (series.length === 0) {
+      return null;
+    }
+
     // Return the closest point as the highlighted point
     const closestPointPerSeries = series.map(function (s) {
       const distances = s.values.map(d => {

package/src/MetricsGraphStrips/AreaGraph/Tooltip.tsx

@@ -19,7 +19,7 @@ import {formatDateTimeDownToMS, valueFormatter} from '@parca/utilities';
 interface TooltipProps {
   x: number;
   y: number;
-  timestamp: Date;
+  timestamp: Date | number;
   value: number;
   containerWidth: number;
 }

package/src/MetricsGraphStrips/AreaGraph/index.tsx

@@ -352,7 +352,7 @@ export const AreaGraph = ({
           <Tooltip
             x={mousePosition[0]}
             y={mousePosition[1]}
-            timestamp={new Date(hoverData.timestamp)}
+            timestamp={hoverData.timestamp}
             value={hoverData.value}
             containerWidth={width}
           />

package/src/MetricsGraphStrips/MetricsGraphStrips.stories.tsx

@@ -52,6 +52,7 @@ export const ThreeCPUStrips = {
     onSelectedTimeframe: (index: number, bounds: NumberDuo): void => {
       console.log('onSelectedTimeframe', index, bounds);
     },
+    bounds: [mockData[0][0].timestamp, mockData[0][mockData[0].length - 1].timestamp],
   },
   render: function Component(args: any): JSX.Element {
     const [, setArgs] = useArgs();

package/src/MetricsGraphStrips/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {useMemo, useState} from 'react';
+import {useState} from 'react';
 
 import {Icon} from '@iconify/react';
 import * as d3 from 'd3';
@@ -32,6 +32,7 @@ interface Props {
   };
   onSelectedTimeframe: (labels: LabelSet, bounds: NumberDuo | undefined) => void;
   width?: number;
+  bounds: NumberDuo;
 }
 
 export const labelSetToString = (labelSet?: LabelSet): string => {
@@ -65,27 +66,17 @@ export const MetricsGraphStrips = ({
   selectedTimeframe,
   onSelectedTimeframe,
   width,
+  bounds,
 }: Props): JSX.Element => {
   const [collapsedIndices, setCollapsedIndices] = useState<number[]>([]);
 
   // @ts-expect-error
   const color = d3.scaleOrdinal(d3.schemeObservable10);
 
-  const bounds = useMemo(() => {
-    const bounds: NumberDuo = data.length > 0 ? [Infinity, -Infinity] : [0, 1];
-    data.forEach(cpuData => {
-      cpuData.forEach(dataPoint => {
-        bounds[0] = Math.min(bounds[0], dataPoint.timestamp);
-        bounds[1] = Math.max(bounds[1], dataPoint.timestamp);
-      });
-    });
-    return [0, bounds[1] - bounds[0]] as NumberDuo;
-  }, [data]);
-
   return (
     <div className="flex flex-col gap-1 relative my-0 ml-[70px]" style={{width: width ?? '100%'}}>
       <TimelineGuide
-        bounds={[BigInt(bounds[0]), BigInt(bounds[1])]}
+        bounds={[BigInt(0), BigInt(bounds[1] - bounds[0])]}
         width={width ?? 1468}
         height={getTimelineGuideHeight(cpus, collapsedIndices)}
         margin={1}

package/src/ProfileSelector/MetricsGraphSection.tsx

@@ -138,7 +138,7 @@ export function MetricsGraphSection({
       <button
         onClick={() => setDisplayHideMetricsGraphButton(!showMetricsGraph)}
         className={cx(
-          'hidden z-10 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',
+          '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',
           showMetricsGraph && 'absolute right-0 bottom-3 !flex',
           !showMetricsGraph && 'relative !flex ml-auto'
         )}