Add Reset Selection button to district filter

app/components/ClearFilter/ClearFilterButton.tsx

@@ -0,0 +1,10 @@
+// import { ClearFilterBtnProps, ClearFilterBtn } from ".";
+
+// export interface ClearFileringBtnProps
+//   extends Pick<ClearFilterBtnProps, "onClear"> {
+//     path: string | null;
+//   }
+
+// export function ClearFilteringBtn({path} :ClearFileringBtnProps) {
+//   return <ClearFilterBtn />
+// }

app/components/ClearFilter/index.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { Button } from "@nycplanning/streetscape";
+import { useNavigate } from "@remix-run/react";
+
+export interface ClearFilterBtnProps {
+  onClear: () => void;
+  buttonLabel?: string;
+}
+
+export function ClearFilterBtn({
+  onClear,
+  buttonLabel = "Reset Selections",
+}: ClearFilterBtnProps) {
+  const [isClearing, setIsClearing] = useState(false);
+  const navigate = useNavigate();
+
+  const handleClear = async () => {
+    setIsClearing(true);
+    try {
+      await onClear();
+      navigate("/");
+    } catch (error) {
+      console.error("Error clearing selections:", error);
+    } finally {
+      setIsClearing(false);
+    }
+  };
+
+  return (
+    <Button width="full" mt={4} onClick={handleClear} isDisabled={isClearing}>
+      {buttonLabel}
+    </Button>
+  );
+}

app/components/atlas.client.tsx

@@ -18,15 +18,20 @@ import type { MapView, MapViewState } from "@deck.gl/core";
 export const MAX_ZOOM = 20;
 export const MIN_ZOOM = 10;
 
-const INITIAL_VIEW_STATE = {
+export const INITIAL_VIEW_STATE = {
   longitude: -74.0008,
   latitude: 40.7018,
   zoom: 10,
   bearing: 0,
   pitch: 0,
 };
 
-export function Atlas() {
+interface AtlasProps {
+  viewState: MapViewState;
+  setViewState: React.Dispatch<React.SetStateAction<MapViewState>>;
+}
+
+export function Atlas({ viewState, setViewState }: AtlasProps) {
   const capitalProjectsLayer = useCapitalProjectsLayer();
   const capitalProjectBudgetedGeoJsonLayer =
     useCapitalProjectBudgetedGeoJsonLayer();
@@ -52,8 +57,6 @@ export function Atlas() {
     style: widgetStyles,
   });
 
-  const [viewState, setViewState] = useState<MapViewState>(INITIAL_VIEW_STATE);
-
   return (
     <DeckGL<MapView>
       viewState={viewState}

app/extensions/FlyToGeoJsonExtension.ts

@@ -7,7 +7,6 @@ import {
 } from "@deck.gl/core";
 import { bbox } from "@turf/bbox";
 import { Geometry } from "geojson";
-import { MIN_ZOOM, MAX_ZOOM } from "../components/atlas.client";
 
 export class FlyToGeoJsonExtension extends LayerExtension {
   updateState(

app/root.tsx

@@ -18,7 +18,7 @@ import {
   useRouteError,
   useSearchParams,
 } from "@remix-run/react";
-import { Atlas } from "./components/atlas.client";
+import { Atlas, INITIAL_VIEW_STATE } from "./components/atlas.client";
 import { ClientOnly } from "remix-utils/client-only";
 import { Overlay } from "./components/Overlay";
 import {
@@ -43,7 +43,7 @@ import {
 } from "./components/GoToDistrictBtn";
 import { GoToCommunityDistrictBtn } from "./components/GoToDistrictBtn/GoToCommunityDistrictBtn";
 import { WelcomePanel } from "./components/WelcomePanel";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import {
   analytics,
   initializeMatomoTagManager,
@@ -56,6 +56,8 @@ import {
   DistrictType,
   SearchParamChanges,
 } from "./utils/types";
+import { ClearFilterBtn } from "./components/ClearFilter";
+import { FlyToInterpolator, MapViewState } from "@deck.gl/core";
 
 export const links: LinksFunction = () => {
   return [
@@ -156,6 +158,7 @@ export default function App() {
     initializeMatomoTagManager("SmoWWpiD");
     initFullStoryAnalytics();
   }, []);
+  const [viewState, setViewState] = useState<MapViewState>(INITIAL_VIEW_STATE);
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -202,13 +205,28 @@ export default function App() {
 
   const goToNextDistrict = goToDistrict(pathname);
 
+  const clearSelections = () => {
+    setSearchParams({});
+    updateSearchParams({
+      districtType: null,
+      boroughId: null,
+      districtId: null,
+    });
+
+    setViewState({
+      ...INITIAL_VIEW_STATE,
+      transitionDuration: 2000,
+      transitionInterpolator: new FlyToInterpolator(),
+    });
+  };
+
   return (
     <Document>
       <StreetscapeProvider>
         <ClientOnly>
           {() => (
             <>
-              <Atlas />{" "}
+              <Atlas viewState={viewState} setViewState={setViewState} />{" "}
               <Overlay>
                 <Flex
                   direction={"column"}
@@ -267,6 +285,7 @@ export default function App() {
                     )}
                   </FilterMenu>
                   <WelcomePanel />
+                  <ClearFilterBtn onClear={clearSelections} />
                 </Flex>
                 <Flex
                   direction={{ base: "column-reverse", lg: "column" }}