### Install @antv/gi-core-assets

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-core-assets/README.md

Install the package using npm or yarn.

```bash
npm install @antv/gi-core-assets
# or
yarn add @antv/gi-core-assets
```

--------------------------------

### Install Graphin with yarn

Source: https://github.com/antvis/graphin/blob/v3/packages/graphin/README.md

Install the Graphin package using yarn.

```bash
yarn add @antv/graphin
```

--------------------------------

### Creating a Graph Instance

Source: https://github.com/antvis/graphin/blob/v3/packages/graphin/README.en-US.md

Example demonstrating how to create a basic Graphin instance with initial data and behaviors.

```APIDOC
## Creating a Graph Instance

This example shows how to initialize the `Graphin` component with basic configuration.

### Method
React Component

### Endpoint
N/A

### Parameters
#### Request Body (via `options` prop)
- **autoResize** (boolean) - Optional - Whether the graph should automatically resize.
- **data** (object) - Required - The data for the graph, containing `nodes` and `edges`.
  - **nodes** (array) - Array of node objects.
  - **edges** (array) - Array of edge objects.
- **behaviors** (array) - Optional - List of interactive behaviors to enable (e.g., 'drag-canvas', 'zoom-canvas').

### Request Example
```jsx
import React from 'react';
import { Graphin } from '@antv/graphin';

export function Demo() {
  return (
    <Graphin
      options={{
        autoResize: true,
        data: {
          nodes: [
            { id: 'node-1', style: { x: 50, y: 100 } },
            { id: 'node-2', style: { x: 150, y: 100 } },
          ],
          edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
        },
        behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
      }}
    />
  );
}
```

### Response Example
(This example renders a graph visualization within the React component.)
```

--------------------------------

### Install Graphin with npm

Source: https://github.com/antvis/graphin/blob/v3/packages/graphin/README.md

Install the Graphin package using npm.

```bash
npm install @antv/graphin
```

--------------------------------

### Run Live Demo with npm

Source: https://github.com/antvis/graphin/blob/v3/CONTRIBUTING.en-US.md

Navigate to the graphin package directory and run this command to start a development server with a live demo. Requires Node.js and npm.

```bash
cd packages/graphin
npm run dev
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/antvis/graphin/blob/v3/CONTRIBUTING.en-US.md

Use this command to install project dependencies using pnpm. Ensure pnpm is installed globally.

```bash
pnpm install
```

--------------------------------

### Fetching Data Example

Source: https://github.com/antvis/graphin/blob/v3/packages/graphin/README.md

Example showing how to fetch data from a remote source and update the Graphin chart.

```jsx
import React, { useEffect, useMemo, useState } from 'react';
import { Graphin } from '@antv/graphin';

