@parca/profile 0.16.78 → 0.16.79
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
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.79](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.78...@parca/profile@0.16.79) (2022-12-07)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @parca/profile
|
|
9
|
+
|
|
6
10
|
## [0.16.78](https://github.com/parca-dev/parca/compare/@parca/profile@0.16.77...@parca/profile@0.16.78) (2022-12-06)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @parca/profile
|
|
@@ -13,14 +13,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
13
13
|
// limitations under the License.
|
|
14
14
|
import { Input } from '@parca/components';
|
|
15
15
|
import { selectFilterByFunction, setFilterByFunction, useAppDispatch, useAppSelector, } from '@parca/store';
|
|
16
|
-
import {
|
|
16
|
+
import { Icon } from '@iconify/react';
|
|
17
|
+
import { useCallback, useMemo, useState } from 'react';
|
|
17
18
|
var FilterByFunctionButton = function () {
|
|
18
19
|
var dispatch = useAppDispatch();
|
|
19
20
|
var storeVal = useAppSelector(selectFilterByFunction);
|
|
20
21
|
var _a = useState(storeVal !== null && storeVal !== void 0 ? storeVal : ''), value = _a[0], setValue = _a[1];
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
};
|
|
24
|
-
|
|
22
|
+
var isClearAction = useMemo(function () {
|
|
23
|
+
return value === storeVal && value != null;
|
|
24
|
+
}, [value, storeVal]);
|
|
25
|
+
var onAction = useCallback(function () {
|
|
26
|
+
dispatch(setFilterByFunction(isClearAction ? undefined : value));
|
|
27
|
+
if (isClearAction) {
|
|
28
|
+
setValue('');
|
|
29
|
+
}
|
|
30
|
+
}, [dispatch, isClearAction, value]);
|
|
31
|
+
return (_jsx(Input, { placeholder: "Filter by function", className: "text-sm", onAction: onAction, onChange: function (e) { return setValue(e.target.value); }, value: value, onBlur: function () { return setValue(storeVal !== null && storeVal !== void 0 ? storeVal : ''); }, actionIcon: isClearAction ? _jsx(Icon, { icon: "ep:circle-close" }) : _jsx(Icon, { icon: "ep:arrow-right" }) }));
|
|
25
32
|
};
|
|
26
33
|
export default FilterByFunctionButton;
|
|
@@ -26,9 +26,9 @@ import { Profiler, useEffect, useMemo, useState } from 'react';
|
|
|
26
26
|
import { scaleLinear } from 'd3';
|
|
27
27
|
import { getNewSpanColor, parseParams } from '@parca/functions';
|
|
28
28
|
import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
|
|
29
|
-
import { Button, Card,
|
|
29
|
+
import { Button, Card, useParcaContext } from '@parca/components';
|
|
30
30
|
import { useContainerDimensions } from '@parca/dynamicsize';
|
|
31
|
-
import { useAppSelector, selectDarkMode, selectSearchNodeString } from '@parca/store';
|
|
31
|
+
import { useAppSelector, selectDarkMode, selectSearchNodeString, selectFilterByFunction, useAppDispatch, setSearchNodeString, } from '@parca/store';
|
|
32
32
|
import { Callgraph } from '../';
|
|
33
33
|
import ProfileShareButton from '../components/ProfileShareButton';
|
|
34
34
|
import FilterByFunctionButton from './FilterByFunctionButton';
|
|
@@ -58,13 +58,15 @@ export var useProfileVisState = function () {
|
|
|
58
58
|
};
|
|
59
59
|
export var ProfileView = function (_a) {
|
|
60
60
|
var flamegraphData = _a.flamegraphData, topTableData = _a.topTableData, callgraphData = _a.callgraphData, sampleUnit = _a.sampleUnit, profileSource = _a.profileSource, queryClient = _a.queryClient, navigateTo = _a.navigateTo, profileVisState = _a.profileVisState, onDownloadPProf = _a.onDownloadPProf;
|
|
61
|
+
var dispatch = useAppDispatch();
|
|
61
62
|
var _b = useContainerDimensions(), ref = _b.ref, dimensions = _b.dimensions;
|
|
62
63
|
var _c = useState([]), curPath = _c[0], setCurPath = _c[1];
|
|
63
64
|
var currentView = profileVisState.currentView, setCurrentView = profileVisState.setCurrentView;
|
|
64
65
|
var isDarkMode = useAppSelector(selectDarkMode);
|
|
65
66
|
var currentSearchString = useAppSelector(selectSearchNodeString);
|
|
67
|
+
var filterByFunctionString = useAppSelector(selectFilterByFunction);
|
|
66
68
|
var callgraphEnabled = useUIFeatureFlag('callgraph')[0];
|
|
67
|
-
var
|
|
69
|
+
var highlightAfterFilteringEnabled = useUIFeatureFlag('highlightAfterFiltering')[0];
|
|
68
70
|
var _d = useParcaContext(), loader = _d.loader, perf = _d.perf;
|
|
69
71
|
useEffect(function () {
|
|
70
72
|
// Reset the current path when the profile source changes
|
|
@@ -85,6 +87,27 @@ export var ProfileView = function (_a) {
|
|
|
85
87
|
}
|
|
86
88
|
return false;
|
|
87
89
|
}, [currentView, callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.loading, flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.loading, topTableData === null || topTableData === void 0 ? void 0 : topTableData.loading]);
|
|
90
|
+
useEffect(function () {
|
|
91
|
+
if (!highlightAfterFilteringEnabled) {
|
|
92
|
+
if (currentSearchString !== undefined && currentSearchString !== '') {
|
|
93
|
+
dispatch(setSearchNodeString(''));
|
|
94
|
+
}
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
if (isLoading) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
if (filterByFunctionString === currentSearchString) {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
dispatch(setSearchNodeString(filterByFunctionString));
|
|
104
|
+
}, [
|
|
105
|
+
isLoading,
|
|
106
|
+
filterByFunctionString,
|
|
107
|
+
dispatch,
|
|
108
|
+
highlightAfterFilteringEnabled,
|
|
109
|
+
currentSearchString,
|
|
110
|
+
]);
|
|
88
111
|
var isLoaderVisible = useDelayedLoader(isLoading);
|
|
89
112
|
if (isLoaderVisible) {
|
|
90
113
|
return _jsx(_Fragment, { children: loader });
|
|
@@ -117,5 +140,5 @@ export var ProfileView = function (_a) {
|
|
|
117
140
|
return (_jsx(_Fragment, { children: _jsx("div", __assign({ className: "py-3" }, { children: _jsx(Card, { children: _jsxs(Card.Body, { children: [_jsxs("div", __assign({ className: "flex py-3 w-full" }, { children: [_jsxs("div", __assign({ className: "w-2/5 flex space-x-4" }, { children: [_jsxs("div", __assign({ className: "flex space-x-1" }, { children: [profileSource != null && queryClient != null ? (_jsx(ProfileShareButton, { queryRequest: profileSource.QueryRequest(), queryClient: queryClient })) : null, _jsx(Button, __assign({ color: "neutral", onClick: function (e) {
|
|
118
141
|
e.preventDefault();
|
|
119
142
|
onDownloadPProf();
|
|
120
|
-
} }, { children: "Download pprof" }))] })),
|
|
143
|
+
} }, { children: "Download pprof" }))] })), _jsx(FilterByFunctionButton, {})] })), _jsxs("div", __assign({ className: "flex ml-auto gap-2" }, { children: [_jsx(Button, __assign({ color: "neutral", onClick: resetIcicleGraph, disabled: curPath.length === 0, className: "whitespace-nowrap text-ellipsis" }, { children: "Reset View" })), callgraphEnabled ? (_jsx(Button, __assign({ variant: "".concat(currentView === 'callgraph' ? 'primary' : 'neutral'), onClick: function () { return switchProfileView('callgraph'); }, className: "whitespace-nowrap text-ellipsis" }, { children: "Callgraph" }))) : null, _jsxs("div", __assign({ className: "flex" }, { children: [_jsx(Button, __assign({ variant: "".concat(currentView === 'table' ? 'primary' : 'neutral'), className: "items-center rounded-tr-none rounded-br-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('table'); } }, { children: "Table" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'both' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none border-l-0 border-r-0 w-auto px-8 whitespace-nowrap no-outline-on-buttons text-ellipsis", onClick: function () { return switchProfileView('both'); } }, { children: "Both" })), _jsx(Button, __assign({ variant: "".concat(currentView === 'icicle' ? 'primary' : 'neutral'), className: "items-center rounded-tl-none rounded-bl-none w-auto px-8 whitespace-nowrap text-ellipsis no-outline-on-buttons", onClick: function () { return switchProfileView('icicle'); } }, { children: "Icicle Graph" }))] }))] }))] })), _jsxs("div", __assign({ ref: ref, className: "flex space-x-4 justify-between w-full" }, { children: [currentView === 'icicle' && (flamegraphData === null || flamegraphData === void 0 ? void 0 : flamegraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(Profiler, __assign({ id: "icicleGraph", onRender: perf === null || perf === void 0 ? void 0 : perf.onRender }, { children: _jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit }) })) }))), currentView === 'callgraph' && (callgraphData === null || callgraphData === void 0 ? void 0 : callgraphData.data) != null && (_jsx("div", __assign({ className: "w-full" }, { children: (dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== undefined && (_jsx(Callgraph, { graph: callgraphData.data, sampleUnit: sampleUnit, width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, colorRange: colorRange })) }))), currentView === 'table' && topTableData != null && (_jsx("div", __assign({ className: "w-full" }, { children: _jsx(TopTable, { data: topTableData.data, sampleUnit: sampleUnit }) }))), currentView === 'both' && (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: "w-1/2" }, { children: _jsx(TopTable, { data: topTableData === null || topTableData === void 0 ? void 0 : topTableData.data, sampleUnit: sampleUnit }) })), _jsx("div", __assign({ className: "w-1/2" }, { children: flamegraphData != null && (_jsx(ProfileIcicleGraph, { curPath: curPath, setNewCurPath: setNewCurPath, graph: flamegraphData.data, sampleUnit: sampleUnit })) }))] }))] }))] }) }) })) }));
|
|
121
144
|
};
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@parca/profile",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.79",
|
|
4
4
|
"description": "Profile viewing libraries",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@parca/client": "^0.16.57",
|
|
7
|
-
"@parca/components": "^0.16.
|
|
7
|
+
"@parca/components": "^0.16.69",
|
|
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": "0dd3c9d9932a54c9d2ee031610f1c4645b9038dc"
|
|
46
46
|
}
|
|
@@ -18,16 +18,24 @@ import {
|
|
|
18
18
|
useAppDispatch,
|
|
19
19
|
useAppSelector,
|
|
20
20
|
} from '@parca/store';
|
|
21
|
-
import {
|
|
21
|
+
import {Icon} from '@iconify/react';
|
|
22
|
+
import {useCallback, useMemo, useState} from 'react';
|
|
22
23
|
|
|
23
24
|
const FilterByFunctionButton = (): JSX.Element => {
|
|
24
25
|
const dispatch = useAppDispatch();
|
|
25
26
|
const storeVal = useAppSelector(selectFilterByFunction);
|
|
26
27
|
const [value, setValue] = useState<string>(storeVal ?? '');
|
|
27
28
|
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
};
|
|
29
|
+
const isClearAction = useMemo(() => {
|
|
30
|
+
return value === storeVal && value != null;
|
|
31
|
+
}, [value, storeVal]);
|
|
32
|
+
|
|
33
|
+
const onAction = useCallback((): void => {
|
|
34
|
+
dispatch(setFilterByFunction(isClearAction ? undefined : value));
|
|
35
|
+
if (isClearAction) {
|
|
36
|
+
setValue('');
|
|
37
|
+
}
|
|
38
|
+
}, [dispatch, isClearAction, value]);
|
|
31
39
|
|
|
32
40
|
return (
|
|
33
41
|
<Input
|
|
@@ -37,6 +45,7 @@ const FilterByFunctionButton = (): JSX.Element => {
|
|
|
37
45
|
onChange={e => setValue(e.target.value)}
|
|
38
46
|
value={value}
|
|
39
47
|
onBlur={() => setValue(storeVal ?? '')}
|
|
48
|
+
actionIcon={isClearAction ? <Icon icon="ep:circle-close" /> : <Icon icon="ep:arrow-right" />}
|
|
40
49
|
/>
|
|
41
50
|
);
|
|
42
51
|
};
|
|
@@ -17,9 +17,16 @@ import {scaleLinear} from 'd3';
|
|
|
17
17
|
import {getNewSpanColor, parseParams} from '@parca/functions';
|
|
18
18
|
import useUIFeatureFlag from '@parca/functions/useUIFeatureFlag';
|
|
19
19
|
import {QueryServiceClient, Flamegraph, Top, Callgraph as CallgraphType} from '@parca/client';
|
|
20
|
-
import {Button, Card,
|
|
20
|
+
import {Button, Card, useParcaContext} from '@parca/components';
|
|
21
21
|
import {useContainerDimensions} from '@parca/dynamicsize';
|
|
22
|
-
import {
|
|
22
|
+
import {
|
|
23
|
+
useAppSelector,
|
|
24
|
+
selectDarkMode,
|
|
25
|
+
selectSearchNodeString,
|
|
26
|
+
selectFilterByFunction,
|
|
27
|
+
useAppDispatch,
|
|
28
|
+
setSearchNodeString,
|
|
29
|
+
} from '@parca/store';
|
|
23
30
|
|
|
24
31
|
import {Callgraph} from '../';
|
|
25
32
|
import ProfileShareButton from '../components/ProfileShareButton';
|
|
@@ -107,14 +114,16 @@ export const ProfileView = ({
|
|
|
107
114
|
profileVisState,
|
|
108
115
|
onDownloadPProf,
|
|
109
116
|
}: ProfileViewProps): JSX.Element => {
|
|
117
|
+
const dispatch = useAppDispatch();
|
|
110
118
|
const {ref, dimensions} = useContainerDimensions();
|
|
111
119
|
const [curPath, setCurPath] = useState<string[]>([]);
|
|
112
120
|
const {currentView, setCurrentView} = profileVisState;
|
|
113
121
|
const isDarkMode = useAppSelector(selectDarkMode);
|
|
114
122
|
const currentSearchString = useAppSelector(selectSearchNodeString);
|
|
123
|
+
const filterByFunctionString = useAppSelector(selectFilterByFunction);
|
|
115
124
|
|
|
116
125
|
const [callgraphEnabled] = useUIFeatureFlag('callgraph');
|
|
117
|
-
const [
|
|
126
|
+
const [highlightAfterFilteringEnabled] = useUIFeatureFlag('highlightAfterFiltering');
|
|
118
127
|
|
|
119
128
|
const {loader, perf} = useParcaContext();
|
|
120
129
|
|
|
@@ -139,6 +148,28 @@ export const ProfileView = ({
|
|
|
139
148
|
return false;
|
|
140
149
|
}, [currentView, callgraphData?.loading, flamegraphData?.loading, topTableData?.loading]);
|
|
141
150
|
|
|
151
|
+
useEffect(() => {
|
|
152
|
+
if (!highlightAfterFilteringEnabled) {
|
|
153
|
+
if (currentSearchString !== undefined && currentSearchString !== '') {
|
|
154
|
+
dispatch(setSearchNodeString(''));
|
|
155
|
+
}
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
if (isLoading) {
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
161
|
+
if (filterByFunctionString === currentSearchString) {
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
dispatch(setSearchNodeString(filterByFunctionString));
|
|
165
|
+
}, [
|
|
166
|
+
isLoading,
|
|
167
|
+
filterByFunctionString,
|
|
168
|
+
dispatch,
|
|
169
|
+
highlightAfterFilteringEnabled,
|
|
170
|
+
currentSearchString,
|
|
171
|
+
]);
|
|
172
|
+
|
|
142
173
|
const isLoaderVisible = useDelayedLoader(isLoading);
|
|
143
174
|
|
|
144
175
|
if (isLoaderVisible) {
|
|
@@ -210,11 +241,10 @@ export const ProfileView = ({
|
|
|
210
241
|
Download pprof
|
|
211
242
|
</Button>
|
|
212
243
|
</div>
|
|
213
|
-
|
|
244
|
+
<FilterByFunctionButton />
|
|
214
245
|
</div>
|
|
215
246
|
|
|
216
247
|
<div className="flex ml-auto gap-2">
|
|
217
|
-
{filterByFunctionEnabled ? <SearchNodes /> : null}
|
|
218
248
|
<Button
|
|
219
249
|
color="neutral"
|
|
220
250
|
onClick={resetIcicleGraph}
|