Function ExplorerMap

web/src/components/react/ExplorerMap.tsx:15–226

({ allPoints, children, title, backUrl }: Props)

}

export default function ExplorerMap({ allPoints, children, title, backUrl }: Props) {
    const [searchQuery, setSearchQuery] = useState('');
    const [isFilterOpen, setIsFilterOpen] = useState(false);
    const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
    const [selectedProvinces, setSelectedProvinces] = useState<string[]>([]);
    const [selectedTimePeriods, setSelectedTimePeriods] = useState<string[]>([]);
    const [selectedPeople, setSelectedPeople] = useState<string[]>([]);

    // Extract available options from data
    const options = useMemo(() => {
        const categories = new Set<string>();
        const provinces = new Set<string>();
        const timePeriods = new Set<string>();
        const people = new Set<string>();

        allPoints.forEach(point => {
            if (point.category) categories.add(point.category);
            if (point.location.province) provinces.add(point.location.province);
            point.timePeriods?.forEach(tp => timePeriods.add(tp));
            point.people?.forEach(p => people.add(p.id)); // Using ID for now, could map to names
        });

        return {
            categories: Array.from(categories).sort(),
            provinces: Array.from(provinces).sort(),
            timePeriods: Array.from(timePeriods).sort(),
            people: Array.from(people).sort()
        };
    }, [allPoints]);

    // Filter points
    const filteredPoints = useMemo(() => {
        return allPoints.filter(point => {
            // Search
            if (searchQuery) {
                const query = searchQuery.toLowerCase();
                const matchesSearch =
                    point.name.toLowerCase().includes(query) ||
                    point.description.toLowerCase().includes(query);
                if (!matchesSearch) return false;
            }

            // Categories
            if (selectedCategories.length > 0 && !selectedCategories.includes(point.category)) {
                return false;
            }

            // Provinces
            if (selectedProvinces.length > 0 && point.location.province && !selectedProvinces.includes(point.location.province)) {
                return false;
            }

            // Time Periods
            if (selectedTimePeriods.length > 0) {
                const hasPeriod = point.timePeriods?.some(tp => selectedTimePeriods.includes(tp));
                if (!hasPeriod) return false;
            }