Implementation:Infiniflow Ragflow ForceGraph Component
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Knowledge_Base |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Knowledge graph visualization using @antv/g6 force-directed layout with dynamic node sizing, combo grouping, and dark theme support.
Description
ForceGraph builds an @antv/g6 Graph instance with combo-combined layout, drag/zoom/collapse behaviors, and hover activation. Node sizes are computed dynamically from rank values (100 + rank*5, capped at 300). Nodes are colored by entity_type via palette grouping. Edges use dashed lines with weight-based width. Combos with the defaultComboLabel are rendered transparently. The tooltip plugin formats HTML content differently for combos, nodes, and edges. Data is pre-processed through buildNodesAndCombos from the util module. The graph auto-fits to the container, supports auto-resize, and adjusts colors based on useIsDarkTheme. Previous graph instances are destroyed before re-rendering.
Usage
Rendered on the knowledge graph tab of the dataset page to visualize entity relationships and communities.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/dataset/knowledge-graph/force-graph.tsx
- Lines: 1-162
Signature
const ForceGraph = ({ data, show }: { data: any; show: boolean }) => JSX.Element;
export default ForceGraph;
Import
import ForceGraph from './force-graph';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| data | any | Yes | Graph data with nodes and edges |
| show | boolean | Yes | Whether to display or hide the graph container |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React element | Full-width, full-height graph container div |
Usage Examples
<ForceGraph data={graphData} show={activeTab === 'graph'} />