@parca/profile 0.16.107 → 0.16.108

package/src/ProfileIcicleGraph/IcicleGraph/IcicleGraphNodes.tsx

@@ -0,0 +1,262 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, {useMemo} from 'react';
+
+import cx from 'classnames';
+import {scaleLinear} from 'd3-scale';
+import {
+  Mapping,
+  Function as ParcaFunction,
+  Location,
+} from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
+import {isSearchMatch} from '@parca/functions';
+import {FlamegraphNode, FlamegraphRootNode} from '@parca/client';
+
+import {nodeLabel} from './utils';
+import useNodeColor from './useNodeColor';
+import {useKeyDown} from '@parca/components';
+
+export const RowHeight = 26;
+
+interface IcicleGraphNodesProps {
+  data: FlamegraphNode[];
+  strings: string[];
+  mappings: Mapping[];
+  locations: Location[];
+  functions: ParcaFunction[];
+  x: number;
+  y: number;
+  total: number;
+  totalWidth: number;
+  level: number;
+  curPath: string[];
+  setCurPath: (path: string[]) => void;
+  setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
+  path: string[];
+  xScale: (value: number) => number;
+  searchString?: string;
+  compareMode: boolean;
+}
+
+export const IcicleGraphNodes = React.memo(function IcicleGraphNodes({
+  data,
+  strings,
+  mappings,
+  locations,
+  functions,
+  x,
+  y,
+  xScale,
+  total,
+  totalWidth,
+  level,
+  setHoveringNode,
+  path,
+  setCurPath,
+  curPath,
+  searchString,
+  compareMode,
+}: IcicleGraphNodesProps): JSX.Element {
+  const nodes =
+    curPath.length === 0
+      ? data
+      : data.filter(
+          d => d != null && curPath[0] === nodeLabel(d, strings, mappings, locations, functions)
+        );
+
+  return (
+    <g transform={`translate(${x}, ${y})`}>
+      {nodes.map((d, i) => {
+        const start = nodes.slice(0, i).reduce((sum, d) => sum + parseFloat(d.cumulative), 0);
+        const xStart = xScale(start);
+
+        return (
+          <IcicleNode
+            key={`node-${level}-${i}`}
+            x={xStart}
+            y={0}
+            totalWidth={totalWidth}
+            height={RowHeight}
+            path={path}
+            setCurPath={setCurPath}
+            setHoveringNode={setHoveringNode}
+            level={level}
+            curPath={curPath}
+            data={d}
+            strings={strings}
+            mappings={mappings}
+            locations={locations}
+            functions={functions}
+            total={total}
+            xScale={xScale}
+            searchString={searchString}
+            compareMode={compareMode}
+          />
+        );
+      })}
+    </g>
+  );
+});
+
+interface IcicleNodeProps {
+  x: number;
+  y: number;
+  height: number;
+  totalWidth: number;
+  curPath: string[];
+  level: number;
+  data: FlamegraphNode;
+  strings: string[];
+  mappings: Mapping[];
+  locations: Location[];
+  functions: ParcaFunction[];
+  path: string[];
+  total: number;
+  setCurPath: (path: string[]) => void;
+  setHoveringNode: (node: FlamegraphNode | FlamegraphRootNode | undefined) => void;
+  xScale: (value: number) => number;
+  isRoot?: boolean;
+  searchString?: string;
+  compareMode: boolean;
+}
+
+const icicleRectStyles = {
+  cursor: 'pointer',
+  transition: 'opacity .15s linear',
+};
+const fadedIcicleRectStyles = {
+  cursor: 'pointer',
+  transition: 'opacity .15s linear',
+  opacity: '0.5',
+};
+
+export const IcicleNode = React.memo(function IcicleNode({
+  x,
+  y,
+  height,
+  setCurPath,
+  setHoveringNode,
+  curPath,
+  level,
+  path,
+  data,
+  strings,
+  mappings,
+  locations,
+  functions,
+  total,
+  totalWidth,
+  xScale,
+  isRoot = false,
+  searchString,
+  compareMode,
+}: IcicleNodeProps): JSX.Element {
+  const {isShiftDown} = useKeyDown();
+  const colorResult = useNodeColor({data, compareMode});
+  const name = useMemo(() => {
+    return isRoot ? 'root' : nodeLabel(data, strings, mappings, locations, functions);
+  }, [data, strings, mappings, locations, functions, isRoot]);
+  const nextPath = path.concat([name]);
+  const isFaded = curPath.length > 0 && name !== curPath[curPath.length - 1];
+  const styles = isFaded ? fadedIcicleRectStyles : icicleRectStyles;
+  const nextLevel = level + 1;
+  const cumulative = parseFloat(data.cumulative);
+  const nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
+  const newXScale =
+    nextCurPath.length === 0 && curPath.length === 1
+      ? scaleLinear().domain([0, cumulative]).range([0, totalWidth])
+      : xScale;
+
+  const width =
+    nextCurPath.length > 0 || (nextCurPath.length === 0 && curPath.length === 1)
+      ? totalWidth
+      : xScale(cumulative);
+
+  const {isHighlightEnabled = false, isHighlighted = false} = useMemo(() => {
+    if (searchString === undefined || searchString === '') {
+      return {isHighlightEnabled: false};
+    }
+    return {isHighlightEnabled: true, isHighlighted: isSearchMatch(searchString, name)};
+  }, [searchString, name]);
+
+  if (width <= 1) {
+    return <>{null}</>;
+  }
+
+  const onMouseEnter = (): void => {
+    if (isShiftDown) return;
+
+    setHoveringNode(data);
+  };
+  const onMouseLeave = (): void => {
+    if (isShiftDown) return;
+
+    setHoveringNode(undefined);
+  };
+
+  return (
+    <>
+      <g
+        transform={`translate(${x + 1}, ${y + 1})`}
+        style={styles}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onClick={() => {
+          setCurPath(nextPath);
+        }}
+      >
+        <rect
+          x={0}
+          y={0}
+          width={width - 1}
+          height={height - 1}
+          style={{
+            fill: colorResult,
+          }}
+          className={cx({
+            'opacity-50': isHighlightEnabled && !isHighlighted,
+          })}
+        />
+        {width > 5 && (
+          <svg width={width - 5} height={height}>
+            <text x={5} y={15} style={{fontSize: '12px'}}>
+              {name}
+            </text>
+          </svg>
+        )}
+      </g>
+      {data.children !== undefined && data.children.length > 0 && (
+        <IcicleGraphNodes
+          data={data.children}
+          strings={strings}
+          mappings={mappings}
+          locations={locations}
+          functions={functions}
+          x={x}
+          y={RowHeight}
+          xScale={newXScale}
+          total={total}
+          totalWidth={totalWidth}
+          level={nextLevel}
+          setHoveringNode={setHoveringNode}
+          path={nextPath}
+          curPath={nextCurPath}
+          setCurPath={setCurPath}
+          searchString={searchString}
+          compareMode={compareMode}
+        />
+      )}
+    </>
+  );
+});

