@parca/profile 0.16.183 → 0.16.185

package/dist/GraphTooltip/index.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -39,69 +17,63 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { usePopper } from 'react-popper';
 import { useKeyDown } from '@parca/components';
 import { selectHoveringNode, useAppSelector } from '@parca/store';
-import { getLastItem, valueFormatter } from '@parca/utilities';
+import { divide, getLastItem, valueFormatter } from '@parca/utilities';
 import { hexifyAddress, truncateString, truncateStringReverse } from '../';
 import { ExpandOnHover } from './ExpandOnHoverValue';
-var NoData = function () {
-    return _jsx("span", __assign({ className: "rounded bg-gray-200 px-2 dark:bg-gray-800" }, { children: "Not available" }));
+const NoData = () => {
+    return _jsx("span", { className: "rounded bg-gray-200 px-2 dark:bg-gray-800", children: "Not available" });
 };
-var virtualElement = {
-    getBoundingClientRect: function () {
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        return ({
-            width: 0,
-            height: 0,
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-        });
-    },
+const virtualElement = {
+    getBoundingClientRect: () => 
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    ({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+    }),
 };
-function generateGetBoundingClientRect(contextElement, x, y) {
-    if (x === void 0) { x = 0; }
-    if (y === void 0) { y = 0; }
-    var domRect = contextElement.getBoundingClientRect();
-    return function () {
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        return ({
-            width: 0,
-            height: 0,
-            top: domRect.y + y,
-            left: domRect.x + x,
-            right: domRect.x + x,
-            bottom: domRect.y + y,
-        });
-    };
+function generateGetBoundingClientRect(contextElement, x = 0, y = 0) {
+    const domRect = contextElement.getBoundingClientRect();
+    return () => 
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    ({
+        width: 0,
+        height: 0,
+        top: domRect.y + y,
+        left: domRect.x + x,
+        right: domRect.x + x,
+        bottom: domRect.y + y,
+    });
 }
-var TooltipMetaInfo = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var hoveringNode = _a.hoveringNode, onCopy = _a.onCopy, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, _m = _a.type, type = _m === void 0 ? 'flamegraph' : _m;
+const TooltipMetaInfo = ({ hoveringNode, onCopy, strings, mappings, locations, functions, type = 'flamegraph', }) => {
     // populate meta from the flamegraph metadata tables
     if (type === 'flamegraph' &&
         locations !== undefined &&
-        ((_b = hoveringNode.meta) === null || _b === void 0 ? void 0 : _b.locationIndex) !== undefined &&
+        hoveringNode.meta?.locationIndex !== undefined &&
         hoveringNode.meta.locationIndex !== 0) {
-        var location_1 = locations[hoveringNode.meta.locationIndex - 1];
-        hoveringNode.meta.location = location_1;
-        if (location_1 !== undefined) {
+        const location = locations[hoveringNode.meta.locationIndex - 1];
+        hoveringNode.meta.location = location;
+        if (location !== undefined) {
             if (mappings !== undefined &&
-                location_1.mappingIndex !== undefined &&
-                location_1.mappingIndex !== 0) {
-                var mapping = mappings[location_1.mappingIndex - 1];
+                location.mappingIndex !== undefined &&
+                location.mappingIndex !== 0) {
+                const mapping = mappings[location.mappingIndex - 1];
                 if (strings !== undefined && mapping !== undefined) {
                     mapping.file =
-                        (mapping === null || mapping === void 0 ? void 0 : mapping.fileStringIndex) !== undefined ? strings[mapping.fileStringIndex] : '';
+                        mapping?.fileStringIndex !== undefined ? strings[mapping.fileStringIndex] : '';
                     mapping.buildId =
-                        (mapping === null || mapping === void 0 ? void 0 : mapping.buildIdStringIndex) !== undefined ? strings[mapping.buildIdStringIndex] : '';
+                        mapping?.buildIdStringIndex !== undefined ? strings[mapping.buildIdStringIndex] : '';
                 }
                 hoveringNode.meta.mapping = mapping;
             }
             if (functions !== undefined &&
-                location_1.lines !== undefined &&
+                location.lines !== undefined &&
                 hoveringNode.meta.lineIndex !== undefined &&
-                hoveringNode.meta.lineIndex < location_1.lines.length) {
-                var func = functions[location_1.lines[hoveringNode.meta.lineIndex].functionIndex - 1];
+                hoveringNode.meta.lineIndex < location.lines.length) {
+                const func = functions[location.lines[hoveringNode.meta.lineIndex].functionIndex - 1];
                 if (strings !== undefined) {
                     func.name = strings[func.nameStringIndex];
                     func.systemName = strings[func.systemNameStringIndex];
@@ -111,65 +83,68 @@ var TooltipMetaInfo = function (_a) {
             }
         }
     }
-    var getTextForFile = function (hoveringNode) {
-        var _a, _b, _c, _d, _e;
-        if (((_a = hoveringNode.meta) === null || _a === void 0 ? void 0 : _a.function) == null)
+    const getTextForFile = (hoveringNode) => {
+        if (hoveringNode.meta?.function == null)
             return '<unknown>';
-        return "".concat(hoveringNode.meta.function.filename, " ").concat(((_b = hoveringNode.meta.line) === null || _b === void 0 ? void 0 : _b.line) !== undefined && ((_c = hoveringNode.meta.line) === null || _c === void 0 ? void 0 : _c.line) !== '0'
-            ? " +".concat(hoveringNode.meta.line.line.toString())
-            : "".concat(((_d = hoveringNode.meta.function) === null || _d === void 0 ? void 0 : _d.startLine) !== undefined &&
-                ((_e = hoveringNode.meta.function) === null || _e === void 0 ? void 0 : _e.startLine) !== '0'
-                ? " +".concat(hoveringNode.meta.function.startLine)
-                : ''));
+        return `${hoveringNode.meta.function.filename} ${hoveringNode.meta.line?.line !== undefined && hoveringNode.meta.line?.line !== 0n
+            ? ` +${hoveringNode.meta.line.line.toString()}`
+            : `${hoveringNode.meta.function?.startLine !== undefined &&
+                hoveringNode.meta.function?.startLine !== 0n
+                ? ` +${hoveringNode.meta.function.startLine}`
+                : ''}`}`;
     };
-    var file = getTextForFile(hoveringNode);
-    return (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "File" })), _jsx("td", __assign({ className: "w-3/4 break-all" }, { children: ((_d = (_c = hoveringNode.meta) === null || _c === void 0 ? void 0 : _c.function) === null || _d === void 0 ? void 0 : _d.filename) == null ||
-                            ((_e = hoveringNode.meta) === null || _e === void 0 ? void 0 : _e.function.filename) === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: file }, { children: _jsx("button", __assign({ className: "cursor-pointer whitespace-nowrap text-left" }, { children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 40) }) })) }))) }))] }), _jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Address" })), _jsx("td", __assign({ className: "w-3/4 break-all" }, { children: ((_g = (_f = hoveringNode.meta) === null || _f === void 0 ? void 0 : _f.location) === null || _g === void 0 ? void 0 : _g.address) == null ||
-                            ((_h = hoveringNode.meta) === null || _h === void 0 ? void 0 : _h.location.address) === '0' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hexifyAddress(hoveringNode.meta.location.address) }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: hexifyAddress(hoveringNode.meta.location.address) })) }))) }))] }), _jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Binary" })), _jsx("td", __assign({ className: "w-3/4 break-all" }, { children: ((_j = hoveringNode.meta) === null || _j === void 0 ? void 0 : _j.mapping) == null || hoveringNode.meta.mapping.file === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.mapping.file }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: getLastItem(hoveringNode.meta.mapping.file) })) }))) }))] }), _jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Build Id" })), _jsx("td", __assign({ className: "w-3/4 break-all" }, { children: ((_k = hoveringNode.meta) === null || _k === void 0 ? void 0 : _k.mapping) == null || ((_l = hoveringNode.meta) === null || _l === void 0 ? void 0 : _l.mapping.buildId) === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.mapping.buildId }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: truncateString(getLastItem(hoveringNode.meta.mapping.buildId), 28) })) }))) }))] })] }));
+    const file = getTextForFile(hoveringNode);
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "File" }), _jsx("td", { className: "w-3/4 break-all", children: hoveringNode.meta?.function?.filename == null ||
+                            hoveringNode.meta?.function.filename === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: file, children: _jsx("button", { className: "cursor-pointer whitespace-nowrap text-left", children: _jsx(ExpandOnHover, { value: file, displayValue: truncateStringReverse(file, 40) }) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Address" }), _jsx("td", { className: "w-3/4 break-all", children: hoveringNode.meta?.location?.address == null ||
+                            hoveringNode.meta?.location.address === 0n ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(hoveringNode.meta.location.address), children: _jsx("button", { className: "cursor-pointer", children: hexifyAddress(hoveringNode.meta.location.address) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Binary" }), _jsx("td", { className: "w-3/4 break-all", children: hoveringNode.meta?.mapping == null || hoveringNode.meta.mapping.file === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: hoveringNode.meta.mapping.file, children: _jsx("button", { className: "cursor-pointer", children: getLastItem(hoveringNode.meta.mapping.file) }) })) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Build Id" }), _jsx("td", { className: "w-3/4 break-all", children: hoveringNode.meta?.mapping == null || hoveringNode.meta?.mapping.buildId === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, { onCopy: onCopy, text: hoveringNode.meta.mapping.buildId, children: _jsx("button", { className: "cursor-pointer", children: truncateString(getLastItem(hoveringNode.meta.mapping.buildId), 28) }) })) })] })] }));
 };
