@parca/profile 0.16.455 → 0.16.456

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

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IcicleGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"IcicleGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx"],"names":[],"mappings":"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"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js

@@ -16,6 +16,7 @@ import cx from 'classnames';
 import { selectBinaries, useAppSelector } from '@parca/store';
 import { isSearchMatch, scaleLinear } from '@parca/utilities';
 import 'react-contexify/dist/ReactContexify.css';
+import TextWithEllipsis from './TextWithEllipsis';
 import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_MAPPING_FILE, } from './index';
 import useNodeColor from './useNodeColor';
 import { arrowToString, nodeLabel } from './utils';
@@ -196,5 +197,5 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, col
                             ? `${colorForSimilarNodes} stroke-[3] [stroke-dasharray:6,4] [stroke-linecap:round] [stroke-linejoin:round] h-6`
                             : 'stroke-white dark:stroke-gray-700', {
                             'opacity-50': isHighlightEnabled && !isHighlighted,
-                        }) }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx("text", { x: 5, y: 15, style: { fontSize: '12px' }, children: name }) }))] }), childRows.length > 0 && (_jsx(IcicleGraphNodes, { table: table, row: row, colors: colors, colorBy: colorBy, childRows: childRows, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, searchString: searchString, sortBy: sortBy, darkMode: darkMode, profileType: profileType, compareMode: compareMode, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }))] }));
+                        }) }), width > 5 && (_jsx("svg", { width: width - 5, height: height, children: _jsx(TextWithEllipsis, { text: name, x: 5, y: 15, width: width - 10 }) }))] }), childRows.length > 0 && (_jsx(IcicleGraphNodes, { table: table, row: row, colors: colors, colorBy: colorBy, childRows: childRows, x: x, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, searchString: searchString, sortBy: sortBy, darkMode: darkMode, profileType: profileType, compareMode: compareMode, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }))] }));
 });

package/dist/ProfileIcicleGraph/IcicleGraphArrow/TextWithEllipsis.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    text: string;
+    x: number;
+    y: number;
+    width: number;
+}
+declare function TextWithEllipsis({ text, x, y, width }: Props): JSX.Element;
+export default TextWithEllipsis;
+//# sourceMappingURL=TextWithEllipsis.d.ts.map

package/dist/ProfileIcicleGraph/IcicleGraphArrow/TextWithEllipsis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextWithEllipsis.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/TextWithEllipsis.tsx"],"names":[],"mappings":"AAiBA,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AA2CD,iBAAS,gBAAgB,CAAC,EAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAC,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAuBjE;AAED,eAAe,gBAAgB,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/TextWithEllipsis.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 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';
+function calculateTruncatedText(text, textElement, maxWidth) {
+    // Create a temporary element for measurement
+    const tempElement = textElement.cloneNode();
+    tempElement.textContent = text;
+    textElement.parentElement?.appendChild(tempElement);
+    // If the text fits, return it
+    const fullWidth = tempElement.getComputedTextLength();
+    if (fullWidth <= maxWidth) {
+        textElement.parentElement?.removeChild(tempElement);
+        return text;
+    }
+    // Binary search to find the maximum text that fits
+    let start = 0;
+    let end = text.length;
+    let result = text;
+    while (start < end) {
+        const mid = Math.floor((start + end + 1) / 2);
+        const truncated = text.slice(-mid);
+        tempElement.textContent = truncated;
+        const currentWidth = tempElement.getComputedTextLength();
+        if (currentWidth <= maxWidth) {
+            result = truncated;
+            start = mid;
+        }
+        else {
+            end = mid - 1;
+        }
+    }
+    textElement.parentElement?.removeChild(tempElement);
+    return result;
+}
+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);
+    useEffect(() => {
+        const textElement = textRef.current;
+        if (textElement === null)
+            return;
+        const newText = showFunctionNameFromLeft
+            ? text
+            : calculateTruncatedText(text, textElement, width);
+        setDisplayText(newText);
+    }, [text, width, showFunctionNameFromLeft]);
+    return (_jsx("text", { ref: textRef, x: x, y: y, className: "text-xs", children: displayText }));
+}
+export default TextWithEllipsis;

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

