From eb530a48312cab0f13c982a10c6b641fbfc6af5c Mon Sep 17 00:00:00 2001
From: "Maarten A. Breddels" <maartenbreddels@gmail.com>
Date: Wed, 13 Sep 2023 21:21:37 +0200
Subject: [PATCH 1/2] fix: make vega and altair work in the jupyter notebook

Because the vega url does not end with .js the CdnHandler does not
serve the file with the correct mimetype. We do not store the mime type
on disk, so we do not know the mimetype of the file.
Currently, the mimetype is guessed based on the file extension.
By giving a more explicit path that ends in .js, we can make sure the
mimetype is set correctly.
In the end this caused the Altair component not to work.
---
 solara/widgets/vue/vegalite.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/solara/widgets/vue/vegalite.vue b/solara/widgets/vue/vegalite.vue
index 846474b76..81d78846d 100644
--- a/solara/widgets/vue/vegalite.vue
+++ b/solara/widgets/vue/vegalite.vue
@@ -12,9 +12,9 @@ module.exports = {
         require.config({
             map: {
                 '*': {
-                    'vega': `${this.getCdn()}/vega@5`,
-                    'vega-lite': `${this.getCdn()}/vega-lite@5.8.0`,
-                    'vega-embed': `${this.getCdn()}/vega-embed@6`,
+                    'vega': `${this.getCdn()}/vega@5/build/vega.min.js`,
+                    'vega-lite': `${this.getCdn()}/vega-lite@5.8.0/build/vega-lite.min.js`,
+                    'vega-embed': `${this.getCdn()}/vega-embed@6/build/vega-embed.min.js`,
                 }
             }
         })

From 1ba43018225bfbfed90e57bae88dbe037ae94ac2 Mon Sep 17 00:00:00 2001
From: "Maarten A. Breddels" <maartenbreddels@gmail.com>
Date: Wed, 13 Sep 2023 21:26:24 +0200
Subject: [PATCH 2/2] fix: make vega and altair work in Jupyter Lab

Jupyter Lab does not provide requirejs, so we need to load it ourselves
similar to what we do in other vue templates.
---
 solara/widgets/vue/vegalite.vue | 56 +++++++++++++++++++++++----------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/solara/widgets/vue/vegalite.vue b/solara/widgets/vue/vegalite.vue
index 81d78846d..ad9f09a7d 100644
--- a/solara/widgets/vue/vegalite.vue
+++ b/solara/widgets/vue/vegalite.vue
@@ -6,22 +6,11 @@
 <script>
 module.exports = {
     created() {
-        requirejs.undef("vega")
-        requirejs.undef("vega-lite")
-        requirejs.undef("vega-embed")
-        require.config({
-            map: {
-                '*': {
-                    'vega': `${this.getCdn()}/vega@5/build/vega.min.js`,
-                    'vega-lite': `${this.getCdn()}/vega-lite@5.8.0/build/vega-lite.min.js`,
-                    'vega-embed': `${this.getCdn()}/vega-embed@6/build/vega-embed.min.js`,
-                }
-            }
-        })
-        // pre load
-        require(['vega', 'vega-lite', 'vega-embed'], () => {
-        })
-        this.do_plot_debounced = _.debounce(() => this.do_plot(), 100)
+        this.vegaLoaded = this.loadVega();
+        this.do_plot_debounced = _.debounce(async () => {
+            await this.vegaLoaded;
+            this.do_plot()
+        }, 100)
     },
     mounted() {
         this.do_plot_debounced();
@@ -64,6 +53,41 @@ module.exports = {
                 })();
             });
         },
+        async loadVega() {
+            await this.loadRequire();
+            requirejs.undef("vega")
+            requirejs.undef("vega-lite")
+            requirejs.undef("vega-embed")
+            require.config({
+                map: {
+                    '*': {
+                        'vega': `${this.getCdn()}/vega@5/build/vega.min.js`,
+                        'vega-lite': `${this.getCdn()}/vega-lite@5/build/vega-lite.min.js`,
+                        'vega-embed': `${this.getCdn()}/vega-embed@6/build/vega-embed.min.js`,
+                    }
+                }
+            })
+            // pre load
+            await new Promise((resolve, reject) => {
+                require(['vega', 'vega-lite', 'vega-embed'], () => {
+                    resolve()
+                }, reject)
+            });
+        },
+        loadRequire() {
+            /* Needed in lab */
+            if (window.requirejs) {
+                console.log('require found');
+                return Promise.resolve()
+            }
+            return new Promise((resolve, reject) => {
+                const script = document.createElement('script');
+                script.src = `${this.getCdn()}/requirejs@2.3.6/require.js`;
+                script.onload = resolve;
+                script.onerror = reject;
+                document.head.appendChild(script);
+            });
+        },
         getBaseUrl() {
             if (window.solara && window.solara.rootPath !== undefined) {
                 return solara.rootPath + "/";