Running a file from the extension.

[gautamsarawagi]

import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
import { IDocumentManager, } from '@jupyterlab/docmanager'
import { IRunMenu } from '@jupyterlab/mainmenu';

const plugin: JupyterFrontEndPlugin<void> = {
  id: 'file-communication:plugin',
  autoStart: true,
  requires: [IDocumentManager],
  activate: (app: JupyterFrontEnd, contentsManager: IDocumentManager, fileRunManager: IRunMenu) => {
    window.parent.postMessage({type: 'file-communication',message: 'JupyterLab extension jupyterlab-iframe-bridge-example is activated!'}, '*');

    window.addEventListener('message', (event) => {
      if (event.data.type === 'from-host-to-iframe-for-file') {
        const { filePath,fileContent } = event.data;

        contentsManager['services'].contents.save(filePath,{
          name: filePath,
          content:fileContent,
          writable: true
        }).then((res) => {
          notifyHostFileSaved()
        })
        .catch((err) => {
          console.log(err)
        })
      }

      if(event.data.type === 'from-host-to-iframe-open-ipynb'){
        const {filePath} = event.data
        contentsManager.open(filePath)
        fileRunManager.codeRunners.runAll
      }
    });

    const notifyHostFileSaved = (): void => {
      const message = { type: 'from-iframe-to-host-for-file', message: 'File saved successfully' };
      window.parent.postMessage(message, '*');
    };
  },
};

export default plugin;

I have built an extension to save a file and execute one now this section is somehow not running:
if(event.data.type === 'from-host-to-iframe-open-ipynb'){ const {filePath} = event.data contentsManager.open(filePath) fileRunManager.codeRunners.runAll }

Pls guide me where I am doing wrong?

[krassowski]

