pyscript · fpliger · Apr 28, 2022 · Apr 28, 2022 · Apr 28, 2022 · Apr 28, 2022
diff --git a/pyscriptjs/examples/bokeh.html b/pyscriptjs/examples/bokeh.html
@@ -1,6 +1,7 @@
 <html><head>
     <title>Bokeh Example</title>
     <meta charset="iso-8859-1">
+    <link rel="icon" type="image/x-icon" href="./favicon.png">
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js"></script>
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
@@ -40,11 +41,7 @@ <h1>Bokeh Example</h1>
 p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=15, line_color="navy", fill_color="orange", fill_alpha=0.5)
 p_json = json.dumps(json_item(p, "myplot"))
 
-print("about to embed")
-
 Bokeh.embed.embed_item(JSON.parse(p_json))
-
-print ("Done embedding...")
     </py-script>
 
 </body>

diff --git a/pyscriptjs/examples/bokeh_interactive.html b/pyscriptjs/examples/bokeh_interactive.html
@@ -1,6 +1,7 @@
 <html><head>
     <title>Bokeh Example</title>
     <meta charset="iso-8859-1">
+    <link rel="icon" type="image/x-icon" href="./favicon.png">
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>

diff --git a/pyscriptjs/examples/index.html b/pyscriptjs/examples/index.html
@@ -90,6 +90,12 @@ <h2 class="text-2xl font-bold text-blue-600"><a href="./panel.html" target=”_b
       WARNING: This examples takes a little longer to load. So be patient :)
     </p>
 
+    <h2 class="text-2xl font-bold text-blue-600"><a href="./panel_deckgl.html" target=”_blank”>NYC Taxi Data Panel DeckGL Demo</a></h2>
+    <p>Interactive application exploring the NYC Taxi dataset using Panel and DeckGL
+
+      WARNING: This examples takes a little longer to load. So be patient :)
+    </p>
+
     <h2 class="text-2xl font-bold text-blue-600"><a href="./toga/freedom.html" target=”_blank”>Freedom Units!</a></h2>
     <p>A Toga application (a Fahrenheit to Celsius converter), rendered as a Single Page App</p>
 

diff --git a/pyscriptjs/examples/panel.html b/pyscriptjs/examples/panel.html
@@ -2,6 +2,7 @@
   <head>
     <title>Panel Example</title>
     <meta charset="iso-8859-1">
+    <link rel="icon" type="image/x-icon" href="./favicon.png">
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
     <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>

diff --git a/pyscriptjs/examples/panel_deckgl.html b/pyscriptjs/examples/panel_deckgl.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <link rel="icon" type="image/x-icon" href="./favicon.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="theme-color" content="#0072b5">

diff --git a/pyscriptjs/examples/panel_kmeans.html b/pyscriptjs/examples/panel_kmeans.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <link rel="icon" type="image/x-icon" href="./favicon.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="theme-color" content="#000000">

diff --git a/pyscriptjs/examples/panel_stream.html b/pyscriptjs/examples/panel_stream.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta charset="utf-8">
+    <link rel="icon" type="image/x-icon" href="./favicon.png">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="theme-color" content="#000000">

diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte
@@ -2,45 +2,31 @@
     import Tailwind from './Tailwind.svelte';
     import { loadInterpreter } from './interpreter';
     import {
-        componentsNavOpen,
         initializers,
         loadedEnvironments,
         mode,
-        navBarOpen,
         postInitializers,
         pyodideLoaded,
         scriptsQueue,
     } from './stores';
 
-    let iconSize = 2;
     let pyodideReadyPromise;
 
-    function bumpSize(evt) {
-        iconSize = 4;
-    }
-
-    function downSize(evt) {
-        iconSize = 2;
-    }
-
     const initializePyodide = async () => {
         pyodideReadyPromise = loadInterpreter();
+        const pyodide = await pyodideReadyPromise;
         let newEnv = {
             id: 'a',
             promise: pyodideReadyPromise,
+            runtime: pyodide,
             state: 'loading',
         };
-        pyodideLoaded.set(pyodideReadyPromise);
+        pyodideLoaded.set(pyodide);
+
         loadedEnvironments.update((value: any): any => {
             value[newEnv['id']] = newEnv;
         });
 
-        let showNavBar = false;
-        let main = document.querySelector('#main');
-        navBarOpen.subscribe(value => {
-            showNavBar = value;
-        });
-
         // now we call all initializers before we actually executed all page scripts
         for (let initializer of $initializers) {
             await initializer();
@@ -61,10 +47,6 @@
             }
         }, 3000);
     };
-
-    function toggleComponentsNavBar(evt) {
-        componentsNavOpen.set(!$componentsNavOpen);
-    }
 </script>
 
 <svelte:head>

