feat: Model page almost completed; Working on querying from XGBoost

Author: kn-dev-code

client/wildfire-ui/src/hooks/use-auth.ts

@@ -151,6 +151,3 @@ export const useGoogleAuth = () => {
     }
   })
 }
-
-// isUpdating, isLoggingOut, isSigningUp, isLoggingIn
-// isModelPredicting, isRetrieving

client/wildfire-ui/src/hooks/use-model.ts

@@ -0,0 +1,30 @@
+import {useMutation} from "@tanstack/react-query"
+import {toast} from "sonner";
+import { API } from "../ui/lib/api";
+import type { ModelInfo } from "../types/model/model-types";
+
+
+
+
+export const useCreatePrediction = () => {
+return useMutation({
+    mutationFn: async (coordinateData: ModelInfo) => {
+        const {data} = await API.post('/v1/intelligence/predict', coordinateData); 
+        return data; 
+    },
+    onSuccess: () => {
+        toast.success("Model prediction successful!")
+    },
+    onError: (e: any) => {
+        toast.error(`API ERROR: ${e.detail.message}`)
+    }
+})
+}
+
+export const useDeletePredictions = () => {
+
+}
+
+export const useDeletePrediction = (id: string) => {
+
+}

client/wildfire-ui/src/routes/auth/log/signin.tsx

@@ -1,4 +1,4 @@
-import { FeatherChrome, FeatherFlame } from "@subframe/core";
+import { FeatherFlame } from "@subframe/core";
 import { Button } from "../../../ui/components/ui/button";
 import { useForm } from "react-hook-form";
 import { z } from "zod";

client/wildfire-ui/src/routes/constants/sidebar.tsx

@@ -11,21 +11,22 @@ import { FeatherTriangleAlert } from "@subframe/core";
 import { FeatherZap } from "@subframe/core";
 import { IconWithBackground } from "../../ui";
 import { useGetUser } from "../../hooks/use-auth";
