@rsdoctor/components 1.5.13 → 1.5.14-beta.0

package/dist/pages/BundleSize/components/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pages/BundleSize/components/index.mjs","sources":["../../../../src/pages/BundleSize/components/index.tsx"],"sourcesContent":["import {\n  CodeOutlined,\n  CodepenCircleOutlined,\n  DeploymentUnitOutlined,\n  InfoCircleOutlined,\n} from '@ant-design/icons';\nimport { Client, SDK } from '@rsdoctor/types';\nimport {\n  Button,\n  Card,\n  Col,\n  Divider,\n  Empty,\n  InputNumber,\n  Row,\n  Select,\n  Space,\n  Tag,\n  Tooltip,\n  Typography,\n  Tabs,\n} from 'antd';\nimport { debounce, sumBy } from 'es-toolkit/compat';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useCodeDrawer } from 'src/components/base/CodeViewer/useCodeDrawer';\nimport { Badge as Bdg } from '../../../components/Badge';\nimport { FileTree } from '../../../components/FileTree';\nimport { KeywordInput } from '../../../components/Form/keyword';\nimport { Keyword } from '../../../components/Keyword';\nimport { ServerAPIProvider } from '../../../components/Manifest';\nimport { Size } from '../../../constants';\nimport { useProjectInfo } from '../../../components/Layout/project-info-context';\nimport {\n  createFileStructures,\n  flattenTreemapData,\n  formatSize,\n  useI18n,\n} from '../../../utils';\nimport { AssetDetail } from './asset';\nimport { BundleCards } from './cards';\nimport styles from './index.module.scss';\nimport './index.sass';\nimport { SearchModal } from './search-modal';\nimport {\n  AssetTreemapWithFilter,\n  TreeNode,\n} from 'src/components/Charts/TreeMap';\nimport { Rspack } from '@rsdoctor/utils/common';\n\nconst { Option } = Select;\n\nconst cardBodyHeight = 600;\n\ninterface WebpackModulesOverallProps {\n  cwd: string;\n  errors: SDK.ErrorsData;\n  summary: Client.RsdoctorClientAssetsSummary;\n  entryPoints: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetEntryPoints>;\n}\n\nexport const WebpackModulesOverallBase: React.FC<\n  WebpackModulesOverallProps\n> = ({ errors, cwd, summary, entryPoints }) => {\n  const [selectedEntryPoints, setEntryPoints] = useState<SDK.EntryPointData[]>(\n    [],\n  );\n  const [inputModule, setModuleValue] = useState(0);\n  const [inputAssetName, setAssetName] = useState('');\n  const [inputAssetSize, setAssetSize] = useState(0);\n  const [defaultExpandAll, setDefaultExpandAll] = useState(false);\n  const [inputModuleUnit, setModuleUnit] = useState('');\n  const [inputChunkUnit, setChunkUnit] = useState('');\n  const [assetPath, setAssetPath] = useState<string | null>(null);\n  const { showCode, codeDrawerComponent } = useCodeDrawer(\n    'Do not have the codes of assets. If you use the lite or brief mode, there will have codes.',\n  );\n\n  const { t } = useI18n();\n\n  const assets = summary.all.total.files;\n\n  const handleChange = useCallback(\n    (type: string) => (value: string) => {\n      if (type === 'module') {\n        setModuleUnit(value);\n      } else if (type === 'chunk') {\n        setChunkUnit(value);\n      }\n    },\n    [],\n  );\n\n  const selectAfter = (type: string) => (\n    <Select defaultValue=\"kb\" onChange={handleChange(type)}>\n      <Option value=\"kb\">KB</Option>\n      <Option value=\"mb\">MB</Option>\n    </Select>\n  );\n  const onChangeModule = useCallback(\n    debounce((newValue: number) => {\n      const count =\n        inputModuleUnit === 'mb' ? newValue * 1024 * 1024 : newValue * 1024;\n      setModuleValue(count);\n    }, 300),\n    [],\n  );\n\n  const onChangeAsset = useCallback(\n    debounce((newValue: number) => {\n      const count =\n        inputChunkUnit === 'mb' ? newValue * 1024 * 1024 : newValue * 1024;\n      setAssetSize(count);\n    }, 300),\n    [],\n  );\n\n  const filteredAssets = useMemo(() => {\n    let res = assets.slice();\n\n    if (inputAssetName) {\n      res = res.filter((e) => e.path.indexOf(inputAssetName) > -1);\n    }\n\n    if (inputAssetSize > 0) {\n      res = res.filter((e) => e.size >= inputAssetSize);\n    }\n\n    if (selectedEntryPoints.length) {\n      res = res.filter((e) => {\n        if (selectedEntryPoints.some((ep) => ep.assets.includes(e.path))) {\n          return true;\n        }\n        return false;\n      });\n    }\n\n    return res.sort((a, b) => {\n      const _a = a.path.indexOf('/') > -1 ? 1 : 0;\n      const _b = b.path.indexOf('/') > -1 ? 1 : 0;\n      // return _a - _b;\n      return _b - _a;\n    });\n  }, [assets, selectedEntryPoints, inputAssetName, inputAssetSize]);\n\n  useEffect(() => {\n    function getFileExtension(filePath: string) {\n      const parts = filePath.split('.');\n      return parts.length > 1 ? parts.pop() : '';\n    }\n\n    summary.all.total.files.forEach((f) => {\n      const ext = getFileExtension(f.path);\n      if (ext === 'js') {\n        setAssetPath(f.path);\n      }\n    });\n  }, [summary.all.total.files]);\n\n  const assetsStructures = useMemo(() => {\n    const res = createFileStructures({\n      files: filteredAssets.map((e) => e.path).filter(Boolean),\n      fileTitle(file, basename) {\n        const target = filteredAssets.find((e) => e.path === file)!;\n        const { size, initial, path, content } = target;\n\n        return (\n          <div\n            className={styles.assetBox}\n            onClick={() => {\n              setAssetPath(path);\n            }}\n          >\n            <Keyword text={basename} keyword={''} className={styles.fileText} />\n            <Space size=\"small\" className={styles.assetsTag}>\n              <Divider type=\"vertical\" />\n              <Typography.Text style={{ color: '#4FD233' }}>\n                {formatSize(size)}\n              </Typography.Text>\n              <Divider type=\"vertical\" />\n              {initial ? (\n                <Typography.Text style={{ color: '#009A9E' }}>\n                  initial\n                </Typography.Text>\n              ) : null}\n              <CodeOutlined\n                style={{ fontSize: 14, padding: 0 }}\n                onClick={() => showCode({ code: content!, filePath: path })}\n              />\n            </Space>\n          </div>\n        );\n      },\n    });\n    return res;\n  }, [filteredAssets]);\n\n  const onSearch = (value: string) => {\n    setAssetName(value);\n    setDefaultExpandAll(false);\n  };\n  return (\n    <>\n      <div>\n        <BundleCards cwd={cwd} errors={errors} summary={summary} />\n        <Card styles={{ body: { paddingTop: 0 } }}>\n          <Tabs\n            size=\"middle\"\n            items={[\n              {\n                key: 'tree',\n                label: (\n                  <Space>\n                    <Typography.Text>Tree Graph</Typography.Text>\n                    <Tooltip\n                      overlayStyle={{ maxWidth: 380 }}\n                      overlayInnerStyle={{ marginLeft: 16, padding: 10 }}\n                      color=\"white\"\n                      title={\n                        <Space direction=\"vertical\" color=\"white\" size=\"middle\">\n                          <Row>\n                            <Col>\n                              <Tag color=\"cyan\" style={{ margin: 0 }}>\n                                initial\n                              </Tag>\n                              <Typography.Text style={{ marginLeft: 4 }}>\n                                Identify whether the chunk is an initial chunk.\n                              </Typography.Text>\n                            </Col>\n                          </Row>\n                          <Row>\n                            <Col>\n                              <Tag color=\"green\" style={{ margin: 0 }}>\n                                concatenated\n                              </Tag>\n                              <Typography.Text style={{ marginLeft: 4 }}>\n                                Identify whether the module is a concatenated\n                                module\n                              </Typography.Text>\n                              <Tooltip\n                                overlayStyle={{ maxWidth: 408 }}\n                                placement=\"bottom\"\n                                color=\"white\"\n                                title={\n                                  <Space direction=\"vertical\" color=\"white\">\n                                    <Row>\n                                      <Col>\n                                        <Typography.Text strong>\n                                          Concatenated Module\n                                        </Typography.Text>\n                                        <Typography.Text>\n                                          : A performance optimization where\n                                          multiple modules are merged (or\n                                          \"hoisted\") into a single scope instead\n                                          of wrapping each module in separate\n                                          function closures. This reduces the\n                                          bundle size and improves runtime\n                                          performance by minimizing function\n                                          call overhead.\n                                        </Typography.Text>\n                                      </Col>\n                                    </Row>\n                                  </Space>\n                                }\n                              >\n                                <InfoCircleOutlined\n                                  style={{\n                                    color: 'rgba(0,0,0,.45)',\n                                    marginLeft: 4,\n                                  }}\n                                />\n                              </Tooltip>\n                              <Typography.Text>.</Typography.Text>\n                            </Col>\n                          </Row>\n                          <Row>\n                            <Col>\n                              <Button\n                                size=\"small\"\n                                icon={<CodepenCircleOutlined />}\n                              />\n                              <Typography.Text style={{ marginLeft: 4 }}>\n                                Open the code.\n                              </Typography.Text>\n                            </Col>\n                          </Row>\n                          <Row>\n                            <Col>\n                              <Button\n                                size=\"small\"\n                                icon={<DeploymentUnitOutlined />}\n                              />\n                              <Typography.Text style={{ marginLeft: 4 }}>\n                                View the module dependency, that is, module\n                                reasons in stats.json.\n                              </Typography.Text>\n                            </Col>\n                          </Row>\n                          <Row>\n                            <Col>\n                              <Tag color={'purple'}>{'Bundled: 15.77 KB'}</Tag>\n                              <Typography.Text>\n                                The final size of the output files after\n                                processing, bundling, and optimization. This is\n                                what is delivered to the browser.\n                              </Typography.Text>\n                            </Col>\n                          </Row>\n                          <Row>\n                            <Col>\n                              <Tag color={'orange'}>{'Source: 60.46 KB'}</Tag>\n                              <Typography.Text>\n                                The original size of your source code files\n                                before any processing or transformations. This\n                                is the raw size of your code as you wrote it.\n                              </Typography.Text>\n                            </Col>\n                          </Row>\n                        </Space>\n                      }\n                    >\n                      <InfoCircleOutlined\n                        style={{ color: 'rgba(0,0,0,.45)' }}\n                      />\n                    </Tooltip>\n                  </Space>\n                ),\n                children: (\n                  <Space style={{ display: 'flex' }} direction=\"vertical\">\n                    <Row\n                      align=\"middle\"\n                      gutter={[Size.BasePadding, Size.BasePadding]}\n                    >\n                      {entryPoints && entryPoints.length ? (\n                        <Col>\n                          <Select\n                            mode=\"multiple\"\n                            value={selectedEntryPoints.map((e) => e.name)}\n                            style={{\n                              minWidth: 230,\n                              width: 'auto',\n                              maxWidth: 300,\n                            }}\n                            placeholder={'filter assets by entry point'}\n                            onChange={(name: string[]) => {\n                              setEntryPoints(\n                                name\n                                  .map(\n                                    (e) =>\n                                      entryPoints.find((ep) => ep.name === e)!,\n                                  )\n                                  .filter(Boolean),\n                              );\n                            }}\n                            allowClear\n                            onClear={() => {\n                              setEntryPoints([]);\n                            }}\n                          >\n                            {entryPoints.map((e) => {\n                              return (\n                                <Select.Option key={e.name} value={e.name}>\n                                  <Space>\n                                    <Bdg\n                                      label={e.name}\n                                      value={formatSize(e.size)}\n                                      tooltip={e.name}\n                                    />\n                                  </Space>\n                                </Select.Option>\n                              );\n                            })}\n                          </Select>\n                        </Col>\n                      ) : null}\n                      <Col>\n                        <KeywordInput\n                          placeholder=\"search asset by keyword\"\n                          onChange={onSearch}\n                        />\n                      </Col>\n                      <Col span={6}>\n                        <InputNumber\n                          min={0}\n                          style={{ width: '95%' }}\n                          addonBefore={\n                            <Space>\n                              <Typography.Text\n                                style={{ fontSize: 14, color: 'inherit' }}\n                              >\n                                Asset Size\n                              </Typography.Text>\n                              <Tooltip\n                                title={t(\n                                  'filter the output assets which size is greater than the input value',\n                                )}\n                                style={{ marginLeft: 3 }}\n                              >\n                                <InfoCircleOutlined\n                                  style={{ color: 'rgba(0,0,0,.45)' }}\n                                />\n                              </Tooltip>\n                            </Space>\n                          }\n                          onChange={(value) => onChangeAsset(Number(value))}\n                          addonAfter={selectAfter('chunk')}\n                        />\n                      </Col>\n                      <Col span={6}>\n                        <InputNumber\n                          min={0}\n                          style={{ width: '95%' }}\n                          addonBefore={\n                            <Space>\n                              <Typography.Text\n                                style={{ fontSize: 14, color: 'inherit' }}\n                              >\n                                Module Size\n                              </Typography.Text>\n                              <Tooltip\n                                title={t(\n                                  'filter the modules which size is greater than the input value',\n                                )}\n                                style={{ marginLeft: 3 }}\n                              >\n                                <InfoCircleOutlined\n                                  style={{ color: 'rgba(0,0,0,.45)' }}\n                                />\n                              </Tooltip>\n                            </Space>\n                          }\n                          onChange={(value) => {\n                            onChangeModule(Number(value));\n                          }}\n                          addonAfter={selectAfter('module')}\n                        />\n                      </Col>\n                    </Row>\n                    <Row>\n                      <SearchModal />\n                    </Row>\n                    <Row\n                      align=\"middle\"\n                      gutter={[Size.BasePadding, Size.BasePadding]}\n                    >\n                      <Col span={24}>\n                        {filteredAssets.length ? (\n                          <Row gutter={Size.BasePadding}>\n                            <Col span={6}>\n                              <Card\n                                title={\n                                  <Space>\n                                    <Typography.Text>\n                                      {t('Output Assets List')}\n                                    </Typography.Text>\n                                    <Divider type=\"vertical\" />\n                                    <Tooltip\n                                      title={`total assets count is ${assets.length}, the filtered assets count is ${filteredAssets.length}`}\n                                    >\n                                      <Typography.Text\n                                        type=\"secondary\"\n                                        style={{\n                                          fontSize: 12,\n                                          fontWeight: 400,\n                                        }}\n                                      >\n                                        {filteredAssets.length} /{' '}\n                                        {assets.length}\n                                      </Typography.Text>\n                                    </Tooltip>\n                                    <Divider type=\"vertical\" />\n                                    <Typography.Text\n                                      type=\"secondary\"\n                                      style={{ fontSize: 12, fontWeight: 400 }}\n                                    >\n                                      {formatSize(\n                                        sumBy(filteredAssets, (e) => e.size),\n                                      )}\n                                    </Typography.Text>\n                                  </Space>\n                                }\n                                size=\"small\"\n                                bodyStyle={{\n                                  overflow: 'scroll',\n                                  height: cardBodyHeight,\n                                }}\n                              >\n                                <FileTree\n                                  className={styles.assets}\n                                  treeData={assetsStructures}\n                                  autoExpandParent\n                                  defaultExpandAll={\n                                    defaultExpandAll ||\n                                    filteredAssets.length <= 20\n                                  }\n                                  key={`tree_${inputAssetName}_${defaultExpandAll}`}\n                                />\n                              </Card>\n                            </Col>\n                            <Col span={18}>\n                              {assetPath ? (\n                                <ServerAPIProvider\n                                  api={SDK.ServerAPI.API.GetAssetDetails}\n                                  body={{ assetPath }}\n                                >\n                                  {(details) => (\n                                    <AssetDetail\n                                      asset={details.asset}\n                                      chunks={details.chunks}\n                                      modules={details.modules}\n                                      height={cardBodyHeight}\n                                      moduleSizeLimit={inputModule}\n                                      root={cwd}\n                                    />\n                                  )}\n                                </ServerAPIProvider>\n                              ) : (\n                                <Card\n                                  bodyStyle={{\n                                    height: cardBodyHeight,\n                                  }}\n                                >\n                                  <Empty\n                                    description={\n                                      <Typography.Text strong>\n                                        Click the file path on the left to show\n                                        the modules of the asset\n                                      </Typography.Text>\n                                    }\n                                  />\n                                </Card>\n                              )}\n                            </Col>\n                          </Row>\n                        ) : (\n                          <Empty />\n                        )}\n                      </Col>\n                    </Row>\n                  </Space>\n                ),\n              },\n              {\n                key: 'treemap',\n                label: 'Treemap',\n                children: (\n                  <ServerAPIProvider api={SDK.ServerAPI.API.GetProjectInfo}>\n                    {(data) => {\n                      const { isRspack, hasSourceMap } =\n                        Rspack.checkSourceMapSupport(data.configs);\n                      return (\n                        <ServerAPIProvider\n                          api={SDK.ServerAPI.API.GetSummaryBundles}\n                        >\n                          {(data) => {\n                            // Filter assets to only show JS (js, cjs, mjs), .bundle, CSS, and HTML files\n                            const isTargetFileType = (\n                              filePath: string,\n                            ): boolean => {\n                              const ext =\n                                filePath.toLowerCase().split('.').pop() || '';\n                              return (\n                                ext === 'js' ||\n                                ext === 'cjs' ||\n                                ext === 'mjs' ||\n                                ext === 'bundle' ||\n                                ext === 'css' ||\n                                ext === 'html'\n                              );\n                            };\n\n                            const computedTreeData: TreeNode[] = data\n                              .filter((item) =>\n                                isTargetFileType(item.asset.path),\n                              )\n                              .map((item) => ({\n                                name: item.asset.path,\n                                value: item.asset.size,\n                                children: flattenTreemapData(item.modules)\n                                  .children,\n                              }));\n                            return (\n                              <AssetTreemapWithFilter\n                                treeData={computedTreeData}\n                                bundledSize={hasSourceMap || isRspack}\n                              />\n                            );\n                          }}\n                        </ServerAPIProvider>\n                      );\n                    }}\n                  </ServerAPIProvider>\n                ),\n              },\n            ]}\n            defaultActiveKey=\"tree\"\n          />\n        </Card>\n      </div>\n      {codeDrawerComponent}\n    </>\n  );\n};\n\nexport const WebpackModulesOverall: React.FC = () => {\n  const { project } = useProjectInfo();\n\n  if (!project) {\n    return null;\n  }\n\n  const { root, errors } = project;\n  return (\n    <ServerAPIProvider\n      api={SDK.ServerAPI.API.GetAssetsSummary}\n      body={{ withFileContent: true }}\n    >\n      {(summary) => {\n        return (\n          <ServerAPIProvider api={SDK.ServerAPI.API.GetEntryPoints}>\n            {(entryPoints) => (\n              <WebpackModulesOverallBase\n                cwd={root}\n                errors={errors}\n                summary={summary}\n                entryPoints={entryPoints}\n              />\n            )}\n          </ServerAPIProvider>\n        );\n      }}\n    </ServerAPIProvider>\n  );\n};\n"],"names":["Option","Select","cardBodyHeight","WebpackModulesOverallBase","errors","cwd","summary","entryPoints","selectedEntryPoints","setEntryPoints","useState","inputModule","setModuleValue","inputAssetName","setAssetName","inputAssetSize","setAssetSize","defaultExpandAll","setDefaultExpandAll","inputModuleUnit","setModuleUnit","inputChunkUnit","setChunkUnit","assetPath","setAssetPath","showCode","codeDrawerComponent","useCodeDrawer","t","useI18n","assets","handleChange","useCallback","type","value","selectAfter","onChangeModule","debounce","newValue","count","onChangeAsset","filteredAssets","useMemo","res","e","ep","a","b","_a","_b","useEffect","getFileExtension","filePath","parts","f","ext","assetsStructures","createFileStructures","Boolean","file","basename","target","size","initial","path","content","styles","Keyword","Space","Divider","Typography","formatSize","CodeOutlined","onSearch","BundleCards","Card","Tabs","Tooltip","Row","Col","Tag","InfoCircleOutlined","Button","CodepenCircleOutlined","DeploymentUnitOutlined","Size","name","Bdg","KeywordInput","InputNumber","Number","SearchModal","sumBy","FileTree","ServerAPIProvider","SDK","details","AssetDetail","Empty","data","isRspack","hasSourceMap","Rspack","isTargetFileType","computedTreeData","item","flattenTreemapData","AssetTreemapWithFilter","WebpackModulesOverall","project","useProjectInfo","root"],"mappings":"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"}
+{"version":3,"file":"pages/BundleSize/components/index.mjs","sources":["../../../../src/pages/BundleSize/components/index.tsx"],"sourcesContent":["import {\n  CodepenCircleOutlined,\n  DeploymentUnitOutlined,\n  InfoCircleOutlined,\n  ShrinkOutlined,\n  ArrowsAltOutlined,\n} from '@ant-design/icons';\nimport { type Client, SDK } from '@rsdoctor/types';\nimport {\n  Button,\n  Card,\n  Col,\n  Row,\n  Space,\n  Tag,\n  Tooltip,\n  Typography,\n  Tabs,\n} from 'antd';\nimport React, { useId } from 'react';\nimport { ServerAPIProvider } from '../../../components/Manifest';\nimport { useProjectInfo } from '../../../components/Layout/project-info-context';\nimport { flattenTreemapData, usePersistedState } from '../../../utils';\nimport { BundleCards } from './cards';\nimport styles from './index.module.scss';\nimport './index.sass';\nimport {\n  AssetTreemapWithFilter,\n  TreeNode,\n} from 'src/components/Charts/TreeMap';\nimport { Rspack } from '@rsdoctor/utils/common';\nimport { TreeGraph } from './tree-graph';\n\ninterface WebpackModulesOverallProps {\n  cwd: string;\n  errors: SDK.ErrorsData;\n  summary: Client.RsdoctorClientAssetsSummary;\n  entryPoints: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetEntryPoints>;\n}\n\nexport const WebpackModulesOverallBase: React.FC<\n  WebpackModulesOverallProps\n> = ({ errors, cwd, summary, entryPoints }) => {\n  const [expanded, setExpanded] = usePersistedState(\n    'bundle-size-tabs-card-expanded',\n    false,\n  );\n  const cardDomId = useId();\n  const expandActionText = expanded ? 'Shrink card' : 'Expand card';\n  return (\n    <>\n      <React.Activity mode={expanded ? 'hidden' : 'visible'}>\n        <BundleCards cwd={cwd} errors={errors} summary={summary} />\n      </React.Activity>\n      <Card\n        className={styles.root}\n        classNames={{ body: styles.rootBody }}\n        id={cardDomId}\n      >\n        <Tabs\n          size=\"middle\"\n          className={styles.tabsRoot}\n          tabBarExtraContent={{\n            right: (\n              <Tooltip\n                // the content collapses/expands, but the cursor stays at the same position (outside the button now, cause layout has shifted)\n                // antd doesn't know that and keeps the tooltip open, so we need to force rerender it on every state change\n                key={String(expanded)}\n                title={expandActionText}\n              >\n                <Button\n                  // TODO:: does it make sense here? the content basically stays the same and we're actually controlling other elements\n                  aria-controls={cardDomId}\n                  aria-expanded={expanded}\n                  aria-label={expandActionText}\n                  onClick={() => setExpanded(!expanded)}\n                  icon={expanded ? <ShrinkOutlined /> : <ArrowsAltOutlined />}\n                  size=\"small\"\n                ></Button>\n              </Tooltip>\n            ),\n          }}\n          items={[\n            {\n              key: 'tree',\n              label: (\n                <Space>\n                  <Typography.Text>Tree Graph</Typography.Text>\n                  <Tooltip\n                    overlayStyle={{ maxWidth: 380 }}\n                    overlayInnerStyle={{ marginLeft: 16, padding: 10 }}\n                    color=\"white\"\n                    title={\n                      <Space direction=\"vertical\" color=\"white\" size=\"middle\">\n                        <Row>\n                          <Col>\n                            <Tag color=\"cyan\" style={{ margin: 0 }}>\n                              initial\n                            </Tag>\n                            <Typography.Text style={{ marginLeft: 4 }}>\n                              Identify whether the chunk is an initial chunk.\n                            </Typography.Text>\n                          </Col>\n                        </Row>\n                        <Row>\n                          <Col>\n                            <Tag color=\"green\" style={{ margin: 0 }}>\n                              concatenated\n                            </Tag>\n                            <Typography.Text style={{ marginLeft: 4 }}>\n                              Identify whether the module is a concatenated\n                              module\n                            </Typography.Text>\n                            <Tooltip\n                              overlayStyle={{ maxWidth: 408 }}\n                              placement=\"bottom\"\n                              color=\"white\"\n                              title={\n                                <Space direction=\"vertical\" color=\"white\">\n                                  <Row>\n                                    <Col>\n                                      <Typography.Text strong>\n                                        Concatenated Module\n                                      </Typography.Text>\n                                      <Typography.Text>\n                                        : A performance optimization where\n                                        multiple modules are merged (or\n                                        \"hoisted\") into a single scope instead\n                                        of wrapping each module in separate\n                                        function closures. This reduces the\n                                        bundle size and improves runtime\n                                        performance by minimizing function call\n                                        overhead.\n                                      </Typography.Text>\n                                    </Col>\n                                  </Row>\n                                </Space>\n                              }\n                            >\n                              <InfoCircleOutlined\n                                style={{\n                                  color: 'rgba(0,0,0,.45)',\n                                  marginLeft: 4,\n                                }}\n                              />\n                            </Tooltip>\n                            <Typography.Text>.</Typography.Text>\n                          </Col>\n                        </Row>\n                        <Row>\n                          <Col>\n                            <Button\n                              size=\"small\"\n                              icon={<CodepenCircleOutlined />}\n                            />\n                            <Typography.Text style={{ marginLeft: 4 }}>\n                              Open the code.\n                            </Typography.Text>\n                          </Col>\n                        </Row>\n                        <Row>\n                          <Col>\n                            <Button\n                              size=\"small\"\n                              icon={<DeploymentUnitOutlined />}\n                            />\n                            <Typography.Text style={{ marginLeft: 4 }}>\n                              View the module dependency, that is, module\n                              reasons in stats.json.\n                            </Typography.Text>\n                          </Col>\n                        </Row>\n                        <Row>\n                          <Col>\n                            <Tag color={'purple'}>{'Bundled: 15.77 KB'}</Tag>\n                            <Typography.Text>\n                              The final size of the output files after\n                              processing, bundling, and optimization. This is\n                              what is delivered to the browser.\n                            </Typography.Text>\n                          </Col>\n                        </Row>\n                        <Row>\n                          <Col>\n                            <Tag color={'orange'}>{'Source: 60.46 KB'}</Tag>\n                            <Typography.Text>\n                              The original size of your source code files before\n                              any processing or transformations. This is the raw\n                              size of your code as you wrote it.\n                            </Typography.Text>\n                          </Col>\n                        </Row>\n                      </Space>\n                    }\n                  >\n                    <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />\n                  </Tooltip>\n                </Space>\n              ),\n              children: (\n                <TreeGraph\n                  entryPoints={entryPoints}\n                  cwd={cwd}\n                  summary={summary}\n                />\n              ),\n            },\n            {\n              key: 'treemap',\n              label: 'Treemap',\n              children: (\n                <ServerAPIProvider api={SDK.ServerAPI.API.GetProjectInfo}>\n                  {(data) => {\n                    const { isRspack, hasSourceMap } =\n                      Rspack.checkSourceMapSupport(data.configs);\n                    return (\n                      <ServerAPIProvider\n                        api={SDK.ServerAPI.API.GetSummaryBundles}\n                      >\n                        {(data) => {\n                          // Filter assets to only show JS (js, cjs, mjs), .bundle, CSS, and HTML files\n                          const isTargetFileType = (\n                            filePath: string,\n                          ): boolean => {\n                            const ext =\n                              filePath.toLowerCase().split('.').pop() || '';\n                            return (\n                              ext === 'js' ||\n                              ext === 'cjs' ||\n                              ext === 'mjs' ||\n                              ext === 'bundle' ||\n                              ext === 'css' ||\n                              ext === 'html'\n                            );\n                          };\n\n                          const computedTreeData: TreeNode[] = data\n                            .filter((item) => isTargetFileType(item.asset.path))\n                            .map((item) => ({\n                              name: item.asset.path,\n                              value: item.asset.size,\n                              children: flattenTreemapData(item.modules)\n                                .children,\n                            }));\n                          return (\n                            <AssetTreemapWithFilter\n                              treeData={computedTreeData}\n                              bundledSize={hasSourceMap || isRspack}\n                            />\n                          );\n                        }}\n                      </ServerAPIProvider>\n                    );\n                  }}\n                </ServerAPIProvider>\n              ),\n            },\n          ]}\n          defaultActiveKey=\"tree\"\n        />\n      </Card>\n    </>\n  );\n};\n\nexport const WebpackModulesOverall: React.FC = () => {\n  const { project } = useProjectInfo();\n\n  if (!project) {\n    return null;\n  }\n\n  const { root, errors } = project;\n  return (\n    <ServerAPIProvider\n      api={SDK.ServerAPI.API.GetAssetsSummary}\n      body={{ withFileContent: true }}\n    >\n      {(summary) => {\n        return (\n          <ServerAPIProvider api={SDK.ServerAPI.API.GetEntryPoints}>\n            {(entryPoints) => (\n              <WebpackModulesOverallBase\n                cwd={root}\n                errors={errors}\n                summary={summary}\n                entryPoints={entryPoints}\n              />\n            )}\n          </ServerAPIProvider>\n        );\n      }}\n    </ServerAPIProvider>\n  );\n};\n"],"names":["WebpackModulesOverallBase","errors","cwd","summary","entryPoints","expanded","setExpanded","usePersistedState","cardDomId","useId","expandActionText","React","BundleCards","Card","styles","Tabs","Tooltip","Button","ShrinkOutlined","ArrowsAltOutlined","String","Space","Typography","Row","Col","Tag","InfoCircleOutlined","CodepenCircleOutlined","DeploymentUnitOutlined","TreeGraph","ServerAPIProvider","SDK","data","isRspack","hasSourceMap","Rspack","isTargetFileType","filePath","ext","computedTreeData","item","flattenTreemapData","AssetTreemapWithFilter","WebpackModulesOverall","project","useProjectInfo","root"],"mappings":"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"}

