@parca/profile 0.16.83 → 0.16.84
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/dist/{TopTable.d.ts → TopTable/index.d.ts} +2 -2
- package/dist/TopTable/index.js +134 -0
- package/dist/styles.css +1 -1
- package/package.json +3 -3
- package/src/TopTable/benchmarks/TopTable-10M.benchmark.tsx +33 -0
- package/src/TopTable/benchmarks/TopTable-1M.benchmark.tsx +33 -0
- package/src/TopTable/benchmarks/TopTable-20M.benchmark.tsx +33 -0
- package/src/TopTable/benchmarks/benchdata/populateData.js +91 -0
- package/src/TopTable/index.tsx +175 -0
- package/tsconfig.json +8 -1
- package/dist/TopTable.js +0 -144
- package/src/TopTable.tsx +0 -270
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.16.84](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.83...@parca/profile@0.16.84) (2022-12-13)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @parca/profile
|
|
9
|
+
|
|
6
10
|
## [0.16.83](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.82...@parca/profile@0.16.83) (2022-12-12)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @parca/profile
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TopNodeMeta, Top } from '@parca/client';
|
|
3
|
-
import '
|
|
3
|
+
import '../TopTable.styles.css';
|
|
4
4
|
interface TopTableProps {
|
|
5
5
|
data?: Top;
|
|
6
6
|
sampleUnit: string;
|
|
7
7
|
}
|
|
8
8
|
export declare const RowLabel: (meta: TopNodeMeta | undefined) => string;
|
|
9
|
-
export declare const TopTable: ({ data: top, sampleUnit }: TopTableProps) => JSX.Element;
|
|
9
|
+
export declare const TopTable: ({ data: top, sampleUnit: unit }: TopTableProps) => JSX.Element;
|
|
10
10
|
export default TopTable;
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
+
// Copyright 2022 The Parca Authors
|
|
14
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
15
|
+
// you may not use this file except in compliance with the License.
|
|
16
|
+
// You may obtain a copy of the License at
|
|
17
|
+
//
|
|
18
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
19
|
+
//
|
|
20
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
21
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
22
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
23
|
+
// See the License for the specific language governing permissions and
|
|
24
|
+
// limitations under the License.
|
|
25
|
+
import React, { useCallback, useMemo } from 'react';
|
|
26
|
+
import { getLastItem, valueFormatter, isSearchMatch } from '@parca/functions';
|
|
27
|
+
import { useAppSelector, selectCompareMode, selectSearchNodeString, setSearchNodeString, useAppDispatch, } from '@parca/store';
|
|
28
|
+
import { Table } from '@parca/components';
|
|
29
|
+
import { createColumnHelper } from '@tanstack/react-table';
|
|
30
|
+
import { hexifyAddress } from '../utils';
|
|
31
|
+
import '../TopTable.styles.css';
|
|
32
|
+
export var RowLabel = function (meta) {
|
|
33
|
+
var _a, _b, _c, _d, _e, _f;
|
|
34
|
+
if (meta === undefined)
|
|
35
|
+
return '<unknown>';
|
|
36
|
+
var mapping = "".concat(((_a = meta === null || meta === void 0 ? void 0 : meta.mapping) === null || _a === void 0 ? void 0 : _a.file) !== undefined && ((_b = meta === null || meta === void 0 ? void 0 : meta.mapping) === null || _b === void 0 ? void 0 : _b.file) !== ''
|
|
37
|
+
? "[".concat((_c = getLastItem(meta.mapping.file)) !== null && _c !== void 0 ? _c : '', "]")
|
|
38
|
+
: '');
|
|
39
|
+
if (((_d = meta.function) === null || _d === void 0 ? void 0 : _d.name) !== undefined && ((_e = meta.function) === null || _e === void 0 ? void 0 : _e.name) !== '')
|
|
40
|
+
return "".concat(mapping, " ").concat(meta.function.name);
|
|
41
|
+
var address = hexifyAddress((_f = meta.location) === null || _f === void 0 ? void 0 : _f.address);
|
|
42
|
+
var fallback = "".concat(mapping, " ").concat(address);
|
|
43
|
+
return fallback === '' ? '<unknown>' : fallback;
|
|
44
|
+
};
|
|
45
|
+
var columnHelper = createColumnHelper();
|
|
46
|
+
var addPlusSign = function (num) {
|
|
47
|
+
if (num.charAt(0) === '0' || num.charAt(0) === '-') {
|
|
48
|
+
return num;
|
|
49
|
+
}
|
|
50
|
+
return "+".concat(num);
|
|
51
|
+
};
|
|
52
|
+
export var TopTable = function (_a) {
|
|
53
|
+
var _b;
|
|
54
|
+
var top = _a.data, unit = _a.sampleUnit;
|
|
55
|
+
var currentSearchString = useAppSelector(selectSearchNodeString);
|
|
56
|
+
var compareMode = useAppSelector(selectCompareMode);
|
|
57
|
+
var dispatch = useAppDispatch();
|
|
58
|
+
var columns = React.useMemo(function () {
|
|
59
|
+
var cols = [
|
|
60
|
+
columnHelper.accessor('meta', {
|
|
61
|
+
header: function () { return _jsx("span", __assign({ className: "text-left" }, { children: "Name" })); },
|
|
62
|
+
cell: function (info) {
|
|
63
|
+
var meta = info.row.original.meta;
|
|
64
|
+
var name = RowLabel(meta);
|
|
65
|
+
return name;
|
|
66
|
+
},
|
|
67
|
+
sortingFn: function (a, b) {
|
|
68
|
+
var aName = RowLabel(a.original.meta);
|
|
69
|
+
var bName = RowLabel(b.original.meta);
|
|
70
|
+
return aName.localeCompare(bName);
|
|
71
|
+
},
|
|
72
|
+
}),
|
|
73
|
+
columnHelper.accessor('flat', {
|
|
74
|
+
header: function () { return 'Flat'; },
|
|
75
|
+
cell: function (info) { return valueFormatter(Number(info.getValue()), unit, 2); },
|
|
76
|
+
size: 150,
|
|
77
|
+
meta: {
|
|
78
|
+
align: 'right',
|
|
79
|
+
},
|
|
80
|
+
sortDescFirst: true,
|
|
81
|
+
}),
|
|
82
|
+
columnHelper.accessor('cumulative', {
|
|
83
|
+
header: function () { return 'Cumulative'; },
|
|
84
|
+
cell: function (info) { return valueFormatter(Number(info.getValue()), unit, 2); },
|
|
85
|
+
size: 150,
|
|
86
|
+
meta: {
|
|
87
|
+
align: 'right',
|
|
88
|
+
},
|
|
89
|
+
sortDescFirst: true,
|
|
90
|
+
}),
|
|
91
|
+
];
|
|
92
|
+
if (compareMode) {
|
|
93
|
+
cols.push(columnHelper.accessor('diff', {
|
|
94
|
+
header: function () { return 'Diff'; },
|
|
95
|
+
cell: function (info) { return addPlusSign(valueFormatter(Number(info.getValue()), unit, 2)); },
|
|
96
|
+
size: 150,
|
|
97
|
+
meta: {
|
|
98
|
+
align: 'right',
|
|
99
|
+
},
|
|
100
|
+
sortDescFirst: true,
|
|
101
|
+
}));
|
|
102
|
+
}
|
|
103
|
+
return cols;
|
|
104
|
+
}, [unit, compareMode]);
|
|
105
|
+
var selectSpan = useCallback(function (span) {
|
|
106
|
+
dispatch(setSearchNodeString(span.trim()));
|
|
107
|
+
}, [dispatch]);
|
|
108
|
+
var onRowClick = useCallback(function (row) {
|
|
109
|
+
var meta = row.meta;
|
|
110
|
+
if (meta === undefined) {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
var name = RowLabel(meta);
|
|
114
|
+
selectSpan(name);
|
|
115
|
+
}, [selectSpan]);
|
|
116
|
+
var shouldHighlightRow = useCallback(function (row) {
|
|
117
|
+
var meta = row.meta;
|
|
118
|
+
if (meta === undefined)
|
|
119
|
+
return false;
|
|
120
|
+
var name = RowLabel(meta);
|
|
121
|
+
return isSearchMatch(currentSearchString, name);
|
|
122
|
+
}, [currentSearchString]);
|
|
123
|
+
var enableHighlighting = useMemo(function () {
|
|
124
|
+
return currentSearchString != null && (currentSearchString === null || currentSearchString === void 0 ? void 0 : currentSearchString.length) > 0;
|
|
125
|
+
}, [currentSearchString]);
|
|
126
|
+
var initialSorting = useMemo(function () {
|
|
127
|
+
return [{ id: compareMode ? 'diff' : 'cumulative', desc: true }];
|
|
128
|
+
}, [compareMode]);
|
|
129
|
+
var total = top != null ? top.list.length : 0;
|
|
130
|
+
if (total === 0)
|
|
131
|
+
return _jsx(_Fragment, { children: "Profile has no samples" });
|
|
132
|
+
return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "w-full font-robotoMono h-[80vh] overflow-scroll" }, { children: _jsx(Table, { data: (_b = top === null || top === void 0 ? void 0 : top.list) !== null && _b !== void 0 ? _b : [], columns: columns, initialSorting: initialSorting, onRowClick: onRowClick, enableHighlighting: enableHighlighting, shouldHighlightRow: shouldHighlightRow }) })) }));
|
|
133
|
+
};
|
|
134
|
+
export default TopTable;
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.\!absolute{position:absolute!important}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.right-0{right:0}.left-0{left:0}.z-50{z-index:50}.z-10{z-index:10}.m-auto{margin:auto}.m-0{margin:0}.m-2{margin:.5rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-20{margin-bottom:5rem;margin-top:5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mr-3{margin-right:.75rem}.ml-2{margin-left:.5rem}.mr-6{margin-right:1.5rem}.mt-2{margin-top:.5rem}.mt-1{margin-top:.25rem}.ml-auto{margin-left:auto}.mb-2{margin-bottom:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.grid{display:grid}.h-36{height:9rem}.h-1{height:.25rem}.h-4{height:1rem}.max-h-\[400px\]{max-height:400px}.w-full{width:100%}.w-\[150px\]{width:150px}.w-auto{width:auto}.w-1\/5{width:20%}.w-4\/5{width:80%}.w-1\/4{width:25%}.w-3\/4{width:75%}.w-40{width:10rem}.w-2\/5{width:40%}.w-1\/2{width:50%}.w-8{width:2rem}.w-16{width:4rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-\[420px\]{width:420px}.min-w-\[300px\]{min-width:300px}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.table-auto{table-layout:auto}.table-fixed{table-layout:fixed}.translate-y-1{--tw-translate-y:0.25rem}.translate-y-0,.translate-y-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-l{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.rounded-r{border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.rounded-tr-none{border-top-right-radius:0}.rounded-br-none{border-bottom-right-radius:0}.rounded-tl-none{border-top-left-radius:0}.rounded-bl-none{border-bottom-left-radius:0}.border{border-width:1px}.border-l-0{border-left-width:0}.border-r-0{border-right-width:0}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-inherit{background-color:inherit}.fill-\[\#161616\]{fill:#161616}.fill-transparent{fill:transparent}.fill-current{fill:currentColor}.p-3{padding:.75rem}.p-10{padding:2.5rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-20{padding-bottom:5rem;padding-top:5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-8{padding-left:2rem;padding-right:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pr-2{padding-right:.5rem}.pl-3{padding-left:.75rem}.pr-9{padding-right:2.25rem}.pb-4{padding-bottom:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.\!text-indigo-600{--tw-text-opacity:1!important;color:rgb(79 70 229/var(--tw-text-opacity))!important}.opacity-90{opacity:.9}.opacity-100{opacity:1}.opacity-0{opacity:0}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity))}.ring-opacity-5{--tw-ring-opacity:0.05}.blur{--tw-blur:blur(8px)}.blur,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-200{transition-duration:.2s}.duration-150{transition-duration:.15s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:bg-\[\#62626212\]:hover{background-color:#62626212}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-indigo-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(55 48 163/var(--tw-ring-opacity))}[class~=theme-dark] .dark\:divide-gray-700>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(55 65 81/var(--tw-divide-opacity))}[class~=theme-dark] .dark\:border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}[class~=theme-dark] .dark\:bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}[class~=theme-dark] .dark\:bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}[class~=theme-dark] .dark\:bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}[class~=theme-dark] .dark\:fill-\[\#ffffff\]{fill:#fff}[class~=theme-dark] .dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}[class~=theme-dark] .dark\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}[class~=theme-dark] .dark\:text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251/var(--tw-text-opacity))}[class~=theme-dark] .dark\:\!text-indigo-400{--tw-text-opacity:1!important;color:rgb(129 140 248/var(--tw-text-opacity))!important}[class~=theme-dark] .dark\:hover\:bg-\[\#ffffff12\]:hover{background-color:#ffffff12}@media (min-width:640px){.sm\:inline{display:inline}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
|
|
1
|
+
/*! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.\!absolute{position:absolute!important}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.right-0{right:0}.left-0{left:0}.z-50{z-index:50}.z-10{z-index:10}.m-auto{margin:auto}.m-0{margin:0}.m-2{margin:.5rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-20{margin-bottom:5rem;margin-top:5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mr-3{margin-right:.75rem}.ml-2{margin-left:.5rem}.mr-6{margin-right:1.5rem}.mt-2{margin-top:.5rem}.mt-1{margin-top:.25rem}.ml-auto{margin-left:auto}.mb-2{margin-bottom:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.grid{display:grid}.h-36{height:9rem}.h-1{height:.25rem}.h-\[80vh\]{height:80vh}.h-4{height:1rem}.max-h-\[400px\]{max-height:400px}.w-auto{width:auto}.w-1\/5{width:20%}.w-4\/5{width:80%}.w-full{width:100%}.w-1\/4{width:25%}.w-3\/4{width:75%}.w-40{width:10rem}.w-2\/5{width:40%}.w-1\/2{width:50%}.w-8{width:2rem}.w-16{width:4rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-\[420px\]{width:420px}.min-w-\[300px\]{min-width:300px}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.table-auto{table-layout:auto}.table-fixed{table-layout:fixed}.translate-y-1{--tw-translate-y:0.25rem}.translate-y-0,.translate-y-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-l{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.rounded-r{border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.rounded-tr-none{border-top-right-radius:0}.rounded-br-none{border-bottom-right-radius:0}.rounded-tl-none{border-top-left-radius:0}.rounded-bl-none{border-bottom-left-radius:0}.border{border-width:1px}.border-l-0{border-left-width:0}.border-r-0{border-right-width:0}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-inherit{background-color:inherit}.fill-transparent{fill:transparent}.fill-current{fill:currentColor}.p-3{padding:.75rem}.p-10{padding:2.5rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-20{padding-bottom:5rem;padding-top:5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-8{padding-left:2rem;padding-right:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.pl-3{padding-left:.75rem}.pr-9{padding-right:2.25rem}.pt-2{padding-top:.5rem}.pb-4{padding-bottom:1rem}.pr-2{padding-right:.5rem}.pl-2{padding-left:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-xs{font-size:.75rem;line-height:1rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.\!text-indigo-600{--tw-text-opacity:1!important;color:rgb(79 70 229/var(--tw-text-opacity))!important}.opacity-90{opacity:.9}.opacity-100{opacity:1}.opacity-0{opacity:0}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0/var(--tw-ring-opacity))}.ring-opacity-5{--tw-ring-opacity:0.05}.blur{--tw-blur:blur(8px)}.blur,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-200{transition-duration:.2s}.duration-150{transition-duration:.15s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-indigo-800:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(55 48 163/var(--tw-ring-opacity))}[class~=theme-dark] .dark\:border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}[class~=theme-dark] .dark\:bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}[class~=theme-dark] .dark\:bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}[class~=theme-dark] .dark\:bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}[class~=theme-dark] .dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}[class~=theme-dark] .dark\:text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}[class~=theme-dark] .dark\:text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251/var(--tw-text-opacity))}[class~=theme-dark] .dark\:\!text-indigo-400{--tw-text-opacity:1!important;color:rgb(129 140 248/var(--tw-text-opacity))!important}@media (min-width:640px){.sm\:inline{display:inline}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@parca/profile",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.84",
|
|
4
4
|
"description": "Profile viewing libraries",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@parca/client": "^0.16.58",
|
|
7
|
-
"@parca/components": "^0.16.
|
|
7
|
+
"@parca/components": "^0.16.73",
|
|
8
8
|
"@parca/dynamicsize": "^0.16.51",
|
|
9
9
|
"@parca/functions": "^0.16.53",
|
|
10
10
|
"@parca/parser": "^0.16.51",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"access": "public",
|
|
43
43
|
"registry": "https://registry.npmjs.org/"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "bd7cf76b0c282bce3bf3a4dd1ab1ab15c8328af9"
|
|
46
46
|
}
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
|
|
14
|
+
import React from 'react';
|
|
15
|
+
import TopTable from '..';
|
|
16
|
+
import {Provider} from 'react-redux';
|
|
17
|
+
import {store} from '@parca/store';
|
|
18
|
+
import parca10mGraphData from './benchdata/parca-toptable-10m.json';
|
|
19
|
+
import {Top} from '@parca/client';
|
|
20
|
+
|
|
21
|
+
const {store: reduxStore} = store();
|
|
22
|
+
|
|
23
|
+
const parca10mGraph = parca10mGraphData as Top;
|
|
24
|
+
|
|
25
|
+
export default function ({callback = () => {}}): React.ReactElement {
|
|
26
|
+
return (
|
|
27
|
+
<div ref={callback}>
|
|
28
|
+
<Provider store={reduxStore}>
|
|
29
|
+
<TopTable data={parca10mGraph} sampleUnit={parca10mGraph.unit} />
|
|
30
|
+
</Provider>
|
|
31
|
+
</div>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
|
|
14
|
+
import React from 'react';
|
|
15
|
+
import TopTable from '..';
|
|
16
|
+
import {Provider} from 'react-redux';
|
|
17
|
+
import {store} from '@parca/store';
|
|
18
|
+
import {Top} from '@parca/client';
|
|
19
|
+
import parca1mGraphData from './benchdata/parca-toptable-1m.json';
|
|
20
|
+
|
|
21
|
+
const {store: reduxStore} = store();
|
|
22
|
+
|
|
23
|
+
const parca1mGraph = parca1mGraphData as Top;
|
|
24
|
+
|
|
25
|
+
export default function ({callback = () => {}}): React.ReactElement {
|
|
26
|
+
return (
|
|
27
|
+
<div ref={callback}>
|
|
28
|
+
<Provider store={reduxStore}>
|
|
29
|
+
<TopTable data={parca1mGraph} sampleUnit={parca1mGraph.unit} />
|
|
30
|
+
</Provider>
|
|
31
|
+
</div>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
|
|
14
|
+
import React from 'react';
|
|
15
|
+
import TopTable from '..';
|
|
16
|
+
import {Provider} from 'react-redux';
|
|
17
|
+
import {store} from '@parca/store';
|
|
18
|
+
import parca20mGraphData from './benchdata/parca-toptable-20m.json';
|
|
19
|
+
import {Top} from '@parca/client';
|
|
20
|
+
|
|
21
|
+
const {store: reduxStore} = store();
|
|
22
|
+
|
|
23
|
+
const parca20mGraph = parca20mGraphData as Top;
|
|
24
|
+
|
|
25
|
+
export default function ({callback = () => {}}): React.ReactElement {
|
|
26
|
+
return (
|
|
27
|
+
<div ref={callback}>
|
|
28
|
+
<Provider store={reduxStore}>
|
|
29
|
+
<TopTable data={parca20mGraph} sampleUnit={parca20mGraph.unit} />
|
|
30
|
+
</Provider>
|
|
31
|
+
</div>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
@@ -0,0 +1,91 @@
|
|
|
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
|
+
|
|
14
|
+
const {GrpcWebFetchTransport} = require('@protobuf-ts/grpcweb-transport');
|
|
15
|
+
const client = require('@parca/client');
|
|
16
|
+
const fs = require('fs-extra');
|
|
17
|
+
const path = require('path');
|
|
18
|
+
// const {fileURLToPath} = require('url');
|
|
19
|
+
const fetch = require('node-fetch');
|
|
20
|
+
|
|
21
|
+
globalThis.fetch = fetch;
|
|
22
|
+
globalThis.Headers = fetch.Headers;
|
|
23
|
+
const DIR_NAME = __dirname; // path.dirname(fileURLToPath(import.meta.url));
|
|
24
|
+
|
|
25
|
+
const apiEndpoint = 'https://demo.parca.dev';
|
|
26
|
+
|
|
27
|
+
const queryClient = new client.QueryServiceClient(
|
|
28
|
+
new GrpcWebFetchTransport({
|
|
29
|
+
baseUrl: `${apiEndpoint}/api`,
|
|
30
|
+
})
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
const populateDataIfNeeded = async (from, filename) => {
|
|
34
|
+
const filePath = path.join(DIR_NAME, filename);
|
|
35
|
+
if (Object.keys(await readFile(filePath)).length > 0) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
const {response} = await queryClient.query({
|
|
39
|
+
options: {
|
|
40
|
+
oneofKind: 'merge',
|
|
41
|
+
merge: {
|
|
42
|
+
start: client.Timestamp.fromDate(from),
|
|
43
|
+
end: client.Timestamp.fromDate(new Date()),
|
|
44
|
+
query: 'parca_agent_cpu:samples:count:cpu:nanoseconds:delta{container="parca"}',
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
reportType: client.QueryRequest_ReportType.TOP,
|
|
48
|
+
mode: client.QueryRequest_Mode.MERGE,
|
|
49
|
+
});
|
|
50
|
+
if (response.report.oneofKind !== 'top') {
|
|
51
|
+
throw new Error('Expected topTable report');
|
|
52
|
+
}
|
|
53
|
+
await writeToFile(response.report.top, filePath);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
const writeToFile = async (data, filename) => {
|
|
57
|
+
await fs.createFile(filename);
|
|
58
|
+
return await fs.writeFile(filename, JSON.stringify(data));
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const readFile = async filename => {
|
|
62
|
+
try {
|
|
63
|
+
return await fs.readJSON(filename);
|
|
64
|
+
} catch (e) {
|
|
65
|
+
return {};
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
const run = async () => {
|
|
70
|
+
await Promise.all([
|
|
71
|
+
populateDataIfNeeded(new Date(new Date().getTime() - 1000 * 60), 'parca-toptable-1m.json'),
|
|
72
|
+
populateDataIfNeeded(
|
|
73
|
+
new Date(new Date().getTime() - 1000 * 60 * 10),
|
|
74
|
+
'parca-toptable-10m.json'
|
|
75
|
+
),
|
|
76
|
+
populateDataIfNeeded(
|
|
77
|
+
new Date(new Date().getTime() - 1000 * 60 * 20),
|
|
78
|
+
'parca-toptable-20m.json'
|
|
79
|
+
),
|
|
80
|
+
]);
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
run()
|
|
84
|
+
.then(() => {
|
|
85
|
+
console.log('done');
|
|
86
|
+
process.exit(0);
|
|
87
|
+
})
|
|
88
|
+
.catch(err => {
|
|
89
|
+
console.error('Error:', err);
|
|
90
|
+
process.exit(1);
|
|
91
|
+
});
|
|
@@ -0,0 +1,175 @@
|
|
|
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
|
+
|
|
14
|
+
import React, {useCallback, useMemo} from 'react';
|
|
15
|
+
|
|
16
|
+
import {getLastItem, valueFormatter, isSearchMatch} from '@parca/functions';
|
|
17
|
+
import {
|
|
18
|
+
useAppSelector,
|
|
19
|
+
selectCompareMode,
|
|
20
|
+
selectSearchNodeString,
|
|
21
|
+
setSearchNodeString,
|
|
22
|
+
useAppDispatch,
|
|
23
|
+
} from '@parca/store';
|
|
24
|
+
import {TopNode, TopNodeMeta, Top} from '@parca/client';
|
|
25
|
+
import {Table} from '@parca/components';
|
|
26
|
+
import {createColumnHelper, ColumnDef} from '@tanstack/react-table';
|
|
27
|
+
|
|
28
|
+
import {hexifyAddress} from '../utils';
|
|
29
|
+
|
|
30
|
+
import '../TopTable.styles.css';
|
|
31
|
+
|
|
32
|
+
interface TopTableProps {
|
|
33
|
+
data?: Top;
|
|
34
|
+
sampleUnit: string;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export const RowLabel = (meta: TopNodeMeta | undefined): string => {
|
|
38
|
+
if (meta === undefined) return '<unknown>';
|
|
39
|
+
const mapping = `${
|
|
40
|
+
meta?.mapping?.file !== undefined && meta?.mapping?.file !== ''
|
|
41
|
+
? `[${getLastItem(meta.mapping.file) ?? ''}]`
|
|
42
|
+
: ''
|
|
43
|
+
}`;
|
|
44
|
+
if (meta.function?.name !== undefined && meta.function?.name !== '')
|
|
45
|
+
return `${mapping} ${meta.function.name}`;
|
|
46
|
+
|
|
47
|
+
const address = hexifyAddress(meta.location?.address);
|
|
48
|
+
const fallback = `${mapping} ${address}`;
|
|
49
|
+
|
|
50
|
+
return fallback === '' ? '<unknown>' : fallback;
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
const columnHelper = createColumnHelper<TopNode>();
|
|
54
|
+
|
|
55
|
+
const addPlusSign = (num: string): string => {
|
|
56
|
+
if (num.charAt(0) === '0' || num.charAt(0) === '-') {
|
|
57
|
+
return num;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
return `+${num}`;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export const TopTable = ({data: top, sampleUnit: unit}: TopTableProps): JSX.Element => {
|
|
64
|
+
const currentSearchString = useAppSelector(selectSearchNodeString);
|
|
65
|
+
const compareMode = useAppSelector(selectCompareMode);
|
|
66
|
+
const dispatch = useAppDispatch();
|
|
67
|
+
|
|
68
|
+
const columns = React.useMemo(() => {
|
|
69
|
+
const cols: Array<ColumnDef<TopNode, any>> = [
|
|
70
|
+
columnHelper.accessor('meta', {
|
|
71
|
+
header: () => <span className="text-left">Name</span>,
|
|
72
|
+
cell: info => {
|
|
73
|
+
const meta = info.row.original.meta;
|
|
74
|
+
const name = RowLabel(meta);
|
|
75
|
+
return name;
|
|
76
|
+
},
|
|
77
|
+
sortingFn: (a, b) => {
|
|
78
|
+
const aName = RowLabel(a.original.meta);
|
|
79
|
+
const bName = RowLabel(b.original.meta);
|
|
80
|
+
return aName.localeCompare(bName);
|
|
81
|
+
},
|
|
82
|
+
}),
|
|
83
|
+
columnHelper.accessor('flat', {
|
|
84
|
+
header: () => 'Flat',
|
|
85
|
+
cell: info => valueFormatter(Number(info.getValue()), unit, 2),
|
|
86
|
+
size: 150,
|
|
87
|
+
meta: {
|
|
88
|
+
align: 'right',
|
|
89
|
+
},
|
|
90
|
+
sortDescFirst: true,
|
|
91
|
+
}),
|
|
92
|
+
columnHelper.accessor('cumulative', {
|
|
93
|
+
header: () => 'Cumulative',
|
|
94
|
+
cell: info => valueFormatter(Number(info.getValue()), unit, 2),
|
|
95
|
+
size: 150,
|
|
96
|
+
meta: {
|
|
97
|
+
align: 'right',
|
|
98
|
+
},
|
|
99
|
+
sortDescFirst: true,
|
|
100
|
+
}),
|
|
101
|
+
];
|
|
102
|
+
if (compareMode) {
|
|
103
|
+
cols.push(
|
|
104
|
+
columnHelper.accessor('diff', {
|
|
105
|
+
header: () => 'Diff',
|
|
106
|
+
cell: info => addPlusSign(valueFormatter(Number(info.getValue()), unit, 2)),
|
|
107
|
+
size: 150,
|
|
108
|
+
meta: {
|
|
109
|
+
align: 'right',
|
|
110
|
+
},
|
|
111
|
+
sortDescFirst: true,
|
|
112
|
+
})
|
|
113
|
+
);
|
|
114
|
+
}
|
|
115
|
+
return cols;
|
|
116
|
+
}, [unit, compareMode]);
|
|
117
|
+
|
|
118
|
+
const selectSpan = useCallback(
|
|
119
|
+
(span: string): void => {
|
|
120
|
+
dispatch(setSearchNodeString(span.trim()));
|
|
121
|
+
},
|
|
122
|
+
[dispatch]
|
|
123
|
+
);
|
|
124
|
+
|
|
125
|
+
const onRowClick = useCallback(
|
|
126
|
+
(row: TopNode) => {
|
|
127
|
+
const meta = row.meta;
|
|
128
|
+
if (meta === undefined) {
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
const name = RowLabel(meta);
|
|
132
|
+
selectSpan(name);
|
|
133
|
+
},
|
|
134
|
+
[selectSpan]
|
|
135
|
+
);
|
|
136
|
+
|
|
137
|
+
const shouldHighlightRow = useCallback(
|
|
138
|
+
(row: TopNode) => {
|
|
139
|
+
const meta = row.meta;
|
|
140
|
+
if (meta === undefined) return false;
|
|
141
|
+
const name = RowLabel(meta);
|
|
142
|
+
return isSearchMatch(currentSearchString, name);
|
|
143
|
+
},
|
|
144
|
+
[currentSearchString]
|
|
145
|
+
);
|
|
146
|
+
|
|
147
|
+
const enableHighlighting = useMemo(() => {
|
|
148
|
+
return currentSearchString != null && currentSearchString?.length > 0;
|
|
149
|
+
}, [currentSearchString]);
|
|
150
|
+
|
|
151
|
+
const initialSorting = useMemo(() => {
|
|
152
|
+
return [{id: compareMode ? 'diff' : 'cumulative', desc: true}];
|
|
153
|
+
}, [compareMode]);
|
|
154
|
+
|
|
155
|
+
const total = top != null ? top.list.length : 0;
|
|
156
|
+
|
|
157
|
+
if (total === 0) return <>Profile has no samples</>;
|
|
158
|
+
|
|
159
|
+
return (
|
|
160
|
+
<>
|
|
161
|
+
<div className="w-full font-robotoMono h-[80vh] overflow-scroll">
|
|
162
|
+
<Table
|
|
163
|
+
data={top?.list ?? []}
|
|
164
|
+
columns={columns}
|
|
165
|
+
initialSorting={initialSorting}
|
|
166
|
+
onRowClick={onRowClick}
|
|
167
|
+
enableHighlighting={enableHighlighting}
|
|
168
|
+
shouldHighlightRow={shouldHighlightRow}
|
|
169
|
+
/>
|
|
170
|
+
</div>
|
|
171
|
+
</>
|
|
172
|
+
);
|
|
173
|
+
};
|
|
174
|
+
|
|
175
|
+
export default TopTable;
|
package/tsconfig.json
CHANGED
|
@@ -8,5 +8,12 @@
|
|
|
8
8
|
"noEmit": false,
|
|
9
9
|
"declaration": true
|
|
10
10
|
},
|
|
11
|
-
"exclude": [
|
|
11
|
+
"exclude": [
|
|
12
|
+
"node_modules",
|
|
13
|
+
"dist",
|
|
14
|
+
"dist/**/*.d.ts",
|
|
15
|
+
"**/*.test.ts",
|
|
16
|
+
"**/*.benchmark.tsx",
|
|
17
|
+
"**/benchdata/**/*.*"
|
|
18
|
+
]
|
|
12
19
|
}
|
package/dist/TopTable.js
DELETED
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
13
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
14
|
-
if (ar || !(i in from)) {
|
|
15
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
16
|
-
ar[i] = from[i];
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
20
|
-
};
|
|
21
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
22
|
-
// Copyright 2022 The Parca Authors
|
|
23
|
-
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
24
|
-
// you may not use this file except in compliance with the License.
|
|
25
|
-
// You may obtain a copy of the License at
|
|
26
|
-
//
|
|
27
|
-
// http://www.apache.org/licenses/LICENSE-2.0
|
|
28
|
-
//
|
|
29
|
-
// Unless required by applicable law or agreed to in writing, software
|
|
30
|
-
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
31
|
-
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
32
|
-
// See the License for the specific language governing permissions and
|
|
33
|
-
// limitations under the License.
|
|
34
|
-
import React from 'react';
|
|
35
|
-
import { getLastItem, valueFormatter, isSearchMatch } from '@parca/functions';
|
|
36
|
-
import { useAppSelector, selectCompareMode, selectSearchNodeString, setSearchNodeString, useAppDispatch, } from '@parca/store';
|
|
37
|
-
import { hexifyAddress } from './utils';
|
|
38
|
-
import './TopTable.styles.css';
|
|
39
|
-
var Arrow = function (_a) {
|
|
40
|
-
var direction = _a.direction;
|
|
41
|
-
return (_jsx("svg", __assign({ className: "".concat(direction !== undefined ? 'fill-[#161616] dark:fill-[#ffffff]' : ''), fill: "#777d87", height: "10", viewBox: "0 0 11 10", width: "11", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { clipRule: "evenodd", d: "m.573997 0 5.000003 10 5-10h-9.999847z", fillRule: "evenodd" }) })));
|
|
42
|
-
};
|
|
43
|
-
var useSortableData = function (top, config) {
|
|
44
|
-
if (config === void 0) { config = {
|
|
45
|
-
key: 'cumulative',
|
|
46
|
-
direction: 'desc',
|
|
47
|
-
}; }
|
|
48
|
-
var _a = React.useState(config), sortConfig = _a[0], setSortConfig = _a[1];
|
|
49
|
-
var rawTableReport = top != null ? top.list : [];
|
|
50
|
-
var items = rawTableReport.map(function (node) {
|
|
51
|
-
var _a, _b;
|
|
52
|
-
return (__assign(__assign({}, node), {
|
|
53
|
-
// Warning: string to number can overflow
|
|
54
|
-
// https://github.com/timostamm/protobuf-ts/blob/master/MANUAL.md#bigint-support
|
|
55
|
-
diff: Number(node.diff), cumulative: Number(node.cumulative), flat: Number(node.flat), name: (_b = (_a = node.meta) === null || _a === void 0 ? void 0 : _a.function) === null || _b === void 0 ? void 0 : _b.name }));
|
|
56
|
-
});
|
|
57
|
-
var sortedItems = React.useMemo(function () {
|
|
58
|
-
if (items.length === 0)
|
|
59
|
-
return;
|
|
60
|
-
var sortableItems = __spreadArray([], items, true);
|
|
61
|
-
if (sortConfig !== null) {
|
|
62
|
-
sortableItems.sort(function (a, b) {
|
|
63
|
-
var itemA = a[sortConfig.key];
|
|
64
|
-
var itemB = b[sortConfig.key];
|
|
65
|
-
if (itemA === undefined && itemB === undefined) {
|
|
66
|
-
return 0;
|
|
67
|
-
}
|
|
68
|
-
if (itemA === undefined) {
|
|
69
|
-
return sortConfig.direction === 'asc' ? -1 : 1;
|
|
70
|
-
}
|
|
71
|
-
if (itemB === undefined) {
|
|
72
|
-
return sortConfig.direction === 'asc' ? 1 : -1;
|
|
73
|
-
}
|
|
74
|
-
if (itemA < itemB) {
|
|
75
|
-
return sortConfig.direction === 'asc' ? -1 : 1;
|
|
76
|
-
}
|
|
77
|
-
if (itemA > itemB) {
|
|
78
|
-
return sortConfig.direction === 'asc' ? 1 : -1;
|
|
79
|
-
}
|
|
80
|
-
return 0;
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
return sortableItems;
|
|
84
|
-
}, [items, sortConfig]);
|
|
85
|
-
var requestSort = function (key) {
|
|
86
|
-
var direction = 'desc';
|
|
87
|
-
if (sortConfig != null && sortConfig.key === key && sortConfig.direction === 'desc') {
|
|
88
|
-
direction = 'asc';
|
|
89
|
-
}
|
|
90
|
-
setSortConfig({ key: key, direction: direction });
|
|
91
|
-
};
|
|
92
|
-
return { items: sortedItems, requestSort: requestSort, sortConfig: sortConfig };
|
|
93
|
-
};
|
|
94
|
-
export var RowLabel = function (meta) {
|
|
95
|
-
var _a, _b, _c, _d, _e, _f;
|
|
96
|
-
if (meta === undefined)
|
|
97
|
-
return '<unknown>';
|
|
98
|
-
var mapping = "".concat(((_a = meta === null || meta === void 0 ? void 0 : meta.mapping) === null || _a === void 0 ? void 0 : _a.file) !== undefined && ((_b = meta === null || meta === void 0 ? void 0 : meta.mapping) === null || _b === void 0 ? void 0 : _b.file) !== ''
|
|
99
|
-
? "[".concat((_c = getLastItem(meta.mapping.file)) !== null && _c !== void 0 ? _c : '', "]")
|
|
100
|
-
: '');
|
|
101
|
-
if (((_d = meta.function) === null || _d === void 0 ? void 0 : _d.name) !== undefined && ((_e = meta.function) === null || _e === void 0 ? void 0 : _e.name) !== '')
|
|
102
|
-
return "".concat(mapping, " ").concat(meta.function.name);
|
|
103
|
-
var address = hexifyAddress((_f = meta.location) === null || _f === void 0 ? void 0 : _f.address);
|
|
104
|
-
var fallback = "".concat(mapping, " ").concat(address);
|
|
105
|
-
return fallback === '' ? '<unknown>' : fallback;
|
|
106
|
-
};
|
|
107
|
-
export var TopTable = function (_a) {
|
|
108
|
-
var _b, _c, _d, _e;
|
|
109
|
-
var top = _a.data, sampleUnit = _a.sampleUnit;
|
|
110
|
-
var _f = useSortableData(top), items = _f.items, requestSort = _f.requestSort, sortConfig = _f.sortConfig;
|
|
111
|
-
var currentSearchString = useAppSelector(selectSearchNodeString);
|
|
112
|
-
var compareMode = useAppSelector(selectCompareMode);
|
|
113
|
-
var dispatch = useAppDispatch();
|
|
114
|
-
var unit = sampleUnit;
|
|
115
|
-
var total = top != null ? top.list.length : 0;
|
|
116
|
-
if (total === 0)
|
|
117
|
-
return _jsx(_Fragment, { children: "Profile has no samples" });
|
|
118
|
-
var getClassNamesFor = function (name) {
|
|
119
|
-
if (sortConfig == null) {
|
|
120
|
-
return;
|
|
121
|
-
}
|
|
122
|
-
return sortConfig.key === name ? sortConfig.direction : undefined;
|
|
123
|
-
};
|
|
124
|
-
var addPlusSign = function (num) {
|
|
125
|
-
if (num.charAt(0) === '0' || num.charAt(0) === '-') {
|
|
126
|
-
return num;
|
|
127
|
-
}
|
|
128
|
-
return "+".concat(num);
|
|
129
|
-
};
|
|
130
|
-
var selectSpan = function (span) {
|
|
131
|
-
dispatch(setSearchNodeString(span.trim()));
|
|
132
|
-
};
|
|
133
|
-
return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "w-full font-robotoMono" }, { children: _jsxs("table", __assign({ className: "iciclegraph-table table-fixed text-left w-full divide-y divide-gray-200 dark:divide-gray-700", tabIndex: 1 }, { children: [_jsx("thead", __assign({ className: "bg-gray-50 dark:bg-gray-800" }, { children: _jsxs("tr", { children: [_jsxs("th", __assign({ className: "text-sm cursor-pointer pt-2 pb-2 pl-2", onClick: function () { return requestSort('name'); } }, { children: ["Name", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_b = getClassNamesFor('name')) !== null && _b !== void 0 ? _b : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('name') }) }))] })), _jsxs("th", __assign({ className: "text-right text-sm cursor-pointer pt-2 pb-2 w-[150px]", onClick: function () { return requestSort('flat'); } }, { children: ["Flat", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_c = getClassNamesFor('flat')) !== null && _c !== void 0 ? _c : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('flat') }) }))] })), _jsxs("th", __assign({ className: "text-right text-sm cursor-pointer pt-2 pb-2 pr-2 w-[150px]", onClick: function () { return requestSort('cumulative'); } }, { children: ["Cumulative", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_d = getClassNamesFor('cumulative')) !== null && _d !== void 0 ? _d : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('cumulative') }) }))] })), compareMode && (_jsxs("th", __assign({ className: "text-right text-sm cursor-pointer pt-2 pb-2 pr-2 w-[150px]", onClick: function () { return requestSort('diff'); } }, { children: ["Diff", _jsx("span", __assign({ className: "inline-block align-middle ml-2 ".concat((_e = getClassNamesFor('diff')) !== null && _e !== void 0 ? _e : '') }, { children: _jsx(Arrow, { direction: getClassNamesFor('diff') }) }))] })))] }) })), _jsx("tbody", __assign({ className: "bg-white divide-y divide-gray-200 dark:bg-gray-900 dark:divide-gray-700" }, { children: items === null || items === void 0 ? void 0 : items.map(function (report, index) {
|
|
134
|
-
var name = RowLabel(report.meta);
|
|
135
|
-
return (_jsxs("tr", __assign({ className: "hover:bg-[#62626212] dark:hover:bg-[#ffffff12] cursor-pointer", style: {
|
|
136
|
-
opacity: currentSearchString !== undefined &&
|
|
137
|
-
currentSearchString !== '' &&
|
|
138
|
-
!isSearchMatch(currentSearchString, name)
|
|
139
|
-
? 0.5
|
|
140
|
-
: 1,
|
|
141
|
-
}, onClick: function () { return selectSpan(name); } }, { children: [_jsx("td", __assign({ className: "text-xs py-1.5 pl-2" }, { children: name })), _jsx("td", __assign({ className: "text-xs py-1.5 text-right" }, { children: valueFormatter(report.flat, unit, 2) })), _jsx("td", __assign({ className: "text-xs py-1.5 text-right pr-2" }, { children: valueFormatter(report.cumulative, unit, 2) })), compareMode && (_jsx("td", __assign({ className: "text-xs py-1.5 text-right pr-2" }, { children: addPlusSign(valueFormatter(report.diff, unit, 2)) })))] }), index));
|
|
142
|
-
}) }))] })) })) }));
|
|
143
|
-
};
|
|
144
|
-
export default TopTable;
|
package/src/TopTable.tsx
DELETED
|
@@ -1,270 +0,0 @@
|
|
|
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
|
-
|
|
14
|
-
import React from 'react';
|
|
15
|
-
|
|
16
|
-
import {getLastItem, valueFormatter, isSearchMatch} from '@parca/functions';
|
|
17
|
-
import {
|
|
18
|
-
useAppSelector,
|
|
19
|
-
selectCompareMode,
|
|
20
|
-
selectSearchNodeString,
|
|
21
|
-
setSearchNodeString,
|
|
22
|
-
useAppDispatch,
|
|
23
|
-
} from '@parca/store';
|
|
24
|
-
import {TopNode, TopNodeMeta, Top} from '@parca/client';
|
|
25
|
-
|
|
26
|
-
import {hexifyAddress} from './utils';
|
|
27
|
-
|
|
28
|
-
import './TopTable.styles.css';
|
|
29
|
-
|
|
30
|
-
interface TopTableProps {
|
|
31
|
-
data?: Top;
|
|
32
|
-
sampleUnit: string;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
const Arrow = ({direction}: {direction: string | undefined}): JSX.Element => {
|
|
36
|
-
return (
|
|
37
|
-
<svg
|
|
38
|
-
className={`${direction !== undefined ? 'fill-[#161616] dark:fill-[#ffffff]' : ''}`}
|
|
39
|
-
fill="#777d87"
|
|
40
|
-
height="10"
|
|
41
|
-
viewBox="0 0 11 10"
|
|
42
|
-
width="11"
|
|
43
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
44
|
-
>
|
|
45
|
-
<path clipRule="evenodd" d="m.573997 0 5.000003 10 5-10h-9.999847z" fillRule="evenodd" />
|
|
46
|
-
</svg>
|
|
47
|
-
);
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
const useSortableData = (
|
|
51
|
-
top?: Top,
|
|
52
|
-
config: {key: keyof TopNode | 'name'; direction: 'asc' | 'desc'} = {
|
|
53
|
-
key: 'cumulative',
|
|
54
|
-
direction: 'desc',
|
|
55
|
-
}
|
|
56
|
-
): {
|
|
57
|
-
items:
|
|
58
|
-
| Array<{
|
|
59
|
-
diff: number;
|
|
60
|
-
cumulative: number;
|
|
61
|
-
flat: number;
|
|
62
|
-
name: string | undefined;
|
|
63
|
-
meta?: TopNodeMeta | undefined;
|
|
64
|
-
}>
|
|
65
|
-
| undefined;
|
|
66
|
-
requestSort: (key: keyof TopNode | 'name') => void;
|
|
67
|
-
sortConfig: {key: keyof TopNode | 'name'; direction: string} | null;
|
|
68
|
-
} => {
|
|
69
|
-
const [sortConfig, setSortConfig] = React.useState<{
|
|
70
|
-
key: keyof TopNode | 'name';
|
|
71
|
-
direction: string;
|
|
72
|
-
} | null>(config);
|
|
73
|
-
|
|
74
|
-
const rawTableReport = top != null ? top.list : [];
|
|
75
|
-
|
|
76
|
-
const items = rawTableReport.map(node => ({
|
|
77
|
-
...node,
|
|
78
|
-
// Warning: string to number can overflow
|
|
79
|
-
// https://github.com/timostamm/protobuf-ts/blob/master/MANUAL.md#bigint-support
|
|
80
|
-
diff: Number(node.diff),
|
|
81
|
-
cumulative: Number(node.cumulative),
|
|
82
|
-
flat: Number(node.flat),
|
|
83
|
-
name: node.meta?.function?.name,
|
|
84
|
-
}));
|
|
85
|
-
|
|
86
|
-
const sortedItems = React.useMemo(() => {
|
|
87
|
-
if (items.length === 0) return;
|
|
88
|
-
|
|
89
|
-
const sortableItems = [...items];
|
|
90
|
-
if (sortConfig !== null) {
|
|
91
|
-
sortableItems.sort((a, b) => {
|
|
92
|
-
const itemA = a[sortConfig.key];
|
|
93
|
-
const itemB = b[sortConfig.key];
|
|
94
|
-
if (itemA === undefined && itemB === undefined) {
|
|
95
|
-
return 0;
|
|
96
|
-
}
|
|
97
|
-
if (itemA === undefined) {
|
|
98
|
-
return sortConfig.direction === 'asc' ? -1 : 1;
|
|
99
|
-
}
|
|
100
|
-
if (itemB === undefined) {
|
|
101
|
-
return sortConfig.direction === 'asc' ? 1 : -1;
|
|
102
|
-
}
|
|
103
|
-
if (itemA < itemB) {
|
|
104
|
-
return sortConfig.direction === 'asc' ? -1 : 1;
|
|
105
|
-
}
|
|
106
|
-
if (itemA > itemB) {
|
|
107
|
-
return sortConfig.direction === 'asc' ? 1 : -1;
|
|
108
|
-
}
|
|
109
|
-
return 0;
|
|
110
|
-
});
|
|
111
|
-
}
|
|
112
|
-
return sortableItems;
|
|
113
|
-
}, [items, sortConfig]);
|
|
114
|
-
|
|
115
|
-
const requestSort = (key: keyof TopNode | 'name'): void => {
|
|
116
|
-
let direction = 'desc';
|
|
117
|
-
if (sortConfig != null && sortConfig.key === key && sortConfig.direction === 'desc') {
|
|
118
|
-
direction = 'asc';
|
|
119
|
-
}
|
|
120
|
-
setSortConfig({key, direction});
|
|
121
|
-
};
|
|
122
|
-
|
|
123
|
-
return {items: sortedItems, requestSort, sortConfig};
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
export const RowLabel = (meta: TopNodeMeta | undefined): string => {
|
|
127
|
-
if (meta === undefined) return '<unknown>';
|
|
128
|
-
const mapping = `${
|
|
129
|
-
meta?.mapping?.file !== undefined && meta?.mapping?.file !== ''
|
|
130
|
-
? `[${getLastItem(meta.mapping.file) ?? ''}]`
|
|
131
|
-
: ''
|
|
132
|
-
}`;
|
|
133
|
-
if (meta.function?.name !== undefined && meta.function?.name !== '')
|
|
134
|
-
return `${mapping} ${meta.function.name}`;
|
|
135
|
-
|
|
136
|
-
const address = hexifyAddress(meta.location?.address);
|
|
137
|
-
const fallback = `${mapping} ${address}`;
|
|
138
|
-
|
|
139
|
-
return fallback === '' ? '<unknown>' : fallback;
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
export const TopTable = ({data: top, sampleUnit}: TopTableProps): JSX.Element => {
|
|
143
|
-
const {items, requestSort, sortConfig} = useSortableData(top);
|
|
144
|
-
const currentSearchString = useAppSelector(selectSearchNodeString);
|
|
145
|
-
const compareMode = useAppSelector(selectCompareMode);
|
|
146
|
-
const dispatch = useAppDispatch();
|
|
147
|
-
|
|
148
|
-
const unit = sampleUnit;
|
|
149
|
-
|
|
150
|
-
const total = top != null ? top.list.length : 0;
|
|
151
|
-
if (total === 0) return <>Profile has no samples</>;
|
|
152
|
-
|
|
153
|
-
const getClassNamesFor = (name: string): string | undefined => {
|
|
154
|
-
if (sortConfig == null) {
|
|
155
|
-
return;
|
|
156
|
-
}
|
|
157
|
-
return sortConfig.key === name ? sortConfig.direction : undefined;
|
|
158
|
-
};
|
|
159
|
-
|
|
160
|
-
const addPlusSign = (num: string): string => {
|
|
161
|
-
if (num.charAt(0) === '0' || num.charAt(0) === '-') {
|
|
162
|
-
return num;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
return `+${num}`;
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
const selectSpan = (span: string): void => {
|
|
169
|
-
dispatch(setSearchNodeString(span.trim()));
|
|
170
|
-
};
|
|
171
|
-
|
|
172
|
-
return (
|
|
173
|
-
<>
|
|
174
|
-
<div className="w-full font-robotoMono">
|
|
175
|
-
<table
|
|
176
|
-
className="iciclegraph-table table-fixed text-left w-full divide-y divide-gray-200 dark:divide-gray-700"
|
|
177
|
-
tabIndex={1}
|
|
178
|
-
>
|
|
179
|
-
<thead className="bg-gray-50 dark:bg-gray-800">
|
|
180
|
-
<tr>
|
|
181
|
-
<th
|
|
182
|
-
className="text-sm cursor-pointer pt-2 pb-2 pl-2"
|
|
183
|
-
onClick={() => requestSort('name')}
|
|
184
|
-
>
|
|
185
|
-
Name
|
|
186
|
-
<span
|
|
187
|
-
className={`inline-block align-middle ml-2 ${getClassNamesFor('name') ?? ''}`}
|
|
188
|
-
>
|
|
189
|
-
<Arrow direction={getClassNamesFor('name')} />
|
|
190
|
-
</span>
|
|
191
|
-
</th>
|
|
192
|
-
<th
|
|
193
|
-
className="text-right text-sm cursor-pointer pt-2 pb-2 w-[150px]"
|
|
194
|
-
onClick={() => requestSort('flat')}
|
|
195
|
-
>
|
|
196
|
-
Flat
|
|
197
|
-
<span
|
|
198
|
-
className={`inline-block align-middle ml-2 ${getClassNamesFor('flat') ?? ''}`}
|
|
199
|
-
>
|
|
200
|
-
<Arrow direction={getClassNamesFor('flat')} />
|
|
201
|
-
</span>
|
|
202
|
-
</th>
|
|
203
|
-
<th
|
|
204
|
-
className="text-right text-sm cursor-pointer pt-2 pb-2 pr-2 w-[150px]"
|
|
205
|
-
onClick={() => requestSort('cumulative')}
|
|
206
|
-
>
|
|
207
|
-
Cumulative
|
|
208
|
-
<span
|
|
209
|
-
className={`inline-block align-middle ml-2 ${
|
|
210
|
-
getClassNamesFor('cumulative') ?? ''
|
|
211
|
-
}`}
|
|
212
|
-
>
|
|
213
|
-
<Arrow direction={getClassNamesFor('cumulative')} />
|
|
214
|
-
</span>
|
|
215
|
-
</th>
|
|
216
|
-
{compareMode && (
|
|
217
|
-
<th
|
|
218
|
-
className="text-right text-sm cursor-pointer pt-2 pb-2 pr-2 w-[150px]"
|
|
219
|
-
onClick={() => requestSort('diff')}
|
|
220
|
-
>
|
|
221
|
-
Diff
|
|
222
|
-
<span
|
|
223
|
-
className={`inline-block align-middle ml-2 ${getClassNamesFor('diff') ?? ''}`}
|
|
224
|
-
>
|
|
225
|
-
<Arrow direction={getClassNamesFor('diff')} />
|
|
226
|
-
</span>
|
|
227
|
-
</th>
|
|
228
|
-
)}
|
|
229
|
-
</tr>
|
|
230
|
-
</thead>
|
|
231
|
-
<tbody className="bg-white divide-y divide-gray-200 dark:bg-gray-900 dark:divide-gray-700">
|
|
232
|
-
{items?.map((report, index) => {
|
|
233
|
-
const name = RowLabel(report.meta);
|
|
234
|
-
return (
|
|
235
|
-
<tr
|
|
236
|
-
key={index}
|
|
237
|
-
className="hover:bg-[#62626212] dark:hover:bg-[#ffffff12] cursor-pointer"
|
|
238
|
-
style={{
|
|
239
|
-
opacity:
|
|
240
|
-
currentSearchString !== undefined &&
|
|
241
|
-
currentSearchString !== '' &&
|
|
242
|
-
!isSearchMatch(currentSearchString, name)
|
|
243
|
-
? 0.5
|
|
244
|
-
: 1,
|
|
245
|
-
}}
|
|
246
|
-
onClick={() => selectSpan(name)}
|
|
247
|
-
>
|
|
248
|
-
<td className="text-xs py-1.5 pl-2">{name}</td>
|
|
249
|
-
<td className="text-xs py-1.5 text-right">
|
|
250
|
-
{valueFormatter(report.flat, unit, 2)}
|
|
251
|
-
</td>
|
|
252
|
-
<td className="text-xs py-1.5 text-right pr-2">
|
|
253
|
-
{valueFormatter(report.cumulative, unit, 2)}
|
|
254
|
-
</td>
|
|
255
|
-
{compareMode && (
|
|
256
|
-
<td className="text-xs py-1.5 text-right pr-2">
|
|
257
|
-
{addPlusSign(valueFormatter(report.diff, unit, 2))}
|
|
258
|
-
</td>
|
|
259
|
-
)}
|
|
260
|
-
</tr>
|
|
261
|
-
);
|
|
262
|
-
})}
|
|
263
|
-
</tbody>
|
|
264
|
-
</table>
|
|
265
|
-
</div>
|
|
266
|
-
</>
|
|
267
|
-
);
|
|
268
|
-
};
|
|
269
|
-
|
|
270
|
-
export default TopTable;
|