@parca/profile 0.16.0 → 0.16.22

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.16.22](https://github.com/parca-dev/parca/compare/ui-v0.16.20...ui-v0.16.22) (2022-09-27)
+
+**Note:** Version bump only for package @parca/profile
+
+
+
+
+
+## [0.16.21](https://github.com/parca-dev/parca/compare/ui-v0.16.20...ui-v0.16.21) (2022-09-27)
+
+**Note:** Version bump only for package @parca/profile
+
+
+
+
+
+## [0.16.20](https://github.com/parca-dev/parca/compare/ui-v0.16.19...ui-v0.16.20) (2022-09-27)
+
+**Note:** Version bump only for package @parca/profile
+
+
+
+
+
+## [0.16.19](https://github.com/parca-dev/parca/compare/ui-v0.16.18...ui-v0.16.19) (2022-09-26)
+
+**Note:** Version bump only for package @parca/profile
+
+
+
+
+
+## [0.16.16](https://github.com/parca-dev/parca/compare/ui-v0.16.15...ui-v0.16.16) (2022-09-26)
+
+**Note:** Version bump only for package @parca/profile
+
+
+
+
+
 # [0.16.0](https://github.com/parca-dev/parca/compare/ui-v0.15.26...ui-v0.16.0) (2022-09-13)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/Edge/index.d.ts

@@ -0,0 +1,22 @@
+export interface IEdge {
+    source: number;
+    target: number;
+    color: string;
+    points: string;
+}
+interface Props {
+    edge: IEdge;
+    sourceNode: {
+        x: number;
+        y: number;
+    };
+    targetNode: {
+        x: number;
+        y: number;
+    };
+    xScale: (x: number) => number;
+    yScale: (y: number) => number;
+    nodeRadius: number;
+}
+declare const Edge: ({ edge, sourceNode, targetNode, xScale, yScale, nodeRadius }: Props) => JSX.Element;
+export default Edge;

package/dist/Callgraph/Edge/index.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } 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 { Arrow } from 'react-konva';
+import { parseEdgePos } from '../utils';
+var Edge = function (_a) {
+    var edge = _a.edge, sourceNode = _a.sourceNode, targetNode = _a.targetNode, xScale = _a.xScale, yScale = _a.yScale, nodeRadius = _a.nodeRadius;
+    var points = edge.points, color = edge.color, source = edge.source, target = edge.target;
+    var scaledPoints = parseEdgePos({
+        pos: points,
+        xScale: xScale,
+        yScale: yScale,
+        source: [sourceNode.x, sourceNode.y],
+        target: [targetNode.x, targetNode.y],
+        nodeRadius: nodeRadius,
+        isSelfLoop: source === target,
+    });
+    return (_jsx(Arrow, { points: scaledPoints, bezier: true, stroke: color, strokeWidth: 3, pointerLength: 10, pointerWidth: 10, fill: color, opacity: 0.8 }));
+};
+export default Edge;

package/dist/Callgraph/Node/index.d.ts

@@ -0,0 +1,19 @@
+export interface INode {
+    id: number;
+    x: number;
+    y: number;
+    data: {
+        id: string;
+    };
+    color: string;
+    mouseX?: number;
+    mouseY?: number;
+}
+interface Props {
+    node: INode;
+    hoveredNode: INode | null;
+    setHoveredNode: (node: INode | null) => void;
+    nodeRadius: number;
+}
+declare const Node: ({ node, hoveredNode, setHoveredNode, nodeRadius, }: Props) => JSX.Element;
+export default Node;

package/dist/Callgraph/Node/index.js

@@ -0,0 +1,37 @@
+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 } 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 { Circle } from 'react-konva';
+var Node = function (_a) {
+    var node = _a.node, hoveredNode = _a.hoveredNode, setHoveredNode = _a.setHoveredNode, defaultRadius = _a.nodeRadius;
+    var id = node.data.id, x = node.x, y = node.y, color = node.color;
+    var hoverRadius = defaultRadius + 3;
+    var isHovered = Boolean(hoveredNode) && (hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.data.id) === id;
+    return (_jsx(Circle, { x: +x, y: +y, draggable: true, radius: isHovered ? hoverRadius : defaultRadius, fill: color, onMouseOver: function () {
+            setHoveredNode(__assign(__assign({}, node), { mouseX: x, mouseY: y }));
+        }, onMouseOut: function () {
+            setHoveredNode(null);
+        } }));
+};
+export default Node;

