COUNTY_SELECTION_FIX.md

County Selection Fix - COMPLETE

Issue 1: County Selection Not Loading Correct Data

When selecting a different county (e.g., Brooks) from the county dropdown, the system was:

1. Correctly filtering the year and voting method dropdowns
2. BUT still showing Hidalgo County data on the map
3. NOT zooming to the selected county
4. NOT updating the stats to show the selected county's data

Issue 2: Year Dropdown Showing Irrelevant Years

When selecting Brooks County (which only has 2026 data), the year dropdown was showing 2026, 2024, 2022, and 2018. This was because Brooks County appears in statewide datasets for those years, but with only 1-9 voters (stragglers in the statewide data), not meaningful county-specific data.

Root Causes

Issue 1 Root Cause

The DatasetSelectorV2 was not properly:

1. Updating the global selectedCountyFilter variable that loadDataset() and _fetchAndDisplayStats() rely on
2. Modifying the dataset's selectedCounties property to only include the selected county
3. Triggering a zoom to the selected county

Issue 2 Root Cause

The getCountyDatasets() method was including ALL datasets where the county appeared in the counties array, even if that county only had 1-9 voters in a statewide dataset. For example:

• 2026 statewide combined: Brooks has 889 voters (REAL Brooks data)
• 2024 statewide combined: Brooks has 9 voters (just stragglers)
• 2022 statewide combined: Brooks has 1 voter (just stragglers)
• 2018 statewide combined: Brooks has 1 voter (just stragglers)

Solutions

Solution 1: Update selectedCountyFilter on County Change

File: WhoVoted/public/dataset-selector-v2.js (onCountyChange method)

onCountyChange() {
    this.currentCounty = this.countySelect.value;
    console.log('DatasetSelectorV2: County changed to', this.currentCounty);
    
    // CRITICAL: Update global county filter variable FIRST
    // This is used by loadDataset() and _fetchAndDisplayStats()
    if (typeof window.selectedCountyFilter !== 'undefined') {
        window.selectedCountyFilter = this.currentCounty;
    } else {
        window.selectedCountyFilter = this.currentCounty;
    }
    
    this.populateYearDropdown();
}

This ensures that when loadDataset() is called, it uses the correct county filter.

Solution 2: Modify Dataset to Include Only Selected County

File: WhoVoted/public/dataset-selector-v2.js (loadCurrentDataset method)

loadCurrentDataset() {
    const datasets = this.getCountyDatasets();
    const dataset = datasets.find(ds => 
        ds.year === this.currentYear && 
        ds.votingMethod === this.currentMethod
    );
    
    if (dataset && this.onDatasetChange) {
        // Create a modified dataset with only the selected county
        const modifiedDataset = {
            ...dataset,
            // Override selectedCounties to only include the current county
            selectedCounties: this.currentCounty === 'all' 
                ? (dataset.counties || [dataset.county])
                : [this.currentCounty],
            // Update county field to reflect the selected county
            county: this.currentCounty === 'all' 
                ? dataset.county 
                : this.currentCounty
        };
        
        // ... rest of the code
        
        // Zoom to the selected county if not "all"
        if (this.currentCounty !== 'all' && typeof zoomToCounty === 'function') {
            zoomToCounty(this.currentCounty);
        }
        
        this.onDatasetChange(modifiedDataset);
    }
}

This ensures:

• The dataset passed to loadDataset() has the correct selectedCounties property
• The map zooms to the selected county
• The county field is updated to reflect the selection

Solution 3: Filter Out Statewide Datasets with Minimal County Data

File: WhoVoted/public/dataset-selector-v2.js (getCountyDatasets method)

