hook up query parameters form with rest query

crawler/frontend/src/App.tsx

@@ -5,7 +5,7 @@ import { AppSidebar } from './AppSidebar';
 import { getUser, handleCallback, logout } from './auth/authService';
 import LoginModal from './components/LoginModal';
 import { Map } from './components/Map';
-import { Parameters } from './components/Parameters';
+import { Parameters, type ParameterValues } from './components/Parameters';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './components/ui/breadcrumb';
 import { Button } from './components/ui/button';
 import { Separator } from './components/ui/separator';
@@ -30,6 +30,7 @@ function App() {
 
   const [isParametersModalOpen, setIsParametersModalOpen] = useState(true)
   const [error, setError] = useState('')
+  const [queryParameters, setQueryParameters] = useState<ParameterValues | null>(null)
   const fetchData = async () => {
 
     try {
@@ -52,8 +53,9 @@ function App() {
     } finally {
     }
   };
-  const onSubmit = async () => {
+  const onSubmit = async (parameters: ParameterValues) => {
     // Fetch listing data
+    setQueryParameters(parameters)
     const data = await fetchData();
     if (data) {
       setListingData(data);
@@ -98,7 +100,7 @@ function App() {
             </div>
             {Object.keys(listingData).length > 0 &&
               <div className="flex-1 w-full relative" style={{ minHeight: 0, marginBottom: '8rem' }}>
-                <Map listingData={listingData} />
+                <Map listingData={listingData} queryParameters={queryParameters} />
               </div>
             }
           </div>

crawler/frontend/src/components/Map.tsx

@@ -1,4 +1,4 @@
-// @ts-nocheck
+// // @ts-nocheck
 import crossfilter from "crossfilter2";
 import * as d3 from "d3";
 import mapboxgl from "mapbox-gl";
@@ -6,6 +6,7 @@ import 'mapbox-gl/dist/mapbox-gl.css'; // this hides the map for some reason
 import { useEffect, useRef } from "react";
 import { renderToString } from 'react-dom/server';
 import "../assets/Map.css";
+import { Metric, type ParameterValues } from "./Parameters";
 import { Button } from "./ui/button";
 import { ScrollArea } from "./ui/scroll-area";
 import { Separator } from "./ui/separator";
@@ -13,6 +14,7 @@ import { Separator } from "./ui/separator";
 export function Map(
     props: {
         listingData: any;
+        queryParameters: ParameterValues | null;
     }
 ) {
     const data = props.listingData;
@@ -33,8 +35,11 @@ export function Map(
     let heatmap = null;
 
     // rivet
-    var filter = { city: 'London', country: null, mode: 'qmprice' };
+    var filter = { city: 'London', country: null, mode: Metric.qmprice };
     // filter['countries'] = Array.from(new Set(data.features.map(function (d) { return d['properties']['country'] })));
+    if (props.queryParameters) {
+        filter['mode'] = props.queryParameters.metric;
+    }
     // rivets.bind(document.getElementById('overlay'), { filter: filter });
     const mapRef = useRef(mapboxgl.Map)
     const mapContainerRef = useRef('map-container')
@@ -85,7 +90,7 @@ export function Map(
         heatmap.setCellDensity(0.5); // small value == bigger hexagons
         heatmap.setPropertyName(filter.mode);
 
-        if (filter.mode === 'qmprice') {
+        if (filter.mode === Metric.qmprice) {
             // if we visualize sqm based data, remove properties where we have no data
             qmDim.filter(function (d) { return d > 0; });
         }

crawler/frontend/src/components/Parameters.tsx

@@ -8,15 +8,15 @@ import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, For
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
 
 
-enum Metric {
-    qmprice = 'Price per square meter',
-    rooms = 'Number of rooms',
-    qm = 'Area',
-    price = 'Price',
+export enum Metric {
+    qmprice = 'qmprice',
+    rooms = 'rooms',
+    qm = 'qm',
+    price = 'total_price',
 }
 
 
-interface ParameterValues {
+export interface ParameterValues {
     metric: Metric
 }
 
@@ -28,12 +28,8 @@ export function Parameters(
 ) {
     const {
         register,
-        watch,
-        formState: { errors },
     } = useForm<ParameterValues>()
     // const onSubmit: SubmitHandler<ParameterValues> = (data) => console.log(data)
-    console.log(watch("metric"))
-    console.log(errors)
 
     const formSchema = z.object({
         metric: z.nativeEnum(Metric, { required_error: "Metric is required" }),
@@ -48,7 +44,6 @@ export function Parameters(
     function onSubmit(values: z.infer<typeof formSchema>) {
         // Do something with the form values.
         // ✅ This will be type-safe and validated.
-        console.log(values)
         props.onSubmit(values)
     }