dataset-filter.tsx

Overview

dataset-filter.tsx is a React functional component that provides an interactive filter and search interface specifically designed for filtering and toggling between different log views in a dataset context. It supports toggling between two main log tabs (File Logs and Dataset Logs), applying multiple filter criteria through a popover interface, and searching within the selected logs.

The component is intended for use in applications dealing with dataset logs management or visualization, allowing users to efficiently locate and filter log entries with a combination of tab selection, multi-filters, and text search.

Component: `DatasetFilter`

Description

DatasetFilter is the main and only exported component in this file. It combines:

Two toggle buttons to switch between File Logs and Dataset Logs tabs.
A multi-select filter popover to apply complex filter criteria.
A search input box to filter logs by a search string.

This combination facilitates a rich and flexible dataset log filtering UI.

Props

The component takes a combination of its own props (IProps) and props from CheckboxFormMultipleProps (excluding setOpen).

IProps

Prop Name	Type	Optional	Description
`searchString`	`string`	Yes	Current search input string used to filter logs by text.
`onSearchChange`	ChangeEventHandler	Yes	Callback fired on search input changes.
`active`	(typeof LogTabs)[keyof typeof LogTabs]	Yes	Currently active log tab, either `FILE_LOGS` or `DATASET_LOGS`. Defaults to `FILE_LOGS`.
`setActive`	(active: (typeof LogTabs)[keyof typeof LogTabs]) => void	Yes	Callback to update the active log tab when the user toggles between tabs.

CheckboxFormMultipleProps (Partial)

These props are spread in and control the multi-checkbox filter popover:

Prop Name	Type	Description
`value`	object	Current filter selections (keyed by filter name).
`onChange`	func	Callback when filter selections change.
`filters`	array	Available filter options.
`onOpenChange`	func	Callback when the filter popover is opened/closed.

Return Value

The component returns JSX elements representing the UI controls for filtering and searching dataset logs.

Detailed Implementation

Tab Buttons

Two components allow the user to switch between File Logs and Dataset Logs.
The active tab button is styled differently (bg-bg-base and text-text-primary).
Clicking a button triggers the setActive callback with the appropriate tab key (LogTabs.FILE_LOGS or LogTabs.DATASET_LOGS).

Filter Popover

Uses FilterPopover component to show/hide a multi-checkbox filter UI.
The number of active filters is calculated with useMemo by summing the length of selected filters in the value object.
The FilterButton shows this count as a badge or indicator.

Search Input

Uses SearchInput component for entering a text query.
Controlled input with value searchString and change handler onSearchChange.
Sized with a fixed width (w-32).

Localization

Uses the useTranslation hook from react-i18next for localized button labels:
- 'knowledgeDetails.fileLogs'
- 'knowledgeDetails.datasetLogs'

Usage Example

import { DatasetFilter } from './dataset-filter';
import { LogTabs } from './dataset-common';
import { useState } from 'react';

const MyComponent = () => {
  const [activeTab, setActiveTab] = useState(LogTabs.FILE_LOGS);
  const [search, setSearch] = useState('');
  const [filters, setFilters] = useState({});

  return (
    <DatasetFilter
      active={activeTab}
      setActive={setActiveTab}
      searchString={search}
      onSearchChange={e => setSearch(e.target.value)}
      value={filters}
      onChange={newFilters => setFilters(newFilters)}
      filters={[/* array of filter options */]}
    />
  );
};

Important Implementation Details

Filter count calculation: The filterCount uses useMemo to efficiently compute the total number of selected filters by iterating over the values of the filter selection object and summing their lengths. This avoids unnecessary recalculations on every render.
Class name management: The cn helper function (likely a utility for conditional class names) is used to toggle styles based on the active tab state.
Controlled components: Both the search input and filter popover are controlled components, relying on props and callbacks to handle updates externally, making DatasetFilter a pure UI component without internal state.
Integration with localization: Text strings for UI elements are localized using react-i18next, making the component ready for multi-language support.

Interaction with Other Parts of the System

LogTabs enum: The component depends on LogTabs imported from ./dataset-common which defines the tab keys (FILE_LOGS and DATASET_LOGS).
Filter UI components: Uses components from the shared list-filter-bar folder:
- FilterPopover – the popover UI for the filters.
- FilterButton – button that triggers the popover and displays the count badge.
UI components library: Uses shared UI components:
- Button from ui/button
- SearchInput from ui/input
Utility functions: Uses cn from lib/utils for class name concatenation.

This file is primarily a UI component and interacts with the application state via props and callbacks, relying on parent components or contexts to supply data and handle user input.

Mermaid Component Diagram

componentDiagram
    component DatasetFilter {
        +props: IProps & Omit<CheckboxFormMultipleProps, 'setOpen'>
        +render()
    }
    component FilterPopover {
        +value
        +onChange
        +filters
        +onOpenChange
    }
    component FilterButton {
        +count
    }
    component Button {
        +onClick
        +className
    }
    component SearchInput {
        +value
        +onChange
        +className
    }
    DatasetFilter --> Button : "File Logs Button"
    DatasetFilter --> Button : "Dataset Logs Button"
    DatasetFilter --> FilterPopover
    FilterPopover --> FilterButton
    DatasetFilter --> SearchInput

Summary

dataset-filter.tsx is a reusable React component that provides a tabbed interface for toggling between log types, a filter popover for multi-select filters, and a search input, making it a central UI element for dataset log filtering functionality. The component is well-structured with clear separation of concerns and integrates smoothly with external localization, UI libraries, and filter handling mechanisms.