refactor: Move dataSet from configurator state to chart state

app/browser/dataset-preview.tsx

@@ -8,7 +8,6 @@ import * as React from "react";
 import { DataSetPreviewTable } from "@/browse/datatable";
 import { useFootnotesStyles } from "@/components/chart-footnotes";
 import { DataDownloadMenu, RunSparqlQuery } from "@/components/data-download";
-import DebugPanel from "@/components/debug-panel";
 import Flex from "@/components/flex";
 import { HintRed, Loading, LoadingDataError } from "@/components/hint";
 import { DataSource } from "@/config-types";
@@ -194,7 +193,6 @@ export const DataSetPreview = ({
               </Trans>
             </Typography>
           </Flex>
-          <DebugPanel configurator />
         </Paper>
       </Flex>
     );

app/charts/index.spec.ts

@@ -15,6 +15,7 @@ describe("initial config", () => {
   it("should create an initial table config with column order based on dimension order", () => {
     const config = getInitialConfig({
       chartType: "table",
+      dataSet: "https://environment.ld.admin.ch/foen/nfi",
       dimensions: forestAreaData.data.dataCubeByIri.dimensions as NonNullable<
         ComponentsQuery["dataCubeByIri"]
       >["dimensions"],
@@ -81,6 +82,7 @@ describe("chart type switch", () => {
       key: "column",
       version: "1.4.0",
       chartType: "column",
+      dataSet: "https://environment.ld.admin.ch/foen/ubd0104",
       filters: {},
       meta: {
         title: {

app/charts/index.ts

@@ -327,6 +327,7 @@ const META: Meta = {
 
 type GetInitialConfigOptions = {
   key?: string;
+  dataSet: string;
   chartType: ChartType;
   dimensions: DataCubeMetadataWithHierarchies["dimensions"];
   measures: DataCubeMetadataWithHierarchies["measures"];
@@ -335,16 +336,18 @@ type GetInitialConfigOptions = {
 export const getInitialConfig = (
   options: GetInitialConfigOptions
 ): ChartConfig => {
-  const { key, chartType, dimensions, measures } = options;
+  const { key, dataSet, chartType, dimensions, measures } = options;
   const genericConfigProps: {
     key: string;
     version: string;
     meta: Meta;
+    dataSet: string;
     activeField: string | undefined;
   } = {
     key: key ?? createChartId(),
     version: CHART_CONFIG_VERSION,
     meta: META,
+    dataSet,
     activeField: undefined,
   };
   const numericalMeasures = measures.filter(isNumericalMeasure);
@@ -667,6 +670,7 @@ export const getChartConfigAdjustedToChartType = ({
   const initialConfig = getInitialConfig({
     key: chartConfig.key,
     chartType: newChartType,
+    dataSet: chartConfig.dataSet,
     dimensions,
     measures,
   });

app/charts/shared/legend-color.tsx

@@ -171,17 +171,17 @@ const useLegendGroups = ({
   const segmentValues =
     segmentFilters?.type === "multi" ? segmentFilters.values : emptyObj;
 
-  const { dataSet: dataset, dataSource } = configState;
+  const { dataSource } = configState;
   const segmentDimension = useDimension({
-    dataset,
+    dataset: chartConfig.dataSet,
     dataSource,
     locale,
     dimensionIri: segmentField?.componentIri,
   });
 
   const [hierarchyResp] = useDimensionValuesQuery({
     variables: {
-      dataCubeIri: dataset,
+      dataCubeIri: chartConfig.dataSet,
       dimensionIri: segmentDimension?.iri!,
       sourceType: dataSource.type,
       sourceUrl: dataSource.url,

app/charts/shared/use-sync-interactive-filters.spec.tsx

@@ -45,6 +45,7 @@ const chartConfig = migrateChartConfig(
   {
     migrationProps: {
       meta: {},
+      dataSet: "foo",
     },
   }
 ) as ChartConfig;

app/components/chart-published.tsx

@@ -51,13 +51,12 @@ type ChartPublishedProps = {
 export const ChartPublished = (props: ChartPublishedProps) => {
   const { configKey } = props;
   const [state] = useConfiguratorState(isPublished);
-  const { dataSet, dataSource } = state;
+  const { dataSource } = state;
   const chartConfig = getChartConfig(state);
 
   return (
     <ChartTablePreviewProvider>
       <ChartPublishedInner
-        dataSet={dataSet}
         dataSource={dataSource}
         state={state}
         chartConfig={chartConfig}
@@ -83,7 +82,6 @@ const useStyles = makeStyles<Theme, { shrink: boolean }>((theme) => ({
 }));
 
 type ChartPublishInnerProps = {
-  dataSet: string;
   dataSource: DataSource | undefined;
   state: ConfiguratorStatePublished;
   chartConfig: ChartConfig;
@@ -92,7 +90,6 @@ type ChartPublishInnerProps = {
 
 const ChartPublishedInner = (props: ChartPublishInnerProps) => {
   const {
-    dataSet,
     dataSource = DEFAULT_DATA_SOURCE,
     state,
     chartConfig,
@@ -136,7 +133,7 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
   const locale = useLocale();
   const isTrustedDataSource = useIsTrustedDataSource(dataSource);
   const commonQueryVariables = {
-    iri: dataSet,
+    iri: chartConfig.dataSet,
     sourceType: dataSource.type,
     sourceUrl: dataSource.url,
     locale,
@@ -225,7 +222,7 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
             </Typography>
 
             <MetadataPanel
-              datasetIri={dataSet}
+              datasetIri={chartConfig.dataSet}
               dataSource={dataSource}
               dimensions={allComponents}
               container={rootRef.current}
@@ -247,21 +244,21 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
               {isTablePreview ? (
                 <DataSetTable
                   sx={{ maxHeight: "100%" }}
-                  dataSetIri={dataSet}
+                  dataSetIri={chartConfig.dataSet}
                   dataSource={dataSource}
                   chartConfig={chartConfig}
                 />
               ) : (
                 <ChartWithFilters
-                  dataSet={dataSet}
+                  dataSet={chartConfig.dataSet}
                   dataSource={dataSource}
                   componentIris={componentIris}
                   chartConfig={chartConfig}
                 />
               )}
             </Flex>
             <ChartFootnotes
-              dataSetIri={dataSet}
+              dataSetIri={chartConfig.dataSet}
               dataSource={dataSource}
               chartConfig={chartConfig}
               configKey={configKey}

app/components/chart-selection-tabs.tsx

@@ -255,21 +255,15 @@ const TabsFixed = (props: TabsFixedProps) => {
 const PublishChartButton = () => {
   const locale = useLocale();
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
-  const { dataSet } = state;
+  const chartConfig = getChartConfig(state);
   const variables = {
-    iri: dataSet ?? "",
+    iri: chartConfig.dataSet,
     sourceType: state.dataSource.type,
     sourceUrl: state.dataSource.url,
     locale,
   };
-  const [{ data: metadata }] = useDataCubeMetadataQuery({
-    variables,
-    pause: !dataSet,
-  });
-  const [{ data: components }] = useComponentsQuery({
-    variables,
-    pause: !dataSet,
-  });
+  const [{ data: metadata }] = useDataCubeMetadataQuery({ variables });
+  const [{ data: components }] = useComponentsQuery({ variables });
   const goNext = useEvent(() => {
     if (metadata?.dataCubeByIri && components?.dataCubeByIri) {
       dispatch({

app/components/debug-panel/DebugPanel.tsx

@@ -12,7 +12,11 @@ import {
 import { useState } from "react";
 import { Inspector } from "react-inspector";
 
-import { DataSource, useConfiguratorState } from "@/configurator";
+import {
+  DataSource,
+  getChartConfig,
+  useConfiguratorState,
+} from "@/configurator";
 import { dataSourceToSparqlEditorUrl } from "@/domain/datasource";
 import { useComponentsWithHierarchiesQuery } from "@/graphql/query-hooks";
 import { Icon } from "@/icons";
@@ -86,6 +90,7 @@ const CubeMetadata = ({
 
 const DebugConfigurator = () => {
   const [configuratorState] = useConfiguratorState();
+  const chartConfig = getChartConfig(configuratorState);
   const sparqlEditorUrl = dataSourceToSparqlEditorUrl(
     configuratorState.dataSource
   );
@@ -96,51 +101,43 @@ const DebugConfigurator = () => {
         Cube Tools
       </Typography>
       <Stack spacing={2} sx={{ pl: 5, py: 3 }}>
-        {configuratorState.dataSet ? (
-          <Button
-            component="a"
-            color="primary"
-            variant="text"
-            size="small"
-            href={`https://cube-viewer.zazuko.com/?endpointUrl=${encodeURIComponent(
-              configuratorState.dataSource.url
-            )}&user=&password=&sourceGraph=&cube=${encodeURIComponent(
-              configuratorState.dataSet ?? ""
-            )}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            startIcon={<Icon name="linkExternal" size={16} />}
-          >
-            <Typography variant="body2">Open in Cube Viewer</Typography>
-          </Button>
-        ) : (
-          <Typography variant="body1">Please select a dataset first</Typography>
-        )}
-        {
-          <Button
-            component="a"
-            color="primary"
-            variant="text"
-            size="small"
-            href={`${sparqlEditorUrl}#query=${encodeURIComponent(
-              `#pragma describe.strategy cbd
+        <Button
+          component="a"
+          color="primary"
+          variant="text"
+          size="small"
+          href={`https://cube-viewer.zazuko.com/?endpointUrl=${encodeURIComponent(
+            configuratorState.dataSource.url
+          )}&user=&password=&sourceGraph=&cube=${encodeURIComponent(
+            chartConfig.dataSet
+          )}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          startIcon={<Icon name="linkExternal" size={16} />}
+        >
+          <Typography variant="body2">Open in Cube Viewer</Typography>
+        </Button>
+        <Button
+          component="a"
+          color="primary"
+          variant="text"
+          size="small"
+          href={`${sparqlEditorUrl}#query=${encodeURIComponent(
+            `#pragma describe.strategy cbd
               #pragma join.hash off
 
-DESCRIBE <${configuratorState.dataSet ?? ""}>`
-            )}&requestMethod=POST`}
-            target="_blank"
-            rel="noopener noreferrer"
-            startIcon={<Icon name="linkExternal" size={16} />}
-          >
-            <Typography variant="body2">Cube Metadata Query</Typography>
-          </Button>
-        }
-        {configuratorState.dataSet ? (
-          <CubeMetadata
-            datasetIri={configuratorState.dataSet}
-            dataSource={configuratorState.dataSource}
-          />
-        ) : null}
+DESCRIBE <${chartConfig.dataSet}>`
+          )}&requestMethod=POST`}
+          target="_blank"
+          rel="noopener noreferrer"
+          startIcon={<Icon name="linkExternal" size={16} />}
+        >
+          <Typography variant="body2">Cube Metadata Query</Typography>
+        </Button>
+        <CubeMetadata
+          datasetIri={chartConfig.dataSet}
+          dataSource={configuratorState.dataSource}
+        />
       </Stack>
       <Typography
         component="h3"

app/config-types.ts

@@ -226,6 +226,7 @@ const GenericChartConfig = t.type({
   key: t.string,
   version: t.string,
   meta: Meta,
+  dataSet: t.string,
   filters: Filters,
   activeField: t.union([t.string, t.undefined]),
 });
@@ -1076,7 +1077,6 @@ export type DataSource = t.TypeOf<typeof DataSource>;
 const Config = t.type(
   {
     version: t.string,
-    dataSet: t.string,
     dataSource: DataSource,
     meta: Meta,
     chartConfigs: t.array(ChartConfig),
@@ -1097,7 +1097,6 @@ export const decodeConfig = (config: unknown) => {
 const ConfiguratorStateInitial = t.type({
   version: t.string,
   state: t.literal("INITIAL"),
-  dataSet: t.undefined,
   dataSource: DataSource,
 });
 export type ConfiguratorStateInitial = t.TypeOf<
@@ -1107,7 +1106,6 @@ export type ConfiguratorStateInitial = t.TypeOf<
 const ConfiguratorStateSelectingDataSet = t.type({
   version: t.string,
   state: t.literal("SELECTING_DATASET"),
-  dataSet: t.union([t.string, t.undefined]),
   dataSource: DataSource,
   meta: Meta,
   chartConfigs: t.undefined,

app/configurator/components/chart-configurator.tsx

@@ -190,7 +190,7 @@ const useEnsurePossibleFilters = ({
         .query<PossibleFiltersQuery, PossibleFiltersQueryVariables>(
           PossibleFiltersDocument,
           {
-            iri: state.dataSet,
+            iri: chartConfig.dataSet,
             sourceType: state.dataSource.type,
             sourceUrl: state.dataSource.url,
             filters: unmappedFilters,
@@ -234,7 +234,7 @@ const useEnsurePossibleFilters = ({
     client,
     dispatch,
     chartConfig,
-    state.dataSet,
+    chartConfig.dataSet,
     state.dataSource.type,
     state.dataSource.url,
   ]);
@@ -263,7 +263,7 @@ const useFilterReorder = ({
   const variables = useMemo(() => {
     const hasUnmappedFilters = Object.keys(unmappedFilters).length > 0;
     const vars = {
-      iri: state.dataSet,
+      iri: chartConfig.dataSet,
       sourceType: state.dataSource.type,
       sourceUrl: state.dataSource.url,
       locale,
@@ -279,7 +279,7 @@ const useFilterReorder = ({
 
     return omitBy(vars, (x) => x === undefined) as typeof vars;
   }, [
-    state.dataSet,
+    chartConfig.dataSet,
     state.dataSource.type,
     state.dataSource.url,
     locale,