From 5caec402cceaf6426526565f9baa8f01947d4089 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Fri, 22 Sep 2023 16:00:05 +0200
Subject: [PATCH 01/14] fix: Retrieve either ComponentsWithHierarchies or
 Components (cache)

---
 CHANGELOG.md                            |  1 +
 app/configurator/configurator-state.tsx | 33 ++++++++++++++-----------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e6c57eed0..b874b9dc0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 - Fixes
   - Cube checker now correctly checks if dimensions are present
+  - It's now possible to change the chart type for copied, non-hierarchical charts without having to open an options panel first
 
 # [3.22.6] - 2023-09-19
 
diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx
index ea01a42a8..8b36811f5 100644
--- a/app/configurator/configurator-state.tsx
+++ b/app/configurator/configurator-state.tsx
@@ -58,6 +58,9 @@ import { DimensionValue, isGeoDimension } from "@/domain/data";
 import { DEFAULT_DATA_SOURCE } from "@/domain/datasource";
 import { client } from "@/graphql/client";
 import {
+  ComponentsDocument,
+  ComponentsQuery,
+  ComponentsQueryVariables,
   ComponentsWithHierarchiesDocument,
   ComponentsWithHierarchiesQuery,
   ComponentsWithHierarchiesQueryVariables,
@@ -329,24 +332,26 @@ const getCachedMetadata = (
   draft: ConfiguratorStateConfiguringChart,
   locale: Locale
 ): DataCubeMetadataWithHierarchies | null => {
-  const metadataQuery = client.readQuery<
-    DataCubeMetadataQuery,
-    DataCubeMetadataQueryVariables
-  >(DataCubeMetadataDocument, {
-    iri: draft.dataSet,
-    locale,
-    sourceType: draft.dataSource.type,
-    sourceUrl: draft.dataSource.url,
-  });
-  const componentsQuery = client.readQuery<
-    ComponentsWithHierarchiesQuery,
-    ComponentsWithHierarchiesQueryVariables
-  >(ComponentsWithHierarchiesDocument, {
+  const variables = {
     iri: draft.dataSet,
     locale,
     sourceType: draft.dataSource.type,
     sourceUrl: draft.dataSource.url,
-  });
+  };
+  const metadataQuery = client.readQuery<
+    DataCubeMetadataQuery,
+    DataCubeMetadataQueryVariables
+  >(DataCubeMetadataDocument, variables);
+  // Some charts use hierarchical query, so we need to check for both.
+  const componentsQuery =
+    client.readQuery<
+      ComponentsWithHierarchiesQuery,
+      ComponentsWithHierarchiesQueryVariables
+    >(ComponentsWithHierarchiesDocument, variables) ??
+    client.readQuery<ComponentsQuery, ComponentsQueryVariables>(
+      ComponentsDocument,
+      variables
+    );
 
   return metadataQuery?.data?.dataCubeByIri &&
     componentsQuery?.data?.dataCubeByIri

From 873349a20b6f3ec155f55b868ed011b9f87685ee Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Tue, 26 Sep 2023 10:11:03 +0200
Subject: [PATCH 02/14] perf: Disable loading of dimension values for preview
 query

---
 CHANGELOG.md                           |  2 ++
 app/graphql/queries/data-cubes.graphql | 25 +++++++++++++--
 app/graphql/query-hooks.ts             | 42 +++++++++++++++++++++++---
 app/graphql/resolver-types.ts          | 17 +++++++++--
 app/graphql/resolvers/rdf.ts           |  6 +++-
 app/graphql/schema.graphql             | 13 ++++++++
 6 files changed, 94 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e6c57eed0..e496e2c0b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,8 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 - Fixes
   - Cube checker now correctly checks if dimensions are present
+- Performance
+  - Dataset preview should now load quicker as we no longer fetch dimension values along with it
 
 # [3.22.6] - 2023-09-19
 
diff --git a/app/graphql/queries/data-cubes.graphql b/app/graphql/queries/data-cubes.graphql
index ed35a11a3..b60f068c9 100644
--- a/app/graphql/queries/data-cubes.graphql
+++ b/app/graphql/queries/data-cubes.graphql
@@ -7,7 +7,12 @@ fragment dimensionMetadata on Dimension {
   dataType
   scaleType
   order
-  values(sourceType: $sourceType, sourceUrl: $sourceUrl, filters: $filters)
+  values(
+    sourceType: $sourceType
+    sourceUrl: $sourceUrl
+    filters: $filters
+    disableLoad: $disableValuesLoad
+  )
   unit
   related {
     iri
@@ -120,6 +125,7 @@ query DataCubePreview(
   $locale: String!
   $latest: Boolean
   $filters: Filters
+  $disableValuesLoad: Boolean = true
 ) {
   dataCubeByIri(
     iri: $iri
@@ -127,15 +133,24 @@ query DataCubePreview(
     sourceUrl: $sourceUrl
     locale: $locale
     latest: $latest
+    disableValuesLoad: $disableValuesLoad
   ) {
     iri
     title
     description
     publicationStatus
-    dimensions(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+    dimensions(
+      sourceType: $sourceType
+      sourceUrl: $sourceUrl
+      disableValuesLoad: $disableValuesLoad
+    ) {
       ...dimensionMetadata
     }
-    measures(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+    measures(
+      sourceType: $sourceType
+      sourceUrl: $sourceUrl
+      disableValuesLoad: $disableValuesLoad
+    ) {
       ...dimensionMetadata
     }
     observations(sourceType: $sourceType, sourceUrl: $sourceUrl, limit: 10) {
@@ -193,6 +208,7 @@ query Components(
   $latest: Boolean
   $filters: Filters
   $componentIris: [String!]
+  $disableValuesLoad: Boolean = false
 ) {
   dataCubeByIri(
     iri: $iri
@@ -200,11 +216,13 @@ query Components(
     sourceUrl: $sourceUrl
     locale: $locale
     latest: $latest
+    disableValuesLoad: $disableValuesLoad
   ) {
     dimensions(
       sourceType: $sourceType
       sourceUrl: $sourceUrl
       componentIris: $componentIris
+      disableValuesLoad: $disableValuesLoad
     ) {
       ...dimensionMetadata
     }
@@ -212,6 +230,7 @@ query Components(
       sourceType: $sourceType
       sourceUrl: $sourceUrl
       componentIris: $componentIris
+      disableValuesLoad: $disableValuesLoad
     ) {
       ...dimensionMetadata
     }
diff --git a/app/graphql/query-hooks.ts b/app/graphql/query-hooks.ts
index 3970f4392..12560b4f8 100644
--- a/app/graphql/query-hooks.ts
+++ b/app/graphql/query-hooks.ts
@@ -64,6 +64,7 @@ export type DataCubeDimensionsArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   componentIris?: Maybe<Array<Scalars['String']>>;
+  disableValuesLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -78,6 +79,7 @@ export type DataCubeMeasuresArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   componentIris?: Maybe<Array<Scalars['String']>>;
+  disableValuesLoad?: Maybe<Scalars['Boolean']>;
 };
 
 export type DataCubeOrganization = {
@@ -142,6 +144,7 @@ export type DimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -183,6 +186,7 @@ export type GeoCoordinatesDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -214,6 +218,7 @@ export type GeoShapesDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -258,6 +263,7 @@ export type NominalDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -291,6 +297,7 @@ export type NumericalMeasureValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -340,6 +347,7 @@ export type OrdinalDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -369,6 +377,7 @@ export type OrdinalMeasureValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -397,6 +406,7 @@ export type QueryDataCubeByIriArgs = {
   latest?: Maybe<Scalars['Boolean']>;
   filters?: Maybe<Scalars['Filters']>;
   componentIris?: Maybe<Array<Scalars['String']>>;
+  disableValuesLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -485,6 +495,7 @@ export type StandardErrorDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -516,6 +527,7 @@ export type TemporalDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -545,6 +557,7 @@ export type TemporalOrdinalDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -834,6 +847,7 @@ export type DataCubePreviewQueryVariables = Exact<{
   locale: Scalars['String'];
   latest?: Maybe<Scalars['Boolean']>;
   filters?: Maybe<Scalars['Filters']>;
+  disableValuesLoad?: Maybe<Scalars['Boolean']>;
 }>;
 
 
@@ -891,6 +905,7 @@ export type ComponentsQueryVariables = Exact<{
   latest?: Maybe<Scalars['Boolean']>;
   filters?: Maybe<Scalars['Filters']>;
   componentIris?: Maybe<Array<Scalars['String']> | Scalars['String']>;
+  disableValuesLoad?: Maybe<Scalars['Boolean']>;
 }>;
 
 
@@ -1153,7 +1168,12 @@ export const DimensionMetadataFragmentDoc = gql`
   dataType
   scaleType
   order
-  values(sourceType: $sourceType, sourceUrl: $sourceUrl, filters: $filters)
+  values(
+    sourceType: $sourceType
+    sourceUrl: $sourceUrl
+    filters: $filters
+    disableLoad: $disableValuesLoad
+  )
   unit
   related {
     iri
@@ -1271,22 +1291,31 @@ export function useDataCubesQuery(options: Omit<Urql.UseQueryArgs<DataCubesQuery
   return Urql.useQuery<DataCubesQuery>({ query: DataCubesDocument, ...options });
 };
 export const DataCubePreviewDocument = gql`
-    query DataCubePreview($iri: String!, $sourceType: String!, $sourceUrl: String!, $locale: String!, $latest: Boolean, $filters: Filters) {
+    query DataCubePreview($iri: String!, $sourceType: String!, $sourceUrl: String!, $locale: String!, $latest: Boolean, $filters: Filters, $disableValuesLoad: Boolean = true) {
   dataCubeByIri(
     iri: $iri
     sourceType: $sourceType
     sourceUrl: $sourceUrl
     locale: $locale
     latest: $latest
+    disableValuesLoad: $disableValuesLoad
   ) {
     iri
     title
     description
     publicationStatus
-    dimensions(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+    dimensions(
+      sourceType: $sourceType
+      sourceUrl: $sourceUrl
+      disableValuesLoad: $disableValuesLoad
+    ) {
       ...dimensionMetadata
     }
-    measures(sourceType: $sourceType, sourceUrl: $sourceUrl) {
+    measures(
+      sourceType: $sourceType
+      sourceUrl: $sourceUrl
+      disableValuesLoad: $disableValuesLoad
+    ) {
       ...dimensionMetadata
     }
     observations(sourceType: $sourceType, sourceUrl: $sourceUrl, limit: 10) {
@@ -1340,18 +1369,20 @@ 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, $componentIris: [String!]) {
+    query Components($iri: String!, $sourceType: String!, $sourceUrl: String!, $locale: String!, $latest: Boolean, $filters: Filters, $componentIris: [String!], $disableValuesLoad: Boolean = false) {
   dataCubeByIri(
     iri: $iri
     sourceType: $sourceType
     sourceUrl: $sourceUrl
     locale: $locale
     latest: $latest
+    disableValuesLoad: $disableValuesLoad
   ) {
     dimensions(
       sourceType: $sourceType
       sourceUrl: $sourceUrl
       componentIris: $componentIris
+      disableValuesLoad: $disableValuesLoad
     ) {
       ...dimensionMetadata
     }
@@ -1359,6 +1390,7 @@ export const ComponentsDocument = gql`
       sourceType: $sourceType
       sourceUrl: $sourceUrl
       componentIris: $componentIris
+      disableValuesLoad: $disableValuesLoad
     ) {
       ...dimensionMetadata
     }
diff --git a/app/graphql/resolver-types.ts b/app/graphql/resolver-types.ts
index d70feb5b6..2a66d770c 100644
--- a/app/graphql/resolver-types.ts
+++ b/app/graphql/resolver-types.ts
@@ -66,6 +66,7 @@ export type DataCubeDimensionsArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   componentIris?: Maybe<Array<Scalars['String']>>;
+  disableValuesLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -80,6 +81,7 @@ export type DataCubeMeasuresArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   componentIris?: Maybe<Array<Scalars['String']>>;
+  disableValuesLoad?: Maybe<Scalars['Boolean']>;
 };
 
 export type DataCubeOrganization = {
@@ -144,6 +146,7 @@ export type DimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -185,6 +188,7 @@ export type GeoCoordinatesDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -216,6 +220,7 @@ export type GeoShapesDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -260,6 +265,7 @@ export type NominalDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -293,6 +299,7 @@ export type NumericalMeasureValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -342,6 +349,7 @@ export type OrdinalDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -371,6 +379,7 @@ export type OrdinalMeasureValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -399,6 +408,7 @@ export type QueryDataCubeByIriArgs = {
   latest?: Maybe<Scalars['Boolean']>;
   filters?: Maybe<Scalars['Filters']>;
   componentIris?: Maybe<Array<Scalars['String']>>;
+  disableValuesLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -487,6 +497,7 @@ export type StandardErrorDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -518,6 +529,7 @@ export type TemporalDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -547,6 +559,7 @@ export type TemporalOrdinalDimensionValuesArgs = {
   sourceType: Scalars['String'];
   sourceUrl: Scalars['String'];
   filters?: Maybe<Scalars['Filters']>;
+  disableLoad?: Maybe<Scalars['Boolean']>;
 };
 
 
@@ -636,6 +649,7 @@ export type ResolversTypes = ResolversObject<{
   DataCube: ResolverTypeWrapper<ResolvedDataCube>;
   String: ResolverTypeWrapper<Scalars['String']>;
   Int: ResolverTypeWrapper<Scalars['Int']>;
+  Boolean: ResolverTypeWrapper<Scalars['Boolean']>;
   DataCubeOrganization: ResolverTypeWrapper<DataCubeOrganization>;
   DataCubePublicationStatus: DataCubePublicationStatus;
   DataCubeResult: ResolverTypeWrapper<Omit<DataCubeResult, 'dataCube'> & { dataCube: ResolversTypes['DataCube'] }>;
@@ -645,7 +659,6 @@ export type ResolversTypes = ResolversObject<{
   DataCubeTheme: ResolverTypeWrapper<DataCubeTheme>;
   DatasetCount: ResolverTypeWrapper<DatasetCount>;
   Dimension: ResolverTypeWrapper<ResolvedDimension>;
-  Boolean: ResolverTypeWrapper<Scalars['Boolean']>;
   DimensionValue: ResolverTypeWrapper<Scalars['DimensionValue']>;
   FilterValue: ResolverTypeWrapper<Scalars['FilterValue']>;
   Filters: ResolverTypeWrapper<Scalars['Filters']>;
@@ -679,6 +692,7 @@ export type ResolversParentTypes = ResolversObject<{
   DataCube: ResolvedDataCube;
   String: Scalars['String'];
   Int: Scalars['Int'];
+  Boolean: Scalars['Boolean'];
   DataCubeOrganization: DataCubeOrganization;
   DataCubeResult: Omit<DataCubeResult, 'dataCube'> & { dataCube: ResolversParentTypes['DataCube'] };
   Float: Scalars['Float'];
@@ -686,7 +700,6 @@ export type ResolversParentTypes = ResolversObject<{
   DataCubeTheme: DataCubeTheme;
   DatasetCount: DatasetCount;
   Dimension: ResolvedDimension;
-  Boolean: Scalars['Boolean'];
   DimensionValue: Scalars['DimensionValue'];
   FilterValue: Scalars['FilterValue'];
   Filters: Scalars['Filters'];
diff --git a/app/graphql/resolvers/rdf.ts b/app/graphql/resolvers/rdf.ts
index 080983814..95e80be32 100644
--- a/app/graphql/resolvers/rdf.ts
+++ b/app/graphql/resolvers/rdf.ts
@@ -333,7 +333,11 @@ export const hierarchy: NonNullable<DimensionResolvers["hierarchy"]> = async (
 
 export const dimensionValues: NonNullable<
   NonNullable<Resolvers["Dimension"]>["values"]
-> = async (parent, { filters }, { setup }, info) => {
+> = async (parent, { filters, disableLoad }, { setup }, info) => {
+  if (disableLoad) {
+    return [];
+  }
+
   const { loaders, sparqlClient, cache } = await setup(info);
   // Different loader if we have filters or not
   const loader = getDimensionValuesLoader(
diff --git a/app/graphql/schema.graphql b/app/graphql/schema.graphql
index a926324bc..51c33d7c4 100644
--- a/app/graphql/schema.graphql
+++ b/app/graphql/schema.graphql
@@ -57,6 +57,7 @@ type DataCube {
     sourceType: String!
     sourceUrl: String!
     componentIris: [String!]
+    disableValuesLoad: Boolean
   ): [Dimension!]!
   dimensionByIri(
     iri: String!
@@ -67,6 +68,7 @@ type DataCube {
     sourceType: String!
     sourceUrl: String!
     componentIris: [String!]
+    disableValuesLoad: Boolean
   ): [Measure!]!
   themes: [DataCubeTheme!]!
 }
@@ -102,6 +104,7 @@ interface Dimension {
     sourceType: String!
     sourceUrl: String!
     filters: Filters
+    disableLoad: Boolean
   ): [DimensionValue!]!
   related: [RelatedDimension!]
   hierarchy(sourceType: String!, sourceUrl: String!): [HierarchyValue!]
@@ -128,6 +131,7 @@ type GeoCoordinatesDimension implements Dimension {
     sourceType: String!
     sourceUrl: String!
     filters: Filters
+    disableLoad: Boolean
   ): [DimensionValue!]!
   geoCoordinates: [GeoCoordinates!]
   related: [RelatedDimension!]
@@ -154,6 +158,7 @@ type GeoShapesDimension implements Dimension {
     sourceType: String!
     sourceUrl: String!
     filters: Filters
+    disableLoad: Boolean
   ): [DimensionValue!]!
   geoShapes: GeoShapes
   related: [RelatedDimension!]
@@ -174,6 +179,7 @@ type NominalDimension implements Dimension {
     sourceType: String!
     sourceUrl: String!
     filters: Filters
+    disableLoad: Boolean
   ): [DimensionValue!]!
   related: [RelatedDimension!]
   hierarchy(sourceType: String!, sourceUrl: String!): [HierarchyValue!]
@@ -193,6 +199,7 @@ type OrdinalDimension implements Dimension {
     sourceType: String!
     sourceUrl: String!
     filters: Filters
+    disableLoad: Boolean
   ): [DimensionValue!]!
   related: [RelatedDimension!]
   hierarchy(sourceType: String!, sourceUrl: String!): [HierarchyValue!]
@@ -212,6 +219,7 @@ type StandardErrorDimension implements Dimension {
     sourceType: String!
     sourceUrl: String!
     filters: Filters
+    disableLoad: Boolean
   ): [DimensionValue!]!
   related: [RelatedDimension!]
   hierarchy(sourceType: String!, sourceUrl: String!): [HierarchyValue!]
@@ -243,6 +251,7 @@ type TemporalDimension implements Dimension {
     sourceType: String!
     sourceUrl: String!
     filters: Filters
+    disableLoad: Boolean
   ): [DimensionValue!]!
   related: [RelatedDimension!]
   hierarchy(sourceType: String!, sourceUrl: String!): [HierarchyValue!]
@@ -262,6 +271,7 @@ type TemporalOrdinalDimension implements Dimension {
     sourceType: String!
     sourceUrl: String!
     filters: Filters
+    disableLoad: Boolean
   ): [DimensionValue!]!
   related: [RelatedDimension!]
   hierarchy(sourceType: String!, sourceUrl: String!): [HierarchyValue!]
@@ -287,6 +297,7 @@ type NumericalMeasure implements Dimension {
     sourceType: String!
     sourceUrl: String!
     filters: Filters
+    disableLoad: Boolean
   ): [DimensionValue!]!
   related: [RelatedDimension!]
   hierarchy(sourceType: String!, sourceUrl: String!): [HierarchyValue!]
@@ -306,6 +317,7 @@ type OrdinalMeasure implements Dimension {
     sourceType: String!
     sourceUrl: String!
     filters: Filters
+    disableLoad: Boolean
   ): [DimensionValue!]!
   related: [RelatedDimension!]
   hierarchy(sourceType: String!, sourceUrl: String!): [HierarchyValue!]
@@ -355,6 +367,7 @@ type Query {
     latest: Boolean = true
     filters: Filters
     componentIris: [String!]
+    disableValuesLoad: Boolean
   ): DataCube
   possibleFilters(
     iri: String!

From 8b8bbb69c7373fc46fd647180237c343a0a4db9d Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Tue, 26 Sep 2023 12:15:07 +0200
Subject: [PATCH 03/14] fix: E2E color -> segmentation

---
 e2e/abbreviations.spec.ts       | 4 ++--
 e2e/color-mapping-maps.spec.ts  | 4 +++-
 e2e/filter-position.spec.ts     | 2 +-
 e2e/ordinal-measures.spec.ts    | 2 +-
 e2e/sorting.spec.ts             | 8 ++++----
 e2e/symbol-layer-colors.spec.ts | 2 +-
 6 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/e2e/abbreviations.spec.ts b/e2e/abbreviations.spec.ts
index 41f5c0d60..dd6653183 100644
--- a/e2e/abbreviations.spec.ts
+++ b/e2e/abbreviations.spec.ts
@@ -47,7 +47,7 @@ test("it should be possible to enable abbreviations for colors & x field (column
 
   await actions.drawer.close();
 
-  await actions.editor.selectActiveField("Color");
+  await actions.editor.selectActiveField("Segmentation");
 
   await (await selectors.panels.drawer().within().findByText("None")).click();
 
@@ -80,7 +80,7 @@ test("hierarchies: it should be possible to enable abbreviations for colors", as
   );
 
   await selectors.edition.drawerLoaded();
-  await actions.editor.selectActiveField("Color");
+  await actions.editor.selectActiveField("Segmentation");
 
   await (await selectors.panels.drawer().within().findByText("None")).click();
 
diff --git a/e2e/color-mapping-maps.spec.ts b/e2e/color-mapping-maps.spec.ts
index c9b9f14a4..6db13af9e 100644
--- a/e2e/color-mapping-maps.spec.ts
+++ b/e2e/color-mapping-maps.spec.ts
@@ -26,7 +26,9 @@ test("should be possible to de-select options from color component in maps", asy
 
   await selectors.chart.loaded();
 
-  const colorControlSection = within(selectors.edition.controlSection("Color"));
+  const colorControlSection = within(
+    selectors.edition.controlSection("Segmentation")
+  );
 
   const filtersButton = await colorControlSection.findByText(
     "Edit filters",
diff --git a/e2e/filter-position.spec.ts b/e2e/filter-position.spec.ts
index dd79e76bf..7a7bade26 100644
--- a/e2e/filter-position.spec.ts
+++ b/e2e/filter-position.spec.ts
@@ -10,7 +10,7 @@ test("Filters should be sorted by position", async ({ selectors, actions }) => {
 
   await selectors.edition.drawerLoaded();
 
-  await actions.editor.selectActiveField("Color");
+  await actions.editor.selectActiveField("Segmentation");
 
   const selectorLocator = await selectors.panels
     .drawer()
diff --git a/e2e/ordinal-measures.spec.ts b/e2e/ordinal-measures.spec.ts
index 57411a65b..49be77084 100644
--- a/e2e/ordinal-measures.spec.ts
+++ b/e2e/ordinal-measures.spec.ts
@@ -69,7 +69,7 @@ describe("viewing a dataset with only ordinal measures", () => {
     // Chart needs to re-load when symbol layer is selected
     await selectors.chart.loaded();
 
-    await within(selectors.edition.controlSection("Color"))
+    await within(selectors.edition.controlSection("Segmentation"))
       .getByText("None")
       .click();
 
diff --git a/e2e/sorting.spec.ts b/e2e/sorting.spec.ts
index 82773258f..d2db422b2 100644
--- a/e2e/sorting.spec.ts
+++ b/e2e/sorting.spec.ts
@@ -32,11 +32,11 @@ test("Segment sorting", async ({
   for (const chartType of ["Columns", "Lines", "Areas", "Pie"] as const) {
     await selectors.edition.drawerLoaded();
     await actions.editor.changeChartType(chartType);
-    await actions.editor.selectActiveField("Color");
+    await actions.editor.selectActiveField("Segmentation");
 
     // Switch color on the first chart
     if (chartType === "Columns") {
-      await within(selectors.edition.controlSection("Color"))
+      await within(selectors.edition.controlSection("Segmentation"))
         .getByText("None")
         .click();
 
@@ -92,11 +92,11 @@ test("Segment sorting with hierarchy", async ({
   );
 
   await selectors.edition.drawerLoaded();
-  await actions.editor.selectActiveField("Color");
+  await actions.editor.selectActiveField("Segmentation");
 
   await sleep(3_000);
 
-  const colorSection = selectors.edition.controlSection("Color");
+  const colorSection = selectors.edition.controlSection("Segmentation");
   await within(colorSection).getByText("None").click();
 
   await actions.mui.selectOption("Region");
diff --git a/e2e/symbol-layer-colors.spec.ts b/e2e/symbol-layer-colors.spec.ts
index fd343b017..63932f55c 100644
--- a/e2e/symbol-layer-colors.spec.ts
+++ b/e2e/symbol-layer-colors.spec.ts
@@ -18,7 +18,7 @@ test("Selecting SymbolLayer colors> should be possible to select geo dimension a
 
   await selectors.chart.loaded();
 
-  await within(selectors.edition.controlSection("Color"))
+  await within(selectors.edition.controlSection("Segmentation"))
     .getByText("None")
     .click();
 

From 22a456547ccae48e1044e60b24fbf70678e37673 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 27 Sep 2023 12:01:18 +0200
Subject: [PATCH 04/14] fix: Use the same y padding across different filters

---
 app/components/select-tree.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/select-tree.tsx b/app/components/select-tree.tsx
index a2538bc4b..7aa454776 100644
--- a/app/components/select-tree.tsx
+++ b/app/components/select-tree.tsx
@@ -481,7 +481,7 @@ function SelectTree({
   return (
     <div>
       {label && (
-        <Label htmlFor={id!} smaller sx={{ mb: 1 }}>
+        <Label htmlFor={id!} smaller sx={{ my: 1 }}>
           {label} {controls}
         </Label>
       )}

From 971da3d8d5a6ff235d41840cc21d0b91cb7040ea Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Wed, 27 Sep 2023 12:02:24 +0200
Subject: [PATCH 05/14] docs: Update CHANGELOG

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b874b9dc0..d309f828e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 - Fixes
   - Cube checker now correctly checks if dimensions are present
   - It's now possible to change the chart type for copied, non-hierarchical charts without having to open an options panel first
+  - Interactive filters are now aligned correctly (y axis)
 
 # [3.22.6] - 2023-09-19
 

From 46ac6b14e3b7b29f14d61c40da8edc84fbf2b8e8 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Fri, 29 Sep 2023 07:57:18 +0200
Subject: [PATCH 06/14] docs: Update CHANGELOG

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 336633642..dc324c66b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,10 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 ## Unreleased
 
+Nothing yet.
+
+# [3.22.8] - 2023-09-29
+
 - Fixes
   - Cube checker now correctly checks if dimensions are present
   - It's now possible to change the chart type for copied, non-hierarchical charts without having to open an options panel first

From e15de359109df353efd3ddd3bc1f56b7963318e1 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Fri, 29 Sep 2023 07:57:31 +0200
Subject: [PATCH 07/14] v3.22.8

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 42c8244ea..427bee5e2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@visualize-admin/visualization-tool",
-  "version": "3.22.7",
+  "version": "3.22.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/visualize-admin/visualization-tool.git"

From cbb1e0e5194858ee5ae83d02503d7eabc197b2d2 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Fri, 6 Oct 2023 11:22:20 +0200
Subject: [PATCH 08/14] chore: Add time measuring to SPARQLClientStream and
 CONSTRUCT queries

---
 CHANGELOG.md                   |  3 +-
 app/gql-flamegraph/devtool.tsx | 87 ++++++++++++++++------------------
 app/graphql/context.tsx        | 20 ++++++++
 app/rdf/query-hierarchies.ts   |  5 +-
 4 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc324c66b..cb76e64fa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,8 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 ## Unreleased
 
-Nothing yet.
+- Maintenance
+  - GQL debug panel now includes queries fired through SPARQLClientStream (e.g. hierarchies) and CONSTRUCT queries
 
 # [3.22.8] - 2023-09-29
 
diff --git a/app/gql-flamegraph/devtool.tsx b/app/gql-flamegraph/devtool.tsx
index ee1103b64..703290405 100644
--- a/app/gql-flamegraph/devtool.tsx
+++ b/app/gql-flamegraph/devtool.tsx
@@ -1,43 +1,42 @@
 import { TabContext, TabList, TabPanel } from "@mui/lab";
 import {
   Accordion,
-  AccordionSummary,
   AccordionDetails,
-  Typography,
+  AccordionProps,
+  AccordionSummary,
   Box,
+  Button,
+  Divider,
   Drawer,
-  AccordionProps,
-  IconButton,
   Grow,
+  IconButton,
   IconButtonProps,
   Link,
   LinkProps,
+  Switch,
+  SwitchProps,
   Tab,
-  Button,
-  Divider,
+  Typography,
 } from "@mui/material";
-import { Switch, SwitchProps } from "@mui/material";
 import { Group } from "@visx/group";
 import { Text } from "@visx/text";
 import { scaleLinear } from "d3-scale";
-import { OperationDefinitionNode } from "graphql";
-import { print } from "graphql";
+import { OperationDefinitionNode, print } from "graphql";
 import maxBy from "lodash/maxBy";
 import minBy from "lodash/minBy";
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
 import mitt from "mitt";
-import React, { useEffect, useRef, useState } from "react";
-import { useMemo } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Exchange, Operation, OperationResult } from "urql";
 import { pipe, tap } from "wonka";
 
 import useDisclosure from "@/components/use-disclosure";
-import { useFlag, flag, useFlags } from "@/flags";
+import { flag, useFlag, useFlags } from "@/flags";
 import { RequestQueryMeta } from "@/graphql/query-meta";
 import useEvent from "@/utils/use-event";
 
-export type Timings = Record<
+type Timings = Record<
   string,
   { start: number; end: number; children?: Timings }
 >;
@@ -115,35 +114,34 @@ const Flamegraph = ({
   }, [timings]);
 
   const barHeight = 15;
+
   return (
-    <>
-      <Box
-        sx={{
-          position: "relative",
-          "& svg text": { fontSize: "10px" },
-        }}
-      >
-        <svg width={900} height={50 + rects.length * barHeight}>
-          <g>
-            {rects.map((r, i) => (
-              <Group left={r.x0} top={i * barHeight} key={i}>
-                <rect
-                  x={0}
-                  y={0}
-                  height={barHeight}
-                  width={r.x1 - r.x0}
-                  fill="#ccc"
-                />
-                <Text verticalAnchor="start" y={2}>
-                  {`${r.duration}ms - ${r.path.join(">")}
+    <Box
+      sx={{
+        position: "relative",
+        "& svg text": { fontSize: "10px" },
+      }}
+    >
+      <svg width={900} height={50 + rects.length * barHeight}>
+        <g>
+          {rects.map((r, i) => (
+            <Group left={r.x0} top={i * barHeight} key={i}>
+              <rect
+                x={0}
+                y={0}
+                height={barHeight}
+                width={r.x1 - r.x0}
+                fill="#ccc"
+              />
+              <Text verticalAnchor="start" y={2}>
+                {`${r.duration}ms - ${r.path.join(">")}
           `}
-                </Text>
-              </Group>
-            ))}
-          </g>{" "}
-        </svg>
-      </Box>
-    </>
+              </Text>
+            </Group>
+          ))}
+        </g>{" "}
+      </svg>
+    </Box>
   );
 };
 
@@ -200,6 +198,7 @@ const AccordionOperation = ({
     }
     return maxBy(all, (x) => x.end)?.end! - minBy(all, (x) => x.start)?.start!;
   }, [result?.extensions?.timings]);
+
   return (
     <Accordion {...accordionProps}>
       <AccordionSummary>
@@ -269,7 +268,7 @@ const AccordionOperation = ({
                 SPARQL queries ({result?.extensions?.queries.length})
               </Typography>
               <Queries
-                queries={sortBy(result?.extensions?.queries, (q) => {
+                queries={sortBy(result?.extensions.queries, (q) => {
                   return -(q.endTime - q.startTime);
                 })}
               />
@@ -281,11 +280,7 @@ const AccordionOperation = ({
   );
 };
 
-const Queries = ({
-  queries,
-}: {
-  queries: { startTime: number; endTime: number; text: string }[];
-}) => {
+const Queries = ({ queries }: { queries: RequestQueryMeta[] }) => {
   return (
     <div>
       {queries.map((q, i) => {
diff --git a/app/graphql/context.tsx b/app/graphql/context.tsx
index c5116a113..95003b860 100644
--- a/app/graphql/context.tsx
+++ b/app/graphql/context.tsx
@@ -112,11 +112,31 @@ const setupSparqlClients = (
     saveTimingToContext
   );
 
+  sparqlClient.query.construct = timed(
+    sparqlClient.query.construct,
+    saveTimingToContext
+  );
+
+  sparqlClientStream.query.select = timed(
+    sparqlClientStream.query.select,
+    saveTimingToContext
+  );
+
+  sparqlClientStream.query.construct = timed(
+    sparqlClientStream.query.construct,
+    saveTimingToContext
+  );
+
   geoSparqlClient.query.select = timed(
     geoSparqlClient.query.select,
     saveTimingToContext
   );
 
+  geoSparqlClient.query.construct = timed(
+    geoSparqlClient.query.construct,
+    saveTimingToContext
+  );
+
   return { sparqlClient, sparqlClientStream, geoSparqlClient };
 };
 
diff --git a/app/rdf/query-hierarchies.ts b/app/rdf/query-hierarchies.ts
index c075081cb..b73af0dfb 100644
--- a/app/rdf/query-hierarchies.ts
+++ b/app/rdf/query-hierarchies.ts
@@ -19,9 +19,9 @@ import { ResolvedDimension } from "@/graphql/shared-types";
 import * as ns from "./namespace";
 import { getCubeDimensionValuesWithMetadata } from "./queries";
 import {
-  pruneTree,
-  mapTree,
   getOptionsFromTree,
+  mapTree,
+  pruneTree,
   regroupTrees,
 } from "./tree-utils";
 
@@ -118,6 +118,7 @@ export const queryHierarchy = async (
   if (hierarchies.length === 0) {
     return null;
   }
+
   const dimensionValuesWithLabels = await getCubeDimensionValuesWithMetadata({
     cube: rdimension.cube,
     dimension: rdimension.dimension,

From 1e942dab43dff668db976a2e271429a778f3f107 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Fri, 6 Oct 2023 13:15:05 +0200
Subject: [PATCH 09/14] fix: Infinite loading of cascading filters

...need to spread the object to force re-load of the components.
---
 CHANGELOG.md                             |  3 ++-
 app/charts/shared/chart-data-filters.tsx | 17 +++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc324c66b..a685b20b0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,8 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 ## Unreleased
 
-Nothing yet.
+- Fixes
+  - Cascading filters are not stuck anymore in the loading mode in some cases
 
 # [3.22.8] - 2023-09-29
 
diff --git a/app/charts/shared/chart-data-filters.tsx b/app/charts/shared/chart-data-filters.tsx
index fcf5518a0..e019534e9 100644
--- a/app/charts/shared/chart-data-filters.tsx
+++ b/app/charts/shared/chart-data-filters.tsx
@@ -48,6 +48,7 @@ import {
   useInteractiveFiltersRaw,
 } from "@/stores/interactive-filters";
 import { hierarchyToOptions } from "@/utils/hierarchy";
+import useEvent from "@/utils/use-event";
 
 type ChartDataFiltersProps = {
   dataSet: string;
@@ -227,11 +228,11 @@ const DataFilter = (props: DataFilterProps) => {
   const dimension = data?.dataCubeByIri?.dimensionByIri;
   const hierarchy = data?.dataCubeByIri?.dimensionByIri?.hierarchy;
 
-  const setDataFilter = (
-    e: SelectChangeEvent<unknown> | { target: { value: string } }
-  ) => {
-    updateDataFilter(dimensionIri, e.target.value as string);
-  };
+  const setDataFilter = useEvent(
+    (e: SelectChangeEvent<unknown> | { target: { value: string } }) => {
+      updateDataFilter(dimensionIri, e.target.value as string);
+    }
+  );
 
   const configFilter = dimension
     ? chartConfig.filters[dimension.iri]
@@ -263,9 +264,9 @@ const DataFilter = (props: DataFilterProps) => {
     dimension?.values,
     dimensionIri,
     fetching,
-    updateDataFilter,
-    // Also reload when the config value changes.
+    setDataFilter,
     configFilterValue,
+    updateDataFilter,
   ]);
 
   return dimension ? (
@@ -603,7 +604,7 @@ const useEnsurePossibleInteractiveFilters = (
 
       // We need to get the values dynamically, as they can get updated by
       // useSyncInteractiveFilters and this callback runs with old value.
-      const dataFilters = IFRaw.getState().dataFilters;
+      const dataFilters = { ...IFRaw.getState().dataFilters };
 
       if (!isEqual(filters, interactiveFilters) && !isEmpty(filters)) {
         for (const [k, v] of Object.entries(filters)) {

From c309e6d80afaefe6cd40af3a09979a7894fde238 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Fri, 6 Oct 2023 15:31:28 +0200
Subject: [PATCH 10/14] feat: Allow DebugPanel to be visible when
 flag__debug=true

---
 app/components/debug-panel/DebugPanel.tsx | 18 ++++++--------
 app/components/debug-panel/index.tsx      | 30 ++++++++++++++++-------
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/app/components/debug-panel/DebugPanel.tsx b/app/components/debug-panel/DebugPanel.tsx
index 533d74006..83179d8b7 100644
--- a/app/components/debug-panel/DebugPanel.tsx
+++ b/app/components/debug-panel/DebugPanel.tsx
@@ -165,13 +165,14 @@ DESCRIBE <${configuratorState.dataSet ?? ""}>`
   );
 };
 
-const DebugPanel = ({
-  configurator = false,
-  interactiveFilters = false,
-}: {
+export type DebugPanelProps = {
   configurator?: Boolean;
   interactiveFilters?: Boolean;
-}) => {
+};
+
+const DebugPanel = (props: DebugPanelProps) => {
+  const { configurator = false, interactiveFilters = false } = props;
+
   return (
     <Box
       sx={{
@@ -198,9 +199,4 @@ const DebugPanel = ({
   );
 };
 
-const DebugPanelNull = () => null;
-
-const ExportedDebugPanel =
-  process.env.NODE_ENV === "development" ? DebugPanel : DebugPanelNull;
-
-export default ExportedDebugPanel;
+export default DebugPanel;
diff --git a/app/components/debug-panel/index.tsx b/app/components/debug-panel/index.tsx
index 32a1cf1ce..944dfbc65 100644
--- a/app/components/debug-panel/index.tsx
+++ b/app/components/debug-panel/index.tsx
@@ -2,12 +2,24 @@ import { CircularProgress } from "@mui/material";
 import dynamic from "next/dynamic";
 import { Suspense } from "react";
 
-const LazyDebugPanel = dynamic(() => import("./DebugPanel"));
-
-export default process.env.NODE_ENV === "development"
-  ? (props: React.ComponentProps<typeof LazyDebugPanel>) => (
-      <Suspense fallback={<CircularProgress />}>
-        <LazyDebugPanel {...props} />
-      </Suspense>
-    )
-  : () => null;
+import { flag } from "@/flags";
+
+import { DebugPanelProps } from "./DebugPanel";
+
+const LazyDebugPanel = dynamic(() => import("./DebugPanel"), { ssr: false });
+
+const DebugPanel = (props: DebugPanelProps) => {
+  const shouldShow = flag("debug") || process.env.NODE_ENV === "development";
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  return (
+    <Suspense fallback={<CircularProgress />}>
+      <LazyDebugPanel {...props} />
+    </Suspense>
+  );
+};
+
+export default DebugPanel;

From 777149b48a16c75a682e9ff1f53770271e170429 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Fri, 6 Oct 2023 15:31:46 +0200
Subject: [PATCH 11/14] docs: Add chart preview via API docs

---
 app/docs/chart-preview-via-api.mdx | 160 +++++++++++++++++++++++++++++
 app/pages/docs/index.tsx           |   5 +
 2 files changed, 165 insertions(+)
 create mode 100644 app/docs/chart-preview-via-api.mdx

diff --git a/app/docs/chart-preview-via-api.mdx b/app/docs/chart-preview-via-api.mdx
new file mode 100644
index 000000000..1f1913b3e
--- /dev/null
+++ b/app/docs/chart-preview-via-api.mdx
@@ -0,0 +1,160 @@
+<style>{`
+  table:not([class]) {
+     margin-top: 1rem;
+     font-size: 0.875rem;
+     cell-spacing: none;
+     border-spacing: 0;
+     border-collapse: collapse;
+  }
+
+  table:not([class]) tr:nth-child(2n) {
+    background: #eee;
+  }
+
+  table:not([class]) td, table:not([class]) th {
+    border-bottom: #ccc 1px solid;
+    margin-top: 0;
+    padding: 0.25rem 0.5rem;
+  }
+
+  table:not([class]) tr {
+    margin-bottom: 0;
+  }
+
+  li > code {
+    font-size: 0.875rem;
+  }
+`}</style>
+
+While usually you'll want to publish your chart, sometimes you might want to simply preview it, without going through the publishing process.
+This could be especially helpful to programatically generate charts based on many different configuration options.
+Visualize offers a way to preview charts without publishing them, by using a custom API.
+
+## iframe
+
+**Demo**: Visit <a href="/_preview" target="_blank">`/_preview`</a> to see a page with an iframe containing a chart preview.
+
+This method works by pointing an iframe to the `/preview` page, and posting a message with the chart state to the iframe window on load.
+
+<CodeSpecimen
+  lang="js"
+  raw
+  rawBody={`const iframe = document.getElementById("chart");
+iframe.onload = () => {
+  const iframeWindow = iframe?.contentWindow;
+  if (iframeWindow) {
+    iframeWindow.postMessage(chartState, "*");
+  }
+};
+`}
+/>
+
+## POST request
+
+**Demo**: Visit <a href="/_preview_post" target="_blank">`/_preview_post`</a> to see a page with two buttons that open a new page with a chart preview after clicking.
+
+This method works by sending a POST request to `/preview_post` page with chart state when clicking on a form button.
+The `/preview_post` page retrieves the content of a request in `getServerSideProps` and renders a preview of a chart.
+
+It's important to only use one input inside a form (as we split the string by `=`).
+
+<CodeSpecimen
+  lang="css"
+  raw
+  rawBody={`<form method="post" action="/preview_post" target="_blank">
+  <input
+    type="hidden"
+    name="chartState"
+    value={JSON.stringify(photovoltaikanlagenState)}
+  />
+  <input type="submit" value="☀️ Preview a Photovoltaikanlagen chart" />
+</form>`}
+/>
+
+### Chart config schema
+
+As the application constantly evolves, the chart config schema might change.
+You can find the latest version of the schema in the [config-types.ts](https://github.com/visualize-admin/visualization-tool/blob/main/app/config-types.ts) file.
+
+An example chart config is shown below.
+
+<CodeSpecimen
+  lang="json"
+  raw
+  rawBody={`{
+  state: "CONFIGURING_CHART",
+  dataSet:
+    "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/7",
+  dataSource: {
+    type: "sparql",
+    url: "https://lindas.admin.ch/query",
+  },
+  meta: {
+    title: {
+      de: "",
+      fr: "",
+      it: "",
+      en: "",
+    },
+    description: {
+      de: "",
+      fr: "",
+      it: "",
+      en: "",
+    },
+  },
+  chartConfig: {
+    version: "1.4.2",
+    chartType: "column",
+    filters: {
+      "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/Kanton":
+        {
+          type: "single",
+          value: "https://ld.admin.ch/canton/1",
+        },
+    },
+    interactiveFiltersConfig: {
+      legend: {
+        active: false,
+        componentIri: "",
+      },
+      timeRange: {
+        active: false,
+        componentIri:
+          "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/Jahr",
+        presets: {
+          type: "range",
+          from: "",
+          to: "",
+        },
+      },
+      dataFilters: {
+        active: false,
+        componentIris: [],
+      },
+      calculation: {
+        active: false,
+        type: "identity",
+      },
+    },
+    fields: {
+      x: {
+        componentIri:
+          "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/Jahr",
+        sorting: {
+          sortingType: "byAuto",
+          sortingOrder: "asc",
+        },
+      },
+      y: {
+        componentIri:
+          "https://energy.ld.admin.ch/sfoe/bfe_ogd84_einmalverguetung_fuer_photovoltaikanlagen/AnzahlAnlagen",
+      },
+    },
+  },
+}`}
+/>
+
+Note that it's encouraged to visit the Visualize application with &flag\_\_debug==true added to the URL to enable
+the debug mode, which will show the chart config directly below the chart that is being edited. It also enables
+the "Dump to console" button, which will log the chart config to the browser console, for easier re-use.
diff --git a/app/pages/docs/index.tsx b/app/pages/docs/index.tsx
index 5f4096d6f..e93bf781a 100644
--- a/app/pages/docs/index.tsx
+++ b/app/pages/docs/index.tsx
@@ -91,6 +91,11 @@ const pages: ConfigPageOrGroup[] = [
         title: "RDF to visualize",
         content: require("@/docs/rdf-to-visualize.mdx"),
       },
+      {
+        path: "/charts/preview-via-api",
+        title: "Preview via API",
+        content: require("@/docs/chart-preview-via-api.mdx"),
+      },
       {
         path: "/charts/annotations",
         title: "Annotations",

From 5de620a933ce6b2fcb461ca498700de1b61399a1 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Fri, 6 Oct 2023 15:50:35 +0200
Subject: [PATCH 12/14] docs: Update CHANGELOG

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b173cb2f3..f302b2abb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,9 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
   - Cascading filters are not stuck anymore in the loading mode in some cases
 - Maintenance
   - GQL debug panel now includes queries fired through SPARQLClientStream (e.g. hierarchies) and CONSTRUCT queries
+  - Configurator and interactive filters debug panel is now displayed if `flag__debug` is set to true
+- Docs
+  - Added chart preview via API section to the documentation
 
 # [3.22.8] - 2023-09-29
 

From b8198bde876985484111176d0472aff36c52f72a Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Fri, 6 Oct 2023 16:45:08 +0200
Subject: [PATCH 13/14] docs: Update CHANGELOG

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f302b2abb..ccd0de293 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,10 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 ## Unreleased
 
+Nothing yet.
+
+# [3.22.9] - 2023-10-06
+
 - Fixes
   - Cascading filters are not stuck anymore in the loading mode in some cases
 - Maintenance

From a09cdc30abf0744481670f6549f5766610073b1c Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartoszprusinowski1@gmail.com>
Date: Fri, 6 Oct 2023 16:45:15 +0200
Subject: [PATCH 14/14] v3.22.9

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 427bee5e2..40dc105b3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@visualize-admin/visualization-tool",
-  "version": "3.22.8",
+  "version": "3.22.9",
   "repository": {
     "type": "git",
     "url": "https://github.com/visualize-admin/visualization-tool.git"