Implementation:Infiniflow Ragflow DatasetSidebar Component
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Knowledge_Base |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Dynamic sidebar menu component based on knowledge base configuration and graph data availability.
Description
SideBar displays knowledge base metadata (avatar via RAGFlowAvatar, name, file count, size via formatBytes, creation date) and a navigation menu with four default items: Files, Testing, Overview, and Configuration. The menu items are built using route constants (Routes.DatasetBase, etc.) and rendered as Button components with active state styling based on useSecondPathName. When knowledge graph data exists (checked via useFetchKnowledgeGraph), a fifth Knowledge Graph menu item is dynamically added. Navigation is handled via useHandleMenuClick. The refreshCount prop forces avatar re-render.
Usage
Rendered as the left sidebar within the dataset detail page layout to provide sub-page navigation.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/dataset/sidebar/index.tsx
- Lines: 1-111
Signature
export function SideBar({ refreshCount }: { refreshCount?: number }): JSX.Element;
Import
import { SideBar } from './sidebar';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| refreshCount | number | No | Counter to force avatar image refresh |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React element | Sidebar with KB info and navigation menu |
Usage Examples
<SideBar refreshCount={refreshCount} />