-var timeoutHandle = null;
-export var GraphTooltipContent = function (_a) {
-    var hoveringNode = _a.hoveringNode, unit = _a.unit, total = _a.total, totalUnfiltered = _a.totalUnfiltered, isFixed = _a.isFixed, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, _b = _a.type, type = _b === void 0 ? 'flamegraph' : _b;
-    var _c = useState(false), isCopied = _c[0], setIsCopied = _c[1];
-    var onCopy = function () {
+let timeoutHandle = null;
+export const GraphTooltipContent = ({ hoveringNode, unit, total, totalUnfiltered, isFixed, strings, mappings, locations, functions, type = 'flamegraph', }) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const onCopy = () => {
         setIsCopied(true);
         if (timeoutHandle !== null) {
             clearTimeout(timeoutHandle);
         }
-        timeoutHandle = setTimeout(function () { return setIsCopied(false); }, 3000);
+        timeoutHandle = setTimeout(() => setIsCopied(false), 3000);
     };
-    var hoveringNodeCumulative = parseFloat(hoveringNode.cumulative);
-    var diff = hoveringNode.diff === undefined ? 0 : parseFloat(hoveringNode.diff);
-    var prevValue = hoveringNodeCumulative - diff;
-    var diffRatio = Math.abs(diff) > 0 ? diff / prevValue : 0;
-    var diffSign = diff > 0 ? '+' : '';
-    var diffValueText = diffSign + valueFormatter(diff, unit, 1);
-    var diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
-    var diffText = "".concat(diffValueText, " (").concat(diffPercentageText, ")");
-    var getTextForCumulative = function (hoveringNodeCumulative) {
-        var filtered = totalUnfiltered > total
-            ? " / ".concat(((hoveringNodeCumulative * 100) / total).toFixed(2), "% of filtered")
+    const hoveringNodeCumulative = hoveringNode.cumulative;
+    const diff = hoveringNode.diff;
+    const prevValue = hoveringNodeCumulative - diff;
+    const diffRatio = diff !== 0n ? divide(diff, prevValue) : 0;
+    const diffSign = diff > 0 ? '+' : '';
+    const diffValueText = diffSign + valueFormatter(diff, unit, 1);
+    const diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
+    const diffText = `${diffValueText} (${diffPercentageText})`;
+    const getTextForCumulative = (hoveringNodeCumulative) => {
+        const filtered = totalUnfiltered > total
+            ? ` / ${divide(hoveringNodeCumulative * 100n, total).toFixed(2)}% of filtered`
             : '';
-        return "".concat(valueFormatter(hoveringNodeCumulative, unit, 2), "\n    (").concat(((hoveringNodeCumulative * 100) / totalUnfiltered).toFixed(2), "%").concat(filtered, ")");
+        return `${valueFormatter(hoveringNodeCumulative, unit, 2)}
+    (${divide(hoveringNodeCumulative * 100n, totalUnfiltered).toFixed(2)}%${filtered})`;
     };
-    return (_jsx("div", __assign({ className: "flex text-sm ".concat(isFixed ? 'w-full' : '') }, { children: _jsx("div", __assign({ className: "m-auto w-full ".concat(isFixed ? 'w-full' : '') }, { children: _jsxs("div", __assign({ className: "min-h-52 flex w-[500px] flex-col justify-between rounded-lg border border-gray-300 bg-gray-50 p-3 shadow-lg dark:border-gray-500 dark:bg-gray-900" }, { children: [_jsx("div", __assign({ className: "flex flex-row" }, { children: _jsxs("div", __assign({ className: "mx-2" }, { children: [_jsx("div", __assign({ className: "flex h-10 items-center break-all font-semibold" }, { children: hoveringNode.meta === undefined ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: hoveringNode.meta.function !== undefined &&
-                                            hoveringNode.meta.function.name !== '' ? (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.function.name }, { children: _jsx("button", __assign({ className: "cursor-pointer text-left" }, { children: hoveringNode.meta.function.name })) }))) : (_jsx(_Fragment, { children: hoveringNode.meta.location !== undefined &&
-                                                parseInt(hoveringNode.meta.location.address, 10) !== 0 ? (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hexifyAddress(hoveringNode.meta.location.address) }, { children: _jsx("button", __assign({ className: "cursor-pointer text-left" }, { children: hexifyAddress(hoveringNode.meta.location.address) })) }))) : (_jsx("p", { children: "unknown" })) })) })) })), _jsx("table", __assign({ className: "my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300" }, { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Cumulative" })), _jsx("td", __assign({ className: "w-3/4" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: getTextForCumulative(hoveringNodeCumulative) }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: getTextForCumulative(hoveringNodeCumulative) })) })) }))] }), hoveringNode.diff !== undefined && diff !== 0 && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Diff" })), _jsx("td", __assign({ className: "w-3/4" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: diffText }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: diffText })) })) }))] })), _jsx(TooltipMetaInfo, { onCopy: onCopy, hoveringNode: hoveringNode, strings: strings, mappings: mappings, locations: locations, functions: functions, type: type })] }) }))] })) })), _jsx("span", __assign({ className: "mx-2 block text-xs text-gray-500" }, { children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' }))] })) })) })));
+    return (_jsx("div", { className: `flex text-sm ${isFixed ? 'w-full' : ''}`, children: _jsx("div", { className: `m-auto w-full ${isFixed ? 'w-full' : ''}`, children: _jsxs("div", { className: "min-h-52 flex w-[500px] flex-col justify-between rounded-lg border border-gray-300 bg-gray-50 p-3 shadow-lg dark:border-gray-500 dark:bg-gray-900", children: [_jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "mx-2", children: [_jsx("div", { className: "flex h-10 items-center break-all font-semibold", children: hoveringNode.meta === undefined ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: hoveringNode.meta.function !== undefined &&
+                                            hoveringNode.meta.function.name !== '' ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: hoveringNode.meta.function.name, children: _jsx("button", { className: "cursor-pointer text-left", children: hoveringNode.meta.function.name }) })) : (_jsx(_Fragment, { children: hoveringNode.meta.location !== undefined &&
+                                                hoveringNode.meta.location.address !== 0n ? (_jsx(CopyToClipboard, { onCopy: onCopy, text: hexifyAddress(hoveringNode.meta.location.address), children: _jsx("button", { className: "cursor-pointer text-left", children: hexifyAddress(hoveringNode.meta.location.address) }) })) : (_jsx("p", { children: "unknown" })) })) })) }), _jsx("table", { className: "my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Cumulative" }), _jsx("td", { className: "w-3/4", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: getTextForCumulative(hoveringNodeCumulative), children: _jsx("button", { className: "cursor-pointer", children: getTextForCumulative(hoveringNodeCumulative) }) }) })] }), hoveringNode.diff !== undefined && diff !== 0n && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Diff" }), _jsx("td", { className: "w-3/4", children: _jsx(CopyToClipboard, { onCopy: onCopy, text: diffText, children: _jsx("button", { className: "cursor-pointer", children: diffText }) }) })] })), _jsx(TooltipMetaInfo, { onCopy: onCopy, hoveringNode: hoveringNode, strings: strings, mappings: mappings, locations: locations, functions: functions, type: type })] }) })] }) }), _jsx("span", { className: "mx-2 block text-xs text-gray-500", children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' })] }) }) }));
 };
