@parca/profile 0.16.136 → 0.16.138

package/src/Callgraph/index.tsx

@@ -15,355 +15,159 @@ import {useEffect, useRef, useState} from 'react';
 
 import cx from 'classnames';
 import * as d3 from 'd3';
-import graphviz from 'graphviz-wasm';
-import type {KonvaEventObject} from 'konva/lib/Node';
-import {Arrow, Label, Layer, Rect, Stage, Text} from 'react-konva';
+import SVG from 'react-inlinesvg';
+import {MapInteractionCSS} from 'react-map-interaction';
 
-import {CallgraphEdge, CallgraphNode, Callgraph as CallgraphType} from '@parca/client';
-import {Button, useURLState} from '@parca/components';
-import {isSearchMatch, selectQueryParam} from '@parca/functions';
+import {CallgraphEdge, Callgraph as CallgraphType} from '@parca/client';
+import {Button, useKeyDown, useURLState} from '@parca/components';
+import {getNewSpanColor} from '@parca/functions';
+import {selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector} from '@parca/store';
 
-import Tooltip, {type HoveringNode} from '../GraphTooltip';
-import {DEFAULT_NODE_HEIGHT, GRAPH_MARGIN} from './constants';
-import {getCurvePoints, jsonToDot} from './utils';
+import GraphTooltip from '../GraphTooltip';
 
-interface NodeProps {
-  node: INode;
-  hoveredNode: INode | null;
-  setHoveredNode: (node: INode | null) => void;
-  isCurrentSearchMatch: boolean;
-}
-interface EdgeProps {
-  edge: GraphvizEdge;
-  sourceNode: {x: number; y: number};
-  targetNode: {x: number; y: number};
-  xScale: (x: number) => number;
-  yScale: (y: number) => number;
-  isCurrentSearchMatch: boolean;
-}
 export interface Props {
-  graph: CallgraphType;
+  data: CallgraphType;
+  svgString: string;
   sampleUnit: string;
   width: number;
-  colorRange: [string, string];
-}
-
-interface GraphvizNode extends CallgraphNode {
-  _gvid: number;
-  name: string;
-  pos: string;
-  functionName: string;
-  color: string;
-  width: string | number;
-  height: string | number;
-}
-
-interface INode extends GraphvizNode {
-  x: number;
-  y: number;
-  data: {id: string};
-  mouseX?: number;
-  mouseY?: number;
 }
 