diff --git a/pyscriptjs/src/components/base.ts b/pyscriptjs/src/components/base.ts
@@ -1,4 +1,4 @@
-import { componentDetailsNavOpen, loadedEnvironments, mode, pyodideLoaded } from '../stores';
+import { loadedEnvironments, mode, pyodideLoaded } from '../stores';
 import { guidGenerator, addClasses } from '../utils';
 // Premise used to connect to the first available pyodide interpreter
 let pyodideReadyPromise;
@@ -13,10 +13,6 @@ loadedEnvironments.subscribe(value => {
     environments = value;
 });
 
-let propertiesNavOpen;
-componentDetailsNavOpen.subscribe(value => {
-    propertiesNavOpen = value;
-});
 
 mode.subscribe(value => {
     currentMode = value;
@@ -52,7 +48,11 @@ export class BaseEvalElement extends HTMLElement {
         this.outputElement.hidden = false;
     }
 
-    postEvaluate() {}
+    // subclasses should overwrite this method to define custom logic
+    // after code has been evaluated
+    postEvaluate() {
+        return null;
+    }
 
     checkId() {
            if (!this.id) this.id = this.constructor.name + '-' + guidGenerator();

diff --git a/pyscriptjs/src/components/pybox.ts b/pyscriptjs/src/components/pybox.ts
@@ -49,14 +49,12 @@ export class PyBox extends HTMLElement {
                 this.widths.push(`w-${w}`);
             }
         } else {
-            for (const el of mainDiv.childNodes) {
-                this.widths.push(`w-1/${mainDiv.childNodes.length}`);
-            }
+            this.widths = [...this.widths, ...[`w-1/${mainDiv.childNodes.length}`]];
         }
 
         this.widths.forEach((width, index)=>{
             const node: ChildNode = mainDiv.childNodes[index];
-            addClasses(node, [width, 'mx-4'])
+            addClasses(node, [width, 'mx-1'])
 
         })
 

diff --git a/pyscriptjs/src/components/pybutton.ts b/pyscriptjs/src/components/pybutton.ts
@@ -1,5 +1,5 @@
 import { BaseEvalElement } from './base';
-import { addClasses, ltrim, htmlDecode } from '../utils';
+import { addClasses, htmlDecode } from '../utils';
 
 export class PyButton extends BaseEvalElement {
     shadow: ShadowRoot;

diff --git a/pyscriptjs/src/components/pyenv.ts b/pyscriptjs/src/components/pyenv.ts
@@ -5,26 +5,21 @@ import { loadPackage, loadFromFile } from '../interpreter';
 
 // Premise used to connect to the first available pyodide interpreter
 let pyodideReadyPromise;
-let environments;
-let currentMode;
+let runtime;
 
 pyodideLoaded.subscribe(value => {
-    pyodideReadyPromise = value;
-});
-
-loadedEnvironments.subscribe(value => {
-    environments = value;
-});
-
-mode.subscribe(value => {
-    currentMode = value;
+    runtime = value;
+    console.log("RUNTIME READY")
 });
 
 export class PyEnv extends HTMLElement {
     shadow: ShadowRoot;
     wrapper: HTMLElement;
     code: string;
     environment: any;
+    runtime: any;
+    env: string[];
+    paths: string[];
 
     constructor() {
         super();
@@ -54,20 +49,20 @@ export class PyEnv extends HTMLElement {
         }
 
         async function loadEnv() {
-            const pyodide = await pyodideReadyPromise;
-            await loadPackage(env, pyodide);
+            await loadPackage(env, runtime);
             console.log('enviroment loaded');
         }
 
         async function loadPaths() {
             const pyodide = await pyodideReadyPromise;
             for (const singleFile of paths) {
-                await loadFromFile(singleFile, pyodide);
+                await loadFromFile(singleFile, runtime);
             }
             console.log('paths loaded');
         }
+
         addInitializer(loadEnv);
         addInitializer(loadPaths);
-        console.log('enviroment loading...', env);
+        console.log('enviroment loading...', this.env);
     }
 }
diff --git a/pyscriptjs/src/components/pyinputbox.ts b/pyscriptjs/src/components/pyinputbox.ts
@@ -1,5 +1,5 @@
 import { BaseEvalElement } from './base';
-import { addClasses, ltrim, htmlDecode } from '../utils';
+import { addClasses, htmlDecode } from '../utils';
 
 export class PyInputBox extends BaseEvalElement {
     shadow: ShadowRoot;

diff --git a/pyscriptjs/src/components/pyrepl.ts b/pyscriptjs/src/components/pyrepl.ts
@@ -5,7 +5,7 @@ import { keymap } from '@codemirror/view';
 import { defaultKeymap } from '@codemirror/commands';
 import { oneDarkTheme } from '@codemirror/theme-one-dark';
 
-import { componentDetailsNavOpen, currentComponentDetails, loadedEnvironments, mode, pyodideLoaded } from '../stores';
+import { componentDetailsNavOpen, loadedEnvironments, mode, pyodideLoaded } from '../stores';
 import { addClasses } from '../utils';
 import { BaseEvalElement } from './base';
 

diff --git a/pyscriptjs/src/components/pyscript.ts b/pyscriptjs/src/components/pyscript.ts
@@ -1,15 +1,7 @@
-import { EditorState } from '@codemirror/basic-setup';
-import { python } from '@codemirror/lang-python';
-import { StateCommand } from '@codemirror/state';
-import { keymap } from '@codemirror/view';
-import { defaultKeymap } from '@codemirror/commands';
-import { oneDarkTheme } from '@codemirror/theme-one-dark';
-
 import {
     addInitializer,
     addPostInitializer,
     addToScriptsQueue,
-    componentDetailsNavOpen,
     loadedEnvironments,
     mode,
     pyodideLoaded,
@@ -21,7 +13,6 @@ import { BaseEvalElement } from './base';
 let pyodideReadyPromise;
 let environments;
 let currentMode;
-let handlersCollected = false;
 
 pyodideLoaded.subscribe(value => {
     pyodideReadyPromise = value;
@@ -30,67 +21,16 @@ loadedEnvironments.subscribe(value => {
     environments = value;
 });
 
-let propertiesNavOpen;
-componentDetailsNavOpen.subscribe(value => {
-    propertiesNavOpen = value;
-});
-
 mode.subscribe(value => {
     currentMode = value;
 });
 
-function createCmdHandler(el) {
-    // Creates a codemirror cmd handler that calls the el.evaluate when an event
-    // triggers that specific cmd
-    const toggleCheckbox: StateCommand = ({ state, dispatch }) => {
-        return el.evaluate(state);
-    };
-    return toggleCheckbox;
-}
 
 // TODO: use type declaractions
 type PyodideInterface = {
     registerJsModule(name: string, module: object): void;
 };
 
-// TODO: This should be used as base for generic scripts that need exectutoin
-//        from PyScript to initializers, etc...
-class Script {
-    source: string;
-    state: string;
-    output: string;
-
-    constructor(source: string, output: string) {
-        this.output = output;
-        this.source = source;
-        this.state = 'waiting';
-    }
-
-    async evaluate() {
-        console.log('evaluate');
-        const pyodide = await pyodideReadyPromise;
-        // debugger
-        try {
-            // let source = this.editor.state.doc.toString();
-            let output;
-            if (this.source.includes('asyncio')) {
-                output = await pyodide.runPythonAsync(this.source);
-            } else {
-                output = pyodide.runPython(this.source);
-            }
-
-            if (this.output) {
-                // this.editorOut.innerHTML = s;
-            }
-            // if (output !== undefined){
-            //   this.addToOutput(output);
-            // }
-        } catch (err) {
-            console.log('OOOPS, this happened: ', err);
-            // this.addToOutput(err);
-        }
-    }
-}
 
 export class PyScript extends BaseEvalElement {
     constructor() {
@@ -104,25 +44,6 @@ export class PyScript extends BaseEvalElement {
         this.checkId();
         this.code = this.innerHTML;
         this.innerHTML = '';
-        const startState = EditorState.create({
-            doc: this.code,
-            extensions: [
-                keymap.of([
-                    ...defaultKeymap,
-                    { key: 'Ctrl-Enter', run: createCmdHandler(this) },
-                    { key: 'Shift-Enter', run: createCmdHandler(this) },
-                ]),
-                oneDarkTheme,
-                python(),
-                // Event listener function that is called every time an user types something on this editor
-                //   EditorView.updateListener.of((v:ViewUpdate) => {
-                //     if (v.docChanged) {
-                //       console.log(v.changes);
-
-                //     }
-                // })
-            ],
-        });
 
         const mainDiv = document.createElement('div');
         addClasses(mainDiv, ['parentBox', 'flex', 'flex-col', 'mx-8']);
@@ -234,7 +155,6 @@ async function initHandlers() {
         //   // pyodide.runPython(handlerCode);
         // }
     }
-    handlersCollected = true;
 
     matches = document.querySelectorAll('[pys-onKeyDown]');
     for (const el of matches) {
@@ -249,7 +169,7 @@ async function mountElements() {
     console.log('Collecting nodes to be mounted into python namespace...');
     const pyodide = await pyodideReadyPromise;
     const matches: NodeListOf<HTMLElement> = document.querySelectorAll('[py-mount]');
-    let output;
+
     let source = '';
     for (const el of matches) {
         let mountName = el.getAttribute('py-mount');