From 500d50b674faadf872b59acd817c032b50fe3683 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Thu, 29 Aug 2024 22:18:00 +0100
Subject: [PATCH 1/9] feat: Remove feature from formik state

---
 .../components/MapAndLabel/Public/Context.tsx    | 13 +++++++++++++
 .../components/MapAndLabel/Public/index.tsx      | 16 +++++++++-------
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
index 87ce318cbb..7f1efb7ab2 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -24,6 +24,7 @@ interface MapAndLabelContextValue {
   isFeatureInvalid: (index: number) => boolean;
   addFeature: () => void;
   copyFeature: (sourceIndex: number, destinationIndex: number) => void;
+  removeFeature: (index: number) => void;
   mapAndLabelProps: PresentationalProps;
   errors: {
     min: boolean;
@@ -106,6 +107,17 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     const sourceFeature = formik.values.schemaData[sourceIndex];
     formik.setFieldValue(`schemaData[${destinationIndex}]`, sourceFeature);
   };
+  
+  const removeFeature = (index: number) => {
+    resetErrors();
+
+    setActiveIndex(-1);
+
+    formik.setFieldValue(
+      "schemaData",
+      formik.values.schemaData.filter((_, i) => i !== index),
+    );
+  };
 
   return (
     <MapAndLabelContext.Provider
@@ -118,6 +130,7 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
         validateAndSubmitForm,
         addFeature,
         copyFeature,
+        removeFeature,
         isFeatureInvalid,
         errors: {
           min: minError,
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
index 725ef339a8..19563d4314 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -42,8 +42,14 @@ function a11yProps(index: number) {
 const VerticalFeatureTabs: React.FC<{ features: Feature[] }> = ({
   features,
 }) => {
-  const { schema, activeIndex, formik, editFeature, isFeatureInvalid } =
-    useMapAndLabelContext();
+  const {
+    schema,
+    activeIndex,
+    formik,
+    editFeature,
+    isFeatureInvalid,
+    removeFeature,
+  } = useMapAndLabelContext();
 
   return (
     <Box
@@ -124,11 +130,7 @@ const VerticalFeatureTabs: React.FC<{ features: Feature[] }> = ({
               formik={formik}
             />
             <Button
-              onClick={() =>
-                console.log(
-                  `TODO - Remove ${schema.type} ${feature.properties?.label}`,
-                )
-              }
+              onClick={() => removeFeature(activeIndex)}
               sx={{
                 fontWeight: FONT_WEIGHT_SEMI_BOLD,
                 gap: (theme) => theme.spacing(2),

From 7f71269b2871c000153db10e4abecdf0121e3324 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Fri, 30 Aug 2024 07:57:57 +0100
Subject: [PATCH 2/9] refactor: Make CopyFeature it's own component

---
 .../components/MapAndLabel/Public/Context.tsx | 55 +++++++++++++++----
 .../components/MapAndLabel/Public/index.tsx   | 26 +--------
 editor.planx.uk/src/lib/gis.ts                | 41 ++++++++++++++
 3 files changed, 87 insertions(+), 35 deletions(-)
 create mode 100644 editor.planx.uk/src/lib/gis.ts

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
index 7f1efb7ab2..4fd4df6e8a 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -5,6 +5,8 @@ import {
   makeData,
 } from "@planx/components/shared/utils";
 import { FormikProps, useFormik } from "formik";
+import { Feature } from "geojson";
+import { GeoJSONChange, GeoJSONChangeEvent, useGeoJSONChange } from "lib/gis";
 import { get } from "lodash";
 import React, {
   createContext,
@@ -17,12 +19,12 @@ import { PresentationalProps } from ".";
 
 interface MapAndLabelContextValue {
   schema: Schema;
+  features?: Feature[];
   activeIndex: number;
   editFeature: (index: number) => void;
   formik: FormikProps<SchemaUserData>;
   validateAndSubmitForm: () => void;
   isFeatureInvalid: (index: number) => boolean;
-  addFeature: () => void;
   copyFeature: (sourceIndex: number, destinationIndex: number) => void;
   removeFeature: (index: number) => void;
   mapAndLabelProps: PresentationalProps;
@@ -62,18 +64,39 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     },
   });
 
-  const [activeIndex, setActiveIndex] = useState<number>(
-    props.previouslySubmittedData ? -1 : 0,
-  );
+  const [activeIndex, setActiveIndex] = useState<number>(-1);
 
   const [minError, setMinError] = useState<boolean>(false);
   const [maxError, setMaxError] = useState<boolean>(false);
 
+  const handleGeoJSONChange = (event: GeoJSONChangeEvent) => {
+    // If the user clicks 'reset' on the map, geojson will be empty object
+    const userHitsReset = !event.detail["EPSG:3857"];
+
+    if (userHitsReset) {
+      removeAllFeaturesFromMap();
+      removeAllFeaturesFromForm();
+      return;
+    }
+
+    addFeatureToMap(event.detail);
+    addFeatureToForm();
+  };
+
+  const [features, setFeatures] = useGeoJSONChange(handleGeoJSONChange);
+
   const resetErrors = () => {
     setMinError(false);
     setMaxError(false);
   };
 
+  const removeAllFeaturesFromMap = () => setFeatures(undefined);
+
+  const removeAllFeaturesFromForm = () => {
+    formik.setFieldValue("schemaData", []);
+    setActiveIndex(-1);
+  };
+
   const validateAndSubmitForm = () => {
     // Manually validate minimum number of features
     if (formik.values.schemaData.length < schema.min) {
@@ -90,7 +113,10 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
   const isFeatureInvalid = (index: number) =>
     Boolean(get(formik.errors, ["schemaData", index]));
 
-  const addFeature = () => {
+  const addFeatureToMap = (geojson: GeoJSONChange) =>
+    setFeatures(geojson["EPSG:3857"].features);
+
+  const addFeatureToForm = () => {
     resetErrors();
 
     const currentFeatures = formik.values.schemaData;
@@ -101,34 +127,41 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     if (schema.max && updatedFeatures.length > schema.max) {
       setMaxError(true);
     }
+
+    setActiveIndex(activeIndex + 1);
   };
 
   const copyFeature = (sourceIndex: number, destinationIndex: number) => {
     const sourceFeature = formik.values.schemaData[sourceIndex];
     formik.setFieldValue(`schemaData[${destinationIndex}]`, sourceFeature);
   };
-  
-  const removeFeature = (index: number) => {
-    resetErrors();
-
-    setActiveIndex(-1);
 
+  const removeFeatureFromForm = (index: number) => {
     formik.setFieldValue(
       "schemaData",
       formik.values.schemaData.filter((_, i) => i !== index),
     );
   };
 
+  const removeFeature = (index: number) => {
+    resetErrors();
+    setActiveIndex(activeIndex - 1);
+    removeFeatureFromForm(index);
+
+    // TODO! Remove a single feature
+    // removeFeatureFromMap()
+  };
+
   return (
     <MapAndLabelContext.Provider
       value={{
+        features,
         activeIndex,
         schema,
         mapAndLabelProps: props,
         editFeature,
         formik,
         validateAndSubmitForm,
-        addFeature,
         copyFeature,
         removeFeature,
         isFeatureInvalid,
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
index 19563d4314..83d6d9424c 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -11,7 +11,7 @@ import { ErrorSummaryContainer } from "@planx/components/shared/Preview/ErrorSum
 import { SchemaFields } from "@planx/components/shared/Schema/SchemaFields";
 import { Feature, GeoJsonObject } from "geojson";
 import { useStore } from "pages/FlowEditor/lib/store";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import FullWidthWrapper from "ui/public/FullWidthWrapper";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
@@ -164,29 +164,7 @@ const Root = () => {
     longitude,
     boundaryBBox,
   } = mapAndLabelProps;
-
-  const [features, setFeatures] = useState<Feature[] | undefined>(undefined);
-  const { addFeature, schema } = useMapAndLabelContext();
-
-  useEffect(() => {
-    const geojsonChangeHandler = ({ detail: geojson }: any) => {
-      if (geojson["EPSG:3857"]?.features) {
-        setFeatures(geojson["EPSG:3857"].features);
-        addFeature();
-      } else {
-        // if the user clicks 'reset' on the map, geojson will be empty object, so set features to undefined
-        setFeatures(undefined);
-      }
-    };
-
-    const map: HTMLElement | null =
-      document.getElementById("map-and-label-map");
-    map?.addEventListener("geojsonChange", geojsonChangeHandler);
-
-    return function cleanup() {
-      map?.removeEventListener("geojsonChange", geojsonChangeHandler);
-    };
-  }, [setFeatures, addFeature]);
+  const { features, schema } = useMapAndLabelContext();
 
   const rootError: string =
     (errors.min &&
diff --git a/editor.planx.uk/src/lib/gis.ts b/editor.planx.uk/src/lib/gis.ts
new file mode 100644
index 0000000000..0c70023a56
--- /dev/null
+++ b/editor.planx.uk/src/lib/gis.ts
@@ -0,0 +1,41 @@
+import { Feature } from "geojson";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+type Projection = "EPSG:3857" | "EPSG:27700";
+
+export type GeoJSONChange = Record<Projection, { features: Feature[] }>;
+export type GeoJSONChangeEvent = CustomEvent<GeoJSONChange>;
+
+const isGeoJSONChangeEvent = (event: Event): event is GeoJSONChangeEvent => {
+  return event instanceof CustomEvent;
+};
+
+type UseGeoJSONChange = (
+  callback: (event: GeoJSONChangeEvent) => void,
+) => [Feature[] | undefined, Dispatch<SetStateAction<Feature[] | undefined>>];
+
+/**
+ * Hook for interacting with @opensystemslab/map
+ * Assign a callback function to be triggered on the "geojsonChange" event
+ */
+export const useGeoJSONChange: UseGeoJSONChange = (callback) => {
+  const [features, setFeatures] = useState<Feature[] | undefined>(undefined);
+
+  useEffect(() => {
+    const geojsonChangeHandler: EventListener = (event) => {
+      if (!isGeoJSONChangeEvent(event)) return;
+
+      callback(event);
+    };
+
+    const map: HTMLElement | null =
+      document.getElementById("map-and-label-map");
+    map?.addEventListener("geojsonChange", geojsonChangeHandler);
+
+    return function cleanup() {
+      map?.removeEventListener("geojsonChange", geojsonChangeHandler);
+    };
+  }, [callback]);
+
+  return [features, setFeatures];
+};

From f5bb2f4e84670f032f2472ff2d765994710038ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Fri, 30 Aug 2024 17:28:03 +0100
Subject: [PATCH 3/9] feat: Add mapId as an arg to hook

---
 .../src/@planx/components/MapAndLabel/Public/Context.tsx  | 4 +++-
 .../src/@planx/components/MapAndLabel/Public/index.tsx    | 4 ++--
 editor.planx.uk/src/lib/gis.ts                            | 8 ++++----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
index 4fd4df6e8a..78787be331 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -17,6 +17,8 @@ import React, {
 
 import { PresentationalProps } from ".";
 
+export const MAP_ID = "map-and-label-map";
+
 interface MapAndLabelContextValue {
   schema: Schema;
   features?: Feature[];
@@ -83,7 +85,7 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     addFeatureToForm();
   };
 
-  const [features, setFeatures] = useGeoJSONChange(handleGeoJSONChange);
+  const [features, setFeatures] = useGeoJSONChange(MAP_ID, handleGeoJSONChange);
 
   const resetErrors = () => {
     setMinError(false);
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
index 83d6d9424c..d8be159b41 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -21,7 +21,7 @@ import CardHeader from "../../shared/Preview/CardHeader";
 import { MapContainer } from "../../shared/Preview/MapContainer";
 import { PublicProps } from "../../ui";
 import type { MapAndLabel } from "./../model";
-import { MapAndLabelProvider, useMapAndLabelContext } from "./Context";
+import { MAP_ID, MapAndLabelProvider, useMapAndLabelContext } from "./Context";
 import { CopyFeature } from "./CopyFeature";
 
 type Props = PublicProps<MapAndLabel>;
@@ -187,7 +187,7 @@ const Root = () => {
           <MapContainer environment="standalone">
             {/* @ts-ignore */}
             <my-map
-              id="map-and-label-map"
+              id={MAP_ID}
               basemap={basemap}
               ariaLabelOlFixedOverlay={`An interactive map for plotting and describing individual ${schemaName.toLocaleLowerCase()}`}
               drawMode
diff --git a/editor.planx.uk/src/lib/gis.ts b/editor.planx.uk/src/lib/gis.ts
index 0c70023a56..103931901c 100644
--- a/editor.planx.uk/src/lib/gis.ts
+++ b/editor.planx.uk/src/lib/gis.ts
@@ -11,6 +11,7 @@ const isGeoJSONChangeEvent = (event: Event): event is GeoJSONChangeEvent => {
 };
 
 type UseGeoJSONChange = (
+  mapId: string,
   callback: (event: GeoJSONChangeEvent) => void,
 ) => [Feature[] | undefined, Dispatch<SetStateAction<Feature[] | undefined>>];
 
@@ -18,7 +19,7 @@ type UseGeoJSONChange = (
  * Hook for interacting with @opensystemslab/map
  * Assign a callback function to be triggered on the "geojsonChange" event
  */
-export const useGeoJSONChange: UseGeoJSONChange = (callback) => {
+export const useGeoJSONChange: UseGeoJSONChange = (mapId, callback) => {
   const [features, setFeatures] = useState<Feature[] | undefined>(undefined);
 
   useEffect(() => {
@@ -28,14 +29,13 @@ export const useGeoJSONChange: UseGeoJSONChange = (callback) => {
       callback(event);
     };
 
-    const map: HTMLElement | null =
-      document.getElementById("map-and-label-map");
+    const map: HTMLElement | null = document.getElementById(mapId);
     map?.addEventListener("geojsonChange", geojsonChangeHandler);
 
     return function cleanup() {
       map?.removeEventListener("geojsonChange", geojsonChangeHandler);
     };
-  }, [callback]);
+  }, [callback, mapId]);
 
   return [features, setFeatures];
 };

From cefbe1c51f3de1f5326d8ff567a2421edc9f7b20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Fri, 30 Aug 2024 17:43:36 +0100
Subject: [PATCH 4/9] feat: Remove feature from array (but not yet map)

---
 .../@planx/components/MapAndLabel/Public/Context.tsx   | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
index 78787be331..56916ce20e 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -90,6 +90,7 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
   const resetErrors = () => {
     setMinError(false);
     setMaxError(false);
+    formik.setErrors({});
   };
 
   const removeAllFeaturesFromMap = () => setFeatures(undefined);
@@ -145,13 +146,16 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     );
   };
 
+  const removeFeatureFromMap = (index: number) => {
+    // TODO: Actually remove from map layer, not just feature array
+    setFeatures(features?.filter((_, i) => i !== index));
+  };
+
   const removeFeature = (index: number) => {
     resetErrors();
     setActiveIndex(activeIndex - 1);
     removeFeatureFromForm(index);
-
-    // TODO! Remove a single feature
-    // removeFeatureFromMap()
+    removeFeatureFromMap(index);
   };
 
   return (

From e40686b54182a849800f8fb79b131159ce3304fa Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Thu, 5 Sep 2024 22:26:01 +0200
Subject: [PATCH 5/9] add back data-testid

---
 .../src/@planx/components/MapAndLabel/Public/index.tsx           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
index 8137ed5533..31fb12e5d2 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -235,6 +235,7 @@ const Root = () => {
             {/* @ts-ignore */}
             <my-map
               id={MAP_ID}
+              data-testid="map-and-label-map"
               basemap={basemap}
               ariaLabelOlFixedOverlay={`An interactive map for plotting and describing individual ${schemaName.toLocaleLowerCase()}`}
               drawMode

From 2807a98d6453cbaef76a3c34c353ce0e9ece7a6a Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Thu, 5 Sep 2024 22:44:55 +0200
Subject: [PATCH 6/9] map updates

---
 .../@planx/components/MapAndLabel/Public/Context.tsx |  7 ++++++-
 .../@planx/components/MapAndLabel/Public/index.tsx   | 12 +++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
index 6102f0d312..1ce1df107c 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -26,6 +26,7 @@ export const MAP_ID = "map-and-label-map";
 interface MapAndLabelContextValue {
   schema: Schema;
   features?: Feature[];
+  updateMap: boolean;
   activeIndex: number;
   editFeature: (index: number) => void;
   formik: FormikProps<SchemaUserData>;
@@ -117,6 +118,8 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
 
   const [features, setFeatures] = useGeoJSONChange(MAP_ID, handleGeoJSONChange);
 
+  const [updateMap, setUpdateMap] = useState<boolean>(false);
+
   const resetErrors = () => {
     setMinError(false);
     setMaxError(false);
@@ -180,8 +183,9 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
   };
 
   const removeFeatureFromMap = (index: number) => {
-    // TODO: Actually remove from map layer, not just feature array
     setFeatures(features?.filter((_, i) => i !== index));
+    // `updateMap` is set as the `key` prop on the map container to force a re-render of its children (aka <my-map />) on change
+    setUpdateMap(true);
   };
 
   const removeFeature = (index: number) => {
@@ -195,6 +199,7 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     <MapAndLabelContext.Provider
       value={{
         features,
+        updateMap,
         activeIndex,
         schema,
         mapAndLabelProps: props,
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
index 31fb12e5d2..123be3a4fb 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -196,8 +196,14 @@ const PlotFeatureToBegin = () => (
 );
 
 const Root = () => {
-  const { errors, features, mapAndLabelProps, schema, validateAndSubmitForm } =
-    useMapAndLabelContext();
+  const {
+    errors,
+    features,
+    mapAndLabelProps,
+    schema,
+    updateMap,
+    validateAndSubmitForm,
+  } = useMapAndLabelContext();
   const {
     title,
     description,
@@ -230,7 +236,7 @@ const Root = () => {
         howMeasured={howMeasured}
       />
       <FullWidthWrapper>
-        <ErrorWrapper error={rootError}>
+        <ErrorWrapper error={rootError} key={updateMap ? 1 : 0}>
           <MapContainer environment="standalone">
             {/* @ts-ignore */}
             <my-map

From 600d6506428e390dcf58c2c8709a8f57acbfb046 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Fri, 6 Sep 2024 12:04:58 +0200
Subject: [PATCH 7/9] fix remove after first bug

---
 .../components/MapAndLabel/Public/Context.tsx   | 17 +++++++++++------
 .../components/MapAndLabel/Public/index.tsx     |  6 +++---
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
index 1ce1df107c..01e485de01 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -26,7 +26,7 @@ export const MAP_ID = "map-and-label-map";
 interface MapAndLabelContextValue {
   schema: Schema;
   features?: Feature[];
-  updateMap: boolean;
+  updateMapKey: number;
   activeIndex: number;
   editFeature: (index: number) => void;
   formik: FormikProps<SchemaUserData>;
@@ -118,7 +118,7 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
 
   const [features, setFeatures] = useGeoJSONChange(MAP_ID, handleGeoJSONChange);
 
-  const [updateMap, setUpdateMap] = useState<boolean>(false);
+  const [updateMapKey, setUpdateMapKey] = useState<number>(0);
 
   const resetErrors = () => {
     setMinError(false);
@@ -183,9 +183,14 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
   };
 
   const removeFeatureFromMap = (index: number) => {
-    setFeatures(features?.filter((_, i) => i !== index));
-    // `updateMap` is set as the `key` prop on the map container to force a re-render of its children (aka <my-map />) on change
-    setUpdateMap(true);
+    // Order of features varies by change/modification, filter on label not array position
+    const filteredFeatures = features?.filter(
+      (feature) => feature.properties?.label !== `${index + 1}`,
+    );
+    // TODO: shift labels so they remain incremental
+    setFeatures(filteredFeatures);
+    // `updateMapKey` is set as a unique `key` prop on the map container to force a re-render of its children (aka <my-map />) on change
+    setUpdateMapKey(updateMapKey + 1);
   };
 
   const removeFeature = (index: number) => {
@@ -199,7 +204,7 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     <MapAndLabelContext.Provider
       value={{
         features,
-        updateMap,
+        updateMapKey,
         activeIndex,
         schema,
         mapAndLabelProps: props,
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
index 123be3a4fb..878891b6ef 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -201,7 +201,7 @@ const Root = () => {
     features,
     mapAndLabelProps,
     schema,
-    updateMap,
+    updateMapKey,
     validateAndSubmitForm,
   } = useMapAndLabelContext();
   const {
@@ -236,12 +236,12 @@ const Root = () => {
         howMeasured={howMeasured}
       />
       <FullWidthWrapper>
-        <ErrorWrapper error={rootError} key={updateMap ? 1 : 0}>
+        <ErrorWrapper error={rootError} key={updateMapKey}>
           <MapContainer environment="standalone">
             {/* @ts-ignore */}
             <my-map
               id={MAP_ID}
-              data-testid="map-and-label-map"
+              data-testid={MAP_ID}
               basemap={basemap}
               ariaLabelOlFixedOverlay={`An interactive map for plotting and describing individual ${schemaName.toLocaleLowerCase()}`}
               drawMode

From a9211bcbcf771732ce844f5531135747ea8c166b Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Fri, 6 Sep 2024 15:18:24 +0200
Subject: [PATCH 8/9] shift labels after removing non-last feature

---
 .../components/MapAndLabel/Public/Context.tsx | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
index 01e485de01..2b1c4b6ba0 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -183,21 +183,33 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
   };
 
   const removeFeatureFromMap = (index: number) => {
-    // Order of features varies by change/modification, filter on label not array position
+    // Order of features can vary by change/modification, filter on label not array position
+    const label = `${index + 1}`;
     const filteredFeatures = features?.filter(
-      (feature) => feature.properties?.label !== `${index + 1}`,
+      (f) => f.properties?.label !== label,
     );
-    // TODO: shift labels so they remain incremental
+
+    // If the removed feature was not the final one in the array, shift all feature labels after the removed feature so they remain incremental
+    if (features && features?.length > index) {
+      filteredFeatures?.map((f) => {
+        if (f.properties && Number(f.properties?.label) > Number(label)) {
+          const newLabel = Number(f.properties.label) - 1;
+          Object.assign(f, { properties: { label: `${newLabel}` } });
+        }
+      });
+    }
     setFeatures(filteredFeatures);
+
     // `updateMapKey` is set as a unique `key` prop on the map container to force a re-render of its children (aka <my-map />) on change
     setUpdateMapKey(updateMapKey + 1);
   };
 
   const removeFeature = (index: number) => {
     resetErrors();
-    setActiveIndex(activeIndex - 1);
     removeFeatureFromForm(index);
     removeFeatureFromMap(index);
+    // Set active index as highest tab after removal, so that when you "add" a new feature the tabs increment correctly
+    setActiveIndex((features && features.length - 2) || activeIndex - 1);
   };
 
   return (

From a54c9b6053d1c64a01d30765e13b33c957a2e3a5 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Fri, 6 Sep 2024 16:09:51 +0200
Subject: [PATCH 9/9] basic back/change navigation re-added

---
 .../components/MapAndLabel/Public/Context.tsx | 29 +++++++++++--------
 .../components/MapAndLabel/Public/index.tsx   |  9 ++++++
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
index 2b1c4b6ba0..3e7f049db7 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -28,10 +28,11 @@ interface MapAndLabelContextValue {
   features?: Feature[];
   updateMapKey: number;
   activeIndex: number;
-  editFeature: (index: number) => void;
   formik: FormikProps<SchemaUserData>;
   validateAndSubmitForm: () => void;
   isFeatureInvalid: (index: number) => boolean;
+  addInitialFeaturesToMap: (features: Feature[]) => void;
+  editFeature: (index: number) => void;
   copyFeature: (sourceIndex: number, destinationIndex: number) => void;
   removeFeature: (index: number) => void;
   mapAndLabelProps: PresentationalProps;
@@ -151,8 +152,13 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
 
   const addFeatureToMap = (geojson: GeoJSONChange) => {
     resetErrors();
-
     setFeatures(geojson["EPSG:3857"].features);
+    setActiveIndex((features && features?.length - 2) || activeIndex + 1);
+  };
+
+  const addInitialFeaturesToMap = (features: Feature[]) => {
+    setFeatures(features);
+    // TODO: setActiveIndex ?
   };
 
   const addFeatureToForm = () => {
@@ -189,15 +195,13 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
       (f) => f.properties?.label !== label,
     );
 
-    // If the removed feature was not the final one in the array, shift all feature labels after the removed feature so they remain incremental
-    if (features && features?.length > index) {
-      filteredFeatures?.map((f) => {
-        if (f.properties && Number(f.properties?.label) > Number(label)) {
-          const newLabel = Number(f.properties.label) - 1;
-          Object.assign(f, { properties: { label: `${newLabel}` } });
-        }
-      });
-    }
+    // Shift any feature labels that are larger than the removed feature label so they remain incremental
+    filteredFeatures?.map((f) => {
+      if (f.properties && Number(f.properties?.label) > Number(label)) {
+        const newLabel = Number(f.properties.label) - 1;
+        Object.assign(f, { properties: { label: `${newLabel}` } });
+      }
+    });
     setFeatures(filteredFeatures);
 
     // `updateMapKey` is set as a unique `key` prop on the map container to force a re-render of its children (aka <my-map />) on change
@@ -220,9 +224,10 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
         activeIndex,
         schema,
         mapAndLabelProps: props,
-        editFeature,
         formik,
         validateAndSubmitForm,
+        addInitialFeaturesToMap,
+        editFeature,
         copyFeature,
         removeFeature,
         isFeatureInvalid,
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
index 878891b6ef..51fbfebd7a 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -203,10 +203,12 @@ const Root = () => {
     schema,
     updateMapKey,
     validateAndSubmitForm,
+    addInitialFeaturesToMap,
   } = useMapAndLabelContext();
   const {
     title,
     description,
+    fn,
     info,
     policyRef,
     howMeasured,
@@ -217,8 +219,15 @@ const Root = () => {
     latitude,
     longitude,
     boundaryBBox,
+    previouslySubmittedData,
   } = mapAndLabelProps;
 
+  // If coming "back" or "changing", load initial features & tabs onto the map
+  //   Pre-populating form fields within tabs is handled via formik.initialValues in Context.tsx
+  if (previouslySubmittedData?.data?.[fn]?.features?.length > 0) {
+    addInitialFeaturesToMap(previouslySubmittedData?.data?.[fn]?.features);
+  }
+
   const rootError: string =
     (errors.min &&
       `You must plot at least ${schema.min} ${schema.type}(s) on the map`) ||