@parca/profile 0.16.183 → 0.16.185

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.185](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.184...@parca/profile@0.16.185) (2023-06-15)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.184](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.183...@parca/profile@0.16.184) (2023-06-15)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.183](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.182...@parca/profile@0.16.183) (2023-06-14)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/constants.js

@@ -10,5 +10,5 @@
 // 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.
-export var DEFAULT_NODE_HEIGHT = 20;
-export var GRAPH_MARGIN = 15;
+export const DEFAULT_NODE_HEIGHT = 20;
+export const GRAPH_MARGIN = 15;

package/dist/Callgraph/index.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -31,19 +20,18 @@ import { Button, useKeyDown, useURLState } from '@parca/components';
 import { selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector } from '@parca/store';
 import { getNewSpanColor } from '@parca/utilities';
 import GraphTooltip from '../GraphTooltip';
-var Callgraph = function (_a) {
-    var data = _a.data, svgString = _a.svgString, sampleUnit = _a.sampleUnit, width = _a.width;
-    var originalView = {
+const Callgraph = ({ data, svgString, sampleUnit, width }) => {
+    const originalView = {
         scale: 1,
         translation: { x: 0, y: 0 },
     };
-    var _b = useState(originalView), view = _b[0], setView = _b[1];
-    var containerRef = useRef(null);
-    var svgRef = useRef(null);
-    var svgWrapper = useRef(null);
-    var _c = useState(false), svgWrapperLoaded = _c[0], setSvgWrapperLoaded = _c[1];
-    var dispatch = useAppDispatch();
-    var isShiftDown = useKeyDown().isShiftDown;
+    const [view, setView] = useState(originalView);
+    const containerRef = useRef(null);
+    const svgRef = useRef(null);
+    const svgWrapper = useRef(null);
+    const [svgWrapperLoaded, setSvgWrapperLoaded] = useState(false);
+    const dispatch = useAppDispatch();
+    const { isShiftDown } = useKeyDown();
     // TODO: implement highlighting nodes on user search
     // const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
     // const isSearchEmpty = currentSearchString === undefined || currentSearchString === '';
@@ -51,41 +39,43 @@ var Callgraph = function (_a) {
     //   ? true
     //   : isSearchMatch(currentSearchString, sourceNode.functionName) &&
     //     isSearchMatch(currentSearchString, targetNode.functionName);
-    var rawDashboardItems = useURLState({ param: 'dashboard_items' })[0];
-    var dashboardItems = rawDashboardItems !== undefined ? rawDashboardItems : ['icicle'];
-    var isDarkMode = useAppSelector(selectDarkMode);
-    var maxColor = getNewSpanColor(isDarkMode);
-    var minColor = d3.scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
-    var colorRange = [minColor, maxColor];
-    var cumulatives = data.edges.map(function (edge) { return parseInt(edge.cumulative); });
-    var cumulativesRange = d3.extent(cumulatives);
-    var colorScale = d3
+    const [rawDashboardItems] = useURLState({ param: 'dashboard_items' });
+    const dashboardItems = rawDashboardItems !== undefined ? rawDashboardItems : ['icicle'];
+    const isDarkMode = useAppSelector(selectDarkMode);
+    const maxColor = getNewSpanColor(isDarkMode);
+    const minColor = d3.scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
+    const colorRange = [minColor, maxColor];
+    const cumulatives = data.edges.map((edge) => edge.cumulative.toString());
+    const cumulativesRange = d3.extent(cumulatives);
+    const colorScale = d3
         .scaleSequentialLog(d3.interpolateBlues)
         .domain([Number(cumulativesRange[0]), Number(cumulativesRange[1])])
         .range(colorRange);
-    useEffect(function () {
+    useEffect(() => {
         setSvgWrapperLoaded(true);
     }, []);
-    useEffect(function () {
+    useEffect(() => {
         if (svgWrapperLoaded && svgRef.current !== null) {
-            var addInteraction = function () {
-                var svg = d3.select(svgRef.current);
-                var nodes = svg.selectAll('.node');
+            const addInteraction = () => {
+                const svg = d3.select(svgRef.current);
+                const nodes = svg.selectAll('.node');
                 nodes.each(function () {
-                    var _this = this;
-                    var nodeData = data.nodes.find(function (n) {
-                        return n.id === _this.id;
+                    const nodeData = data.nodes.find((n) => {
+                        return n.id === this.id;
                     });
-                    var defaultColor = colorScale(Number(nodeData === null || nodeData === void 0 ? void 0 : nodeData.cumulative));
-                    var node = d3.select(this);
-                    var path = node.select('path');
+                    const defaultColor = colorScale(Number(nodeData?.cumulative));
+                    const node = d3.select(this);
+                    const path = node.select('path');
                     node
                         .style('cursor', 'pointer')
                         .on('mouseenter', function () {
                         if (isShiftDown)
                             return;
                         d3.select(this).select('path').style('fill', 'white');
-                        var hoveringNode = __assign(__assign({}, nodeData), { meta: __assign(__assign({}, nodeData === null || nodeData === void 0 ? void 0 : nodeData.meta), { lineIndex: 0, locationIndex: 0 }) });
+                        const hoveringNode = {
+                            ...nodeData,
+                            meta: { ...nodeData?.meta, lineIndex: 0, locationIndex: 0 },
+                        };
                         // @ts-expect-error
                         dispatch(setHoveringNode(hoveringNode));
                     })
@@ -104,10 +94,10 @@ var Callgraph = function (_a) {
     }, [svgWrapper.current, svgWrapperLoaded]);
     if (data.nodes.length < 1)
         return _jsx(_Fragment, { children: "Profile has no samples" });
-    var resetView = function () { return setView(originalView); };
-    var isResetViewButtonEnabled = view.scale !== originalView.scale ||
+    const resetView = () => setView(originalView);
+    const isResetViewButtonEnabled = view.scale !== originalView.scale ||
         view.translation.x !== originalView.translation.x ||
         view.translation.y !== originalView.translation.y;
-    return (_jsxs("div", __assign({ className: "relative w-full" }, { children: [_jsxs("div", __assign({ ref: containerRef, className: "w-full overflow-hidden" }, { children: [_jsx(MapInteractionCSS, __assign({ showControls: true, minScale: 1, maxScale: 5, value: view, onChange: function (value) { return setView(value); } }, { children: _jsx(SVG, { ref: svgWrapper, src: svgString, width: width, height: "auto", title: "Callgraph", innerRef: svgRef }) })), svgRef.current !== null && (_jsx(GraphTooltip, { type: "callgraph", unit: sampleUnit, total: parseInt(data.cumulative), totalUnfiltered: parseInt(data.cumulative), contextElement: containerRef.current }))] })), _jsx("div", __assign({ className: cx(dashboardItems.length > 1 ? 'left-[25px]' : 'left-0', 'absolute top-[-46px] w-auto') }, { children: _jsx(Button, __assign({ variant: "neutral", onClick: resetView, className: "z-50", disabled: !isResetViewButtonEnabled }, { children: "Reset View" })) }))] })));
+    return (_jsxs("div", { className: "relative w-full", children: [_jsxs("div", { ref: containerRef, className: "w-full overflow-hidden", children: [_jsx(MapInteractionCSS, { showControls: true, minScale: 1, maxScale: 5, value: view, onChange: (value) => setView(value), children: _jsx(SVG, { ref: svgWrapper, src: svgString, width: width, height: "auto", title: "Callgraph", innerRef: svgRef }) }), svgRef.current !== null && (_jsx(GraphTooltip, { type: "callgraph", unit: sampleUnit, total: data.cumulative, totalUnfiltered: data.cumulative, contextElement: containerRef.current }))] }), _jsx("div", { className: cx(dashboardItems.length > 1 ? 'left-[25px]' : 'left-0', 'absolute top-[-46px] w-auto'), children: _jsx(Button, { variant: "neutral", onClick: resetView, className: "z-50", disabled: !isResetViewButtonEnabled, children: "Reset View" }) })] }));
 };
 export default Callgraph;

package/dist/Callgraph/mockData/index.js

@@ -10,8 +10,15 @@
 // 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.
-export var dotGraph = "{\n n1 [Label = \"n1\"];\n n2 [Label = \"n2\"];\n n3 [Label = \"n3\"];\n n1 -- n2;\n n1 -- n3;\n n2 -- n2;\n}";
-export var jsonGraph = {
+export const dotGraph = `{
+ n1 [Label = "n1"];
+ n2 [Label = "n2"];
+ n3 [Label = "n3"];
+ n1 -- n2;
+ n1 -- n3;
+ n2 -- n2;
+}`;
+export const jsonGraph = {
     total: '4358676',
     unit: 'count',
     nodes: [
@@ -98,8 +105,18 @@ export var jsonGraph = {
     ],
 };
 // just a string, doesn't need to be on separate lines
-export var graphvizDot = "\ndigraph {\n  N1 [id=\"node1\"]\n  N2 [id=\"node2\"]\n  N3 [id=\"node3\"]\n  N4 [id=\"node4\"]\n  N1 -> N2 [id=\"e1\" label=\"e1 fdskjao fdjksaol\"]\n  N2 -> N3 [id=\"e2\" label=\"e2\"]\n  N3 -> N4 [id=\"e3\" label=\"e3\"]\n  N3 -> N1 [id=\"e4\" label=\"e4\"]\n  }";
-export var jsonGraphWithGraphvizPositions = {
+export const graphvizDot = `
+digraph {
+  N1 [id="node1"]
+  N2 [id="node2"]
+  N3 [id="node3"]
+  N4 [id="node4"]
+  N1 -> N2 [id="e1" label="e1 fdskjao fdjksaol"]
+  N2 -> N3 [id="e2" label="e2"]
+  N3 -> N4 [id="e3" label="e3"]
+  N3 -> N1 [id="e4" label="e4"]
+  }`;
+export const jsonGraphWithGraphvizPositions = {
     name: '%27',
     directed: true,
     strict: false,
@@ -426,8 +443,8 @@ export var jsonGraphWithGraphvizPositions = {
         },
     ],
 };
-export var nodeWithMetaData = function (id, name) { return ({
-    id: id,
+export const nodeWithMetaData = (id, name) => ({
+    id,
     cumulative: Math.floor(Math.random() * 10),
     meta: {
         location: {
@@ -449,7 +466,7 @@ export var nodeWithMetaData = function (id, name) { return ({
                 '14': 76,
                 '15': 130,
             },
-            address: "".concat(Math.floor(Math.random() * 10)).concat(Math.floor(Math.random() * 10)).concat(Math.floor(Math.random() * 10)),
+            address: `${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}`,
             mappingId: {
                 '0': 72,
                 '1': 191,
@@ -519,9 +536,9 @@ export var nodeWithMetaData = function (id, name) { return ({
                 '15': 177,
             },
             startLine: '0',
-            name: name,
+            name,
             systemName: 'runtime.gopark',
-            filename: "/opt/homebrew/Cellar/go/1.18.2/libexec/src/runtime/proc.go/".concat(name),
+            filename: `/opt/homebrew/Cellar/go/1.18.2/libexec/src/runtime/proc.go/${name}`,
         },
         line: {
             functionId: {
@@ -545,8 +562,8 @@ export var nodeWithMetaData = function (id, name) { return ({
             line: '361',
         },
     },
-}); };
-export var jsonGraphWithMetaData = {
+});
+export const jsonGraphWithMetaData = {
     total: '4358676',
     nodes: [
         nodeWithMetaData('root', 'root node'),

package/dist/Callgraph/utils.js

@@ -10,23 +10,13 @@
 // 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.
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import * as d3 from 'd3';
 import { withAlphaHex } from 'with-alpha-hex';
-export var pixelsToInches = function (pixels) { return pixels / 96; };
-export var getCurvePoints = function (_a) {
-    var pos = _a.pos, _b = _a.xScale, xScale = _b === void 0 ? function (n) { return n; } : _b, _c = _a.yScale, yScale = _c === void 0 ? function (n) { return n; } : _c, _d = _a.source, source = _d === void 0 ? [] : _d, _e = _a.target, target = _e === void 0 ? [] : _e, _f = _a.offset, offset = _f === void 0 ? 0 : _f, _g = _a.isSelfLoop, isSelfLoop = _g === void 0 ? false : _g;
+export const pixelsToInches = (pixels) => pixels / 96;
+export const getCurvePoints = ({ pos, xScale = n => n, yScale = n => n, source = [], target = [], offset = 0, isSelfLoop = false, }) => {
     if (isSelfLoop) {
-        var sourceX = source[0], sourceY = source[1];
-        var targetX = target[0], targetY = target[1];
+        const [sourceX, sourceY] = source;
+        const [targetX, targetY] = target;
         return [
             sourceX,
             sourceY + offset,
@@ -39,66 +29,69 @@ export var getCurvePoints = function (_a) {
         ];
     }
     // graphviz pos format is in format 'endpoint,startpoint,triple(cp1,cp2,end),...triple...'
-    var scalePoint = function (point) { return [xScale(point[0]), yScale(point[1])]; };
-    var strAsNumArray = function (string) {
-        return string
-            .replace('e,', '')
-            .split(',')
-            .map(function (str) { return Number(str); });
-    };
-    var getLastPointWithOffset = function (target, last, offset) {
-        var targetX = target[0], targetY = target[1];
-        var lastX = last[0], lastY = last[1];
-        var diffX = targetX - lastX;
-        var diffY = targetY - lastY;
-        var diffZ = Math.hypot(diffX, diffY);
-        var offsetX = (diffX * offset) / diffZ;
-        var offsetY = (diffY * offset) / diffZ;
+    const scalePoint = (point) => [xScale(point[0]), yScale(point[1])];
+    const strAsNumArray = (string) => string
+        .replace('e,', '')
+        .split(',')
+        .map(str => Number(str));
+    const getLastPointWithOffset = (target, last, offset) => {
+        const [targetX, targetY] = target;
+        const [lastX, lastY] = last;
+        const diffX = targetX - lastX;
+        const diffY = targetY - lastY;
+        const diffZ = Math.hypot(diffX, diffY);
+        const offsetX = (diffX * offset) / diffZ;
+        const offsetY = (diffY * offset) / diffZ;
         return [targetX - offsetX, targetY - offsetY];
     };
-    var points = pos.split(' ').map(function (str) { return strAsNumArray(str); });
-    var scaledPoints = points.map(function (point) { return scalePoint(point); });
-    var lastPointIndex = scaledPoints.length - 1;
-    var lastPointWithOffset = getLastPointWithOffset(target, scaledPoints[lastPointIndex], offset);
-    return __spreadArray(__spreadArray([source], scaledPoints.slice(2, points.length - 1), true), [lastPointWithOffset], false).flat();
-};
-var objectAsDotAttributes = function (obj) {
-    return Object.entries(obj)
-        .map(function (entry) { return "".concat(entry[0], "=\"").concat(entry[1], "\""); })
-        .join(' ');
+    const points = pos.split(' ').map(str => strAsNumArray(str));
+    const scaledPoints = points.map(point => scalePoint(point));
+    const lastPointIndex = scaledPoints.length - 1;
+    const lastPointWithOffset = getLastPointWithOffset(target, scaledPoints[lastPointIndex], offset);
+    return [source, ...scaledPoints.slice(2, points.length - 1), lastPointWithOffset].flat();
 };
-export var jsonToDot = function (_a) {
-    var graph = _a.graph, colorRange = _a.colorRange;
-    var nodes = graph.nodes, edges = graph.edges;
-    var cumulatives = edges.map(function (edge) { return Number(edge.cumulative); });
-    var cumulativesRange = d3.extent(cumulatives);
-    var colorScale = d3
+const objectAsDotAttributes = (obj) => Object.entries(obj)
+    .map(entry => `${entry[0]}="${entry[1]}"`)
+    .join(' ');
+export const jsonToDot = ({ graph, colorRange, }) => {
+    const { nodes, edges } = graph;
+    const cumulatives = edges.map((edge) => Number(edge.cumulative));
+    const cumulativesRange = d3.extent(cumulatives);
+    const colorScale = d3
         .scaleSequentialLog(d3.interpolateBlues)
         .domain(cumulativesRange)
         .range(colorRange);
-    var colorOpacityScale = d3.scaleLinear().domain(cumulativesRange).range([0.5, 1]);
-    var nodesAsStrings = nodes.map(function (node) {
-        var _a, _b, _c, _d, _e;
-        var rgbColor = colorScale(Number(node.cumulative));
-        var hexColor = (_b = (_a = d3.color(rgbColor)) === null || _a === void 0 ? void 0 : _a.formatHex()) !== null && _b !== void 0 ? _b : 'red';
-        var dataAttributes = {
-            label: (_e = (_d = (_c = node.meta) === null || _c === void 0 ? void 0 : _c.function) === null || _d === void 0 ? void 0 : _d.name.substring(0, 12)) !== null && _e !== void 0 ? _e : '',
+    const colorOpacityScale = d3.scaleLinear().domain(cumulativesRange).range([0.5, 1]);
+    const nodesAsStrings = nodes.map((node) => {
+        const rgbColor = colorScale(Number(node.cumulative));
+        const hexColor = d3.color(rgbColor)?.formatHex() ?? 'red';
+        const dataAttributes = {
+            label: node.meta?.function?.name.substring(0, 12) ?? '',
             root: (node.id === 'root').toString(),
             fillcolor: hexColor,
             className: 'node',
             id: node.id,
         };
-        return "\"".concat(node.id, "\" [").concat(objectAsDotAttributes(dataAttributes), "]");
+        return `"${node.id}" [${objectAsDotAttributes(dataAttributes)}]`;
     });
-    var edgesAsStrings = edges.map(function (edge) {
-        var dataAttributes = {
-            cumulative: edge.cumulative,
+    const edgesAsStrings = edges.map((edge) => {
+        const dataAttributes = {
+            cumulative: Number(edge.cumulative),
             color: withAlphaHex(colorRange[1], colorOpacityScale(Number(edge.cumulative))),
             className: 'edge',
             // boxHeight: DEFAULT_NODE_HEIGHT,
         };
-        return "\"".concat(edge.source, "\" -> \"").concat(edge.target, "\" [").concat(objectAsDotAttributes(dataAttributes), "]");
+        return `"${edge.source}" -> "${edge.target}" [${objectAsDotAttributes(dataAttributes)}]`;
     });
-    var graphAsDot = "digraph \"callgraph\" {\n      rankdir=\"TB\"\n      overlap=\"prism\"\n      ratio=\"1,3\"\n      margin=15\n      edge [margin=0]\n      node [shape=box style=\"rounded,filled\"]\n      ".concat(nodesAsStrings.join(' '), "\n      ").concat(edgesAsStrings.join(' '), "\n    }");
+    const graphAsDot = `digraph "callgraph" {
+      rankdir="TB"
+      overlap="prism"
+      ratio="1,3"
+      margin=15
+      edge [margin=0]
+      node [shape=box style="rounded,filled"]
+      ${nodesAsStrings.join(' ')}
+      ${edgesAsStrings.join(' ')}
+    }`;
     return graphAsDot;
 };

package/dist/GraphTooltip/ExpandOnHoverValue.js

@@ -1,16 +1,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var ExpandOnHover = function (_a) {
-    var value = _a.value, displayValue = _a.displayValue;
-    return (_jsxs("div", __assign({ className: "group relative w-full" }, { children: [_jsx("div", __assign({ className: "w-full overflow-hidden text-ellipsis whitespace-nowrap" }, { children: displayValue !== null && displayValue !== void 0 ? displayValue : value })), _jsx("div", __assign({ className: "absolute -inset-2 hidden h-fit max-w-[500px] whitespace-normal break-all rounded bg-gray-50 p-2 shadow-[0_0_10px_2px_rgba(0,0,0,0.3)] group-hover:flex dark:bg-gray-900" }, { children: value }))] })));
+export const ExpandOnHover = ({ value, displayValue }) => {
+    return (_jsxs("div", { className: "group relative w-full", children: [_jsx("div", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap", children: displayValue ?? value }), _jsx("div", { className: "absolute -inset-2 hidden h-fit max-w-[500px] whitespace-normal break-all rounded bg-gray-50 p-2 shadow-[0_0_10px_2px_rgba(0,0,0,0.3)] group-hover:flex dark:bg-gray-900", children: value })] }));
 };

package/dist/GraphTooltip/index.d.ts

@@ -5,15 +5,15 @@ interface ExtendedCallgraphNodeMeta extends CallgraphNodeMeta {
     locationIndex: number;
 }
 interface HoveringNode extends FlamegraphRootNode, FlamegraphNode, CallgraphNode {
-    diff: string;
+    diff: bigint;
     meta?: FlamegraphNodeMeta | ExtendedCallgraphNodeMeta;
 }
 interface GraphTooltipProps {
     x?: number;
     y?: number;
     unit: string;
-    total: number;
-    totalUnfiltered: number;
+    total: bigint;
+    totalUnfiltered: bigint;
     hoveringNode?: HoveringNode;
     contextElement: Element | null;
     isFixed?: boolean;
@@ -27,8 +27,8 @@ interface GraphTooltipProps {
 export declare const GraphTooltipContent: ({ hoveringNode, unit, total, totalUnfiltered, isFixed, strings, mappings, locations, functions, type, }: {
     hoveringNode: HoveringNode;
     unit: string;
-    total: number;
-    totalUnfiltered: number;
+    total: bigint;
+    totalUnfiltered: bigint;
     isFixed: boolean;
     strings?: string[] | undefined;
     mappings?: Mapping[] | undefined;