@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
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
// Copyright 2022 The Parca Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
import { FIELD_CUMULATIVE, FIELD_CUMULATIVE_DIFF, FIELD_FLAT, FIELD_FLAT_DIFF, FIELD_FUNCTION_FILE_NAME, FIELD_FUNCTION_NAME, FIELD_FUNCTION_SYSTEM_NAME, FIELD_LOCATION_ADDRESS, FIELD_MAPPING_FILE, } from '../../Table';
|
|
14
|
+
import { RowName, getRowColor } from '../../Table/utils/functions';
|
|
15
|
+
export function processRowData({ table, colorByColors, colorBy }) {
|
|
16
|
+
if (table == null || table.numRows === 0) {
|
|
17
|
+
return [];
|
|
18
|
+
}
|
|
19
|
+
const flatColumn = table.getChild(FIELD_FLAT);
|
|
20
|
+
const flatDiffColumn = table.getChild(FIELD_FLAT_DIFF);
|
|
21
|
+
const cumulativeColumn = table.getChild(FIELD_CUMULATIVE);
|
|
22
|
+
const cumulativeDiffColumn = table.getChild(FIELD_CUMULATIVE_DIFF);
|
|
23
|
+
const functionNameColumn = table.getChild(FIELD_FUNCTION_NAME);
|
|
24
|
+
const functionSystemNameColumn = table.getChild(FIELD_FUNCTION_SYSTEM_NAME);
|
|
25
|
+
const functionFileNameColumn = table.getChild(FIELD_FUNCTION_FILE_NAME);
|
|
26
|
+
const mappingFileColumn = table.getChild(FIELD_MAPPING_FILE);
|
|
27
|
+
const locationAddressColumn = table.getChild(FIELD_LOCATION_ADDRESS);
|
|
28
|
+
const getRow = (i) => {
|
|
29
|
+
const flat = flatColumn?.get(i) ?? 0n;
|
|
30
|
+
const flatDiff = flatDiffColumn?.get(i) ?? 0n;
|
|
31
|
+
const cumulative = cumulativeColumn?.get(i) ?? 0n;
|
|
32
|
+
const cumulativeDiff = cumulativeDiffColumn?.get(i) ?? 0n;
|
|
33
|
+
const functionSystemName = functionSystemNameColumn?.get(i) ?? '';
|
|
34
|
+
const functionFileName = functionFileNameColumn?.get(i) ?? '';
|
|
35
|
+
const mappingFile = mappingFileColumn?.get(i) ?? '';
|
|
36
|
+
return {
|
|
37
|
+
id: i,
|
|
38
|
+
colorProperty: {
|
|
39
|
+
color: getRowColor(colorByColors, mappingFileColumn, i, functionFileNameColumn, colorBy),
|
|
40
|
+
mappingFile,
|
|
41
|
+
},
|
|
42
|
+
name: RowName(mappingFileColumn, locationAddressColumn, functionNameColumn, i),
|
|
43
|
+
flat,
|
|
44
|
+
flatDiff,
|
|
45
|
+
cumulative,
|
|
46
|
+
cumulativeDiff,
|
|
47
|
+
functionSystemName,
|
|
48
|
+
functionFileName,
|
|
49
|
+
mappingFile,
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
return Array.from({ length: table.numRows }, (_, i) => getRow(i));
|
|
53
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorCell.d.ts","sourceRoot":"","sources":["../../src/Table/ColorCell.tsx"],"names":[],"mappings":"AAaA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,2BAA0B,cAAc,KAAG,GAAG,CAAC,OAOpE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MoreDropdown.d.ts","sourceRoot":"","sources":["../../src/Table/MoreDropdown.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,YAAY,qBAAoB;IAAC,YAAY,EAAE,MAAM,CAAA;CAAC,KAAG,KAAK,CAAC,GAAG,CAAC,OAsDxE,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { Menu } from '@headlessui/react';
|
|
15
|
+
import { Icon } from '@iconify/react';
|
|
16
|
+
import { useURLState } from '@parca/components';
|
|
17
|
+
const MoreDropdown = ({ functionName }) => {
|
|
18
|
+
const [_, setSandwichFunctionName] = useURLState('sandwich_function_name');
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
20
|
+
const [dashboardItems, setDashboardItems] = useURLState('dashboard_items', {
|
|
21
|
+
alwaysReturnArray: true,
|
|
22
|
+
});
|
|
23
|
+
const onSandwichViewSelect = () => {
|
|
24
|
+
setSandwichFunctionName(functionName.trim());
|
|
25
|
+
setDashboardItems(['sandwich']);
|
|
26
|
+
};
|
|
27
|
+
const menuItems = [
|
|
28
|
+
{
|
|
29
|
+
label: 'Show in Sandwich view',
|
|
30
|
+
action: () => onSandwichViewSelect(),
|
|
31
|
+
},
|
|
32
|
+
];
|
|
33
|
+
return (_jsx("div", { children: _jsx(Menu, { children: ({ open, close }) => (_jsxs(_Fragment, { children: [_jsx(Menu.Button, { onClick: () => {
|
|
34
|
+
if (open) {
|
|
35
|
+
close();
|
|
36
|
+
}
|
|
37
|
+
}, className: "inline-flex font-sans dark:bg-gray-900 dark:border-gray-600 justify-center w-full text-sm font-normal text-gray-600 dark:text-gray-200 bg-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75", children: _jsx(Icon, { icon: "mdi:dots-horizontal" }) }), open && (_jsxs(Menu.Items, { className: "font-sans absolute z-30 left-0 w-56 mt-2 py-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border dark:bg-gray-900 dark:border-gray-600", children: [_jsx("span", { className: "text-xs text-gray-400 capitalize px-4 py-3", children: "actions" }), menuItems.map(item => (_jsx(Menu.Button, { className: "group mb-px flex w-full items-center rounded-md px-4 py-2 text-sm text-gray-900 dark:text-white hover:bg-indigo-500 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500", onClick: item.action, children: item.label }, item.label)))] }))] })) }) }));
|
|
38
|
+
};
|
|
39
|
+
export default MoreDropdown;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type ColorConfig } from '@parca/utilities';
|
|
2
|
+
interface UseColorManagementProps {
|
|
3
|
+
isDarkMode: boolean;
|
|
4
|
+
currentColorProfile: ColorConfig;
|
|
5
|
+
mappingsList: string[];
|
|
6
|
+
filenamesList: string[];
|
|
7
|
+
colorBy: string;
|
|
8
|
+
}
|
|
9
|
+
export declare function useColorManagement({ isDarkMode, currentColorProfile, mappingsList, filenamesList, colorBy, }: UseColorManagementProps): {
|
|
10
|
+
colorByColors: Record<string, string>;
|
|
11
|
+
colorByValue: string;
|
|
12
|
+
};
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=useColorManagement.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useColorManagement.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useColorManagement.ts"],"names":[],"mappings":"AAeA,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAIlD,UAAU,uBAAuB;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,EAAE,WAAW,CAAC;IACjC,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,OAAO,GACR,EAAE,uBAAuB,GAAG;IAC3B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;CACtB,CAqBA"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// Copyright 2022 The Parca Authors
|
|
2
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
+
// you may not use this file except in compliance with the License.
|
|
4
|
+
// You may obtain a copy of the License at
|
|
5
|
+
//
|
|
6
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
//
|
|
8
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
+
// See the License for the specific language governing permissions and
|
|
12
|
+
// limitations under the License.
|
|
13
|
+
import { useMemo } from 'react';
|
|
14
|
+
import { getFilenameColors, getMappingColors } from '../../ProfileIcicleGraph/IcicleGraphArrow';
|
|
15
|
+
export function useColorManagement({ isDarkMode, currentColorProfile, mappingsList, filenamesList, colorBy, }) {
|
|
16
|
+
const filenameColors = useMemo(() => {
|
|
17
|
+
return getFilenameColors(filenamesList, isDarkMode, currentColorProfile);
|
|
18
|
+
}, [isDarkMode, filenamesList, currentColorProfile]);
|
|
19
|
+
const mappingColors = useMemo(() => {
|
|
20
|
+
return getMappingColors(mappingsList, isDarkMode, currentColorProfile);
|
|
21
|
+
}, [isDarkMode, mappingsList, currentColorProfile]);
|
|
22
|
+
const colorByList = {
|
|
23
|
+
filename: filenameColors,
|
|
24
|
+
binary: mappingColors,
|
|
25
|
+
};
|
|
26
|
+
const colorByValue = colorBy === undefined || colorBy === '' ? 'binary' : colorBy;
|
|
27
|
+
const colorByColors = colorByList[colorByValue];
|
|
28
|
+
return {
|
|
29
|
+
colorByColors,
|
|
30
|
+
colorByValue,
|
|
31
|
+
};
|
|
32
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { type ColumnDef } from '@tanstack/table-core';
|
|
2
|
+
import { type Row } from '..';
|
|
3
|
+
import { type ColumnName } from '../utils/functions';
|
|
4
|
+
interface UseTableConfigurationProps {
|
|
5
|
+
unit?: string;
|
|
6
|
+
total: bigint;
|
|
7
|
+
filtered: bigint;
|
|
8
|
+
compareMode: boolean;
|
|
9
|
+
isSandwich?: boolean;
|
|
10
|
+
}
|
|
11
|
+
interface TableConfiguration {
|
|
12
|
+
columns: Array<ColumnDef<Row>>;
|
|
13
|
+
initialSorting: Array<{
|
|
14
|
+
id: string;
|
|
15
|
+
desc: boolean;
|
|
16
|
+
}>;
|
|
17
|
+
columnVisibility: Record<ColumnName, boolean>;
|
|
18
|
+
}
|
|
19
|
+
export declare function useTableConfiguration({ unit, total, filtered, compareMode, }: UseTableConfigurationProps): TableConfiguration;
|
|
20
|
+
export {};
|
|
21
|
+
//# sourceMappingURL=useTableConfiguration.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTableConfiguration.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useTableConfiguration.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAKxE,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,IAAI,CAAC;AAG5B,OAAO,EAA2B,KAAK,UAAU,EAAC,MAAM,oBAAoB,CAAC;AAE7E,UAAU,0BAA0B;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,kBAAkB;IAC1B,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,gBAAgB,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAC/C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,GACZ,EAAE,0BAA0B,GAAG,kBAAkB,CAgMjD"}
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
import { jsx as _jsx } 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 { useEffect, useMemo, useState } from 'react';
|
|
15
|
+
import { createColumnHelper } from '@tanstack/table-core';
|
|
16
|
+
import { useURLState } from '@parca/components';
|
|
17
|
+
import { valueFormatter } from '@parca/utilities';
|
|
18
|
+
import { ColorCell } from '../ColorCell';
|
|
19
|
+
import MoreDropdown from '../MoreDropdown';
|
|
20
|
+
import { addPlusSign, ratioString } from '../utils/functions';
|
|
21
|
+
export function useTableConfiguration({ unit = '', total, filtered, compareMode, }) {
|
|
22
|
+
const columnHelper = createColumnHelper();
|
|
23
|
+
const [tableColumns] = useURLState('table_columns', {
|
|
24
|
+
alwaysReturnArray: true,
|
|
25
|
+
});
|
|
26
|
+
const [dashboardItems] = useURLState('dashboard_items', {
|
|
27
|
+
alwaysReturnArray: true,
|
|
28
|
+
});
|
|
29
|
+
const [columnVisibility, setColumnVisibility] = useState(() => {
|
|
30
|
+
return {
|
|
31
|
+
color: true,
|
|
32
|
+
flat: true,
|
|
33
|
+
flatPercentage: false,
|
|
34
|
+
flatDiff: compareMode,
|
|
35
|
+
flatDiffPercentage: false,
|
|
36
|
+
cumulative: true,
|
|
37
|
+
cumulativePercentage: false,
|
|
38
|
+
cumulativeDiff: compareMode,
|
|
39
|
+
cumulativeDiffPercentage: false,
|
|
40
|
+
name: true,
|
|
41
|
+
functionSystemName: false,
|
|
42
|
+
functionFileName: false,
|
|
43
|
+
mappingFile: false,
|
|
44
|
+
};
|
|
45
|
+
});
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
if (Array.isArray(tableColumns)) {
|
|
48
|
+
setColumnVisibility(prevState => {
|
|
49
|
+
const newState = { ...prevState };
|
|
50
|
+
Object.keys(newState).forEach(column => {
|
|
51
|
+
newState[column] = tableColumns.includes(column);
|
|
52
|
+
});
|
|
53
|
+
return newState;
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
}, [tableColumns]);
|
|
57
|
+
const columns = useMemo(() => {
|
|
58
|
+
const baseColumns = [
|
|
59
|
+
columnHelper.accessor('colorProperty', {
|
|
60
|
+
id: 'color',
|
|
61
|
+
header: '',
|
|
62
|
+
cell: info => {
|
|
63
|
+
const color = info.getValue();
|
|
64
|
+
return _jsx(ColorCell, { color: color.color, mappingFile: color.mappingFile });
|
|
65
|
+
},
|
|
66
|
+
size: 10,
|
|
67
|
+
enableSorting: false,
|
|
68
|
+
}),
|
|
69
|
+
columnHelper.accessor('flat', {
|
|
70
|
+
id: 'flat',
|
|
71
|
+
header: 'Flat',
|
|
72
|
+
cell: info => valueFormatter(info.getValue(), unit, 2),
|
|
73
|
+
size: 80,
|
|
74
|
+
meta: {
|
|
75
|
+
align: 'right',
|
|
76
|
+
},
|
|
77
|
+
invertSorting: true,
|
|
78
|
+
}),
|
|
79
|
+
columnHelper.accessor('flat', {
|
|
80
|
+
id: 'flatPercentage',
|
|
81
|
+
header: 'Flat (%)',
|
|
82
|
+
cell: info => {
|
|
83
|
+
return ratioString(info.getValue(), total, filtered);
|
|
84
|
+
},
|
|
85
|
+
size: 120,
|
|
86
|
+
meta: {
|
|
87
|
+
align: 'right',
|
|
88
|
+
},
|
|
89
|
+
invertSorting: true,
|
|
90
|
+
}),
|
|
91
|
+
columnHelper.accessor('flatDiff', {
|
|
92
|
+
id: 'flatDiff',
|
|
93
|
+
header: 'Flat Diff',
|
|
94
|
+
cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
|
|
95
|
+
size: 120,
|
|
96
|
+
meta: {
|
|
97
|
+
align: 'right',
|
|
98
|
+
},
|
|
99
|
+
invertSorting: true,
|
|
100
|
+
}),
|
|
101
|
+
columnHelper.accessor('flatDiff', {
|
|
102
|
+
id: 'flatDiffPercentage',
|
|
103
|
+
header: 'Flat Diff (%)',
|
|
104
|
+
cell: info => {
|
|
105
|
+
return ratioString(info.getValue(), total, filtered);
|
|
106
|
+
},
|
|
107
|
+
size: 120,
|
|
108
|
+
meta: {
|
|
109
|
+
align: 'right',
|
|
110
|
+
},
|
|
111
|
+
invertSorting: true,
|
|
112
|
+
}),
|
|
113
|
+
columnHelper.accessor('cumulative', {
|
|
114
|
+
id: 'cumulative',
|
|
115
|
+
header: 'Cumulative',
|
|
116
|
+
cell: info => valueFormatter(info.getValue(), unit, 2),
|
|
117
|
+
size: 150,
|
|
118
|
+
meta: {
|
|
119
|
+
align: 'right',
|
|
120
|
+
},
|
|
121
|
+
invertSorting: true,
|
|
122
|
+
}),
|
|
123
|
+
columnHelper.accessor('cumulative', {
|
|
124
|
+
id: 'cumulativePercentage',
|
|
125
|
+
header: 'Cumulative (%)',
|
|
126
|
+
cell: info => {
|
|
127
|
+
return ratioString(info.getValue(), total, filtered);
|
|
128
|
+
},
|
|
129
|
+
size: 150,
|
|
130
|
+
meta: {
|
|
131
|
+
align: 'right',
|
|
132
|
+
},
|
|
133
|
+
invertSorting: true,
|
|
134
|
+
}),
|
|
135
|
+
columnHelper.accessor('cumulativeDiff', {
|
|
136
|
+
id: 'cumulativeDiff',
|
|
137
|
+
header: 'Cumulative Diff',
|
|
138
|
+
cell: info => addPlusSign(valueFormatter(info.getValue(), unit, 2)),
|
|
139
|
+
size: 170,
|
|
140
|
+
meta: {
|
|
141
|
+
align: 'right',
|
|
142
|
+
},
|
|
143
|
+
invertSorting: true,
|
|
144
|
+
}),
|
|
145
|
+
columnHelper.accessor('cumulativeDiff', {
|
|
146
|
+
id: 'cumulativeDiffPercentage',
|
|
147
|
+
header: 'Cumulative Diff (%)',
|
|
148
|
+
cell: info => {
|
|
149
|
+
return ratioString(info.getValue(), total, filtered);
|
|
150
|
+
},
|
|
151
|
+
size: 170,
|
|
152
|
+
meta: {
|
|
153
|
+
align: 'right',
|
|
154
|
+
},
|
|
155
|
+
invertSorting: true,
|
|
156
|
+
}),
|
|
157
|
+
columnHelper.accessor('name', {
|
|
158
|
+
id: 'name',
|
|
159
|
+
header: 'Name',
|
|
160
|
+
cell: info => info.getValue(),
|
|
161
|
+
}),
|
|
162
|
+
columnHelper.accessor('functionSystemName', {
|
|
163
|
+
id: 'functionSystemName',
|
|
164
|
+
header: 'Function System Name',
|
|
165
|
+
cell: info => info.getValue(),
|
|
166
|
+
}),
|
|
167
|
+
columnHelper.accessor('functionFileName', {
|
|
168
|
+
id: 'functionFileName',
|
|
169
|
+
header: 'Function File Name',
|
|
170
|
+
cell: info => info.getValue(),
|
|
171
|
+
}),
|
|
172
|
+
columnHelper.accessor('mappingFile', {
|
|
173
|
+
id: 'mappingFile',
|
|
174
|
+
header: 'Mapping File',
|
|
175
|
+
cell: info => info.getValue(),
|
|
176
|
+
}),
|
|
177
|
+
];
|
|
178
|
+
if (dashboardItems.length === 1 && dashboardItems[0] === 'table') {
|
|
179
|
+
baseColumns.unshift(columnHelper.accessor('moreActions', {
|
|
180
|
+
id: 'moreActions',
|
|
181
|
+
header: '',
|
|
182
|
+
cell: info => {
|
|
183
|
+
return _jsx(MoreDropdown, { functionName: info.row.original.name });
|
|
184
|
+
},
|
|
185
|
+
size: 10,
|
|
186
|
+
enableSorting: false,
|
|
187
|
+
}));
|
|
188
|
+
}
|
|
189
|
+
return baseColumns;
|
|
190
|
+
}, [unit, total, filtered, columnHelper, dashboardItems]);
|
|
191
|
+
const initialSorting = useMemo(() => {
|
|
192
|
+
return [
|
|
193
|
+
{
|
|
194
|
+
id: compareMode ? 'flatDiff' : 'flat',
|
|
195
|
+
desc: false,
|
|
196
|
+
},
|
|
197
|
+
];
|
|
198
|
+
}, [compareMode]);
|
|
199
|
+
return {
|
|
200
|
+
columns,
|
|
201
|
+
initialSorting,
|
|
202
|
+
columnVisibility,
|
|
203
|
+
};
|
|
204
|
+
}
|
package/dist/Table/index.d.ts
CHANGED
|
@@ -1,9 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ProfileType } from '@parca/parser';
|
|
3
|
-
import { DataRow
|
|
4
|
-
export
|
|
5
|
-
export declare const
|
|
6
|
-
|
|
3
|
+
import { DataRow } from './utils/functions';
|
|
4
|
+
export declare const FIELD_MAPPING_FILE = "mapping_file";
|
|
5
|
+
export declare const FIELD_LOCATION_ADDRESS = "location_address";
|
|
6
|
+
export declare const FIELD_FUNCTION_NAME = "function_name";
|
|
7
|
+
export declare const FIELD_FUNCTION_SYSTEM_NAME = "function_system_name";
|
|
8
|
+
export declare const FIELD_FUNCTION_FILE_NAME = "function_file_name";
|
|
9
|
+
export declare const FIELD_FLAT = "flat";
|
|
10
|
+
export declare const FIELD_FLAT_DIFF = "flat_diff";
|
|
11
|
+
export declare const FIELD_CUMULATIVE = "cumulative";
|
|
12
|
+
export declare const FIELD_CUMULATIVE_DIFF = "cumulative_diff";
|
|
13
|
+
export declare const FIELD_CALLERS = "callers";
|
|
14
|
+
export declare const FIELD_CALLEES = "callees";
|
|
15
|
+
export type Row = DataRow;
|
|
16
|
+
export interface TableProps {
|
|
7
17
|
data?: Uint8Array;
|
|
8
18
|
total: bigint;
|
|
9
19
|
filtered: bigint;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAYvE,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAS1C,OAAO,EAAC,OAAO,EAAmC,MAAM,mBAAmB,CAAC;AAE5E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AACjD,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,UAAU,SAAS,CAAC;AACjC,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,gBAAgB,eAAe,CAAC;AAC7C,eAAO,MAAM,qBAAqB,oBAAoB,CAAC;AACvD,eAAO,MAAM,aAAa,YAAY,CAAC;AACvC,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,MAAM,MAAM,GAAG,GAAG,OAAO,CAAC;AAE1B,MAAM,WAAW,UAAU;IACzB,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,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;IACxD,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,eAAO,MAAM,KAAK,wCA6MhB,CAAC;AAEH,eAAe,KAAK,CAAC"}
|