@parca/profile 0.16.198 → 0.16.200

package/src/ProfileIcicleGraph/IcicleGraphArrow/ColorStackLegend.tsx

@@ -0,0 +1,109 @@
+// 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 {Icon} from '@iconify/react';
+import cx from 'classnames';
+
+import {useURLState} from '@parca/components';
+import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
+import {EVERYTHING_ELSE} from '@parca/store';
+import type {NavigateFunction} from '@parca/utilities';
+
+import {mappingColors} from './IcicleGraphNodes';
+
+interface Props {
+  mappingColors: mappingColors;
+  navigateTo?: NavigateFunction;
+  compareMode?: boolean;
+}
+
+const ColorStackLegend = ({
+  mappingColors,
+  navigateTo,
+  compareMode = false,
+}: Props): React.JSX.Element => {
+  const [colorProfileName] = useUserPreference<string>(
+    USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
+  );
+  const [currentSearchString, setSearchString] = useURLState({param: 'search_string', navigateTo});
+
+  const stackColorArray = useMemo(() => {
+    return Object.entries(mappingColors).sort(([featureA], [featureB]) => {
+      if (featureA === EVERYTHING_ELSE) {
+        return 1;
+      }
+      if (featureB === EVERYTHING_ELSE) {
+        return -1;
+      }
+      return featureA?.localeCompare(featureB ?? '') ?? 0;
+    });
+  }, [mappingColors]);
+
+  if (mappingColors === undefined) {
+    return <></>;
+  }
+
+  if (Object.entries(mappingColors).length === 0) {
+    return <></>;
+  }
+
+  if (colorProfileName === 'default' || compareMode) {
+    return <></>;
+  }
+
+  return (
+    <div className="my-6 flex flex-wrap justify-center gap-2">
+      {stackColorArray.map(([feature, color]) => {
+        const filteringAllowed = feature !== EVERYTHING_ELSE;
+        const isHighlighted = currentSearchString === feature;
+        return (
+          <div
+            key={feature}
+            className={cx('flex items-center justify-between gap-1 text-ellipsis p-1 pr-2', {
+              'cursor-pointer': filteringAllowed,
+              'bg-gray-200 dark:bg-gray-800': isHighlighted,
+            })}
+            onClick={() => {
+              if (!filteringAllowed) {
+                return;
+              }
+              if (isHighlighted) {
+                setSearchString('');
+                return;
+              }
+              setSearchString(feature);
+            }}
+          >
+            <div className="flex items-center">
+              <div className="mr-1 inline-block h-4 w-4" style={{backgroundColor: color}} />
+              <span className="text-sm">{feature}</span>
+            </div>
+            {isHighlighted ? (
+              <Icon
+                icon="radix-icons:cross-circled"
+                onClick={e => {
+                  setSearchString('');
+                  e.stopPropagation();
+                }}
+              />
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ColorStackLegend;

package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx

@@ -0,0 +1,327 @@
+// 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, {ReactNode, useMemo} from 'react';
+
+import {Table} from 'apache-arrow';
+import cx from 'classnames';
+
+import {useKeyDown} from '@parca/components';
+import {selectBinaries, setHoveringRow, useAppDispatch, useAppSelector} from '@parca/store';
+import {isSearchMatch, scaleLinear} from '@parca/utilities';
+
+import {
+  FIELD_CHILDREN,
+  FIELD_CUMULATIVE,
+  FIELD_DIFF,
+  FIELD_FUNCTION_NAME,
+  FIELD_MAPPING_FILE,
+} from './index';
+import useNodeColor from './useNodeColor';
+import {nodeLabel} from './utils';
+
+export const RowHeight = 26;
+
+interface IcicleGraphNodesProps {
+  table: Table<any>;
+  row: number;
+  mappingColors: mappingColors;
+  childRows: number[];
+  x: number;
+  y: number;
+  total: bigint;
+  totalWidth: number;
+  level: number;
+  curPath: string[];
+  setCurPath: (path: string[]) => void;
+  path: string[];
+  xScale: (value: bigint) => number;
+  searchString?: string;
+  sortBy: string;
+  darkMode: boolean;
+  compareMode: boolean;
+}
+
+export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({
+  table,
+  childRows,
+  mappingColors,
+  x,
+  y,
+  xScale,
+  total,
+  totalWidth,
+  level,
+  path,
+  setCurPath,
+  curPath,
+  sortBy,
+  searchString,
+  darkMode,
+  compareMode,
+}: IcicleGraphNodesProps): React.JSX.Element {
+  const cumulatives = table.getChild(FIELD_CUMULATIVE);
+
+  if (childRows === undefined || childRows.length === 0) {
+    return <></>;
+  }
+
+  childRows =
+    curPath.length === 0
+      ? childRows
+      : childRows.filter(c => nodeLabel(table, c, false) === curPath[0]);
+
+  let childrenCumulative = BigInt(0);
+  const childrenElements: ReactNode[] = [];
+  childRows.forEach((child, i) => {
+    const xStart = Math.floor(xScale(childrenCumulative));
+    const c: bigint = cumulatives?.get(child);
+    childrenCumulative += c;
+
+    childrenElements.push(
+      <IcicleNode
+        key={`node-${level}-${i}`}
+        table={table}
+        row={child}
+        mappingColors={mappingColors}
+        x={xStart}
+        y={0}
+        totalWidth={totalWidth}
+        height={RowHeight}
+        path={path}
+        setCurPath={setCurPath}
+        level={level}
+        curPath={curPath}
+        total={total}
+        xScale={xScale}
+        sortBy={sortBy}
+        searchString={searchString}
+        darkMode={darkMode}
+        compareMode={compareMode}
+      />
+    );
+  });
+
+  return <g transform={`translate(${x}, ${y})`}>{childrenElements}</g>;
+});
+
+export interface mappingColors {
+  [key: string]: string;
+}
+
+interface IcicleNodeProps {
+  x: number;
+  y: number;
+  height: number;
+  totalWidth: number;
+  curPath: string[];
+  level: number;
+  table: Table<any>;
+  row: number;
+  mappingColors: mappingColors;
+  path: string[];
+  total: bigint;
+  setCurPath: (path: string[]) => void;
+  xScale: (value: bigint) => number;
+  isRoot?: boolean;
+  searchString?: string;
+  sortBy: string;
+  darkMode: boolean;
+  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 IcicleNodeNoMemo({
+  table,
+  row,
+  mappingColors,
+  x,
+  y,
+  height,
+  setCurPath,
+  curPath,
+  level,
+  path,
+  total,
+  totalWidth,
+  xScale,
+  isRoot = false,
+  searchString,
+  sortBy,
+  darkMode,
+  compareMode,
+}: IcicleNodeProps): React.JSX.Element {
+  const {isShiftDown} = useKeyDown();
+  const dispatch = useAppDispatch();
+
+  // get the columns to read from
+  const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
+  const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
+  const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
+  const diffColumn = table.getChild(FIELD_DIFF);
+  // get the actual values from the columns
+  const mappingFile: string | null = mappingColumn?.get(row);
+  const functionName: string | null = functionNameColumn?.get(row);
+  const cumulative: bigint = cumulativeColumn?.get(row);
+  const diff: bigint | null = diffColumn?.get(row);
+  const childRows: number[] = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []);
+
+  // TODO: Maybe it's better to pass down the sorter function as prop instead of figuring this out here.
+  switch (sortBy) {
+    case FIELD_FUNCTION_NAME:
+      childRows.sort((a, b) => {
+        // TODO: Support fallthrough to comparing addresses or something
+        const afn: string = functionNameColumn?.get(a);
+        const bfn: string = functionNameColumn?.get(b);
+        return afn.localeCompare(bfn);
+      });
+      break;
+    case FIELD_CUMULATIVE:
+      childRows.sort((a, b) => {
+        const aCumulative: bigint = cumulativeColumn?.get(a);
+        const bCumulative: bigint = cumulativeColumn?.get(b);
+        return Number(bCumulative - aCumulative);
+      });
+      break;
+    case FIELD_DIFF:
+      childRows.sort((a, b) => {
+        const aDiff: bigint | null = diffColumn?.get(a);
+        const bDiff: bigint | null = diffColumn?.get(b);
+        if (aDiff !== null && bDiff !== null) {
+          return Number(bDiff - aDiff);
+        }
+        if (aDiff === null && bDiff !== null) {
+          return 1;
+        }
+        if (aDiff !== null && bDiff === null) {
+          return -1;
+        }
+        // both are null
+        return 0;
+      });
+      break;
+  }
+
+  const binaries = useAppSelector(selectBinaries);
+  const colorResult = useNodeColor({
+    isDarkMode: darkMode,
+    compareMode,
+    cumulative,
+    diff,
+    mappingColors,
+    mappingFile,
+    functionName,
+  });
+  const name = useMemo(() => {
+    return isRoot ? 'root' : nodeLabel(table, row, binaries.length > 1);
+  }, [table, row, isRoot, binaries]);
+  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 nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
+  const newXScale =
+    nextCurPath.length === 0 && curPath.length === 1
+      ? scaleLinear([0n, cumulative], [0, totalWidth])
+      : xScale;
+
+  const width: number =
+    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;
+    dispatch(setHoveringRow({row}));
+  };
+
+  const onMouseLeave = (): void => {
+    if (isShiftDown) return;
+    dispatch(setHoveringRow(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}
+          height={height}
+          style={{
+            fill: colorResult,
+          }}
+          className={cx('stroke-white dark:stroke-gray-700', {
+            'opacity-50': isHighlightEnabled && !isHighlighted,
+          })}
+        />
+        {width > 5 && (
+          <svg width={width - 5} height={height}>
+            <text x={5} y={15} style={{fontSize: '12px'}}>
+              {name}
+            </text>
+          </svg>
+        )}
+      </g>
+      {childRows.length > 0 && (
+        <IcicleGraphNodes
+          table={table}
+          row={row}
+          mappingColors={mappingColors}
+          childRows={childRows}
+          x={x}
+          y={RowHeight}
+          xScale={newXScale}
+          total={total}
+          totalWidth={totalWidth}
+          level={nextLevel}
+          path={nextPath}
+          curPath={nextCurPath}
+          setCurPath={setCurPath}
+          searchString={searchString}
+          sortBy={sortBy}
+          darkMode={darkMode}
+          compareMode={compareMode}
+        />
+      )}
+    </>
+  );
+});

package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -0,0 +1,212 @@
+// 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 {Dictionary, Table, Vector} from 'apache-arrow';
+
+import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
+import {
+  getColorForFeature,
+  selectDarkMode,
+  setHoveringNode,
+  useAppDispatch,
+  useAppSelector,
+} from '@parca/store';
+import {
+  getLastItem,
+  scaleLinear,
+  selectQueryParam,
+  type ColorProfileName,
+  type NavigateFunction,
+} from '@parca/utilities';
+
+import GraphTooltipArrow from '../../GraphTooltipArrow';
+import ColorStackLegend from './ColorStackLegend';
+import {IcicleNode, RowHeight, mappingColors} from './IcicleGraphNodes';
+import {extractFeature} from './utils';
+
+export const FIELD_MAPPING_FILE = 'mapping_file';
+export const FIELD_MAPPING_BUILD_ID = 'mapping_build_id';
+export const FIELD_LOCATION_ADDRESS = 'location_address';
+export const FIELD_FUNCTION_NAME = 'function_name';
+export const FIELD_FUNCTION_FILE_NAME = 'function_file_name';
+export const FIELD_CHILDREN = 'children';
+export const FIELD_CUMULATIVE = 'cumulative';
+export const FIELD_DIFF = 'diff';
+
+interface IcicleGraphArrowProps {
+  table: Table<any>;
+  total: bigint;
+  filtered: bigint;
+  sampleUnit: string;
+  width?: number;
+  curPath: string[];
+  setCurPath: (path: string[]) => void;
+  navigateTo?: NavigateFunction;
+}
+
+export const IcicleGraphArrow = memo(function IcicleGraphArrow({
+  table,
+  total,
+  filtered,
+  width,
+  setCurPath,
+  curPath,
+  sampleUnit,
+  navigateTo,
+}: IcicleGraphArrowProps): React.JSX.Element {
+  const dispatch = useAppDispatch();
+  const [colorProfile] = useUserPreference<ColorProfileName>(
+    USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
+  );
+  const isDarkMode = useAppSelector(selectDarkMode);
+
+  const [height, setHeight] = useState(0);
+  const sortBy = FIELD_FUNCTION_NAME; // TODO: make this configurable via UI
+  const svg = useRef(null);
+  const ref = useRef<SVGGElement>(null);
+
+  const currentSearchString = (selectQueryParam('search_string') as string) ?? '';
+  const compareMode: boolean =
+    selectQueryParam('compare_a') === 'true' && selectQueryParam('compare_b') === 'true';
+
+  const mappings = useMemo(() => {
+    // Read the mappings from the dictionary that contains all mapping strings.
+    // This is great, as might only have a dozen or so mappings,
+    // and don't need to read through all the rows (potentially thousands).
+    const mappingsDict: Vector<Dictionary> | null = table.getChild(FIELD_MAPPING_FILE);
+    const mappings =
+      mappingsDict?.data
+        .map(mapping => {
+          if (mapping.dictionary == null) {
+            return [];
+          }
+          const len = mapping.dictionary.length;
+          const entries: string[] = [];
+          for (let i = 0; i < len; i++) {
+            entries.push(getLastItem(mapping.dictionary.get(i)) ?? '');
+          }
+          return entries;
+        })
+        .flat() ?? [];
+
+    // We add a EVERYTHING ELSE mapping to the list.
+    mappings.push('');
+
+    // We look through the function names to find out if there's a runtime function.
+    // Again, we only read through the dictionary, which is much faster than reading through all the rows.
+    // We stop as soon as we find a runtime function.
+    const functionNamesDict: Vector<Dictionary> | null = table.getChild(FIELD_FUNCTION_NAME);
+    functionNamesDict?.data.forEach(fn => {
+      if (fn.dictionary == null) {
+        return;
+      }
+      const len = fn.dictionary.length;
+      for (let i = 0; i < len; i++) {
+        const fn: string | null = functionNamesDict?.get(i);
+        if (fn?.startsWith('runtime') === true) {
+          mappings.push('runtime');
+          break;
+        }
+      }
+    });
+
+    // We sort the mappings alphabetically to make sure that the order is always the same.
+    mappings.sort((a, b) => a.localeCompare(b));
+    return mappings;
+  }, [table]);
+
+  // TODO: Somehow figure out how to add runtime to this, if stacks are present.
+  // Potentially read the function name dictionary and check if it contains strings starting with runtime.
+  const mappingFeatures = useMemo(() => {
+    return mappings.map(mapping => extractFeature(mapping));
+  }, [mappings]);
+
+  // TODO: Unify with mappingFeatures
+  const mappingColors = useMemo(() => {
+    const colors: mappingColors = {};
+    Object.entries(mappingFeatures).forEach(([_, feature]) => {
+      colors[feature.name] = getColorForFeature(feature.name, isDarkMode, colorProfile);
+    });
+    return colors;
+  }, [colorProfile, isDarkMode, mappingFeatures]);
+
+  useEffect(() => {
+    if (ref.current != null) {
+      setHeight(ref?.current.getBoundingClientRect().height);
+    }
+  }, [width]);
+
+  const xScale = useMemo(() => {
+    if (width === undefined) {
+      return () => 0;
+    }
+    return scaleLinear([0n, total], [0, width]);
+  }, [total, width]);
+
+  if (table.numRows === 0 || width === undefined) {
+    return <></>;
+  }
+
+  return (
+    <div onMouseLeave={() => dispatch(setHoveringNode(undefined))}>
+      <ColorStackLegend
+        mappingColors={mappingColors}
+        navigateTo={navigateTo}
+        compareMode={compareMode}
+      />
+      <GraphTooltipArrow
+        table={table}
+        unit={sampleUnit}
+        total={total}
+        totalUnfiltered={total + filtered}
+        contextElement={svg.current}
+      />
+      <svg
+        className="font-robotoMono"
+        width={width}
+        height={height}
+        preserveAspectRatio="xMinYMid"
+        ref={svg}
+      >
+        <g ref={ref}>
+          <g transform={'translate(0, 0)'}>
+            <IcicleNode
+              table={table}
+              row={0} // root is always row 0 in the arrow record
+              mappingColors={mappingColors}
+              x={0}
+              y={0}
+              totalWidth={width}
+              height={RowHeight}
+              setCurPath={setCurPath}
+              curPath={curPath}
+              total={total}
+              xScale={xScale}
+              path={[]}
+              level={0}
+              isRoot={true}
+              searchString={currentSearchString}
+              sortBy={sortBy}
+              darkMode={isDarkMode}
+              compareMode={compareMode}
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+});
+
+export default IcicleGraphArrow;

package/src/ProfileIcicleGraph/IcicleGraphArrow/useNodeColor.ts

@@ -0,0 +1,52 @@
+// 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 {EVERYTHING_ELSE} from '@parca/store';
+import {diffColor, getLastItem} from '@parca/utilities';
+
+interface mappingColors {
+  [key: string]: string;
+}
+
+interface Props {
+  isDarkMode: boolean;
+  compareMode: boolean;
+  cumulative: bigint;
+  diff: bigint | null;
+  mappingColors: mappingColors;
+  functionName: string | null;
+  mappingFile: string | null;
+}
+
+const useNodeColor = ({
+  isDarkMode,
+  compareMode,
+  cumulative,
+  diff,
+  mappingColors,
+  functionName,
+  mappingFile,
+}: Props): string => {
+  if (compareMode) {
+    return diffColor(diff ?? 0n, cumulative, isDarkMode);
+  }
+
+  // To get the color we first check if the function name starts with 'runtime'.
+  // If it does, we color it as runtime. Otherwise, we check the mapping file.
+  // If there is no mapping file, we color it as 'everything else'.
+  return functionName?.startsWith('runtime') === true
+    ? mappingColors.runtime
+    : mappingColors[getLastItem(mappingFile ?? '') ?? EVERYTHING_ELSE];
+};
+
+export default useNodeColor;