@parca/profile 0.17.10 → 0.17.11

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.17.11](https://github.com/parca-dev/parca/compare/@parca/profile@0.17.10...@parca/profile@0.17.11) (2025-06-16)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.17.10 (2025-06-14)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileIcicleGraph/IcicleGraphArrow/TextWithEllipsis.js

@@ -12,7 +12,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useEffect, useRef, useState } from 'react';
-import { USER_PREFERENCES, useUserPreference } from '@parca/hooks';
+import { useURLState } from '@parca/components';
 function calculateTruncatedText(text, textElement, maxWidth) {
     // Create a temporary element for measurement
     const tempElement = textElement.cloneNode();
@@ -47,7 +47,8 @@ function calculateTruncatedText(text, textElement, maxWidth) {
 function TextWithEllipsis({ text, x, y, width }) {
     const textRef = useRef(null);
     const [displayText, setDisplayText] = useState(text);
-    const [showFunctionNameFromLeft] = useUserPreference(USER_PREFERENCES.SHOW_FUNCTION_NAME_FROM_LEFT.key);
+    const [alignFunctionName] = useURLState('align_function_name');
+    const showFunctionNameFromLeft = alignFunctionName === 'left' || alignFunctionName === undefined;
     useEffect(() => {
         const textElement = textRef.current;
         if (textElement === null)

package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiLevelDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AA6H1C,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAsJzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"MultiLevelDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AA6H1C,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkKzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.js

@@ -66,6 +66,8 @@ const MultiLevelDropdown = ({ onSelect, profileType }) => {
     const [invertStack = '', setInvertStack] = useURLState('invert_call_stack');
     const isInvert = invertStack === 'true';
     const isColorStackLegendEnabled = colorStackLegend === 'true';
+    const [alignFunctionName, setAlignFunctionName] = useURLState('align_function_name');
+    const isLeftAligned = alignFunctionName === 'left' || alignFunctionName === undefined;
     // By default, we want delta profiles (CPU) to be relatively compared.
     // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
     const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
@@ -114,6 +116,15 @@ const MultiLevelDropdown = ({ onSelect, profileType }) => {
             hide: false,
             icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending',
         },
+        {
+            label: isLeftAligned ? 'Right-align function names' : 'Left-align function names',
+            onclick: () => setAlignFunctionName(isLeftAligned ? 'right' : 'left'),
+            id: 'h-align-function-names',
+            hide: false,
+            icon: isLeftAligned
+                ? 'ic:outline-align-horizontal-right'
+                : 'ic:outline-align-horizontal-left',
+        },
         {
             label: isCompareAbsolute ? 'Compare Relative' : 'Compare Absolute',
             onclick: () => setCompareAbsolute(isCompareAbsolute ? 'false' : 'true'),
@@ -138,7 +149,7 @@ const MultiLevelDropdown = ({ onSelect, profileType }) => {
             icon: 'ph:eye-closed',
         },
     ];
-    return (_jsx("div", { className: "relative inline-block text-left", id: "h-visualisation-toolbar-actions", children: _jsx(Menu, { children: ({ open, close }) => (_jsxs(_Fragment, { children: [_jsxs(Menu.Button, { className: "inline-flex dark:bg-gray-900 dark:border-gray-600 justify-center w-full px-4 py-2 text-sm font-normal text-gray-600 dark:text-gray-200 bg-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 border border-gray-200 pr-[1.7rem]", children: [_jsx("span", { children: "More" }), _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" }) })] }), open && (_jsxs(Menu.Items, { className: "absolute z-30 left-0 w-56 mt-2 py-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600", children: [_jsx("span", { className: "text-xs text-gray-400 capitalize px-4 py-3", children: "actions" }), menuItems
+    return (_jsx("div", { className: "relative inline-block text-left", id: "h-visualisation-toolbar-actions", children: _jsx(Menu, { children: ({ open, close }) => (_jsxs(_Fragment, { children: [_jsxs(Menu.Button, { className: "inline-flex dark:bg-gray-900 dark:border-gray-600 justify-center w-full px-4 py-2 text-sm font-normal text-gray-600 dark:text-gray-200 bg-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 border border-gray-200 pr-[1.7rem]", children: [_jsx("span", { children: "More" }), _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" }) })] }), open && (_jsxs(Menu.Items, { className: "absolute z-30 left-0 w-64 mt-2 py-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600", children: [_jsx("span", { className: "text-xs text-gray-400 capitalize px-4 py-3", children: "actions" }), menuItems
                                 .filter(item => item.hide !== undefined && !item.hide)
                                 .map((item, index) => (_jsx(MenuItem, { ...item, onSelect: onSelect, closeDropdown: close, activeValueForSortBy: storeSortBy, activeValueForColorBy: colorBy === undefined || colorBy === '' ? 'binary' : colorBy }, index)))] }))] })) }) }));
 };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@parca/profile",
-  "version": "0.17.10",
+  "version": "0.17.11",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.16.130",
-    "@parca/components": "0.16.340",
+    "@parca/components": "0.16.341",
     "@parca/dynamicsize": "0.16.65",
-    "@parca/hooks": "0.0.89",
+    "@parca/hooks": "0.0.90",
     "@parca/icons": "0.16.72",
     "@parca/parser": "0.16.79",
     "@parca/store": "0.16.174",
@@ -77,5 +77,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "311a3e15d4813761b8e2d28e66dcec340cf69335"
+  "gitHead": "43148de87e3e645cf0c5225356438891000d7d96"
 }

package/src/ProfileIcicleGraph/IcicleGraphArrow/TextWithEllipsis.tsx

@@ -13,7 +13,7 @@
 
 import {useEffect, useRef, useState} from 'react';
 
-import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
+import {useURLState} from '@parca/components';
 
 interface Props {
   text: string;
@@ -66,9 +66,9 @@ function calculateTruncatedText(
 function TextWithEllipsis({text, x, y, width}: Props): JSX.Element {
   const textRef = useRef<SVGTextElement>(null);
   const [displayText, setDisplayText] = useState(text);
-  const [showFunctionNameFromLeft] = useUserPreference<boolean>(
-    USER_PREFERENCES.SHOW_FUNCTION_NAME_FROM_LEFT.key
-  );
+  const [alignFunctionName] = useURLState('align_function_name');
+
+  const showFunctionNameFromLeft = alignFunctionName === 'left' || alignFunctionName === undefined;
 
   useEffect(() => {
     const textElement = textRef.current;

package/src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx

@@ -167,6 +167,9 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({onSelect, profil
   const isInvert = invertStack === 'true';
   const isColorStackLegendEnabled = colorStackLegend === 'true';
 
+  const [alignFunctionName, setAlignFunctionName] = useURLState('align_function_name');
+  const isLeftAligned = alignFunctionName === 'left' || alignFunctionName === undefined;
+
   // By default, we want delta profiles (CPU) to be relatively compared.
   // For non-delta profiles, like goroutines or memory, we want the profiles to be compared absolutely.
   const compareAbsoluteDefault = profileType?.delta === false ? 'true' : 'false';
@@ -225,6 +228,15 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({onSelect, profil
       hide: false,
       icon: isInvert ? 'ph:sort-ascending' : 'ph:sort-descending',
     },
+    {
+      label: isLeftAligned ? 'Right-align function names' : 'Left-align function names',
+      onclick: () => setAlignFunctionName(isLeftAligned ? 'right' : 'left'),
+      id: 'h-align-function-names',
+      hide: false,
+      icon: isLeftAligned
+        ? 'ic:outline-align-horizontal-right'
+        : 'ic:outline-align-horizontal-left',
+    },
     {
       label: isCompareAbsolute ? 'Compare Relative' : 'Compare Absolute',
       onclick: () => setCompareAbsolute(isCompareAbsolute ? 'false' : 'true'),
@@ -275,7 +287,7 @@ const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({onSelect, profil
               </span>
             </Menu.Button>
             {open && (
-              <Menu.Items className="absolute z-30 left-0 w-56 mt-2 py-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600">
+              <Menu.Items className="absolute z-30 left-0 w-64 mt-2 py-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600">
                 <span className="text-xs text-gray-400 capitalize px-4 py-3">actions</span>
                 {menuItems
                   .filter(item => item.hide !== undefined && !item.hide)