feat: Transition to dynamic GDELT data loading from remote S3/CDN parquet files and update autocomplete to query these sources.

Author: yharby

public/final_enriched.parquet

@@ -25,9 +25,9 @@ export function TimeRangeSlider() {
   const { t } = useTranslation();
   const { language } = useLanguage();
   const { minDate, maxDate, loading: dateRangeLoading } = useDateRange();
-  
+
   // Default to collapsed on mobile (screen width < 640px)
-  // We initialize state lazily to avoid hydration mismatch if we were doing SSR, 
+  // We initialize state lazily to avoid hydration mismatch if we were doing SSR,
   // but since this is a SPA, simple matching is fine, explicitly controlled by user mainly.
   const [isCollapsed, setIsCollapsed] = useState(false);
 
@@ -41,42 +41,35 @@ export function TimeRangeSlider() {
     sqlDateToDayIndex(filters.timeRange.end, effectiveMinDate),
   ]);
 
-  // Sync effect: When real data range loads, update filters if they are currently default or invalid
+  // Sync slider position when the data range or filter range changes
+  // (e.g. catalog loads → AppState sets latest-day default → slider should position correctly)
   useEffect(() => {
     if (!dateRangeLoading && minDate && maxDate) {
-      const DEFAULT_START = 20250119;
-      const DEFAULT_END = 20260127;
-      
-      const isDefault = filters.timeRange.start === DEFAULT_START && filters.timeRange.end === DEFAULT_END;
-      const isOutOfBounds = filters.timeRange.start < minDate || filters.timeRange.end > maxDate;
-      const isReversed = filters.timeRange.start > filters.timeRange.end;
-
-      if (isDefault || isOutOfBounds || isReversed) {
-        console.log('Syncing time range to data:', minDate, maxDate);
-        updateTimeRange({ start: minDate, end: maxDate });
-        setLocalRange([0, sqlDateToDayIndex(maxDate, minDate)]);
-      } else {
-        // Even if we don't change the filter, we MUST re-calculate localRange 
-        // because effectiveMinDate has changed from fallback to real minDate.
-        // The current localRange (day indices) was calculated against the fallback date.
-        setLocalRange([
-            sqlDateToDayIndex(filters.timeRange.start, minDate),
-            sqlDateToDayIndex(filters.timeRange.end, minDate)
-        ]);
-      }
+      // Clamp filter range into the catalog range to handle the placeholder → real transition
+      const clampedStart = Math.max(filters.timeRange.start, minDate);
+      const clampedEnd = Math.min(filters.timeRange.end, maxDate);
+      setLocalRange([
+        sqlDateToDayIndex(clampedStart, minDate),
+        sqlDateToDayIndex(clampedEnd, minDate),
+      ]);
     }
-  }, [minDate, maxDate, dateRangeLoading, updateTimeRange]); // Removed filters.timeRange to avoid loops, explicit checks inside
+  }, [minDate, maxDate, dateRangeLoading, filters.timeRange.start, filters.timeRange.end]);
 
   // Debounce: only update filters after user stops sliding
   useEffect(() => {
     const timer = setTimeout(() => {
       // Guard against NaN
-      if (!localRange || typeof localRange[0] !== 'number' || typeof localRange[1] !== 'number') return;
+      if (!localRange || typeof localRange[0] !== 'number' || typeof localRange[1] !== 'number')
+        return;
 
       const startSQL = dayIndexToSQLDate(localRange[0], effectiveMinDate);
       const endSQL = dayIndexToSQLDate(localRange[1], effectiveMinDate);
 
-      if (startSQL && endSQL && (startSQL !== filters.timeRange.start || endSQL !== filters.timeRange.end)) {
+      if (
+        startSQL &&
+        endSQL &&
+        (startSQL !== filters.timeRange.start || endSQL !== filters.timeRange.end)
+      ) {
         updateTimeRange({ start: startSQL, end: endSQL });
       }
     }, 300);

src/components/TimeRangeSlider.tsx

@@ -1,8 +1,18 @@
-import { createContext, useContext, useState, ReactNode, useCallback } from 'react';
+import {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
 import type { BBox, TimeRange, FilterState } from '@/types/gdelt';
+import { useDuckDB } from '@/context/duckdb-context';
 
 interface AppStateContextValue {
   filters: FilterState;
+  filtersReady: boolean;
   selectedEventId: string | null;
   updateTimeRange: (range: TimeRange) => void;
   updateBBox: (bbox: BBox | null) => void;
@@ -18,14 +28,14 @@ interface AppStateContextValue {
 
 const AppStateContext = createContext<AppStateContextValue | null>(null);
 
-// Default date range: all data from dataset
-const DEFAULT_TIME_RANGE: TimeRange = {
-  start: 20250119, // Jan 19, 2025
-  end: 20260127,   // Jan 27, 2026
+// Placeholder range used before catalog loads — intentionally broad
+const INITIAL_TIME_RANGE: TimeRange = {
+  start: 20250101,
+  end: 20261231,
 };
 
 const DEFAULT_FILTERS: FilterState = {
-  timeRange: DEFAULT_TIME_RANGE,
+  timeRange: INITIAL_TIME_RANGE,
   bbox: null,
   sentiment: ['positive', 'neutral', 'negative'],
   eventTypes: [1, 2, 3, 4], // All quad classes
@@ -34,8 +44,23 @@ const DEFAULT_FILTERS: FilterState = {
 };
 
 export function AppStateProvider({ children }: { children: ReactNode }) {
+  const { fileCatalog } = useDuckDB();
   const [filters, setFilters] = useState<FilterState>(DEFAULT_FILTERS);
   const [selectedEventId, setSelectedEventId] = useState<string | null>(null);
+  const [filtersReady, setFiltersReady] = useState(false);
+
+  // Stores the latest-day range for clearFilters
+  const defaultRangeRef = useRef<TimeRange>(INITIAL_TIME_RANGE);
+
+  // When catalog arrives, default to the LATEST DAY only (1 file, fast)
+  useEffect(() => {
+    if (fileCatalog && !filtersReady) {
+      const latestDay: TimeRange = { start: fileCatalog.maxDate, end: fileCatalog.maxDate };
+      defaultRangeRef.current = latestDay;
+      setFilters((prev) => ({ ...prev, timeRange: latestDay }));
+      setFiltersReady(true);
+    }
+  }, [fileCatalog, filtersReady]);
 
   const updateTimeRange = useCallback((range: TimeRange) => {
     setFilters((prev) => ({ ...prev, timeRange: range }));
@@ -64,27 +89,27 @@ export function AppStateProvider({ children }: { children: ReactNode }) {
   const [isMapSyncEnabled, setIsMapSyncEnabled] = useState(true);
 
   const toggleMapSync = useCallback(() => {
-    setIsMapSyncEnabled(prev => !prev);
+    setIsMapSyncEnabled((prev) => !prev);
   }, []);
 
   const selectEvent = useCallback((id: string | null) => {
     setSelectedEventId(id);
   }, []);
 
   const clearFilters = useCallback(() => {
-    setFilters(() => ({
+    setFilters({
       ...DEFAULT_FILTERS,
-      // Keep search query if needed, but let's clear everything
-      // Keep bbox if map sync is enabled? Usually reset means reset all.
-      bbox: null 
-    }));
+      timeRange: defaultRangeRef.current,
+      bbox: null,
+    });
     setSelectedEventId(null);
   }, []);
 
   return (
     <AppStateContext.Provider
       value={{
         filters,
+        filtersReady,
         selectedEventId,
         updateTimeRange,
         updateBBox,