Merge pull request #1066 from visualize-admin/fix/interactive-filters…

…-issues

fix: Interactive filters issues

app/charts/index.spec.ts

@@ -1,10 +1,15 @@
-import { TableFields } from "@/configurator";
+import { ColumnConfig, TableFields } from "@/configurator";
 import { ComponentsQuery } from "@/graphql/query-hooks";
+import { DataCubeMetadata } from "@/graphql/types";
 
 import bathingWaterData from "../test/__fixtures/data/DataCubeMetadataWithComponentValues-bathingWater.json";
 import forestAreaData from "../test/__fixtures/data/forest-area-by-production-region.json";
 
-import { getInitialConfig, getPossibleChartType } from "./index";
+import {
+  getChartConfigAdjustedToChartType,
+  getInitialConfig,
+  getPossibleChartType,
+} from "./index";
 
 describe("initial config", () => {
   it("should create an initial table config with column order based on dimension order", () => {
@@ -17,6 +22,7 @@ describe("initial config", () => {
         ComponentsQuery["dataCubeByIri"]
       >["measures"],
     });
+
     expect(
       Object.values(config.fields as TableFields).map((x) => [
         x["componentIri"],
@@ -68,3 +74,58 @@ describe("possible chart types", () => {
     expect(possibleChartTypes).toEqual(["column", "map", "pie", "table"]);
   });
 });
+
+describe("chart type switch", () => {
+  it("should correctly remove non-allowed interactive data filters", () => {
+    const chartConfig: ColumnConfig = {
+      version: "1.4.0",
+      chartType: "column",
+      filters: {},
+      fields: {
+        x: {
+          componentIri:
+            "https://environment.ld.admin.ch/foen/ubd0104/parametertype",
+        },
+        y: {
+          componentIri: "https://environment.ld.admin.ch/foen/ubd0104/value",
+        },
+      },
+      interactiveFiltersConfig: {
+        legend: {
+          active: false,
+          componentIri: "",
+        },
+        timeRange: {
+          active: false,
+          componentIri: "",
+          presets: {
+            type: "range",
+            from: "",
+            to: "",
+          },
+        },
+        dataFilters: {
+          active: true,
+          componentIris: [
+            "https://environment.ld.admin.ch/foen/ubd0104/dateofprobing",
+          ],
+        },
+      },
+    };
+    const newConfig = getChartConfigAdjustedToChartType({
+      chartConfig,
+      newChartType: "line",
+      dimensions: bathingWaterData.data.dataCubeByIri
+        .dimensions as DataCubeMetadata["dimensions"],
+      measures: bathingWaterData.data.dataCubeByIri
+        .measures as DataCubeMetadata["measures"],
+    });
+
+    expect(newConfig.interactiveFiltersConfig?.dataFilters.active).toEqual(
+      false
+    );
+    expect(
+      newConfig.interactiveFiltersConfig?.dataFilters.componentIris
+    ).toEqual([]);
+  });
+});

app/charts/index.ts

@@ -471,6 +471,7 @@ const getAdjustedChartConfig = ({
         case "filters":
         case "fields.segment":
         case "fields.animation":
+        case "interactiveFiltersConfig.dataFilters":
         case "interactiveFiltersConfig.legend":
           return true;
         default:
@@ -525,7 +526,7 @@ const interactiveFiltersAdjusters: InteractiveFiltersAdjusters = {
 
     return newChartConfig;
   },
-  time: {
+  timeRange: {
     active: ({ oldValue, newChartConfig }) => {
       return produce(newChartConfig, (draft) => {
         if (draft.interactiveFiltersConfig) {
@@ -564,21 +565,29 @@ const interactiveFiltersAdjusters: InteractiveFiltersAdjusters = {
       },
     },
   },
-  dataFilters: {
-    active: ({ oldValue, newChartConfig }) => {
-      return produce(newChartConfig, (draft) => {
-        if (draft.interactiveFiltersConfig) {
-          draft.interactiveFiltersConfig.dataFilters.active = oldValue;
-        }
-      });
-    },
-    componentIris: ({ oldValue, newChartConfig }) => {
-      return produce(newChartConfig, (draft) => {
-        if (draft.interactiveFiltersConfig) {
-          draft.interactiveFiltersConfig.dataFilters.componentIris = oldValue;
+  dataFilters: ({ oldValue, newChartConfig }) => {
+    return produce(newChartConfig, (draft) => {
+      if (draft.interactiveFiltersConfig) {
+        const oldComponentIris = oldValue.componentIris ?? [];
+
+        if (oldComponentIris.length > 0) {
+          const fieldComponentIris = Object.values(draft.fields).map(
+            (d) => d.componentIri
+          );
+          // Remove componentIris that are not in the new chart config, as they
+          // can't be used as interactive data filters then.
+          const validComponentIris = oldComponentIris.filter(
+            (d) => !fieldComponentIris.includes(d)
+          );
+          draft.interactiveFiltersConfig.dataFilters.active =
+            validComponentIris.length > 0;
+          draft.interactiveFiltersConfig.dataFilters.componentIris =
+            validComponentIris;
+        } else {
+          draft.interactiveFiltersConfig.dataFilters = oldValue;
         }
-      });
-    },
+      }
+    });
   },
 };
 

app/charts/line/lines-state.tsx

@@ -185,14 +185,14 @@ const useLinesState = (
   const xScale = scaleTime().domain(xDomain);
 
   const xEntireDomain = useMemo(
-    () => extent(scalesData, (d) => getX(d)) as [Date, Date],
-    [scalesData, getX]
+    () => extent(plottableSortedData, (d) => getX(d)) as [Date, Date],
+    [plottableSortedData, getX]
   );
   const xEntireScale = scaleTime().domain(xEntireDomain);
-
   const xAxisLabel =
     measures.find((d) => d.iri === fields.x.componentIri)?.label ??
     fields.x.componentIri;
+
   // y
   const minValue = Math.min(min(scalesData, getY) ?? 0, 0);
   const maxValue = max(scalesData, getY) ?? 0;

app/charts/shared/brush.tsx

@@ -112,7 +112,7 @@ export const BrushTime = () => {
     if (from && to) {
       return getClosestObservationFromRangeDates([from, to]);
     } else {
-      return [brushWidthScale.domain()[0], brushWidthScale.domain()[1]];
+      return brushWidthScale.domain();
     }
   }, [from, getClosestObservationFromRangeDates, to, brushWidthScale]);
 
@@ -123,7 +123,6 @@ export const BrushTime = () => {
       const [xStart, xEnd] = selection.map((s) => brushWidthScale.invert(s));
       const newDates = getClosestObservationFromRangeDates([xStart, xEnd]);
 
-      // Update interactive filters state
       dispatch({
         type: "SET_TIME_RANGE_FILTER",
         value: newDates,
@@ -145,14 +144,14 @@ export const BrushTime = () => {
       if (!event.sourceEvent) {
         updateBrushEndedStatus(false);
       } else {
-        if (!event.selection) {
+        if (!event.selection && ref.current) {
           // End event fires twice on touchend (MouseEvent and TouchEvent),
           // we want to compute mx basing on MouseEvent.
           if (event.sourceEvent instanceof MouseEvent) {
             const g = select(ref.current);
             const [mx] = pointer(event, this);
             const x = mx < 0 ? 0 : mx > brushWidth ? brushWidth : mx;
-            g.call(brush.move as any, [x, x]);
+            g.call(brush.move, [x, x]);
           }
         }
 

app/configurator/config-types.ts

@@ -680,9 +680,18 @@ export type FieldAdjuster<
   measures: DataCubeMetadata["measures"];
 }) => NewChartConfigType;
 
-export type InteractiveFiltersAdjusters = {
+type AssureKeys<T, U extends { [K in keyof T]: unknown }> = {
+  [K in keyof T]: U[K];
+};
+
+export type InteractiveFiltersAdjusters = AssureKeys<
+  InteractiveFiltersConfig,
+  _InteractiveFiltersAdjusters
+>;
+
+type _InteractiveFiltersAdjusters = {
   legend: FieldAdjuster<ChartConfig, InteractiveFiltersLegend>;
-  time: {
+  timeRange: {
     active: FieldAdjuster<ChartConfig, boolean>;
     componentIri: FieldAdjuster<ChartConfig, string>;
     presets: {
@@ -691,10 +700,7 @@ export type InteractiveFiltersAdjusters = {
       to: FieldAdjuster<ChartConfig, string>;
     };
   };
-  dataFilters: {
-    active: FieldAdjuster<ChartConfig, boolean>;
-    componentIris: FieldAdjuster<ChartConfig, string[]>;
-  };
+  dataFilters: FieldAdjuster<ChartConfig, InteractiveFiltersDataConfig>;
 };
 
 type BaseAdjusters<NewChartConfigType extends ChartConfig> = {