@parca/profile 0.18.4 → 0.19.1

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.
Files changed (117) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/GraphTooltipArrow/useGraphTooltip/index.d.ts.map +1 -1
  3. package/dist/GraphTooltipArrow/useGraphTooltip/index.js +6 -3
  4. package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.d.ts +2 -1
  5. package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.d.ts.map +1 -1
  6. package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.js +13 -3
  7. package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.d.ts +1 -0
  8. package/dist/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.d.ts.map +1 -1
  9. package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.d.ts +4 -0
  10. package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.d.ts.map +1 -1
  11. package/dist/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.js +15 -6
  12. package/dist/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.d.ts.map +1 -1
  13. package/dist/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.js +5 -4
  14. package/dist/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.d.ts +2 -0
  15. package/dist/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.d.ts.map +1 -1
  16. package/dist/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.js +3 -2
  17. package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.d.ts +3 -0
  18. package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.d.ts.map +1 -1
  19. package/dist/ProfileIcicleGraph/IcicleGraphArrow/index.js +4 -4
  20. package/dist/ProfileIcicleGraph/IcicleGraphArrow/utils.js +1 -1
  21. package/dist/ProfileIcicleGraph/index.d.ts +4 -1
  22. package/dist/ProfileIcicleGraph/index.d.ts.map +1 -1
  23. package/dist/ProfileIcicleGraph/index.js +22 -6
  24. package/dist/ProfileSelector/QueryControls.d.ts.map +1 -1
  25. package/dist/ProfileSelector/QueryControls.js +1 -1
  26. package/dist/ProfileView/components/DashboardItems/index.d.ts +3 -1
  27. package/dist/ProfileView/components/DashboardItems/index.d.ts.map +1 -1
  28. package/dist/ProfileView/components/DashboardItems/index.js +4 -1
  29. package/dist/ProfileView/components/Toolbars/TableColumnsDropdown.d.ts.map +1 -1
  30. package/dist/ProfileView/components/Toolbars/TableColumnsDropdown.js +0 -13
  31. package/dist/ProfileView/components/Toolbars/index.d.ts +8 -0
  32. package/dist/ProfileView/components/Toolbars/index.d.ts.map +1 -1
  33. package/dist/ProfileView/components/Toolbars/index.js +6 -2
  34. package/dist/ProfileView/components/ViewSelector/Dropdown.d.ts +1 -0
  35. package/dist/ProfileView/components/ViewSelector/Dropdown.d.ts.map +1 -1
  36. package/dist/ProfileView/components/ViewSelector/Dropdown.js +1 -1
  37. package/dist/ProfileView/components/ViewSelector/index.d.ts.map +1 -1
  38. package/dist/ProfileView/components/ViewSelector/index.js +9 -0
  39. package/dist/ProfileView/hooks/useVisualizationState.d.ts +4 -0
  40. package/dist/ProfileView/hooks/useVisualizationState.d.ts.map +1 -1
  41. package/dist/ProfileView/hooks/useVisualizationState.js +9 -1
  42. package/dist/ProfileView/index.d.ts.map +1 -1
  43. package/dist/ProfileView/index.js +3 -2
  44. package/dist/ProfileView/types/visualization.d.ts +1 -1
  45. package/dist/ProfileView/types/visualization.d.ts.map +1 -1
  46. package/dist/ProfileViewWithData.js +1 -1
  47. package/dist/Sandwich/components/CalleesSection.d.ts +25 -0
  48. package/dist/Sandwich/components/CalleesSection.d.ts.map +1 -0
  49. package/dist/Sandwich/components/CalleesSection.js +11 -0
  50. package/dist/Sandwich/components/CallersSection.d.ts +25 -0
  51. package/dist/Sandwich/components/CallersSection.d.ts.map +1 -0
  52. package/dist/Sandwich/components/CallersSection.js +11 -0
  53. package/dist/Sandwich/components/TableSection.d.ts +21 -0
  54. package/dist/Sandwich/components/TableSection.d.ts.map +1 -0
  55. package/dist/Sandwich/components/TableSection.js +7 -0
  56. package/dist/Sandwich/index.d.ts +19 -0
  57. package/dist/Sandwich/index.d.ts.map +1 -0
  58. package/dist/Sandwich/index.js +182 -0
  59. package/dist/Sandwich/utils/processRowData.d.ts +11 -0
  60. package/dist/Sandwich/utils/processRowData.d.ts.map +1 -0
  61. package/dist/Sandwich/utils/processRowData.js +53 -0
  62. package/dist/SimpleMatchers/index.d.ts.map +1 -1
  63. package/dist/SimpleMatchers/index.js +18 -4
  64. package/dist/Table/ColorCell.d.ts +7 -0
  65. package/dist/Table/ColorCell.d.ts.map +1 -0
  66. package/dist/Table/ColorCell.js +2 -0
  67. package/dist/Table/MoreDropdown.d.ts +5 -0
  68. package/dist/Table/MoreDropdown.d.ts.map +1 -0
  69. package/dist/Table/MoreDropdown.js +39 -0
  70. package/dist/Table/hooks/useColorManagement.d.ts +14 -0
  71. package/dist/Table/hooks/useColorManagement.d.ts.map +1 -0
  72. package/dist/Table/hooks/useColorManagement.js +32 -0
  73. package/dist/Table/hooks/useTableConfiguration.d.ts +21 -0
  74. package/dist/Table/hooks/useTableConfiguration.d.ts.map +1 -0
  75. package/dist/Table/hooks/useTableConfiguration.js +204 -0
  76. package/dist/Table/index.d.ts +14 -4
  77. package/dist/Table/index.d.ts.map +1 -1
  78. package/dist/Table/index.js +34 -332
  79. package/dist/Table/utils/functions.d.ts +1 -0
  80. package/dist/Table/utils/functions.d.ts.map +1 -1
  81. package/dist/styles.css +1 -1
  82. package/dist/useQuery.d.ts +1 -0
  83. package/dist/useQuery.d.ts.map +1 -1
  84. package/dist/useQuery.js +7 -1
  85. package/package.json +7 -7
  86. package/src/GraphTooltipArrow/useGraphTooltip/index.ts +6 -3
  87. package/src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenu.tsx +23 -1
  88. package/src/ProfileIcicleGraph/IcicleGraphArrow/ContextMenuWrapper.tsx +1 -0
  89. package/src/ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes.tsx +34 -5
  90. package/src/ProfileIcicleGraph/IcicleGraphArrow/MemoizedTooltip.tsx +6 -4
  91. package/src/ProfileIcicleGraph/IcicleGraphArrow/TooltipContext.tsx +5 -1
  92. package/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx +13 -1
  93. package/src/ProfileIcicleGraph/IcicleGraphArrow/utils.ts +1 -1
  94. package/src/ProfileIcicleGraph/index.tsx +50 -18
  95. package/src/ProfileSelector/QueryControls.tsx +1 -0
  96. package/src/ProfileView/components/DashboardItems/index.tsx +21 -0
  97. package/src/ProfileView/components/Toolbars/TableColumnsDropdown.tsx +11 -25
  98. package/src/ProfileView/components/Toolbars/index.tsx +42 -1
  99. package/src/ProfileView/components/ViewSelector/Dropdown.tsx +2 -1
  100. package/src/ProfileView/components/ViewSelector/index.tsx +11 -0
  101. package/src/ProfileView/hooks/useVisualizationState.ts +16 -1
  102. package/src/ProfileView/index.tsx +7 -0
  103. package/src/ProfileView/types/visualization.ts +7 -1
  104. package/src/ProfileViewWithData.tsx +1 -1
  105. package/src/Sandwich/components/CalleesSection.tsx +87 -0
  106. package/src/Sandwich/components/CallersSection.tsx +88 -0
  107. package/src/Sandwich/components/TableSection.tsx +67 -0
  108. package/src/Sandwich/index.tsx +342 -0
  109. package/src/Sandwich/utils/processRowData.ts +78 -0
  110. package/src/SimpleMatchers/index.tsx +20 -4
  111. package/src/Table/ColorCell.tsx +26 -0
  112. package/src/Table/MoreDropdown.tsx +75 -0
  113. package/src/Table/hooks/useColorManagement.ts +58 -0
  114. package/src/Table/hooks/useTableConfiguration.tsx +237 -0
  115. package/src/Table/index.tsx +37 -470
  116. package/src/Table/utils/functions.ts +1 -0
  117. package/src/useQuery.tsx +10 -1
