@parca/profile 0.16.58 → 0.16.60

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.60](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.59...@parca/profile@0.16.60) (2022-11-03)
+
+**Note:** Version bump only for package @parca/profile
+
+## [0.16.59](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.58...@parca/profile@0.16.59) (2022-11-03)
+
+**Note:** Version bump only for package @parca/profile
+
 ## [0.16.58](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.57...@parca/profile@0.16.58) (2022-11-02)
 
 **Note:** Version bump only for package @parca/profile

package/dist/Callgraph/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_NODE_HEIGHT = 20;
+export declare const GRAPH_MARGIN = 15;

package/dist/Callgraph/constants.js

@@ -0,0 +1,14 @@
+// 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.
+export var DEFAULT_NODE_HEIGHT = 20;
+export var GRAPH_MARGIN = 15;

package/dist/Callgraph/index.d.ts

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

package/dist/Callgraph/index.js

@@ -45,7 +45,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         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";
+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.
@@ -61,26 +61,65 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useState, useEffect, useRef } from 'react';
 import graphviz from 'graphviz-wasm';
 import * as d3 from 'd3';
-import { Stage, Layer } from 'react-konva';
+import { Stage, Layer, Rect, Arrow, Text, Label } from 'react-konva';
+import { jsonToDot, getCurvePoints } from './utils';
+import { useAppSelector, selectSearchNodeString } from '@parca/store';
+import { isSearchMatch } from '@parca/functions';
 import Tooltip from '../GraphTooltip';
-import { jsonToDot } from './utils';
-import Node from './Node';
-import Edge from './Edge';
+import { DEFAULT_NODE_HEIGHT, GRAPH_MARGIN } from './constants';
+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 }));
+};
 var Callgraph = function (_a) {
     var _b, _c;
-    var graph = _a.graph, sampleUnit = _a.sampleUnit, width = _a.width;
+    var graph = _a.graph, sampleUnit = _a.sampleUnit, width = _a.width, colorRange = _a.colorRange;
     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 _f = useState({
+        scale: { x: 1, y: 1 },
+        x: 0,
+        y: 0,
+    }), stage = _f[0], setStage = _f[1];
     var rawNodes = graph.nodes, total = graph.cumulative;
-    var nodeRadius = 12;
+    var currentSearchString = useAppSelector(selectSearchNodeString);
+    var isSearchEmpty = currentSearchString === undefined;
     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 });
+                        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:
@@ -95,43 +134,75 @@ var Callgraph = function (_a) {
         if (width !== null) {
             void getDataWithPositions();
         }
-    }, [graph, width]);
+    }, [graph, width, colorRange]);
     // 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 _g = JSON.parse(graphData), gvizNodes = _g.objects, edges = _g.edges, boundingBox = _g.bb;
     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, Number(graphBB[2])])
-        .range([0, width]);
+        .domain([0, bbWidth])
+        .range([0, width - 2 * GRAPH_MARGIN]);
     var yScale = d3
         .scaleLinear()
-        .domain([0, Number(graphBB[3])])
-        .range([0, height]);
-    var nodes = objects.map(function (object) {
+        .domain([0, bbHeight])
+        .range([0, height - 2 * GRAPH_MARGIN]);
+    var nodes = gvizNodes.map(function (node) {
         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 _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' } });
     });
-    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) {
+    // 4. Add zooming
+    var handleWheel = function (e) {
+        var _a;
+        e.evt.preventDefault();
+        var scaleXBy = 0.95;
+        var scaleYBy = 1.05;
+        var stage = e.target.getStage();
+        if (stage !== null) {
+            var oldScale = stage.scaleX();
+            var _b = (_a = stage.getPointerPosition()) !== null && _a !== void 0 ? _a : { x: 0, y: 0 }, x = _b.x, y = _b.y;
+            var mousePointTo = {
+                x: x / oldScale - stage.x() / oldScale,
+                y: y / oldScale - stage.y() / oldScale,
+            };
+            var newXScale = e.evt.deltaX > 0 ? oldScale * scaleXBy : oldScale / scaleXBy;
+            var newYScale = e.evt.deltaY > 0 ? oldScale * scaleYBy : oldScale / scaleYBy;
+            stage.scale({ x: newXScale, y: newYScale });
+            setStage({
+                scale: { x: newXScale, y: newYScale },
+                x: -(mousePointTo.x - x / newXScale) * newXScale,
+                y: -(mousePointTo.y - y / newYScale) * newYScale,
+            });
+        }
+    };
+    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;
-                                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 })] })) })));
+                                // '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: (_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/utils.d.ts

