@parca/profile 0.16.136 → 0.16.138

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.138 (2023-03-16)
+
+**Note:** Version bump only for package @parca/profile
+
+## 0.16.137 (2023-03-15)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.136](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.135...@parca/profile@0.16.136) (2023-03-13)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/index.d.ts

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

package/dist/Callgraph/index.js

@@ -9,43 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     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 (g && (g = 0, op[0] && (_ = 0)), _) 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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.
@@ -61,166 +25,90 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
 import * as d3 from 'd3';
-import graphviz from 'graphviz-wasm';
-import { Arrow, Label, Layer, Rect, Stage, Text } from 'react-konva';
-import { Button, useURLState } from '@parca/components';
-import { isSearchMatch, selectQueryParam } from '@parca/functions';
-import Tooltip from '../GraphTooltip';
-import { DEFAULT_NODE_HEIGHT, GRAPH_MARGIN } from './constants';
-import { getCurvePoints, jsonToDot } from './utils';
-var Node = function (_a) {
-    var node = _a.node, hoveredNode = _a.hoveredNode, setHoveredNode = _a.setHoveredNode, isCurrentSearchMatch = _a.isCurrentSearchMatch;
-    var id = node.data.id, x = node.x, y = node.y, color = node.color, functionName = node.functionName, widthString = node.width, heightString = node.height;
-    var isHovered = Boolean(hoveredNode) && (hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.data.id) === id;
-    var width = Number(widthString);
-    var height = Number(heightString);
-    var textPadding = 6;
-    var opacity = isCurrentSearchMatch ? 1 : 0.1;
-    return (_jsxs(Label, __assign({ x: x - width / 2, y: y - height / 2 }, { children: [_jsx(Rect, { width: width, height: height, fill: color, opacity: opacity, cornerRadius: 3, stroke: isHovered ? 'black' : color, strokeWidth: 2, onMouseOver: function (e) {
-                    setHoveredNode(__assign(__assign({}, node), { mouseX: e.evt.clientX, mouseY: e.evt.clientY }));
-                }, onMouseOut: function () {
-                    setHoveredNode(null);
-                } }), width > DEFAULT_NODE_HEIGHT + 10 && (_jsx(Text, { text: functionName, fontSize: 10, fill: "white", width: width - textPadding, height: height - textPadding, x: textPadding / 2, y: textPadding / 2, align: "center", verticalAlign: "middle", listening: false }))] })));
-};
-var Edge = function (_a) {
-    var edge = _a.edge, sourceNode = _a.sourceNode, targetNode = _a.targetNode, xScale = _a.xScale, yScale = _a.yScale, isCurrentSearchMatch = _a.isCurrentSearchMatch;
-    var pos = edge.pos, color = edge.color, head = edge.head, tail = edge.tail, opacity = edge.opacity, boxHeight = edge.boxHeight;
-    var points = getCurvePoints({
-        pos: pos,
-        xScale: xScale,
-        yScale: yScale,
-        source: [sourceNode.x, sourceNode.y],
-        target: [targetNode.x, targetNode.y],
-        offset: boxHeight / 2,
-        isSelfLoop: head === tail,
-    });
-    return (_jsx(Arrow, { points: points, bezier: true, stroke: color, strokeWidth: 3, pointerLength: 10, pointerWidth: 10, fill: color, opacity: isCurrentSearchMatch ? Number(opacity) : 0 }));
-};
+import SVG from 'react-inlinesvg';
+import { MapInteractionCSS } from 'react-map-interaction';
+import { Button, useKeyDown, useURLState } from '@parca/components';
+import { getNewSpanColor } from '@parca/functions';
+import { selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector } from '@parca/store';
+import GraphTooltip from '../GraphTooltip';
 var Callgraph = function (_a) {
-    var _b, _c, _d;
-    var graph = _a.graph, sampleUnit = _a.sampleUnit, width = _a.width, colorRange = _a.colorRange;
+    var data = _a.data, svgString = _a.svgString, sampleUnit = _a.sampleUnit, width = _a.width;
+    var originalView = {
+        scale: 1,
+        translation: { x: 0, y: 0 },
+    };
+    var _b = useState(originalView), view = _b[0], setView = _b[1];
     var containerRef = useRef(null);
-    var _e = useState(null), graphData = _e[0], setGraphData = _e[1];
-    var _f = useState(null), hoveredNode = _f[0], setHoveredNode = _f[1];
-    var _g = useState({
-        scale: { x: 1, y: 1 },
-        x: 0,
-        y: 0,
-    }), stage = _g[0], setStage = _g[1];
-    var rawNodes = graph.nodes, total = graph.cumulative;
-    var currentSearchString = (_b = selectQueryParam('search_string')) !== null && _b !== void 0 ? _b : '';
-    var isSearchEmpty = currentSearchString === undefined || currentSearchString === '';
+    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;
+    // TODO: implement highlighting nodes on user search
+    // const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
+    // const isSearchEmpty = currentSearchString === undefined || currentSearchString === '';
+    // const isCurrentSearchMatch = isSearchEmpty
+    //   ? 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
+        .scaleSequentialLog(d3.interpolateBlues)
+        .domain([Number(cumulativesRange[0]), Number(cumulativesRange[1])])
+        .range(colorRange);
     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,
-                            colorRange: colorRange,
-                        });
-                        // 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, colorRange]);
-    // 3. Render the graph with calculated layout in Canvas container
-    if (width == null || graphData == null)
-        return _jsx(_Fragment, {});
-    var _h = JSON.parse(graphData), gvizNodes = _h.objects, edges = _h.edges, boundingBox = _h.bb;
-    if (gvizNodes.length < 1)
-        return _jsx(_Fragment, { children: "Profile has no samples" });
-    var graphBB = boundingBox.split(',');
-    var bbWidth = Number(graphBB[2]);
-    var bbHeight = Number(graphBB[3]);
-    var height = (width * bbHeight) / bbWidth;
-    var xScale = d3
-        .scaleLinear()
-        .domain([0, bbWidth])
-        .range([0, width - 2 * GRAPH_MARGIN]);
-    var yScale = d3
-        .scaleLinear()
-        .domain([0, bbHeight])
-        .range([0, height - 2 * GRAPH_MARGIN]);
-    var nodes = gvizNodes.map(function (node) {
-        var _a;
-        var _b = node.pos.split(','), x = _b[0], y = _b[1];
-        return __assign(__assign({}, node), { x: xScale(Number(x)), y: yScale(Number(y)), data: (_a = rawNodes.find(function (n) { return n.id === node.name; })) !== null && _a !== void 0 ? _a : { id: 'n0' } });
-    });
-    // 4. Add zooming
-    var handleWheel = function (e) {
-        var _a;
-        // stop default scrolling
-        e.evt.preventDefault();
-        var scaleBy = 1.01;
-        var stage = e.target.getStage();
-        if (stage !== null) {
-            var oldScale = stage.scaleX();
-            var pointer = (_a = stage.getPointerPosition()) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
-            var mousePointTo = {
-                x: pointer.x / oldScale - stage.x() / oldScale,
-                y: pointer.y / oldScale - stage.y() / oldScale,
+        setSvgWrapperLoaded(true);
+    }, []);
+    useEffect(function () {
+        if (svgWrapperLoaded && svgRef.current !== null) {
+            var addInteraction = function () {
+                var svg = d3.select(svgRef.current);
+                var nodes = svg.selectAll('.node');
+                nodes.each(function () {
+                    var _this = this;
+                    var nodeData = data.nodes.find(function (n) {
+                        // @ts-expect-error
+                        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');
+                    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 }) });
+                        // @ts-expect-error
+                        dispatch(setHoveringNode(hoveringNode));
+                    })
+                        .on('mouseleave', function () {
+                        if (isShiftDown)
+                            return;
+                        d3.select(this).select('path').style('fill', defaultColor);
+                        dispatch(setHoveringNode(undefined));
+                    });
+                    path.style('fill', defaultColor);
+                });
             };
