fix: Some fixes (#12)

* fix: Doesn't show the flight curves for regions where its not available

* fix: Fixes natural area selection not affecting the map

* fix: Improves the month selecting slider

* fix: Code review fixes

Author: lfac-pt

src/components/ButterflyTransects.tsx

@@ -330,6 +330,26 @@ function ButterflyTransects() {
       }
     }
 
+    // Protected Area filter
+    if (protectedAreaFilters.length > 0) {
+      const hasInside = protectedAreaFilters.includes("inside");
+      const hasOutside = protectedAreaFilters.includes("outside");
+      const specificAreas = protectedAreaFilters.filter(f => f !== "inside" && f !== "outside");
+
+      const isTransectInside = transect.protectedArea && transect.protectedArea !== "";
+
+      const matchesFilter =
+        (hasInside && isTransectInside) ||
+        (hasOutside && !isTransectInside) ||
+        (isTransectInside &&
+          transect.protectedArea &&
+          specificAreas.includes(transect.protectedArea));
+
+      if (!matchesFilter) {
+        return false;
+      }
+    }
+
     return true;
   });
 

src/components/MunicipalityPage.tsx

@@ -374,6 +374,7 @@ function MunicipalityPage() {
             min={MONITORING_MONTHS[0]}
             max={MONITORING_MONTHS[MONITORING_MONTHS.length - 1]}
             value={selectedMonth}
+            trackStyle={{ display: "none" }}
             onChange={(value: number) => {
               // Find the closest monitoring month
               const closest = MONITORING_MONTHS.reduce((prev, curr) =>

src/components/charts/FlightCurveChart.tsx

@@ -200,9 +200,42 @@ export const FlightCurvesDisplay: React.FC<FlightCurvesDisplayProps> = ({
     "Mediterrânico Sul": 4, // Southern Mediterranean Portugal
   };
 
-  const regions = Object.keys(phenologyData.regions).sort(
-    (a, b) => (regionOrder[a] || 999) - (regionOrder[b] || 999)
-  );
+  // Filter out regions without valid phenology curves data
+  const regions = Object.keys(phenologyData.regions)
+    .filter(region => {
+      const regionData = phenologyData.regions[region];
+      if (!regionData.phenologyCurves || Object.keys(regionData.phenologyCurves).length === 0) {
+        return false;
+      }
+
+      // Check if at least one year has valid (non-NA) abundance data
+      return Object.values(regionData.phenologyCurves).some(yearData => {
+        if (!yearData.abundance || yearData.abundance.length === 0) return false;
+        // Check if there's at least one valid numeric value (Number("NA") returns NaN)
+        return yearData.abundance.some(val => val !== null && !isNaN(Number(val)));
+      });
+    })
+    .sort((a, b) => (regionOrder[a] || 999) - (regionOrder[b] || 999));
+
+  // If no regions have data after filtering, show empty state
+  if (regions.length === 0) {
+    return (
+      <Card>
+        <Empty
+          description={
+            <>
+              <p>
+                Curvas de voo não disponíveis para <strong>{speciesName}</strong>
+              </p>
+              <p style={{ fontSize: "0.9em", color: "#666" }}>
+                Dados insuficientes em todas as regiões climáticas
+              </p>
+            </>
+          }
+        />
+      </Card>
+    );
+  }
 
   // Calculate maximum abundance across all regions and years for consistent y-axis
   const allAbundanceValues: number[] = [];

src/components/charts/MunicipalitySpeciesMap.tsx

@@ -359,6 +359,7 @@ const MunicipalitySpeciesMap: React.FC = () => {
                 min={MONITORING_MONTHS[0]}
                 max={MONITORING_MONTHS[MONITORING_MONTHS.length - 1]}
                 value={selectedMonth}
+                trackStyle={{ display: "none" }}
                 onChange={(value: number) => {
                   // Find the closest monitoring month
                   const closest = MONITORING_MONTHS.reduce((prev, curr) =>

src/types/phenologyData.ts

@@ -5,11 +5,12 @@
 
 /**
  * Weekly abundance predictions for a single year
+ * Note: abundance values can be numbers or "NA" strings when data is insufficient
  */
 export interface YearlyPhenology {
   year: number;
   weeks: number[];
-  abundance: number[];
+  abundance: (number | string)[];
 }
 
 /**