From a4e60c6c020a4304ae09dc5d726c5cc50f407143 Mon Sep 17 00:00:00 2001 From: Daniel Bachler Date: Tue, 17 Oct 2023 13:05:11 +0200 Subject: [PATCH 1/2] data-pages-fix-rendering-issues --- .../grapher/src/core/Grapher.tsx | 75 +++++++++++++------ .../src/modal/SourcesModal.stories.tsx | 6 +- .../grapher/src/modal/SourcesModal.tsx | 4 +- 3 files changed, 57 insertions(+), 28 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx index de63eb0408e..c45e9509ad6 100644 --- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx +++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx @@ -1446,24 +1446,48 @@ export class Grapher ]) } - @computed get columnsWithSources(): CoreColumn[] { + @computed get columnsWithSourcesExtensive(): CoreColumn[] { const { yColumnSlugs, xColumnSlug, sizeColumnSlug, colorColumnSlug } = this + const columnSlugs = excludeUndefined( [ + ...yColumnSlugs, + xColumnSlug, + sizeColumnSlug, + colorColumnSlug, + ]) + + return this.inputTable + .getColumns(uniq(columnSlugs)) + .filter( + (column) => !!column.source.name || !isEmpty(column.def.origins) + ) + } + + getColumnSlugsForCondensedSources(): string[] { + const { xColumnSlug, sizeColumnSlug, colorColumnSlug, isMarimekko } = + this + const columnSlugs: string[] = [] + // "Countries Continent" const isContinentsVariableId = (id: string): boolean => id === "123" + // exclude "Countries Continent" if it's used as the color dimension in a scatter plot, slope chart etc. + if ( + colorColumnSlug !== undefined && + !isContinentsVariableId(colorColumnSlug) + ) + columnSlugs.push(colorColumnSlug) + const isPopulationVariableId = (id: string): boolean => id === "525709" || // "Population (historical + projections), Gapminder, HYDE & UN" id === "525711" || // "Population (historical estimates), Gapminder, HYDE & UN" id === "597929" || // "Population (various sources, 2023.1)" id === "597930" // "Population (various sources, 2023.1)" - const columnSlugs = [...yColumnSlugs] - if (xColumnSlug !== undefined) { // exclude population variable if it's used as the x dimension in a marimekko - if (!isPopulationVariableId(xColumnSlug) || !this.isMarimekko) + if (!isMarimekko || !isPopulationVariableId(xColumnSlug)) columnSlugs.push(xColumnSlug) } @@ -1473,13 +1497,14 @@ export class Grapher !isPopulationVariableId(sizeColumnSlug) ) columnSlugs.push(sizeColumnSlug) + return columnSlugs + } - // exclude "Countries Continent" if it's used as the color dimension in a scatter plot, slope chart etc. - if ( - colorColumnSlug !== undefined && - !isContinentsVariableId(colorColumnSlug) - ) - columnSlugs.push(colorColumnSlug) + @computed get columnsWithSourcesCondensed(): CoreColumn[] { + const { yColumnSlugs } = this + + const columnSlugs = [...yColumnSlugs] + columnSlugs.push(...this.getColumnSlugsForCondensedSources()) return this.inputTable .getColumns(uniq(columnSlugs)) @@ -1489,22 +1514,24 @@ export class Grapher } @computed private get defaultSourcesLine(): string { - const attributions = this.columnsWithSources.flatMap((column) => { - // if the variable metadata specifies an attribution on the - // variable level then this is preferred over assembling it from - // the source and origins - if ( - column.def.attribution !== undefined && - column.def.attribution !== "" - ) - return [column.def.attribution] - else { - const originFragments = getOriginAttributionFragments( - column.def.origins + const attributions = this.columnsWithSourcesCondensed.flatMap( + (column) => { + // if the variable metadata specifies an attribution on the + // variable level then this is preferred over assembling it from + // the source and origins + if ( + column.def.attribution !== undefined && + column.def.attribution !== "" ) - return [column.source.name, ...originFragments] + return [column.def.attribution] + else { + const originFragments = getOriginAttributionFragments( + column.def.origins + ) + return [column.source.name, ...originFragments] + } } - }) + ) const uniqueAttributions = uniq(compact(attributions)) diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.stories.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.stories.tsx index ffdd7e1124e..77265545a49 100644 --- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.stories.tsx +++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.stories.tsx @@ -9,9 +9,11 @@ export default { export const WithSources = (): JSX.Element => ( ) export const NoSources = (): JSX.Element => ( - + ) diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx index 2033f6ec7a4..95b771330d6 100644 --- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx +++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx @@ -16,7 +16,7 @@ import { Modal } from "./Modal" export interface SourcesModalManager { adminBaseUrl?: string - columnsWithSources: CoreColumn[] + columnsWithSourcesExtensive: CoreColumn[] showAdminControls?: boolean isSourcesModalOpen?: boolean tabBounds?: Bounds @@ -268,7 +268,7 @@ export class SourcesModal extends React.Component<{ } render(): JSX.Element { - const cols = this.manager.columnsWithSources + const cols = this.manager.columnsWithSourcesExtensive return ( Date: Mon, 23 Oct 2023 08:10:30 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=A4=96=20style:=20prettify=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/@ourworldindata/grapher/src/core/Grapher.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx index c45e9509ad6..12855174dd6 100644 --- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx +++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx @@ -1450,7 +1450,7 @@ export class Grapher const { yColumnSlugs, xColumnSlug, sizeColumnSlug, colorColumnSlug } = this - const columnSlugs = excludeUndefined( [ + const columnSlugs = excludeUndefined([ ...yColumnSlugs, xColumnSlug, sizeColumnSlug,