Heatmaps bug fixes, update schema to match overlay, use react-zen component to match ui/ux, polish

src/components/hooks/queries/useReplayQuery.ts

@@ -1,12 +1,23 @@
 import { useApi } from '../useApi';
 
-export function useReplayQuery(websiteId: string, replayId: string) {
+interface ReplayQueryOptions {
+  until?: number;
+  chunkIndex?: number;
+  eventIndex?: number;
+}
+
+export function useReplayQuery(
+  websiteId: string,
+  replayId: string,
+  options: ReplayQueryOptions = {},
+) {
   const { get, useQuery } = useApi();
+  const { until, chunkIndex, eventIndex } = options;
 
   return useQuery({
-    queryKey: ['replay', { websiteId, replayId }],
+    queryKey: ['replay', { websiteId, replayId, until, chunkIndex, eventIndex }],
     queryFn: () => {
-      return get(`/websites/${websiteId}/replays/${replayId}`);
+      return get(`/websites/${websiteId}/replays/${replayId}`, { until, chunkIndex, eventIndex });
     },
     enabled: Boolean(websiteId && replayId),
   });

src/components/input/FilterButtons.tsx

@@ -1,5 +1,4 @@
 import { Box, ToggleGroup, ToggleGroupItem } from '@umami/react-zen';
-import { useState } from 'react';
 
 export interface FilterButtonsProps {
   items: { id: string; label: string }[];
@@ -8,18 +7,17 @@ export interface FilterButtonsProps {
 }
 
 export function FilterButtons({ items, value, onChange }: FilterButtonsProps) {
-  const [selected, setSelected] = useState(value);
-
-  const handleChange = (value: string) => {
-    setSelected(value);
-    onChange?.(value);
-  };
-
   return (
     <Box>
       <ToggleGroup
-        value={[selected]}
-        onChange={e => handleChange(e[0])}
+        value={[value]}
+        onChange={e => {
+          const nextValue = e[0];
+
+          if (nextValue) {
+            onChange?.(nextValue);
+          }
+        }}
         disallowEmptySelection={true}
       >
         {items.map(({ id, label }) => (

src/components/input/FilterEditForm.tsx

@@ -28,7 +28,10 @@ export function FilterEditForm({ websiteId, onChange, onClose }: FilterEditFormP
   const [currentMatch, setCurrentMatch] = useState<string>(match || 'all');
   const { isMobile } = useMobile();
   const isPixelLink = !websiteId || pathname.includes('/pixels') || pathname.includes('/links');
-  const excludeEvent = !pathname.endsWith('/events') && !pathname.endsWith('/replays');
+  const excludeEvent =
+    !pathname.endsWith('/events') &&
+    !pathname.endsWith('/replays') &&
+    !pathname.endsWith('/heatmaps');
   const isPerformance = pathname.includes('/performance');
 
   const excludedFields = isPixelLink