@parca/profile 0.16.152 → 0.16.154

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.154 (2023-03-28)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.153 (2023-03-28)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.152](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.150...@parca/profile@0.16.152) (2023-03-27)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.js

@@ -108,6 +108,6 @@ var Callgraph = function (_a) {
     var isResetViewButtonEnabled = view.scale !== originalView.scale ||
         view.translation.x !== originalView.translation.x ||
         view.translation.y !== originalView.translation.y;
-    return (_jsxs("div", __assign({ className: "w-full relative" }, { children: [_jsxs("div", __assign({ ref: containerRef, className: "w-full overflow-hidden" }, { children: [_jsx(MapInteractionCSS, __assign({ showControls: true, minScale: 1, maxScale: 5, value: view, onChange: function (value) { return setView(value); } }, { children: _jsx(SVG, { ref: svgWrapper, src: svgString, width: width, height: "auto", title: "Callgraph", innerRef: svgRef }) })), svgRef.current !== null && (_jsx(GraphTooltip, { type: "callgraph", unit: sampleUnit, total: parseInt(data.cumulative), totalUnfiltered: parseInt(data.cumulative), contextElement: containerRef.current }))] })), _jsx("div", __assign({ className: cx(dashboardItems.length > 1 ? 'left-[25px]' : 'left-0', 'w-auto absolute top-[-46px]') }, { children: _jsx(Button, __assign({ variant: "neutral", onClick: resetView, className: "z-50", disabled: !isResetViewButtonEnabled }, { children: "Reset View" })) }))] })));
+    return (_jsxs("div", __assign({ className: "relative w-full" }, { children: [_jsxs("div", __assign({ ref: containerRef, className: "w-full overflow-hidden" }, { children: [_jsx(MapInteractionCSS, __assign({ showControls: true, minScale: 1, maxScale: 5, value: view, onChange: function (value) { return setView(value); } }, { children: _jsx(SVG, { ref: svgWrapper, src: svgString, width: width, height: "auto", title: "Callgraph", innerRef: svgRef }) })), svgRef.current !== null && (_jsx(GraphTooltip, { type: "callgraph", unit: sampleUnit, total: parseInt(data.cumulative), totalUnfiltered: parseInt(data.cumulative), contextElement: containerRef.current }))] })), _jsx("div", __assign({ className: cx(dashboardItems.length > 1 ? 'left-[25px]' : 'left-0', 'absolute top-[-46px] w-auto') }, { children: _jsx(Button, __assign({ variant: "neutral", onClick: resetView, className: "z-50", disabled: !isResetViewButtonEnabled }, { children: "Reset View" })) }))] })));
 };
 export default Callgraph;

package/dist/GraphTooltip/ExpandOnHoverValue.js

@@ -12,5 +12,5 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var ExpandOnHover = function (_a) {
     var value = _a.value, displayValue = _a.displayValue;
-    return (_jsxs("div", __assign({ className: "relative group w-full" }, { children: [_jsx("div", __assign({ className: "text-ellipsis w-full overflow-hidden whitespace-nowrap" }, { children: displayValue !== null && displayValue !== void 0 ? displayValue : value })), _jsx("div", __assign({ className: "group-hover:flex hidden absolute -inset-2 max-w-[500px] whitespace-normal h-fit bg-gray-50 dark:bg-gray-900 shadow-[0_0_10px_2px_rgba(0,0,0,0.3)] rounded p-2 break-all" }, { children: value }))] })));
+    return (_jsxs("div", __assign({ className: "group relative w-full" }, { children: [_jsx("div", __assign({ className: "w-full overflow-hidden text-ellipsis whitespace-nowrap" }, { children: displayValue !== null && displayValue !== void 0 ? displayValue : value })), _jsx("div", __assign({ className: "absolute -inset-2 hidden h-fit max-w-[500px] whitespace-normal break-all rounded bg-gray-50 p-2 shadow-[0_0_10px_2px_rgba(0,0,0,0.3)] group-hover:flex dark:bg-gray-900" }, { children: value }))] })));
 };

package/dist/GraphTooltip/index.js

@@ -43,7 +43,7 @@ import { 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 dark:bg-gray-800 px-2" }, { children: "Not available" }));
+    return _jsx("span", __assign({ className: "rounded bg-gray-200 px-2 dark:bg-gray-800" }, { children: "Not available" }));
 };
 var virtualElement = {
     getBoundingClientRect: function () {
@@ -124,7 +124,7 @@ var TooltipMetaInfo = function (_a) {
     };
     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 text-left whitespace-nowrap" }, { 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 ||
+                            ((_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) })) }))) }))] })] }));
 };
 var timeoutHandle = null;
@@ -152,9 +152,9 @@ export var GraphTooltipContent = function (_a) {
             : '';
         return "".concat(valueFormatter(hoveringNodeCumulative, unit, 2), "\n    (").concat(((hoveringNodeCumulative * 100) / totalUnfiltered).toFixed(2), "%").concat(filtered, ")");
     };
