Implementation:Helicone Helicone FrontendFilterDefs

Knowledge Sources	Helicone
Domains	Filtering, Frontend
Last Updated	2026-02-14 06:32 GMT

Overview

Defines the frontend filter UI configuration that maps user-facing filter dropdowns to ClickHouse table columns with their available operators and suggested values.

Description

frontendFilterDefs.ts provides the complete set of type definitions and pre-configured filter arrays used by the Helicone dashboard and request table UIs. The file defines:

ColumnType -- a union of supported column types: text, timestamp, number, text-with-suggestions, number-with-suggestions, and bool.
Operator arrays -- pre-built arrays of operators for each column type (textOperators, numberOperators, booleanOperators, timestampOperators, VectorOperators), each containing a value, label, and type.
SingleFilterDef -- the core generic type describing a single filter definition with a label, available operators, target table, column, category, and optional custom property flag.
Factory functions -- textWithSuggestions, numberWithSuggestions, getPropertyFilters, getPropertyFiltersV2, and getValueFilters for dynamically generating filter definitions with suggestion parameters.
Pre-configured filter tuples -- DASHBOARD_PAGE_TABLE_FILTERS (4 filters: Model, Status, Latency, User) and REQUEST_TABLE_FILTERS (13 filters including Request, Response, tokens, Provider, Path, Feedback, AI Gateway).

The STATUS_OPS constant provides number-with-suggestions operators pre-populated with common HTTP status codes (200, 400, 429, 500, etc.) plus Helicone-specific statuses (threat, cancelled, pending, timeout).

Usage

Use these definitions when building filter UIs for the dashboard or request tables. Import the pre-configured filter arrays to render filter dropdowns, or use the factory functions to create custom property/value filters dynamically.

Code Reference

Source Location

Repository: Helicone
File: packages/filters/frontendFilterDefs.ts

Signature

export type ColumnType =
  | "text"
  | "timestamp"
  | "number"
  | "text-with-suggestions"
  | "number-with-suggestions"
  | "bool";

export type InputParam = {
  key: string;
  param: string;
};

export type SingleFilterDef<T extends keyof TablesAndViews> = {
  label: string;
  operators: Operator<string>[];
  table: T;
  column: KeyOfUnion<TablesAndViews[T]>;
  category: string;
  isCustomProperty?: boolean;
};

export function textWithSuggestions(inputParams: InputParam[]): Operator<string>[];
export function numberWithSuggestions(inputParams: InputParam[]): Operator<string>[];
export function getPropertyFilters(properties: string[], inputParams: InputParam[]): SingleFilterDef<"properties">[];
export function getPropertyFiltersV2(properties: string[], inputParams: InputParam[]): SingleFilterDef<"request_response_rmt">[];
export function getValueFilters(properties: string[], inputParams: InputParam[]): SingleFilterDef<"values">[];

export const DASHBOARD_PAGE_TABLE_FILTERS: [
  SingleFilterDef<"request_response_rmt">,
  SingleFilterDef<"request_response_rmt">,
  SingleFilterDef<"request_response_rmt">,
  SingleFilterDef<"request_response_rmt">
];

export const REQUEST_TABLE_FILTERS: [
  SingleFilterDef<"request_response_rmt">,
  // ... 13 total entries
];

Import

import {
  SingleFilterDef,
  ColumnType,
  InputParam,
  DASHBOARD_PAGE_TABLE_FILTERS,
  REQUEST_TABLE_FILTERS,
  textWithSuggestions,
  numberWithSuggestions,
  getPropertyFilters,
  getPropertyFiltersV2,
  getValueFilters,
} from "@helicone-package/filters/frontendFilterDefs";

I/O Contract

Inputs (Factory Functions)

Name	Type	Required	Description
properties	`string[]`	Yes	List of property names to generate filter defs for
inputParams	`InputParam[]`	Yes	Suggestion key/param pairs shown in the filter dropdown

Outputs

Name	Type	Description
DASHBOARD_PAGE_TABLE_FILTERS	`SingleFilterDef<"request_response_rmt">[]`	4-tuple of filter definitions for the dashboard page (Model, Status, Latency, User)
REQUEST_TABLE_FILTERS	`SingleFilterDef<"request_response_rmt">[]`	13-tuple of filter definitions for the request table (Request, Request-Id, Response, tokens, User, Model, Provider, Status, Path, Feedback, AI Gateway)
getPropertyFilters result	`SingleFilterDef<"properties">[]`	Dynamically generated filter definitions for custom properties
getPropertyFiltersV2 result	`SingleFilterDef<"request_response_rmt">[]`	V2 property filters targeting the request_response_rmt table
getValueFilters result	`SingleFilterDef<"values">[]`	Filter definitions for prompt variable values

Usage Examples

// Use pre-configured dashboard filters
import { DASHBOARD_PAGE_TABLE_FILTERS } from "@helicone-package/filters/frontendFilterDefs";

// Render filter dropdowns
DASHBOARD_PAGE_TABLE_FILTERS.forEach((filterDef) => {
  console.log(filterDef.label);      // "Model", "Status", "Latency", "User"
  console.log(filterDef.operators);  // Available operators for this filter
  console.log(filterDef.table);      // "request_response_rmt"
  console.log(filterDef.column);     // "model", "status", "latency", "user_id"
});

// Create dynamic property filters with suggestions
import { getPropertyFiltersV2 } from "@helicone-package/filters/frontendFilterDefs";

const propertyFilters = getPropertyFiltersV2(
  ["Helicone-Session-Name", "environment"],
  [{ key: "production", param: "production" }, { key: "staging", param: "staging" }]
);

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment