@parca/profile 0.16.377 → 0.16.378

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.378](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.377...@parca/profile@0.16.378) (2024-05-31)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.377](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.376...@parca/profile@0.16.377) (2024-05-30)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -49,6 +49,7 @@ export const getMappingColors = (mappingsList, isDarkMode, currentColorProfile)
     });
     return colors;
 };
+const noop = () => { };
 export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, navigateTo, sortBy, flamegraphLoading, mappingsListFromMetadata, }) {
     const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
     const dispatch = useAppDispatch();
@@ -139,9 +140,20 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
         const newMappingsList = mappingsListFromMetadata.filter(mapping => mapping !== binaryToRemove);
         setBinaryFrameFilter(newMappingsList);
     };
+    const highlightSimilarStacksName = highlightSimilarStacksPreference ? hoveringName : null;
+    const highlightSimilarStacksSetName = useMemo(() => {
+        return highlightSimilarStacksPreference ? setHoveringName : noop;
+    }, [highlightSimilarStacksPreference]);
+    const highlightSimilarStacksSetLevel = useMemo(() => {
+        return highlightSimilarStacksPreference ? setHoveringLevel : noop;
+    }, [highlightSimilarStacksPreference]);
+    const highlightSimilarStacksRow = highlightSimilarStacksPreference ? hoveringRow : null;
+    const path = useMemo(() => {
+        return [];
+    }, []);
     // useMemo for the root graph as it otherwise renders the whole graph if the hoveringRow changes.
     const root = useMemo(() => {
-        return (_jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, onContextMenu: displayMenu, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleNode, { table: table, row: 0, mappingColors: mappingColors, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
+        return (_jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, onContextMenu: displayMenu, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleNode, { table: table, row: 0, mappingColors: mappingColors, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: path, level: 0, isRoot: true, searchString: currentSearchString, setHoveringRow: setHoveringRow, setHoveringLevel: highlightSimilarStacksSetLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: highlightSimilarStacksName, setHoveringName: highlightSimilarStacksSetName, hoveringRow: highlightSimilarStacksRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
     }, [
         width,
         height,
@@ -158,10 +170,13 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
         compareMode,
         profileType,
         isContextMenuOpen,
-        hoveringName,
-        hoveringRow,
+        highlightSimilarStacksName,
+        highlightSimilarStacksRow,
         colorForSimilarNodes,
         highlightSimilarStacksPreference,
+        path,
+        highlightSimilarStacksSetLevel,
+        highlightSimilarStacksSetName,
     ]);
     return (_jsx(_Fragment, { children: _jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ContextMenu, { menuId: MENU_ID, table: table, row: hoveringRow ?? 0, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType, navigateTo: navigateTo, trackVisibility: trackVisibility, curPath: curPath, setCurPath: setCurPath, hideMenu: hideAll, hideBinary: hideBinary }), dockedMetainfo ? (_jsx(DockedGraphTooltip, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType })) : (!isContextMenuOpen && (_jsx(GraphTooltipArrow, { contextElement: svg.current, isContextMenuOpen: isContextMenuOpen, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, isFixed: false, total: total, totalUnfiltered: total + filtered, profileType: profileType, navigateTo: navigateTo }) }))), root] }) }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.377",
+  "version": "0.16.378",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@headlessui/react": "^1.7.19",
@@ -71,5 +71,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "7f48ce8d53a8f749508d0b002c04bf1257c4bbde"
+  "gitHead": "fbab8208a5a08c44a96f81c90bdd69494914c11c"
 }

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -89,6 +89,8 @@ export const getMappingColors = (
   return colors;
 };
 
+const noop = (): void => {};
+
 export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   arrow,
   total,
@@ -214,6 +216,18 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
     setBinaryFrameFilter(newMappingsList);
   };
 
+  const highlightSimilarStacksName = highlightSimilarStacksPreference ? hoveringName : null;
+  const highlightSimilarStacksSetName = useMemo(() => {
+    return highlightSimilarStacksPreference ? setHoveringName : noop;
+  }, [highlightSimilarStacksPreference]);
+  const highlightSimilarStacksSetLevel = useMemo(() => {
+    return highlightSimilarStacksPreference ? setHoveringLevel : noop;
+  }, [highlightSimilarStacksPreference]);
+  const highlightSimilarStacksRow = highlightSimilarStacksPreference ? hoveringRow : null;
+  const path = useMemo(() => {
+    return [];
+  }, []);
+
   // useMemo for the root graph as it otherwise renders the whole graph if the hoveringRow changes.
   const root = useMemo(() => {
     return (
@@ -239,20 +253,20 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
               curPath={curPath}
               total={total}
               xScale={xScale}
-              path={[]}
+              path={path}
               level={0}
               isRoot={true}
               searchString={currentSearchString}
               setHoveringRow={setHoveringRow}
-              setHoveringLevel={setHoveringLevel}
+              setHoveringLevel={highlightSimilarStacksSetLevel}
               sortBy={sortBy}
               darkMode={isDarkMode}
               compareMode={compareMode}
               profileType={profileType}
               isContextMenuOpen={isContextMenuOpen}
-              hoveringName={hoveringName}
-              setHoveringName={setHoveringName}
-              hoveringRow={hoveringRow}
+              hoveringName={highlightSimilarStacksName}
+              setHoveringName={highlightSimilarStacksSetName}
+              hoveringRow={highlightSimilarStacksRow}
               colorForSimilarNodes={colorForSimilarNodes}
               highlightSimilarStacksPreference={highlightSimilarStacksPreference}
             />
@@ -276,10 +290,13 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
     compareMode,
     profileType,
     isContextMenuOpen,
-    hoveringName,
-    hoveringRow,
+    highlightSimilarStacksName,
+    highlightSimilarStacksRow,
     colorForSimilarNodes,
     highlightSimilarStacksPreference,
+    path,
+    highlightSimilarStacksSetLevel,
+    highlightSimilarStacksSetName,
   ]);
 
   return (