@rsdoctor/components 1.3.13-beta.1 → 1.3.14
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/dist/components/Charts/TimelineCharts/index.mjs +4 -4
- package/dist/components/Charts/TimelineCharts/index.mjs.map +1 -1
- package/dist/components/Charts/TreeMap.d.ts +6 -3
- package/dist/components/Charts/TreeMap.mjs +267 -134
- package/dist/components/Charts/TreeMap.mjs.map +1 -1
- package/dist/components/Charts/constants.mjs +2 -2
- package/dist/components/Charts/constants.mjs.map +1 -1
- package/dist/components/Layout/menus.mjs +1 -0
- package/dist/components/Layout/menus.mjs.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/pages/index.mjs +12 -12
- package/dist/utils/file.d.ts +1 -0
- package/dist/utils/file.mjs +2 -1
- package/dist/utils/file.mjs.map +1 -1
- package/package.json +5 -5
|
@@ -2,19 +2,21 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import react, { memo, useCallback, useEffect, useMemo, useState } from "react";
|
|
3
3
|
import core from "echarts-for-react/esm/core";
|
|
4
4
|
import { TreemapChart } from "echarts/charts";
|
|
5
|
-
import { TooltipComponent } from "echarts/components";
|
|
5
|
+
import { TitleComponent, TooltipComponent } from "echarts/components";
|
|
6
6
|
import { CanvasRenderer } from "echarts/renderers";
|
|
7
|
-
import { Checkbox, Input, Radio } from "antd";
|
|
7
|
+
import { Alert, Checkbox, Input, Radio } from "antd";
|
|
8
8
|
import { FullscreenExitOutlined, FullscreenOutlined, LeftOutlined, RightOutlined, SearchOutlined } from "@ant-design/icons";
|
|
9
9
|
import { formatSize } from "../../utils/index.mjs";
|
|
10
10
|
import { SDK } from "@rsdoctor/types";
|
|
11
11
|
import { ServerAPIProvider } from "../Manifest/index.mjs";
|
|
12
|
+
import { ModuleAnalyzeComponent } from "../../pages/ModuleAnalyze/index.mjs";
|
|
12
13
|
import treemap_module from "./treemap.module.mjs";
|
|
13
14
|
import { TREE_COLORS } from "./constants.mjs";
|
|
14
|
-
import * as
|
|
15
|
-
|
|
15
|
+
import * as __rspack_external_echarts_core_d2845954 from "echarts/core";
|
|
16
|
+
__rspack_external_echarts_core_d2845954.use([
|
|
16
17
|
TreemapChart,
|
|
17
18
|
TooltipComponent,
|
|
19
|
+
TitleComponent,
|
|
18
20
|
CanvasRenderer
|
|
19
21
|
]);
|
|
20
22
|
function hashString(str) {
|
|
@@ -31,12 +33,27 @@ function blendWithWhite(hex, ratio) {
|
|
|
31
33
|
const blendedB = Math.round(b * ratio + 255 * (1 - ratio));
|
|
32
34
|
return `#${blendedR.toString(16).padStart(2, '0')}${blendedG.toString(16).padStart(2, '0')}${blendedB.toString(16).padStart(2, '0')}`;
|
|
33
35
|
}
|
|
36
|
+
function getLuminance(hex) {
|
|
37
|
+
const r = parseInt(hex.slice(1, 3), 16) / 255;
|
|
38
|
+
const g = parseInt(hex.slice(3, 5), 16) / 255;
|
|
39
|
+
const b = parseInt(hex.slice(5, 7), 16) / 255;
|
|
40
|
+
const [rs, gs, bs] = [
|
|
41
|
+
r,
|
|
42
|
+
g,
|
|
43
|
+
b
|
|
44
|
+
].map((val)=>val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4));
|
|
45
|
+
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
|
|
46
|
+
}
|
|
47
|
+
function isDarkColor(hex) {
|
|
48
|
+
return getLuminance(hex) < 0.4;
|
|
49
|
+
}
|
|
34
50
|
function getLevelOption() {
|
|
35
51
|
return [
|
|
36
52
|
{
|
|
37
53
|
itemStyle: {
|
|
38
54
|
borderWidth: 0,
|
|
39
|
-
gapWidth:
|
|
55
|
+
gapWidth: 4,
|
|
56
|
+
gapColor: '#ffffff'
|
|
40
57
|
}
|
|
41
58
|
},
|
|
42
59
|
{
|
|
@@ -46,17 +63,14 @@ function getLevelOption() {
|
|
|
46
63
|
0.3
|
|
47
64
|
],
|
|
48
65
|
borderWidth: 5,
|
|
49
|
-
gapWidth:
|
|
66
|
+
gapWidth: 4,
|
|
67
|
+
gapColor: '#ffffff'
|
|
50
68
|
},
|
|
51
69
|
upperLabel: {
|
|
52
70
|
show: true,
|
|
53
|
-
color: '#
|
|
71
|
+
color: '#ffffff',
|
|
72
|
+
fontSize: 14,
|
|
54
73
|
height: 30
|
|
55
|
-
},
|
|
56
|
-
emphasis: {
|
|
57
|
-
itemStyle: {
|
|
58
|
-
borderColor: '#ccc'
|
|
59
|
-
}
|
|
60
74
|
}
|
|
61
75
|
}
|
|
62
76
|
];
|
|
@@ -65,6 +79,7 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
65
79
|
const [option, setOption] = useState(null);
|
|
66
80
|
const chartRef = react.useRef(null);
|
|
67
81
|
const chartDataRef = react.useRef([]);
|
|
82
|
+
const clickTimeoutRef = react.useRef(null);
|
|
68
83
|
useEffect(()=>{
|
|
69
84
|
if (forwardedRef && chartRef.current) if ('function' == typeof forwardedRef) forwardedRef(chartRef.current);
|
|
70
85
|
else forwardedRef.current = chartRef.current;
|
|
@@ -85,22 +100,26 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
85
100
|
if (!val && node.value) val = node.value;
|
|
86
101
|
const nodeId = node.path ? hashString(node.path) : hashString(node.name || '');
|
|
87
102
|
const isHighlighted = highlightNodeId === nodeId;
|
|
88
|
-
const baseColorRatio = 0 === level ? 1 : Math.max(0.
|
|
89
|
-
const baseBorderRatio = 0 === level ? 1 : Math.max(0.
|
|
103
|
+
const baseColorRatio = 0 === level ? 1 : Math.max(0.35, 1 - 0.15 * level);
|
|
104
|
+
const baseBorderRatio = 0 === level ? 1 : Math.max(0.4, 1 - 0.15 * level);
|
|
90
105
|
const siblingGradientRange = 0.15;
|
|
91
106
|
const siblingRatio = siblingCount > 1 ? 1 - siblingIndex / (siblingCount - 1) * siblingGradientRange : 1;
|
|
92
107
|
const colorRatio = baseColorRatio * siblingRatio;
|
|
93
108
|
const borderRatio = baseBorderRatio * siblingRatio;
|
|
94
109
|
const nodeColor = isHighlighted ? '#fff5f5' : 0 === level ? blendWithWhite(baseColor, 0.8) : blendWithWhite(baseColor, colorRatio);
|
|
95
110
|
const nodeBorderColor = isHighlighted ? '#ff4d4f' : 0 === level ? baseColor : blendWithWhite(baseColor, borderRatio);
|
|
111
|
+
const isDark = isDarkColor(nodeColor);
|
|
112
|
+
const textColor = isDark ? '#ffffff' : '#000000';
|
|
113
|
+
const textBorderColor = isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.1)';
|
|
96
114
|
const result = {
|
|
97
115
|
id: nodeId,
|
|
98
116
|
name: node.name,
|
|
99
117
|
value: val,
|
|
100
118
|
path: node.path || node.name,
|
|
101
|
-
sourceSize: node.sourceSize ?? ('stat' === sizeType ? val : 0),
|
|
102
|
-
bundledSize: node.bundledSize ?? ('parsed' === sizeType ? val : 0),
|
|
103
|
-
gzipSize: node.gzipSize ?? ('gzip' === sizeType ? val : 0),
|
|
119
|
+
sourceSize: node.sourceSize ?? ('stat' === sizeType ? val : void 0),
|
|
120
|
+
bundledSize: node.bundledSize ?? ('parsed' === sizeType ? val : void 0),
|
|
121
|
+
gzipSize: node.gzipSize ?? ('gzip' === sizeType ? val : void 0),
|
|
122
|
+
moduleId: node.id,
|
|
104
123
|
itemStyle: {
|
|
105
124
|
borderWidth: isHighlighted ? 4 : 1,
|
|
106
125
|
color: nodeColor,
|
|
@@ -108,6 +127,16 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
108
127
|
...0 === level && {
|
|
109
128
|
gapWidth: 2
|
|
110
129
|
}
|
|
130
|
+
},
|
|
131
|
+
label: {
|
|
132
|
+
show: true,
|
|
133
|
+
color: textColor,
|
|
134
|
+
textBorderColor: textBorderColor,
|
|
135
|
+
textBorderWidth: 1
|
|
136
|
+
},
|
|
137
|
+
upperLabel: 0 === level ? void 0 : {
|
|
138
|
+
show: true,
|
|
139
|
+
color: textColor
|
|
111
140
|
}
|
|
112
141
|
};
|
|
113
142
|
if (children && children.length > 0) result.children = children;
|
|
@@ -118,22 +147,19 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
118
147
|
color: '#fff5f5'
|
|
119
148
|
}
|
|
120
149
|
};
|
|
150
|
+
else result.emphasis = {
|
|
151
|
+
itemStyle: {
|
|
152
|
+
color: nodeColor,
|
|
153
|
+
borderColor: nodeBorderColor,
|
|
154
|
+
borderWidth: isHighlighted ? 4 : 1
|
|
155
|
+
}
|
|
156
|
+
};
|
|
121
157
|
return result;
|
|
122
158
|
}
|
|
123
|
-
const data = treeData.map((item, index)=>convert(item, index, 0, void 0, index, treeData.length)).filter((item)=>item.value > 0 || item.children && item.children.length > 0);
|
|
159
|
+
const data = treeData.map((item, index)=>convert(item, index, 0, void 0, index, treeData.length)).filter((item)=>('number' == typeof item.value ? item.value > 0 : false) || item.children && item.children.length > 0);
|
|
124
160
|
chartDataRef.current = data;
|
|
125
161
|
setOption({
|
|
126
162
|
color: TREE_COLORS,
|
|
127
|
-
title: {
|
|
128
|
-
text: 'Rsdoctor TreeMap',
|
|
129
|
-
left: 'center',
|
|
130
|
-
top: 10,
|
|
131
|
-
textStyle: {
|
|
132
|
-
fontSize: 16,
|
|
133
|
-
fontWeight: 'bold',
|
|
134
|
-
color: 'rgba(0, 0, 0, 0.8)'
|
|
135
|
-
}
|
|
136
|
-
},
|
|
137
163
|
tooltip: {
|
|
138
164
|
padding: 10,
|
|
139
165
|
backgroundColor: '#fff',
|
|
@@ -145,7 +171,7 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
145
171
|
confine: true,
|
|
146
172
|
extraCssText: 'max-width: 450px; word-wrap: break-word;',
|
|
147
173
|
position: function(pos, _params, _dom, _rect, size) {
|
|
148
|
-
|
|
174
|
+
const obj = {
|
|
149
175
|
top: pos[1] + 10
|
|
150
176
|
};
|
|
151
177
|
if (pos[0] < size.viewSize[0] / 2) obj.left = pos[0] + 10;
|
|
@@ -154,17 +180,16 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
154
180
|
},
|
|
155
181
|
formatter: function(info) {
|
|
156
182
|
const node = info.data || {};
|
|
157
|
-
|
|
158
|
-
let path = node.path || name;
|
|
183
|
+
let path = 'string' == typeof node.path ? node.path : 'string' == typeof node.name ? node.name : String(node.name ?? '');
|
|
159
184
|
if (rootPath && path) {
|
|
160
185
|
const normalizedRoot = rootPath.replace(/\\/g, '/').replace(/\/$/, '');
|
|
161
186
|
const normalizedPath = path.replace(/\\/g, '/');
|
|
162
187
|
if (normalizedPath.startsWith(normalizedRoot + '/')) path = normalizedPath.slice(normalizedRoot.length + 1);
|
|
163
188
|
else if (normalizedPath === normalizedRoot) path = '';
|
|
164
189
|
}
|
|
165
|
-
const sourceSize = node.sourceSize
|
|
166
|
-
const bundledSize = node.bundledSize;
|
|
167
|
-
const gzipSize = node.gzipSize;
|
|
190
|
+
const sourceSize = 'number' == typeof node.sourceSize && node.sourceSize > 0 ? node.sourceSize : 'number' == typeof node.value && node.value > 0 && 'stat' === sizeType ? node.value : void 0;
|
|
191
|
+
const bundledSize = 'number' == typeof node.bundledSize && node.bundledSize > 0 ? node.bundledSize : void 0;
|
|
192
|
+
const gzipSize = 'number' == typeof node.gzipSize && node.gzipSize > 0 ? node.gzipSize : void 0;
|
|
168
193
|
function makeRow(label, value, color) {
|
|
169
194
|
return `<div class="${treemap_module["tooltip-row"]}">
|
|
170
195
|
<span class="${treemap_module["tooltip-label"]}" style="color: ${color};">${label}</span>
|
|
@@ -172,12 +197,12 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
172
197
|
</div>`;
|
|
173
198
|
}
|
|
174
199
|
const rows = [];
|
|
175
|
-
if (void 0 !== sourceSize) rows.push(makeRow('Stat size', formatSize(sourceSize), '#52c41a'));
|
|
176
|
-
if (void 0 !== bundledSize) rows.push(makeRow('Parsed size', formatSize(bundledSize), '#
|
|
177
|
-
if (void 0 !== gzipSize) rows.push(makeRow('Gzipped size', formatSize(gzipSize), '#1677ff'));
|
|
200
|
+
if (void 0 !== sourceSize && sourceSize > 0) rows.push(makeRow('Stat size', formatSize(sourceSize), '#52c41a'));
|
|
201
|
+
if (void 0 !== bundledSize && bundledSize > 0) rows.push(makeRow('Parsed size', formatSize(bundledSize), '#d96420'));
|
|
202
|
+
if (void 0 !== gzipSize && gzipSize > 0) rows.push(makeRow('Gzipped size', formatSize(gzipSize), '#1677ff'));
|
|
178
203
|
return `
|
|
179
204
|
<div style="font-family: sans-serif; font-size: 12px; line-height: 1.5;">
|
|
180
|
-
<div style="margin-bottom: 6px; max-width: 400px; word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; white-space: normal; color: rgba(0, 0, 0, 0.8);">${
|
|
205
|
+
<div style="margin-bottom: 6px; max-width: 400px; word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; white-space: normal; color: rgba(0, 0, 0, 0.8);">${__rspack_external_echarts_core_d2845954.format.encodeHTML(path)}</div>
|
|
181
206
|
${rows.join('')}
|
|
182
207
|
</div>
|
|
183
208
|
`;
|
|
@@ -186,15 +211,16 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
186
211
|
series: [
|
|
187
212
|
{
|
|
188
213
|
type: 'treemap',
|
|
214
|
+
itemStyle: {
|
|
215
|
+
gapColor: '#ffffff'
|
|
216
|
+
},
|
|
189
217
|
label: {
|
|
190
218
|
show: true,
|
|
191
219
|
formatter: '{b}',
|
|
192
220
|
fontSize: 12,
|
|
193
|
-
color: '#000',
|
|
194
221
|
position: 'inside',
|
|
195
222
|
fontWeight: 'normal',
|
|
196
|
-
|
|
197
|
-
textBorderWidth: 2,
|
|
223
|
+
textBorderWidth: 1,
|
|
198
224
|
padding: [
|
|
199
225
|
4,
|
|
200
226
|
8,
|
|
@@ -205,7 +231,6 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
205
231
|
upperLabel: {
|
|
206
232
|
show: true,
|
|
207
233
|
height: 30,
|
|
208
|
-
color: '#000',
|
|
209
234
|
fontSize: 12,
|
|
210
235
|
fontWeight: 'normal',
|
|
211
236
|
padding: [
|
|
@@ -242,14 +267,18 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
242
267
|
},
|
|
243
268
|
roam: true,
|
|
244
269
|
nodeClick: false,
|
|
245
|
-
zoomToNodeRatio: 0.
|
|
270
|
+
zoomToNodeRatio: 0.7,
|
|
246
271
|
animationDurationUpdate: 500,
|
|
247
272
|
width: '100%',
|
|
248
273
|
height: '100%',
|
|
249
|
-
top:
|
|
274
|
+
top: -10,
|
|
250
275
|
bottom: 30,
|
|
251
276
|
left: 0,
|
|
252
|
-
right: 0
|
|
277
|
+
right: 0,
|
|
278
|
+
zoomLimit: {
|
|
279
|
+
min: 0.5,
|
|
280
|
+
max: 5
|
|
281
|
+
}
|
|
253
282
|
}
|
|
254
283
|
]
|
|
255
284
|
});
|
|
@@ -265,12 +294,13 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
265
294
|
if (chartInstance) {
|
|
266
295
|
const findNodeInfo = (data, targetId, path = [])=>{
|
|
267
296
|
for (const item of data){
|
|
297
|
+
const itemName = 'string' == typeof item.name ? item.name : String(item.name ?? '');
|
|
268
298
|
const currentPath = [
|
|
269
299
|
...path,
|
|
270
|
-
|
|
300
|
+
itemName
|
|
271
301
|
];
|
|
272
302
|
if (item.id === targetId) return {
|
|
273
|
-
name:
|
|
303
|
+
name: itemName,
|
|
274
304
|
path: currentPath
|
|
275
305
|
};
|
|
276
306
|
if (item.children) {
|
|
@@ -283,13 +313,16 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
283
313
|
setTimeout(()=>{
|
|
284
314
|
const nodeInfo = findNodeInfo(chartDataRef.current, centerNodeId);
|
|
285
315
|
if (!nodeInfo) return;
|
|
316
|
+
const nodeName = nodeInfo.name;
|
|
286
317
|
try {
|
|
287
318
|
chartInstance.dispatchAction({
|
|
288
319
|
type: 'highlight',
|
|
289
320
|
seriesIndex: 0,
|
|
290
|
-
name:
|
|
321
|
+
name: nodeName
|
|
291
322
|
});
|
|
292
|
-
} catch (e) {
|
|
323
|
+
} catch (e) {
|
|
324
|
+
console.error('Failed to highlight node with name:', nodeName, e);
|
|
325
|
+
}
|
|
293
326
|
const zoomStrategies = [
|
|
294
327
|
()=>chartInstance.dispatchAction({
|
|
295
328
|
type: 'treemapZoomToNode',
|
|
@@ -299,7 +332,7 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
299
332
|
()=>chartInstance.dispatchAction({
|
|
300
333
|
type: 'treemapZoomToNode',
|
|
301
334
|
seriesIndex: 0,
|
|
302
|
-
name:
|
|
335
|
+
name: nodeName
|
|
303
336
|
}),
|
|
304
337
|
()=>chartInstance.dispatchAction({
|
|
305
338
|
type: 'treemapZoomToNode',
|
|
@@ -326,31 +359,54 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
|
|
|
326
359
|
centerNodeId,
|
|
327
360
|
option
|
|
328
361
|
]);
|
|
329
|
-
|
|
362
|
+
useEffect(()=>()=>{
|
|
363
|
+
if (clickTimeoutRef.current) window.clearTimeout(clickTimeoutRef.current);
|
|
364
|
+
}, []);
|
|
365
|
+
return option ? /*#__PURE__*/ jsxs("div", {
|
|
330
366
|
className: treemap_module["chart-container"],
|
|
331
367
|
style: style,
|
|
332
|
-
children:
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
368
|
+
children: [
|
|
369
|
+
/*#__PURE__*/ jsx(Alert, {
|
|
370
|
+
message: "If parsed size lacks detailed module information, you can enable sourceMap when RSDOCTOR = true. This is because Rsdoctor relies on SourceMap to obtain Parsed Size. Rspack provides SourceMap information to Rsdoctor by default without affecting the build output.",
|
|
371
|
+
type: "info",
|
|
372
|
+
showIcon: true,
|
|
373
|
+
style: {
|
|
374
|
+
marginBottom: 0
|
|
375
|
+
}
|
|
376
|
+
}),
|
|
377
|
+
/*#__PURE__*/ jsx(core, {
|
|
378
|
+
ref: chartRef,
|
|
379
|
+
option: option,
|
|
380
|
+
echarts: __rspack_external_echarts_core_d2845954,
|
|
381
|
+
onEvents: {
|
|
382
|
+
click: (params)=>{
|
|
383
|
+
if (clickTimeoutRef.current) window.clearTimeout(clickTimeoutRef.current);
|
|
384
|
+
clickTimeoutRef.current = window.setTimeout(()=>{
|
|
385
|
+
if (chartRef.current) {
|
|
386
|
+
const instance = chartRef.current.getEchartsInstance();
|
|
387
|
+
const data = params?.data;
|
|
388
|
+
if (instance && data?.id !== void 0) instance.dispatchAction({
|
|
389
|
+
type: 'treemapZoomToNode',
|
|
390
|
+
seriesIndex: 0,
|
|
391
|
+
targetNodeId: String(data.id)
|
|
392
|
+
});
|
|
393
|
+
}
|
|
394
|
+
}, 180);
|
|
395
|
+
},
|
|
396
|
+
dblclick: (params)=>{
|
|
397
|
+
if (clickTimeoutRef.current) {
|
|
398
|
+
window.clearTimeout(clickTimeoutRef.current);
|
|
399
|
+
clickTimeoutRef.current = null;
|
|
400
|
+
}
|
|
401
|
+
onChartClick?.(params);
|
|
345
402
|
}
|
|
346
|
-
|
|
403
|
+
},
|
|
404
|
+
style: {
|
|
405
|
+
width: '100%',
|
|
406
|
+
height: '100%'
|
|
347
407
|
}
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
width: '100%',
|
|
351
|
-
height: '100%'
|
|
352
|
-
}
|
|
353
|
-
})
|
|
408
|
+
})
|
|
409
|
+
]
|
|
354
410
|
}) : null;
|
|
355
411
|
});
|
|
356
412
|
const TreeMap = /*#__PURE__*/ react.forwardRef((props, ref)=>/*#__PURE__*/ jsx(TreeMapInner, {
|
|
@@ -377,10 +433,46 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
|
|
|
377
433
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
378
434
|
const [highlightNodeId, setHighlightNodeId] = useState();
|
|
379
435
|
const [centerNodeId, setCenterNodeId] = useState();
|
|
436
|
+
const [moduleId, setModuleId] = useState('');
|
|
437
|
+
const [showAnalyze, setShowAnalyze] = useState(false);
|
|
438
|
+
const [chunkSearchQuery, setChunkSearchQuery] = useState('');
|
|
380
439
|
const chartRef = react.useRef(null);
|
|
381
440
|
const containerRef = react.useRef(null);
|
|
441
|
+
const handleChartClick = useCallback((params)=>{
|
|
442
|
+
onChartClick?.(params);
|
|
443
|
+
const data = params.data;
|
|
444
|
+
const moduleId = data?.moduleId;
|
|
445
|
+
if (void 0 !== moduleId) {
|
|
446
|
+
setModuleId(moduleId);
|
|
447
|
+
setShowAnalyze(true);
|
|
448
|
+
}
|
|
449
|
+
}, [
|
|
450
|
+
onChartClick
|
|
451
|
+
]);
|
|
382
452
|
const enterFullscreen = useCallback(()=>{
|
|
383
|
-
if (containerRef.current)
|
|
453
|
+
if (containerRef.current) {
|
|
454
|
+
const el = containerRef.current;
|
|
455
|
+
if (el.requestFullscreen) el.requestFullscreen().then(()=>setIsFullscreen(true)).catch((err)=>console.error('Failed to enter fullscreen:', err));
|
|
456
|
+
else if (el.webkitRequestFullscreen) try {
|
|
457
|
+
el.webkitRequestFullscreen();
|
|
458
|
+
setIsFullscreen(true);
|
|
459
|
+
} catch (err) {
|
|
460
|
+
console.error('Failed to enter fullscreen (webkit):', err);
|
|
461
|
+
}
|
|
462
|
+
else if (el.mozRequestFullScreen) try {
|
|
463
|
+
el.mozRequestFullScreen();
|
|
464
|
+
setIsFullscreen(true);
|
|
465
|
+
} catch (err) {
|
|
466
|
+
console.error('Failed to enter fullscreen (moz):', err);
|
|
467
|
+
}
|
|
468
|
+
else if (el.msRequestFullscreen) try {
|
|
469
|
+
el.msRequestFullscreen();
|
|
470
|
+
setIsFullscreen(true);
|
|
471
|
+
} catch (err) {
|
|
472
|
+
console.error('Failed to enter fullscreen (ms):', err);
|
|
473
|
+
}
|
|
474
|
+
else console.error('Fullscreen API is not supported in this browser.');
|
|
475
|
+
}
|
|
384
476
|
}, []);
|
|
385
477
|
const exitFullscreen = useCallback(()=>{
|
|
386
478
|
document.exitFullscreen().then(()=>setIsFullscreen(false)).catch((err)=>console.error('Failed to exit fullscreen:', err));
|
|
@@ -402,6 +494,18 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
|
|
|
402
494
|
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
403
495
|
};
|
|
404
496
|
}, []);
|
|
497
|
+
const filteredTreeData = useMemo(()=>{
|
|
498
|
+
let filtered = treeData.filter((item)=>checkedAssets.includes(item.name));
|
|
499
|
+
if (chunkSearchQuery.trim()) {
|
|
500
|
+
const searchLower = chunkSearchQuery.toLowerCase();
|
|
501
|
+
filtered = filtered.filter((item)=>item.name.toLowerCase().includes(searchLower));
|
|
502
|
+
}
|
|
503
|
+
return filtered;
|
|
504
|
+
}, [
|
|
505
|
+
treeData,
|
|
506
|
+
checkedAssets,
|
|
507
|
+
chunkSearchQuery
|
|
508
|
+
]);
|
|
405
509
|
const searchResults = useMemo(()=>{
|
|
406
510
|
if (!searchQuery.trim()) return [];
|
|
407
511
|
const regex = new RegExp(searchQuery, 'i');
|
|
@@ -416,19 +520,12 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
|
|
|
416
520
|
}
|
|
417
521
|
if (node.children) node.children.forEach(collectMatchingPaths);
|
|
418
522
|
};
|
|
419
|
-
|
|
523
|
+
filteredTreeData.forEach(collectMatchingPaths);
|
|
420
524
|
return results;
|
|
421
525
|
}, [
|
|
422
|
-
|
|
526
|
+
filteredTreeData,
|
|
423
527
|
searchQuery
|
|
424
528
|
]);
|
|
425
|
-
const filteredTreeData = useMemo(()=>{
|
|
426
|
-
let filtered = treeData.filter((item)=>checkedAssets.includes(item.name));
|
|
427
|
-
return filtered;
|
|
428
|
-
}, [
|
|
429
|
-
treeData,
|
|
430
|
-
checkedAssets
|
|
431
|
-
]);
|
|
432
529
|
const handleSearchResultClick = useCallback((nodeId)=>{
|
|
433
530
|
setHighlightNodeId(nodeId);
|
|
434
531
|
setCenterNodeId(nodeId);
|
|
@@ -520,6 +617,68 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
|
|
|
520
617
|
})
|
|
521
618
|
]
|
|
522
619
|
}),
|
|
620
|
+
/*#__PURE__*/ jsxs("div", {
|
|
621
|
+
children: [
|
|
622
|
+
/*#__PURE__*/ jsx("h4", {
|
|
623
|
+
children: "Show chunks"
|
|
624
|
+
}),
|
|
625
|
+
/*#__PURE__*/ jsx(Input, {
|
|
626
|
+
placeholder: "Search chunks",
|
|
627
|
+
value: chunkSearchQuery,
|
|
628
|
+
onChange: (e)=>setChunkSearchQuery(e.target.value),
|
|
629
|
+
suffix: /*#__PURE__*/ jsx(SearchOutlined, {
|
|
630
|
+
style: {
|
|
631
|
+
color: '#ccc'
|
|
632
|
+
}
|
|
633
|
+
}),
|
|
634
|
+
allowClear: true,
|
|
635
|
+
size: "small",
|
|
636
|
+
style: {
|
|
637
|
+
marginBottom: 8
|
|
638
|
+
}
|
|
639
|
+
}),
|
|
640
|
+
/*#__PURE__*/ jsx(Checkbox, {
|
|
641
|
+
indeterminate: checkedAssets.length > 0 && checkedAssets.length < assetNames.length,
|
|
642
|
+
checked: checkedAssets.length === assetNames.length,
|
|
643
|
+
onChange: (e)=>setCheckedAssets(e.target.checked ? assetNames : []),
|
|
644
|
+
className: treemap_module["all-none-checkbox"],
|
|
645
|
+
children: "All"
|
|
646
|
+
}),
|
|
647
|
+
/*#__PURE__*/ jsx("div", {
|
|
648
|
+
className: treemap_module["chunk-list"],
|
|
649
|
+
style: {
|
|
650
|
+
maxHeight: 180,
|
|
651
|
+
overflowY: 'auto'
|
|
652
|
+
},
|
|
653
|
+
children: assetNames.filter((name)=>name.toLowerCase().includes(chunkSearchQuery.toLowerCase())).map((name)=>/*#__PURE__*/ jsxs("div", {
|
|
654
|
+
className: treemap_module["chunk-item"],
|
|
655
|
+
style: {
|
|
656
|
+
height: 15,
|
|
657
|
+
lineHeight: '15px'
|
|
658
|
+
},
|
|
659
|
+
children: [
|
|
660
|
+
/*#__PURE__*/ jsx(Checkbox, {
|
|
661
|
+
checked: checkedAssets.includes(name),
|
|
662
|
+
onChange: (e)=>{
|
|
663
|
+
e.target.checked ? setCheckedAssets([
|
|
664
|
+
...checkedAssets,
|
|
665
|
+
name
|
|
666
|
+
]) : setCheckedAssets(checkedAssets.filter((a)=>a !== name));
|
|
667
|
+
},
|
|
668
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
669
|
+
title: name,
|
|
670
|
+
children: name
|
|
671
|
+
})
|
|
672
|
+
}),
|
|
673
|
+
/*#__PURE__*/ jsx("span", {
|
|
674
|
+
className: treemap_module["size-tag"],
|
|
675
|
+
children: formatSize(getChunkSize(name, 'value'))
|
|
676
|
+
})
|
|
677
|
+
]
|
|
678
|
+
}, name))
|
|
679
|
+
})
|
|
680
|
+
]
|
|
681
|
+
}),
|
|
523
682
|
/*#__PURE__*/ jsxs("div", {
|
|
524
683
|
children: [
|
|
525
684
|
/*#__PURE__*/ jsx("h4", {
|
|
@@ -576,65 +735,39 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
|
|
|
576
735
|
]
|
|
577
736
|
})
|
|
578
737
|
]
|
|
579
|
-
}),
|
|
580
|
-
/*#__PURE__*/ jsxs("div", {
|
|
581
|
-
children: [
|
|
582
|
-
/*#__PURE__*/ jsx("h4", {
|
|
583
|
-
children: "Show chunks"
|
|
584
|
-
}),
|
|
585
|
-
/*#__PURE__*/ jsx(Checkbox, {
|
|
586
|
-
indeterminate: checkedAssets.length > 0 && checkedAssets.length < assetNames.length,
|
|
587
|
-
checked: checkedAssets.length === assetNames.length,
|
|
588
|
-
onChange: (e)=>setCheckedAssets(e.target.checked ? assetNames : []),
|
|
589
|
-
className: treemap_module["all-none-checkbox"],
|
|
590
|
-
children: "All"
|
|
591
|
-
}),
|
|
592
|
-
/*#__PURE__*/ jsx("div", {
|
|
593
|
-
className: treemap_module["chunk-list"],
|
|
594
|
-
children: assetNames.map((name)=>/*#__PURE__*/ jsxs("div", {
|
|
595
|
-
className: treemap_module["chunk-item"],
|
|
596
|
-
children: [
|
|
597
|
-
/*#__PURE__*/ jsx(Checkbox, {
|
|
598
|
-
checked: checkedAssets.includes(name),
|
|
599
|
-
onChange: (e)=>{
|
|
600
|
-
e.target.checked ? setCheckedAssets([
|
|
601
|
-
...checkedAssets,
|
|
602
|
-
name
|
|
603
|
-
]) : setCheckedAssets(checkedAssets.filter((a)=>a !== name));
|
|
604
|
-
},
|
|
605
|
-
children: /*#__PURE__*/ jsx("span", {
|
|
606
|
-
title: name,
|
|
607
|
-
children: name
|
|
608
|
-
})
|
|
609
|
-
}),
|
|
610
|
-
/*#__PURE__*/ jsx("span", {
|
|
611
|
-
className: treemap_module["size-tag"],
|
|
612
|
-
children: formatSize(getChunkSize(name, 'value'))
|
|
613
|
-
})
|
|
614
|
-
]
|
|
615
|
-
}, name))
|
|
616
|
-
})
|
|
617
|
-
]
|
|
618
738
|
})
|
|
619
739
|
]
|
|
620
740
|
})
|
|
621
741
|
]
|
|
622
742
|
}),
|
|
623
|
-
/*#__PURE__*/
|
|
743
|
+
/*#__PURE__*/ jsxs("div", {
|
|
624
744
|
className: treemap_module["chart-wrapper"],
|
|
625
|
-
children:
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
745
|
+
children: [
|
|
746
|
+
/*#__PURE__*/ jsx(TreeMap, {
|
|
747
|
+
ref: chartRef,
|
|
748
|
+
treeData: filteredTreeData,
|
|
749
|
+
sizeType: sizeType,
|
|
750
|
+
onChartClick: handleChartClick,
|
|
751
|
+
highlightNodeId: highlightNodeId,
|
|
752
|
+
centerNodeId: centerNodeId,
|
|
753
|
+
rootPath: rootPath,
|
|
754
|
+
style: {
|
|
755
|
+
width: '100%',
|
|
756
|
+
height: '100%'
|
|
757
|
+
}
|
|
758
|
+
}),
|
|
759
|
+
moduleId ? /*#__PURE__*/ jsx(ServerAPIProvider, {
|
|
760
|
+
api: SDK.ServerAPI.API.GetAllModuleGraph,
|
|
761
|
+
body: {},
|
|
762
|
+
children: (modules)=>/*#__PURE__*/ jsx(ModuleAnalyzeComponent, {
|
|
763
|
+
cwd: rootPath,
|
|
764
|
+
moduleId: moduleId,
|
|
765
|
+
modules: modules,
|
|
766
|
+
show: showAnalyze,
|
|
767
|
+
setShow: setShowAnalyze
|
|
768
|
+
})
|
|
769
|
+
}) : null
|
|
770
|
+
]
|
|
638
771
|
})
|
|
639
772
|
]
|
|
640
773
|
});
|