-            // 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: newScale, y: newScale },
-                x: -(mousePointTo.x - pointer.x / newScale) * newScale,
-                y: -(mousePointTo.y - pointer.y / newScale) * newScale,
-            });
+            setTimeout(addInteraction, 1000);
         }
-    };
-    // 5. Reset zoom
-    var resetZoom = function () {
-        setStage({
-            scale: { x: 1, y: 1 },
-            x: 0,
-            y: 0,
-        });
-    };
-    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, onWheel: handleWheel, scaleX: stage.scale.x, scaleY: stage.scale.y, x: stage.x, y: stage.y, draggable: true }, { children: _jsxs(Layer, __assign({ offsetX: -GRAPH_MARGIN, offsetY: -GRAPH_MARGIN }, { children: [edges.map(function (edge) {
-                                var _a, _b;
-                                // 'tail' in graphviz-wasm means 'source' and 'head' means 'target'
-                                var sourceNode = (_a = nodes.find(function (n) { return n._gvid === edge.tail; })) !== null && _a !== void 0 ? _a : {
-                                    x: 0,
-                                    y: 0,
-                                    functionName: '',
-                                };
-                                var targetNode = (_b = nodes.find(function (n) { return n._gvid === edge.head; })) !== null && _b !== void 0 ? _b : {
-                                    x: 0,
-                                    y: 0,
-                                    functionName: '',
-                                };
-                                var isCurrentSearchMatch = isSearchEmpty
-                                    ? true
-                                    : isSearchMatch(currentSearchString, sourceNode.functionName) &&
-                                        isSearchMatch(currentSearchString, targetNode.functionName);
-                                return (_jsx(Edge, { edge: edge, xScale: xScale, yScale: yScale, sourceNode: sourceNode, targetNode: targetNode, isCurrentSearchMatch: isCurrentSearchMatch }, "edge-".concat(edge.tail, "-").concat(edge.head)));
-                            }), nodes.map(function (node) {
-                                var isCurrentSearchMatch = isSearchEmpty
-                                    ? true
-                                    : isSearchMatch(currentSearchString, node.functionName);
-                                return (_jsx(Node, { node: node, hoveredNode: hoveredNode, setHoveredNode: setHoveredNode, isCurrentSearchMatch: isCurrentSearchMatch }, "node-".concat(node._gvid)));
-                            })] })) })), _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: (_c = hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.mouseX) !== null && _c !== void 0 ? _c : 0, y: (_d = hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.mouseY) !== null && _d !== void 0 ? _d : 0, contextElement: containerRef.current }), stage.scale.x !== 1 && (_jsx("div", __assign({ className: cx(dashboardItems.length > 1 ? 'left-[25px]' : 'left-0', 'w-auto absolute top-[-46px]') }, { children: _jsx(Button, __assign({ variant: "neutral", onClick: resetZoom }, { children: "Reset Zoom" })) })))] })) })));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [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 ||
+        view.translation.x !== originalView.translation.x ||
+        view.translation.y !== originalView.translation.y;
+    return (_jsxs("div", __assign({ className: "w-full relative" }, { 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), contextElement: containerRef.current }))] })), _jsx("div", __assign({ className: cx(dashboardItems.length > 1 ? 'left-[25px]' : 'left-0', 'w-auto absolute top-[-46px]') }, { children: _jsx(Button, __assign({ variant: "neutral", onClick: resetView, className: "z-50", disabled: !isResetViewButtonEnabled }, { children: "Reset View" })) }))] })));
 };
 export default Callgraph;

