@parca/profile 0.16.62 → 0.16.64

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.64](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.63...@parca/profile@0.16.64) (2022-11-08)
+
+**Note:** Version bump only for package @parca/profile
+
+## [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/dist/GraphTooltip/index.js

@@ -74,20 +74,29 @@ var TooltipMetaInfo = function (_a) {
     if (hoveringNode.meta === undefined)
         return _jsx(_Fragment, {});
     // populate meta from the flamegraph metadata tables
-    if (locations !== undefined) {
-        var location_1 = locations[hoveringNode.meta.locationIndex];
+    if (locations !== undefined &&
+        hoveringNode.meta.locationIndex !== undefined &&
+        hoveringNode.meta.locationIndex !== 0) {
+        var location_1 = locations[hoveringNode.meta.locationIndex - 1];
         hoveringNode.meta.location = location_1;
-        if (mappings !== undefined) {
-            var mapping = mappings[location_1.mappingIndex];
-            if (strings !== undefined) {
-                mapping.file = strings[mapping.fileStringIndex];
-                mapping.buildId = strings[mapping.buildIdStringIndex];
+        if (location_1 !== undefined) {
+            if (mappings !== undefined &&
+                location_1.mappingIndex !== undefined &&
+                location_1.mappingIndex !== 0) {
+                var mapping = mappings[location_1.mappingIndex - 1];
+                if (strings !== undefined && mapping !== undefined) {
+                    mapping.file =
+                        (mapping === null || mapping === void 0 ? void 0 : mapping.fileStringIndex) !== undefined ? strings[mapping.fileStringIndex] : '';
+                    mapping.buildId =
+                        (mapping === null || mapping === void 0 ? void 0 : mapping.buildIdStringIndex) !== undefined ? strings[mapping.buildIdStringIndex] : '';
+                }
+                hoveringNode.meta.mapping = mapping;
             }
-            hoveringNode.meta.mapping = mapping;
-        }
-        location_1.lines.forEach(function (line) {
-            if (functions !== undefined && hoveringNode.meta !== undefined) {
-                var func = functions[line.functionIndex];
+            if (functions !== undefined &&
+                location_1.lines !== undefined &&
+                hoveringNode.meta.lineIndex !== undefined &&
+                hoveringNode.meta.lineIndex < location_1.lines.length) {
+                var func = functions[location_1.lines[hoveringNode.meta.lineIndex].functionIndex - 1];
                 if (strings !== undefined) {
                     func.name = strings[func.nameStringIndex];
                     func.systemName = strings[func.systemNameStringIndex];
@@ -95,7 +104,7 @@ var TooltipMetaInfo = function (_a) {
                 }
                 hoveringNode.meta.function = func;
             }
-        });
+        }
     }
     var getTextForFile = function (hoveringNode) {
         var _a, _b, _c, _d;

package/dist/IcicleGraph.js

@@ -56,14 +56,19 @@ function IcicleRect(_a) {
                 } }), width > 5 && (_jsx("svg", __assign({ width: width - 5, height: height }, { children: _jsx("text", __assign({ x: 5, y: 15, style: { fontSize: '12px' } }, { children: name })) })))] })));
 }
 export function nodeLabel(node, strings, mappings, locations, functions) {
-    var _a, _b;
+    var _a, _b, _c;
     if (((_a = node.meta) === null || _a === void 0 ? void 0 : _a.locationIndex) === undefined)
         return '<unknown>';
-    var location = locations[node.meta.locationIndex];
-    var mappingFile = strings[mappings[location.mappingIndex].fileStringIndex];
-    var mappingString = "".concat(mappingFile !== '' ? '[' + ((_b = getLastItem(mappingFile)) !== null && _b !== void 0 ? _b : '') + '] ' : '');
+    if (((_b = node.meta) === null || _b === void 0 ? void 0 : _b.locationIndex) === 0)
+        return '<unknown>';
+    var location = locations[node.meta.locationIndex - 1];
+    var mapping = location.mappingIndex !== undefined || location.mappingIndex !== 0
+        ? mappings[location.mappingIndex - 1]
+        : undefined;
+    var mappingFile = (mapping === null || mapping === void 0 ? void 0 : mapping.fileStringIndex) !== undefined ? strings[mapping.fileStringIndex] : '';
+    var mappingString = "".concat(mappingFile !== '' ? '[' + ((_c = getLastItem(mappingFile)) !== null && _c !== void 0 ? _c : '') + '] ' : '');
     if (location.lines.length > 0) {
-        var funcName = strings[functions[location.lines[0].functionIndex].nameStringIndex];
+        var funcName = strings[functions[location.lines[node.meta.lineIndex].functionIndex - 1].nameStringIndex];
         return "".concat(mappingString, " ").concat(funcName);
     }
     var address = hexifyAddress(location.address);

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@parca/profile",
-  "version": "0.16.62",
+  "version": "0.16.64",
   "description": "Profile viewing libraries",
   "dependencies": {
     "@iconify/react": "^3.2.2",
-    "@parca/client": "^0.16.53",
-    "@parca/components": "^0.16.58",
+    "@parca/client": "^0.16.54",
+    "@parca/components": "^0.16.59",
     "@parca/dynamicsize": "^0.16.51",
     "@parca/functions": "^0.16.51",
     "@parca/parser": "^0.16.50",
@@ -40,5 +40,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "34f834e5c01e7dce7aa7cb1b09fe861d413ac0a3"
+  "gitHead": "38667cf5c5702dff21fdfeb5d9f1053be97a1f9d"
 }

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,
       });
     }
   };

