From e6e6c2ecc097c54c012306049a2c5635e09470f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ois=C3=ADn?= <opeppard@cmcl.io>
Date: Tue, 8 Apr 2025 15:47:38 +0100
Subject: [PATCH 1/4] fix isLive JSdoc

---
 code/src/io/data/data-layer.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/code/src/io/data/data-layer.ts b/code/src/io/data/data-layer.ts
index 237d6d210..edb83136e 100644
--- a/code/src/io/data/data-layer.ts
+++ b/code/src/io/data/data-layer.ts
@@ -56,7 +56,9 @@ export abstract class DataLayer {
     */
     public isGroupExpanded: boolean;
 
-    // Indicates if live updates are required for this layer
+    /** 
+     * Indicates if live updates are required for this layer
+     */
     public isLive?: boolean = false;
 
     /**

From c85154084c85bbfa7a5c25c3d6faa8acd34a27fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ois=C3=ADn?= <opeppard@cmcl.io>
Date: Tue, 8 Apr 2025 17:43:25 +0100
Subject: [PATCH 2/4] stop checking for scen dimensions if there's no scen set

---
 code/src/utils/data-services.ts | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/code/src/utils/data-services.ts b/code/src/utils/data-services.ts
index e26b2d220..6eb456c47 100644
--- a/code/src/utils/data-services.ts
+++ b/code/src/utils/data-services.ts
@@ -40,20 +40,24 @@ export function ScenarioDimensionsEndpoint(stack: string, scenario: string): str
 }
 
 export const useScenarioDimensionsService = (stack: string, scenario: string): { scenarioDimensions: ScenarioDimensionsData; isDimensionsFetching: boolean } => {
-  const { data, isFetching } = useFetchDimensionsQuery(ScenarioDimensionsEndpoint(stack, scenario));
-
-  const [scenarioDimensions, setScenarioDimensions] = useState<ScenarioDimensionsData>({});
-  const isDimensionsFetching = isFetching;
-  useEffect(() => {
-    if (!isFetching) {
-      // If there is any data retrieved, set that first
-      if (data) {
-        setScenarioDimensions(data);
+  if (scenario) {
+
+    const { data, isFetching } = useFetchDimensionsQuery(ScenarioDimensionsEndpoint(stack, scenario));
+
+    const [scenarioDimensions, setScenarioDimensions] = useState<ScenarioDimensionsData>({});
+    const isDimensionsFetching = isFetching;
+    useEffect(() => {
+      if (!isFetching) {
+        // If there is any data retrieved, set that first
+        if (data) {
+          setScenarioDimensions(data);
+        }
       }
-    }
-  }, [data, isFetching]);
+    }, [data, isFetching]);
 
-  return { scenarioDimensions, isDimensionsFetching };
+    return { scenarioDimensions, isDimensionsFetching };
+  }
+  else return  { scenarioDimensions: {}, isDimensionsFetching: false };
 }
 
 /**

From 3edabb15712c466ae239b23d6e6776888aea826e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ois=C3=ADn?= <opeppard@cmcl.io>
Date: Tue, 8 Apr 2025 19:12:11 +0100
Subject: [PATCH 3/4] allow slot and addBelowLayer as DataLayer params

---
 code/src/io/data/data-layer.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/code/src/io/data/data-layer.ts b/code/src/io/data/data-layer.ts
index edb83136e..fedb4a949 100644
--- a/code/src/io/data/data-layer.ts
+++ b/code/src/io/data/data-layer.ts
@@ -61,6 +61,25 @@ export abstract class DataLayer {
      */
     public isLive?: boolean = false;
 
+    
+    /**
+     * MapBox slot parameter for layer ordering. top, middle or bottom.
+     * 
+     * [see mapbox docs](https://docs.mapbox.com/mapbox-gl-js/example/geojson-layer-in-slot/)
+     *
+     * @public
+     * @type {?string}
+     */
+    public slot?: string;
+
+    /**
+     * The layer ID of the layer that this layer should be added below. Only relevant in mapbox v2 styles
+     * 
+     * @public
+     * @type {?string}
+     */
+    public addBelowLayer?: string;
+
     /**
      * Initialise a new DataLayer instance.
      * 

From 11fcfbc9f4f446c5258f757f00efd9c935790ab4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ois=C3=ADn?= <opeppard@cmcl.io>
Date: Tue, 8 Apr 2025 19:12:48 +0100
Subject: [PATCH 4/4] add a sort function to the layer array before adding to
 map

---
 code/src/ui/map/mapbox/mapbox-layer-utils.ts | 27 +++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/code/src/ui/map/mapbox/mapbox-layer-utils.ts b/code/src/ui/map/mapbox/mapbox-layer-utils.ts
index 8ffb7eb98..3455fa7b1 100644
--- a/code/src/ui/map/mapbox/mapbox-layer-utils.ts
+++ b/code/src/ui/map/mapbox/mapbox-layer-utils.ts
@@ -18,11 +18,32 @@ export async function addAllLayers(map: Map, dataStore: DataStore, imageryOption
     const currentStyle = getCurrentImageryOption(imageryOptions);
 
     const layerArray: DataLayer[] = dataStore?.getLayerList();
-    layerArray?.forEach((layer) => addLayer(map, layer, currentStyle));
-    console.info(`Added ${layerArray?.length} layers to the map object.`);
+    // sort layerArray by layer.order
+    let sortedlayers: DataLayer[] = layerArray;
+    try {sortedlayers = orderLayers(layerArray)
+        console.log("Ordered layers by layer.order");
+    } catch (error) {
+        console.error("Error ordering layers:", error);
+    }
+    sortedlayers?.forEach((layer) => addLayer(map, layer, currentStyle));
+    console.info(`Added ${sortedlayers?.length} layers to the map object.`);
 }
 
-/**
+function orderLayers(layerArray: DataLayer[]): DataLayer[] {
+    const sortedArray = layerArray?.sort((a, b) => {
+        if (a.order < b.order) {
+            return -1;
+        } else if (a.order > b.order) {
+            return 1;
+        } else {
+            return 0;
+        }
+    });
+    console.log("Ordered layers by layer.order innnnor");
+    return sortedArray;
+}
+
+/** 
  * Adds the input DataLayer to the Mapbox map instance.
  * 
  * @param {Map} map the Mapbox map instance.