Merge pull request #2411 from visualize-admin/fix/most-recent-interactive-value

fix: Most recent interactive value

Author: bprusinowski

CHANGELOG.md

@@ -14,6 +14,7 @@ You can also check the
 - Fixes
   - Chart more button is now correctly hidden when there are no actions
     available
+  - Most recent value is now correctly resolved in interactive filters
 
 # 5.9.0 - 2025-07-28
 

app/charts/shared/chart-data-filters.tsx

@@ -58,6 +58,7 @@ import {
 } from "@/stores/interactive-filters";
 import { assert } from "@/utils/assert";
 import { hierarchyToOptions } from "@/utils/hierarchy";
+import { useResolveMostRecentValue } from "@/utils/most-recent-value";
 import { useEvent } from "@/utils/use-event";
 
 type PreparedFilter = {
@@ -320,18 +321,29 @@ const DataFilter = ({
       ? configFilter.value
       : undefined;
   const dataFilterValue = dimension ? dataFilters[dimension.id]?.value : null;
-  const value = dataFilterValue ?? configFilterValue ?? FIELD_VALUE_NONE;
+
+  const resolvedDataFilterValue = useResolveMostRecentValue(
+    dataFilterValue,
+    dimension
+  );
+  const resolvedConfigFilterValue = useResolveMostRecentValue(
+    configFilterValue,
+    dimension
+  );
+  const value =
+    resolvedDataFilterValue ?? resolvedConfigFilterValue ?? FIELD_VALUE_NONE;
 
   useEffect(() => {
     const values = dimension?.values.map((d) => d.value) ?? [];
 
     // We only want to disable loading state when the filter is actually valid.
     // It can be invalid when the application is ensuring possible filters.
     if (
-      (dataFilterValue && values.includes(dataFilterValue)) ||
-      dataFilterValue === FIELD_VALUE_NONE
+      (resolvedDataFilterValue && values.includes(resolvedDataFilterValue)) ||
+      resolvedDataFilterValue === FIELD_VALUE_NONE
     ) {
-      updateDataFilter(dimensionId, dataFilterValue);
+      updateDataFilter(dimensionId, resolvedDataFilterValue);
+
       chartLoadingState.set(`interactive-filter-${dimensionId}`, fetching);
     } else if (fetching || values.length === 0) {
       chartLoadingState.set(`interactive-filter-${dimensionId}`, fetching);
@@ -345,6 +357,7 @@ const DataFilter = ({
     setDataFilter,
     configFilterValue,
     updateDataFilter,
+    resolvedDataFilterValue,
   ]);
 
   return dimension ? (

app/utils/most-recent-value.spec.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest";
+
+import { VISUALIZE_MOST_RECENT_VALUE } from "@/domain/most-recent-value";
+import { resolveMostRecentValue } from "@/utils/most-recent-value";
+
+describe("resolveMostRecentValue", () => {
+  it("should return the value when not VISUALIZE_MOST_RECENT_VALUE", () => {
+    const result = resolveMostRecentValue("test-value", undefined);
+    expect(result).toBe("test-value");
+  });
+
+  it("should return VISUALIZE_MOST_RECENT_VALUE when dimension is undefined", () => {
+    const result = resolveMostRecentValue(
+      VISUALIZE_MOST_RECENT_VALUE,
+      undefined
+    );
+    expect(result).toBe(VISUALIZE_MOST_RECENT_VALUE);
+  });
+
+  it("should return VISUALIZE_MOST_RECENT_VALUE when dimension has no values", () => {
+    const dimension = { values: [] };
+    const result = resolveMostRecentValue(
+      VISUALIZE_MOST_RECENT_VALUE,
+      dimension as any
+    );
+    expect(result).toBe(VISUALIZE_MOST_RECENT_VALUE);
+  });
+
+  it("should return the last sorted value when dimension has values", () => {
+    const dimension = {
+      values: [
+        { value: "2020", label: "2020" },
+        { value: "2022", label: "2022" },
+        { value: "2021", label: "2021" },
+      ],
+    };
+    const result = resolveMostRecentValue(
+      VISUALIZE_MOST_RECENT_VALUE,
+      dimension as any
+    );
+    expect(result).toBe("2022");
+  });
+});

app/utils/most-recent-value.ts

@@ -0,0 +1,30 @@
+import orderBy from "lodash/orderBy";
+import { useMemo } from "react";
+
+import { Dimension, DimensionValue } from "@/domain/data";
+import { VISUALIZE_MOST_RECENT_VALUE } from "@/domain/most-recent-value";
+import { makeDimensionValueSorters } from "@/utils/sorting-values";
+
+export const resolveMostRecentValue = (
+  value: DimensionValue["value"] | null | undefined,
+  dimension: Dimension | undefined
+) => {
+  if (value === VISUALIZE_MOST_RECENT_VALUE && dimension?.values.length) {
+    const sorters = makeDimensionValueSorters(dimension);
+    const sortedValues = orderBy(
+      dimension.values,
+      sorters.map((s) => (dv) => s(dv.label))
+    );
+    return sortedValues[sortedValues.length - 1]?.value;
+  }
+  return value;
+};
+
+export const useResolveMostRecentValue = (
+  value: DimensionValue["value"] | null | undefined,
+  dimension: Dimension | undefined
+) => {
+  return useMemo(() => {
+    return resolveMostRecentValue(value, dimension);
+  }, [value, dimension]);
+};