Send flight plan paths to the back of the map.

This fixes the unusual case where the `interactive: false` property had
no effect, which would make it impossible to plan missions against UI
elements that were overflown by many flights (such as the front line).

As an added bonus, it looks a bit nicer.

This impacts the test in an odd way, but the cure for that is probably
rewriting the test to not use a mock now that we've figured out how to
do that.

Fixes https://github.com/dcs-liberation/dcs_liberation/issues/3295.

changelog.md

@@ -271,6 +271,7 @@ BAI/ANTISHIP/DEAD/STRIKE/BARCAP/CAS/OCA/AIR-ASSAULT (main) missions
 * **[UI]** Fixed flight properties UI to support F-15E S4+ laser codes.
 * **[UI]** Fixed UI bug where altering an "ahead of package" TOT offset would change the offset back to a "behind pacakge" offset.
 * **[UI]** Fixed bug where changing TOT offsets could result in flight startup times that are in the past.
+* **[UI]** Flight plan paths are now drawn behind all other map elements, fixing rare cases where they could prevent other UI elements from being clickable.
 
 # 8.1.0
 

client/src/components/flightplan/FlightPlan.tsx

@@ -1,7 +1,8 @@
 import { Flight } from "../../api/liberationApi";
 import { useGetCommitBoundaryForFlightQuery } from "../../api/liberationApi";
 import WaypointMarker from "../waypointmarker";
-import { ReactElement } from "react";
+import { Polyline as LPolyline } from "leaflet";
+import { ReactElement, useEffect, useRef } from "react";
 import { Polyline } from "react-leaflet";
 
 const BLUE_PATH = "#0084ff";
@@ -27,16 +28,39 @@ const pathColor = (props: FlightPlanProps) => {
 function FlightPlanPath(props: FlightPlanProps) {
   const color = pathColor(props);
   const waypoints = props.flight.waypoints;
+
+  const polylineRef = useRef<LPolyline | null>(null);
+
+  // Flight paths should be drawn under everything else. There seems to be an
+  // issue where `interactive: false` doesn't do as its told (there's nuance,
+  // see the bug for details). It looks better if we draw the other elements on
+  // top of the flight plans anyway, so just push the flight plan to the back.
+  //
+  // https://github.com/dcs-liberation/dcs_liberation/issues/3295
+  //
+  // It's not possible to z-index a polyline (and leaflet says it never will be,
+  // because this is a limitation of SVG, not leaflet:
+  // https://github.com/Leaflet/Leaflet/issues/185), so we need to use
+  // bringToBack() to push the flight paths to the back of the drawing once
+  // they've been added to the map. They'll still draw on top of the map, but
+  // behind everything than was added before them. Anything added after always
+  // goes on top.
+  useEffect(() => {
+    polylineRef.current?.bringToBack();
+  });
+
   if (waypoints == null) {
     return <></>;
   }
   const points = waypoints
     .filter((waypoint) => waypoint.include_in_path)
     .map((waypoint) => waypoint.position);
+
   return (
     <Polyline
       positions={points}
       pathOptions={{ color: color, interactive: false }}
+      ref={polylineRef}
     />
   );
 }

client/src/components/flightplanslayer/FlightPlansLayer.test.tsx

@@ -95,8 +95,12 @@ describe("FlightPlansLayer", () => {
           },
         },
       });
-      expect(mockPolyline).toHaveBeenCalledTimes(2);
-      expect(mockLayerGroup).toBeCalledTimes(1);
+
+      // For some reason passing ref to PolyLine causes it and its group to be
+      // redrawn, so these numbers don't match what you'd expect from the test.
+      // It probably needs to be rewritten without mocks.
+      expect(mockPolyline).toHaveBeenCalledTimes(3);
+      expect(mockLayerGroup).toBeCalledTimes(2);
     });
     it("are not drawn if wrong coalition", () => {
       renderWithProviders(<FlightPlansLayer blue={true} />, {