perf: Initial DataCubeComponents / dimension values query optimizations

app/charts/area/chart-area.tsx

@@ -56,6 +56,7 @@ export const ChartAreasVisualization = ({
         iri: cube.iri,
         componentIris,
         joinBy: cube.joinBy,
+        loadValues: true,
       })),
     },
   });

app/charts/column/chart-column.tsx

@@ -70,6 +70,7 @@ export const ChartColumnsVisualization = ({
         iri: cube.iri,
         componentIris,
         joinBy: cube.joinBy,
+        loadValues: true,
       })),
     },
   });

app/charts/combo/chart-combo-line-column.tsx

@@ -52,6 +52,7 @@ export const ChartComboLineColumnVisualization = (
         iri: cube.iri,
         componentIris,
         joinBy: cube.joinBy,
+        loadValues: true,
       })),
     },
   });

app/charts/combo/chart-combo-line-dual.tsx

@@ -52,6 +52,7 @@ export const ChartComboLineDualVisualization = (
         iri: cube.iri,
         componentIris,
         joinBy: cube.joinBy,
+        loadValues: true,
       })),
     },
   });

app/charts/combo/chart-combo-line-single.tsx

@@ -57,6 +57,7 @@ export const ChartComboLineSingleVisualization = (
         iri: cube.iri,
         componentIris,
         joinBy: cube.joinBy,
+        loadValues: true,
       })),
     },
   });

app/charts/line/chart-lines.tsx

@@ -57,6 +57,7 @@ export const ChartLinesVisualization = ({
         iri: cube.iri,
         componentIris,
         joinBy: cube.joinBy,
+        loadValues: true,
       })),
     },
   });

app/charts/map/chart-map.tsx

@@ -60,6 +60,7 @@ export const ChartMapVisualization = ({
         iri: cube.iri,
         componentIris,
         joinBy: cube.joinBy,
+        loadValues: true,
       })),
     },
   });

app/charts/pie/chart-pie.tsx

@@ -53,6 +53,7 @@ export const ChartPieVisualization = ({
         iri: cube.iri,
         componentIris,
         joinBy: cube.joinBy,
+        loadValues: true,
       })),
     },
   });

app/charts/scatterplot/chart-scatterplot.tsx

@@ -65,6 +65,7 @@ export const ChartScatterplotVisualization = ({
         iri: cube.iri,
         componentIris,
         joinBy: cube.joinBy,
+        loadValues: true,
       })),
     },
   });

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

@@ -242,7 +242,8 @@ const DataFilter = (props: DataFilterProps) => {
         {
           iri: cubeIri,
           componentIris: [dimensionIri],
-          filters: keys.length > 0 ? interactiveFilters : undefined,
+          filters: keys.length > 1 ? interactiveFilters : undefined,
+          loadValues: true,
         },
       ],
       // This is important for urql not to think that filters

app/charts/table/chart-table.tsx

@@ -41,6 +41,7 @@ export const ChartTableVisualization = ({
         iri: cube.iri,
         componentIris,
         joinBy: cube.joinBy,
+        loadValues: true,
       })),
     },
   });

app/components/chart-filters-list.tsx

@@ -55,6 +55,7 @@ export const ChartFiltersList = (props: ChartFiltersListProps) => {
           componentIris: filter.componentIris,
           filters: filter.filters,
           joinBy: filter.joinBy,
+          loadValues: true,
         })) ?? [],
     },
     pause: !filters,
@@ -72,7 +73,7 @@ export const ChartFiltersList = (props: ChartFiltersListProps) => {
           return [];
         }
 
