npm - @rsdoctor/components - Versions diffs - 1.5.17 → 1.6.0 - Mend

@rsdoctor/components 1.5.17 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (134) hide show

package/dist/components/Charts/TimelineCharts/index.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { memo, useEffect, useState } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import core from "echarts-for-react/esm/core";
 import * as __rspack_external_echarts_core_d2845954 from "echarts/core";
 import { CustomChart } from "echarts/charts";
@@ -8,30 +8,23 @@ import { CanvasRenderer } from "echarts/renderers";
 import dayjs from "dayjs";
 import { groupBy } from "es-toolkit/compat";
 import { ChartTypes, PALETTE_COLORS } from "../constants.mjs";
+import { useTheme, useThemeToken } from "../../../utils/index.mjs";
 const LINE_HEIGHT = 60;
-const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn, chartType = ChartTypes.Normal, exts = null })=>{
+const DARK_MODE_LOADER_BAR_OPACITY = 0.6;
+function buildTimelineData(loaderData, pluginsData) {
     const data = [];
-    let categories = [];
-    const [optionsData, setOptionsData] = useState({});
-    __rspack_external_echarts_core_d2845954.use([
-        CustomChart,
-        TooltipComponent,
-        GridComponent,
-        DataZoomComponent,
-        CanvasRenderer
-    ]);
-    useEffect(()=>{
-        if (!loaderData) return;
-        const _categories = [];
+    const categories = [];
+    if (loaderData) {
+        const loaderCategories = [];
         loaderData.forEach((_l)=>{
-            _categories.unshift(_l.n + ' total');
-            _categories.unshift(_l.n);
+            loaderCategories.unshift(_l.n + ' total');
+            loaderCategories.unshift(_l.n);
         });
-        loaderData.forEach(function(_loaderData, _i) {
+        loaderData.forEach((_loaderData)=>{
             data.push({
                 name: _loaderData.n + ' total',
                 value: [
-                    _categories.indexOf(_loaderData.n + ' total'),
+                    loaderCategories.indexOf(_loaderData.n + ' total'),
                     _loaderData.s,
                     _loaderData.e,
                     _loaderData.e - _loaderData.s
@@ -44,10 +37,10 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                 }
             });
             if (!_loaderData?.c) return;
-            for(let l = 0; l < _loaderData?.c?.length; l++)data.push({
+            for(let l = 0; l < _loaderData.c.length; l++)data.push({
                 name: _loaderData.n,
                 value: [
-                    _categories.indexOf(_loaderData.n),
+                    loaderCategories.indexOf(_loaderData.n),
                     _loaderData.c[l].s,
                     _loaderData.c[l].e,
                     _loaderData.c[l].e - _loaderData.c[l].s
@@ -61,18 +54,12 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                 ext: _loaderData.c[l].ext
             });
         });
-        categories = _categories.map((val, i)=>{
-            if (i % 2 !== 0) return val.replace(' total', '');
-            return '';
-        });
-    }, [
-        loaderData
-    ]);
-    useEffect(()=>{
-        if (!pluginsData) return;
-        const _pluginsData = groupBy(pluginsData, (e)=>e.pid);
-        Object.keys(_pluginsData).reverse().forEach(function(key, i) {
-            _pluginsData[key].forEach((_plugin, _i)=>{
+        categories.push(...loaderCategories.map((val, i)=>i % 2 !== 0 ? val.replace(' total', '') : ''));
+    }
+    if (pluginsData) {
+        const plugins = groupBy(pluginsData, (e)=>e.pid);
+        Object.keys(plugins).reverse().forEach((key, i)=>{
+            plugins[key].forEach((_plugin)=>{
                 data.push({
                     name: String(_plugin.pid),
                     value: [
@@ -92,9 +79,43 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
             });
             categories.push(String(key.charAt(0).toUpperCase() + key.slice(1)));
         });
-    }, [
+    }
+    return {
+        data,
+        categories
+    };
+}
+const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn, chartType = ChartTypes.Normal, exts = null })=>{
+    const [optionsData, setOptionsData] = useState({});
+    const { isDark } = useTheme();
+    const themeToken = useThemeToken();
+    const { data, categories } = useMemo(()=>buildTimelineData(loaderData, pluginsData), [
+        loaderData,
         pluginsData
     ]);
+    const themedData = useMemo(()=>{
+        if (!isDark || chartType !== ChartTypes.Loader) return data;
+        return data.map((item)=>({
+                ...item,
+                itemStyle: {
+                    normal: {
+                        ...item.itemStyle.normal,
+                        opacity: DARK_MODE_LOADER_BAR_OPACITY
+                    }
+                }
+            }));
+    }, [
+        chartType,
+        data,
+        isDark
+    ]);
+    __rspack_external_echarts_core_d2845954.use([
+        CustomChart,
+        TooltipComponent,
+        GridComponent,
+        DataZoomComponent,
+        CanvasRenderer
+    ]);
     useEffect(()=>{
         function renderItem(params, api) {
             const categoryIndex = api.value(0);
@@ -186,7 +207,7 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                     lineHeight: 20,
                     width: 100,
                     fontSize: 12,
-                    color: '#000',
+                    color: themeToken.colorText,
                     verticalAlign: 'bottom'
                 },
                 axisLine: {
@@ -211,15 +232,18 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
                         ],
                         y: 0
                     },
-                    data
+                    data: themedData
                 }
             ]
         };
         setOptionsData(option);
     }, [
-        loaderData,
-        pluginsData,
-        exts
+        chartType,
+        exts,
+        formatterFn,
+        themeToken,
+        categories,
+        themedData
     ]);
     return /*#__PURE__*/ jsx(core, {
         option: optionsData,
@@ -228,7 +252,7 @@ const TimelineCom = /*#__PURE__*/ memo(({ loaderData, pluginsData, formatterFn,
             width: '100%',
             minHeight: chartType === ChartTypes.Loader ? '500px' : chartType === ChartTypes.Minify ? '100px' : '200px',
             maxHeight: chartType === ChartTypes.Minify ? '100px' : '1000px',
-            border: '1px solid #eee',
+            border: '1px solid var(--color-border)',
             borderRadius: '10px'
         }
     });

package/dist/components/Charts/TimelineCharts/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components/Charts/TimelineCharts/index.mjs","sources":["../../../../src/components/Charts/TimelineCharts/index.tsx"],"sourcesContent":["import React, { useState, useEffect, memo } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/esm/core';\nimport * as echarts from 'echarts/core';\nimport { CustomChart } from 'echarts/charts';\nimport {\n TooltipComponent,\n GridComponent,\n DataZoomComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\n\nimport dayjs from 'dayjs';\nimport { ChartProps, DurationMetric, ITraceEventData } from '../types';\nimport { groupBy } from 'es-toolkit/compat';\nimport { ChartTypes, PALETTE_COLORS } from '../constants';\n\ninterface CoordSysType {\n x: number;\n y: number;\n width: number;\n height: number;\n}\ntype LoaderType = {\n name: string;\n value: number[];\n itemStyle: { normal: { color: string; opacity?: number } };\n ext?: Record<string, any>;\n};\n\nconst LINE_HEIGHT = 60;\n\nexport const TimelineCom: React.FC<{\n loaderData?: DurationMetric[];\n pluginsData?: ITraceEventData[];\n formatterFn: Function;\n chartType?: ChartTypes;\n exts?: { endTimestamp: number; startTimestamp: number };\n}> = memo(\n ({\n loaderData,\n pluginsData,\n formatterFn,\n chartType = ChartTypes.Normal,\n exts = null,\n }) => {\n const data: LoaderType[] = [];\n let categories: string[] = [];\n const [optionsData, setOptionsData] = useState({});\n\n // Register the required components\n echarts.use([\n CustomChart,\n TooltipComponent,\n GridComponent,\n DataZoomComponent,\n CanvasRenderer,\n ]);\n\n useEffect(() => {\n if (!loaderData) return;\n const _categories: string[] = [];\n loaderData.forEach((_l) => {\n _categories.unshift(_l.n + ' total');\n _categories.unshift(_l.n);\n });\n\n // Generate mock data\n loaderData.forEach(function (_loaderData, _i) {\n data.push({\n name: _loaderData.n + ' total',\n value: [\n _categories.indexOf(_loaderData.n + ' total'),\n _loaderData.s,\n _loaderData.e,\n _loaderData.e - _loaderData.s,\n ],\n itemStyle: {\n normal: {\n color: PALETTE_COLORS[Math.floor(Math.random() * 27)],\n opacity: 0.25,\n },\n },\n });\n\n if (!_loaderData?.c) return;\n for (let l = 0; l < _loaderData?.c?.length; l++) {\n data.push({\n name: _loaderData.n,\n value: [\n _categories.indexOf(_loaderData.n),\n _loaderData.c[l].s,\n _loaderData.c[l].e,\n _loaderData.c[l].e - _loaderData.c[l].s,\n ],\n itemStyle: {\n normal: {\n color: PALETTE_COLORS[Math.floor(Math.random() * 27)],\n opacity: 0.25,\n },\n },\n ext: _loaderData.c[l].ext as ChartProps['loaders'][0],\n });\n }\n });\n\n categories = _categories.map((val, i) => {\n if (i % 2 !== 0) {\n return val.replace(' total', '');\n } else {\n return '';\n }\n });\n }, [loaderData]);\n\n useEffect(() => {\n if (!pluginsData) return;\n\n const _pluginsData = groupBy(pluginsData, (e: ITraceEventData) => e.pid);\n\n Object.keys(_pluginsData)\n .reverse()\n .forEach(function (key, i) {\n _pluginsData[key].forEach((_plugin, _i) => {\n data.push({\n name: String(_plugin.pid),\n value: [\n i,\n _plugin.args.s,\n _plugin.args.e,\n _plugin.args.e - _plugin.args.s,\n ],\n itemStyle: {\n normal: {\n color: PALETTE_COLORS[Math.floor(Math.random() * 27)],\n opacity: 0.25,\n },\n },\n ext: _plugin,\n });\n });\n categories.push(String(key.charAt(0).toUpperCase() + key.slice(1)));\n });\n }, [pluginsData]);\n\n useEffect(() => {\n function renderItem(\n params: { coordSys: CoordSysType },\n api: {\n value: (arg0: number) => number;\n coord: (arg0: number[]) => any;\n size: (arg0: number[]) => number[];\n style: () => string;\n },\n ) {\n const categoryIndex = api.value(0);\n const start = api.coord([api.value(1), categoryIndex]);\n const end = api.coord([api.value(2), categoryIndex]);\n const height = api.size([0, 1])[1] * 0.3;\n\n const rectShape = echarts.graphic.clipRectByRect(\n {\n x: start[0],\n y:\n chartType === ChartTypes.Loader\n ? start[1] - (categoryIndex % 2 !== 0 ? 0 : height * 2)\n : start[1],\n width: end[0] - start[0] \|\| 5,\n height: height,\n },\n {\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height,\n },\n );\n return (\n rectShape && {\n type: 'rect',\n transition: ['shape'],\n shape: rectShape,\n style: api.style(),\n enterFrom: {\n style: { opacity: 0 },\n x: 0,\n },\n }\n );\n }\n\n const option = {\n tooltip: {\n formatter: (raw: any) => {\n return formatterFn(raw);\n },\n },\n dataZoom: [\n {\n type: 'slider',\n filterMode: 'weakFilter',\n showDataShadow: false,\n top: -10,\n },\n {\n type: 'inside',\n filterMode: 'weakFilter',\n },\n ],\n grid: {\n top: 10,\n left: 0,\n bottom: 10,\n right: 0,\n height:\n categories.length > (chartType === ChartTypes.Loader ? 6 : 3)\n ? 'auto'\n : categories.length * LINE_HEIGHT,\n containLabel: true,\n },\n xAxis: {\n interval:\n exts?.endTimestamp && exts?.startTimestamp\n ? Math.floor((exts.endTimestamp - exts.startTimestamp) / 8)\n : null,\n position: 'top',\n splitLine: {\n show: true,\n },\n scale: true,\n axisLine: {\n show: false,\n },\n axisLabel: {\n formatter(val: number) {\n return dayjs(val as number).format('HH:mm:ss:SSS');\n },\n },\n },\n yAxis: {\n type: 'category',\n splitLine: {\n show: false,\n },\n axisLabel: {\n inside: true,\n lineHeight: 20,\n width: 100,\n fontSize: 12,\n color: '#000',\n verticalAlign: 'bottom',\n },\n axisLine: {\n show: false,\n },\n axisTick: {\n show: false,\n },\n data: categories,\n },\n series: [\n {\n type: 'custom',\n renderItem,\n itemStyle: {\n opacity: 0.8,\n },\n encode: {\n x: [1, 2],\n y: 0,\n },\n data,\n },\n ],\n };\n setOptionsData(option);\n }, [loaderData, pluginsData, exts]);\n\n return (\n <ReactEChartsCore\n option={optionsData}\n echarts={echarts}\n style={{\n width: '100%',\n minHeight:\n chartType === ChartTypes.Loader\n ? '500px'\n : chartType === ChartTypes.Minify\n ? '100px'\n : '200px',\n maxHeight: chartType === ChartTypes.Minify ? '100px' : '1000px',\n border: '1px solid #eee',\n borderRadius: '10px',\n }}\n />\n );\n },\n);\n"],"names":["LINE_HEIGHT","TimelineCom","memo","loaderData","pluginsData","formatterFn","chartType","ChartTypes","exts","data","categories","optionsData","setOptionsData","useState","echarts","CustomChart","TooltipComponent","GridComponent","DataZoomComponent","CanvasRenderer","useEffect","_categories","_l","_loaderData","_i","PALETTE_COLORS","Math","l","val","i","_pluginsData","groupBy","e","Object","key","_plugin","String","renderItem","params","api","categoryIndex","start","end","height","rectShape","option","raw","dayjs","ReactEChartsCore"],"mappings":"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"}
1	+ {"version":3,"file":"components/Charts/TimelineCharts/index.mjs","sources":["../../../../src/components/Charts/TimelineCharts/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo, memo } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/esm/core';\nimport * as echarts from 'echarts/core';\nimport { CustomChart } from 'echarts/charts';\nimport {\n TooltipComponent,\n GridComponent,\n DataZoomComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\n\nimport dayjs from 'dayjs';\nimport { ChartProps, DurationMetric, ITraceEventData } from '../types';\nimport { groupBy } from 'es-toolkit/compat';\nimport { ChartTypes, PALETTE_COLORS } from '../constants';\nimport { useTheme, useThemeToken } from 'src/utils';\n\ninterface CoordSysType {\n x: number;\n y: number;\n width: number;\n height: number;\n}\ntype LoaderType = {\n name: string;\n value: number[];\n itemStyle: { normal: { color: string; opacity?: number } };\n ext?: Record<string, any>;\n};\n\nconst LINE_HEIGHT = 60;\nconst DARK_MODE_LOADER_BAR_OPACITY = 0.6;\n\nfunction buildTimelineData(\n loaderData?: DurationMetric[],\n pluginsData?: ITraceEventData[],\n) {\n const data: LoaderType[] = [];\n const categories: string[] = [];\n\n if (loaderData) {\n const loaderCategories: string[] = [];\n loaderData.forEach((_l) => {\n loaderCategories.unshift(_l.n + ' total');\n loaderCategories.unshift(_l.n);\n });\n\n loaderData.forEach((_loaderData) => {\n data.push({\n name: _loaderData.n + ' total',\n value: [\n loaderCategories.indexOf(_loaderData.n + ' total'),\n _loaderData.s,\n _loaderData.e,\n _loaderData.e - _loaderData.s,\n ],\n itemStyle: {\n normal: {\n color: PALETTE_COLORS[Math.floor(Math.random() * 27)],\n opacity: 0.25,\n },\n },\n });\n\n if (!_loaderData?.c) return;\n for (let l = 0; l < _loaderData.c.length; l++) {\n data.push({\n name: _loaderData.n,\n value: [\n loaderCategories.indexOf(_loaderData.n),\n _loaderData.c[l].s,\n _loaderData.c[l].e,\n _loaderData.c[l].e - _loaderData.c[l].s,\n ],\n itemStyle: {\n normal: {\n color: PALETTE_COLORS[Math.floor(Math.random() * 27)],\n opacity: 0.25,\n },\n },\n ext: _loaderData.c[l].ext as ChartProps['loaders'][0],\n });\n }\n });\n\n categories.push(\n ...loaderCategories.map((val, i) =>\n i % 2 !== 0 ? val.replace(' total', '') : '',\n ),\n );\n }\n\n if (pluginsData) {\n const plugins = groupBy(pluginsData, (e: ITraceEventData) => e.pid);\n\n Object.keys(plugins)\n .reverse()\n .forEach((key, i) => {\n plugins[key].forEach((_plugin) => {\n data.push({\n name: String(_plugin.pid),\n value: [\n i,\n _plugin.args.s,\n _plugin.args.e,\n _plugin.args.e - _plugin.args.s,\n ],\n itemStyle: {\n normal: {\n color: PALETTE_COLORS[Math.floor(Math.random() * 27)],\n opacity: 0.25,\n },\n },\n ext: _plugin,\n });\n });\n categories.push(String(key.charAt(0).toUpperCase() + key.slice(1)));\n });\n }\n\n return { data, categories };\n}\n\nexport const TimelineCom: React.FC<{\n loaderData?: DurationMetric[];\n pluginsData?: ITraceEventData[];\n formatterFn: Function;\n chartType?: ChartTypes;\n exts?: { endTimestamp: number; startTimestamp: number };\n}> = memo(\n ({\n loaderData,\n pluginsData,\n formatterFn,\n chartType = ChartTypes.Normal,\n exts = null,\n }) => {\n const [optionsData, setOptionsData] = useState({});\n const { isDark } = useTheme();\n const themeToken = useThemeToken();\n const { data, categories } = useMemo(\n () => buildTimelineData(loaderData, pluginsData),\n [loaderData, pluginsData],\n );\n const themedData = useMemo(() => {\n if (!isDark \|\| chartType !== ChartTypes.Loader) {\n return data;\n }\n\n return data.map((item) => ({\n ...item,\n itemStyle: {\n normal: {\n ...item.itemStyle.normal,\n opacity: DARK_MODE_LOADER_BAR_OPACITY,\n },\n },\n }));\n }, [chartType, data, isDark]);\n\n // Register the required components\n echarts.use([\n CustomChart,\n TooltipComponent,\n GridComponent,\n DataZoomComponent,\n CanvasRenderer,\n ]);\n\n useEffect(() => {\n function renderItem(\n params: { coordSys: CoordSysType },\n api: {\n value: (arg0: number) => number;\n coord: (arg0: number[]) => any;\n size: (arg0: number[]) => number[];\n style: () => string;\n },\n ) {\n const categoryIndex = api.value(0);\n const start = api.coord([api.value(1), categoryIndex]);\n const end = api.coord([api.value(2), categoryIndex]);\n const height = api.size([0, 1])[1] * 0.3;\n\n const rectShape = echarts.graphic.clipRectByRect(\n {\n x: start[0],\n y:\n chartType === ChartTypes.Loader\n ? start[1] - (categoryIndex % 2 !== 0 ? 0 : height * 2)\n : start[1],\n width: end[0] - start[0] \|\| 5,\n height: height,\n },\n {\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height,\n },\n );\n return (\n rectShape && {\n type: 'rect',\n transition: ['shape'],\n shape: rectShape,\n style: api.style(),\n enterFrom: {\n style: { opacity: 0 },\n x: 0,\n },\n }\n );\n }\n\n const option = {\n tooltip: {\n formatter: (raw: any) => {\n return formatterFn(raw);\n },\n },\n dataZoom: [\n {\n type: 'slider',\n filterMode: 'weakFilter',\n showDataShadow: false,\n top: -10,\n },\n {\n type: 'inside',\n filterMode: 'weakFilter',\n },\n ],\n grid: {\n top: 10,\n left: 0,\n bottom: 10,\n right: 0,\n height:\n categories.length > (chartType === ChartTypes.Loader ? 6 : 3)\n ? 'auto'\n : categories.length * LINE_HEIGHT,\n containLabel: true,\n },\n xAxis: {\n interval:\n exts?.endTimestamp && exts?.startTimestamp\n ? Math.floor((exts.endTimestamp - exts.startTimestamp) / 8)\n : null,\n position: 'top',\n splitLine: {\n show: true,\n },\n scale: true,\n axisLine: {\n show: false,\n },\n axisLabel: {\n formatter(val: number) {\n return dayjs(val as number).format('HH:mm:ss:SSS');\n },\n },\n },\n yAxis: {\n type: 'category',\n splitLine: {\n show: false,\n },\n axisLabel: {\n inside: true,\n lineHeight: 20,\n width: 100,\n fontSize: 12,\n color: themeToken.colorText,\n verticalAlign: 'bottom',\n },\n axisLine: {\n show: false,\n },\n axisTick: {\n show: false,\n },\n data: categories,\n },\n series: [\n {\n type: 'custom',\n renderItem,\n itemStyle: {\n opacity: 0.8,\n },\n encode: {\n x: [1, 2],\n y: 0,\n },\n data: themedData,\n },\n ],\n };\n setOptionsData(option);\n }, [chartType, exts, formatterFn, themeToken, categories, themedData]);\n\n return (\n <ReactEChartsCore\n option={optionsData}\n echarts={echarts}\n style={{\n width: '100%',\n minHeight:\n chartType === ChartTypes.Loader\n ? '500px'\n : chartType === ChartTypes.Minify\n ? '100px'\n : '200px',\n maxHeight: chartType === ChartTypes.Minify ? '100px' : '1000px',\n border: '1px solid var(--color-border)',\n borderRadius: '10px',\n }}\n />\n );\n },\n);\n"],"names":["LINE_HEIGHT","DARK_MODE_LOADER_BAR_OPACITY","buildTimelineData","loaderData","pluginsData","data","categories","loaderCategories","_l","_loaderData","PALETTE_COLORS","Math","l","val","i","plugins","groupBy","e","Object","key","_plugin","String","TimelineCom","memo","formatterFn","chartType","ChartTypes","exts","optionsData","setOptionsData","useState","isDark","useTheme","themeToken","useThemeToken","useMemo","themedData","item","echarts","CustomChart","TooltipComponent","GridComponent","DataZoomComponent","CanvasRenderer","useEffect","renderItem","params","api","categoryIndex","start","end","height","rectShape","option","raw","dayjs","ReactEChartsCore"],"mappings":"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"}

package/dist/components/Charts/TreeMap.mjs CHANGED Viewed

@@ -7,12 +7,13 @@ import { TitleComponent, TooltipComponent } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 import { Alert, Checkbox, Input, Radio } from "antd";
 import { FullscreenExitOutlined, FullscreenOutlined, LeftOutlined, RightOutlined, SearchOutlined } from "@ant-design/icons";
-import { formatSize } from "../../utils/index.mjs";
+import { formatSize, useThemeToken } from "../../utils/index.mjs";
 import { SDK } from "@rsdoctor/types";
 import { ServerAPIProvider } from "../Manifest/index.mjs";
 import { ModuleAnalyzeComponent } from "../../pages/ModuleAnalyze/index.mjs";
 import treemap_module from "./treemap.module.mjs";
 import { TREE_COLORS } from "./constants.mjs";
+import { isJavaScriptAsset } from "../../utils/assets.mjs";
 __rspack_external_echarts_core_d2845954.use([
     TreemapChart,
     TooltipComponent,
@@ -75,11 +76,12 @@ function getLevelOption() {
         }
     ];
 }
-const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, highlightNodeId, centerNodeId, rootPath })=>{
+const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, onChartClick, highlightNodeId, centerNodeId, rootPath })=>{
     const [option, setOption] = useState(null);
     const chartRef = react.useRef(null);
     const chartDataRef = react.useRef([]);
     const clickTimeoutRef = react.useRef(null);
+    const themeToken = useThemeToken();
     useEffect(()=>{
         if (!treeData) return;
         function convert(node, index = 0, level = 0, parentColor, siblingIndex = 0, siblingCount = 1, chunkPath) {
@@ -152,15 +154,16 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
         }
         const data = treeData.map((item, index)=>convert(item, index, 0, void 0, index, treeData.length, void 0)).filter((item)=>('number' == typeof item.value ? item.value > 0 : false) || item.children && item.children.length > 0);
         chartDataRef.current = data;
+        const textColor = themeToken.colorText;
         setOption({
             color: TREE_COLORS,
             tooltip: {
                 padding: 10,
-                backgroundColor: '#fff',
-                borderColor: '#eee',
+                backgroundColor: themeToken.colorBgElevated,
+                borderColor: themeToken.colorBorder,
                 borderWidth: 1,
                 textStyle: {
-                    color: 'rgba(0, 0, 0, 0.8)'
+                    color: textColor
                 },
                 confine: true,
                 extraCssText: 'max-width: 450px; word-wrap: break-word;',
@@ -196,7 +199,7 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
                     if (void 0 !== gzipSize && gzipSize > 0) rows.push(makeRow('Gzipped size', formatSize(gzipSize), '#1677ff'));
                     return `
                 <div style="font-family: sans-serif; font-size: 12px; line-height: 1.5;">
-                  <div style="margin-bottom: 6px; max-width: 400px; word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; white-space: normal; color: rgba(0, 0, 0, 0.8);">${__rspack_external_echarts_core_d2845954.format.encodeHTML(path)}</div>
+                  <div style="margin-bottom: 6px; max-width: 400px; word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; white-space: normal; color: ${textColor};">${__rspack_external_echarts_core_d2845954.format.encodeHTML(path)}</div>
                   ${rows.join('')}
                 </div>
               `;
@@ -205,9 +208,6 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
             series: [
                 {
                     type: 'treemap',
-                    itemStyle: {
-                        gapColor: '#ffffff'
-                    },
                     label: {
                         show: true,
                         formatter: '{b}',
@@ -246,17 +246,17 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
                             color: '#999',
                             borderColor: 'transparent',
                             borderWidth: 0,
-                            borderRadius: 0
+                            borderRadius: 0,
+                            textStyle: {
+                                fontFamily: 'sans-serif',
+                                fontSize: 12,
+                                color: 'white'
+                            }
                         },
                         emphasis: {
                             itemStyle: {
                                 color: '#333'
                             }
-                        },
-                        textStyle: {
-                            fontFamily: 'sans-serif',
-                            fontSize: 12,
-                            color: '#666'
                         }
                     },
                     roam: true,
@@ -269,7 +269,7 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
                     bottom: 30,
                     left: 0,
                     right: 0,
-                    zoomLimit: {
+                    scaleLimit: {
                         min: 0.5,
                         max: 5
                     }
@@ -280,7 +280,8 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
         treeData,
         sizeType,
         highlightNodeId,
-        rootPath
+        rootPath,
+        themeToken
     ]);
     useEffect(()=>{
         if (centerNodeId && chartRef.current && option) {
@@ -358,7 +359,6 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
         }, []);
     return option ? /*#__PURE__*/ jsxs("div", {
         className: treemap_module["chart-container"],
-        style: style,
         children: [
             /*#__PURE__*/ jsx(Alert, {
                 message: "If parsed size lacks detailed module information, you can enable sourceMap when RSDOCTOR = true. This is because Rsdoctor relies on SourceMap to obtain Parsed Size. Rspack provides SourceMap information to Rsdoctor by default without affecting the build output.",
@@ -368,37 +368,42 @@ const TreeMap = /*#__PURE__*/ memo(({ treeData, sizeType, style, onChartClick, h
                     marginBottom: 0
                 }
             }),
-            /*#__PURE__*/ jsx(core, {
-                ref: chartRef,
-                option: option,
-                echarts: __rspack_external_echarts_core_d2845954,
-                onEvents: {
-                    click: (params)=>{
-                        if (clickTimeoutRef.current) window.clearTimeout(clickTimeoutRef.current);
-                        clickTimeoutRef.current = window.setTimeout(()=>{
-                            if (chartRef.current) {
-                                const instance = chartRef.current.getEchartsInstance();
-                                const data = params?.data;
-                                if (instance && data?.id !== void 0) instance.dispatchAction({
-                                    type: 'treemapZoomToNode',
-                                    seriesIndex: 0,
-                                    targetNodeId: String(data.id)
-                                });
+            /*#__PURE__*/ jsx("div", {
+                style: {
+                    flex: 1
+                },
+                children: /*#__PURE__*/ jsx(core, {
+                    ref: chartRef,
+                    option: option,
+                    echarts: __rspack_external_echarts_core_d2845954,
+                    onEvents: {
+                        click: (params)=>{
+                            if (clickTimeoutRef.current) window.clearTimeout(clickTimeoutRef.current);
+                            clickTimeoutRef.current = window.setTimeout(()=>{
+                                if (chartRef.current) {
+                                    const instance = chartRef.current.getEchartsInstance();
+                                    const data = params?.data;
+                                    if (instance && data?.id !== void 0) instance.dispatchAction({
+                                        type: 'treemapZoomToNode',
+                                        seriesIndex: 0,
+                                        targetNodeId: String(data.id)
+                                    });
+                                }
+                            }, 180);
+                        },
+                        dblclick: (params)=>{
+                            if (clickTimeoutRef.current) {
+                                window.clearTimeout(clickTimeoutRef.current);
+                                clickTimeoutRef.current = null;
                             }
-                        }, 180);
-                    },
-                    dblclick: (params)=>{
-                        if (clickTimeoutRef.current) {
-                            window.clearTimeout(clickTimeoutRef.current);
-                            clickTimeoutRef.current = null;
+                            onChartClick?.(params);
                         }
-                        onChartClick?.(params);
+                    },
+                    style: {
+                        width: '100%',
+                        height: '100%'
                     }
-                },
-                style: {
-                    width: '100%',
-                    height: '100%'
-                }
+                })
             })
         ]
     }) : null;
@@ -426,7 +431,27 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
     const [moduleId, setModuleId] = useState('');
     const [showAnalyze, setShowAnalyze] = useState(false);
     const [chunkSearchQuery, setChunkSearchQuery] = useState('');
+    const [showOnlyJavaScriptAssets, setShowOnlyJavaScriptAssets] = useState(false);
     const containerRef = react.useRef(null);
+    const visibleAssetNames = useMemo(()=>{
+        if (!showOnlyJavaScriptAssets) return assetNames;
+        return assetNames.filter(isJavaScriptAsset);
+    }, [
+        assetNames,
+        showOnlyJavaScriptAssets
+    ]);
+    const visibleAssetNamesKey = useMemo(()=>visibleAssetNames.join('\0'), [
+        visibleAssetNames
+    ]);
+    const previousVisibleAssetNamesKeyRef = react.useRef(void 0);
+    useEffect(()=>{
+        if (previousVisibleAssetNamesKeyRef.current === visibleAssetNamesKey) return;
+        previousVisibleAssetNamesKeyRef.current = visibleAssetNamesKey;
+        setCheckedAssets(visibleAssetNames);
+    }, [
+        visibleAssetNames,
+        visibleAssetNamesKey
+    ]);
     const handleChartClick = useCallback((params)=>{
         onChartClick?.(params);
         const data = params.data;
@@ -438,42 +463,37 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
     }, [
         onChartClick
     ]);
-    const enterFullscreen = useCallback(()=>{
-        if (containerRef.current) {
-            const el = containerRef.current;
-            if (el.requestFullscreen) el.requestFullscreen().then(()=>setIsFullscreen(true)).catch((err)=>console.error('Failed to enter fullscreen:', err));
-            else if (el.webkitRequestFullscreen) try {
-                el.webkitRequestFullscreen();
-                setIsFullscreen(true);
-            } catch (err) {
-                console.error('Failed to enter fullscreen (webkit):', err);
-            }
-            else if (el.mozRequestFullScreen) try {
-                el.mozRequestFullScreen();
-                setIsFullscreen(true);
-            } catch (err) {
-                console.error('Failed to enter fullscreen (moz):', err);
-            }
-            else if (el.msRequestFullscreen) try {
-                el.msRequestFullscreen();
-                setIsFullscreen(true);
-            } catch (err) {
-                console.error('Failed to enter fullscreen (ms):', err);
-            }
-            else console.error('Fullscreen API is not supported in this browser.');
+    const enterFullscreen = ()=>{
+        if (!containerRef.current) return;
+        const el = containerRef.current;
+        if (el.requestFullscreen) el.requestFullscreen().then(()=>setIsFullscreen(true)).catch((err)=>console.error('Failed to enter fullscreen:', err));
+        else if (el.webkitRequestFullscreen) try {
+            el.webkitRequestFullscreen();
+            setIsFullscreen(true);
+        } catch (err) {
+            console.error('Failed to enter fullscreen (webkit):', err);
         }
-    }, []);
-    const exitFullscreen = useCallback(()=>{
+        else if (el.mozRequestFullScreen) try {
+            el.mozRequestFullScreen();
+            setIsFullscreen(true);
+        } catch (err) {
+            console.error('Failed to enter fullscreen (moz):', err);
+        }
+        else if (el.msRequestFullscreen) try {
+            el.msRequestFullscreen();
+            setIsFullscreen(true);
+        } catch (err) {
+            console.error('Failed to enter fullscreen (ms):', err);
+        }
+        else console.error('Fullscreen API is not supported in this browser.');
+    };
+    const exitFullscreen = ()=>{
         document.exitFullscreen().then(()=>setIsFullscreen(false)).catch((err)=>console.error('Failed to exit fullscreen:', err));
-    }, []);
-    const toggleFullscreen = useCallback(()=>{
+    };
+    const toggleFullscreen = ()=>{
         if (isFullscreen) exitFullscreen();
         else enterFullscreen();
-    }, [
-        isFullscreen,
-        enterFullscreen,
-        exitFullscreen
-    ]);
+    };
     useEffect(()=>{
         const handleFullscreenChange = ()=>{
             setIsFullscreen(!!document.fullscreenElement);
@@ -484,7 +504,7 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
         };
     }, []);
     const filteredTreeData = useMemo(()=>{
-        let filtered = treeData.filter((item)=>checkedAssets.includes(item.name));
+        let filtered = treeData.filter((item)=>visibleAssetNames.includes(item.name) && checkedAssets.includes(item.name));
         if (chunkSearchQuery.trim()) {
             const searchLower = chunkSearchQuery.toLowerCase();
             filtered = filtered.filter((item)=>item.name.toLowerCase().includes(searchLower));
@@ -493,7 +513,8 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
     }, [
         treeData,
         checkedAssets,
-        chunkSearchQuery
+        chunkSearchQuery,
+        visibleAssetNames
     ]);
     const searchResults = useMemo(()=>{
         if (!searchQuery.trim()) return [];
@@ -517,48 +538,40 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
         filteredTreeData,
         searchQuery
     ]);
-    const handleSearchResultClick = useCallback((nodeId)=>{
+    const handleSearchResultClick = (nodeId)=>{
         setHighlightNodeId(nodeId);
         setCenterNodeId(nodeId);
-    }, []);
-    const removeRootPath = useCallback((filepath)=>{
+    };
+    const removeRootPath = (filepath)=>{
         if (!rootPath || !filepath) return filepath;
         const normalizedRoot = rootPath.replace(/\\/g, '/').replace(/\/$/, '');
         const normalizedPath = filepath.replace(/\\/g, '/');
         if (normalizedPath.startsWith(normalizedRoot + '/')) return normalizedPath.slice(normalizedRoot.length + 1);
         if (normalizedPath === normalizedRoot) return '';
         return filepath;
-    }, [
-        rootPath
-    ]);
-    const getSize = useCallback((node, type)=>{
+    };
+    const getSize = (node, type)=>{
         if ('stat' === type) return node.sourceSize || 0;
         if ('parsed' === type) return node.bundledSize || 0;
         if ('gzip' === type) return node.gzipSize || 0;
         if ('value' === type) return node.value || 0;
         if (node.value) return node.value;
         return 0;
-    }, []);
-    const calculateNodeTotalSize = useCallback((node, type)=>{
+    };
+    const calculateNodeTotalSize = (node, type)=>{
         let size = getSize(node, type);
         if (node.children && node.children.length > 0) {
             const childrenSize = node.children.reduce((sum, child)=>sum + calculateNodeTotalSize(child, type), 0);
             if (0 === size || !node.path && childrenSize > 0) size = childrenSize;
         }
         return size;
-    }, [
-        getSize
-    ]);
-    const getChunkSize = useCallback((name, type)=>{
+    };
+    const getChunkSize = (name, type)=>{
         const node = treeData.find((n)=>n.name === name);
         if (!node) return 0;
         const sizeTypeToUse = type || sizeType;
         return calculateNodeTotalSize(node, sizeTypeToUse);
-    }, [
-        treeData,
-        sizeType,
-        calculateNodeTotalSize
-    ]);
+    };
     return /*#__PURE__*/ jsxs("div", {
         className: treemap_module.treemap,
         ref: containerRef,
@@ -629,19 +642,27 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
                                         }
                                     }),
                                     /*#__PURE__*/ jsx(Checkbox, {
-                                        indeterminate: checkedAssets.length > 0 && checkedAssets.length < assetNames.length,
-                                        checked: checkedAssets.length === assetNames.length,
-                                        onChange: (e)=>setCheckedAssets(e.target.checked ? assetNames : []),
+                                        indeterminate: checkedAssets.length > 0 && checkedAssets.length < visibleAssetNames.length,
+                                        checked: visibleAssetNames.length > 0 && checkedAssets.length === visibleAssetNames.length,
+                                        onChange: (e)=>setCheckedAssets(e.target.checked ? visibleAssetNames : []),
                                         className: treemap_module["all-none-checkbox"],
                                         children: "All"
                                     }),
+                                    /*#__PURE__*/ jsx(Checkbox, {
+                                        checked: showOnlyJavaScriptAssets,
+                                        onChange: (e)=>{
+                                            setShowOnlyJavaScriptAssets(e.target.checked);
+                                        },
+                                        className: treemap_module["all-none-checkbox"],
+                                        children: "JS only"
+                                    }),
                                     /*#__PURE__*/ jsx("div", {
                                         className: treemap_module["chunk-list"],
                                         style: {
                                             maxHeight: 180,
                                             overflowY: 'auto'
                                         },
-                                        children: assetNames.filter((name)=>name.toLowerCase().includes(chunkSearchQuery.toLowerCase())).map((name)=>/*#__PURE__*/ jsxs("div", {
+                                        children: visibleAssetNames.filter((name)=>name.toLowerCase().includes(chunkSearchQuery.toLowerCase())).map((name)=>/*#__PURE__*/ jsxs("div", {
                                                 className: treemap_module["chunk-item"],
                                                 style: {
                                                     height: 15,
@@ -740,11 +761,7 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
                         onChartClick: handleChartClick,
                         highlightNodeId: highlightNodeId,
                         centerNodeId: centerNodeId,
-                        rootPath: rootPath,
-                        style: {
-                            width: '100%',
-                            height: '100%'
-                        }
+                        rootPath: rootPath
                     }),
                     moduleId ? /*#__PURE__*/ jsx(ServerAPIProvider, {
                         api: SDK.ServerAPI.API.GetAllModuleGraph,