@parca/profile 0.19.44 → 0.19.45

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.19.45](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.44...@parca/profile@0.19.45) (2025-08-28)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.19.44](https://github.com/parca-dev/parca/compare/@parca/profile@0.19.43...@parca/profile@0.19.44) (2025-08-26)
 
 **Note:** Version bump only for package @parca/profile

package/dist/GraphTooltipArrow/Content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../src/GraphTooltipArrow/Content.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAGnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,UAAU,6BAA6B;IACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAMD,QAAA,MAAM,wBAAwB,GAAI,sFAS/B,6BAA6B,KAAG,KAAK,CAAC,GAAG,CAAC,OA+E5C,CAAC;AAuFF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../src/GraphTooltipArrow/Content.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAGnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,UAAU,6BAA6B;IACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAMD,QAAA,MAAM,wBAAwB,GAAI,sFAS/B,6BAA6B,KAAG,KAAK,CAAC,GAAG,CAAC,OA+E5C,CAAC;AAqFF,eAAe,wBAAwB,CAAC"}

package/dist/GraphTooltipArrow/Content.js

@@ -35,6 +35,6 @@ const TooltipMetaInfo = ({ table, row }) => {
     const labels = labelPairs.map((l) => (_jsx("span", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: `${l[0]}="${l[1]}"` }, l[0])));
     const isMappingBuildIDAvailable = mappingBuildID !== null && mappingBuildID !== '';
     const inlinedText = inlined === null ? 'merged' : inlined ? 'yes' : 'no';
-    return (_jsxs(_Fragment, { children: [timestamp == null || timestamp === 0n ? (_jsx("div", { className: "pt-2" })) : (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pt-2", children: "Timestamp" }), _jsx("td", { className: "w-3/4 pt-2 break-all", children: formatDateTimeDownToMS(new Date(Number(timestamp / 1000000n)), timezone) }), ' '] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsx("div", { className: "flex gap-4", children: _jsx("div", { className: "whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 30) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? _jsx(NoData, {}) : _jsx("div", { children: hexifyAddress(locationAddress) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Inlined" }), _jsx("td", { className: "w-3/4 break-all", children: inlinedText })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: isMappingBuildIDAvailable ? _jsx("div", { children: truncateString(mappingBuildID, 28) }) : _jsx(NoData, {}) })] }), labelPairs.length > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
+    return (_jsxs(_Fragment, { children: [timestamp != null && timestamp !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pt-2", children: "Timestamp" }), _jsx("td", { className: "w-3/4 pt-2 break-all", children: formatDateTimeDownToMS(new Date(Number(timestamp / 1000000n)), timezone) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: functionFilename === '' ? (_jsx(NoData, {})) : (_jsx("div", { className: "flex gap-4", children: _jsx("div", { className: "whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 30) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: locationAddress === 0n ? _jsx(NoData, {}) : _jsx("div", { children: hexifyAddress(locationAddress) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Inlined" }), _jsx("td", { className: "w-3/4 break-all", children: inlinedText })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: (mappingFile != null ? getLastItem(mappingFile) : null) ?? _jsx(NoData, {}) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: isMappingBuildIDAvailable ? _jsx("div", { children: truncateString(mappingBuildID, 28) }) : _jsx(NoData, {}) })] }), labelPairs.length > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Labels" }), _jsx("td", { className: "w-3/4 break-all", children: labels })] }))] }));
 };
 export default GraphTooltipArrowContent;

package/dist/MetricsGraph/MetricsContextMenu/index.d.ts

@@ -1,17 +1,26 @@
-import { HighlightedSeries } from '../';
+import { Series, SeriesPoint } from '../';
+export interface ContextMenuItem {
+    id: string;
+    label: React.ReactNode;
+    icon?: string;
+    onClick: (closestPoint: SeriesPoint | null, series: Series[]) => void;
+    disabled?: (closestPoint: SeriesPoint | null, series: Series[]) => boolean;
+}
+export interface ContextMenuSubmenu {
+    id: string;
+    label: React.ReactNode;
+    icon?: string;
+    items?: ContextMenuItem[];
+    createDynamicItems?: (closestPoint: SeriesPoint | null, series: Series[]) => ContextMenuItem[];
+}
+export type ContextMenuItemOrSubmenu = ContextMenuItem | ContextMenuSubmenu;
 interface MetricsContextMenuProps {
     menuId: string;
-    onAddLabelMatcher: (labels: {
-        key: string;
-        value: string;
-    } | Array<{
-        key: string;
-        value: string;
-    }>) => void;
-    highlighted: HighlightedSeries | null;
+    closestPoint: SeriesPoint | null;
+    series: Series[];
     trackVisibility: (isVisible: boolean) => void;
-    utilizationMetrics?: boolean;
+    menuItems: ContextMenuItemOrSubmenu[];
 }
-declare const MetricsContextMenu: ({ menuId, onAddLabelMatcher, highlighted, trackVisibility, utilizationMetrics, }: MetricsContextMenuProps) => JSX.Element;
+declare const MetricsContextMenu: ({ menuId, closestPoint, series, trackVisibility, menuItems, }: MetricsContextMenuProps) => JSX.Element;
 export default MetricsContextMenu;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsContextMenu/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,iBAAiB,EAAC,MAAM,KAAK,CAAC;AAEtC,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,CACjB,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,WAAW,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AASD,QAAA,MAAM,kBAAkB,GAAI,kFAMzB,uBAAuB,KAAG,GAAG,CAAC,OA4DhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsContextMenu/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,KAAK,CAAC;AAExC,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC;CAC5E;AAED,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,eAAe,EAAE,CAAC;CAChG;AAED,MAAM,MAAM,wBAAwB,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAE5E,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,eAAe,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,wBAAwB,EAAE,CAAC;CACvC;AAED,QAAA,MAAM,kBAAkB,GAAI,+DAMzB,uBAAuB,KAAG,GAAG,CAAC,OAgEhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/MetricsGraph/MetricsContextMenu/index.js

@@ -14,27 +14,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@iconify/react';
 import { Item, Menu, Submenu } from 'react-contexify';
 import { useParcaContext } from '@parca/components';
-const transformUtilizationLabels = (label, utilizationMetrics) => {
-    if (utilizationMetrics) {
-        return label.replace('attributes.', '').replace('attributes_resource.', '');
-    }
-    return label;
-};
-const MetricsContextMenu = ({ menuId, onAddLabelMatcher, highlighted, trackVisibility, utilizationMetrics = false, }) => {
+const MetricsContextMenu = ({ menuId, closestPoint, series, trackVisibility, menuItems, }) => {
     const { isDarkMode } = useParcaContext();
-    const labels = highlighted?.labels.filter((label) => label.name !== '__name__');
-    const handleFocusOnSingleSeries = () => {
-        const labelsToAdd = labels?.map((label) => ({
-            key: label.name,
-            value: label.value,
-        }));
-        labelsToAdd !== undefined && onAddLabelMatcher(labelsToAdd);
+    const renderMenuItem = (item) => {
+        if ('items' in item || 'createDynamicItems' in item) {
+            // This is a submenu
+            const submenu = item;
+            const items = submenu.createDynamicItems != null
+                ? submenu.createDynamicItems(closestPoint, series)
+                : submenu.items ?? [];
+            return (_jsx(Submenu, { label: _jsxs("div", { className: "flex w-full items-center gap-2", children: [submenu.icon != null && submenu.icon !== '' && _jsx(Icon, { icon: submenu.icon }), _jsx("div", { children: submenu.label })] }), children: _jsx("div", { className: "max-h-[300px] overflow-auto", children: items.map(subItem => (_jsx(Item, { id: subItem.id, onClick: () => subItem.onClick(closestPoint, series), disabled: subItem.disabled?.(closestPoint, series) ?? false, className: "max-w-[400px] overflow-hidden", children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [subItem.icon != null && subItem.icon !== '' && _jsx(Icon, { icon: subItem.icon }), _jsx("div", { children: subItem.label })] }) }, subItem.id))) }) }, submenu.id));
+        }
+        else {
+            // This is a regular menu item
+            const menuItem = item;
+            return (_jsx(Item, { id: menuItem.id, onClick: () => menuItem.onClick(closestPoint, series), disabled: menuItem.disabled?.(closestPoint, series) ?? false, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [menuItem.icon != null && menuItem.icon !== '' && _jsx(Icon, { icon: menuItem.icon }), _jsx("div", { children: menuItem.label })] }) }, menuItem.id));
+        }
     };
