@module-federation/devtools 0.21.6 → 0.22.1

package/dist/types/src/component/Layout/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GlobalModuleInfo } from '@module-federation/sdk';
 import type { Federation } from '@module-federation/runtime';
 import { RootComponentProps } from '../../utils';

package/dist/types/src/component/ModuleInfo/index.d.ts

@@ -0,0 +1,8 @@
+import type { GlobalModuleInfo } from '@module-federation/sdk';
+interface HomeProps {
+    moduleInfo: GlobalModuleInfo;
+    selectedModuleId: string | null;
+    onSelectModule: (moduleId: string) => void;
+}
+declare const Home: (props: HomeProps) => import("react").JSX.Element;
+export default Home;

package/dist/types/src/component/SharedDepsExplorer/FocusResultDisplay.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { LoadedStatus } from './share-utils';
+interface FocusResult {
+    packageName: string;
+    version: string;
+    status: LoadedStatus;
+    providers: string[];
+}
+interface FocusResultDisplayProps {
+    focusResult: FocusResult | null;
+    hasData: boolean;
+    loadedStatusLabel: (status: LoadedStatus) => string;
+}
+declare const FocusResultDisplay: React.FC<FocusResultDisplayProps>;
+export default FocusResultDisplay;

package/dist/types/src/component/SharedDepsExplorer/index.d.ts

@@ -0,0 +1,6 @@
+import type { GlobalShareScopeMap } from '@module-federation/runtime/types';
+interface SharedDepsExplorerProps {
+    shareData?: GlobalShareScopeMap;
+}
+declare function SharedDepsExplorer({ shareData: shareDataProp, }: SharedDepsExplorerProps): import("react").JSX.Element;
+export default SharedDepsExplorer;

package/dist/types/src/component/SharedDepsExplorer/share-utils.d.ts

@@ -0,0 +1,44 @@
+import { GlobalShareScopeMap, Shared, SharedConfig } from '@module-federation/runtime/types';
+export type LoadedStatus = 'loaded' | 'loading' | 'not-loaded';
+export type ReuseStatus = boolean;
+export interface ShareStats {
+    totalProviders: number;
+    totalScopes: number;
+    totalPackages: number;
+    totalVersions: number;
+    loadedCount: number;
+    reusedCount: number;
+}
+export interface NormalizedSharedVersion {
+    id: string;
+    provider: string;
+    scope: string;
+    packageName: string;
+    version: string;
+    from: string;
+    useIn: string[];
+    shareConfig: SharedConfig;
+    strategy?: string;
+    loaded?: boolean;
+    loading?: unknown;
+    loadedStatus: LoadedStatus;
+    reuseStatus: ReuseStatus;
+}
+export declare function computeLoadedStatus(entry: Shared): LoadedStatus;
+export declare function computeReuseStatus(entry: Shared): ReuseStatus;
+export declare function normalizeShareData(raw: GlobalShareScopeMap | null | undefined): NormalizedSharedVersion[];
+export declare function computeShareStats(versions: NormalizedSharedVersion[]): ShareStats;
+export declare function groupByProviderScopePackage(versions: NormalizedSharedVersion[]): Record<string, Record<string, Record<string, NormalizedSharedVersion[]>>>;
+export declare function getFilterOptions(versions: NormalizedSharedVersion[]): {
+    providers: string[];
+    scopes: string[];
+    packages: string[];
+    versions: string[];
+};
+export declare function findPackageProvider(versions: NormalizedSharedVersion[], packageName: string, version?: string): {
+    packageName: string;
+    version: string;
+    providers: string[];
+    status: LoadedStatus;
+} | null;
+export declare function getReusedVersions(versions: NormalizedSharedVersion[]): NormalizedSharedVersion[];