@@ -20,5 +20,5 @@ export const VisualisationToolbar = ({ groupBy, toggleGroupBy, groupByLabels, se
     const { dashboardItems } = useDashboard();
     const isTableViz = dashboardItems?.includes('table');
     const isGraphViz = dashboardItems?.includes('icicle');
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-3 items-end", children: [_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(MultiLevelDropdown, { profileType: profileType, onSelect: () => { } })] }), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [preferencesModal != null ? _jsx(UserPreferencesModal, {}) : null, _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: profileSource?.QueryRequest() ?? undefined, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, {}) : null] })] }), isGraphViz && !isTableViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(IcicleGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableViz && !isGraphViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-3 items-end", children: [_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(MultiLevelDropdown, { profileType: profileType, onSelect: () => { } })] }), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [preferencesModal === true && _jsx(UserPreferencesModal, {}), _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: profileSource?.QueryRequest() ?? undefined, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, {}) : null] })] }), isGraphViz && !isTableViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(IcicleGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableViz && !isGraphViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })] }))] }));
 };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.455",
+  "version": "0.16.456",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@iconify/react": "^4.0.0",
     "@parca/client": "0.16.125",
-    "@parca/components": "0.16.312",
+    "@parca/components": "0.16.313",
     "@parca/dynamicsize": "0.16.65",
-    "@parca/hooks": "0.0.75",
+    "@parca/hooks": "0.0.76",
     "@parca/icons": "0.16.71",
     "@parca/parser": "0.16.78",
     "@parca/store": "0.16.162",
@@ -74,5 +74,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "54e578f0c45ee0ae69e79306b03315c76a1227ed"
+  "gitHead": "0e071ed2fe26da987341ab6f8fcee0e272e9aa64"
 }

package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx

@@ -23,6 +23,7 @@ import 'react-contexify/dist/ReactContexify.css';
 
 import {ProfileType} from '@parca/parser';
 
+import TextWithEllipsis from './TextWithEllipsis';
 import {
   FIELD_CHILDREN,
   FIELD_CUMULATIVE,
@@ -412,9 +413,12 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
         />
         {width > 5 && (
           <svg width={width - 5} height={height}>
-            <text x={5} y={15} style={{fontSize: '12px'}}>
-              {name}
-            </text>
+            <TextWithEllipsis
+              text={name}
+              x={5}
+              y={15}
+              width={width - 10} // Subtract padding from available width
+            />
           </svg>
         )}
       </g>

package/src/ProfileIcicleGraph/IcicleGraphArrow/TextWithEllipsis.tsx

@@ -0,0 +1,91 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 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';
+
+interface Props {
+  text: string;
+  x: number;
+  y: number;
+  width: number;
+}
+
+function calculateTruncatedText(
+  text: string,
+  textElement: SVGTextElement,
+  maxWidth: number
+): string {
+  // Create a temporary element for measurement
+  const tempElement = textElement.cloneNode() as SVGTextElement;
+  tempElement.textContent = text;
+  textElement.parentElement?.appendChild(tempElement);
+
+  // If the text fits, return it
+  const fullWidth = tempElement.getComputedTextLength();
+  if (fullWidth <= maxWidth) {
+    textElement.parentElement?.removeChild(tempElement);
+    return text;
+  }
+
+  // Binary search to find the maximum text that fits
+  let start = 0;
+  let end = text.length;
+  let result = text;
+
+  while (start < end) {
+    const mid = Math.floor((start + end + 1) / 2);
+    const truncated = text.slice(-mid);
+
+    tempElement.textContent = truncated;
+    const currentWidth = tempElement.getComputedTextLength();
+
+    if (currentWidth <= maxWidth) {
+      result = truncated;
+      start = mid;
+    } else {
+      end = mid - 1;
+    }
+  }
+
+  textElement.parentElement?.removeChild(tempElement);
+  return result;
+}
+
+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
+  );
+
+  useEffect(() => {
+    const textElement = textRef.current;
+    if (textElement === null) return;
+
+    const newText = showFunctionNameFromLeft
+      ? text
+      : calculateTruncatedText(text, textElement, width);
+
+    setDisplayText(newText);
+  }, [text, width, showFunctionNameFromLeft]);
+
+  return (
+    <text ref={textRef} x={x} y={y} className="text-xs">
+      {displayText}
+    </text>
+  );
+}
+
+export default TextWithEllipsis;

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

@@ -157,7 +157,7 @@ export const VisualisationToolbar: FC<VisualisationToolbarProps> = ({
           {profileViewExternalSubActions != null ? profileViewExternalSubActions : null}
         </div>
         <div className="flex gap-3">
-          {preferencesModal != null ? <UserPreferencesModal /> : null}
+          {preferencesModal === true && <UserPreferencesModal />}
           <ShareButton
             profileSource={profileSource}
             queryClient={queryClient}