From 5ae08a76fd35a32c6005b63b9c68c668e434b911 Mon Sep 17 00:00:00 2001 From: Daniel Bachler Date: Fri, 27 Dec 2024 18:47:57 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20extract=20fetching=20functionali?= =?UTF-8?q?ty=20into=20FetchingGrapher?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 3 +- adminSiteClient/GrapherConfigGridEditor.tsx | 3 +- baker/GrapherImageBaker.tsx | 4 +- baker/updateChartEntities.ts | 5 +- devTools/svgTester/utils.ts | 2 +- .../@ourworldindata/explorer/src/Explorer.tsx | 12 +- .../grapher/src/core/FetchingGrapher.tsx | 167 ++++++++++++++++++ .../grapher/src/core/Grapher.tsx | 140 +-------------- .../src/core/LegacyToOwidTable.test.ts | 31 +--- .../grapher/src/core/LegacyToOwidTable.ts | 35 +++- packages/@ourworldindata/grapher/src/index.ts | 1 + site/DataPageV2Content.tsx | 42 +++-- site/GrapherPage.tsx | 19 +- 13 files changed, 253 insertions(+), 211 deletions(-) create mode 100644 packages/@ourworldindata/grapher/src/core/FetchingGrapher.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index 75a3f5f169c..d81610df90c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -24,5 +24,6 @@ }, "Prettier-SQL.keywordCase": "upper", "Prettier-SQL.SQLFlavourOverride": "mysql", - "Prettier-SQL.expressionWidth": 80 + "Prettier-SQL.expressionWidth": 80, + "prettier.semi": false } diff --git a/adminSiteClient/GrapherConfigGridEditor.tsx b/adminSiteClient/GrapherConfigGridEditor.tsx index b064688980f..3652b23f7e8 100644 --- a/adminSiteClient/GrapherConfigGridEditor.tsx +++ b/adminSiteClient/GrapherConfigGridEditor.tsx @@ -332,7 +332,8 @@ export class GrapherConfigGridEditor extends React.Component } diff --git a/baker/GrapherImageBaker.tsx b/baker/GrapherImageBaker.tsx index 74547910e80..e555f633d7f 100644 --- a/baker/GrapherImageBaker.tsx +++ b/baker/GrapherImageBaker.tsx @@ -110,11 +110,11 @@ export function buildSvgOutFilepath( export async function grapherToSVG( jsonConfig: GrapherInterface, - vardata: MultipleOwidVariableDataDimensionsMap + _vardata: MultipleOwidVariableDataDimensionsMap ): Promise { const grapher = new Grapher({ ...jsonConfig, manuallyProvideData: true }) grapher.isExportingToSvgOrPng = true grapher.shouldIncludeDetailsInStaticExport = false - grapher.receiveOwidData(vardata) + // grapher.receiveOwidData(vardata) return grapher.staticSVG } diff --git a/baker/updateChartEntities.ts b/baker/updateChartEntities.ts index cbaf6a74107..dee7e5501fb 100644 --- a/baker/updateChartEntities.ts +++ b/baker/updateChartEntities.ts @@ -87,13 +87,14 @@ const obtainAvailableEntitiesForGrapherConfig = async ( // Manually fetch data for grapher, so we can employ caching const variableIds = uniq(grapher.dimensions.map((d) => d.variableId)) - const variableData: MultipleOwidVariableDataDimensionsMap = new Map( + const _variableData: MultipleOwidVariableDataDimensionsMap = new Map( await pMap(variableIds, async (variableId) => [ variableId, await getVariableDataUsingCache(variableId), ]) ) - grapher.receiveOwidData(variableData) + // TODO: make sure that data is loaded here + // grapher.receiveOwidData(variableData) // If the grapher has a chart tab, then the available entities there are the "most interesting" ones to us if (grapher.hasChartTab) { diff --git a/devTools/svgTester/utils.ts b/devTools/svgTester/utils.ts index 12d20a1c1d9..537667bc29e 100644 --- a/devTools/svgTester/utils.ts +++ b/devTools/svgTester/utils.ts @@ -419,7 +419,7 @@ export async function renderSvg( { shouldHashQueryStr: false, separator: "?" } ) - grapher.receiveOwidData(configAndData.variableData) + // grapher.receiveOwidData(configAndData.variableData) const durationReceiveData = Date.now() - timeStart const svg = grapher.staticSVG diff --git a/packages/@ourworldindata/explorer/src/Explorer.tsx b/packages/@ourworldindata/explorer/src/Explorer.tsx index 8a86d8aa098..c74a1aa1fb3 100644 --- a/packages/@ourworldindata/explorer/src/Explorer.tsx +++ b/packages/@ourworldindata/explorer/src/Explorer.tsx @@ -576,7 +576,7 @@ export class Explorer grapher.setAuthoredVersion(config) grapher.reset() grapher.updateFromObject(config) - grapher.downloadData() + // grapher.downloadData() } @action.bound async updateGrapherFromExplorerUsingVariableIds() { @@ -695,7 +695,7 @@ export class Explorer config.dimensions = dimensions if (ySlugs && yVariableIds) config.ySlugs = ySlugs + " " + yVariableIds - const inputTableTransformer = (table: OwidTable) => { + const _inputTableTransformer = (table: OwidTable) => { // add transformed (and intermediate) columns to the grapher table if (uniqueSlugsInGrapherRow.length) { const allColumnSlugs = uniq( @@ -743,11 +743,11 @@ export class Explorer if (dimensions.length === 0) { // If dimensions are empty, explicitly set the table to an empty table // so we don't end up confusingly showing stale data from a previous chart - grapher.receiveOwidData(new Map()) + // grapher.receiveOwidData(new Map()) } else { - await grapher.downloadLegacyDataFromOwidVariableIds( - inputTableTransformer - ) + // await grapher.downloadLegacyDataFromOwidVariableIds( + // inputTableTransformer + // ) } } diff --git a/packages/@ourworldindata/grapher/src/core/FetchingGrapher.tsx b/packages/@ourworldindata/grapher/src/core/FetchingGrapher.tsx new file mode 100644 index 00000000000..4ab16bd2075 --- /dev/null +++ b/packages/@ourworldindata/grapher/src/core/FetchingGrapher.tsx @@ -0,0 +1,167 @@ +import { + GrapherInterface, + MultipleOwidVariableDataDimensionsMap, + OwidVariableDataMetadataDimensions, +} from "@ourworldindata/types" +import React from "react" +import { Grapher } from "./Grapher.js" +import { loadVariableDataAndMetadata } from "./loadVariable.js" +import { legacyToOwidTableAndDimensionsWithMandatorySlug } from "./LegacyToOwidTable.js" +import { OwidTable } from "@ourworldindata/core-table" + +export interface FetchingGrapherProps { + config?: GrapherInterface + configUrl?: string + queryString?: string + dataApiUrl: string + adminBaseUrl: string + bakedGrapherURL: string +} +export function FetchingGrapher( + props: FetchingGrapherProps +): JSX.Element | null { + // if config is not provided, fetch it from configUrl + + const [config, setConfig] = React.useState( + props.config + ) + + const [inputTable, setInputTable] = React.useState( + undefined + ) + + React.useEffect(() => { + async function fetchConfigAndLoadData(): Promise { + if (!config && props.configUrl) { + const fetchedConfig = await fetch(props.configUrl).then((res) => + res.json() + ) + setConfig(fetchedConfig) + } + if (!config) return + const dimensions = config.dimensions || [] + if (dimensions.length === 0) return + const variables = dimensions.map((d) => d.variableId) + const variablesDataMap = await loadVariablesDataSite( + variables, + props.dataApiUrl + ) + const inputTable = legacyToOwidTableAndDimensionsWithMandatorySlug( + variablesDataMap, + dimensions, + config.selectedEntityColors + ) + setInputTable(inputTable) + } + void fetchConfigAndLoadData() + }, [props.configUrl, config, props.dataApiUrl]) + + if (!config) return null + if (!inputTable) return null + return ( + + ) +} + +// async function loadVariablesDataAdmin( +// variableFetchBaseUrl: string | undefined, +// variableIds: number[] +// ): Promise { +// const dataFetchPath = (variableId: number): string => +// variableFetchBaseUrl +// ? `${variableFetchBaseUrl}/v1/variableById/data/${variableId}` +// : `/api/data/variables/data/${variableId}.json` +// const metadataFetchPath = (variableId: number): string => +// variableFetchBaseUrl +// ? `${variableFetchBaseUrl}/v1/variableById/metadata/${variableId}` +// : `/api/data/variables/metadata/${variableId}.json` + +// const loadVariableDataPromises = variableIds.map(async (variableId) => { +// const dataPromise = window.admin.getJSON( +// dataFetchPath(variableId) +// ) as Promise +// const metadataPromise = window.admin.getJSON( +// metadataFetchPath(variableId) +// ) as Promise +// const [data, metadata] = await Promise.all([ +// dataPromise, +// metadataPromise, +// ]) +// return { data, metadata: { ...metadata, id: variableId } } +// }) +// const variablesData: OwidVariableDataMetadataDimensions[] = +// await Promise.all(loadVariableDataPromises) +// const variablesDataMap = new Map( +// variablesData.map((data) => [data.metadata.id, data]) +// ) +// return variablesDataMap +// } + +async function loadVariablesDataSite( + variableIds: number[], + dataApiUrl: string +): Promise { + const loadVariableDataPromises = variableIds.map((variableId) => + loadVariableDataAndMetadata(variableId, dataApiUrl) + ) + const variablesData: OwidVariableDataMetadataDimensions[] = + await Promise.all(loadVariableDataPromises) + const variablesDataMap = new Map( + variablesData.map((data) => [data.metadata.id, data]) + ) + return variablesDataMap +} + +// function downloadData(): void { +// if (this.manuallyProvideData) { +// } else if (this.owidDataset) { +// this._receiveOwidDataAndApplySelection(this.owidDataset) +// } else void this.downloadLegacyDataFromOwidVariableIds() +// } + +// async function downloadLegacyDataFromOwidVariableIds( +// inputTableTransformer?: ChartTableTransformer +// ): Promise { +// if (this.variableIds.length === 0) +// // No data to download +// return + +// try { +// let variablesDataMap: MultipleOwidVariableDataDimensionsMap + +// const startMark = performance.now() +// if (this.useAdminAPI) { +// // TODO grapher model: switch this to downloading multiple data and metadata files +// variablesDataMap = await loadVariablesDataAdmin( +// this.dataApiUrlForAdmin, +// this.variableIds +// ) +// } else { +// variablesDataMap = await loadVariablesDataSite( +// this.variableIds, +// this.dataApiUrl +// ) +// } +// this.createPerformanceMeasurement("downloadVariablesData", startMark) + +// this._receiveOwidDataAndApplySelection( +// variablesDataMap, +// inputTableTransformer +// ) +// } catch (err) { +// // eslint-disable-next-line no-console +// console.log(`Error fetching '${err}'`) +// console.error(err) +// Bugsnag?.notify(`Error fetching variables: ${err}`, (event) => { +// event.addMetadata("context", { +// variableIds: this.variableIds, +// }) +// }) +// } +// } diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx index 222b77b38e1..4049224aa0c 100644 --- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx +++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx @@ -28,9 +28,6 @@ import { differenceObj, QueryParams, MultipleOwidVariableDataDimensionsMap, - OwidVariableDataMetadataDimensions, - OwidVariableMixedData, - OwidVariableWithSourceAndDimension, Bounds, DEFAULT_BOUNDS, minTimeBoundFromJSONOrNegativeInfinity, @@ -139,7 +136,6 @@ import { latestGrapherConfigSchema, GRAPHER_SQUARE_SIZE, } from "../core/GrapherConstants" -import { loadVariableDataAndMetadata } from "./loadVariable" import Cookies from "js-cookie" import { ChartDimension, @@ -207,7 +203,7 @@ import { import classnames from "classnames" import { GrapherAnalytics } from "./GrapherAnalytics" import { legacyToCurrentGrapherQueryParams } from "./GrapherUrlMigrations" -import { ChartInterface, ChartTableTransformer } from "../chart/ChartInterface" +import { ChartInterface } from "../chart/ChartInterface" import { MarimekkoChartManager } from "../stackedCharts/MarimekkoChartConstants" import { FacetChartManager } from "../facetChart/FacetChartConstants" import { @@ -239,55 +235,6 @@ declare global { } } -async function loadVariablesDataAdmin( - variableFetchBaseUrl: string | undefined, - variableIds: number[] -): Promise { - const dataFetchPath = (variableId: number): string => - variableFetchBaseUrl - ? `${variableFetchBaseUrl}/v1/variableById/data/${variableId}` - : `/api/data/variables/data/${variableId}.json` - const metadataFetchPath = (variableId: number): string => - variableFetchBaseUrl - ? `${variableFetchBaseUrl}/v1/variableById/metadata/${variableId}` - : `/api/data/variables/metadata/${variableId}.json` - - const loadVariableDataPromises = variableIds.map(async (variableId) => { - const dataPromise = window.admin.getJSON( - dataFetchPath(variableId) - ) as Promise - const metadataPromise = window.admin.getJSON( - metadataFetchPath(variableId) - ) as Promise - const [data, metadata] = await Promise.all([ - dataPromise, - metadataPromise, - ]) - return { data, metadata: { ...metadata, id: variableId } } - }) - const variablesData: OwidVariableDataMetadataDimensions[] = - await Promise.all(loadVariableDataPromises) - const variablesDataMap = new Map( - variablesData.map((data) => [data.metadata.id, data]) - ) - return variablesDataMap -} - -async function loadVariablesDataSite( - variableIds: number[], - dataApiUrl: string -): Promise { - const loadVariableDataPromises = variableIds.map((variableId) => - loadVariableDataAndMetadata(variableId, dataApiUrl) - ) - const variablesData: OwidVariableDataMetadataDimensions[] = - await Promise.all(loadVariableDataPromises) - const variablesDataMap = new Map( - variablesData.map((data) => [data.metadata.id, data]) - ) - return variablesDataMap -} - const DEFAULT_MS_PER_TICK = 100 // Exactly the same as GrapherInterface, but contains options that developers want but authors won't be touching. @@ -570,8 +517,6 @@ export class Grapher this.updateFromObject(props) } - if (!props.table) this.downloadData() - this.populateFromQueryParams( legacyToCurrentGrapherQueryParams(props.queryStr ?? "") ) @@ -617,14 +562,6 @@ export class Grapher return obj } - @action.bound downloadData(): void { - if (this.manuallyProvideData) { - // ignore - } else if (this.owidDataset) { - this._receiveOwidDataAndApplySelection(this.owidDataset) - } else void this.downloadLegacyDataFromOwidVariableIds() - } - @action.bound updateFromObject(obj?: GrapherProgrammaticInterface): void { if (!obj) return @@ -1134,49 +1071,9 @@ export class Grapher // In old browsers, the above may throw an error - just ignore it } } - - @action.bound - async downloadLegacyDataFromOwidVariableIds( - inputTableTransformer?: ChartTableTransformer - ): Promise { - if (this.variableIds.length === 0) - // No data to download - return - - let variablesDataMap: MultipleOwidVariableDataDimensionsMap - - const startMark = performance.now() - if (this.useAdminAPI) { - // TODO grapher model: switch this to downloading multiple data and metadata files - variablesDataMap = await loadVariablesDataAdmin( - this.dataApiUrlForAdmin, - this.variableIds - ) - } else { - variablesDataMap = await loadVariablesDataSite( - this.variableIds, - this.dataApiUrl - ) - } - this.createPerformanceMeasurement("downloadVariablesData", startMark) - - this._receiveOwidDataAndApplySelection( - variablesDataMap, - inputTableTransformer - ) - } - - @action.bound receiveOwidData( - json: MultipleOwidVariableDataDimensionsMap - ): void { - // TODO grapher model: switch this to downloading multiple data and metadata files - this._receiveOwidDataAndApplySelection(json) - } - @action.bound private _setInputTable( json: MultipleOwidVariableDataDimensionsMap, - legacyConfig: Partial, - inputTableTransformer?: ChartTableTransformer + legacyConfig: Partial ): void { // TODO grapher model: switch this to downloading multiple data and metadata files @@ -1201,9 +1098,7 @@ export class Grapher startMark ) - if (inputTableTransformer) - this.inputTable = inputTableTransformer(tableWithColors) - else this.inputTable = tableWithColors + this.inputTable = tableWithColors // We need to reset the dimensions because some of them may have changed slugs in the legacy // transformation (can happen when columns use targetTime) @@ -1218,30 +1113,17 @@ export class Grapher } else this.applyOriginalSelectionAsAuthored() } - @action rebuildInputOwidTable( - inputTableTransformer?: ChartTableTransformer - ): void { + @action rebuildInputOwidTable(): void { // TODO grapher model: switch this to downloading multiple data and metadata files if (!this.legacyVariableDataJson) return this._setInputTable( this.legacyVariableDataJson, - this.legacyConfigAsAuthored, - inputTableTransformer + this.legacyConfigAsAuthored ) } @observable private legacyVariableDataJson?: MultipleOwidVariableDataDimensionsMap - - @action.bound private _receiveOwidDataAndApplySelection( - json: MultipleOwidVariableDataDimensionsMap, - inputTableTransformer?: ChartTableTransformer - ): void { - this.legacyVariableDataJson = json - - this.rebuildInputOwidTable(inputTableTransformer) - } - @action.bound appendNewEntitySelectionOptions(): void { const { selection } = this const currentEntities = selection.availableEntityNameSet @@ -1470,12 +1352,6 @@ export class Grapher // todo: can we remove this? // I believe these states can only occur during editing. @action.bound private ensureValidConfigWhenEditing(): void { - this.disposers.push( - reaction( - () => this.variableIds, - () => this.downloadLegacyDataFromOwidVariableIds() - ) - ) const disposers = [ autorun(() => { if (!this.availableTabs.includes(this.activeTab)) @@ -1641,8 +1517,8 @@ export class Grapher return !isStatic ? "underline" : shouldIncludeDetailsInStaticExport - ? "superscript" - : "none" + ? "superscript" + : "none" } // Used for static exports. Defined at this level because they need to @@ -2101,7 +1977,7 @@ export class Grapher get typeExceptWhenLineChartAndSingleTimeThenWillBeBarChart(): GrapherChartType { return this.isLineChartThatTurnedIntoDiscreteBarActive ? GRAPHER_CHART_TYPES.DiscreteBar - : (this.activeChartType ?? GRAPHER_CHART_TYPES.LineChart) + : this.activeChartType ?? GRAPHER_CHART_TYPES.LineChart } @computed get isLineChart(): boolean { diff --git a/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.test.ts b/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.test.ts index a6bd3265a07..1f950c2a220 100755 --- a/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.test.ts +++ b/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.test.ts @@ -6,40 +6,17 @@ import { OwidTableSlugs, StandardOwidColumnDefs, LegacyGrapherInterface, - OwidChartDimensionInterface, } from "@ourworldindata/types" +import { ColumnTypeMap, ErrorValueTypes } from "@ourworldindata/core-table" import { - ColumnTypeMap, - ErrorValueTypes, - OwidTable, -} from "@ourworldindata/core-table" -import { legacyToOwidTableAndDimensions } from "./LegacyToOwidTable" + legacyToOwidTableAndDimensions, + legacyToOwidTableAndDimensionsWithMandatorySlug, +} from "./LegacyToOwidTable" import { MultipleOwidVariableDataDimensionsMap, OwidVariableDataMetadataDimensions, DimensionProperty, } from "@ourworldindata/utils" -import { getDimensionColumnSlug } from "../chart/ChartDimension.js" - -export const legacyToOwidTableAndDimensionsWithMandatorySlug = ( - json: MultipleOwidVariableDataDimensionsMap, - dimensions: OwidChartDimensionInterface[], - selectedEntityColors: - | { [entityName: string]: string | undefined } - | undefined -): OwidTable => { - const dimensionsWithSlug = dimensions?.map((dimension) => ({ - ...dimension, - slug: - dimension.slug ?? - getDimensionColumnSlug(dimension.variableId, dimension.targetYear), - })) - return legacyToOwidTableAndDimensions( - json, - dimensionsWithSlug, - selectedEntityColors - ) -} describe(legacyToOwidTableAndDimensions, () => { const legacyVariableEntry: OwidVariableDataMetadataDimensions = { diff --git a/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.ts b/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.ts index cde6503843f..84c2f2a1f88 100644 --- a/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.ts +++ b/packages/@ourworldindata/grapher/src/core/LegacyToOwidTable.ts @@ -10,6 +10,7 @@ import { OwidVariableDataMetadataDimensions, ErrorValue, OwidChartDimensionInterfaceWithMandatorySlug, + OwidChartDimensionInterface, EntityName, } from "@ourworldindata/types" import { @@ -40,6 +41,27 @@ import { isEmpty, } from "@ourworldindata/utils" import { isContinentsVariableId } from "./GrapherConstants" +import { getDimensionColumnSlug } from "../chart/ChartDimension.js" + +export const legacyToOwidTableAndDimensionsWithMandatorySlug = ( + json: MultipleOwidVariableDataDimensionsMap, + dimensions: OwidChartDimensionInterface[], + selectedEntityColors: + | { [entityName: string]: string | undefined } + | undefined +): OwidTable => { + const dimensionsWithSlug = dimensions?.map((dimension) => ({ + ...dimension, + slug: + dimension.slug ?? + getDimensionColumnSlug(dimension.variableId, dimension.targetYear), + })) + return legacyToOwidTableAndDimensions( + json, + dimensionsWithSlug, + selectedEntityColors + ) +} export const legacyToOwidTableAndDimensions = ( json: MultipleOwidVariableDataDimensionsMap, @@ -90,7 +112,8 @@ export const legacyToOwidTableAndDimensions = ( const valueColumnColor = dimension.display?.color // Ensure the column slug is unique by copying it from the dimensions // (there can be two columns of the same variable with different targetTimes) - valueColumnDef.slug = dimension.slug + if (dimension.slug) valueColumnDef.slug = dimension.slug + else throw new Error("Dimension slug was undefined") // Because database columns can contain mixed types, we want to avoid // parsing for Grapher data until we fix that. valueColumnDef.skipParsing = true @@ -336,8 +359,8 @@ export const legacyToOwidTableAndDimensions = ( ): string | ErrorValue => { if (!entityName) return ErrorValueTypes.UndefinedButShouldBeString return entityName && selectedEntityColors - ? (selectedEntityColors[entityName] ?? - ErrorValueTypes.UndefinedButShouldBeString) + ? selectedEntityColors[entityName] ?? + ErrorValueTypes.UndefinedButShouldBeString : ErrorValueTypes.UndefinedButShouldBeString } @@ -432,7 +455,7 @@ const fullJoinTables = ( // not exist in the first table const firstTableDuplicateForIndices: [ OwidTable | undefined, - string[] | undefined, + string[] | undefined ] = [tables[0], sharedColumnNames] const defsToAddPerTable = [firstTableDuplicateForIndices] .concat(zip(tables, columnsToAddPerTable)) @@ -622,8 +645,8 @@ const columnDefFromOwidVariable = ( const type = isContinent ? ColumnTypeNames.Continent : variable.type - ? variableTypeToColumnType(variable.type) - : ColumnTypeNames.NumberOrString + ? variableTypeToColumnType(variable.type) + : ColumnTypeNames.NumberOrString // Sorted values for ordinal columns const sort = diff --git a/packages/@ourworldindata/grapher/src/index.ts b/packages/@ourworldindata/grapher/src/index.ts index af37b72a2e9..eb6531ee74c 100644 --- a/packages/@ourworldindata/grapher/src/index.ts +++ b/packages/@ourworldindata/grapher/src/index.ts @@ -7,6 +7,7 @@ export { type ColorScaleBin, } from "./color/ColorScaleBin" export { ChartDimension } from "./chart/ChartDimension" +export { FetchingGrapher } from "./core/FetchingGrapher" export { GRAPHER_EMBEDDED_FIGURE_ATTR, GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR, diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx index 7be34995e79..ce992807114 100644 --- a/site/DataPageV2Content.tsx +++ b/site/DataPageV2Content.tsx @@ -1,10 +1,12 @@ -import { useState, useEffect, useMemo } from "react" -import { Grapher, GrapherProgrammaticInterface } from "@ourworldindata/grapher" +import { useMemo } from "react" +import { + FetchingGrapher, + GrapherProgrammaticInterface, +} from "@ourworldindata/grapher" import { REUSE_THIS_WORK_SECTION_ID, DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID, } from "@ourworldindata/components" -import { GrapherWithFallback } from "./GrapherWithFallback.js" import { RelatedCharts } from "./blocks/RelatedCharts.js" import { DataPageV2ContentFields, @@ -15,6 +17,11 @@ import { import { DocumentContext } from "./gdocs/DocumentContext.js" import { AttachmentsContext } from "./gdocs/AttachmentsContext.js" import StickyNav from "./blocks/StickyNav.js" +import { + ADMIN_BASE_URL, + BAKED_GRAPHER_URL, + DATA_API_URL, +} from "../settings/clientSettings.js" import AboutThisData from "./AboutThisData.js" import DataPageResearchAndWriting from "./DataPageResearchAndWriting.js" import MetadataSection from "./MetadataSection.js" @@ -41,8 +48,6 @@ export const DataPageV2Content = ({ grapherConfig: GrapherInterface imageMetadata: Record }) => { - const [grapher, setGrapher] = useState(undefined) - const titleFragments = joinTitleFragments( datapageData.attributionShort, datapageData.titleVariant @@ -58,10 +63,6 @@ export const DataPageV2Content = ({ [grapherConfig] ) - useEffect(() => { - setGrapher(new Grapher(mergedGrapherConfig)) - }, [mergedGrapherConfig]) - const stickyNavLinks = [ { text: "Explore the Data", @@ -97,10 +98,11 @@ export const DataPageV2Content = ({ >
-
@@ -132,15 +134,11 @@ export const DataPageV2Content = ({
-
-
- -
+
{grapher.slug && (