+import { Link } from "react-router-dom";
 
 
 
   const SideBar = () => {
    const {data:user} = useGetUser();
 
     return (
-      <div className="flex flex-col justify-between pl-6 pr-4 border-r-2 border-b-2 w-[15%] h-screen pt-8 pb-8 bg-white select-none">
+      <div className="flex flex-col justify-between pl-6 pr-4 border-gray-100 border-r-2 border-b-2 w-[15%] h-screen pt-8 pb-8 bg-white select-none">
 
         {/* Top Half Stack */}
         <div className="flex flex-col gap-y-8 relative bottom-24">
 
           {/* Header Branding Row */}
           <div className="flex items-center gap-x-3 ">
-            <IconWithBackground className = "" variant="error" size="large" icon={<FeatherFlame />} />
+            <Link className = "hover:cursor-pointer" to = "/" ><IconWithBackground variant="error" size="large" icon={<FeatherFlame />} /></Link>
             <div className="flex flex-col shrink-0">
               <span className="text-md font-bold text-black tracking-tight">Pyro Intelligence</span>
               <span className="text-sm text-[#a79f9f] font-medium">Wildfire Engine</span>

client/wildfire-ui/src/routes/data/intelligence.tsx

@@ -4,32 +4,106 @@ import { Button } from "../../ui/components/ui/button"
 import SideBar from "../constants/sidebar"
 import { useNavigate } from "react-router"
 import { useGetUser } from "../../hooks/use-auth"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Field, FieldDescription, FieldLabel, FieldGroup } from "../../ui/components/ui/field"
+import { Input } from "../../ui/components/ui/input"
+import { useCreatePrediction } from "../../hooks/use-model"
 const Intelligence = () => {
-
   const navigate = useNavigate();
-  const {data:user} = useGetUser();
+  const { data: user } = useGetUser();
+  const {data: model} = useCreatePrediction();
   if (!user) {
-      return (
-          navigate("/")
-      )
+    return (
+      navigate("/")
+    )
+  }
+  const coordinateValidation = z.object({
+    westLon: z.number().min(-180, "Cannot exceed -180 degrees").max(180, "Cannot exceed 180 degrees"),
+    southLat: z.number().min(-90, "Cannot exceed -90 degrees").max(90, "Cannot exceed 90 degrees"),
+    eastLon: z.number().min(-90, "Cannot exceed -180 degrees").max(90, "Cannot exceed 180 degrees"),
+    northLat: z.number().min(-90, "Cannot exceed -90 degrees").max(90, "Cannot exceed 90 degrees"),
+  })
+
+  type coordinateQuery = z.infer<typeof coordinateValidation>;
+
+  const {register, handleSubmit, formState: { errors }, } = useForm<coordinateQuery>({
+    resolver: zodResolver(coordinateValidation),
+    defaultValues: {
+      westLon: 0,
+      southLat: 0,
+      eastLon: 0,
+      northLat: 0,
+    },
+  });
+
+   const onSubmit = (data: coordinateQuery) => {
+    model(data, {
+      onSuccess: () => {
+        navigate("/field/reports")
+      }
+    })
   }
+
+  const capitalizeLetter = user.role.charAt(0).toUpperCase() + user.role.slice(1);
   return (
     <div className="bg-white h-full w-screen overflow-hidden"> {/* Main Box */}
       {/* Top Bar */}
-      <div className="flex flex-row justify-between border-2 border-black w-[86%] p-4 relative left-[14.9%] place-items-center">
+      <div className="flex flex-row justify-between border-2 border-gray-100 w-[86%] p-4 relative left-[14.9%] place-items-center">
         <div className="flex flex-col justify-center pl-4">
-          <h1 className = "text-shadow-black font-bold text-xl">Wildfire Risk Intelligence</h1>
-          <span className = "text-sm">NASA FIRMS Ingestion • XGBoost Inference</span>
+          <h1 className="text-shadow-black font-bold text-xl">Wildfire Risk Intelligence</h1>
+          <span className="text-sm">NASA FIRMS Ingestion • XGBoost Inference</span>
         </div>
         <div className="grow shrink-0 relative left-[63%]">
-          <Button className="p-1 bg-[#DAFBE6] text-[#639273] w-[9%] h-[15%]"><FeatherShieldCheck/>{user.role}</Button>
+          <Button className="p-1 bg-[#DAFBE6] text-[#639273] w-[9%] h-[15%]"><FeatherShieldCheck />{capitalizeLetter}</Button>
         </div>
       </div>
       <SideBar />
 
       {/* Coordinate Box */}
-      <div>
+      <div className="p-15 border-2 border-gray-100 border-b-2">
+        <h1 className="font-bold text-md">Geospatial Bounding Box</h1>
+        <span className="text-[#a79f9f] text-sm">Define the target region for inference</span>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="westLon">
+                West Longitude
+              </FieldLabel>
+              <Input id = "westLon" placeholder = "-122.6750" required{...register("westLon")}/>
+              {errors.westLon && (
+                <span className = "text-red-500 text-xs">{errors.westLon.message}</span>
+              )}
+            </Field>
+            <FieldDescription>Decimal degrees (-180 to 180)</FieldDescription>
+
+            <Field>
+            <FieldLabel htmlFor = "southLat">South Latitude</FieldLabel>
+            <Input id = "southLat" placeholder = "37.4500" required {...register("southLat")}/>
+            {errors.southLat && (
+              <span className = "text-xs text-red-500">{errors.southLat.message}</span>
+            )}
+            </Field>
+            <FieldDescription>Decimal degrees (-90 to 90)</FieldDescription>
+
+             <Field>
+              <FieldLabel>East Longitude</FieldLabel>
+              <Input id = "eastLon" placeholder = "-122.1500" required {...register("eastLon")}/>
+              {errors.eastLon && (
+                <span className = "text-xs text-red-500">{errors.eastLon.message}</span>
+              )}
+             </Field>
+             <FieldDescription>Decimal degrees (-180 to 180)</FieldDescription>
+
+             <Field>
+              <FieldLabel>North Latitude</FieldLabel>
+              <Input id = "northLat" placeholder = "37.8750" required {...register("northLat")}/>
+             </Field>
+             <FieldDescription>Decimal degrees (-90 to 90)</FieldDescription>
 
+          </FieldGroup>
+        </form>
       </div>
 
       {/* Hotspot Box */}

client/wildfire-ui/src/types/model/model-types.ts

@@ -0,0 +1,6 @@
+export type ModelInfo = {
+    westLon: number;
+    southLat: number;
+    eastLon: number;
+    northLat: number;
+}