@parca/profile 0.16.0 → 0.16.22

package/dist/GraphTooltip/index.js

@@ -0,0 +1,119 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getLastItem, valueFormatter } from '@parca/functions';
+import { hexifyAddress } from '../';
+import { useState, useEffect } from 'react';
+import { usePopper } from 'react-popper';
+var virtualElement = {
+    getBoundingClientRect: function () {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return ({
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+        });
+    },
+};
+function generateGetBoundingClientRect(contextElement, x, y) {
+    if (x === void 0) { x = 0; }
+    if (y === void 0) { y = 0; }
+    var domRect = contextElement.getBoundingClientRect();
+    return function () {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return ({
+            width: 0,
+            height: 0,
+            top: domRect.y + y,
+            left: domRect.x + x,
+            right: domRect.x + x,
+            bottom: domRect.y + y,
+        });
+    };
+}
+var TooltipMetaInfo = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var hoveringNode = _a.hoveringNode;
+    if (hoveringNode.meta === undefined)
+        return _jsx(_Fragment, {});
+    return (_jsxs(_Fragment, { children: [((_b = hoveringNode.meta.function) === null || _b === void 0 ? void 0 : _b.filename) !== undefined &&
+                ((_c = hoveringNode.meta.function) === null || _c === void 0 ? void 0 : _c.filename) !== '' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "File" })), _jsxs("td", __assign({ className: "w-4/5 break-all" }, { children: [hoveringNode.meta.function.filename, ((_d = hoveringNode.meta.line) === null || _d === void 0 ? void 0 : _d.line) !== undefined && ((_e = hoveringNode.meta.line) === null || _e === void 0 ? void 0 : _e.line) !== '0'
+                                ? " +".concat(hoveringNode.meta.line.line.toString())
+                                : "".concat(((_f = hoveringNode.meta.function) === null || _f === void 0 ? void 0 : _f.startLine) !== undefined &&
+                                    ((_g = hoveringNode.meta.function) === null || _g === void 0 ? void 0 : _g.startLine) !== '0'
+                                    ? " +".concat(hoveringNode.meta.function.startLine)
+                                    : '')] }))] })), ((_h = hoveringNode.meta.location) === null || _h === void 0 ? void 0 : _h.address) !== undefined &&
+                ((_j = hoveringNode.meta.location) === null || _j === void 0 ? void 0 : _j.address) !== '0' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Address" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: ' 0x' + hoveringNode.meta.location.address.toString() }))] })), hoveringNode.meta.mapping !== undefined && hoveringNode.meta.mapping.file !== '' && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Binary" })), _jsx("td", __assign({ className: "w-4/5 break-all" }, { children: getLastItem(hoveringNode.meta.mapping.file) }))] }))] }));
+};
+var GraphTooltipContent = function (_a) {
+    var hoveringNode = _a.hoveringNode, unit = _a.unit, total = _a.total, isFixed = _a.isFixed;
+    var hoveringNodeCumulative = parseFloat(hoveringNode.cumulative);
+    var diff = hoveringNode.diff === undefined ? 0 : parseFloat(hoveringNode.diff);
+    var prevValue = hoveringNodeCumulative - diff;
+    var diffRatio = Math.abs(diff) > 0 ? diff / prevValue : 0;
+    var diffSign = diff > 0 ? '+' : '';
+    var diffValueText = diffSign + valueFormatter(diff, unit, 1);
+    var diffPercentageText = diffSign + (diffRatio * 100).toFixed(2) + '%';
+    var diffText = "".concat(diffValueText, " (").concat(diffPercentageText, ")");
+    var metaRows = hoveringNode.meta === undefined ? _jsx(_Fragment, {}) : _jsx(TooltipMetaInfo, { hoveringNode: hoveringNode });
+    return (_jsx("div", __assign({ className: "flex ".concat(isFixed ? 'w-full h-36' : '') }, { children: _jsx("div", __assign({ className: "m-auto w-full ".concat(isFixed ? 'w-full h-36' : '') }, { children: _jsx("div", __assign({ className: "border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg opacity-90", style: { borderWidth: 1 } }, { children: _jsx("div", __assign({ className: "flex flex-row" }, { children: _jsxs("div", __assign({ className: "ml-2 mr-6" }, { children: [_jsx("span", __assign({ className: "font-semibold break-all" }, { children: hoveringNode.meta === undefined ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: hoveringNode.meta.function !== undefined &&
+                                        hoveringNode.meta.function.name !== '' ? (_jsx("p", { children: hoveringNode.meta.function.name })) : (_jsx(_Fragment, { children: hoveringNode.meta.location !== undefined &&
+                                            parseInt(hoveringNode.meta.location.address, 10) !== 0 ? (_jsx("p", { children: hexifyAddress(hoveringNode.meta.location.address) })) : (_jsx("p", { children: "unknown" })) })) })) })), _jsx("span", __assign({ className: "text-gray-700 dark:text-gray-300 my-2" }, { children: _jsx("table", __assign({ className: "table-fixed" }, { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Cumulative" })), _jsxs("td", __assign({ className: "w-4/5" }, { children: [valueFormatter(hoveringNodeCumulative, unit, 2), " (", ((hoveringNodeCumulative * 100) / total).toFixed(2), "%)"] }))] }), hoveringNode.diff !== undefined && diff !== 0 && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/5" }, { children: "Diff" })), _jsx("td", __assign({ className: "w-4/5" }, { children: diffText }))] })), metaRows] }) })) }))] })) })) })) })) })));
+};
+var GraphTooltip = function (_a) {
+    var x = _a.x, y = _a.y, unit = _a.unit, total = _a.total, hoveringNode = _a.hoveringNode, contextElement = _a.contextElement, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, _c = _a.virtualContextElement, virtualContextElement = _c === void 0 ? true : _c;
+    var _d = useState(null), popperElement = _d[0], setPopperElement = _d[1];
+    var _e = usePopper(virtualContextElement ? virtualElement : contextElement, popperElement, {
+        placement: 'auto-start',
+        strategy: 'absolute',
+        modifiers: [
+            {
+                name: 'preventOverflow',
+                options: {
+                    tether: false,
+                    altAxis: true,
+                },
+            },
+            {
+                name: 'offset',
+                options: {
+                    offset: [30, 30],
+                },
+            },
+        ],
+    }), styles = _e.styles, attributes = _e.attributes, popperProps = __rest(_e, ["styles", "attributes"]);
+    var update = popperProps.update;
+    useEffect(function () {
+        if (contextElement != null) {
+            virtualElement.getBoundingClientRect = generateGetBoundingClientRect(contextElement, x, y);
+            void (update === null || update === void 0 ? void 0 : update());
+        }
+    }, [x, y, contextElement, update]);
+    if (hoveringNode === undefined || hoveringNode == null)
+        return _jsx(_Fragment, {});
+    return isFixed ? (_jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, isFixed: isFixed })) : (_jsx("div", __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { children: _jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, isFixed: isFixed }) })));
+};
+export default GraphTooltip;