getCountyDatasets() {
    if (!this.currentCounty || this.currentCounty === 'all') {
        return this.allDatasets;
    }
    
    return this.allDatasets.filter(ds => {
        const counties = ds.counties || [ds.county];
        
        // Check if this county is in the dataset
        if (!counties.includes(this.currentCounty)) {
            return false;
        }
        
        // If there's a countyBreakdown, check if this county has meaningful data
        if (ds.countyBreakdown && ds.countyBreakdown[this.currentCounty]) {
            const countyData = ds.countyBreakdown[this.currentCounty];
            // Only include if county has >50 voters (filters out statewide datasets with just a few voters)
            return countyData.totalVoters > 50;
        }
        
        // If no breakdown, include it (single-county dataset)
        return true;
    });
}

This filters out datasets where the selected county has fewer than 50 voters, which are typically just stragglers in statewide datasets rather than meaningful county-specific data.

How It Works Now

Data Flow

1. User selects "Brooks" from county dropdown
2. onCountyChange() fires:
   • Sets this.currentCounty = 'Brooks'
   • Updates window.selectedCountyFilter = 'Brooks'
   • Calls populateYearDropdown()
3. getCountyDatasets() filters datasets:
   • Finds all datasets with Brooks in counties array
   • Checks countyBreakdown for Brooks
   • Only includes datasets where Brooks has >50 voters
   • Result: Only 2026 datasets (889 voters) are included
   • Excludes: 2024 (9 voters), 2022 (1 voter), 2018 (1 voter)
4. populateYearDropdown() shows only "2026"
5. populateMethodDropdown() shows methods available for Brooks 2026
6. loadCurrentDataset() is called:
   • Finds the Brooks County dataset for 2026
   • Creates a modified dataset with selectedCounties: ['Brooks']
   • Calls zoomToCounty('Brooks') to zoom the map
   • Calls onDatasetChange(modifiedDataset)
7. loadDataset() in data.js receives the modified dataset:
   • Checks selectedCountyFilter (now 'Brooks')
   • Fetches heatmap data for Brooks County only
   • Fetches stats for Brooks County only
   • Updates the map and stats box

API Calls

When Brooks County is selected, the system makes these API calls:

GET /api/voters/heatmap?county=Brooks&election_date=2026-03-03&voting_method=combined
GET /api/election-stats?county=Brooks&election_date=2026-03-03&voting_method=combined

These return ONLY Brooks County data (889 voters), not the statewide data.

Testing

Test Case 1: Select Brooks County

1. Hard refresh (Ctrl+Shift+R)
2. Open Data Options panel
3. Select "Brooks" from county dropdown
4. Expected results:
   • Map zooms to Brooks County
   • Year dropdown shows ONLY "2026" (not 2024, 2022, 2018)
   • Voting Method dropdown shows methods available for Brooks 2026
   • Stats box shows "Brooks County 2026 Primary (Complete Election)"
   • Map displays ~889 Brooks County voters only

Test Case 2: Select Hidalgo County

1. Select "Hidalgo" from dropdown
2. Expected results:
   • Map zooms to Hidalgo County
   • Year dropdown shows 2026, 2024, 2022 (years with >50 Hidalgo voters)
   • Stats show Hidalgo data (~80,000 voters for 2026)

Test Case 3: Select All Counties

1. Select "All Counties" from dropdown
2. Expected results:
   • Map shows all counties (statewide view)
   • Stats show combined totals for all counties
   • No automatic zoom

Test Case 4: Switch Between Counties

1. Select "Hidalgo" → should show Hidalgo data
2. Select "Cameron" → should show Cameron data
3. Select "Brooks" → should show Brooks data (only 2026)
4. Each selection should zoom to that county and update all data

Files Modified

1. WhoVoted/public/dataset-selector-v2.js - Fixed county selection logic and filtering

Deployment

• Commits: a7906a5, 9ec516f
• Deployed to: /opt/whovoted
• No backend restart needed (frontend-only changes)
• Users need hard refresh to see changes

Related Documents

• THREE_DROPDOWN_FIX_COMPLETE.md - Previous fix for dropdown population
• THREE_DROPDOWN_IMPLEMENTATION.md - Original implementation plan
• COMBINED_DATASETS_STATUS.md - Combined datasets feature status