chore: MapAndLabel tidy ups (#3643)

theopensystemslab · Sep 9, 2024 · 2fab60d · 2fab60d
1 parent e2ebae6
commit 2fab60d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 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
@@ -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
@@ -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}