package/dist/Callgraph/index.d.ts

@@ -0,0 +1,8 @@
+import { Callgraph as CallgraphType } from '@parca/client';
+export interface Props {
+    graph: CallgraphType;
+    sampleUnit: string;
+    width: number;
+}
+declare const Callgraph: ({ graph, sampleUnit, width }: Props) => JSX.Element;
+export default Callgraph;

package/dist/Callgraph/index.js

@@ -0,0 +1,137 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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");
+// 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 { useState, useEffect, useRef } from 'react';
+import graphviz from 'graphviz-wasm';
+import * as d3 from 'd3';
+import { Stage, Layer } from 'react-konva';
+import Tooltip from '../GraphTooltip';
+import { jsonToDot } from './utils';
+import Node from './Node';
+import Edge from './Edge';
+var Callgraph = function (_a) {
+    var _b, _c;
+    var graph = _a.graph, sampleUnit = _a.sampleUnit, width = _a.width;
+    var containerRef = useRef(null);
+    var _d = useState(null), graphData = _d[0], setGraphData = _d[1];
+    var _e = useState(null), hoveredNode = _e[0], setHoveredNode = _e[1];
+    var rawNodes = graph.nodes, total = graph.cumulative;
+    var nodeRadius = 12;
+    useEffect(function () {
+        var getDataWithPositions = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var dataAsDot, jsonGraph;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        dataAsDot = jsonToDot({ graph: graph, width: width, nodeRadius: nodeRadius });
+                        // 2. Use Graphviz-WASM to translate the 'dot' graph to a 'JSON' graph
+                        return [4 /*yield*/, graphviz.loadWASM()];
+                    case 1:
+                        // 2. Use Graphviz-WASM to translate the 'dot' graph to a 'JSON' graph
+                        _a.sent(); // need to load the WASM instance and wait for it
+                        jsonGraph = graphviz.layout(dataAsDot, 'json', 'dot');
+                        setGraphData(jsonGraph);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        if (width !== null) {
+            void getDataWithPositions();
+        }
+    }, [graph, width]);
+    // 3. Render the graph with calculated layout in Canvas container
+    if (width == null || graphData == null)
+        return _jsx(_Fragment, {});
+    var height = width;
+    var _f = JSON.parse(graphData), objects = _f.objects, gvizEdges = _f.edges, boundingBox = _f.bb;
+    var cumulatives = objects
+        .filter(function (node) { return node !== undefined; })
+        .map(function (node) { return node.cumulative; });
+    if (cumulatives.length === 0) {
+        cumulatives.push('0');
+    }
+    var valueRange = d3.extent(cumulatives).map(function (value) { return parseInt(value); });
+    var colorScale = d3
+        .scaleSequentialLog(d3.interpolateRdGy)
+        .domain(valueRange)
+        .range(['lightgrey', 'red']);
+    var graphBB = boundingBox.split(',');
+    var xScale = d3
+        .scaleLinear()
+        .domain([0, Number(graphBB[2])])
+        .range([0, width]);
+    var yScale = d3
+        .scaleLinear()
+        .domain([0, Number(graphBB[3])])
+        .range([0, height]);
+    var nodes = objects.map(function (object) {
+        var _a;
+        var pos = object.pos.split(',');
+        return __assign(__assign({}, object), { id: object._gvid, x: xScale(parseInt(pos[0])), y: yScale(parseInt(pos[1])), color: colorScale(Number(object.cumulative)), data: (_a = rawNodes.find(function (n) { return n.id === object.name; })) !== null && _a !== void 0 ? _a : { id: 'n0' } });
+    });
+    var edges = gvizEdges.map(function (edge) { return (__assign(__assign({}, edge), { source: edge.head, target: edge.tail, points: edge.pos, color: colorScale(+edge.cumulative) })); });
+    return (_jsx("div", __assign({ className: "relative" }, { children: _jsxs("div", __assign({ className: "w-[".concat(width, "px] h-[").concat(height, "px]"), ref: containerRef }, { children: [_jsx(Stage, __assign({ width: width, height: height }, { children: _jsxs(Layer, { children: [edges.map(function (edge) {
+                                var _a, _b;
+                                var sourceNode = (_a = nodes.find(function (n) { return n.id === edge.source; })) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
+                                var targetNode = (_b = nodes.find(function (n) { return n.id === edge.target; })) !== null && _b !== void 0 ? _b : { x: 0, y: 0 };
+                                return (_jsx(Edge, { edge: edge, xScale: xScale, yScale: yScale, sourceNode: sourceNode, targetNode: targetNode, nodeRadius: nodeRadius }, "edge-".concat(edge.source, "-").concat(edge.target)));
+                            }), nodes.map(function (node) { return (_jsx(Node, { node: node, hoveredNode: hoveredNode, setHoveredNode: setHoveredNode, nodeRadius: nodeRadius }, "node-".concat(node.data.id))); })] }) })), _jsx(Tooltip, { hoveringNode: rawNodes.find(function (n) { return n.id === (hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.data.id); }), unit: sampleUnit, total: +total, isFixed: false, x: (_b = hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.mouseX) !== null && _b !== void 0 ? _b : 0, y: (_c = hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.mouseY) !== null && _c !== void 0 ? _c : 0, contextElement: containerRef.current })] })) })));
+};
+export default Callgraph;

