Handle to front line events in the new UI.

client/src/api/eventstream.tsx

@@ -4,6 +4,11 @@ import { updateControlPoint } from "./controlPointsSlice";
 import { ControlPoint } from "./controlpoint";
 import { Flight } from "./flight";
 import { deselectFlight, selectFlight } from "./flightsSlice";
+import {
+  addFrontLine,
+  deleteFrontLine,
+  updateFrontLine,
+} from "./frontLinesSlice";
 import FrontLine from "./frontline";
 import Tgo from "./tgo";
 import { updateTgo } from "./tgosSlice";
@@ -40,15 +45,33 @@ export const handleStreamedEvents = (
   if (events.deselected_flight) {
     dispatch(deselectFlight());
   }
+
   if (events.selected_flight != null) {
     dispatch(selectFlight(events.selected_flight));
   }
+
+  for (const front of events.new_front_lines) {
+    dispatch(addFrontLine(front));
+  }
+
+  for (const id of events.updated_front_lines) {
+    backend.get(`/front-lines/${id}`).then((response) => {
+      const front = response.data as FrontLine;
+      dispatch(updateFrontLine(front));
+    });
+  }
+
+  for (const id of events.deleted_front_lines) {
+    dispatch(deleteFrontLine(id));
+  }
+
   for (const id of events.updated_tgos) {
     backend.get(`/tgos/${id}`).then((response) => {
       const tgo = response.data as Tgo;
       dispatch(updateTgo(tgo));
     });
   }
+
   for (const id of events.updated_control_points) {
     backend.get(`/control-points/${id}`).then((response) => {
       const cp = response.data as ControlPoint;

client/src/api/frontLinesSlice.ts

@@ -3,11 +3,11 @@ import FrontLine from "./frontline";
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
 interface FrontLinesState {
-  fronts: FrontLine[];
+  fronts: { [key: string]: FrontLine };
 }
 
 const initialState: FrontLinesState = {
-  fronts: [],
+  fronts: {},
 };
 
 export const frontLinesSlice = createSlice({
@@ -15,12 +15,27 @@ export const frontLinesSlice = createSlice({
   initialState,
   reducers: {
     setFrontLines: (state, action: PayloadAction<FrontLine[]>) => {
-      state.fronts = action.payload;
+      state.fronts = {};
+      for (const front of action.payload) {
+        state.fronts[front.id] = front;
+      }
+    },
+    addFrontLine: (state, action: PayloadAction<FrontLine>) => {
+      const front = action.payload;
+      state.fronts[front.id] = front;
+    },
+    updateFrontLine: (state, action: PayloadAction<FrontLine>) => {
+      const front = action.payload;
+      state.fronts[front.id] = front;
+    },
+    deleteFrontLine: (state, action: PayloadAction<string>) => {
+      delete state.fronts[action.payload];
     },
   },
 });
 
-export const { setFrontLines } = frontLinesSlice.actions;
+export const { setFrontLines, addFrontLine, updateFrontLine, deleteFrontLine } =
+  frontLinesSlice.actions;
 
 export const selectFrontLines = (state: RootState) => state.frontLines;
 

client/src/api/frontline.ts

@@ -1,6 +1,7 @@
 import { LatLng } from "leaflet";
 
 export interface FrontLine {
+  id: string;
   extents: LatLng[];
 }
 

client/src/components/frontlineslayer/FrontLinesLayer.tsx

@@ -7,7 +7,7 @@ export default function SupplyRoutesLayer() {
   const fronts = useAppSelector(selectFrontLines).fronts;
   return (
     <LayerGroup>
-      {fronts.map((front, idx) => {
+      {Object.values(fronts).map((front, idx) => {
         return <FrontLine key={idx} front={front} />;
       })}
     </LayerGroup>