feat: support package graph

yifancong · yifancong · commit 7eef61d4709a · 2026-04-24T22:06:34.000+08:00
diff --git a/packages/components/src/pages/PackageGraph/components/GraphView.tsx b/packages/components/src/pages/PackageGraph/components/GraphView.tsx
@@ -1,7 +1,12 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import EChartsReactCore from 'echarts-for-react/esm/core';
 import * as echarts from 'echarts/core';
-import { GraphChart, type GraphSeriesOption } from 'echarts/charts';
+import {
+  GraphChart,
+  TreemapChart,
+  type GraphSeriesOption,
+  type TreemapSeriesOption,
+} from 'echarts/charts';
 import {
   TooltipComponent,
   LegendComponent,
@@ -14,17 +19,39 @@ import { Alert, Empty, Input, Space, Switch, Typography } from 'antd';
 import { SDK } from '@rsdoctor/types';
 import { formatSize } from 'src/utils';
 import { DetailPanel, PackageNodeInfo } from './DetailPanel';
+import { buildPackageSizeTreemapData } from './packageSizeTreemap';
 
-echarts.use([GraphChart, TooltipComponent, LegendComponent, CanvasRenderer]);
+echarts.use([
+  GraphChart,
+  TreemapChart,
+  TooltipComponent,
+  LegendComponent,
+  CanvasRenderer,
+]);
 
 type GraphOption = ComposeOption<
   GraphSeriesOption | TooltipComponentOption | LegendComponentOption
 >;
 
+type TreemapOption = ComposeOption<
+  TreemapSeriesOption | TooltipComponentOption | LegendComponentOption
+>;
+
 // Node colors
 const COLOR_NORMAL = '#4dabf7'; // blue – regular package
 const COLOR_DUPLICATE = '#ff6b6b'; // red  – duplicate package
 const COLOR_SOURCE = '#51cf66'; // green – user source code (virtual root)
+const TREEMAP_COLORS = [
+  '#4dabf7',
+  '#51cf66',
+  '#ffd43b',
+  '#ff922b',
+  '#845ef7',
+  '#20c997',
+  '#f06595',
+  '#15aabf',
+  '#adb5bd',
+];
 
 // Min/max node symbol sizes
 const MIN_SIZE = 16;
@@ -90,6 +117,14 @@ export const GraphView: React.FC<GraphViewProps> = ({
   const sizes = packages.map((p) => p.size.parsedSize);
   const minSize = Math.min(...sizes);
   const maxSize = Math.max(...sizes);
+  const treemapData = useMemo(
+    () => buildPackageSizeTreemapData(visiblePackages),
+    [visiblePackages],
+  );
+  const visiblePackagesSize = useMemo(
+    () => treemapData.reduce((total, item) => total + item.value, 0),
+    [treemapData],
+  );
 
   const option = useMemo<GraphOption>(() => {
     const nodes: GraphSeriesOption['data'] = visiblePackages.map((pkg) => {
@@ -205,6 +240,78 @@ export const GraphView: React.FC<GraphViewProps> = ({
     packages,
   ]);
 
+  const treemapOption = useMemo<TreemapOption>(
+    () => ({
+      color: TREEMAP_COLORS,
+      tooltip: {
+        trigger: 'item',
+        confine: true,
+        formatter: (params: any) => {
+          const data = params.data;
+          if (!data) return '';
+          return [
+            `<b>${echarts.format.encodeHTML(data.packageName)}</b>`,
+            `Version: ${echarts.format.encodeHTML(data.version)}`,
+            `Parsed: ${formatSize(data.value)}`,
+            `Share: ${data.percent.toFixed(2)}%`,
+            `Gzip: ${formatSize(data.gzipSize)}`,
+            `Source: ${formatSize(data.sourceSize)}`,
+          ].join('<br/>');
+        },
+      },
+      series: [
+        {
+          type: 'treemap',
+          data: treemapData,
+          roam: true,
+          nodeClick: false,
+          breadcrumb: { show: false },
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+          width: '100%',
+          height: '100%',
+          itemStyle: {
+            borderColor: '#fff',
+            borderWidth: 2,
+            gapWidth: 2,
+          },
+          label: {
+            show: true,
+            color: '#fff',
+            fontSize: 11,
+            overflow: 'truncate',
+            formatter: (params: any) => {
+              const data = params.data;
+              if (!data) return params.name;
+              return `${data.packageName}\n${data.percent.toFixed(1)}%`;
+            },
+          },
+          upperLabel: {
+            show: false,
+          },
+          emphasis: {
+            itemStyle: {
+              borderColor: '#1c7ed6',
+              borderWidth: 3,
+            },
+          },
+          levels: [
+            {
+              itemStyle: {
+                borderColor: '#fff',
+                borderWidth: 2,
+                gapWidth: 2,
+              },
+            },
+          ],
+        },
+      ],
+    }),
+    [treemapData],
+  );
+
   const onChartClick = useCallback(
     (params: any) => {
       if (params.dataType !== 'node') return;
@@ -216,6 +323,23 @@ export const GraphView: React.FC<GraphViewProps> = ({
     [packages, dependencies],
   );
 
+  const openPackageDetail = useCallback(
+    (id: number) => {
+      const pkg = packages.find((item) => item.id === id);
+      if (!pkg) return;
+      setSelectedPkg({ pkg, dependencies, allPackages: packages });
+      setDrawerOpen(true);
+    },
+    [packages, dependencies],
+  );
+
+  const onTreemapClick = useCallback(
+    (params: any) => {
+      openPackageDetail(Number(params.data?.id));
+    },
+    [openPackageDetail],
+  );
+
   if (packages.length === 0) {
     return <Empty description="No package data available" />;
   }
@@ -278,6 +402,35 @@ export const GraphView: React.FC<GraphViewProps> = ({
         notMerge
       />
 
+      <div style={{ marginTop: 20 }}>
+        <Space
+          align="baseline"
+          style={{
+            width: '100%',
+            justifyContent: 'space-between',
+            marginBottom: 8,
+          }}
+        >
+          <Typography.Title level={5} style={{ margin: 0 }}>
+            Package Size Treemap
+          </Typography.Title>
+          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+            Parsed size total: {formatSize(visiblePackagesSize)}
+          </Typography.Text>
+        </Space>
+        {treemapData.length > 0 ? (
+          <EChartsReactCore
+            echarts={echarts}
+            option={treemapOption}
+            style={{ height: 420, width: '100%' }}
+            onEvents={{ click: onTreemapClick }}
+            notMerge
+          />
+        ) : (
+          <Empty description="No package size data available" />
+        )}
+      </div>
+
       <DetailPanel
         info={selectedPkg}
         open={drawerOpen}
diff --git a/packages/components/src/pages/PackageGraph/components/packageSizeTreemap.test.ts b/packages/components/src/pages/PackageGraph/components/packageSizeTreemap.test.ts
@@ -0,0 +1,81 @@
+import { describe, expect, it } from '@rstest/core';
+import type { SDK } from '@rsdoctor/types';
+import { buildPackageSizeTreemapData } from './packageSizeTreemap';
+
+function createPackage(
+  partial: Pick<SDK.PackageData, 'id' | 'name' | 'version'> & {
+    parsedSize: number;
+    gzipSize?: number;
+    sourceSize?: number;
+  },
+): SDK.PackageData {
+  return {
+    id: partial.id,
+    name: partial.name,
+    version: partial.version,
+    root: `/node_modules/${partial.name}`,
+    modules: [],
+    size: {
+      parsedSize: partial.parsedSize,
+      gzipSize: partial.gzipSize ?? 0,
+      sourceSize: partial.sourceSize ?? 0,
+      transformedSize: 0,
+    },
+  };
+}
+
+describe('buildPackageSizeTreemapData', () => {
+  it('sorts packages by parsed size and adds package size percentage', () => {
+    const data = buildPackageSizeTreemapData([
+      createPackage({
+        id: 1,
+        name: 'small',
+        version: '1.0.0',
+        parsedSize: 25,
+      }),
+      createPackage({
+        id: 2,
+        name: 'large',
+        version: '1.0.0',
+        parsedSize: 75,
+        gzipSize: 30,
+      }),
+    ]);
+
+    expect(data).toStrictEqual([
+      {
+        id: '2',
+        name: 'large@1.0.0',
+        packageName: 'large',
+        version: '1.0.0',
+        value: 75,
+        percent: 75,
+        gzipSize: 30,
+        sourceSize: 0,
+      },
+      {
+        id: '1',
+        name: 'small@1.0.0',
+        packageName: 'small',
+        version: '1.0.0',
+        value: 25,
+        percent: 25,
+        gzipSize: 0,
+        sourceSize: 0,
+      },
+    ]);
+  });
+
+  it('filters packages without parsed size', () => {
+    const data = buildPackageSizeTreemapData([
+      createPackage({
+        id: 1,
+        name: 'empty',
+        version: '1.0.0',
+        parsedSize: 0,
+      }),
+    ]);
+
+    expect(data).toStrictEqual([]);
+  });
+});
diff --git a/packages/components/src/pages/PackageGraph/components/packageSizeTreemap.ts b/packages/components/src/pages/PackageGraph/components/packageSizeTreemap.ts
@@ -0,0 +1,39 @@
+import type { SDK } from '@rsdoctor/types';
+
+export interface PackageSizeTreemapNode {
+  id: string;
+  name: string;
+  packageName: string;
+  version: string;
+  value: number;
+  percent: number;
+  gzipSize: number;
+  sourceSize: number;
+}
+
+export function buildPackageSizeTreemapData(
+  packages: SDK.PackageData[],
+): PackageSizeTreemapNode[] {
+  const packagesWithSize = packages.filter((pkg) => pkg.size.parsedSize > 0);
+  const totalSize = packagesWithSize.reduce(
+    (total, pkg) => total + pkg.size.parsedSize,
+    0,
+  );
+
+  if (totalSize === 0) {
+    return [];
+  }
+
+  return packagesWithSize
+    .map((pkg) => ({
+      id: String(pkg.id),
+      name: `${pkg.name}@${pkg.version}`,
+      packageName: pkg.name,
+      version: pkg.version,
+      value: pkg.size.parsedSize,
+      percent: (pkg.size.parsedSize / totalSize) * 100,
+      gzipSize: pkg.size.gzipSize,
+      sourceSize: pkg.size.sourceSize,
+    }))
+    .sort((a, b) => b.value - a.value);
+}
diff --git a/packages/utils/src/common/data/index.ts b/packages/utils/src/common/data/index.ts
@@ -545,7 +545,19 @@ export class APIDataLoader {
 
       case SDK.ServerAPI.API.GetPackageDependency:
         return this.loader.loadData('packageGraph').then((packageGraph) => {
-          return (packageGraph?.dependencies || []) as R;
+          const dependencies = packageGraph?.dependencies || [];
+          const dependencyKeys = new Set<string>();
+
+          return dependencies.filter((dep) => {
+            const key = `${dep.package}:${dep.dependency}`;
+
+            if (dependencyKeys.has(key)) {
+              return false;
+            }
+
+            dependencyKeys.add(key);
+            return true;
+          }) as R;
         });
 
       case SDK.ServerAPI.API.GetChunkGraphAI:
diff --git a/packages/utils/tests/common/data.test.ts b/packages/utils/tests/common/data.test.ts
@@ -50,4 +50,27 @@ describe('test src/common/data/index.ts', () => {
       );
     });
   });
+
+  it('deduplicates package dependencies by package pair', async () => {
+    const loader = new APIDataLoader({
+      loadData: rs.fn().mockResolvedValue({
+        packages: [],
+        dependencies: [
+          { id: 1, package: 1, dependency: 2, refDependency: 101 },
+          { id: 2, package: 1, dependency: 2, refDependency: 102 },
+          { id: 3, package: 2, dependency: 1, refDependency: 103 },
+        ],
+      }),
+      loadManifest: rs.fn(),
+    });
+
+    await expect(
+      loader.loadAPI(SDK.ServerAPI.API.GetPackageDependency, {
+        packageId: '',
+      }),
+    ).resolves.toEqual([
+      { id: 1, package: 1, dependency: 2, refDependency: 101 },
+      { id: 3, package: 2, dependency: 1, refDependency: 103 },
+    ]);
+  });
 });