-        const dimension = dimensions.find(
+        const dimension = data.dataCubesComponents.dimensions.find(
           (d) => d.iri === iri && d.cubeIri === filter.iri
         );
 

app/components/form.tsx

@@ -3,6 +3,7 @@ import {
   Box,
   BoxProps,
   ButtonBase,
+  CircularProgress,
   FormControlLabel,
   FormControlLabelProps,
   InputLabel,
@@ -353,9 +354,23 @@ export const Select = ({
     <LoadingMenuPaperContext.Provider value={loading}>
       <Box sx={{ width: "100%", ...sx }}>
         {label && (
-          <Label htmlFor={id} smaller sx={{ my: "6px" }}>
+          <Label
+            htmlFor={id}
+            smaller
+            sx={{ display: "flex", alignItems: "center", my: "6px" }}
+          >
             {label}
             {controls}
+            {loading && (
+              <CircularProgress
+                size={12}
+                sx={{
+                  color: "grey.700",
+                  display: "inline-block",
+                  marginLeft: 2,
+                }}
+              />
+            )}
           </Label>
         )}
         <MUISelect

app/configurator/components/chart-configurator.tsx

@@ -18,6 +18,7 @@ import {
 import { makeStyles } from "@mui/styles";
 import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";
+import pickBy from "lodash/pickBy";
 import sortBy from "lodash/sortBy";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
@@ -90,14 +91,40 @@ import { useLocale } from "@/locales/use-locale";
 import useEvent from "@/utils/use-event";
 
 type DataFilterSelectGenericProps = {
-  dimension: Dimension;
+  rawDimension: Dimension;
+  filterDimensionIris: string[];
   index: number;
   disabled?: boolean;
   onRemove: () => void;
 };
 
 const DataFilterSelectGeneric = (props: DataFilterSelectGenericProps) => {
-  const { dimension, index, disabled, onRemove } = props;
+  const { rawDimension, filterDimensionIris, index, disabled, onRemove } =
+    props;
+  const locale = useLocale();
+  const [state] = useConfiguratorState();
+  const chartConfig = getChartConfig(state);
+  const [{ data, fetching }] = useDataCubesComponentsQuery({
+    variables: {
+      sourceType: state.dataSource.type,
+      sourceUrl: state.dataSource.url,
+      locale,
+      cubeFilters: chartConfig.cubes.map((cube) => {
+        const rawFilters = pickBy(cube.filters, (_, key) =>
+          filterDimensionIris.includes(key)
+        );
+        return {
+          iri: cube.iri,
+          joinBy: cube.joinBy,
+          componentIris: [rawDimension.iri],
+          filters: Object.keys(rawFilters).length > 0 ? rawFilters : undefined,
+          loadValues: true,
+        };
+      }),
+    },
+  });
+
+  const dimension = data?.dataCubesComponents?.dimensions?.[0] ?? rawDimension;
   const controls = dimension.isKeyDimension ? null : (
     <Box sx={{ display: "flex", flexGrow: 1 }}>
       <IconButton
@@ -120,8 +147,9 @@ const DataFilterSelectGeneric = (props: DataFilterSelectGenericProps) => {
     ),
     controls,
     id: `select-single-filter-${index}`,
-    disabled,
+    disabled: fetching || disabled,
     isOptional: !dimension.isKeyDimension,
+    loading: fetching,
   };
 
   if (
@@ -297,6 +325,7 @@ const useFilterReorder = ({
             iri: cube.iri,
             filters: undefined,
             joinBy: cube.joinBy,
+            loadValues: true,
           };
     });
 
@@ -704,7 +733,10 @@ export const ChartConfigurator = ({
                             </div>
                             <DataFilterSelectGeneric
                               key={dimension.iri}
-                              dimension={dimension}
+                              rawDimension={dimension}
+                              filterDimensionIris={filterDimensions
+                                .slice(0, i)
+                                .map((d) => d.iri)}
                               index={i}
                               disabled={fetching}
                               onRemove={() =>

app/configurator/components/chart-options-selector.tsx

@@ -106,6 +106,7 @@ export const ChartOptionsSelector = ({
         cubeFilters: chartConfig.cubes.map((cube) => ({
           iri: cube.iri,
           joinBy: cube.joinBy,
+          loadValues: true,
         })),
       },
     });

app/configurator/components/chart-type-selector.tsx

@@ -50,6 +50,7 @@ export const ChartTypeSelector = (props: ChartTypeSelectorProps) => {
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         joinBy: cube.joinBy,
+        loadValues: true,
       })),
     },
   });

app/configurator/components/field.tsx

@@ -243,7 +243,7 @@ export const DataFilterSelect = ({
 
   const canUseMostRecentValue = isTemporalOrdinalDimension(dimension);
   const usesMostRecentValue = isDynamicMaxValue(fieldProps.value);
-  const maxValue = sortedValues[sortedValues.length - 1].value;
+  const maxValue = sortedValues[sortedValues.length - 1]?.value;
 
   return (
     <Select

app/configurator/configurator-state.tsx

@@ -6,7 +6,7 @@ import setWith from "lodash/setWith";
 import sortBy from "lodash/sortBy";
 import unset from "lodash/unset";
 import { NextRouter, useRouter } from "next/router";
-import { createContext, Dispatch, useContext, useEffect, useMemo } from "react";
+import { Dispatch, createContext, useContext, useEffect, useMemo } from "react";
 import { Reducer, useImmerReducer } from "use-immer";
 
 import {
@@ -34,20 +34,20 @@ import {
   ConfiguratorStatePublishing,
   ConfiguratorStateSelectingDataSet,
   DataSource,
-  decodeConfiguratorState,
-  enableLayouting,
-  Filters,
   FilterValue,
+  Filters,
   GenericField,
   GenericFields,
-  getChartConfig,
-  getChartConfigFilters,
   ImputationType,
   InteractiveFiltersConfig,
+  Layout,
+  decodeConfiguratorState,
+  enableLayouting,
+  getChartConfig,
+  getChartConfigFilters,
   isAreaConfig,
   isColorFieldInConfig,
   isTableConfig,
-  Layout,
   makeMultiFilter,
 } from "@/config-types";
 import { mapValueIrisToColor } from "@/configurator/components/ui-helpers";
@@ -59,9 +59,9 @@ import {
   DataCubeComponents,
   Dimension,
   DimensionValue,
+  ObservationValue,
   isGeoDimension,
   isMeasure,
-  ObservationValue,
 } from "@/domain/data";
 import { DEFAULT_DATA_SOURCE } from "@/domain/datasource";
 import { client } from "@/graphql/client";
@@ -359,7 +359,12 @@ const getCachedComponents = (
       sourceType: draft.dataSource.type,
       sourceUrl: draft.dataSource.url,
       locale,
-      cubeFilter: { iri: cubeFilter.iri, joinBy: cubeFilter.joinBy },
+      cubeFilter: {
+        iri: cubeFilter.iri,
+        componentIris: undefined,
+        joinBy: cubeFilter.joinBy,
+        loadValues: true,
+      },
     })!;
   });
 
@@ -613,11 +618,14 @@ export const applyNonTableDimensionToFilters = ({
       : undefined;
     const filterValue = hierarchyTopMost
       ? hierarchyTopMost.value
-      : dimension.values[0].value;
-    filters[dimension.iri] = {
-      type: "single",
-      value: filterValue,
-    };
+      : dimension.values[0]?.value;
+
+    if (filterValue) {
+      filters[dimension.iri] = {
+        type: "single",
+        value: filterValue,
+      };
+    }
   }
 };
 
@@ -1482,7 +1490,7 @@ export const initChartStateFromCube = async (
     sourceType: dataSource.type,
     sourceUrl: dataSource.url,
     locale,
-    cubeFilters: [{ iri: cubeIri }],
+    cubeFilters: [{ iri: cubeIri, loadValues: true }],
   });
 
   if (components?.dataCubesComponents) {

app/configurator/interactive-filters/interactive-filters-configurator.tsx

@@ -43,6 +43,7 @@ export const InteractiveFiltersConfigurator = ({
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         joinBy: cube.joinBy,
+        loadValues: true,
       })),
     },
   });

