@parca/profile 0.17.2 → 0.17.3

package/src/ProfileView/components/DashboardItems/index.tsx

@@ -15,14 +15,12 @@ import {Profiler, ProfilerOnRenderCallback} from 'react';
 
 import {ConditionalWrapper} from '@parca/components';
 
-import Callgraph from '../../../Callgraph';
 import ProfileIcicleGraph from '../../../ProfileIcicleGraph';
 import {CurrentPathFrame} from '../../../ProfileIcicleGraph/IcicleGraphArrow/utils';
 import {ProfileSource} from '../../../ProfileSource';
 import {SourceView} from '../../../SourceView';
 import {Table} from '../../../Table';
 import type {
-  CallgraphData,
   FlamegraphData,
   SourceData,
   TopTableData,
@@ -36,9 +34,8 @@ interface GetDashboardItemProps {
   flamegraphData: FlamegraphData;
   flamechartData: FlamegraphData;
   topTableData?: TopTableData;
-  callgraphData?: CallgraphData;
   sourceData?: SourceData;
-  profileSource?: ProfileSource;
+  profileSource: ProfileSource;
   total: bigint;
   filtered: bigint;
   curPath: string[];
@@ -47,7 +44,6 @@ interface GetDashboardItemProps {
   setNewCurPathArrow: (path: CurrentPathFrame[]) => void;
   currentSearchString?: string;
   setSearchString?: (value: string) => void;
-  callgraphSVG?: string;
   perf?: {
     onRender?: ProfilerOnRenderCallback;
   };
@@ -60,18 +56,14 @@ export const getDashboardItem = ({
   flamegraphData,
   flamechartData,
   topTableData,
-  callgraphData,
   sourceData,
   profileSource,
   total,
   filtered,
-  curPath,
-  setNewCurPath,
   curPathArrow,
   setNewCurPathArrow,
   currentSearchString,
   setSearchString,
-  callgraphSVG,
   perf,
 }: GetDashboardItemProps): JSX.Element => {
   switch (type) {
@@ -86,12 +78,9 @@ export const getDashboardItem = ({
           }}
         >
           <ProfileIcicleGraph
-            curPath={curPath}
-            setNewCurPath={setNewCurPath}
             curPathArrow={curPathArrow}
             setNewCurPathArrow={setNewCurPathArrow}
             arrow={flamegraphData?.arrow}
-            graph={flamegraphData?.data}
             total={total}
             filtered={filtered}
             profileType={profileSource?.ProfileType()}
@@ -107,14 +96,13 @@ export const getDashboardItem = ({
             }
             metadataMappingFiles={flamegraphData.metadataMappingFiles}
             metadataLoading={flamegraphData.metadataLoading}
+            profileSource={profileSource}
           />
         </ConditionalWrapper>
       );
     case 'iciclechart':
       return (
         <ProfileIcicleGraph
-          curPath={[]}
-          setNewCurPath={() => {}}
           curPathArrow={[]}
           setNewCurPathArrow={() => {}}
           arrow={flamechartData?.arrow}
@@ -137,19 +125,6 @@ export const getDashboardItem = ({
           isIcicleChart={true}
         />
       );
-    case 'callgraph':
-      return callgraphData?.data !== undefined &&
-        callgraphSVG !== undefined &&
-        dimensions?.width !== undefined ? (
-        <Callgraph
-          data={callgraphData.data}
-          svgString={callgraphSVG}
-          profileType={profileSource?.ProfileType()}
-          width={isHalfScreen ? dimensions?.width / 2 : dimensions?.width}
-        />
-      ) : (
-        <></>
-      );
     case 'table':
       return topTableData != null ? (
         <Table

package/src/ProfileView/components/Toolbars/index.tsx

@@ -23,7 +23,6 @@ import {CurrentPathFrame} from '../../../ProfileIcicleGraph/IcicleGraphArrow/uti
 import {ProfileSource} from '../../../ProfileSource';
 import {useDashboard} from '../../context/DashboardContext';
 import GroupByDropdown from '../ActionButtons/GroupByDropdown';
-import SortByDropdown from '../ActionButtons/SortByDropdown';
 import FilterByFunctionButton from '../FilterByFunctionButton';
 import ShareButton from '../ShareButton';
 import ViewSelector from '../ViewSelector';
@@ -95,7 +94,6 @@ export const IcicleGraphToolbar: FC<IcicleGraphToolbarProps> = ({curPath, setNew
   return (
     <>
       <div className="flex w-full gap-2 items-end">
-        <SortByDropdown />
         <Button
           variant="neutral"
           className="gap-2 w-max h-fit"

package/src/ProfileView/index.tsx

@@ -13,7 +13,6 @@
 
 import {KeyDownProvider, useParcaContext} from '@parca/components';
 import {useContainerDimensions} from '@parca/hooks';
-import {selectDarkMode, useAppSelector} from '@parca/store';
 import {selectQueryParam} from '@parca/utilities';
 
 import ColorStackLegend from './components/ColorStackLegend';
@@ -23,11 +22,9 @@ import {ProfileHeader} from './components/ProfileHeader';
 import {IcicleGraphToolbar, TableToolbar, VisualisationToolbar} from './components/Toolbars';
 import {DashboardProvider} from './context/DashboardContext';
 import {ProfileViewContextProvider} from './context/ProfileViewContext';
-import {useGraphviz} from './hooks/useGraphviz';
 import {useProfileMetadata} from './hooks/useProfileMetadata';
 import {useVisualizationState} from './hooks/useVisualizationState';
 import type {ProfileViewProps, VisualizationType} from './types/visualization';
-import {getColorRange} from './utils/colorUtils';
 
 export const ProfileView = ({
   total,
@@ -35,7 +32,6 @@ export const ProfileView = ({
   flamegraphData,
   flamechartData,
   topTableData,
-  callgraphData,
   sourceData,
   profileSource,
   queryClient,
@@ -52,8 +48,6 @@ export const ProfileView = ({
     profileViewExternalSubActions,
   } = useParcaContext();
   const {ref, dimensions} = useContainerDimensions();
-  const isDarkMode = useAppSelector(selectDarkMode);
-  const colorRange = getColorRange(isDarkMode);
 
   const {
     curPath,
@@ -70,12 +64,6 @@ export const ProfileView = ({
     setGroupByLabels,
   } = useVisualizationState();
 
-  const {callgraphSVG} = useGraphviz({
-    callgraphData: callgraphData?.data,
-    width: dimensions?.width,
-    colorRange,
-  });
-
   const {colorMappings} = useProfileMetadata({
     flamegraphArrow: flamegraphData.arrow,
     metadataMappingFiles: flamegraphData.metadataMappingFiles,
@@ -102,7 +90,6 @@ export const ProfileView = ({
       flamegraphData,
       flamechartData,
       topTableData,
-      callgraphData,
       sourceData,
       profileSource,
       total,
@@ -113,7 +100,6 @@ export const ProfileView = ({
       setNewCurPathArrow: setCurPathArrow,
       currentSearchString,
       setSearchString,
-      callgraphSVG,
       perf,
     });
   };

package/src/ProfileView/types/visualization.ts

@@ -67,7 +67,7 @@ export interface ProfileViewProps {
   topTableData?: TopTableData;
   callgraphData?: CallgraphData;
   sourceData?: SourceData;
-  profileSource?: ProfileSource;
+  profileSource: ProfileSource;
   queryClient?: QueryServiceClient;
   compare?: boolean;
   onDownloadPProf: () => void;

package/src/index.tsx

@@ -11,13 +11,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import type {Props as CallgraphProps} from './Callgraph';
 import {useLabelNames} from './MatchersInput';
 import ProfileExplorer, {getExpressionAsAString} from './ProfileExplorer';
 import ProfileTypeSelector from './ProfileTypeSelector';
 import CustomSelect from './SimpleMatchers/Select';
 
-export * from './ProfileIcicleGraph/IcicleGraph';
 export * from './ProfileIcicleGraph';
 export * from './ProfileSource';
 export * from './ProfileView';
@@ -26,12 +24,9 @@ export * from './utils';
 export * from './ProfileTypeSelector';
 export * from './SourceView';
 export * from './ProfileMetricsGraph';
-export {default as Callgraph} from './Callgraph';
 
 export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {
   dashboard_items: 'icicle',
 };
 
-export type {CallgraphProps};
-
 export {ProfileExplorer, ProfileTypeSelector, getExpressionAsAString, CustomSelect, useLabelNames};

package/dist/Callgraph/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const DEFAULT_NODE_HEIGHT = 20;
-export declare const GRAPH_MARGIN = 15;
-//# sourceMappingURL=constants.d.ts.map

package/dist/Callgraph/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/Callgraph/constants.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,YAAY,KAAK,CAAC"}

package/dist/Callgraph/constants.js

@@ -1,14 +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.
-export const DEFAULT_NODE_HEIGHT = 20;
-export const GRAPH_MARGIN = 15;

package/dist/Callgraph/index.d.ts

@@ -1,11 +0,0 @@
-import { Callgraph as CallgraphType } from '@parca/client';
-import { ProfileType } from '@parca/parser';
-export interface Props {
-    data: CallgraphType;
-    svgString: string;
-    profileType: ProfileType | undefined;
-    width: number;
-}
-declare const Callgraph: ({ data, svgString, profileType, width }: Props) => JSX.Element;
-export default Callgraph;
-//# sourceMappingURL=index.d.ts.map

package/dist/Callgraph/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Callgraph/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAgB,SAAS,IAAI,aAAa,EAAC,MAAM,eAAe,CAAC;AAExE,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAM1C,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;CACf;AAOD,QAAA,MAAM,SAAS,4CAA2C,KAAK,KAAG,GAAG,CAAC,OAsIrE,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/Callgraph/index.js

@@ -1,104 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } 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 { 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 { Button, useKeyDown, useURLState } from '@parca/components';
-import { selectDarkMode, setHoveringNode, useAppDispatch, useAppSelector } from '@parca/store';
-import { getNewSpanColor } from '@parca/utilities';
-import GraphTooltip from '../GraphTooltip';
-const Callgraph = ({ data, svgString, profileType, width }) => {
-    const originalView = {
-        scale: 1,
-        translation: { x: 0, y: 0 },
-    };
-    const [view, setView] = useState(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('dashboard_items', {
-        alwaysReturnArray: true,
-    });
-    const isDarkMode = useAppSelector(selectDarkMode);
-    const maxColor = getNewSpanColor(isDarkMode);
-    const minColor = d3.scaleLinear([isDarkMode ? 'black' : 'white', maxColor])(0.3);
-    const colorRange = [minColor, maxColor];
-    const cumulatives = data.edges.map((edge) => 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 = () => {
-                const svg = d3.select(svgRef.current);
-                const nodes = svg.selectAll('.node');
-                nodes.each(function () {
-                    const nodeData = data.nodes.find((n) => {
-                        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);
-                });
-            };
-            setTimeout(addInteraction, 1000);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [svgWrapper.current, svgWrapperLoaded]);
-    if (data.nodes.length < 1)
-        return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
-    const resetView = () => setView(originalView);
-    const isResetViewButtonEnabled = view.scale !== originalView.scale ||
-        view.translation.x !== originalView.translation.x ||
-        view.translation.y !== originalView.translation.y;
-    return (_jsxs("div", { className: "relative w-full", children: [_jsxs("div", { ref: containerRef, className: "w-full overflow-hidden", children: [_jsx(MapInteractionCSS, { showControls: true, minScale: 1, maxScale: 5, value: view, onChange: (value) => setView(value), children: _jsx(SVG, { ref: svgWrapper, src: svgString, width: width, height: "auto", title: "Callgraph", innerRef: svgRef }) }), svgRef.current !== null && (_jsx(GraphTooltip, { type: "callgraph", unit: profileType?.sampleUnit ?? '', total: data.cumulative, totalUnfiltered: data.cumulative, contextElement: containerRef.current }))] }), _jsx("div", { className: cx(dashboardItems.length > 1 ? 'left-[25px]' : 'left-0', 'absolute top-[-46px] w-auto'), children: _jsx(Button, { variant: "neutral", onClick: resetView, className: "z-50", disabled: !isResetViewButtonEnabled, children: "Reset View" }) })] }));
-};
-export default Callgraph;

package/dist/Callgraph/mockData/index.d.ts

@@ -1,149 +0,0 @@
-export declare const dotGraph = "{\n n1 [Label = \"n1\"];\n n2 [Label = \"n2\"];\n n3 [Label = \"n3\"];\n n1 -- n2;\n n1 -- n3;\n n2 -- n2;\n}";
-export declare const jsonGraph: {
-    total: string;
-    unit: string;
-    nodes: {
-        id: string;
-        label: string;
-        value: number;
-    }[];
-    edges: {
-        id: string;
-        source: string;
-        target: string;
-        label: string;
-    }[];
-};
-export declare const graphvizDot = "\ndigraph {\n  N1 [id=\"node1\"]\n  N2 [id=\"node2\"]\n  N3 [id=\"node3\"]\n  N4 [id=\"node4\"]\n  N1 -> N2 [id=\"e1\" label=\"e1 fdskjao fdjksaol\"]\n  N2 -> N3 [id=\"e2\" label=\"e2\"]\n  N3 -> N4 [id=\"e3\" label=\"e3\"]\n  N3 -> N1 [id=\"e4\" label=\"e4\"]\n  }";
-export declare const jsonGraphWithGraphvizPositions: {
-    name: string;
-    directed: boolean;
-    strict: boolean;
-    _draw_: ({
-        op: string;
-        grad: string;
-        color: string;
-        points?: undefined;
-    } | {
-        op: string;
-        points: number[][];
-        grad?: undefined;
-        color?: undefined;
-    })[];
-    bb: string;
-    xdotversion: string;
-    _subgraph_cnt: number;
-    objects: {
-        _gvid: number;
-        name: string;
-        Label: string;
-        _draw_: ({
-            op: string;
-            grad: string;
-            color: string;
-            rect?: undefined;
-        } | {
-            op: string;
-            rect: number[];
-            grad?: undefined;
-            color?: undefined;
-        })[];
-        _ldraw_: ({
-            op: string;
-            size: number;
-            face: string;
-            grad?: undefined;
-            color?: undefined;
-            pt?: undefined;
-            align?: undefined;
-            width?: undefined;
-            text?: undefined;
-        } | {
-            op: string;
-            grad: string;
-            color: string;
-            size?: undefined;
-            face?: undefined;
-            pt?: undefined;
-            align?: undefined;
-            width?: undefined;
-            text?: undefined;
-        } | {
-            op: string;
-            pt: number[];
-            align: string;
-            width: number;
-            text: string;
-            size?: undefined;
-            face?: undefined;
-            grad?: undefined;
-            color?: undefined;
-        })[];
-        fillcolor: string;
-        fixedsize: string;
-        fontcolor: string;
-        height: string;
-        label: string;
-        margin: string;
-        pos: string;
-        shape: string;
-        style: string;
-        width: string;
-    }[];
-    edges: {
-        _gvid: number;
-        tail: number;
-        head: number;
-        _draw_: ({
-            op: string;
-            grad: string;
-            color: string;
-            points?: undefined;
-        } | {
-            op: string;
-            points: number[][];
-            grad?: undefined;
-            color?: undefined;
-        })[];
-        _hdraw_: ({
-            op: string;
-            style: string;
-            grad?: undefined;
-            color?: undefined;
-            points?: undefined;
-        } | {
-            op: string;
-            grad: string;
-            color: string;
-            style?: undefined;
-            points?: undefined;
-        } | {
-            op: string;
-            points: number[][];
-            style?: undefined;
-            grad?: undefined;
-            color?: undefined;
-        })[];
-        pos: string;
-    }[];
-};
-export declare const nodeWithMetaData: (id: string, name: string) => {
-    id: string;
-    cumulative: number;
-    meta: any;
-};
-export declare const jsonGraphWithMetaData: {
-    total: string;
-    nodes: {
-        id: string;
-        cumulative: number;
-        meta: any;
-    }[];
-    edges: {
-        id: string;
-        source: string;
-        target: string;
-        cumulative: string;
-    }[];
-};
-//# sourceMappingURL=index.d.ts.map

package/dist/Callgraph/mockData/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Callgraph/mockData/index.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,QAAQ,kHAOnB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CAqFrB,CAAC;AAGF,eAAO,MAAM,WAAW,8QAUpB,CAAC;AAEL,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsU1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,OACvB,MAAM,QACJ,MAAM,KACX;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,GAAG,CAAA;CAyH3C,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;YA3H1B,MAAM;oBAAc,MAAM;cAAQ,GAAG;;;;;;;;CAuJ5C,CAAC"}