From c1afa743c2525919e1a6d5efc29bf1bedc9bdcf9 Mon Sep 17 00:00:00 2001
From: Daniel Bachler <daniel@danielbachler.de>
Date: Mon, 13 May 2024 13:58:45 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20initial=20sketch=20of=20notebook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/core/Grapher.tsx              | 53 ++++++++++++++++++-
 .../grapher/src/core/grapher.scss             | 11 ++++
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index 88c7b1e9374..53b3fb262f3 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -207,7 +207,7 @@ import {
     type EntitySelectorState,
 } from "../entitySelector/EntitySelector"
 import { SlideInDrawer } from "../slideInDrawer/SlideInDrawer"
-
+declare const StarboardEmbed: any // Inform TypeScript about StarboardEmbed
 declare global {
     interface Window {
         details?: DetailDictionary
@@ -2343,6 +2343,49 @@ export class Grapher
         void this.timelineController.togglePlay()
     }
 
+    @action.bound private async addNotebook() {
+        const notebookNode = document.createElement("div")
+        notebookNode.id = "notebook"
+        document.body.appendChild(notebookNode)
+        const packageUrl = "https://unpkg.com/starboard-wrap/dist/index.js"
+
+        const module = await import(packageUrl)
+
+        // Ensure the module is available and extract the necessary export
+        const { StarboardEmbed } = module
+
+        // Create a script tag to load the necessary library
+        const notebookContent = `# %% [markdown]
+# Setup code
+The code in the cell below provides the infrastructure to access our data. It is automatically run when the page is loaded.
+# %%--- [python]
+# properties:
+#   run_on_load: true
+# ---%%
+from pyodide.http import open_url
+import pandas as pd
+csv = open_url("${this.baseUrl}.csv")
+
+df = pd.read_csv(csv)
+
+# %% [markdown]
+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:
+#   run_on_load: true
+# ---%%
+df.head()
+`
+
+        const mount = document.querySelector("#notebook")
+        const el = new StarboardEmbed({
+            notebookContent: notebookContent,
+            src: "https://unpkg.com/starboard-notebook/dist/index.html",
+        })
+
+        mount!.appendChild(el)
+    }
+
     selection =
         this.manager?.selection ??
         new SelectionArray(
@@ -2444,6 +2487,14 @@ export class Grapher
                 title: "Reset to original",
                 category: "Navigation",
             },
+            {
+                combo: "ctrl+n",
+                fn: (): void => {
+                    void this.addNotebook()
+                },
+                title: "Open a notebook",
+                category: "Notebook",
+            },
         ]
 
         if (this.slideShow) {
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
index 78eef8f97eb..e7f1868d770 100644
--- a/packages/@ourworldindata/grapher/src/core/grapher.scss
+++ b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -251,3 +251,14 @@ $zindex-controls-drawer: 150;
 .dod-container {
     @include dod-container;
 }
+
+#notebook {
+    position: absolute;
+    top: 70px;
+    left: 50px;
+    right: 50px;
+    bottom: 50px;
+    background: white;
+    z-index: 100;
+    overflow-y: scroll;
+}