From 35ee76cd3c0ce226b0d6a3b965ef464a4d9ac99d Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 10 May 2023 10:26:56 +0200
Subject: [PATCH 01/11] perf: Only fetch necessary components

...to make less queries, especially in the published mode. This change also makes the metadata panel show the values that are actually used in the chart.
---
 app/charts/column/chart-column.tsx           |  6 ++-
 app/charts/line/chart-lines.tsx              |  5 ++-
 app/charts/map/chart-map.tsx                 |  8 ++--
 app/charts/pie/chart-pie.tsx                 |  2 +
 app/charts/scatterplot/chart-scatterplot.tsx |  5 ++-
 app/charts/shared/chart-helpers.tsx          | 45 +++++++++++++++++++-
 app/charts/table/chart-table.tsx             |  2 +
 app/components/chart-preview.tsx             | 15 +++++--
 app/components/chart-published.tsx           |  2 +
 app/configurator/config-types.ts             | 13 +++---
 app/graphql/queries/data-cubes.graphql       | 26 +++++++++--
 app/graphql/query-hooks.ts                   | 33 +++++++++++---
 app/graphql/resolver-types.ts                |  3 ++
 app/graphql/resolvers/rdf.ts                 | 10 +++--
 app/graphql/schema.graphql                   | 13 +++++-
 app/rdf/queries.ts                           |  6 +--
 16 files changed, 155 insertions(+), 39 deletions(-)

diff --git a/app/charts/column/chart-column.tsx b/app/charts/column/chart-column.tsx
index 0c928447b..c0ae49271 100644
--- a/app/charts/column/chart-column.tsx
+++ b/app/charts/column/chart-column.tsx
@@ -1,5 +1,6 @@
 import { memo } from "react";
 
+import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
 import {
   ColumnsGrouped,
   ErrorWhiskers as ErrorWhiskersGrouped,
@@ -16,6 +17,7 @@ import {
   AxisWidthBandDomain,
 } from "@/charts/shared/axis-width-band";
 import { BrushTime } from "@/charts/shared/brush";
+import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { LegendColor } from "@/charts/shared/legend-color";
@@ -34,8 +36,6 @@ import {
 } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
 
-import { ChartLoadingWrapper } from "../chart-loading-wrapper";
-
 export const ChartColumnsVisualization = ({
   dataSetIri,
   dataSource,
@@ -62,8 +62,10 @@ export const ChartColumnsVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
+      componentIris: getChartConfigComponents(chartConfig),
     },
   });