-    return (_jsxs(Menu, { id: menuId, onVisibilityChange: trackVisibility, theme: isDarkMode ? 'dark' : '', children: [_jsx(Item, { id: "focus-on-single-series", onClick: handleFocusOnSingleSeries, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:star" }), _jsx("div", { children: "Focus only on this series" })] }) }), _jsx(Submenu, { label: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "material-symbols:add" }), _jsx("div", { children: "Add to query" })] }), children: _jsx("div", { className: "max-h-[300px] overflow-auto", children: labels == null || labels.length === 0 ? (_jsx(Item, { disabled: true, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:warning" }), _jsx("div", { children: "No labels available" })] }) })) : (labels.map((label) => (_jsx(Item, { id: label.name, onClick: () => {
-                            onAddLabelMatcher({
-                                key: label.name,
-                                value: label.value,
-                            });
-                        }, className: "max-w-[400px] overflow-hidden", children: _jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300", children: `${transformUtilizationLabels(label.name, utilizationMetrics)}="${label.value}"` }) }, label.name)))) }) })] }));
+    return (_jsx(Menu, { id: menuId, onVisibilityChange: trackVisibility, theme: isDarkMode ? 'dark' : '', children: menuItems.map(renderMenuItem) }));
 };
 export default MetricsContextMenu;

package/dist/MetricsGraph/MetricsTooltip/index.d.ts

@@ -1,15 +1,9 @@
-import { HighlightedSeries } from '../';
 interface Props {
     x: number;
     y: number;
-    highlighted: HighlightedSeries;
     contextElement: Element | null;
-    sampleType: string;
-    sampleUnit: string;
-    delta: boolean;
-    utilizationMetrics?: boolean;
-    valuePrefix?: string;
+    content: React.ReactNode;
 }
-declare const MetricsTooltip: ({ x, y, highlighted, contextElement, sampleType, sampleUnit, delta, utilizationMetrics, valuePrefix, }: Props) => JSX.Element;
+declare const MetricsTooltip: ({ x, y, contextElement, content }: Props) => JSX.Element;
 export default MetricsTooltip;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsTooltip/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAC,iBAAiB,EAAC,MAAM,KAAK,CAAC;AAEtC,UAAU,KAAK;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,WAAW,EAAE,iBAAiB,CAAC;IAC/B,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA8BD,QAAA,MAAM,cAAc,GAAI,wGAUrB,KAAK,KAAG,GAAG,CAAC,OAyMd,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/MetricsTooltip/index.tsx"],"names":[],"mappings":"AAqBA,UAAU,KAAK;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAkCD,QAAA,MAAM,cAAc,GAAI,mCAAiC,KAAK,KAAG,GAAG,CAAC,OA2DpE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/MetricsGraph/MetricsTooltip/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 // 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.
@@ -12,89 +12,80 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useEffect, useMemo, useState } from 'react';
-import { Icon } from '@iconify/react';
 import { usePopper } from 'react-popper';
-import { TextWithTooltip, useParcaContext } from '@parca/components';
-import { formatDate, timePattern, valueFormatter } from '@parca/utilities';
 const virtualElement = {
     getBoundingClientRect: () => {
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        return {
+        const emptyRect = {
             width: 0,
             height: 0,
             top: 0,
-            left: 0,
             right: 0,
             bottom: 0,
+            left: 0,
+            x: 0,
+            y: 0,
+            toJSON: () => ({}),
         };
+        return emptyRect;
     },
 };
-function generateGetBoundingClientRect(contextElement, x = 0, y = 0) {
-    const domRect = contextElement.getBoundingClientRect();
-    return () => 
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    ({
+const createDomRect = (x, y) => {
+    const domRect = {
         width: 0,
         height: 0,
-        top: domRect.y + y,
-        left: domRect.x + x,
-        right: domRect.x + x,
-        bottom: domRect.y + y,
-    });
-}
-const MetricsTooltip = ({ x, y, highlighted, contextElement, sampleType, sampleUnit, delta, utilizationMetrics = false, valuePrefix, }) => {
-    const { timezone } = useParcaContext();
+        top: y,
+        right: x,
+        bottom: y,
+        left: x,
+        x,
+        y,
+        toJSON: () => ({}),
+    };
+    return domRect;
+};
+const MetricsTooltip = ({ x, y, contextElement, content }) => {
     const [popperElement, setPopperElement] = useState(null);
-    const { styles, attributes, ...popperProps } = usePopper(virtualElement, popperElement, {
+    const { styles, attributes, update } = usePopper(virtualElement, popperElement, {
         placement: 'auto-start',
         strategy: 'absolute',
         modifiers: [
             {
                 name: 'preventOverflow',
                 options: {
-                    tether: false,
-                    altAxis: true,
+                    boundary: contextElement ?? undefined,
                 },
             },
             {
                 name: 'offset',
                 options: {
-                    offset: [30, 30],
+                    offset: [15, 15],
                 },
             },
         ],
     });
-    const update = popperProps.update;
-    const attributesMap = useMemo(() => {
-        return highlighted.labels
-            .filter(label => label.name.startsWith('attributes.') && !label.name.startsWith('attributes_resource.'))
-            .reduce((acc, label) => {
-            const key = label.name.replace('attributes.', '');
-            acc[key] = label.value;
-            return acc;
-        }, {});
-    }, [highlighted.labels]);
-    const attributesResourceMap = useMemo(() => {
-        return highlighted.labels
-            .filter(label => label.name.startsWith('attributes_resource.'))
-            .reduce((acc, label) => {
-            const key = label.name.replace('attributes_resource.', '');
-            acc[key] = label.value;
-            return acc;
-        }, {});
-    }, [highlighted.labels]);
+    useMemo(() => {
+        virtualElement.getBoundingClientRect = () => {
+            const domRect = contextElement?.getBoundingClientRect() ?? {
+                width: 0,
+                height: 0,
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+                x: 0,
+                y: 0,
+                toJSON: () => ({}),
+            };
+            return createDomRect(domRect.x + x, domRect.y + y);
+        };
+    }, [x, y, contextElement]);
     useEffect(() => {
-        if (contextElement != null) {
-            virtualElement.getBoundingClientRect = generateGetBoundingClientRect(contextElement, x, y);
-            void update?.();
-        }
-    }, [x, y, contextElement, update]);
-    const nameLabel = highlighted?.labels.find(e => e.name === '__name__');
-    const highlightedNameLabel = nameLabel !== undefined ? nameLabel : { name: '', value: '' };
-    return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-50", children: _jsx("div", { className: "flex max-w-lg", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "rounded-lg border-gray-300 bg-gray-50 p-3 opacity-90 shadow-lg dark:border-gray-500 dark:bg-gray-900", style: { borderWidth: 1 }, children: _jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [delta ? (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pr-3", children: "Per\u00A0Second" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit === 'nanoseconds' && sampleType === 'cpu'
-                                                                        ? 'CPU Cores'
-                                                                        : sampleUnit, 5) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Total" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.value, sampleUnit, 2) })] })] })) : (_jsxs("tr", { children: [_jsxs("td", { className: "w-1/4", children: [valuePrefix ?? '', "Value"] }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) })] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(highlighted.duration, 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(highlighted.timestamp, timePattern(timezone), timezone) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: utilizationMetrics ? (_jsxs(_Fragment, { children: [Object.keys(attributesResourceMap).length > 0 && (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Resource Attributes" })), _jsx("span", { className: "my-2 block text-gray-500", children: Object.keys(attributesResourceMap).map(name => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${name.replace('attributes.', '')}="${attributesResourceMap[name]}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesResourceMap[name]}` }) }, name))) }), Object.keys(attributesMap).length > 0 && (_jsx("span", { className: "text-sm font-bold text-gray-700 dark:text-white", children: "Attributes" })), _jsx("span", { className: "my-2 block text-gray-500", children: Object.keys(attributesMap).map(name => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${name.replace('attributes.', '')}="${attributesMap[name]}"`, maxTextLength: 48, id: `tooltip-${name}-${attributesMap[name]}` }) }, name))) })] })) : (_jsx(_Fragment, { children: highlighted.labels
-                                            .filter((label) => label.name !== '__name__')
-                                            .map((label) => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", children: _jsx(TextWithTooltip, { text: `${label.name}="${label.value}"`, maxTextLength: 37, id: `tooltip-${label.name}` }) }, label.name))) })) }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to add labels to query." })] })] }) }) }) }) }) }));
+        void update?.();
+    }, [x, y, update]);
+    // Don't render anything if content is null or undefined
+    if (content == null) {
+        return _jsx(_Fragment, {});
+    }
+    return (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, className: "z-50", children: _jsx("div", { className: "flex max-w-lg", children: _jsx("div", { className: "m-auto", children: _jsx("div", { className: "border border-gray-300 bg-gray-50 dark:border-gray-500 dark:bg-gray-900 rounded-lg shadow-lg px-3 py-2", children: content }) }) }) }));
 };
 export default MetricsTooltip;

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

