@rsdoctor/components 1.3.13-beta.0 → 1.3.13

package/dist/components/Charts/TreeMap.mjs

@@ -2,19 +2,21 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import react, { memo, useCallback, useEffect, useMemo, useState } from "react";
 import core from "echarts-for-react/esm/core";
 import { TreemapChart } from "echarts/charts";
-import { TooltipComponent } from "echarts/components";
+import { TitleComponent, TooltipComponent } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
-import { BUNDLE_ANALYZER_COLORS, COLOR_GROUPS } from "./constants.mjs";
 import { Checkbox, Input, Radio } from "antd";
 import { FullscreenExitOutlined, FullscreenOutlined, LeftOutlined, RightOutlined, SearchOutlined } from "@ant-design/icons";
 import { formatSize } 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 * as __WEBPACK_EXTERNAL_MODULE_echarts_core_d2845954__ from "echarts/core";
-__WEBPACK_EXTERNAL_MODULE_echarts_core_d2845954__.use([
+import { TREE_COLORS } from "./constants.mjs";
+import * as __rspack_external_echarts_core_d2845954 from "echarts/core";
+__rspack_external_echarts_core_d2845954.use([
     TreemapChart,
     TooltipComponent,
+    TitleComponent,
     CanvasRenderer
 ]);
 function hashString(str) {
@@ -22,33 +24,56 @@ function hashString(str) {
     for(let i = 0; i < str.length; i++)hash = (hash << 5) + hash + str.charCodeAt(i);
     return hash >>> 0;
 }
+function blendWithWhite(hex, ratio) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    const blendedR = Math.round(r * ratio + 255 * (1 - ratio));
+    const blendedG = Math.round(g * ratio + 255 * (1 - ratio));
+    const blendedB = Math.round(b * ratio + 255 * (1 - ratio));
+    return `#${blendedR.toString(16).padStart(2, '0')}${blendedG.toString(16).padStart(2, '0')}${blendedB.toString(16).padStart(2, '0')}`;
+}
+function getLuminance(hex) {
+    const r = parseInt(hex.slice(1, 3), 16) / 255;
+    const g = parseInt(hex.slice(3, 5), 16) / 255;
+    const b = parseInt(hex.slice(5, 7), 16) / 255;
+    const [rs, gs, bs] = [
+        r,
+        g,
+        b
+    ].map((val)=>val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4));
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function isDarkColor(hex) {
+    return getLuminance(hex) < 0.4;
+}
 function getLevelOption() {
     return [
         {
             itemStyle: {
-                gapWidth: 3,
-                borderColor: '#eee'
-            },
-            upperLabel: {
-                show: false
-            }
-        },
-        {
-            itemStyle: {
-                borderWidth: 5,
+                borderWidth: 0,
                 gapWidth: 2
             }
         },
         {
-            colorSaturation: [
-                0.3,
-                0.9
-            ],
             itemStyle: {
+                borderColorAlpha: [
+                    1,
+                    0.3
+                ],
                 borderWidth: 5,
-                gapWidth: 2,
-                borderColorSaturation: 0.6,
-                borderColor: '#eee'
+                gapWidth: 1
+            },
+            upperLabel: {
+                show: true,
+                color: '#ffffff',
+                fontSize: 14,
+                height: 30
+            },
+            emphasis: {
+                itemStyle: {
+                    borderColor: '#ccc'
+                }
             }
         }
     ];
@@ -66,10 +91,9 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
     ]);
     useEffect(()=>{
         if (!treeData) return;
-        function convert(node, colorGroup, level = 0) {
-            const groupColors = BUNDLE_ANALYZER_COLORS[colorGroup];
-            const _level = level;
-            const children = node.children?.map((c)=>convert(c, colorGroup, _level + 1));
+        function convert(node, index = 0, level = 0, parentColor, siblingIndex = 0, siblingCount = 1) {
+            const baseColor = parentColor || TREE_COLORS[index % TREE_COLORS.length];
+            const children = node.children?.map((c, childIndex)=>convert(c, index, level + 1, baseColor, childIndex, node.children?.length || 0));
             let val = 0;
             if ('stat' === sizeType) val = node.sourceSize || 0;
             else if ('parsed' === sizeType) val = node.bundledSize || 0;
@@ -78,21 +102,43 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
             if (!val && node.value) val = node.value;
             const nodeId = node.path ? hashString(node.path) : hashString(node.name || '');
             const isHighlighted = highlightNodeId === nodeId;
-            console.log(level % groupColors.length - 1, groupColors, colorGroup);
+            const baseColorRatio = 0 === level ? 1 : Math.max(0.2, 1 - 0.2 * level);
+            const baseBorderRatio = 0 === level ? 1 : Math.max(0.3, 1 - 0.25 * level);
+            const siblingGradientRange = 0.15;
+            const siblingRatio = siblingCount > 1 ? 1 - siblingIndex / (siblingCount - 1) * siblingGradientRange : 1;
+            const colorRatio = baseColorRatio * siblingRatio;
+            const borderRatio = baseBorderRatio * siblingRatio;
+            const nodeColor = isHighlighted ? '#fff5f5' : 0 === level ? blendWithWhite(baseColor, 0.8) : blendWithWhite(baseColor, colorRatio);
+            const nodeBorderColor = isHighlighted ? '#ff4d4f' : 0 === level ? baseColor : blendWithWhite(baseColor, borderRatio);
+            const isDark = isDarkColor(nodeColor);
+            const textColor = isDark ? '#ffffff' : '#000000';
+            const textBorderColor = isDark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.1)';
             const result = {
                 id: nodeId,
                 name: node.name,
                 value: val,
                 path: node.path || node.name,
-                sourceSize: node.sourceSize ?? ('stat' === sizeType ? val : 0),
-                bundledSize: node.bundledSize ?? ('parsed' === sizeType ? val : 0),
-                gzipSize: node.gzipSize ?? ('gzip' === sizeType ? val : 0),
+                sourceSize: node.sourceSize ?? ('stat' === sizeType ? val : void 0),
+                bundledSize: node.bundledSize ?? ('parsed' === sizeType ? val : void 0),
+                gzipSize: node.gzipSize ?? ('gzip' === sizeType ? val : void 0),
+                moduleId: node.id,
                 itemStyle: {
                     borderWidth: isHighlighted ? 4 : 1,
-                    gapWidth: 2,
-                    color: isHighlighted ? '#fff5f5' : groupColors[level % groupColors.length - 1],
-                    borderColor: isHighlighted ? '#ff4d4f' : groupColors[level % groupColors.length - 1],
-                    borderColorSaturation: isHighlighted ? 1 : 0.5
+                    color: nodeColor,
+                    borderColor: nodeBorderColor,
+                    ...0 === level && {
+                        gapWidth: 2
+                    }
+                },
+                label: {
+                    show: true,
+                    color: textColor,
+                    textBorderColor: textBorderColor,
+                    textBorderWidth: 1
+                },
+                upperLabel: 0 === level ? void 0 : {
+                    show: true,
+                    color: textColor
                 }
             };
             if (children && children.length > 0) result.children = children;
@@ -105,12 +151,10 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
             };
             return result;
         }
-        const data = treeData.map((item, index)=>{
-            const group = COLOR_GROUPS[index % COLOR_GROUPS.length];
-            return convert(item, group, 1);
-        }).filter((item)=>item.value > 0 || item.children && item.children.length > 0);
+        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);
         chartDataRef.current = data;
         setOption({
+            color: TREE_COLORS,
             title: {
                 text: 'Rsdoctor TreeMap',
                 left: 'center',
@@ -132,7 +176,7 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
                 confine: true,
                 extraCssText: 'max-width: 450px; word-wrap: break-word;',
                 position: function(pos, _params, _dom, _rect, size) {
-                    var obj = {
+                    const obj = {
                         top: pos[1] + 10
                     };
                     if (pos[0] < size.viewSize[0] / 2) obj.left = pos[0] + 10;
@@ -141,17 +185,16 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
                 },
                 formatter: function(info) {
                     const node = info.data || {};
-                    const name = node.name;
-                    let path = node.path || name;
+                    let path = 'string' == typeof node.path ? node.path : 'string' == typeof node.name ? node.name : String(node.name ?? '');
                     if (rootPath && path) {
                         const normalizedRoot = rootPath.replace(/\\/g, '/').replace(/\/$/, '');
                         const normalizedPath = path.replace(/\\/g, '/');
                         if (normalizedPath.startsWith(normalizedRoot + '/')) path = normalizedPath.slice(normalizedRoot.length + 1);
                         else if (normalizedPath === normalizedRoot) path = '';
                     }
-                    const sourceSize = node.sourceSize || node.value;
-                    const bundledSize = node.bundledSize;
-                    const gzipSize = node.gzipSize;
+                    const sourceSize = 'number' == typeof node.sourceSize && node.sourceSize > 0 ? node.sourceSize : 'number' == typeof node.value && node.value > 0 && 'stat' === sizeType ? node.value : void 0;
+                    const bundledSize = 'number' == typeof node.bundledSize && node.bundledSize > 0 ? node.bundledSize : void 0;
+                    const gzipSize = 'number' == typeof node.gzipSize && node.gzipSize > 0 ? node.gzipSize : void 0;
                     function makeRow(label, value, color) {
                         return `<div class="${treemap_module["tooltip-row"]}">
                     <span class="${treemap_module["tooltip-label"]}" style="color: ${color};">${label}</span>
@@ -159,12 +202,12 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
                 </div>`;
                     }
                     const rows = [];
-                    if (void 0 !== sourceSize) rows.push(makeRow('Stat size', formatSize(sourceSize), '#52c41a'));
-                    if (void 0 !== bundledSize) rows.push(makeRow('Parsed size', formatSize(bundledSize), '#fadb14'));
-                    if (void 0 !== gzipSize) rows.push(makeRow('Gzipped size', formatSize(gzipSize), '#1677ff'));
+                    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'));
                     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);">${__WEBPACK_EXTERNAL_MODULE_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: rgba(0, 0, 0, 0.8);">${__rspack_external_echarts_core_d2845954.format.encodeHTML(path)}</div>
                   ${rows.join('')}
                 </div>
               `;
@@ -177,11 +220,9 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
                         show: true,
                         formatter: '{b}',
                         fontSize: 12,
-                        color: '#000',
                         position: 'inside',
                         fontWeight: 'normal',
-                        textBorderColor: '#fff',
-                        textBorderWidth: 2,
+                        textBorderWidth: 1,
                         padding: [
                             4,
                             8,
@@ -192,7 +233,6 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
                     upperLabel: {
                         show: true,
                         height: 30,
-                        color: '#000',
                         fontSize: 12,
                         fontWeight: 'normal',
                         padding: [
@@ -202,9 +242,6 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
                             4
                         ]
                     },
-                    itemStyle: {
-                        borderColor: '#fff'
-                    },
                     levels: getLevelOption(),
                     data: data,
                     breadcrumb: {
@@ -239,7 +276,11 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
                     top: 40,
                     bottom: 30,
                     left: 0,
-                    right: 0
+                    right: 0,
+                    zoomLimit: {
+                        min: 0.5,
+                        max: 5
+                    }
                 }
             ]
         });
@@ -255,12 +296,13 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
             if (chartInstance) {
                 const findNodeInfo = (data, targetId, path = [])=>{
                     for (const item of data){
+                        const itemName = 'string' == typeof item.name ? item.name : String(item.name ?? '');
                         const currentPath = [
                             ...path,
-                            item.name
+                            itemName
                         ];
                         if (item.id === targetId) return {
-                            name: item.name,
+                            name: itemName,
                             path: currentPath
                         };
                         if (item.children) {
@@ -273,13 +315,16 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
                 setTimeout(()=>{
                     const nodeInfo = findNodeInfo(chartDataRef.current, centerNodeId);
                     if (!nodeInfo) return;
+                    const nodeName = nodeInfo.name;
                     try {
                         chartInstance.dispatchAction({
                             type: 'highlight',
                             seriesIndex: 0,
-                            name: nodeInfo.name
+                            name: nodeName
                         });
-                    } catch (e) {}
+                    } catch (e) {
+                        console.error('Failed to highlight node with name:', nodeName, e);
+                    }
                     const zoomStrategies = [
                         ()=>chartInstance.dispatchAction({
                                 type: 'treemapZoomToNode',
@@ -289,7 +334,7 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
                         ()=>chartInstance.dispatchAction({
                                 type: 'treemapZoomToNode',
                                 seriesIndex: 0,
-                                name: nodeInfo.name
+                                name: nodeName
                             }),
                         ()=>chartInstance.dispatchAction({
                                 type: 'treemapZoomToNode',
@@ -316,21 +361,41 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartCli
         centerNodeId,
         option
     ]);
+    useEffect(()=>{
+        if (!chartRef.current || !option) return;
+        const chartInstance = chartRef.current.getEchartsInstance();
+        if (!chartInstance) return;
+        const handleDblClick = ()=>{
+            try {
+                chartInstance.dispatchAction({
+                    type: 'treemapRootToNode',
+                    seriesIndex: 0
+                });
+            } catch (e) {}
+        };
+        chartInstance.on('dblclick', handleDblClick);
+        return ()=>{
+            chartInstance.off('dblclick', handleDblClick);
+        };
+    }, [
+        option
+    ]);
     return option ? /*#__PURE__*/ jsx("div", {
         className: treemap_module["chart-container"],
         style: style,
         children: /*#__PURE__*/ jsx(core, {
             ref: chartRef,
             option: option,
-            echarts: __WEBPACK_EXTERNAL_MODULE_echarts_core_d2845954__,
+            echarts: __rspack_external_echarts_core_d2845954,
             onEvents: {
                 click: (params)=>{
                     if (chartRef.current) {
                         const instance = chartRef.current.getEchartsInstance();
-                        if (instance && params?.data?.id) instance.dispatchAction({
+                        const data = params?.data;
+                        if (instance && data?.id !== void 0) instance.dispatchAction({
                             type: 'treemapZoomToNode',
                             seriesIndex: 0,
-                            targetNodeId: String(params.data.id)
+                            targetNodeId: String(data.id)
                         });
                     }
                     onChartClick?.(params);
@@ -367,10 +432,46 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
     const [isFullscreen, setIsFullscreen] = useState(false);
     const [highlightNodeId, setHighlightNodeId] = useState();
     const [centerNodeId, setCenterNodeId] = useState();
+    const [moduleId, setModuleId] = useState('');
+    const [showAnalyze, setShowAnalyze] = useState(false);
+    const [chunkSearchQuery, setChunkSearchQuery] = useState('');
     const chartRef = react.useRef(null);
     const containerRef = react.useRef(null);
+    const handleChartClick = useCallback((params)=>{
+        onChartClick?.(params);
+        const data = params.data;
+        const moduleId = data?.moduleId;
+        if (void 0 !== moduleId) {
+            setModuleId(moduleId);
+            setShowAnalyze(true);
+        }
+    }, [
+        onChartClick
+    ]);
     const enterFullscreen = useCallback(()=>{
-        if (containerRef.current) containerRef.current.requestFullscreen().then(()=>setIsFullscreen(true)).catch((err)=>console.error('Failed to enter fullscreen:', err));
+        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 exitFullscreen = useCallback(()=>{
         document.exitFullscreen().then(()=>setIsFullscreen(false)).catch((err)=>console.error('Failed to exit fullscreen:', err));
@@ -392,6 +493,18 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
             document.removeEventListener('fullscreenchange', handleFullscreenChange);
         };
     }, []);
+    const filteredTreeData = useMemo(()=>{
+        let filtered = treeData.filter((item)=>checkedAssets.includes(item.name));
+        if (chunkSearchQuery.trim()) {
+            const searchLower = chunkSearchQuery.toLowerCase();
+            filtered = filtered.filter((item)=>item.name.toLowerCase().includes(searchLower));
+        }
+        return filtered;
+    }, [
+        treeData,
+        checkedAssets,
+        chunkSearchQuery
+    ]);
     const searchResults = useMemo(()=>{
         if (!searchQuery.trim()) return [];
         const regex = new RegExp(searchQuery, 'i');
@@ -406,19 +519,12 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
             }
             if (node.children) node.children.forEach(collectMatchingPaths);
         };
-        treeData.forEach(collectMatchingPaths);
+        filteredTreeData.forEach(collectMatchingPaths);
         return results;
     }, [
-        treeData,
+        filteredTreeData,
         searchQuery
     ]);
-    const filteredTreeData = useMemo(()=>{
-        let filtered = treeData.filter((item)=>checkedAssets.includes(item.name));
-        return filtered;
-    }, [
-        treeData,
-        checkedAssets
-    ]);
     const handleSearchResultClick = useCallback((nodeId)=>{
         setHighlightNodeId(nodeId);
         setCenterNodeId(nodeId);
@@ -510,6 +616,60 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
                                     })
                                 ]
                             }),
+                            /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("h4", {
+                                        children: "Show chunks"
+                                    }),
+                                    /*#__PURE__*/ jsx(Input, {
+                                        placeholder: "Search chunks",
+                                        value: chunkSearchQuery,
+                                        onChange: (e)=>setChunkSearchQuery(e.target.value),
+                                        suffix: /*#__PURE__*/ jsx(SearchOutlined, {
+                                            style: {
+                                                color: '#ccc'
+                                            }
+                                        }),
+                                        allowClear: true,
+                                        size: "small",
+                                        style: {
+                                            marginBottom: 8
+                                        }
+                                    }),
+                                    /*#__PURE__*/ jsx(Checkbox, {
+                                        indeterminate: checkedAssets.length > 0 && checkedAssets.length < assetNames.length,
+                                        checked: checkedAssets.length === assetNames.length,
+                                        onChange: (e)=>setCheckedAssets(e.target.checked ? assetNames : []),
+                                        className: treemap_module["all-none-checkbox"],
+                                        children: "All"
+                                    }),
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: treemap_module["chunk-list"],
+                                        children: assetNames.filter((name)=>name.toLowerCase().includes(chunkSearchQuery.toLowerCase())).map((name)=>/*#__PURE__*/ jsxs("div", {
+                                                className: treemap_module["chunk-item"],
+                                                children: [
+                                                    /*#__PURE__*/ jsx(Checkbox, {
+                                                        checked: checkedAssets.includes(name),
+                                                        onChange: (e)=>{
+                                                            e.target.checked ? setCheckedAssets([
+                                                                ...checkedAssets,
+                                                                name
+                                                            ]) : setCheckedAssets(checkedAssets.filter((a)=>a !== name));
+                                                        },
+                                                        children: /*#__PURE__*/ jsx("span", {
+                                                            title: name,
+                                                            children: name
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        className: treemap_module["size-tag"],
+                                                        children: formatSize(getChunkSize(name, 'value'))
+                                                    })
+                                                ]
+                                            }, name))
+                                    })
+                                ]
+                            }),
                             /*#__PURE__*/ jsxs("div", {
                                 children: [
                                     /*#__PURE__*/ jsx("h4", {
@@ -566,65 +726,39 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
                                         ]
                                     })
                                 ]
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                children: [
-                                    /*#__PURE__*/ jsx("h4", {
-                                        children: "Show chunks"
-                                    }),
-                                    /*#__PURE__*/ jsx(Checkbox, {
-                                        indeterminate: checkedAssets.length > 0 && checkedAssets.length < assetNames.length,
-                                        checked: checkedAssets.length === assetNames.length,
-                                        onChange: (e)=>setCheckedAssets(e.target.checked ? assetNames : []),
-                                        className: treemap_module["all-none-checkbox"],
-                                        children: "All"
-                                    }),
-                                    /*#__PURE__*/ jsx("div", {
-                                        className: treemap_module["chunk-list"],
-                                        children: assetNames.map((name)=>/*#__PURE__*/ jsxs("div", {
-                                                className: treemap_module["chunk-item"],
-                                                children: [
-                                                    /*#__PURE__*/ jsx(Checkbox, {
-                                                        checked: checkedAssets.includes(name),
-                                                        onChange: (e)=>{
-                                                            e.target.checked ? setCheckedAssets([
-                                                                ...checkedAssets,
-                                                                name
-                                                            ]) : setCheckedAssets(checkedAssets.filter((a)=>a !== name));
-                                                        },
-                                                        children: /*#__PURE__*/ jsx("span", {
-                                                            title: name,
-                                                            children: name
-                                                        })
-                                                    }),
-                                                    /*#__PURE__*/ jsx("span", {
-                                                        className: treemap_module["size-tag"],
-                                                        children: formatSize(getChunkSize(name, 'value'))
-                                                    })
-                                                ]
-                                            }, name))
-                                    })
-                                ]
                             })
                         ]
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx("div", {
+            /*#__PURE__*/ jsxs("div", {
                 className: treemap_module["chart-wrapper"],
-                children: /*#__PURE__*/ jsx(TreeMap, {
-                    ref: chartRef,
-                    treeData: filteredTreeData,
-                    sizeType: sizeType,
-                    onChartClick: onChartClick,
-                    highlightNodeId: highlightNodeId,
-                    centerNodeId: centerNodeId,
-                    rootPath: rootPath,
-                    style: {
-                        width: '100%',
-                        height: '100%'
-                    }
-                })
+                children: [
+                    /*#__PURE__*/ jsx(TreeMap, {
+                        ref: chartRef,
+                        treeData: filteredTreeData,
+                        sizeType: sizeType,
+                        onChartClick: handleChartClick,
+                        highlightNodeId: highlightNodeId,
+                        centerNodeId: centerNodeId,
+                        rootPath: rootPath,
+                        style: {
+                            width: '100%',
+                            height: '100%'
+                        }
+                    }),
+                    moduleId ? /*#__PURE__*/ jsx(ServerAPIProvider, {
+                        api: SDK.ServerAPI.API.GetAllModuleGraph,
+                        body: {},
+                        children: (modules)=>/*#__PURE__*/ jsx(ModuleAnalyzeComponent, {
+                                cwd: rootPath,
+                                moduleId: moduleId,
+                                modules: modules,
+                                show: showAnalyze,
+                                setShow: setShowAnalyze
+                            })
+                    }) : null
+                ]
             })
         ]
     });