Function FieldComparisonColumn

src/components/FieldComparisonColumn.tsx:79–405

({ field, startDate, endDate, compact = false, gradientIdSuffix = "" }: FieldComparisonColumnProps)

}

const FieldComparisonColumn = ({ field, startDate, endDate, compact = false, gradientIdSuffix = "" }: FieldComparisonColumnProps) => {
  const [monthlyData, setMonthlyData] = useState<any[]>([]);
  const [dailyData, setDailyData] = useState<any[]>([]);
  const [soilMoistureData, setSoilMoistureData] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [geeData, setGeeData] = useState<any>(null);
  const [geeLoading, setGeeLoading] = useState(false);
  const [ndviTimeSeries, setNdviTimeSeries] = useState<any>(null);
  const [ndviTsLoading, setNdviTsLoading] = useState(false);

  // Fetch GEE analytics
  useEffect(() => {
    const cached = getFreshLocalCacheValue<any>(GEE_ANALYTICS_CACHE_KEY, field.id, QUERY_CACHE_TTL_MS);
    if (cached) {
      setGeeData(cached);
      return;
    }
    const fetchGee = async () => {
      setGeeLoading(true);
      try {
        const polygon = field.coordinates[0];
        const { data, error } = await supabase.functions.invoke("gee-analytics", {
          body: { polygon, analyses: ["land_use", "vegetation", "suitability"] },
        });
        if (error) throw error;
        if (hasGeeAnalyticsPayload(data)) {
          setGeeData(data);
          setLocalCache(GEE_ANALYTICS_CACHE_KEY, field.id, data);
        } else if (isFallbackPayload(data)) {
          setGeeData(cached ?? null);
        } else {
          setGeeData(null);
        }
      } catch (e) {
        console.error("GEE analytics error:", e);
        setGeeData(cached ?? null);
      } finally { setGeeLoading(false); }
    };
    fetchGee();
  }, [field.id]);

  // Fetch NDVI time-series
  useEffect(() => {
    const cacheKey = `ts-${field.id}`;
    const cached = getFreshLocalCacheValue<any>(GEE_ANALYTICS_CACHE_KEY, cacheKey, QUERY_CACHE_TTL_MS);
    if (cached) {
      setNdviTimeSeries(cached);
      return;
    }
    const fetchTs = async () => {
      setNdviTsLoading(true);
      try {
        const polygon = field.coordinates[0];
        const { data, error } = await supabase.functions.invoke("ndvi-timeseries", {
          body: { polygon },
        });
        if (error) throw error;
        if (hasNdviPayload(data)) {