@parca/profile 0.17.2 → 0.17.3

package/src/ProfileIcicleGraph/IcicleGraph/ColorStackLegend.tsx

@@ -1,96 +0,0 @@
-// 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 {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, selectStackColors, useAppSelector} from '@parca/store';
-
-interface Props {
-  compareMode?: boolean;
-}
-
-const ColorStackLegend = ({compareMode = false}: Props): JSX.Element => {
-  const [colorProfileName] = useUserPreference<string>(
-    USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
-  );
-  const [currentSearchString, setSearchString] = useURLState('search_string');
-  const stackColors = useAppSelector(selectStackColors);
-
-  const stackColorArray = useMemo(() => {
-    return Object.entries(stackColors).sort(([featureA], [featureB]) => {
-      if (featureA === EVERYTHING_ELSE) {
-        return 1;
-      }
-      if (featureB === EVERYTHING_ELSE) {
-        return -1;
-      }
-      return featureA?.localeCompare(featureB ?? '') ?? 0;
-    });
-  }, [stackColors]);
-
-  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 rounded-[4px]"
-                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/IcicleGraph/IcicleGraphNodes.tsx

@@ -1,266 +0,0 @@
-// 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 {FlamegraphNode} from '@parca/client';
-import {
-  Location,
-  Mapping,
-  Function as ParcaFunction,
-} from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
-import {useKeyDown} from '@parca/components';
-import {selectBinaries, setHoveringNode, useAppDispatch, useAppSelector} from '@parca/store';
-import {isSearchMatch, scaleLinear, type ScaleFunction} from '@parca/utilities';
-
-import useNodeColor from './useNodeColor';
-import {nodeLabel} from './utils';
-
-export const RowHeight = 26;
-
-interface IcicleGraphNodesProps {
-  data: FlamegraphNode[];
-  strings: string[];
-  mappings: Mapping[];
-  locations: Location[];
-  functions: ParcaFunction[];
-  x: number;
-  y: number;
-  total: bigint;
-  totalWidth: number;
-  level: number;
-  curPath: string[];
-  setCurPath: (path: string[]) => void;
-  path: string[];
-  xScale: ScaleFunction;
-  searchString?: string;
-  compareMode: boolean;
-}
-
-export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({
-  data,
-  strings,
-  mappings,
-  locations,
-  functions,
-  x,
-  y,
-  xScale,
-  total,
-  totalWidth,
-  level,
-  path,
-  setCurPath,
-  curPath,
-  searchString,
-  compareMode,
-}: IcicleGraphNodesProps): JSX.Element {
-  const binaries = useAppSelector(selectBinaries);
-  const nodes =
-    curPath.length === 0
-      ? data
-      : data.filter(
-          d =>
-            d != null &&
-            curPath[0] ===
-              nodeLabel(d, strings, mappings, locations, functions, binaries.length > 1)
-        );
-
-  return (
-    <g transform={`translate(${x}, ${y})`}>
-      {nodes.map(function nodeMapper(d, i) {
-        const start = nodes.slice(0, i).reduce((sum, d) => sum + d.cumulative, 0n);
-        const xStart = xScale(start);
-
-        return (
-          <IcicleNode
-            key={`node-${level}-${i}`}
-            x={xStart}
-            y={0}
-            totalWidth={totalWidth}
-            height={RowHeight}
-            path={path}
-            setCurPath={setCurPath}
-            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: bigint;
-  setCurPath: (path: string[]) => void;
-  xScale: ScaleFunction;
-  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 IcicleNodeNoMemo({
-  x,
-  y,
-  height,
-  setCurPath,
-  curPath,
-  level,
-  path,
-  data,
-  strings,
-  mappings,
-  locations,
-  functions,
-  total,
-  totalWidth,
-  xScale,
-  isRoot = false,
-  searchString,
-  compareMode,
-}: IcicleNodeProps): JSX.Element {
-  const binaries = useAppSelector(selectBinaries);
-  const dispatch = useAppDispatch();
-  const {isShiftDown} = useKeyDown();
-  const colorResult = useNodeColor({data, compareMode});
-  const name = useMemo(() => {
-    return isRoot
-      ? 'root'
-      : nodeLabel(data, strings, mappings, locations, functions, binaries.length > 1);
-  }, [data, strings, mappings, locations, functions, 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 cumulative = data.cumulative;
-  const nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
-  const newXScale =
-    nextCurPath.length === 0 && curPath.length === 1
-      ? scaleLinear([0n, cumulative], [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;
-
-    // need to add id and flat for tooltip purposes
-    dispatch(setHoveringNode({...data, id: '', flat: 0n}));
-  };
-  const onMouseLeave = (): void => {
-    if (isShiftDown) return;
-
-    dispatch(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}
-          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>
-      {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}
-          path={nextPath}
-          curPath={nextCurPath}
-          setCurPath={setCurPath}
-          searchString={searchString}
-          compareMode={compareMode}
-        />
-      )}
-    </>
-  );
-});

package/src/ProfileIcicleGraph/IcicleGraph/index.tsx

@@ -1,123 +0,0 @@
-// 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 {memo, useEffect, useMemo, useRef, useState} from 'react';
-
-import {Flamegraph} from '@parca/client';
-import {useURLState} from '@parca/components';
-import {ProfileType} from '@parca/parser';
-import {setHoveringNode, useAppDispatch} from '@parca/store';
-import {scaleLinear, selectQueryParam} from '@parca/utilities';
-
-import GraphTooltip from '../../GraphTooltip';
-import {useProfileViewContext} from '../../ProfileView/context/ProfileViewContext';
-import ColorStackLegend from './ColorStackLegend';
-import {IcicleNode, RowHeight} from './IcicleGraphNodes';
-import useColoredGraph from './useColoredGraph';
-
-interface IcicleGraphProps {
-  graph: Flamegraph;
-  total: bigint;
-  filtered: bigint;
-  profileType?: ProfileType;
-  width?: number;
-  curPath: string[];
-  setCurPath: (path: string[]) => void;
-}
-
-export const IcicleGraph = memo(function IcicleGraph({
-  graph,
-  total,
-  filtered,
-  width,
-  setCurPath,
-  curPath,
-  profileType,
-}: IcicleGraphProps): JSX.Element {
-  const dispatch = useAppDispatch();
-  const [height, setHeight] = useState(0);
-  const svg = useRef(null);
-  const ref = useRef<SVGGElement>(null);
-
-  const coloredGraph = useColoredGraph(graph);
-  const [currentSearchString] = useURLState('search_string');
-  const {compareMode} = useProfileViewContext();
-  const isColorStackLegendEnabled = selectQueryParam('color_stack_legend') === 'true';
-
-  useEffect(() => {
-    if (ref.current != null) {
-      setHeight(ref?.current.getBoundingClientRect().height);
-    }
-  }, [width, coloredGraph]);
-
-  const xScale = useMemo(() => {
-    if (width === undefined) {
-      return scaleLinear([0n, total], [0, 1]);
-    }
-    return scaleLinear([0n, total], [0, width]);
-  }, [total, width]);
-
-  if (coloredGraph.root === undefined || width === undefined) {
-    return <></>;
-  }
-
-  return (
-    <div onMouseLeave={() => dispatch(setHoveringNode(undefined))}>
-      {isColorStackLegendEnabled && <ColorStackLegend compareMode={compareMode} />}
-      <GraphTooltip
-        unit={profileType?.sampleUnit ?? ''}
-        total={total}
-        totalUnfiltered={total + filtered}
-        contextElement={svg.current}
-        strings={coloredGraph.stringTable}
-        mappings={coloredGraph.mapping}
-        locations={coloredGraph.locations}
-        functions={coloredGraph.function}
-      />
-      <svg
-        className="font-robotoMono"
-        width={width}
-        height={height}
-        preserveAspectRatio="xMinYMid"
-        ref={svg}
-      >
-        <g ref={ref}>
-          <g transform={'translate(0, 0)'}>
-            <IcicleNode
-              x={0}
-              y={0}
-              totalWidth={width}
-              height={RowHeight}
-              setCurPath={setCurPath}
-              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 as string}
-              compareMode={compareMode}
-            />
-          </g>
-        </g>
-      </svg>
-    </div>
-  );
-});
-
-export default IcicleGraph;

package/src/ProfileIcicleGraph/IcicleGraph/useColoredGraph.ts

@@ -1,117 +0,0 @@
-// 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 {useEffect, useMemo} from 'react';
-
-import {Flamegraph, FlamegraphNode, FlamegraphRootNode} from '@parca/client';
-import {
-  Location,
-  Mapping,
-  Function as ParcaFunction,
-} from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
-import {USER_PREFERENCES, useUserPreference} from '@parca/hooks';
-import {
-  selectDarkMode,
-  setFeatures,
-  useAppDispatch,
-  useAppSelector,
-  type BinaryFeatureType,
-  type BinaryFeaturesMap,
-} from '@parca/store';
-import type {ColorProfileName} from '@parca/utilities';
-
-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]: BinaryFeatureType}
-): 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
-      );
-    }
-    const feature = extractFeature(node, mappings, locations, strings);
-    coloredNode.feature = feature.name;
-    features[feature.name] = feature.type;
-    return coloredNode;
-  });
-};
-
-const useColoredGraph = (graph: Flamegraph): ColoredFlamegraph => {
-  const dispatch = useAppDispatch();
-  const [colorProfile] = useUserPreference<ColorProfileName>(
-    USER_PREFERENCES.FLAMEGRAPH_COLOR_PROFILE.key
-  );
-  const isDarkMode = useAppSelector(selectDarkMode);
-
-  const [coloredGraph, features]: [ColoredFlamegraph, BinaryFeaturesMap] = useMemo(() => {
-    if (graph.root == null) {
-      return [graph as ColoredFlamegraph, {}];
-    }
-    const features: BinaryFeaturesMap = {};
-    const coloredGraph = {
-      ...graph,
-      root: {
-        ...graph.root,
-        children: colorNodes(
-          graph.root.children ?? [],
-          graph.stringTable,
-          graph.mapping,
-          graph.locations,
-          graph.function,
-          features
-        ),
-      },
-    };
-    return [coloredGraph, features];
-  }, [graph]);
-
-  useEffect(() => {
-    dispatch(setFeatures({features, colorProfileName: colorProfile, isDarkMode}));
-  }, [features, colorProfile, dispatch, isDarkMode]);
-
-  return coloredGraph;
-};
-
-export default useColoredGraph;

package/src/ProfileIcicleGraph/IcicleGraph/useNodeColor.ts

@@ -1,54 +0,0 @@
-// 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 {useMemo} from 'react';
-
-import {
-  EVERYTHING_ELSE,
-  selectColorProfiles,
-  selectDarkMode,
-  selectStackColors,
-  useAppSelector,
-} from '@parca/store';
-import {diffColor} from '@parca/utilities';
-
-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 colorProfiles = useAppSelector(selectColorProfiles);
-
-  const color: string = useMemo(() => {
-    if (compareMode) {
-      const diff = data.diff;
-      const cumulative = data.cumulative;
-      return diffColor(diff, cumulative, isDarkMode);
-    }
-
-    const color =
-      colors[data.feature ?? EVERYTHING_ELSE] ??
-      (!isDarkMode ? colorProfiles.default.colors[0][0] : colorProfiles.default.colors[0][1]);
-
-    return color;
-  }, [data, colors, isDarkMode, compareMode, colorProfiles]);
-
-  return color;
-};
-
-export default useNodeColor;