@@ -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;CACrC;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,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAuB9C,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAgB1D,CAAC;AAMF,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAmF9D,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"}
@@ -14,16 +14,20 @@ export const TableToolbar = ({ profileType, total, filtered, clearSelection, cur
14
14
  export const IcicleGraphToolbar = ({ curPath, setNewCurPath }) => {
15
15
  return (_jsx(_Fragment, { children: _jsx("div", { className: "flex w-full gap-2 items-end", children: _jsxs(Button, { variant: "neutral", className: "gap-2 w-max h-fit", onClick: () => setNewCurPath([]), disabled: curPath.length === 0, children: ["Reset graph", _jsx(Icon, { icon: "system-uicons:reset", width: 20 })] }) }) }));
16
16
  };
17
+ export const SandwichIcicleGraphToolbar = ({ resetSandwichFunctionName, sandwichFunctionName, }) => {
18
+ return (_jsx(_Fragment, { children: _jsx("div", { className: "flex w-full gap-2 items-end justify-between", children: _jsx(Button, { color: "neutral", onClick: () => resetSandwichFunctionName(), className: "w-auto", variant: "neutral", disabled: sandwichFunctionName === undefined || sandwichFunctionName.length === 0, children: "Reset view" }) }) }));
19
+ };
17
20
  const Divider = () => (_jsx("div", { className: "border-t mt-4 border-gray-200 dark:border-gray-700 h-[1px] w-full pb-4" }));
18
- export const VisualisationToolbar = ({ groupBy, toggleGroupBy, groupByLabels, setGroupByLabels, profileType, preferencesModal, profileSource, queryClient, onDownloadPProf, pprofdownloading, profileViewExternalSubActions, curPath, setNewCurPath, total, filtered, currentSearchString, clearSelection, showVisualizationSelector = true, }) => {
21
+ export const VisualisationToolbar = ({ groupBy, toggleGroupBy, groupByLabels, setGroupByLabels, profileType, preferencesModal, profileSource, queryClient, onDownloadPProf, pprofdownloading, profileViewExternalSubActions, curPath, setNewCurPath, total, filtered, currentSearchString, clearSelection, showVisualizationSelector = true, resetSandwichFunctionName, sandwichFunctionName, }) => {
19
22
  const { dashboardItems } = useDashboard();
20
23
  const isTableViz = dashboardItems?.includes('table');
21
24
  const isGraphViz = dashboardItems?.includes('icicle');
25
+ const isSandwichIcicleGraphViz = dashboardItems?.includes('sandwich');
22
26
  const req = profileSource?.QueryRequest();
23
27
  if (req !== null && req !== undefined) {
24
28
  req.groupBy = {
25
29
  fields: groupBy ?? [],
26
30
  };
27
31
  }
28
- return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-3 items-end", children: [_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(MultiLevelDropdown, { profileType: profileType, onSelect: () => { } })] }), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [preferencesModal === true && _jsx(UserPreferencesModal, {}), _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: req, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, { profileSource: profileSource }) : null] })] }), isGraphViz && !isTableViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(IcicleGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableViz && !isGraphViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })] }))] }));
32
+ return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsxs("div", { className: "flex gap-3 items-end", children: [_jsxs(_Fragment, { children: [_jsx(GroupByDropdown, { groupBy: groupBy, toggleGroupBy: toggleGroupBy, labels: groupByLabels, setGroupByLabels: setGroupByLabels }), _jsx(MultiLevelDropdown, { profileType: profileType, onSelect: () => { } })] }), _jsx(FilterByFunctionButton, {}), profileViewExternalSubActions != null ? profileViewExternalSubActions : null] }), _jsxs("div", { className: "flex gap-3", children: [preferencesModal === true && _jsx(UserPreferencesModal, {}), _jsx(ShareButton, { profileSource: profileSource, queryClient: queryClient, queryRequest: req, onDownloadPProf: onDownloadPProf, pprofdownloading: pprofdownloading ?? false, profileViewExternalSubActions: profileViewExternalSubActions }), showVisualizationSelector ? _jsx(ViewSelector, { profileSource: profileSource }) : null] })] }), isGraphViz && !isTableViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(IcicleGraphToolbar, { curPath: curPath, setNewCurPath: setNewCurPath })] })), isTableViz && !isGraphViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(TableToolbar, { profileType: profileType, total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })] })), isSandwichIcicleGraphViz && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(SandwichIcicleGraphToolbar, { resetSandwichFunctionName: resetSandwichFunctionName, sandwichFunctionName: sandwichFunctionName })] }))] }));
29
33
  };