package/src/GraphTooltip/index.tsx

@@ -19,12 +19,7 @@ import {CallgraphNode, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode} f
 import {getLastItem, valueFormatter} from '@parca/functions';
 import useIsShiftDown from '@parca/components/src/hooks/useIsShiftDown';
 import {hexifyAddress, truncateString} from '../';
-import {
-  Function,
-  Location,
-  Mapping,
-  Line,
-} from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
+import {Function, Location, Mapping} from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 
 interface GraphTooltipProps {
   x: number;
@@ -86,22 +81,37 @@ const TooltipMetaInfo = ({
   if (hoveringNode.meta === undefined) return <></>;
 
   // populate meta from the flamegraph metadata tables
-  if (locations !== undefined) {
-    const location = locations[hoveringNode.meta.locationIndex];
+  if (
+    locations !== undefined &&
+    hoveringNode.meta.locationIndex !== undefined &&
+    hoveringNode.meta.locationIndex !== 0
+  ) {
+    const location = locations[hoveringNode.meta.locationIndex - 1];
     hoveringNode.meta.location = location;
 
-    if (mappings !== undefined) {
-      const mapping = mappings[location.mappingIndex];
-      if (strings !== undefined) {
-        mapping.file = strings[mapping.fileStringIndex];
-        mapping.buildId = strings[mapping.buildIdStringIndex];
+    if (location !== undefined) {
+      if (
+        mappings !== undefined &&
+        location.mappingIndex !== undefined &&
+        location.mappingIndex !== 0
+      ) {
+        const mapping = mappings[location.mappingIndex - 1];
+        if (strings !== undefined && mapping !== undefined) {
+          mapping.file =
+            mapping?.fileStringIndex !== undefined ? strings[mapping.fileStringIndex] : '';
+          mapping.buildId =
+            mapping?.buildIdStringIndex !== undefined ? strings[mapping.buildIdStringIndex] : '';
+        }
+        hoveringNode.meta.mapping = mapping;
       }
-      hoveringNode.meta.mapping = mapping;
-    }
 
-    location.lines.forEach((line: Line) => {
-      if (functions !== undefined && hoveringNode.meta !== undefined) {
-        const func = functions[line.functionIndex];
+      if (
+        functions !== undefined &&
+        location.lines !== undefined &&
+        hoveringNode.meta.lineIndex !== undefined &&
+        hoveringNode.meta.lineIndex < location.lines.length
+      ) {
+        const func = functions[location.lines[hoveringNode.meta.lineIndex].functionIndex - 1];
         if (strings !== undefined) {
           func.name = strings[func.nameStringIndex];
           func.systemName = strings[func.systemNameStringIndex];
@@ -109,7 +119,7 @@ const TooltipMetaInfo = ({
         }
         hoveringNode.meta.function = func;
       }
-    });
+    }
   }
 
   const getTextForFile = (hoveringNode: FlamegraphNode): string => {

package/src/IcicleGraph.tsx

@@ -149,16 +149,24 @@ export function nodeLabel(
   functions: Function[]
 ): string {
   if (node.meta?.locationIndex === undefined) return '<unknown>';
+  if (node.meta?.locationIndex === 0) return '<unknown>';
 
-  const location = locations[node.meta.locationIndex];
-  const mappingFile = strings[mappings[location.mappingIndex].fileStringIndex];
+  const location = locations[node.meta.locationIndex - 1];
+  const mapping =
+    location.mappingIndex !== undefined || location.mappingIndex !== 0
+      ? mappings[location.mappingIndex - 1]
+      : undefined;
+
+  const mappingFile =
+    mapping?.fileStringIndex !== undefined ? strings[mapping.fileStringIndex] : '';
 
   const mappingString: string = `${
     mappingFile !== '' ? '[' + (getLastItem(mappingFile) ?? '') + '] ' : ''
   }`;
 
   if (location.lines.length > 0) {
-    const funcName = strings[functions[location.lines[0].functionIndex].nameStringIndex];
+    const funcName =
+      strings[functions[location.lines[node.meta.lineIndex].functionIndex - 1].nameStringIndex];
     return `${mappingString} ${funcName}`;
   }