Merge pull request #91 from Navigraph/weather

Add Weather SDK module and related examples

Author: professoralex13

.changeset/lemon-pillows-clap.md

@@ -0,0 +1,7 @@
+---
+"@navigraph/weather": major
+"playground": minor
+"navigraph": minor
+---
+
+Added weather API module

examples/playground/package.json

@@ -16,7 +16,10 @@
     "@navigraph/charts": "*",
     "@navigraph/leaflet": "*",
     "@navigraph/packages": "*",
+    "@navigraph/weather": "*",
     "@tanstack/react-query": "^5.52.2",
+    "@turf/buffer": "^7.1.0",
+    "@turf/helpers": "^7.1.0",
     "clsx": "^2.1.1",
     "leaflet": "^1.9.4",
     "react": "^18.3.1",

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/JsonView.tsx

@@ -10,7 +10,7 @@ interface Props {
  */
 export default function JsonView({ content, onClick }: Props) {
   return (
-    <div className={clsx("pane overflow-auto w-full no-scrollbar", onClick && "cursor-pointer")}>
+    <div className={clsx("pane overflow-auto w-full max-h-96", onClick && "cursor-pointer")}>
       <pre className={clsx("text-white text-xs", onClick && "hover:text-gray-50")}>
         {JSON.stringify(content, null, 2)}
       </pre>

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/AviationWeather.tsx

@@ -0,0 +1,91 @@
+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)",
+}
+
+/**
+ * Handles the rendering of Aviation Weather reports to the map
+ */
+const AviationWeather = memo(() => {
+  const weatherApi = getWeatherApi()
+
+  const sources = useRecoilValue(avwxState)
+
+  // Queries reports for all of the selected AVWX layers
+  const layers = useQueries({
+    queries: sources.map(source => ({
+      queryKey: ["avwx", source],
+      queryFn: async () => [source, await weatherApi.getAviationWeatherReports([source])] as const,
+    })),
+  })
+
+  // Store refs to the map layers so they can be updated based on selections
+  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 AviationWeather

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

@@ -0,0 +1,25 @@
+import { memo } from "react"
+import { Marker, Popup } from "react-leaflet"
+import { useRecoilValue } from "recoil"
+import { metarTafMarkersState } from "../../state/weather"
+import JsonView from "../JsonView"
+
+const MetarTaf = memo(() => {
+  const markers = useRecoilValue(metarTafMarkersState)
+
+  return [
+    ...markers.flatMap(({ latitude, longitude, ...data }) => {
+      if (!latitude || !longitude) return
+
+      return (
+        <Marker position={{ lat: latitude, lng: longitude }}>
+          <Popup>
+            <JsonView content={data} />
+          </Popup>
+        </Marker>
+      )
+    }),
+  ]
+})
+
+export default MetarTaf

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

@@ -21,6 +21,9 @@ import {
 } from "../../state/map"
 import Button from "../Button"
 import AmdbManager from "./AmdbManager"
+import AviationWeather from "./AviationWeather"
+import MetarTaf from "./MetarTaf"
+import WeatherRouteManager from "./weatherRoute"
 
 /**
  * Creates a Navigraph tiles preset config based on the 4 properties needed
@@ -154,7 +157,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 +173,9 @@ export default function MapPane() {
             />
           ))}
         {user?.scope.includes(Scope.CHARTS) && <ChartOverlay />}
+        <WeatherRouteManager />
+        <AviationWeather />
+        <MetarTaf />
         {user?.scope.includes(Scope.AMDB) && <AmdbManager />}
       </MapContainer>
       <OverlayControls />

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

@@ -0,0 +1,88 @@
+import { buffer } from "@turf/buffer"
+import * as helpers from "@turf/helpers"
+import { LatLng, LeafletMouseEvent } from "leaflet"
+import { useEffect, useMemo, useState } from "react"
+import { GeoJSON, Marker, Polyline, useMap } from "react-leaflet"
+import { useRecoilState, useRecoilValue } from "recoil"
+import { weatherRouteEditState, weatherRouteRangeState, weatherRouteState } from "../../state/weather"
+
+/**
+ * Handles the creation and rendering of routes for weather queries along routes
+ */
+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 the edit process is active, append the location of any clicks to the route array
+      if (editActive) {
+        setRoute([...route, e.latlng])
+      }
+    }
+
+    const mouseMoveCallback = (e: LeafletMouseEvent) => {
+      // If the edit process is active, set the nextPosition state to the lat/lng position of the mouse for an indication of where the next line will be
+      if (editActive) {
+        setNextPosition(e.latlng)
+      }
+    }
+
+    // If the edit process is not active, the nextPosition should not be rendered
+    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) => {
+      // Whenever editing is active, pressing enter should stop it
+      if (e.key === "Enter" && editActive) {
+        setEditActive(false)
+      }
+    }
+
+    document.addEventListener("keydown", callback)
+
+    return () => {
+      document.removeEventListener("keydown", callback)
+    }
+  }, [editActive, setEditActive])
+
+  const positions = useRecoilValue(weatherRouteState)
+  const range = useRecoilValue(weatherRouteRangeState)
+
+  const area = useMemo(() => {
+    if (positions.length < 2) {
+      return null
+    }
+
+    const linestring = helpers.lineString(positions.map(({ lng, lat }) => [lng, lat]))
+
+    return buffer(linestring, range * 1852, { units: "meters" })
+  }, [range, positions])
+
+  return (
+    <>
+      <Polyline positions={route} />
+      {nextPosition && route.length >= 1 && (
+        <Polyline color="red" positions={[route[route.length - 1], nextPosition]} />
+      )}
+      {nextPosition && <Marker position={nextPosition} />}
+      {area && <GeoJSON key={Math.random()} data={area} />}
+    </>
+  )
+}