Skip to content

Commit

Permalink
✨ Use grapher config from API instead of from HTML in multiembedder.
Browse files Browse the repository at this point in the history
Also adds two new mockSiteRouter routes so that
in local dev we can fetch grapher configs from the
DB instead of R2 via the admin API
  • Loading branch information
danyx23 committed Sep 9, 2024
1 parent 0df5bff commit 8f4418c
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 4 deletions.
29 changes: 28 additions & 1 deletion adminSiteServer/mockSiteRouter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,11 @@ import { ExplorerAdminServer } from "../explorerAdminServer/ExplorerAdminServer.
import { grapherToSVG } from "../baker/GrapherImageBaker.js"
import { getVariableData, getVariableMetadata } from "../db/model/Variable.js"
import { MultiEmbedderTestPage } from "../site/multiembedder/MultiEmbedderTestPage.js"
import { JsonError } from "@ourworldindata/utils"
import {
DbRawChartConfig,
JsonError,
parseChartConfig,
} from "@ourworldindata/utils"
import { GIT_CMS_DIR } from "../gitCms/GitCmsConstants.js"
import { EXPLORERS_ROUTE_FOLDER } from "../explorer/ExplorerConstants.js"
import { getExplorerRedirectForPath } from "../explorerAdminServer/ExplorerRedirects.js"
Expand Down Expand Up @@ -197,6 +201,29 @@ mockSiteRouter.get("/collection/custom", async (_, res) => {
return res.send(await renderDynamicCollectionPage())
})

getPlainRouteWithROTransaction(
mockSiteRouter,
"/grapher/by-uuid/:uuid.config.json",
async (req, res, trx) => {
const chartRow = await db.knexRawFirst<Pick<DbRawChartConfig, "full">>(
trx,
"SELECT full FROM chart_configs WHERE id = ?",
[req.params.uuid]
)
if (!chartRow) throw new JsonError("No such chart", 404)
const config = parseChartConfig(chartRow.full)
res.json(config)
}
)

getPlainRouteWithROTransaction(
mockSiteRouter,
"/grapher/:slug.config.json",
async (req, res, trx) => {
const chartRow = await getChartConfigBySlug(trx, req.params.slug)
res.json(chartRow.config)
}
)
// TODO: this transaction is only RW because somewhere inside it we fetch images
getPlainRouteNonIdempotentWithRWTransaction(
mockSiteRouter,
Expand Down
3 changes: 3 additions & 0 deletions settings/clientSettings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ export const BAKED_SITE_EXPORTS_BASE_URL: string =
export const GRAPHER_DYNAMIC_THUMBNAIL_URL: string =
process.env.GRAPHER_DYNAMIC_THUMBNAIL_URL ?? `${BAKED_GRAPHER_URL}`

export const GRAPHER_DYNAMIC_CONFIG_URL: string =
process.env.GRAPHER_DYNAMIC_CONFIG_URL ?? `${BAKED_GRAPHER_URL}`

export const ADMIN_BASE_URL: string =
process.env.ADMIN_BASE_URL ??
`http://${ADMIN_SERVER_HOST}:${ADMIN_SERVER_PORT}`
Expand Down
11 changes: 8 additions & 3 deletions site/multiembedder/MultiEmbedder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import {
ADMIN_BASE_URL,
BAKED_GRAPHER_URL,
DATA_API_URL,
GRAPHER_DYNAMIC_CONFIG_URL,
} from "../../settings/clientSettings.js"
import Bugsnag from "@bugsnag/js"
import { embedDynamicCollectionGrapher } from "../collections/DynamicCollection.js"
Expand Down Expand Up @@ -159,9 +160,8 @@ class MultiEmbedder {
dataApiUrl: DATA_API_URL,
}

const html = await fetchText(fullUrl)

if (isExplorer) {
const html = await fetchText(fullUrl)
let grapherConfigs = deserializeJSONFromHTML(
html,
EMBEDDED_EXPLORER_GRAPHER_CONFIGS
Expand Down Expand Up @@ -201,8 +201,13 @@ class MultiEmbedder {
ReactDOM.render(<Explorer {...props} />, figure)
} else {
figure.classList.remove(GRAPHER_PREVIEW_CLASS)
const url = new URL(fullUrl)
const slug = url.pathname.split("/").pop()
const configUrl = `${GRAPHER_DYNAMIC_CONFIG_URL}/${slug}.config.json`

const grapherPageConfig = deserializeJSONFromHTML(html)
const grapherPageConfig = await fetch(configUrl).then((res) =>
res.json()
)

const figureConfigAttr = figure.getAttribute(
GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR
Expand Down

0 comments on commit 8f4418c

Please sign in to comment.