@parca/profile 0.16.437 → 0.16.438

package/CHANGELOG.md

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

package/dist/components/ActionButtons/GroupByDropdown.js

@@ -63,7 +63,7 @@ const LabelSelector = ({ labels, groupBy, setGroupByLabels, isOpen, labelsButton
     return (_jsx("div", { className: "absolute w-64 ml-4 z-20", style: {
             top: `${position.top}px`,
             left: `${position.left}px`,
-        }, children: _jsx(Select, { isMulti: true, name: "labels", options: labels.map(label => ({ label, value: `${FIELD_LABELS}.${label}` })), className: "parca-select-container text-sm w-full border-gray-300 border rounded-md", classNamePrefix: "parca-select parca-groupby-label", value: groupBy
+        }, children: _jsx(Select, { isMulti: true, name: "labels", options: labels.map(label => ({ label, value: `${FIELD_LABELS}.${label}` })), className: "parca-select-container text-sm w-full border-gray-300 border rounded-md", classNamePrefix: "parca-select", value: groupBy
                 .filter(l => l.startsWith(FIELD_LABELS))
                 .map(l => ({ value: l, label: l.slice(FIELD_LABELS.length + 1) })), onChange: newValue => {
                 setGroupByLabels(newValue.map(option => option.value));
@@ -103,7 +103,7 @@ const GroupByDropdown = ({ groupBy, toggleGroupBy, onLabelClick, labelsButtonRef
     const selectedLabels = groupBy
         .filter(l => l.startsWith(FIELD_LABELS))
         .map(l => l.slice(FIELD_LABELS.length + 1));
-    return (_jsxs("div", { className: "relative", children: [_jsx("label", { className: "text-sm", children: "Group" }), _jsxs("div", { className: "relative text-left", id: "h-group-by-filter", children: [_jsxs(Button, { variant: "neutral", onClick: () => setIsDropdownOpen(!isDropdownOpen), className: "relative w-max cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "block overflow-x-hidden text-ellipsis", children: label }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }), _jsx(Transition, { as: "div", leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", show: isDropdownOpen, children: _jsx("div", { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsxs("div", { className: "space-y-5", children: [groupByOptions.map(({ value, label, description, disabled }) => (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: value, name: value, type: "checkbox", disabled: disabled, className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: groupBy.includes(value), onChange: () => toggleGroupBy(value) }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: value, className: "font-medium text-gray-900 dark:text-gray-200", children: label }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: description })] })] }, value))), _jsxs("div", { className: "ml-7 flex flex-col items-start text-sm leading-6 cursor-pointer", onClick: onLabelClick, ref: labelsButtonRef, children: [_jsxs("div", { className: "flex justify-between w-full items-center", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium text-gray-900 dark:text-gray-200", children: "Labels" }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: "Stacktraces are grouped by labels." })] }), _jsx(Icon, { icon: "flowbite:caret-right-solid", className: "h-[14px] w-[14px]" })] }), selectedLabels.length > 0 && (_jsxs("div", { className: "flex gap-2 flex-wrap", children: [_jsx("span", { className: "text-gray-500 dark:text-gray-200", children: "Selected labels:" }), _jsx("div", { className: "flex", children: selectedLabels.map(label => (_jsx("span", { className: "mr-2 px-3 py-1 text-xs text-gray-700 dark:text-gray-200 bg-gray-200 rounded-md dark:bg-gray-900", children: label }, label))) })] }))] })] }) }) }) }) })] })] }));
+    return (_jsxs("div", { className: "relative", children: [_jsx("label", { className: "text-sm", children: "Group" }), _jsxs("div", { className: "relative text-left", id: "h-group-by-filter", children: [_jsxs(Button, { variant: "neutral", onClick: () => setIsDropdownOpen(!isDropdownOpen), className: "relative w-max cursor-default rounded-md border bg-white py-2 pl-3 pr-[1.7rem] text-left text-sm shadow-sm dark:border-gray-600 dark:bg-gray-900 sm:text-sm", children: [_jsx("span", { className: "block overflow-x-hidden text-ellipsis", children: label }), _jsx("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-gray-400", children: _jsx(Icon, { icon: "heroicons:chevron-down-20-solid", "aria-hidden": "true" }) })] }), _jsx(Transition, { as: "div", leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", show: isDropdownOpen, children: _jsx("div", { className: "absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm", children: _jsx("div", { className: "p-4", children: _jsx("fieldset", { children: _jsxs("div", { className: "space-y-5", children: [groupByOptions.map(({ value, label, description, disabled }) => (_jsxs("div", { className: "relative flex items-start", children: [_jsx("div", { className: "flex h-6 items-center", children: _jsx("input", { id: value, name: value, type: "checkbox", disabled: disabled, className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600", checked: groupBy.includes(value), onChange: () => toggleGroupBy(value) }) }), _jsxs("div", { className: "ml-3 text-sm leading-6", children: [_jsx("label", { htmlFor: value, className: "font-medium text-gray-900 dark:text-gray-200", children: label }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: description })] })] }, value))), _jsxs("div", { className: "ml-7 flex flex-col items-start text-sm leading-6 cursor-pointer", onClick: onLabelClick, ref: labelsButtonRef, children: [_jsxs("div", { className: "flex justify-between w-full items-center", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium text-gray-900 dark:text-gray-200", children: "Labels" }), _jsx("p", { className: "text-gray-500 dark:text-gray-400", children: "Stacktraces are grouped by labels." })] }), _jsx(Icon, { icon: "flowbite:caret-right-solid", className: "h-[14px] w-[14px]" })] }), selectedLabels.length > 0 && (_jsxs("div", { className: "flex gap-2 flex-wrap", children: [_jsx("span", { className: "text-gray-500 dark:text-gray-200", children: "Selected labels:" }), _jsx("div", { className: "flex flex-wrap gap-3", children: selectedLabels.map(label => (_jsx("span", { className: "mr-2 px-3 py-1 text-xs text-gray-700 dark:text-gray-200 bg-gray-200 rounded-md dark:bg-gray-800", children: label }, label))) })] }))] })] }) }) }) }) })] })] }));
 };
 const GroupByControls = ({ groupBy, labels, toggleGroupBy, setGroupByLabels, }) => {
     const [isLabelSelectorOpen, setIsLabelSelectorOpen] = useState(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.437",
+  "version": "0.16.438",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -73,5 +73,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "6e8c7d9911d6437b10b0448d81f80f093d5e157f"
+  "gitHead": "d9fabcf1e4a4b3104485baf014941de951390eaa"
 }

package/src/components/ActionButtons/GroupByDropdown.tsx

@@ -121,7 +121,7 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
         name="labels"
         options={labels.map(label => ({label, value: `${FIELD_LABELS}.${label}`}))}
         className="parca-select-container text-sm w-full border-gray-300 border rounded-md"
-        classNamePrefix="parca-select parca-groupby-label"
+        classNamePrefix="parca-select"
         value={groupBy
           .filter(l => l.startsWith(FIELD_LABELS))
           .map(l => ({value: l, label: l.slice(FIELD_LABELS.length + 1)}))}
@@ -248,11 +248,11 @@ const GroupByDropdown: React.FC<GroupByDropdownProps> = ({
                       <div className="flex gap-2 flex-wrap">
                         <span className="text-gray-500 dark:text-gray-200">Selected labels:</span>
 
-                        <div className="flex">
+                        <div className="flex flex-wrap gap-3">
                           {selectedLabels.map(label => (
                             <span
                               key={label}
-                              className="mr-2 px-3 py-1 text-xs text-gray-700 dark:text-gray-200 bg-gray-200 rounded-md dark:bg-gray-900"
+                              className="mr-2 px-3 py-1 text-xs text-gray-700 dark:text-gray-200 bg-gray-200 rounded-md dark:bg-gray-800"
                             >
                               {label}
                             </span>