feat: Weather playground

Author: professoralex13

examples/playground/package.json

@@ -16,6 +16,7 @@
     "@navigraph/charts": "*",
     "@navigraph/leaflet": "*",
     "@navigraph/packages": "*",
+    "@navigraph/weather": "*",
     "@tanstack/react-query": "^5.52.2",
     "clsx": "^2.1.1",
     "leaflet": "^1.9.4",

examples/playground/src/Root.tsx

@@ -10,6 +10,7 @@ import Auth from "./pages/Auth"
 import Charts from "./pages/Charts"
 import Packages from "./pages/Packages"
 import Tiles from "./pages/Tiles"
+import Weather from "./pages/Weather"
 
 export default function Root() {
   const { isInitialized } = useNavigraphAuth()
@@ -33,6 +34,7 @@ export default function Root() {
         <Route path="/charts" element={<Charts />} />
         <Route path="/amdb/*" element={<Amdb />} />
         <Route path="/packages" element={<Packages />} />
+        <Route path="/weather" element={<Weather />} />
       </Routes>
       <MainWindow />
     </main>

examples/playground/src/components/Button.tsx

@@ -4,15 +4,24 @@ import { PropsWithChildren } from "react"
 interface Props {
   selected?: boolean
   className?: string
+  selectedColor?: string
   disabled?: boolean
   onClick: () => void
 }
 
-export default function Button({ selected, onClick, children, className, disabled }: PropsWithChildren<Props>) {
+export default function Button({
+  selected,
+  onClick,
+  children,
+  selectedColor,
+  className,
+  disabled,
+}: PropsWithChildren<Props>) {
   return (
     <button
       disabled={disabled}
       onClick={onClick}
+      style={{ backgroundColor: selected ? selectedColor : undefined }}
       className={clsx(
         "p-1 rounded-lg shadow-lg border-blue-gray-400 border-[1px] text-white text-sm font-semibold disabled:text-gray-200",
         selected ? "bg-blue-50 enabled:hover:bg-blue-25" : "bg-blue-gray-200  enabled:hover:bg-blue-gray-50",

examples/playground/src/components/SideBar.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx"
 import { IconType } from "react-icons"
 import { FaDatabase, FaDownload, FaGlobe, FaMap, FaUser } from "react-icons/fa"
 import { MdOutlineSettings } from "react-icons/md"
+import { TiWeatherPartlySunny } from "react-icons/ti"
 import { NavLink } from "react-router-dom"
 import { useNavigraphAuth } from "../hooks/useNavigraphAuth"
 
@@ -61,6 +62,9 @@ export default function SideBar() {
       <SideBarLink path="/packages" icon={FaDownload} disabled={!user?.scope.includes(Scope.FMSDATA)}>
         Packages
       </SideBarLink>
+      <SideBarLink path="/weather" icon={TiWeatherPartlySunny} disabled={!user}>
+        Weather
+      </SideBarLink>
     </div>
   )
 }

examples/playground/src/components/map/avwx.tsx

@@ -0,0 +1,86 @@
+import { AVWXSource, getWeatherApi } from "@navigraph/weather"
+import { useQueries } from "@tanstack/react-query"
+import { circleMarker, GeoJSON as LeafletGeoJSON } from "leaflet"
+import { memo, useRef } from "react"
+import { renderToString } from "react-dom/server"
+import { GeoJSON } from "react-leaflet"
+import { useRecoilValue } from "recoil"
+import { avwxState } from "../../state/weather"
+import JsonView from "../JsonView"
+
+export const weatherColors: Record<AVWXSource, string> = {
+  AIREP: "rgb(195, 48, 34)",
+  AIRMET: "rgb(128, 128, 128)",
+  CWA: "rgb(0, 80, 160)",
+  GAIRMET: "rgb(160, 96, 0)",
+  ISIGMET: "rgb(153, 0, 153)",
+  METAR: "rgb(50, 185, 243)",
+  SIGMET: "rgb(27, 136, 136)",
+}
+
+const Avwx = memo(() => {
+  const weatherApi = getWeatherApi()
+
+  const sources = useRecoilValue(avwxState)
+
+  const layers = useQueries({
+    queries: sources.map(source => ({
+      queryKey: ["avwx", source],
+      queryFn: async () => [source, await weatherApi.getAvwxReports([source])] as const,
+    })),
+  })
+
+  const layersRef = useRef<Partial<Record<AVWXSource, LeafletGeoJSON>>>({})
+
+  return layers.map(({ data }) => {
+    if (!data) return null
+
+    return (
+      <GeoJSON
+        ref={value => {
+          layersRef.current[data[0]] = value ?? undefined
+        }}
+        key={data[0]}
+        data={data[1]}
+        style={{
+          color: weatherColors[data[0]],
+        }}
+        pointToLayer={(feature, latlng) => {
+          const marker = circleMarker(latlng)
+
+          marker.feature = feature
+
+          return marker
+        }}
+        onEachFeature={(feature, _layer) => {
+          _layer.on("click", e => {
+            const target = e.target as LeafletGeoJSON
+
+            const feature = target.feature
+
+            if (feature?.type === "Feature") {
+              Object.values(layersRef.current).forEach(layer => {
+                layer?.resetStyle()
+              })
+
+              target.setStyle({ color: "blue" })
+            }
+          })
+
+          if (feature.properties) {
+            _layer.bindPopup(
+              renderToString(
+                <div className="flex flex-col items-center gap-2">
+                  <span className="text-ng-background-200">{data[0]}</span>
+                  <JsonView content={feature.properties} />
+                </div>,
+              ),
+            )
+          }
+        }}
+      />
+    )
+  })
+})
+
+export default Avwx

examples/playground/src/components/map/index.tsx

@@ -21,6 +21,8 @@ import {
 } from "../../state/map"
 import Button from "../Button"
 import AmdbManager from "./AmdbManager"
+import Avwx from "./avwx"
+import WeatherRouteManager from "./weatherRoute"
 
 /**
  * Creates a Navigraph tiles preset config based on the 4 properties needed
@@ -154,7 +156,7 @@ export default function MapPane() {
       <MapContainer
         center={[51.505, -0.09]}
         zoom={13}
-        className="h-screen bg-black"
+        className="h-screen bg-black cursor-pointer"
         zoomControl={false}
         ref={mapRef}
         whenReady={() => {
@@ -170,6 +172,8 @@ export default function MapPane() {
             />
           ))}
         {user?.scope.includes(Scope.CHARTS) && <ChartOverlay />}
+        <WeatherRouteManager />
+        <Avwx />
         {user?.scope.includes(Scope.AMDB) && <AmdbManager />}
       </MapContainer>
       <OverlayControls />

examples/playground/src/components/map/weatherRoute.tsx

@@ -0,0 +1,65 @@
+import { LatLng, LeafletMouseEvent } from "leaflet"
+import { useEffect, useState } from "react"
+import { Marker, Polyline, useMap } from "react-leaflet"
+import { useRecoilState } from "recoil"
+import { weatherRouteEditState, weatherRouteState } from "../../state/weather"
+
+export default function WeatherRouteManager() {
+  const map = useMap()
+
+  const [editActive, setEditActive] = useRecoilState(weatherRouteEditState)
+
+  const [route, setRoute] = useRecoilState(weatherRouteState)
+
+  const [nextPosition, setNextPosition] = useState<LatLng | null>(null)
+
+  useEffect(() => {
+    const clickCallback = (e: LeafletMouseEvent) => {
+      if (editActive) {
+        setRoute([...route, e.latlng])
+      }
+    }
+
+    const mouseMoveCallback = (e: LeafletMouseEvent) => {
+      if (editActive) {
+        setNextPosition(e.latlng)
+      }
+    }
+
+    if (!editActive) {
+      setNextPosition(null)
+    }
+
+    map.on("click", clickCallback)
+    map.on("mousemove", mouseMoveCallback)
+
+    return () => {
+      map.off("click", clickCallback)
+      map.off("mousemove", mouseMoveCallback)
+    }
+  }, [editActive, map, route, setRoute])
+
+  useEffect(() => {
+    const callback = (e: KeyboardEvent) => {
+      if (e.key === "Enter" && editActive) {
+        setEditActive(false)
+      }
+    }
+
+    document.addEventListener("keydown", callback)
+
+    return () => {
+      document.removeEventListener("keydown", callback)
+    }
+  }, [editActive, setEditActive])
+
+  return (
+    <>
+      <Polyline positions={route} />
+      {nextPosition && route.length >= 1 && (
+        <Polyline color="red" positions={[route[route.length - 1], nextPosition]} />
+      )}
+      {nextPosition && <Marker position={nextPosition} />}
+    </>
+  )
+}