@parca/profile 0.16.0 → 0.16.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/CHANGELOG.md +52 -25
  2. package/dist/Callgraph/Edge/index.d.ts +23 -0
  3. package/dist/Callgraph/Edge/index.js +30 -0
  4. package/dist/Callgraph/Node/index.d.ts +20 -0
  5. package/dist/Callgraph/Node/index.js +37 -0
  6. package/dist/Callgraph/index.d.ts +9 -0
  7. package/dist/Callgraph/index.js +137 -0
  8. package/dist/Callgraph/mockData/index.d.ts +148 -0
  9. package/dist/Callgraph/mockData/index.js +577 -0
  10. package/dist/Callgraph/utils.d.ts +19 -0
  11. package/dist/Callgraph/utils.js +82 -0
  12. package/dist/GraphTooltip/index.d.ts +20 -0
  13. package/dist/GraphTooltip/index.js +155 -0
  14. package/dist/IcicleGraph.d.ts +36 -0
  15. package/dist/IcicleGraph.js +158 -0
  16. package/dist/MatchersInput/index.d.ts +24 -0
  17. package/dist/MatchersInput/index.js +479 -0
  18. package/dist/MetricsCircle/index.d.ts +8 -0
  19. package/dist/MetricsCircle/index.js +18 -0
  20. package/dist/MetricsGraph/index.d.ts +36 -0
  21. package/dist/MetricsGraph/index.js +327 -0
  22. package/dist/MetricsSeries/index.d.ts +12 -0
  23. package/dist/MetricsSeries/index.js +21 -0
  24. package/dist/ProfileExplorer/ProfileExplorerCompare.d.ts +20 -0
  25. package/dist/ProfileExplorer/ProfileExplorerCompare.js +38 -0
  26. package/dist/ProfileExplorer/ProfileExplorerSingle.d.ts +16 -0
  27. package/dist/ProfileExplorer/ProfileExplorerSingle.js +19 -0
  28. package/dist/ProfileExplorer/index.d.ts +10 -0
  29. package/dist/ProfileExplorer/index.js +203 -0
  30. package/dist/ProfileIcicleGraph.d.ts +11 -0
  31. package/dist/ProfileIcicleGraph.js +28 -0
  32. package/dist/ProfileMetricsGraph/index.d.ts +23 -0
  33. package/dist/ProfileMetricsGraph/index.js +127 -0
  34. package/dist/ProfileSVG.module.css +3 -0
  35. package/dist/ProfileSelector/CompareButton.d.ts +6 -0
  36. package/dist/ProfileSelector/CompareButton.js +41 -0
  37. package/dist/ProfileSelector/MergeButton.d.ts +6 -0
  38. package/dist/ProfileSelector/MergeButton.js +41 -0
  39. package/dist/ProfileSelector/index.d.ts +30 -0
  40. package/dist/ProfileSelector/index.js +133 -0
  41. package/dist/ProfileSource.d.ts +89 -0
  42. package/dist/ProfileSource.js +239 -0
  43. package/dist/ProfileTypeSelector/index.d.ts +21 -0
  44. package/dist/ProfileTypeSelector/index.js +138 -0
  45. package/dist/ProfileView.d.ts +40 -0
  46. package/dist/ProfileView.js +111 -0
  47. package/dist/ProfileView.styles.css +3 -0
  48. package/dist/ProfileViewWithData.d.ts +12 -0
  49. package/dist/ProfileViewWithData.js +116 -0
  50. package/dist/TopTable.d.ts +10 -0
  51. package/dist/TopTable.js +140 -0
  52. package/dist/TopTable.styles.css +7 -0
  53. package/dist/components/DiffLegend.d.ts +3 -0
  54. package/dist/components/DiffLegend.js +62 -0
  55. package/dist/components/ProfileShareButton/ResultBox.d.ts +7 -0
  56. package/dist/components/ProfileShareButton/ResultBox.js +46 -0
  57. package/dist/components/ProfileShareButton/index.d.ts +8 -0
  58. package/dist/components/ProfileShareButton/index.js +119 -0
  59. package/dist/index.d.ts +13 -0
  60. package/dist/index.js +64 -0
  61. package/dist/stories/ProfileTypeSelector.stories.d.ts +5 -0
  62. package/dist/stories/ProfileTypeSelector.stories.js +77 -0
  63. package/dist/stories/ProfileView.stories.d.ts +5 -0
  64. package/dist/stories/ProfileView.stories.js +22 -0
  65. package/dist/stories/mockdata/flamegraphData.json +7960 -0
  66. package/dist/styles.css +1 -0
  67. package/dist/useDelayedLoader.d.ts +5 -0
  68. package/dist/useDelayedLoader.js +33 -0
  69. package/dist/useQuery.d.ts +13 -0
  70. package/dist/useQuery.js +41 -0
  71. package/dist/utils.d.ts +4 -0
  72. package/dist/utils.js +83 -0
  73. package/package.json +13 -8
  74. package/src/Callgraph/Edge/index.tsx +59 -0
  75. package/src/Callgraph/Node/index.tsx +66 -0
  76. package/src/Callgraph/index.tsx +169 -0
  77. package/src/Callgraph/mockData/index.ts +605 -0
  78. package/src/Callgraph/utils.ts +116 -0
  79. package/src/GraphTooltip/index.tsx +340 -0
  80. package/src/IcicleGraph.tsx +28 -8
  81. package/src/MatchersInput/index.tsx +698 -0
  82. package/src/MetricsCircle/index.tsx +28 -0
  83. package/src/MetricsGraph/index.tsx +589 -0
  84. package/src/MetricsSeries/index.tsx +38 -0
  85. package/src/ProfileExplorer/ProfileExplorerCompare.tsx +109 -0
  86. package/src/ProfileExplorer/ProfileExplorerSingle.tsx +72 -0
  87. package/src/ProfileExplorer/index.tsx +377 -0
  88. package/src/ProfileMetricsGraph/index.tsx +143 -0
  89. package/src/ProfileSelector/CompareButton.tsx +72 -0
  90. package/src/ProfileSelector/MergeButton.tsx +72 -0
  91. package/src/ProfileSelector/index.tsx +270 -0
  92. package/src/ProfileTypeSelector/index.tsx +180 -0
  93. package/src/ProfileView.tsx +2 -7
  94. package/src/index.tsx +11 -0
  95. package/src/useQuery.tsx +1 -0
  96. package/tailwind.config.js +8 -0
  97. package/tsconfig.json +7 -3
  98. package/typings.d.ts +14 -0