-    return (_jsx("div", __assign({ className: "text-sm flex ".concat(isFixed ? 'w-full' : '') }, { children: _jsx("div", __assign({ className: "m-auto w-full ".concat(isFixed ? 'w-full' : '') }, { children: _jsxs("div", __assign({ className: "border border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg min-h-52 w-[500px] flex justify-between flex-col" }, { children: [_jsx("div", __assign({ className: "flex flex-row" }, { children: _jsxs("div", __assign({ className: "mx-2" }, { children: [_jsx("div", __assign({ className: "font-semibold break-all h-10 flex items-center" }, { children: hoveringNode.meta === undefined ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: hoveringNode.meta.function !== undefined &&
+    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: "table-fixed pr-0 text-gray-700 dark:text-gray-300 my-2 w-full" }, { 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: "block text-gray-500 text-xs mx-2" }, { children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' }))] })) })) })));
+                                                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.' }))] })) })) })));
 };
 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;

package/dist/MatchersInput/SuggestionItem.js

@@ -32,8 +32,8 @@ var SuggestionItem = function (_a) {
             ref.current.scrollIntoView({ block: 'nearest' });
         }
     }, [isHighlighted]);
-    return (_jsx("div", __assign({ className: cx('cursor-default select-none relative py-2 pl-3 pr-9', {
-            'text-white bg-indigo-600': isHighlighted,
+    return (_jsx("div", __assign({ 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 })));
 };
 export default SuggestionItem;

package/dist/MatchersInput/SuggestionsList.js

@@ -148,7 +148,7 @@ var SuggestionsList = function (_a) {
             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 max-h-[400px] mt-1 bg-gray-50 dark:bg-gray-900 shadow-lg rounded-md text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none 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 (_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);

package/dist/MatchersInput/index.js

@@ -154,7 +154,7 @@ var MatchersInput = function (_a) {
         setFocusedInput(false);
     };
     var profileSelected = currentQuery.profileName() === '';
-    return (_jsxs("div", __assign({ className: "font-mono flex-1 w-full min-w-[300px]" }, { children: [_jsx(TextareaAutosize, { ref: inputRef, className: cx('bg-gray-50 dark:bg-gray-900 focus:ring-indigo-800 flex-1 block w-full px-2 py-2 text-sm outline-none rounded', profileSelected && 'cursor-not-allowed'), placeholder: profileSelected
+    return (_jsxs("div", __assign({ className: "w-full min-w-[300px] flex-1 font-mono" }, { children: [_jsx(TextareaAutosize, { ref: inputRef, className: cx('block w-full flex-1 rounded bg-gray-50 px-2 py-2 text-sm outline-none focus:ring-indigo-800 dark:bg-gray-900', profileSelected && 'cursor-not-allowed'), placeholder: profileSelected
                     ? 'Select a profile first to enter a filter...'
                     : 'filter profiles... eg. node="test"', onChange: onChange, value: value, onBlur: unfocus, onFocus: focus, disabled: profileSelected, title: profileSelected
                     ? 'Select a profile first to enter a filter...'

package/dist/MetricsGraph/MetricsTooltip/index.js

@@ -98,10 +98,10 @@ var MetricsTooltip = function (_a) {
     }, [x, y, contextElement, update]);
     var nameLabel = highlighted === null || highlighted === void 0 ? void 0 : highlighted.labels.find(function (e) { return e.name === '__name__'; });
     var highlightedNameLabel = nameLabel !== undefined ? nameLabel : { name: '', value: '' };
-    return (_jsx("div", __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { className: "z-10" }, { children: _jsx("div", __assign({ className: "flex max-w-md" }, { children: _jsx("div", __assign({ className: "m-auto" }, { children: _jsx("div", __assign({ className: "border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg opacity-90", style: { borderWidth: 1 } }, { children: _jsx("div", __assign({ className: "flex flex-row" }, { children: _jsxs("div", __assign({ className: "ml-2 mr-6" }, { children: [_jsx("span", __assign({ className: "font-semibold" }, { children: highlightedNameLabel.value })), _jsx("span", __assign({ className: "block text-gray-700 dark:text-gray-300 my-2" }, { children: _jsx("table", __assign({ className: "table-auto" }, { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Value" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) }))] }), delta && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Total" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.value, sampleUnit, 2) }))] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Duration" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.duration, 'nanoseconds', 2) }))] })), _jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "At" })), _jsx("td", __assign({ className: "w-3/4" }, { children: formatDate(highlighted.timestamp, timeFormat) }))] })] }) })) })), _jsx("span", __assign({ className: "block text-gray-500 my-2" }, { children: highlighted.labels
+    return (_jsx("div", __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { className: "z-10" }, { children: _jsx("div", __assign({ className: "flex max-w-md" }, { children: _jsx("div", __assign({ className: "m-auto" }, { children: _jsx("div", __assign({ 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", __assign({ className: "flex flex-row" }, { children: _jsxs("div", __assign({ className: "ml-2 mr-6" }, { children: [_jsx("span", __assign({ className: "font-semibold" }, { children: highlightedNameLabel.value })), _jsx("span", __assign({ className: "my-2 block text-gray-700 dark:text-gray-300" }, { children: _jsx("table", __assign({ className: "table-auto" }, { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Value" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.valuePerSecond, sampleUnit, 5) }))] }), delta && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Total" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.value, sampleUnit, 2) }))] })), highlighted.duration > 0 && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Duration" })), _jsx("td", __assign({ className: "w-3/4" }, { children: valueFormatter(highlighted.duration, 'nanoseconds', 2) }))] })), _jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "At" })), _jsx("td", __assign({ className: "w-3/4" }, { children: formatDate(highlighted.timestamp, timeFormat) }))] })] }) })) })), _jsx("span", __assign({ className: "my-2 block text-gray-500" }, { children: highlighted.labels
                                         .filter(function (label) { return label.name !== '__name__'; })
                                         .map(function (label) {
-                                        return (_jsx("button", __assign({ type: "button", className: "inline-block rounded-lg text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400 px-2 py-1 text-xs font-bold mr-3", onClick: function () { return onLabelClick(label.name, label.value); } }, { children: _jsx(TextWithTooltip, { text: "".concat(label.name, "=\"").concat(label.value, "\""), maxTextLength: 37, id: "tooltip-".concat(label.name, "-").concat(label.value) }) }), label.name));
-                                    }) })), _jsx("span", __assign({ className: "block text-gray-500 text-xs" }, { children: "Hold shift and click label to add to query." }))] })) })) })) })) })) })));
+                                        return (_jsx("button", __assign({ type: "button", 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", onClick: function () { return onLabelClick(label.name, label.value); } }, { children: _jsx(TextWithTooltip, { text: "".concat(label.name, "=\"").concat(label.value, "\""), maxTextLength: 37, id: "tooltip-".concat(label.name, "-").concat(label.value) }) }), label.name));
+                                    }) })), _jsx("span", __assign({ className: "block text-xs text-gray-500" }, { children: "Hold shift and click label to add to query." }))] })) })) })) })) })) })));
 };
 export default MetricsTooltip;

package/dist/ProfileExplorer/index.js