@@ -19,14 +19,11 @@ interface CommonProps {
         key: string;
         value: string;
     }>;
-    onSelectedSeriesChange?: (series: Array<{
-        key: string;
-        value: string;
-    }>) => void;
+    onSeriesClick?: (seriesIndex: number) => void;
 }
 type Props = CommonProps & {
     utilizationMetricsLoading?: boolean;
 };
-declare const AreaChart: ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, selectedSeries, onSelectedSeriesChange, }: Props) => JSX.Element;
+declare const AreaChart: ({ transmitData, receiveData, addLabelMatcher, setTimeRange, utilizationMetricsLoading, name, humanReadableName, from, to, selectedSeries, onSeriesClick, }: Props) => JSX.Element;
 export default AreaChart;
 //# sourceMappingURL=Throughput.d.ts.map

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;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;IACX,cAAc,CAAC,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IACrD,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,KAAK,IAAI,CAAC;CAChF;AAQD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AA8dF,QAAA,MAAM,SAAS,GAAI,qKAYhB,KAAK,KAAG,GAAG,CAAC,OAmCd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Throughput.d.ts","sourceRoot":"","sources":["../../../src/MetricsGraph/UtilizationMetrics/Throughput.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACL,aAAa,EAId,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAC,KAAK,kBAAkB,IAAI,YAAY,EAAC,MAAM,uBAAuB,CAAC;AAgB9E,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;IACX,cAAc,CAAC,EAAE,KAAK,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IACrD,aAAa,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAUD,KAAK,KAAK,GAAG,WAAW,GAAG;IACzB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAkRF,QAAA,MAAM,SAAS,GAAI,4JAYhB,KAAK,KAAG,GAAG,CAAC,OA8Cd,CAAC;AAEF,eAAe,SAAS,CAAC"}