@@ -13,6 +13,7 @@ export interface DropdownItem {
13
13
  export interface InnerAction {
14
14
  text: string;
15
15
  onClick: () => void;
16
+ isDisabled?: boolean;
16
17
  }
17
18
  export declare function contructItemsFromArray(items: any[]): DropdownItem[];
18
19
  declare const Dropdown: ({ items, selectedKey, onSelection, placeholder, width, className, loading, primary, disabled, icon, id, }: {
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/Dropdown.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAMnE;AAED,QAAA,MAAM,QAAQ,8GAYX;IACD,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,KAAG,GAAG,CAAC,OAuDP,CAAC;AAwEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/Dropdown.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAMnE;AAED,QAAA,MAAM,QAAQ,8GAYX;IACD,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,KAAG,GAAG,CAAC,OAuDP,CAAC;AAwEF,eAAe,QAAQ,CAAC"}
@@ -40,6 +40,6 @@ const DropdownOption = ({ option }) => {
40
40
  return (_jsx(Listbox.Option, { id: option.id ?? `h-select-option-${option.key}`, disabled: option.disabled ?? false, className: ({ active }) => cx(active && 'bg-indigo-600 text-white', 'relative flex cursor-default select-none py-2 px-3'), value: option.key, children: ({ selected, active, disabled }) => (_jsxs("div", { className: "relative flex items-center w-full justify-between", onMouseEnter: () => setIsMouseOver(true), onMouseLeave: () => setIsMouseOver(false), children: [isMouseOver && disabled && option.disabledText != null ? (_jsxs("div", { className: "absolute top-[-60px] text-gray-500 dark:text-gray-400 text-xs bg-white dark:bg-black border rounded p-2 z-100 w-52 text-center", onMouseEnter: () => setIsMouseOver(false), children: [option.disabledText, _jsx("div", { className: "absolute left-1/2 -translate-x-1/2 top-full h-0 w-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent" })] })) : null, _jsx("div", { className: "flex items-center", children: _jsx("span", { className: cx(selected ? 'font-semibold' : 'font-normal', disabled && 'opacity-50'), children: option.element.expanded }) }), option.innerAction !== undefined && (_jsxs(Button, { variant: "neutral", className: "p-[6px]", onClick: e => {
41
41
  e.stopPropagation();
42
42
  option.innerAction?.onClick();
43
- }, disabled: disabled, children: [option.innerAction.text, option.innerAction.text === 'Add Panel' && (_jsx(Icon, { icon: "ic:baseline-plus", className: "w-[14px] h-[14px] ml-2" }))] })), selected ? (_jsx("span", { className: cx(active ? 'text-white' : 'text-indigo-600', 'absolute inset-y-0 right-0 flex items-center pr-4'), children: _jsx(Icon, { icon: "heroicons:check-20-solid", "aria-hidden": "true" }) })) : null] })) }, option.key));
43
+ }, disabled: disabled || option.innerAction.isDisabled, children: [option.innerAction.text, option.innerAction.text === 'Add Panel' && (_jsx(Icon, { icon: "ic:baseline-plus", className: "w-[14px] h-[14px] ml-2" }))] })), selected ? (_jsx("span", { className: cx(active ? 'text-white' : 'text-indigo-600', 'absolute inset-y-0 right-0 flex items-center pr-4'), children: _jsx(Icon, { icon: "heroicons:check-20-solid", "aria-hidden": "true" }) })) : null] })) }, option.key));
44
44
  };
