fix: Properly handle joinBy dimension when retrieving filters from Ch…

…artConfig
visualize-admin · Dec 1, 2023 · a3a9cb6 · a3a9cb6
1 parent 7378cf2
commit a3a9cb6
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 17 deletions.
diff --git a/app/charts/shared/chart-data-filters.tsx b/app/charts/shared/chart-data-filters.tsx
@@ -96,10 +96,9 @@ export const ChartDataFilters = (props: ChartDataFiltersProps) => {
       const cubeQueryFilters = queryFilters.find(
         (d) => d.iri === cube.iri
       ) as DataCubeObservationFilter;
-      const filtersByMappingStatus = getFiltersByMappingStatus(
-        chartConfig,
-        cube.iri
-      );
+      const filtersByMappingStatus = getFiltersByMappingStatus(chartConfig, {
+        cubeIri: cube.iri,
+      });
       const { unmappedFilters, mappedFilters } = filtersByMappingStatus;
       const unmappedKeys = Object.keys(unmappedFilters);
       const unmappedQueryFiltersArray = Object.entries(

diff --git a/app/configurator/components/chart-configurator.tsx b/app/configurator/components/chart-configurator.tsx
@@ -19,7 +19,7 @@ import { makeStyles } from "@mui/styles";
 import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";
 import sortBy from "lodash/sortBy";
-import { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
   DragDropContext,
   Draggable,
@@ -74,6 +74,7 @@ import {
   isTemporalDimension,
   Measure,
 } from "@/domain/data";
+import { truthy } from "@/domain/types";
 import {
   useDataCubesComponentsQuery,
   useDataCubesObservationsQuery,
@@ -171,13 +172,16 @@ const useEnsurePossibleFilters = ({
   const [error, setError] = useState<Error>();
   const lastFilters = useRef<Record<string, Filters>>({});
   const client = useClient();
+  const joinByIris = React.useMemo(() => {
+    return chartConfig.cubes.flatMap((cube) => cube.joinBy).filter(truthy);
+  }, [chartConfig.cubes]);
 
   useEffect(() => {
     const run = async () => {
       chartConfig.cubes.forEach(async (cube) => {
         const { mappedFilters, unmappedFilters } = getFiltersByMappingStatus(
           chartConfig,
-          cube.iri
+          { cubeIri: cube.iri, joinByIris }
         );
 
         if (
@@ -247,6 +251,7 @@ const useEnsurePossibleFilters = ({
     chartConfig.cubes,
     state.dataSource.type,
     state.dataSource.url,
+    joinByIris,
   ]);
 
   return { error, fetching };
@@ -261,16 +266,19 @@ const useFilterReorder = ({
   const chartConfig = getChartConfig(state);
   const locale = useLocale();
   const filters = getChartConfigFilters(chartConfig.cubes);
+  const joinByIris = React.useMemo(() => {
+    return chartConfig.cubes.flatMap((cube) => cube.joinBy).filter(truthy);
+  }, [chartConfig.cubes]);
   const { mappedFiltersIris } = useMemo(() => {
-    return getFiltersByMappingStatus(chartConfig);
-  }, [chartConfig]);
+    return getFiltersByMappingStatus(chartConfig, { joinByIris });
+  }, [chartConfig, joinByIris]);
 
   const variables = useMemo(() => {
     const cubeFilters = chartConfig.cubes.map((cube) => {
-      const { unmappedFilters } = getFiltersByMappingStatus(
-        chartConfig,
-        cube.iri
-      );
+      const { unmappedFilters } = getFiltersByMappingStatus(chartConfig, {
+        cubeIri: cube.iri,
+        joinByIris,
+      });
 
       return Object.keys(unmappedFilters).length > 0
         ? {
@@ -297,7 +305,7 @@ const useFilterReorder = ({
       cubeFilters,
       requeryKey: requeryKey ? requeryKey : undefined,
     };
-  }, [chartConfig]);
+  }, [chartConfig, joinByIris]);
 
   const [
     { data: componentsData, fetching: componentsFetching },

diff --git a/app/configurator/configurator-state.spec.tsx b/app/configurator/configurator-state.spec.tsx
@@ -809,7 +809,9 @@ describe("getFiltersByMappingStatus", () => {
       },
     } as any as MapConfig;
 
-    const { mappedFiltersIris } = getFiltersByMappingStatus(config, "foo");
+    const { mappedFiltersIris } = getFiltersByMappingStatus(config, {
+      cubeIri: "foo",
+    });
 
     expect([...mappedFiltersIris]).toEqual(
       expect.arrayContaining(["areaColorIri", "symbolColorIri"])

diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
@@ -587,7 +587,11 @@ export const applyNonTableDimensionToFilters = ({
         const _exhaustiveCheck: never = currentFilter;
         return _exhaustiveCheck;
     }
-  } else if (!isField && dimension.isKeyDimension) {
+  } else if (
+    !isField &&
+    dimension.isKeyDimension &&
+    !dimension.isJoinByDimension
+  ) {
     // If this scenario appears, it means that current filter is undefined -
     // which means it must be converted to a single-filter (if it's a keyDimension,
     // otherwise a 'No filter' option should be selected by default).
@@ -731,13 +735,26 @@ export const getNonGenericFieldValues = (
  */
 export const getFiltersByMappingStatus = (
   chartConfig: ChartConfig,
-  cubeIri?: string
+  options: {
+    /** Treat original iris of joinBy dimension as fields (currently joinBy dimension
+     * can only be mapped to a field).
+     *
+     * This ensures that we won't apply single filters to original joinBy dimensions.
+     *  */
+    joinByIris?: string[];
+    cubeIri?: string;
+  }
 ) => {
+  const { joinByIris, cubeIri } = options;
   const genericFieldValues = Object.values(chartConfig.fields).map(
     (d) => d.componentIri
   );
   const nonGenericFieldValues = getNonGenericFieldValues(chartConfig);
-  const iris = new Set([...genericFieldValues, ...nonGenericFieldValues]);
+  const iris = new Set([
+    ...genericFieldValues,
+    ...nonGenericFieldValues,
+    ...(joinByIris ?? []),
+  ]);
   const filters = getChartConfigFilters(chartConfig.cubes, cubeIri);
   const mappedFilters = pickBy(filters, (_, iri) => iris.has(iri));
   const unmappedFilters = pickBy(filters, (_, iri) => !iris.has(iri));