@@ -1,19 +1,19 @@
 import { CallgraphNode, CallgraphEdge } from '@parca/client';
 export declare const pixelsToInches: (pixels: number) => number;
-export declare const parseEdgePos: ({ pos, xScale, yScale, source, target, nodeRadius, isSelfLoop, }: {
+export declare const getCurvePoints: ({ pos, xScale, yScale, source, target, offset, isSelfLoop, }: {
     pos: string;
-    xScale?: ((pos: number) => void) | undefined;
-    yScale?: ((pos: number) => void) | undefined;
+    xScale?: ((pos: number) => number) | undefined;
+    yScale?: ((pos: number) => number) | undefined;
     source?: number[] | undefined;
     target?: number[] | undefined;
-    nodeRadius: number;
     isSelfLoop?: boolean | undefined;
+    offset?: number | undefined;
 }) => number[];
-export declare const jsonToDot: ({ graph, width, nodeRadius, }: {
+export declare const jsonToDot: ({ graph, colorRange, }: {
     graph: {
         nodes: CallgraphNode[];
         edges: CallgraphEdge[];
     };
     width: number;
-    nodeRadius: number;
+    colorRange: [string, string];
 }) => string;

package/dist/Callgraph/utils.js

@@ -19,48 +19,68 @@ 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';
 export var pixelsToInches = function (pixels) { return pixels / 96; };
-export var parseEdgePos = function (_a) {
-    var _b;
-    var pos = _a.pos, _c = _a.xScale, xScale = _c === void 0 ? function (n) { return n; } : _c, _d = _a.yScale, yScale = _d === void 0 ? function (n) { return n; } : _d, _e = _a.source, source = _e === void 0 ? [] : _e, _f = _a.target, target = _f === void 0 ? [] : _f, nodeRadius = _a.nodeRadius, _g = _a.isSelfLoop, isSelfLoop = _g === void 0 ? false : _g;
-    var parts = pos.split(' ');
-    var arrow = (_b = parts.shift()) !== null && _b !== void 0 ? _b : '';
-    var partsAsArrays = parts.map(function (part) { return part.split(','); });
-    var scalePosArray = function (posArr) { return [+xScale(+posArr[0]), +yScale(+posArr[1])]; };
-    var _h = partsAsArrays.map(function (posArr) { return scalePosArray(posArr); }), _start = _h[0], cp1 = _h[1], cp2 = _h[2], _end = _h[3];
-    var arrowEnd = scalePosArray(arrow.replace('e,', '').split(','));
-    var getTargetWithOffset = function (target, lastEdgePoint) {
-        var diffX = target[0] - lastEdgePoint[0];
-        var diffY = target[1] - lastEdgePoint[1];
-        var diffZ = Math.hypot(diffX, diffY);
-        var offsetX = (diffX * nodeRadius) / diffZ;
-        var offsetY = (diffY * nodeRadius) / diffZ;
-        return [target[0] - offsetX, target[1] - offsetY];
-    };
+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;
     if (isSelfLoop) {
         var sourceX = source[0], sourceY = source[1];
         var targetX = target[0], targetY = target[1];
         return [
             sourceX,
-            sourceY + nodeRadius,
+            sourceY + offset,
             sourceX,
-            sourceY + 3 * nodeRadius,
-            targetX + 5 * nodeRadius,
+            sourceY + 3 * offset,
+            targetX + 5 * offset,
             targetY,
-            targetX + nodeRadius,
+            targetX + offset,
             targetY,
         ];
     }
-    return __spreadArray(__spreadArray(__spreadArray(__spreadArray([], source, true), cp1, true), cp2, true), getTargetWithOffset(target, arrowEnd), true);
+    // 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;
+        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(' ');
 };
 export var jsonToDot = function (_a) {
-    var graph = _a.graph, width = _a.width, nodeRadius = _a.nodeRadius;
+    var graph = _a.graph, colorRange = _a.colorRange;
     var nodes = graph.nodes, edges = graph.edges;
-    var objectAsDotAttributes = function (obj) {
-        return Object.entries(obj)
-            .map(function (entry) { return "".concat(entry[0], "=\"").concat(entry[1], "\""); })
-            .join(' ');
-    };
+    var cumulatives = nodes.map(function (node) { return node.cumulative; });
+    var cumulativesRange = d3.extent(cumulatives).map(function (value) { return Number(value); });
+    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 nodesAsStrings = nodes.map(function (node) {
         var _a, _b, _c, _d, _e, _f, _g;
         var dataAttributes = {
@@ -68,15 +88,21 @@ export var jsonToDot = function (_a) {
             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 : '',
             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)),
         };
         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,
         };
         return "\"".concat(edge.source, "\" -> \"").concat(edge.target, "\" [").concat(objectAsDotAttributes(dataAttributes), "]");
     });
-    var graphAsDot = "digraph \"callgraph\" {\n      rankdir=\"TB\"\n      ratio=\"1,3\"\n      size=\"".concat(pixelsToInches(width), ", ").concat(pixelsToInches(width), "!\"\n      margin=10\n      edge [margin=0]\n      node [margin=0 width=").concat(nodeRadius, "]\n      ").concat(nodesAsStrings.join(' '), "\n      ").concat(edgesAsStrings.join(' '), "\n    }");
+    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    }");
     return graphAsDot;
 };

package/dist/GraphTooltip/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CallgraphNode, FlamegraphNode, FlamegraphNodeMeta, FlamegraphRootNode } from '@parca/client';
 import { Function, Location, Mapping } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface GraphTooltipProps {

package/dist/IcicleGraph.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Flamegraph, FlamegraphNode, FlamegraphRootNode } from '@parca/client';
 import { Mapping, Function, Location } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
 interface IcicleGraphProps {

package/dist/MatchersInput/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Query } from '@parca/parser';
 import { LabelsResponse, QueryServiceClient, ValuesResponse } from '@parca/client';
 interface MatchersInputProps {

package/dist/MetricsCircle/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface MetricsCircleProps {
     cx: number;
     cy: number;

package/dist/MetricsGraph/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SingleProfileSelection } from '..';
 import { MetricsSeries as MetricsSeriesPb, Label } from '@parca/client';
 import { DateTimeRange } from '@parca/components';

package/dist/MetricsSeries/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as d3 from 'd3';
 interface MetricsSeriesProps {
     data: any;

package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProfileSelection } from '..';
 import { QueryServiceClient } from '@parca/client';
 import { NavigateFunction } from '.';

package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSelection } from '..';
 import { NavigateFunction } from '../ProfileExplorer';