app/configurator/table/table-chart-configurator.hook.tsx

@@ -28,6 +28,7 @@ export const useTableChartController = (
       cubeFilters: chartConfig.cubes.map((cube) => ({
         iri: cube.iri,
         joinBy: cube.joinBy,
+        loadValues: true,
       })),
     },
   });

app/graphql/query-hooks.ts

@@ -101,6 +101,7 @@ export type DataCubeComponentFilter = {
   filters?: Maybe<Scalars['Filters']>;
   componentIris?: Maybe<Array<Scalars['String']>>;
   joinBy?: Maybe<Scalars['String']>;
+  loadValues?: Maybe<Scalars['Boolean']>;
 };
 
 

app/graphql/resolver-types.ts

@@ -102,6 +102,7 @@ export type DataCubeComponentFilter = {
   filters?: Maybe<Scalars['Filters']>;
   componentIris?: Maybe<Array<Scalars['String']>>;
   joinBy?: Maybe<Scalars['String']>;
+  loadValues?: Maybe<Scalars['Boolean']>;
 };
 
 

app/graphql/resolvers/rdf.ts

@@ -153,7 +153,7 @@ export const dataCubeComponents: NonNullable<
   const { loaders, sparqlClient, sparqlClientStream, cache } = await setup(
     info
   );
-  const { iri, latest = true, componentIris, filters } = cubeFilter;
+  const { iri, latest = true, componentIris, filters, loadValues } = cubeFilter;
   const rawCube = await loaders.cube.load(iri);
 
   if (!rawCube) {
@@ -183,9 +183,9 @@ export const dataCubeComponents: NonNullable<
         cache,
         filters
       );
-      const values: DimensionValue[] = await dimensionValuesLoader.load(
-        component
-      );
+      const values: DimensionValue[] = loadValues
+        ? await dimensionValuesLoader.load(component)
+        : [];
       values.sort((a, b) =>
         ascending(
           a.position ?? a.value ?? undefined,

app/graphql/schema.graphql

@@ -344,6 +344,7 @@ input DataCubeComponentFilter {
   filters: Filters
   componentIris: [String!]
   joinBy: String
+  loadValues: Boolean
 }
 
 input DataCubeMetadataFilter {