package/dist/types/src/init.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="chrome" />
 import { GlobalModuleInfo } from '@module-federation/sdk';
 declare global {
     interface Window {

package/dist/types/src/template/constant.d.ts

@@ -1,5 +1,6 @@
 export declare const FormID = "FormID";
 export declare const ENABLEHMR = "enableHMR";
+export declare const ENABLE_CLIP = "enableClip";
 export declare const proxyFormField = "proxyFormField";
 export declare const defaultDataItem: {
     key: string;
@@ -7,11 +8,7 @@ export declare const defaultDataItem: {
     checked: boolean;
 };
 export declare const defaultModuleData: {
-    proxyFormField: {
-        key: string;
-        value: string;
-        checked: boolean;
-    }[];
+    proxyFormField: never[];
 };
 export declare const statusInfo: Record<string, {
     status: string;

package/dist/types/src/utils/chrome/index.d.ts

@@ -1,16 +1,18 @@
-/// <reference types="chrome" />
 import { GlobalModuleInfo } from '@module-federation/sdk';
 export * from './storage';
 export declare const injectPostMessage: (postMessageUrl: string) => void;
 export declare const TabInfo: {
     currentTabId: number;
 };
+export declare const setTargetTab: (tab?: chrome.tabs.Tab | null) => void;
+export declare const syncActiveTab: (tabId?: number) => Promise<chrome.tabs.Tab | undefined>;
 export declare function getCurrentTabId(): number;
 export declare function getInspectWindowTabId(): Promise<unknown>;
-export declare const getGlobalModuleInfo: (callback: React.Dispatch<React.SetStateAction<GlobalModuleInfo>>) => Promise<void>;
+export declare const refreshModuleInfo: () => Promise<void>;
+export declare const getGlobalModuleInfo: (callback: (moduleInfo: GlobalModuleInfo) => void) => Promise<() => void>;
 export declare const getTabs: (queryOptions?: {}) => Promise<chrome.tabs.Tab[]>;
 export declare const getScope: () => Promise<string>;
-export declare const injectScript: (excuteScript: (...args: Array<any>) => any, world?: boolean, ...args: any) => Promise<void>;
+export declare const injectScript: (excuteScript: (...args: Array<any>) => any, world?: boolean, ...args: any) => Promise<any>;
 export declare const getUrl: (file: string) => string;
 export declare const injectToast: (toastUtilUrl: string, e2eFlag: string) => void;
 export declare const setChromeStorage: (formData: Record<string, any>) => void;

package/dist/types/src/utils/chrome/messages.d.ts

@@ -0,0 +1,2 @@
+export declare const MESSAGE_OPEN_SIDE_PANEL = "mf-devtools/open-side-panel";
+export declare const MESSAGE_ACTIVE_TAB_CHANGED = "mf-devtools/active-tab-changed";

package/dist/types/src/utils/chrome/override-remote.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/utils/chrome/storage.d.ts

@@ -1,4 +1,5 @@
-export declare const mergeStorage: (...args: any[]) => Promise<void>;
-export declare const removeStorageKey: (...args: any[]) => Promise<void>;
-export declare const removeStorage: (...args: any[]) => Promise<void>;
-export declare const setStorage: (...args: any[]) => Promise<void>;
+export declare const mergeStorage: (...args: any[]) => Promise<any>;
+export declare const removeStorageKey: (...args: any[]) => Promise<any>;
+export declare const removeStorage: (...args: any[]) => Promise<any>;
+export declare const setStorage: (...args: any[]) => Promise<any>;
+export declare const getStorageValue: (...args: any[]) => Promise<any>;

package/dist/types/src/utils/sdk/graph.d.ts

@@ -40,6 +40,7 @@ export declare class DependencyGraph {
     createGraph(target?: string): void;
     addNode(id: string, type: string, x: number, y: number, nodeData: NodeCustomData): void;
     addEdge(id: string, source: string, target: string, type?: Edge): void;
-    run(targetGraph: any, target: string | undefined, type: string, id?: string): void;
+    run(targetGraph: any, target: string | undefined, type: string, id?: string, depth?: number, maxDepth?: number): void;
     identify(): string;
+    calculateDepth(target?: string, visited?: Set<string>): number;
 }

package/dist/types/src/utils/sdk/index.d.ts

@@ -1,5 +1,6 @@
 export * from './graph';
 export declare const setLocalStorage: (key: string, value: any) => void;
+export declare const getLocalStorage: (key: string) => string | null;
 export declare const removeLocalStorage: (key: string) => void;
 export declare const mergeLocalStorage: (target: string, key: string, value: any) => void;
 export declare const removeLocalStorageKey: (target: string, key: string) => void;

package/dist/types/src/utils/types/common.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { GlobalModuleInfo } from '@module-federation/sdk';
 import { getModuleInfo } from '../index';
 export interface FormItemStatus {
     keyStatus: boolean;
@@ -14,5 +15,8 @@ export interface RootComponentProps {
     handleProxyAddress?: (address: string) => string;
     customValueValidate?: (schema: string) => boolean;
     headerSlot?: ReactNode;
+    onModuleInfoChange?: (moduleInfo: GlobalModuleInfo) => void;
+    onModuleInfoReset?: () => void;
+    tabId?: number;
 }
 export {};

package/dist/types/src/worker/index.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/devtools",
-  "version": "0.21.6",
+  "version": "0.22.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -37,35 +37,37 @@
     "access": "public"
   },
   "dependencies": {
-    "@arco-design/web-react": "^2.64.1",
-    "@modern-js/runtime": "2.68.2",
+    "@modern-js/runtime": "2.69.3",
+    "@arco-design/web-react": "2.66.7",
     "ahooks": "^3.7.10",
     "dagre": "^0.8.5",
-    "react": "~18.3.1",
-    "react-dom": "~18.3.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "reactflow": "11.11.4",
-    "@module-federation/sdk": "0.21.6"
+    "echarts": "^6.0.0",
+    "lucide-react": "^0.364.0",
+    "echarts-for-react": "^3.0.5",
+    "@module-federation/sdk": "0.22.1"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.59.0",
-    "@modern-js/app-tools": "2.68.2",
+    "@modern-js/app-tools": "2.69.3",
     "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/module-tools": "2.68.2",
-    "@modern-js/storybook": "2.68.2",
-    "@modern-js/tsconfig": "2.68.2",
+    "@modern-js/module-tools": "2.69.3",
+    "@modern-js/storybook": "2.69.3",
+    "@modern-js/tsconfig": "2.69.3",
     "@playwright/test": "1.49.1",
     "@types/chrome": "^0.0.272",
     "@types/dagre": "^0.7.52",
     "@types/jest": "~29.2.4",
     "@types/node": "~20.12.12",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.3.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "lint-staged": "~13.1.0",
     "prettier": "~3.3.3",
     "rimraf": "~6.0.1",
-    "typescript": "~5.0.4",
     "vitest": "1.2.2",
-    "@module-federation/runtime": "0.21.6"
+    "@module-federation/runtime": "0.22.1"
   },
   "scripts": {
     "build:storybook": "storybook build",

package/dist/es/component/Graph/index.js

@@ -1,127 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useEffect } from "react";
-import ReactFlow, {
-  addEdge,
-  ConnectionLineType,
-  useNodesState,
-  useEdgesState,
-  Controls
-} from "reactflow";
-import dagre from "dagre";
-import { DependencyGraph } from "../../utils/sdk/graph";
-import GraphItem from "../GraphItem";
-import { separateType } from "../../utils";
-import styles from "./index.module";
-import "reactflow/dist/style.css";
-const nodeWidth = 400;
-const nodeHeight = 600;
-const nodeTypes = { graphItem: GraphItem };
-const Graph = (props) => {
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const { snapshot } = props;
-  const { moduleInfo } = window.__FEDERATION__;
-  const { consumers } = separateType(moduleInfo);
-  useEffect(() => {
-    const dagreGraph = new dagre.graphlib.Graph();
-    dagreGraph.setDefaultEdgeLabel(() => ({}));
-    const getLayoutedElements = (nodes2, edges2, direction = "TB") => {
-      dagreGraph.setGraph({ rankdir: direction });
-      nodes2.forEach((node) => {
-        dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
-      });
-      edges2.forEach((edge) => {
-        dagreGraph.setEdge(edge.source, edge.target);
-      });
-      dagre.layout(dagreGraph);
-      nodes2.forEach((node) => {
-        const nodeWithPosition = dagreGraph.node(node.id);
-        node.position = {
-          x: nodeWithPosition.x - nodeWidth / 2,
-          y: nodeWithPosition.y - nodeHeight / 2
-        };
-      });
-      return { nodes: nodes2, edges: edges2 };
-    };
-    let nodeSet = [];
-    let edgeSet = [];
-    for (const consumer in consumers) {
-      const moduleGraph = new DependencyGraph(snapshot, consumer);
-      moduleGraph.createGraph();
-      moduleGraph.run(moduleGraph.graph, consumer, "graphItem");
-      nodeSet = [...nodeSet, ...moduleGraph.node];
-      edgeSet = [...edgeSet, ...moduleGraph.edge];
-    }
-    if (!nodeSet.length) {
-      nodeSet.push({
-        id: "1",
-        type: "graphItem",
-        position: {
-          x: 0,
-          y: 0
-        },
-        data: {
-          color: "lightgreen"
-        }
-      });
-    }
-    const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
-      nodeSet,
-      edgeSet
-    );
-    setNodes(layoutedNodes);
-    setEdges(layoutedEdges);
-    setTimeout(() => {
-      const element = document.getElementsByClassName(
-        "react-flow__controls-fitview"
-      )[0];
-      element == null ? void 0 : element.click();
-    }, 50);
-  }, [snapshot]);
-  const onConnect = useCallback(
-    (params) => setEdges(
-      (eds) => addEdge(
-        __spreadProps(__spreadValues({}, params), { type: ConnectionLineType.SmoothStep, animated: true }),
-        eds
-      )
-    ),
-    []
-  );
-  return /* @__PURE__ */ jsx("div", { className: styles.depWrapper, children: /* @__PURE__ */ jsx(
-    ReactFlow,
-    {
-      className: styles.graph,
-      nodes,
-      edges,
-      onNodesChange,
-      onEdgesChange,
-      onConnect,
-      nodeTypes,
-      fitView: true,
-      children: /* @__PURE__ */ jsx(Controls, {})
-    }
-  ) });
-};
-var Graph_default = Graph;
-export {
-  Graph_default as default
-};

package/dist/es/component/Graph/index.module.js

@@ -1,5 +0,0 @@
-import "./index_module.css";
-var index_module_default = { "depWrapper": "depWrapper_613b1", "table": "table_613b1", "graph": "graph_613b1" };
-export {
-  index_module_default as default
-};

package/dist/es/component/Graph/index_module.css

@@ -1,12 +0,0 @@
-.depWrapper_613b1 {
-  border: 1px solid #e5e6ec;
-  margin-top: 16px;
-  padding-top: 14px;
-  border-radius: 8px;
-}
-.depWrapper_613b1 .table_613b1 {
-  margin: 8px 0 20px;
-}
-.depWrapper_613b1 .graph_613b1 {
-  height: 80vh !important;
-}

package/dist/es/component/GraphItem/index.module.js

@@ -1,5 +0,0 @@
-import "./index_module.css";
-var index_module_default = { "Wrapper": "Wrapper_2fa4f", "container": "container_2fa4f", "group": "group_2fa4f", "name": "name_2fa4f", "info": "info_2fa4f", "expose-container": "expose-container_2fa4f", "type": "type_2fa4f", "item": "item_2fa4f", "message": "message_2fa4f" };
-export {
-  index_module_default as default
-};

package/dist/es/component/GraphItem/index_module.css

@@ -1,61 +0,0 @@
-.Wrapper_2fa4f {
-  display: flex;
-  box-sizing: border-box;
-  border-radius: 10px;
-  margin: 0;
-  padding: 0;
-  width: 300px;
-  overflow: hidden;
-}
-.Wrapper_2fa4f .container_2fa4f {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-.Wrapper_2fa4f .container_2fa4f .group_2fa4f {
-  display: flex;
-  align-items: center;
-  margin-bottom: 3px;
-  width: 100%;
-  padding: 5px 0;
-}
-.Wrapper_2fa4f .container_2fa4f .group_2fa4f .name_2fa4f {
-  color: white;
-  text-align: center;
-  margin: 0 auto;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f {
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  margin: 0 4px 4px 4px;
-  padding: 10px;
-  border-radius: 0 0 5px 5px;
-  font-size: 12px;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f .expose-container_2fa4f {
-  display: flex;
-  margin-bottom: 5px;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f .type_2fa4f {
-  font-weight: bold;
-  margin-right: 10px;
-}
-.Wrapper_2fa4f .container_2fa4f .info_2fa4f .item_2fa4f {
-  display: inline-block;
-  padding: 5px;
-  background: lightgray;
-  border-radius: 15px;
-  font-size: 8px;
-  margin-right: 5px;
-  margin-bottom: 5px;
-  font-weight: 300;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.Wrapper_2fa4f .container_2fa4f .message_2fa4f {
-  display: flex;
-}

package/dist/lib/component/Graph/index.js

@@ -1,149 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Graph_exports = {};
-__export(Graph_exports, {
-  default: () => Graph_default
-});
-module.exports = __toCommonJS(Graph_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_reactflow = __toESM(require("reactflow"));
-var import_dagre = __toESM(require("dagre"));
-var import_graph = require("../../utils/sdk/graph");
-var import_GraphItem = __toESM(require("../GraphItem"));
-var import_utils = require("../../utils");
-var import_index = __toESM(require("./index.module"));
-var import_style = require("reactflow/dist/style.css");
-const nodeWidth = 400;
-const nodeHeight = 600;
-const nodeTypes = { graphItem: import_GraphItem.default };
-const Graph = (props) => {
-  const [nodes, setNodes, onNodesChange] = (0, import_reactflow.useNodesState)([]);
-  const [edges, setEdges, onEdgesChange] = (0, import_reactflow.useEdgesState)([]);
-  const { snapshot } = props;
-  const { moduleInfo } = window.__FEDERATION__;
-  const { consumers } = (0, import_utils.separateType)(moduleInfo);
-  (0, import_react.useEffect)(() => {
-    const dagreGraph = new import_dagre.default.graphlib.Graph();
-    dagreGraph.setDefaultEdgeLabel(() => ({}));
-    const getLayoutedElements = (nodes2, edges2, direction = "TB") => {
-      dagreGraph.setGraph({ rankdir: direction });
-      nodes2.forEach((node) => {
-        dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
-      });
-      edges2.forEach((edge) => {
-        dagreGraph.setEdge(edge.source, edge.target);
-      });
-      import_dagre.default.layout(dagreGraph);
-      nodes2.forEach((node) => {
-        const nodeWithPosition = dagreGraph.node(node.id);
-        node.position = {
-          x: nodeWithPosition.x - nodeWidth / 2,
-          y: nodeWithPosition.y - nodeHeight / 2
-        };
-      });
-      return { nodes: nodes2, edges: edges2 };
-    };
-    let nodeSet = [];
-    let edgeSet = [];
-    for (const consumer in consumers) {
-      const moduleGraph = new import_graph.DependencyGraph(snapshot, consumer);
-      moduleGraph.createGraph();
-      moduleGraph.run(moduleGraph.graph, consumer, "graphItem");
-      nodeSet = [...nodeSet, ...moduleGraph.node];
-      edgeSet = [...edgeSet, ...moduleGraph.edge];
-    }
-    if (!nodeSet.length) {
-      nodeSet.push({
-        id: "1",
-        type: "graphItem",
-        position: {
-          x: 0,
-          y: 0
-        },
-        data: {
-          color: "lightgreen"
-        }
-      });
-    }
-    const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
-      nodeSet,
-      edgeSet
-    );
-    setNodes(layoutedNodes);
-    setEdges(layoutedEdges);
-    setTimeout(() => {
-      const element = document.getElementsByClassName(
-        "react-flow__controls-fitview"
-      )[0];
-      element == null ? void 0 : element.click();
-    }, 50);
-  }, [snapshot]);
-  const onConnect = (0, import_react.useCallback)(
-    (params) => setEdges(
-      (eds) => (0, import_reactflow.addEdge)(
-        __spreadProps(__spreadValues({}, params), { type: import_reactflow.ConnectionLineType.SmoothStep, animated: true }),
-        eds
-      )
-    ),
-    []
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_index.default.depWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_reactflow.default,
-    {
-      className: import_index.default.graph,
-      nodes,
-      edges,
-      onNodesChange,
-      onEdgesChange,
-      onConnect,
-      nodeTypes,
-      fitView: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_reactflow.Controls, {})
-    }
-  ) });
-};
-var Graph_default = Graph;

package/dist/lib/component/Graph/index_module.css

@@ -1,12 +0,0 @@
-.depWrapper_613b1 {
-  border: 1px solid #e5e6ec;
-  margin-top: 16px;
-  padding-top: 14px;
-  border-radius: 8px;
-}
-.depWrapper_613b1 .table_613b1 {
-  margin: 8px 0 20px;
-}
-.depWrapper_613b1 .graph_613b1 {
-  height: 80vh !important;
-}