@parca/profile 0.17.1 → 0.17.3

package/dist/ProfileIcicleGraph/IcicleGraph/useNodeColor.d.ts

@@ -1,8 +0,0 @@
-import type { ColoredFlamegraphNode } from './useColoredGraph';
-interface Props {
-    data: ColoredFlamegraphNode;
-    compareMode: boolean;
-}
-declare const useNodeColor: ({ data, compareMode }: Props) => string;
-export default useNodeColor;
-//# sourceMappingURL=useNodeColor.d.ts.map

package/dist/ProfileIcicleGraph/IcicleGraph/useNodeColor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useNodeColor.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/useNodeColor.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAE7D,UAAU,KAAK;IACb,IAAI,EAAE,qBAAqB,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,0BAAyB,KAAK,KAAG,MAoBlD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraph/useNodeColor.js

@@ -1,32 +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';
-const useNodeColor = ({ data, compareMode }) => {
-    const colors = useAppSelector(selectStackColors);
-    const isDarkMode = useAppSelector(selectDarkMode);
-    const colorProfiles = useAppSelector(selectColorProfiles);
-    const color = 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;

package/dist/ProfileIcicleGraph/IcicleGraph/utils.d.ts

@@ -1,7 +0,0 @@
-import { FlamegraphNode } from '@parca/client';
-import { Location, Mapping, Function as ParcaFunction } from '@parca/client/dist/parca/metastore/v1alpha1/metastore';
-import { type BinaryFeature } from '@parca/store';
-export declare const getBinaryName: (node: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[]) => string | undefined;
-export declare function nodeLabel(node: FlamegraphNode, strings: string[], mappings: Mapping[], locations: Location[], functions: ParcaFunction[], showBinaryName: boolean): string;
-export declare const extractFeature: (data: FlamegraphNode, mappings: Mapping[], locations: Location[], strings: string[]) => BinaryFeature;
-//# sourceMappingURL=utils.d.ts.map

package/dist/ProfileIcicleGraph/IcicleGraph/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraph/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAC7C,OAAO,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,IAAI,aAAa,EAC1B,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAwC,KAAK,aAAa,EAAC,MAAM,cAAc,CAAC;AAKvF,eAAO,MAAM,aAAa,SAClB,cAAc,YACV,OAAO,EAAE,aACR,QAAQ,EAAE,WACZ,MAAM,EAAE,KAChB,MAAM,GAAG,SAoBX,CAAC;AAEF,wBAAgB,SAAS,CACvB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,MAAM,EAAE,EACjB,QAAQ,EAAE,OAAO,EAAE,EACnB,SAAS,EAAE,QAAQ,EAAE,EACrB,SAAS,EAAE,aAAa,EAAE,EAC1B,cAAc,EAAE,OAAO,GACtB,MAAM,CA6BR;AAED,eAAO,MAAM,cAAc,SACnB,cAAc,YACV,OAAO,EAAE,aACR,QAAQ,EAAE,WACZ,MAAM,EAAE,KAChB,aAOF,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraph/utils.js

@@ -1,66 +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 { BINARY_FEATURE_TYPES, EVERYTHING_ELSE } from '@parca/store';
-import { getLastItem } from '@parca/utilities';
-import { hexifyAddress } from '../../utils';
-export const getBinaryName = (node, mappings, locations, strings) => {
-    if (node.meta?.locationIndex === undefined || node.meta?.locationIndex === 0) {
-        return undefined;
-    }
-    if (node.meta.locationIndex > locations.length) {
-        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, strings, mappings, locations, functions, showBinaryName) {
-    if (node.meta?.locationIndex === undefined)
-        return '<unknown>';
-    if (node.meta?.locationIndex === 0)
-        return '<unknown>';
-    if (node.meta.locationIndex > locations.length) {
-        console.info('location index out of bounds', node.meta.locationIndex, locations.length);
-        return '<unknown>';
-    }
-    const location = locations[node.meta.locationIndex - 1];
-    if (location === undefined)
-        return '<unknown>';
-    let mappingString = '';
-    if (showBinaryName) {
-        const binary = getBinaryName(node, mappings, locations, strings);
-        if (binary != null)
-            mappingString = `[${binary}]`;
-    }
-    if (location.lines.length > 0) {
-        const funcName = strings[functions[location.lines[node.meta.lineIndex].functionIndex - 1].nameStringIndex];
-        return `${mappingString.length > 0 ? `${mappingString} ` : ''}${funcName}`;
-    }
-    const address = hexifyAddress(location.address);
-    const fallback = `${mappingString}${address}`;
-    return fallback === '' ? '<unknown>' : fallback;
-}
-export const extractFeature = (data, mappings, locations, strings) => {
-    const binaryName = getBinaryName(data, mappings, locations, strings);
-    if (binaryName != null) {
-        return { name: binaryName, type: BINARY_FEATURE_TYPES.Binary };
-    }
-    return { name: EVERYTHING_ELSE, type: BINARY_FEATURE_TYPES.Misc };
-};

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { ProfileSource } from '../../ProfileSource';
-import { IcicleNodeProps } from './IcicleGraphNodes';
-interface IcicleChartRootNodeSpecificProps {
-    profileSource?: ProfileSource;
-}
-export declare const IcicleChartRootNode: React.NamedExoticComponent<IcicleNodeProps & IcicleChartRootNodeSpecificProps>;
-export {};
-//# sourceMappingURL=IcicleChartRootNode.d.ts.map

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IcicleChartRootNode.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAa,eAAe,EAAY,MAAM,oBAAoB,CAAC;AAG1E,UAAU,gCAAgC;IACxC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,eAAO,MAAM,mBAAmB,gFAuG9B,CAAC"}

package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.js

@@ -1,45 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } 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.
-// 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, { Fragment } from 'react';
-import { scaleLinear } from '@parca/utilities';
-import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_DURATION, FIELD_TIMESTAMP } from '.';
-import { IcicleNode, RowHeight } from './IcicleGraphNodes';
-import { boundsFromProfileSource } from './utils';
-export const IcicleChartRootNode = React.memo(function IcicleChartRootNodeNonMemo({ table, row, colors, colorBy, y, setCurPath, curPath, level, path, total, totalWidth, xScale, searchString, setHoveringRow, setHoveringLevel, sortBy, darkMode, compareMode, profileType, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, profileSource, }) {
-    // get the columns to read from
-    const durationColumn = table.getChild(FIELD_DURATION);
-    const timestampColumn = table.getChild(FIELD_TIMESTAMP);
-    const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
-    const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
-    const childRows = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []).sort((a, b) => a - b);
-    const tsBounds = boundsFromProfileSource(profileSource);
-    const nextLevel = level + 1;
-    const nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
-    const tsXScale = scaleLinear([tsBounds[0], tsBounds[1]], [0, totalWidth]);
-    const width = nextCurPath.length > 0 || (nextCurPath.length === 0 && curPath.length === 1)
-        ? totalWidth
-        : xScale(BigInt(cumulative));
-    if (width <= 1) {
-        return _jsx(_Fragment, { children: null });
-    }
-    return (_jsx(_Fragment, { children: childRows.map(row => {
-            const duration = durationColumn?.get(row) !== null ? BigInt(durationColumn?.get(row)) : 0n;
-            const timestamp = timestampColumn?.get(row) !== null ? BigInt(timestampColumn?.get(row)) : 0n;
-            const x = tsXScale(timestamp);
-            const width = tsXScale(timestamp + BigInt(Math.round(Number(duration)))) - x;
-            const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
-            const newXScale = scaleLinear([0n, BigInt(cumulative)], [0, width]);
-            return (_jsx(Fragment, { children: _jsx(IcicleNode, { table: table, row: row, colors: colors, colorBy: colorBy, x: x, y: y, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: newXScale, path: path, level: nextLevel, searchString: searchString ?? '', setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: darkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: hoveringName, setHoveringName: setHoveringName, hoveringRow: hoveringRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }, row) }, row));
-        }) }));
-});