package/src/ProfileIcicleGraph/IcicleGraph/index.tsx

@@ -0,0 +1,160 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, {memo, useEffect, useMemo, useRef, useState} from 'react';
+
+import cx from 'classnames';
+import {throttle} from 'lodash';
+import {pointer} from 'd3-selection';
+import {scaleLinear} from 'd3-scale';
+
+import {Flamegraph, FlamegraphNode, FlamegraphRootNode} from '@parca/client';
+import type {HoveringNode} from '../../GraphTooltip';
+import GraphTooltip from '../../GraphTooltip';
+import {Button, useURLState} from '@parca/components';
+import {IcicleNode, RowHeight} from './IcicleGraphNodes';
+import useColoredGraph from './useColoredGraph';
+import {selectQueryParam} from '@parca/functions';
+import type {NavigateFunction} from '@parca/functions';
+import ColorStackLegend from './ColorStackLegend';
+
+interface IcicleGraphProps {
+  graph: Flamegraph;
+  sampleUnit: string;
+  width?: number;
+  curPath: string[];
+  setCurPath: (path: string[]) => void;
+  navigateTo?: NavigateFunction;
+}
+
+export const IcicleGraph = memo(function IcicleGraph({
+  graph,
+  width,
+  setCurPath,
+  curPath,
+  sampleUnit,
+  navigateTo,
+}: IcicleGraphProps): JSX.Element {
+  const [hoveringNode, setHoveringNode] = useState<
+    FlamegraphNode | FlamegraphRootNode | undefined
+  >();
+  const [pos, setPos] = useState([0, 0]);
+  const [height, setHeight] = useState(0);
+  const svg = useRef(null);
+  const ref = useRef<SVGGElement>(null);
+  const [rawDashboardItems] = useURLState({
+    param: 'dashboard_items',
+  });
+
+  const dashboardItems = rawDashboardItems as string[];
+  const coloredGraph = useColoredGraph(graph);
+  const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
+  const compareMode: boolean =
+    selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+
+  useEffect(() => {
+    if (ref.current != null) {
+      setHeight(ref?.current.getBoundingClientRect().height);
+    }
+  }, [width, coloredGraph]);
+
+  const total = useMemo(() => parseFloat(coloredGraph.total), [coloredGraph.total]);
+  const xScale = useMemo(() => {
+    if (width === undefined) {
+      return () => 0;
+    }
+    return scaleLinear().domain([0, total]).range([0, width]);
+  }, [total, width]);
+
+  if (coloredGraph.root === undefined || width === undefined) {
+    return <></>;
+  }
+
+  const throttledSetPos = throttle(setPos, 20);
+  const onMouseMove = (e: React.MouseEvent<SVGSVGElement | HTMLDivElement>): void => {
+    // X/Y coordinate array relative to svg
+    const rel = pointer(e);
+
+    throttledSetPos([rel[0], rel[1]]);
+  };
+
+  return (
+    <div onMouseLeave={() => setHoveringNode(undefined)} className="relative">
+      <ColorStackLegend navigateTo={navigateTo} compareMode={compareMode} />
+      <GraphTooltip
+        unit={sampleUnit}
+        total={total}
+        x={pos[0]}
+        y={pos[1]}
+        hoveringNode={hoveringNode as HoveringNode}
+        contextElement={svg.current}
+        strings={coloredGraph.stringTable}
+        mappings={coloredGraph.mapping}
+        locations={coloredGraph.locations}
+        functions={coloredGraph.function}
+      />
+      <div
+        className={cx(
+          dashboardItems.length > 1 ? 'top-[-46px] left-[25px]' : 'top-[-45px]',
+          'flex justify-start absolute '
+        )}
+      >
+        <Button
+          color="neutral"
+          onClick={() => setCurPath([])}
+          disabled={curPath.length === 0}
+          className="w-auto"
+          variant="neutral"
+        >
+          Reset View
+        </Button>
+      </div>
+      <svg
+        className="font-robotoMono"
+        width={width}
+        height={height}
+        onMouseMove={onMouseMove}
+        preserveAspectRatio="xMinYMid"
+        ref={svg}
+      >
+        <g ref={ref}>
+          <g transform={'translate(0, 0)'}>
+            <IcicleNode
+              x={0}
+              y={0}
+              totalWidth={width}
+              height={RowHeight}
+              setCurPath={setCurPath}
+              setHoveringNode={setHoveringNode}
+              curPath={curPath}
+              data={coloredGraph.root}
+              strings={coloredGraph.stringTable}
+              mappings={coloredGraph.mapping}
+              locations={coloredGraph.locations}
+              functions={coloredGraph.function}
+              total={total}
+              xScale={xScale}
+              path={[]}
+              level={0}
+              isRoot={true}
+              searchString={currentSearchString}
+              compareMode={compareMode}
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+});
+
+export default IcicleGraph;

package/src/ProfileIcicleGraph/IcicleGraph/useColoredGraph.ts

@@ -0,0 +1,106 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {Flamegraph, FlamegraphNode, FlamegraphRootNode} from '@parca/client';
+import {
+  Mapping,
+  Function as ParcaFunction,
+  Location,
+} from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
+import type {ColorProfileName} from '@parca/functions';
+import useUserPreference, {USER_PREFERENCES} from '@parca/functions/useUserPreference';
+import {setFeatures, useAppDispatch} from '@parca/store';
+import {useEffect, useMemo} from 'react';
+import {extractFeature} from './utils';
+
+export interface ColoredFlamegraphNode extends FlamegraphNode {
+  feature?: string;
+  children: ColoredFlamegraphNode[];
+}
+
+export interface ColoredFlamgraphRootNode extends FlamegraphRootNode {
+  feature?: string;
+  children: ColoredFlamegraphNode[];
+}
+
+export interface ColoredFlamegraph extends Flamegraph {
+  root: ColoredFlamgraphRootNode;
+}
+
+const colorNodes = (
+  nodes: FlamegraphNode[] | undefined,
+  strings: string[],
+  mappings: Mapping[],
+  locations: Location[],
+  functions: ParcaFunction[],
+  features: {[key: string]: boolean}
+): ColoredFlamegraphNode[] => {
+  if (nodes === undefined) {
+    return [];
+  }
+  return nodes.map<ColoredFlamegraphNode>(node => {
+    const coloredNode: ColoredFlamegraphNode = {
+      ...node,
+    };
+    if (node.children != null) {
+      coloredNode.children = colorNodes(
+        node.children,
+        strings,
+        mappings,
+        locations,
+        functions,
+        features
+      );
+    }
+    coloredNode.feature = extractFeature(node, mappings, locations, strings, functions);
+    features[coloredNode.feature] = true;
+    return coloredNode;
+  });
+};
+
+const useColoredGraph = (graph: Flamegraph): ColoredFlamegraph => {
+  const dispatch = useAppDispatch();
+  const [colorProfile] = useUserPreference<ColorProfileName>(
+    USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
+  );
+
+  const [coloredGraph, features]: [ColoredFlamegraph, string[]] = useMemo(() => {
+    if (graph.root == null) {
+      return [graph as ColoredFlamegraph, []];
+    }
+    const features: {[key: string]: boolean} = {};
+    const coloredGraph = {
+      ...graph,
+      root: {
+        ...graph.root,
+        children: colorNodes(
+          graph.root.children ?? [],
+          graph.stringTable,
+          graph.mapping,
+          graph.locations,
+          graph.function,
+          features
+        ),
+      },
+    };
+    return [coloredGraph, Object.keys(features)];
+  }, [graph]);
+
+  useEffect(() => {
+    dispatch(setFeatures({features, colorProfileName: colorProfile}));
+  }, [features, colorProfile, dispatch]);
+
+  return coloredGraph;
+};
+
+export default useColoredGraph;

package/src/ProfileIcicleGraph/IcicleGraph/useNodeColor.ts

@@ -0,0 +1,42 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {diffColor} from '@parca/functions';
+import {EVERYTHING_ELSE, selectDarkMode, selectStackColors, useAppSelector} from '@parca/store';
+import {useMemo} from 'react';
+import type {ColoredFlamegraphNode} from './useColoredGraph';
+
+interface Props {
+  data: ColoredFlamegraphNode;
+  compareMode: boolean;
+}
+
+const useNodeColor = ({data, compareMode}: Props): string => {
+  const colors = useAppSelector(selectStackColors);
+  const isDarkMode = useAppSelector(selectDarkMode);
+
+  const color: string = useMemo(() => {
+    if (compareMode) {
+      const diff = parseFloat(data.diff);
+      const cumulative = parseFloat(data.cumulative);
+      return diffColor(diff, cumulative, isDarkMode);
+    }
+
+    const color = colors[data.feature ?? EVERYTHING_ELSE];
+    return color;
+  }, [data, colors, isDarkMode, compareMode]);
+
+  return color;
+};
+
+export default useNodeColor;

package/src/ProfileIcicleGraph/IcicleGraph/utils.ts

@@ -0,0 +1,94 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {getLastItem} from '@parca/functions';
+import {FlamegraphNode} from '@parca/client';
+import {
+  Mapping,
+  Function as ParcaFunction,
+  Location,
+} from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
+import {hexifyAddress} from '../../utils';
+import {EVERYTHING_ELSE} from '@parca/store';
+
+export const getBinaryName = (
+  node: FlamegraphNode,
+  mappings: Mapping[],
+  locations: Location[],
+  strings: string[]
+): string | undefined => {
+  if (node.meta?.locationIndex === undefined || node.meta?.locationIndex === 0) {
+    return undefined;
+  }
+
+  const location = locations[node.meta.locationIndex - 1];
+
+  if (location.mappingIndex === undefined || location.mappingIndex === 0) {
+    return undefined;
+  }
+  const mapping = mappings[location.mappingIndex - 1];
+  if (mapping == null || mapping.fileStringIndex == null) {
+    return undefined;
+  }
+
+  const mappingFile = strings[mapping.fileStringIndex];
+  return getLastItem(mappingFile);
+};
+
+export function nodeLabel(
+  node: FlamegraphNode,
+  strings: string[],
+  mappings: Mapping[],
+  locations: Location[],
+  functions: ParcaFunction[]
+): string {
+  if (node.meta?.locationIndex === undefined) return '<unknown>';
+  if (node.meta?.locationIndex === 0) return '<unknown>';
+
+  const location = locations[node.meta.locationIndex - 1];
+
+  const binary = getBinaryName(node, mappings, locations, strings);
+
+  const mappingString: string = binary != null ? `[${binary}]` : '';
+
+  if (location.lines.length > 0) {
+    const funcName =
+      strings[functions[location.lines[node.meta.lineIndex].functionIndex - 1].nameStringIndex];
+    return `${mappingString} ${funcName}`;
+  }
+
+  const address = hexifyAddress(location.address);
+  const fallback = `${mappingString}${address}`;
+
+  return fallback === '' ? '<unknown>' : fallback;
+}
+
+export const extractFeature = (
+  data: FlamegraphNode,
+  mappings: Mapping[],
+  locations: Location[],
+  strings: string[],
+  functions: ParcaFunction[]
+): string => {
+  const name = nodeLabel(data, strings, mappings, locations, functions).trim();
+  if (name.startsWith('runtime') || name === 'root') {
+    return 'runtime';
+  }
+
+  const binaryName = getBinaryName(data, mappings, locations, strings);
+  if (binaryName != null) {
+    return binaryName;
+  }
+
+  return EVERYTHING_ELSE;
+};

package/src/ProfileIcicleGraph/index.tsx

@@ -15,8 +15,9 @@ import {Flamegraph} from '@parca/client';
 import {useContainerDimensions} from '@parca/dynamicsize';
 
 import DiffLegend from '../components/DiffLegend';
-import IcicleGraph from '../IcicleGraph';
+import IcicleGraph from './IcicleGraph';
 import {selectQueryParam} from '@parca/functions';
+import type {NavigateFunction} from '@parca/functions';
 import {useEffect, useMemo} from 'react';
 
 const numberFormatter = new Intl.NumberFormat('en-US');
@@ -30,6 +31,7 @@ interface ProfileIcicleGraphProps {
   curPath: string[] | [];
   setNewCurPath: (path: string[]) => void;
   onContainerResize?: ResizeHandler;
+  navigateTo?: NavigateFunction;
   loading: boolean;
 }
 
@@ -39,6 +41,7 @@ const ProfileIcicleGraph = ({
   setNewCurPath,
   sampleUnit,
   onContainerResize,
+  navigateTo,
   loading,
 }: ProfileIcicleGraphProps): JSX.Element => {
   const compareMode: boolean =
@@ -93,6 +96,7 @@ const ProfileIcicleGraph = ({
           curPath={curPath}
           setCurPath={setNewCurPath}
           sampleUnit={sampleUnit}
+          navigateTo={navigateTo}
         />
       </div>
     </>