Ship patch

Source/Filter/FilterPanel.tsx

@@ -180,9 +180,13 @@ export function FilterPanel({
                 const rangeSelection = rangeValues[filter.key];
                 const customValue = customValues?.[filter.key];
                 const isExpanded = expandedFilterKey === filter.key;
-                const isNumeric = filter.type === 'number';
+                const isDate = filter.type === 'date';
+                const isNumeric = filter.type === 'number' || isDate;
                 const editorRender = editorMap[filter.key];
                 const isCustom = filter.type === 'custom' || editorRender !== undefined;
+                const formatRangeValue = isDate
+                  ? (value: number) => new Date(value).toLocaleString()
+                  : undefined;
 
                 return (
                   <div key={filter.key} className={`pv-filter ${isExpanded ? 'expanded' : ''}`}>
@@ -219,6 +223,7 @@ export function FilterPanel({
                           buckets={filter.buckets ?? 20}
                           selectedRange={rangeSelection ?? null}
                           onChange={(range) => onRangeChange(filter.key, range)}
+                          formatValue={formatRangeValue}
                         />
                       ) : (
                         <>

Source/Filter/RangeHistogramFilter.tsx

@@ -11,6 +11,11 @@ export interface RangeHistogramFilterProps {
   buckets?: number;
   selectedRange: [number, number] | null;
   onChange: (range: [number, number] | null) => void;
+  /**
+   * Optional formatter for endpoint labels and bar tooltips. Defaults to a numeric formatter.
+   * Use this to display ms timestamps as dates, currency, etc.
+   */
+  formatValue?: (value: number) => string;
 }
 
 interface HistogramBucket {
@@ -20,13 +25,19 @@ interface HistogramBucket {
   maxCount: number;
 }
 
+const defaultFormatValue = (value: number) => {
+  if (Number.isInteger(value)) return value.toString();
+  return value.toFixed(1);
+};
+
 export function RangeHistogramFilter({
   values,
   min,
   max,
   buckets = 20,
   selectedRange,
   onChange,
+  formatValue = defaultFormatValue,
 }: RangeHistogramFilterProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [isDragging, setIsDragging] = useState<'left' | 'right' | 'range' | null>(null);
@@ -155,11 +166,6 @@ export function RangeHistogramFilter({
   const leftPos = getPositionFromValue(currentRange[0]);
   const rightPos = getPositionFromValue(currentRange[1]);
 
-  const formatValue = (value: number) => {
-    if (Number.isInteger(value)) return value.toString();
-    return value.toFixed(1);
-  };
-
   return (
     <div className="pv-range-histogram" ref={containerRef}>
       <div className="pv-histogram-bars">