Improve filter value selection

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added rivers and lakes through vector layer [#309](https://github.com/visualize-admin/visualization-tool/pull/309)
 - Improved chart editing navigation [#337](https://github.com/visualize-admin/visualization-tool/pull/337)
 - Improved chart publish action buttons [#337](https://github.com/visualize-admin/visualization-tool/pull/337)
+- Improve cascading filters selection to ensure data is shown after filter selection [#343](https://github.com/visualize-admin/visualization-tool/pull/343)
 
 ### Bugs
 

app/components/debug-panel.tsx

@@ -67,7 +67,15 @@ DESCRIBE <${configuratorState.dataSet ?? ""}>`
         )}
       </Box>
       <Box as="h3" variant="text.lead" sx={{ px: 5, color: "monochrome700" }}>
-        Configurator State
+        Configurator State{" "}
+        <Link
+          variant="inline"
+          onClick={() => {
+            console.log(configuratorState);
+          }}
+        >
+          (dump to console)
+        </Link>
       </Box>
       <Box sx={{ p: 5 }}>
         <Inspector expandLevel={3} data={configuratorState} />

app/components/form.tsx

@@ -189,7 +189,7 @@ export const Select = ({
   }, [options, locale, sortOptions]);
 
   return (
-    <Box sx={{ color: "monochrome700", pb: 2 }}>
+    <Box sx={{ color: "monochrome700" }}>
       {label && (
         <Label htmlFor={id} disabled={disabled} smaller>
           {label}

app/configurator/components/chart-configurator.tsx

@@ -1,6 +1,6 @@
 import { t, Trans } from "@lingui/macro";
 import { Menu, MenuButton, MenuItem, MenuList } from "@reach/menu-button";
-import { sortBy } from "lodash";
+import { isEqual, sortBy } from "lodash";
 import * as React from "react";
 import { useCallback, useEffect } from "react";
 import {
@@ -10,6 +10,7 @@ import {
   OnDragEndResponder,
 } from "react-beautiful-dnd";
 import { Box, Button, Spinner } from "theme-ui";
+import { CombinedError, useClient } from "urql";
 import {
   ChartConfig,
   ConfiguratorStateConfiguringChart,
@@ -21,15 +22,14 @@ import { chartConfigOptionsUISpec } from "../../charts/chart-config-ui-options";
 import { Loading } from "../../components/hint";
 import {
   DataCubeMetadataWithComponentValuesQuery,
+  PossibleFiltersDocument,
+  PossibleFiltersQuery,
   useDataCubeMetadataWithComponentValuesQuery,
 } from "../../graphql/query-hooks";
 import { DataCubeMetadata } from "../../graphql/types";
 import { Icon } from "../../icons";
 import { useLocale } from "../../locales/use-locale";
-import {
-  ensureFilterValuesCorrect,
-  moveFilterField,
-} from "../configurator-state";
+import { setFilters, moveFilterField } from "../configurator-state";
 import { FIELD_VALUE_NONE } from "../constants";
 import {
   ControlSection,
@@ -75,7 +75,7 @@ const DataFilterSelectGeneric = ({
     </Box>
   );
   return (
-    <Box sx={{ pl: 2, mb: 2, flexGrow: 1 }}>
+    <Box sx={{ pl: 2, flexGrow: 1 }}>
       {dimension.__typename === "TemporalDimension" &&
       dimension.timeUnit !== "Day" ? (
         <DataFilterSelectTime
@@ -177,23 +177,52 @@ export const ChartConfigurator = ({
     });
   }, [variables, executeQuery]);
 
+  const client = useClient();
+
   useEffect(() => {
-    if (!metaData || !data || !data.dataCubeByIri) {
+    if (!metaData) {
       return;
     }
-    // Make sure that the filters are in line with the values
-    const chartConfig = ensureFilterValuesCorrect(state.chartConfig, {
-      dimensions: data.dataCubeByIri.dimensions,
-    });
 
-    dispatch({
-      type: "CHART_CONFIG_REPLACED",
-      value: {
-        chartConfig,
-        dataSetMetadata: metaData,
-      },
-    });
-  }, [data, dispatch, metaData, state.chartConfig]);
+    const run = async () => {
+      const {
+        data,
+        error,
+      }: { data?: PossibleFiltersQuery; error?: CombinedError } = await client
+        .query(PossibleFiltersDocument, {
+          iri: state.dataSet,
+          filters: state.chartConfig.filters,
+        })
+        .toPromise();
+      if (error || !data) {
+        console.warn("Could not fetch possible filters", error);
+        return;
+      }
+
+      const filters = Object.fromEntries(
+        data.possibleFilters.map((x) => [
+          x.iri,
+          { type: x.type, value: x.value },
+        ])
+      );
+      const chartConfig = setFilters(
+        state.chartConfig,
+        filters as ChartConfig["filters"]
+      );
+
+      if (!isEqual(chartConfig.filters, state.chartConfig.filters)) {
+        dispatch({
+          type: "CHART_CONFIG_REPLACED",
+          value: {
+            chartConfig,
+            dataSetMetadata: metaData,
+          },
+        });
+      }
+    };
+
+    run();
+  }, [client, dispatch, metaData, state.chartConfig, state.dataSet]);
 
   if (data?.dataCubeByIri) {
     const mappedIris = getFieldComponentIris(state.chartConfig.fields);
@@ -285,7 +314,11 @@ export const ChartConfigurator = ({
             <DragDropContext onDragEnd={handleDragEnd}>
               <Droppable droppableId="filters">
                 {(provided) => (
-                  <div {...provided.droppableProps} ref={provided.innerRef}>
+                  <Box
+                    {...provided.droppableProps}
+                    sx={{ "& > * + *": { mt: 3 }, mb: 4 }}
+                    ref={provided.innerRef}
+                  >
                     {filterDimensions.map((dimension, i) => (
                       <Draggable
                         draggableId={dimension.iri}
@@ -330,7 +363,7 @@ export const ChartConfigurator = ({
                                   justifyContent: "flex-end",
                                   flexGrow: 0,
                                   flexShrink: 0,
-                                  pb: 3,
+                                  pb: 1,
                                 }}
                               >
                                 <MoveDragButtons
@@ -360,7 +393,7 @@ export const ChartConfigurator = ({
                       </Draggable>
                     ))}
                     {provided.placeholder}
-                  </div>
+                  </Box>
                 )}
               </Droppable>
             </DragDropContext>

app/configurator/components/chart-controls/section.tsx

@@ -42,19 +42,21 @@ export const ControlSectionContent = ({
   role,
   ariaLabelledBy,
   children,
+  sx,
 }: {
   side: "left" | "right";
   as?: ElementType;
   role?: string;
   ariaLabelledBy?: string;
   children: ReactNode;
+  sx?: BoxProps["sx"];
 }) => {
   return (
     <Box
       as={as}
       role={role}
       aria-labelledby={ariaLabelledBy}
-      sx={{ px: side === "left" ? 2 : 4, pb: 4 }}
+      sx={{ px: side === "left" ? 2 : 4, pb: 4, ...sx }}
     >
       {children}
     </Box>

app/configurator/configurator-state.tsx

@@ -205,6 +205,12 @@ export const getFilterValue = (
     : undefined;
 };
 
+export const setFilters = produce(
+  (chartConfig: ChartConfig, newFilters: ChartConfig["filters"]) => {
+    chartConfig.filters = newFilters;
+  }
+);
+
 export const ensureFilterValuesCorrect = produce(
   (
     chartConfig: ChartConfig,

app/graphql/queries/data-cubes.graphql

@@ -212,6 +212,14 @@ query DataCubeObservations(
   }
 }
 
+query PossibleFilters($iri: String!, $filters: Filters!) {
+  possibleFilters(iri: $iri, filters: $filters) {
+    iri
+    type
+    value
+  }
+}
+
 query Themes($locale: String!) {
   themes(locale: $locale) {
     iri

app/graphql/query-hooks.ts

@@ -16,6 +16,7 @@ export type Scalars = {
   Filters: any;
   GeoShapes: any;
   Observation: any;
+  ObservationValue: any;
   RawObservation: any;
 };
 
@@ -182,6 +183,14 @@ export type NominalDimensionValuesArgs = {
 };
 
 
+export type ObservationFilter = {
+  __typename: 'ObservationFilter';
+  type: Scalars['String'];
+  value?: Maybe<Scalars['ObservationValue']>;
+  iri: Scalars['String'];
+};
+
+
 export type ObservationsQuery = {
   __typename: 'ObservationsQuery';
   /** Observations with their values parsed to native JS types */
@@ -212,6 +221,7 @@ export type OrdinalDimensionValuesArgs = {
 export type Query = {
   __typename: 'Query';
   dataCubeByIri?: Maybe<DataCube>;
+  possibleFilters: Array<ObservationFilter>;
   dataCubes: Array<DataCubeResult>;
   themes: Array<DataCubeTheme>;
   subthemes: Array<DataCubeTheme>;
@@ -228,6 +238,12 @@ export type QueryDataCubeByIriArgs = {
 };
 
 
+export type QueryPossibleFiltersArgs = {
+  iri: Scalars['String'];
+  filters: Scalars['Filters'];
+};
+
+
 export type QueryDataCubesArgs = {
   locale?: Maybe<Scalars['String']>;
   query?: Maybe<Scalars['String']>;
@@ -488,6 +504,14 @@ export type DataCubeObservationsQuery = { __typename: 'Query', dataCubeByIri?: M
       & DimensionMetaData_Measure_Fragment
     )>, observations: { __typename: 'ObservationsQuery', data: Array<any>, sparqlEditorUrl?: Maybe<string> } }> };
 
+export type PossibleFiltersQueryVariables = Exact<{
+  iri: Scalars['String'];
+  filters: Scalars['Filters'];
+}>;
+
+
+export type PossibleFiltersQuery = { __typename: 'Query', possibleFilters: Array<{ __typename: 'ObservationFilter', iri: string, type: string, value?: Maybe<any> }> };
+
 export type ThemesQueryVariables = Exact<{
   locale: Scalars['String'];
 }>;
@@ -735,6 +759,19 @@ export const DataCubeObservationsDocument = gql`
 export function useDataCubeObservationsQuery(options: Omit<Urql.UseQueryArgs<DataCubeObservationsQueryVariables>, 'query'> = {}) {
   return Urql.useQuery<DataCubeObservationsQuery>({ query: DataCubeObservationsDocument, ...options });
 };
+export const PossibleFiltersDocument = gql`
+    query PossibleFilters($iri: String!, $filters: Filters!) {
+  possibleFilters(iri: $iri, filters: $filters) {
+    iri
+    type
+    value
+  }
+}
+    `;
+
+export function usePossibleFiltersQuery(options: Omit<Urql.UseQueryArgs<PossibleFiltersQueryVariables>, 'query'> = {}) {
+  return Urql.useQuery<PossibleFiltersQuery>({ query: PossibleFiltersDocument, ...options });
+};
 export const ThemesDocument = gql`
     query Themes($locale: String!) {
   themes(locale: $locale) {