45
45
  export default Dropdown;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,sBAAqB,KAAK,KAAG,GAAG,CAAC,OAwHlD,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ProfileView/components/ViewSelector/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAGrD,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,YAAY,sBAAqB,KAAK,KAAG,GAAG,CAAC,OAmIlD,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -11,6 +11,7 @@ const ViewSelector = ({ profileSource }) => {
11
11
  const allItems = [
12
12
  { key: 'table', label: 'Table', canBeSelected: !dashboardItems.includes('table') },
13
13
  { key: 'icicle', label: 'icicle', canBeSelected: !dashboardItems.includes('icicle') },
14
+ { key: 'sandwich', label: 'sandwich', canBeSelected: !dashboardItems.includes('sandwich') },
14
15
  ];
15
16
  if (enableicicleCharts) {
16
17
  allItems.push({
@@ -35,6 +36,14 @@ const ViewSelector = ({ profileSource }) => {
35
36
  const getInnerActionForItem = (item) => {
36
37
  if (dashboardItems.length === 1 && item.key === dashboardItems[0])
37
38
  return undefined;
39
+ // For sandwich view, return a no-op action
40
+ if (item.key === 'sandwich') {
41
+ return {
42
+ text: 'Add Panel',
43
+ onClick: () => { },
44
+ isDisabled: true, // Custom property to control button state
45
+ };
46
+ }
38
47
  return {
39
48
  text: !item.canBeSelected && item.key === 'source'
40
49
  ? 'Add Panel'
@@ -8,10 +8,14 @@ export declare const useVisualizationState: () => {
8
8
  setSearchString: (searchString: string | undefined) => void;
9
9
  colorStackLegend: string | undefined;
10
10
  colorBy: string;
11
+ setColorBy: (colorBy: string) => void;
11
12
  groupBy: string[];
12
13
  setGroupBy: (keys: string[]) => void;
13
14
  toggleGroupBy: (key: string) => void;
14
15
  clearSelection: () => void;
15
16
  setGroupByLabels: (labels: string[]) => void;
17
+ sandwichFunctionName: string | undefined;
18
+ setSandwichFunctionName: (sandwichFunctionName: string | undefined) => void;
19
+ resetSandwichFunctionName: () => void;
16
20
  };
17
21
  //# sourceMappingURL=useVisualizationState.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AAEjF,eAAO,MAAM,qBAAqB,QAAO;IACvC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CA0D9C,CAAC"}
1
+ {"version":3,"file":"useVisualizationState.d.ts","sourceRoot":"","sources":["../../../src/ProfileView/hooks/useVisualizationState.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AAEjF,eAAO,MAAM,qBAAqB,QAAO;IACvC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,uBAAuB,EAAE,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5E,yBAAyB,EAAE,MAAM,IAAI,CAAC;CAqEvC,CAAC"}
@@ -22,11 +22,12 @@ export const useVisualizationState = () => {
22
22
  });
23
23
  const [currentSearchString, setSearchString] = useURLState('search_string');
24
24
  const [colorStackLegend] = useURLState('color_stack_legend');
25
- const [colorBy] = useURLState('color_by');
25
+ const [colorBy, setColorBy] = useURLState('color_by');
26
26
  const [groupBy, setStoreGroupBy] = useURLState('group_by', {
27
27
  defaultValue: [FIELD_FUNCTION_NAME],
28
28
  alwaysReturnArray: true,
29
29
  });
30
+ const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
30
31
  const setGroupBy = useCallback((keys) => {
31
32
  setStoreGroupBy(keys);
32
33
  }, [setStoreGroupBy]);
@@ -41,6 +42,9 @@ export const useVisualizationState = () => {
41
42
  const clearSelection = useCallback(() => {
42
43
  setSearchString?.('');
43
44
  }, [setSearchString]);
45
+ const resetSandwichFunctionName = useCallback(() => {
46
+ setSandwichFunctionName(undefined);
47
+ }, [setSandwichFunctionName]);
44
48
  return {
45
49
  curPath,
46
50
  setCurPath,
@@ -50,10 +54,14 @@ export const useVisualizationState = () => {
50
54
  setSearchString,
51
55
  colorStackLegend,
52
56
  colorBy: colorBy ?? '',
57
+ setColorBy,
53
58
  groupBy,
54
59
  setGroupBy,
55
60
  toggleGroupBy,
56
61
  setGroupByLabels,
57
62
  clearSelection,
63
+ sandwichFunctionName,
64
+ setSandwichFunctionName,
65
+ resetSandwichFunctionName,
58
66
  };
59
67
  };
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,gBAAgB,EAAoB,MAAM,uBAAuB,CAAC;AAE/E,eAAO,MAAM,WAAW,sLAarB,gBAAgB,KAAG,GAAG,CAAC,OAkIzB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileView/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,gBAAgB,EAAoB,MAAM,uBAAuB,CAAC;AAE/E,eAAO,MAAM,WAAW,sLAarB,gBAAgB,KAAG,GAAG,CAAC,OAyIzB,CAAC"}
@@ -26,7 +26,7 @@ import { useVisualizationState } from './hooks/useVisualizationState';
26
26
  export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, topTableData, sourceData, profileSource, queryClient, onDownloadPProf, pprofDownloading, compare, showVisualizationSelector, }) => {
27
27
  const { timezone, perf, profileViewExternalMainActions, preferencesModal, profileViewExternalSubActions, } = useParcaContext();
28
28
  const { ref, dimensions } = useContainerDimensions();
29
- const { curPath, setCurPath, curPathArrow, setCurPathArrow, currentSearchString, setSearchString, colorStackLegend, colorBy, groupBy, toggleGroupBy, clearSelection, setGroupByLabels, } = useVisualizationState();
29
+ const { curPath, setCurPath, curPathArrow, setCurPathArrow, currentSearchString, setSearchString, colorStackLegend, colorBy, groupBy, toggleGroupBy, clearSelection, setGroupByLabels, sandwichFunctionName, setSandwichFunctionName, resetSandwichFunctionName, } = useVisualizationState();
30
30
  const { colorMappings } = useProfileMetadata({
31
31
  flamegraphArrow: flamegraphData.arrow,
32
32
  metadataMappingFiles: flamegraphData.metadataMappingFiles,
@@ -55,6 +55,7 @@ export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, t
55
55
  currentSearchString,
56
56
  setSearchString,
57
57
  perf,
58
+ queryClient,
58
59
  });
59
60
  };
60
61
  const actionButtons = {
@@ -62,5 +63,5 @@ export const ProfileView = ({ total, filtered, flamegraphData, flamechartData, t
62
63
  table: (_jsx(TableToolbar, { profileType: profileSource?.ProfileType(), total: total, filtered: filtered, clearSelection: clearSelection, currentSearchString: currentSearchString })),
63
64
  };
64
65
  const hasProfileSource = profileSource !== undefined && profileSource.toString(timezone) !== '';
65
- 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: curPathArrow, setNewCurPath: setCurPathArrow, 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 }) })] }) }) }));
66
+ 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: curPathArrow, setNewCurPath: setCurPathArrow, profileType: profileSource?.ProfileType(), total: total, filtered: filtered, currentSearchString: currentSearchString, setSearchString: setSearchString, groupByLabels: flamegraphData.metadataLabels ?? [], preferencesModal: preferencesModal, profileViewExternalSubActions: profileViewExternalSubActions, clearSelection: clearSelection, setGroupByLabels: setGroupByLabels, showVisualizationSelector: showVisualizationSelector, sandwichFunctionName: sandwichFunctionName, setSandwichFunctionName: setSandwichFunctionName, resetSandwichFunctionName: resetSandwichFunctionName }), isColorStackLegendEnabled && (_jsx(ColorStackLegend, { compareMode: compareMode, mappings: colorMappings, loading: flamegraphData.metadataLoading })), _jsx("div", { className: "w-full", ref: ref, children: _jsx(DashboardLayout, { getDashboardItemByType: getDashboardItemByType, actionButtons: actionButtons }) })] }) }) }));
66
67
  };
