🎉 add di section to the chart editor ref tab

owid · Feb 13, 2025 · 76bf05c · 76bf05c
1 parent 39c2cd7
commit 76bf05c
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 40 deletions.
diff --git a/adminShared/AdminTypes.ts b/adminShared/AdminTypes.ts
@@ -17,6 +17,7 @@ export interface DataInsight {
     gdocId: string
     title: string
     published: boolean
+    narrativeChart?: string
     figmaUrl?: string
     image?: {
         id: NonNullable<DbRawImage["id"]>

diff --git a/adminSiteClient/EditorReferencesTab.tsx b/adminSiteClient/EditorReferencesTab.tsx
@@ -133,6 +133,9 @@ export class EditorReferencesTabForChart extends Component<{
                             <ReferencesChartViews
                                 references={this.references}
                             />
+                            <ReferencesDataInsights
+                                references={this.references}
+                            />
                         </>
                     ) : (
                         <p>No references found</p>
@@ -202,7 +205,12 @@ export class EditorReferencesTabForChartView extends Component<{
                             <ReferencesGdocPosts references={this.references} />
                             <ReferencesDataInsights
                                 references={this.references}
-                                chartViewConfigId={this.chartViewConfigId}
+                                canReuploadImage={(dataInsight) =>
+                                    !!dataInsight.image && !dataInsight.figmaUrl
+                                }
+                                makeImageUrl={() =>
+                                    `${GRAPHER_DYNAMIC_THUMBNAIL_URL}/by-uuid/${this.chartViewConfigId}.png?imType=square&nocache`
+                                }
                             />
                         </>
                     ) : (
@@ -475,7 +483,8 @@ const NotificationContext = createContext(null)
 
 const ReferencesDataInsights = (props: {
     references: Pick<References, "dataInsights">
-    chartViewConfigId: string
+    canReuploadImage?: (dataInsight: DataInsight) => boolean
+    makeImageUrl?: (dataInsight: DataInsight) => string
 }) => {
     const [dataInsightForUpload, setDataInsightForUpload] =
         useState<DataInsight>()
@@ -506,38 +515,32 @@ const ReferencesDataInsights = (props: {
         <div className="ReferencesDataInsights">
             <NotificationContext.Provider value={null}>
                 {notificationContextHolder}
-                <p>Data insights based on this narrative chart</p>
+                <p>Data insights based on this chart</p>
                 <ul className="list-group">
-                    {props.references.dataInsights.map((dataInsight) => {
-                        const canReuploadImage =
-                            dataInsight.image && !dataInsight.figmaUrl
-                        return (
-                            <Fragment key={dataInsight.gdocId}>
-                                <li>
-                                    <a
-                                        className="list-group-item"
-                                        href={`/admin/gdocs/${dataInsight.gdocId}/preview`}
-                                        target="_blank"
-                                        rel="noopener"
+                    {props.references.dataInsights.map((dataInsight) => (
+                        <Fragment key={dataInsight.gdocId}>
+                            <li>
+                                <a
+                                    className="list-group-item"
+                                    href={`/admin/gdocs/${dataInsight.gdocId}/preview`}
+                                    target="_blank"
+                                    rel="noopener"
+                                >
+                                    <strong>{dataInsight.title}</strong>
+                                </a>
+                                {props.canReuploadImage?.(dataInsight) && (
+                                    <button
+                                        className="btn btn-secondary"
+                                        onClick={() =>
+                                            setDataInsightForUpload(dataInsight)
+                                        }
                                     >
-                                        <strong>{dataInsight.title}</strong>
-                                    </a>
-                                    {canReuploadImage && (
-                                        <button
-                                            className="btn btn-secondary"
-                                            onClick={() =>
-                                                setDataInsightForUpload(
-                                                    dataInsight
-                                                )
-                                            }
-                                        >
-                                            Upload static export as DI image
-                                        </button>
-                                    )}
-                                </li>
-                            </Fragment>
-                        )
-                    })}
+                                        Upload static export as DI image
+                                    </button>
+                                )}
+                            </li>
+                        </Fragment>
+                    ))}
                 </ul>
                 {dataInsightForUpload?.image && (
                     <ReuploadImageForDataInsightModal
@@ -547,7 +550,7 @@ const ReferencesDataInsights = (props: {
                             title: dataInsightForUpload.title,
                         }}
                         existingImage={dataInsightForUpload.image}
-                        sourceUrl={`${GRAPHER_DYNAMIC_THUMBNAIL_URL}/by-uuid/${props.chartViewConfigId}.png?imType=square&nocache`}
+                        sourceUrl={props.makeImageUrl?.(dataInsightForUpload)}
                         closeModal={() => setDataInsightForUpload(undefined)}
                         onUploadComplete={onImageUploadComplete}
                     />

diff --git a/adminSiteServer/apiRoutes/charts.ts b/adminSiteServer/apiRoutes/charts.ts
@@ -62,6 +62,8 @@ import { getPublishedLinksTo } from "../../db/model/Link.js"
 
 import { Request } from "../authentication.js"
 import e from "express"
+import { DataInsight } from "../../adminShared/AdminTypes.js"
+
 export const getReferencesByChartId = async (
     chartId: number,
     knex: db.KnexReadonlyTransaction
@@ -90,13 +92,45 @@ export const getReferencesByChartId = async (
         WHERE cv.parentChartId = ?`,
         [chartId]
     )
-    const [postsWordpress, postsGdocs, explorerSlugs, chartViews] =
-        await Promise.all([
-            postsWordpressPromise,
-            postGdocsPromise,
-            explorerSlugsPromise,
-            chartViewsPromise,
-        ])
+    const dataInsightsPromise = db.knexRaw<DataInsight>(
+        knex,
+        `-- sql
+        SELECT
+            pg.id AS gdocId,
+            pg.content ->> '$.title' AS title,
+            pg.published,
+            content ->> '$."narrative-chart"' AS narrativeChart,
+            content ->> '$."figma-url"' AS figmaUrl,
+            JSON_OBJECT(
+                'id', i.id,
+                'filename', i.filename,
+                'cloudflareId', i.cloudflareId,
+                'originalWidth', i.originalWidth
+            ) AS image
+        FROM charts c
+        JOIN chart_configs cc ON c.configId = cc.id
+        LEFT JOIN posts_gdocs pg ON cc.slug = SUBSTRING_INDEX(SUBSTRING_INDEX(pg.content ->> '$."grapher-url"', '/grapher/', -1), '\\?', 1)
+        -- join the images table by filename (only works for data insights where the image block comes first)
+        LEFT JOIN images i ON i.filename = COALESCE(pg.content ->> '$.body[0].smallFilename', pg.content ->> '$.body[0].filename')
+        WHERE c.id = ?
+            AND pg.type = 'data-insight'
+            AND i.replacedBy IS NULL;
+        `,
+        [chartId]
+    )
+    const [
+        postsWordpress,
+        postsGdocs,
+        explorerSlugs,
+        chartViews,
+        dataInsights,
+    ] = await Promise.all([
+        postsWordpressPromise,
+        postGdocsPromise,
+        explorerSlugsPromise,
+        chartViewsPromise,
+        dataInsightsPromise,
+    ])
 
     return {
         postsGdocs,
@@ -105,6 +139,7 @@ export const getReferencesByChartId = async (
             (row: { explorerSlug: string }) => row.explorerSlug
         ),
         chartViews,
+        dataInsights,
     }
 }