@rsdoctor/components 1.5.18 → 1.6.1

package/dist/components/Charts/TreeMap.mjs

@@ -7,13 +7,14 @@ import { TitleComponent, TooltipComponent } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 import { Alert, Checkbox, Input, Radio } from "antd";
 import { FullscreenExitOutlined, FullscreenOutlined, LeftOutlined, RightOutlined, SearchOutlined } from "@ant-design/icons";
-import { formatSize } from "../../utils/index.mjs";
+import { formatSize, useThemeToken } from "../../utils/index.mjs";
 import { SDK } from "@rsdoctor/types";
 import { ServerAPIProvider } from "../Manifest/index.mjs";
 import { ModuleAnalyzeComponent } from "../../pages/ModuleAnalyze/index.mjs";
 import treemap_module from "./treemap.module.mjs";
 import { TREE_COLORS } from "./constants.mjs";
 import { isJavaScriptAsset } from "../../utils/assets.mjs";
+import { calculateTreeNodeTotalSize, calculateTreeNodesTotalSize } from "./treeMapSize.mjs";
 __rspack_external_echarts_core_d2845954.use([
     TreemapChart,
     TooltipComponent,
@@ -48,13 +49,13 @@ function getLuminance(hex) {
 function isDarkColor(hex) {
     return getLuminance(hex) < 0.4;
 }
-function getLevelOption() {
+function getLevelOption(gapColor) {
     return [
         {
             itemStyle: {
                 borderWidth: 0,
                 gapWidth: 4,
-                gapColor: '#ffffff'
+                gapColor
             }
         },
         {
@@ -65,7 +66,7 @@ function getLevelOption() {
                 ],
                 borderWidth: 5,
                 gapWidth: 4,
-                gapColor: '#ffffff'
+                gapColor
             },
             upperLabel: {
                 show: true,
@@ -76,11 +77,12 @@ function getLevelOption() {
         }
     ];
 }
-const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, highlightNodeId, centerNodeId, rootPath })=>{
+const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, onChartClick, highlightNodeId, centerNodeId, rootPath })=>{
     const [option, setOption] = useState(null);
     const chartRef = react.useRef(null);
     const chartDataRef = react.useRef([]);
     const clickTimeoutRef = react.useRef(null);
+    const themeToken = useThemeToken();
     useEffect(()=>{
         if (!treeData) return;
         function convert(node, index = 0, level = 0, parentColor, siblingIndex = 0, siblingCount = 1, chunkPath) {
@@ -153,15 +155,16 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
         }
         const data = treeData.map((item, index)=>convert(item, index, 0, void 0, index, treeData.length, void 0)).filter((item)=>('number' == typeof item.value ? item.value > 0 : false) || item.children && item.children.length > 0);
         chartDataRef.current = data;
+        const textColor = themeToken.colorText;
         setOption({
             color: TREE_COLORS,
             tooltip: {
                 padding: 10,
-                backgroundColor: '#fff',
-                borderColor: '#eee',
+                backgroundColor: themeToken.colorBgElevated,
+                borderColor: themeToken.colorBorder,
                 borderWidth: 1,
                 textStyle: {
-                    color: 'rgba(0, 0, 0, 0.8)'
+                    color: textColor
                 },
                 confine: true,
                 extraCssText: 'max-width: 450px; word-wrap: break-word;',
@@ -192,12 +195,12 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
                 </div>`;
                     }
                     const rows = [];
-                    if (void 0 !== sourceSize && sourceSize > 0) rows.push(makeRow('Stat size', formatSize(sourceSize), '#52c41a'));
-                    if (void 0 !== bundledSize && bundledSize > 0) rows.push(makeRow('Parsed size', formatSize(bundledSize), '#d96420'));
-                    if (void 0 !== gzipSize && gzipSize > 0) rows.push(makeRow('Gzipped size', formatSize(gzipSize), '#1677ff'));
+                    if (void 0 !== sourceSize && sourceSize > 0) rows.push(makeRow('Stat size', formatSize(sourceSize), '#43c6d9'));
+                    if (void 0 !== bundledSize && bundledSize > 0) rows.push(makeRow('Parsed size', formatSize(bundledSize), '#5b8ff9'));
+                    if (void 0 !== gzipSize && gzipSize > 0) rows.push(makeRow('Gzipped size', formatSize(gzipSize), '#f2b84b'));
                     return `
                 <div style="font-family: sans-serif; font-size: 12px; line-height: 1.5;">
-                  <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>
+                  <div style="margin-bottom: 6px; max-width: 400px; word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; white-space: normal; color: ${textColor};">${__rspack_external_echarts_core_d2845954.format.encodeHTML(path)}</div>
                   ${rows.join('')}
                 </div>
               `;
@@ -206,9 +209,6 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
             series: [
                 {
                     type: 'treemap',
-                    itemStyle: {
-                        gapColor: '#ffffff'
-                    },
                     label: {
                         show: true,
                         formatter: '{b}',
@@ -235,7 +235,7 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
                             4
                         ]
                     },
-                    levels: getLevelOption(),
+                    levels: getLevelOption(themeToken.colorBgContainer),
                     data: data,
                     breadcrumb: {
                         show: true,
@@ -247,17 +247,17 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
                             color: '#999',
                             borderColor: 'transparent',
                             borderWidth: 0,
-                            borderRadius: 0
+                            borderRadius: 0,
+                            textStyle: {
+                                fontFamily: 'sans-serif',
+                                fontSize: 12,
+                                color: 'white'
+                            }
                         },
                         emphasis: {
                             itemStyle: {
                                 color: '#333'
                             }
-                        },
-                        textStyle: {
-                            fontFamily: 'sans-serif',
-                            fontSize: 12,
-                            color: '#666'
                         }
                     },
                     roam: true,
@@ -270,7 +270,7 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
                     bottom: 30,
                     left: 0,
                     right: 0,
-                    zoomLimit: {
+                    scaleLimit: {
                         min: 0.5,
                         max: 5
                     }
@@ -281,7 +281,8 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
         treeData,
         sizeType,
         highlightNodeId,
-        rootPath
+        rootPath,
+        themeToken
     ]);
     useEffect(()=>{
         if (centerNodeId && chartRef.current && option) {
@@ -359,7 +360,6 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
         }, []);
     return option ? /*#__PURE__*/ jsxs("div", {
         className: treemap_module["chart-container"],
-        style: style,
         children: [
             /*#__PURE__*/ jsx(Alert, {
                 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.",
@@ -369,37 +369,42 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
                     marginBottom: 0
                 }
             }),
-            /*#__PURE__*/ jsx(core, {
-                ref: chartRef,
-                option: option,
-                echarts: __rspack_external_echarts_core_d2845954,
-                onEvents: {
-                    click: (params)=>{
-                        if (clickTimeoutRef.current) window.clearTimeout(clickTimeoutRef.current);
-                        clickTimeoutRef.current = window.setTimeout(()=>{
-                            if (chartRef.current) {
-                                const instance = chartRef.current.getEchartsInstance();
-                                const data = params?.data;
-                                if (instance && data?.id !== void 0) instance.dispatchAction({
-                                    type: 'treemapZoomToNode',
-                                    seriesIndex: 0,
-                                    targetNodeId: String(data.id)
-                                });
+            /*#__PURE__*/ jsx("div", {
+                style: {
+                    flex: 1
+                },
+                children: /*#__PURE__*/ jsx(core, {
+                    ref: chartRef,
+                    option: option,
+                    echarts: __rspack_external_echarts_core_d2845954,
+                    onEvents: {
+                        click: (params)=>{
+                            if (clickTimeoutRef.current) window.clearTimeout(clickTimeoutRef.current);
+                            clickTimeoutRef.current = window.setTimeout(()=>{
+                                if (chartRef.current) {
+                                    const instance = chartRef.current.getEchartsInstance();
+                                    const data = params?.data;
+                                    if (instance && data?.id !== void 0) instance.dispatchAction({
+                                        type: 'treemapZoomToNode',
+                                        seriesIndex: 0,
+                                        targetNodeId: String(data.id)
+                                    });
+                                }
+                            }, 180);
+                        },
+                        dblclick: (params)=>{
+                            if (clickTimeoutRef.current) {
+                                window.clearTimeout(clickTimeoutRef.current);
+                                clickTimeoutRef.current = null;
                             }
-                        }, 180);
-                    },
-                    dblclick: (params)=>{
-                        if (clickTimeoutRef.current) {
-                            window.clearTimeout(clickTimeoutRef.current);
-                            clickTimeoutRef.current = null;
+                            onChartClick?.(params);
                         }
-                        onChartClick?.(params);
+                    },
+                    style: {
+                        width: '100%',
+                        height: '100%'
                     }
-                },
-                style: {
-                    width: '100%',
-                    height: '100%'
-                }
+                })
             })
         ]
     }) : null;
@@ -459,42 +464,37 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
     }, [
         onChartClick
     ]);
-    const enterFullscreen = useCallback(()=>{
-        if (containerRef.current) {
-            const el = containerRef.current;
-            if (el.requestFullscreen) el.requestFullscreen().then(()=>setIsFullscreen(true)).catch((err)=>console.error('Failed to enter fullscreen:', err));
-            else if (el.webkitRequestFullscreen) try {
-                el.webkitRequestFullscreen();
-                setIsFullscreen(true);
-            } catch (err) {
-                console.error('Failed to enter fullscreen (webkit):', err);
-            }
-            else if (el.mozRequestFullScreen) try {
-                el.mozRequestFullScreen();
-                setIsFullscreen(true);
-            } catch (err) {
-                console.error('Failed to enter fullscreen (moz):', err);
-            }
-            else if (el.msRequestFullscreen) try {
-                el.msRequestFullscreen();
-                setIsFullscreen(true);
-            } catch (err) {
-                console.error('Failed to enter fullscreen (ms):', err);
-            }
-            else console.error('Fullscreen API is not supported in this browser.');
+    const enterFullscreen = ()=>{
+        if (!containerRef.current) return;
+        const el = containerRef.current;
+        if (el.requestFullscreen) el.requestFullscreen().then(()=>setIsFullscreen(true)).catch((err)=>console.error('Failed to enter fullscreen:', err));
+        else if (el.webkitRequestFullscreen) try {
+            el.webkitRequestFullscreen();
+            setIsFullscreen(true);
+        } catch (err) {
+            console.error('Failed to enter fullscreen (webkit):', err);
         }
-    }, []);
-    const exitFullscreen = useCallback(()=>{
+        else if (el.mozRequestFullScreen) try {
+            el.mozRequestFullScreen();
+            setIsFullscreen(true);
+        } catch (err) {
+            console.error('Failed to enter fullscreen (moz):', err);
+        }
+        else if (el.msRequestFullscreen) try {
+            el.msRequestFullscreen();
+            setIsFullscreen(true);
+        } catch (err) {
+            console.error('Failed to enter fullscreen (ms):', err);
+        }
+        else console.error('Fullscreen API is not supported in this browser.');
+    };
+    const exitFullscreen = ()=>{
         document.exitFullscreen().then(()=>setIsFullscreen(false)).catch((err)=>console.error('Failed to exit fullscreen:', err));
-    }, []);
-    const toggleFullscreen = useCallback(()=>{
+    };
+    const toggleFullscreen = ()=>{
         if (isFullscreen) exitFullscreen();
         else enterFullscreen();
-    }, [
-        isFullscreen,
-        enterFullscreen,
-        exitFullscreen
-    ]);
+    };
     useEffect(()=>{
         const handleFullscreenChange = ()=>{
             setIsFullscreen(!!document.fullscreenElement);
@@ -539,47 +539,27 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
         filteredTreeData,
         searchQuery
     ]);
-    const handleSearchResultClick = useCallback((nodeId)=>{
+    const handleSearchResultClick = (nodeId)=>{
         setHighlightNodeId(nodeId);
         setCenterNodeId(nodeId);
-    }, []);
-    const removeRootPath = useCallback((filepath)=>{
+    };
+    const removeRootPath = (filepath)=>{
         if (!rootPath || !filepath) return filepath;
         const normalizedRoot = rootPath.replace(/\\/g, '/').replace(/\/$/, '');
         const normalizedPath = filepath.replace(/\\/g, '/');
         if (normalizedPath.startsWith(normalizedRoot + '/')) return normalizedPath.slice(normalizedRoot.length + 1);
         if (normalizedPath === normalizedRoot) return '';
         return filepath;
-    }, [
-        rootPath
-    ]);
-    const getSize = useCallback((node, type)=>{
-        if ('stat' === type) return node.sourceSize || 0;
-        if ('parsed' === type) return node.bundledSize || 0;
-        if ('gzip' === type) return node.gzipSize || 0;
-        if ('value' === type) return node.value || 0;
-        if (node.value) return node.value;
-        return 0;
-    }, []);
-    const calculateNodeTotalSize = useCallback((node, type)=>{
-        let size = getSize(node, type);
-        if (node.children && node.children.length > 0) {
-            const childrenSize = node.children.reduce((sum, child)=>sum + calculateNodeTotalSize(child, type), 0);
-            if (0 === size || !node.path && childrenSize > 0) size = childrenSize;
-        }
-        return size;
-    }, [
-        getSize
-    ]);
-    const getChunkSize = useCallback((name, type)=>{
+    };
+    const getChunkSize = (name, type)=>{
         const node = treeData.find((n)=>n.name === name);
         if (!node) return 0;
         const sizeTypeToUse = type || sizeType;
-        return calculateNodeTotalSize(node, sizeTypeToUse);
-    }, [
-        treeData,
-        sizeType,
-        calculateNodeTotalSize
+        return calculateTreeNodeTotalSize(node, sizeTypeToUse);
+    };
+    const allAssetsSize = useMemo(()=>calculateTreeNodesTotalSize(filteredTreeData, sizeType), [
+        filteredTreeData,
+        sizeType
     ]);
     return /*#__PURE__*/ jsxs("div", {
         className: treemap_module.treemap,
@@ -650,12 +630,21 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
                                             marginBottom: 8
                                         }
                                     }),
-                                    /*#__PURE__*/ jsx(Checkbox, {
-                                        indeterminate: checkedAssets.length > 0 && checkedAssets.length < visibleAssetNames.length,
-                                        checked: visibleAssetNames.length > 0 && checkedAssets.length === visibleAssetNames.length,
-                                        onChange: (e)=>setCheckedAssets(e.target.checked ? visibleAssetNames : []),
-                                        className: treemap_module["all-none-checkbox"],
-                                        children: "All"
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: treemap_module["chunk-item"],
+                                        children: [
+                                            /*#__PURE__*/ jsx(Checkbox, {
+                                                indeterminate: checkedAssets.length > 0 && checkedAssets.length < visibleAssetNames.length,
+                                                checked: visibleAssetNames.length > 0 && checkedAssets.length === visibleAssetNames.length,
+                                                onChange: (e)=>setCheckedAssets(e.target.checked ? visibleAssetNames : []),
+                                                className: treemap_module["all-none-checkbox"],
+                                                children: "All"
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: treemap_module["size-tag"],
+                                                children: formatSize(allAssetsSize)
+                                            })
+                                        ]
                                     }),
                                     /*#__PURE__*/ jsx(Checkbox, {
                                         checked: showOnlyJavaScriptAssets,
@@ -770,11 +759,7 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
                         onChartClick: handleChartClick,
                         highlightNodeId: highlightNodeId,
                         centerNodeId: centerNodeId,
-                        rootPath: rootPath,
-                        style: {
-                            width: '100%',
-                            height: '100%'
-                        }
+                        rootPath: rootPath
                     }),
                     moduleId ? /*#__PURE__*/ jsx(ServerAPIProvider, {
                         api: SDK.ServerAPI.API.GetAllModuleGraph,