-interface GraphvizEdge extends CallgraphEdge {
-  _gvid: number;
-  tail: number;
-  head: number;
-  pos: string;
-  color: string;
-  opacity: string;
-  boxHeight: number;
+interface View {
+  scale: number;
+  translation: {x: number; y: number};
 }
 
-interface GraphvizType {
-  edges: GraphvizEdge[];
-  objects: GraphvizNode[];
-  bb: string;
-}
-
-const Node = ({
-  node,
-  hoveredNode,
-  setHoveredNode,
-  isCurrentSearchMatch,
-}: NodeProps): JSX.Element => {
-  const {
-    data: {id},
-    x,
-    y,
-    color,
-    functionName,
-    width: widthString,
-    height: heightString,
-  } = node;
-  const isHovered = Boolean(hoveredNode) && hoveredNode?.data.id === id;
-  const width = Number(widthString);
-  const height = Number(heightString);
-  const textPadding = 6;
-  const opacity = isCurrentSearchMatch ? 1 : 0.1;
-
-  return (
-    <Label x={x - width / 2} y={y - height / 2}>
-      <Rect
-        width={width}
-        height={height}
-        fill={color}
-        opacity={opacity}
-        cornerRadius={3}
-        stroke={isHovered ? 'black' : color}
-        strokeWidth={2}
-        onMouseOver={e => {
-          setHoveredNode({...node, mouseX: e.evt.clientX, mouseY: e.evt.clientY});
-        }}
-        onMouseOut={() => {
-          setHoveredNode(null);
-        }}
-      />
-      {width > DEFAULT_NODE_HEIGHT + 10 && (
-        <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}
-        />
-      )}
-    </Label>
-  );
-};
-
-const Edge = ({
-  edge,
-  sourceNode,
-  targetNode,
-  xScale,
-  yScale,
-  isCurrentSearchMatch,
-}: EdgeProps): JSX.Element => {
-  const {pos, color, head, tail, opacity, boxHeight} = edge;
-
-  const points = getCurvePoints({
-    pos,
-    xScale,
-    yScale,
-    source: [sourceNode.x, sourceNode.y],
-    target: [targetNode.x, targetNode.y],
-    offset: boxHeight / 2,
-    isSelfLoop: head === tail,
-  });
-
-  return (
-    <Arrow
-      points={points}
-      bezier={true}
-      stroke={color}
-      strokeWidth={3}
-      pointerLength={10}
-      pointerWidth={10}
-      fill={color}
-      opacity={isCurrentSearchMatch ? Number(opacity) : 0}
-    />
-  );
-};
-
-const Callgraph = ({graph, sampleUnit, width, colorRange}: Props): JSX.Element => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [graphData, setGraphData] = useState<any>(null);
-  const [hoveredNode, setHoveredNode] = useState<INode | null>(null);
-  const [stage, setStage] = useState<{scale: {x: number; y: number}; x: number; y: number}>({
-    scale: {x: 1, y: 1},
-    x: 0,
-    y: 0,
-  });
-  const {nodes: rawNodes, cumulative: total} = graph;
-  const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
-  const isSearchEmpty = currentSearchString === undefined || currentSearchString === '';
+const Callgraph = ({data, svgString, sampleUnit, width}: Props): JSX.Element => {
+  const originalView = {
+    scale: 1,
+    translation: {x: 0, y: 0},
+  };
+  const [view, setView] = useState<View>(originalView);
+  const containerRef = useRef(null);
+  const svgRef = useRef(null);
+  const svgWrapper = useRef(null);
+  const [svgWrapperLoaded, setSvgWrapperLoaded] = useState(false);
+  const dispatch = useAppDispatch();
+  const {isShiftDown} = useKeyDown();
+  // TODO: implement highlighting nodes on user search
+  // const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
+  // const isSearchEmpty = currentSearchString === undefined || currentSearchString === '';
+  // const isCurrentSearchMatch = isSearchEmpty
+  //   ? true
+  //   : isSearchMatch(currentSearchString, sourceNode.functionName) &&
+  //     isSearchMatch(currentSearchString, targetNode.functionName);
   const [rawDashboardItems] = useURLState({param: 'dashboard_items'});
-
   const dashboardItems =
     rawDashboardItems !== undefined ? (rawDashboardItems as string[]) : ['icicle'];
 
-  useEffect(() => {
-    const getDataWithPositions = async (): Promise<void> => {
-      // 1. Translate JSON to 'dot' graph string
-      const dataAsDot = jsonToDot({
-        graph,
-        width,
-        colorRange,
-      });
-
-      // 2. Use Graphviz-WASM to translate the 'dot' graph to a 'JSON' graph
-      await graphviz.loadWASM(); // need to load the WASM instance and wait for it
+  const isDarkMode = useAppSelector(selectDarkMode);
+  const maxColor: string = getNewSpanColor(isDarkMode);
+  const minColor: string = d3.scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
+  const colorRange: [string, string] = [minColor, maxColor];
+  const cumulatives = data.edges.map((edge: CallgraphEdge) => parseInt(edge.cumulative));
+  const cumulativesRange = d3.extent(cumulatives);
+  const colorScale = d3
+    .scaleSequentialLog(d3.interpolateBlues)
+    .domain([Number(cumulativesRange[0]), Number(cumulativesRange[1])])
+    .range(colorRange);
 
-      const jsonGraph = graphviz.layout(dataAsDot, 'json', 'dot');
-
-      setGraphData(jsonGraph);
-    };
-
-    if (width !== null) {
-      void getDataWithPositions();
-    }
-  }, [graph, width, colorRange]);
-
-  // 3. Render the graph with calculated layout in Canvas container
-  if (width == null || graphData == null) return <></>;
-  const {objects: gvizNodes, edges, bb: boundingBox} = JSON.parse(graphData) as GraphvizType;
-
-  if (gvizNodes.length < 1) return <>Profile has no samples</>;
-
-  const graphBB = boundingBox.split(',');
-  const bbWidth = Number(graphBB[2]);
-  const bbHeight = Number(graphBB[3]);
-  const height = (width * bbHeight) / bbWidth;
-  const xScale = d3
-    .scaleLinear()
-    .domain([0, bbWidth])
-    .range([0, width - 2 * GRAPH_MARGIN]);
-  const yScale = d3
-    .scaleLinear()
-    .domain([0, bbHeight])
-    .range([0, height - 2 * GRAPH_MARGIN]);
-
-  const nodes: INode[] = gvizNodes.map((node: GraphvizNode) => {
-    const [x, y] = node.pos.split(',');
-    return {
-      ...node,
-      x: xScale(Number(x)),
-      y: yScale(Number(y)),
-      data: rawNodes.find(n => n.id === node.name) ?? {id: 'n0'},
-    };
-  });
-
-  // 4. Add zooming
-  const handleWheel: (e: KonvaEventObject<WheelEvent>) => void = e => {
-    // stop default scrolling
-    e.evt.preventDefault();
-
-    const scaleBy = 1.01;
-    const stage = e.target.getStage();
+  useEffect(() => {
+    setSvgWrapperLoaded(true);
+  }, []);
 
-    if (stage !== null) {
-      const oldScale = stage.scaleX();
-      const pointer = stage.getPointerPosition() ?? {x: 0, y: 0};
-      const mousePointTo = {
-        x: pointer.x / oldScale - stage.x() / oldScale,
-        y: pointer.y / oldScale - stage.y() / oldScale,
+  useEffect(() => {
+    if (svgWrapperLoaded && svgRef.current !== null) {
+      const addInteraction = (): void => {
+        const svg = d3.select(svgRef.current);
+        const nodes = svg.selectAll('.node');
+
+        nodes.each(function () {
+          const nodeData = data.nodes.find((n): boolean => {
+            // @ts-expect-error
+            return n.id === this.id;
+          });
+          const defaultColor = colorScale(Number(nodeData?.cumulative));
+          const node = d3.select(this);
+          const path = node.select('path');
+
+          node
+            .style('cursor', 'pointer')
+            .on('mouseenter', function () {
+              if (isShiftDown) return;
+              d3.select(this).select('path').style('fill', 'white');
+              const hoveringNode = {
+                ...nodeData,
+                meta: {...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
-      let 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;
-      }
+      setTimeout(addInteraction, 1000);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [svgWrapper.current, svgWrapperLoaded]);
 
-      const newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
-      stage.scale({x: newScale, y: newScale});
+  if (data.nodes.length < 1) return <>Profile has no samples</>;
 
-      setStage({
-        scale: {x: newScale, y: newScale},
-        x: -(mousePointTo.x - pointer.x / newScale) * newScale,
-        y: -(mousePointTo.y - pointer.y / newScale) * newScale,
-      });
-    }
-  };
+  const resetView = (): void => setView(originalView);
 
-  // 5. Reset zoom
-  const resetZoom = (): void => {
-    setStage({
-      scale: {x: 1, y: 1},
-      x: 0,
-      y: 0,
-    });
-  };
+  const isResetViewButtonEnabled =
+    view.scale !== originalView.scale ||
+    view.translation.x !== originalView.translation.x ||
+    view.translation.y !== originalView.translation.y;
 
   return (
-    <div className="relative">
-      <div className={`w-[${width}px] h-[${height}px]`} ref={containerRef}>
-        <Stage
-          width={width}
-          height={height}
-          onWheel={handleWheel}
-          scaleX={stage.scale.x}
-          scaleY={stage.scale.y}
-          x={stage.x}
-          y={stage.y}
-          draggable
+    <div className="w-full relative">
+      <div ref={containerRef} className="w-full overflow-hidden">
+        <MapInteractionCSS
+          showControls
+          minScale={1}
+          maxScale={5}
+          value={view}
+          onChange={(value: View) => setView(value)}
         >
-          <Layer offsetX={-GRAPH_MARGIN} offsetY={-GRAPH_MARGIN}>
-            {edges.map((edge: GraphvizEdge) => {
-              // 'tail' in graphviz-wasm means 'source' and 'head' means 'target'
-              const sourceNode = nodes.find(n => n._gvid === edge.tail) ?? {
-                x: 0,
-                y: 0,
-                functionName: '',
-              };
-              const targetNode = nodes.find(n => n._gvid === edge.head) ?? {
-                x: 0,
-                y: 0,
-                functionName: '',
-              };
-              const isCurrentSearchMatch = isSearchEmpty
-                ? true
-                : isSearchMatch(currentSearchString, sourceNode.functionName) &&
-                  isSearchMatch(currentSearchString, targetNode.functionName);
-              return (
-                <Edge
-                  key={`edge-${edge.tail}-${edge.head}`}
-                  edge={edge}
-                  xScale={xScale}
-                  yScale={yScale}
-                  sourceNode={sourceNode}
-                  targetNode={targetNode}
-                  isCurrentSearchMatch={isCurrentSearchMatch}
-                />
-              );
-            })}
-            {nodes.map(node => {
-              const isCurrentSearchMatch = isSearchEmpty
-                ? true
-                : isSearchMatch(currentSearchString, node.functionName);
-              return (
-                <Node
-                  key={`node-${node._gvid}`}
-                  node={node}
-                  hoveredNode={hoveredNode}
-                  setHoveredNode={setHoveredNode}
-                  isCurrentSearchMatch={isCurrentSearchMatch}
-                />
-              );
-            })}
-          </Layer>
-        </Stage>
-        <Tooltip
-          hoveringNode={rawNodes.find(n => n.id === hoveredNode?.data.id) as HoveringNode}
-          unit={sampleUnit}
-          total={+total}
-          isFixed={false}
-          x={hoveredNode?.mouseX ?? 0}
-          y={hoveredNode?.mouseY ?? 0}
-          contextElement={containerRef.current}
-        />
-        {stage.scale.x !== 1 && (
-          <div
-            className={cx(
-              dashboardItems.length > 1 ? 'left-[25px]' : 'left-0',
-              'w-auto absolute top-[-46px]'
-            )}
-          >
-            <Button variant="neutral" onClick={resetZoom}>
-              Reset Zoom
-            </Button>
-          </div>
+          <SVG
+            ref={svgWrapper}
+            src={svgString}
+            width={width}
+            height="auto"
+            title="Callgraph"
+            innerRef={svgRef}
+          />
+        </MapInteractionCSS>
+        {svgRef.current !== null && (
+          <GraphTooltip
+            type="callgraph"
+            unit={sampleUnit}
+            total={parseInt(data.cumulative)}
+            contextElement={containerRef.current}
+          />
         )}
       </div>
+      <div
+        className={cx(
+          dashboardItems.length > 1 ? 'left-[25px]' : 'left-0',
+          'w-auto absolute top-[-46px]'
+        )}
+      >
+        <Button
+          variant="neutral"
+          onClick={resetView}
+          className="z-50"
+          disabled={!isResetViewButtonEnabled}
+        >
+          Reset View
+        </Button>
+      </div>
     </div>
   );
 };

package/src/Callgraph/utils.ts

@@ -12,11 +12,10 @@
 // limitations under the License.
 
 import * as d3 from 'd3';
+import {withAlphaHex} from 'with-alpha-hex';
 
 import {CallgraphEdge, CallgraphNode} from '@parca/client';
 
-import {DEFAULT_NODE_HEIGHT} from './constants';
-
 export const pixelsToInches = (pixels: number): number => pixels / 96;
 
 export const getCurvePoints = ({
@@ -94,28 +93,23 @@ export const jsonToDot = ({
   colorRange: [string, string];
 }): string => {
   const {nodes, edges} = graph;
-  const cumulatives = nodes.map((node: CallgraphNode) => node.cumulative);
-  const cumulativesRange = d3.extent(cumulatives).map(value => Number(value));
-
+  const cumulatives = edges.map((edge: CallgraphEdge) => Number(edge.cumulative));
+  const cumulativesRange = d3.extent(cumulatives) as [number, number];
   const colorScale = d3
     .scaleSequentialLog(d3.interpolateBlues)
     .domain(cumulativesRange)
     .range(colorRange);
-  const colorOpacityScale = d3.scaleSequentialLog().domain(cumulativesRange).range([0.2, 1]);
-  const boxWidthScale = d3
-    .scaleLog()
-    .domain(cumulativesRange)
-    .range([DEFAULT_NODE_HEIGHT, DEFAULT_NODE_HEIGHT + 40]);
+  const colorOpacityScale = d3.scaleLinear().domain(cumulativesRange).range([0.5, 1]);
 
   const nodesAsStrings = nodes.map((node: CallgraphNode) => {
+    const rgbColor = colorScale(Number(node.cumulative));
+    const hexColor = d3.color(rgbColor)?.formatHex() ?? 'red';
     const dataAttributes = {
-      address: node.meta?.location?.address ?? '',
-      functionName: node.meta?.function?.name ?? '',
-      cumulative: node.cumulative ?? '',
+      label: node.meta?.function?.name.substring(0, 12) ?? '',
       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 `"${node.id}" [${objectAsDotAttributes(dataAttributes)}]`;
@@ -124,21 +118,21 @@ export const jsonToDot = ({
   const edgesAsStrings = edges.map((edge: CallgraphEdge) => {
     const 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 `"${edge.source}" -> "${edge.target}" [${objectAsDotAttributes(dataAttributes)}]`;
   });
 
   const graphAsDot = `digraph "callgraph" {
-      rankdir="BT"
+      rankdir="TB"
       overlap="prism"
       ratio="1,3"
       margin=15
       edge [margin=0]
-      node [shape=box style=rounded height=${DEFAULT_NODE_HEIGHT}]
+      node [shape=box style="rounded,filled"]
       ${nodesAsStrings.join(' ')}
       ${edgesAsStrings.join(' ')}
     }`;