@rsdoctor/components 1.3.12 → 1.3.13-beta.0

package/dist/components/Charts/TreeMap.mjs

@@ -1,16 +1,22 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import react, { memo, useEffect, useMemo, useState } from "react";
+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 { CanvasRenderer } from "echarts/renderers";
 import { BUNDLE_ANALYZER_COLORS, COLOR_GROUPS } from "./constants.mjs";
-import { Card, Checkbox, Space, Tag, Tooltip, Typography } from "antd";
-import { InfoCircleOutlined, VerticalAlignBottomOutlined, VerticalAlignTopOutlined } from "@ant-design/icons";
-import { formatSize, useI18n } from "../../utils/index.mjs";
-import { SearchModal } from "../../pages/BundleSize/components/search-modal.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 treemap_module from "./treemap.module.mjs";
 import * as __WEBPACK_EXTERNAL_MODULE_echarts_core_d2845954__ from "echarts/core";
+__WEBPACK_EXTERNAL_MODULE_echarts_core_d2845954__.use([
+    TreemapChart,
+    TooltipComponent,
+    CanvasRenderer
+]);
 function hashString(str) {
     let hash = 5381;
     for(let i = 0; i < str.length; i++)hash = (hash << 5) + hash + str.charCodeAt(i);
@@ -20,34 +26,37 @@ function getLevelOption() {
     return [
         {
             itemStyle: {
-                color: 'white',
-                borderColor: '#eee',
-                borderWidth: 5,
-                gapWidth: 5
+                gapWidth: 3,
+                borderColor: '#eee'
             },
-            emphasis: {
-                itemStyle: {
-                    borderColor: '#a29f9f'
-                }
+            upperLabel: {
+                show: false
+            }
+        },
+        {
+            itemStyle: {
+                borderWidth: 5,
+                gapWidth: 2
             }
         },
         {
             colorSaturation: [
-                0.25,
-                0.5
+                0.3,
+                0.9
             ],
             itemStyle: {
                 borderWidth: 5,
-                gapWidth: 5,
-                borderColorSaturation: 0.5,
+                gapWidth: 2,
+                borderColorSaturation: 0.6,
                 borderColor: '#eee'
             }
         }
     ];
 }
-const TreeMapInner = /*#__PURE__*/ memo(({ treeData, valueKey = 'sourceSize', style, onChartClick, forwardedRef })=>{
+const TreeMapInner = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, forwardedRef, highlightNodeId, centerNodeId, rootPath })=>{
     const [option, setOption] = useState(null);
     const chartRef = react.useRef(null);
+    const chartDataRef = react.useRef([]);
     useEffect(()=>{
         if (forwardedRef && chartRef.current) if ('function' == typeof forwardedRef) forwardedRef(chartRef.current);
         else forwardedRef.current = chartRef.current;
@@ -55,115 +64,282 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, valueKey = 'sourceSize', st
         forwardedRef,
         chartRef.current
     ]);
-    useEffect(()=>{
-        __WEBPACK_EXTERNAL_MODULE_echarts_core_d2845954__.use([
-            TreemapChart,
-            TooltipComponent,
-            CanvasRenderer
-        ]);
-    }, []);
     useEffect(()=>{
         if (!treeData) return;
         function convert(node, colorGroup, level = 0) {
             const groupColors = BUNDLE_ANALYZER_COLORS[colorGroup];
-            const children = node.children?.map((c, _i)=>convert(c, colorGroup, level + 1));
-            return {
-                id: node.path ? hashString(node.path) : void 0,
+            const _level = level;
+            const children = node.children?.map((c)=>convert(c, colorGroup, _level + 1));
+            let val = 0;
+            if ('stat' === sizeType) val = node.sourceSize || 0;
+            else if ('parsed' === sizeType) val = node.bundledSize || 0;
+            else if ('gzip' === sizeType) val = node.gzipSize || 0;
+            else if ('value' === sizeType) val = node.value || 0;
+            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 result = {
+                id: nodeId,
                 name: node.name,
-                value: node[valueKey] || node.value || node['sourceSize'] || 0,
-                path: node.path,
-                sourceSize: node.sourceSize ?? node.value,
-                bundledSize: node.bundledSize,
-                gzipSize: node.gzipSize,
-                children: children && children.length > 0 ? children : void 0,
+                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),
                 itemStyle: {
-                    borderWidth: 2,
+                    borderWidth: isHighlighted ? 4 : 1,
                     gapWidth: 2,
-                    borderColorSaturation: 0.2,
-                    colorSaturation: 0.2,
-                    color: groupColors[level % groupColors.length],
-                    borderColor: groupColors[level % groupColors.length]
-                },
-                level
+                    color: isHighlighted ? '#fff5f5' : groupColors[level % groupColors.length - 1],
+                    borderColor: isHighlighted ? '#ff4d4f' : groupColors[level % groupColors.length - 1],
+                    borderColorSaturation: isHighlighted ? 1 : 0.5
+                }
+            };
+            if (children && children.length > 0) result.children = children;
+            if (isHighlighted) result.emphasis = {
+                itemStyle: {
+                    borderColor: '#ff4d4f',
+                    borderWidth: 4,
+                    color: '#fff5f5'
+                }
             };
+            return result;
         }
         const data = treeData.map((item, index)=>{
             const group = COLOR_GROUPS[index % COLOR_GROUPS.length];
-            return convert(item, group, 0);
-        });
+            return convert(item, group, 1);
+        }).filter((item)=>item.value > 0 || item.children && item.children.length > 0);
+        chartDataRef.current = data;
         setOption({
             title: {
-                text: 'Bundle Tree Map',
-                left: 'center'
+                text: 'Rsdoctor TreeMap',
+                left: 'center',
+                top: 10,
+                textStyle: {
+                    fontSize: 16,
+                    fontWeight: 'bold',
+                    color: 'rgba(0, 0, 0, 0.8)'
+                }
             },
             tooltip: {
-                position: 'top',
+                padding: 10,
+                backgroundColor: '#fff',
+                borderColor: '#eee',
+                borderWidth: 1,
+                textStyle: {
+                    color: 'rgba(0, 0, 0, 0.8)'
+                },
+                confine: true,
+                extraCssText: 'max-width: 450px; word-wrap: break-word;',
+                position: function(pos, _params, _dom, _rect, size) {
+                    var obj = {
+                        top: pos[1] + 10
+                    };
+                    if (pos[0] < size.viewSize[0] / 2) obj.left = pos[0] + 10;
+                    else obj.right = size.viewSize[0] - pos[0] + 10;
+                    return obj;
+                },
                 formatter: function(info) {
-                    var treePathInfo = info.treePathInfo;
-                    var treePath = [];
-                    for(var i = 1; i < treePathInfo.length; i++)treePath.push(treePathInfo[i].name);
-                    var node = info.data || {};
-                    var path = node.path || treePath.join('/');
-                    var sourceSize = node.sourceSize;
-                    var bundledSize = node.bundledSize;
-                    var gzipSize = node.gzipSize;
-                    var level = node.level;
-                    function makeRow(label, value, valueColor) {
-                        return `<div class="${treemap_module["tooltip-row"]}"><span class="${treemap_module["tooltip-label"]}">${label}</span><span${valueColor ? ` style="color: ${valueColor}"` : ''}>${value}</span></div>`;
+                    const node = info.data || {};
+                    const name = node.name;
+                    let path = node.path || 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 = '';
                     }
-                    return [
-                        `<div class="${treemap_module["tooltip-path"]}">` + __WEBPACK_EXTERNAL_MODULE_echarts_core_d2845954__.format.encodeHTML(path) + '</div>',
-                        makeRow(0 === level ? 'Asset' : 'Source', void 0 !== sourceSize ? formatSize(sourceSize) : '-'),
-                        !bundledSize ? '' : makeRow('Bundled', formatSize(bundledSize), '#1890ff'),
-                        !gzipSize ? '' : makeRow('Gzipped', formatSize(gzipSize), '#52c41a')
-                    ].join('');
+                    const sourceSize = node.sourceSize || node.value;
+                    const bundledSize = node.bundledSize;
+                    const gzipSize = node.gzipSize;
+                    function makeRow(label, value, color) {
+                        return `<div class="${treemap_module["tooltip-row"]}">
+                    <span class="${treemap_module["tooltip-label"]}" style="color: ${color};">${label}</span>
+                    <span style="color: ${color};">${value}</span>
+                </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'));
+                    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>
+                  ${rows.join('')}
+                </div>
+              `;
                 }
             },
             series: [
                 {
-                    name: 'Bundle Tree Map',
-                    id: 'bundle-treemap',
                     type: 'treemap',
-                    visibleMin: 300,
-                    left: 10,
-                    right: 10,
-                    top: 10,
-                    bottom: 10,
                     label: {
                         show: true,
                         formatter: '{b}',
-                        color: '#000'
+                        fontSize: 12,
+                        color: '#000',
+                        position: 'inside',
+                        fontWeight: 'normal',
+                        textBorderColor: '#fff',
+                        textBorderWidth: 2,
+                        padding: [
+                            4,
+                            8,
+                            4,
+                            8
+                        ]
                     },
                     upperLabel: {
                         show: true,
-                        height: 30
+                        height: 30,
+                        color: '#000',
+                        fontSize: 12,
+                        fontWeight: 'normal',
+                        padding: [
+                            0,
+                            0,
+                            0,
+                            4
+                        ]
+                    },
+                    itemStyle: {
+                        borderColor: '#fff'
                     },
                     levels: getLevelOption(),
-                    data: data
+                    data: data,
+                    breadcrumb: {
+                        show: true,
+                        left: 'center',
+                        top: 'bottom',
+                        height: 22,
+                        emptyItemWidth: 25,
+                        itemStyle: {
+                            color: '#999',
+                            borderColor: 'transparent',
+                            borderWidth: 0,
+                            borderRadius: 0
+                        },
+                        emphasis: {
+                            itemStyle: {
+                                color: '#333'
+                            }
+                        },
+                        textStyle: {
+                            fontFamily: 'sans-serif',
+                            fontSize: 12,
+                            color: '#666'
+                        }
+                    },
+                    roam: true,
+                    nodeClick: false,
+                    zoomToNodeRatio: 0.5,
+                    animationDurationUpdate: 500,
+                    width: '100%',
+                    height: '100%',
+                    top: 40,
+                    bottom: 30,
+                    left: 0,
+                    right: 0
                 }
             ]
         });
     }, [
         treeData,
-        valueKey
+        sizeType,
+        highlightNodeId,
+        rootPath
+    ]);
+    useEffect(()=>{
+        if (centerNodeId && chartRef.current && option) {
+            const chartInstance = chartRef.current.getEchartsInstance();
+            if (chartInstance) {
+                const findNodeInfo = (data, targetId, path = [])=>{
+                    for (const item of data){
+                        const currentPath = [
+                            ...path,
+                            item.name
+                        ];
+                        if (item.id === targetId) return {
+                            name: item.name,
+                            path: currentPath
+                        };
+                        if (item.children) {
+                            const found = findNodeInfo(item.children, targetId, currentPath);
+                            if (found) return found;
+                        }
+                    }
+                    return null;
+                };
+                setTimeout(()=>{
+                    const nodeInfo = findNodeInfo(chartDataRef.current, centerNodeId);
+                    if (!nodeInfo) return;
+                    try {
+                        chartInstance.dispatchAction({
+                            type: 'highlight',
+                            seriesIndex: 0,
+                            name: nodeInfo.name
+                        });
+                    } catch (e) {}
+                    const zoomStrategies = [
+                        ()=>chartInstance.dispatchAction({
+                                type: 'treemapZoomToNode',
+                                seriesIndex: 0,
+                                targetNodeId: String(centerNodeId)
+                            }),
+                        ()=>chartInstance.dispatchAction({
+                                type: 'treemapZoomToNode',
+                                seriesIndex: 0,
+                                name: nodeInfo.name
+                            }),
+                        ()=>chartInstance.dispatchAction({
+                                type: 'treemapZoomToNode',
+                                seriesIndex: 0,
+                                name: nodeInfo.path.join('/')
+                            }),
+                        ()=>nodeInfo.path.length > 0 && chartInstance.dispatchAction({
+                                type: 'treemapZoomToNode',
+                                seriesIndex: 0,
+                                name: nodeInfo.path[nodeInfo.path.length - 1]
+                            })
+                    ];
+                    for (const strategy of zoomStrategies)try {
+                        strategy();
+                        return;
+                    } catch (e) {
+                        console.error('Failed to zoom to node with id:', centerNodeId, e);
+                    }
+                    console.warn('Failed to zoom to node with id:', centerNodeId);
+                }, 200);
+            }
+        }
+    }, [
+        centerNodeId,
+        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__,
-            onEvents: onChartClick ? {
-                click: onChartClick
-            } : void 0,
+            onEvents: {
+                click: (params)=>{
+                    if (chartRef.current) {
+                        const instance = chartRef.current.getEchartsInstance();
+                        if (instance && params?.data?.id) instance.dispatchAction({
+                            type: 'treemapZoomToNode',
+                            seriesIndex: 0,
+                            targetNodeId: String(params.data.id)
+                        });
+                    }
+                    onChartClick?.(params);
+                }
+            },
             style: {
                 width: '100%',
-                minHeight: '500px',
-                maxHeight: '1000px',
-                border: '5px solid white',
-                borderRadius: '10px',
-                ...style
-            },
-            className: treemap_module["chart-container"]
+                height: '100%'
+            }
         })
     }) : null;
 });