fileRunManager.codeRunners.runAll is a semantic command object (see https://jupyterlab.readthedocs.io/en/stable/api/interfaces/mainmenu.IRunMenu.ICodeRunner.html#runAll and https://jupyterlab.readthedocs.io/en/stable/api/classes/apputils.SemanticCommand.html) you need to get the command id for the active widget (getActiveCommandId) and then execute that command.

Does it help?

[gautamsarawagi]

Thanks for the reply @krassowski.Based on the above I updated the code as follows:

import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
import { SemanticCommand } from '@jupyterlab/apputils';
import { IDocumentManager } from '@jupyterlab/docmanager'
import { IRunMenu } from '@jupyterlab/mainmenu';

const plugin: JupyterFrontEndPlugin<void> = {
  id: 'file-communication:plugin',
  autoStart: true,
  requires: [IDocumentManager],
  activate: (app: JupyterFrontEnd, contentsManager: IDocumentManager,sematicCommand: SemanticCommand, menu: IRunMenu) => {
    window.parent.postMessage({type: 'file-communication',message: 'JupyterLab extension jupyterlab-iframe-bridge-example is activated!'}, '*');

    window.addEventListener('message', (event) => {
      if (event.data.type === 'from-host-to-iframe-for-file') {
        const { filePath,fileContent } = event.data;

        contentsManager['services'].contents.save(filePath,{
          name: filePath,
          content:fileContent,
          writable: true
        }).then((res) => {
          notifyHostFileSaved()
        })
        .catch((err) => {
          console.log(err)
        })
      }

      if(event.data.type === 'from-host-to-iframe-open-ipynb'){
        const {filePath} = event.data
        const activeWidget = contentsManager.open(filePath)?.activate()

        if(activeWidget) {
          menu.codeRunners.runAll.getActiveCommandId(activeWidget)
        }
      }
    }); 

    const notifyHostFileSaved = (): void => {
      const message = { type: 'from-iframe-to-host-for-file', message: 'File saved successfully' };
      window.parent.postMessage(message, '*');
    };
  },
};

export default plugin; 

But still not able to run the file. It just opens the file:

[krassowski]

You need to call the command with the id returned by const id= menu.codeRunners.runAll.getActiveCommandId(activeWidget). Something like app.commands.execute(id). You may need to pass some additional arguments to execute call.

[gautamsarawagi]

@krassowski I tried the above but it was not working. I came across this discussion If you can pls check this.

Here is the code from that reference:

import { JupyterFrontEnd, JupyterFrontEndPlugin, JupyterLab } from '@jupyterlab/application';
import { IDocumentManager } from '@jupyterlab/docmanager'
import { IEditorTracker } from '@jupyterlab/fileeditor';
import { IMainMenu } from '@jupyterlab/mainmenu';
import { NotebookActions, NotebookPanel } from '@jupyterlab/notebook';

const plugin: JupyterFrontEndPlugin<void> = {
  id: 'file-communication:plugin',
  autoStart: true,
  requires: [IDocumentManager, IMainMenu],
  activate: (app: JupyterFrontEnd, contentsManager: IDocumentManager, menu: IMainMenu, mainApp: JupyterLab,tracker: IEditorTracker) => {

    // extension getting activated

    window.parent.postMessage({ type: 'file-communication', message: 'JupyterLab extension jupyterlab-iframe-bridge-example is activated!' }, '*');

    // notfications from the host
    window.addEventListener('message', async (event) => {

      // saving the data.
      if (event.data.type === 'from-host-to-iframe-for-file-saving') {
        const { filePath, fileContent } = event.data;

        try {
          await saveContentToFile(filePath,fileContent)
          notifyHostFileSaved()
        } catch (error) {
          console.error('File Saving Error: ', error)
        }
      }

      // saving and auto-execution of ipynb
      if (event.data.type === 'from-host-to-iframe-for-file-execution') {

        const { filePath,fileContent } = event.data
        try {
          await saveContentToFile(filePath,fileContent)
          executeCode(filePath)
        } catch (error) {
          console.error('File Execution Error: ', error)
        }
      }
    });


    // helper functions

    // saving file content to the given path
    const saveContentToFile = (filePath:string,fileContent:string) => {
      return contentsManager.services.contents.save(filePath, {
        name: filePath,
        content: fileContent,
        writable: true
      })
    }

    // auto-execution of file
    const executeCode = async (filePath: string): Promise<void> => {
      const widget = contentsManager.open(filePath, 'default', { name: 'python' })

      if(widget instanceof NotebookPanel){
        try {
          const context = widget.context.sessionContext
        
        await NotebookActions.runAll(widget.content,context)
        } catch (error) {
          console.log("error",error)
        }
      }else{
        console.log('Nope yrr')
      }
    }

    // notifications for the host
    const notifyHostFileSaved = (): void => {
      const message = { type: 'from-iframe-to-host-about-file-status', message: 'File saved successfully' };
      window.parent.postMessage(message, '*');
    };

    // sending id to host : currently temporary
    // const postId = (id: string) => {
    //   const message = { type: 'from-iframe-to-host-about-file-execution', message: id };
    //   window.parent.postMessage(message, '*');
    // }
  },
};

export default plugin;

Don't why it's failing

[krassowski]

Nothing obviously wrong in the code, what error do you get?

[gautamsarawagi]

I am not getting any error just the file is not getting executed actually. It is just opening the file not executing it.

[gautamsarawagi]

@krassowski Can u pls check it once. The HTML code I am using for it:

<!DOCTYPE html>
<html>
  <head>
    <title>JupyterLite File Save Example</title>
  </head>
  <body onload="waitForIframeActivation()">
    <h1>JupyterLite File Save Example</h1>
    <p>This example demonstrates uploading a file to JupyterLite.</p>

    <input type="file" id="fileUpload" />
    <br />
    <button onclick="saveFile()">Upload File</button>

    <div id="message"></div>

    <iframe
      name="jupyterlab"
      src="lite/"
      width="100%"
      height="600px"
      sandbox="allow-scripts allow-same-origin"
    ></iframe>

    <script>
      const fileToExecute = "new2.txt";

      function waitForIframeActivation() {
        window.addEventListener("message", (event) => {
          if (
            event.data.type === "file-communication" &&
            event.data.message ===
              "JupyterLab extension jupyterlab-iframe-bridge-example is activated!"
          ) {
            saveFile();
          }
        });
      }

      function saveFile() {
        const fileContent = "Hello";
        window.frames.jupyterlab.postMessage(
          {
            type: "from-host-to-iframe-for-file-saving",
            filePath: fileToExecute,
            fileContent,
          },
          "*"
        );
      }

      function executePythonCode(filePath, notebookContent) {
        window.frames.jupyterlab.postMessage(
          {
            type: "from-host-to-iframe-for-file-execution",
            filePath,
            fileContent: JSON.stringify(notebookContent),
          },
          "*"
        );
      }

      window.addEventListener("message", (event) => {
        if (event.data.type === "from-iframe-to-host-about-file-status") {
          const message = document.getElementById("message");
          message.innerText = event.data.message;
          if (event.data.message === "File saved successfully") {
            // Construct notebook content according to Jupyter Notebook format
            const notebookContent = {
              metadata: {
                nbformat: 4,
                nbformat_minor: 4
              },
              cells: [
                {
                  cell_type: "code",
                  execution_count: 1,
                  source: [
                    "import pandas as pd\n",
                    `data = pd.read_csv('${fileToExecute}')\n`,
                    "data.head()"
                  ],
                  outputs: []
                }
              ]
            };

            // Execute Python code after file save
            executePythonCode('work.ipynb', notebookContent);
          }
        }

        if (event.data.type === "from-iframe-to-host-about-file-execution") {
          console.log("Id for the execution : ", event.data.message);
        }
      });
    </script>
  </body>
</html>

[gautamsarawagi]

@krassowI If you can please help with the mistakes in the code above. I am unable to perform the auto-execution of code.

[gautamsarawagi]

@krassowski I got the issue. I was not waiting for the session context to be fully ready before trying to execute the notebook cells.

Thanks a lot for the help. Really appreciate it.

Closing the discussion.