package/dist/pages/BundleSize/components/index.module.mjs

@@ -1,5 +1,15 @@
 import "./index_module.css";
 const index_module = {
+    root: "root-DgXuux",
+    rootBody: "rootBody-xGjkG7",
+    treeGraph: "treeGraph-LllSyP",
+    tabsRoot: "tabsRoot-gPEaze",
+    assetDetailCol: "assetDetailCol-jwyTZJ",
+    assetDetailFileTreeRoot: "assetDetailFileTreeRoot-RBNnA8",
+    assetDetailFileTreeBody: "assetDetailFileTreeBody-kRMd_h",
+    assetDetailFileTreeViewport: "assetDetailFileTreeViewport-USNF6e",
+    assetDetailRoot: "assetDetailRoot-dgQPS5",
+    assetDetailFileTreeScrollArea: "assetDetailFileTreeScrollArea-IqDzT3",
     assets: "assets-ll1P_L",
     assetBox: "assetBox-Y8vGse",
     fileText: "fileText-W0quVZ",

package/dist/pages/BundleSize/components/index.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pages/BundleSize/components/index.module.mjs","sources":["../../../../src/pages/BundleSize/components/index.module.scss"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./index_module.css\"\nexport default {\"assets\":\"assets-ll1P_L\",\"assetBox\":\"assetBox-Y8vGse\",\"fileText\":\"fileText-W0quVZ\",\"assetsTag\":\"assetsTag-eAVvyj\",\"modal\":\"modal-afyzYa\",\"search-btn\":\"search-btn-To902q\",\"searchBtn\":\"search-btn-To902q\",\"search-modal-list\":\"search-modal-list-G_Uxc8\",\"searchModalList\":\"search-modal-list-G_Uxc8\"};"],"names":[],"mappings":";AAEA,qBAAe;IAAC,QAAS;IAAgB,UAAW;IAAkB,UAAW;IAAkB,WAAY;IAAmB,OAAQ;IAAe,cAAa;IAAoB,WAAY;IAAoB,qBAAoB;IAA2B,iBAAkB;AAA0B"}
+{"version":3,"file":"pages/BundleSize/components/index.module.mjs","sources":["../../../../src/pages/BundleSize/components/index.module.scss"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./index_module.css\"\nexport default {\"root\":\"root-DgXuux\",\"rootBody\":\"rootBody-xGjkG7\",\"treeGraph\":\"treeGraph-LllSyP\",\"tabsRoot\":\"tabsRoot-gPEaze\",\"assetDetailCol\":\"assetDetailCol-jwyTZJ\",\"assetDetailFileTreeRoot\":\"assetDetailFileTreeRoot-RBNnA8\",\"assetDetailFileTreeBody\":\"assetDetailFileTreeBody-kRMd_h\",\"assetDetailFileTreeViewport\":\"assetDetailFileTreeViewport-USNF6e\",\"assetDetailRoot\":\"assetDetailRoot-dgQPS5\",\"assetDetailFileTreeScrollArea\":\"assetDetailFileTreeScrollArea-IqDzT3\",\"assets\":\"assets-ll1P_L\",\"assetBox\":\"assetBox-Y8vGse\",\"fileText\":\"fileText-W0quVZ\",\"assetsTag\":\"assetsTag-eAVvyj\",\"modal\":\"modal-afyzYa\",\"search-btn\":\"search-btn-To902q\",\"searchBtn\":\"search-btn-To902q\",\"search-modal-list\":\"search-modal-list-G_Uxc8\",\"searchModalList\":\"search-modal-list-G_Uxc8\"};"],"names":[],"mappings":";AAEA,qBAAe;IAAC,MAAO;IAAc,UAAW;IAAkB,WAAY;IAAmB,UAAW;IAAkB,gBAAiB;IAAwB,yBAA0B;IAAiC,yBAA0B;IAAiC,6BAA8B;IAAqC,iBAAkB;IAAyB,+BAAgC;IAAuC,QAAS;IAAgB,UAAW;IAAkB,UAAW;IAAkB,WAAY;IAAmB,OAAQ;IAAe,cAAa;IAAoB,WAAY;IAAoB,qBAAoB;IAA2B,iBAAkB;AAA0B"}