@@ -171,146 +347,286 @@ const TreeMap = /*#__PURE__*/ react.forwardRef((props, ref)=>/*#__PURE__*/ jsx(T
         ...props,
         forwardedRef: ref
     }));
-const AssetTreemapWithFilter = ({ treeData, onChartClick, bundledSize = false })=>{
+const AssetTreemapWithFilter = ({ treeData, onChartClick, bundledSize = true })=>/*#__PURE__*/ jsx(ServerAPIProvider, {
+        api: SDK.ServerAPI.API.GetProjectInfo,
+        children: (projectInfo)=>/*#__PURE__*/ jsx(AssetTreemapWithFilterInner, {
+                treeData: treeData,
+                onChartClick: onChartClick,
+                bundledSize: bundledSize,
+                rootPath: projectInfo.root
+            })
+    });
+const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = true, rootPath })=>{
     const assetNames = useMemo(()=>treeData.map((item)=>item.name), [
         treeData
     ]);
     const [checkedAssets, setCheckedAssets] = useState(assetNames);
     const [collapsed, setCollapsed] = useState(false);
-    const [searchModalOpen, setSearchModalOpen] = useState(false);
+    const [sizeType, setSizeType] = useState(bundledSize ? 'parsed' : 'stat');
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [highlightNodeId, setHighlightNodeId] = useState();
+    const [centerNodeId, setCenterNodeId] = useState();
     const chartRef = react.useRef(null);
-    const { t } = useI18n();
-    const filteredTreeData = useMemo(()=>treeData.filter((item)=>checkedAssets.includes(item.name)), [
+    const containerRef = react.useRef(null);
+    const enterFullscreen = useCallback(()=>{
+        if (containerRef.current) containerRef.current.requestFullscreen().then(()=>setIsFullscreen(true)).catch((err)=>console.error('Failed to enter fullscreen:', err));
+    }, []);
+    const exitFullscreen = useCallback(()=>{
+        document.exitFullscreen().then(()=>setIsFullscreen(false)).catch((err)=>console.error('Failed to exit fullscreen:', err));
+    }, []);
+    const toggleFullscreen = useCallback(()=>{
+        if (isFullscreen) exitFullscreen();
+        else enterFullscreen();
+    }, [
+        isFullscreen,
+        enterFullscreen,
+        exitFullscreen
+    ]);
+    useEffect(()=>{
+        const handleFullscreenChange = ()=>{
+            setIsFullscreen(!!document.fullscreenElement);
+        };
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        return ()=>{
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
+        };
+    }, []);
+    const searchResults = useMemo(()=>{
+        if (!searchQuery.trim()) return [];
+        const regex = new RegExp(searchQuery, 'i');
+        const results = [];
+        const collectMatchingPaths = (node)=>{
+            if (node.path && regex.test(node.path)) {
+                const nodeId = hashString(node.path);
+                results.push({
+                    path: node.path,
+                    nodeId
+                });
+            }
+            if (node.children) node.children.forEach(collectMatchingPaths);
+        };
+        treeData.forEach(collectMatchingPaths);
+        return results;
+    }, [
+        treeData,
+        searchQuery
+    ]);
+    const filteredTreeData = useMemo(()=>{
+        let filtered = treeData.filter((item)=>checkedAssets.includes(item.name));
+        return filtered;
+    }, [
         treeData,
         checkedAssets
     ]);
-    const handleModuleClick = (module)=>{
-        if (!module?.path) return;
-        const nodeId = hashString(module.path);
-        if (chartRef.current) {
-            const echartsInstance = chartRef.current.getEchartsInstance();
-            echartsInstance.dispatchAction({
-                type: 'treemapZoomToNode',
-                seriesId: 'bundle-treemap',
-                targetNodeId: nodeId.toString()
-            });
+    const handleSearchResultClick = useCallback((nodeId)=>{
+        setHighlightNodeId(nodeId);
+        setCenterNodeId(nodeId);
+    }, []);
+    const removeRootPath = useCallback((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;
         }
-        setSearchModalOpen(false);
-    };
-    return /*#__PURE__*/ jsx("div", {
-        style: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 16
-        },
+        return size;
+    }, [
+        getSize
+    ]);
+    const getChunkSize = useCallback((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 /*#__PURE__*/ jsxs("div", {
         className: treemap_module.treemap,
-        children: /*#__PURE__*/ jsxs(Space, {
-            direction: "vertical",
-            style: {
-                width: '100%'
-            },
-            children: [
-                /*#__PURE__*/ jsx(Card, {
-                    title: /*#__PURE__*/ jsxs(Space, {
+        ref: containerRef,
+        children: [
+            /*#__PURE__*/ jsx("button", {
+                className: treemap_module["fullscreen-button"],
+                onClick: toggleFullscreen,
+                title: isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen',
+                "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen',
+                children: isFullscreen ? /*#__PURE__*/ jsx(FullscreenExitOutlined, {}) : /*#__PURE__*/ jsx(FullscreenOutlined, {})
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: `${treemap_module.sidebar} ${collapsed ? treemap_module.collapsed : ''}`,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: `${treemap_module["sidebar-toggle"]} ${collapsed ? treemap_module.collapsed : ''}`,
+                        onClick: ()=>setCollapsed(!collapsed),
+                        children: collapsed ? /*#__PURE__*/ jsx(RightOutlined, {}) : /*#__PURE__*/ jsx(LeftOutlined, {})
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: treemap_module["sidebar-content"],
                         children: [
-                            /*#__PURE__*/ jsx(Typography.Text, {
-                                children: t('Output Assets List')
-                            }),
-                            /*#__PURE__*/ jsx(SearchModal, {
-                                onModuleClick: handleModuleClick,
-                                open: searchModalOpen,
-                                setOpen: setSearchModalOpen,
-                                isIcon: true
+                            /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("h4", {
+                                        children: "Treemap sizes"
+                                    }),
+                                    /*#__PURE__*/ jsxs(Radio.Group, {
+                                        value: sizeType,
+                                        onChange: (e)=>setSizeType(e.target.value),
+                                        size: "small",
+                                        buttonStyle: "solid",
+                                        children: [
+                                            /*#__PURE__*/ jsx(Radio.Button, {
+                                                value: "stat",
+                                                children: "Stat"
+                                            }),
+                                            /*#__PURE__*/ jsx(Radio.Button, {
+                                                value: "parsed",
+                                                children: "Parsed"
+                                            }),
+                                            /*#__PURE__*/ jsx(Radio.Button, {
+                                                value: "gzip",
+                                                children: "Gzipped"
+                                            })
+                                        ]
+                                    })
+                                ]
                             }),
-                            /*#__PURE__*/ jsx(Tooltip, {
-                                color: 'white',
-                                title: /*#__PURE__*/ jsxs("span", {
-                                    children: [
-                                        "✨ In Rspack, TreeMap proportions are always based on Bundled Size by default.",
-                                        /*#__PURE__*/ jsx("br", {}),
-                                        "✨ In Webpack, TreeMap proportions are based on Bundled Size only when SourceMap is enabled.",
-                                        /*#__PURE__*/ jsx("br", {}),
-                                        "✨ ",
-                                        /*#__PURE__*/ jsx("b", {
-                                            children: "Bundled Size"
-                                        }),
-                                        ": The size of a module after bundling and minification.",
-                                        /*#__PURE__*/ jsx("br", {}),
-                                        "✨ ",
-                                        /*#__PURE__*/ jsx("b", {
-                                            children: "Source Size"
-                                        }),
-                                        ": The size of a module after compilation (e.g., TypeScript/JSX to JS), but before bundling and minification.",
-                                        /*#__PURE__*/ jsx("br", {}),
-                                        "✨ ",
-                                        /*#__PURE__*/ jsx("b", {
-                                            children: "Gzipped Size"
+                            /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("h4", {
+                                        children: "Search modules"
+                                    }),
+                                    /*#__PURE__*/ jsx(Input, {
+                                        placeholder: "Enter regexp",
+                                        value: searchQuery,
+                                        onChange: (e)=>{
+                                            setSearchQuery(e.target.value);
+                                            setHighlightNodeId(void 0);
+                                            setCenterNodeId(void 0);
+                                        },
+                                        suffix: /*#__PURE__*/ jsx(SearchOutlined, {
+                                            style: {
+                                                color: '#ccc'
+                                            }
                                         }),
-                                        ": The compressed file size that users actually download, as most web servers use gzip compression.",
-                                        /*#__PURE__*/ jsx("br", {})
-                                    ]
-                                }),
-                                overlayInnerStyle: {
-                                    width: 620,
-                                    color: 'black'
-                                },
-                                children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
-                                    style: {
-                                        color: '#1890ff',
-                                        marginLeft: 8
-                                    }
-                                })
+                                        allowClear: true,
+                                        size: "small"
+                                    }),
+                                    searchQuery.trim() && searchResults.length > 0 && /*#__PURE__*/ jsxs("div", {
+                                        className: treemap_module["search-results"],
+                                        children: [
+                                            /*#__PURE__*/ jsxs("div", {
+                                                className: treemap_module["search-results-header"],
+                                                children: [
+                                                    "Found ",
+                                                    searchResults.length,
+                                                    " file",
+                                                    searchResults.length > 1 ? 's' : ''
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: treemap_module["search-results-list"],
+                                                children: searchResults.map((result, index)=>{
+                                                    const displayPath = removeRootPath(result.path);
+                                                    return /*#__PURE__*/ jsx("div", {
+                                                        className: treemap_module["search-result-item"],
+                                                        onClick: ()=>handleSearchResultClick(result.nodeId),
+                                                        title: result.path,
+                                                        children: displayPath || result.path
+                                                    }, index);
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    searchQuery.trim() && 0 === searchResults.length && /*#__PURE__*/ jsxs("div", {
+                                        className: treemap_module["search-results-empty"],
+                                        children: [
+                                            'No files found matching "',
+                                            searchQuery,
+                                            '"'
+                                        ]
+                                    })
+                                ]
                             }),
-                            /*#__PURE__*/ jsxs(Tag, {
-                                color: "blue",
+                            /*#__PURE__*/ jsxs("div", {
                                 children: [
-                                    "TreeMap area based on",
-                                    ' ',
-                                    bundledSize ? 'Bundled Size' : 'Source Size'
+                                    /*#__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))
+                                    })
                                 ]
                             })
                         ]
-                    }),
-                    extra: /*#__PURE__*/ jsx("span", {
-                        className: treemap_module["collapse-icon"],
-                        onClick: ()=>setCollapsed((c)=>!c),
-                        "aria-label": collapsed ? t('Expand') : t('Collapse'),
-                        children: collapsed ? /*#__PURE__*/ jsx(VerticalAlignBottomOutlined, {}) : /*#__PURE__*/ jsx(VerticalAlignTopOutlined, {})
-                    }),
-                    size: "small",
-                    className: `card-body ${collapsed ? 'collapsed' : ''}`,
-                    children: /*#__PURE__*/ jsxs("div", {
-                        className: `checkbox-container ${collapsed ? 'collapsed' : ''}`,
-                        children: [
-                            /*#__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 / NONE'
-                            }, "all-none-checkbox"),
-                            /*#__PURE__*/ jsx(Checkbox.Group, {
-                                options: assetNames,
-                                value: checkedAssets,
-                                onChange: setCheckedAssets,
-                                className: `checkbox-container ${collapsed ? 'collapsed' : ''} ${treemap_module["asset-checkbox-group"]}`
-                            }, "asset-checkbox-group")
-                        ]
                     })
-                }),
-                /*#__PURE__*/ jsx("div", {
+                ]
+            }),
+            /*#__PURE__*/ jsx("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: {
-                        flex: 1
-                    },
-                    children: /*#__PURE__*/ jsx(TreeMap, {
-                        ref: chartRef,
-                        treeData: filteredTreeData,
-                        valueKey: bundledSize ? 'bundledSize' : 'sourceSize',
-                        onChartClick: onChartClick
-                    })
+                        width: '100%',
+                        height: '100%'
+                    }
                 })
-            ]
-        })
+            })
+        ]
     });
 };
 export { AssetTreemapWithFilter, TreeMap };