feat: Reset time slider iri when the same dim is mapped to X field

visualize-admin · Nov 3, 2022 · f883636 · f883636
1 parent e9dea77
commit f883636
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 35 deletions.
diff --git a/app/charts/shared/use-sync-interactive-filters.spec.tsx b/app/charts/shared/use-sync-interactive-filters.spec.tsx
@@ -7,35 +7,68 @@ import {
   useInteractiveFilters,
 } from "@/charts/shared/use-interactive-filters";
 import useSyncInteractiveFilters from "@/charts/shared/use-sync-interactive-filters";
-import { ChartConfig } from "@/configurator";
+import {
+  ChartConfig,
+  ConfiguratorStateConfiguringChart,
+  InteractiveFiltersConfig,
+} from "@/configurator/config-types";
 import fixture from "@/test/__fixtures/config/dev/4YL1p4QTFQS4.json";
+const { handleInteractiveFilterChanged } = jest.requireActual(
+  "@/configurator/configurator-state"
+);
 
-const chartConfig = {
-  ...fixture.data.chartConfig,
-  interactiveFiltersConfig: {
-    legend: {
-      componentIri: "https://fake-iri/dimension/0",
-      active: false,
-    },
-    dataFilters: {
-      active: true,
-      componentIris: [
-        "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/1",
-      ],
-    },
-    timeSlider: {
-      componentIri: "",
-    },
-    timeRange: {
-      active: false,
-      componentIri: "https://fake-iri/dimension/2",
-      presets: {
-        type: "range",
-        from: "2021-01-01",
-        to: "2021-01-12",
-      },
+const interactiveFiltersConfig: InteractiveFiltersConfig = {
+  legend: {
+    componentIri: "https://fake-iri/dimension/0",
+    active: false,
+  },
+  dataFilters: {
+    active: true,
+    componentIris: [
+      "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/1",
+    ],
+  },
+  timeSlider: {
+    componentIri:
+      "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/0",
+  },
+  timeRange: {
+    active: false,
+    componentIri: "https://fake-iri/dimension/2",
+    presets: {
+      type: "range",
+      from: "2021-01-01",
+      to: "2021-01-12",
     },
   },
+};
+
+const configuratorState = {
+  state: "CONFIGURING_CHART",
+  chartConfig: {
+    interactiveFiltersConfig,
+  },
+} as unknown as ConfiguratorStateConfiguringChart;
+
+jest.mock("@/configurator/configurator-state", () => {
+  return {
+    useConfiguratorState: () => {
+      return [
+        configuratorState,
+        (action: {
+          type: "INTERACTIVE_FILTER_CHANGED";
+          value: InteractiveFiltersConfig;
+        }) => {
+          handleInteractiveFilterChanged(configuratorState, action);
+        },
+      ];
+    },
+  };
+});
+
+const chartConfig = {
+  ...fixture.data.chartConfig,
+  interactiveFiltersConfig,
 } as ChartConfig;
 
 const setup = ({
@@ -47,6 +80,7 @@ const setup = ({
     const [ifstate] = useInteractiveFilters();
     const [useModified, setUseModified] = useState(false);
     useSyncInteractiveFilters(useModified ? modifiedChartConfig : chartConfig);
+
     return (
       <div>
         <button
@@ -110,5 +144,11 @@ describe("useSyncInteractiveFilters", () => {
       value:
         "http://environment.ld.admin.ch/foen/px/0703010000_103/dimension/1/1",
     });
+
+    expect(
+      configuratorState.chartConfig.interactiveFiltersConfig?.timeSlider
+        .componentIri
+    ).toEqual("");
+    expect(IFState2.timeSlider.value).toBeUndefined();
   });
 });
diff --git a/app/charts/shared/use-sync-interactive-filters.tsx b/app/charts/shared/use-sync-interactive-filters.tsx
@@ -5,11 +5,15 @@ import { parseDate } from "@/configurator/components/ui-helpers";
 import {
   ChartConfig,
   FilterValueSingle,
+  InteractiveFiltersConfig,
   isSegmentInConfig,
 } from "@/configurator/config-types";
+import { useConfiguratorState } from "@/configurator/configurator-state";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import useFilterChanges from "@/configurator/use-filter-changes";
 
+import { getFieldComponentIri } from "..";
+
 /**
  * Makes sure interactive filters are in sync with chart config.
  *
@@ -19,6 +23,7 @@ import useFilterChanges from "@/configurator/use-filter-changes";
  */
 const useSyncInteractiveFilters = (chartConfig: ChartConfig) => {
   const [IFstate, dispatch] = useInteractiveFilters();
+  const [_, dispatchConfigurator] = useConfiguratorState();
   const { interactiveFiltersConfig } = chartConfig;
 
   // Time range filter
@@ -44,14 +49,35 @@ const useSyncInteractiveFilters = (chartConfig: ChartConfig) => {
 
   // Time slider filter
   const timeSliderFilter = interactiveFiltersConfig?.timeSlider;
+  const xComponentIri = getFieldComponentIri(chartConfig.fields, "x");
   useEffect(() => {
     if (
       timeSliderFilter?.componentIri === "" &&
       IFstate.timeSlider.value !== undefined
     ) {
       dispatch({ type: "RESET_TIME_SLIDER_FILTER" });
     }
-  }, [IFstate.timeSlider.value, timeSliderFilter?.componentIri, dispatch]);
+
+    if (
+      xComponentIri !== undefined &&
+      xComponentIri === timeSliderFilter?.componentIri
+    ) {
+      dispatchConfigurator({
+        type: "INTERACTIVE_FILTER_CHANGED",
+        value: {
+          ...interactiveFiltersConfig,
+          timeSlider: { componentIri: "" },
+        } as InteractiveFiltersConfig,
+      });
+    }
+  }, [
+    IFstate.timeSlider.value,
+    timeSliderFilter?.componentIri,
+    dispatch,
+    dispatchConfigurator,
+    interactiveFiltersConfig,
+    xComponentIri,
+  ]);
 
   // Data Filters
   const componentIris = interactiveFiltersConfig?.dataFilters.componentIris;

diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
@@ -1054,6 +1054,28 @@ export const updateColorMapping = (
   return draft;
 };
 
+export const handleInteractiveFilterChanged = (
+  draft: ConfiguratorState,
+  action: Extract<
+    ConfiguratorStateAction,
+    { type: "INTERACTIVE_FILTER_CHANGED" }
+  >
+) => {
+  if (
+    draft.state === "CONFIGURING_CHART" ||
+    draft.state === "DESCRIBING_CHART"
+  ) {
+    setWith(
+      draft,
+      "chartConfig.interactiveFiltersConfig",
+      action.value,
+      Object
+    );
+  }
+
+  return draft;
+};
+
 const reducer: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
   draft,
   action
@@ -1195,15 +1217,7 @@ const reducer: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
       return draft;
 
     case "INTERACTIVE_FILTER_CHANGED":
-      if (draft.state === "DESCRIBING_CHART") {
-        setWith(
-          draft,
-          `chartConfig.interactiveFiltersConfig`,
-          action.value,
-          Object
-        );
-      }
-      return draft;
+      return handleInteractiveFilterChanged(draft, action);
 
     case "CHART_CONFIG_REPLACED":
       if (draft.state === "CONFIGURING_CHART") {