From ab660e4dbe93ef973a907db7f0e38dfa3ffcf891 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Thu, 7 Dec 2023 09:48:31 +0100 Subject: [PATCH] refactor: Move configurator title to layout --- app/config-types.ts | 13 +++----- app/configurator/components/annotators.tsx | 2 +- app/configurator/components/configurator.tsx | 6 ++-- app/configurator/components/field.tsx | 5 +-- app/configurator/configurator-state.tsx | 33 ++++++++++--------- app/docs/columns.docs.tsx | 11 ++++--- app/docs/fixtures.ts | 34 ++++---------------- app/docs/lines.docs.tsx | 11 ++++--- app/docs/scatterplot.docs.tsx | 11 ++++--- app/pages/v/[chartId].tsx | 4 +-- app/utils/chart-config/api.ts | 4 +-- app/utils/chart-config/versioning.ts | 16 +++++++++ 12 files changed, 79 insertions(+), 71 deletions(-) diff --git a/app/config-types.ts b/app/config-types.ts index 4df09da2da..379be915bd 100644 --- a/app/config-types.ts +++ b/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,8 +1154,8 @@ 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< @@ -1162,9 +1163,7 @@ export type ConfiguratorStateSelectingDataSet = t.TypeOf< >; const ConfiguratorStateConfiguringChart = t.intersection([ - t.type({ - state: t.literal("CONFIGURING_CHART"), - }), + t.type({ state: t.literal("CONFIGURING_CHART") }), Config, ]); export type ConfiguratorStateConfiguringChart = t.TypeOf< @@ -1172,9 +1171,7 @@ export type ConfiguratorStateConfiguringChart = t.TypeOf< >; const ConfiguratorStateLayouting = t.intersection([ - t.type({ - state: t.literal("LAYOUTING"), - }), + t.type({ state: t.literal("LAYOUTING") }), Config, ]); export type ConfiguratorStateLayouting = t.TypeOf< diff --git a/app/configurator/components/annotators.tsx b/app/configurator/components/annotators.tsx index 9923729020..990b23efb6 100644 --- a/app/configurator/components/annotators.tsx +++ b/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 ( diff --git a/app/configurator/components/configurator.tsx b/app/configurator/components/configurator.tsx index f8163bf427..7e203f1c87 100644 --- a/app/configurator/components/configurator.tsx +++ b/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.layout.meta.title[locale]} onClick={() => {}} /> <Description - text={state.meta.description[locale]} + text={state.layout.meta.description[locale]} onClick={() => {}} /> </Box> diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx index 5a06f847ba..a36ac52875 100644 --- a/app/configurator/components/field.tsx +++ b/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 diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx index 71736fc41d..ea44f578e6 100644 --- a/app/configurator/configurator-state.tsx +++ b/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, diff --git a/app/docs/columns.docs.tsx b/app/docs/columns.docs.tsx index deff2f9107..40ac9b331e 100644 --- a/app/docs/columns.docs.tsx +++ b/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", }} diff --git a/app/docs/fixtures.ts b/app/docs/fixtures.ts index 014009e629..6883d7240f 100644 --- a/app/docs/fixtures.ts +++ b/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", diff --git a/app/docs/lines.docs.tsx b/app/docs/lines.docs.tsx index ac3686dd82..b9a915137a 100644 --- a/app/docs/lines.docs.tsx +++ b/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", }} diff --git a/app/docs/scatterplot.docs.tsx b/app/docs/scatterplot.docs.tsx index fcbbbf3574..a8d8c02d1a 100644 --- a/app/docs/scatterplot.docs.tsx +++ b/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", }} diff --git a/app/pages/v/[chartId].tsx b/app/pages/v/[chartId].tsx index 4682a80bdf..fbc17875fc 100644 --- a/app/pages/v/[chartId].tsx +++ b/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> diff --git a/app/utils/chart-config/api.ts b/app/utils/chart-config/api.ts index e39072be9a..849cd9d55f 100644 --- a/app/utils/chart-config/api.ts +++ b/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, }, diff --git a/app/utils/chart-config/versioning.ts b/app/utils/chart-config/versioning.ts index 27d3d35b5e..7a76bfb674 100644 --- a/app/utils/chart-config/versioning.ts +++ b/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; }); },