package/dist/ProfileExplorer/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 export declare type NavigateFunction = (path: string, queryParams: any) => void;
 interface ProfileExplorerProps {

package/dist/ProfileIcicleGraph.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Flamegraph } from '@parca/client';
 interface ProfileIcicleGraphProps {
     width?: number;

package/dist/ProfileMetricsGraph/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProfileSelection } from '..';
 import { QueryServiceClient, QueryRangeResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';

package/dist/ProfileSelector/CompareButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const CompareButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/MergeButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const MergeButton: ({ disabled, onClick, }: {
     disabled: boolean;
     onClick: () => void;

package/dist/ProfileSelector/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient, ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 import { ProfileSelection } from '..';

package/dist/ProfileSource.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProfileType } from '@parca/parser';
 import { Label, QueryRequest, ProfileDiffSelection } from '@parca/client';
 export interface ProfileSource {

package/dist/ProfileTypeSelector/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProfileType, ProfileTypesResponse } from '@parca/client';
 import { RpcError } from '@protobuf-ts/runtime-rpc';
 interface WellKnownProfile {

package/dist/ProfileView.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { QueryServiceClient, Flamegraph, Top, Callgraph } from '@parca/client';
+import { QueryServiceClient, Flamegraph, Top, Callgraph as CallgraphType } from '@parca/client';
 import { ProfileSource } from './ProfileSource';
 import './ProfileView.styles.css';
 declare type NavigateFunction = (path: string, queryParams: any) => void;
@@ -15,7 +14,7 @@ export interface TopTableData {
 }
 interface CallgraphData {
     loading: boolean;
-    data?: Callgraph;
+    data?: CallgraphType;
     error?: any;
 }
 export declare type VisualizationType = 'icicle' | 'table' | 'callgraph' | 'both';

package/dist/ProfileView.js

@@ -23,15 +23,17 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useEffect, useMemo, useState } from 'react';
-import { parseParams } from '@parca/functions';
+import { getNewSpanColor, parseParams } from '@parca/functions';
 import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
 import { Button, Card, SearchNodes, useParcaTheme } from '@parca/components';
-import { Callgraph as CallgraphComponent } from './';
+import { Callgraph } from './';
 import { useContainerDimensions } from '@parca/dynamicsize';
+import { useAppSelector, selectDarkMode, selectSearchNodeString } from '@parca/store';
 import ProfileShareButton from './components/ProfileShareButton';
 import ProfileIcicleGraph from './ProfileIcicleGraph';
 import TopTable from './TopTable';
 import useDelayedLoader from './useDelayedLoader';
+import { scaleLinear } from 'd3';
 import './ProfileView.styles.css';
 function arrayEquals(a, b) {
     return (Array.isArray(a) &&
@@ -58,6 +60,8 @@ export var ProfileView = function (_a) {
     var _b = useContainerDimensions(), ref = _b.ref, dimensions = _b.dimensions;
     var _c = useState([]), curPath = _c[0], setCurPath = _c[1];
     var currentView = profileVisState.currentView, setCurrentView = profileVisState.setCurrentView;
+    var isDarkMode = useAppSelector(selectDarkMode);
+    var currentSearchString = useAppSelector(selectSearchNodeString);
     var callgraphEnabled = useUIFeatureFlag('callgraph')[0];
     var loader = useParcaTheme().loader;
     useEffect(function () {
@@ -102,10 +106,14 @@ export var ProfileView = function (_a) {
             return;
         }
         var router = parseParams(window.location.search);
-        navigateTo('/', __assign(__assign({}, router), { currentProfileView: view }));
+        navigateTo('/', __assign(__assign(__assign({}, router), { currentProfileView: view }), { searchString: currentSearchString }));
     };
-    return (_jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex py-3 w-full" }, { children: [_jsxs("div", __assign({ className: "w-2/5 flex space-x-4" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource != null && queryClient != null ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
-                                                    e.preventDefault();
-                                                    onDownloadPProf();
-                                                } }, { children: "Download pprof" }))] })), _jsx(SearchNodes, {})] })), _jsxs("div", __assign({ className: "flex ml-auto" }, { children: [_jsx("div", __assign({ className: "mr-3" }, { children: _jsx(Button, __assign({ color: "neutral", onClick: resetIcicleGraph, disabled: curPath.length === 0, className: "whitespace-nowrap text-ellipsis" }, { children: "Reset View" })) })), callgraphEnabled ? (_jsx("div", __assign({ className: "mr-3" }, { children: _jsx(Button, __assign({ variant: "".concat(currentView === 'callgraph' ? 'primary' : 'neutral'), onClick: function () { return switchProfileView('callgraph'); }, className: "whitespace-nowrap text-ellipsis" }, { children: "Call Graph" })) }))) : null, _jsx(Button, __assign({ variant: "".concat(currentView === 'table' ? 'primary' : 'neutral'), className: "items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('table'); } }, { children: "Table" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'both' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis", onClick: function () { return switchProfileView('both'); } }, { children: "Both" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'icicle' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('icicle'); } }, { children: "Icicle Graph" }))] }))] })), _jsxs("div", __assign({ ref: ref, className: "flex space-x-4 justify-between w-full" }, { children: [currentView === 'icicle' && (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit }) }))), currentView === 'callgraph' && (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined && (_jsx(CallgraphComponent, { graph: callgraphData.data, sampleUnit: sampleUnit, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width })) }))), currentView === 'table' && topTableData != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(TopTable, { data: topTableData.data, sampleUnit: sampleUnit }) }))), currentView === 'both' && (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "w-1/2" }, { children: _jsx(TopTable, { data: topTableData === null || topTableData === void 0 ? void 0 : topTableData.data, sampleUnit: sampleUnit }) })), _jsx("div", __assign({ className: "w-1/2" }, { children: flamegraphData != null && (_jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit })) }))] }))] }))] }) }) })));
+    var maxColor = getNewSpanColor(isDarkMode);
+    // TODO: fix colors for dark mode
+    var minColor = scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
+    var colorRange = [minColor, maxColor];
+    return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex py-3 w-full" }, { children: [_jsxs("div", __assign({ className: "w-2/5 flex space-x-4" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource != null && queryClient != null ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
+                                                        e.preventDefault();
+                                                        onDownloadPProf();
+                                                    } }, { children: "Download pprof" }))] })), _jsx(SearchNodes, {})] })), _jsxs("div", __assign({ className: "flex ml-auto" }, { children: [_jsx("div", __assign({ className: "mr-3" }, { children: _jsx(Button, __assign({ color: "neutral", onClick: resetIcicleGraph, disabled: curPath.length === 0, className: "whitespace-nowrap text-ellipsis" }, { children: "Reset View" })) })), callgraphEnabled ? (_jsx("div", __assign({ className: "mr-3" }, { children: _jsx(Button, __assign({ variant: "".concat(currentView === 'callgraph' ? 'primary' : 'neutral'), onClick: function () { return switchProfileView('callgraph'); }, className: "whitespace-nowrap text-ellipsis" }, { children: "Callgraph" })) }))) : null, _jsx(Button, __assign({ variant: "".concat(currentView === 'table' ? 'primary' : 'neutral'), className: "items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('table'); } }, { children: "Table" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'both' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis", onClick: function () { return switchProfileView('both'); } }, { children: "Both" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'icicle' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('icicle'); } }, { children: "Icicle Graph" }))] }))] })), _jsxs("div", __assign({ ref: ref, className: "flex space-x-4 justify-between w-full" }, { children: [currentView === 'icicle' && (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit }) }))), currentView === 'callgraph' && (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined && (_jsx(Callgraph, { graph: callgraphData.data, sampleUnit: sampleUnit, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, colorRange: colorRange })) }))), currentView === 'table' && topTableData != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(TopTable, { data: topTableData.data, sampleUnit: sampleUnit }) }))), currentView === 'both' && (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "w-1/2" }, { children: _jsx(TopTable, { data: topTableData === null || topTableData === void 0 ? void 0 : topTableData.data, sampleUnit: sampleUnit }) })), _jsx("div", __assign({ className: "w-1/2" }, { children: flamegraphData != null && (_jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit })) }))] }))] }))] }) }) })) }));
 };