package/dist/pages/BundleSize/components/index_module.css

@@ -1,3 +1,52 @@
+.root-DgXuux .rootBody-xGjkG7 {
+  padding-top: 0;
+}
+
+.root-DgXuux, .rootBody-xGjkG7, .treeGraph-LllSyP, .tabsRoot-gPEaze, .assetDetailCol-jwyTZJ, .assetDetailFileTreeRoot-RBNnA8, .assetDetailFileTreeBody-kRMd_h, .assetDetailFileTreeViewport-USNF6e {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+.tabsRoot-gPEaze .ant-tabs-content-holder {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+.tabsRoot-gPEaze .ant-tabs-content {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+.tabsRoot-gPEaze .ant-tabs-tabpane-active {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+.treeGraph-LllSyP {
+  row-gap: 8px;
+}
+
+.assetDetailRoot-dgQPS5 {
+  column-gap: var(--spacing-base);
+  flex: 1;
+  grid-template-columns: 1fr 3fr;
+  display: grid;
+}
+
+.assetDetailFileTreeViewport-USNF6e {
+  position: relative;
+}
+
+.assetDetailFileTreeScrollArea-IqDzT3 {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+}
+
 .assets-ll1P_L .rc-tree-indent-unit {
   width: 22px;
 }

package/dist/pages/BundleSize/components/index_module.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack://./src/pages/BundleSize/components/index.module.scss"],"names":[],"mappings":"AAAA;EACE,WAAW;AACb;;AAFgD;EAK9C,4BAA4B;AAC9B;;AAN8G;EAS5G,kBAAkB;EAClB,WAAW;AACb;;AAX0Q;EAcxQ,eAAe;AACjB;;AAfoa;EAkBla,cAAc;EACd,iBAAiB;AACnB;;AApB6jB;EAuB3jB,mBAAmB;EACnB,aAAa;AACf;;AAzB+mB;EA4B7mB,iBAAiB;AACnB;;AA7B4pB;EAgC1pB,YAAY;AACd;;AAjCmrB;EAoCjrB,gBAAgB;AAClB;;AArC4uB;EAwC1uB,YAAY;EACZ,gBAAgB;AAClB;;AA1CgzB;EA6C9yB,WAAW;AACb;;AA9Cu0B;EAiDr0B,kBAAkB;AACpB;;AAlD02B;EAqDx2B,WAAW;EACX,UAAU;EACV,sBAAsB;EACtB,qDAAqD;EACrD,mBAAmB;EACnB,kBAAkB;EAClB,WAAW;AACb;;AA5D8gC;EA+D5gC,UAAU;AACZ;;AAhEkjC;EAmEhjC,iBAAiB;EACjB,cAAc;AAChB;;AArEgoC;EAwE9nC,eAAe;EACf,sBAAsB;AACxB","sourcesContent":[".assets :global .rc-tree-indent-unit{width:22px}.assets :global .rc-tree-treenode{line-height:30px !important}.assets :global .rc-tree-treenode:not(.rc-tree-treenode-switcher-open):not(.rc-tree-treenode-switcher-close) .rc-tree-switcher{position:relative;bottom:4px}.assets :global .rc-tree-treenode:not(.rc-tree-treenode-switcher-open):not(.rc-tree-treenode-switcher-close) .rc-tree-node-content-wrapper{font-size:14px}.assets :global .rc-tree-treenode:not(.rc-tree-treenode-switcher-open):not(.rc-tree-treenode-switcher-close) .file-icon{padding:10px 0 0 0;margin-left:0}.assets .assetBox{display:flex;align-items:center}.assets .assetBox .fileText{margin-right:4px}.assetsTag{height:30px}.assetsTag :global .ant-divider-vertical{margin-inline:0}.modal :global .ant-input-affix-wrapper{padding:4px 5px;width:490px}.search-btn{color:#fff}.search-btn>span{position:relative}.search-btn::before{content:\"\";background:linear-gradient(135deg, #6253e1, #04befe);position:absolute;inset:-1px;opacity:1;transition:all .3s;border-radius:inherit}.search-btn:hover::before{opacity:0}.search-modal-list :global .ant-spin-container{overflow:auto;max-height:30rem}.search-modal-list :global .search-list-item.clickable:hover{background-color:#eee;cursor:pointer}"],"sourceRoot":""}
+{"version":3,"sources":["webpack://./src/pages/BundleSize/components/index.module.scss"],"names":[],"mappings":"AAAA;EACE,cAAc;AAChB;;AAF8B;EAK5B,sBAAsB;EACtB,OAAO;EACP,aAAa;AACf;;AAR8B;EAW5B,sBAAsB;EACtB,OAAO;EACP,aAAa;AACf;;AAd8B;EAiB5B,sBAAsB;EACtB,OAAO;EACP,aAAa;AACf;;AApB8B;EAuB5B,sBAAsB;EACtB,OAAO;EACP,aAAa;AACf;;AA1ByU;EA6BvU,YAAY;AACd;;AA9BgW;EAiC9V,+BAA+B;EAC/B,OAAO;EACP,8BAA8B;EAC9B,aAAa;AACf;;AArCkc;EAwChc,kBAAkB;AACpB;;AAzCif;EA4C/e,kBAAkB;EAClB,QAAQ;EACR,cAAc;AAChB;;AA/CwjB;EAkDtjB,WAAW;AACb;;AAnDwmB;EAsDtmB,4BAA4B;AAC9B;;AAvDsqB;EA0DpqB,kBAAkB;EAClB,WAAW;AACb;;AA5Dk0B;EA+Dh0B,eAAe;AACjB;;AAhE49B;EAmE19B,cAAc;EACd,iBAAiB;AACnB;;AArEqnC;EAwEnnC,mBAAmB;EACnB,aAAa;AACf;;AA1EuqC;EA6ErqC,iBAAiB;AACnB;;AA9EotC;EAiFltC,YAAY;AACd;;AAlF2uC;EAqFzuC,gBAAgB;AAClB;;AAtFoyC;EAyFlyC,YAAY;EACZ,gBAAgB;AAClB;;AA3Fw2C;EA8Ft2C,WAAW;AACb;;AA/F+3C;EAkG73C,kBAAkB;AACpB;;AAnGk6C;EAsGh6C,WAAW;EACX,UAAU;EACV,sBAAsB;EACtB,qDAAqD;EACrD,mBAAmB;EACnB,kBAAkB;EAClB,WAAW;AACb;;AA7GskD;EAgHpkD,UAAU;AACZ;;AAjH0mD;EAoHxmD,iBAAiB;EACjB,cAAc;AAChB;;AAtHwrD;EAyHtrD,eAAe;EACf,sBAAsB;AACxB","sourcesContent":[".root .rootBody{padding-top:0}.root,.rootBody,.treeGraph,.tabsRoot,.assetDetailCol,.assetDetailFileTreeRoot,.assetDetailFileTreeBody,.assetDetailFileTreeViewport,.tabsRoot :global(.ant-tabs-content-holder),.tabsRoot :global(.ant-tabs-content),.tabsRoot :global(.ant-tabs-tabpane-active){display:flex;flex-direction:column;flex:1}.treeGraph{row-gap:8px}.assetDetailRoot{display:grid;column-gap:var(--spacing-base);grid-template-columns:1fr 3fr;flex:1}.assetDetailFileTreeViewport{position:relative}.assetDetailFileTreeScrollArea{position:absolute;inset:0;overflow:auto}.assets :global .rc-tree-indent-unit{width:22px}.assets :global .rc-tree-treenode{line-height:30px !important}.assets :global .rc-tree-treenode:not(.rc-tree-treenode-switcher-open):not(.rc-tree-treenode-switcher-close) .rc-tree-switcher{position:relative;bottom:4px}.assets :global .rc-tree-treenode:not(.rc-tree-treenode-switcher-open):not(.rc-tree-treenode-switcher-close) .rc-tree-node-content-wrapper{font-size:14px}.assets :global .rc-tree-treenode:not(.rc-tree-treenode-switcher-open):not(.rc-tree-treenode-switcher-close) .file-icon{padding:10px 0 0 0;margin-left:0}.assets .assetBox{display:flex;align-items:center}.assets .assetBox .fileText{margin-right:4px}.assetsTag{height:30px}.assetsTag :global .ant-divider-vertical{margin-inline:0}.modal :global .ant-input-affix-wrapper{padding:4px 5px;width:490px}.search-btn{color:#fff}.search-btn>span{position:relative}.search-btn::before{content:\"\";background:linear-gradient(135deg, #6253e1, #04befe);position:absolute;inset:-1px;opacity:1;transition:all .3s;border-radius:inherit}.search-btn:hover::before{opacity:0}.search-modal-list :global .ant-spin-container{overflow:auto;max-height:30rem}.search-modal-list :global .search-list-item.clickable:hover{background-color:#eee;cursor:pointer}"],"sourceRoot":""}

package/dist/pages/BundleSize/components/tree-graph.d.ts

@@ -0,0 +1,7 @@
+import { type Client, SDK } from '@rsdoctor/types';
+import './index.sass';
+export declare const TreeGraph: import("react").MemoExoticComponent<({ cwd, summary, entryPoints, }: {
+    cwd: string;
+    summary: Client.RsdoctorClientAssetsSummary;
+    entryPoints: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetEntryPoints>;
+}) => import("react").JSX.Element>;

package/dist/pages/BundleSize/components/tree-graph.mjs

@@ -0,0 +1,366 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CodeOutlined, InfoCircleOutlined } from "@ant-design/icons";
+import { SDK } from "@rsdoctor/types";
+import { Card, Col, Divider, Empty, InputNumber, Row, Select, Space, Tooltip, Typography } from "antd";
+import { debounce, sumBy } from "es-toolkit/compat";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { useCodeDrawer } from "../../../components/base/CodeViewer/useCodeDrawer.mjs";
+import { Badge } from "../../../components/Badge/index.mjs";
+import { FileTree } from "../../../components/FileTree/index.mjs";
+import { KeywordInput } from "../../../components/Form/keyword.mjs";
+import { Keyword } from "../../../components/Keyword/index.mjs";
+import { ServerAPIProvider } from "../../../components/Manifest/index.mjs";
+import { Size } from "../../../constants.mjs";
+import { createFileStructures, formatSize, useI18n } from "../../../utils/index.mjs";
+import { AssetDetail } from "./asset.mjs";
+import index_module from "./index.module.mjs";
+import "./index.css";
+import { SearchModal } from "./search-modal.mjs";
+const { Option: Option } = Select;
+const TreeGraph = /*#__PURE__*/ memo(({ cwd, summary, entryPoints })=>{
+    const [selectedEntryPoints, setEntryPoints] = useState([]);
+    const [inputModule, setModuleValue] = useState(0);
+    const [inputAssetName, setAssetName] = useState('');
+    const [inputAssetSize, setAssetSize] = useState(0);
+    const [defaultExpandAll, setDefaultExpandAll] = useState(false);
+    const [inputModuleUnit, setModuleUnit] = useState('');
+    const [inputChunkUnit, setChunkUnit] = useState('');
+    const [assetPath, setAssetPath] = useState(null);
+    const { showCode, codeDrawerComponent } = useCodeDrawer('Do not have the codes of assets. If you use the lite or brief mode, there will have codes.');
+    const { t } = useI18n();
+    const assets = summary.all.total.files;
+    const handleChange = useCallback((type)=>(value)=>{
+            if ('module' === type) setModuleUnit(value);
+            else if ('chunk' === type) setChunkUnit(value);
+        }, []);
+    const selectAfter = (type)=>/*#__PURE__*/ jsxs(Select, {
+            defaultValue: "kb",
+            onChange: handleChange(type),
+            children: [
+                /*#__PURE__*/ jsx(Option, {
+                    value: "kb",
+                    children: "KB"
+                }),
+                /*#__PURE__*/ jsx(Option, {
+                    value: "mb",
+                    children: "MB"
+                })
+            ]
+        });
+    const onChangeModule = useCallback(debounce((newValue)=>{
+        const count = 'mb' === inputModuleUnit ? 1024 * newValue * 1024 : 1024 * newValue;
+        setModuleValue(count);
+    }, 300), []);
+    const onChangeAsset = useCallback(debounce((newValue)=>{
+        const count = 'mb' === inputChunkUnit ? 1024 * newValue * 1024 : 1024 * newValue;
+        setAssetSize(count);
+    }, 300), []);
+    const filteredAssets = useMemo(()=>{
+        let res = assets.slice();
+        if (inputAssetName) res = res.filter((e)=>e.path.indexOf(inputAssetName) > -1);
+        if (inputAssetSize > 0) res = res.filter((e)=>e.size >= inputAssetSize);
+        if (selectedEntryPoints.length) res = res.filter((e)=>{
+            if (selectedEntryPoints.some((ep)=>ep.assets.includes(e.path))) return true;
+            return false;
+        });
+        return res.sort((a, b)=>{
+            const _a = a.path.indexOf('/') > -1 ? 1 : 0;
+            const _b = b.path.indexOf('/') > -1 ? 1 : 0;
+            return _b - _a;
+        });
+    }, [
+        assets,
+        selectedEntryPoints,
+        inputAssetName,
+        inputAssetSize
+    ]);
+    useEffect(()=>{
+        function getFileExtension(filePath) {
+            const parts = filePath.split('.');
+            return parts.length > 1 ? parts.pop() : '';
+        }
+        summary.all.total.files.forEach((f)=>{
+            const ext = getFileExtension(f.path);
+            if ('js' === ext) setAssetPath(f.path);
+        });
+    }, [
+        summary.all.total.files
+    ]);
+    const assetsStructures = useMemo(()=>{
+        const res = createFileStructures({
+            files: filteredAssets.map((e)=>e.path).filter(Boolean),
+            fileTitle (file, basename) {
+                const target = filteredAssets.find((e)=>e.path === file);
+                const { size, initial, path, content } = target;
+                return /*#__PURE__*/ jsxs("div", {
+                    className: index_module.assetBox,
+                    onClick: ()=>{
+                        setAssetPath(path);
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(Keyword, {
+                            text: basename,
+                            keyword: '',
+                            className: index_module.fileText
+                        }),
+                        /*#__PURE__*/ jsxs(Space, {
+                            size: "small",
+                            className: index_module.assetsTag,
+                            children: [
+                                /*#__PURE__*/ jsx(Divider, {
+                                    type: "vertical"
+                                }),
+                                /*#__PURE__*/ jsx(Typography.Text, {
+                                    style: {
+                                        color: '#4FD233'
+                                    },
+                                    children: formatSize(size)
+                                }),
+                                /*#__PURE__*/ jsx(Divider, {
+                                    type: "vertical"
+                                }),
+                                initial ? /*#__PURE__*/ jsx(Typography.Text, {
+                                    style: {
+                                        color: '#009A9E'
+                                    },
+                                    children: "initial"
+                                }) : null,
+                                /*#__PURE__*/ jsx(CodeOutlined, {
+                                    style: {
+                                        fontSize: 14,
+                                        padding: 0
+                                    },
+                                    onClick: ()=>showCode({
+                                            code: content,
+                                            filePath: path
+                                        })
+                                })
+                            ]
+                        })
+                    ]
+                });
+            }
+        });
+        return res;
+    }, [
+        filteredAssets
+    ]);
+    const onSearch = (value)=>{
+        setAssetName(value);
+        setDefaultExpandAll(false);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: index_module.treeGraph,
+                children: [
+                    /*#__PURE__*/ jsxs(Row, {
+                        align: "middle",
+                        gutter: [
+                            Size.BasePadding,
+                            Size.BasePadding
+                        ],
+                        children: [
+                            entryPoints && entryPoints.length ? /*#__PURE__*/ jsx(Col, {
+                                children: /*#__PURE__*/ jsx(Select, {
+                                    mode: "multiple",
+                                    value: selectedEntryPoints.map((e)=>e.name),
+                                    style: {
+                                        minWidth: 230,
+                                        width: 'auto',
+                                        maxWidth: 300
+                                    },
+                                    placeholder: 'filter assets by entry point',
+                                    onChange: (name)=>{
+                                        setEntryPoints(name.map((e)=>entryPoints.find((ep)=>ep.name === e)).filter(Boolean));
+                                    },
+                                    allowClear: true,
+                                    onClear: ()=>{
+                                        setEntryPoints([]);
+                                    },
+                                    children: entryPoints.map((e)=>/*#__PURE__*/ jsx(Select.Option, {
+                                            value: e.name,
+                                            children: /*#__PURE__*/ jsx(Space, {
+                                                children: /*#__PURE__*/ jsx(Badge, {
+                                                    label: e.name,
+                                                    value: formatSize(e.size),
+                                                    tooltip: e.name
+                                                })
+                                            })
+                                        }, e.name))
+                                })
+                            }) : null,
+                            /*#__PURE__*/ jsx(Col, {
+                                children: /*#__PURE__*/ jsx(KeywordInput, {
+                                    placeholder: "search asset by keyword",
+                                    onChange: onSearch
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Col, {
+                                span: 6,
+                                children: /*#__PURE__*/ jsx(InputNumber, {
+                                    min: 0,
+                                    style: {
+                                        width: '95%'
+                                    },
+                                    addonBefore: /*#__PURE__*/ jsxs(Space, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Typography.Text, {
+                                                style: {
+                                                    fontSize: 14,
+                                                    color: 'inherit'
+                                                },
+                                                children: "Asset Size"
+                                            }),
+                                            /*#__PURE__*/ jsx(Tooltip, {
+                                                title: t('filter the output assets which size is greater than the input value'),
+                                                style: {
+                                                    marginLeft: 3
+                                                },
+                                                children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
+                                                    style: {
+                                                        color: 'rgba(0,0,0,.45)'
+                                                    }
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    onChange: (value)=>onChangeAsset(Number(value)),
+                                    addonAfter: selectAfter('chunk')
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Col, {
+                                span: 6,
+                                children: /*#__PURE__*/ jsx(InputNumber, {
+                                    min: 0,
+                                    style: {
+                                        width: '95%'
+                                    },
+                                    addonBefore: /*#__PURE__*/ jsxs(Space, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Typography.Text, {
+                                                style: {
+                                                    fontSize: 14,
+                                                    color: 'inherit'
+                                                },
+                                                children: "Module Size"
+                                            }),
+                                            /*#__PURE__*/ jsx(Tooltip, {
+                                                title: t('filter the modules which size is greater than the input value'),
+                                                style: {
+                                                    marginLeft: 3
+                                                },
+                                                children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
+                                                    style: {
+                                                        color: 'rgba(0,0,0,.45)'
+                                                    }
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    onChange: (value)=>{
+                                        onChangeModule(Number(value));
+                                    },
+                                    addonAfter: selectAfter('module')
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Row, {
+                        children: /*#__PURE__*/ jsx(SearchModal, {})
+                    }),
+                    filteredAssets.length ? /*#__PURE__*/ jsxs("div", {
+                        className: index_module.assetDetailRoot,
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: index_module.assetDetailCol,
+                                children: /*#__PURE__*/ jsx(Card, {
+                                    className: index_module.assetDetailFileTreeRoot,
+                                    classNames: {
+                                        body: index_module.assetDetailFileTreeBody
+                                    },
+                                    title: /*#__PURE__*/ jsxs(Space, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Typography.Text, {
+                                                children: t('Output Assets List')
+                                            }),
+                                            /*#__PURE__*/ jsx(Divider, {
+                                                type: "vertical"
+                                            }),
+                                            /*#__PURE__*/ jsx(Tooltip, {
+                                                title: `total assets count is ${assets.length}, the filtered assets count is ${filteredAssets.length}`,
+                                                children: /*#__PURE__*/ jsxs(Typography.Text, {
+                                                    type: "secondary",
+                                                    style: {
+                                                        fontSize: 12,
+                                                        fontWeight: 400
+                                                    },
+                                                    children: [
+                                                        filteredAssets.length,
+                                                        " / ",
+                                                        assets.length
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx(Divider, {
+                                                type: "vertical"
+                                            }),
+                                            /*#__PURE__*/ jsx(Typography.Text, {
+                                                type: "secondary",
+                                                style: {
+                                                    fontSize: 12,
+                                                    fontWeight: 400
+                                                },
+                                                children: formatSize(sumBy(filteredAssets, (e)=>e.size))
+                                            })
+                                        ]
+                                    }),
+                                    size: "small",
+                                    children: /*#__PURE__*/ jsx("div", {
+                                        className: index_module.assetDetailFileTreeViewport,
+                                        children: /*#__PURE__*/ jsx("div", {
+                                            className: index_module.assetDetailFileTreeScrollArea,
+                                            children: /*#__PURE__*/ jsx(FileTree, {
+                                                className: index_module.assets,
+                                                treeData: assetsStructures,
+                                                autoExpandParent: true,
+                                                defaultExpandAll: defaultExpandAll || filteredAssets.length <= 20
+                                            }, `tree_${inputAssetName}_${defaultExpandAll}`)
+                                        })
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: index_module.assetDetailCol,
+                                children: assetPath ? /*#__PURE__*/ jsx(ServerAPIProvider, {
+                                    api: SDK.ServerAPI.API.GetAssetDetails,
+                                    body: {
+                                        assetPath
+                                    },
+                                    children: (details)=>/*#__PURE__*/ jsx(AssetDetail, {
+                                            asset: details.asset,
+                                            chunks: details.chunks,
+                                            modules: details.modules,
+                                            moduleSizeLimit: inputModule,
+                                            root: cwd
+                                        })
+                                }) : /*#__PURE__*/ jsx(Card, {
+                                    children: /*#__PURE__*/ jsx(Empty, {
+                                        description: /*#__PURE__*/ jsx(Typography.Text, {
+                                            strong: true,
+                                            children: "Click the file path on the left to show the modules of the asset"
+                                        })
+                                    })
+                                })
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsx(Empty, {})
+                ]
+            }),
+            codeDrawerComponent
+        ]
+    });
+});
+export { TreeGraph };
+
+//# sourceMappingURL=tree-graph.mjs.map