package/CHANGELOG.md CHANGED
@@ -3,97 +3,124 @@
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.0](https://github.com/parca-dev/parca/compare/ui-v0.15.26...ui-v0.16.0) (2022-09-13)
6
+ ## [0.16.43](https://github.com/parca-dev/parca/compare/ui-v0.16.42...ui-v0.16.43) (2022-10-13)
7
7
 
8
8
  **Note:** Version bump only for package @parca/profile
9
9
 
10
+ ## [0.16.42](https://github.com/parca-dev/parca/compare/ui-v0.16.41...ui-v0.16.42) (2022-10-13)
10
11
 
12
+ **Note:** Version bump only for package @parca/profile
11
13
 
14
+ ## [0.16.40](https://github.com/parca-dev/parca/compare/ui-v0.16.39...ui-v0.16.40) (2022-10-10)
12
15
 
16
+ **Note:** Version bump only for package @parca/profile
13
17
 
14
- ## [0.15.25](https://github.com/parca-dev/parca/compare/ui-v0.15.24...ui-v0.15.25) (2022-09-13)
18
+ ## [0.16.39](https://github.com/parca-dev/parca/compare/ui-v0.16.38...ui-v0.16.39) (2022-10-10)
15
19
 
16
20
  **Note:** Version bump only for package @parca/profile
17
21
 
22
+ ## [0.16.38](https://github.com/parca-dev/parca/compare/ui-v0.16.37...ui-v0.16.38) (2022-10-10)
18
23
 
24
+ ## [0.16.32](https://github.com/parca-dev/parca/compare/ui-v0.16.30...ui-v0.16.32) (2022-10-06)
19
25
 
26
+ ## [0.16.30](https://github.com/parca-dev/parca/compare/ui-v0.16.27...ui-v0.16.30) (2022-10-01)
20
27
 
28
+ ## 0.16.27 (2022-09-29)
21
29
 
22
- ## [0.15.24](https://github.com/parca-dev/parca/compare/ui-v0.15.23...ui-v0.15.24) (2022-09-13)
23
-
30
+ **Note:** Version bump only for package @parca/profile
24
31
 
32
+ ## [0.16.32](https://github.com/parca-dev/parca/compare/ui-v0.16.31...ui-v0.16.32) (2022-10-06)
25
33
 
26
- ## [0.15.19](https://github.com/parca-dev/parca/compare/ui-v0.15.17...ui-v0.15.19) (2022-09-08)
34
+ **Note:** Version bump only for package @parca/profile
27
35
 
36
+ ## [0.16.28](https://github.com/parca-dev/parca/compare/ui-v0.16.27...ui-v0.16.28) (2022-09-30)
28
37
 
38
+ **Note:** Version bump only for package @parca/profile
29
39
 
30
- ## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.17) (2022-09-07)
40
+ ## [0.16.24](https://github.com/parca-dev/parca/compare/ui-v0.16.23...ui-v0.16.24) (2022-09-27)
31
41
 
42
+ ## [0.16.20](https://github.com/parca-dev/parca/compare/ui-v0.16.19...ui-v0.16.20) (2022-09-27)
32
43
 
33
- ### Bug Fixes
44
+ ## [0.16.19](https://github.com/parca-dev/parca/compare/ui-v0.16.18...ui-v0.16.19) (2022-09-26)
34
45
 
35
- * **ui:** type all the things (string mode) ([e91ac9d](https://github.com/parca-dev/parca/commit/e91ac9deb8a200ed3c9a9c5d81ae71e13d49466e))
46
+ ## [0.16.18](https://github.com/parca-dev/parca/compare/ui-v0.16.17...ui-v0.16.18) (2022-09-26)
36
47
 
48
+ ## [0.16.2](https://github.com/parca-dev/parca/compare/ui-v0.13.4...ui-v0.16.2) (2022-09-14)
37
49
 
50
+ ## [0.13.4](https://github.com/parca-dev/parca/compare/ui-v0.13.3...ui-v0.13.4) (2022-06-07)
38
51
 
39
- ## 0.15.10 (2022-08-30)
52
+ **Note:** Version bump only for package @parca/profile
40
53
 
54
+ ## [0.16.23](https://github.com/parca-dev/parca/compare/ui-v0.16.20...ui-v0.16.23) (2022-09-27)
41
55
 
56
+ **Note:** Version bump only for package @parca/profile
42
57
 
58
+ ## [0.16.22](https://github.com/parca-dev/parca/compare/ui-v0.16.20...ui-v0.16.22) (2022-09-27)
43
59
 
60
+ **Note:** Version bump only for package @parca/profile
44
61
 
45
- ## [0.15.19](https://github.com/parca-dev/parca/compare/ui-v0.15.18...ui-v0.15.19) (2022-09-08)
62
+ ## [0.16.21](https://github.com/parca-dev/parca/compare/ui-v0.16.20...ui-v0.16.21) (2022-09-27)
46
63
 
64
+ **Note:** Version bump only for package @parca/profile
47
65
 
66
+ ## [0.16.20](https://github.com/parca-dev/parca/compare/ui-v0.16.19...ui-v0.16.20) (2022-09-27)
48
67
 
49
- ## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.17) (2022-09-07)
68
+ **Note:** Version bump only for package @parca/profile
50
69
 
70
+ ## [0.16.19](https://github.com/parca-dev/parca/compare/ui-v0.16.18...ui-v0.16.19) (2022-09-26)
51
71
 
72
+ **Note:** Version bump only for package @parca/profile
52
73
 
53
- ## [0.15.10](https://github.com/parca-dev/parca/compare/ui-v0.15.8...ui-v0.15.10) (2022-08-30)
74
+ ## [0.16.16](https://github.com/parca-dev/parca/compare/ui-v0.16.15...ui-v0.16.16) (2022-09-26)
54
75
 
55
76
  **Note:** Version bump only for package @parca/profile
56
77
 
78
+ # [0.16.0](https://github.com/parca-dev/parca/compare/ui-v0.15.26...ui-v0.16.0) (2022-09-13)
57
79
 
80
+ **Note:** Version bump only for package @parca/profile
58
81
 
82
+ ## [0.15.25](https://github.com/parca-dev/parca/compare/ui-v0.15.24...ui-v0.15.25) (2022-09-13)
59
83
 
84
+ **Note:** Version bump only for package @parca/profile
60
85
 
61
- ## [0.15.18](https://github.com/parca-dev/parca/compare/ui-v0.15.17...ui-v0.15.18) (2022-09-08)
86
+ ## [0.15.24](https://github.com/parca-dev/parca/compare/ui-v0.15.23...ui-v0.15.24) (2022-09-13)
62
87
 
88
+ ## [0.15.19](https://github.com/parca-dev/parca/compare/ui-v0.15.17...ui-v0.15.19) (2022-09-08)
63
89
 
90
+ ## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.17) (2022-09-07)
64
91
 
65
- ## [0.15.10](https://github.com/parca-dev/parca/compare/ui-v0.15.8...ui-v0.15.10) (2022-08-30)
92
+ ### Bug Fixes
66
93
 
67
- **Note:** Version bump only for package @parca/profile
94
+ - **ui:** type all the things (string mode) ([e91ac9d](https://github.com/parca-dev/parca/commit/e91ac9deb8a200ed3c9a9c5d81ae71e13d49466e))
68
95
 
96
+ ## 0.15.10 (2022-08-30)
69
97
 
98
+ ## [0.15.19](https://github.com/parca-dev/parca/compare/ui-v0.15.18...ui-v0.15.19) (2022-09-08)
70
99
 
100
+ ## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.17) (2022-09-07)
71
101
 
102
+ ## [0.15.10](https://github.com/parca-dev/parca/compare/ui-v0.15.8...ui-v0.15.10) (2022-08-30)
72
103
 
73
- ## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.16...ui-v0.15.17) (2022-09-07)
104
+ **Note:** Version bump only for package @parca/profile
74
105
 
106
+ ## [0.15.18](https://github.com/parca-dev/parca/compare/ui-v0.15.17...ui-v0.15.18) (2022-09-08)
75
107
 
108
+ ## [0.15.10](https://github.com/parca-dev/parca/compare/ui-v0.15.8...ui-v0.15.10) (2022-08-30)
76
109
 
77
- ## [0.15.11](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.11) (2022-09-01)
110
+ **Note:** Version bump only for package @parca/profile
78
111
 
112
+ ## [0.15.17](https://github.com/parca-dev/parca/compare/ui-v0.15.16...ui-v0.15.17) (2022-09-07)
79
113
 
114
+ ## [0.15.11](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.11) (2022-09-01)
80
115
 
81
116
  ## [0.15.10](https://github.com/parca-dev/parca/compare/ui-v0.15.2...ui-v0.15.10) (2022-08-30)
82
117
 
83
-
84
-
85
118
  ## [0.15.2](https://github.com/parca-dev/parca/compare/ui-v0.15.1...ui-v0.15.2) (2022-08-25)
86
119
 
87
-
88
-
89
120
  ## 0.15.1 (2022-08-25)
90
121
 
91
122
  **Note:** Version bump only for package @parca/profile
92
123
 
93
-
94
-
95
-
96
-
97
124
  ## [0.15.11](https://github.com/parca-dev/parca/compare/ui-v0.15.10...ui-v0.15.11) (2022-09-01)
98
125
 
99
126
  **Note:** Version bump only for package @parca/profile
@@ -0,0 +1,23 @@
1
+ /// <reference types="react" />
2
+ export interface IEdge {
3
+ source: number;
4
+ target: number;
5
+ color: string;
6
+ points: string;
7
+ }
8
+ interface Props {
9
+ edge: IEdge;
10
+ sourceNode: {
11
+ x: number;
12
+ y: number;
13
+ };
14
+ targetNode: {
15
+ x: number;
16
+ y: number;
17
+ };
18
+ xScale: (x: number) => number;
19
+ yScale: (y: number) => number;
20
+ nodeRadius: number;
21
+ }
22
+ declare const Edge: ({ edge, sourceNode, targetNode, xScale, yScale, nodeRadius }: Props) => JSX.Element;
23
+ export default Edge;
@@ -0,0 +1,30 @@
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 { Arrow } from 'react-konva';
15
+ import { parseEdgePos } from '../utils';
16
+ var Edge = function (_a) {
17
+ var edge = _a.edge, sourceNode = _a.sourceNode, targetNode = _a.targetNode, xScale = _a.xScale, yScale = _a.yScale, nodeRadius = _a.nodeRadius;
18
+ var points = edge.points, color = edge.color, source = edge.source, target = edge.target;
19
+ var scaledPoints = parseEdgePos({
20
+ pos: points,
21
+ xScale: xScale,
22
+ yScale: yScale,
23
+ source: [sourceNode.x, sourceNode.y],
24
+ target: [targetNode.x, targetNode.y],
25
+ nodeRadius: nodeRadius,
26
+ isSelfLoop: source === target,
27
+ });
28
+ return (_jsx(Arrow, { points: scaledPoints, bezier: true, stroke: color, strokeWidth: 3, pointerLength: 10, pointerWidth: 10, fill: color, opacity: 0.8 }));
29
+ };
30
+ export default Edge;
@@ -0,0 +1,20 @@
1
+ /// <reference types="react" />
2
+ export interface INode {
3
+ id: number;
4
+ x: number;
5
+ y: number;
6
+ data: {
7
+ id: string;
8
+ };
9
+ color: string;
10
+ mouseX?: number;
11
+ mouseY?: number;
12
+ }
13
+ interface Props {
14
+ node: INode;
15
+ hoveredNode: INode | null;
16
+ setHoveredNode: (node: INode | null) => void;
17
+ nodeRadius: number;
18
+ }
19
+ declare const Node: ({ node, hoveredNode, setHoveredNode, nodeRadius: defaultRadius, }: Props) => JSX.Element;
20
+ export default Node;
@@ -0,0 +1,37 @@
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 } 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 { Circle } from 'react-konva';
26
+ var Node = function (_a) {
27
+ var node = _a.node, hoveredNode = _a.hoveredNode, setHoveredNode = _a.setHoveredNode, defaultRadius = _a.nodeRadius;
28
+ var id = node.data.id, x = node.x, y = node.y, color = node.color;
29
+ var hoverRadius = defaultRadius + 3;
30
+ var isHovered = Boolean(hoveredNode) && (hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.data.id) === id;
31
+ return (_jsx(Circle, { x: +x, y: +y, draggable: true, radius: isHovered ? hoverRadius : defaultRadius, fill: color, onMouseOver: function () {
32
+ setHoveredNode(__assign(__assign({}, node), { mouseX: x, mouseY: y }));
33
+ }, onMouseOut: function () {
34
+ setHoveredNode(null);
35
+ } }));
36
+ };
37
+ export default Node;
@@ -0,0 +1,9 @@
1
+ /// <reference types="react" />
2
+ import { Callgraph as CallgraphType } from '@parca/client';
3
+ export interface Props {
4
+ graph: CallgraphType;
5
+ sampleUnit: string;
6
+ width: number;
7
+ }
8
+ declare const Callgraph: ({ graph, sampleUnit, width }: Props) => JSX.Element;
9
+ export default Callgraph;
@@ -0,0 +1,137 @@
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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
13
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
14
+ return new (P || (P = Promise))(function (resolve, reject) {
15
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
16
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
17
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
18
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
19
+ });
20
+ };
21
+ var __generator = (this && this.__generator) || function (thisArg, body) {
22
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
23
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
24
+ function verb(n) { return function (v) { return step([n, v]); }; }
25
+ function step(op) {
26
+ if (f) throw new TypeError("Generator is already executing.");
27
+ while (_) try {
28
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
29
+ if (y = 0, t) op = [op[0] & 2, t.value];
30
+ switch (op[0]) {
31
+ case 0: case 1: t = op; break;
32
+ case 4: _.label++; return { value: op[1], done: false };
33
+ case 5: _.label++; y = op[1]; op = [0]; continue;
34
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
35
+ default:
36
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
37
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
38
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
39
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
40
+ if (t[2]) _.ops.pop();
41
+ _.trys.pop(); continue;
42
+ }
43
+ op = body.call(thisArg, _);
44
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
45
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
46
+ }
47
+ };
48
+ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
49
+ // Copyright 2022 The Parca Authors
50
+ // Licensed under the Apache License, Version 2.0 (the "License");
51
+ // you may not use this file except in compliance with the License.
52
+ // You may obtain a copy of the License at
53
+ //
54
+ // http://www.apache.org/licenses/LICENSE-2.0
55
+ //
56
+ // Unless required by applicable law or agreed to in writing, software
57
+ // distributed under the License is distributed on an "AS IS" BASIS,
58
+ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
59
+ // See the License for the specific language governing permissions and
60
+ // limitations under the License.
61
+ import { useState, useEffect, useRef } from 'react';
62
+ import graphviz from 'graphviz-wasm';
63
+ import * as d3 from 'd3';
64
+ import { Stage, Layer } from 'react-konva';
65
+ import Tooltip from '../GraphTooltip';
66
+ import { jsonToDot } from './utils';
67
+ import Node from './Node';
68
+ import Edge from './Edge';
69
+ var Callgraph = function (_a) {
70
+ var _b, _c;
71
+ var graph = _a.graph, sampleUnit = _a.sampleUnit, width = _a.width;
72
+ var containerRef = useRef(null);
73
+ var _d = useState(null), graphData = _d[0], setGraphData = _d[1];
74
+ var _e = useState(null), hoveredNode = _e[0], setHoveredNode = _e[1];
75
+ var rawNodes = graph.nodes, total = graph.cumulative;
76
+ var nodeRadius = 12;
77
+ useEffect(function () {
78
+ var getDataWithPositions = function () { return __awaiter(void 0, void 0, void 0, function () {
79
+ var dataAsDot, jsonGraph;
80
+ return __generator(this, function (_a) {
81
+ switch (_a.label) {
82
+ case 0:
83
+ dataAsDot = jsonToDot({ graph: graph, width: width, nodeRadius: nodeRadius });
84
+ // 2. Use Graphviz-WASM to translate the 'dot' graph to a 'JSON' graph
85
+ return [4 /*yield*/, graphviz.loadWASM()];
86
+ case 1:
87
+ // 2. Use Graphviz-WASM to translate the 'dot' graph to a 'JSON' graph
88
+ _a.sent(); // need to load the WASM instance and wait for it
89
+ jsonGraph = graphviz.layout(dataAsDot, 'json', 'dot');
90
+ setGraphData(jsonGraph);
91
+ return [2 /*return*/];
92
+ }
93
+ });
94
+ }); };
95
+ if (width !== null) {
96
+ void getDataWithPositions();
97
+ }
98
+ }, [graph, width]);
99
+ // 3. Render the graph with calculated layout in Canvas container
100
+ if (width == null || graphData == null)
101
+ return _jsx(_Fragment, {});
102
+ var height = width;
103
+ var _f = JSON.parse(graphData), objects = _f.objects, gvizEdges = _f.edges, boundingBox = _f.bb;
104
+ var cumulatives = objects
105
+ .filter(function (node) { return node !== undefined; })
106
+ .map(function (node) { return node.cumulative; });
107
+ if (cumulatives.length === 0) {
108
+ cumulatives.push('0');
109
+ }
110
+ var valueRange = d3.extent(cumulatives).map(function (value) { return parseInt(value); });
111
+ var colorScale = d3
112
+ .scaleSequentialLog(d3.interpolateRdGy)
113
+ .domain(valueRange)
114
+ .range(['lightgrey', 'red']);
115
+ var graphBB = boundingBox.split(',');
116
+ var xScale = d3
117
+ .scaleLinear()
118
+ .domain([0, Number(graphBB[2])])
119
+ .range([0, width]);
120
+ var yScale = d3
121
+ .scaleLinear()
122
+ .domain([0, Number(graphBB[3])])
123
+ .range([0, height]);
124
+ var nodes = objects.map(function (object) {
125
+ var _a;
126
+ var pos = object.pos.split(',');
127
+ return __assign(__assign({}, object), { id: object._gvid, x: xScale(parseInt(pos[0])), y: yScale(parseInt(pos[1])), color: colorScale(Number(object.cumulative)), data: (_a = rawNodes.find(function (n) { return n.id === object.name; })) !== null && _a !== void 0 ? _a : { id: 'n0' } });
128
+ });
129
+ var edges = gvizEdges.map(function (edge) { return (__assign(__assign({}, edge), { source: edge.head, target: edge.tail, points: edge.pos, color: colorScale(+edge.cumulative) })); });
130
+ return (_jsx("div", __assign({ className: "relative" }, { children: _jsxs("div", __assign({ className: "w-[".concat(width, "px] h-[").concat(height, "px]"), ref: containerRef }, { children: [_jsx(Stage, __assign({ width: width, height: height }, { children: _jsxs(Layer, { children: [edges.map(function (edge) {
131
+ var _a, _b;
132
+ var sourceNode = (_a = nodes.find(function (n) { return n.id === edge.source; })) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
133
+ var targetNode = (_b = nodes.find(function (n) { return n.id === edge.target; })) !== null && _b !== void 0 ? _b : { x: 0, y: 0 };
134
+ return (_jsx(Edge, { edge: edge, xScale: xScale, yScale: yScale, sourceNode: sourceNode, targetNode: targetNode, nodeRadius: nodeRadius }, "edge-".concat(edge.source, "-").concat(edge.target)));
135
+ }), nodes.map(function (node) { return (_jsx(Node, { node: node, hoveredNode: hoveredNode, setHoveredNode: setHoveredNode, nodeRadius: nodeRadius }, "node-".concat(node.data.id))); })] }) })), _jsx(Tooltip, { hoveringNode: rawNodes.find(function (n) { return n.id === (hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.data.id); }), unit: sampleUnit, total: +total, isFixed: false, x: (_b = hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.mouseX) !== null && _b !== void 0 ? _b : 0, y: (_c = hoveredNode === null || hoveredNode === void 0 ? void 0 : hoveredNode.mouseY) !== null && _c !== void 0 ? _c : 0, contextElement: containerRef.current })] })) })));
136
+ };
137
+ export default Callgraph;
@@ -0,0 +1,148 @@
1
+ export declare const dotGraph = "{\n n1 [Label = \"n1\"];\n n2 [Label = \"n2\"];\n n3 [Label = \"n3\"];\n n1 -- n2;\n n1 -- n3;\n n2 -- n2;\n}";
2
+ export declare const jsonGraph: {
3
+ total: string;
4
+ unit: string;
5
+ nodes: {
6
+ id: string;
7
+ label: string;
8
+ value: number;
9
+ }[];
10
+ edges: {
11
+ id: string;
12
+ source: string;
13
+ target: string;
14
+ label: string;
15
+ }[];
16
+ };
17
+ export declare const graphvizDot = "\ndigraph {\n N1 [id=\"node1\"]\n N2 [id=\"node2\"]\n N3 [id=\"node3\"]\n N4 [id=\"node4\"]\n N1 -> N2 [id=\"e1\" label=\"e1 fdskjao fdjksaol\"]\n N2 -> N3 [id=\"e2\" label=\"e2\"]\n N3 -> N4 [id=\"e3\" label=\"e3\"]\n N3 -> N1 [id=\"e4\" label=\"e4\"]\n }";
18
+ export declare const jsonGraphWithGraphvizPositions: {
19
+ name: string;
20
+ directed: boolean;
21
+ strict: boolean;
22
+ _draw_: ({
23
+ op: string;
24
+ grad: string;
25
+ color: string;
26
+ points?: undefined;
27
+ } | {
28
+ op: string;
29
+ points: number[][];
30
+ grad?: undefined;
31
+ color?: undefined;
32
+ })[];
33
+ bb: string;
34
+ xdotversion: string;
35
+ _subgraph_cnt: number;
36
+ objects: {
37
+ _gvid: number;
38
+ name: string;
39
+ Label: string;
40
+ _draw_: ({
41
+ op: string;
42
+ grad: string;
43
+ color: string;
44
+ rect?: undefined;
45
+ } | {
46
+ op: string;
47
+ rect: number[];
48
+ grad?: undefined;
49
+ color?: undefined;
50
+ })[];
51
+ _ldraw_: ({
52
+ op: string;
53
+ size: number;
54
+ face: string;
55
+ grad?: undefined;
56
+ color?: undefined;
57
+ pt?: undefined;
58
+ align?: undefined;
59
+ width?: undefined;
60
+ text?: undefined;
61
+ } | {
62
+ op: string;
63
+ grad: string;
64
+ color: string;
65
+ size?: undefined;
66
+ face?: undefined;
67
+ pt?: undefined;
68
+ align?: undefined;
69
+ width?: undefined;
70
+ text?: undefined;
71
+ } | {
72
+ op: string;
73
+ pt: number[];
74
+ align: string;
75
+ width: number;
76
+ text: string;
77
+ size?: undefined;
78
+ face?: undefined;
79
+ grad?: undefined;
80
+ color?: undefined;
81
+ })[];
82
+ fillcolor: string;
83
+ fixedsize: string;
84
+ fontcolor: string;
85
+ height: string;
86
+ label: string;
87
+ margin: string;
88
+ pos: string;
89
+ shape: string;
90
+ style: string;
91
+ width: string;
92
+ }[];
93
+ edges: {
94
+ _gvid: number;
95
+ tail: number;
96
+ head: number;
97
+ _draw_: ({
98
+ op: string;
99
+ grad: string;
100
+ color: string;
101
+ points?: undefined;
102
+ } | {
103
+ op: string;
104
+ points: number[][];
105
+ grad?: undefined;
106
+ color?: undefined;
107
+ })[];
108
+ _hdraw_: ({
109
+ op: string;
110
+ style: string;
111
+ grad?: undefined;
112
+ color?: undefined;
113
+ points?: undefined;
114
+ } | {
115
+ op: string;
116
+ grad: string;
117
+ color: string;
118
+ style?: undefined;
119
+ points?: undefined;
120
+ } | {
121
+ op: string;
122
+ points: number[][];
123
+ style?: undefined;
124
+ grad?: undefined;
125
+ color?: undefined;
126
+ })[];
127
+ pos: string;
128
+ }[];
129
+ };
130
+ export declare const nodeWithMetaData: (id: string, name: string) => {
131
+ id: string;
132
+ cumulative: number;
133
+ meta: any;
134
+ };
135
+ export declare const jsonGraphWithMetaData: {
136
+ total: string;
137
+ nodes: {
138
+ id: string;
139
+ cumulative: number;
140
+ meta: any;
141
+ }[];
142
+ edges: {
143
+ id: string;
144
+ source: string;
145
+ target: string;
146
+ cumulative: string;
147
+ }[];
148
+ };