@rsdoctor/components 1.3.5 → 1.3.7-beta.0

package/dist/components/Charts/TreeMap.mjs

@@ -70,7 +70,7 @@ const TreeMapInner = /*#__PURE__*/ memo(({ treeData, valueKey = 'sourceSize', st
             return {
                 id: node.path ? hashString(node.path) : void 0,
                 name: node.name,
-                value: node[valueKey] ?? node.value ?? 0,
+                value: node[valueKey] || node.value || node['sourceSize'] || 0,
                 path: node.path,
                 sourceSize: node.sourceSize ?? node.value,
                 bundledSize: node.bundledSize,

package/dist/components/Charts/TreeMap.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Charts/TreeMap.mjs","sources":["webpack://@rsdoctor/components/./src/components/Charts/TreeMap.tsx"],"sourcesContent":["import React, { useEffect, useState, memo, useMemo } from 'react';\nimport EChartsReactCore from 'echarts-for-react/esm/core';\nimport * as echarts from 'echarts/core';\nimport { TreemapChart } from 'echarts/charts';\nimport { TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { BUNDLE_ANALYZER_COLORS, COLOR_GROUPS } from './constants';\nimport { Checkbox, Card, Typography, Space, Tooltip, Tag } from 'antd';\nimport {\n  VerticalAlignBottomOutlined,\n  VerticalAlignTopOutlined,\n  InfoCircleOutlined,\n} from '@ant-design/icons';\nimport { formatSize, useI18n } from 'src/utils';\nimport { SearchModal } from 'src/pages/BundleSize/components/search-modal';\nimport Styles from './treemap.module.scss';\n\n// TreeNode type should match the output of flattenTreemapData\nexport type TreeNode = {\n  name: string;\n  value?: number;\n  children?: TreeNode[];\n  path?: string;\n  sourceSize?: number;\n  bundledSize?: number;\n  gzipSize?: number;\n};\n\ninterface TreeMapProps {\n  treeData: TreeNode[];\n  valueKey?: 'sourceSize' | 'bundledSize'; // which value to show as area\n  style?: React.CSSProperties;\n  onChartClick?: (params: any) => void;\n}\n\n// Simple hash function for string (djb2)\nfunction hashString(str: string): number {\n  let hash = 5381;\n  for (let i = 0; i < str.length; i++) {\n    hash = (hash << 5) + hash + str.charCodeAt(i); /* hash * 33 + c */\n  }\n  return hash >>> 0; // Ensure unsigned\n}\n\nfunction getLevelOption() {\n  return [\n    {\n      itemStyle: {\n        color: 'white',\n        borderColor: '#eee',\n        borderWidth: 5,\n        gapWidth: 5,\n      },\n      emphasis: {\n        itemStyle: {\n          borderColor: '#a29f9f',\n        },\n      },\n    },\n    {\n      colorSaturation: [0.25, 0.5],\n      itemStyle: {\n        borderWidth: 5,\n        gapWidth: 5,\n        borderColorSaturation: 0.5,\n        borderColor: '#eee',\n      },\n    },\n  ];\n}\n\nconst TreeMapInner: React.FC<TreeMapProps & { forwardedRef?: React.Ref<any> }> =\n  memo(\n    ({\n      treeData,\n      valueKey = 'sourceSize',\n      style,\n      onChartClick,\n      forwardedRef,\n    }) => {\n      const [option, setOption] = useState<any>(null);\n      const chartRef = React.useRef<any>(null);\n\n      // Expose chartRef to parent if forwardedRef is provided\n      useEffect(() => {\n        if (forwardedRef && chartRef.current) {\n          if (typeof forwardedRef === 'function') {\n            forwardedRef(chartRef.current);\n          } else {\n            (forwardedRef as React.MutableRefObject<any>).current =\n              chartRef.current;\n          }\n        }\n      }, [forwardedRef, chartRef.current]);\n\n      // Register ECharts components\n      useEffect(() => {\n        echarts.use([TreemapChart, TooltipComponent, CanvasRenderer]);\n      }, []);\n\n      useEffect(() => {\n        if (!treeData) return;\n        // Helper to recursively add value field for ECharts\n        function convert(\n          node: TreeNode,\n          colorGroup: keyof typeof BUNDLE_ANALYZER_COLORS,\n          level = 0,\n        ): any {\n          const groupColors = BUNDLE_ANALYZER_COLORS[colorGroup];\n          const children = node.children?.map((c, _i) =>\n            convert(c, colorGroup, level + 1),\n          );\n\n          return {\n            id: node.path ? hashString(node.path) : undefined,\n            name: node.name,\n            value: node[valueKey] ?? node.value ?? 0,\n            path: node.path,\n            sourceSize: node.sourceSize ?? node.value,\n            bundledSize: node.bundledSize,\n            gzipSize: node.gzipSize,\n            children: children && children.length > 0 ? children : undefined,\n            itemStyle: {\n              borderWidth: 2,\n              gapWidth: 2,\n              borderColorSaturation: 0.2,\n              colorSaturation: 0.2,\n              color: groupColors[level % groupColors.length],\n              borderColor: groupColors[level % groupColors.length],\n            },\n            level,\n          };\n        }\n        const data = treeData.map((item, index) => {\n          const group = COLOR_GROUPS[index % COLOR_GROUPS.length];\n          return convert(item, group, 0);\n        });\n\n        setOption({\n          title: {\n            text: 'Bundle Tree Map',\n            left: 'center',\n          },\n          tooltip: {\n            position: 'top',\n            formatter: function (info: any) {\n              var treePathInfo = info.treePathInfo;\n              var treePath = [];\n              for (var i = 1; i < treePathInfo.length; i++) {\n                treePath.push(treePathInfo[i].name);\n              }\n              // Get extra info from node data\n              var node = info.data || {};\n              var path = node.path || treePath.join('/');\n              var sourceSize = node.sourceSize;\n              var bundledSize = node.bundledSize;\n              var gzipSize = node.gzipSize;\n              var level = node.level;\n\n              function makeRow(\n                label: string,\n                value: string,\n                valueColor?: string,\n              ) {\n                return (\n                  `<div class=\"${Styles['tooltip-row']}\">` +\n                  `<span class=\"${Styles['tooltip-label']}\">${label}</span>` +\n                  `<span${valueColor ? ` style=\"color: ${valueColor}\"` : ''}>${value}</span>` +\n                  '</div>'\n                );\n              }\n              return [\n                `<div class=\"${Styles['tooltip-path']}\">` +\n                  echarts.format.encodeHTML(path) +\n                  '</div>',\n                makeRow(\n                  level === 0 ? 'Asset' : 'Source',\n                  sourceSize !== undefined ? formatSize(sourceSize) : '-',\n                ),\n                !bundledSize\n                  ? ''\n                  : makeRow('Bundled', formatSize(bundledSize), '#1890ff'),\n                !gzipSize\n                  ? ''\n                  : makeRow('Gzipped', formatSize(gzipSize), '#52c41a'),\n              ].join('');\n            },\n          },\n          series: [\n            {\n              name: 'Bundle Tree Map',\n              id: 'bundle-treemap',\n              type: 'treemap',\n              visibleMin: 300,\n              left: 10,\n              right: 10,\n              top: 10,\n              bottom: 10,\n              label: {\n                show: true,\n                formatter: '{b}',\n                color: '#000',\n              },\n              upperLabel: {\n                show: true,\n                height: 30,\n              },\n\n              levels: getLevelOption(),\n              data: data,\n            },\n          ],\n        });\n      }, [treeData, valueKey]);\n\n      return option ? (\n        <div>\n          <EChartsReactCore\n            ref={chartRef}\n            option={option}\n            echarts={echarts}\n            onEvents={onChartClick ? { click: onChartClick } : undefined}\n            style={{\n              width: '100%',\n              minHeight: '500px',\n              maxHeight: '1000px',\n              border: '5px solid white',\n              borderRadius: '10px',\n              ...style,\n            }}\n            className={Styles['chart-container']}\n          />\n        </div>\n      ) : null;\n    },\n  );\n\nexport const TreeMap = React.forwardRef<any, TreeMapProps>((props, ref) => (\n  <TreeMapInner {...props} forwardedRef={ref} />\n));\n\nexport const AssetTreemapWithFilter: React.FC<{\n  treeData: TreeNode[];\n  onChartClick?: (params: any) => void;\n  bundledSize?: boolean;\n}> = ({ treeData, onChartClick, bundledSize = false }) => {\n  const assetNames = useMemo(\n    () => treeData.map((item) => item.name),\n    [treeData],\n  );\n  const [checkedAssets, setCheckedAssets] = useState<string[]>(assetNames);\n  const [collapsed, setCollapsed] = useState(false);\n  const [searchModalOpen, setSearchModalOpen] = useState(false);\n  const chartRef = React.useRef<any>(null);\n  const { t } = useI18n();\n\n  const filteredTreeData = useMemo(\n    () => treeData.filter((item) => checkedAssets.includes(item.name)),\n    [treeData, checkedAssets],\n  );\n\n  // Handler for search modal click\n  const handleModuleClick = (module: any) => {\n    if (!module?.path) return;\n    const nodeId = hashString(module.path);\n    if (chartRef.current) {\n      const echartsInstance = chartRef.current.getEchartsInstance();\n      echartsInstance.dispatchAction({\n        type: 'treemapZoomToNode',\n        seriesId: 'bundle-treemap',\n        targetNodeId: nodeId.toString(),\n      });\n    }\n    setSearchModalOpen(false);\n  };\n\n  return (\n    <div\n      style={{ display: 'flex', flexDirection: 'column', gap: 16 }}\n      className={Styles.treemap}\n    >\n      <Space direction=\"vertical\" style={{ width: '100%' }}>\n        <Card\n          title={\n            <Space>\n              <Typography.Text>{t('Output Assets List')}</Typography.Text>\n              <SearchModal\n                onModuleClick={handleModuleClick}\n                open={searchModalOpen}\n                setOpen={setSearchModalOpen}\n                isIcon={true}\n              />\n              <Tooltip\n                color={'white'}\n                title={\n                  <span>\n                    ✨ In Rspack, TreeMap proportions are always based on\n                    Bundled Size by default.\n                    <br />\n                    ✨ In Webpack, TreeMap proportions are based on Bundled Size\n                    only when SourceMap is enabled.\n                    <br />✨ <b>Bundled Size</b>: The size of a module after\n                    bundling and minification.\n                    <br />✨ <b>Source Size</b>: The size of a module after\n                    compilation (e.g., TypeScript/JSX to JS), but before\n                    bundling and minification.\n                    <br />✨ <b>Gzipped Size</b>: The compressed file size that\n                    users actually download, as most web servers use gzip\n                    compression.\n                    <br />\n                  </span>\n                }\n                overlayInnerStyle={{ width: 620, color: 'black' }}\n              >\n                <InfoCircleOutlined\n                  style={{ color: '#1890ff', marginLeft: 8 }}\n                />\n              </Tooltip>\n              <Tag color=\"blue\">\n                TreeMap area based on{' '}\n                {bundledSize ? 'Bundled Size' : 'Source Size'}\n              </Tag>\n            </Space>\n          }\n          extra={\n            <span\n              className={Styles['collapse-icon']}\n              onClick={() => setCollapsed((c) => !c)}\n              aria-label={collapsed ? t('Expand') : t('Collapse')}\n            >\n              {collapsed ? (\n                <VerticalAlignBottomOutlined />\n              ) : (\n                <VerticalAlignTopOutlined />\n              )}\n            </span>\n          }\n          size=\"small\"\n          className={`card-body ${collapsed ? 'collapsed' : ''}`}\n        >\n          <div className={`checkbox-container ${collapsed ? 'collapsed' : ''}`}>\n            <Checkbox\n              key=\"all-none-checkbox\"\n              indeterminate={\n                checkedAssets.length > 0 &&\n                checkedAssets.length < assetNames.length\n              }\n              checked={checkedAssets.length === assetNames.length}\n              onChange={(e) =>\n                setCheckedAssets(e.target.checked ? assetNames : [])\n              }\n              className={Styles['all-none-checkbox']}\n            >\n              {'ALL / NONE'}\n            </Checkbox>\n            <Checkbox.Group\n              key=\"asset-checkbox-group\"\n              options={assetNames}\n              value={checkedAssets}\n              onChange={setCheckedAssets}\n              className={`checkbox-container ${collapsed ? 'collapsed' : ''} ${Styles['asset-checkbox-group']}`}\n            />\n          </div>\n        </Card>\n        <div style={{ flex: 1 }}>\n          <TreeMap\n            ref={chartRef}\n            treeData={filteredTreeData}\n            valueKey={bundledSize ? 'bundledSize' : 'sourceSize'}\n            onChartClick={onChartClick}\n          />\n        </div>\n      </Space>\n    </div>\n  );\n};\n"],"names":["hashString","str","hash","i","getLevelOption","TreeMapInner","memo","treeData","valueKey","style","onChartClick","forwardedRef","option","setOption","useState","chartRef","React","useEffect","echarts","TreemapChart","TooltipComponent","CanvasRenderer","convert","node","colorGroup","level","groupColors","BUNDLE_ANALYZER_COLORS","children","c","_i","undefined","data","item","index","group","COLOR_GROUPS","info","treePathInfo","treePath","path","sourceSize","bundledSize","gzipSize","makeRow","label","value","valueColor","Styles","formatSize","EChartsReactCore","TreeMap","props","ref","AssetTreemapWithFilter","assetNames","useMemo","checkedAssets","setCheckedAssets","collapsed","setCollapsed","searchModalOpen","setSearchModalOpen","t","useI18n","filteredTreeData","handleModuleClick","module","nodeId","echartsInstance","Space","Card","Typography","SearchModal","Tooltip","InfoCircleOutlined","Tag","VerticalAlignBottomOutlined","VerticalAlignTopOutlined","Checkbox","e"],"mappings":"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"}
+{"version":3,"file":"components/Charts/TreeMap.mjs","sources":["webpack://@rsdoctor/components/./src/components/Charts/TreeMap.tsx"],"sourcesContent":["import React, { useEffect, useState, memo, useMemo } from 'react';\nimport EChartsReactCore from 'echarts-for-react/esm/core';\nimport * as echarts from 'echarts/core';\nimport { TreemapChart } from 'echarts/charts';\nimport { TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { BUNDLE_ANALYZER_COLORS, COLOR_GROUPS } from './constants';\nimport { Checkbox, Card, Typography, Space, Tooltip, Tag } from 'antd';\nimport {\n  VerticalAlignBottomOutlined,\n  VerticalAlignTopOutlined,\n  InfoCircleOutlined,\n} from '@ant-design/icons';\nimport { formatSize, useI18n } from 'src/utils';\nimport { SearchModal } from 'src/pages/BundleSize/components/search-modal';\nimport Styles from './treemap.module.scss';\n\n// TreeNode type should match the output of flattenTreemapData\nexport type TreeNode = {\n  name: string;\n  value?: number;\n  children?: TreeNode[];\n  path?: string;\n  sourceSize?: number;\n  bundledSize?: number;\n  gzipSize?: number;\n};\n\ninterface TreeMapProps {\n  treeData: TreeNode[];\n  valueKey?: 'sourceSize' | 'bundledSize'; // which value to show as area\n  style?: React.CSSProperties;\n  onChartClick?: (params: any) => void;\n}\n\n// Simple hash function for string (djb2)\nfunction hashString(str: string): number {\n  let hash = 5381;\n  for (let i = 0; i < str.length; i++) {\n    hash = (hash << 5) + hash + str.charCodeAt(i); /* hash * 33 + c */\n  }\n  return hash >>> 0; // Ensure unsigned\n}\n\nfunction getLevelOption() {\n  return [\n    {\n      itemStyle: {\n        color: 'white',\n        borderColor: '#eee',\n        borderWidth: 5,\n        gapWidth: 5,\n      },\n      emphasis: {\n        itemStyle: {\n          borderColor: '#a29f9f',\n        },\n      },\n    },\n    {\n      colorSaturation: [0.25, 0.5],\n      itemStyle: {\n        borderWidth: 5,\n        gapWidth: 5,\n        borderColorSaturation: 0.5,\n        borderColor: '#eee',\n      },\n    },\n  ];\n}\n\nconst TreeMapInner: React.FC<TreeMapProps & { forwardedRef?: React.Ref<any> }> =\n  memo(\n    ({\n      treeData,\n      valueKey = 'sourceSize',\n      style,\n      onChartClick,\n      forwardedRef,\n    }) => {\n      const [option, setOption] = useState<any>(null);\n      const chartRef = React.useRef<any>(null);\n\n      // Expose chartRef to parent if forwardedRef is provided\n      useEffect(() => {\n        if (forwardedRef && chartRef.current) {\n          if (typeof forwardedRef === 'function') {\n            forwardedRef(chartRef.current);\n          } else {\n            (forwardedRef as React.MutableRefObject<any>).current =\n              chartRef.current;\n          }\n        }\n      }, [forwardedRef, chartRef.current]);\n\n      // Register ECharts components\n      useEffect(() => {\n        echarts.use([TreemapChart, TooltipComponent, CanvasRenderer]);\n      }, []);\n\n      useEffect(() => {\n        if (!treeData) return;\n        // Helper to recursively add value field for ECharts\n        function convert(\n          node: TreeNode,\n          colorGroup: keyof typeof BUNDLE_ANALYZER_COLORS,\n          level = 0,\n        ): any {\n          const groupColors = BUNDLE_ANALYZER_COLORS[colorGroup];\n          const children = node.children?.map((c, _i) =>\n            convert(c, colorGroup, level + 1),\n          );\n\n          return {\n            id: node.path ? hashString(node.path) : undefined,\n            name: node.name,\n            value: node[valueKey] || node.value || node['sourceSize'] || 0,\n            path: node.path,\n            sourceSize: node.sourceSize ?? node.value,\n            bundledSize: node.bundledSize,\n            gzipSize: node.gzipSize,\n            children: children && children.length > 0 ? children : undefined,\n            itemStyle: {\n              borderWidth: 2,\n              gapWidth: 2,\n              borderColorSaturation: 0.2,\n              colorSaturation: 0.2,\n              color: groupColors[level % groupColors.length],\n              borderColor: groupColors[level % groupColors.length],\n            },\n            level,\n          };\n        }\n        const data = treeData.map((item, index) => {\n          const group = COLOR_GROUPS[index % COLOR_GROUPS.length];\n          return convert(item, group, 0);\n        });\n\n        setOption({\n          title: {\n            text: 'Bundle Tree Map',\n            left: 'center',\n          },\n          tooltip: {\n            position: 'top',\n            formatter: function (info: any) {\n              var treePathInfo = info.treePathInfo;\n              var treePath = [];\n              for (var i = 1; i < treePathInfo.length; i++) {\n                treePath.push(treePathInfo[i].name);\n              }\n              // Get extra info from node data\n              var node = info.data || {};\n              var path = node.path || treePath.join('/');\n              var sourceSize = node.sourceSize;\n              var bundledSize = node.bundledSize;\n              var gzipSize = node.gzipSize;\n              var level = node.level;\n\n              function makeRow(\n                label: string,\n                value: string,\n                valueColor?: string,\n              ) {\n                return (\n                  `<div class=\"${Styles['tooltip-row']}\">` +\n                  `<span class=\"${Styles['tooltip-label']}\">${label}</span>` +\n                  `<span${valueColor ? ` style=\"color: ${valueColor}\"` : ''}>${value}</span>` +\n                  '</div>'\n                );\n              }\n              return [\n                `<div class=\"${Styles['tooltip-path']}\">` +\n                  echarts.format.encodeHTML(path) +\n                  '</div>',\n                makeRow(\n                  level === 0 ? 'Asset' : 'Source',\n                  sourceSize !== undefined ? formatSize(sourceSize) : '-',\n                ),\n                !bundledSize\n                  ? ''\n                  : makeRow('Bundled', formatSize(bundledSize), '#1890ff'),\n                !gzipSize\n                  ? ''\n                  : makeRow('Gzipped', formatSize(gzipSize), '#52c41a'),\n              ].join('');\n            },\n          },\n          series: [\n            {\n              name: 'Bundle Tree Map',\n              id: 'bundle-treemap',\n              type: 'treemap',\n              visibleMin: 300,\n              left: 10,\n              right: 10,\n              top: 10,\n              bottom: 10,\n              label: {\n                show: true,\n                formatter: '{b}',\n                color: '#000',\n              },\n              upperLabel: {\n                show: true,\n                height: 30,\n              },\n\n              levels: getLevelOption(),\n              data: data,\n            },\n          ],\n        });\n      }, [treeData, valueKey]);\n\n      return option ? (\n        <div>\n          <EChartsReactCore\n            ref={chartRef}\n            option={option}\n            echarts={echarts}\n            onEvents={onChartClick ? { click: onChartClick } : undefined}\n            style={{\n              width: '100%',\n              minHeight: '500px',\n              maxHeight: '1000px',\n              border: '5px solid white',\n              borderRadius: '10px',\n              ...style,\n            }}\n            className={Styles['chart-container']}\n          />\n        </div>\n      ) : null;\n    },\n  );\n\nexport const TreeMap = React.forwardRef<any, TreeMapProps>((props, ref) => (\n  <TreeMapInner {...props} forwardedRef={ref} />\n));\n\nexport const AssetTreemapWithFilter: React.FC<{\n  treeData: TreeNode[];\n  onChartClick?: (params: any) => void;\n  bundledSize?: boolean;\n}> = ({ treeData, onChartClick, bundledSize = false }) => {\n  const assetNames = useMemo(\n    () => treeData.map((item) => item.name),\n    [treeData],\n  );\n  const [checkedAssets, setCheckedAssets] = useState<string[]>(assetNames);\n  const [collapsed, setCollapsed] = useState(false);\n  const [searchModalOpen, setSearchModalOpen] = useState(false);\n  const chartRef = React.useRef<any>(null);\n  const { t } = useI18n();\n\n  const filteredTreeData = useMemo(\n    () => treeData.filter((item) => checkedAssets.includes(item.name)),\n    [treeData, checkedAssets],\n  );\n\n  // Handler for search modal click\n  const handleModuleClick = (module: any) => {\n    if (!module?.path) return;\n    const nodeId = hashString(module.path);\n    if (chartRef.current) {\n      const echartsInstance = chartRef.current.getEchartsInstance();\n      echartsInstance.dispatchAction({\n        type: 'treemapZoomToNode',\n        seriesId: 'bundle-treemap',\n        targetNodeId: nodeId.toString(),\n      });\n    }\n    setSearchModalOpen(false);\n  };\n\n  return (\n    <div\n      style={{ display: 'flex', flexDirection: 'column', gap: 16 }}\n      className={Styles.treemap}\n    >\n      <Space direction=\"vertical\" style={{ width: '100%' }}>\n        <Card\n          title={\n            <Space>\n              <Typography.Text>{t('Output Assets List')}</Typography.Text>\n              <SearchModal\n                onModuleClick={handleModuleClick}\n                open={searchModalOpen}\n                setOpen={setSearchModalOpen}\n                isIcon={true}\n              />\n              <Tooltip\n                color={'white'}\n                title={\n                  <span>\n                    ✨ In Rspack, TreeMap proportions are always based on\n                    Bundled Size by default.\n                    <br />\n                    ✨ In Webpack, TreeMap proportions are based on Bundled Size\n                    only when SourceMap is enabled.\n                    <br />✨ <b>Bundled Size</b>: The size of a module after\n                    bundling and minification.\n                    <br />✨ <b>Source Size</b>: The size of a module after\n                    compilation (e.g., TypeScript/JSX to JS), but before\n                    bundling and minification.\n                    <br />✨ <b>Gzipped Size</b>: The compressed file size that\n                    users actually download, as most web servers use gzip\n                    compression.\n                    <br />\n                  </span>\n                }\n                overlayInnerStyle={{ width: 620, color: 'black' }}\n              >\n                <InfoCircleOutlined\n                  style={{ color: '#1890ff', marginLeft: 8 }}\n                />\n              </Tooltip>\n              <Tag color=\"blue\">\n                TreeMap area based on{' '}\n                {bundledSize ? 'Bundled Size' : 'Source Size'}\n              </Tag>\n            </Space>\n          }\n          extra={\n            <span\n              className={Styles['collapse-icon']}\n              onClick={() => setCollapsed((c) => !c)}\n              aria-label={collapsed ? t('Expand') : t('Collapse')}\n            >\n              {collapsed ? (\n                <VerticalAlignBottomOutlined />\n              ) : (\n                <VerticalAlignTopOutlined />\n              )}\n            </span>\n          }\n          size=\"small\"\n          className={`card-body ${collapsed ? 'collapsed' : ''}`}\n        >\n          <div className={`checkbox-container ${collapsed ? 'collapsed' : ''}`}>\n            <Checkbox\n              key=\"all-none-checkbox\"\n              indeterminate={\n                checkedAssets.length > 0 &&\n                checkedAssets.length < assetNames.length\n              }\n              checked={checkedAssets.length === assetNames.length}\n              onChange={(e) =>\n                setCheckedAssets(e.target.checked ? assetNames : [])\n              }\n              className={Styles['all-none-checkbox']}\n            >\n              {'ALL / NONE'}\n            </Checkbox>\n            <Checkbox.Group\n              key=\"asset-checkbox-group\"\n              options={assetNames}\n              value={checkedAssets}\n              onChange={setCheckedAssets}\n              className={`checkbox-container ${collapsed ? 'collapsed' : ''} ${Styles['asset-checkbox-group']}`}\n            />\n          </div>\n        </Card>\n        <div style={{ flex: 1 }}>\n          <TreeMap\n            ref={chartRef}\n            treeData={filteredTreeData}\n            valueKey={bundledSize ? 'bundledSize' : 'sourceSize'}\n            onChartClick={onChartClick}\n          />\n        </div>\n      </Space>\n    </div>\n  );\n};\n"],"names":["hashString","str","hash","i","getLevelOption","TreeMapInner","memo","treeData","valueKey","style","onChartClick","forwardedRef","option","setOption","useState","chartRef","React","useEffect","echarts","TreemapChart","TooltipComponent","CanvasRenderer","convert","node","colorGroup","level","groupColors","BUNDLE_ANALYZER_COLORS","children","c","_i","undefined","data","item","index","group","COLOR_GROUPS","info","treePathInfo","treePath","path","sourceSize","bundledSize","gzipSize","makeRow","label","value","valueColor","Styles","formatSize","EChartsReactCore","TreeMap","props","ref","AssetTreemapWithFilter","assetNames","useMemo","checkedAssets","setCheckedAssets","collapsed","setCollapsed","searchModalOpen","setSearchModalOpen","t","useI18n","filteredTreeData","handleModuleClick","module","nodeId","echartsInstance","Space","Card","Typography","SearchModal","Tooltip","InfoCircleOutlined","Tag","VerticalAlignBottomOutlined","VerticalAlignTopOutlined","Checkbox","e"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsdoctor/components",
-  "version": "1.3.5",
+  "version": "1.3.7-beta.0",
   "license": "MIT",
   "types": "dist/index.d.ts",
   "repository": {
@@ -74,9 +74,9 @@
     "react-router-dom": "6.4.3",
     "socket.io-client": "4.8.1",
     "url-parse": "1.5.10",
-    "@rsdoctor/graph": "1.3.5",
-    "@rsdoctor/types": "1.3.5",
-    "@rsdoctor/utils": "1.3.5"
+    "@rsdoctor/graph": "1.3.7-beta.0",
+    "@rsdoctor/types": "1.3.7-beta.0",
+    "@rsdoctor/utils": "1.3.7-beta.0"
   },
   "peerDependencies": {
     "react": ">=18.3.1",