From b29ae6e664bae8c5de379d578d750773db4f10a1 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:03:45 +0100
Subject: [PATCH 1/2] feat(client): Add year chart for temporal layers

---
 client/package.json                          |   7 +
 client/src/components/dataset-card/index.tsx |   8 +-
 client/src/components/year-chart/index.tsx   | 272 +++++++++++
 client/src/hooks/use-year-chart-data.ts      | 102 +++++
 client/yarn.lock                             | 451 ++++++++++++++++++-
 5 files changed, 838 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/year-chart/index.tsx
 create mode 100644 client/src/hooks/use-year-chart-data.ts

diff --git a/client/package.json b/client/package.json
index f94aba9..4f64393 100644
--- a/client/package.json
+++ b/client/package.json
@@ -43,6 +43,13 @@
     "@turf/helpers": "7.1.0",
     "@turf/meta": "7.1.0",
     "@types/mapbox-gl": "3.4.0",
+    "@visx/axis": "3.12.0",
+    "@visx/gradient": "3.12.0",
+    "@visx/grid": "3.12.0",
+    "@visx/responsive": "3.12.0",
+    "@visx/scale": "3.12.0",
+    "@visx/shape": "3.12.0",
+    "@visx/text": "3.12.0",
     "apng-js": "1.1.4",
     "axios": "1.7.7",
     "class-variance-authority": "0.7.0",
diff --git a/client/src/components/dataset-card/index.tsx b/client/src/components/dataset-card/index.tsx
index f811411..47740ef 100644
--- a/client/src/components/dataset-card/index.tsx
+++ b/client/src/components/dataset-card/index.tsx
@@ -21,6 +21,7 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import YearChart from "@/components/year-chart";
 import useMapLayers from "@/hooks/use-map-layers";
 import { cn } from "@/lib/utils";
 import CalendarDaysIcon from "@/svgs/calendar-days.svg";
@@ -315,8 +316,13 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
             </SelectContent>
           </Select>
         )}