package/dist/Callgraph/utils.js

@@ -20,7 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import * as d3 from 'd3';
-import { DEFAULT_NODE_HEIGHT } from './constants';
+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;
@@ -70,39 +70,35 @@ var objectAsDotAttributes = function (obj) {
 export var jsonToDot = function (_a) {
     var graph = _a.graph, colorRange = _a.colorRange;
     var nodes = graph.nodes, edges = graph.edges;
-    var cumulatives = nodes.map(function (node) { return node.cumulative; });
-    var cumulativesRange = d3.extent(cumulatives).map(function (value) { return Number(value); });
+    var cumulatives = edges.map(function (edge) { return Number(edge.cumulative); });
+    var cumulativesRange = d3.extent(cumulatives);
     var colorScale = d3
         .scaleSequentialLog(d3.interpolateBlues)
         .domain(cumulativesRange)
         .range(colorRange);
-    var colorOpacityScale = d3.scaleSequentialLog().domain(cumulativesRange).range([0.2, 1]);
-    var boxWidthScale = d3
-        .scaleLog()
-        .domain(cumulativesRange)
-        .range([DEFAULT_NODE_HEIGHT, DEFAULT_NODE_HEIGHT + 40]);
+    var colorOpacityScale = d3.scaleLinear().domain(cumulativesRange).range([0.5, 1]);
     var nodesAsStrings = nodes.map(function (node) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        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 = {
-            address: (_c = (_b = (_a = node.meta) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.address) !== null && _c !== void 0 ? _c : '',
-            functionName: (_f = (_e = (_d = node.meta) === null || _d === void 0 ? void 0 : _d.function) === null || _e === void 0 ? void 0 : _e.name) !== null && _f !== void 0 ? _f : '',
-            cumulative: (_g = node.cumulative) !== null && _g !== void 0 ? _g : '',
+            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 : '',
             root: (node.id === 'root').toString(),
-            // TODO: set box width scale to be based on flat value once we have that value available
-            width: boxWidthScale(Number(node.cumulative)),
-            color: colorScale(Number(node.cumulative)),
+            fillcolor: hexColor,
+            className: 'node',
+            id: node.id,
         };
         return "\"".concat(node.id, "\" [").concat(objectAsDotAttributes(dataAttributes), "]");
     });
     var edgesAsStrings = edges.map(function (edge) {
         var dataAttributes = {
             cumulative: edge.cumulative,
-            color: colorRange[1],
-            opacity: colorOpacityScale(Number(edge.cumulative)),
-            boxHeight: DEFAULT_NODE_HEIGHT,
+            color: withAlphaHex(colorRange[1], colorOpacityScale(Number(edge.cumulative))),
+            className: 'edge',
+            // boxHeight: DEFAULT_NODE_HEIGHT,
         };
         return "\"".concat(edge.source, "\" -> \"").concat(edge.target, "\" [").concat(objectAsDotAttributes(dataAttributes), "]");
     });
-    var graphAsDot = "digraph \"callgraph\" {\n      rankdir=\"BT\"\n      overlap=\"prism\"\n      ratio=\"1,3\"\n      margin=15\n      edge [margin=0]\n      node [shape=box style=rounded height=".concat(DEFAULT_NODE_HEIGHT, "]\n      ").concat(nodesAsStrings.join(' '), "\n      ").concat(edgesAsStrings.join(' '), "\n    }");
+    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    }");
     return graphAsDot;
 };

