Implementation:Infiniflow Ragflow TagWordCloud Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, Knowledge_Base
Last Updated	2026-02-12 06:00 GMT

Overview

Word cloud visualization of knowledge base tags using the @antv/g2 charting library.

Description

TagWordCloud fetches tag data via useFetchTagList, sorts tags by frequency descending, takes the top 256, and transforms them into {text, value, name} objects. It renders a Chart instance of type wordCloud into a ref-attached div with autoFit, font size range [10, 50], color encoded by text, and tooltips showing name and value. The chart is created in renderWordCloud (memoized on tagList changes) and destroyed on cleanup via useEffect return. The container has a fixed height of 38vh.

Usage

Displayed in the tag configuration section of dataset settings to visualize the distribution and frequency of tags in the knowledge base.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/dataset/dataset-setting/tag-word-cloud.tsx
• Lines: 1-62

Signature

export function TagWordCloud(): JSX.Element;

Import

import { TagWordCloud } from './tag-word-cloud';

I/O Contract

Inputs

Name	Type	Required	Description
(none)	-	-	Fetches tag data internally via useFetchTagList

Outputs

Name	Type	Description
JSX.Element	React element	Word cloud chart container div

Usage Examples

<TagWordCloud />

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment