From 2fab60dce74b5a1956a398c783a042063f6a19b1 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Mon, 9 Sep 2024 17:39:33 +0200
Subject: [PATCH] chore: `MapAndLabel` tidy ups (#3643)

---
 .../@planx/components/MapAndLabel/Public/Context.tsx   | 10 ++++++----
 .../src/@planx/components/MapAndLabel/Public/index.tsx |  9 +++++++--
 2 files changed, 13 insertions(+), 6 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 3e7f049db7..cedbfa6aa8 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx
@@ -152,13 +152,14 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
 
   const addFeatureToMap = (geojson: GeoJSONChange) => {
     resetErrors();
-    setFeatures(geojson["EPSG:3857"].features);
-    setActiveIndex((features && features?.length - 2) || activeIndex + 1);
+    const newFeatures = geojson["EPSG:3857"].features;
+    setFeatures(newFeatures);
+    setActiveIndex(newFeatures.length - 1);
   };
 
   const addInitialFeaturesToMap = (features: Feature[]) => {
     setFeatures(features);
-    // TODO: setActiveIndex ?
+    // setActiveIndex(features.length - 1);
   };
 
   const addFeatureToForm = () => {
@@ -212,8 +213,9 @@ export const MapAndLabelProvider: React.FC<MapAndLabelProviderProps> = (
     resetErrors();
     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);
+    setActiveIndex((features && features.length - 2) || 0);
   };
 
   return (
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 51fbfebd7a..b7825ad4ce 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -70,8 +70,12 @@ const VerticalFeatureTabs: React.FC = () => {
     throw new Error("Cannot render MapAndLabel tabs without features");
   }
 
-  // Features is inherently sorted by recently added/modified, order tabs by stable labels
-  const sortedFeatures = sortBy(features, ["properties.label"]);
+  // Features is inherently sorted by recently added/modified, order tabs by stable labels (labels are integers stored as strings)
+  const sortedFeatures = sortBy(features, [
+    function (f) {
+      return Number(f.properties?.label);
+    },
+  ]);
 
   return (
     <Box
@@ -261,6 +265,7 @@ const Root = () => {
                   features: features,
                 })
               }
+              drawGeojsonDataBuffer={25}
               drawMany
               drawColor={drawColor}
               drawType={drawType}