@@ -31,7 +31,7 @@ export interface SourceData {
31
31
  data?: Source;
32
32
  error?: any;
33
33
  }
34
- export type VisualizationType = 'icicle' | 'callgraph' | 'table' | 'source' | 'iciclechart';
34
+ export type VisualizationType = 'icicle' | 'callgraph' | 'table' | 'source' | 'iciclechart' | 'sandwich';
35
35
  export interface ProfileViewProps {
36
36
  total: bigint;
37
37
  filtered: bigint;
@@ -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;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,EAAE,aAAa,CAAC;IAC7B,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
+ {"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,GACzB,QAAQ,GACR,WAAW,GACX,OAAO,GACP,QAAQ,GACR,aAAa,GACb,UAAU,CAAC;AAEf,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,EAAE,aAAa,CAAC;IAC7B,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"}
@@ -86,7 +86,7 @@ export const ProfileViewWithData = ({ queryClient, profileSource, showVisualizat
86
86
  });
87
87
  const { perf } = useParcaContext();
88
88
  const { isLoading: tableLoading, response: tableResponse, error: tableError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.TABLE_ARROW, {
89
- skip: !dashboardItems.includes('table'),
89
+ skip: !dashboardItems.includes('table') && !dashboardItems.includes('sandwich'),
90
90
  binaryFrameFilter,
91
91
  });
92
92
  const { isLoading: callgraphLoading, response: callgraphResponse, error: callgraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.CALLGRAPH, {
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+ import { type FlamegraphArrow } from '@parca/client';
3
+ import { type CurrentPathFrame } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
4
+ import { type ProfileSource } from '../../ProfileSource';
5
+ interface CalleesSectionProps {
6
+ calleesRef: React.RefObject<HTMLDivElement>;
7
+ isHalfScreen: boolean;
8
+ calleesFlamegraphResponse?: {
9
+ report: {
10
+ oneofKind: string;
11
+ flamegraphArrow?: FlamegraphArrow;
12
+ };
13
+ total?: string;
14
+ };
15
+ calleesFlamegraphLoading: boolean;
16
+ calleesFlamegraphError: any;
17
+ filtered: bigint;
18
+ profileSource: ProfileSource;
19
+ curPathArrow: CurrentPathFrame[];
20
+ setCurPathArrow: (path: CurrentPathFrame[]) => void;
21
+ metadataMappingFiles?: string[];
22
+ }
23
+ export declare function CalleesSection({ calleesRef, isHalfScreen, calleesFlamegraphResponse, calleesFlamegraphLoading, calleesFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, }: CalleesSectionProps): JSX.Element;
24
+ export {};
25
+ //# sourceMappingURL=CalleesSection.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CalleesSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/CalleesSection.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAGnD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAEvD,UAAU,mBAAmB;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,YAAY,EAAE,OAAO,CAAC;IACtB,yBAAyB,CAAC,EAAE;QAC1B,MAAM,EAAE;YACN,SAAS,EAAE,MAAM,CAAC;YAClB,eAAe,CAAC,EAAE,eAAe,CAAC;SACnC,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,GAAG,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,EACtB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,eAAe,EACf,oBAAoB,GACrB,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAmCnC"}
@@ -0,0 +1,11 @@
1
+ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
2
+ import ProfileIcicleGraph from '../../ProfileIcicleGraph';
3
+ export function CalleesSection({ calleesRef, isHalfScreen, calleesFlamegraphResponse, calleesFlamegraphLoading, calleesFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, }) {
4
+ return (_jsxs("div", { className: "flex relative items-start flex-row", ref: calleesRef, children: [_jsxs("div", { className: "[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left", children: ['<-', " Callees"] }), _jsx(ProfileIcicleGraph, { arrow: calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
5
+ ? calleesFlamegraphResponse?.report?.flamegraphArrow
6
+ : undefined, total: BigInt(calleesFlamegraphResponse?.total ?? '0'), filtered: filtered, profileType: profileSource?.ProfileType(), loading: calleesFlamegraphLoading, error: calleesFlamegraphError, isHalfScreen: true, width: calleesRef.current != null
7
+ ? isHalfScreen
8
+ ? (calleesRef.current.getBoundingClientRect().width - 54) / 2
9
+ : calleesRef.current.getBoundingClientRect().width - 16
10
+ : 0, metadataMappingFiles: metadataMappingFiles, metadataLoading: false, isSandwichIcicleGraph: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, profileSource: profileSource, tooltipId: "callees" })] }));
11
+ }
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+ import { type FlamegraphArrow } from '@parca/client';
3
+ import { type CurrentPathFrame } from '../../ProfileIcicleGraph/IcicleGraphArrow/utils';
4
+ import { type ProfileSource } from '../../ProfileSource';
5
+ interface CallersSectionProps {
6
+ callersRef: React.RefObject<HTMLDivElement>;
7
+ isHalfScreen: boolean;
8
+ callersFlamegraphResponse?: {
9
+ report: {
10
+ oneofKind: string;
11
+ flamegraphArrow?: FlamegraphArrow;
12
+ };
13
+ total?: string;
14
+ };
15
+ callersFlamegraphLoading: boolean;
16
+ callersFlamegraphError: any;
17
+ filtered: bigint;
18
+ profileSource: ProfileSource;
19
+ curPathArrow: CurrentPathFrame[];
20
+ setCurPathArrow: (path: CurrentPathFrame[]) => void;
21
+ metadataMappingFiles?: string[];
22
+ }
23
+ export declare function CallersSection({ callersRef, isHalfScreen, callersFlamegraphResponse, callersFlamegraphLoading, callersFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, }: CallersSectionProps): JSX.Element;
24
+ export {};
25
+ //# sourceMappingURL=CallersSection.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CallersSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/CallersSection.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAGnD,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAEvD,UAAU,mBAAmB;IAC3B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,YAAY,EAAE,OAAO,CAAC;IACtB,yBAAyB,CAAC,EAAE;QAC1B,MAAM,EAAE;YACN,SAAS,EAAE,MAAM,CAAC;YAClB,eAAe,CAAC,EAAE,eAAe,CAAC;SACnC,CAAC;QACF,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,GAAG,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IACpD,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,YAAY,EACZ,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,EACtB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,eAAe,EACf,oBAAoB,GACrB,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAoCnC"}
@@ -0,0 +1,11 @@
1
+ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
2
+ import ProfileIcicleGraph from '../../ProfileIcicleGraph';
3
+ export function CallersSection({ callersRef, isHalfScreen, callersFlamegraphResponse, callersFlamegraphLoading, callersFlamegraphError, filtered, profileSource, curPathArrow, setCurPathArrow, metadataMappingFiles, }) {
4
+ return (_jsxs("div", { className: "flex relative flex-row", ref: callersRef, children: [_jsxs("div", { className: "[writing-mode:vertical-lr] -rotate-180 px-1 uppercase text-[10px] text-left", children: ["Callers ", '->'] }), _jsx(ProfileIcicleGraph, { arrow: callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
5
+ ? callersFlamegraphResponse?.report?.flamegraphArrow
6
+ : undefined, total: BigInt(callersFlamegraphResponse?.total ?? '0'), filtered: filtered, profileType: profileSource?.ProfileType(), loading: callersFlamegraphLoading, error: callersFlamegraphError, isHalfScreen: true, width: callersRef.current != null
7
+ ? isHalfScreen
8
+ ? (callersRef.current.getBoundingClientRect().width - 54) / 2
9
+ : callersRef.current.getBoundingClientRect().width - 16
10
+ : 0, metadataMappingFiles: metadataMappingFiles, metadataLoading: false, isSandwichIcicleGraph: true, curPathArrow: curPathArrow, setNewCurPathArrow: setCurPathArrow, isFlamegraph: true, profileSource: profileSource, tooltipId: "callers" })] }));
11
+ }
@@ -0,0 +1,21 @@
1
+ import { type ColumnDef, type Row as RowType } from '@tanstack/table-core';
2
+ import { type Row } from '../../Table';
3
+ import { ColumnName, DataRow } from '../../Table/utils/functions';
4
+ interface TableSectionProps {
5
+ rows: Row[];
6
+ columns: Array<ColumnDef<Row>>;
7
+ initialSorting: Array<{
8
+ id: string;
9
+ desc: boolean;
10
+ }>;
11
+ selectedRow: RowType<Row> | null;
12
+ onRowClick: (row: DataRow) => void;
13
+ shouldHighlightRow: (row: Row) => boolean;
14
+ enableHighlighting: boolean;
15
+ columnVisibility: Record<ColumnName, boolean>;
16
+ height?: number;
17
+ sandwichFunctionName?: string;
18
+ }
19
+ export declare function TableSection({ rows, columns, initialSorting, selectedRow, onRowClick, shouldHighlightRow, enableHighlighting, columnVisibility, height, sandwichFunctionName, }: TableSectionProps): JSX.Element;
20
+ export {};
21
+ //# sourceMappingURL=TableSection.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TableSection.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/components/TableSection.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,GAAG,IAAI,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAIzE,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,aAAa,CAAC;AACrC,OAAO,EAAC,UAAU,EAAE,OAAO,EAAa,MAAM,6BAA6B,CAAC;AAE5E,UAAU,iBAAiB;IACzB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/B,cAAc,EAAE,KAAK,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAC,CAAC,CAAC;IACnD,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACjC,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,kBAAkB,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;IAC1C,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,OAAO,EACP,cAAc,EACd,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,MAAM,EACN,oBAAoB,GACrB,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAsBjC"}
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Table as TableComponent } from '@parca/components';
3
+ import { ROW_HEIGHT } from '../../Table/utils/functions';
4
+ export function TableSection({ rows, columns, initialSorting, selectedRow, onRowClick, shouldHighlightRow, enableHighlighting, columnVisibility, height, sandwichFunctionName, }) {
5
+ console.log(height);
6
+ return (_jsx("div", { style: { height: height !== undefined ? `${height}px` : '80vh' }, className: `font-robotoMono w-full cursor-pointer ${selectedRow != null && sandwichFunctionName !== undefined ? 'w-[50%]' : ''}`, children: _jsx(TableComponent, { data: rows, columns: columns, initialSorting: initialSorting, usePointerCursor: true, onRowClick: onRowClick, shouldHighlightRow: shouldHighlightRow, enableHighlighting: enableHighlighting, estimatedRowHeight: ROW_HEIGHT, columnVisibility: columnVisibility }) }));
7
+ }
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import { QueryServiceClient } from '@parca/client';
3
+ import { ProfileType } from '@parca/parser';
4
+ import { ProfileSource } from '../ProfileSource';
5
+ interface Props {
6
+ data?: Uint8Array;
7
+ total: bigint;
8
+ filtered: bigint;
9
+ profileType?: ProfileType;
10
+ loading: boolean;
11
+ isHalfScreen: boolean;
12
+ unit?: string;
13
+ metadataMappingFiles?: string[];
14
+ queryClient?: QueryServiceClient;
15
+ profileSource: ProfileSource;
16
+ }
17
+ declare const Sandwich: React.NamedExoticComponent<Props>;
18
+ export default Sandwich;
19
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Sandwich/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAM/E,OAAO,EAA0B,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAG1E,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAM1C,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAa/C,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,mCA6RZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
@@ -0,0 +1,182 @@
1
+ import { 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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
15
+ import { tableFromIPC } from 'apache-arrow';
16
+ import { AnimatePresence, motion } from 'framer-motion';
17
+ import { QueryRequest_ReportType } from '@parca/client';
18
+ import { TableSkeleton, useParcaContext, useURLState } from '@parca/components';
19
+ import { useCurrentColorProfile } from '@parca/hooks';
20
+ import { isSearchMatch } from '@parca/utilities';
21
+ import useMappingList, { useFilenamesList, } from '../ProfileIcicleGraph/IcicleGraphArrow/useMappingList';
22
+ import { useProfileViewContext } from '../ProfileView/context/ProfileViewContext';
23
+ import { useVisualizationState } from '../ProfileView/hooks/useVisualizationState';
24
+ import { FIELD_FUNCTION_NAME } from '../Table';
25
+ import { useColorManagement } from '../Table/hooks/useColorManagement';
26
+ import { useTableConfiguration } from '../Table/hooks/useTableConfiguration';
27
+ import { useQuery } from '../useQuery';
28
+ import { CalleesSection } from './components/CalleesSection';
29
+ import { CallersSection } from './components/CallersSection';
30
+ import { TableSection } from './components/TableSection';
31
+ import { processRowData } from './utils/processRowData';
32
+ const Sandwich = React.memo(function Sandwich({ data, total, filtered, profileType, loading, isHalfScreen, unit, metadataMappingFiles, queryClient, profileSource, }) {
33
+ const currentColorProfile = useCurrentColorProfile();
34
+ const [sandwichFunctionName, setSandwichFunctionName] = useURLState('sandwich_function_name');
35
+ const { isDarkMode } = useParcaContext();
36
+ const [selectedRow, setSelectedRow] = useState(null);
37
+ const callersRef = React.useRef(null);
38
+ const calleesRef = React.useRef(null);
39
+ const callersCalleesContainerRef = useRef(null);
40
+ const [tableHeight, setTableHeight] = useState(undefined);
41
+ const { compareMode } = useProfileViewContext();
42
+ const { colorBy, setColorBy, curPathArrow, setCurPathArrow } = useVisualizationState();
43
+ const nodeTrimThreshold = useMemo(() => {
44
+ let width =
45
+ // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
46
+ window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
47
+ // subtract the padding
48
+ width = width - 12 - 16 - 12;
49
+ return (1 / width) * 100;
50
+ }, []);
51
+ const { isLoading: callersFlamegraphLoading, response: callersFlamegraphResponse, error: callersFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
52
+ nodeTrimThreshold,
53
+ groupBy: [FIELD_FUNCTION_NAME],
54
+ invertCallStack: true,
55
+ binaryFrameFilter: [],
56
+ sandwichByFunction: sandwichFunctionName,
57
+ skip: sandwichFunctionName === undefined,
58
+ });
59
+ const { isLoading: calleesFlamegraphLoading, response: calleesFlamegraphResponse, error: calleesFlamegraphError, } = useQuery(queryClient, profileSource, QueryRequest_ReportType.FLAMEGRAPH_ARROW, {
60
+ nodeTrimThreshold,
61
+ groupBy: [FIELD_FUNCTION_NAME],
62
+ invertCallStack: false,
63
+ binaryFrameFilter: [],
64
+ sandwichByFunction: sandwichFunctionName,
65
+ skip: sandwichFunctionName === undefined,
66
+ });
67
+ const table = useMemo(() => {
68
+ if (loading || data == null) {
69
+ return null;
70
+ }
71
+ return tableFromIPC(data);
72
+ }, [data, loading]);
73
+ const mappingsList = useMappingList(metadataMappingFiles);
74
+ const filenamesList = useFilenamesList(table);
75
+ const mappingsListCount = useMemo(() => mappingsList.filter(m => m !== '').length, [mappingsList]);
76
+ // If there is only one mapping file, we want to color by filename by default.
77
+ useEffect(() => {
78
+ if (mappingsListCount === 1 && colorBy !== 'filename') {
79
+ setColorBy('filename');
80
+ }
81
+ // eslint-disable-next-line react-hooks/exhaustive-deps
82
+ }, [mappingsListCount]);
83
+ const { colorByColors, colorByValue } = useColorManagement({
84
+ isDarkMode,
85
+ currentColorProfile,
86
+ mappingsList,
87
+ filenamesList,
88
+ colorBy,
89
+ });
90
+ unit = useMemo(() => unit ?? profileType?.sampleUnit ?? '', [unit, profileType?.sampleUnit]);
91
+ const tableConfig = useTableConfiguration({
92
+ unit,
93
+ total,
94
+ filtered,
95
+ compareMode,
96
+ });
97
+ const { columns, initialSorting, columnVisibility } = tableConfig;
98
+ const rows = useMemo(() => {
99
+ if (table == null || table.numRows === 0) {
100
+ return [];
101
+ }
102
+ return processRowData({
103
+ table,
104
+ colorByColors,
105
+ colorBy: colorByValue,
106
+ });
107
+ }, [table, colorByColors, colorByValue]);
108
+ useEffect(() => {
109
+ if (sandwichFunctionName !== undefined && selectedRow == null) {
110
+ // find the row with the sandwichFunctionName
111
+ const row = rows.find(row => {
112
+ return row.name.trim() === sandwichFunctionName.trim();
113
+ });
114
+ if (row != null) {
115
+ setSelectedRow(row);
116
+ }
117
+ }
118
+ }, [sandwichFunctionName, rows, selectedRow]);
119
+ // Update table height based on callers/callees container height
120
+ useEffect(() => {
121
+ const updateTableHeight = () => {
122
+ if (callersCalleesContainerRef.current != null) {
123
+ const containerHeight = callersCalleesContainerRef.current.getBoundingClientRect().height;
124
+ setTableHeight(containerHeight);
125
+ }
126
+ };
127
+ // Initial measurement
128
+ updateTableHeight();
129
+ // Update on window resize
130
+ window.addEventListener('resize', updateTableHeight);
131
+ // Use ResizeObserver if available for more accurate updates
132
+ let resizeObserver = null;
133
+ if (callersCalleesContainerRef.current != null && 'ResizeObserver' in window) {
134
+ resizeObserver = new ResizeObserver(updateTableHeight);
135
+ resizeObserver.observe(callersCalleesContainerRef.current);
136
+ }
137
+ return () => {
138
+ window.removeEventListener('resize', updateTableHeight);
139
+ if (resizeObserver != null) {
140
+ resizeObserver.disconnect();
141
+ }
142
+ };
143
+ }, [sandwichFunctionName, callersFlamegraphResponse, calleesFlamegraphResponse]);
144
+ const onRowClick = useCallback((row) => {
145
+ setSelectedRow(row);
146
+ setSandwichFunctionName(row.name.trim());
147
+ }, [setSandwichFunctionName]);
148
+ const enableHighlighting = useMemo(() => {
149
+ return sandwichFunctionName != null && sandwichFunctionName?.length > 0;
150
+ }, [sandwichFunctionName]);
151
+ const shouldHighlightRow = useCallback((row) => {
152
+ if (!('name' in row)) {
153
+ return false;
154
+ }
155
+ const name = row.name;
156
+ return isSearchMatch(sandwichFunctionName, name);
157
+ }, [sandwichFunctionName]);
158
+ if (loading) {
159
+ return (_jsx("div", { className: "overflow-clip h-[700px] min-h-[700px]", children: _jsx(TableSkeleton, { isHalfScreen: isHalfScreen, isDarkMode: isDarkMode }) }));
160
+ }
161
+ if (rows.length === 0) {
162
+ return _jsx("div", { className: "mx-auto text-center", children: "Profile has no samples" });
163
+ }
164
+ return (_jsx("section", { className: "flex flex-row h-full w-full", children: _jsx(AnimatePresence, { children: _jsx(motion.div, { className: "h-full w-full", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: _jsxs("div", { className: "relative flex flex-row", children: [_jsx(TableSection, { rows: rows, columns: columns, initialSorting: initialSorting, columnVisibility: columnVisibility, selectedRow: selectedRow, onRowClick: onRowClick, shouldHighlightRow: shouldHighlightRow, enableHighlighting: enableHighlighting, height: tableHeight, sandwichFunctionName: sandwichFunctionName }), sandwichFunctionName !== undefined && (_jsxs("div", { className: "w-[50%] flex flex-col", ref: callersCalleesContainerRef, children: [_jsx(CallersSection, { callersRef: callersRef, isHalfScreen: isHalfScreen, callersFlamegraphResponse: callersFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
165
+ ? {
166
+ report: {
167
+ oneofKind: 'flamegraphArrow',
168
+ flamegraphArrow: callersFlamegraphResponse.report.flamegraphArrow,
169
+ },
170
+ total: callersFlamegraphResponse.total?.toString() ?? '0',
171
+ }
172
+ : undefined, callersFlamegraphLoading: callersFlamegraphLoading, callersFlamegraphError: callersFlamegraphError, filtered: filtered, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, metadataMappingFiles: metadataMappingFiles }), _jsx("div", { className: "h-4" }), _jsx(CalleesSection, { calleesRef: calleesRef, isHalfScreen: isHalfScreen, calleesFlamegraphResponse: calleesFlamegraphResponse?.report.oneofKind === 'flamegraphArrow'
173
+ ? {
174
+ report: {
175
+ oneofKind: 'flamegraphArrow',
176
+ flamegraphArrow: calleesFlamegraphResponse.report.flamegraphArrow,
177
+ },
178
+ total: calleesFlamegraphResponse.total?.toString() ?? '0',
179
+ }
180
+ : undefined, calleesFlamegraphLoading: calleesFlamegraphLoading, calleesFlamegraphError: calleesFlamegraphError, filtered: filtered, profileSource: profileSource, curPathArrow: curPathArrow, setCurPathArrow: setCurPathArrow, metadataMappingFiles: metadataMappingFiles })] }))] }) }, "sandwich-loaded") }) }));
181
+ });
182
+ export default Sandwich;
@@ -0,0 +1,11 @@
1
+ import { type Table } from 'apache-arrow';
2
+ import { type colorByColors } from '../../ProfileIcicleGraph/IcicleGraphArrow/IcicleGraphNodes';
3
+ import { type DataRow } from '../../Table/utils/functions';
4
+ interface ProcessRowDataProps {
5
+ table: Table | null;
6
+ colorByColors: colorByColors;
7
+ colorBy: string;
8
+ }
9
+ export declare function processRowData({ table, colorByColors, colorBy }: ProcessRowDataProps): DataRow[];
10
+ export {};
11
+ //# sourceMappingURL=processRowData.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"processRowData.d.ts","sourceRoot":"","sources":["../../../src/Sandwich/utils/processRowData.ts"],"names":[],"mappings":"AAaA,OAAO,EAAC,KAAK,KAAK,EAAC,MAAM,cAAc,CAAC;AAExC,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,4DAA4D,CAAC;AAY9F,OAAO,EAAuB,KAAK,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAE/E,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,cAAc,CAAC,EAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAC,EAAE,mBAAmB,GAAG,OAAO,EAAE,CA0C9F"}