Feature: Data Filtering

Relevant source files

The following files were used as context for generating this wiki page:

• frontend/src/components/dashboard/FilterControls.tsx
• frontend/src/hooks/useModelFilters.ts
• frontend/src/components/ModelExecutionDashboard.tsx
• frontend/src/components/LocationInfo.tsx
• frontend/package.json

The data filtering feature provides the core user-facing controls for searching, filtering, and sorting the aggregated model execution data presented in the ModelExecutionDashboard. This system is composed of a dedicated UI component for filter controls, a React hook for state management and filtering logic, and a parent dashboard component that orchestrates the data flow. It allows users to dynamically refine the list of AI models based on various criteria, making the large dataset manageable and insightful.

Sources: frontend/src/components/ModelExecutionDashboard.tsx, frontend/src/components/dashboard/FilterControls.tsx, frontend/src/hooks/useModelFilters.ts

Architecture and Data Flow

The filtering architecture is centered around the ModelExecutionDashboard component, which acts as the orchestrator. It utilizes the useModelFilters hook to manage the filter state and perform the actual data manipulation. The FilterControls component provides the UI for users to interact with the filters, with state changes being propagated up to the dashboard and into the hook.

Sources: frontend/src/components/ModelExecutionDashboard.tsx:7-12, 20-35

Component Interaction Diagram

This diagram illustrates the flow of data and state updates between the user, UI components, and the core filtering hook.

Core Logic: useModelFilters Hook

The useModelFilters hook is the brain of the filtering feature. It encapsulates all state related to filtering and sorting and contains the memoized logic to efficiently compute the filtered and sorted list of models whenever the raw data or filter criteria change.

Sources: frontend/src/hooks/useModelFilters.ts

State Management

The hook manages several state variables using useState to control the filtering and sorting behavior.

State Variable	Type	Description	Initial Value
searchTerm	string	The text used to search for models by name.	''
serverFilter	string	The selected server to filter by. Can be 'all' or a specific server identifier.	'all'
statusFilter	StatusFilter	The status of the model to filter by ('all', 'running', 'stopped', 'available').	'all'
sortBy	SortOption	The attribute to sort the model list by.	'servers'
sortDirection	SortDirection	The direction of the sort ('asc' or 'desc').	'desc'
currentPage	number	The current page number for pagination. Resets to 1 when filters change.	1

Sources: frontend/src/hooks/useModelFilters.ts:8-14, 16-18

Filtering and Sorting Pipeline

The core logic resides in a useMemo hook that chains filtering operations before finally sorting the result. This ensures the expensive computation only runs when necessary.

This flowchart shows the sequence of operations applied to the modelExecutions data.

Sorting Logic

The sorting logic handles both string and numeric comparisons based on the sortBy state.

SortOption Value	Description	Data Type
name	Sorts by the model's name.	string
servers	Sorts by the total number of servers the model is on.	number
running	Sorts by the number of servers currently running the model.	number
frequency	Sorts by the model's execution frequency.	number
size	Sorts by the model's average size.	number

Sources: frontend/src/hooks/useModelFilters.ts:58-84

UI Components

The user interacts with the filtering system through the FilterControls component, which is rendered within the main ModelExecutionDashboard.

FilterControls Component

This component renders a set of UI controls for the user to specify their filtering and sorting preferences. It is a controlled component that receives its state and state-setter functions as props from its parent.

The component uses UI elements from the @radix-ui/react-select library and icons from lucide-react, as indicated by the project's dependencies.

Sources: frontend/src/components/dashboard/FilterControls.tsx, frontend/package.json:14, 42

UI Controls

Control	Component	State Managed	Description
Search Models	<Input>	searchTerm	A text input for searching models by name.
Filter by server	<Select>	serverFilter	A dropdown to select a specific server or 'All Servers'.
Filter by status	<Select>	statusFilter	A dropdown to filter models by their running status.
Sort by	<Select>	sortBy	A dropdown to choose the sorting criterion.
Sort Direction	<Button>	sortDirection	A button to toggle between ascending and descending order.
Refresh	<Button>	refreshing	A button to manually trigger a data refresh.

Sources: frontend/src/components/dashboard/FilterControls.tsx:61-133

ModelExecutionDashboard Orchestrator

This component integrates all parts of the feature. It:

1. Calls the useModelData hook (inferred from code) to fetch the raw data.
2. Calls the useModelFilters hook, passing the raw modelExecutions data to it.
3. Renders the FilterControls component, passing the filter state and setter functions from the useModelFilters hook.
4. Receives the filteredAndSortedModels array from the hook.
5. Performs pagination on the filtered data.
6. Renders the ModelList component (inferred) with the final, paginated data.

Sources: frontend/src/components/ModelExecutionDashboard.tsx:13-35, 71-86

Data Structures

While the type definition files are not provided, the code references specific types that are central to the filtering feature. The structure of the underlying server data can be inferred from the LocationInfo.tsx component, which displays data for a single server.

Filter & Sort Types

These types, imported from @/types/ModelExecution, define the available options for filtering and sorting.

• StatusFilter: A string that can be one of 'all', 'running', 'stopped', or 'available'.
  Sources: frontend/src/components/dashboard/FilterControls.tsx:101-107, frontend/src/hooks/useModelFilters.ts:40-47
• SortOption: A string that can be one of 'name', 'servers', 'running', 'frequency', or 'size'.
  Sources: frontend/src/components/dashboard/FilterControls.tsx:112-120, frontend/src/hooks/useModelFilters.ts:61-77
• SortDirection: A string that is either 'asc' or 'desc'.
  Sources: frontend/src/components/dashboard/FilterControls.tsx:125-128, frontend/src/hooks/useModelFilters.ts:82-85

Server Data Structure

The LocationInfo.tsx component defines a ServerData interface, which represents the data for a single exposed server. The serverFilter in useModelFilters acts upon properties from this data structure (e.g., ip, port, city, country_name).

Field	Type	Description
ip	string	The IP address of the server.
port	number	The port number the service is running on.
version	string	The Ollama version.
city	string	The city where the server is located.
country	string	The two-letter country code.
country_name	string	The full country name.
region	string	The region or state.
local	ServerModel[]	An array of models available on the server.
running	ServerModel[]	An array of models currently running.
status	string	The live status of the server (e.g., 'live').

Sources: frontend/src/components/LocationInfo.tsx:13-26, frontend/src/hooks/useModelFilters.ts:32-36

Conclusion

The data filtering system is a well-structured and essential feature of the LLaMa Leaks dashboard. By separating concerns into a dedicated hook for logic (useModelFilters) and a component for presentation (FilterControls), the system remains maintainable and efficient. It provides a powerful and responsive user experience for exploring the complex dataset of exposed AI models.

Sources: frontend/src/hooks/useModelFilters.ts, frontend/src/components/dashboard/FilterControls.tsx