@parca/profile 0.16.212 → 0.16.214

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.16.214 (2023-07-20)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.213](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.212...@parca/profile@0.16.213) (2023-07-18)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.212 (2023-07-18)
 
 **Note:** Version bump only for package @parca/profile

package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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.
@@ -107,9 +107,26 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ table, total, f
         }
         return scaleLinear([0n, total], [0, width]);
     }, [total, width]);
+    // 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, 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, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode }) }) }) }));
+    }, [
+        compareMode,
+        curPath,
+        currentSearchString,
+        height,
+        isDarkMode,
+        mappingColors,
+        setCurPath,
+        sortBy,
+        table,
+        total,
+        width,
+        xScale,
+    ]);
     if (table.numRows === 0 || width === undefined) {
         return _jsx(_Fragment, {});
     }
-    return (_jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ColorStackLegend, { mappingColors: mappingColors, navigateTo: navigateTo, compareMode: compareMode }), _jsx(GraphTooltipArrow, { contextElement: svg.current, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, isFixed: false, total: total, totalUnfiltered: total + filtered, unit: sampleUnit }) }), _jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, 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, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: [], level: 0, isRoot: true, searchString: currentSearchString, setHoveringRow: setHoveringRow, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode }) }) }) })] }));
+    return (_jsxs("div", { onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ColorStackLegend, { mappingColors: mappingColors, navigateTo: navigateTo, compareMode: compareMode }), _jsx(GraphTooltipArrow, { contextElement: svg.current, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, isFixed: false, total: total, totalUnfiltered: total + filtered, unit: sampleUnit }) }), root] }));
 });
 export default IcicleGraphArrow;

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.212",
+  "version": "0.16.214",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@parca/client": "^0.16.80",
-    "@parca/components": "^0.16.170",
+    "@parca/components": "^0.16.171",
     "@parca/dynamicsize": "^0.16.54",
     "@parca/hooks": "^0.0.15",
     "@parca/parser": "^0.16.55",
-    "@parca/store": "^0.16.92",
-    "@parca/utilities": "^0.0.21",
+    "@parca/store": "^0.16.93",
+    "@parca/utilities": "^0.0.22",
     "@tanstack/react-query": "^4.0.5",
     "@types/react-beautiful-dnd": "^13.1.3",
     "apache-arrow": "^12.0.0",
@@ -47,5 +47,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "e4dfde14a39afad5ffc6c2823fd1ed9963a50aa9"
+  "gitHead": "f922df8580dc8751f98219157b3c0152332ebb5d"
 }

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -160,27 +160,9 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
     return scaleLinear([0n, total], [0, width]);
   }, [total, width]);
 
-  if (table.numRows === 0 || width === undefined) {
-    return <></>;
-  }
-
-  return (
-    <div onMouseLeave={() => dispatch(setHoveringNode(undefined))}>
-      <ColorStackLegend
-        mappingColors={mappingColors}
-        navigateTo={navigateTo}
-        compareMode={compareMode}
-      />
-      <GraphTooltipArrow contextElement={svg.current}>
-        <GraphTooltipArrowContent
-          table={table}
-          row={hoveringRow}
-          isFixed={false}
-          total={total}
-          totalUnfiltered={total + filtered}
-          unit={sampleUnit}
-        />
-      </GraphTooltipArrow>
+  // useMemo for the root graph as it otherwise renders the whole graph if the hoveringRow changes.
+  const root = useMemo(() => {
+    return (
       <svg
         className="font-robotoMono"
         width={width}
@@ -196,7 +178,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
               mappingColors={mappingColors}
               x={0}
               y={0}
-              totalWidth={width}
+              totalWidth={width ?? 1}
               height={RowHeight}
               setCurPath={setCurPath}
               curPath={curPath}
@@ -214,6 +196,44 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
           </g>
         </g>
       </svg>
+    );
+  }, [
+    compareMode,
+    curPath,
+    currentSearchString,
+    height,
+    isDarkMode,
+    mappingColors,
+    setCurPath,
+    sortBy,
+    table,
+    total,
+    width,
+    xScale,
+  ]);
+
+  if (table.numRows === 0 || width === undefined) {
+    return <></>;
+  }
+
+  return (
+    <div onMouseLeave={() => dispatch(setHoveringNode(undefined))}>
+      <ColorStackLegend
+        mappingColors={mappingColors}
+        navigateTo={navigateTo}
+        compareMode={compareMode}
+      />
+      <GraphTooltipArrow contextElement={svg.current}>
+        <GraphTooltipArrowContent
+          table={table}
+          row={hoveringRow}
+          isFixed={false}
+          total={total}
+          totalUnfiltered={total + filtered}
+          unit={sampleUnit}
+        />
+      </GraphTooltipArrow>
+      {root}
     </div>
   );
 });