@parca/profile 0.16.454 → 0.16.455

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.455](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.454...@parca/profile@0.16.455) (2024-12-11)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.454](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.453...@parca/profile@0.16.454) (2024-12-10)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileView/components/ActionButtons/GroupByDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupByDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ActionButtons/GroupByDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAoQzD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoDnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"GroupByDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ActionButtons/GroupByDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAuRzD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoDnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ProfileView/components/ActionButtons/GroupByDropdown.js

@@ -95,6 +95,20 @@ const LabelSelector = ({ labels, groupBy, setGroupByLabels, isOpen, labelsButton
 };
 const GroupByDropdown = ({ groupBy, toggleGroupBy, onLabelClick, labelsButtonRef, }) => {
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (isDropdownOpen &&
+                dropdownRef.current != null &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsDropdownOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isDropdownOpen]);
     const label = groupBy.length === 0
         ? 'Nothing'
         : groupBy.length === 1
@@ -103,7 +117,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 by" }), _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))) })] }))] })] }) }) }) }) })] })] }));
+    return (_jsxs("div", { className: "relative", ref: dropdownRef, children: [_jsx("label", { className: "text-sm", children: "Group by" }), _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.454",
+  "version": "0.16.455",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -74,5 +74,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "f9348e9e3272c0d04c9efdb6602c49747dbae8a0"
+  "gitHead": "54e578f0c45ee0ae69e79306b03315c76a1227ed"
 }

package/src/ProfileView/components/ActionButtons/GroupByDropdown.tsx

@@ -167,6 +167,25 @@ const GroupByDropdown: React.FC<GroupByDropdownProps> = ({
   labelsButtonRef,
 }) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent): void => {
+      if (
+        isDropdownOpen &&
+        dropdownRef.current != null &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isDropdownOpen]);
+
   const label =
     groupBy.length === 0
       ? 'Nothing'
@@ -179,7 +198,7 @@ const GroupByDropdown: React.FC<GroupByDropdownProps> = ({
     .map(l => l.slice(FIELD_LABELS.length + 1));
 
   return (
-    <div className="relative">
+    <div className="relative" ref={dropdownRef}>
       <label className="text-sm">Group by</label>
       <div className="relative text-left" id="h-group-by-filter">
         <Button