package/dist/GraphTooltip/index.d.ts

@@ -1,5 +1,13 @@
-import { CallgraphNode, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode } from '@parca/client';
+import { CallgraphNode, CallgraphNodeMeta, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode } from '@parca/client';
 import { Location, Mapping, Function as ParcaFunction } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
+interface ExtendedCallgraphNodeMeta extends CallgraphNodeMeta {
+    lineIndex: number;
+    locationIndex: number;
+}
+interface HoveringNode extends FlamegraphRootNode, FlamegraphNode, CallgraphNode {
+    diff: string;
+    meta?: FlamegraphNodeMeta | ExtendedCallgraphNodeMeta;
+}
 interface GraphTooltipProps {
     x?: number;
     y?: number;
@@ -13,12 +21,18 @@ interface GraphTooltipProps {
     mappings?: Mapping[];
     locations?: Location[];
     functions?: ParcaFunction[];
+    type?: string;
 }
-export interface HoveringNode extends CallgraphNode, FlamegraphRootNode, FlamegraphNode {
-    diff: string;
-    meta?: FlamegraphNodeMeta | {
-        [key: string]: any;
-    };
-}
-declare const GraphTooltip: ({ x, y, unit, total, hoveringNode: hoveringNodeProp, contextElement, isFixed, virtualContextElement, strings, mappings, locations, functions, }: GraphTooltipProps) => JSX.Element;
+export declare const GraphTooltipContent: ({ hoveringNode, unit, total, isFixed, strings, mappings, locations, functions, type, }: {
+    hoveringNode: HoveringNode;
+    unit: string;
+    total: number;
+    isFixed: boolean;
+    strings?: string[] | undefined;
+    mappings?: Mapping[] | undefined;
+    locations?: Location[] | undefined;
+    functions?: ParcaFunction[] | undefined;
+    type?: string | undefined;
+}) => JSX.Element;
+declare const GraphTooltip: ({ x, y, unit, total, hoveringNode: hoveringNodeProp, contextElement, isFixed, virtualContextElement, strings, mappings, locations, functions, type, }: GraphTooltipProps) => JSX.Element;
 export default GraphTooltip;

package/dist/GraphTooltip/index.js

@@ -76,9 +76,10 @@ function generateGetBoundingClientRect(contextElement, x, y) {
 }
 var TooltipMetaInfo = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var hoveringNode = _a.hoveringNode, onCopy = _a.onCopy, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions;
+    var hoveringNode = _a.hoveringNode, onCopy = _a.onCopy, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, _m = _a.type, type = _m === void 0 ? 'flamegraph' : _m;
     // populate meta from the flamegraph metadata tables
-    if (locations !== undefined &&
+    if (type === 'flamegraph' &&
+        locations !== undefined &&
         ((_b = hoveringNode.meta) === null || _b === void 0 ? void 0 : _b.locationIndex) !== undefined &&
         hoveringNode.meta.locationIndex !== 0) {
         var location_1 = locations[hoveringNode.meta.locationIndex - 1];
@@ -127,9 +128,9 @@ var TooltipMetaInfo = function (_a) {
                             ((_h = hoveringNode.meta) === null || _h === void 0 ? void 0 : _h.location.address) === '0' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hexifyAddress(hoveringNode.meta.location.address) }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: hexifyAddress(hoveringNode.meta.location.address) })) }))) }))] }), _jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Binary" })), _jsx("td", __assign({ className: "w-3/4 break-all" }, { children: ((_j = hoveringNode.meta) === null || _j === void 0 ? void 0 : _j.mapping) == null || hoveringNode.meta.mapping.file === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.mapping.file }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: getLastItem(hoveringNode.meta.mapping.file) })) }))) }))] }), _jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Build Id" })), _jsx("td", __assign({ className: "w-3/4 break-all" }, { children: ((_k = hoveringNode.meta) === null || _k === void 0 ? void 0 : _k.mapping) == null || ((_l = hoveringNode.meta) === null || _l === void 0 ? void 0 : _l.mapping.buildId) === '' ? (_jsx(NoData, {})) : (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.mapping.buildId }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: truncateString(getLastItem(hoveringNode.meta.mapping.buildId), 28) })) }))) }))] })] }));
 };
 var timeoutHandle = null;
