Extract grapher loading [1/4]

.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
 }

adminSiteClient/GrapherConfigGridEditor.tsx

@@ -332,7 +332,8 @@ export class GrapherConfigGridEditor extends React.Component<GrapherConfigGridEd
                 // the same country selection as you zap through the variables
                 this.grapher.clearSelection()
             this.grapher.updateFromObject(newConfig)
-            this.grapher.downloadData()
+            // TODO: ensure data is downloaded
+            // this.grapher.downloadData()
         } else this.grapherElement = <Grapher {...newConfig} />
     }
 

baker/GrapherImageBaker.tsx

@@ -110,11 +110,11 @@ export function buildSvgOutFilepath(
 
 export async function grapherToSVG(
     jsonConfig: GrapherInterface,
-    vardata: MultipleOwidVariableDataDimensionsMap
+    _vardata: MultipleOwidVariableDataDimensionsMap
 ): Promise<string> {
     const grapher = new Grapher({ ...jsonConfig, manuallyProvideData: true })
     grapher.isExportingToSvgOrPng = true
     grapher.shouldIncludeDetailsInStaticExport = false
-    grapher.receiveOwidData(vardata)
+    // grapher.receiveOwidData(vardata)
     return grapher.staticSVG
 }

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) {

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

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
+            // )
         }
     }
 

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<GrapherInterface | undefined>(
+        props.config
+    )
+
+    const [inputTable, setInputTable] = React.useState<OwidTable | undefined>(
+        undefined
+    )
+
+    React.useEffect(() => {
+        async function fetchConfigAndLoadData(): Promise<void> {
+            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 (
+        <Grapher
+            table={inputTable}
+            queryStr={props.queryString}
+            dataApiUrl={props.dataApiUrl}
+            adminBaseUrl={props.adminBaseUrl}
+            bakedGrapherURL={props.bakedGrapherURL}
+        />
+    )
+}
+
+// async function loadVariablesDataAdmin(
+//     variableFetchBaseUrl: string | undefined,
+//     variableIds: number[]
+// ): Promise<MultipleOwidVariableDataDimensionsMap> {
+//     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<OwidVariableMixedData>
+//         const metadataPromise = window.admin.getJSON(
+//             metadataFetchPath(variableId)
+//         ) as Promise<OwidVariableWithSourceAndDimension>
+//         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<MultipleOwidVariableDataDimensionsMap> {
+    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<void> {
+//     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,
+//             })
+//         })
+//     }
+// }