@@ -104,7 +104,7 @@ var ProfileExplorerApp = function (_a) {
         return _jsx(_Fragment, { children: noDataPrompt });
     }
     if (profileTypesError !== undefined && profileTypesError !== null) {
-        return (_jsxs("div", __assign({ className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative", role: "alert" }, { children: [_jsx("strong", __assign({ className: "font-bold" }, { children: "Error! " })), _jsx("span", __assign({ className: "block sm:inline" }, { children: profileTypesError.message }))] })));
+        return (_jsxs("div", __assign({ className: "relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700", role: "alert" }, { children: [_jsx("strong", __assign({ className: "font-bold" }, { children: "Error! " })), _jsx("span", __assign({ className: "block sm:inline" }, { children: profileTypesError.message }))] })));
     }
     var sanitizedRange = sanitizeDateRange(time_selection_a, from_a, to_a);
     time_selection_a = sanitizedRange.time_selection_a;

package/dist/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.js

@@ -50,11 +50,11 @@ var ColorStackLegend = function (_a) {
     if (colorProfileName === 'default' || compareMode) {
         return _jsx(_Fragment, {});
     }
-    return (_jsx("div", __assign({ className: "flex flex-wrap gap-2 my-6 justify-center" }, { children: stackColorArray.map(function (_a) {
+    return (_jsx("div", __assign({ className: "my-6 flex flex-wrap justify-center gap-2" }, { children: stackColorArray.map(function (_a) {
             var feature = _a[0], color = _a[1];
             var filteringAllowed = feature !== EVERYTHING_ELSE;
             var isHighlighted = currentSearchString === feature;
-            return (_jsxs("div", __assign({ className: cx('flex gap-1 items-center text-ellipsis p-1 justify-between pr-2', {
+            return (_jsxs("div", __assign({ className: cx('flex items-center justify-between gap-1 text-ellipsis p-1 pr-2', {
                     'cursor-pointer': filteringAllowed,
                     'bg-gray-200 dark:bg-gray-800': isHighlighted,
                 }), onClick: function () {
@@ -66,7 +66,7 @@ var ColorStackLegend = function (_a) {
                         return;
                     }
                     setSearchString(feature);
-                } }, { children: [_jsxs("div", __assign({ className: "flex items-center" }, { children: [_jsx("div", { className: "w-4 h-4 mr-1 inline-block", style: { backgroundColor: color } }), _jsx("span", __assign({ className: "text-sm" }, { children: feature }))] })), isHighlighted ? (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: function (e) {
+                } }, { children: [_jsxs("div", __assign({ className: "flex items-center" }, { children: [_jsx("div", { className: "mr-1 inline-block h-4 w-4", style: { backgroundColor: color } }), _jsx("span", __assign({ className: "text-sm" }, { children: feature }))] })), isHighlighted ? (_jsx(Icon, { icon: "radix-icons:cross-circled", onClick: function (e) {
                             setSearchString('');
                             e.stopPropagation();
                         } })) : null] }), feature));

package/dist/ProfileMetricsGraph/index.js

@@ -118,15 +118,15 @@ var ProfileMetricsGraph = function (_a) {
         return _jsx(_Fragment, { children: loader });
     }
     if (error !== null) {
-        return (_jsxs("div", __assign({ className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative", role: "alert" }, { children: [_jsx("strong", __assign({ className: "font-bold" }, { children: "Error! " })), _jsx("span", __assign({ className: "block sm:inline" }, { children: error.message }))] })));
+        return (_jsxs("div", __assign({ className: "relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700", role: "alert" }, { children: [_jsx("strong", __assign({ className: "font-bold" }, { children: "Error! " })), _jsx("span", __assign({ className: "block sm:inline" }, { children: error.message }))] })));
     }
     var series = response === null || response === void 0 ? void 0 : response.series;
     if (series !== null && series !== undefined && (series === null || series === void 0 ? void 0 : series.length) > 0) {
         var handleSampleClick = function (timestamp, _value, labels) {
             onPointClick(timestamp, labels, queryExpression);
         };
-        return (_jsx("div", __assign({ className: "dark:bg-gray-700 rounded border-gray-300 dark:border-gray-500", style: { borderWidth: 1 } }, { children: _jsx(MetricsGraph, { data: series, from: from, to: to, profile: profile, setTimeRange: setTimeRange, onSampleClick: handleSampleClick, onLabelClick: addLabelMatcher, width: 0, sampleUnit: Query.parse(queryExpression).profileType().sampleUnit }) })));
+        return (_jsx("div", __assign({ className: "rounded border-gray-300 dark:border-gray-500 dark:bg-gray-700", style: { borderWidth: 1 } }, { children: _jsx(MetricsGraph, { data: series, from: from, to: to, profile: profile, setTimeRange: setTimeRange, onSampleClick: handleSampleClick, onLabelClick: addLabelMatcher, width: 0, sampleUnit: Query.parse(queryExpression).profileType().sampleUnit }) })));
     }
-    return (_jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", __assign({ className: "py-20 flex justify-center" }, { children: _jsx("p", __assign({ className: "m-0" }, { children: "No data found. Try a different query." })) })) })));
+    return (_jsx("div", __assign({ className: "grid grid-cols-1" }, { children: _jsx("div", __assign({ className: "flex justify-center py-20" }, { children: _jsx("p", __assign({ className: "m-0" }, { children: "No data found. Try a different query." })) })) })));
 };
 export default ProfileMetricsGraph;

package/dist/ProfileSelector/CompareButton.js

@@ -36,6 +36,6 @@ var CompareButton = function (_a) {
     var compareExplanation = 'Compare two profiles and see the relative difference between them more clearly.';
     if (disabled)
         return _jsx(_Fragment, {});
-    return (_jsxs("div", __assign({ ref: setComparePopperReferenceElement }, { children: [_jsx(Button, __assign({ color: "neutral", disabled: disabled, onClick: onClick, onMouseEnter: function () { return setCompareHover(true); }, onMouseLeave: function () { return setCompareHover(false); } }, { children: "Compare" })), compareHover && (_jsx("div", __assign({ ref: setComparePopperElement, style: styles.popper }, attributes.popper, { className: "z-50" }, { children: _jsx("div", __assign({ className: "flex" }, { children: _jsxs("div", __assign({ className: "relative mx-2" }, { children: [_jsx("svg", __assign({ className: "text-black h-1 w-full left-0", x: "0px", y: "0px", viewBox: "0 0 255 127.5" }, { children: _jsx("polygon", { className: "fill-current", points: "0,127.5 127.5,0 255,127.5" }) })), _jsx("div", __assign({ className: "bg-black text-white text-xs rounded py-2 px-3 right-0 w-40" }, { children: compareExplanation }))] })) })) })))] })));
+    return (_jsxs("div", __assign({ ref: setComparePopperReferenceElement }, { children: [_jsx(Button, __assign({ color: "neutral", disabled: disabled, onClick: onClick, onMouseEnter: function () { return setCompareHover(true); }, onMouseLeave: function () { return setCompareHover(false); } }, { children: "Compare" })), compareHover && (_jsx("div", __assign({ ref: setComparePopperElement, style: styles.popper }, attributes.popper, { className: "z-50" }, { children: _jsx("div", __assign({ className: "flex" }, { children: _jsxs("div", __assign({ className: "relative mx-2" }, { children: [_jsx("svg", __assign({ className: "left-0 h-1 w-full text-black", x: "0px", y: "0px", viewBox: "0 0 255 127.5" }, { children: _jsx("polygon", { className: "fill-current", points: "0,127.5 127.5,0 255,127.5" }) })), _jsx("div", __assign({ className: "right-0 w-40 rounded bg-black py-2 px-3 text-xs text-white" }, { children: compareExplanation }))] })) })) })))] })));
 };
 export default CompareButton;

package/dist/ProfileSelector/index.js

@@ -116,7 +116,7 @@ var ProfileSelector = function (_a) {
         queryExpressionString === '' ||
         queryExpressionString === '{}';
     var compareDisabled = selectedProfileName === '' || querySelection.expression === undefined;
-    return (_jsxs(Card, { children: [_jsxs(Card.Header, __assign({ className: "flex space-x-2 !items-center" }, { children: [_jsxs("div", __assign({ className: "flex flex-wrap w-full justify-start space-x-2 space-y-1 items-center" }, { children: [_jsx("div", __assign({ className: "ml-2 mt-1" }, { children: _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: error }) })), _jsx("div", __assign({ className: "w-full flex-1" }, { children: _jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query }) })), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), _jsxs(ButtonGroup, { children: [!searchDisabled && (_jsx(_Fragment, { children: !comparing && (_jsx(CompareButton, { disabled: compareDisabled, onClick: handleCompareClick })) })), _jsx(Button, __assign({ disabled: searchDisabled, onClick: function (e) {
+    return (_jsxs(Card, { children: [_jsxs(Card.Header, __assign({ className: "flex !items-center space-x-2" }, { children: [_jsxs("div", __assign({ className: "flex w-full flex-wrap items-center justify-start space-x-2 space-y-1" }, { children: [_jsx("div", __assign({ className: "ml-2 mt-1" }, { children: _jsx(ProfileTypeSelector, { profileTypesData: profileTypesData, loading: profileTypesLoading, selectedKey: selectedProfileName, onSelection: setProfileName, error: error }) })), _jsx("div", __assign({ className: "w-full flex-1" }, { children: _jsx(MatchersInput, { queryClient: queryClient, setMatchersString: setMatchersString, runQuery: setQueryExpression, currentQuery: query }) })), _jsx(DateTimeRangePicker, { onRangeSelection: setTimeRangeSelection, range: timeRangeSelection }), _jsxs(ButtonGroup, { children: [!searchDisabled && (_jsx(_Fragment, { children: !comparing && (_jsx(CompareButton, { disabled: compareDisabled, onClick: handleCompareClick })) })), _jsx(Button, __assign({ disabled: searchDisabled, onClick: function (e) {
                                             e.preventDefault();
                                             setQueryExpression();
                                         } }, { children: "Search" }))] })] })), _jsx("div", { children: comparing && _jsx(IconButton, { onClick: function () { return closeProfile(); }, icon: _jsx(CloseIcon, {}) }) })] })), _jsx(Card.Body, { children: querySelection.expression !== undefined &&

package/dist/ProfileView/VisualizationPanel.js

@@ -31,7 +31,7 @@ import ViewSelector from './ViewSelector';
 export var VisualizationPanel = React.memo(function VisualizationPanel(_a) {
     var dashboardItem = _a.dashboardItem, index = _a.index, isMultiPanelView = _a.isMultiPanelView, handleClosePanel = _a.handleClosePanel, navigateTo = _a.navigateTo, dragHandleProps = _a.dragHandleProps, getDashboardItemByType = _a.getDashboardItemByType;
     var _b = useState(_jsx(_Fragment, {})), actionButtons = _b[0], setActionButtons = _b[1];
-    return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "w-full flex justify-end pb-2 gap-2" }, { children: [_jsxs("div", __assign({ className: "w-full flex justify-between items-center" }, { children: [_jsxs("div", __assign({ className: "flex" }, { children: [_jsx("div", __assign({ className: cx(isMultiPanelView ? 'visible' : 'invisible', 'flex items-center') }, dragHandleProps, { children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) })), _jsx(_Fragment, { children: actionButtons })] })), _jsx(ViewSelector, { defaultValue: dashboardItem, navigateTo: navigateTo, position: index })] })), isMultiPanelView && (_jsx(IconButton, { onClick: function () { return handleClosePanel(dashboardItem); }, icon: _jsx(CloseIcon, {}) }))] })), getDashboardItemByType({
+    return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "flex w-full justify-end gap-2 pb-2" }, { children: [_jsxs("div", __assign({ className: "flex w-full items-center justify-between" }, { children: [_jsxs("div", __assign({ className: "flex" }, { children: [_jsx("div", __assign({ className: cx(isMultiPanelView ? 'visible' : 'invisible', 'flex items-center') }, dragHandleProps, { children: _jsx(Icon, { className: "text-xl", icon: "material-symbols:drag-indicator" }) })), _jsx(_Fragment, { children: actionButtons })] })), _jsx(ViewSelector, { defaultValue: dashboardItem, navigateTo: navigateTo, position: index })] })), isMultiPanelView && (_jsx(IconButton, { onClick: function () { return handleClosePanel(dashboardItem); }, icon: _jsx(CloseIcon, {}) }))] })), getDashboardItemByType({
                 type: dashboardItem,
                 isHalfScreen: isMultiPanelView,
                 setActionButtons: setActionButtons,

package/dist/ProfileView/index.js

@@ -194,7 +194,7 @@ export var ProfileView = function (_a) {
     }, [graphvizLoaded, callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data]);
     if ((flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.error) !== null) {
         console.error('Error: ', flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.error);
-        return (_jsxs("div", __assign({ className: "p-10 flex justify-center" }, { children: ["An error occurred: ", flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.error.message] })));
+        return (_jsxs("div", __assign({ className: "flex justify-center p-10" }, { children: ["An error occurred: ", flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.error.message] })));
     }
     var setNewCurPath = function (path) {
         if (!arrayEquals(curPath, path)) {
@@ -238,11 +238,11 @@ export var ProfileView = function (_a) {
             setDashboardItems(newDashboardItems);
         }
     };
-    return (_jsx(KeyDownProvider, { children: _jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex py-3 w-full" }, { children: [_jsxs("div", __assign({ className: "lg:w-1/2 flex space-x-4" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
+    return (_jsx(KeyDownProvider, { children: _jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex w-full py-3" }, { children: [_jsxs("div", __assign({ className: "flex space-x-4 lg:w-1/2" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource !== undefined && queryClient !== undefined ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
                                                         e.preventDefault();
                                                         onDownloadPProf();
-                                                    } }, { children: "Download pprof" }))] })), _jsx(FilterByFunctionButton, { navigateTo: navigateTo })] })), _jsx("div", __assign({ className: "flex ml-auto gap-2" }, { children: _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel...", primary: true, addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 }) }))] })), _jsx("div", __assign({ className: "w-full", ref: ref }, { children: isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsx(DragDropContext, __assign({ onDragEnd: onDragEnd }, { children: _jsx(Droppable, __assign({ droppableId: "droppable", direction: "horizontal" }, { children: function (provided) { return (_jsx("div", __assign({ ref: provided.innerRef, className: "flex space-x-4 justify-between w-full" }, provided.droppableProps, { children: dashboardItems.map(function (dashboardItem, index) {
-                                            return (_jsx(Draggable, __assign({ draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView }, { children: function (provided, snapshot) { return (_createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, { key: dashboardItem, className: cx('border dark:bg-gray-700 rounded border-gray-300 dark:border-gray-500 p-3', isMultiPanelView ? 'w-1/2' : 'w-full', snapshot.isDragging ? 'bg-gray-200' : 'bg-white') }),
+                                                    } }, { children: "Download pprof" }))] })), _jsx(FilterByFunctionButton, { navigateTo: navigateTo })] })), _jsx("div", __assign({ className: "ml-auto flex gap-2" }, { children: _jsx(ViewSelector, { defaultValue: "", navigateTo: navigateTo, position: -1, placeholderText: "Add panel...", primary: true, addView: true, disabled: isMultiPanelView || dashboardItems.length < 1 }) }))] })), _jsx("div", __assign({ className: "w-full", ref: ref }, { children: isLoaderVisible ? (_jsx(_Fragment, { children: loader })) : (_jsx(DragDropContext, __assign({ onDragEnd: onDragEnd }, { children: _jsx(Droppable, __assign({ droppableId: "droppable", direction: "horizontal" }, { children: function (provided) { return (_jsx("div", __assign({ ref: provided.innerRef, className: "flex w-full justify-between space-x-4" }, provided.droppableProps, { children: dashboardItems.map(function (dashboardItem, index) {
+                                            return (_jsx(Draggable, __assign({ draggableId: dashboardItem, index: index, isDragDisabled: !isMultiPanelView }, { children: function (provided, snapshot) { return (_createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, { key: dashboardItem, className: cx('rounded border border-gray-300 p-3 dark:border-gray-500 dark:bg-gray-700', isMultiPanelView ? 'w-1/2' : 'w-full', snapshot.isDragging ? 'bg-gray-200' : 'bg-white') }),
                                                     _jsx(VisualizationPanel, { handleClosePanel: handleClosePanel, isMultiPanelView: isMultiPanelView, dashboardItem: dashboardItem, getDashboardItemByType: getDashboardItemByType, dragHandleProps: provided.dragHandleProps, navigateTo: navigateTo, index: index }))); } }), dashboardItem));
                                         }) }))); } })) }))) }))] }) }) })) }));
 };

package/dist/TopTable/index.js

@@ -151,6 +151,6 @@ export var TopTable = React.memo(function TopTable(_a) {
     var total = top != null ? top.list.length : 0;
     if (total === 0 && !loading)
         return _jsx(_Fragment, { children: "Profile has no samples" });
-    return (_jsx("div", __assign({ className: "relative" }, { children: _jsx("div", __assign({ className: "w-full font-robotoMono h-[80vh] overflow-scroll" }, { children: _jsx(Table, { data: (_b = top === null || top === void 0 ? void 0 : top.list) !== null && _b !== void 0 ? _b : [], columns: columns, initialSorting: initialSorting, onRowClick: onRowClick, enableHighlighting: enableHighlighting, shouldHighlightRow: shouldHighlightRow, usePointerCursor: dashboardItems.length > 1 }) })) })));
+    return (_jsx("div", __assign({ className: "relative" }, { children: _jsx("div", __assign({ className: "font-robotoMono h-[80vh] w-full overflow-scroll" }, { children: _jsx(Table, { data: (_b = top === null || top === void 0 ? void 0 : top.list) !== null && _b !== void 0 ? _b : [], columns: columns, initialSorting: initialSorting, onRowClick: onRowClick, enableHighlighting: enableHighlighting, shouldHighlightRow: shouldHighlightRow, usePointerCursor: dashboardItems.length > 1 }) })) })));
 });
 export default TopTable;

package/dist/components/DiffLegend.js

@@ -31,10 +31,10 @@ var transparencyValues = [-100, -80, -60, -40, -20, 0, 20, 40, 60, 80, 100];
 var DiffLegendBar = function (_a) {
     var onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
     var isDarkMode = useAppSelector(selectDarkMode);
-    return (_jsx("div", __assign({ className: "flex items-center m-2" }, { children: transparencyValues.map(function (value) {
+    return (_jsx("div", __assign({ className: "m-2 flex items-center" }, { children: transparencyValues.map(function (value) {
             var valueAsPercentage = value / 100;
             var absoluteValue = Math.abs(valueAsPercentage);
-            return (_jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: "w-8 h-4", style: {
+            return (_jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: "h-4 w-8", style: {
                     backgroundColor: absoluteValue === 0
                         ? getNewSpanColor(isDarkMode)
                         : valueAsPercentage > 0
@@ -57,6 +57,6 @@ var DiffLegend = function () {
     var handleMouseLeave = function () {
         setShowLegendTooltip(false);
     };
-    return (_jsxs("div", __assign({ className: "mt-1 mb-2" }, { children: [_jsxs("div", __assign({ ref: setReferenceElement, className: "flex items-center justify-center" }, { children: [_jsx("span", { children: "Better" }), _jsx(DiffLegendBar, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }), _jsx("span", { children: "Worse" })] })), _jsx(Popover, __assign({ className: "relative" }, { children: function () { return (_jsx(Transition, __assign({ show: showLegendTooltip, as: Fragment, enter: "transition ease-out duration-200", enterFrom: "opacity-0 translate-y-1", enterTo: "opacity-100 translate-y-0", leave: "transition ease-in duration-150", leaveFrom: "opacity-100 translate-y-0", leaveTo: "opacity-0 translate-y-1" }, { children: _jsx(Popover.Panel, __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { children: _jsx("div", __assign({ className: "overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5" }, { children: _jsxs("div", __assign({ className: "p-4 bg-gray-50 dark:bg-gray-800" }, { children: [_jsx("div", { className: "flex items-center justify-center" }), _jsx("span", __assign({ className: "block text-sm text-gray-500 dark:text-gray-50" }, { children: "This is a differential icicle graph, where a purple-colored node means unchanged, and the darker the red, the worse the node got, and the darker the green, the better the node got." }))] })) })) })) }))); } }))] })));
+    return (_jsxs("div", __assign({ className: "mt-1 mb-2" }, { children: [_jsxs("div", __assign({ ref: setReferenceElement, className: "flex items-center justify-center" }, { children: [_jsx("span", { children: "Better" }), _jsx(DiffLegendBar, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }), _jsx("span", { children: "Worse" })] })), _jsx(Popover, __assign({ className: "relative" }, { children: function () { return (_jsx(Transition, __assign({ show: showLegendTooltip, as: Fragment, enter: "transition ease-out duration-200", enterFrom: "opacity-0 translate-y-1", enterTo: "opacity-100 translate-y-0", leave: "transition ease-in duration-150", leaveFrom: "opacity-100 translate-y-0", leaveTo: "opacity-0 translate-y-1" }, { children: _jsx(Popover.Panel, __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { children: _jsx("div", __assign({ className: "overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5" }, { children: _jsxs("div", __assign({ className: "bg-gray-50 p-4 dark:bg-gray-800" }, { children: [_jsx("div", { className: "flex items-center justify-center" }), _jsx("span", __assign({ className: "block text-sm text-gray-500 dark:text-gray-50" }, { children: "This is a differential icicle graph, where a purple-colored node means unchanged, and the darker the red, the worse the node got, and the darker the green, the better the node got." }))] })) })) })) }))); } }))] })));
 };
 export default DiffLegend;

package/dist/components/ProfileShareButton/ResultBox.js

@@ -44,6 +44,6 @@ var ResultBox = function (_a) {
         }
         timeoutHandle = setTimeout(function () { return setIsCopied(false); }, 3000);
     };
-    return (_jsxs("div", __assign({ className: cx('flex flex-row w-full', (_b = {}, _b[className] = (className === null || className === void 0 ? void 0 : className.length) > 0, _b)) }, { children: [_jsx("span", __assign({ className: "flex justify-center items-center border border-r-0 w-16 rounded-l" }, { children: _jsx(Icon, { icon: "ant-design:link-outlined" }) })), _jsx("input", { type: "text", className: "border text-sm bg-inherit w-full px-1 py-2 flex-grow", value: value, readOnly: true }), _jsx(CopyToClipboard, __assign({ text: value, onCopy: onCopy }, { children: _jsx(Button, __assign({ variant: "link", className: "border border-l-0 w-fit whitespace-nowrap p-4 items-center !text-indigo-600 dark:!text-indigo-400 rounded-none rounded-r" }, { children: isCopied ? 'Copied!' : 'Copy Link' })) }))] })));
+    return (_jsxs("div", __assign({ className: cx('flex w-full flex-row', (_b = {}, _b[className] = (className === null || className === void 0 ? void 0 : className.length) > 0, _b)) }, { children: [_jsx("span", __assign({ className: "flex w-16 items-center justify-center rounded-l border border-r-0" }, { children: _jsx(Icon, { icon: "ant-design:link-outlined" }) })), _jsx("input", { type: "text", className: "w-full flex-grow border bg-inherit px-1 py-2 text-sm", value: value, readOnly: true }), _jsx(CopyToClipboard, __assign({ text: value, onCopy: onCopy }, { children: _jsx(Button, __assign({ variant: "link", className: "w-fit items-center whitespace-nowrap rounded-none rounded-r border border-l-0 p-4 !text-indigo-600 dark:!text-indigo-400" }, { children: isCopied ? 'Copied!' : 'Copy Link' })) }))] })));
 };
 export default ResultBox;

package/dist/components/ProfileShareButton/index.js

@@ -106,10 +106,10 @@ var ProfileShareModal = function (_a) {
         setIsShared(false);
         closeModal();
     };
-    return (_jsx(Modal, __assign({ isOpen: isOpen, closeModal: onClose, title: "Share Profile", className: "w-[420px]" }, { children: _jsxs("form", __assign({ className: "py-2" }, { children: [_jsx("p", __assign({ className: "text-sm text-gray-500 dark:text-gray-300" }, { children: "Note: Shared profiles can be accessed by anyone with the link, even from people outside your organisation." })), !isShared || (error === null || error === void 0 ? void 0 : error.length) > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", __assign({ className: "text-sm text-gray-500 dark:text-gray-300 mt-3 mb-2" }, { children: "Enter a description (optional)" })), _jsx("textarea", { className: "border w-full text-gray-500 dark:text-gray-300 bg-inherit text-sm px-2 py-2", value: description, onChange: function (e) { return setDescription(e.target.value); } }), _jsx(Button, __assign({ className: "mt-4", onClick: function (e) {
+    return (_jsx(Modal, __assign({ isOpen: isOpen, closeModal: onClose, title: "Share Profile", className: "w-[420px]" }, { children: _jsxs("form", __assign({ className: "py-2" }, { children: [_jsx("p", __assign({ className: "text-sm text-gray-500 dark:text-gray-300" }, { children: "Note: Shared profiles can be accessed by anyone with the link, even from people outside your organisation." })), !isShared || (error === null || error === void 0 ? void 0 : error.length) > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", __assign({ className: "mt-3 mb-2 text-sm text-gray-500 dark:text-gray-300" }, { children: "Enter a description (optional)" })), _jsx("textarea", { className: "w-full border bg-inherit px-2 py-2 text-sm text-gray-500 dark:text-gray-300", value: description, onChange: function (e) { return setDescription(e.target.value); } }), _jsx(Button, __assign({ className: "mt-4", onClick: function (e) {
                                 e.preventDefault();
                                 void handleSubmit();
-                            }, disabled: loading || !isFormDataValid(), type: "submit" }, { children: loading ? 'Sharing' : 'Share' })), error !== '' ? _jsx("p", { children: "Something went wrong please try again" }) : null] })) : (_jsxs(_Fragment, { children: [_jsx(ResultBox, { value: sharedLink, className: "mt-4" }), _jsx("div", __assign({ className: "flex justify-center mt-8" }, { children: _jsx(Button, __assign({ variant: "neutral", className: "w-fit", onClick: onClose }, { children: "Close" })) }))] }))] })) })));
+                            }, disabled: loading || !isFormDataValid(), type: "submit" }, { children: loading ? 'Sharing' : 'Share' })), error !== '' ? _jsx("p", { children: "Something went wrong please try again" }) : null] })) : (_jsxs(_Fragment, { children: [_jsx(ResultBox, { value: sharedLink, className: "mt-4" }), _jsx("div", __assign({ className: "mt-8 flex justify-center" }, { children: _jsx(Button, __assign({ variant: "neutral", className: "w-fit", onClick: onClose }, { children: "Close" })) }))] }))] })) })));
 };
 var ProfileShareButton = function (_a) {
     var queryRequest = _a.queryRequest, queryClient = _a.queryClient, _b = _a.disabled, disabled = _b === void 0 ? false : _b;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.152",
+  "version": "0.16.154",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.69",
-    "@parca/components": "^0.16.123",
+    "@parca/components": "^0.16.125",
     "@parca/dynamicsize": "^0.16.54",
     "@parca/hooks": "^0.0.2",
     "@parca/parser": "^0.16.55",
@@ -46,5 +46,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "19debe37dc7ec224ad92c4bfd9614081e61cfc04"
+  "gitHead": "51ca8c627666f3861f4a76acc829882fd8ad6677"
 }

package/src/Callgraph/index.tsx

@@ -125,7 +125,7 @@ const Callgraph = ({data, svgString, sampleUnit, width}: Props): JSX.Element =>
     view.translation.y !== originalView.translation.y;
 
   return (
-    <div className="w-full relative">
+    <div className="relative w-full">
       <div ref={containerRef} className="w-full overflow-hidden">
         <MapInteractionCSS
           showControls
@@ -156,7 +156,7 @@ const Callgraph = ({data, svgString, sampleUnit, width}: Props): JSX.Element =>
       <div
         className={cx(
           dashboardItems.length > 1 ? 'left-[25px]' : 'left-0',
-          'w-auto absolute top-[-46px]'
+          'absolute top-[-46px] w-auto'
         )}
       >
         <Button

package/src/GraphTooltip/ExpandOnHoverValue.tsx

@@ -18,11 +18,11 @@ interface Props {
 
 export const ExpandOnHover = ({value, displayValue}: Props): JSX.Element => {
   return (
-    <div className="relative group w-full">
-      <div className="text-ellipsis w-full overflow-hidden whitespace-nowrap">
+    <div className="group relative w-full">
+      <div className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
         {displayValue ?? value}
       </div>
-      <div className="group-hover:flex hidden absolute -inset-2 max-w-[500px] whitespace-normal h-fit bg-gray-50 dark:bg-gray-900 shadow-[0_0_10px_2px_rgba(0,0,0,0.3)] rounded p-2 break-all">
+      <div className="absolute -inset-2 hidden h-fit max-w-[500px] whitespace-normal break-all rounded bg-gray-50 p-2 shadow-[0_0_10px_2px_rgba(0,0,0,0.3)] group-hover:flex dark:bg-gray-900">
         {value}
       </div>
     </div>

package/src/GraphTooltip/index.tsx

@@ -37,7 +37,7 @@ import {hexifyAddress, truncateString, truncateStringReverse} from '../';
 import {ExpandOnHover} from './ExpandOnHoverValue';
 
 const NoData = (): JSX.Element => {
-  return <span className="rounded bg-gray-200 dark:bg-gray-800 px-2">Not available</span>;
+  return <span className="rounded bg-gray-200 px-2 dark:bg-gray-800">Not available</span>;
 };
 
 interface ExtendedCallgraphNodeMeta extends CallgraphNodeMeta {
@@ -180,7 +180,7 @@ const TooltipMetaInfo = ({
             <NoData />
           ) : (
             <CopyToClipboard onCopy={onCopy} text={file}>
-              <button className="cursor-pointer text-left whitespace-nowrap">
+              <button className="cursor-pointer whitespace-nowrap text-left">
                 <ExpandOnHover value={file} displayValue={truncateStringReverse(file, 40)} />
               </button>
             </CopyToClipboard>
@@ -294,12 +294,12 @@ export const GraphTooltipContent = ({
   };
 
   return (
-    <div className={`text-sm flex ${isFixed ? 'w-full' : ''}`}>
+    <div className={`flex text-sm ${isFixed ? 'w-full' : ''}`}>
       <div className={`m-auto w-full ${isFixed ? 'w-full' : ''}`}>
-        <div className="border border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg min-h-52 w-[500px] flex justify-between flex-col">
+        <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">
           <div className="flex flex-row">
             <div className="mx-2">
-              <div className="font-semibold break-all h-10 flex items-center">
+              <div className="flex h-10 items-center break-all font-semibold">
                 {hoveringNode.meta === undefined ? (
                   <p>root</p>
                 ) : (
@@ -331,7 +331,7 @@ export const GraphTooltipContent = ({
                   </>
                 )}
               </div>
-              <table className="table-fixed pr-0 text-gray-700 dark:text-gray-300 my-2 w-full">
+              <table className="my-2 w-full table-fixed pr-0 text-gray-700 dark:text-gray-300">
                 <tbody>
                   <tr>
                     <td className="w-1/4">Cumulative</td>
@@ -370,7 +370,7 @@ export const GraphTooltipContent = ({
               </table>
             </div>
           </div>
-          <span className="block text-gray-500 text-xs mx-2">
+          <span className="mx-2 block text-xs text-gray-500">
             {isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.'}
           </span>
         </div>

package/src/MatchersInput/SuggestionItem.tsx

@@ -40,8 +40,8 @@ const SuggestionItem = ({
 
   return (
     <div
-      className={cx('cursor-default select-none relative py-2 pl-3 pr-9', {
-        'text-white bg-indigo-600': isHighlighted,
+      className={cx('relative cursor-default select-none py-2 pl-3 pr-9', {
+        'bg-indigo-600 text-white': isHighlighted,
       })}
       onMouseOver={() => onHighlight()}
       onClick={() => onApplySuggestion()}

package/src/MatchersInput/SuggestionsList.tsx

@@ -222,7 +222,7 @@ const SuggestionsList = ({
           >
             <div
               style={{width: inputRef?.offsetWidth}}
-              className="absolute z-10 max-h-[400px] mt-1 bg-gray-50 dark:bg-gray-900 shadow-lg rounded-md text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+              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"
             >
               {isLabelNamesLoading ? (
                 <LoadingSpinner />

package/src/MatchersInput/index.tsx

@@ -193,11 +193,11 @@ const MatchersInput = ({
   const profileSelected = currentQuery.profileName() === '';
 
   return (
-    <div className="font-mono flex-1 w-full min-w-[300px]">
+    <div className="w-full min-w-[300px] flex-1 font-mono">
       <TextareaAutosize
         ref={inputRef}
         className={cx(
-          'bg-gray-50 dark:bg-gray-900 focus:ring-indigo-800 flex-1 block w-full px-2 py-2 text-sm outline-none rounded',
+          'block w-full flex-1 rounded bg-gray-50 px-2 py-2 text-sm outline-none focus:ring-indigo-800 dark:bg-gray-900',
           profileSelected && 'cursor-not-allowed'
         )}
         placeholder={

package/src/MetricsGraph/MetricsTooltip/index.tsx

@@ -109,13 +109,13 @@ const MetricsTooltip = ({
       <div className="flex max-w-md">
         <div className="m-auto">
           <div
-            className="border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg opacity-90"
+            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}}
           >
             <div className="flex flex-row">
               <div className="ml-2 mr-6">
                 <span className="font-semibold">{highlightedNameLabel.value}</span>
-                <span className="block text-gray-700 dark:text-gray-300 my-2">
+                <span className="my-2 block text-gray-700 dark:text-gray-300">
                   <table className="table-auto">
                     <tbody>
                       <tr>
@@ -147,7 +147,7 @@ const MetricsTooltip = ({
                     </tbody>
                   </table>
                 </span>
-                <span className="block text-gray-500 my-2">
+                <span className="my-2 block text-gray-500">
                   {highlighted.labels
                     .filter((label: Label) => label.name !== '__name__')
                     .map(function (label: Label) {
@@ -155,7 +155,7 @@ const MetricsTooltip = ({
                         <button
                           key={label.name}
                           type="button"
-                          className="inline-block rounded-lg text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-400 px-2 py-1 text-xs font-bold mr-3"
+                          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"
                           onClick={() => onLabelClick(label.name, label.value)}
                         >
                           <TextWithTooltip
@@ -167,7 +167,7 @@ const MetricsTooltip = ({
                       );
                     })}
                 </span>
-                <span className="block text-gray-500 text-xs">
+                <span className="block text-xs text-gray-500">
                   Hold shift and click label to add to query.
                 </span>
               </div>

package/src/ProfileExplorer/index.tsx

@@ -168,7 +168,7 @@ const ProfileExplorerApp = ({
   if (profileTypesError !== undefined && profileTypesError !== null) {
     return (
       <div
-        className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+        className="relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
         role="alert"
       >
         <strong className="font-bold">Error! </strong>

package/src/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.tsx

@@ -50,14 +50,14 @@ const ColorStackLegend = ({navigateTo, compareMode = false}: Props): JSX.Element
   }
 
   return (
-    <div className="flex flex-wrap gap-2 my-6 justify-center">
+    <div className="my-6 flex flex-wrap justify-center gap-2">
       {stackColorArray.map(([feature, color]) => {
         const filteringAllowed = feature !== EVERYTHING_ELSE;
         const isHighlighted = currentSearchString === feature;
         return (
           <div
             key={feature}
-            className={cx('flex gap-1 items-center text-ellipsis p-1 justify-between pr-2', {
+            className={cx('flex items-center justify-between gap-1 text-ellipsis p-1 pr-2', {
               'cursor-pointer': filteringAllowed,
               'bg-gray-200 dark:bg-gray-800': isHighlighted,
             })}
@@ -73,7 +73,7 @@ const ColorStackLegend = ({navigateTo, compareMode = false}: Props): JSX.Element
             }}
           >
             <div className="flex items-center">
-              <div className="w-4 h-4 mr-1 inline-block" style={{backgroundColor: color}} />
+              <div className="mr-1 inline-block h-4 w-4" style={{backgroundColor: color}} />
               <span className="text-sm">{feature}</span>
             </div>
             {isHighlighted ? (

package/src/ProfileMetricsGraph/index.tsx

@@ -118,7 +118,7 @@ const ProfileMetricsGraph = ({
   if (error !== null) {
     return (
       <div
-        className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
+        className="relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
         role="alert"
       >
         <strong className="font-bold">Error! </strong>
@@ -135,7 +135,7 @@ const ProfileMetricsGraph = ({
 
     return (
       <div
-        className="dark:bg-gray-700 rounded border-gray-300 dark:border-gray-500"
+        className="rounded border-gray-300 dark:border-gray-500 dark:bg-gray-700"
         style={{borderWidth: 1}}
       >
         <MetricsGraph
@@ -154,7 +154,7 @@ const ProfileMetricsGraph = ({
   }
   return (
     <div className="grid grid-cols-1">
-      <div className="py-20 flex justify-center">
+      <div className="flex justify-center py-20">
         <p className="m-0">No data found. Try a different query.</p>
       </div>
     </div>

package/src/ProfileSelector/CompareButton.tsx

@@ -57,10 +57,10 @@ const CompareButton = ({
         >
           <div className="flex">
             <div className="relative mx-2">
-              <svg className="text-black h-1 w-full left-0" x="0px" y="0px" viewBox="0 0 255 127.5">
+              <svg className="left-0 h-1 w-full text-black" x="0px" y="0px" viewBox="0 0 255 127.5">
                 <polygon className="fill-current" points="0,127.5 127.5,0 255,127.5" />
               </svg>
-              <div className="bg-black text-white text-xs rounded py-2 px-3 right-0 w-40">
+              <div className="right-0 w-40 rounded bg-black py-2 px-3 text-xs text-white">
                 {compareExplanation}
               </div>
             </div>

package/src/ProfileSelector/index.tsx

@@ -190,8 +190,8 @@ const ProfileSelector = ({
 
   return (
     <Card>
-      <Card.Header className="flex space-x-2 !items-center">
-        <div className="flex flex-wrap w-full justify-start space-x-2 space-y-1 items-center">
+      <Card.Header className="flex !items-center space-x-2">
+        <div className="flex w-full flex-wrap items-center justify-start space-x-2 space-y-1">
           <div className="ml-2 mt-1">
             <ProfileTypeSelector
               profileTypesData={profileTypesData}

package/src/ProfileView/VisualizationPanel.tsx

@@ -50,8 +50,8 @@ export const VisualizationPanel = React.memo(function VisualizationPanel({
 
   return (
     <>
-      <div className="w-full flex justify-end pb-2 gap-2">
-        <div className="w-full flex justify-between items-center">
+      <div className="flex w-full justify-end gap-2 pb-2">
+        <div className="flex w-full items-center justify-between">
           <div className="flex">
             <div
               className={cx(isMultiPanelView ? 'visible' : 'invisible', 'flex items-center')}

package/src/ProfileView/index.tsx

@@ -199,7 +199,7 @@ export const ProfileView = ({
   if (flamegraphData?.error !== null) {
     console.error('Error: ', flamegraphData?.error);
     return (
-      <div className="p-10 flex justify-center">
+      <div className="flex justify-center p-10">
         An error occurred: {flamegraphData?.error.message}
       </div>
     );
@@ -307,8 +307,8 @@ export const ProfileView = ({
       <div className="py-3">
         <Card>
           <Card.Body>
-            <div className="flex py-3 w-full">
-              <div className="lg:w-1/2 flex space-x-4">
+            <div className="flex w-full py-3">
+              <div className="flex space-x-4 lg:w-1/2">
                 <div className="flex space-x-1">
                   {profileSource !== undefined && queryClient !== undefined ? (
                     <ProfileShareButton
@@ -330,7 +330,7 @@ export const ProfileView = ({
                 <FilterByFunctionButton navigateTo={navigateTo} />
               </div>
 
-              <div className="flex ml-auto gap-2">
+              <div className="ml-auto flex gap-2">
                 <ViewSelector
                   defaultValue=""
                   navigateTo={navigateTo}
@@ -352,7 +352,7 @@ export const ProfileView = ({
                     {provided => (
                       <div
                         ref={provided.innerRef}
-                        className="flex space-x-4 justify-between w-full"
+                        className="flex w-full justify-between space-x-4"
                         {...provided.droppableProps}
                       >
                         {dashboardItems.map((dashboardItem, index) => {
@@ -369,7 +369,7 @@ export const ProfileView = ({
                                   {...provided.draggableProps}
                                   key={dashboardItem}
                                   className={cx(
-                                    'border dark:bg-gray-700 rounded border-gray-300 dark:border-gray-500 p-3',
+                                    'rounded border border-gray-300 p-3 dark:border-gray-500 dark:bg-gray-700',
                                     isMultiPanelView ? 'w-1/2' : 'w-full',
                                     snapshot.isDragging ? 'bg-gray-200' : 'bg-white'
                                   )}

package/src/TopTable/index.tsx

@@ -224,7 +224,7 @@ export const TopTable = React.memo(function TopTable({
 
   return (
     <div className="relative">
-      <div className="w-full font-robotoMono h-[80vh] overflow-scroll">
+      <div className="font-robotoMono h-[80vh] w-full overflow-scroll">
         <Table
           data={top?.list ?? []}
           columns={columns}

package/src/components/DiffLegend.tsx

@@ -31,7 +31,7 @@ const DiffLegendBar = ({
   const isDarkMode = useAppSelector(selectDarkMode);
 
   return (
-    <div className="flex items-center m-2">
+    <div className="m-2 flex items-center">
       {transparencyValues.map(value => {
         const valueAsPercentage = value / 100;
         const absoluteValue = Math.abs(valueAsPercentage);
@@ -39,7 +39,7 @@ const DiffLegendBar = ({
           <div
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
-            className="w-8 h-4"
+            className="h-4 w-8"
             key={valueAsPercentage}
             style={{
               backgroundColor:
@@ -94,7 +94,7 @@ const DiffLegend = (): JSX.Element => {
           >
             <Popover.Panel ref={setPopperElement} style={styles.popper} {...attributes.popper}>
               <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
-                <div className="p-4 bg-gray-50 dark:bg-gray-800">
+                <div className="bg-gray-50 p-4 dark:bg-gray-800">
                   <div className="flex items-center justify-center"></div>
                   <span className="block text-sm text-gray-500 dark:text-gray-50">
                     This is a differential icicle graph, where a purple-colored node means

package/src/components/ProfileShareButton/ResultBox.tsx

@@ -43,20 +43,20 @@ const ResultBox = ({value, className = ''}: Props): JSX.Element => {
   };
 
   return (
-    <div className={cx('flex flex-row w-full', {[className]: className?.length > 0})}>
-      <span className="flex justify-center items-center border border-r-0 w-16 rounded-l">
+    <div className={cx('flex w-full flex-row', {[className]: className?.length > 0})}>
+      <span className="flex w-16 items-center justify-center rounded-l border border-r-0">
         <Icon icon="ant-design:link-outlined" />
       </span>
       <input
         type="text"
-        className="border text-sm bg-inherit w-full px-1 py-2 flex-grow"
+        className="w-full flex-grow border bg-inherit px-1 py-2 text-sm"
         value={value}
         readOnly
       />
       <CopyToClipboard text={value} onCopy={onCopy}>
         <Button
           variant="link"
-          className="border border-l-0 w-fit whitespace-nowrap p-4 items-center !text-indigo-600 dark:!text-indigo-400 rounded-none rounded-r"
+          className="w-fit items-center whitespace-nowrap rounded-none rounded-r border border-l-0 p-4 !text-indigo-600 dark:!text-indigo-400"
         >
           {isCopied ? 'Copied!' : 'Copy Link'}
         </Button>

package/src/components/ProfileShareButton/index.tsx

@@ -85,11 +85,11 @@ const ProfileShareModal = ({
         </p>
         {!isShared || error?.length > 0 ? (
           <>
-            <p className="text-sm text-gray-500 dark:text-gray-300 mt-3 mb-2">
+            <p className="mt-3 mb-2 text-sm text-gray-500 dark:text-gray-300">
               Enter a description (optional)
             </p>
             <textarea
-              className="border w-full text-gray-500 dark:text-gray-300 bg-inherit text-sm px-2 py-2"
+              className="w-full border bg-inherit px-2 py-2 text-sm text-gray-500 dark:text-gray-300"
               value={description}
               onChange={e => setDescription(e.target.value)}
             ></textarea>
@@ -109,7 +109,7 @@ const ProfileShareModal = ({
         ) : (
           <>
             <ResultBox value={sharedLink} className="mt-4" />
-            <div className="flex justify-center mt-8">
+            <div className="mt-8 flex justify-center">
               <Button variant="neutral" className="w-fit" onClick={onClose}>
                 Close
               </Button>

package/src/ProfileIcicleGraph/ProfileIcicleGraph.stories.mdx

@@ -1,33 +0,0 @@
-import {action} from '@storybook/addon-actions';
-import {Canvas, Meta, Story} from '@storybook/addon-docs';
-
-import {QueryResponse} from '@parca/client';
-
-import ProfileIcicleGraph from './index';
-import queryResponseDiff from '../testdata/fg-diff.json';
-import queryResponseSimple from '../testdata/fg-simple.json';
-
-<Meta title="template/ProfileIcicleGraph" component={ProfileIcicleGraph} />
-
-# ProfileIcicleGraph
-
-ProfileIcicleGraph documentation.
-
-<Canvas>
-  <Story
-    name="Simple"
-    args={{
-      graph: queryResponseSimple.flamegraph,
-    }}
-  >
-    {args => <ProfileIcicleGraph {...args} />}
-  </Story>
-  <Story
-    name="Diff"
-    args={{
-      graph: queryResponseDiff.flamegraph,
-    }}
-  >
-    {args => <ProfileIcicleGraph {...args} />}
-  </Story>
-</Canvas>