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),
   });