-var GraphTooltipContent = function (_a) {
-    var hoveringNode = _a.hoveringNode, unit = _a.unit, total = _a.total, isFixed = _a.isFixed, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions;
-    var _b = useState(false), isCopied = _b[0], setIsCopied = _b[1];
+export var GraphTooltipContent = function (_a) {
+    var hoveringNode = _a.hoveringNode, unit = _a.unit, total = _a.total, isFixed = _a.isFixed, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, _b = _a.type, type = _b === void 0 ? 'flamegraph' : _b;
+    var _c = useState(false), isCopied = _c[0], setIsCopied = _c[1];
     var onCopy = function () {
         setIsCopied(true);
         if (timeoutHandle !== null) {
@@ -150,23 +151,22 @@ var GraphTooltipContent = function (_a) {
     };
     return (_jsx("div", __assign({ className: "text-sm flex ".concat(isFixed ? 'w-full' : '') }, { children: _jsx("div", __assign({ className: "m-auto w-full ".concat(isFixed ? 'w-full' : '') }, { children: _jsxs("div", __assign({ className: "border border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 shadow-lg min-h-52 w-[500px] flex justify-between flex-col" }, { children: [_jsx("div", __assign({ className: "flex flex-row" }, { children: _jsxs("div", __assign({ className: "mx-2" }, { children: [_jsx("div", __assign({ className: "font-semibold break-all h-10 flex items-center" }, { children: hoveringNode.meta === undefined ? (_jsx("p", { children: "root" })) : (_jsx(_Fragment, { children: hoveringNode.meta.function !== undefined &&
                                             hoveringNode.meta.function.name !== '' ? (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hoveringNode.meta.function.name }, { children: _jsx("button", __assign({ className: "cursor-pointer text-left" }, { children: hoveringNode.meta.function.name })) }))) : (_jsx(_Fragment, { children: hoveringNode.meta.location !== undefined &&
-                                                parseInt(hoveringNode.meta.location.address, 10) !== 0 ? (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hexifyAddress(hoveringNode.meta.location.address) }, { children: _jsx("button", __assign({ className: "cursor-pointer text-left" }, { children: hexifyAddress(hoveringNode.meta.location.address) })) }))) : (_jsx("p", { children: "unknown" })) })) })) })), _jsx("table", __assign({ className: "table-fixed pr-0 text-gray-700 dark:text-gray-300 my-2 w-full" }, { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Cumulative" })), _jsx("td", __assign({ className: "w-3/4" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: getTextForCumulative(hoveringNodeCumulative) }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: getTextForCumulative(hoveringNodeCumulative) })) })) }))] }), hoveringNode.diff !== undefined && diff !== 0 && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Diff" })), _jsx("td", __assign({ className: "w-3/4" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: diffText }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: diffText })) })) }))] })), _jsx(TooltipMetaInfo, { onCopy: onCopy, 
-                                                // @ts-expect-error
-                                                hoveringNode: hoveringNode, strings: strings, mappings: mappings, locations: locations, functions: functions })] }) }))] })) })), _jsx("span", __assign({ className: "block text-gray-500 text-xs mx-2" }, { children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' }))] })) })) })));
+                                                parseInt(hoveringNode.meta.location.address, 10) !== 0 ? (_jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: hexifyAddress(hoveringNode.meta.location.address) }, { children: _jsx("button", __assign({ className: "cursor-pointer text-left" }, { children: hexifyAddress(hoveringNode.meta.location.address) })) }))) : (_jsx("p", { children: "unknown" })) })) })) })), _jsx("table", __assign({ className: "table-fixed pr-0 text-gray-700 dark:text-gray-300 my-2 w-full" }, { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Cumulative" })), _jsx("td", __assign({ className: "w-3/4" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: getTextForCumulative(hoveringNodeCumulative) }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: getTextForCumulative(hoveringNodeCumulative) })) })) }))] }), hoveringNode.diff !== undefined && diff !== 0 && (_jsxs("tr", { children: [_jsx("td", __assign({ className: "w-1/4" }, { children: "Diff" })), _jsx("td", __assign({ className: "w-3/4" }, { children: _jsx(CopyToClipboard, __assign({ onCopy: onCopy, text: diffText }, { children: _jsx("button", __assign({ className: "cursor-pointer" }, { children: diffText })) })) }))] })), _jsx(TooltipMetaInfo, { onCopy: onCopy, hoveringNode: hoveringNode, strings: strings, mappings: mappings, locations: locations, functions: functions, type: type })] }) }))] })) })), _jsx("span", __assign({ className: "block text-gray-500 text-xs mx-2" }, { children: isCopied ? 'Copied!' : 'Hold shift and click on a value to copy.' }))] })) })) })));
 };
 var GraphTooltip = function (_a) {
-    var x = _a.x, y = _a.y, unit = _a.unit, total = _a.total, hoveringNodeProp = _a.hoveringNode, contextElement = _a.contextElement, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, _c = _a.virtualContextElement, virtualContextElement = _c === void 0 ? true : _c, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions;
+    var x = _a.x, y = _a.y, unit = _a.unit, total = _a.total, hoveringNodeProp = _a.hoveringNode, contextElement = _a.contextElement, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, _c = _a.virtualContextElement, virtualContextElement = _c === void 0 ? true : _c, strings = _a.strings, mappings = _a.mappings, locations = _a.locations, functions = _a.functions, _d = _a.type, type = _d === void 0 ? 'flamegraph' : _d;
     var hoveringNodeState = useAppSelector(selectHoveringNode);
+    // @ts-expect-error
     var hoveringNode = useMemo(function () {
-        var h = (hoveringNodeProp !== null && hoveringNodeProp !== void 0 ? hoveringNodeProp : hoveringNodeState);
+        var h = hoveringNodeProp !== null && hoveringNodeProp !== void 0 ? hoveringNodeProp : hoveringNodeState;
         if (h == null) {
             return h;
         }
         // Cloning the object to avoid the mutating error as this is Redux store object and we are modifying the meta object in GraphTooltipContent component.
         return __assign(__assign({}, h), { meta: __assign({}, h.meta) });
     }, [hoveringNodeProp, hoveringNodeState]);
-    var _d = useState(null), popperElement = _d[0], setPopperElement = _d[1];
-    var _e = usePopper(virtualContextElement ? virtualElement : contextElement, popperElement, {
+    var _e = useState(null), popperElement = _e[0], setPopperElement = _e[1];
+    var _f = usePopper(virtualContextElement ? virtualElement : contextElement, popperElement, {
         placement: 'bottom-start',
         strategy: 'absolute',
         modifiers: [
@@ -184,7 +184,7 @@ var GraphTooltip = function (_a) {
                 },
             },
         ],
-    }), styles = _e.styles, attributes = _e.attributes, popperProps = __rest(_e, ["styles", "attributes"]);
+    }), styles = _f.styles, attributes = _f.attributes, popperProps = __rest(_f, ["styles", "attributes"]);
     var isShiftDown = useKeyDown().isShiftDown;
     useEffect(function () {
         if (contextElement === null)
@@ -211,6 +211,6 @@ var GraphTooltip = function (_a) {
     }, [contextElement, popperProps, isShiftDown, x, y]);
     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, strings: strings, mappings: mappings, locations: locations, functions: functions }) })));
+    return isFixed ? (_jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, isFixed: isFixed, type: type })) : (_jsx("div", __assign({ ref: setPopperElement, style: styles.popper }, attributes.popper, { children: _jsx(GraphTooltipContent, { hoveringNode: hoveringNode, unit: unit, total: total, isFixed: isFixed, strings: strings, mappings: mappings, locations: locations, functions: functions, type: type }) })));
 };
 export default GraphTooltip;

package/dist/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.js

@@ -91,7 +91,8 @@ export var IcicleNode = React.memo(function IcicleNodeNoMemo(_a) {
     var onMouseEnter = function () {
         if (isShiftDown)
             return;
-        dispatch(setHoveringNode(data));
+        // need to add id and flat for tooltip purposes
+        dispatch(setHoveringNode(__assign(__assign({}, data), { id: '', flat: '' })));
     };
     var onMouseLeave = function () {
         if (isShiftDown)