package/dist/IcicleGraph.d.ts

@@ -0,0 +1,35 @@
+import { Flamegraph, FlamegraphNode, FlamegraphRootNode } from '@parca/client';
+interface IcicleGraphProps {
+    graph: Flamegraph;
+    sampleUnit: string;
+    width?: number;
+    curPath: string[];
+    setCurPath: (path: string[]) => void;
+}
+interface IcicleGraphNodesProps {
+    data: FlamegraphNode[];
+    x: number;
+    y: number;
+    total: number;
+    totalWidth: number;
+    level: number;
+    curPath: string[];
+    setCurPath: (path: string[]) => void;
+    setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
+    path: string[];
+    xScale: (value: number) => number;
+}
+interface IcicleGraphRootNodeProps {
+    node: FlamegraphRootNode;
+    xScale: (value: number) => number;
+    total: number;
+    totalWidth: number;
+    curPath: string[];
+    setCurPath: (path: string[]) => void;
+    setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
+}
+export declare function nodeLabel(node: FlamegraphNode): string;
+export declare function IcicleGraphNodes({ data, x, y, xScale, total, totalWidth, level, setHoveringNode, path, setCurPath, curPath, }: IcicleGraphNodesProps): JSX.Element;
+export declare function IcicleGraphRootNode({ node, xScale, total, totalWidth, setHoveringNode, setCurPath, curPath, }: IcicleGraphRootNodeProps): JSX.Element;
+export default function IcicleGraph({ graph, width, setCurPath, curPath, sampleUnit, }: IcicleGraphProps): JSX.Element;
+export {};

package/dist/IcicleGraph.js