package/dist/Callgraph/mockData/index.d.ts

@@ -0,0 +1,148 @@
+export declare const dotGraph = "{\n n1 [Label = \"n1\"];\n n2 [Label = \"n2\"];\n n3 [Label = \"n3\"];\n n1 -- n2;\n n1 -- n3;\n n2 -- n2;\n}";
+export declare const jsonGraph: {
+    total: string;
+    unit: string;
+    nodes: {
+        id: string;
+        label: string;
+        value: number;
+    }[];
+    edges: {
+        id: string;
+        source: string;
+        target: string;
+        label: string;
+    }[];
+};
+export declare const 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 declare const jsonGraphWithGraphvizPositions: {
+    name: string;
+    directed: boolean;
+    strict: boolean;
+    _draw_: ({
+        op: string;
+        grad: string;
+        color: string;
+        points?: undefined;
+    } | {
+        op: string;
+        points: number[][];
+        grad?: undefined;
+        color?: undefined;
+    })[];
+    bb: string;
+    xdotversion: string;
+    _subgraph_cnt: number;
+    objects: {
+        _gvid: number;
+        name: string;
+        Label: string;
+        _draw_: ({
+            op: string;
+            grad: string;
+            color: string;
+            rect?: undefined;
+        } | {
+            op: string;
+            rect: number[];
+            grad?: undefined;
+            color?: undefined;
+        })[];
+        _ldraw_: ({
+            op: string;
+            size: number;
+            face: string;
+            grad?: undefined;
+            color?: undefined;
+            pt?: undefined;
+            align?: undefined;
+            width?: undefined;
+            text?: undefined;
+        } | {
+            op: string;
+            grad: string;
+            color: string;
+            size?: undefined;
+            face?: undefined;
+            pt?: undefined;
+            align?: undefined;
+            width?: undefined;
+            text?: undefined;
+        } | {
+            op: string;
+            pt: number[];
+            align: string;
+            width: number;
+            text: string;
+            size?: undefined;
+            face?: undefined;
+            grad?: undefined;
+            color?: undefined;
+        })[];
+        fillcolor: string;
+        fixedsize: string;
+        fontcolor: string;
+        height: string;
+        label: string;
+        margin: string;
+        pos: string;
+        shape: string;
+        style: string;
+        width: string;
+    }[];
+    edges: {
+        _gvid: number;
+        tail: number;
+        head: number;
+        _draw_: ({
+            op: string;
+            grad: string;
+            color: string;
+            points?: undefined;
+        } | {
+            op: string;
+            points: number[][];
+            grad?: undefined;
+            color?: undefined;
+        })[];
+        _hdraw_: ({
+            op: string;
+            style: string;
+            grad?: undefined;
+            color?: undefined;
+            points?: undefined;
+        } | {
+            op: string;
+            grad: string;
+            color: string;
+            style?: undefined;
+            points?: undefined;
+        } | {
+            op: string;
+            points: number[][];
+            style?: undefined;
+            grad?: undefined;
+            color?: undefined;
+        })[];
+        pos: string;
+    }[];
+};
+export declare const nodeWithMetaData: (id: string, name: string) => {
+    id: string;
+    cumulative: number;
+    meta: any;
+};
+export declare const jsonGraphWithMetaData: {
+    total: string;
+    nodes: {
+        id: string;
+        cumulative: number;
+        meta: any;
+    }[];
+    edges: {
+        id: string;
+        source: string;
+        target: string;
+        cumulative: string;
+    }[];
+};