From 29b34619f36282cfd4411a92361a86adc2c95d0c Mon Sep 17 00:00:00 2001
From: Daniel Bachler <daniel@danielbachler.de>
Date: Mon, 13 May 2024 17:01:14 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20make=20notebooks=20work=20on=20d?=
 =?UTF-8?q?ata=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/DataPageV2.tsx  | 8 ++++++++
 site/GrapherPage.tsx | 8 +++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/site/DataPageV2.tsx b/site/DataPageV2.tsx
index bb3342646b6..81ca70468ac 100644
--- 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
index 2e74e3cda9e..e22315bbb30 100644
--- a/site/GrapherPage.tsx
+++ b/site/GrapherPage.tsx
@@ -248,15 +248,14 @@ 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
@@ -264,7 +263,6 @@ down you will find the code that you should be editing.
 # ---%%
 ${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: