From c68d2255ebfb23e0f01dcd7cf39585f7ec069345 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Fri, 22 Nov 2024 09:19:09 +0100
Subject: [PATCH] fix(client): Stop layer animation if dataset becomes inactive

---
 client/src/components/dataset-card/index.tsx | 37 +++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/client/src/components/dataset-card/index.tsx b/client/src/components/dataset-card/index.tsx
index 47740ef..ef7c5c3 100644
--- a/client/src/components/dataset-card/index.tsx
+++ b/client/src/components/dataset-card/index.tsx
@@ -101,6 +101,18 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
     [layers, selectedLayerId],
   );
 
+  const onToggleAnimation = useCallback(() => {
+    const newIsAnimated = !isAnimated;
+
+    if (newIsAnimated) {
+      dateBeforeAnimationRef.current = selectedDate !== undefined ? selectedDate : null;
+    } else {
+      dateBeforeAnimationRef.current = null;
+    }
+
+    setIsAnimated(newIsAnimated);
+  }, [selectedDate, isAnimated, setIsAnimated]);
+
   const onToggleDataset = useCallback(
     (active: boolean) => {
       if (selectedLayerId === undefined) {
@@ -109,11 +121,22 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
 
       if (!active) {
         removeLayer(selectedLayerId);
+        if (isAnimated) {
+          onToggleAnimation();
+        }
       } else {
         addLayer(selectedLayerId, { ["return-period"]: selectedReturnPeriod, date: selectedDate });
       }
     },
-    [selectedLayerId, addLayer, removeLayer, selectedReturnPeriod, selectedDate],
+    [
+      selectedLayerId,
+      addLayer,
+      removeLayer,
+      selectedReturnPeriod,
+      selectedDate,
+      isAnimated,
+      onToggleAnimation,
+    ],
   );
 
   const onChangeSelectedLayer = useCallback(
@@ -184,18 +207,6 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
     [selectedLayerId, isDatasetActive, addLayer, updateLayer, layers, layersConfiguration],
   );
 
-  const onToggleAnimation = useCallback(() => {
-    const newIsAnimated = !isAnimated;
-
-    if (newIsAnimated) {
-      dateBeforeAnimationRef.current = selectedDate !== undefined ? selectedDate : null;
-    } else {
-      dateBeforeAnimationRef.current = null;
-    }
-
-    setIsAnimated(newIsAnimated);
-  }, [selectedDate, isAnimated, setIsAnimated]);
-
   // When the layer is animated, show each month of the year in a loop
   useEffect(() => {
     if (isAnimated && selectedDate !== undefined && selectedLayerId !== undefined) {