@parca/profile 0.18.4 → 0.19.0
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 +6 -0
- package/dist/GraphTooltipArrow/useGraphTooltip/index.d.ts.map +1 -1
- package/dist/GraphTooltipArrow/useGraphTooltip/index.js +6 -3
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.d.ts +2 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.d.ts.map +1 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.js +13 -3
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.d.ts +1 -0
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.d.ts.map +1 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.d.ts +4 -0
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.d.ts.map +1 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js +15 -6
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.d.ts.map +1 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.js +5 -4
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.d.ts +2 -0
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.d.ts.map +1 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.js +3 -2
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.d.ts +3 -0
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.d.ts.map +1 -1
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js +4 -4
- package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.js +1 -1
- package/dist/ProfileIcicleGraph/index.d.ts +4 -1
- package/dist/ProfileIcicleGraph/index.d.ts.map +1 -1
- package/dist/ProfileIcicleGraph/index.js +22 -6
- package/dist/ProfileView/components/DashboardItems/index.d.ts +3 -1
- package/dist/ProfileView/components/DashboardItems/index.d.ts.map +1 -1
- package/dist/ProfileView/components/DashboardItems/index.js +4 -1
- package/dist/ProfileView/components/Toolbars/TableColumnsDropdown.d.ts.map +1 -1
- package/dist/ProfileView/components/Toolbars/TableColumnsDropdown.js +0 -13
- package/dist/ProfileView/components/Toolbars/index.d.ts +8 -0
- package/dist/ProfileView/components/Toolbars/index.d.ts.map +1 -1
- package/dist/ProfileView/components/Toolbars/index.js +6 -2
- package/dist/ProfileView/components/ViewSelector/Dropdown.d.ts +1 -0
- package/dist/ProfileView/components/ViewSelector/Dropdown.d.ts.map +1 -1
- package/dist/ProfileView/components/ViewSelector/Dropdown.js +1 -1
- package/dist/ProfileView/components/ViewSelector/index.d.ts.map +1 -1
- package/dist/ProfileView/components/ViewSelector/index.js +9 -0
- package/dist/ProfileView/hooks/useVisualizationState.d.ts +4 -0
- package/dist/ProfileView/hooks/useVisualizationState.d.ts.map +1 -1
- package/dist/ProfileView/hooks/useVisualizationState.js +9 -1
- package/dist/ProfileView/index.d.ts.map +1 -1
- package/dist/ProfileView/index.js +3 -2
- package/dist/ProfileView/types/visualization.d.ts +1 -1
- package/dist/ProfileView/types/visualization.d.ts.map +1 -1
- package/dist/ProfileViewWithData.js +1 -1
- package/dist/Sandwich/components/CalleesSection.d.ts +25 -0
- package/dist/Sandwich/components/CalleesSection.d.ts.map +1 -0
- package/dist/Sandwich/components/CalleesSection.js +11 -0
- package/dist/Sandwich/components/CallersSection.d.ts +25 -0
- package/dist/Sandwich/components/CallersSection.d.ts.map +1 -0
- package/dist/Sandwich/components/CallersSection.js +11 -0
- package/dist/Sandwich/components/TableSection.d.ts +21 -0
- package/dist/Sandwich/components/TableSection.d.ts.map +1 -0
- package/dist/Sandwich/components/TableSection.js +7 -0
- package/dist/Sandwich/index.d.ts +19 -0
- package/dist/Sandwich/index.d.ts.map +1 -0
- package/dist/Sandwich/index.js +182 -0
- package/dist/Sandwich/utils/processRowData.d.ts +11 -0
- package/dist/Sandwich/utils/processRowData.d.ts.map +1 -0
- package/dist/Sandwich/utils/processRowData.js +53 -0
- package/dist/Table/ColorCell.d.ts +7 -0
- package/dist/Table/ColorCell.d.ts.map +1 -0
- package/dist/Table/ColorCell.js +2 -0
- package/dist/Table/MoreDropdown.d.ts +5 -0
- package/dist/Table/MoreDropdown.d.ts.map +1 -0
- package/dist/Table/MoreDropdown.js +39 -0
- package/dist/Table/hooks/useColorManagement.d.ts +14 -0
- package/dist/Table/hooks/useColorManagement.d.ts.map +1 -0
- package/dist/Table/hooks/useColorManagement.js +32 -0
- package/dist/Table/hooks/useTableConfiguration.d.ts +21 -0
- package/dist/Table/hooks/useTableConfiguration.d.ts.map +1 -0
- package/dist/Table/hooks/useTableConfiguration.js +204 -0
- package/dist/Table/index.d.ts +14 -4
- package/dist/Table/index.d.ts.map +1 -1
- package/dist/Table/index.js +34 -332
- package/dist/Table/utils/functions.d.ts +1 -0
- package/dist/Table/utils/functions.d.ts.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/useQuery.d.ts +1 -0
- package/dist/useQuery.d.ts.map +1 -1
- package/dist/useQuery.js +7 -1
- package/package.json +7 -7
- package/src/GraphTooltipArrow/useGraphTooltip/index.ts +6 -3
- package/src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.tsx +23 -1
- package/src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.tsx +1 -0
- package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx +34 -5
- package/src/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.tsx +6 -4
- package/src/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.tsx +5 -1
- package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx +13 -1
- package/src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts +1 -1
- package/src/ProfileIcicleGraph/index.tsx +50 -18
- package/src/ProfileView/components/DashboardItems/index.tsx +21 -0
- package/src/ProfileView/components/Toolbars/TableColumnsDropdown.tsx +11 -25
- package/src/ProfileView/components/Toolbars/index.tsx +42 -1
- package/src/ProfileView/components/ViewSelector/Dropdown.tsx +2 -1
- package/src/ProfileView/components/ViewSelector/index.tsx +11 -0
- package/src/ProfileView/hooks/useVisualizationState.ts +16 -1
- package/src/ProfileView/index.tsx +7 -0
- package/src/ProfileView/types/visualization.ts +7 -1
- package/src/ProfileViewWithData.tsx +1 -1
- package/src/Sandwich/components/CalleesSection.tsx +87 -0
- package/src/Sandwich/components/CallersSection.tsx +88 -0
- package/src/Sandwich/components/TableSection.tsx +67 -0
- package/src/Sandwich/index.tsx +342 -0
- package/src/Sandwich/utils/processRowData.ts +78 -0
- package/src/Table/ColorCell.tsx +26 -0
- package/src/Table/MoreDropdown.tsx +75 -0
- package/src/Table/hooks/useColorManagement.ts +58 -0
- package/src/Table/hooks/useTableConfiguration.tsx +237 -0
- package/src/Table/index.tsx +37 -470
- package/src/Table/utils/functions.ts +1 -0
- package/src/useQuery.tsx +10 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
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.19.0](https://github.com/parca-dev/parca/compare/@parca/profile@0.18.4...@parca/profile@0.19.0) (2025-06-18)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- implement sandwich view ([#5683](https://github.com/parca-dev/parca/issues/5683)) ([83b54de](https://github.com/parca-dev/parca/commit/83b54ded3dc6626889421689d0293bda6d199fbd))
|
|
11
|
+
|
|
6
12
|
## [0.18.4](https://github.com/parca-dev/parca/compare/@parca/profile@0.18.3...@parca/profile@0.18.4) (2025-06-18)
|
|
7
13
|
|
|
8
14
|
**Note:** Version bump only for package @parca/profile
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltip/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAW1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,eAAe,gFAQzB,KAAK,KAAG,gBAAgB,GAAG,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GraphTooltipArrow/useGraphTooltip/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAW1C,UAAU,KAAK;IACb,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,eAAe,gFAQzB,KAAK,KAAG,gBAAgB,GAAG,IA4C7B,CAAC"}
|
|
@@ -19,13 +19,16 @@ export const useGraphTooltip = ({ table, profileType, unit, compareAbsolute, tot
|
|
|
19
19
|
}
|
|
20
20
|
const locationAddress = table.getChild(FIELD_LOCATION_ADDRESS)?.get(row) ?? 0n;
|
|
21
21
|
unit = unit ?? profileType.sampleUnit;
|
|
22
|
-
const cumulative = table.getChild(FIELD_CUMULATIVE)?.get(row) !== null
|
|
22
|
+
const cumulative = table.getChild(FIELD_CUMULATIVE)?.get(row) !== null &&
|
|
23
|
+
table.getChild(FIELD_CUMULATIVE)?.get(row) !== undefined
|
|
23
24
|
? BigInt(table.getChild(FIELD_CUMULATIVE)?.get(row))
|
|
24
25
|
: 0n;
|
|
25
|
-
const flat = table.getChild(FIELD_FLAT)?.get(row) !== null
|
|
26
|
+
const flat = table.getChild(FIELD_FLAT)?.get(row) !== null &&
|
|
27
|
+
table.getChild(FIELD_FLAT)?.get(row) !== undefined
|
|
26
28
|
? BigInt(table.getChild(FIELD_FLAT)?.get(row))
|
|
27
29
|
: 0n;
|
|
28
|
-
const diff = table.getChild(FIELD_DIFF)?.get(row) !== null
|
|
30
|
+
const diff = table.getChild(FIELD_DIFF)?.get(row) !== null &&
|
|
31
|
+
table.getChild(FIELD_DIFF)?.get(row) !== undefined
|
|
29
32
|
? BigInt(table.getChild(FIELD_DIFF)?.get(row))
|
|
30
33
|
: 0n;
|
|
31
34
|
let diffText = '';
|
|
@@ -12,7 +12,8 @@ interface ContextMenuProps {
|
|
|
12
12
|
resetPath: () => void;
|
|
13
13
|
hideMenu: () => void;
|
|
14
14
|
hideBinary: (binaryToRemove: string) => void;
|
|
15
|
+
isSandwich?: boolean;
|
|
15
16
|
}
|
|
16
|
-
declare const ContextMenu: ({ menuId, table, total, totalUnfiltered, row, compareAbsolute, hideMenu, profileType, unit, hideBinary, resetPath, }: ContextMenuProps) => JSX.Element;
|
|
17
|
+
declare const ContextMenu: ({ menuId, table, total, totalUnfiltered, row, compareAbsolute, hideMenu, profileType, unit, hideBinary, resetPath, isSandwich, }: ContextMenuProps) => JSX.Element;
|
|
17
18
|
export default ContextMenu;
|
|
18
19
|
//# sourceMappingURL=ContextMenu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAMnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAO1C,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAMnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAO1C,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,qIAad,gBAAgB,KAAG,GAAG,CAAC,OA6MzB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -20,7 +20,7 @@ import { getLastItem } from '@parca/utilities';
|
|
|
20
20
|
import { useGraphTooltip } from '../../GraphTooltipArrow/useGraphTooltip';
|
|
21
21
|
import { useGraphTooltipMetaInfo } from '../../GraphTooltipArrow/useGraphTooltipMetaInfo';
|
|
22
22
|
import { hexifyAddress, truncateString } from '../../utils';
|
|
23
|
-
const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, compareAbsolute, hideMenu, profileType, unit, hideBinary, resetPath, }) => {
|
|
23
|
+
const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, compareAbsolute, hideMenu, profileType, unit, hideBinary, resetPath, isSandwich = false, }) => {
|
|
24
24
|
const { isDarkMode } = useParcaContext();
|
|
25
25
|
const { enableSourcesView, checkDebuginfoStatusHandler } = useParcaContext();
|
|
26
26
|
const [isGraphTooltipDocked, setIsDocked] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
|
|
@@ -38,6 +38,8 @@ const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, compareAbsolu
|
|
|
38
38
|
const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
|
|
39
39
|
alwaysReturnArray: true,
|
|
40
40
|
});
|
|
41
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
42
|
+
const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
|
|
41
43
|
if (contextMenuData === null) {
|
|
42
44
|
return _jsx(_Fragment, {});
|
|
43
45
|
}
|
|
@@ -83,7 +85,15 @@ const ContextMenu = ({ menuId, table, total, totalUnfiltered, row, compareAbsolu
|
|
|
83
85
|
const nonEmptyValuesToCopy = valuesToCopy.filter(({ value }) => value !== '');
|
|
84
86
|
return (_jsxs(Menu, { id: menuId, theme: isDarkMode ? 'dark' : '', children: [_jsxs(Item, { id: "view-source-file", onClick: handleViewSourceFile, disabled: enableSourcesView === false || !isSourceAvailable, children: [_jsx("div", { "data-tooltip-id": "view-source-file-help", "data-tooltip-content": "There is no source code uploaded for this build", children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "wpf:view-file" }), _jsx("div", { children: "View source file" })] }) }), !isSourceAvailable ? _jsx(Tooltip, { id: "view-source-file-help" }) : null] }), _jsx(Item, { id: "show-in-table", onClick: () => {
|
|
85
87
|
setSearchString(functionName);
|
|
86
|
-
|
|
87
|
-
|
|
88
|
+
if (isSandwich) {
|
|
89
|
+
setDashboardItems(['table']);
|
|
90
|
+
}
|
|
91
|
+
else {
|
|
92
|
+
setDashboardItems([...dashboardItems, 'table']);
|
|
93
|
+
}
|
|
94
|
+
}, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:table" }), _jsx("div", { children: "Show in table" })] }) }), _jsx(Item, { id: "show-in-sandwich", onClick: () => {
|
|
95
|
+
setSandwichFunctionName(functionName);
|
|
96
|
+
setDashboardItems(['sandwich']);
|
|
97
|
+
}, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "tdesign:sandwich-filled" }), _jsx("div", { children: "Show in sandwich" })] }) }), _jsx(Item, { id: "reset-view", onClick: handleResetView, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "system-uicons:reset" }), _jsx("div", { children: "Reset graph" })] }) }), _jsxs(Item, { id: "hide-binary", onClick: () => hideBinary(getLastItem(mappingFile)), disabled: mappingFile === null || mappingFile === '', children: [_jsx("div", { "data-tooltip-id": "hide-binary-help", "data-tooltip-content": "Hide all frames for this binary", children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "bx:bxs-hide" }), _jsxs("div", { children: ["Hide binary ", mappingFile !== null && `(${getLastItem(mappingFile)})`] })] }) }), _jsx(Tooltip, { place: "left", id: "hide-binary-help" })] }), _jsx(Submenu, { label: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "ph:copy" }), _jsx("div", { children: "Copy" })] }), children: _jsx("div", { className: "max-h-[300px] overflow-scroll", children: nonEmptyValuesToCopy.map(({ id, value }) => (_jsx(Item, { id: id, onClick: () => handleCopyItem(value), className: "dark:bg-gray-800", children: _jsxs("div", { className: "flex flex-col dark:text-gray-300 hover:dark:text-gray-100", children: [_jsx("div", { className: "text-sm", children: id }), _jsx("div", { className: "text-xs", children: truncateString(value, 30) })] }) }, id))) }) }), checkDebuginfoStatusHandler !== undefined ? (_jsx(Item, { id: "check-debuginfo-status", onClick: () => checkDebuginfoStatusHandler(mappingBuildID), disabled: !isMappingBuildIDAvailable, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "bx:bx-info-circle" }), _jsx("div", { className: "relative pr-4", children: "Check debuginfo status" })] }) })) : null, _jsx(Separator, {}), _jsx(Item, { id: "dock-tooltip", onClick: handleDockTooltip, children: _jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx(Icon, { icon: "bx:dock-bottom" }), isGraphTooltipDocked ? 'Undock tooltip' : 'Dock tooltip'] }) })] }));
|
|
88
98
|
};
|
|
89
99
|
export default ContextMenu;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuWrapper.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"ContextMenuWrapper.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAI1C,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,QAAA,MAAM,kBAAkB,2HAUvB,CAAC;AAIF,eAAe,kBAAkB,CAAC"}
|
|
@@ -22,6 +22,10 @@ export interface IcicleNodeProps {
|
|
|
22
22
|
onClick: () => void;
|
|
23
23
|
isIcicleChart: boolean;
|
|
24
24
|
profileSource: ProfileSource;
|
|
25
|
+
isFlamegraph?: boolean;
|
|
26
|
+
isSandwich?: boolean;
|
|
27
|
+
maxDepth?: number;
|
|
28
|
+
tooltipId?: string;
|
|
25
29
|
hoveringRow?: number;
|
|
26
30
|
setHoveringRow: (row: number | undefined) => void;
|
|
27
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IcicleGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAMnC,OAAO,yCAAyC,CAAC;AAIjD,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAgBlD,eAAO,MAAM,SAAS,KAAK,CAAC;AAE5B,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,oBAAoB,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"IcicleGraphNodes.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAMnC,OAAO,yCAAyC,CAAC;AAIjD,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAgBlD,eAAO,MAAM,SAAS,KAAK,CAAC;AAE5B,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,oBAAoB,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,gBAAgB;;;CAG5B,CAAC;AACF,eAAO,MAAM,qBAAqB;;;;CAIjC,CAAC;AAEF,eAAO,MAAM,UAAU,6CA0MrB,CAAC"}
|
|
@@ -30,7 +30,7 @@ export const fadedIcicleRectStyles = {
|
|
|
30
30
|
transition: 'opacity .15s linear',
|
|
31
31
|
opacity: '0.5',
|
|
32
32
|
};
|
|
33
|
-
export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, colors, colorBy, height, totalWidth, searchString, darkMode, compareMode, colorForSimilarNodes, selectedRow, onClick, onContextMenu, hoveringRow, setHoveringRow, isIcicleChart, profileSource, }) {
|
|
33
|
+
export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, colors, colorBy, height, totalWidth, searchString, darkMode, compareMode, colorForSimilarNodes, selectedRow, onClick, onContextMenu, hoveringRow, setHoveringRow, isIcicleChart, profileSource, isFlamegraph = false, isSandwich = false, maxDepth = 0, tooltipId = 'default', }) {
|
|
34
34
|
// get the columns to read from
|
|
35
35
|
const mappingColumn = table.getChild(FIELD_MAPPING_FILE);
|
|
36
36
|
const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
|
|
@@ -82,8 +82,8 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, col
|
|
|
82
82
|
// If the end of the node is before the selection offset or the start of the node is after the selection offset + totalWidth, we don't render it.
|
|
83
83
|
return _jsx(_Fragment, {});
|
|
84
84
|
}
|
|
85
|
-
if (row === 0 && isIcicleChart) {
|
|
86
|
-
// The root node is not rendered in the icicle chart, so we return null.
|
|
85
|
+
if (row === 0 && (isIcicleChart || isSandwich)) {
|
|
86
|
+
// The root node is not rendered in the icicle chart or sandwich view, so we return null.
|
|
87
87
|
return _jsx(_Fragment, {});
|
|
88
88
|
}
|
|
89
89
|
// Cumulative can be larger than total when a selection is made. All parents of the selection are likely larger, but we want to only show them as 100% in the graph.
|
|
@@ -100,13 +100,13 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, col
|
|
|
100
100
|
const styles = selectedDepth !== undefined && selectedDepth > depth ? fadedIcicleRectStyles : icicleRectStyles;
|
|
101
101
|
const onMouseEnter = () => {
|
|
102
102
|
setHoveringRow(row);
|
|
103
|
-
window.dispatchEvent(new CustomEvent(
|
|
103
|
+
window.dispatchEvent(new CustomEvent(`icicle-tooltip-update-${tooltipId}`, {
|
|
104
104
|
detail: { row },
|
|
105
105
|
}));
|
|
106
106
|
};
|
|
107
107
|
const onMouseLeave = () => {
|
|
108
108
|
setHoveringRow(undefined);
|
|
109
|
-
window.dispatchEvent(new CustomEvent(
|
|
109
|
+
window.dispatchEvent(new CustomEvent(`icicle-tooltip-update-${tooltipId}`, {
|
|
110
110
|
detail: { row: null },
|
|
111
111
|
}));
|
|
112
112
|
};
|
|
@@ -119,7 +119,16 @@ export const IcicleNode = React.memo(function IcicleNodeNoMemo({ table, row, col
|
|
|
119
119
|
: selectedDepth > depth
|
|
120
120
|
? 0
|
|
121
121
|
: ((Number(valueOffset) - Number(selectionOffset)) / Number(total)) * totalWidth;
|
|
122
|
-
const
|
|
122
|
+
const calculateY = (isFlamegraph, isSandwich, isIcicleChart, maxDepth, depth, height) => {
|
|
123
|
+
if (isFlamegraph) {
|
|
124
|
+
return (maxDepth - depth) * height; // Flamegraph is inverted
|
|
125
|
+
}
|
|
126
|
+
if (isIcicleChart || isSandwich) {
|
|
127
|
+
return (depth - 1) * height;
|
|
128
|
+
}
|
|
129
|
+
return depth * height;
|
|
130
|
+
};
|
|
131
|
+
const y = calculateY(isFlamegraph, isSandwich, isIcicleChart, maxDepth, depth, height);
|
|
123
132
|
return (_jsx(_Fragment, { children: _jsxs("g", { transform: `translate(${x + 1}, ${y + 1})`, style: styles, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick, onContextMenu: handleContextMenu, children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, style: {
|
|
124
133
|
fill: colorResult,
|
|
125
134
|
}, className: cx(shouldBeHighlighted
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MemoizedTooltip.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"MemoizedTooltip.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,UAAU,oBAAoB;IAC5B,cAAc,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,kDAsD1B,CAAC"}
|
|
@@ -18,18 +18,19 @@ import { DockedGraphTooltip } from '../../GraphTooltipArrow/DockedGraphTooltip';
|
|
|
18
18
|
import { useTooltipContext } from './TooltipContext';
|
|
19
19
|
export const MemoizedTooltip = memo(function MemoizedTooltip({ contextElement, dockedMetainfo, }) {
|
|
20
20
|
const [tooltipRow, setTooltipRow] = useState(null);
|
|
21
|
-
const { table, total, totalUnfiltered, profileType, unit, compareAbsolute } = useTooltipContext();
|
|
21
|
+
const { table, total, totalUnfiltered, profileType, unit, compareAbsolute, tooltipId } = useTooltipContext();
|
|
22
22
|
// This component subscribes to tooltip updates through a callback
|
|
23
23
|
// passed to the TooltipProvider, avoiding the need to lift state
|
|
24
24
|
useEffect(() => {
|
|
25
25
|
const handleTooltipUpdate = (event) => {
|
|
26
26
|
setTooltipRow(event.detail.row);
|
|
27
27
|
};
|
|
28
|
-
|
|
28
|
+
const eventName = `icicle-tooltip-update-${tooltipId}`;
|
|
29
|
+
window.addEventListener(eventName, handleTooltipUpdate);
|
|
29
30
|
return () => {
|
|
30
|
-
window.removeEventListener(
|
|
31
|
+
window.removeEventListener(eventName, handleTooltipUpdate);
|
|
31
32
|
};
|
|
32
|
-
}, []);
|
|
33
|
+
}, [tooltipId]);
|
|
33
34
|
if (dockedMetainfo) {
|
|
34
35
|
return (_jsx(DockedGraphTooltip, { table: table, row: tooltipRow, total: total, totalUnfiltered: totalUnfiltered, profileType: profileType, unit: unit, compareAbsolute: compareAbsolute }));
|
|
35
36
|
}
|
|
@@ -15,6 +15,7 @@ interface TooltipContextValue {
|
|
|
15
15
|
compareAbsolute: boolean;
|
|
16
16
|
updateTooltip: (row: number | null, x?: number, y?: number) => void;
|
|
17
17
|
tooltipState: TooltipState;
|
|
18
|
+
tooltipId: string;
|
|
18
19
|
}
|
|
19
20
|
export declare const useTooltipContext: () => TooltipContextValue;
|
|
20
21
|
interface TooltipProviderProps {
|
|
@@ -26,6 +27,7 @@ interface TooltipProviderProps {
|
|
|
26
27
|
unit?: string;
|
|
27
28
|
compareAbsolute: boolean;
|
|
28
29
|
onTooltipUpdate?: (state: TooltipState) => void;
|
|
30
|
+
tooltipId?: string;
|
|
29
31
|
}
|
|
30
32
|
export declare const TooltipProvider: React.FC<TooltipProviderProps>;
|
|
31
33
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipContext.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAErF,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,UAAU,YAAY;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,YAAY,EAAE,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"TooltipContext.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgE,MAAM,OAAO,CAAC;AAErF,OAAO,EAAC,KAAK,EAAC,MAAM,cAAc,CAAC;AAEnC,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,UAAU,YAAY;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,YAAY,EAAE,YAAY,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,iBAAiB,QAAO,mBAMpC,CAAC;AAEF,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqC1D,CAAC"}
|
|
@@ -20,7 +20,7 @@ export const useTooltipContext = () => {
|
|
|
20
20
|
}
|
|
21
21
|
return context;
|
|
22
22
|
};
|
|
23
|
-
export const TooltipProvider = ({ children, table, total, totalUnfiltered, profileType, unit, compareAbsolute, onTooltipUpdate, }) => {
|
|
23
|
+
export const TooltipProvider = ({ children, table, total, totalUnfiltered, profileType, unit, compareAbsolute, onTooltipUpdate, tooltipId = 'default', }) => {
|
|
24
24
|
const tooltipStateRef = useRef({ row: null, x: 0, y: 0 });
|
|
25
25
|
const updateTooltip = useCallback((row, x = 0, y = 0) => {
|
|
26
26
|
tooltipStateRef.current = { row, x, y };
|
|
@@ -35,6 +35,7 @@ export const TooltipProvider = ({ children, table, total, totalUnfiltered, profi
|
|
|
35
35
|
compareAbsolute,
|
|
36
36
|
updateTooltip,
|
|
37
37
|
tooltipState: tooltipStateRef.current,
|
|
38
|
-
|
|
38
|
+
tooltipId,
|
|
39
|
+
}), [table, total, totalUnfiltered, profileType, unit, compareAbsolute, updateTooltip, tooltipId]);
|
|
39
40
|
return _jsx(TooltipContext.Provider, { value: value, children: children });
|
|
40
41
|
};
|
|
@@ -39,6 +39,9 @@ interface IcicleGraphArrowProps {
|
|
|
39
39
|
mappingsListFromMetadata: string[];
|
|
40
40
|
compareAbsolute: boolean;
|
|
41
41
|
isIcicleChart?: boolean;
|
|
42
|
+
isFlamegraph?: boolean;
|
|
43
|
+
isSandwich?: boolean;
|
|
44
|
+
tooltipId?: string;
|
|
42
45
|
}
|
|
43
46
|
export declare const getMappingColors: (mappingsList: string[], isDarkMode: boolean, currentColorProfile: ColorConfig) => colorByColors;
|
|
44
47
|
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,KAAqD,MAAM,OAAO,CAAC;AAK1E,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAwB,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAIxE,OAAO,EACL,gBAAgB,EAMjB,MAAM,SAAS,CAAC;AAEjB,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;AACjC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAEjD,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,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;IACtB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAK1E,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAc,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAwB,aAAa,EAAC,MAAM,oBAAoB,CAAC;AAIxE,OAAO,EACL,gBAAgB,EAMjB,MAAM,SAAS,CAAC;AAEjB,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;AACjC,eAAO,MAAM,YAAY,WAAW,CAAC;AACrC,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAEjD,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,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC;IACtB,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;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;AAeF,eAAO,MAAM,gBAAgB,mDAuO3B,CAAC;AAEH,eAAe,gBAAgB,CAAC"}
|
|
@@ -74,7 +74,7 @@ function getMaxDepth(depthColumn) {
|
|
|
74
74
|
}
|
|
75
75
|
return max;
|
|
76
76
|
}
|
|
77
|
-
export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, profileSource, mappingsListFromMetadata, compareAbsolute, isIcicleChart = false, }) {
|
|
77
|
+
export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, filtered, width, setCurPath, curPath, profileType, profileSource, mappingsListFromMetadata, compareAbsolute, isIcicleChart = false, isFlamegraph = false, isSandwich = false, tooltipId = 'default', }) {
|
|
78
78
|
const [highlightSimilarStacksPreference] = useUserPreference(USER_PREFERENCES.HIGHLIGHT_SIMILAR_STACKS.key);
|
|
79
79
|
const [hoveringRow, setHoveringRow] = useState(undefined);
|
|
80
80
|
const [dockedMetainfo] = useUserPreference(USER_PREFERENCES.GRAPH_METAINFO_DOCKED.key);
|
|
@@ -167,7 +167,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
|
|
|
167
167
|
};
|
|
168
168
|
const depthColumn = table.getChild(FIELD_DEPTH);
|
|
169
169
|
const maxDepth = getMaxDepth(depthColumn);
|
|
170
|
-
const height = (maxDepth + 1) * RowHeight;
|
|
170
|
+
const height = isSandwich ? maxDepth * RowHeight : (maxDepth + 1) * RowHeight;
|
|
171
171
|
// To find the selected row, we must walk the current path and look at which
|
|
172
172
|
// children of the current frame matches the path element exactly. Until the
|
|
173
173
|
// end, the row we find at the end is our selected row.
|
|
@@ -192,12 +192,12 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({ arrow, total, f
|
|
|
192
192
|
currentRow = childRows[0];
|
|
193
193
|
}
|
|
194
194
|
const selectedRow = currentRow;
|
|
195
|
-
return (_jsx(TooltipProvider, { table: table, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute, children: _jsxs("div", { className: "relative", children: [_jsx(ContextMenuWrapper, { ref: contextMenuRef, menuId: MENU_ID, table: table, total: total, totalUnfiltered: total + filtered, compareAbsolute: compareAbsolute, resetPath: () => setCurPath([]), hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit, profileType: profileType }), _jsx(MemoizedTooltip, { contextElement: svg.current, dockedMetainfo: dockedMetainfo }), _jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, children: Array.from({ length: table.numRows }, (_, row) => (_jsx(IcicleNode, { table: table, row: row, colors: colorByColors, colorBy: colorByValue, totalWidth: width ?? 1, height: RowHeight, searchString: currentSearchString ?? '', darkMode: isDarkMode, compareMode: compareMode, colorForSimilarNodes: colorForSimilarNodes, selectedRow: selectedRow, onClick: () => {
|
|
195
|
+
return (_jsx(TooltipProvider, { table: table, total: total, totalUnfiltered: total + filtered, profileType: profileType, unit: arrow.unit, compareAbsolute: compareAbsolute, tooltipId: tooltipId, children: _jsxs("div", { className: "relative", children: [_jsx(ContextMenuWrapper, { ref: contextMenuRef, menuId: MENU_ID, table: table, total: total, totalUnfiltered: total + filtered, compareAbsolute: compareAbsolute, resetPath: () => setCurPath([]), hideMenu: hideAll, hideBinary: hideBinary, unit: arrow.unit, profileType: profileType, isSandwich: isSandwich }), _jsx(MemoizedTooltip, { contextElement: svg.current, dockedMetainfo: dockedMetainfo }), _jsx("svg", { className: "font-robotoMono", width: width, height: height, preserveAspectRatio: "xMinYMid", ref: svg, children: Array.from({ length: table.numRows }, (_, row) => (_jsx(IcicleNode, { table: table, row: row, colors: colorByColors, colorBy: colorByValue, totalWidth: width ?? 1, height: RowHeight, searchString: currentSearchString ?? '', darkMode: isDarkMode, compareMode: compareMode, colorForSimilarNodes: colorForSimilarNodes, selectedRow: selectedRow, onClick: () => {
|
|
196
196
|
if (isIcicleChart) {
|
|
197
197
|
// We don't want to expand in icicle charts.
|
|
198
198
|
return;
|
|
199
199
|
}
|
|
200
200
|
handleRowClick(row);
|
|
201
|
-
}, onContextMenu: displayMenu, hoveringRow: highlightSimilarStacksPreference ? hoveringRow : undefined, setHoveringRow: highlightSimilarStacksPreference ? setHoveringRow : noop, isIcicleChart: isIcicleChart, profileSource: profileSource }, row))) })] }) }));
|
|
201
|
+
}, onContextMenu: displayMenu, hoveringRow: highlightSimilarStacksPreference ? hoveringRow : undefined, setHoveringRow: highlightSimilarStacksPreference ? setHoveringRow : noop, isIcicleChart: isIcicleChart, profileSource: profileSource, isFlamegraph: isFlamegraph, isSandwich: isSandwich, maxDepth: maxDepth, tooltipId: tooltipId }, row))) })] }) }));
|
|
202
202
|
});
|
|
203
203
|
export default IcicleGraphArrow;
|
|
@@ -104,7 +104,7 @@ export const getCurrentPathFrameData = (table, row) => {
|
|
|
104
104
|
systemName: systemName ?? '',
|
|
105
105
|
fileName: fileName ?? '',
|
|
106
106
|
lineNumber: Number(lineNumber),
|
|
107
|
-
address
|
|
107
|
+
address,
|
|
108
108
|
inlined: inlined ?? false,
|
|
109
109
|
labels: labels ?? undefined,
|
|
110
110
|
};
|
|
@@ -20,12 +20,15 @@ interface ProfileIcicleGraphProps {
|
|
|
20
20
|
metadataMappingFiles?: string[];
|
|
21
21
|
metadataLoading?: boolean;
|
|
22
22
|
isIcicleChart?: boolean;
|
|
23
|
+
isSandwichIcicleGraph?: boolean;
|
|
24
|
+
isFlamegraph?: boolean;
|
|
25
|
+
tooltipId?: string;
|
|
23
26
|
}
|
|
24
27
|
export declare const validateIcicleChartQuery: (profileSource: MergedProfileSource) => {
|
|
25
28
|
isValid: boolean;
|
|
26
29
|
isNonDelta: boolean;
|
|
27
30
|
isDurationTooLong: boolean;
|
|
28
31
|
};
|
|
29
|
-
declare const ProfileIcicleGraph: ({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart, profileSource, }: ProfileIcicleGraphProps) => JSX.Element;
|
|
32
|
+
declare const ProfileIcicleGraph: ({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart, profileSource, isSandwichIcicleGraph, isFlamegraph, tooltipId, }: ProfileIcicleGraphProps) => JSX.Element;
|
|
30
33
|
export default ProfileIcicleGraph;
|
|
31
34
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileIcicleGraph/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAC,mBAAmB,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAMpE,OAAO,EAAC,gBAAgB,EAA0B,MAAM,0BAA0B,CAAC;AAInF,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,eAAe,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,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;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD,eAAO,MAAM,wBAAwB,kBACpB,mBAAmB,KACjC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,iBAAiB,EAAE,OAAO,CAAA;CAIpE,CAAC;AAEF,QAAA,MAAM,kBAAkB,wNAiBrB,uBAAuB,KAAG,GAAG,CAAC,OAqShC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -11,7 +11,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
11
11
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
12
|
// See the License for the specific language governing permissions and
|
|
13
13
|
// limitations under the License.
|
|
14
|
-
import { useEffect, useMemo, useState } from 'react';
|
|
14
|
+
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
15
|
+
import cx from 'classnames';
|
|
15
16
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
16
17
|
import { useMeasure } from 'react-use';
|
|
17
18
|
import { IcicleGraphSkeleton, useParcaContext, useURLState } from '@parca/components';
|
|
@@ -31,11 +32,23 @@ export const validateIcicleChartQuery = (profileSource) => {
|
|
|
31
32
|
const isDurationTooLong = profileSource.mergeTo - profileSource.mergeFrom > 60000;
|
|
32
33
|
return { isValid: !isNonDelta && !isDurationTooLong, isNonDelta, isDurationTooLong };
|
|
33
34
|
};
|
|
34
|
-
const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart = false, profileSource, }) {
|
|
35
|
+
const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ arrow, total, filtered, curPathArrow, setNewCurPathArrow, profileType, loading, error, width, isHalfScreen, metadataMappingFiles, isIcicleChart = false, profileSource, isSandwichIcicleGraph = false, isFlamegraph = false, tooltipId, }) {
|
|
35
36
|
const { onError, authenticationErrorMessage, isDarkMode, iciclechartHelpText } = useParcaContext();
|
|
36
37
|
const { compareMode } = useProfileViewContext();
|
|
37
38
|
const [isLoading, setIsLoading] = useState(true);
|
|
38
39
|
const [icicleChartRef, { height: icicleChartHeight }] = useMeasure();
|
|
40
|
+
// Create local state for paths when in sandwich view to avoid URL updates
|
|
41
|
+
const [localCurPathArrow, setLocalCurPathArrow] = useState([]);
|
|
42
|
+
const setCurPathArrowWrapper = useCallback((path) => {
|
|
43
|
+
if (isSandwichIcicleGraph) {
|
|
44
|
+
setLocalCurPathArrow(path);
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
setNewCurPathArrow(path);
|
|
48
|
+
}
|
|
49
|
+
}, [isSandwichIcicleGraph, setNewCurPathArrow]);
|
|
50
|
+
// Determine which paths to use based on isSandwichIcicleGraph flag
|
|
51
|
+
const effectiveCurPathArrow = isSandwichIcicleGraph ? localCurPathArrow : curPathArrow;
|
|
39
52
|
const mappingsList = useMappingList(metadataMappingFiles);
|
|
40
53
|
const [colorBy, setColorBy] = useURLState('color_by');
|
|
41
54
|
// By default, we want delta profiles (CPU) to be relatively compared.
|
|
@@ -103,7 +116,7 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ arrow, total, fi
|
|
|
103
116
|
if (total === 0n && !loading)
|
|
104
117
|
return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
|
|
105
118
|
if (arrow !== undefined) {
|
|
106
|
-
return (_jsxs("div", { className: "relative", children: [isIcicleChart ? (_jsx(TimelineGuide, { bounds: boundsFromProfileSource(profileSource), width: width, height: icicleChartHeight ?? 420, margin: 0, ticks: 12, timeUnit: "nanoseconds" })) : null, _jsx("div", { ref: icicleChartRef, children: _jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath:
|
|
119
|
+
return (_jsxs("div", { className: "relative", children: [isIcicleChart ? (_jsx(TimelineGuide, { bounds: boundsFromProfileSource(profileSource), width: width, height: icicleChartHeight ?? 420, margin: 0, ticks: 12, timeUnit: "nanoseconds" })) : null, _jsx("div", { ref: icicleChartRef, children: _jsx(IcicleGraphArrow, { width: width, arrow: arrow, total: total, filtered: filtered, curPath: effectiveCurPathArrow, setCurPath: setCurPathArrowWrapper, profileType: profileType, isHalfScreen: isHalfScreen, mappingsListFromMetadata: mappingsList, compareAbsolute: isCompareAbsolute, isIcicleChart: isIcicleChart, profileSource: profileSource, isFlamegraph: isFlamegraph, isSandwich: isSandwichIcicleGraph, tooltipId: tooltipId }) })] }));
|
|
107
120
|
}
|
|
108
121
|
}, [
|
|
109
122
|
isLoading,
|
|
@@ -112,8 +125,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ arrow, total, fi
|
|
|
112
125
|
loading,
|
|
113
126
|
width,
|
|
114
127
|
filtered,
|
|
115
|
-
curPathArrow,
|
|
116
|
-
setNewCurPathArrow,
|
|
117
128
|
profileType,
|
|
118
129
|
isHalfScreen,
|
|
119
130
|
isDarkMode,
|
|
@@ -124,6 +135,11 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ arrow, total, fi
|
|
|
124
135
|
icicleChartHeight,
|
|
125
136
|
icicleChartRef,
|
|
126
137
|
iciclechartHelpText,
|
|
138
|
+
isFlamegraph,
|
|
139
|
+
isSandwichIcicleGraph,
|
|
140
|
+
effectiveCurPathArrow,
|
|
141
|
+
setCurPathArrowWrapper,
|
|
142
|
+
tooltipId,
|
|
127
143
|
]);
|
|
128
144
|
useEffect(() => {
|
|
129
145
|
if (isTrimmed) {
|
|
@@ -144,6 +160,6 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({ arrow, total, fi
|
|
|
144
160
|
}
|
|
145
161
|
return (_jsx(ErrorContent, { errorMessage: _jsxs(_Fragment, { children: [_jsx("span", { children: capitalizeOnlyFirstLetter(error.message) }), isIcicleChart ? iciclechartHelpText ?? null : null] }) }));
|
|
146
162
|
}
|
|
147
|
-
return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsx("div", { className:
|
|
163
|
+
return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "relative h-full w-full", initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.5 }, children: [compareMode ? _jsx(DiffLegend, {}) : null, _jsx("div", { className: cx(!isSandwichIcicleGraph ? 'min-h-48' : ''), id: "h-icicle-graph", children: _jsx(_Fragment, { children: icicleGraph }) }), !isSandwichIcicleGraph && (_jsxs("p", { className: "my-2 text-xs", children: ["Showing ", totalFormatted, ' ', isFiltered ? (_jsxs("span", { children: ["(", filteredPercentage, "%) filtered of ", totalUnfilteredFormatted, ' '] })) : (_jsx(_Fragment, {})), "values.", ' '] }))] }, "icicle-graph-loaded") }));
|
|
148
164
|
};
|
|
149
165
|
export default ProfileIcicleGraph;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ProfilerOnRenderCallback } from 'react';
|
|
2
|
+
import { QueryServiceClient } from '@parca/client';
|
|
2
3
|
import { CurrentPathFrame } from '../../../ProfileIcicleGraph/IcicleGraphArrow/utils';
|
|
3
4
|
import { ProfileSource } from '../../../ProfileSource';
|
|
4
5
|
import type { FlamegraphData, SourceData, TopTableData, VisualizationType } from '../../types/visualization';
|
|
@@ -22,7 +23,8 @@ interface GetDashboardItemProps {
|
|
|
22
23
|
perf?: {
|
|
23
24
|
onRender?: ProfilerOnRenderCallback;
|
|
24
25
|
};
|
|
26
|
+
queryClient?: QueryServiceClient;
|
|
25
27
|
}
|
|
26
|
-
export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, topTableData, sourceData, profileSource, total, filtered, curPathArrow, setNewCurPathArrow, currentSearchString, setSearchString, perf, }: GetDashboardItemProps) => JSX.Element;
|
|
28
|
+
export declare const getDashboardItem: ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, topTableData, sourceData, profileSource, total, filtered, curPathArrow, setNewCurPathArrow, currentSearchString, setSearchString, perf, queryClient, }: GetDashboardItemProps) => JSX.Element;
|
|
27
29
|
export {};
|
|
28
30
|
//# 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;
|
|
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;AAEzD,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAIjD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oDAAoD,CAAC;AACpF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAIrD,OAAO,KAAK,EACV,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,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,EAAE,aAAa,CAAC;IAC7B,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,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,kBAAkB,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACvD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,wBAAwB,CAAC;KACrC,CAAC;IACF,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,6NAiB1B,qBAAqB,KAAG,GAAG,CAAC,OA4G9B,CAAC"}
|
|
@@ -14,9 +14,10 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
|
14
14
|
import { Profiler } from 'react';
|
|
15
15
|
import { ConditionalWrapper } from '@parca/components';
|
|
16
16
|
import ProfileIcicleGraph from '../../../ProfileIcicleGraph';
|
|
17
|
+
import Sandwich from '../../../Sandwich';
|
|
17
18
|
import { SourceView } from '../../../SourceView';
|
|
18
19
|
import { Table } from '../../../Table';
|
|
19
|
-
export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, topTableData, sourceData, profileSource, total, filtered, curPathArrow, setNewCurPathArrow, currentSearchString, setSearchString, perf, }) => {
|
|
20
|
+
export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphData, flamechartData, topTableData, sourceData, profileSource, total, filtered, curPathArrow, setNewCurPathArrow, currentSearchString, setSearchString, perf, queryClient, }) => {
|
|
20
21
|
switch (type) {
|
|
21
22
|
case 'icicle':
|
|
22
23
|
return (_jsx(ConditionalWrapper, { condition: perf?.onRender != null, WrapperComponent: Profiler, wrapperProps: {
|
|
@@ -35,6 +36,8 @@ export const getDashboardItem = ({ type, isHalfScreen, dimensions, flamegraphDat
|
|
|
35
36
|
: 0, metadataMappingFiles: flamechartData.metadataMappingFiles, metadataLoading: flamechartData.metadataLoading, profileSource: profileSource, isIcicleChart: true }));
|
|
36
37
|
case 'table':
|
|
37
38
|
return topTableData != null ? (_jsx(Table, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, unit: topTableData.unit, profileType: profileSource?.ProfileType(), currentSearchString: currentSearchString, setSearchString: setSearchString, isHalfScreen: isHalfScreen, metadataMappingFiles: flamegraphData.metadataMappingFiles })) : (_jsx(_Fragment, {}));
|
|
39
|
+
case 'sandwich':
|
|
40
|
+
return topTableData != null ? (_jsx(Sandwich, { total: total, filtered: filtered, loading: topTableData.loading, data: topTableData.arrow?.record, unit: topTableData.unit, profileType: profileSource?.ProfileType(), isHalfScreen: isHalfScreen, metadataMappingFiles: flamegraphData.metadataMappingFiles, profileSource: profileSource, queryClient: queryClient })) : (_jsx(_Fragment, {}));
|
|
38
41
|
case 'source':
|
|
39
42
|
return sourceData != null ? (_jsx(SourceView, { loading: sourceData.loading, data: sourceData.data, total: total, filtered: filtered })) : (_jsx(_Fragment, {}));
|
|
40
43
|
default:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableColumnsDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/TableColumnsDropdown.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,oBAAoB,qCAAoC,KAAK,KAAG,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"TableColumnsDropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/TableColumnsDropdown.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAQ1C,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,oBAAoB,qCAAoC,KAAK,KAAG,GAAG,CAAC,OA+KzE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|
|
@@ -15,7 +15,6 @@ import { useEffect, useMemo, useState } from 'react';
|
|
|
15
15
|
import { createColumnHelper } from '@tanstack/table-core';
|
|
16
16
|
import { useURLState } from '@parca/components';
|
|
17
17
|
import { valueFormatter } from '@parca/utilities';
|
|
18
|
-
import { isDummyRow } from '../../../Table';
|
|
19
18
|
import ColumnsVisibility from '../../../Table/ColumnsVisibility';
|
|
20
19
|
import { addPlusSign, getRatioString } from '../../../Table/utils/functions';
|
|
21
20
|
import { useProfileViewContext } from '../../context/ProfileViewContext';
|
|
@@ -42,9 +41,6 @@ const TableColumnsDropdown = ({ profileType, total, filtered }) => {
|
|
|
42
41
|
id: 'flatPercentage',
|
|
43
42
|
header: 'Flat (%)',
|
|
44
43
|
cell: info => {
|
|
45
|
-
if (isDummyRow(info.row.original)) {
|
|
46
|
-
return '';
|
|
47
|
-
}
|
|
48
44
|
return getRatioString(info.getValue(), total, filtered);
|
|
49
45
|
},
|
|
50
46
|
size: 120,
|
|
@@ -67,9 +63,6 @@ const TableColumnsDropdown = ({ profileType, total, filtered }) => {
|
|
|
67
63
|
id: 'flatDiffPercentage',
|
|
68
64
|
header: 'Flat Diff (%)',
|
|
69
65
|
cell: info => {
|
|
70
|
-
if (isDummyRow(info.row.original)) {
|
|
71
|
-
return '';
|
|
72
|
-
}
|
|
73
66
|
return getRatioString(info.getValue(), total, filtered);
|
|
74
67
|
},
|
|
75
68
|
size: 120,
|
|
@@ -92,9 +85,6 @@ const TableColumnsDropdown = ({ profileType, total, filtered }) => {
|
|
|
92
85
|
id: 'cumulativePercentage',
|
|
93
86
|
header: 'Cumulative (%)',
|
|
94
87
|
cell: info => {
|
|
95
|
-
if (isDummyRow(info.row.original)) {
|
|
96
|
-
return '';
|
|
97
|
-
}
|
|
98
88
|
return getRatioString(info.getValue(), total, filtered);
|
|
99
89
|
},
|
|
100
90
|
size: 150,
|
|
@@ -117,9 +107,6 @@ const TableColumnsDropdown = ({ profileType, total, filtered }) => {
|
|
|
117
107
|
id: 'cumulativeDiffPercentage',
|
|
118
108
|
header: 'Cumulative Diff (%)',
|
|
119
109
|
cell: info => {
|
|
120
|
-
if (isDummyRow(info.row.original)) {
|
|
121
|
-
return '';
|
|
122
|
-
}
|
|
123
110
|
return getRatioString(info.getValue(), total, filtered);
|
|
124
111
|
},
|
|
125
112
|
size: 170,
|
|
@@ -24,6 +24,9 @@ export interface VisualisationToolbarProps {
|
|
|
24
24
|
clearSelection: () => void;
|
|
25
25
|
setGroupByLabels: (labels: string[]) => void;
|
|
26
26
|
showVisualizationSelector?: boolean;
|
|
27
|
+
sandwichFunctionName?: string;
|
|
28
|
+
setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
|
|
29
|
+
resetSandwichFunctionName: () => void;
|
|
27
30
|
}
|
|
28
31
|
export interface TableToolbarProps {
|
|
29
32
|
profileType?: ProfileType;
|
|
@@ -36,7 +39,12 @@ export interface IcicleGraphToolbarProps {
|
|
|
36
39
|
curPath: CurrentPathFrame[];
|
|
37
40
|
setNewCurPath: (path: CurrentPathFrame[]) => void;
|
|
38
41
|
}
|
|
42
|
+
export interface SandwichIcicleGraphToolbarProps {
|
|
43
|
+
resetSandwichFunctionName: () => void;
|
|
44
|
+
sandwichFunctionName?: string;
|
|
45
|
+
}
|
|
39
46
|
export declare const TableToolbar: FC<TableToolbarProps>;
|
|
40
47
|
export declare const IcicleGraphToolbar: FC<IcicleGraphToolbarProps>;
|
|
48
|
+
export declare const SandwichIcicleGraphToolbar: FC<SandwichIcicleGraphToolbarProps>;
|
|
41
49
|
export declare const VisualisationToolbar: FC<VisualisationToolbarProps>;
|
|
42
50
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,oDAAoD,CAAC;AACpF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AASrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/Toolbars/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAIzB,OAAO,EAAC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,oDAAoD,CAAC;AACpF,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AASrD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6BAA6B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,+BAA+B;IAC9C,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAwB9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAgB1D,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,EAAE,CAAC,+BAA+B,CAmB1E,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CA8F9D,CAAC"}
|