package/dist/ProfileView/hooks/useGraphviz.d.ts

@@ -1,12 +0,0 @@
-import { Callgraph as CallgraphType } from '@parca/client';
-interface UseGraphvizProps {
-    callgraphData?: CallgraphType;
-    width?: number;
-    colorRange: [string, string];
-}
-export declare const useGraphviz: ({ callgraphData, width, colorRange, }: UseGraphvizProps) => {
-    graphvizLoaded: boolean;
-    callgraphSVG: string | undefined;
-};
-export {};
-//# sourceMappingURL=useGraphviz.d.ts.map

package/dist/ProfileView/hooks/useGraphviz.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useGraphviz.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useGraphviz.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAC,SAAS,IAAI,aAAa,EAAC,MAAM,eAAe,CAAC;AAIzD,UAAU,gBAAgB;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,0CAIrB,gBAAgB,KAAG;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;CAmClC,CAAC"}

package/dist/ProfileView/hooks/useGraphviz.js

@@ -1,42 +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, useState } from 'react';
-import graphviz from 'graphviz-wasm';
-import { jsonToDot } from '../../Callgraph/utils';
-export const useGraphviz = ({ callgraphData, width, colorRange, }) => {
-    const [graphvizLoaded, setGraphvizLoaded] = useState(false);
-    const [callgraphSVG, setCallgraphSVG] = useState(undefined);
-    useEffect(() => {
-        async function loadGraphviz() {
-            await graphviz.loadWASM();
-            setGraphvizLoaded(true);
-        }
-        void loadGraphviz();
-    }, []);
-    useEffect(() => {
-        async function loadCallgraphSVG(graph, width, colorRange) {
-            await setCallgraphSVG(undefined);
-            const dataAsDot = await jsonToDot({
-                graph,
-                width,
-                colorRange,
-            });
-            const svgGraph = await graphviz.layout(dataAsDot, 'svg', 'dot');
-            await setCallgraphSVG(svgGraph);
-        }
-        if (graphvizLoaded && callgraphData != null && width != null) {
-            void loadCallgraphSVG(callgraphData, width, colorRange);
-        }
-    }, [graphvizLoaded, callgraphData, width, colorRange]);
-    return { graphvizLoaded, callgraphSVG };
-};