+        {selectedDate !== undefined && selectedLayerId !== undefined && (
+          <div className="mt-3">
+            <YearChart layerId={selectedLayerId} date={selectedDate} active={isDatasetActive} />
+          </div>
+        )}
         {selectedDate !== undefined && dateRange !== undefined && isDatasetActive && (
-          <div className="flex items-center justify-between gap-4">
+          <div className="mt-1 flex items-center justify-between gap-4">
             <Button
               type="button"
               variant="ghost"
diff --git a/client/src/components/year-chart/index.tsx b/client/src/components/year-chart/index.tsx
new file mode 100644
index 0000000..92e745b
--- /dev/null
+++ b/client/src/components/year-chart/index.tsx
@@ -0,0 +1,272 @@
+"use client";
+
+import { AxisBottom, AxisLeft, AxisTop } from "@visx/axis";
+import { LinearGradient } from "@visx/gradient";
+import { GridColumns, GridRows } from "@visx/grid";
+import { Group } from "@visx/group";
+import { useParentSize } from "@visx/responsive";
+import { scaleLinear, scalePoint } from "@visx/scale";
+import { AreaClosed, Line, LinePath } from "@visx/shape";
+import { Text, TextProps } from "@visx/text";
+import { extent } from "d3-array";
+import { interpolateRgb, piecewise } from "d3-interpolate";
+import { format } from "date-fns/format";
+import { ComponentProps, useCallback, useMemo } from "react";
+
+import { Skeleton } from "@/components/ui/skeleton";
+import useYearChartData from "@/hooks/use-year-chart-data";
+import tailwindConfig from "@/lib/tailwind-config";
+import { cn } from "@/lib/utils";
+
+interface YearChartProps {
+  layerId: number;
+  date: string;
+  active: boolean;
+}
+
+const CHART_MIN_HEIGHT = 120;
+const CHART_MAX_HEIGHT = 250;
+const X_AXIS_HEIGHT = 22;
+const X_AXIS_OFFSET_RIGHT = 5;
+const X_AXIS_TICK_HEIGHT = 5;
+const Y_AXIS_WIDTH = 34;
+const Y_AXIS_OFFSET_TOP = 5;
+const Y_AXIS_TICK_WIDTH = 5;
+const Y_AXIS_TICK_COUNT = 5;
+const GRADIENT_OPACITY_EXTENT = [0.9, 0.7];
+
+const YearChart = ({ layerId, date, active }: YearChartProps) => {
+  const { parentRef, width } = useParentSize({ ignoreDimensions: ["height"] });
+  const height = useMemo(
+    () => Math.max(Math.min(width / 2.7, CHART_MAX_HEIGHT), CHART_MIN_HEIGHT),
+    [width],
+  );
+
+  const { data, isLoading } = useYearChartData(layerId, date);
+
+  const unitWidth = useMemo(() => {
+    if (isLoading || !data) {
+      return 0;
+    }
+
+    const subtract =
+      data.unit?.split("").reduce((res, char) => {
+        if (char === "˚" || char === "/" || char === " ") {
+          return res - 6;
+        }
+
+        return res;
+      }, Y_AXIS_TICK_WIDTH) ?? Y_AXIS_TICK_WIDTH;
+
+    return (data.unit?.length ?? 0) * 8 + subtract;
+  }, [data, isLoading]);
+
+  const xScale = useMemo(() => {
+    if (isLoading || !data) {
+      return undefined;
+    }
+
+    return scalePoint({
+      range: [0, width - Y_AXIS_WIDTH - X_AXIS_OFFSET_RIGHT - unitWidth],
+      domain: data.data.map(({ x }) => x),
+    });
+  }, [width, data, isLoading, unitWidth]);
+
+  const yScale = useMemo(() => {
+    if (isLoading || !data) {
+      return undefined;
+    }
+
+    return scaleLinear({
+      range: [height - X_AXIS_HEIGHT, Y_AXIS_OFFSET_TOP],
+      domain: extent(data.data.map(({ y }) => y)) as [number, number],
+      nice: Y_AXIS_TICK_COUNT,
+    });
+  }, [height, data, isLoading]);
+
+  const fillColorScale = useMemo(() => {
+    if (isLoading || !data) {
+      return undefined;
+    }
+
+    return scaleLinear({
+      range: data.colorRange,
+      domain: data.colorDomain,
+    }).interpolate(() => piecewise(interpolateRgb, data.colorRange));
+  }, [data, isLoading]);
+
+  const xAxisTickLabelProps = useCallback<
+    NonNullable<Exclude<ComponentProps<typeof AxisBottom>["tickLabelProps"], Partial<TextProps>>>
+  >((tick, index, ticks) => {
+    let textAnchor: ComponentProps<typeof Text>["textAnchor"] = "middle";
+    let dx = 0;
+    if (index === 0) {
+      textAnchor = "start";
+    } else if (index + 1 === ticks.length) {
+      textAnchor = "end";
+      dx = X_AXIS_OFFSET_RIGHT;
+    }
+
+    return {
+      dx,
+      dy: 3.5,
+      textAnchor,
+      className: cn({
+        "text-right font-sans text-[11px] text-rhino-blue-950": true,
+        "invisible sm:visible": index % 2 === 1,
+      }),
+    };
+  }, []);
+
+  const yAxisTickLabelProps = useCallback<
+    NonNullable<Exclude<ComponentProps<typeof AxisLeft>["tickLabelProps"], Partial<TextProps>>>
+  >((tick, index) => {
+    let dy = 3.5;
+    if (index === 0) {
+      dy = 0;
+    }
+
+    return {
+      dx: -4,
+      dy,
+      textAnchor: "end",
+      className: "text-right font-sans text-[11px] text-rhino-blue-950",
+    };
+  }, []);
+
+  const gradientColorStops = useMemo(() => {
+    if (!fillColorScale || !yScale) {
+      return [];
+    }
+
+    const yScaleDomainReversed = yScale.domain().reverse();
+
+    return fillColorScale.range().map((color, index) => {
+      const normalizedIndex = index / (fillColorScale.range().length - 1);
+
+      const stopValue =
+        yScaleDomainReversed[0] +
+        normalizedIndex * (yScaleDomainReversed[1] - yScaleDomainReversed[0]);
+
+      const stopOpacity =
+        GRADIENT_OPACITY_EXTENT[0] -
+        normalizedIndex * (GRADIENT_OPACITY_EXTENT[0] - GRADIENT_OPACITY_EXTENT[1]);
+
+      return {
+        offset: `${normalizedIndex * 100}%`,
+        stopColor: fillColorScale(stopValue),
+        stopOpacity,
+      };
+    });
+  }, [fillColorScale, yScale]);
+
+  return (
+    <div ref={parentRef}>
+      {isLoading && !data && <Skeleton style={{ width: `${width}px`, height: `${height}px` }} />}
+      {!isLoading && !!data && !!xScale && !!yScale && !!fillColorScale && (
+        <svg
+          width={width}
+          height={height}
+          className={cn({
+            "transition-all duration-500": true,
+            grayscale: !active,
+            "grayscale-0": active,
+          })}
+        >
+          <LinearGradient id={`year-chart-gradient-${layerId}`}>
+            {gradientColorStops.map((stop, index) => (
+              <stop key={index} {...stop} />
+            ))}
+          </LinearGradient>
+          <Group left={Y_AXIS_WIDTH}>
+            <GridRows
+              width={width - Y_AXIS_WIDTH - unitWidth}
+              height={height - X_AXIS_HEIGHT - Y_AXIS_OFFSET_TOP}
+              scale={yScale}
+              numTicks={Y_AXIS_TICK_COUNT}
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              stroke={tailwindConfig.theme.colors["casper-blue"]["400"]}
+              strokeOpacity={0.5}
+            />
+            <GridColumns
+              top={Y_AXIS_OFFSET_TOP}
+              width={width - X_AXIS_OFFSET_RIGHT - unitWidth}
+              height={height - X_AXIS_HEIGHT - Y_AXIS_OFFSET_TOP}
+              scale={xScale}
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              stroke={tailwindConfig.theme.colors["casper-blue"]["400"]}
+              strokeOpacity={0.5}
+            />
+            <AreaClosed<(typeof data.data)[0]>
+              data={data.data}
+              x={(d) => xScale(d.x) ?? 0}
+              y={(d) => yScale(d.y) ?? 0}
+              yScale={yScale}
+              fill={`url('#year-chart-gradient-${layerId}')`}
+            />
+            <LinePath
+              data={data.data}
+              x={(d) => xScale(d.x) ?? 0}
+              y={(d) => yScale(d.y) ?? 0}
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              stroke={data.colorRange.slice(-1)[0]}
+              strokeWidth={1}
+            />
+          </Group>
+          <AxisLeft
+            scale={yScale}
+            left={Y_AXIS_WIDTH}
+            tickLength={Y_AXIS_TICK_WIDTH}
+            numTicks={Y_AXIS_TICK_COUNT}
+            tickClassName="[&>line]:stroke-casper-blue-400/50"
+            tickLabelProps={yAxisTickLabelProps}
+            axisLineClassName="opacity-0"
+          />
+          <Group left={Y_AXIS_WIDTH}>
+            {/* This axis serves to extend the grid vertically towards the top */}
+            <AxisTop
+              scale={xScale}
+              top={Y_AXIS_OFFSET_TOP}
+              tickLength={Y_AXIS_OFFSET_TOP}
+              tickComponent={() => null}
+              tickLabelProps={xAxisTickLabelProps}
+              tickClassName="[&>line]:stroke-casper-blue-400/50"
+              axisLineClassName="opacity-0"
+            />
+            <AxisBottom
+              scale={xScale}
+              top={height - X_AXIS_HEIGHT}
+              tickLength={X_AXIS_TICK_HEIGHT}
+              tickLabelProps={xAxisTickLabelProps}
+              tickClassName="[&>line]:stroke-casper-blue-400/50"
+              axisLineClassName="stroke-casper-blue-400/50"
+            />
+            <Line
+              from={{ x: xScale(format(date, "MMM")), y: yScale.range()[1] - Y_AXIS_OFFSET_TOP }}
+              to={{ x: xScale(format(date, "MMM")), y: yScale.range()[0] + X_AXIS_TICK_HEIGHT }}
+              className={cn({
+                "stroke-supernova-yellow-400 stroke-2 transition-opacity duration-500": true,
+                "opacity-0": !active,
+                "opacity-100": active,
+              })}
+            />
+          </Group>
+          <Text
+            x={width}
+            y={Y_AXIS_OFFSET_TOP}
+            dy={5}
+            textAnchor="end"
+            className="text-right font-sans text-[11px] text-rhino-blue-950"
+          >
+            {data.unit}
+          </Text>
+        </svg>
+      )}
+    </div>
+  );
+};
+
+export default YearChart;
diff --git a/client/src/hooks/use-year-chart-data.ts b/client/src/hooks/use-year-chart-data.ts
new file mode 100644
index 0000000..c67d62b
--- /dev/null
+++ b/client/src/hooks/use-year-chart-data.ts
@@ -0,0 +1,102 @@
+import { extent } from "d3-array";
+import { getYear } from "date-fns";
+import { format } from "date-fns/format";
+import { useMemo } from "react";
+
+import useLocation from "@/hooks/use-location";
+import { useGetLayers } from "@/types/generated/layer";
+import { ChartDataLayerDataAttributesChartDataDataItemAttributes } from "@/types/generated/strapi.schemas";
+
+interface YearChartData {
+  data: {
+    x: string;
+    y: number;
+  }[];
+  unit: string | undefined;
+  colorRange: string[];
+  colorDomain: [number, number];
+}
+
+export default function useYearChartData(layerId: number, date: string) {
+  const [location] = useLocation();
+
+  const year = useMemo(() => getYear(date), [date]);
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore-error
+  const { data, isLoading } = useGetLayers<YearChartData>(
+    {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore-error
+      fields: ["chart_unit"],
+      populate: {
+        legend_config: {
+          fields: ["id"],
+          populate: {
+            items: {
+              fields: ["color", "value"],
+            },
+          },
+        },
+        chart_data: {
+          fields: ["x_values", "y_values"],
+          filters: {
+            year: {
+              $eq: year,
+            },
+            location_code: {
+              $eq: location.code.slice(-1)[0],
+            },
+          },
+          "pagination[limit]": 1,
+        },
+      },
+      filters: {
+        id: {
+          $eq: layerId,
+        },
+      },
+      "pagination[limit]": 1,
+    },
+    {
+      query: {
+        placeholderData: { data: [] },
+        select: (data) => {
+          if (!data?.data?.length) {
+            return undefined;
+          }
+
+          const { attributes: layerAttributes } = data.data[0];
+          const legendItems = layerAttributes!.legend_config.items!;
+
+          if (!layerAttributes!.chart_data?.data?.length || !legendItems?.length) {
+            return undefined;
+          }
+
+          const { data: chartData } = layerAttributes!.chart_data;
+          const chartAttributes = chartData[0]
+            .attributes! as ChartDataLayerDataAttributesChartDataDataItemAttributes;
+
+          return {
+            data: (chartAttributes.x_values as number[]).map((x, index) => ({
+              x: format(new Date().setMonth(index), "MMM"),
+              y: (chartAttributes.y_values as number[])[index],
+            })),
+            unit: layerAttributes!.chart_unit,
+            colorRange: legendItems.map(({ color }) => color).filter(Boolean),
+            colorDomain: [
+              Number.isNaN(Number.parseFloat(legendItems[0].value!))
+                ? extent(chartAttributes.y_values as number[])[0]
+                : Number.parseFloat(legendItems[0].value!),
+              Number.isNaN(Number.parseFloat(legendItems.slice(-1)[0].value!))
+                ? extent(chartAttributes.y_values as number[])[1]
+                : Number.parseFloat(legendItems.slice(-1)[0].value!),
+            ],
+          };
+        },
+      },
+    },
+  );
+
+  return { data, isLoading };
+}
diff --git a/client/yarn.lock b/client/yarn.lock
index 8af6b56..aa93444 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -4343,6 +4343,105 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/d3-array@npm:3.0.3":
+  version: 3.0.3
+  resolution: "@types/d3-array@npm:3.0.3"
+  checksum: 10c0/4dddae293e6e16764f8e465539548454b202a0f325f7d1cd0777690c4598bd593b1fb952501421d771204988b1a10393cf062775d2fc23851b0dec96c92eb3a4
+  languageName: node
+  linkType: hard
+
+"@types/d3-color@npm:*":
+  version: 3.1.3
+  resolution: "@types/d3-color@npm:3.1.3"
+  checksum: 10c0/65eb0487de606eb5ad81735a9a5b3142d30bc5ea801ed9b14b77cb14c9b909f718c059f13af341264ee189acf171508053342142bdf99338667cea26a2d8d6ae
+  languageName: node
+  linkType: hard
+
+"@types/d3-color@npm:3.1.0":
+  version: 3.1.0
+  resolution: "@types/d3-color@npm:3.1.0"
+  checksum: 10c0/5b4be21b4b025da9ffd0cef876fb7d82f99116fa26e7ee3449771faf0a953d160246b1ceb2a9bbc7d131e32ab60d7d19013131d098616369a56f9880f25f20ef
+  languageName: node
+  linkType: hard
+
+"@types/d3-delaunay@npm:6.0.1":
+  version: 6.0.1
+  resolution: "@types/d3-delaunay@npm:6.0.1"
+  checksum: 10c0/b03f84560a98e0d08b96095759484de6ebccc4fc137a9114795ece15898ccb67c5b0897ffe1e939658224fe387dd58090b951a2c3ff31c70ec9fe2dddc0df1f9
+  languageName: node
+  linkType: hard
+
+"@types/d3-format@npm:3.0.1":
+  version: 3.0.1
+  resolution: "@types/d3-format@npm:3.0.1"
+  checksum: 10c0/abfb57288fb26899bac98aeb03d652ed73d7074c12c96bb33d2d67ced9869f52f4b3e37579df883fc69a13d970199331a07e67a8bcd9f858efeb4f3a71e36188
+  languageName: node
+  linkType: hard
+
+"@types/d3-geo@npm:3.1.0":
+  version: 3.1.0
+  resolution: "@types/d3-geo@npm:3.1.0"
+  dependencies:
+    "@types/geojson": "npm:*"
+  checksum: 10c0/3745a93439038bb5b0b38facf435f7079812921d46406f5d38deaee59e90084ff742443c7ea0a8446df81a0d81eaf622fe7068cf4117a544bd4aa3b2dc182f88
+  languageName: node
+  linkType: hard
+
+"@types/d3-interpolate@npm:3.0.1":
+  version: 3.0.1
+  resolution: "@types/d3-interpolate@npm:3.0.1"
+  dependencies:
+    "@types/d3-color": "npm:*"
+  checksum: 10c0/1c7577045a4a30dc177bca10980c456a28c9b89b1a5406fe7303824dd9cc898f67f8dafd8e22a7702ca5df12a28a5f48f77d92a9b5d8f1fc0939f33831067114
+  languageName: node
+  linkType: hard
+
+"@types/d3-path@npm:^1, @types/d3-path@npm:^1.0.8":
+  version: 1.0.11
+  resolution: "@types/d3-path@npm:1.0.11"
+  checksum: 10c0/3353fe6c009b1d9e32aa5442787c0a1816120f83c73d6b4ba24d5d7c51472561e664e8541ac672cdca598f8c91879be14d5f7b66fba16f7c06afa45d992c4660
+  languageName: node
+  linkType: hard
+
+"@types/d3-scale@npm:4.0.2":
+  version: 4.0.2
+  resolution: "@types/d3-scale@npm:4.0.2"
+  dependencies:
+    "@types/d3-time": "npm:*"
+  checksum: 10c0/2c21be0a715f104bbc3cbfe648a7a1f0b1ccfb0ec93aad5df0ba1a342dced0bfa19761f5378a8790e9073bd001df176b814390c555984ce0917744d40e8efd3d
+  languageName: node
+  linkType: hard
+
+"@types/d3-shape@npm:^1.3.1":
+  version: 1.3.12
+  resolution: "@types/d3-shape@npm:1.3.12"
+  dependencies:
+    "@types/d3-path": "npm:^1"
+  checksum: 10c0/e4aa0a0bc200d5a50d7f699da0e848a01b37447e92ecc3484eefbed7fcd2bd90dc0adc7e2b7e437f484f69ee91f3ff57c6f97a9853c5467ac53d3c37e78fbac7
+  languageName: node
+  linkType: hard
+
+"@types/d3-time-format@npm:2.1.0":
+  version: 2.1.0
+  resolution: "@types/d3-time-format@npm:2.1.0"
+  checksum: 10c0/46d8c0ce20cfa020e75f5a1a246238b62e5875d15f12419a1e7c3e894139c9aa00d7f45ca31d0776f1163fe75a546cbfdabee65c7ddb9f2571161b3726ad8625
+  languageName: node
+  linkType: hard
+
+"@types/d3-time@npm:*":
+  version: 3.0.3
+  resolution: "@types/d3-time@npm:3.0.3"
+  checksum: 10c0/245a8aadca504df27edf730de502e47a68f16ae795c86b5ca35e7afa91c133aa9ef4d08778f8cf1ed2be732f89a4105ba4b437ce2afbdfd17d3d937b6ba5f568
+  languageName: node
+  linkType: hard
+
+"@types/d3-time@npm:3.0.0":
+  version: 3.0.0
+  resolution: "@types/d3-time@npm:3.0.0"
+  checksum: 10c0/4f900608d5c557b09b38e4b096723af5eb4508a1b32f9afae253fe77a4bcbbe821a14225bab1c2ea36ddbc5c4154ab3563452c6b6eba7a9f48cefad94276e6b5
+  languageName: node
+  linkType: hard
+
 "@types/debug@npm:^4.0.0":
   version: 4.1.12
   resolution: "@types/debug@npm:4.1.12"
@@ -4423,6 +4522,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4.14.172":
+  version: 4.17.13
+  resolution: "@types/lodash@npm:4.17.13"
+  checksum: 10c0/c3d0b7efe7933ac0369b99f2f7bff9240d960680fdb74b41ed4bd1b3ca60cca1e31fe4046d9abbde778f941a41bc2a75eb629abf8659fa6c27b66efbbb0802a9
+  languageName: node
+  linkType: hard
+
 "@types/mapbox-gl@npm:3.4.0, @types/mapbox-gl@npm:>=1.0.0":
   version: 3.4.0
   resolution: "@types/mapbox-gl@npm:3.4.0"
@@ -4754,6 +4860,172 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@visx/axis@npm:3.12.0":
+  version: 3.12.0
+  resolution: "@visx/axis@npm:3.12.0"
+  dependencies:
+    "@types/react": "npm:*"
+    "@visx/group": "npm:3.12.0"
+    "@visx/point": "npm:3.12.0"
+    "@visx/scale": "npm:3.12.0"
+    "@visx/shape": "npm:3.12.0"
+    "@visx/text": "npm:3.12.0"
+    classnames: "npm:^2.3.1"
+    prop-types: "npm:^15.6.0"
+  peerDependencies:
+    react: ^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0
+  checksum: 10c0/42d51ca9c9a3a71b8b5c46f309934e7f16a3969a0402bd332d3510a62118d5b415a3ae10d05272ffe35487be28390998de44839d82992dcafb5e135a30c1a557
+  languageName: node
+  linkType: hard
+
+"@visx/curve@npm:3.12.0":
+  version: 3.12.0
+  resolution: "@visx/curve@npm:3.12.0"
+  dependencies:
+    "@types/d3-shape": "npm:^1.3.1"
+    d3-shape: "npm:^1.0.6"
+  checksum: 10c0/f39fa2f0ea1276d77513de4c620d7957a66d440cbe5e6b270639a3a0b738287c75bd97b641260ea89f37e9dac238cf42405c1d396415dfb38d32ac214c0d15ec
+  languageName: node
+  linkType: hard
+
+"@visx/gradient@npm:3.12.0":
+  version: 3.12.0
+  resolution: "@visx/gradient@npm:3.12.0"
+  dependencies:
+    "@types/react": "npm:*"
+    prop-types: "npm:^15.5.7"
+  peerDependencies:
+    react: ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
+  checksum: 10c0/449e35bbb7b040cc4bbab44bd80f66f4e030801b01b833dd882f64b07900c3a1179e9b82a18d746d5d5aa765def42456af09338cfaf4f7a2fc0ff91cd7066d8d
+  languageName: node
+  linkType: hard
+
+"@visx/grid@npm:3.12.0":
+  version: 3.12.0
+  resolution: "@visx/grid@npm:3.12.0"
+  dependencies:
+    "@types/react": "npm:*"
+    "@visx/curve": "npm:3.12.0"
+    "@visx/group": "npm:3.12.0"
+    "@visx/point": "npm:3.12.0"
+    "@visx/scale": "npm:3.12.0"
+    "@visx/shape": "npm:3.12.0"
+    classnames: "npm:^2.3.1"
+    prop-types: "npm:^15.6.2"
+  peerDependencies:
+    react: ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
+  checksum: 10c0/23cc2f4abd8062ee22d33ae90108b1cd3decf4cba4eafc58c837fcb3bea04ef332752a00a57c290229789dced2902ee9abef092eda856f71525ca88c16a35b20
+  languageName: node
+  linkType: hard
+
+"@visx/group@npm:3.12.0":
+  version: 3.12.0
+  resolution: "@visx/group@npm:3.12.0"
+  dependencies:
+    "@types/react": "npm:*"
+    classnames: "npm:^2.3.1"
+    prop-types: "npm:^15.6.2"
+  peerDependencies:
+    react: ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
+  checksum: 10c0/764e2987ae609ef5f7444870e4981ae280b5ea4fbc1565576225c07697e7fdf0b308e766afad553f11f1422c75a812c2515330c409521460dac74678db5d20bc
+  languageName: node
+  linkType: hard
+
+"@visx/point@npm:3.12.0":
+  version: 3.12.0
+  resolution: "@visx/point@npm:3.12.0"
+  checksum: 10c0/0102b3b7ec00a411db16f2be85a9ee685ed273ecadc35f2aa13a18d3fe476fd03b0c0772c8ce13ccbbd6cdafaf9d550d008e15253022c3f0b5d33540190dbfcd
+  languageName: node
+  linkType: hard
+
+"@visx/responsive@npm:3.12.0":
+  version: 3.12.0
+  resolution: "@visx/responsive@npm:3.12.0"
+  dependencies:
+    "@types/lodash": "npm:^4.14.172"
+    "@types/react": "npm:*"
+    lodash: "npm:^4.17.21"
+    prop-types: "npm:^15.6.1"
+  peerDependencies:
+    react: ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
+  checksum: 10c0/e1179809602b51b62978b4047e3525b5e44210fb958e458bbdb95bd493c0ae06f9f93c078607b6e087ce3517cba18f43914c327ed7a1fef00be66134d7c103b7
+  languageName: node
+  linkType: hard
+
+"@visx/scale@npm:3.12.0":
+  version: 3.12.0
+  resolution: "@visx/scale@npm:3.12.0"
+  dependencies:
+    "@visx/vendor": "npm:3.12.0"
+  checksum: 10c0/b6c42eb86a6704e975186339aeaa81d3cd0e6e7ea59325a8f9723bf4c39ae34455300a13867d4807af91ef65ec65936837597d0fe9a734501cd4c2fe6ca060c9
+  languageName: node
+  linkType: hard
+
+"@visx/shape@npm:3.12.0":
+  version: 3.12.0
+  resolution: "@visx/shape@npm:3.12.0"
+  dependencies:
+    "@types/d3-path": "npm:^1.0.8"
+    "@types/d3-shape": "npm:^1.3.1"
+    "@types/lodash": "npm:^4.14.172"
+    "@types/react": "npm:*"
+    "@visx/curve": "npm:3.12.0"
+    "@visx/group": "npm:3.12.0"
+    "@visx/scale": "npm:3.12.0"
+    classnames: "npm:^2.3.1"
+    d3-path: "npm:^1.0.5"
+    d3-shape: "npm:^1.2.0"
+    lodash: "npm:^4.17.21"
+    prop-types: "npm:^15.5.10"
+  peerDependencies:
+    react: ^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0
+  checksum: 10c0/2e19c0816ad66130b058cb4d77d23a11c6b8bd8908e474b543450a882dcd4ed449c2970984bbcfc27b0084345e78189f5207fcb3221be1a79184661a485c7b1a
+  languageName: node
+  linkType: hard
+
+"@visx/text@npm:3.12.0":
+  version: 3.12.0
+  resolution: "@visx/text@npm:3.12.0"
+  dependencies:
+    "@types/lodash": "npm:^4.14.172"
+    "@types/react": "npm:*"
+    classnames: "npm:^2.3.1"
+    lodash: "npm:^4.17.21"
+    prop-types: "npm:^15.7.2"
+    reduce-css-calc: "npm:^1.3.0"
+  peerDependencies:
+    react: ^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0
+  checksum: 10c0/f3a7929392460c40ca2c900d0b242985855ca608d86c25491b5c2db423371a8f5d092081e90e5472ba90292c15e3e7704fd6b6174d10cace810a04fc929d5ca5
+  languageName: node
+  linkType: hard
+
+"@visx/vendor@npm:3.12.0":
+  version: 3.12.0
+  resolution: "@visx/vendor@npm:3.12.0"
+  dependencies:
+    "@types/d3-array": "npm:3.0.3"
+    "@types/d3-color": "npm:3.1.0"
+    "@types/d3-delaunay": "npm:6.0.1"
+    "@types/d3-format": "npm:3.0.1"
+    "@types/d3-geo": "npm:3.1.0"
+    "@types/d3-interpolate": "npm:3.0.1"
+    "@types/d3-scale": "npm:4.0.2"
+    "@types/d3-time": "npm:3.0.0"
+    "@types/d3-time-format": "npm:2.1.0"
+    d3-array: "npm:3.2.1"
+    d3-color: "npm:3.1.0"
+    d3-delaunay: "npm:6.0.2"
+    d3-format: "npm:3.1.0"
+    d3-geo: "npm:3.1.0"
+    d3-interpolate: "npm:3.0.1"
+    d3-scale: "npm:4.0.2"
+    d3-time: "npm:3.1.0"
+    d3-time-format: "npm:4.1.0"
+    internmap: "npm:2.0.3"
+  checksum: 10c0/dd6059e0710b93c59c6ead75887b865af96500581a753f01a8eff73edd8d575fbff1cfab28c3ac7cf47baea15a582da72c1f156f946b67bd02418103b4e6f45a
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:^2.0.0":
   version: 2.0.0
   resolution: "abbrev@npm:2.0.0"
@@ -5229,6 +5501,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"balanced-match@npm:^0.4.2":
+  version: 0.4.2
+  resolution: "balanced-match@npm:0.4.2"
+  checksum: 10c0/cd4e15add0f4ef14c4fe960d9f4a343052d7c0f7939e1b5e54c8f24417a501bde1f17e191b676daebd16ae316955c918f93b8ed0414bb03d038dd0159c9998e5
+  languageName: node
+  linkType: hard
+
 "balanced-match@npm:^1.0.0":
   version: 1.0.2
   resolution: "balanced-match@npm:1.0.2"
@@ -5576,6 +5855,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"classnames@npm:^2.3.1":
+  version: 2.5.1
+  resolution: "classnames@npm:2.5.1"
+  checksum: 10c0/afff4f77e62cea2d79c39962980bf316bacb0d7c49e13a21adaadb9221e1c6b9d3cdb829d8bb1b23c406f4e740507f37e1dcf506f7e3b7113d17c5bab787aa69
+  languageName: node
+  linkType: hard
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -5632,6 +5918,13 @@ __metadata:
     "@types/react-dom": "npm:18.3.1"
     "@typescript-eslint/eslint-plugin": "npm:8.9.0"
     "@typescript-eslint/parser": "npm:8.9.0"
+    "@visx/axis": "npm:3.12.0"
+    "@visx/gradient": "npm:3.12.0"
+    "@visx/grid": "npm:3.12.0"
+    "@visx/responsive": "npm:3.12.0"
+    "@visx/scale": "npm:3.12.0"
+    "@visx/shape": "npm:3.12.0"
+    "@visx/text": "npm:3.12.0"
     apng-js: "npm:1.1.4"
     axios: "npm:1.7.7"
     class-variance-authority: "npm:0.7.0"
@@ -5954,6 +6247,112 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-array@npm:2 - 3, d3-array@npm:2.10.0 - 3, d3-array@npm:2.5.0 - 3":
+  version: 3.2.4
+  resolution: "d3-array@npm:3.2.4"
+  dependencies:
+    internmap: "npm:1 - 2"
+  checksum: 10c0/08b95e91130f98c1375db0e0af718f4371ccacef7d5d257727fe74f79a24383e79aba280b9ffae655483ffbbad4fd1dec4ade0119d88c4749f388641c8bf8c50
+  languageName: node
+  linkType: hard
+
+"d3-array@npm:3.2.1":
+  version: 3.2.1
+  resolution: "d3-array@npm:3.2.1"
+  dependencies:
+    internmap: "npm:1 - 2"
+  checksum: 10c0/91c6d739c7762ffcd31177b3fffc7aac75921fa9924e713a7048a0153fd95aae19b4dc5b3f72dd5a0ddafac245d66c0adec8c43cb166d5c19d3f61d92a53f733
+  languageName: node
+  linkType: hard
+
+"d3-color@npm:1 - 3, d3-color@npm:3.1.0":
+  version: 3.1.0
+  resolution: "d3-color@npm:3.1.0"
+  checksum: 10c0/a4e20e1115fa696fce041fbe13fbc80dc4c19150fa72027a7c128ade980bc0eeeba4bcf28c9e21f0bce0e0dbfe7ca5869ef67746541dcfda053e4802ad19783c
+  languageName: node
+  linkType: hard
+
+"d3-delaunay@npm:6.0.2":
+  version: 6.0.2
+  resolution: "d3-delaunay@npm:6.0.2"
+  dependencies:
+    delaunator: "npm:5"
+  checksum: 10c0/57d21902577a63fd9ab732f082e4e45f13f41f01cea8148ef24e7cd9414644f42cd3e0194d7acd8c0209707feb7aaf74688bd2a007f34a4c7b0fd5e877493b79
+  languageName: node
+  linkType: hard
+
+"d3-format@npm:1 - 3, d3-format@npm:3.1.0":
+  version: 3.1.0
+  resolution: "d3-format@npm:3.1.0"
+  checksum: 10c0/049f5c0871ebce9859fc5e2f07f336b3c5bfff52a2540e0bac7e703fce567cd9346f4ad1079dd18d6f1e0eaa0599941c1810898926f10ac21a31fd0a34b4aa75
+  languageName: node
+  linkType: hard
+
+"d3-geo@npm:3.1.0":
+  version: 3.1.0
+  resolution: "d3-geo@npm:3.1.0"
+  dependencies:
+    d3-array: "npm:2.5.0 - 3"
+  checksum: 10c0/5b0a26d232787ca9e824a660827c28626a51004328dde7c76a1bd300d3cad8c7eeb55fea64c8cd6495d5a34fea434fb1418d59926a6cb24e6fb6e2b6f62c6bd9
+  languageName: node
+  linkType: hard
+
+"d3-interpolate@npm:1.2.0 - 3, d3-interpolate@npm:3.0.1":
+  version: 3.0.1
+  resolution: "d3-interpolate@npm:3.0.1"
+  dependencies:
+    d3-color: "npm:1 - 3"
+  checksum: 10c0/19f4b4daa8d733906671afff7767c19488f51a43d251f8b7f484d5d3cfc36c663f0a66c38fe91eee30f40327443d799be17169f55a293a3ba949e84e57a33e6a
+  languageName: node
+  linkType: hard
+
+"d3-path@npm:1, d3-path@npm:^1.0.5":
+  version: 1.0.9
+  resolution: "d3-path@npm:1.0.9"
+  checksum: 10c0/e35e84df5abc18091f585725b8235e1fa97efc287571585427d3a3597301e6c506dea56b11dfb3c06ca5858b3eb7f02c1bf4f6a716aa9eade01c41b92d497eb5
+  languageName: node
+  linkType: hard
+
+"d3-scale@npm:4.0.2":
+  version: 4.0.2
+  resolution: "d3-scale@npm:4.0.2"
+  dependencies:
+    d3-array: "npm:2.10.0 - 3"
+    d3-format: "npm:1 - 3"
+    d3-interpolate: "npm:1.2.0 - 3"
+    d3-time: "npm:2.1.1 - 3"
+    d3-time-format: "npm:2 - 4"
+  checksum: 10c0/65d9ad8c2641aec30ed5673a7410feb187a224d6ca8d1a520d68a7d6eac9d04caedbff4713d1e8545be33eb7fec5739983a7ab1d22d4e5ad35368c6729d362f1
+  languageName: node
+  linkType: hard
+
+"d3-shape@npm:^1.0.6, d3-shape@npm:^1.2.0":
+  version: 1.3.7
+  resolution: "d3-shape@npm:1.3.7"
+  dependencies:
+    d3-path: "npm:1"
+  checksum: 10c0/548057ce59959815decb449f15632b08e2a1bdce208f9a37b5f98ec7629dda986c2356bc7582308405ce68aedae7d47b324df41507404df42afaf352907577ae
+  languageName: node
+  linkType: hard
+
+"d3-time-format@npm:2 - 4, d3-time-format@npm:4.1.0":
+  version: 4.1.0
+  resolution: "d3-time-format@npm:4.1.0"
+  dependencies:
+    d3-time: "npm:1 - 3"
+  checksum: 10c0/735e00fb25a7fd5d418fac350018713ae394eefddb0d745fab12bbff0517f9cdb5f807c7bbe87bb6eeb06249662f8ea84fec075f7d0cd68609735b2ceb29d206
+  languageName: node
+  linkType: hard
+
+"d3-time@npm:1 - 3, d3-time@npm:2.1.1 - 3, d3-time@npm:3.1.0":
+  version: 3.1.0
+  resolution: "d3-time@npm:3.1.0"
+  dependencies:
+    d3-array: "npm:2 - 3"
+  checksum: 10c0/a984f77e1aaeaa182679b46fbf57eceb6ebdb5f67d7578d6f68ef933f8eeb63737c0949991618a8d29472dbf43736c7d7f17c452b2770f8c1271191cba724ca1
+  languageName: node
+  linkType: hard
+
 "damerau-levenshtein@npm:^1.0.8":
   version: 1.0.8
   resolution: "damerau-levenshtein@npm:1.0.8"
@@ -6123,6 +6522,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"delaunator@npm:5":
+  version: 5.0.1
+  resolution: "delaunator@npm:5.0.1"
+  dependencies:
+    robust-predicates: "npm:^3.0.2"
+  checksum: 10c0/3d7ea4d964731c5849af33fec0a271bc6753487b331fd7d43ccb17d77834706e1c383e6ab8fda0032da955e7576d1083b9603cdaf9cbdfd6b3ebd1fb8bb675a5
+  languageName: node
+  linkType: hard
+
 "delayed-stream@npm:~1.0.0":
   version: 1.0.0
   resolution: "delayed-stream@npm:1.0.0"
@@ -7977,6 +8385,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"internmap@npm:1 - 2, internmap@npm:2.0.3":
+  version: 2.0.3
+  resolution: "internmap@npm:2.0.3"
+  checksum: 10c0/8cedd57f07bbc22501516fbfc70447f0c6812871d471096fad9ea603516eacc2137b633633daf432c029712df0baefd793686388ddf5737e3ea15074b877f7ed
+  languageName: node
+  linkType: hard
+
 "invariant@npm:^2.2.4":
   version: 2.2.4
   resolution: "invariant@npm:2.2.4"
@@ -8950,6 +9365,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"math-expression-evaluator@npm:^1.2.14":
+  version: 1.4.0
+  resolution: "math-expression-evaluator@npm:1.4.0"
+  checksum: 10c0/e90ee90026d53aeb80596046442e562a469b65b9e5f877dd0280d481478615b96d9de0049a7bc9cfbe97cf2147b2619300c54294f0967ca7d9e462ce0a678cc5
+  languageName: node
+  linkType: hard
+
 "md5@npm:^2.3.0":
   version: 2.3.0
   resolution: "md5@npm:2.3.0"
@@ -10546,7 +10968,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.5.10, prop-types@npm:^15.5.7, prop-types@npm:^15.6.0, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -10844,6 +11266,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"reduce-css-calc@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "reduce-css-calc@npm:1.3.0"
+  dependencies:
+    balanced-match: "npm:^0.4.2"
+    math-expression-evaluator: "npm:^1.2.14"
+    reduce-function-call: "npm:^1.0.1"
+  checksum: 10c0/c0b192bbdc7617ee7e3bcd09332f7f810c2b52f1da8521c4eda03879ead00bcca65bcae78d5bc8cd925610f776532a3457e8b2fd8f4bb936bdb40f057590f20d
+  languageName: node
+  linkType: hard
+
+"reduce-function-call@npm:^1.0.1":
+  version: 1.0.3
+  resolution: "reduce-function-call@npm:1.0.3"
+  dependencies:
+    balanced-match: "npm:^1.0.0"
+  checksum: 10c0/7e844708d8c3d2946d3df5c537ee1e23c3c60c98ac0dbc724828f36d8d309c391a14995f47ce4f5ba84eea2df5c73d58e4ba100ba331af496920932421a322ed
+  languageName: node
+  linkType: hard
+
 "reflect.getprototypeof@npm:^1.0.4":
   version: 1.0.6
   resolution: "reflect.getprototypeof@npm:1.0.6"
@@ -11081,6 +11523,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"robust-predicates@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "robust-predicates@npm:3.0.2"
+  checksum: 10c0/4ecd53649f1c2d49529c85518f2fa69ffb2f7a4453f7fd19c042421c7b4d76c3efb48bc1c740c8f7049346d7cb58cf08ee0c9adaae595cc23564d360adb1fde4
+  languageName: node
+  linkType: hard
+
 "run-parallel@npm:^1.1.9":
   version: 1.2.0
   resolution: "run-parallel@npm:1.2.0"

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 2/2] 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) {