package/dist/ProfileViewWithData.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryServiceClient } from '@parca/client';
 import { ProfileSource } from './ProfileSource';
 declare type NavigateFunction = (path: string, queryParams: any) => void;

package/dist/TopTable.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TopNodeMeta, Top } from '@parca/client';
 import './TopTable.styles.css';
 interface TopTableProps {

package/dist/components/DiffLegend.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const DiffLegend: () => JSX.Element;
 export default DiffLegend;

package/dist/components/ProfileShareButton/ResultBox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Props {
     value: string;
     className?: string;

package/dist/components/ProfileShareButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryRequest, QueryServiceClient } from '@parca/client';
 interface Props {
     queryRequest: QueryRequest;

package/dist/index.d.ts

@@ -12,7 +12,7 @@ export * from './ProfileViewWithData';
 export * from './utils';
 export * from './ProfileTypeSelector';
 export type { CallgraphProps };
-declare const Callgraph: React.LazyExoticComponent<({ graph, sampleUnit, width }: CallgraphProps) => JSX.Element>;
+declare const Callgraph: React.LazyExoticComponent<({ graph, sampleUnit, width, colorRange }: CallgraphProps) => JSX.Element>;
 export { Callgraph, ProfileExplorer, ProfileTypeSelector };
 interface GrafanaParcaDataPayload {
     flamegraphData: FlamegraphData;