export function Demo() {
  const [data, setData] = useState(undefined);

  useEffect(() => {
    fetch('https://assets.antv.antgroup.com/g6/graph.json')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  const options = useMemo(
    () => ({
      autoResize: true,
      data,
      layout: { type: 'd3-force' },
      behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
    }),
    [data],
  );

  if (!data) return <p>Loading...</p>;

  return <Graphin options={options} />;
}
```

--------------------------------

### Install GISDK with npm or yarn

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.md

Install the GISDK package using either npm or yarn. This is the first step to using GISDK in your React project.

```bash
$ npm install @antv/gi-sdk
# or
$ yarn add @antv/gi-sdk
```

--------------------------------

### Creating a Graph with Specific Layout and Behaviors

Source: https://github.com/antvis/graphin/blob/v3/packages/graphin/README.en-US.md

Example of creating a Graphin instance with predefined data, auto-resizing enabled, and specific behaviors like drag-canvas and zoom-canvas.

```jsx
import React from 'react';
import { Graphin } from '@antv/graphin';

export function Demo() {
  return (
    <Graphin
      options={{
        autoResize: true,
        data: {
          nodes: [ { id: 'node-1', style: { x: 50, y: 100 } },
            { id: 'node-2', style: { x: 150, y: 100 } },
          ],
          edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
        },
        behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
      }}
    />
  );
}
```

--------------------------------

### Graphin Component Usage

Source: https://github.com/antvis/graphin/blob/v3/packages/graphin/README.md

Demonstrates how to install and use the Graphin component in a React application.

```bash
npm install @antv/graphin
yarn add @antv/graphin
```

```jsx
import React from 'react';
import { Graphin } from '@antv/graphin';

export function Demo() {
  return (
    <Graphin
      id="my-graphin-demo"
      className="my-graphin-container"
      style={{ width: '100%', height: '100%' }}
      options={{
        data,
        node: {
          style: {
            labelText: (d) => d.id,
          },
          palette: {
            type: 'group',
            field: 'cluster',
          },
        },
        layout: {
          type: 'd3force',
          collide: {
            strength: 0.5,
          },
        },
        behaviors: ['zoom-canvas', 'drag-canvas'],
        animation: true,
      }}
    >
    </Graphin>
  );
}
```

--------------------------------

### Basic Graphin Component Setup and Event Handling

Source: https://context7.com/antvis/graphin/llms.txt

Use the Graphin component to render a graph and access its instance via refs. Lifecycle callbacks like onInit and onReady allow for event handling and graph manipulation.

```jsx
import React, { useRef } from 'react';
import { Graphin } from '@antv/graphin';
import { GraphEvent, NodeEvent } from '@antv/g6';

export function GraphDemo() {
  const graphRef = useRef();

  const handleInit = (graph) => {
    // Access graph instance after initialization
    graph.on(NodeEvent.CLICK, (event) => {
      console.log('Node clicked:', event.target.id);
    });

    graph.on(GraphEvent.AFTER_RENDER, () => {
      console.log('Graph rendered successfully');
    });
  };

  const handleReady = (graph) => {
    console.log('Graph is ready, nodes:', graph.getNodeData().length);
  };

  return (
    <Graphin
      ref={graphRef}
      id="my-graph"
      className="graph-container"
      style={{ width: '100%', height: '600px', background: '#f5f5f5' }}
      options={{
        autoResize: true,
        data: {
          nodes: [
            { id: 'node-1', style: { x: 100, y: 100 } },
            { id: 'node-2', style: { x: 250, y: 100 } },
            { id: 'node-3', style: { x: 175, y: 200 } },
          ],
          edges: [
            { id: 'edge-1', source: 'node-1', target: 'node-2' },
            { id: 'edge-2', source: 'node-2', target: 'node-3' },
            { id: 'edge-3', source: 'node-3', target: 'node-1' },
          ],
        },
        node: {
          style: {
            labelText: (d) => d.id,
          },
          palette: {
            type: 'group',
            field: 'cluster',
          },
        },
        layout: {
          type: 'd3force',
          collide: { strength: 0.5 },
        },
        behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
        animation: true,
      }}
      onInit={handleInit}
      onReady={handleReady}
      onDestroy={() => console.log('Graph destroyed')}
    />
  );
}

```

--------------------------------

### Configure Slot-Based Layout with GISDK

Source: https://context7.com/antvis/graphin/llms.txt

This example demonstrates configuring a complex layout using the slot mechanism in GISDK to organize widget hierarchies. It includes dataset definition, graph specifications, and widget configurations bound to specific slots.

```jsx
import React from 'react';
import { GISDK } from '@antv/gi-sdk';
import GICoreAssets from '@antv/gi-core-assets';
import { MyAssetPackage } from './assets';

const config = {
  version: '0.1',
  metadata: { name: 'Full Featured App' },
  dataset: {
    id: 'sample-data',
    type: 'local',
    metadata: { name: 'Sample' },
    data: {
      nodes: [
        { id: 'a', data: { label: 'Node A' } },
        { id: 'b', data: { label: 'Node B' } },
        { id: 'c', data: { label: 'Node C' } },
      ],
      edges: [
        { source: 'a', target: 'b' },
        { source: 'b', target: 'c' },
      ],
    },
  },
  spec: {
    graph: {
      layout: { type: 'force' },
      behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
    },
    widgets: [
      // Main layout container with multiple slots
      {
        id: 'main-layout',
        type: 'HolyGrailLayout',
        properties: {
          showHeader: true,
          showSidePanel: true,
          showFloatPanel: true,
          showFooter: true,
          sidePanel: { width: 280, position: 'left' },
          floatPanel: { position: 'top-right' },
        },
        slots: {
          header: ['toolbar'],
          sidePanel: ['layout-switcher', 'node-list'],
          floatPanel: ['zoom-controls'],
          canvas: [],
          footer: ['status-bar'],
        },
      },
      // Child widgets bound to slots
      {
        id: 'toolbar',
        type: 'Toolbar',
        properties: { orientation: 'horizontal' },
        slots: { default: ['export-btn', 'import-btn'] },
      },
      { id: 'export-btn', type: 'ExportButton' },
      { id: 'import-btn', type: 'ImportButton' },
      { id: 'layout-switcher', type: 'LayoutSwitcher' },
      { id: 'node-list', type: 'NodeList' },
      { id: 'zoom-controls', type: 'ZoomControls' },
      { id: 'status-bar', type: 'StatusBar' },
    ],
  },
};

export default function FullApp() {
  return (
    <GISDK
      style={{ height: '100vh' }}
      config={config}
      assets={[GICoreAssets, MyAssetPackage]}
      initialGlobalState={{
        theme: 'light',
        selectedNodes: [],
        currentLayout: 'force',
      }}
    />
  );
}

```

--------------------------------

### GISDK Application with Remote Dataset

Source: https://context7.com/antvis/graphin/llms.txt

Configure GISDK to fetch data from remote APIs using service assets. This example uses a 'FetchData' service type to load data from a specified URL.

```jsx
import React from 'react';
import { GISDK } from '@antv/gi-sdk';
import GICoreAssets from '@antv/gi-core-assets';

const config = {
  version: '0.1',
  metadata: { name: 'Remote Data App' },
  dataset: {
    id: 'remote-dataset',
    type: 'remote',
    metadata: { name: 'API Dataset' },
    serviceType: 'FetchData',
    properties: {
      url: 'https://assets.antv.antgroup.com/g6/cluster.json',
    },
  },
  spec: {
    graph: {
      layout: { type: 'circular' },
      behaviors: ['drag-canvas', 'zoom-canvas'],
    },
    widgets: [
      {
        id: 'main-layout',
        type: 'HolyGrailLayout',
        properties: { showHeader: false, showSidePanel: false },
        slots: { canvas: [] },
      },
    ],
  },
};

export default function RemoteApp() {
  return (
    <GISDK
      style={{ height: '80vh' }}
      config={config}
      assets={[GICoreAssets]}
    />
  );
}
```

--------------------------------

### Implement Custom Data Fetching Service

Source: https://context7.com/antvis/graphin/llms.txt

Create a custom service asset to fetch and transform data from a specified API. This example demonstrates making an authenticated API call and transforming the raw response into a format suitable for Graphin.

```jsx
import type { ImplementService, AssetPackage } from '@antv/gi-sdk';

// Custom service implementation
const transformGraphData = (rawData) => {
  return {
    nodes: rawData.items.map((item) => ({
      id: item.id,
      data: { label: item.name, category: item.type },
    })),
    edges: rawData.connections.map((conn, idx) => ({
      id: `edge-${idx}`,
      source: conn.from,
      target: conn.to,
      data: { weight: conn.weight },
    })),
  };
};

export const CustomFetchService: ImplementService = {
  version: '0.1',
  metadata: {
    name: 'CustomFetch',
    description: 'Fetch and transform data from custom API',
  },
  service: async ({ properties }) => {
    const { apiUrl, apiKey } = properties;

    const response = await fetch(apiUrl, {
      headers: {
        'Authorization': `Bearer ${apiKey}`,
        'Content-Type': 'application/json',
      },
    });

    if (!response.ok) {
      throw new Error(`API request failed: ${response.status}`);
    }

    const rawData = await response.json();
    return transformGraphData(rawData);
  },
};

// Bundle into asset package
export const MyAssetPackage: AssetPackage = {
  version: '0.1',
  metadata: {
    name: 'MyAssetPackage',
    displayName: 'Custom Asset Package',
  },
  widgets: [LayoutSwitcherWidget],
  services: [CustomFetchService],
};

```

--------------------------------

### Binding Components to a Slot

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.md

Associate components with specific slots using their IDs. This example binds zoom-in and zoom-out components to the default slot of the toolbar.

```javascript
{
  widgets: [
    {
      id: 'toolbar',
      type: 'Toolbar',
      slots: {
        default: ['zoom-in', 'zoom-out'],
      },
    },
    {
      id: 'zoom-in',
      type: 'ZoomInButton',
    },
    {
      id: 'zoom-out',
      type: 'ZoomOutButton',
    },
  ];
}
```

--------------------------------

### Manage Widget Props with useWidgetProps

Source: https://context7.com/antvis/graphin/llms.txt

Use `useWidgetProps` to dynamically get and update widget configuration properties. It requires the widget ID as an argument.

```jsx
import React from 'react';
import { useWidgetProps, useGraph } from '@antv/gi-sdk';

const ConfigurablePanel = () => {
  const [panelProps, updatePanelProps] = useWidgetProps('config-panel');
  const [graph] = useGraph();

  const toggleCollapsed = () => {
    updatePanelProps({
      ...panelProps,
      collapsed: !panelProps.collapsed,
    });
  };

  const updatePanelWidth = (width) => {
    updatePanelProps({
      ...panelProps,
      width,
    });
  };

  return (
    <div
      className="configurable-panel"
      style={{
        width: panelProps.collapsed ? '40px' : (panelProps.width || '300px'),
        transition: 'width 0.3s ease',
      }}
    >
      <button onClick={toggleCollapsed}>
        {panelProps.collapsed ? 'Expand' : 'Collapse'}
      </button>

      {!panelProps.collapsed && (
        <div className="panel-content">
          <h4>Panel Configuration</h4>
          <label>
            Width:
            <input
              type="range"
              min="200"
              max="500"
              value={panelProps.width || 300}
              onChange={(e) => updatePanelWidth(Number(e.target.value))}
            />
          </label>
        </div>
      )}
    </div>
  );
};

```

--------------------------------

### Get and Update Graph Instance with useGraph

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.en-US.md

Use the `useGraph` hook to access the current graph instance and a function to update it. This is useful for direct manipulation of the graph.

```jsx
import { useGraph } from '@antv/gi-sdk';
export default () => {
  const [graphInstance, setGraphInstance] = useGraph();
};
```

--------------------------------

### Implementing Slot Insertion in a Parent Component

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.md

In a parent component, use the `slotElements` prop to insert child components into their designated slots. This example renders the default slot elements within a div with the class 'toolbar'.

```jsx
export default (props) => {
  const { slotElements } = props;

  return <div className="toolbar">{slotElements.default}</div>;
};
```

--------------------------------

### Build Project with npm

Source: https://github.com/antvis/graphin/blob/v3/CONTRIBUTING.en-US.md

Navigate to the graphin package directory and execute this command to run tests and build the project. This is typically done before committing changes.

```bash
cd packages/graphin
npm run build
```

--------------------------------

### Get and Update Component Properties with useWidgetProps

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.en-US.md

The `useWidgetProps` hook is used to retrieve and modify properties of a specific widget, identified by its ID. This is useful for controlling external components.

```jsx
import { useWidgetProps } from '@antv/gi-sdk';
export default () => {
  const [panelProps, updatePanelProps] = useWidgetProps('panel');
};
```

--------------------------------

### Initialize GISDK Application

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.en-US.md

Initializes the Graphin GISDK application by providing configuration and an array of asset packages, including core and custom assets.

```jsx
import React from 'react';
import { GISDK } from '@antv/gi-sdk';
import GICoreAssets from '@antv/gi-core-assets'; // Official core asset package
import { MyAssetPackage } from './asset'; // Local asset package
import { config } from './config';
export default function () {
  const assets = [GICoreAssets, MyAssetPackage];
  return <GISDK config={config} assets={assets} />;
}
```

--------------------------------

### Creating a Graph with Specific Options

Source: https://github.com/antvis/graphin/blob/v3/packages/graphin/README.md

Create a Graphin instance with predefined data, layout, and behaviors. The `autoResize` option is enabled.

```jsx
import React from 'react';
import { Graphin } from '@antv/graphin';

export function Demo() {
  return (
    <Graphin
      options={{
        autoResize: true,
        data: {
          nodes: [
            { id: 'node-1', style: { x: 50, y: 100 } },
            { id: 'node-2', style: { x: 150, y: 100 } },
          ],
          edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
        },
        behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
      }}
    />
  );
}
```

--------------------------------

### Basic GISDK Usage in a React Component

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.md

Use GISDK as a React component, providing configuration and assets to render a graph application. Ensure the component has a defined height for proper display.

```jsx
import React from 'react';
import { GISDK } from '@antv/gi-sdk';
import { myAssetPackage } from './assets';
import { config } from './config';

export default () => {
  const assets = [myAssetPackage];

  return <GISDK className="my-graph-application" style={{ height: '80vh' }} config={config} assets={assets} />;
```

--------------------------------

### Graph Canvas Configuration (G6 Options)

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.md

Configure the graph canvas using G6 options. Refer to the G6 documentation for detailed configuration parameters.

```javascript
spec: {
  graph: {
    /** G6 Options */
  }
}
```

--------------------------------

### Use @antv/gi-core-assets with GISDK

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-core-assets/README.md

Import and use GICoreAssets with GISDK in a React component. Ensure @antv/gi-sdk is also imported.

```javascript
import React from 'react';
import GICoreAssets from '@antv/gi-core-assets';
import { GISDK } from '@antv/gi-sdk';
import { config } from './config';

export const Demo: React.FC = () => {
  const assets = [GICoreAssets];

  return <GISDK config={config} assets={assets} />;
};
```

--------------------------------

### Local Dataset Configuration

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.md

Configure a local dataset by providing an ID, type, and the graph data directly within the configuration.

```javascript
dataset: {
  id: 'local-dataset-id',
  type: 'local',
  data: { /** Graph Data */ },
}
```

--------------------------------

### Rendering a Graph Application with Core and Custom Assets

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.md

Render the GISDK application by providing both the official core assets and your custom asset package, along with the application configuration.

```jsx
import React from 'react';
import { GISDK } from '@antv/gi-sdk';
import GICoreAssets from '@antv/gi-core-assets'; // 官方提供的核心资产包
import { MyAssetPackage } from './asset'; // 本地资产包
import { config } from './config';

export default function () {
  const assets = [GICoreAssets, MyAssetPackage];

  return <GISDK config={config} assets={assets} />;
}
```

--------------------------------

### GISDK Application with Local Dataset

Source: https://context7.com/antvis/graphin/llms.txt

Build a graph analysis application using GISDK with a local dataset. Configure graph layout, node styles, and behaviors.

```jsx
import React from 'react';
import { GISDK } from '@antv/gi-sdk';
import GICoreAssets from '@antv/gi-core-assets';

// Application configuration
const config = {
  version: '0.1',
  metadata: {
    name: 'My Graph Application',
    description: 'Interactive graph analysis tool',
  },
  dataset: {
    id: 'local-dataset',
    type: 'local',
    metadata: { name: 'Sample Dataset' },
    data: {
      nodes: [ { id: 'user-1', data: { label: 'Alice', type: 'user' } }, { id: 'user-2', data: { label: 'Bob', type: 'user' } }, { id: 'project-1', data: { label: 'Project A', type: 'project' } }, ],
      edges: [ { source: 'user-1', target: 'project-1', data: { relation: 'owns' } }, { source: 'user-2', target: 'project-1', data: { relation: 'contributes' } }, { source: 'user-1', target: 'user-2', data: { relation: 'knows' } }, ],
    },
  },
  spec: {
    graph: {
      layout: { type: 'force' },
      node: {
        style: {
          labelText: (d) => d.data?.label || d.id,
        },
      },
      behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
    },
    widgets: [
      {
        id: 'layout',
        type: 'HolyGrailLayout',
        properties: {
          showHeader: true,
          showSidePanel: false,
          showFloatPanel: false,
          showFooter: false,
        },
        slots: { canvas: [] },
      },
    ],
  },
};

export default function App() {
  return (
    <GISDK
      className="graph-app"
      style={{ height: '100vh' }}
      config={config}
      assets={[GICoreAssets]}
      initialGlobalState={{ theme: 'light' }}
    />
  );
}
```

--------------------------------

### Application Configuration Object

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.md

Define the structure of your graph application, including version, metadata, dataset, and spec for graph and widgets.

```javascript
const config: Application = {
  version: '0.1',
  metadata: {
    name: '测试应用',
  },
  dataset: { ... }, // [见 2.1]
  spec: {
    graph: { ... },  // [见 2.2]
    widgets: [ ... ]  // [见 2.3]
  }
 };
```

--------------------------------

### Service Asset Entry File

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.en-US.md

Defines a 'FetchData' service asset that fetches JSON data from a given URL. Includes version, metadata, and the service implementation.

```jsx
import type { ImplementService } from '@antv/gi-sdk';
export const FetchData: ImplementService = {
  version: '0.1',
  metadata: {
    name: 'FetchData',
    description: 'Fetch data via fetch',
  },
  service: ({ properties: { url } }) => {
    return fetch(url).then((res) => res.json());
  },
};
```

--------------------------------

### Application Configuration

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.md

Defines the structure and behavior of a graph application.

```APIDOC
## Application Configuration

### Description

The `config` object defines the graph application's version, metadata, dataset, graph canvas, and components.

### Configuration Structure

```js
{
  version: 'string', // e.g., '0.1'
  metadata: {
    name: 'string' // e.g., 'My Graph App'
  },
  dataset: { ... }, // See Dataset Configuration
  spec: {
    graph: { ... }, // See Graph Canvas Configuration
    widgets: [ ... ] // See Component Configuration
  }
}
```

#### Dataset Configuration

Supports local and remote datasets.

**Local Dataset:**
```js
dataset: {
  id: 'local-dataset-id',
  type: 'local',
  data: { /** Graph Data */ }
}
```

**Remote Dataset:**
```js
dataset: {
  id: 'remote-dataset-id',
  type: 'remote',
  serviceType: 'FetchData',
  properties: {
    url: 'string' // e.g., 'https://assets.antv.antgroup.com/g6/cluster.json'
  }
}
```

#### Graph Canvas Configuration

Refer to [G6 Configuration](https://g6.antv.antgroup.com/) documentation for graph canvas options.

```js
spec: {
  graph: {
    /** G6 Options */
  }
}
```

#### Component Configuration (Widgets)

Specifies the components to be mounted in the application and their arrangement using the slot mechanism.

```js
spec: {
  widgets: [
    /** Widgets Configs */
  ];
}
```

##### Slot Mechanism

Slots allow flexible component placement within container components.

1.  **Define Slots in Container:**
    ```js
    {
      widgets: [
        {
          id: 'toolbar',
          type: 'Toolbar', // Corresponds to asset's metadata.name
          slots: {
            default: [ ... ] // Array of component IDs to be placed in this slot
          }
        }
      ]
    }
    ```

2.  **Bind Components to Slots:**
    ```js
    {
      widgets: [
        {
          id: 'toolbar',
          type: 'Toolbar',
          slots: {
            default: ['zoom-in', 'zoom-out']
          }
        },
        {
          id: 'zoom-in',
          type: 'ZoomInButton'
        },
        {
          id: 'zoom-out',
          type: 'ZoomOutButton'
        }
      ]
    }
    ```

3.  **Container Component Implementation:**
    ```jsx
    export default (props) => {
      const { slotElements } = props;
      return <div className="toolbar">{slotElements.default}</div>;
    };
    ```
```

--------------------------------

### GISDK Component API

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.en-US.md

The GISDK component is the main entry point for rendering a graph application. It accepts various properties to customize its behavior and appearance.

```APIDOC
## GISDK Component API Reference

### Description

This section details the properties available for the `GISDK` React component.

### Properties

| Property           | Description                                                  | Type                                                                                               | Default |
| ------------------ | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ------- |
| className          | Sets the class attribute of the graph application container  | `string`                                                                                           | -       |
| style              | Sets the style properties of the graph application container | `CSSProperties`                                                                                    | -       |
| config             | Configuration description of the graph application           | [`Application`](https://github.com/antvis/Graphin/blob/v3/packages/gi-sdk/src/spec/application.ts) | -       |
| assets             | Asset packages used to render the graph application          | [`AssetPackage[]`](https://github.com/antvis/Graphin/blob/v3/packages/gi-sdk/src/types/asset.ts)   | -       |
| initialGlobalState | Initial global extended state                                | [`GlobalModel`](https://github.com/antvis/Graphin/blob/v3/packages/gi-sdk/src/context/types.ts)    | -       |

### Request Example

```jsx
import React from 'react';
import { GISDK } from '@antv/gi-sdk';
import { myAssetPackage } from './assets';
import { config } from './config';

export default () => {
  const assets = [myAssetPackage];
  return <GISDK className="my-graph-application" style={{ height: '80vh' }} config={config} assets={assets} />;
};
```

### Response

This component does not return a value directly; it renders a graph application.
```

--------------------------------

### Custom Asset Package Definition

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.en-US.md

Defines a custom asset package named 'MyAssetPackage', including its version, metadata, and lists of widgets and services.

```jsx
import type { AssetPackage } from '@antv/gi-sdk';
import { Toolbar } from './widgets';
import { FetchData } from './services';
export const MyAssetPackage: AssetPackage = {
  version: '0.1',
  metadata: {
    name: 'MyAssetPackage',
    displayName: 'Test Asset Package',
  },
  widgets: [ Toolbar, ... ],
  services: [ FetchData, ... ],
};
```

--------------------------------

### Handle Graph Events with useRef

Source: https://github.com/antvis/graphin/blob/v3/packages/graphin/README.md

Access the graph instance using `useRef` to attach event listeners for node and lifecycle events. The `onInit` callback is a suitable place to set up these listeners.

```jsx
import React, { useEffect, useRef } from 'react';
import { Graphin } from '@antv/graphin';
import { GraphEvent, NodeEvent } from '@antv/g6';

export function Demo() {
  const graphRef = useRef();

  const onInit = () => {
    const graph = graphRef.current;

    // Listen input events.
    graph.on(NodeEvent.CLICK, (event) => {});

    // Listen to lifecycle events.
    graph.on(GraphEvent.AFTER_RENDER, (event) => {
      // Simulate a click event on a node.
      graph.emit(NodeEvent.CLICK, { target: { id: 'node-1' }, targetType: 'node' });
    });
  };

  return <Graphin ref={graphRef} onInit={onInit} />;
```

--------------------------------

### Component Asset Entry File

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.en-US.md

Defines a 'Toolbar' component asset with version and metadata, intended for use within the Graphin SDK.

```jsx
import React from 'react';
import type { ImplementWidget } from '@antv/gi-sdk';
export const Toolbar: ImplementWidget = {
  version: '0.1',
  metadata: {
    name: 'Toolbar',
    displayName: 'Toolbar',
  },
  component: () => {
    return <div>Toolbar</div>
  },
};
```

--------------------------------

### Render GISDK Application

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.en-US.md

Render the GISDK component in your React application, passing the configuration and asset packages. Ensure the component has a defined height for proper display.

```jsx
import React from 'react';
import { GISDK } from '@antv/gi-sdk';
import { myAssetPackage } from './assets';
import { config } from './config';
export default () => {
  const assets = [myAssetPackage];
  return <GISDK className="my-graph-application" style={{ height: '80vh' }} config={config} assets={assets} />;
};
```

--------------------------------

### Application Configuration

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.en-US.md

Defines the structure and behavior of the graph application, including metadata, datasets, graph specifications, and widgets.

```APIDOC
## Application Configuration

### Description

This section outlines the structure of the `config` object used to build a graph application.

### Configuration Structure

```js
const config: Application = {
  version: '0.1',
  metadata: {
    name: 'Test Application',
  },
  dataset: { ... }, // See Dataset Configuration
  spec: {
    graph: { ... },  // See Graph Canvas Configuration
    widgets: [ ... ]  // Widget configurations
  }
};
```

#### Dataset Configuration

Supports local and remote datasets.

**Local Dataset:**
```js
dataset: {
  id: 'local-dataset-id',
  type: 'local',
  data: { /** Graph Data */ },
}
```

**Remote Dataset:**
```js
dataset: {
  id: 'remote-dataset-id',
  type: 'remote',
  serviceType: 'FetchData',
  properties: {
    url: 'https://assets.antv.antgroup.com/g6/cluster.json',
  },
}
```

#### Graph Canvas Configuration

Refer to the [G6 configuration](https://g6.antv.antgroup.com/) documentation for graph canvas configuration options.

```js
spec: {
  graph: {
    /** G6 Options */
  }
}
```
```

--------------------------------

### Widget Configuration for Application Components

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.md

Define the collection of components to be mounted on the application and manage their parent-child relationships using the slot mechanism for flexible arrangement.

```javascript
spec: {
  widgets: [
    /** Widgets Configs */
  ];
}
```

--------------------------------

### Configure Graph Application

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.en-US.md

Define the core configuration for your graph application, including version, metadata, dataset, and specification for graph canvas and widgets.

```javascript
const config: Application = {
  version: '0.1',
  metadata: {
    name: 'Test Application',
  },
  dataset: { ... }, // [See 2.1]
  spec: {
    graph: { ... },  // [See 2.2]
    widgets: [ ... ]  // [See 2.3]
   };
 };
```

--------------------------------

### Remote Dataset Configuration

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.md

Configure a remote dataset by specifying an ID, type, service type, and the URL for fetching data. Data will be internally hosted on the graph.

```javascript
dataset: {
  id: 'remote-dataset-id',
  type: 'remote',
  serviceType: 'FetchData',
  properties: {
    url: 'https://assets.antv.antgroup.com/g6/cluster.json',
  },
}
```

--------------------------------

### GISDK Component Properties

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.md

The GISDK component accepts several properties to configure and render a graph application.

```APIDOC
## GISDK Component Properties

### Description

The `GISDK` component is the main entry point for rendering a graph application. It accepts various properties to customize its behavior and appearance.

### Properties

#### `className`
- **className** (string) - Optional - Sets the class attribute for the graph application container.

#### `style`
- **style** (CSSProperties) - Optional - Sets the style attribute for the graph application container.

#### `config`
- **config** (Application) - Required - Describes the graph application configuration, including metadata, datasets, canvas, and components. See [Application Spec](https://github.com/antvis/Graphin/blob/v3/packages/gi-sdk/src/spec/application.ts) for details.

#### `assets`
- **assets** (AssetPackage[]) - Required - An array of asset packages used to render the graph application. See [AssetPackage Types](https://github.com/antvis/Graphin/blob/v3/packages/gi-sdk/src/types/asset.ts) for details.

#### `initialGlobalState`
- **initialGlobalState** (GlobalModel) - Optional - The initial global extended state for the application. See [GlobalModel Types](https://github.com/antvis/Graphin/blob/v3/packages/gi-sdk/src/context/types.ts) for details.

### Request Example

```jsx
import React from 'react';
import { GISDK } from '@antv/gi-sdk';
import GICoreAssets from '@antv/gi-core-assets';
import { MyAssetPackage } from './asset';
import { config } from './config';

export default function () {
  const assets = [GICoreAssets, MyAssetPackage];
  return <GISDK config={config} assets={assets} style={{ height: '80vh' }} />;
}
```

### Response

This component does not return a direct response in the traditional API sense. It renders a graph application based on the provided configuration and assets.
```

--------------------------------

### Manage Graph Options with useGraphOptions

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.en-US.md

The `useGraphOptions` hook provides access to the graph's configuration options and a function to update them. Use this for modifying graph settings dynamically.

```jsx
import { useGraphOptions } from '@antv/gi-sdk';
export default () => {
  const [options, updateOptions] = useGraphOptions();
};
```

--------------------------------

### Access Services with useRegistryManager

Source: https://context7.com/antvis/graphin/llms.txt

Access registered services dynamically using the `useRegistryManager` hook. Ensure the service is registered before attempting to retrieve it.

```jsx
import React, { useState } from 'react';
import { useRegistryManager, useGraph } from '@antv/gi-sdk';

const DataRefresher = () => {
  const registryManager = useRegistryManager();
  const [graph] = useGraph();
  const [loading, setLoading] = useState(false);

  const refreshData = async () => {
    setLoading(true);

    try {
      // Get the registered FetchData service
      const fetchDataAsset = registryManager.getService('FetchData');

      if (!fetchDataAsset) {
        throw new Error('FetchData service not registered');
      }

      // Call the service with properties
      const newData = await fetchDataAsset.service({
        properties: {
          url: 'https://assets.antv.antgroup.com/g6/cluster.json',
        },
      });

      // Update graph with new data
      if (graph && !graph.destroyed) {
        graph.setData(newData);
        await graph.render();
      }
    } catch (error) {
      console.error('Failed to refresh data:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="data-refresher">
      <button onClick={refreshData} disabled={loading}>
        {loading ? 'Refreshing...' : 'Refresh Data'}
      </button>
    </div>
  );
};

```

--------------------------------

### Graphin Component API

Source: https://github.com/antvis/graphin/blob/v3/packages/graphin/README.en-US.md

The Graphin component is the main entry point for using the toolkit in React applications. It accepts various props to configure the graph's appearance, behavior, and data.

```APIDOC
## Graphin Component API Reference

This section details the properties available for the `Graphin` React component.

### Properties

| Property | Description | Type | Default |
|---|---|---|---|
| id | The id of the container div. | `string` | - |
| className | The class name of the container div. | `string` | - |
| style | The style of the container. | `CSSProperties` | - |
| options | The [options](https://g6.antv.antgroup.com/) for the visualization, equivalent to `graph.setOptions(options)`. | `GraphOptions` \| `null` | - |
| onInit | Callback function executed when the graph is initialized, after `new Graph()`. | `(graph: G6Graph) => void` | - |
| onReady | Callback function executed when the graph is ready, after `graph.render()`. | `(graph: G6Graph) => void` | - |
| onDestroy | Callback function executed when the graph is destroyed, after `graph.destroy()`. | `() => {}` | - |

### Request Example
```jsx
import React from 'react';
import { Graphin } from '@antv/graphin';

export function Demo() {
  return (
    <Graphin
      id="my-graphin-demo"
      className="my-graphin-container"
      style={{ width: '100%', height: '100%' }}
      options={{
        data,
        node: {
          style: {
            labelText: (d) => d.id,
          },
          palette: {
            type: 'group',
            field: 'cluster',
          },
        },
        layout: {
          type: 'd3force',
          collide: {
            strength: 0.5,
          },
        },
        behaviors: ['zoom-canvas', 'drag-canvas'],
        animation: true,
      }}
      onInit={(graph) => console.log('Graph initialized:', graph)}
      onReady={(graph) => console.log('Graph ready:', graph)}
      onDestroy={() => console.log('Graph destroyed')}
    >
    </Graphin>
  );
}
```

### Response Example
(Graphin is a React component and does not have a direct response in the traditional API sense. The component renders a graph visualization.)
```

--------------------------------

### Basic Graphin Component Usage

Source: https://github.com/antvis/graphin/blob/v3/packages/graphin/README.md

Integrate the Graphin component into a React application. Configure graph options including data, node styles, layout, and behaviors.

```jsx
import React from 'react';
import { Graphin } from '@antv/graphin';

export function Demo() {
  return (
    <Graphin
      id="my-graphin-demo"
      className="my-graphin-container"
      style={{ width: '100%', height: '100%' }}
      options={{
        data,
        node: {
          style: {
            labelText: (d) => d.id,
          },
          palette: {
            type: 'group',
            field: 'cluster',
          },
        },
        layout: {
          type: 'd3force',
          collide: {
            strength: 0.5,
          },
        },
        behaviors: ['zoom-canvas', 'drag-canvas'],
        animation: true,
      }}
    >
    </Graphin>
  );
}
```

--------------------------------

### Graphin API Reference

Source: https://github.com/antvis/graphin/blob/v3/packages/graphin/README.md

Details of the properties available for the Graphin component.

```APIDOC
## Graphin Component API

### Properties

| Property  | Description                                                                                                   | Type                     | Default |
| --------- | ------------------------------------------------------------------------------------------------------------- | ------------------------ | ------- |
| id        | 设置图画布容器的 id 属性。                                                                                    | `string`                 | -       |
| className | 设置图画布容器的 class 属性。                                                                                 | `string`                 | -       |
| style     | 设置图画布容器的 style 样式属性。                                                                             | `CSSProperties`          | -       |
| options   | 设置图画布的配置项，参考 [G6 配置](https://g6.antv.antgroup.com/) 文档，在 `graph.setOptions(options)` 中调用 | `GraphOptions` \| `null` | -       |
| onInit    | 当图实例初始化之后调用，在 `new Graph()` 之后。                                                               | `(graph: Graph) => void` | -       |
| onReady   | 当图实例渲染完成之后调用，在 `graph.render()` 之后。                                                          | `(graph: Graph) => void` | -       |
| onDestroy | 当图实例被销毁的时候调用，在 `graph.destroy()` 之后。                                                         | `() => {}`               | -       |
```

--------------------------------

### Using useGraphin Hook for Toolbar Controls

Source: https://context7.com/antvis/graphin/llms.txt

The useGraphin hook provides access to the graph instance and its ready state from child components within the Graphin context. This is useful for implementing interactive controls like zoom and fit view.

```jsx
import React from 'react';
import { Graphin, useGraphin } from '@antv/graphin';

const GraphToolbar = () => {
  const { graph, isReady } = useGraphin();

  const handleZoomIn = () => {
    if (graph && isReady) {
      graph.zoomTo(graph.getZoom() * 1.2);
    }
  };

  const handleZoomOut = () => {
    if (graph && isReady) {
      graph.zoomTo(graph.getZoom() / 1.2);
    }
  };

  const handleFitView = () => {
    if (graph && isReady) {
      graph.fitView();
    }
  };

  if (!isReady) return <div>Loading graph...</div>;

  return (
    <div className="toolbar">
      <button onClick={handleZoomIn}>Zoom In</button>
      <button onClick={handleZoomOut}>Zoom Out</button>
      <button onClick={handleFitView}>Fit View</button>
    </div>
  );
};

export function GraphWithToolbar() {
  return (
    <Graphin
      options={{
        data: {
          nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }],
          edges: [{ source: 'a', target: 'b' }, { source: 'b', target: 'c' }],
        },
        layout: { type: 'circular' },
        behaviors: ['drag-canvas', 'zoom-canvas'],
      }}
    >
      <GraphToolbar />
    </Graphin>
  );
}

```

--------------------------------

### Manage Dynamic Registrations with useRegistryManager

Source: https://github.com/antvis/graphin/blob/v3/packages/gi-sdk/README.en-US.md

Use `useRegistryManager` to handle the dynamic registration and retrieval of components and services. This hook provides access to the registry manager instance.

```jsx
import { useRegistryManager } from '@antv/gi-sdk';
export default () => {
  const registryManager = useRegistryManager();
  const fetchDataService = registryManager.getService('FetchData').service;
};
```