Category Filter

The CategoryFilter component provides a filtering mechanism for predicted and correct categories in a dataset. It dynamically generates dropdown filters based on available data.

CategoryFilter({ data, columnOrder, onFilterChange })
Parameters:

  • data (array of objects) – The dataset containing category values.

  • columnOrder (array of str) – The order of columns in the dataset.

  • onFilterChange (function) – Callback function to handle filter updates.

Returns:

A React component rendering category filters.

Return type:

JSX.Element

Features:

  1. Dynamic Filtering Based on Available Columns - Checks whether predicted_category and correct_category exist in columnOrder. - If present, generates dropdown menus for filtering.

  2. Automatic Extraction of Unique Category Values - Retrieves unique values from data for both predicted_category and correct_category.

  3. State Management for User Selection - useState stores the currently selected filter values. - useEffect triggers onFilterChange whenever filters are updated.

Component Structure:

CategoryFilter.js
├── Predicted Category Dropdown
├── Correct Category Dropdown
├── onFilterChange Callback

Example Usage:

<CategoryFilter
   data={tableData}
   columnOrder={["predicted_category", "correct_category"]}
   onFilterChange={handleFilterChange}
/>

State Variables:

  • selectedPredicted: Stores the selected predicted category.

  • selectedCorrect: Stores the selected correct category.

User Actions:

  • setSelectedPredicted(value): Updates the selected predicted category.

  • setSelectedCorrect(value): Updates the selected correct category.

Dependencies:

  • react (Component state management)

  • @mui/material (Dropdown UI components)