feat: Set up initial ChartLayouter

app/components/chart-preview.tsx

@@ -19,6 +19,7 @@ import { MetadataPanel } from "@/components/metadata-panel";
 import {
   DataSource,
   getChartConfig,
+  hasChartConfigs,
   useConfiguratorState,
 } from "@/configurator";
 import {
@@ -134,8 +135,7 @@ export const ChartPreviewInner = (props: ChartPreviewProps) => {
             </HintYellow>
           </Box>
         )}
-        {(state.state === "CONFIGURING_CHART" ||
-          state.state === "PUBLISHING") && (
+        {hasChartConfigs(state) && (
           <>
             <>
               <Flex

app/components/chart-selection-tabs.tsx

@@ -11,11 +11,14 @@ import Flex from "@/components/flex";
 import {
   ChartConfig,
   ChartType,
-  ConfiguratorStateConfiguringChart,
-  ConfiguratorStatePublishing,
+  ConfiguratorStatePublished,
+  ConfiguratorStateWithChartConfigs,
   getChartConfig,
   hasChartConfigs,
+  isConfiguring,
+  isLayouting,
   isPublished,
+  isPublishing,
   useConfiguratorState,
 } from "@/configurator";
 import { ChartTypeSelector } from "@/configurator/components/chart-type-selector";
@@ -71,7 +74,7 @@ const TabsStateProvider = (props: React.PropsWithChildren<{}>) => {
 export const ChartSelectionTabs = () => {
   const [state] = useConfiguratorState(hasChartConfigs);
   const editable =
-    state.state === "CONFIGURING_CHART" || state.state === "PUBLISHING";
+    isConfiguring(state) || isLayouting(state) || isPublishing(state);
 
   if (!editable && state.chartConfigs.length === 1) {
     return null;
@@ -98,7 +101,7 @@ export const ChartSelectionTabs = () => {
 };
 
 type TabsEditableProps = {
-  state: ConfiguratorStateConfiguringChart | ConfiguratorStatePublishing;
+  state: Exclude<ConfiguratorStateWithChartConfigs, ConfiguratorStatePublished>;
   chartConfig: ChartConfig;
   data: TabDatum[];
 };

app/configurator/components/chart-layouter.tsx

@@ -0,0 +1,11 @@
+import { ConfiguratorStateLayouting, getChartConfig } from "@/config-types";
+
+export const ChartLayouter = ({
+  state,
+}: {
+  state: ConfiguratorStateLayouting;
+}) => {
+  const chartConfig = getChartConfig(state);
+
+  return <></>;
+};

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

@@ -22,14 +22,14 @@ import Flex from "@/components/flex";
 import { Hint } from "@/components/hint";
 import {
   ChartType,
-  ConfiguratorStateConfiguringChart,
-  ConfiguratorStatePublishing,
+  ConfiguratorStatePublished,
   getChartConfig,
 } from "@/config-types";
 import { ControlSectionSkeleton } from "@/configurator/components/chart-controls/section";
 import { getFieldLabel } from "@/configurator/components/field-i18n";
 import { getIconName } from "@/configurator/components/ui-helpers";
 import { FieldProps, useChartType } from "@/configurator/config-form";
+import { ConfiguratorStateWithChartConfigs } from "@/configurator/configurator-state";
 import { useDataCubesComponentsQuery } from "@/graphql/hooks";
 import { Icon } from "@/icons";
 import { useLocale } from "@/locales/use-locale";
@@ -118,7 +118,7 @@ export const ChartTypeSelector = ({
   chartKey,
   ...props
 }: {
-  state: ConfiguratorStateConfiguringChart | ConfiguratorStatePublishing;
+  state: Exclude<ConfiguratorStateWithChartConfigs, ConfiguratorStatePublished>;
   type?: "add" | "edit";
   showHelp?: boolean;
   chartKey: string;

app/configurator/components/configurator.tsx

@@ -12,6 +12,7 @@ import { Loading } from "@/components/hint";
 import { getChartConfig, useConfiguratorState } from "@/configurator";
 import { ChartAnnotationsSelector } from "@/configurator/components/chart-annotations-selector";
 import { ChartConfigurator } from "@/configurator/components/chart-configurator";
+import { ChartLayouter } from "@/configurator/components/chart-layouter";
 import { ChartOptionsSelector } from "@/configurator/components/chart-options-selector";
 import {
   ConfiguratorDrawer,
@@ -168,6 +169,85 @@ const ConfigureChartStep = () => {
   );
 };
 
+const LayoutingStep = () => {
+  const [state, dispatch] = useConfiguratorState();
+  const chartConfig = getChartConfig(state);
+  const { dataSource, setDataSource } = useDataSourceStore();
+
+  const handleClosePanel = useEvent(() => {
+    dispatch({
+      type: "ACTIVE_FIELD_CHANGED",
+      value: undefined,
+    });
+  });
+
+  const handlePrevious = useEvent(() => {
+    if (state.state !== "LAYOUTING") {
+      return;
+    }
+    dispatch({ type: "STEP_PREVIOUS" });
+  });
+
+  React.useEffect(() => {
+    if (
+      state.state === "LAYOUTING" &&
+      state.dataSource.url !== dataSource.url
+    ) {
+      setDataSource(state.dataSource);
+    }
+  }, [dataSource.url, setDataSource, state.dataSource, state.state]);
+
+  if (state.state !== "LAYOUTING") {
+    return null;
+  }
+
+  return (
+    <InteractiveFiltersProvider>
+      <PanelLeftWrapper
+        sx={{
+          flexGrow: 1,
+          display: "flex",
+          height: "100%",
+          flexDirection: "column",
+        }}
+      >
+        <BackContainer>
+          <BackButton onClick={handlePrevious}>
+            <Trans id="controls.nav.back-to-preview">Back to preview</Trans>
+          </BackButton>
+        </BackContainer>
+        <ChartLayouter state={state} />
+      </PanelLeftWrapper>
+      <PanelMiddleWrapper>
+        <ChartPanel>
+          <ChartPreview dataSource={state.dataSource} />
+        </ChartPanel>
+      </PanelMiddleWrapper>
+      <ConfiguratorDrawer
+        anchor="left"
+        open={!!chartConfig.activeField}
+        hideBackdrop
+        onClose={handleClosePanel}
+      >
+        <div style={{ width: DRAWER_WIDTH }} data-testid="panel-drawer">
+          <BackContainer>
+            <Button
+              variant="text"
+              color="inherit"
+              size="small"
+              sx={{ fontWeight: "bold" }}
+              startIcon={<SvgIcChevronLeft />}
+              onClick={handleClosePanel}
+            >
+              <Trans id="controls.nav.back-to-main">Back to main</Trans>
+            </Button>
+          </BackContainer>
+        </div>
+      </ConfiguratorDrawer>
+    </InteractiveFiltersProvider>
+  );
+};
+
 const PublishStep = () => {
   const [state] = useConfiguratorState();
 
@@ -201,6 +281,7 @@ export const Configurator = () => {
   ) : (
     <PanelLayout>
       {state === "CONFIGURING_CHART" ? <ConfigureChartStep /> : null}
+      {state === "LAYOUTING" ? <LayoutingStep /> : null}
       {state === "PUBLISHING" ? <PublishStep /> : null}
     </PanelLayout>
   );

app/configurator/configurator-state.tsx

@@ -29,6 +29,7 @@ import {
   ColumnStyleCategory,
   ConfiguratorState,
   ConfiguratorStateConfiguringChart,
+  ConfiguratorStateLayouting,
   ConfiguratorStatePublished,
   ConfiguratorStatePublishing,
   ConfiguratorStateSelectingDataSet,
@@ -1708,6 +1709,12 @@ export const isConfiguring = (
   return s.state === "CONFIGURING_CHART";
 };
 
+export const isLayouting = (
+  s: ConfiguratorState
+): s is ConfiguratorStateLayouting => {
+  return s.state === "LAYOUTING";
+};
+
 export const isPublishing = (
   s: ConfiguratorState
 ): s is ConfiguratorStatePublishing => {
@@ -1722,9 +1729,14 @@ export const isPublished = (
 
 export const hasChartConfigs = (
   s: ConfiguratorState
-): s is
+): s is ConfiguratorStateWithChartConfigs => {
+  return (
+    isConfiguring(s) || isLayouting(s) || isPublishing(s) || isPublished(s)
+  );
+};
+
+export type ConfiguratorStateWithChartConfigs =
   | ConfiguratorStateConfiguringChart
+  | ConfiguratorStateLayouting
   | ConfiguratorStatePublishing
-  | ConfiguratorStatePublished => {
-  return isConfiguring(s) || isPublishing(s) || isPublished(s);
-};
+  | ConfiguratorStatePublished;