@parca/profile 0.16.62 → 0.16.63

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.63](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.62...@parca/profile@0.16.63) (2022-11-08)
+
+**Note:** Version bump only for package @parca/profile
+
 ## 0.16.62 (2022-11-08)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.js

@@ -108,7 +108,7 @@ var Callgraph = function (_a) {
     }), stage = _f[0], setStage = _f[1];
     var rawNodes = graph.nodes, total = graph.cumulative;
     var currentSearchString = useAppSelector(selectSearchNodeString);
-    var isSearchEmpty = currentSearchString === undefined;
+    var isSearchEmpty = currentSearchString === undefined || currentSearchString === '';
     useEffect(function () {
         var getDataWithPositions = function () { return __awaiter(void 0, void 0, void 0, function () {
             var dataAsDot, jsonGraph;
@@ -159,24 +159,29 @@ var Callgraph = function (_a) {
     // 4. Add zooming
     var handleWheel = function (e) {
         var _a;
+        // stop default scrolling
         e.evt.preventDefault();
-        var scaleXBy = 0.95;
-        var scaleYBy = 1.05;
+        var scaleBy = 1.01;
         var stage = e.target.getStage();
         if (stage !== null) {
             var oldScale = stage.scaleX();
-            var _b = (_a = stage.getPointerPosition()) !== null && _a !== void 0 ? _a : { x: 0, y: 0 }, x = _b.x, y = _b.y;
+            var pointer = (_a = stage.getPointerPosition()) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
             var mousePointTo = {
-                x: x / oldScale - stage.x() / oldScale,
-                y: y / oldScale - stage.y() / oldScale,
+                x: pointer.x / oldScale - stage.x() / oldScale,
+                y: pointer.y / oldScale - stage.y() / oldScale,
             };
-            var newXScale = e.evt.deltaX > 0 ? oldScale * scaleXBy : oldScale / scaleXBy;
-            var newYScale = e.evt.deltaY > 0 ? oldScale * scaleYBy : oldScale / scaleYBy;
-            stage.scale({ x: newXScale, y: newYScale });
+            // whether to zoom in or out
+            var direction = e.evt.deltaY > 0 ? 1 : -1;
+            // for trackpad, e.evt.ctrlKey is true => in that case, revert direction
+            if (e.evt.ctrlKey) {
+                direction = -direction;
+            }
+            var newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
+            stage.scale({ x: newScale, y: newScale });
             setStage({
-                scale: { x: newXScale, y: newYScale },
-                x: -(mousePointTo.x - x / newXScale) * newXScale,
-                y: -(mousePointTo.y - y / newYScale) * newYScale,
+                scale: { x: newScale, y: newScale },
+                x: -(mousePointTo.x - pointer.x / newScale) * newScale,
+                y: -(mousePointTo.y - pointer.y / newScale) * newScale,
             });
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.62",
+  "version": "0.16.63",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
@@ -40,5 +40,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "34f834e5c01e7dce7aa7cb1b09fe861d413ac0a3"
+  "gitHead": "a244d1d0c99589df268a4d93a56c9c67cce6236f"
 }

package/src/Callgraph/index.tsx

@@ -180,7 +180,7 @@ const Callgraph = ({graph, sampleUnit, width, colorRange}: Props): JSX.Element =
   });
   const {nodes: rawNodes, cumulative: total} = graph;
   const currentSearchString = useAppSelector(selectSearchNodeString);
-  const isSearchEmpty = currentSearchString === undefined;
+  const isSearchEmpty = currentSearchString === undefined || currentSearchString === '';
 
   useEffect(() => {
     const getDataWithPositions = async (): Promise<void> => {
@@ -233,29 +233,35 @@ const Callgraph = ({graph, sampleUnit, width, colorRange}: Props): JSX.Element =
 
   // 4. Add zooming
   const handleWheel: (e: KonvaEventObject<WheelEvent>) => void = e => {
+    // stop default scrolling
     e.evt.preventDefault();
 
-    const scaleXBy = 0.95;
-    const scaleYBy = 1.05;
+    const scaleBy = 1.01;
     const stage = e.target.getStage();
 
     if (stage !== null) {
       const oldScale = stage.scaleX();
-      const {x, y} = stage.getPointerPosition() ?? {x: 0, y: 0};
+      const pointer = stage.getPointerPosition() ?? {x: 0, y: 0};
       const mousePointTo = {
-        x: x / oldScale - stage.x() / oldScale,
-        y: y / oldScale - stage.y() / oldScale,
+        x: pointer.x / oldScale - stage.x() / oldScale,
+        y: pointer.y / oldScale - stage.y() / oldScale,
       };
 
-      const newXScale = e.evt.deltaX > 0 ? oldScale * scaleXBy : oldScale / scaleXBy;
-      const newYScale = e.evt.deltaY > 0 ? oldScale * scaleYBy : oldScale / scaleYBy;
+      // whether to zoom in or out
+      let direction = e.evt.deltaY > 0 ? 1 : -1;
 
-      stage.scale({x: newXScale, y: newYScale});
+      // for trackpad, e.evt.ctrlKey is true => in that case, revert direction
+      if (e.evt.ctrlKey) {
+        direction = -direction;
+      }
+
+      const newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
+      stage.scale({x: newScale, y: newScale});
 
       setStage({
-        scale: {x: newXScale, y: newYScale},
-        x: -(mousePointTo.x - x / newXScale) * newXScale,
-        y: -(mousePointTo.y - y / newYScale) * newYScale,
+        scale: {x: newScale, y: newScale},
+        x: -(mousePointTo.x - pointer.x / newScale) * newScale,
+        y: -(mousePointTo.y - pointer.y / newScale) * newScale,
       });
     }
   };