@@ -0,0 +1,139 @@
+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, Fragment as _Fragment } 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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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.
+import React, { useEffect, useRef, useState } from 'react';
+import { throttle } from 'lodash';
+import { pointer } from 'd3-selection';
+import { scaleLinear } from 'd3-scale';
+import GraphTooltip from './GraphTooltip';
+import { getLastItem, diffColor, isSearchMatch } from '@parca/functions';
+import { useAppSelector, selectDarkMode, selectSearchNodeString } from '@parca/store';
+import { hexifyAddress } from './utils';
+var RowHeight = 26;
+var icicleRectStyles = {
+    cursor: 'pointer',
+    transition: 'opacity .15s linear',
+};
+var fadedIcicleRectStyles = {
+    cursor: 'pointer',
+    transition: 'opacity .15s linear',
+    opacity: '0.5',
+};
+function IcicleRect(_a) {
+    var x = _a.x, y = _a.y, width = _a.width, height = _a.height, color = _a.color, name = _a.name, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onClick = _a.onClick, curPath = _a.curPath;
+    var currentSearchString = useAppSelector(selectSearchNodeString);
+    var isFaded = curPath.length > 0 && name !== curPath[curPath.length - 1];
+    var styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;
+    return (_jsxs("g", __assign({ transform: "translate(".concat(x + 1, ", ").concat(y + 1, ")"), style: styles, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }, { children: [_jsx("rect", { x: 0, y: 0, width: width - 1, height: height - 1, style: {
+                    opacity: currentSearchString !== undefined &&
+                        currentSearchString !== '' &&
+                        !isSearchMatch(currentSearchString, name)
+                        ? 0.5
+                        : 1,
+                    fill: color,
+                } }), 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) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (node.meta === undefined)
+        return '<unknown>';
+    var mapping = "".concat(((_b = (_a = node.meta) === null || _a === void 0 ? void 0 : _a.mapping) === null || _b === void 0 ? void 0 : _b.file) !== undefined && ((_d = (_c = node.meta) === null || _c === void 0 ? void 0 : _c.mapping) === null || _d === void 0 ? void 0 : _d.file) !== ''
+        ? '[' + ((_e = getLastItem(node.meta.mapping.file)) !== null && _e !== void 0 ? _e : '') + '] '
+        : '');
+    if (((_f = node.meta.function) === null || _f === void 0 ? void 0 : _f.name) !== undefined && ((_g = node.meta.function) === null || _g === void 0 ? void 0 : _g.name) !== '')
+        return mapping + node.meta.function.name;
+    var address = hexifyAddress((_h = node.meta.location) === null || _h === void 0 ? void 0 : _h.address);
+    var fallback = "".concat(mapping).concat(address);
+    return fallback === '' ? '<unknown>' : fallback;
+}
+export function IcicleGraphNodes(_a) {
+    var data = _a.data, x = _a.x, y = _a.y, xScale = _a.xScale, total = _a.total, totalWidth = _a.totalWidth, level = _a.level, setHoveringNode = _a.setHoveringNode, path = _a.path, setCurPath = _a.setCurPath, curPath = _a.curPath;
+    var isDarkMode = useAppSelector(selectDarkMode);
+    var nodes = curPath.length === 0 ? data : data.filter(function (d) { return d != null && curPath[0] === nodeLabel(d); });
+    var nextLevel = level + 1;
+    return (_jsx("g", __assign({ transform: "translate(".concat(x, ", ").concat(y, ")") }, { children: nodes.map(function (d, i) {
+            var cumulative = parseFloat(d.cumulative);
+            var diff = parseFloat(d.diff);
+            var start = nodes.slice(0, i).reduce(function (sum, d) { return sum + parseFloat(d.cumulative); }, 0);
+            var nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
+            var width = nextCurPath.length > 0 || (nextCurPath.length === 0 && curPath.length === 1)
+                ? totalWidth
+                : xScale(cumulative);
+            if (width <= 1) {
+                return null;
+            }
+            var name = nodeLabel(d);
+            var key = "".concat(level, "-").concat(i);
+            var nextPath = path.concat([name]);
+            var color = diffColor(diff, cumulative, isDarkMode);
+            var onClick = function () {
+                setCurPath(nextPath);
+            };
+            var xStart = xScale(start);
+            var newXScale = nextCurPath.length === 0 && curPath.length === 1
+                ? scaleLinear().domain([0, cumulative]).range([0, totalWidth])
+                : xScale;
+            var onMouseEnter = function () { return setHoveringNode(d); };
+            var onMouseLeave = function () { return setHoveringNode(undefined); };
+            return (_jsxs(React.Fragment, { children: [_jsx(IcicleRect, { x: xStart, y: 0, width: width, height: RowHeight, name: name, color: color, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, curPath: curPath }, "rect-".concat(key)), data !== undefined && data.length > 0 && (_jsx(IcicleGraphNodes, { data: d.children, x: xStart, y: RowHeight, xScale: newXScale, total: total, totalWidth: totalWidth, level: nextLevel, setHoveringNode: setHoveringNode, path: nextPath, curPath: nextCurPath, setCurPath: setCurPath }, "node-".concat(key)))] }, "node-".concat(key)));
+        }) })));
+}
+var MemoizedIcicleGraphNodes = React.memo(IcicleGraphNodes);
+export function IcicleGraphRootNode(_a) {
+    var node = _a.node, xScale = _a.xScale, total = _a.total, totalWidth = _a.totalWidth, setHoveringNode = _a.setHoveringNode, setCurPath = _a.setCurPath, curPath = _a.curPath;
+    var isDarkMode = useAppSelector(selectDarkMode);
+    var cumulative = parseFloat(node.cumulative);
+    var diff = parseFloat(node.diff);
+    var color = diffColor(diff, cumulative, isDarkMode);
+    var onClick = function () { return setCurPath([]); };
+    var onMouseEnter = function () { return setHoveringNode(node); };
+    var onMouseLeave = function () { return setHoveringNode(undefined); };
+    var path = [];
+    return (_jsxs("g", __assign({ transform: 'translate(0, 0)' }, { children: [_jsx(IcicleRect, { x: 0, y: 0, width: totalWidth, height: RowHeight, name: 'root', color: color, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, curPath: curPath }), _jsx(MemoizedIcicleGraphNodes, { data: node.children, x: 0, y: RowHeight, xScale: xScale, total: total, totalWidth: totalWidth, level: 0, setHoveringNode: setHoveringNode, path: path, curPath: curPath, setCurPath: setCurPath })] })));
+}
+var MemoizedIcicleGraphRootNode = React.memo(IcicleGraphRootNode);
+export default function IcicleGraph(_a) {
+    var graph = _a.graph, width = _a.width, setCurPath = _a.setCurPath, curPath = _a.curPath, sampleUnit = _a.sampleUnit;
+    var _b = useState(), hoveringNode = _b[0], setHoveringNode = _b[1];
+    var _c = useState([0, 0]), pos = _c[0], setPos = _c[1];
+    var _d = useState(0), height = _d[0], setHeight = _d[1];
+    var svg = useRef(null);
+    var ref = useRef(null);
+    useEffect(function () {
+        if (ref.current != null) {
+            setHeight(ref === null || ref === void 0 ? void 0 : ref.current.getBoundingClientRect().height);
+        }
+    }, [width]);
+    if (graph.root === undefined || width === undefined)
+        return _jsx(_Fragment, {});
+    var throttledSetPos = throttle(setPos, 20);
+    var onMouseMove = function (e) {
+        // X/Y coordinate array relative to svg
+        var rel = pointer(e);
+        throttledSetPos([rel[0], rel[1]]);
+    };
+    var total = parseFloat(graph.total);
+    var xScale = scaleLinear().domain([0, total]).range([0, width]);
+    return (_jsxs("div", __assign({ onMouseLeave: function () { return setHoveringNode(undefined); } }, { children: [_jsx(GraphTooltip, { unit: sampleUnit, total: total, x: pos[0], y: pos[1], hoveringNode: hoveringNode, contextElement: svg.current }), _jsx("svg", __assign({ className: "font-robotoMono", width: width, height: height, onMouseMove: onMouseMove, preserveAspectRatio: "xMinYMid", ref: svg }, { children: _jsx("g", __assign({ ref: ref }, { children: _jsx(MemoizedIcicleGraphRootNode, { node: graph.root, setHoveringNode: setHoveringNode, curPath: curPath, setCurPath: setCurPath, xScale: xScale, total: total, totalWidth: width }) })) }))] })));
+}

package/dist/MatchersInput/index.d.ts

@@ -0,0 +1,23 @@
+import { Query } from '@parca/parser';
+import { LabelsResponse, QueryServiceClient, ValuesResponse } from '@parca/client';
+interface MatchersInputProps {
+    queryClient: QueryServiceClient;
+    setMatchersString: (arg: string) => void;
+    runQuery: () => void;
+    currentQuery: Query;
+}
+export interface ILabelNamesResult {
+    response?: LabelsResponse;
+    error?: Error;
+}
+export interface ILabelValuesResult {
+    response?: ValuesResponse;
+    error?: Error;
+}
+interface UseLabelNames {
+    result: ILabelNamesResult;
+    loading: boolean;
+}
+export declare const useLabelNames: (client: QueryServiceClient) => UseLabelNames;
+declare const MatchersInput: ({ queryClient, setMatchersString, runQuery, currentQuery, }: MatchersInputProps) => JSX.Element;
+export default MatchersInput;