Feature/SOF-7236 - add api-examples submodule

.github/workflows/deploy.yml

@@ -28,8 +28,9 @@ jobs:
           python -m pip install -r requirements.txt
       - name: Build the JupyterLite site
         run: |
-          cp README.md content
-          jupyter lite build --contents content --output-dir dist
+          cp -rL content content-resolved
+          cp README.md content-resolved
+          jupyter lite build --contents content-resolved --output-dir dist
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:

.gitignore

@@ -117,3 +117,6 @@ _output
 .idea
 .venv
 .yarn
+
+# mat3ra-specific
+content-resolved/

README.md

@@ -37,9 +37,17 @@ From Team Mat3ra:
 -   `requirements.txt` is updated as part of the above to include the extension
 -   requires `pyenv` and `npm` installed
 
--   content is populated with:
+-   content is populated with a submodule of `exabyte-io/api-examples`:
 
 ```shell
 cd content
-git clone https://github.com/exabyte-io/api-examples.git api-examples
+git submodule add https://github.com/exabyte-io/api-examples.git api-examples
+```
+
+-   The `api-examples` repository utilizes symbolic links (symlinks) for certain folder structures. During the build process, we create an intermediary `content-resolved` folder using the `cp -rL` command. This command copies the `content` directory and resolves all symlinks to their referenced files or directories. This step ensures that the symlinks function correctly within JupyterLite.
+
+Here's the command we use for the build process:
+
+```shell
+cp -rL content content-resolved; jupyter lite build --contents content-resolved --output-dir dist
 ```

extensions/src/data_bridge/index.ts

@@ -48,11 +48,12 @@ const plugin: JupyterFrontEndPlugin<void> = {
         };
 
         // @ts-ignore
-        window.requestDataFromHost = () => {
+        window.requestDataFromHost = (variableName = "data") => {
             window.parent.postMessage(
                 {
                     type: "from-iframe-to-host",
                     requestData: true,
+                    variableName,
                 },
                 "*"
             );
@@ -61,11 +62,12 @@ const plugin: JupyterFrontEndPlugin<void> = {
         window.addEventListener("message", async (event) => {
             if (event.data.type === "from-host-to-iframe") {
                 let data = event.data.data;
+                let variableName = event.data.variableName || "data";
                 const dataJson = JSON.stringify(data);
                 const code = `
-import json
-data = json.loads('${dataJson}')
-    `;
+  import json
+  ${variableName} = json.loads('${dataJson}')
+      `;
                 // Similar to https://jupyterlab.readthedocs.io/en/stable/api/classes/application.LabShell.html#currentWidget
                 // https://jupyterlite.readthedocs.io/en/latest/reference/api/ts/interfaces/jupyterlite_application.ISingleWidgetShell.html#currentwidget
                 const currentWidget = app.shell.currentWidget;

package.json

@@ -0,0 +1,7 @@
+{
+  "scripts": {
+    "start": "python -m http.server -b localhost -d ./dist",
+    "build": "python -m pip install -r requirements.txt; cp -rL content content-resolved; jupyter lite build --contents content-resolved --output-dir dist",
+    "install": "cd content; git clone https://github.com/exabyte-io/api-examples.git?=feature/SOF-7232 api-examples; cd -"
+  }
+}

setup.sh

@@ -79,6 +79,7 @@ else
 fi
 
 cd $EXTENSION_NAME
+touch yarn.lock
 pip install -ve .
 jupyter labextension develop --overwrite .