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,7 @@ const DataFilter = (props: DataFilterProps) => {
         {
           iri: cubeIri,
           componentIris: [dimensionIri],
-          filters: keys.length > 0 ? interactiveFilters : undefined,
+          filters: keys.length > 1 ? interactiveFilters : undefined,
         },
       ],
       // 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

@@ -21,8 +21,6 @@ import {
   isTemporalOrdinalDimension,
 } from "@/domain/data";
 import { useTimeFormatUnit } from "@/formatters";
-import { useDataCubesComponentsQuery } from "@/graphql/hooks";
-import { useLocale } from "@/locales/use-locale";
 import { useInteractiveFilters } from "@/stores/interactive-filters";
 
 type ChartFiltersListProps = {
@@ -33,8 +31,7 @@ type ChartFiltersListProps = {
 };
 
 export const ChartFiltersList = (props: ChartFiltersListProps) => {
-  const { dataSource, chartConfig, dimensions, measures } = props;
-  const locale = useLocale();
+  const { chartConfig, dimensions, measures } = props;
   const timeFormatUnit = useTimeFormatUnit();
   const timeSlider = useInteractiveFilters((d) => d.timeSlider);
   const animationField = getAnimationField(chartConfig);
@@ -44,23 +41,8 @@ export const ChartFiltersList = (props: ChartFiltersListProps) => {
     measures,
     componentIris: extractChartConfigComponentIris(chartConfig),
   });
-  const [{ data }] = useDataCubesComponentsQuery({
-    variables: {
-      sourceType: dataSource.type,
-      sourceUrl: dataSource.url,
-      locale,
-      cubeFilters:
-        filters?.map((filter) => ({
-          iri: filter.iri,
-          componentIris: filter.componentIris,
-          filters: filter.filters,
-          joinBy: filter.joinBy,
-        })) ?? [],
-    },
-    pause: !filters,
-  });
   const allFilters = React.useMemo(() => {
-    if (!data?.dataCubesComponents || !filters || !dimensions || !measures) {
+    if (!filters || !dimensions || !measures) {
       return [];
     }
 
@@ -132,7 +114,6 @@ export const ChartFiltersList = (props: ChartFiltersListProps) => {
       return namedFilters;
     });
   }, [
-    data?.dataCubesComponents,
     dimensions,
     measures,
     filters,

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/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,11 @@ const getCachedComponents = (
       sourceType: draft.dataSource.type,
       sourceUrl: draft.dataSource.url,
       locale,
-      cubeFilter: { iri: cubeFilter.iri, joinBy: cubeFilter.joinBy },
+      cubeFilter: {
+        iri: cubeFilter.iri,
+        joinBy: cubeFilter.joinBy,
+        loadValues: true,
+      },
     })!;
   });
 

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 {

app/package.json

@@ -41,7 +41,8 @@
     "@next/mdx": "^11.0.1",
     "@preconstruct/next": "^3.0.1",
     "@prisma/client": "^4.5.0",
-    "@rdfjs/namespace": "^1.1.0",
+    "@rdfjs/data-model": "^2.0.2",
+    "@rdfjs/namespace": "^2.0.1",
     "@reach/auto-id": "^0.15.0",
     "@sentry/nextjs": "^7.7.0",
     "@tpluscode/rdf-ns-builders": "2.0.1",
@@ -169,7 +170,8 @@
     "@types/qs": "^6.9.8",
     "@types/rdf-ext": "^1.3.8",
     "@types/rdf-js": "^4.0.1",
-    "@types/rdfjs__namespace": "^1.1.3",
+    "@types/rdfjs__data-model": "^2.0.7",
+    "@types/rdfjs__namespace": "^2.0.10",
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-table": "^7.7.15",
     "@types/react-window": "^1.8.2",