feat: auto-update map extent to results

src/App.tsx

@@ -207,7 +207,7 @@ export default function App() {
             <div className="relative mb-2 flex flex-1 flex-col overflow-hidden rounded border border-zinc-200 dark:border-zinc-700">
               <div className="relative flex-1 overflow-hidden dark:rounded">
                 <ErrorBoundary FallbackComponent={ErrorFallback}>
-                  <MapContainer />
+                  <MapContainer bottomPadding={trayState.isOpen ? 320 : 0} />
                 </ErrorBoundary>
                 <Drawer
                   type="tray"

src/components/Filter.tsx

@@ -40,7 +40,17 @@ export default function Filter(): JSX.Element {
     } else {
       stationsLayer.current.definitionExpression = emptyDefinition;
     }
-  }, [filter]);
+
+    stationsLayer.current
+      .queryExtent({
+        where: stationsLayer.current.definitionExpression,
+      })
+      .then((result) => {
+        if (mapView) {
+          mapView.goTo(result.extent);
+        }
+      });
+  }, [filter, mapView]);
 
   return (
     <>

src/components/MapContainer.tsx

@@ -35,16 +35,24 @@ const statewide = new Extent({
   },
 });
 
-export const MapContainer = ({ onClick }: { onClick?: __esri.ViewImmediateClickEventHandler }) => {
+export const MapContainer = ({
+  onClick,
+  bottomPadding,
+}: {
+  onClick?: __esri.ViewImmediateClickEventHandler;
+  bottomPadding: number;
+}) => {
   const mapNode = useRef<HTMLDivElement | null>(null);
   const mapComponent = useRef<EsriMap | null>(null);
   const mapView = useRef<MapView>();
   const clickHandler = useRef<IHandle>();
   const [selectorOptions, setSelectorOptions] = useState<SelectorOptions | null>(null);
-  console.log('rendering MapContainer');
   const { setMapView } = useMap();
   const isDrawing = useViewLoading(mapView.current);
-  console.log('isDrawing', isDrawing);
+
+  if (mapView.current && bottomPadding) {
+    mapView.current.padding.bottom = bottomPadding;
+  }
 
   // setup the Map
   useEffect(() => {