feat: add chunk group graph report api

packages/components/src/pages/BundleSize/components/index.tsx

@@ -38,6 +38,7 @@ import {
 } from '../../../utils';
 import { AssetDetail } from './asset';
 import { BundleCards } from './cards';
+import { ChunkGroupGraphPanel } from './chunk-group';
 import styles from './index.module.scss';
 import './index.sass';
 import { SearchModal } from './search-modal';
@@ -71,6 +72,7 @@ export const WebpackModulesOverallBase: React.FC<
   const [inputModuleUnit, setModuleUnit] = useState('');
   const [inputChunkUnit, setChunkUnit] = useState('');
   const [assetPath, setAssetPath] = useState<string | null>(null);
+  const [activeTabKey, setActiveTabKey] = useState('tree');
   const { showCode, codeDrawerComponent } = useCodeDrawer(
     'Do not have the codes of assets. If you use the lite or brief mode, there will have codes.',
   );
@@ -205,6 +207,8 @@ export const WebpackModulesOverallBase: React.FC<
         <Card styles={{ body: { paddingTop: 0 } }}>
           <Tabs
             size="middle"
+            activeKey={activeTabKey}
+            onChange={setActiveTabKey}
             items={[
               {
                 key: 'tree',
@@ -591,8 +595,18 @@ export const WebpackModulesOverallBase: React.FC<
                   </ServerAPIProvider>
                 ),
               },
+              {
+                key: 'chunk-group',
+                label: 'Chunk Group Graph',
+                children: (
+                  activeTabKey === 'chunk-group' ? (
+                    <ServerAPIProvider api={SDK.ServerAPI.API.GetChunkGroupGraph}>
+                      {(report) => <ChunkGroupGraphPanel report={report} />}
+                    </ServerAPIProvider>
+                  ) : null
+                ),
+              },
             ]}
-            defaultActiveKey="tree"
           />
         </Card>
       </div>

packages/components/src/utils/data/remote.ts

@@ -16,10 +16,12 @@ export class RemoteDataLoader extends BaseDataLoader {
   public async loadData(key: string): Promise<unknown> {
     return this.limit(key, async () => {
       const [scope, ...rest] = this.getKeys(key);
-      const data = this.getData(
-        scope as keyof Manifest.RsdoctorManifestData,
-        'cloudData',
-      );
+      const data =
+        this.getData(
+          scope as keyof Manifest.RsdoctorManifestData,
+          'cloudData',
+        ) ??
+        this.getData(scope as keyof Manifest.RsdoctorManifestData, 'data');
 
       if (!data) return;
 

packages/components/src/utils/request.ts

@@ -40,13 +40,58 @@ export async function fetchJSONByUrl(url: string) {
     }
   }
 
-  return json as Manifest.RsdoctorManifestWithShardingFiles;
+  return normalizeManifestShardingUrls(
+    json as Manifest.RsdoctorManifestWithShardingFiles,
+    url,
+  );
 }
 
 export function fetchJSONByUrls(urls: string[]) {
   return Promise.all(urls.map((url) => fetchJSONByUrl(url)));
 }
 
+function normalizeManifestShardingUrls(
+  manifest: Manifest.RsdoctorManifestWithShardingFiles,
+  manifestUrl: string,
+) {
+  const resolvedManifestUrl = new URL(manifestUrl, window.location.href);
+  const isShardingPathList = (value: unknown): value is string[] =>
+    Array.isArray(value) &&
+    value.length > 0 &&
+    value.every((item) => typeof item === 'string');
+
+  const normalizeData = (
+    data: Manifest.RsdoctorManifestWithShardingFiles['data'],
+  ) => {
+    return Object.fromEntries(
+      Object.entries(data).map(([key, value]) => {
+        if (!isShardingPathList(value)) {
+          return [key, value];
+        }
+
+        return [
+          key,
+          value.map((item) => {
+            if (Url.isUrl(item)) {
+              return item;
+            }
+
+            return new URL(item, resolvedManifestUrl).toString();
+          }),
+        ];
+      }),
+    ) as Manifest.RsdoctorManifestWithShardingFiles['data'];
+  };
+
+  return {
+    ...manifest,
+    data: normalizeData(manifest.data),
+    cloudData: manifest.cloudData
+      ? normalizeData(manifest.cloudData)
+      : undefined,
+  };
+}
+
 export async function parseManifest(
   json: Manifest.RsdoctorManifestWithShardingFiles,
 ) {