package/src/Callgraph/index.tsx

@@ -1,177 +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, useRef, useState} from 'react';
-
-import cx from 'classnames';
-import * as d3 from 'd3';
-import SVG from 'react-inlinesvg';
-import {MapInteractionCSS} from 'react-map-interaction';
-
-import {CallgraphEdge, Callgraph as CallgraphType} from '@parca/client';
-import {Button, useKeyDown, useURLState} from '@parca/components';
-import {ProfileType} from '@parca/parser';
-import {selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector} from '@parca/store';
-import {getNewSpanColor} from '@parca/utilities';
-
-import GraphTooltip from '../GraphTooltip';
-
-export interface Props {
-  data: CallgraphType;
-  svgString: string;
-  profileType: ProfileType | undefined;
-  width: number;
-}
-
-interface View {
-  scale: number;
-  translation: {x: number; y: number};
-}
-
-const Callgraph = ({data, svgString, profileType, 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 [dashboardItems] = useURLState<string[]>('dashboard_items', {
-    alwaysReturnArray: true,
-  });
-
-  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) => edge.cumulative.toString());
-  const cumulativesRange = d3.extent(cumulatives);
-  const colorScale = d3
-    .scaleSequentialLog(d3.interpolateBlues)
-    .domain([Number(cumulativesRange[0]), Number(cumulativesRange[1])])
-    .range(colorRange);
-
-  useEffect(() => {
-    setSvgWrapperLoaded(true);
-  }, []);
-
-  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 => {
-            return n.id === (this as Element).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);
-        });
-      };
-
-      setTimeout(addInteraction, 1000);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [svgWrapper.current, svgWrapperLoaded]);
-
-  if (data.nodes.length < 1)
-    return <div className="mx-auto text-center">Profile has no samples</div>;
-
-  const resetView = (): void => setView(originalView);
-
-  const isResetViewButtonEnabled =
-    view.scale !== originalView.scale ||
-    view.translation.x !== originalView.translation.x ||
-    view.translation.y !== originalView.translation.y;
-
-  return (
-    <div className="relative w-full">
-      <div ref={containerRef} className="w-full overflow-hidden">
-        <MapInteractionCSS
-          showControls
-          minScale={1}
-          maxScale={5}
-          value={view}
-          onChange={(value: View) => setView(value)}
-        >
-          <SVG
-            ref={svgWrapper}
-            src={svgString}
-            width={width}
-            height="auto"
-            title="Callgraph"
-            innerRef={svgRef}
-          />
-        </MapInteractionCSS>
-        {svgRef.current !== null && (
-          <GraphTooltip
-            type="callgraph"
-            unit={profileType?.sampleUnit ?? ''}
-            total={data.cumulative}
-            totalUnfiltered={data.cumulative}
-            contextElement={containerRef.current}
-          />
-        )}
-      </div>
-      <div
-        className={cx(
-          dashboardItems.length > 1 ? 'left-[25px]' : 'left-0',
-          'absolute top-[-46px] w-auto'
-        )}
-      >
-        <Button
-          variant="neutral"
-          onClick={resetView}
-          className="z-50"
-          disabled={!isResetViewButtonEnabled}
-        >
-          Reset View
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default Callgraph;