refactor: Move configurator title to layout

app/config-types.ts

@@ -1110,9 +1110,11 @@ const Layout = t.intersection([
   t.union([
     t.type({
       type: t.literal("tab"),
+      meta: Meta,
     }),
     t.type({
       type: t.literal("dashboard"),
+      meta: Meta,
     }),
   ]),
 ]);
@@ -1123,7 +1125,6 @@ const Config = t.type(
   {
     version: t.string,
     dataSource: DataSource,
-    meta: Meta,
     layout: Layout,
     chartConfigs: t.array(ChartConfig),
     activeChartKey: t.string,
@@ -1153,28 +1154,24 @@ const ConfiguratorStateSelectingDataSet = t.type({
   version: t.string,
   state: t.literal("SELECTING_DATASET"),
   dataSource: DataSource,
-  meta: Meta,
   chartConfigs: t.undefined,
+  layout: t.undefined,
   activeChartKey: t.undefined,
 });
 export type ConfiguratorStateSelectingDataSet = t.TypeOf<
   typeof ConfiguratorStateSelectingDataSet
 >;
 
 const ConfiguratorStateConfiguringChart = t.intersection([
-  t.type({
-    state: t.literal("CONFIGURING_CHART"),
-  }),
+  t.type({ state: t.literal("CONFIGURING_CHART") }),
   Config,
 ]);
 export type ConfiguratorStateConfiguringChart = t.TypeOf<
   typeof ConfiguratorStateConfiguringChart
 >;
 
 const ConfiguratorStateLayouting = t.intersection([
-  t.type({
-    state: t.literal("LAYOUTING"),
-  }),
+  t.type({ state: t.literal("LAYOUTING") }),
   Config,
 ]);
 export type ConfiguratorStateLayouting = t.TypeOf<

app/configurator/components/annotators.tsx

@@ -133,7 +133,7 @@ export const ChartAnnotator = () => {
 export const LayoutAnnotator = () => {
   const locale = useLocale();
   const [state] = useConfiguratorState(isLayouting);
-  const { title, description } = state.meta;
+  const { title, description } = state.layout.meta;
   const disabled = !(title[locale] && description[locale]);
 
   return (

app/configurator/components/configurator.tsx

@@ -248,6 +248,7 @@ const LayoutingStep = () => {
                   type: "LAYOUT_CHANGED",
                   value: {
                     type: "tab",
+                    meta: state.layout.meta,
                     activeField: undefined,
                   },
                 });
@@ -265,6 +266,7 @@ const LayoutingStep = () => {
                   type: "LAYOUT_CHANGED",
                   value: {
                     type: "dashboard",
+                    meta: state.layout.meta,
                     activeField: undefined,
                   },
                 });
@@ -295,9 +297,9 @@ const LayoutingStep = () => {
               mb: 4,
             }}
           >
-            <Title text={state.meta.title[locale]} onClick={() => {}} />
+            <Title text={state.layout.meta.title[locale]} onClick={() => {}} />
             <Description
-              text={state.meta.description[locale]}
+              text={state.layout.meta.description[locale]}
               onClick={() => {}}
             />
           </Box>

app/configurator/components/field.tsx

@@ -513,11 +513,12 @@ export const ChartAnnotatorTabField = ({
 } & Omit<AnnotatorTabProps, "onClick">) => {
   const fieldProps = useActiveFieldField({ value });
   const [state] = useConfiguratorState(isConfiguring);
+  const chartConfig = getChartConfig(state);
   const locale = useLocale();
   const hasText = useMemo(() => {
     const key = value as "title" | "description";
-    return state.meta[key]?.[locale] !== "";
-  }, [state.meta, value, locale]);
+    return chartConfig.meta[key]?.[locale] !== "";
+  }, [chartConfig, value, locale]);
 
   return (
     <AnnotatorTab

app/configurator/configurator-state.tsx

@@ -40,6 +40,7 @@ import {
   ImputationType,
   InteractiveFiltersConfig,
   LayoutType,
+  Meta,
   decodeConfiguratorState,
   enableLayouting,
   getChartConfig,
@@ -297,6 +298,7 @@ export type ConfiguratorStateAction =
       type: "LAYOUT_CHANGED";
       value: {
         type: LayoutType;
+        meta: Meta;
         activeField: string | undefined;
       };
     };
@@ -326,20 +328,7 @@ const EMPTY_STATE: ConfiguratorStateSelectingDataSet = {
   state: "SELECTING_DATASET",
   dataSource: DEFAULT_DATA_SOURCE,
   chartConfigs: undefined,
-  meta: {
-    title: {
-      de: "",
-      fr: "",
-      it: "",
-      en: "",
-    },
-    description: {
-      de: "",
-      fr: "",
-      it: "",
-      en: "",
-    },
-  },
+  layout: undefined,
   activeChartKey: undefined,
 };
 
@@ -648,9 +637,22 @@ const transitionStepNext = (
           version: CONFIGURATOR_STATE_VERSION,
           state: "CONFIGURING_CHART",
           dataSource: draft.dataSource,
-          meta: draft.meta,
           layout: {
             type: "tab",
+            meta: {
+              title: {
+                de: "",
+                en: "",
+                fr: "",
+                it: "",
+              },
+              description: {
+                de: "",
+                en: "",
+                fr: "",
+                it: "",
+              },
+            },
             activeField: undefined,
           },
           chartConfigs: [chartConfig],
@@ -716,6 +718,7 @@ const transitionStepPrevious = (
     case "SELECTING_DATASET":
       return {
         ...draft,
+        layout: undefined,
         chartConfigs: undefined,
         activeChartKey: undefined,
         state: stepTo,

app/docs/columns.docs.tsx

@@ -31,11 +31,14 @@ ${(
         version: CONFIGURATOR_STATE_VERSION,
         state: "PUBLISHED",
         dataSource: { type: "sparql", url: "" },
-        meta: {
-          title: { en: "", de: "", fr: "", it: "" },
-          description: { en: "", de: "", fr: "", it: "" },
+        layout: {
+          type: "tab",
+          meta: {
+            title: { en: "", de: "", fr: "", it: "" },
+            description: { en: "", de: "", fr: "", it: "" },
+          },
+          activeField: undefined,
         },
-        layout: { type: "tab" },
         chartConfigs: [chartConfig],
         activeChartKey: "scatterplot",
       }}

app/docs/fixtures.ts

@@ -11,41 +11,21 @@ export const states: ConfiguratorState[] = [
     version: CONFIGURATOR_STATE_VERSION,
     dataSource: DEFAULT_DATA_SOURCE,
     chartConfigs: undefined,
-    meta: {
-      title: {
-        de: "",
-        fr: "",
-        it: "",
-        en: "",
-      },
-      description: {
-        de: "",
-        fr: "",
-        it: "",
-        en: "",
-      },
-    },
+    layout: undefined,
     activeChartKey: undefined,
   },
   {
     state: "CONFIGURING_CHART",
     version: CONFIGURATOR_STATE_VERSION,
     dataSource: DEFAULT_DATA_SOURCE,
-    meta: {
-      title: {
-        de: "",
-        fr: "",
-        it: "",
-        en: "",
-      },
-      description: {
-        de: "",
-        fr: "",
-        it: "",
-        en: "",
+    layout: {
+      type: "tab",
+      meta: {
+        title: { en: "", de: "", fr: "", it: "" },
+        description: { en: "", de: "", fr: "", it: "" },
       },
+      activeField: undefined,
     },
-    layout: { type: "tab" },
     chartConfigs: [
       {
         key: "column",

app/docs/lines.docs.tsx

@@ -33,11 +33,14 @@ ${(
         version: CONFIGURATOR_STATE_VERSION,
         state: "PUBLISHED",
         dataSource: { type: "sparql", url: "" },
-        meta: {
-          title: { en: "", de: "", fr: "", it: "" },
-          description: { en: "", de: "", fr: "", it: "" },
+        layout: {
+          type: "tab",
+          meta: {
+            title: { en: "", de: "", fr: "", it: "" },
+            description: { en: "", de: "", fr: "", it: "" },
+          },
+          activeField: undefined,
         },
-        layout: { type: "tab" },
         chartConfigs: [chartConfig],
         activeChartKey: "line",
       }}

app/docs/scatterplot.docs.tsx

@@ -36,11 +36,14 @@ ${(
         version: CONFIGURATOR_STATE_VERSION,
         state: "PUBLISHED",
         dataSource: { type: "sparql", url: "" },
-        meta: {
-          title: { en: "", de: "", fr: "", it: "" },
-          description: { en: "", de: "", fr: "", it: "" },
+        layout: {
+          type: "tab",
+          meta: {
+            title: { en: "", de: "", fr: "", it: "" },
+            description: { en: "", de: "", fr: "", it: "" },
+          },
+          activeField: undefined,
         },
-        layout: { type: "tab" },
         chartConfigs: [chartConfig],
         activeChartKey: "scatterplot",
       }}

app/pages/v/[chartId].tsx

@@ -126,10 +126,10 @@ const VisualizationPage = (props: Serialized<PageProps>) => {
         <meta name="twitter:card" content="summary_large_image" />
         {/* FIXME: possibly we'll need to copy the content of first chart when migrating / saving to db
         or have additional annotator for dashboards / compositions. */}
-        <meta property="og:title" content={state.meta.title[locale]} />
+        <meta property="og:title" content={state.layout.meta.title[locale]} />
         <meta
           property="og:description"
-          content={state.meta.description[locale]}
+          content={state.layout.meta.description[locale]}
         />
         {/* og:url is set in _app.tsx */}
       </Head>

app/utils/chart-config/api.ts

@@ -20,7 +20,7 @@ export const createConfig = async (state: ConfiguratorStatePublishing) => {
           key: createChartId(),
           version: state.version,
           dataSource: state.dataSource,
-          meta: state.meta,
+          layout: state.layout,
           chartConfigs: state.chartConfigs,
           activeChartKey: state.activeChartKey,
         },
@@ -51,7 +51,7 @@ export const updateConfig = async (
           key,
           version: state.version,
           dataSource: state.dataSource,
-          meta: state.meta,
+          layout: state.layout,
           chartConfigs: state.chartConfigs,
           activeChartKey: state.activeChartKey,
         },

app/utils/chart-config/versioning.ts

@@ -950,14 +950,30 @@ const configuratorStateMigrations: Migration[] = [
       return produce(newConfig, (draft: any) => {
         draft.layout = {
           type: "tab",
+          meta: draft.meta,
           activeField: undefined,
         };
+        delete draft.meta;
       });
     },
     down: (config) => {
       const newConfig = { ...config, version: "3.0.1" };
 
       return produce(newConfig, (draft: any) => {
+        draft.meta = draft.layout.meta ?? {
+          title: {
+            de: "",
+            fr: "",
+            it: "",
+            en: "",
+          },
+          description: {
+            de: "",
+            fr: "",
+            it: "",
+            en: "",
+          },
+        };
         delete draft.layout;
       });
     },