From b3cf1f3f5ac212ffa9dc0cc52a912f8b376f3e82 Mon Sep 17 00:00:00 2001
From: Kevin Fabre <kevin.fabre@opendatasoft.com>
Date: Thu, 28 Sep 2023 10:18:20 +0200
Subject: [PATCH] chore: create svelte store to deep compare values

Update the store value if previous and new values aren't deep equal
---
 .../src/components/MapPoi/Map.svelte          | 48 ++++---------------
 .../src/stores/createDeepEqual.ts             | 29 +++++++++++
 2 files changed, 39 insertions(+), 38 deletions(-)
 create mode 100644 packages/visualizations/src/stores/createDeepEqual.ts

diff --git a/packages/visualizations/src/components/MapPoi/Map.svelte b/packages/visualizations/src/components/MapPoi/Map.svelte
index e6028b94..b58cf467 100644
--- a/packages/visualizations/src/components/MapPoi/Map.svelte
+++ b/packages/visualizations/src/components/MapPoi/Map.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { BBox } from 'geojson';
+    import createDeepEqual from '../../stores/createDeepEqual';
 
     import MapRender from './MapRender.svelte';
 
@@ -12,26 +12,20 @@
         getPopupsConfiguration,
         getMapOptions,
     } from './utils';
-    import type { Center, PoiMapData, PoiMapOptions } from './types';
+    import type { PoiMapData, PoiMapOptions } from './types';
 
     export let data: Async<PoiMapData>;
     export let options: PoiMapOptions;
 
-    let bbox: BBox;
-    let previousBbox: BBox;
-
-    let center: Center;
-    let previousCenter: Center;
-
     $: style = getMapStyle(options.style);
     $: sources = getMapSources(data.value?.sources);
     $: layers = getMapLayers(data.value?.layers);
     $: popupsConfiguration = getPopupsConfiguration(data.value?.layers);
 
     $: ({
-        bbox: currentBbox,
+        bbox: _bbox,
         zoom,
-        center: currentCenter,
+        center: _center,
         title,
         subtitle,
         description,
@@ -41,32 +35,10 @@
         interactive,
     } = getMapOptions(options));
 
-    /*
-     * As options is an object, current bbox updates when options changes
-     * We want to trigger an update to MapRender only if bbox value changes, not its reference.
-     */
-    $: {
-        // Update bbox only if different from previous bbox
-        if (
-            currentBbox &&
-            (!previousBbox || currentBbox.some((bound, index) => bound !== previousBbox[index]))
-        ) {
-            bbox = currentBbox;
-            previousBbox = currentBbox;
-        }
-    }
-
-    // Same thing as above for center
-    $: {
-        if (
-            currentCenter &&
-            (!previousCenter ||
-                currentCenter.some((point, index) => point !== previousCenter[index]))
-        ) {
-            center = currentCenter;
-            previousCenter = currentCenter;
-        }
-    }
+    let bbox = createDeepEqual(_bbox);
+    let center = createDeepEqual(_center);
+    $: bbox.set(_bbox);
+    $: center.set(_center);
 </script>
 
 <div>
@@ -76,8 +48,8 @@
             {sources}
             {layers}
             {popupsConfiguration}
-            {bbox}
-            {center}
+            bbox={$bbox}
+            center={$center}
             {zoom}
             {title}
             {subtitle}
diff --git a/packages/visualizations/src/stores/createDeepEqual.ts b/packages/visualizations/src/stores/createDeepEqual.ts
new file mode 100644
index 00000000..6d4f1c26
--- /dev/null
+++ b/packages/visualizations/src/stores/createDeepEqual.ts
@@ -0,0 +1,29 @@
+import { writable, get } from 'svelte/store';
+
+/**
+ * Creates a Svelte writable store that compares values deeply before updating.
+ *
+ * @param initialValue - The initial value for the store.
+ * @returns An object containing the subscribe and set methods.
+ */
+const createDeepEqual = <V>(initialValue: V | undefined) => {
+    const value = writable<V | undefined>(initialValue);
+
+    return {
+        /**
+         * Subscribes to changes in the store's value.
+         */
+        subscribe: value.subscribe,
+        /**
+         * Sets the new value for the store if it differs from the current value
+         * by performing a deep comparison.
+         */
+        set: (newValue: V | undefined) => {
+            if (JSON.stringify(newValue) !== JSON.stringify(get(value))) {
+                value.set(newValue);
+            }
+        },
+    };
+};
+
+export default createDeepEqual;