@parca/profile 0.19.17 → 0.19.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/GraphTooltipArrow/useGraphTooltip/index.js +2 -2
- package/dist/GraphTooltipArrow/useGraphTooltipMetaInfo/index.js +2 -2
- package/dist/ProfileFlameGraph/FlameGraphArrow/ContextMenu.d.ts.map +1 -0
- package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/ContextMenuWrapper.d.ts +1 -1
- package/dist/ProfileFlameGraph/FlameGraphArrow/ContextMenuWrapper.d.ts.map +1 -0
- package/dist/{ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.d.ts → ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.d.ts} +8 -8
- package/dist/ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.d.ts.map +1 -0
- package/dist/{ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js → ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.js} +14 -14
- package/dist/ProfileFlameGraph/FlameGraphArrow/MemoizedTooltip.d.ts.map +1 -0
- package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/MemoizedTooltip.js +1 -1
- package/dist/ProfileFlameGraph/FlameGraphArrow/TextWithEllipsis.d.ts.map +1 -0
- package/dist/ProfileFlameGraph/FlameGraphArrow/TooltipContext.d.ts.map +1 -0
- package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/index.d.ts +7 -7
- package/dist/ProfileFlameGraph/FlameGraphArrow/index.d.ts.map +1 -0
- package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/index.js +18 -15
- package/dist/ProfileFlameGraph/FlameGraphArrow/useMappingList.d.ts.map +1 -0
- package/dist/ProfileFlameGraph/FlameGraphArrow/useNodeColor.d.ts.map +1 -0
- package/dist/ProfileFlameGraph/FlameGraphArrow/utils.d.ts.map +1 -0
- package/dist/{ProfileIcicleGraph → ProfileFlameGraph}/index.d.ts +8 -8
- package/dist/ProfileFlameGraph/index.d.ts.map +1 -0
- package/dist/{ProfileIcicleGraph → ProfileFlameGraph}/index.js +33 -33
- package/dist/ProfileSelector/useAutoQuerySelector.js +1 -1
- package/dist/ProfileView/components/ActionButtons/GroupByDropdown.d.ts.map +1 -1
- package/dist/ProfileView/components/ActionButtons/GroupByDropdown.js +1 -1
- package/dist/ProfileView/components/ActionButtons/SortByDropdown.js +1 -1
- package/dist/ProfileView/components/ColorStackLegend.js +2 -2
- package/dist/ProfileView/components/DashboardItems/index.d.ts +1 -1
- package/dist/ProfileView/components/DashboardItems/index.d.ts.map +1 -1
- package/dist/ProfileView/components/DashboardItems/index.js +7 -7
- package/dist/ProfileView/components/DashboardLayout/index.d.ts +1 -1
- package/dist/ProfileView/components/DashboardLayout/index.d.ts.map +1 -1
- package/dist/ProfileView/components/DiffLegend.js +1 -1
- package/dist/ProfileView/components/GroupByLabelsDropdown/index.js +1 -1
- package/dist/ProfileView/components/InvertCallStack/index.d.ts.map +1 -1
- package/dist/ProfileView/components/InvertCallStack/index.js +1 -1
- package/dist/ProfileView/components/Toolbars/MultiLevelDropdown.js +1 -1
- package/dist/ProfileView/components/Toolbars/index.d.ts +5 -5
- package/dist/ProfileView/components/Toolbars/index.d.ts.map +1 -1
- package/dist/ProfileView/components/Toolbars/index.js +4 -4
- package/dist/ProfileView/components/ViewSelector/Dropdown.d.ts +2 -1
- package/dist/ProfileView/components/ViewSelector/Dropdown.d.ts.map +1 -1
- package/dist/ProfileView/components/ViewSelector/Dropdown.js +2 -2
- package/dist/ProfileView/components/ViewSelector/index.d.ts.map +1 -1
- package/dist/ProfileView/components/ViewSelector/index.js +12 -8
- package/dist/ProfileView/components/VisualizationContainer/index.d.ts +1 -1
- package/dist/ProfileView/components/VisualizationContainer/index.d.ts.map +1 -1
- package/dist/ProfileView/components/VisualizationPanel.d.ts +1 -1
- package/dist/ProfileView/components/VisualizationPanel.d.ts.map +1 -1
- package/dist/ProfileView/components/VisualizationPanel.js +1 -1
- package/dist/ProfileView/hooks/useProfileMetadata.js +1 -1
- package/dist/ProfileView/hooks/useVisualizationState.d.ts +1 -1
- package/dist/ProfileView/hooks/useVisualizationState.d.ts.map +1 -1
- package/dist/ProfileView/hooks/useVisualizationState.js +1 -1
- package/dist/ProfileView/index.js +3 -3
- package/dist/ProfileView/types/visualization.d.ts +1 -1
- package/dist/ProfileView/types/visualization.d.ts.map +1 -1
- package/dist/ProfileViewWithData.js +10 -10
- package/dist/Sandwich/components/CalleesSection.d.ts +1 -1
- package/dist/Sandwich/components/CalleesSection.d.ts.map +1 -1
- package/dist/Sandwich/components/CalleesSection.js +3 -3
- package/dist/Sandwich/components/CallersSection.d.ts +1 -1
- package/dist/Sandwich/components/CallersSection.d.ts.map +1 -1
- package/dist/Sandwich/components/CallersSection.js +3 -3
- package/dist/Sandwich/index.d.ts.map +1 -1
- package/dist/Sandwich/index.js +3 -5
- package/dist/Sandwich/utils/processRowData.d.ts +1 -1
- package/dist/Sandwich/utils/processRowData.d.ts.map +1 -1
- package/dist/Table/hooks/useColorManagement.js +1 -1
- package/dist/Table/index.js +2 -2
- package/dist/Table/utils/functions.d.ts +1 -1
- package/dist/Table/utils/functions.d.ts.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/package.json +7 -7
- package/src/GraphTooltipArrow/useGraphTooltip/index.ts +2 -2
- package/src/GraphTooltipArrow/useGraphTooltipMetaInfo/index.ts +2 -2
- package/src/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/ContextMenuWrapper.tsx +1 -1
- package/src/{ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx → ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes.tsx} +27 -30
- package/src/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/MemoizedTooltip.tsx +1 -1
- package/src/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/index.tsx +30 -26
- package/src/{ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-10M.benchmark.tsx → ProfileFlameGraph/benchmarks/ProfileFlameGraph-10M.benchmark.tsx} +2 -2
- package/src/{ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-1M.benchmark.tsx → ProfileFlameGraph/benchmarks/ProfileFlameGraph-1M.benchmark.tsx} +2 -2
- package/src/{ProfileIcicleGraph/benchmarks/ProfileIcicleGraph-20M.benchmark.tsx → ProfileFlameGraph/benchmarks/ProfileFlameGraph-20M.benchmark.tsx} +2 -2
- package/src/{ProfileIcicleGraph → ProfileFlameGraph}/index.tsx +57 -57
- package/src/ProfileSelector/useAutoQuerySelector.ts +1 -1
- package/src/ProfileView/components/ActionButtons/GroupByDropdown.tsx +6 -8
- package/src/ProfileView/components/ActionButtons/SortByDropdown.tsx +1 -1
- package/src/ProfileView/components/ColorStackLegend.tsx +2 -2
- package/src/ProfileView/components/DashboardItems/index.tsx +8 -8
- package/src/ProfileView/components/DashboardLayout/index.tsx +1 -1
- package/src/ProfileView/components/DiffLegend.tsx +3 -3
- package/src/ProfileView/components/GroupByLabelsDropdown/index.tsx +1 -1
- package/src/ProfileView/components/InvertCallStack/index.tsx +1 -0
- package/src/ProfileView/components/Toolbars/MultiLevelDropdown.tsx +1 -1
- package/src/ProfileView/components/Toolbars/index.tsx +8 -8
- package/src/ProfileView/components/ViewSelector/Dropdown.tsx +8 -1
- package/src/ProfileView/components/ViewSelector/index.tsx +12 -7
- package/src/ProfileView/components/VisualizationContainer/index.tsx +1 -1
- package/src/ProfileView/components/VisualizationPanel.tsx +4 -4
- package/src/ProfileView/hooks/useProfileMetadata.ts +1 -1
- package/src/ProfileView/hooks/useVisualizationState.ts +2 -2
- package/src/ProfileView/index.tsx +4 -4
- package/src/ProfileView/types/visualization.ts +2 -2
- package/src/ProfileViewWithData.tsx +10 -10
- package/src/Sandwich/components/CalleesSection.tsx +4 -4
- package/src/Sandwich/components/CallersSection.tsx +5 -5
- package/src/Sandwich/index.tsx +10 -4
- package/src/Sandwich/utils/processRowData.ts +1 -1
- package/src/Table/hooks/useColorManagement.ts +1 -1
- package/src/Table/index.tsx +2 -2
- package/src/Table/utils/functions.ts +1 -1
- package/src/index.tsx +2 -2
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.d.ts.map +0 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.d.ts.map +0 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.d.ts.map +0 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.d.ts.map +0 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/TextWithEllipsis.d.ts.map +0 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.d.ts.map +0 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.d.ts.map +0 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/useMappingList.d.ts.map +0 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/useNodeColor.d.ts.map +0 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.d.ts.map +0 -1
- package/dist/ProfileIcicleGraph/index.d.ts.map +0 -1
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/ContextMenu.d.ts +0 -0
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/ContextMenu.js +0 -0
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/ContextMenuWrapper.js +0 -0
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/MemoizedTooltip.d.ts +0 -0
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/TextWithEllipsis.d.ts +0 -0
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/TextWithEllipsis.js +0 -0
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/TooltipContext.d.ts +0 -0
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/TooltipContext.js +0 -0
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/useMappingList.d.ts +0 -0
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/useMappingList.js +0 -0
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/useNodeColor.d.ts +0 -0
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/useNodeColor.js +0 -0
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/utils.d.ts +0 -0
- /package/dist/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/utils.js +0 -0
- /package/src/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/ContextMenu.tsx +0 -0
- /package/src/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/TextWithEllipsis.tsx +0 -0
- /package/src/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/TooltipContext.tsx +0 -0
- /package/src/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/useMappingList.ts +0 -0
- /package/src/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/useNodeColor.ts +0 -0
- /package/src/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/utils.ts +0 -0
- /package/src/{ProfileIcicleGraph → ProfileFlameGraph}/benchmarks/benchdata/populateData.js +0 -0
package/dist/Sandwich/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
// Copyright 2022 The Parca Authors
|
|
3
3
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
4
|
// you may not use this file except in compliance with the License.
|
|
@@ -17,7 +17,7 @@ import { AnimatePresence, motion } from 'framer-motion';
|
|
|
17
17
|
import { QueryRequest_ReportType } from '@parca/client';
|
|
18
18
|
import { useParcaContext, useURLState } from '@parca/components';
|
|
19
19
|
import { useCurrentColorProfile } from '@parca/hooks';
|
|
20
|
-
import useMappingList, { useFilenamesList, } from '../
|
|
20
|
+
import useMappingList, { useFilenamesList, } from '../ProfileFlameGraph/FlameGraphArrow/useMappingList';
|
|
21
21
|
import { useDashboard } from '../ProfileView/context/DashboardContext';
|
|
22
22
|
import { useVisualizationState } from '../ProfileView/hooks/useVisualizationState';
|
|
23
23
|
import { FIELD_FUNCTION_NAME } from '../Table';
|
|
@@ -123,8 +123,6 @@ const Sandwich = React.memo(function Sandwich({ data, filtered, profileType, loa
|
|
|
123
123
|
},
|
|
124
124
|
total: calleesFlamegraphResponse.total?.toString() ?? '0',
|
|
125
125
|
}
|
|
126
|
-
: undefined, calleesFlamegraphLoading: calleesFlamegraphLoading, calleesFlamegraphError: calleesFlamegraphError, filtered: filtered, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, metadataMappingFiles: metadataMappingFiles })] })) : (_jsx("div", { className: "items-center justify-center flex h-full w-full", children: _jsx("p", { className: "text-sm", children: dashboardItems.includes('table')
|
|
127
|
-
? 'Please select a function to view its callers and callees.'
|
|
128
|
-
: 'Use the right-click menu on the flame graph to choose a function to view its callers and callees.' }) })) }) }, "sandwich-loaded") }) }));
|
|
126
|
+
: undefined, calleesFlamegraphLoading: calleesFlamegraphLoading, calleesFlamegraphError: calleesFlamegraphError, filtered: filtered, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, metadataMappingFiles: metadataMappingFiles })] })) : (_jsx("div", { className: "items-center justify-center flex h-full w-full", children: _jsx("p", { className: "text-sm", children: dashboardItems.includes('table') ? ('Please select a function to view its callers and callees.') : (_jsxs(_Fragment, { children: ["Use the right-click menu on the Flame", ' ', dashboardItems.includes('flamegraph') ? 'Graph' : 'Chart', " to choose a function to view its callers and callees."] })) }) })) }) }, "sandwich-loaded") }) }));
|
|
129
127
|
});
|
|
130
128
|
export default Sandwich;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type Table } from 'apache-arrow';
|
|
2
|
-
import { type colorByColors } from '../../
|
|
2
|
+
import { type colorByColors } from '../../ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes';
|
|
3
3
|
import { type DataRow } from '../../Table/utils/functions';
|
|
4
4
|
interface ProcessRowDataProps {
|
|
5
5
|
table: Table | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"processRowData.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/utils/processRowData.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,KAAK,EAAC,MAAM,cAAc,CAAC;AAExC,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"processRowData.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/utils/processRowData.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,KAAK,EAAC,MAAM,cAAc,CAAC;AAExC,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,yDAAyD,CAAC;AAY3F,OAAO,EAAuB,KAAK,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAE/E,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,cAAc,CAAC,EAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAC,EAAE,mBAAmB,GAAG,OAAO,EAAE,CA0C9F"}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
// See the License for the specific language governing permissions and
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
import { useMemo } from 'react';
|
|
14
|
-
import { getFilenameColors, getMappingColors } from '../../
|
|
14
|
+
import { getFilenameColors, getMappingColors } from '../../ProfileFlameGraph/FlameGraphArrow';
|
|
15
15
|
export function useColorManagement({ isDarkMode, currentColorProfile, mappingsList, filenamesList, colorBy, }) {
|
|
16
16
|
const filenameColors = useMemo(() => {
|
|
17
17
|
return getFilenameColors(filenamesList, isDarkMode, currentColorProfile);
|
package/dist/Table/index.js
CHANGED
|
@@ -18,7 +18,7 @@ import { useContextMenu } from 'react-contexify';
|
|
|
18
18
|
import { Table as TableComponent, TableSkeleton, useParcaContext, useURLState, } from '@parca/components';
|
|
19
19
|
import { useCurrentColorProfile } from '@parca/hooks';
|
|
20
20
|
import { isSearchMatch } from '@parca/utilities';
|
|
21
|
-
import useMappingList, { useFilenamesList, } from '../
|
|
21
|
+
import useMappingList, { useFilenamesList, } from '../ProfileFlameGraph/FlameGraphArrow/useMappingList';
|
|
22
22
|
import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
|
|
23
23
|
import TableContextMenuWrapper from './TableContextMenuWrapper';
|
|
24
24
|
import { useColorManagement } from './hooks/useColorManagement';
|
|
@@ -82,7 +82,7 @@ export const Table = React.memo(function Table({ data, total, filtered, profileT
|
|
|
82
82
|
});
|
|
83
83
|
const { columns, initialSorting, columnVisibility } = tableConfig;
|
|
84
84
|
const selectSpan = useCallback((span) => {
|
|
85
|
-
if (dashboardItems.includes('
|
|
85
|
+
if (dashboardItems.includes('flamegraph')) {
|
|
86
86
|
setSearchString(span.trim());
|
|
87
87
|
}
|
|
88
88
|
else {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type Row as RowType } from '@tanstack/table-core';
|
|
2
2
|
import { Vector } from 'apache-arrow';
|
|
3
|
-
import { colorByColors } from '../../
|
|
3
|
+
import { colorByColors } from '../../ProfileFlameGraph/FlameGraphArrow/FlameGraphNodes';
|
|
4
4
|
export interface DataRow {
|
|
5
5
|
id: number;
|
|
6
6
|
moreActions?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../src/Table/utils/functions.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,GAAG,IAAI,OAAO,EAAC,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAIpC,OAAO,EAAC,aAAa,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../src/Table/utils/functions.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { useLabelNames } from './MatchersInput';
|
|
|
2
2
|
import ProfileExplorer, { getExpressionAsAString } from './ProfileExplorer';
|
|
3
3
|
import ProfileTypeSelector from './ProfileTypeSelector';
|
|
4
4
|
import CustomSelect from './SimpleMatchers/Select';
|
|
5
|
-
export * from './
|
|
5
|
+
export * from './ProfileFlameGraph';
|
|
6
6
|
export * from './ProfileSource';
|
|
7
7
|
export * from './ProfileView';
|
|
8
8
|
export * from './ProfileViewWithData';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,eAAe,EAAE,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAC1E,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,OAAO,eAAe,EAAE,EAAC,sBAAsB,EAAC,MAAM,mBAAmB,CAAC;AAC1E,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AAEtC,eAAO,MAAM,qCAAqC;;CAEjD,CAAC;AAEF,OAAO,EAAC,eAAe,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,YAAY,EAAE,aAAa,EAAC,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -14,7 +14,7 @@ import { useLabelNames } from './MatchersInput';
|
|
|
14
14
|
import ProfileExplorer, { getExpressionAsAString } from './ProfileExplorer';
|
|
15
15
|
import ProfileTypeSelector from './ProfileTypeSelector';
|
|
16
16
|
import CustomSelect from './SimpleMatchers/Select';
|
|
17
|
-
export * from './
|
|
17
|
+
export * from './ProfileFlameGraph';
|
|
18
18
|
export * from './ProfileSource';
|
|
19
19
|
export * from './ProfileView';
|
|
20
20
|
export * from './ProfileViewWithData';
|
|
@@ -23,6 +23,6 @@ export * from './ProfileTypeSelector';
|
|
|
23
23
|
export * from './SourceView';
|
|
24
24
|
export * from './ProfileMetricsGraph';
|
|
25
25
|
export const DEFAULT_PROFILE_EXPLORER_PARAM_VALUES = {
|
|
26
|
-
dashboard_items: '
|
|
26
|
+
dashboard_items: 'flamegraph',
|
|
27
27
|
};
|
|
28
28
|
export { ProfileExplorer, ProfileTypeSelector, getExpressionAsAString, CustomSelect, useLabelNames };
|
package/package.json
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@parca/profile",
|
|
3
|
-
"version": "0.19.
|
|
3
|
+
"version": "0.19.19",
|
|
4
4
|
"description": "Profile viewing libraries",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@floating-ui/react": "^0.27.12",
|
|
7
7
|
"@headlessui/react": "^1.7.19",
|
|
8
8
|
"@iconify/react": "^4.0.0",
|
|
9
|
-
"@parca/client": "0.17.
|
|
10
|
-
"@parca/components": "0.16.
|
|
9
|
+
"@parca/client": "0.17.2",
|
|
10
|
+
"@parca/components": "0.16.348",
|
|
11
11
|
"@parca/dynamicsize": "0.16.65",
|
|
12
|
-
"@parca/hooks": "0.0.
|
|
12
|
+
"@parca/hooks": "0.0.93",
|
|
13
13
|
"@parca/icons": "0.16.72",
|
|
14
14
|
"@parca/parser": "0.16.79",
|
|
15
|
-
"@parca/store": "0.16.
|
|
16
|
-
"@parca/utilities": "0.0.
|
|
15
|
+
"@parca/store": "0.16.177",
|
|
16
|
+
"@parca/utilities": "0.0.102",
|
|
17
17
|
"@popperjs/core": "^2.11.8",
|
|
18
18
|
"@protobuf-ts/runtime-rpc": "^2.5.0",
|
|
19
19
|
"@storybook/preview-api": "^8.4.3",
|
|
@@ -78,5 +78,5 @@
|
|
|
78
78
|
"access": "public",
|
|
79
79
|
"registry": "https://registry.npmjs.org/"
|
|
80
80
|
},
|
|
81
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "55c867baa7c927d7184bc4811b0543f641d09633"
|
|
82
82
|
}
|
|
@@ -21,8 +21,8 @@ import {
|
|
|
21
21
|
FIELD_DIFF,
|
|
22
22
|
FIELD_FLAT,
|
|
23
23
|
FIELD_LOCATION_ADDRESS,
|
|
24
|
-
} from '../../
|
|
25
|
-
import {getTextForCumulative, nodeLabel} from '../../
|
|
24
|
+
} from '../../ProfileFlameGraph/FlameGraphArrow';
|
|
25
|
+
import {getTextForCumulative, nodeLabel} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
|
|
26
26
|
|
|
27
27
|
interface Props {
|
|
28
28
|
table: Table<any>;
|
|
@@ -26,8 +26,8 @@ import {
|
|
|
26
26
|
FIELD_MAPPING_BUILD_ID,
|
|
27
27
|
FIELD_MAPPING_FILE,
|
|
28
28
|
FIELD_TIMESTAMP,
|
|
29
|
-
} from '../../
|
|
30
|
-
import {arrowToString} from '../../
|
|
29
|
+
} from '../../ProfileFlameGraph/FlameGraphArrow';
|
|
30
|
+
import {arrowToString} from '../../ProfileFlameGraph/FlameGraphArrow/utils';
|
|
31
31
|
import {ProfileSource} from '../../ProfileSource';
|
|
32
32
|
import {useProfileViewContext} from '../../ProfileView/context/ProfileViewContext';
|
|
33
33
|
import {useQuery} from '../../useQuery';
|
|
@@ -21,8 +21,6 @@ import {isSearchMatch} from '@parca/utilities';
|
|
|
21
21
|
|
|
22
22
|
import 'react-contexify/dist/ReactContexify.css';
|
|
23
23
|
|
|
24
|
-
import {USER_PREFERENCES} from '@parca/hooks';
|
|
25
|
-
|
|
26
24
|
import {ProfileSource} from '../../ProfileSource';
|
|
27
25
|
import TextWithEllipsis from './TextWithEllipsis';
|
|
28
26
|
import {
|
|
@@ -32,7 +30,6 @@ import {
|
|
|
32
30
|
FIELD_FUNCTION_FILE_NAME,
|
|
33
31
|
FIELD_FUNCTION_NAME,
|
|
34
32
|
FIELD_MAPPING_FILE,
|
|
35
|
-
FIELD_PARENT,
|
|
36
33
|
FIELD_TIMESTAMP,
|
|
37
34
|
FIELD_VALUE_OFFSET,
|
|
38
35
|
} from './index';
|
|
@@ -45,7 +42,7 @@ export interface colorByColors {
|
|
|
45
42
|
[key: string]: string;
|
|
46
43
|
}
|
|
47
44
|
|
|
48
|
-
export interface
|
|
45
|
+
export interface FlameNodeProps {
|
|
49
46
|
height: number;
|
|
50
47
|
totalWidth: number;
|
|
51
48
|
table: Table<any>;
|
|
@@ -59,30 +56,30 @@ export interface IcicleNodeProps {
|
|
|
59
56
|
colorForSimilarNodes: string;
|
|
60
57
|
selectedRow: number;
|
|
61
58
|
onClick: () => void;
|
|
62
|
-
|
|
59
|
+
isFlameChart: boolean;
|
|
63
60
|
profileSource: ProfileSource;
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
isRenderedAsFlamegraph?: boolean;
|
|
62
|
+
isInSandwichView?: boolean;
|
|
66
63
|
maxDepth?: number;
|
|
67
64
|
effectiveDepth?: number;
|
|
68
65
|
tooltipId?: string;
|
|
69
66
|
|
|
70
|
-
// Hovering row must only ever be used for highlighting similar nodes, otherwise it will cause performance issues as it causes the full
|
|
67
|
+
// Hovering row must only ever be used for highlighting similar nodes, otherwise it will cause performance issues as it causes the full flamegraph to get rerendered every time the hovering row changes.
|
|
71
68
|
hoveringRow?: number;
|
|
72
69
|
setHoveringRow: (row: number | undefined) => void;
|
|
73
70
|
}
|
|
74
71
|
|
|
75
|
-
export const
|
|
72
|
+
export const flameRectStyles = {
|
|
76
73
|
cursor: 'pointer',
|
|
77
74
|
transition: 'opacity .15s linear',
|
|
78
75
|
};
|
|
79
|
-
export const
|
|
76
|
+
export const fadedFlameRectStyles = {
|
|
80
77
|
cursor: 'pointer',
|
|
81
78
|
transition: 'opacity .15s linear',
|
|
82
79
|
opacity: '0.5',
|
|
83
80
|
};
|
|
84
81
|
|
|
85
|
-
export const
|
|
82
|
+
export const FlameNode = React.memo(function FlameNodeNoMemo({
|
|
86
83
|
table,
|
|
87
84
|
row,
|
|
88
85
|
colors,
|
|
@@ -98,14 +95,14 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
|
|
|
98
95
|
onContextMenu,
|
|
99
96
|
hoveringRow,
|
|
100
97
|
setHoveringRow,
|
|
101
|
-
|
|
98
|
+
isFlameChart,
|
|
102
99
|
profileSource,
|
|
103
|
-
|
|
104
|
-
|
|
100
|
+
isRenderedAsFlamegraph = false,
|
|
101
|
+
isInSandwichView = false,
|
|
105
102
|
maxDepth = 0,
|
|
106
103
|
effectiveDepth,
|
|
107
104
|
tooltipId = 'default',
|
|
108
|
-
}:
|
|
105
|
+
}: FlameNodeProps): React.JSX.Element {
|
|
109
106
|
// get the columns to read from
|
|
110
107
|
const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
|
|
111
108
|
const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
|
|
@@ -181,8 +178,8 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
|
|
|
181
178
|
return <></>;
|
|
182
179
|
}
|
|
183
180
|
|
|
184
|
-
if (row === 0 && (
|
|
185
|
-
// The root node is not rendered in the
|
|
181
|
+
if (row === 0 && (isFlameChart || isInSandwichView)) {
|
|
182
|
+
// The root node is not rendered in the flame chart or sandwich view, so we return null.
|
|
186
183
|
return <></>;
|
|
187
184
|
}
|
|
188
185
|
|
|
@@ -190,7 +187,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
|
|
|
190
187
|
const tsBounds = boundsFromProfileSource(profileSource);
|
|
191
188
|
const total = cumulativeColumn?.get(selectedRow);
|
|
192
189
|
const totalRatio = cumulative > total ? 1 : Number(cumulative) / Number(total);
|
|
193
|
-
const width: number =
|
|
190
|
+
const width: number = isFlameChart
|
|
194
191
|
? (Number(cumulative) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
|
|
195
192
|
: totalRatio * totalWidth;
|
|
196
193
|
|
|
@@ -200,12 +197,12 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
|
|
|
200
197
|
|
|
201
198
|
const selectedDepth = depthColumn?.get(selectedRow);
|
|
202
199
|
const styles =
|
|
203
|
-
selectedDepth !== undefined && selectedDepth > depth ?
|
|
200
|
+
selectedDepth !== undefined && selectedDepth > depth ? fadedFlameRectStyles : flameRectStyles;
|
|
204
201
|
|
|
205
202
|
const onMouseEnter = (): void => {
|
|
206
203
|
setHoveringRow(row);
|
|
207
204
|
window.dispatchEvent(
|
|
208
|
-
new CustomEvent(`
|
|
205
|
+
new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
|
|
209
206
|
detail: {row},
|
|
210
207
|
})
|
|
211
208
|
);
|
|
@@ -214,7 +211,7 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
|
|
|
214
211
|
const onMouseLeave = (): void => {
|
|
215
212
|
setHoveringRow(undefined);
|
|
216
213
|
window.dispatchEvent(
|
|
217
|
-
new CustomEvent(`
|
|
214
|
+
new CustomEvent(`flame-tooltip-update-${tooltipId}`, {
|
|
218
215
|
detail: {row: null},
|
|
219
216
|
})
|
|
220
217
|
);
|
|
@@ -226,25 +223,25 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
|
|
|
226
223
|
|
|
227
224
|
const ts = tsColumn !== null ? Number(tsColumn.get(row)) : 0;
|
|
228
225
|
const x =
|
|
229
|
-
|
|
226
|
+
isFlameChart && tsColumn !== null
|
|
230
227
|
? ((ts - Number(tsBounds[0])) / (Number(tsBounds[1]) - Number(tsBounds[0]))) * totalWidth
|
|
231
228
|
: selectedDepth > depth
|
|
232
229
|
? 0
|
|
233
230
|
: ((Number(valueOffset) - Number(selectionOffset)) / Number(total)) * totalWidth;
|
|
234
231
|
|
|
235
232
|
const calculateY = (
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
233
|
+
isRenderedAsFlamegraph: boolean,
|
|
234
|
+
isInSandwichView: boolean,
|
|
235
|
+
isFlameChart: boolean,
|
|
239
236
|
maxDepth: number,
|
|
240
237
|
depth: number,
|
|
241
238
|
height: number
|
|
242
239
|
): number => {
|
|
243
|
-
if (
|
|
240
|
+
if (isRenderedAsFlamegraph) {
|
|
244
241
|
return (maxDepth - depth) * height; // Flamegraph is inverted
|
|
245
242
|
}
|
|
246
243
|
|
|
247
|
-
if (
|
|
244
|
+
if (isFlameChart || isInSandwichView) {
|
|
248
245
|
return (depth - 1) * height;
|
|
249
246
|
}
|
|
250
247
|
|
|
@@ -252,9 +249,9 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({
|
|
|
252
249
|
};
|
|
253
250
|
|
|
254
251
|
const y = calculateY(
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
252
|
+
isRenderedAsFlamegraph,
|
|
253
|
+
isInSandwichView,
|
|
254
|
+
isFlameChart,
|
|
258
255
|
effectiveDepth ?? maxDepth,
|
|
259
256
|
depth,
|
|
260
257
|
height
|
|
@@ -38,7 +38,7 @@ export const MemoizedTooltip = memo(function MemoizedTooltip({
|
|
|
38
38
|
setTooltipRow(event.detail.row);
|
|
39
39
|
};
|
|
40
40
|
|
|
41
|
-
const eventName = `
|
|
41
|
+
const eventName = `flame-tooltip-update-${tooltipId}`;
|
|
42
42
|
|
|
43
43
|
// Delay to ensure all DOM updates and React renders are complete
|
|
44
44
|
// This fixes the race condition in sandwich view
|
package/src/{ProfileIcicleGraph/IcicleGraphArrow → ProfileFlameGraph/FlameGraphArrow}/index.tsx
RENAMED
|
@@ -34,7 +34,7 @@ import {getLastItem, type ColorConfig} from '@parca/utilities';
|
|
|
34
34
|
import {ProfileSource} from '../../ProfileSource';
|
|
35
35
|
import {useProfileViewContext} from '../../ProfileView/context/ProfileViewContext';
|
|
36
36
|
import ContextMenuWrapper, {ContextMenuWrapperRef} from './ContextMenuWrapper';
|
|
37
|
-
import {
|
|
37
|
+
import {FlameNode, RowHeight, colorByColors} from './FlameGraphNodes';
|
|
38
38
|
import {MemoizedTooltip} from './MemoizedTooltip';
|
|
39
39
|
import {TooltipProvider} from './TooltipContext';
|
|
40
40
|
import {useFilenamesList} from './useMappingList';
|
|
@@ -69,7 +69,7 @@ export const FIELD_PARENT = 'parent';
|
|
|
69
69
|
export const FIELD_DEPTH = 'depth';
|
|
70
70
|
export const FIELD_VALUE_OFFSET = 'value_offset';
|
|
71
71
|
|
|
72
|
-
interface
|
|
72
|
+
interface FlameGraphArrowProps {
|
|
73
73
|
arrow: FlamegraphArrow;
|
|
74
74
|
total: bigint;
|
|
75
75
|
filtered: bigint;
|
|
@@ -81,9 +81,9 @@ interface IcicleGraphArrowProps {
|
|
|
81
81
|
isHalfScreen: boolean;
|
|
82
82
|
mappingsListFromMetadata: string[];
|
|
83
83
|
compareAbsolute: boolean;
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
isFlameChart?: boolean;
|
|
85
|
+
isRenderedAsFlamegraph?: boolean;
|
|
86
|
+
isInSandwichView?: boolean;
|
|
87
87
|
tooltipId?: string;
|
|
88
88
|
maxFrameCount?: number;
|
|
89
89
|
isExpanded?: boolean;
|
|
@@ -130,7 +130,7 @@ function getMaxDepth(depthColumn: Vector<any> | null): number {
|
|
|
130
130
|
return max;
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
export const
|
|
133
|
+
export const FlameGraphArrow = memo(function FlameGraphArrow({
|
|
134
134
|
arrow,
|
|
135
135
|
total,
|
|
136
136
|
filtered,
|
|
@@ -141,13 +141,13 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
|
|
|
141
141
|
profileSource,
|
|
142
142
|
mappingsListFromMetadata,
|
|
143
143
|
compareAbsolute,
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
144
|
+
isFlameChart = false,
|
|
145
|
+
isRenderedAsFlamegraph = false,
|
|
146
|
+
isInSandwichView = false,
|
|
147
147
|
tooltipId = 'default',
|
|
148
148
|
maxFrameCount,
|
|
149
149
|
isExpanded = false,
|
|
150
|
-
}:
|
|
150
|
+
}: FlameGraphArrowProps): React.JSX.Element {
|
|
151
151
|
const [highlightSimilarStacksPreference] = useUserPreference<boolean>(
|
|
152
152
|
USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key
|
|
153
153
|
);
|
|
@@ -174,16 +174,20 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
|
|
|
174
174
|
if (perf?.markInteraction != null) {
|
|
175
175
|
renderStartTime.current = performance.now();
|
|
176
176
|
}
|
|
177
|
-
}, [perf]);
|
|
177
|
+
}, [table, width, curPath, perf]);
|
|
178
178
|
|
|
179
179
|
useEffect(() => {
|
|
180
180
|
if (perf?.setMeasurement != null && renderStartTime.current > 0) {
|
|
181
|
-
const
|
|
182
|
-
|
|
181
|
+
const measureRenderTime = (): void => {
|
|
182
|
+
const renderTime = performance.now() - renderStartTime.current;
|
|
183
|
+
if (perf?.setMeasurement != null) {
|
|
184
|
+
perf.setMeasurement('flamegraph.render_time', renderTime);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
renderStartTime.current = 0;
|
|
188
|
+
};
|
|
183
189
|
|
|
184
|
-
|
|
185
|
-
perf.captureMessage(`Slow flamegraph render: ${renderTime.toFixed(0)}ms`, 'warning');
|
|
186
|
-
}
|
|
190
|
+
requestAnimationFrame(measureRenderTime);
|
|
187
191
|
}
|
|
188
192
|
}, [table, width, curPath, perf]);
|
|
189
193
|
|
|
@@ -251,7 +255,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
|
|
|
251
255
|
|
|
252
256
|
const colorByColors: colorByColors = colorByList[colorByValue as ColorByKey];
|
|
253
257
|
|
|
254
|
-
const MENU_ID = '
|
|
258
|
+
const MENU_ID = 'flame-graph-context-menu';
|
|
255
259
|
const contextMenuRef = useRef<ContextMenuWrapperRef>(null);
|
|
256
260
|
const {show, hideAll} = useContextMenu({
|
|
257
261
|
id: MENU_ID,
|
|
@@ -311,7 +315,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
|
|
|
311
315
|
// Use deferred value to prevent UI blocking when expanding frames
|
|
312
316
|
const deferredEffectiveDepth = useDeferredValue(effectiveDepth);
|
|
313
317
|
|
|
314
|
-
const height =
|
|
318
|
+
const height = isInSandwichView
|
|
315
319
|
? deferredEffectiveDepth * RowHeight
|
|
316
320
|
: (deferredEffectiveDepth + 1) * RowHeight;
|
|
317
321
|
|
|
@@ -363,7 +367,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
|
|
|
363
367
|
hideBinary={hideBinary}
|
|
364
368
|
unit={arrow.unit}
|
|
365
369
|
profileType={profileType}
|
|
366
|
-
|
|
370
|
+
isInSandwichView={isInSandwichView}
|
|
367
371
|
/>
|
|
368
372
|
<MemoizedTooltip contextElement={svgElement} dockedMetainfo={dockedMetainfo} />
|
|
369
373
|
<svg
|
|
@@ -374,7 +378,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
|
|
|
374
378
|
ref={svg}
|
|
375
379
|
>
|
|
376
380
|
{Array.from({length: table.numRows}, (_, row) => (
|
|
377
|
-
<
|
|
381
|
+
<FlameNode
|
|
378
382
|
key={row}
|
|
379
383
|
table={table}
|
|
380
384
|
row={row} // root is always row 0 in the arrow record
|
|
@@ -388,8 +392,8 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
|
|
|
388
392
|
colorForSimilarNodes={colorForSimilarNodes}
|
|
389
393
|
selectedRow={selectedRow}
|
|
390
394
|
onClick={() => {
|
|
391
|
-
if (
|
|
392
|
-
// We don't want to expand in
|
|
395
|
+
if (isFlameChart) {
|
|
396
|
+
// We don't want to expand in flame charts.
|
|
393
397
|
return;
|
|
394
398
|
}
|
|
395
399
|
handleRowClick(row);
|
|
@@ -397,10 +401,10 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
|
|
|
397
401
|
onContextMenu={displayMenu}
|
|
398
402
|
hoveringRow={highlightSimilarStacksPreference ? hoveringRow : undefined}
|
|
399
403
|
setHoveringRow={highlightSimilarStacksPreference ? setHoveringRow : noop}
|
|
400
|
-
|
|
404
|
+
isFlameChart={isFlameChart}
|
|
401
405
|
profileSource={profileSource}
|
|
402
|
-
|
|
403
|
-
|
|
406
|
+
isRenderedAsFlamegraph={isRenderedAsFlamegraph}
|
|
407
|
+
isInSandwichView={isInSandwichView}
|
|
404
408
|
maxDepth={maxDepth}
|
|
405
409
|
effectiveDepth={deferredEffectiveDepth}
|
|
406
410
|
tooltipId={tooltipId}
|
|
@@ -412,4 +416,4 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
|
|
|
412
416
|
);
|
|
413
417
|
});
|
|
414
418
|
|
|
415
|
-
export default
|
|
419
|
+
export default FlameGraphArrow;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
|
|
14
14
|
import React from 'react';
|
|
15
|
-
import
|
|
15
|
+
import ProfileFlameGraph from '..';
|
|
16
16
|
import {Provider} from 'react-redux';
|
|
17
17
|
import {createStore} from '@parca/store';
|
|
18
18
|
import parca10mGraphData from './benchdata/parca-10m.json';
|
|
@@ -26,7 +26,7 @@ export default function ({callback = () => {}}): React.ReactElement {
|
|
|
26
26
|
return (
|
|
27
27
|
<div ref={callback}>
|
|
28
28
|
<Provider store={reduxStore}>
|
|
29
|
-
<
|
|
29
|
+
<ProfileFlameGraph
|
|
30
30
|
graph={parca10mGraph}
|
|
31
31
|
sampleUnit={parca10mGraph.unit}
|
|
32
32
|
curPath={[]}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
|
|
14
14
|
import React from 'react';
|
|
15
|
-
import
|
|
15
|
+
import ProfileFlameGraph from '../';
|
|
16
16
|
import {Provider} from 'react-redux';
|
|
17
17
|
import {createStore} from '@parca/store';
|
|
18
18
|
import {Flamegraph} from '@parca/client';
|
|
@@ -26,7 +26,7 @@ export default function ({callback = () => {}}): React.ReactElement {
|
|
|
26
26
|
return (
|
|
27
27
|
<div ref={callback}>
|
|
28
28
|
<Provider store={reduxStore}>
|
|
29
|
-
<
|
|
29
|
+
<ProfileFlameGraph
|
|
30
30
|
graph={parca1mGraph}
|
|
31
31
|
sampleUnit={parca1mGraph.unit}
|
|
32
32
|
curPath={[]}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
|
|
14
14
|
import React from 'react';
|
|
15
|
-
import
|
|
15
|
+
import ProfileFlameGraph from '..';
|
|
16
16
|
import {Provider} from 'react-redux';
|
|
17
17
|
import {createStore} from '@parca/store';
|
|
18
18
|
import parca20mGraphData from './benchdata/parca-20m.json';
|
|
@@ -26,7 +26,7 @@ export default function ({callback = () => {}}): React.ReactElement {
|
|
|
26
26
|
return (
|
|
27
27
|
<div ref={callback}>
|
|
28
28
|
<Provider store={reduxStore}>
|
|
29
|
-
<
|
|
29
|
+
<ProfileFlameGraph
|
|
30
30
|
graph={parca20mGraph}
|
|
31
31
|
sampleUnit={parca20mGraph.unit}
|
|
32
32
|
curPath={[]}
|