+
   const [observationsQuery] = useDataCubeObservationsQuery({
     variables: {
       iri: dataSetIri,
diff --git a/app/charts/line/chart-lines.tsx b/app/charts/line/chart-lines.tsx
index 5d0d44e7e..4cd532bc5 100644
--- a/app/charts/line/chart-lines.tsx
+++ b/app/charts/line/chart-lines.tsx
@@ -1,10 +1,12 @@
 import { memo } from "react";
 
+import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
 import { Lines } from "@/charts/line/lines";
 import { LineChart } from "@/charts/line/lines-state";
 import { AxisHeightLinear } from "@/charts/shared/axis-height-linear";
 import { AxisTime, AxisTimeDomain } from "@/charts/shared/axis-width-time";
 import { BrushTime } from "@/charts/shared/brush";
+import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { HoverDotMultiple } from "@/charts/shared/interaction/hover-dots-multiple";
 import { Ruler } from "@/charts/shared/interaction/ruler";
@@ -25,8 +27,6 @@ import {
 } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
 
-import { ChartLoadingWrapper } from "../chart-loading-wrapper";
-
 export const ChartLinesVisualization = ({
   dataSetIri,
   dataSource,
@@ -53,6 +53,7 @@ export const ChartLinesVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
+      componentIris: getChartConfigComponents(chartConfig),
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
diff --git a/app/charts/map/chart-map.tsx b/app/charts/map/chart-map.tsx
index 62b8ea8f1..a15c3c240 100644
--- a/app/charts/map/chart-map.tsx
+++ b/app/charts/map/chart-map.tsx
@@ -3,10 +3,13 @@ import keyBy from "lodash/keyBy";
 import { useMemo } from "react";
 import { mesh as topojsonMesh } from "topojson-client";
 
+import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
+import { prepareTopojson } from "@/charts/map/helpers";
 import { MapComponent } from "@/charts/map/map";
 import { MapLegend } from "@/charts/map/map-legend";
 import { MapChart } from "@/charts/map/map-state";
 import { MapTooltip } from "@/charts/map/map-tooltip";
+import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
 import { ChartContainer } from "@/charts/shared/containers";
 import {
   BaseLayer,
@@ -34,10 +37,6 @@ import {
 } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
 
-import { ChartLoadingWrapper } from "../chart-loading-wrapper";
-
-import { prepareTopojson } from "./helpers";
-
 export const ChartMapVisualization = ({
   dataSetIri,
   dataSource,
@@ -66,6 +65,7 @@ export const ChartMapVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
+      componentIris: getChartConfigComponents(chartConfig),
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
diff --git a/app/charts/pie/chart-pie.tsx b/app/charts/pie/chart-pie.tsx
index 571c35938..8738c3695 100644
--- a/app/charts/pie/chart-pie.tsx
+++ b/app/charts/pie/chart-pie.tsx
@@ -3,6 +3,7 @@ import { memo } from "react";
 import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
 import { Pie } from "@/charts/pie/pie";
 import { PieChart } from "@/charts/pie/pie-state";
+import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { LegendColor } from "@/charts/shared/legend-color";
@@ -48,6 +49,7 @@ export const ChartPieVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
+      componentIris: getChartConfigComponents(chartConfig),
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
diff --git a/app/charts/scatterplot/chart-scatterplot.tsx b/app/charts/scatterplot/chart-scatterplot.tsx
index 4f5ac0771..0a1bfba7e 100644
--- a/app/charts/scatterplot/chart-scatterplot.tsx
+++ b/app/charts/scatterplot/chart-scatterplot.tsx
@@ -1,5 +1,6 @@
 import { memo } from "react";
 
+import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
 import { Scatterplot } from "@/charts/scatterplot/scatterplot-simple";
 import { ScatterplotChart } from "@/charts/scatterplot/scatterplot-state";
 import {
@@ -10,6 +11,7 @@ import {
   AxisWidthLinear,
   AxisWidthLinearDomain,
 } from "@/charts/shared/axis-width-linear";
+import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { LegendColor } from "@/charts/shared/legend-color";
@@ -29,8 +31,6 @@ import {
 } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
 
-import { ChartLoadingWrapper } from "../chart-loading-wrapper";
-
 export const ChartScatterplotVisualization = ({
   dataSetIri,
   dataSource,
@@ -57,6 +57,7 @@ export const ChartScatterplotVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
+      componentIris: getChartConfigComponents(chartConfig),
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
diff --git a/app/charts/shared/chart-helpers.tsx b/app/charts/shared/chart-helpers.tsx
index 39cb8284c..08386c292 100644
--- a/app/charts/shared/chart-helpers.tsx
+++ b/app/charts/shared/chart-helpers.tsx
@@ -12,6 +12,7 @@ import {
   InteractiveFiltersState,
   useInteractiveFilters,
 } from "@/charts/shared/use-interactive-filters";
+import { InteractiveFiltersTimeSlider } from "@/configurator";
 import { parseDate } from "@/configurator/components/ui-helpers";
 import {
   ChartConfig,
@@ -19,6 +20,9 @@ import {
   Filters,
   ImputationType,
   InteractiveFiltersConfig,
+  InteractiveFiltersDataConfig,
+  InteractiveFiltersLegend,
+  InteractiveFiltersTimeRange,
   isAreaConfig,
   QueryFilters,
 } from "@/configurator/config-types";
@@ -76,7 +80,44 @@ export const useQueryFilters = ({
   ]);
 };
 
-type ValuePredicate = (v: any) => boolean;
+type IFKey = keyof NonNullable<InteractiveFiltersConfig>;
+
+export const getChartConfigComponents = ({
+  fields,
+  filters,
+  interactiveFiltersConfig: IFConfig,
+}: ChartConfig) => {
+  const fieldIris = Object.values(fields).map((d) => d.componentIri);
+  const filterIris = Object.keys(filters);
+  const IFKeys = IFConfig ? (Object.keys(IFConfig) as IFKey[]) : [];
+  const IFIris: string[] = [];
+
+  if (IFConfig) {
+    IFKeys.forEach((k) => {
+      const v = IFConfig[k];
+
+      switch (k) {
+        case "timeSlider":
+          IFIris.push((v as InteractiveFiltersTimeSlider).componentIri);
+          break;
+        case "legend":
+          IFIris.push((v as InteractiveFiltersLegend).componentIri);
+          break;
+        case "timeRange":
+          IFIris.push((v as InteractiveFiltersTimeRange).componentIri);
+          break;
+        case "dataFilters":
+          IFIris.push(...(v as InteractiveFiltersDataConfig).componentIris);
+          break;
+        default:
+          const _exhaustiveCheck: never = k;
+          return _exhaustiveCheck;
+      }
+    });
+  }
+
+  return uniq([...fieldIris, ...filterIris, ...IFIris]);
+};
 
 export const usePlottableData = ({
   data,
@@ -102,6 +143,8 @@ export const usePlottableData = ({
   return useMemo(() => data.filter(isPlottable), [data, isPlottable]);
 };
 
+type ValuePredicate = (v: any) => boolean;
+
 /** Prepares the data to be used in charts, taking interactive filters into account. */
 export const useDataAfterInteractiveFilters = ({
   sortedData,
diff --git a/app/charts/table/chart-table.tsx b/app/charts/table/chart-table.tsx
index b43933181..22db294bf 100644
--- a/app/charts/table/chart-table.tsx
+++ b/app/charts/table/chart-table.tsx
@@ -1,6 +1,7 @@
 import { memo } from "react";
 
 import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
+import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
 import { Table } from "@/charts/table/table";
 import { TableChart } from "@/charts/table/table-state";
 import { DataSource, TableConfig } from "@/configurator";
@@ -37,6 +38,7 @@ export const ChartTableVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
+      componentIris: getChartConfigComponents(chartConfig),
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index 350ff062b..51cb614f2 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -6,7 +6,10 @@ import * as React from "react";
 import { useMemo } from "react";
 
 import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
-import { useQueryFilters } from "@/charts/shared/chart-helpers";
+import {
+  getChartConfigComponents,
+  useQueryFilters,
+} from "@/charts/shared/chart-helpers";
 import { InteractiveFiltersProvider } from "@/charts/shared/use-interactive-filters";
 import useSyncInteractiveFilters from "@/charts/shared/use-sync-interactive-filters";
 import { ChartErrorBoundary } from "@/components/chart-error-boundary";
@@ -21,7 +24,12 @@ import DebugPanel from "@/components/debug-panel";
 import Flex from "@/components/flex";
 import { HintYellow } from "@/components/hint";
 import { MetadataPanel } from "@/components/metadata-panel";
-import { ChartConfig, DataSource, useConfiguratorState } from "@/configurator";
+import {
+  ChartConfig,
+  DataSource,
+  isConfiguring,
+  useConfiguratorState,
+} from "@/configurator";
 import { DataSetTable } from "@/configurator/components/datatable";
 import {
   useComponentsQuery,
@@ -69,7 +77,7 @@ export const ChartPreviewInner = ({
   dataSetIri: string;
   dataSource: DataSource;
 }) => {
-  const [state, dispatch] = useConfiguratorState();
+  const [state, dispatch] = useConfiguratorState(isConfiguring);
   const locale = useLocale();
   const classes = useStyles();
   const [{ data: metadata }] = useDataCubeMetadataQuery({
@@ -86,6 +94,7 @@ export const ChartPreviewInner = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
+      componentIris: getChartConfigComponents(state.chartConfig),
     },
   });
   const {
diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 8a4685c53..1117febee 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -6,6 +6,7 @@ import { useEffect, useMemo, useRef } from "react";
 import { useStore } from "zustand";
 
 import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
+import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
 import { isUsingImputation } from "@/charts/shared/imputation";
 import {
   InteractiveFiltersProvider,
@@ -153,6 +154,7 @@ export const ChartPublishedInner = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
+      componentIris: getChartConfigComponents(chartConfig),
     },
   });
 
diff --git a/app/configurator/config-types.ts b/app/configurator/config-types.ts
index 9705cd380..e29fed2d5 100644
--- a/app/configurator/config-types.ts
+++ b/app/configurator/config-types.ts
@@ -528,13 +528,13 @@ export type MapFields = t.TypeOf<typeof MapFields>;
 export type MapConfig = t.TypeOf<typeof MapConfig>;
 
 export type ChartFields =
+  | AreaFields
   | ColumnFields
   | LineFields
-  | AreaFields
-  | ScatterPlotFields
+  | MapFields
   | PieFields
-  | TableFields
-  | MapFields;
+  | ScatterPlotFields
+  | TableFields;
 
 export type ChartSegmentField =
   | AreaSegmentField
@@ -547,12 +547,11 @@ const ChartConfig = t.union([
   AreaConfig,
   ColumnConfig,
   LineConfig,
-  ScatterPlotConfig,
+  MapConfig,
   PieConfig,
+  ScatterPlotConfig,
   TableConfig,
-  MapConfig,
 ]);
-// t.record(t.string, t.any)
 export type ChartConfig = t.TypeOf<typeof ChartConfig>;
 
 export const decodeChartConfig = (
diff --git a/app/graphql/queries/data-cubes.graphql b/app/graphql/queries/data-cubes.graphql
index f13d5de19..7d3bb8980 100644
--- a/app/graphql/queries/data-cubes.graphql
+++ b/app/graphql/queries/data-cubes.graphql
@@ -190,6 +190,7 @@ query Components(
   $locale: String!
   $latest: Boolean
   $filters: Filters
+  $componentIris: [String!]
 ) {
   dataCubeByIri(
     iri: $iri
@@ -198,10 +199,18 @@ query Components(
     locale: $locale
     latest: $latest
   ) {
-    dimensions(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+    dimensions(
+      sourceType: $sourceType
+      sourceUrl: $sourceUrl
+      componentIris: $componentIris
+    ) {
       ...dimensionMetadata
     }
-    measures(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+    measures(
+      sourceType: $sourceType
+      sourceUrl: $sourceUrl
+      componentIris: $componentIris
+    ) {
       ...dimensionMetadata
     }
   }
@@ -214,6 +223,7 @@ query ComponentsWithHierarchies(
   $locale: String!
   $latest: Boolean
   $filters: Filters
+  $componentIris: [String!]
 ) {
   dataCubeByIri(
     iri: $iri
@@ -222,10 +232,18 @@ query ComponentsWithHierarchies(
     locale: $locale
     latest: $latest
   ) {
-    dimensions(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+    dimensions(
+      sourceType: $sourceType
+      sourceUrl: $sourceUrl
+      componentIris: $componentIris
+    ) {
       ...dimensionMetadataWithHierarchies
     }
-    measures(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+    measures(
+      sourceType: $sourceType
+      sourceUrl: $sourceUrl
+      componentIris: $componentIris
+    ) {
       ...dimensionMetadataWithHierarchies
     }
   }
diff --git a/app/graphql/query-hooks.ts b/app/graphql/query-hooks.ts
index d1c060361..6b27b91e2 100644
--- a/app/graphql/query-hooks.ts
+++ b/app/graphql/query-hooks.ts
@@ -63,6 +63,7 @@ export type DataCubeObservationsArgs = {
 export type DataCubeDimensionsArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
+  componentIris?: Maybe<Array<Scalars['String']>>;
 };
 
 
@@ -76,6 +77,7 @@ export type DataCubeDimensionByIriArgs = {
 export type DataCubeMeasuresArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
+  componentIris?: Maybe<Array<Scalars['String']>>;
 };
 
 export type DataCubeOrganization = {
@@ -394,6 +396,7 @@ export type QueryDataCubeByIriArgs = {
   iri: Scalars['String'];
   latest?: Maybe<Scalars['Boolean']>;
   filters?: Maybe<Scalars['Filters']>;
+  componentIris?: Maybe<Array<Scalars['String']>>;
 };
 
 
@@ -762,6 +765,7 @@ export type ComponentsQueryVariables = Exact<{
   locale: Scalars['String'];
   latest?: Maybe<Scalars['Boolean']>;
   filters?: Maybe<Scalars['Filters']>;
+  componentIris?: Maybe<Array<Scalars['String']> | Scalars['String']>;
 }>;
 
 
@@ -801,6 +805,7 @@ export type ComponentsWithHierarchiesQueryVariables = Exact<{
   locale: Scalars['String'];
   latest?: Maybe<Scalars['Boolean']>;
   filters?: Maybe<Scalars['Filters']>;
+  componentIris?: Maybe<Array<Scalars['String']> | Scalars['String']>;
 }>;
 
 
@@ -1200,7 +1205,7 @@ export function useDataCubeMetadataQuery(options: Omit<Urql.UseQueryArgs<DataCub
   return Urql.useQuery<DataCubeMetadataQuery>({ query: DataCubeMetadataDocument, ...options });
 };
 export const ComponentsDocument = gql`
-    query Components($iri: String!, $sourceType: String!, $sourceUrl: String!, $locale: String!, $latest: Boolean, $filters: Filters) {
+    query Components($iri: String!, $sourceType: String!, $sourceUrl: String!, $locale: String!, $latest: Boolean, $filters: Filters, $componentIris: [String!]) {
   dataCubeByIri(
     iri: $iri
     sourceType: $sourceType
@@ -1208,10 +1213,18 @@ export const ComponentsDocument = gql`
     locale: $locale
     latest: $latest
   ) {
-    dimensions(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+    dimensions(
+      sourceType: $sourceType
+      sourceUrl: $sourceUrl
+      componentIris: $componentIris
+    ) {
       ...dimensionMetadata
     }
-    measures(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+    measures(
+      sourceType: $sourceType
+      sourceUrl: $sourceUrl
+      componentIris: $componentIris
+    ) {
       ...dimensionMetadata
     }
   }
@@ -1222,7 +1235,7 @@ export function useComponentsQuery(options: Omit<Urql.UseQueryArgs<ComponentsQue
   return Urql.useQuery<ComponentsQuery>({ query: ComponentsDocument, ...options });
 };
 export const ComponentsWithHierarchiesDocument = gql`
-    query ComponentsWithHierarchies($iri: String!, $sourceType: String!, $sourceUrl: String!, $locale: String!, $latest: Boolean, $filters: Filters) {
+    query ComponentsWithHierarchies($iri: String!, $sourceType: String!, $sourceUrl: String!, $locale: String!, $latest: Boolean, $filters: Filters, $componentIris: [String!]) {
   dataCubeByIri(
     iri: $iri
     sourceType: $sourceType
@@ -1230,10 +1243,18 @@ export const ComponentsWithHierarchiesDocument = gql`
     locale: $locale
     latest: $latest
   ) {
-    dimensions(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+    dimensions(
+      sourceType: $sourceType
+      sourceUrl: $sourceUrl
+      componentIris: $componentIris
+    ) {
       ...dimensionMetadataWithHierarchies
     }
-    measures(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+    measures(
+      sourceType: $sourceType
+      sourceUrl: $sourceUrl
+      componentIris: $componentIris
+    ) {
       ...dimensionMetadataWithHierarchies
     }
   }
diff --git a/app/graphql/resolver-types.ts b/app/graphql/resolver-types.ts
index 5d63c4ed6..a3d7d284e 100644
--- a/app/graphql/resolver-types.ts
+++ b/app/graphql/resolver-types.ts
@@ -65,6 +65,7 @@ export type DataCubeObservationsArgs = {
 export type DataCubeDimensionsArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
+  componentIris?: Maybe<Array<Scalars['String']>>;
 };
 
 
@@ -78,6 +79,7 @@ export type DataCubeDimensionByIriArgs = {
 export type DataCubeMeasuresArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
+  componentIris?: Maybe<Array<Scalars['String']>>;
 };
 
 export type DataCubeOrganization = {
@@ -396,6 +398,7 @@ export type QueryDataCubeByIriArgs = {
   iri: Scalars['String'];
   latest?: Maybe<Scalars['Boolean']>;
   filters?: Maybe<Scalars['Filters']>;
+  componentIris?: Maybe<Array<Scalars['String']>>;
 };
 
 
diff --git a/app/graphql/resolvers/rdf.ts b/app/graphql/resolvers/rdf.ts
index 06ef4f7b1..523bc918c 100644
--- a/app/graphql/resolvers/rdf.ts
+++ b/app/graphql/resolvers/rdf.ts
@@ -200,26 +200,30 @@ export const datasetcount: NonNullable<QueryResolvers["datasetcount"]> = async (
 };
 
 export const dataCubeDimensions: NonNullable<DataCubeResolvers["dimensions"]> =
-  async ({ cube, locale }, _, { setup }, info) => {
+  async ({ cube, locale }, { componentIris }, { setup }, info) => {
     const { sparqlClient, cache } = await setup(info);
     const dimensions = await getCubeDimensions({
       cube,
       locale,
       sparqlClient,
+      componentIris,
       cache,
     });
+
     return dimensions.filter((d) => !d.data.isMeasureDimension);
   };
 
 export const dataCubeMeasures: NonNullable<DataCubeResolvers["measures"]> =
-  async ({ cube, locale }, _, { setup }, info) => {
+  async ({ cube, locale }, { componentIris }, { setup }, info) => {
     const { sparqlClient, cache } = await setup(info);
     const dimensions = await getCubeDimensions({
       cube,
       locale,
       sparqlClient,
+      componentIris,
       cache,
     });
+
     return dimensions.filter((d) => d.data.isMeasureDimension);
   };
 
@@ -231,7 +235,7 @@ export const dataCubeDimensionByIri: NonNullable<
     cube,
     locale,
     sparqlClient,
-    dimensionIris: [iri],
+    componentIris: [iri],
     cache,
   });
   const dimension = dimensions.find((d) => iri === d.data.iri);
diff --git a/app/graphql/schema.graphql b/app/graphql/schema.graphql
index c572595c7..0bd8b08cb 100644
--- a/app/graphql/schema.graphql
+++ b/app/graphql/schema.graphql
@@ -46,13 +46,21 @@ type DataCube {
     dimensions: [String!]
     filters: Filters
   ): ObservationsQuery!
-  dimensions(sourceType: String!, sourceUrl: String!): [Dimension!]!
+  dimensions(
+    sourceType: String!
+    sourceUrl: String!
+    componentIris: [String!]
+  ): [Dimension!]!
   dimensionByIri(
     iri: String!
     sourceType: String!
     sourceUrl: String!
   ): Dimension
-  measures(sourceType: String!, sourceUrl: String!): [Measure!]!
+  measures(
+    sourceType: String!
+    sourceUrl: String!
+    componentIris: [String!]
+  ): [Measure!]!
   themes: [DataCubeTheme!]!
 }
 
@@ -301,6 +309,7 @@ type Query {
     iri: String!
     latest: Boolean = true
     filters: Filters
+    componentIris: [String!]
   ): DataCube
   possibleFilters(
     iri: String!
diff --git a/app/rdf/queries.ts b/app/rdf/queries.ts
index d63a81e93..ab56a690e 100644
--- a/app/rdf/queries.ts
+++ b/app/rdf/queries.ts
@@ -129,20 +129,20 @@ export const getCubeDimensions = async ({
   cube,
   locale,
   sparqlClient,
-  dimensionIris,
+  componentIris,
   cache,
 }: {
   cube: Cube;
   locale: string;
   sparqlClient: ParsingClient;
-  dimensionIris?: string[];
+  componentIris?: Maybe<string[]>;
   cache: LRUCache | undefined;
 }): Promise<ResolvedDimension[]> => {
   try {
     const dimensions = cube.dimensions
       .filter(isObservationDimension)
       .filter((x) =>
-        dimensionIris ? dimensionIris.includes(x.path.value) : true
+        componentIris ? componentIris.includes(x.path.value) : true
       );
     const dimensionUnits = dimensions.flatMap(getDimensionUnits);
 

From 2873215de04148c12f9060f8966017177ab52f60 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 10 May 2023 10:35:47 +0200
Subject: [PATCH 02/11] fix: Lint issue

---
 app/charts/map/map.tsx | 2 +-
 app/charts/map/ref.ts  | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx
index f5e4a3869..10cad27e7 100644
--- a/app/charts/map/map.tsx
+++ b/app/charts/map/map.tsx
@@ -365,7 +365,7 @@ export const MapComponent = () => {
             setLoaded(true);
           }}
           onLoad={(e) => {
-            setMap(e.target);
+            setMap(e.target as mapboxgl.Map);
             currentBBox.current = e.target.getBounds().toArray() as BBox;
 
             /**
diff --git a/app/charts/map/ref.ts b/app/charts/map/ref.ts
index ff0486c23..b35a32d34 100644
--- a/app/charts/map/ref.ts
+++ b/app/charts/map/ref.ts
@@ -1,16 +1,14 @@
-import { Map } from "mapbox-gl";
-
 /**
  * We need to access the map from the map controls. Until we have a good solution
  * for sibling components, we use a global non-observable ref.
  */
-let map: Map | null = null;
+let map: mapboxgl.Map | null = null;
 
 const getMap = () => {
   return map;
 };
 
-const setMap = (d: Map) => {
+const setMap = (d: mapboxgl.Map) => {
   map = d;
 };
 

From 76bc0ad2a0214e9186ac0857b478018c64a96b81 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 10 May 2023 11:02:26 +0200
Subject: [PATCH 03/11] fix: Only limit components in published mode

---
 app/charts/column/chart-column.tsx           |  6 ++++-
 app/charts/line/chart-lines.tsx              |  6 ++++-
 app/charts/map/chart-map.tsx                 |  6 ++++-
 app/charts/pie/chart-pie.tsx                 |  6 ++++-
 app/charts/scatterplot/chart-scatterplot.tsx |  6 ++++-
 app/charts/table/chart-table.tsx             |  6 ++++-
 app/components/chart-preview.tsx             | 23 ++++++++++----------
 app/components/chart-published.tsx           |  1 +
 app/components/common-chart.tsx              | 10 ++++-----
 9 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/app/charts/column/chart-column.tsx b/app/charts/column/chart-column.tsx
index c0ae49271..6a21dc0e6 100644
--- a/app/charts/column/chart-column.tsx
+++ b/app/charts/column/chart-column.tsx
@@ -41,11 +41,13 @@ export const ChartColumnsVisualization = ({
   dataSource,
   chartConfig,
   queryFilters,
+  published,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
   chartConfig: ColumnConfig;
   queryFilters: QueryFilters;
+  published: boolean;
 }) => {
   const locale = useLocale();
   const [metadataQuery] = useDataCubeMetadataQuery({
@@ -62,7 +64,9 @@ export const ChartColumnsVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: getChartConfigComponents(chartConfig),
+      componentIris: published
+        ? getChartConfigComponents(chartConfig)
+        : undefined,
     },
   });
 
diff --git a/app/charts/line/chart-lines.tsx b/app/charts/line/chart-lines.tsx
index 4cd532bc5..c06f25b28 100644
--- a/app/charts/line/chart-lines.tsx
+++ b/app/charts/line/chart-lines.tsx
@@ -32,11 +32,13 @@ export const ChartLinesVisualization = ({
   dataSource,
   chartConfig,
   queryFilters,
+  published,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
   chartConfig: LineConfig;
   queryFilters: QueryFilters;
+  published: boolean;
 }) => {
   const locale = useLocale();
   const [metadataQuery] = useDataCubeMetadataQuery({
@@ -53,7 +55,9 @@ export const ChartLinesVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: getChartConfigComponents(chartConfig),
+      componentIris: published
+        ? getChartConfigComponents(chartConfig)
+        : undefined,
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
diff --git a/app/charts/map/chart-map.tsx b/app/charts/map/chart-map.tsx
index a15c3c240..812bbce87 100644
--- a/app/charts/map/chart-map.tsx
+++ b/app/charts/map/chart-map.tsx
@@ -42,11 +42,13 @@ export const ChartMapVisualization = ({
   dataSource,
   chartConfig,
   queryFilters,
+  published,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
   chartConfig: MapConfig;
   queryFilters: QueryFilters;
+  published: boolean;
 }) => {
   const locale = useLocale();
   const areaDimensionIri = chartConfig.fields.areaLayer?.componentIri || "";
@@ -65,7 +67,9 @@ export const ChartMapVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: getChartConfigComponents(chartConfig),
+      componentIris: published
+        ? getChartConfigComponents(chartConfig)
+        : undefined,
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
diff --git a/app/charts/pie/chart-pie.tsx b/app/charts/pie/chart-pie.tsx
index 8738c3695..0cb99be09 100644
--- a/app/charts/pie/chart-pie.tsx
+++ b/app/charts/pie/chart-pie.tsx
@@ -28,11 +28,13 @@ export const ChartPieVisualization = ({
   dataSource,
   chartConfig,
   queryFilters,
+  published,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
   chartConfig: PieConfig;
   queryFilters: QueryFilters;
+  published: boolean;
 }) => {
   const locale = useLocale();
   const [metadataQuery] = useDataCubeMetadataQuery({
@@ -49,7 +51,9 @@ export const ChartPieVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: getChartConfigComponents(chartConfig),
+      componentIris: published
+        ? getChartConfigComponents(chartConfig)
+        : undefined,
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
diff --git a/app/charts/scatterplot/chart-scatterplot.tsx b/app/charts/scatterplot/chart-scatterplot.tsx
index 0a1bfba7e..df997a25a 100644
--- a/app/charts/scatterplot/chart-scatterplot.tsx
+++ b/app/charts/scatterplot/chart-scatterplot.tsx
@@ -36,11 +36,13 @@ export const ChartScatterplotVisualization = ({
   dataSource,
   chartConfig,
   queryFilters,
+  published,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
   chartConfig: ScatterPlotConfig;
   queryFilters: QueryFilters;
+  published: boolean;
 }) => {
   const locale = useLocale();
   const [metadataQuery] = useDataCubeMetadataQuery({
@@ -57,7 +59,9 @@ export const ChartScatterplotVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: getChartConfigComponents(chartConfig),
+      componentIris: published
+        ? getChartConfigComponents(chartConfig)
+        : undefined,
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
diff --git a/app/charts/table/chart-table.tsx b/app/charts/table/chart-table.tsx
index 22db294bf..1b557e63e 100644
--- a/app/charts/table/chart-table.tsx
+++ b/app/charts/table/chart-table.tsx
@@ -18,10 +18,12 @@ export const ChartTableVisualization = ({
   dataSetIri,
   dataSource,
   chartConfig,
+  published,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
   chartConfig: TableConfig;
+  published: boolean;
 }) => {
   const locale = useLocale();
   const [metadataQuery] = useDataCubeMetadataQuery({
@@ -38,7 +40,9 @@ export const ChartTableVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: getChartConfigComponents(chartConfig),
+      componentIris: published
+        ? getChartConfigComponents(chartConfig)
+        : undefined,
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index 51cb614f2..52487dcd6 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -6,10 +6,7 @@ import * as React from "react";
 import { useMemo } from "react";
 
 import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
-import {
-  getChartConfigComponents,
-  useQueryFilters,
-} from "@/charts/shared/chart-helpers";
+import { useQueryFilters } from "@/charts/shared/chart-helpers";
 import { InteractiveFiltersProvider } from "@/charts/shared/use-interactive-filters";
 import useSyncInteractiveFilters from "@/charts/shared/use-sync-interactive-filters";
 import { ChartErrorBoundary } from "@/components/chart-error-boundary";
@@ -94,7 +91,6 @@ export const ChartPreviewInner = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: getChartConfigComponents(state.chartConfig),
     },
   });
   const {
@@ -225,6 +221,7 @@ export const ChartPreviewInner = ({
                     dataSet={dataSetIri}
                     dataSource={dataSource}
                     chartConfig={state.chartConfig}
+                    published={false}
                   />
                 )}
               </Box>
@@ -251,10 +248,12 @@ const ChartWithInteractiveFilters = React.forwardRef(
       dataSet,
       dataSource,
       chartConfig,
+      published,
     }: {
       dataSet: string;
       dataSource: DataSource;
       chartConfig: ChartConfig;
+      published: boolean;
     },
     ref
   ) => {
@@ -290,6 +289,7 @@ const ChartWithInteractiveFilters = React.forwardRef(
           dataSet={dataSet}
           dataSource={dataSource}
           chartConfig={chartConfig}
+          published={published}
         />
       </Flex>
     );
@@ -300,21 +300,20 @@ const Chart = ({
   dataSet,
   dataSource,
   chartConfig,
+  published,
 }: {
   dataSet: string;
   dataSource: DataSource;
   chartConfig: ChartConfig;
+  published: boolean;
 }) => {
-  // Combine filters from config + interactive filters
-  const queryFilters = useQueryFilters({
-    chartConfig,
-  });
-
+  const queryFilters = useQueryFilters({ chartConfig });
   const props = {
     dataSet,
     dataSource,
-    chartConfig: chartConfig,
-    queryFilters: queryFilters,
+    chartConfig,
+    queryFilters,
+    published,
   };
 
   return <GenericChart {...props} />;
diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 1117febee..4d12f0188 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -358,6 +358,7 @@ const ChartWithInteractiveFilters = React.forwardRef(
           dataSet={dataSet}
           dataSource={dataSource}
           chartConfig={chartConfig}
+          published
         />
       </Flex>
     );
diff --git a/app/components/common-chart.tsx b/app/components/common-chart.tsx
index 2d23383c6..8c3168e34 100644
--- a/app/components/common-chart.tsx
+++ b/app/components/common-chart.tsx
@@ -50,21 +50,19 @@ const GenericChart = ({
   dataSet,
   dataSource,
   chartConfig,
+  published,
 }: {
   dataSet: string;
   dataSource: DataSource;
   chartConfig: ChartConfig;
+  published: boolean;
 }) => {
-  // Combine filters from config + interactive filters
-  const queryFilters = useQueryFilters({
-    chartConfig,
-  });
-
+  const queryFilters = useQueryFilters({ chartConfig });
   const props = {
     dataSetIri: dataSet,
     dataSource,
-    chartConfig,
     queryFilters,
+    published,
   };
 
   switch (chartConfig.chartType) {

From 316a1859c63977d3ac61e2c8c34a5ad6cecb8a20 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 10 May 2023 11:13:29 +0200
Subject: [PATCH 04/11] refactor: Rename function

---
 app/charts/column/chart-column.tsx           |  4 ++--
 app/charts/line/chart-lines.tsx              |  4 ++--
 app/charts/map/chart-map.tsx                 |  4 ++--
 app/charts/pie/chart-pie.tsx                 |  4 ++--
 app/charts/scatterplot/chart-scatterplot.tsx |  4 ++--
 app/charts/shared/chart-helpers.tsx          | 13 +++++++------
 app/charts/table/chart-table.tsx             |  4 ++--
 app/components/chart-published.tsx           |  4 ++--
 8 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/app/charts/column/chart-column.tsx b/app/charts/column/chart-column.tsx
index 6a21dc0e6..9165c80c3 100644
--- a/app/charts/column/chart-column.tsx
+++ b/app/charts/column/chart-column.tsx
@@ -17,7 +17,7 @@ import {
   AxisWidthBandDomain,
 } from "@/charts/shared/axis-width-band";
 import { BrushTime } from "@/charts/shared/brush";
-import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
+import { getChartConfigComponentIris } from "@/charts/shared/chart-helpers";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { LegendColor } from "@/charts/shared/legend-color";
@@ -65,7 +65,7 @@ export const ChartColumnsVisualization = ({
       sourceUrl: dataSource.url,
       locale,
       componentIris: published
-        ? getChartConfigComponents(chartConfig)
+        ? getChartConfigComponentIris(chartConfig)
         : undefined,
     },
   });
diff --git a/app/charts/line/chart-lines.tsx b/app/charts/line/chart-lines.tsx
index c06f25b28..1cf6c5a8b 100644
--- a/app/charts/line/chart-lines.tsx
+++ b/app/charts/line/chart-lines.tsx
@@ -6,7 +6,7 @@ import { LineChart } from "@/charts/line/lines-state";
 import { AxisHeightLinear } from "@/charts/shared/axis-height-linear";
 import { AxisTime, AxisTimeDomain } from "@/charts/shared/axis-width-time";
 import { BrushTime } from "@/charts/shared/brush";
-import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
+import { getChartConfigComponentIris } from "@/charts/shared/chart-helpers";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { HoverDotMultiple } from "@/charts/shared/interaction/hover-dots-multiple";
 import { Ruler } from "@/charts/shared/interaction/ruler";
@@ -56,7 +56,7 @@ export const ChartLinesVisualization = ({
       sourceUrl: dataSource.url,
       locale,
       componentIris: published
-        ? getChartConfigComponents(chartConfig)
+        ? getChartConfigComponentIris(chartConfig)
         : undefined,
     },
   });
diff --git a/app/charts/map/chart-map.tsx b/app/charts/map/chart-map.tsx
index 812bbce87..820569b43 100644
--- a/app/charts/map/chart-map.tsx
+++ b/app/charts/map/chart-map.tsx
@@ -9,7 +9,7 @@ import { MapComponent } from "@/charts/map/map";
 import { MapLegend } from "@/charts/map/map-legend";
 import { MapChart } from "@/charts/map/map-state";
 import { MapTooltip } from "@/charts/map/map-tooltip";
-import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
+import { getChartConfigComponentIris } from "@/charts/shared/chart-helpers";
 import { ChartContainer } from "@/charts/shared/containers";
 import {
   BaseLayer,
@@ -68,7 +68,7 @@ export const ChartMapVisualization = ({
       sourceUrl: dataSource.url,
       locale,
       componentIris: published
-        ? getChartConfigComponents(chartConfig)
+        ? getChartConfigComponentIris(chartConfig)
         : undefined,
     },
   });
diff --git a/app/charts/pie/chart-pie.tsx b/app/charts/pie/chart-pie.tsx
index 0cb99be09..809960a5b 100644
--- a/app/charts/pie/chart-pie.tsx
+++ b/app/charts/pie/chart-pie.tsx
@@ -3,7 +3,7 @@ import { memo } from "react";
 import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
 import { Pie } from "@/charts/pie/pie";
 import { PieChart } from "@/charts/pie/pie-state";
-import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
+import { getChartConfigComponentIris } from "@/charts/shared/chart-helpers";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { LegendColor } from "@/charts/shared/legend-color";
@@ -52,7 +52,7 @@ export const ChartPieVisualization = ({
       sourceUrl: dataSource.url,
       locale,
       componentIris: published
-        ? getChartConfigComponents(chartConfig)
+        ? getChartConfigComponentIris(chartConfig)
         : undefined,
     },
   });
diff --git a/app/charts/scatterplot/chart-scatterplot.tsx b/app/charts/scatterplot/chart-scatterplot.tsx
index df997a25a..883b2a572 100644
--- a/app/charts/scatterplot/chart-scatterplot.tsx
+++ b/app/charts/scatterplot/chart-scatterplot.tsx
@@ -11,7 +11,7 @@ import {
   AxisWidthLinear,
   AxisWidthLinearDomain,
 } from "@/charts/shared/axis-width-linear";
-import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
+import { getChartConfigComponentIris } from "@/charts/shared/chart-helpers";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { Tooltip } from "@/charts/shared/interaction/tooltip";
 import { LegendColor } from "@/charts/shared/legend-color";
@@ -60,7 +60,7 @@ export const ChartScatterplotVisualization = ({
       sourceUrl: dataSource.url,
       locale,
       componentIris: published
-        ? getChartConfigComponents(chartConfig)
+        ? getChartConfigComponentIris(chartConfig)
         : undefined,
     },
   });
diff --git a/app/charts/shared/chart-helpers.tsx b/app/charts/shared/chart-helpers.tsx
index 08386c292..f3a9e86c1 100644
--- a/app/charts/shared/chart-helpers.tsx
+++ b/app/charts/shared/chart-helpers.tsx
@@ -82,13 +82,14 @@ export const useQueryFilters = ({
 
 type IFKey = keyof NonNullable<InteractiveFiltersConfig>;
 
-export const getChartConfigComponents = ({
-  fields,
-  filters,
-  interactiveFiltersConfig: IFConfig,
-}: ChartConfig) => {
+export const getChartConfigFilterComponentIris = ({ filters }: ChartConfig) => {
+  return Object.keys(filters);
+};
+
+export const getChartConfigComponentIris = (chartConfig: ChartConfig) => {
+  const { fields, interactiveFiltersConfig: IFConfig } = chartConfig;
   const fieldIris = Object.values(fields).map((d) => d.componentIri);
-  const filterIris = Object.keys(filters);
+  const filterIris = getChartConfigFilterComponentIris(chartConfig);
   const IFKeys = IFConfig ? (Object.keys(IFConfig) as IFKey[]) : [];
   const IFIris: string[] = [];
 
diff --git a/app/charts/table/chart-table.tsx b/app/charts/table/chart-table.tsx
index 1b557e63e..2f57a393a 100644
--- a/app/charts/table/chart-table.tsx
+++ b/app/charts/table/chart-table.tsx
@@ -1,7 +1,7 @@
 import { memo } from "react";
 
 import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
-import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
+import { getChartConfigComponentIris } from "@/charts/shared/chart-helpers";
 import { Table } from "@/charts/table/table";
 import { TableChart } from "@/charts/table/table-state";
 import { DataSource, TableConfig } from "@/configurator";
@@ -41,7 +41,7 @@ export const ChartTableVisualization = ({
       sourceUrl: dataSource.url,
       locale,
       componentIris: published
-        ? getChartConfigComponents(chartConfig)
+        ? getChartConfigComponentIris(chartConfig)
         : undefined,
     },
   });
diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 4d12f0188..1daebbdd6 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -6,7 +6,7 @@ import { useEffect, useMemo, useRef } from "react";
 import { useStore } from "zustand";
 
 import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
-import { getChartConfigComponents } from "@/charts/shared/chart-helpers";
+import { getChartConfigComponentIris } from "@/charts/shared/chart-helpers";
 import { isUsingImputation } from "@/charts/shared/imputation";
 import {
   InteractiveFiltersProvider,
@@ -154,7 +154,7 @@ export const ChartPublishedInner = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: getChartConfigComponents(chartConfig),
+      componentIris: getChartConfigComponentIris(chartConfig),
     },
   });
 

From d1c0a8009abe540ce21459ce506fb5e2235b28a7 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 10 May 2023 11:14:28 +0200
Subject: [PATCH 05/11] perf: Only load components used in filters in
 ChartFiltersList

...to prevent loading values for all other, not used components.
---
 app/components/chart-filters-list.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/components/chart-filters-list.tsx b/app/components/chart-filters-list.tsx
index 383a19471..6ec6eb014 100644
--- a/app/components/chart-filters-list.tsx
+++ b/app/components/chart-filters-list.tsx
@@ -2,6 +2,7 @@ import { Box, Typography } from "@mui/material";
 import { Fragment } from "react";
 
 import { useQueryFilters } from "@/charts/shared/chart-helpers";
+import { getChartConfigFilterComponentIris } from "@/charts/shared/chart-helpers";
 import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import { ChartConfig, DataSource } from "@/configurator";
 import { isTemporalDimension } from "@/domain/data";
@@ -27,6 +28,7 @@ export const ChartFiltersList = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
+      componentIris: getChartConfigFilterComponentIris(chartConfig),
     },
   });
 

From 1486df93b73096560ad74aaa36c7c0924859e1eb Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 10 May 2023 11:23:18 +0200
Subject: [PATCH 06/11] fix: Remove type guard

---
 app/components/chart-preview.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index 52487dcd6..744699d97 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -21,12 +21,7 @@ import DebugPanel from "@/components/debug-panel";
 import Flex from "@/components/flex";
 import { HintYellow } from "@/components/hint";
 import { MetadataPanel } from "@/components/metadata-panel";
-import {
-  ChartConfig,
-  DataSource,
-  isConfiguring,
-  useConfiguratorState,
-} from "@/configurator";
+import { ChartConfig, DataSource, useConfiguratorState } from "@/configurator";
 import { DataSetTable } from "@/configurator/components/datatable";
 import {
   useComponentsQuery,
@@ -74,7 +69,7 @@ export const ChartPreviewInner = ({
   dataSetIri: string;
   dataSource: DataSource;
 }) => {
-  const [state, dispatch] = useConfiguratorState(isConfiguring);
+  const [state, dispatch] = useConfiguratorState();
   const locale = useLocale();
   const classes = useStyles();
   const [{ data: metadata }] = useDataCubeMetadataQuery({

From 11a2f61b3c5ffc2fcfc8b3e593a1ad7c235ab91e Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 10 May 2023 15:51:36 +0200
Subject: [PATCH 07/11] feat: Only load necessary components in Area chart

---
 app/charts/area/chart-area.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/charts/area/chart-area.tsx b/app/charts/area/chart-area.tsx
index dcc9f56c7..9b59739a1 100644
--- a/app/charts/area/chart-area.tsx
+++ b/app/charts/area/chart-area.tsx
@@ -2,9 +2,11 @@ import { memo } from "react";
 
 import { Areas } from "@/charts/area/areas";
 import { AreaChart } from "@/charts/area/areas-state";
+import { ChartLoadingWrapper } from "@/charts/chart-loading-wrapper";
 import { AxisHeightLinear } from "@/charts/shared/axis-height-linear";
 import { AxisTime, AxisTimeDomain } from "@/charts/shared/axis-width-time";
 import { BrushTime } from "@/charts/shared/brush";
+import { getChartConfigComponentIris } from "@/charts/shared/chart-helpers";
 import { ChartContainer, ChartSvg } from "@/charts/shared/containers";
 import { Ruler } from "@/charts/shared/interaction/ruler";
 import { Tooltip } from "@/charts/shared/interaction/tooltip";
@@ -24,18 +26,18 @@ import {
 } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
 
-import { ChartLoadingWrapper } from "../chart-loading-wrapper";
-
 export const ChartAreasVisualization = ({
   dataSetIri,
   dataSource,
   chartConfig,
   queryFilters,
+  published,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
   chartConfig: AreaConfig;
   queryFilters: QueryFilters;
+  published: boolean;
 }) => {
   const locale = useLocale();
   const [metadataQuery] = useDataCubeMetadataQuery({
@@ -51,6 +53,9 @@ export const ChartAreasVisualization = ({
       iri: dataSetIri,
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
+      componentIris: published
+        ? getChartConfigComponentIris(chartConfig)
+        : undefined,
       locale,
     },
   });

From 0df47474ffc78aaac7520dc35ef16e765a7203e9 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 10 May 2023 16:02:30 +0200
Subject: [PATCH 08/11] perf: Only load necessary components for observations
 query

...as it takes significant amount of time to use getCubeDimensions in cases of bigger datasets, we should only load necessary components. This also means that we only show what's defined in chart in the preview table and data download.
---
 app/charts/area/chart-area.tsx               |  9 +++++----
 app/charts/column/chart-column.tsx           | 10 +++++-----
 app/charts/line/chart-lines.tsx              |  9 +++++----
 app/charts/map/chart-map.tsx                 |  9 +++++----
 app/charts/pie/chart-pie.tsx                 |  9 +++++----
 app/charts/scatterplot/chart-scatterplot.tsx |  9 +++++----
 app/charts/table/chart-table.tsx             |  9 +++++----
 app/components/chart-footnotes.tsx           | 10 +++++++---
 app/components/data-download.tsx             | 15 ++++++++++++++-
 app/configurator/components/datatable.tsx    |  9 +++++++--
 app/graphql/queries/data-cubes.graphql       |  4 ++--
 app/graphql/query-hooks.ts                   |  8 ++++----
 app/graphql/resolver-types.ts                |  2 +-
 app/graphql/resolvers/rdf.ts                 |  5 ++---
 app/graphql/schema.graphql                   |  2 +-
 app/rdf/queries.ts                           |  9 ++++-----
 16 files changed, 77 insertions(+), 51 deletions(-)

diff --git a/app/charts/area/chart-area.tsx b/app/charts/area/chart-area.tsx
index 9b59739a1..9a54dbd51 100644
--- a/app/charts/area/chart-area.tsx
+++ b/app/charts/area/chart-area.tsx
@@ -40,6 +40,9 @@ export const ChartAreasVisualization = ({
   published: boolean;
 }) => {
   const locale = useLocale();
+  const componentIrisToFilterBy = published
+    ? getChartConfigComponentIris(chartConfig)
+    : undefined;
   const [metadataQuery] = useDataCubeMetadataQuery({
     variables: {
       iri: dataSetIri,
@@ -53,9 +56,7 @@ export const ChartAreasVisualization = ({
       iri: dataSetIri,
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
-      componentIris: published
-        ? getChartConfigComponentIris(chartConfig)
-        : undefined,
+      componentIris: componentIrisToFilterBy,
       locale,
     },
   });
@@ -65,7 +66,7 @@ export const ChartAreasVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      dimensions: null,
+      componentIris: componentIrisToFilterBy,
       filters: queryFilters,
     },
   });
diff --git a/app/charts/column/chart-column.tsx b/app/charts/column/chart-column.tsx
index 9165c80c3..d338b6f19 100644
--- a/app/charts/column/chart-column.tsx
+++ b/app/charts/column/chart-column.tsx
@@ -50,6 +50,9 @@ export const ChartColumnsVisualization = ({
   published: boolean;
 }) => {
   const locale = useLocale();
+  const componentIrisToFilterBy = published
+    ? getChartConfigComponentIris(chartConfig)
+    : undefined;
   const [metadataQuery] = useDataCubeMetadataQuery({
     variables: {
       iri: dataSetIri,
@@ -64,19 +67,16 @@ export const ChartColumnsVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: published
-        ? getChartConfigComponentIris(chartConfig)
-        : undefined,
+      componentIris: componentIrisToFilterBy,
     },
   });
-
   const [observationsQuery] = useDataCubeObservationsQuery({
     variables: {
       iri: dataSetIri,
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      dimensions: null,
+      componentIris: componentIrisToFilterBy,
       filters: queryFilters,
     },
   });
diff --git a/app/charts/line/chart-lines.tsx b/app/charts/line/chart-lines.tsx
index 1cf6c5a8b..e760eb4ae 100644
--- a/app/charts/line/chart-lines.tsx
+++ b/app/charts/line/chart-lines.tsx
@@ -41,6 +41,9 @@ export const ChartLinesVisualization = ({
   published: boolean;
 }) => {
   const locale = useLocale();
+  const componentIrisToFilterBy = published
+    ? getChartConfigComponentIris(chartConfig)
+    : undefined;
   const [metadataQuery] = useDataCubeMetadataQuery({
     variables: {
       iri: dataSetIri,
@@ -55,9 +58,7 @@ export const ChartLinesVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: published
-        ? getChartConfigComponentIris(chartConfig)
-        : undefined,
+      componentIris: componentIrisToFilterBy,
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
@@ -66,7 +67,7 @@ export const ChartLinesVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      dimensions: null,
+      componentIris: componentIrisToFilterBy,
       filters: queryFilters,
     },
   });
diff --git a/app/charts/map/chart-map.tsx b/app/charts/map/chart-map.tsx
index 820569b43..f64e6aa4f 100644
--- a/app/charts/map/chart-map.tsx
+++ b/app/charts/map/chart-map.tsx
@@ -53,6 +53,9 @@ export const ChartMapVisualization = ({
   const locale = useLocale();
   const areaDimensionIri = chartConfig.fields.areaLayer?.componentIri || "";
   const symbolDimensionIri = chartConfig.fields.symbolLayer?.componentIri || "";
+  const componentIrisToFilterBy = published
+    ? getChartConfigComponentIris(chartConfig)
+    : undefined;
   const [metadataQuery] = useDataCubeMetadataQuery({
     variables: {
       iri: dataSetIri,
@@ -67,9 +70,7 @@ export const ChartMapVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: published
-        ? getChartConfigComponentIris(chartConfig)
-        : undefined,
+      componentIris: componentIrisToFilterBy,
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
@@ -78,7 +79,7 @@ export const ChartMapVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      dimensions: null, // FIXME: Try to load less dimensions
+      componentIris: componentIrisToFilterBy,
       filters: queryFilters,
     },
   });
diff --git a/app/charts/pie/chart-pie.tsx b/app/charts/pie/chart-pie.tsx
index 809960a5b..52e3ee395 100644
--- a/app/charts/pie/chart-pie.tsx
+++ b/app/charts/pie/chart-pie.tsx
@@ -37,6 +37,9 @@ export const ChartPieVisualization = ({
   published: boolean;
 }) => {
   const locale = useLocale();
+  const componentIrisToFilterBy = published
+    ? getChartConfigComponentIris(chartConfig)
+    : undefined;
   const [metadataQuery] = useDataCubeMetadataQuery({
     variables: {
       iri: dataSetIri,
@@ -51,9 +54,7 @@ export const ChartPieVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: published
-        ? getChartConfigComponentIris(chartConfig)
-        : undefined,
+      componentIris: componentIrisToFilterBy,
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
@@ -62,7 +63,7 @@ export const ChartPieVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      dimensions: null,
+      componentIris: componentIrisToFilterBy,
       filters: queryFilters,
     },
   });
diff --git a/app/charts/scatterplot/chart-scatterplot.tsx b/app/charts/scatterplot/chart-scatterplot.tsx
index 883b2a572..f0d2af8f7 100644
--- a/app/charts/scatterplot/chart-scatterplot.tsx
+++ b/app/charts/scatterplot/chart-scatterplot.tsx
@@ -45,6 +45,9 @@ export const ChartScatterplotVisualization = ({
   published: boolean;
 }) => {
   const locale = useLocale();
+  const componentIrisToFilterBy = published
+    ? getChartConfigComponentIris(chartConfig)
+    : undefined;
   const [metadataQuery] = useDataCubeMetadataQuery({
     variables: {
       iri: dataSetIri,
@@ -59,9 +62,7 @@ export const ChartScatterplotVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: published
-        ? getChartConfigComponentIris(chartConfig)
-        : undefined,
+      componentIris: componentIrisToFilterBy,
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
@@ -70,7 +71,7 @@ export const ChartScatterplotVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      dimensions: null,
+      componentIris: componentIrisToFilterBy,
       filters: queryFilters,
     },
   });
diff --git a/app/charts/table/chart-table.tsx b/app/charts/table/chart-table.tsx
index 2f57a393a..51302e9d2 100644
--- a/app/charts/table/chart-table.tsx
+++ b/app/charts/table/chart-table.tsx
@@ -26,6 +26,9 @@ export const ChartTableVisualization = ({
   published: boolean;
 }) => {
   const locale = useLocale();
+  const componentIrisToFilterBy = published
+    ? getChartConfigComponentIris(chartConfig)
+    : undefined;
   const [metadataQuery] = useDataCubeMetadataQuery({
     variables: {
       iri: dataSetIri,
@@ -40,9 +43,7 @@ export const ChartTableVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      componentIris: published
-        ? getChartConfigComponentIris(chartConfig)
-        : undefined,
+      componentIris: componentIrisToFilterBy,
     },
   });
   const [observationsQuery] = useDataCubeObservationsQuery({
@@ -51,7 +52,7 @@ export const ChartTableVisualization = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      dimensions: null,
+      componentIris: componentIrisToFilterBy,
       filters: chartConfig.filters,
     },
   });
diff --git a/app/components/chart-footnotes.tsx b/app/components/chart-footnotes.tsx
index f659fdd8f..58266089a 100644
--- a/app/components/chart-footnotes.tsx
+++ b/app/components/chart-footnotes.tsx
@@ -3,6 +3,10 @@ import { Box, Button, Link, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { PropsWithChildren, useEffect, useMemo, useState } from "react";
 
+import {
+  getChartConfigComponentIris,
+  useQueryFilters,
+} from "@/charts/shared/chart-helpers";
 import { useChartTablePreview } from "@/components/chart-table-preview";
 import { DataDownloadMenu, RunSparqlQuery } from "@/components/data-download";
 import { ChartConfig, DataSource } from "@/configurator";
@@ -16,8 +20,6 @@ import { useLocale } from "@/locales/use-locale";
 import { useEmbedOptions } from "@/utils/embed";
 import { makeOpenDataLink } from "@/utils/opendata";
 
-import { useQueryFilters } from "../charts/shared/chart-helpers";
-
 export const useFootnotesStyles = makeStyles<Theme, { useMarginTop: boolean }>(
   (theme) => ({
     actions: {
@@ -92,13 +94,14 @@ export const ChartFootnotes = ({
 
   // Data for data download
   const filters = useQueryFilters({ chartConfig });
+  const componentIrisToFilterBy = getChartConfigComponentIris(chartConfig);
   const [{ data: visibleData }] = useDataCubeObservationsQuery({
     variables: {
       iri: dataSetIri,
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      dimensions: null,
+      componentIris: componentIrisToFilterBy,
       filters,
     },
   });
@@ -189,6 +192,7 @@ export const ChartFootnotes = ({
               dataSetIri={dataSetIri}
               dataSource={dataSource}
               title={dataCubeByIri.title}
+              componentIris={componentIrisToFilterBy}
               filters={filters}
             />
           ) : null}
diff --git a/app/components/data-download.tsx b/app/components/data-download.tsx
index 952f267f6..bc18f941d 100644
--- a/app/components/data-download.tsx
+++ b/app/components/data-download.tsx
@@ -132,11 +132,13 @@ export const DataDownloadMenu = memo(
     dataSetIri,
     dataSource,
     filters,
+    componentIris,
     title,
   }: {
     dataSetIri: string;
     dataSource: DataSource;
     filters?: QueryFilters;
+    componentIris?: string[];
     title: string;
   }) => {
     return (
@@ -145,6 +147,7 @@ export const DataDownloadMenu = memo(
           dataSetIri={dataSetIri}
           dataSource={dataSource}
           fileName={title}
+          componentIris={componentIris}
           filters={filters}
         />
       </DataDownloadStateProvider>
@@ -156,11 +159,13 @@ const DataDownloadInnerMenu = ({
   dataSetIri,
   dataSource,
   fileName,
+  componentIris,
   filters,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
   fileName: string;
+  componentIris?: string[];
   filters?: QueryFilters;
 }) => {
   const [state] = useDataDownloadState();
@@ -207,6 +212,7 @@ const DataDownloadInnerMenu = ({
               <Trans id="button.download.data.visible">Chart dataset</Trans>
             }
             fileName={fileName}
+            componentIris={componentIris}
             filters={filters}
           />
         )}
@@ -215,6 +221,7 @@ const DataDownloadInnerMenu = ({
           dataSource={dataSource}
           subheader={<Trans id="button.download.data.all">Full dataset</Trans>}
           fileName={fileName}
+          componentIris={componentIris}
         />
         {state.error && (
           <RawMenuItem>
@@ -233,12 +240,14 @@ const DataDownloadMenuSection = ({
   dataSource,
   subheader,
   fileName,
+  componentIris,
   filters,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
   subheader: ReactNode;
   fileName: string;
+  componentIris?: string[];
   filters?: QueryFilters;
 }) => {
   return (
@@ -255,6 +264,7 @@ const DataDownloadMenuSection = ({
               dataSource={dataSource}
               fileName={fileName}
               fileFormat={fileFormat}
+              componentIris={componentIris}
               filters={filters}
             />
           ))}
@@ -269,12 +279,14 @@ const DownloadMenuItem = ({
   dataSource,
   fileName,
   fileFormat,
+  componentIris,
   filters,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
   fileName: string;
   fileFormat: FileFormat;
+  componentIris?: string[];
   filters?: QueryFilters;
 }) => {
   const locale = useLocale();
@@ -333,6 +345,7 @@ const DownloadMenuItem = ({
                   sourceType: dataSource.type,
                   sourceUrl: dataSource.url,
                   locale,
+                  componentIris,
                 }
               )
               .toPromise();
@@ -346,7 +359,7 @@ const DownloadMenuItem = ({
                 sourceType: dataSource.type,
                 sourceUrl: dataSource.url,
                 locale,
-                dimensions: null,
+                componentIris,
                 filters,
               })
               .toPromise();
diff --git a/app/configurator/components/datatable.tsx b/app/configurator/components/datatable.tsx
index 4add2e51b..52acff909 100644
--- a/app/configurator/components/datatable.tsx
+++ b/app/configurator/components/datatable.tsx
@@ -14,7 +14,10 @@ import {
 import { ascending, descending } from "d3";
 import { useMemo, useRef, useState } from "react";
 
-import { useQueryFilters } from "@/charts/shared/chart-helpers";
+import {
+  getChartConfigComponentIris,
+  useQueryFilters,
+} from "@/charts/shared/chart-helpers";
 import { Loading } from "@/components/hint";
 import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import { ChartConfig, DataSource } from "@/configurator/config-types";
@@ -242,6 +245,7 @@ export const DataSetTable = ({
   sx?: SxProps<Theme>;
 }) => {
   const locale = useLocale();
+  const componentIrisToFilterBy = getChartConfigComponentIris(chartConfig);
   const filters = useQueryFilters({ chartConfig });
   const [{ data: metadataData }] = useDataCubeMetadataQuery({
     variables: {
@@ -257,6 +261,7 @@ export const DataSetTable = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
+      componentIris: componentIrisToFilterBy,
     },
   });
   const [{ data: observationsData }] = useDataCubeObservationsQuery({
@@ -265,7 +270,7 @@ export const DataSetTable = ({
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,
       locale,
-      dimensions: null,
+      componentIris: componentIrisToFilterBy,
       filters,
     },
   });
diff --git a/app/graphql/queries/data-cubes.graphql b/app/graphql/queries/data-cubes.graphql
index 7d3bb8980..0137551f0 100644
--- a/app/graphql/queries/data-cubes.graphql
+++ b/app/graphql/queries/data-cubes.graphql
@@ -369,7 +369,7 @@ query DataCubeObservations(
   $sourceType: String!
   $sourceUrl: String!
   $locale: String!
-  $dimensions: [String!]
+  $componentIris: [String!]
   $filters: Filters
   $latest: Boolean
   $limit: Int
@@ -384,7 +384,7 @@ query DataCubeObservations(
     observations(
       sourceType: $sourceType
       sourceUrl: $sourceUrl
-      dimensions: $dimensions
+      componentIris: $componentIris
       filters: $filters
       limit: $limit
     ) {
diff --git a/app/graphql/query-hooks.ts b/app/graphql/query-hooks.ts
index 6b27b91e2..99cb0e6a6 100644
--- a/app/graphql/query-hooks.ts
+++ b/app/graphql/query-hooks.ts
@@ -55,7 +55,7 @@ export type DataCubeObservationsArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   limit?: Maybe<Scalars['Int']>;
-  dimensions?: Maybe<Array<Scalars['String']>>;
+  componentIris?: Maybe<Array<Scalars['String']>>;
   filters?: Maybe<Scalars['Filters']>;
 };
 
@@ -917,7 +917,7 @@ export type DataCubeObservationsQueryVariables = Exact<{
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   locale: Scalars['String'];
-  dimensions?: Maybe<Array<Scalars['String']> | Scalars['String']>;
+  componentIris?: Maybe<Array<Scalars['String']> | Scalars['String']>;
   filters?: Maybe<Scalars['Filters']>;
   latest?: Maybe<Scalars['Boolean']>;
   limit?: Maybe<Scalars['Int']>;
@@ -1370,7 +1370,7 @@ export function useTemporalDimensionValuesQuery(options: Omit<Urql.UseQueryArgs<
   return Urql.useQuery<TemporalDimensionValuesQuery>({ query: TemporalDimensionValuesDocument, ...options });
 };
 export const DataCubeObservationsDocument = gql`
-    query DataCubeObservations($iri: String!, $sourceType: String!, $sourceUrl: String!, $locale: String!, $dimensions: [String!], $filters: Filters, $latest: Boolean, $limit: Int) {
+    query DataCubeObservations($iri: String!, $sourceType: String!, $sourceUrl: String!, $locale: String!, $componentIris: [String!], $filters: Filters, $latest: Boolean, $limit: Int) {
   dataCubeByIri(
     iri: $iri
     sourceType: $sourceType
@@ -1381,7 +1381,7 @@ export const DataCubeObservationsDocument = gql`
     observations(
       sourceType: $sourceType
       sourceUrl: $sourceUrl
-      dimensions: $dimensions
+      componentIris: $componentIris
       filters: $filters
       limit: $limit
     ) {
diff --git a/app/graphql/resolver-types.ts b/app/graphql/resolver-types.ts
index a3d7d284e..20c83809e 100644
--- a/app/graphql/resolver-types.ts
+++ b/app/graphql/resolver-types.ts
@@ -57,7 +57,7 @@ export type DataCubeObservationsArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   limit?: Maybe<Scalars['Int']>;
-  dimensions?: Maybe<Array<Scalars['String']>>;
+  componentIris?: Maybe<Array<Scalars['String']>>;
   filters?: Maybe<Scalars['Filters']>;
 };
 
diff --git a/app/graphql/resolvers/rdf.ts b/app/graphql/resolvers/rdf.ts
index 523bc918c..e03a17c30 100644
--- a/app/graphql/resolvers/rdf.ts
+++ b/app/graphql/resolvers/rdf.ts
@@ -120,7 +120,6 @@ export const possibleFilters: NonNullable<QueryResolvers["possibleFilters"]> =
         filters: queryFilters,
         limit: 1,
         raw: true,
-        dimensions: null,
         cache,
       });
 
@@ -254,7 +253,7 @@ export const dataCubeObservations: NonNullable<
   DataCubeResolvers["observations"]
 > = async (
   { cube, locale },
-  { limit, filters, dimensions },
+  { limit, filters, componentIris },
   { setup },
   info
 ) => {
@@ -265,7 +264,7 @@ export const dataCubeObservations: NonNullable<
     sparqlClient,
     filters: filters ?? undefined,
     limit: limit ?? undefined,
-    dimensions,
+    componentIris,
     cache,
   });
 
diff --git a/app/graphql/schema.graphql b/app/graphql/schema.graphql
index 0bd8b08cb..ea96ef124 100644
--- a/app/graphql/schema.graphql
+++ b/app/graphql/schema.graphql
@@ -43,7 +43,7 @@ type DataCube {
     sourceType: String!
     sourceUrl: String!
     limit: Int
-    dimensions: [String!]
+    componentIris: [String!]
     filters: Filters
   ): ObservationsQuery!
   dimensions(
diff --git a/app/rdf/queries.ts b/app/rdf/queries.ts
index ab56a690e..09b7cae97 100644
--- a/app/rdf/queries.ts
+++ b/app/rdf/queries.ts
@@ -466,7 +466,7 @@ export const getCubeObservations = async ({
   filters,
   limit,
   raw,
-  dimensions,
+  componentIris,
   cache,
 }: {
   cube: Cube;
@@ -478,7 +478,7 @@ export const getCubeObservations = async ({
   limit?: number;
   /** Returns IRIs instead of labels for NamedNodes  */
   raw?: boolean;
-  dimensions: Maybe<string[]> | undefined;
+  componentIris?: Maybe<string[]>;
   cache: LRUCache | undefined;
 }): Promise<{
   query: string;
@@ -495,7 +495,7 @@ export const getCubeObservations = async ({
   });
 
   const cubeDimensions = allResolvedDimensions.filter((d) =>
-    dimensions ? dimensions.includes(d.data.iri) : true
+    componentIris ? componentIris.includes(d.data.iri) : true
   );
 
   const serverFilters: typeof filters = {};
@@ -521,10 +521,9 @@ export const getCubeObservations = async ({
     ? buildFilters({ cube, view: cubeView, filters: dbFilters, locale })
     : [];
 
-  // Only choose dimensions that we really want
   const observationDimensions = buildDimensions({
     cubeView,
-    dimensions,
+    dimensions: componentIris,
     cubeDimensions,
     cube,
     locale,

From 5fdee14b8608d6dc53e717bf171867b15204b035 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Thu, 11 May 2023 10:22:59 +0200
Subject: [PATCH 09/11] fix: Fetch additional component iris for Map

---
 app/charts/shared/chart-helpers.tsx | 37 +++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/app/charts/shared/chart-helpers.tsx b/app/charts/shared/chart-helpers.tsx
index f3a9e86c1..a03efb6aa 100644
--- a/app/charts/shared/chart-helpers.tsx
+++ b/app/charts/shared/chart-helpers.tsx
@@ -12,7 +12,11 @@ import {
   InteractiveFiltersState,
   useInteractiveFilters,
 } from "@/charts/shared/use-interactive-filters";
-import { InteractiveFiltersTimeSlider } from "@/configurator";
+import {
+  CategoricalColorField,
+  InteractiveFiltersTimeSlider,
+  NumericalColorField,
+} from "@/configurator";
 import { parseDate } from "@/configurator/components/ui-helpers";
 import {
   ChartConfig,
@@ -25,6 +29,7 @@ import {
   InteractiveFiltersTimeRange,
   isAreaConfig,
   QueryFilters,
+  MapConfig,
 } from "@/configurator/config-types";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import { isTemporalDimension, Observation } from "@/domain/data";
@@ -86,9 +91,37 @@ export const getChartConfigFilterComponentIris = ({ filters }: ChartConfig) => {
   return Object.keys(filters);
 };
 
+const getMapChartConfigAdditionalFields = ({ fields }: MapConfig) => {
+  const { areaLayer, symbolLayer } = fields;
+  const additionalFields = [];
+
+  if (areaLayer) {
+    additionalFields.push(areaLayer.color.componentIri);
+  }
+
+  if (symbolLayer) {
+    if (symbolLayer.measureIri !== FIELD_VALUE_NONE) {
+      additionalFields.push(symbolLayer.measureIri);
+    }
+
+    if (["categorical", "numerical"].includes(symbolLayer.color.type)) {
+      additionalFields.push(
+        (symbolLayer.color as CategoricalColorField | NumericalColorField)
+          .componentIri
+      );
+    }
+  }
+
+  return additionalFields;
+};
+
 export const getChartConfigComponentIris = (chartConfig: ChartConfig) => {
   const { fields, interactiveFiltersConfig: IFConfig } = chartConfig;
   const fieldIris = Object.values(fields).map((d) => d.componentIri);
+  const additionalFieldIris =
+    chartConfig.chartType === "map"
+      ? getMapChartConfigAdditionalFields(chartConfig)
+      : [];
   const filterIris = getChartConfigFilterComponentIris(chartConfig);
   const IFKeys = IFConfig ? (Object.keys(IFConfig) as IFKey[]) : [];
   const IFIris: string[] = [];
@@ -117,7 +150,7 @@ export const getChartConfigComponentIris = (chartConfig: ChartConfig) => {
     });
   }
 
-  return uniq([...fieldIris, ...filterIris, ...IFIris]);
+  return uniq([...fieldIris, ...additionalFieldIris, ...filterIris, ...IFIris]);
 };
 
 export const usePlottableData = ({

From 63f20a453939d35eeeaf08014a0b7c59f513d3c2 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Mon, 15 May 2023 14:43:17 +0200
Subject: [PATCH 10/11] fix: Un-filter empty component iris

---
 app/charts/shared/chart-helpers.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/charts/shared/chart-helpers.tsx b/app/charts/shared/chart-helpers.tsx
index a03efb6aa..717987e2b 100644
--- a/app/charts/shared/chart-helpers.tsx
+++ b/app/charts/shared/chart-helpers.tsx
@@ -150,7 +150,11 @@ export const getChartConfigComponentIris = (chartConfig: ChartConfig) => {
     });
   }
 
-  return uniq([...fieldIris, ...additionalFieldIris, ...filterIris, ...IFIris]);
+  return uniq(
+    [...fieldIris, ...additionalFieldIris, ...filterIris, ...IFIris].filter(
+      Boolean
+    )
+  );
 };
 
 export const usePlottableData = ({

From 54a90925e7148eab28c9f3d39d8cb45085e366e2 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Mon, 15 May 2023 14:43:38 +0200
Subject: [PATCH 11/11] test: getChartConfigComponentIris

---
 app/charts/shared/chart-helpers.spec.tsx | 40 +++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/app/charts/shared/chart-helpers.spec.tsx b/app/charts/shared/chart-helpers.spec.tsx
index 9ffe383bf..086021094 100644
--- a/app/charts/shared/chart-helpers.spec.tsx
+++ b/app/charts/shared/chart-helpers.spec.tsx
@@ -5,12 +5,20 @@ import {
   getWideData,
   prepareQueryFilters,
   getMaybeTemporalDimensionValues,
+  getChartConfigComponentIris,
 } from "@/charts/shared/chart-helpers";
 import { InteractiveFiltersState } from "@/charts/shared/use-interactive-filters";
-import { ChartType, Filters, InteractiveFiltersConfig } from "@/configurator";
+import {
+  ChartType,
+  Filters,
+  InteractiveFiltersConfig,
+  LineConfig,
+  MapConfig,
+} from "@/configurator";
 import { FIELD_VALUE_NONE } from "@/configurator/constants";
 import { Observation } from "@/domain/data";
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
+import map1Fixture from "@/test/__fixtures/config/int/map-waldflasche.json";
 import line1Fixture from "@/test/__fixtures/config/prod/line-1.json";
 
 const makeCubeNsGetters = (cubeIri: string) => ({
@@ -182,3 +190,33 @@ describe("getMaybeTemporalDimensionValues", () => {
     expect(result).toEqual(dimension.values);
   });
 });
+
+describe("getChartConfigComponentIris", () => {
+  const lineConfig = line1Fixture.data.chartConfig as unknown as LineConfig;
+  const mapConfig = map1Fixture.data.chartConfig as unknown as MapConfig;
+
+  it("should return correct componentIris for line chart", () => {
+    const componentsIris = getChartConfigComponentIris(lineConfig);
+    expect(componentsIris).toEqual([
+      "http://environment.ld.admin.ch/foen/px/0703010000_105/dimension/0",
+      "http://environment.ld.admin.ch/foen/px/0703010000_105/measure/0",
+      "http://environment.ld.admin.ch/foen/px/0703010000_105/dimension/1",
+      "http://environment.ld.admin.ch/foen/px/0703010000_105/dimension/2",
+      "http://environment.ld.admin.ch/foen/px/0703010000_105/dimension/3",
+      "http://environment.ld.admin.ch/foen/px/0703010000_105/dimension/4",
+    ]);
+  });
+
+  it("should return correct componentIris for map chart", () => {
+    const componentsIris = getChartConfigComponentIris(mapConfig);
+    console.log(componentsIris);
+    expect(componentsIris).toEqual([
+      "https://environment.ld.admin.ch/foen/nfi/unitOfReference",
+      "https://environment.ld.admin.ch/foen/nfi/forestArea",
+      "https://environment.ld.admin.ch/foen/nfi/inventory",
+      "https://environment.ld.admin.ch/foen/nfi/struk",
+      "https://environment.ld.admin.ch/foen/nfi/grid",
+      "https://environment.ld.admin.ch/foen/nfi/unitOfEvaluation",
+    ]);
+  });
+});