-var GraphTooltip = function (_a) {
-    var x = _a.x, y = _a.y, unit = _a.unit, total = _a.total, totalUnfiltered = _a.totalUnfiltered, hoveringNodeProp = _a.hoveringNode, contextElement = _a.contextElement, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, _c = _a.virtualContextElement, virtualContextElement = _c === void 0 ? true : _c, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, _d = _a.type, type = _d === void 0 ? 'flamegraph' : _d;
-    var hoveringNodeState = useAppSelector(selectHoveringNode);
+const GraphTooltip = ({ x, y, unit, total, totalUnfiltered, hoveringNode: hoveringNodeProp, contextElement, isFixed = false, virtualContextElement = true, strings, mappings, locations, functions, type = 'flamegraph', }) => {
+    const hoveringNodeState = useAppSelector(selectHoveringNode);
     // @ts-expect-error
-    var hoveringNode = useMemo(function () {
-        var h = hoveringNodeProp !== null && hoveringNodeProp !== void 0 ? hoveringNodeProp : hoveringNodeState;
+    const hoveringNode = useMemo(() => {
+        const h = hoveringNodeProp ?? hoveringNodeState;
         if (h == null) {
             return h;
         }
         // Cloning the object to avoid the mutating error as this is Redux store object and we are modifying the meta object in GraphTooltipContent component.
-        return __assign(__assign({}, h), { meta: __assign({}, h.meta) });
+        return {
+            ...h,
+            meta: {
+                ...h.meta,
+            },
+        };
     }, [hoveringNodeProp, hoveringNodeState]);
-    var _e = useState(null), popperElement = _e[0], setPopperElement = _e[1];
-    var _f = usePopper(virtualContextElement ? virtualElement : contextElement, popperElement, {
+    const [popperElement, setPopperElement] = useState(null);
+    const { styles, attributes, ...popperProps } = usePopper(virtualContextElement ? virtualElement : contextElement, popperElement, {
         placement: 'bottom-start',
         strategy: 'absolute',
         modifiers: [
@@ -178,7 +153,7 @@ var GraphTooltip = function (_a) {
                 options: {
                     tether: false,
                     altAxis: true,
-                    boundary: contextElement !== null && contextElement !== void 0 ? contextElement : undefined,
+                    boundary: contextElement ?? undefined,
                 },
             },
             {
@@ -190,37 +165,36 @@ var GraphTooltip = function (_a) {
             {
                 name: 'flip',
                 options: {
-                    boundary: contextElement !== null && contextElement !== void 0 ? contextElement : undefined,
+                    boundary: contextElement ?? undefined,
                 },
             },
         ],
-    }), styles = _f.styles, attributes = _f.attributes, popperProps = __rest(_f, ["styles", "attributes"]);
-    var isShiftDown = useKeyDown().isShiftDown;
-    useEffect(function () {
+    });
+    const { isShiftDown } = useKeyDown();
+    useEffect(() => {
         if (contextElement === null)
             return;
-        var onMouseMove = function (e) {
-            var _a;
+        const onMouseMove = (e) => {
             if (isShiftDown) {
                 return;
             }
-            var tooltipX = x;
-            var tooltipY = y;
+            let tooltipX = x;
+            let tooltipY = y;
             if (tooltipX == null || tooltipY == null) {
-                var rel = pointer(e);
+                const rel = pointer(e);
                 tooltipX = rel[0];
                 tooltipY = rel[1];
             }
             virtualElement.getBoundingClientRect = generateGetBoundingClientRect(contextElement, tooltipX, tooltipY);
-            void ((_a = popperProps.update) === null || _a === void 0 ? void 0 : _a.call(popperProps));
+            void popperProps.update?.();
         };
         contextElement.addEventListener('mousemove', onMouseMove);
-        return function () {
+        return () => {
             contextElement.removeEventListener('mousemove', onMouseMove);
         };
     }, [contextElement, popperProps, isShiftDown, x, y]);
     if (hoveringNode === undefined || hoveringNode == null)
         return _jsx(_Fragment, {});
-    return isFixed ? (_jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, totalUnfiltered: totalUnfiltered, isFixed: isFixed, type: type })) : (_jsx("div", __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { children: _jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, totalUnfiltered: totalUnfiltered, isFixed: isFixed, strings: strings, mappings: mappings, locations: locations, functions: functions, type: type }) })));
+    return isFixed ? (_jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, totalUnfiltered: totalUnfiltered, isFixed: isFixed, type: type })) : (_jsx("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: _jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, totalUnfiltered: totalUnfiltered, isFixed: isFixed, strings: strings, mappings: mappings, locations: locations, functions: functions, type: type }) }));
 };
 export default GraphTooltip;

package/dist/MatchersInput/SuggestionItem.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -24,16 +13,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // limitations under the License.
 import { useEffect, useRef } from 'react';
 import cx from 'classnames';
-var SuggestionItem = function (_a) {
-    var isHighlighted = _a.isHighlighted, onHighlight = _a.onHighlight, onApplySuggestion = _a.onApplySuggestion, onResetHighlight = _a.onResetHighlight, value = _a.value;
-    var ref = useRef(null);
-    useEffect(function () {
+const SuggestionItem = ({ isHighlighted, onHighlight, onApplySuggestion, onResetHighlight, value, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
         if (isHighlighted && ref.current != null) {
             ref.current.scrollIntoView({ block: 'nearest' });
         }
     }, [isHighlighted]);
-    return (_jsx("div", __assign({ className: cx('relative cursor-default select-none py-2 pl-3 pr-9', {
+    return (_jsx("div", { className: cx('relative cursor-default select-none py-2 pl-3 pr-9', {
             'bg-indigo-600 text-white': isHighlighted,
-        }), onMouseOver: function () { return onHighlight(); }, onClick: function () { return onApplySuggestion(); }, onMouseOut: function () { return onResetHighlight(); }, ref: ref }, { children: value })));
+        }), onMouseOver: () => onHighlight(), onClick: () => onApplySuggestion(), onMouseOut: () => onResetHighlight(), ref: ref, children: value }));
 };
 export default SuggestionItem;

package/dist/MatchersInput/SuggestionsList.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -27,38 +16,33 @@ import { Transition } from '@headlessui/react';
 import { usePopper } from 'react-popper';
 import { useParcaContext } from '@parca/components';
 import SuggestionItem from './SuggestionItem';
-var Suggestion = /** @class */ (function () {
-    function Suggestion(type, typeahead, value) {
+export class Suggestion {
+    constructor(type, typeahead, value) {
         this.type = type;
         this.typeahead = typeahead;
         this.value = value;
     }
-    return Suggestion;
-}());
-export { Suggestion };
-var Suggestions = /** @class */ (function () {
-    function Suggestions() {
+}
+export class Suggestions {
+    constructor() {
         this.literals = [];
         this.labelNames = [];
         this.labelValues = [];
     }
-    return Suggestions;
-}());
-export { Suggestions };
-var LoadingSpinner = function () {
-    var Spinner = useParcaContext().loader;
-    return _jsx("div", __assign({ className: "pt-2 pb-4" }, { children: Spinner }));
+}
+const LoadingSpinner = () => {
+    const { loader: Spinner } = useParcaContext();
+    return _jsx("div", { className: "pt-2 pb-4", children: Spinner });
 };
-var SuggestionsList = function (_a) {
-    var suggestions = _a.suggestions, applySuggestion = _a.applySuggestion, inputRef = _a.inputRef, runQuery = _a.runQuery, focusedInput = _a.focusedInput, isLabelNamesLoading = _a.isLabelNamesLoading, isLabelValuesLoading = _a.isLabelValuesLoading;
-    var _b = useState(null), popperElement = _b[0], setPopperElement = _b[1];
-    var _c = usePopper(inputRef, popperElement, {
+const SuggestionsList = ({ suggestions, applySuggestion, inputRef, runQuery, focusedInput, isLabelNamesLoading, isLabelValuesLoading, }) => {
+    const [popperElement, setPopperElement] = useState(null);
+    const { styles, attributes } = usePopper(inputRef, popperElement, {
         placement: 'bottom-start',
-    }), styles = _c.styles, attributes = _c.attributes;
-    var _d = useState(-1), highlightedSuggestionIndex = _d[0], setHighlightedSuggestionIndex = _d[1];
-    var _e = useState(true), showSuggest = _e[0], setShowSuggest = _e[1];
-    var suggestionsLength = suggestions.literals.length + suggestions.labelNames.length + suggestions.labelValues.length;
-    var getSuggestion = useCallback(function (index) {
+    });
+    const [highlightedSuggestionIndex, setHighlightedSuggestionIndex] = useState(-1);
+    const [showSuggest, setShowSuggest] = useState(true);
+    const suggestionsLength = suggestions.literals.length + suggestions.labelNames.length + suggestions.labelValues.length;
+    const getSuggestion = useCallback((index) => {
         if (index < suggestions.labelNames.length) {
             return suggestions.labelNames[index];
         }
@@ -67,24 +51,24 @@ var SuggestionsList = function (_a) {
         }
         return suggestions.labelValues[index - suggestions.labelNames.length - suggestions.literals.length];
     }, [suggestions]);
-    var resetHighlight = useCallback(function () { return setHighlightedSuggestionIndex(-1); }, [setHighlightedSuggestionIndex]);
-    var applyHighlightedSuggestion = useCallback(function () {
+    const resetHighlight = useCallback(() => setHighlightedSuggestionIndex(-1), [setHighlightedSuggestionIndex]);
+    const applyHighlightedSuggestion = useCallback(() => {
         applySuggestion(getSuggestion(highlightedSuggestionIndex));
         resetHighlight();
     }, [resetHighlight, applySuggestion, highlightedSuggestionIndex, getSuggestion]);
-    var applySuggestionWithIndex = useCallback(function (index) {
+    const applySuggestionWithIndex = useCallback((index) => {
         applySuggestion(getSuggestion(index));
         resetHighlight();
     }, [resetHighlight, applySuggestion, getSuggestion]);
-    var highlightNext = useCallback(function () {
-        var nextIndex = highlightedSuggestionIndex + 1;
+    const highlightNext = useCallback(() => {
+        const nextIndex = highlightedSuggestionIndex + 1;
         if (nextIndex === suggestionsLength) {
             resetHighlight();
             return;
         }
         setHighlightedSuggestionIndex(nextIndex);
     }, [highlightedSuggestionIndex, suggestionsLength, resetHighlight]);
-    var highlightPrevious = useCallback(function () {
+    const highlightPrevious = useCallback(() => {
         if (highlightedSuggestionIndex === -1) {
             // Didn't select anything, so starting at the bottom.
             setHighlightedSuggestionIndex(suggestionsLength - 1);
@@ -92,7 +76,7 @@ var SuggestionsList = function (_a) {
         }
         setHighlightedSuggestionIndex(highlightedSuggestionIndex - 1);
     }, [highlightedSuggestionIndex, suggestionsLength]);
-    var handleKeyPress = useCallback(function (event) {
+    const handleKeyPress = useCallback((event) => {
         if (event.key === 'Enter') {
             // Disable new line in the text area
             event.preventDefault();
@@ -111,7 +95,7 @@ var SuggestionsList = function (_a) {
         }
         setShowSuggest(true);
     }, [highlightedSuggestionIndex, applyHighlightedSuggestion, runQuery]);
-    var handleKeyDown = useCallback(function (event) {
+    const handleKeyDown = useCallback((event) => {
         // Don't need to handle any key interactions if no suggestions there.
         if (suggestionsLength === 0 || !['Tab', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
             return;
@@ -137,26 +121,18 @@ var SuggestionsList = function (_a) {
             highlightNext();
         }
     }, [suggestionsLength, highlightNext, highlightPrevious]);
-    useEffect(function () {
+    useEffect(() => {
         if (inputRef == null) {
             return;
         }
         inputRef.addEventListener('keydown', handleKeyDown);
         inputRef.addEventListener('keypress', handleKeyPress);
-        return function () {
+        return () => {
             inputRef.removeEventListener('keydown', handleKeyDown);
             inputRef.removeEventListener('keypress', handleKeyPress);
         };
     }, [inputRef, highlightedSuggestionIndex, suggestions, handleKeyPress, handleKeyDown]);
-    return (_jsx(_Fragment, { children: suggestionsLength > 0 && (_jsx("div", __assign({ ref: setPopperElement, style: __assign(__assign({}, styles.popper), { marginLeft: 0 }) }, attributes.popper, { className: "z-50" }, { children: _jsx(Transition, __assign({ show: focusedInput && showSuggest, as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0" }, { children: _jsxs("div", __assign({ style: { width: inputRef === null || inputRef === void 0 ? void 0 : inputRef.offsetWidth }, className: "absolute z-10 mt-1 max-h-[400px] overflow-auto rounded-md bg-gray-50 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-900 sm:text-sm" }, { children: [isLabelNamesLoading ? (_jsx(LoadingSpinner, {})) : (_jsx(_Fragment, { children: suggestions.labelNames.map(function (l, i) { return (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex === i, onHighlight: function () { return setHighlightedSuggestionIndex(i); }, onApplySuggestion: function () { return applySuggestionWithIndex(i); }, onResetHighlight: function () { return resetHighlight(); }, value: l.value }, l.value)); }) })), suggestions.literals.map(function (l, i) { return (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex === i + suggestions.labelNames.length, onHighlight: function () {
-                                return setHighlightedSuggestionIndex(i + suggestions.labelNames.length);
-                            }, onApplySuggestion: function () {
-                                return applySuggestionWithIndex(i + suggestions.labelNames.length);
-                            }, onResetHighlight: function () { return resetHighlight(); }, value: l.value }, l.value)); }), isLabelValuesLoading ? (_jsx(LoadingSpinner, {})) : (_jsx(_Fragment, { children: suggestions.labelValues.map(function (l, i) { return (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex ===
-                                    i + suggestions.labelNames.length + suggestions.literals.length, onHighlight: function () {
-                                    return setHighlightedSuggestionIndex(i + suggestions.labelNames.length + suggestions.literals.length);
-                                }, onApplySuggestion: function () {
-                                    return applySuggestionWithIndex(i + suggestions.labelNames.length + suggestions.literals.length);
-                                }, onResetHighlight: function () { return resetHighlight(); }, value: l.value }, l.value)); }) }))] })) })) }))) }));
+    return (_jsx(_Fragment, { children: suggestionsLength > 0 && (_jsx("div", { ref: setPopperElement, style: { ...styles.popper, marginLeft: 0 }, ...attributes.popper, className: "z-50", children: _jsx(Transition, { show: focusedInput && showSuggest, as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsxs("div", { style: { width: inputRef?.offsetWidth }, className: "absolute z-10 mt-1 max-h-[400px] overflow-auto rounded-md bg-gray-50 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-900 sm:text-sm", children: [isLabelNamesLoading ? (_jsx(LoadingSpinner, {})) : (_jsx(_Fragment, { children: suggestions.labelNames.map((l, i) => (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex === i, onHighlight: () => setHighlightedSuggestionIndex(i), onApplySuggestion: () => applySuggestionWithIndex(i), onResetHighlight: () => resetHighlight(), value: l.value }, l.value))) })), suggestions.literals.map((l, i) => (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex === i + suggestions.labelNames.length, onHighlight: () => setHighlightedSuggestionIndex(i + suggestions.labelNames.length), onApplySuggestion: () => applySuggestionWithIndex(i + suggestions.labelNames.length), onResetHighlight: () => resetHighlight(), value: l.value }, l.value))), isLabelValuesLoading ? (_jsx(LoadingSpinner, {})) : (_jsx(_Fragment, { children: suggestions.labelValues.map((l, i) => (_jsx(SuggestionItem, { isHighlighted: highlightedSuggestionIndex ===
+                                    i + suggestions.labelNames.length + suggestions.literals.length, onHighlight: () => setHighlightedSuggestionIndex(i + suggestions.labelNames.length + suggestions.literals.length), onApplySuggestion: () => applySuggestionWithIndex(i + suggestions.labelNames.length + suggestions.literals.length), onResetHighlight: () => resetHighlight(), value: l.value }, l.value))) }))] }) }) })) }));
 };
 export default SuggestionsList;