Add catalogPath to mdims

* Catalog path will now be the main ID used by ETL * It's temporarily allowed to be null; we'll disallow that once existing data is migrated * Slug is now allowed to be null, since it will be only set in admin at some point * For that reason we'll use the catalog path as a slug for previews of mdims in the admin, i.e. `/admin/grapher/{catalogPath}`
owid · Feb 26, 2025 · cb3b623 · cb3b623
1 parent 60c0d5d
commit cb3b623
Show file tree

Hide file tree

Showing 14 changed files with 220 additions and 98 deletions.
diff --git a/adminSiteClient/MultiDimIndexPage.tsx b/adminSiteClient/MultiDimIndexPage.tsx
@@ -19,7 +19,7 @@ import { AdminLayout } from "./AdminLayout.js"
 import { AdminAppContext } from "./AdminAppContext.js"
 import urljoin from "url-join"
 import {
-    BAKED_BASE_URL,
+    ADMIN_BASE_URL,
     BAKED_GRAPHER_URL,
     GRAPHER_DYNAMIC_THUMBNAIL_URL,
 } from "../settings/clientSettings.js"
@@ -28,6 +28,7 @@ import { Link } from "./Link.js"
 
 type ApiMultiDim = {
     id: number
+    catalogPath: string | null
     title: string
     slug: string
     updatedAt: string
@@ -86,21 +87,31 @@ function createColumns(
             render: (_, record) => {
                 return (
                     <a
-                        href={urljoin(
-                            BAKED_BASE_URL,
-                            `/admin/grapher/${record.slug}`
-                        )}
+                        href={
+                            record.catalogPath
+                                ? urljoin(
+                                      ADMIN_BASE_URL,
+                                      `/admin/grapher/${encodeURIComponent(
+                                          record.catalogPath
+                                      )}`
+                                  )
+                                : undefined
+                        }
                         target="_blank"
                         rel="noopener"
                     >
-                        <img
-                            src={urljoin(
-                                GRAPHER_DYNAMIC_THUMBNAIL_URL,
-                                `/${record.slug}.png?imHeight=400`
-                            )}
-                            style={{ height: "140px", width: "auto" }}
-                            alt="Preview"
-                        />
+                        {record.slug ? (
+                            <img
+                                src={urljoin(
+                                    GRAPHER_DYNAMIC_THUMBNAIL_URL,
+                                    `/${record.slug}.png?imHeight=400`
+                                )}
+                                style={{ height: "140px", width: "auto" }}
+                                alt="Preview"
+                            />
+                        ) : (
+                            "Preview"
+                        )}
                     </a>
                 )
             },
@@ -109,7 +120,6 @@ function createColumns(
             title: "Title",
             dataIndex: "title",
             key: "title",
-            width: 280,
             render: (text, record) =>
                 record.published ? (
                     <a
@@ -124,6 +134,20 @@ function createColumns(
                 ),
             sorter: (a, b) => a.title.localeCompare(b.title),
         },
+        {
+            title: "Catalog path",
+            dataIndex: "catalogPath",
+            key: "catalogPath",
+            render: (catalogPath) =>
+                catalogPath && (
+                    <Typography.Text copyable>{catalogPath}</Typography.Text>
+                ),
+            sorter: (a, b) => {
+                if (a.catalogPath === null) return 1
+                if (b.catalogPath === null) return -1
+                return a.catalogPath.localeCompare(b.catalogPath)
+            },
+        },
         {
             title: "Slug",
             dataIndex: "slug",
@@ -164,8 +188,9 @@ function createColumns(
                     <Switch
                         checked={published}
                         disabled={
-                            publishMutation.isLoading &&
-                            publishMutation.variables?.id === record.id
+                            !record.slug ||
+                            (publishMutation.isLoading &&
+                                publishMutation.variables?.id === record.id)
                         }
                     />
                 </Popconfirm>

diff --git a/adminSiteServer/adminRouter.tsx b/adminSiteServer/adminRouter.tsx
@@ -44,7 +44,10 @@ import { getChartConfigBySlug } from "../db/model/Chart.js"
 import { getVariableMetadata } from "../db/model/Variable.js"
 import { DbPlainDatasetFile, DbPlainDataset } from "@ourworldindata/types"
 import { getPlainRouteWithROTransaction } from "./plainRouterHelpers.js"
-import { getMultiDimDataPageBySlug } from "../db/model/MultiDimDataPage.js"
+import {
+    getMultiDimDataPageByCatalogPath,
+    getMultiDimDataPageBySlug,
+} from "../db/model/MultiDimDataPage.js"
 import { renderMultiDimDataPageFromConfig } from "../baker/MultiDimBaker.js"
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -356,13 +359,14 @@ getPlainRouteWithROTransaction(
             return
         }
 
-        const mdd = await getMultiDimDataPageBySlug(trx, slug, {
-            onlyPublished: false,
-        })
+        const mdd =
+            (await getMultiDimDataPageBySlug(trx, slug, {
+                onlyPublished: false,
+            })) ?? (await getMultiDimDataPageByCatalogPath(trx, slug))
         if (mdd) {
             const renderedPage = await renderMultiDimDataPageFromConfig({
                 knex: trx,
-                slug,
+                slug: mdd.slug,
                 config: mdd.config,
                 isPreviewing: true,
             })

diff --git a/adminSiteServer/apiRouter.ts b/adminSiteServer/apiRouter.ts
@@ -291,7 +291,11 @@ getRouteWithROTransaction(apiRouter, "/images/usage", getImageUsageHandler)
 
 // Mdim routes
 getRouteWithROTransaction(apiRouter, "/multi-dims.json", handleGetMultiDims)
-putRouteWithRWTransaction(apiRouter, "/multi-dim/:slug", handlePutMultiDim)
+putRouteWithRWTransaction(
+    apiRouter,
+    "/multi-dims/:catalogPath",
+    handlePutMultiDim
+)
 patchRouteWithRWTransaction(apiRouter, "/multi-dims/:id", handlePatchMultiDim)
 
 // Misc routes

diff --git a/adminSiteServer/apiRoutes/mdims.ts b/adminSiteServer/apiRoutes/mdims.ts
@@ -1,22 +1,24 @@
 import {
+    DbPlainMultiDimDataPage,
     JsonError,
     MultiDimDataPageConfigRaw,
     MultiDimDataPagesTableName,
 } from "@ourworldindata/types"
+import { getMultiDimDataPageById } from "../../db/model/MultiDimDataPage.js"
+import { expectInt } from "../../serverUtils/serverUtil.js"
 import {
-    getMultiDimDataPageById,
-    multiDimDataPageExists,
-} from "../../db/model/MultiDimDataPage.js"
-import { expectInt, isValidSlug } from "../../serverUtils/serverUtil.js"
-import {
-    upsertMultiDimConfig,
+    upsertMultiDim,
     setMultiDimPublished,
     setMultiDimSlug,
 } from "../multiDim.js"
 import { triggerStaticBuild } from "./routeUtils.js"
 import { Request } from "../authentication.js"
 import * as db from "../../db/db.js"
-import { validateNewGrapherSlug, validateMultiDimSlug } from "../validation.js"
+import {
+    validateNewGrapherSlug,
+    validateMultiDimSlug,
+    isValidCatalogPath,
+} from "../validation.js"
 import e from "express"
 
 export async function handleGetMultiDims(
@@ -25,17 +27,17 @@ export async function handleGetMultiDims(
     trx: db.KnexReadonlyTransaction
 ) {
     try {
-        const results = await db.knexRaw<{
-            id: number
-            slug: string
-            title: string
-            updatedAt: string
-            published: number
-        }>(
+        const results = await db.knexRaw<
+            Pick<
+                DbPlainMultiDimDataPage,
+                "id" | "catalogPath" | "slug" | "updatedAt" | "published"
+            > & { title: string }
+        >(
             trx,
             `-- sql
             SELECT
                 id,
+                catalogPath,
                 slug,
                 config->>'$.title.title' as title,
                 updatedAt,
@@ -57,20 +59,25 @@ export async function handlePutMultiDim(
     res: e.Response<any, Record<string, any>>,
     trx: db.KnexReadWriteTransaction
 ) {
-    const { slug } = req.params
-    if (!isValidSlug(slug)) {
-        throw new JsonError(`Invalid multi-dim slug ${slug}`)
+    const { catalogPath } = req.params
+    if (!isValidCatalogPath(catalogPath)) {
+        throw new JsonError(`Invalid multi-dim catalog path ${catalogPath}`)
     }
-    if (!(await multiDimDataPageExists(trx, { slug }))) {
-        await validateNewGrapherSlug(trx, slug)
+    const { config: rawConfig } = req.body as {
+        config: MultiDimDataPageConfigRaw
     }
-    const rawConfig = req.body as MultiDimDataPageConfigRaw
-    const id = await upsertMultiDimConfig(trx, slug, rawConfig)
+    const id = await upsertMultiDim(trx, catalogPath, rawConfig)
 
-    if (await multiDimDataPageExists(trx, { slug, published: true })) {
+    const { slug: publishedSlug } =
+        (await trx<DbPlainMultiDimDataPage>(MultiDimDataPagesTableName)
+            .select("slug")
+            .where("catalogPath", catalogPath)
+            .where("published", true)
+            .first()) ?? {}
+    if (publishedSlug) {
         await triggerStaticBuild(
             res.locals.user,
-            `Publishing multidimensional chart ${slug}`
+            `Publishing multidimensional chart ${publishedSlug}`
         )
     }
     return { success: true, id }

diff --git a/adminSiteServer/app.test.ts b/adminSiteServer/app.test.ts
@@ -492,11 +492,12 @@ describe("OwidAdminApp: indicator-level chart configs", () => {
         // create mdim config that uses both of the variables
         await makeRequestAgainstAdminApi({
             method: "PUT",
-            path: "/multi-dim/energy",
-            body: JSON.stringify(testMultiDimConfig),
+            path: "/multi-dims/test%2Fcatalog%23path",
+            body: JSON.stringify({ config: testMultiDimConfig }),
         })
         const mdim = await testKnexInstance!(MultiDimDataPagesTableName).first()
-        expect(mdim.slug).toBe("energy")
+        expect(mdim.catalogPath).toBe("test/catalog#path")
+        expect(mdim.slug).toBe(null)
         const savedMdimConfig = JSON.parse(mdim.config)
         // variableId should be normalized to an array
         expect(savedMdimConfig.views[0].indicators.y).toBeInstanceOf(Array)
@@ -516,7 +517,6 @@ describe("OwidAdminApp: indicator-level chart configs", () => {
             ...mergedGrapherConfig,
             title: "Total energy use",
             selectedEntityNames: [], // mdims define their own default entities
-            slug: "energy",
         }
         const fullViewConfig1 = await testKnexInstance!(ChartConfigsTableName)
             .where("id", mdxcc1.chartConfigId)