Filter rework (#623)

* Rework filtering Created common FilterComponents Created common FilterControl Abstracted common map logic into Map component Reworked Node filtering for map page Added Node filtering for nodes list Added test for node filtering Added toggle group UI package * Debounce filterState change * UI adjustments --------- Co-authored-by: philon- <philon-@users.noreply.github.com>
2025-05-22 15:11:32 -04:00
parent 9cb5cffdb1
commit a642080b90
13 changed files with 1077 additions and 676 deletions
@@ -0,0 +1,58 @@
+import MapGl, {
+  AttributionControl,
+  GeolocateControl,
+  type MapRef,
+  NavigationControl,
+  ScaleControl,
+} from "react-map-gl/maplibre";
+import { useTheme } from "@core/hooks/useTheme.ts";
+import { useEffect, useRef } from "react";
+
+interface MapProps {
+  children?: React.ReactNode;
+  onLoad?: (map: MapRef) => void;
+}
+
+export const Map = ({ children, onLoad }: MapProps) => {
+  const { theme } = useTheme();
+  const darkMode = theme === "dark";
+  const mapRef = useRef<MapRef | null>(null);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map && onLoad) onLoad(map);
+  }, [onLoad]);
+
+  return (
+    <MapGl
+      ref={mapRef}
+      mapStyle="https://raw.githubusercontent.com/hc-oss/maplibre-gl-styles/master/styles/osm-mapnik/v8/default.json"
+      attributionControl={false}
+      renderWorldCopies={false}
+      maxPitch={0}
+      dragRotate={false}
+      touchZoomRotate={false}
+      initialViewState={{
+        zoom: 1.8,
+        latitude: 35,
+        longitude: 0,
+      }}
+      style={{ filter: darkMode ? "brightness(0.9)" : undefined }}
+    >
+      <AttributionControl
+        style={{
+          background: darkMode ? "#ffffff" : undefined,
+          color: darkMode ? "black" : undefined,
+        }}
+      />
+      <GeolocateControl
+        position="top-right"
+        positionOptions={{ enableHighAccuracy: true }}
+        trackUserLocation
+      />
+      <NavigationControl position="top-right" showCompass={false} />
+      <ScaleControl />
+      {children}
+    </MapGl>
+  );
+};