Implementation:Infiniflow Ragflow DatasetFilter Component

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

Overview

Interactive filter toolbar combining tab switching (File Logs / Dataset Logs), a filter popover with badge count, and a search input.

Description

The DatasetFilter component renders a two-tab toggle bar (FILE_LOGS, DATASET_LOGS) using conditional styling via cn utility. It composes FilterPopover for multi-checkbox filtering with a FilterButton that displays the active filter count computed from the value object. A SearchInput provides text-based search. The component merges its own props interface with CheckboxFormMultipleProps for full filter delegation.

Usage

Placed at the top of the dataset overview page to control which log type is shown and to filter/search within the active log list.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/pages/dataset/dataset-overview/dataset-filter.tsx
• Lines: 1-91

Signature

const DatasetFilter = (props: IProps & Omit<CheckboxFormMultipleProps, 'setOpen'>) => JSX.Element;

export { DatasetFilter };

Import

import { DatasetFilter } from './dataset-filter';

I/O Contract

Inputs

Name	Type	Required	Description
searchString	string	No	Current search text
onSearchChange	ChangeEventHandler	No	Search input change handler
active	LogTabs value	No	Currently active tab
setActive	function	No	Tab switch callback
value	object	No	Current filter values (from CheckboxFormMultipleProps)
filters	array	No	Filter option definitions

Outputs

Name	Type	Description
JSX.Element	React element	Rendered toolbar with tabs, filter popover, and search input

Usage Examples

<DatasetFilter
  searchString={searchString}
  onSearchChange={handleInputChange}
  active={active}
  setActive={setActive}
  value={filterValue}
  onChange={handleFilterSubmit}
  filters={filters}
/>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment