🔨 make notebooks work on data pages

owid · May 13, 2024 · 29b3461 · 29b3461
1 parent 28b8972
commit 29b3461
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/site/DataPageV2.tsx b/site/DataPageV2.tsx
@@ -32,6 +32,7 @@ import { SiteFooter } from "./SiteFooter.js"
 import { SiteHeader } from "./SiteHeader.js"
 import { IFrameDetector } from "./IframeDetector.js"
 import { DebugProvider } from "./gdocs/DebugContext.js"
+import { getNotebookScript } from "./GrapherPage.js"
 
 export const DataPageV2 = (props: {
     grapher: GrapherInterface | undefined
@@ -168,6 +169,7 @@ export const DataPageV2 = (props: {
                         </DebugProvider>
                     </div>
                 </main>
+                <div id="notebook" />
                 <SiteFooter
                     baseUrl={baseUrl}
                     context={SiteFooterContext.dataPageV2}
@@ -180,6 +182,12 @@ export const DataPageV2 = (props: {
                         )}`,
                     }}
                 />
+                <script
+                    type="module"
+                    dangerouslySetInnerHTML={{
+                        __html: getNotebookScript(grapherConfig.slug!),
+                    }}
+                />
             </body>
         </html>
     )

diff --git a/site/GrapherPage.tsx b/site/GrapherPage.tsx
@@ -248,23 +248,21 @@ def get_data(slug: str) -> pd.DataFrame:
 
 `
 
-const getNotebookScript = (
+export const getNotebookScript = (
     slug: string
 ) => `import {StarboardEmbed} from "https://unpkg.com/starboard-wrap/dist/index.js"
     const mount = document.querySelector("#notebook");
 
     const notebook = \`# %% [markdown]
-# Plumbing code
-The code in the next cell should ideally live in a library or be hidden some other way. Further
-down you will find the code that you should be editing.
+# Setup code
+The code in the collapsed cell below provides the infrastructure to access our data. It is automatically run when the page is loaded and not very interesting to look at.
 # %%--- [python]
 # properties:
 #   collapsed: true
 #   run_on_load: true
 # ---%%
 ${notebook}
 # %% [markdown]
-# Your code
 Add your code below - the example shows the first few rows of the data. Refer to the pandas documentation of ask ChatGPT for help on how to manipulate pandas dataframes.
 # %%--- [python]
 # properties: