@parca/profile 0.16.456 → 0.16.457
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 +4 -0
- package/dist/MetricsGraphStrips/index.d.ts +1 -0
- package/dist/MetricsGraphStrips/index.d.ts.map +1 -1
- package/dist/MetricsGraphStrips/index.js +3 -3
- package/dist/ProfileIcicleGraph/IcicleGraph/index.js +1 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.d.ts +9 -0
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.d.ts.map +1 -0
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.js +51 -0
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.d.ts +10 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.d.ts.map +1 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js +2 -2
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.d.ts +5 -0
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.d.ts.map +1 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js +9 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.d.ts +3 -0
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.d.ts.map +1 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.js +18 -0
- package/dist/ProfileIcicleGraph/index.d.ts +4 -1
- package/dist/ProfileIcicleGraph/index.d.ts.map +1 -1
- package/dist/ProfileIcicleGraph/index.js +6 -4
- package/dist/ProfileView/components/DashboardItems/index.d.ts +2 -1
- package/dist/ProfileView/components/DashboardItems/index.d.ts.map +1 -1
- package/dist/ProfileView/components/DashboardItems/index.js +7 -1
- package/dist/ProfileView/components/ViewSelector/index.d.ts.map +1 -1
- package/dist/ProfileView/components/ViewSelector/index.js +4 -1
- package/dist/ProfileView/index.d.ts +1 -1
- package/dist/ProfileView/index.d.ts.map +1 -1
- package/dist/ProfileView/index.js +3 -2
- package/dist/ProfileView/types/visualization.d.ts +2 -4
- package/dist/ProfileView/types/visualization.d.ts.map +1 -1
- package/dist/ProfileViewWithData.d.ts +1 -4
- package/dist/ProfileViewWithData.d.ts.map +1 -1
- package/dist/ProfileViewWithData.js +30 -7
- package/dist/TimelineGuide/index.d.ts +4 -3
- package/dist/TimelineGuide/index.d.ts.map +1 -1
- package/dist/TimelineGuide/index.js +9 -7
- package/dist/styles.css +1 -1
- package/dist/utils.d.ts +1 -0
- package/dist/utils.d.ts.map +1 -1
- package/package.json +7 -7
- package/src/MetricsGraphStrips/index.tsx +3 -3
- package/src/ProfileIcicleGraph/IcicleGraph/index.tsx +1 -1
- package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.tsx +157 -0
- package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx +3 -3
- package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx +58 -0
- package/src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts +29 -1
- package/src/ProfileIcicleGraph/index.tsx +16 -6
- package/src/ProfileView/components/DashboardItems/index.tsx +27 -0
- package/src/ProfileView/components/ViewSelector/index.tsx +5 -1
- package/src/ProfileView/index.tsx +3 -3
- package/src/ProfileView/types/visualization.ts +2 -4
- package/src/ProfileViewWithData.tsx +36 -11
- package/src/TimelineGuide/index.tsx +41 -31
- package/src/utils.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 0.16.457 (2025-01-06)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @parca/profile
|
|
9
|
+
|
|
6
10
|
## [0.16.456](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.455...@parca/profile@0.16.456) (2024-12-16)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @parca/profile
|
|
@@ -11,6 +11,7 @@ interface Props {
|
|
|
11
11
|
onSelectedTimeframe: (labels: LabelSet, bounds: NumberDuo | undefined) => void;
|
|
12
12
|
width?: number;
|
|
13
13
|
}
|
|
14
|
+
export declare const labelSetToString: (labelSet?: LabelSet) => string;
|
|
14
15
|
export declare const MetricsGraphStrips: ({ cpus, data, selectedTimeframe, onSelectedTimeframe, width, }: Props) => JSX.Element;
|
|
15
16
|
export {};
|
|
16
17
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAGvC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAY,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MetricsGraphStrips/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAGvC,OAAO,EAAC,SAAS,EAAC,MAAM,UAAU,CAAC;AACnC,OAAO,EAAY,SAAS,EAAC,MAAM,aAAa,CAAC;AAEjD,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE;QAClB,MAAM,EAAE,QAAQ,CAAC;QACjB,MAAM,EAAE,SAAS,CAAC;KACnB,CAAC;IACF,mBAAmB,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,cAAe,QAAQ,KAAG,MAmBtD,CAAC;AAMF,eAAO,MAAM,kBAAkB,mEAM5B,KAAK,KAAG,GAAG,CAAC,OAmEd,CAAC"}
|
|
@@ -16,7 +16,7 @@ import { Icon } from '@iconify/react';
|
|
|
16
16
|
import * as d3 from 'd3';
|
|
17
17
|
import { TimelineGuide } from '../TimelineGuide';
|
|
18
18
|
import { AreaGraph } from './AreaGraph';
|
|
19
|
-
const labelSetToString = (labelSet) => {
|
|
19
|
+
export const labelSetToString = (labelSet) => {
|
|
20
20
|
if (labelSet === undefined) {
|
|
21
21
|
return '{}';
|
|
22
22
|
}
|
|
@@ -40,7 +40,7 @@ export const MetricsGraphStrips = ({ cpus, data, selectedTimeframe, onSelectedTi
|
|
|
40
40
|
// @ts-expect-error
|
|
41
41
|
const color = d3.scaleOrdinal(d3.schemeObservable10);
|
|
42
42
|
const bounds = useMemo(() => {
|
|
43
|
-
const bounds = [Infinity, -Infinity];
|
|
43
|
+
const bounds = data.length > 0 ? [Infinity, -Infinity] : [0, 1];
|
|
44
44
|
data.forEach(cpuData => {
|
|
45
45
|
cpuData.forEach(dataPoint => {
|
|
46
46
|
bounds[0] = Math.min(bounds[0], dataPoint.timestamp);
|
|
@@ -49,7 +49,7 @@ export const MetricsGraphStrips = ({ cpus, data, selectedTimeframe, onSelectedTi
|
|
|
49
49
|
});
|
|
50
50
|
return [0, bounds[1] - bounds[0]];
|
|
51
51
|
}, [data]);
|
|
52
|
-
return (_jsxs("div", { className: "flex flex-col gap-1 relative my-0 ml-[70px]", style: { width: width ?? '100%' }, children: [_jsx(TimelineGuide, { bounds: bounds, width: width ?? 1468, height: getTimelineGuideHeight(cpus, collapsedIndices), margin: 1 }), cpus.map((cpu, i) => {
|
|
52
|
+
return (_jsxs("div", { className: "flex flex-col gap-1 relative my-0 ml-[70px]", style: { width: width ?? '100%' }, children: [_jsx(TimelineGuide, { bounds: [BigInt(bounds[0]), BigInt(bounds[1])], width: width ?? 1468, height: getTimelineGuideHeight(cpus, collapsedIndices), margin: 1 }), cpus.map((cpu, i) => {
|
|
53
53
|
const isCollapsed = collapsedIndices.includes(i);
|
|
54
54
|
const labelStr = labelSetToString(cpu);
|
|
55
55
|
return (_jsxs("div", { className: "relative min-h-5", style: { width: width ?? 1468 }, children: [_jsxs("div", { className: "text-xs absolute top-0 left-0 flex gap-[2px] items-center bg-white/50 px-1 rounded-sm cursor-pointer", style: {
|
|
@@ -36,7 +36,7 @@ export const IcicleGraph = memo(function IcicleGraph({ graph, total, filtered, w
|
|
|
36
36
|
}, [width, coloredGraph]);
|
|
37
37
|
const xScale = useMemo(() => {
|
|
38
38
|
if (width === undefined) {
|
|
39
|
-
return (
|
|
39
|
+
return scaleLinear([0n, total], [0, 1]);
|
|
40
40
|
}
|
|
41
41
|
return scaleLinear([0n, total], [0, width]);
|
|
42
42
|
}, [total, width]);
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ProfileSource } from '../../ProfileSource';
|
|
3
|
+
import { IcicleNodeProps } from './IcicleGraphNodes';
|
|
4
|
+
interface IcicleChartRootNodeSpecificProps {
|
|
5
|
+
profileSource?: ProfileSource;
|
|
6
|
+
}
|
|
7
|
+
export declare const IcicleChartRootNode: React.NamedExoticComponent<IcicleNodeProps & IcicleChartRootNodeSpecificProps>;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=IcicleChartRootNode.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IcicleChartRootNode.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleChartRootNode.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,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,gFA8H9B,CAAC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// Copyright 2022 The Parca Authors
|
|
3
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
// you may not use this file except in compliance with the License.
|
|
5
|
+
// You may obtain a copy of the License at
|
|
6
|
+
//
|
|
7
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
//
|
|
9
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
// See the License for the specific language governing permissions and
|
|
13
|
+
// limitations under the License.
|
|
14
|
+
import React from 'react';
|
|
15
|
+
import cx from 'classnames';
|
|
16
|
+
import twColors from 'tailwindcss/colors';
|
|
17
|
+
import { scaleLinear } from '@parca/utilities';
|
|
18
|
+
import { FIELD_CHILDREN, FIELD_CUMULATIVE, FIELD_GROUPBY_METADATA } from '.';
|
|
19
|
+
import { IcicleNode, RowHeight } from './IcicleGraphNodes';
|
|
20
|
+
import { arrowToString, boundsFromProfileSource } from './utils';
|
|
21
|
+
export const IcicleChartRootNode = React.memo(function IcicleChartRootNodeNonMemo({ table, row, colors, colorBy, y, height, setCurPath, curPath, level, path, total, totalWidth, xScale, searchString, setHoveringRow, setHoveringLevel, sortBy, darkMode, compareMode, profileType, isContextMenuOpen, hoveringName, setHoveringName, hoveringRow, colorForSimilarNodes, highlightSimilarStacksPreference, profileSource, }) {
|
|
22
|
+
// get the columns to read from
|
|
23
|
+
const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
|
|
24
|
+
const groupByMetadata = table.getChild(FIELD_GROUPBY_METADATA);
|
|
25
|
+
const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
|
|
26
|
+
const childRows = Array.from(table.getChild(FIELD_CHILDREN)?.get(row) ?? []).sort((a, b) => a - b);
|
|
27
|
+
const tsBounds = boundsFromProfileSource(profileSource);
|
|
28
|
+
const nextLevel = level + 1;
|
|
29
|
+
const nextCurPath = curPath.length === 0 ? [] : curPath.slice(1);
|
|
30
|
+
const tsXScale = scaleLinear([tsBounds[0], tsBounds[1]], [0, totalWidth]);
|
|
31
|
+
const width = nextCurPath.length > 0 || (nextCurPath.length === 0 && curPath.length === 1)
|
|
32
|
+
? totalWidth
|
|
33
|
+
: xScale(BigInt(cumulative));
|
|
34
|
+
if (width <= 1) {
|
|
35
|
+
return _jsx(_Fragment, { children: null });
|
|
36
|
+
}
|
|
37
|
+
return (_jsx(_Fragment, { children: childRows.map(row => {
|
|
38
|
+
const groupByFields = (groupByMetadata?.get(row)).toJSON();
|
|
39
|
+
const tsStr = arrowToString(groupByFields.timestamp);
|
|
40
|
+
const tsNanos = BigInt(parseInt(tsStr, 10)) * 1000000n;
|
|
41
|
+
const durationStr = arrowToString(groupByFields.duration);
|
|
42
|
+
const duration = parseInt(durationStr, 10);
|
|
43
|
+
const x = tsXScale(tsNanos);
|
|
44
|
+
const width = tsXScale(tsNanos + BigInt(Math.round(duration))) - x;
|
|
45
|
+
const cumulative = cumulativeColumn?.get(row) !== null ? BigInt(cumulativeColumn?.get(row)) : 0n;
|
|
46
|
+
const newXScale = scaleLinear([0n, BigInt(cumulative)], [0, width]);
|
|
47
|
+
return (_jsxs(_Fragment, { children: [_jsxs("g", { transform: `translate(${x + 1}, ${y + 1})`, children: [_jsx("rect", { x: 0, y: 0, width: width, height: RowHeight, style: {
|
|
48
|
+
fill: darkMode ? twColors.gray[500] : twColors.gray[200],
|
|
49
|
+
}, className: cx(`stroke-white dark:stroke-gray-700 fill-gray-600 dark:fill-gray-100`) }), _jsx("svg", { width: width - 5, height: height, children: _jsx("text", { x: 5, y: 15, style: { fontSize: '12px' }, children: "root" }) })] }), _jsx(IcicleNode, { table: table, row: row, colors: colors, colorBy: colorBy, x: x, y: RowHeight, 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)] }));
|
|
50
|
+
}) }));
|
|
51
|
+
});
|
|
@@ -36,7 +36,7 @@ export declare const IcicleGraphNodes: React.NamedExoticComponent<IcicleGraphNod
|
|
|
36
36
|
export interface colorByColors {
|
|
37
37
|
[key: string]: string;
|
|
38
38
|
}
|
|
39
|
-
interface IcicleNodeProps {
|
|
39
|
+
export interface IcicleNodeProps {
|
|
40
40
|
x: number;
|
|
41
41
|
y: number;
|
|
42
42
|
height: number;
|
|
@@ -66,6 +66,15 @@ interface IcicleNodeProps {
|
|
|
66
66
|
colorForSimilarNodes: string;
|
|
67
67
|
highlightSimilarStacksPreference: boolean;
|
|
68
68
|
}
|
|
69
|
+
export declare const icicleRectStyles: {
|
|
70
|
+
cursor: string;
|
|
71
|
+
transition: string;
|
|
72
|
+
};
|
|
73
|
+
export declare const fadedIcicleRectStyles: {
|
|
74
|
+
cursor: string;
|
|
75
|
+
transition: string;
|
|
76
|
+
opacity: string;
|
|
77
|
+
};
|
|
69
78
|
export declare const IcicleNode: React.NamedExoticComponent<IcicleNodeProps>;
|
|
70
79
|
export {};
|
|
71
80
|
//# sourceMappingURL=IcicleGraphNodes.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IcicleGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAMnC,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAc1C,eAAO,MAAM,SAAS,KAAK,CAAC;AAE5B,UAAU,qBAAqB;IAC7B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,gCAAgC,EAAE,OAAO,CAAC;CAC3C;AAED,eAAO,MAAM,gBAAgB,mDAiF3B,CAAC;AAEH,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,
|
|
1
|
+
{"version":3,"file":"IcicleGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx"],"names":[],"mappings":"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"}
|
|
@@ -40,11 +40,11 @@ export const IcicleGraphNodes = React.memo(function IcicleGraphNodesNoMemo({ tab
|
|
|
40
40
|
});
|
|
41
41
|
return _jsx("g", { transform: `translate(${x}, ${y})`, children: childrenElements });
|
|
42
42
|
});
|
|
43
|
-
const icicleRectStyles = {
|
|
43
|
+
export const icicleRectStyles = {
|
|
44
44
|
cursor: 'pointer',
|
|
45
45
|
transition: 'opacity .15s linear',
|
|
46
46
|
};
|
|
47
|
-
const fadedIcicleRectStyles = {
|
|
47
|
+
export const fadedIcicleRectStyles = {
|
|
48
48
|
cursor: 'pointer',
|
|
49
49
|
transition: 'opacity .15s linear',
|
|
50
50
|
opacity: '0.5',
|
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { FlamegraphArrow } from '@parca/client';
|
|
3
3
|
import { ProfileType } from '@parca/parser';
|
|
4
4
|
import { type ColorConfig } from '@parca/utilities';
|
|
5
|
+
import { ProfileSource } from '../../ProfileSource';
|
|
5
6
|
import { colorByColors } from './IcicleGraphNodes';
|
|
6
7
|
export declare const FIELD_LABELS_ONLY = "labels_only";
|
|
7
8
|
export declare const FIELD_MAPPING_FILE = "mapping_file";
|
|
@@ -10,6 +11,8 @@ export declare const FIELD_LOCATION_ADDRESS = "location_address";
|
|
|
10
11
|
export declare const FIELD_LOCATION_LINE = "location_line";
|
|
11
12
|
export declare const FIELD_INLINED = "inlined";
|
|
12
13
|
export declare const FIELD_TIMESTAMP = "timestamp";
|
|
14
|
+
export declare const FIELD_DURATION = "duration";
|
|
15
|
+
export declare const FIELD_GROUPBY_METADATA = "groupby_metadata";
|
|
13
16
|
export declare const FIELD_FUNCTION_NAME = "function_name";
|
|
14
17
|
export declare const FIELD_FUNCTION_SYSTEM_NAME = "function_system_name";
|
|
15
18
|
export declare const FIELD_FUNCTION_FILE_NAME = "function_file_name";
|
|
@@ -24,6 +27,7 @@ interface IcicleGraphArrowProps {
|
|
|
24
27
|
total: bigint;
|
|
25
28
|
filtered: bigint;
|
|
26
29
|
profileType?: ProfileType;
|
|
30
|
+
profileSource?: ProfileSource;
|
|
27
31
|
width?: number;
|
|
28
32
|
curPath: string[];
|
|
29
33
|
setCurPath: (path: string[]) => void;
|
|
@@ -32,6 +36,7 @@ interface IcicleGraphArrowProps {
|
|
|
32
36
|
isHalfScreen: boolean;
|
|
33
37
|
mappingsListFromMetadata: string[];
|
|
34
38
|
compareAbsolute: boolean;
|
|
39
|
+
isIcicleChart?: boolean;
|
|
35
40
|
}
|
|
36
41
|
export declare const getMappingColors: (mappingsList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => colorByColors;
|
|
37
42
|
export declare const getFilenameColors: (filenamesList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => colorByColors;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAKrF,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,OAAO,EAA2B,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAKrF,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,OAAO,EAA2B,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAK5E,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAIlD,OAAO,EAAwB,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAIxE,eAAO,MAAM,iBAAiB,gBAAgB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,sBAAsB,qBAAqB,CAAC;AACzD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,yBAAyB,uBAAuB,CAAC;AAC9D,eAAO,MAAM,cAAc,aAAa,CAAC;AACzC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,UAAU,SAAS,CAAC;AAEjC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;IACtB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,iBACb,MAAM,EAAE,cACV,OAAO,uBACE,WAAW,KAC/B,aAQF,CAAC;AAEF,eAAO,MAAM,iBAAiB,kBACb,MAAM,EAAE,cACX,OAAO,uBACE,WAAW,KAC/B,aAQF,CAAC;AAIF,eAAO,MAAM,gBAAgB,mDAqU3B,CAAC;AAEH,eAAe,gBAAgB,CAAC"}
|
|
@@ -23,6 +23,7 @@ import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
|
|
|
23
23
|
import { DockedGraphTooltip } from '../../GraphTooltipArrow/DockedGraphTooltip';
|
|
24
24
|
import { useProfileViewContext } from '../../ProfileView/context/ProfileViewContext';
|
|
25
25
|
import ContextMenu from './ContextMenu';
|
|
26
|
+
import { IcicleChartRootNode } from './IcicleChartRootNode';
|
|
26
27
|
import { IcicleNode, RowHeight } from './IcicleGraphNodes';
|
|
27
28
|
import { useFilenamesList } from './useMappingList';
|
|
28
29
|
import { arrowToString, extractFeature, extractFilenameFeature } from './utils';
|
|
@@ -33,6 +34,8 @@ export const FIELD_LOCATION_ADDRESS = 'location_address';
|
|
|
33
34
|
export const FIELD_LOCATION_LINE = 'location_line';
|
|
34
35
|
export const FIELD_INLINED = 'inlined';
|
|
35
36
|
export const FIELD_TIMESTAMP = 'timestamp';
|
|
37
|
+
export const FIELD_DURATION = 'duration';
|
|
38
|
+
export const FIELD_GROUPBY_METADATA = 'groupby_metadata';
|
|
36
39
|
export const FIELD_FUNCTION_NAME = 'function_name';
|
|
37
40
|
export const FIELD_FUNCTION_SYSTEM_NAME = 'function_system_name';
|
|
38
41
|
export const FIELD_FUNCTION_FILE_NAME = 'function_file_name';
|
|
@@ -59,7 +62,7 @@ export const getFilenameColors = (filenamesList, isDarkMode, currentColorProfile
|
|
|
59
62
|
return colors;
|
|
60
63
|
};
|
|
61
64
|
const noop = () => { };
|
|
62
|
-
export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, sortBy, flamegraphLoading, mappingsListFromMetadata, compareAbsolute, }) {
|
|
65
|
+
export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, profileSource, sortBy, flamegraphLoading, mappingsListFromMetadata, compareAbsolute, isIcicleChart = false, }) {
|
|
63
66
|
const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
|
|
64
67
|
const dispatch = useAppDispatch();
|
|
65
68
|
const [highlightSimilarStacksPreference] = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key);
|
|
@@ -168,6 +171,9 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
|
|
|
168
171
|
}, []);
|
|
169
172
|
// useMemo for the root graph as it otherwise renders the whole graph if the hoveringRow changes.
|
|
170
173
|
const root = useMemo(() => {
|
|
174
|
+
if (isIcicleChart) {
|
|
175
|
+
return (_jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, onContextMenu: displayMenu, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleChartRootNode, { table: table, row: 0, colors: colorByColors, colorBy: colorByValue, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: path, level: 0, isRoot: true, searchString: currentSearchString ?? '', setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: highlightSimilarStacksName, setHoveringName: highlightSimilarStacksSetName, hoveringRow: highlightSimilarStacksRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference, profileSource: profileSource }) }) }) }));
|
|
176
|
+
}
|
|
171
177
|
return (_jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, onContextMenu: displayMenu, children: _jsx("g", { ref: ref, children: _jsx("g", { transform: 'translate(0, 0)', children: _jsx(IcicleNode, { table: table, row: 0, colors: colorByColors, colorBy: colorByValue, x: 0, y: 0, totalWidth: width ?? 1, height: RowHeight, setCurPath: setCurPath, curPath: curPath, total: total, xScale: xScale, path: path, level: 0, isRoot: true, searchString: currentSearchString ?? '', setHoveringRow: setHoveringRow, setHoveringLevel: setHoveringLevel, sortBy: sortBy, darkMode: isDarkMode, compareMode: compareMode, profileType: profileType, isContextMenuOpen: isContextMenuOpen, hoveringName: highlightSimilarStacksName, setHoveringName: highlightSimilarStacksSetName, hoveringRow: highlightSimilarStacksRow, colorForSimilarNodes: colorForSimilarNodes, highlightSimilarStacksPreference: highlightSimilarStacksPreference }) }) }) }));
|
|
172
178
|
}, [
|
|
173
179
|
width,
|
|
@@ -192,6 +198,8 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
|
|
|
192
198
|
highlightSimilarStacksPreference,
|
|
193
199
|
path,
|
|
194
200
|
highlightSimilarStacksSetName,
|
|
201
|
+
isIcicleChart,
|
|
202
|
+
profileSource,
|
|
195
203
|
]);
|
|
196
204
|
return (_jsx(_Fragment, { children: _jsxs("div", { className: "relative z-[9]", onMouseLeave: () => dispatch(setHoveringNode(undefined)), children: [_jsx(ContextMenu, { menuId: MENU_ID, table: table, row: hoveringRow ?? 0, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType, compareAbsolute: compareAbsolute, trackVisibility: trackVisibility, curPath: curPath, setCurPath: setCurPath, hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit }), dockedMetainfo ? (_jsx(DockedGraphTooltip, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute })) : (!isContextMenuOpen && (_jsx(GraphTooltipArrow, { contextElement: svg.current, isContextMenuOpen: isContextMenuOpen, children: _jsx(GraphTooltipArrowContent, { table: table, row: hoveringRow, level: hoveringLevel ?? 0, isFixed: false, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute }) }))), root] }) }));
|
|
197
205
|
});
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { Table } from 'apache-arrow';
|
|
2
2
|
import { type BinaryFeature, type FilenameFeature } from '@parca/store';
|
|
3
|
+
import { ProfileSource } from '../../ProfileSource';
|
|
4
|
+
import { BigIntDuo } from '../../utils';
|
|
3
5
|
export declare function nodeLabel(table: Table<any>, row: number, level: number, showBinaryName: boolean): string;
|
|
4
6
|
export declare const extractFeature: (mapping: string) => BinaryFeature;
|
|
5
7
|
export declare const extractFilenameFeature: (filename: string) => FilenameFeature;
|
|
6
8
|
export declare const getTextForCumulative: (hoveringNodeCumulative: bigint, totalUnfiltered: bigint, total: bigint, unit: string) => string;
|
|
7
9
|
export declare const getTextForCumulativePerSecond: (hoveringNodeCumulative: number, unit: string) => string;
|
|
8
10
|
export declare const arrowToString: (buffer: any) => string | null;
|
|
11
|
+
export declare const boundsFromProfileSource: (profileSource?: ProfileSource) => BigIntDuo;
|
|
9
12
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAsB,aAAa,EAAC,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAC,SAAS,EAAgB,MAAM,aAAa,CAAC;AAQrD,wBAAgB,SAAS,CACvB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EACjB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,cAAc,EAAE,OAAO,GACtB,MAAM,CAkCR;AAED,eAAO,MAAM,cAAc,YAAa,MAAM,KAAG,aAMhD,CAAC;AAEF,eAAO,MAAM,sBAAsB,aAAc,MAAM,KAAG,eAMzD,CAAC;AAEF,eAAO,MAAM,oBAAoB,2BACP,MAAM,mBACb,MAAM,SAChB,MAAM,QACP,MAAM,KACX,MAOF,CAAC;AAEF,eAAO,MAAM,6BAA6B,2BAChB,MAAM,QACxB,MAAM,KACX,MAMF,CAAC;AAEF,eAAO,MAAM,aAAa,WAAY,GAAG,KAAG,MAAM,GAAG,IAQpD,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAAoB,aAAa,KAAG,SAyBvE,CAAC"}
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
import { BINARY_FEATURE_TYPES, EVERYTHING_ELSE, FILENAMES_FEATURE_TYPES, } from '@parca/store';
|
|
14
14
|
import { divide, getLastItem, valueFormatter } from '@parca/utilities';
|
|
15
|
+
import { MergedProfileSource } from '../../ProfileSource';
|
|
15
16
|
import { hexifyAddress } from '../../utils';
|
|
16
17
|
import { FIELD_FUNCTION_NAME, FIELD_LABELS_ONLY, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from './index';
|
|
17
18
|
export function nodeLabel(table, row, level, showBinaryName) {
|
|
@@ -75,3 +76,20 @@ export const arrowToString = (buffer) => {
|
|
|
75
76
|
}
|
|
76
77
|
return '';
|
|
77
78
|
};
|
|
79
|
+
export const boundsFromProfileSource = (profileSource) => {
|
|
80
|
+
if (profileSource === undefined) {
|
|
81
|
+
return [0n, 1n];
|
|
82
|
+
}
|
|
83
|
+
if (!(profileSource instanceof MergedProfileSource)) {
|
|
84
|
+
return [0n, 1n];
|
|
85
|
+
}
|
|
86
|
+
const request = profileSource.QueryRequest();
|
|
87
|
+
if (request.options.oneofKind !== 'merge' ||
|
|
88
|
+
request.options.merge.start === undefined ||
|
|
89
|
+
request.options.merge.end === undefined) {
|
|
90
|
+
return [0n, 1n];
|
|
91
|
+
}
|
|
92
|
+
const start = request.options.merge.start.seconds * 1000000000n + BigInt(request.options.merge.start.nanos);
|
|
93
|
+
const end = request.options.merge.end.seconds * 1000000000n + BigInt(request.options.merge.end.nanos);
|
|
94
|
+
return [start, end];
|
|
95
|
+
};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Flamegraph, FlamegraphArrow } from '@parca/client';
|
|
3
3
|
import { ProfileType } from '@parca/parser';
|
|
4
|
+
import { ProfileSource } from '../ProfileSource';
|
|
4
5
|
export type ResizeHandler = (width: number, height: number) => void;
|
|
5
6
|
interface ProfileIcicleGraphProps {
|
|
6
7
|
width: number;
|
|
@@ -9,6 +10,7 @@ interface ProfileIcicleGraphProps {
|
|
|
9
10
|
total: bigint;
|
|
10
11
|
filtered: bigint;
|
|
11
12
|
profileType?: ProfileType;
|
|
13
|
+
profileSource?: ProfileSource;
|
|
12
14
|
curPath: string[] | [];
|
|
13
15
|
setNewCurPath: (path: string[]) => void;
|
|
14
16
|
loading: boolean;
|
|
@@ -17,7 +19,8 @@ interface ProfileIcicleGraphProps {
|
|
|
17
19
|
isHalfScreen: boolean;
|
|
18
20
|
metadataMappingFiles?: string[];
|
|
19
21
|
metadataLoading?: boolean;
|
|
22
|
+
isIcicleChart?: boolean;
|
|
20
23
|
}
|
|
21
|
-
declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, }: ProfileIcicleGraphProps) => JSX.Element;
|
|
24
|
+
declare const ProfileIcicleGraph: ({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart, profileSource, }: ProfileIcicleGraphProps) => JSX.Element;
|
|
22
25
|
export default ProfileIcicleGraph;
|
|
23
26
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAW/C,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEpE,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;IACvB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAMD,QAAA,MAAM,kBAAkB,qKAerB,uBAAuB,KAAG,GAAG,CAAC,OA+LhC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -21,13 +21,14 @@ import { TimelineGuide } from '../TimelineGuide';
|
|
|
21
21
|
import { IcicleGraph } from './IcicleGraph';
|
|
22
22
|
import { FIELD_FUNCTION_NAME, IcicleGraphArrow } from './IcicleGraphArrow';
|
|
23
23
|
import useMappingList from './IcicleGraphArrow/useMappingList';
|
|
24
|
+
import { boundsFromProfileSource } from './IcicleGraphArrow/utils';
|
|
24
25
|
const numberFormatter = new Intl.NumberFormat('en-US');
|
|
25
26
|
const ErrorContent = ({ errorMessage }) => {
|
|
26
27
|
return _jsx("div", { className: "flex justify-center p-10", children: errorMessage });
|
|
27
28
|
};
|
|
28
|
-
const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, }) {
|
|
29
|
+
const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, total, filtered, curPath, setNewCurPath, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart = false, profileSource, }) {
|
|
29
30
|
const { onError, authenticationErrorMessage, isDarkMode } = useParcaContext();
|
|
30
|
-
const { compareMode
|
|
31
|
+
const { compareMode } = useProfileViewContext();
|
|
31
32
|
const [isLoading, setIsLoading] = useState(true);
|
|
32
33
|
const mappingsList = useMappingList(metadataMappingFiles);
|
|
33
34
|
const [storeSortBy = FIELD_FUNCTION_NAME] = useURLState('sort_by');
|
|
@@ -83,7 +84,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
|
|
|
83
84
|
if (graph !== undefined)
|
|
84
85
|
return (_jsx(IcicleGraph, { width: width, graph: graph, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType }));
|
|
85
86
|
if (arrow !== undefined)
|
|
86
|
-
return (_jsxs("div", { className: "relative", children: [
|
|
87
|
+
return (_jsxs("div", { className: "relative", children: [isIcicleChart ? (_jsx(TimelineGuide, { bounds: boundsFromProfileSource(profileSource), width: width, height: 1000, margin: 0, ticks: 12, timeUnit: "nanoseconds" })) : null, _jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: curPath, setCurPath: setNewCurPath, profileType: profileType, sortBy: storeSortBy, flamegraphLoading: isLoading, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList, compareAbsolute: isCompareAbsolute, isIcicleChart: isIcicleChart, profileSource: profileSource })] }));
|
|
87
88
|
}, [
|
|
88
89
|
isLoading,
|
|
89
90
|
graph,
|
|
@@ -100,7 +101,8 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ graph, arrow, to
|
|
|
100
101
|
isDarkMode,
|
|
101
102
|
mappingsList,
|
|
102
103
|
isCompareAbsolute,
|
|
103
|
-
|
|
104
|
+
isIcicleChart,
|
|
105
|
+
profileSource,
|
|
104
106
|
]);
|
|
105
107
|
if (error != null) {
|
|
106
108
|
onError?.(error);
|
|
@@ -6,6 +6,7 @@ interface GetDashboardItemProps {
|
|
|
6
6
|
isHalfScreen: boolean;
|
|
7
7
|
dimensions: DOMRect | undefined;
|
|
8
8
|
flamegraphData: FlamegraphData;
|
|
9
|
+
flamechartData: FlamegraphData;
|
|
9
10
|
topTableData?: TopTableData;
|
|
10
11
|
callgraphData?: CallgraphData;
|
|
11
12
|
sourceData?: SourceData;
|
|
@@ -21,6 +22,6 @@ interface GetDashboardItemProps {
|
|
|
21
22
|
onRender?: ProfilerOnRenderCallback;
|
|
22
23
|
};
|
|
23
24
|
}
|
|
24
|
-
export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, topTableData, callgraphData, sourceData, profileSource, total, filtered, curPath, setNewCurPath, currentSearchString, setSearchString, callgraphSVG, perf, }: GetDashboardItemProps) => JSX.Element;
|
|
25
|
+
export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, topTableData, callgraphData, sourceData, profileSource, total, filtered, curPath, setNewCurPath, currentSearchString, setSearchString, callgraphSVG, perf, }: GetDashboardItemProps) => JSX.Element;
|
|
25
26
|
export {};
|
|
26
27
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardItems/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAW,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAMzD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,UAAU,qBAAqB;IAC7B,IAAI,EAAE,iBAAiB,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,wBAAwB,CAAC;KACrC,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/DashboardItems/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAW,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAMzD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,UAAU,EACV,YAAY,EACZ,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,UAAU,qBAAqB;IAC7B,IAAI,EAAE,iBAAiB,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,wBAAwB,CAAC;KACrC,CAAC;CACH;AAED,eAAO,MAAM,gBAAgB,mOAkB1B,qBAAqB,KAAG,GAAG,CAAC,OAwG9B,CAAC"}
|
|
@@ -17,7 +17,7 @@ import Callgraph from '../../../Callgraph';
|
|
|
17
17
|
import ProfileIcicleGraph from '../../../ProfileIcicleGraph';
|
|
18
18
|
import { SourceView } from '../../../SourceView';
|
|
19
19
|
import { Table } from '../../../Table';
|
|
20
|
-
export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphData, topTableData, callgraphData, sourceData, profileSource, total, filtered, curPath, setNewCurPath, currentSearchString, setSearchString, callgraphSVG, perf, }) => {
|
|
20
|
+
export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, topTableData, callgraphData, sourceData, profileSource, total, filtered, curPath, setNewCurPath, currentSearchString, setSearchString, callgraphSVG, perf, }) => {
|
|
21
21
|
switch (type) {
|
|
22
22
|
case 'icicle':
|
|
23
23
|
return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
|
|
@@ -28,6 +28,12 @@ export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphDat
|
|
|
28
28
|
? (dimensions.width - 54) / 2
|
|
29
29
|
: dimensions.width - 16
|
|
30
30
|
: 0, metadataMappingFiles: flamegraphData.metadataMappingFiles, metadataLoading: flamegraphData.metadataLoading }) }));
|
|
31
|
+
case 'iciclechart':
|
|
32
|
+
return (_jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, arrow: flamechartData?.arrow, total: total, filtered: filtered, profileType: profileSource?.ProfileType(), loading: flamechartData.loading, error: flamechartData.error, isHalfScreen: isHalfScreen, width: dimensions?.width !== undefined
|
|
33
|
+
? isHalfScreen
|
|
34
|
+
? (dimensions.width - 54) / 2
|
|
35
|
+
: dimensions.width - 16
|
|
36
|
+
: 0, metadataMappingFiles: flamechartData.metadataMappingFiles, metadataLoading: flamechartData.metadataLoading, profileSource: profileSource, isIcicleChart: true }));
|
|
31
37
|
case 'callgraph':
|
|
32
38
|
return callgraphData?.data !== undefined &&
|
|
33
39
|
callgraphSVG !== undefined &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,YAAY,QAAO,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAiBA,QAAA,MAAM,YAAY,QAAO,GAAG,CAAC,OA4F5B,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -17,11 +17,14 @@ const ViewSelector = () => {
|
|
|
17
17
|
const [dashboardItems = ['icicle'], setDashboardItems] = useURLState('dashboard_items', {
|
|
18
18
|
alwaysReturnArray: true,
|
|
19
19
|
});
|
|
20
|
-
const { enableSourcesView } = useParcaContext();
|
|
20
|
+
const { enableSourcesView, enableIciclechartView } = useParcaContext();
|
|
21
21
|
const allItems = [
|
|
22
22
|
{ key: 'table', canBeSelected: !dashboardItems.includes('table') },
|
|
23
23
|
{ key: 'icicle', canBeSelected: !dashboardItems.includes('icicle') },
|
|
24
24
|
];
|
|
25
|
+
if (enableIciclechartView === true) {
|
|
26
|
+
allItems.push({ key: 'iciclechart', canBeSelected: !dashboardItems.includes('iciclechart') });
|
|
27
|
+
}
|
|
25
28
|
if (enableSourcesView === true) {
|
|
26
29
|
allItems.push({ key: 'source', canBeSelected: false });
|
|
27
30
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { ProfileViewProps } from './types/visualization';
|
|
2
|
-
export declare const ProfileView: ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector,
|
|
2
|
+
export declare const ProfileView: ({ total, filtered, flamegraphData, flamechartData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, }: ProfileViewProps) => JSX.Element;
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,gBAAgB,EAAoB,MAAM,uBAAuB,CAAC;AAG/E,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,gBAAgB,EAAoB,MAAM,uBAAuB,CAAC;AAG/E,eAAO,MAAM,WAAW,qMAcrB,gBAAgB,KAAG,GAAG,CAAC,OAwIzB,CAAC"}
|
|
@@ -26,7 +26,7 @@ import { useGraphviz } from './hooks/useGraphviz';
|
|
|
26
26
|
import { useProfileMetadata } from './hooks/useProfileMetadata';
|
|
27
27
|
import { useVisualizationState } from './hooks/useVisualizationState';
|
|
28
28
|
import { getColorRange } from './utils/colorUtils';
|
|
29
|
-
export const ProfileView = ({ total, filtered, flamegraphData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector,
|
|
29
|
+
export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, topTableData, callgraphData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, }) => {
|
|
30
30
|
const { timezone, perf, profileViewExternalMainActions, preferencesModal, profileViewExternalSubActions, } = useParcaContext();
|
|
31
31
|
const { ref, dimensions } = useContainerDimensions();
|
|
32
32
|
const isDarkMode = useAppSelector(selectDarkMode);
|
|
@@ -52,6 +52,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
|
|
|
52
52
|
isHalfScreen,
|
|
53
53
|
dimensions,
|
|
54
54
|
flamegraphData,
|
|
55
|
+
flamechartData,
|
|
55
56
|
topTableData,
|
|
56
57
|
callgraphData,
|
|
57
58
|
sourceData,
|
|
@@ -71,5 +72,5 @@ export const ProfileView = ({ total, filtered, flamegraphData, topTableData, cal
|
|
|
71
72
|
table: (_jsx(TableToolbar, { profileType: profileSource?.ProfileType(), total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })),
|
|
72
73
|
};
|
|
73
74
|
const hasProfileSource = profileSource !== undefined && profileSource.toString(timezone) !== '';
|
|
74
|
-
return (_jsx(KeyDownProvider, { children: _jsx(ProfileViewContextProvider, { value: { profileSource, compareMode
|
|
75
|
+
return (_jsx(KeyDownProvider, { children: _jsx(ProfileViewContextProvider, { value: { profileSource, compareMode }, children: _jsxs(DashboardProvider, { children: [_jsx(ProfileHeader, { profileSourceString: profileSource?.toString(timezone), hasProfileSource: hasProfileSource, externalMainActions: profileViewExternalMainActions }), _jsx(VisualisationToolbar, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, hasProfileSource: hasProfileSource, pprofdownloading: pprofDownloading, profileSource: profileSource, queryClient: queryClient, onDownloadPProf: onDownloadPProf, curPath: curPath, setNewCurPath: setCurPath, profileType: profileSource?.ProfileType(), total: total, filtered: filtered, currentSearchString: currentSearchString, setSearchString: setSearchString, groupByLabels: flamegraphData.metadataLabels ?? [], preferencesModal: preferencesModal, profileViewExternalSubActions: profileViewExternalSubActions, clearSelection: clearSelection, setGroupByLabels: setGroupByLabels, showVisualizationSelector: showVisualizationSelector }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { compareMode: compareMode, mappings: colorMappings, loading: flamegraphData.metadataLoading })), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DashboardLayout, { getDashboardItemByType: getDashboardItemByType, actionButtons: actionButtons }) })] }) }) }));
|
|
75
76
|
};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { Callgraph as CallgraphType, Flamegraph, FlamegraphArrow, QueryServiceClient, Source, TableArrow } from '@parca/client';
|
|
2
2
|
import { ProfileSource } from '../../ProfileSource';
|
|
3
|
-
import { TimelineGuideData } from '../context/ProfileViewContext';
|
|
4
3
|
export interface FlamegraphData {
|
|
5
4
|
loading: boolean;
|
|
6
5
|
data?: Flamegraph;
|
|
@@ -32,11 +31,12 @@ export interface SourceData {
|
|
|
32
31
|
data?: Source;
|
|
33
32
|
error?: any;
|
|
34
33
|
}
|
|
35
|
-
export type VisualizationType = 'icicle' | 'callgraph' | 'table' | 'source';
|
|
34
|
+
export type VisualizationType = 'icicle' | 'callgraph' | 'table' | 'source' | 'iciclechart';
|
|
36
35
|
export interface ProfileViewProps {
|
|
37
36
|
total: bigint;
|
|
38
37
|
filtered: bigint;
|
|
39
38
|
flamegraphData: FlamegraphData;
|
|
39
|
+
flamechartData: FlamegraphData;
|
|
40
40
|
topTableData?: TopTableData;
|
|
41
41
|
callgraphData?: CallgraphData;
|
|
42
42
|
sourceData?: SourceData;
|
|
@@ -46,7 +46,5 @@ export interface ProfileViewProps {
|
|
|
46
46
|
onDownloadPProf: () => void;
|
|
47
47
|
pprofDownloading?: boolean;
|
|
48
48
|
showVisualizationSelector?: boolean;
|
|
49
|
-
showTimelineGuide?: boolean;
|
|
50
|
-
timelineGuide?: TimelineGuideData;
|
|
51
49
|
}
|
|
52
50
|
//# sourceMappingURL=visualization.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"visualization.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/types/visualization.ts"],"names":[],"mappings":"AAaA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"visualization.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/types/visualization.ts"],"names":[],"mappings":"AAaA,OAAO,EACL,SAAS,IAAI,aAAa,EAC1B,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,UAAU,EACX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE5F,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,cAAc,CAAC;IAC/B,cAAc,EAAE,cAAc,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC"}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
import { QueryServiceClient } from '@parca/client';
|
|
2
2
|
import { ProfileSource } from './ProfileSource';
|
|
3
|
-
import { TimelineGuideData } from './ProfileView/context/ProfileViewContext';
|
|
4
3
|
interface ProfileViewWithDataProps {
|
|
5
4
|
queryClient: QueryServiceClient;
|
|
6
5
|
profileSource: ProfileSource;
|
|
7
6
|
compare?: boolean;
|
|
8
7
|
showVisualizationSelector?: boolean;
|
|
9
|
-
isGroupByTimestamp?: boolean;
|
|
10
|
-
timelineGuide?: TimelineGuideData;
|
|
11
8
|
}
|
|
12
|
-
export declare const ProfileViewWithData: ({ queryClient, profileSource, showVisualizationSelector,
|
|
9
|
+
export declare const ProfileViewWithData: ({ queryClient, profileSource, showVisualizationSelector, }: ProfileViewWithDataProps) => JSX.Element;
|
|
13
10
|
export default ProfileViewWithData;
|
|
14
11
|
//# sourceMappingURL=ProfileViewWithData.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAK1E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"ProfileViewWithData.d.ts","sourceRoot":"","sources":["../src/ProfileViewWithData.tsx"],"names":[],"mappings":"AAeA,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAK1E,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAK9C,UAAU,wBAAwB;IAChC,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,mBAAmB,+DAI7B,wBAAwB,KAAG,GAAG,CAAC,OAoPjC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|